مضامین

جاوا اسکرپٹ کی مشقیں بنیادی جاوا اسکرپٹ ٹریننگ کورس کے حل کے ساتھ

جاوا اسکرپٹ مشقوں کی فہرست جاوا بنیادی تربیتی کورس کے حل کے ساتھ۔

مشق کی تعداد مشکل کی سطح کی نشاندہی کرتی ہے، آسان سے پیچیدہ تک۔ اگر آپ کے کوئی تبصرے، سوالات یا مشورے ہیں: ہمیں info@ پر لکھیں۔bloginnovazione.it

مشق 1: جملے کے ساتھ پیراگراف پر مشتمل ایک HTML صفحہ لکھیں:

جو بھی غلط ہو سکتا ہے وہ غلط ہو جائے گا۔

جاوا اسکرپٹ کے ساتھ کچھ واقعات کو متحرک کرتے ہیں:

- onclick : متن کے لیے بولڈ اور پس منظر کے لیے پیلا سیٹ کریں۔
- آن ماؤس اوور: متن کے لیے خط کشیدہ اور پس منظر کے لیے نارنجی سیٹ
- 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