ලිපි

මූලික ජාවාස්ක්‍රිප්ට් පුහුණු පාඨමාලාව සඳහා විසඳුමක් සහිත ජාවාස්ක්‍රිප්ට් අභ්‍යාස

ජාවා මූලික පුහුණු පාඨමාලාව සඳහා විසඳුම් සහිත ජාවා ස්ක්‍රිප්ට් අභ්‍යාස ලැයිස්තුව.

ව්යායාමයේ අංකනය සරලම සිට වඩාත් සංකීර්ණ දක්වා දුෂ්කරතා මට්ටම පෙන්නුම් කරයි. ඔබට කිසියම් අදහස්, ප්‍රශ්න හෝ යෝජනා තිබේ නම්: info @ හි අපට ලියන්නbloginnovazione.it

අභ්‍යාස 1: වාක්‍ය සහිත ඡේදයක් අඩංගු html පිටුවක් ලියන්න:

වැරදි විය හැකි ඕනෑම දෙයක් වැරදි වනු ඇත

ජාවාස්ක්‍රිප්ට් සමඟ සමහර සිදුවීම් අවුලුවයි:

- ක්ලික් කරන්න: පෙළ සඳහා තද සහ පසුබිම සඳහා කහ සකසන්න
– 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