लेख

मूलभूत JavaScript प्रशिक्षण अभ्यासक्रमासाठी उपायांसह JavaScript व्यायाम

Java बेसिक प्रशिक्षण अभ्यासक्रमासाठी उपायांसह जावा स्क्रिप्ट व्यायामांची यादी.

व्यायामाची संख्या सर्वात सोप्या ते सर्वात क्लिष्ट अशा अडचणीच्या पातळीचे सूचक आहे. आपल्याकडे काही टिप्पण्या, प्रश्न किंवा सूचना असल्यास: आम्हाला info@ वर लिहाbloginnovazione.it

व्यायाम 1: वाक्यासह परिच्छेद असलेले html पृष्ठ लिहा:

जे काही चुकीचे होऊ शकते ते चुकीचे होईल

जावास्क्रिप्टसह काही इव्हेंट ट्रिगर करा:

– onclick : मजकूरासाठी ठळक आणि पार्श्वभूमीसाठी पिवळा सेट करा
– onmouseover : मजकूरासाठी अधोरेखित केलेला सेट आणि पार्श्वभूमीसाठी नारिंगी
- onmouseout : मजकूरासाठी 16px फॉन्ट आणि पार्श्वभूमीसाठी हलका निळा सेट करा

<!DOCTYPE html>
<html lang="en">


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
  function onMouseClick() {
     document.getElementById("parag").style.fontWeight = "bold";
     document.getElementById("parag").style.backgroundColor = "yellow";
   }
   function onMouseOverEvent() {
     document.getElementById("parag").style.textDecoration = "underline";
     document.getElementById("parag").style.backgroundColor = "orange";
   }
   function onMouseOutEvent() {
     document.getElementById("parag").style.fontSize = "16px";
     document.getElementById("parag").style.backgroundColor = "lightblue";
   }
    </script>
</head>

<body>
    <p id="parag" >

व्यायाम 2: पृष्ठाच्या मध्यभागी तीन ओळींवर चार घटकांसह html पृष्ठ लिहिणे (क्षैतिजरित्या)

– पहिल्या ओळीत दोन इनपुट मजकूर शेजारी शेजारी आणि अंतरावर ठेवा
- दुसऱ्या ओळीत '+' ऑपरेटर असलेले बटण, जेव्हा तुम्ही बटणावर क्लिक कराल (ऑनक्लिक इव्हेंट) तुम्हाला पहिल्या ओळीतील दोन इनपुट फील्ड वाचावे लागतील, त्यांना जोडा आणि तिसऱ्या ओळीच्या परिच्छेदामध्ये निकाल लिहा.
- तिसऱ्या ओळीत एक परिच्छेद

विभागात समाविष्ट करण्यासाठी src द्वारे html मध्ये आयात करण्यासाठी बाह्य फाइलमध्ये js कोड लिहा

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
input {
    margin: 20px;
    margin-bottom: 30px;
}
.box-1 {
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
button {
    padding: 5px;
    width: 75px;
}
.container{
    margin: 250px;
}
</style>
<script>
function onClick() {
    let num1 = document.getElementById("num1").value;
    let num2 = document.getElementById("num2").value;
    let result;
    if (!isNaN(num1) && !isNaN(num2)) {
        result = parseFloat(num1) + parseFloat(num2);
    } else {
        result = num1 + num2;
    }
    document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<div class="container">
    <div class="box-1">
        <input id="num1" type="text" placeholder="Insert num or text . . .">  
        <input id="num2" type="text" placeholder="Insert num or text . . .">
    </div>
    <div class="box">
        <button  >

BlogInnovazione.it