लेख

आधारभूत जाभास्क्रिप्ट प्रशिक्षण पाठ्यक्रमको लागि समाधानको साथ जाभास्क्रिप्ट अभ्यास

Java आधारभूत प्रशिक्षण पाठ्यक्रमको लागि समाधानको साथ जाभा लिपि अभ्यासहरूको सूची।

व्यायाम को संख्या सरल देखि सबै भन्दा जटिल सम्म कठिनाई को स्तर को सूचक हो। यदि तपाइँसँग कुनै टिप्पणी, प्रश्न वा सुझावहरू छन् भने: हामीलाई जानकारी @ मा लेख्नुहोस्bloginnovazione.it

अभ्यास १: वाक्यको साथ अनुच्छेद भएको html पृष्ठ लेख्नुहोस्:

जे पनि गलत हुन सक्छ गलत हुनेछ

जाभास्क्रिप्ट ट्रिगर संग केहि घटनाहरु:

- अनक्लिक: पाठको लागि बोल्ड र पृष्ठभूमिको लागि पहेंलो सेट गर्नुहोस्
- अनमाउसओभर: पाठको लागि रेखाङ्कित सेट र पृष्ठभूमिको लागि सुन्तला
- 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