مقالات

بنيادي جاوا اسڪرپٽ ٽريننگ ڪورس لاءِ حل سان جاوا اسڪرپٽ مشق

جاوا اسڪرپٽ مشقن جي فهرست جاوا بنيادي تربيتي ڪورس لاءِ حل سان.

مشق جو تعداد مشڪل جي سطح جو اشارو آهي، آسان کان سڀ کان وڌيڪ پيچيده تائين. جيڪڏهن توهان وٽ ڪي رايا، سوال يا تجويزون آهن: اسان ڏانهن لکو info@@bloginnovazione.it

مشق 1: هڪ html صفحو لکو جنهن ۾ جملي سان پيراگراف هجي:

جيڪو به غلط ٿي سگهي ٿو اهو غلط ٿي ويندو

جاوا اسڪرپٽ سان گڏ ڪجهه واقعن کي ٽڪرائڻ:

- آن ڪلڪ ڪريو: متن لاءِ بولڊ ۽ پس منظر لاءِ پيلو سيٽ ڪريو
- آن ماؤس اوور: متن لاءِ هيٺ ڏنل سيٽ ڪريو ۽ پس منظر لاءِ نارنگي
- آن ماؤس آئوٽ: متن لاءِ 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 صفحو لکڻ چار عناصر سان صفحو جي وچ ۾ ٽن لائينن تي ترتيب ڏنل (افقي طور تي)

- پهرين قطار ۾ ٻه ان پٽ ٽيڪسٽ پاسي کان ۽ ڌار ڌار
- ٻي قطار ۾ '+' آپريٽر سان هڪ بٽڻ، جڏهن توهان بٽڻ تي ڪلڪ ڪندا آهيو (آن ڪلڪ ڪريو واقعو) توهان کي پهرين قطار جا ٻه ان پٽ فيلڊ پڙهڻ گهرجن، انهن کي شامل ڪريو ۽ نتيجو لکو ٽين قطار جي پيراگراف ۾.
- ٽئين لائن ۾ هڪ پيراگراف

js ڪوڊ لکو خارجي فائل ۾ html ۾ درآمد ڪرڻ لاءِ src ذريعي سيڪشن ۾ داخل ڪرڻ لاءِ

<!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