Straipsniai

JavaScript pratimai su Bazinio JavaScript mokymo kurso sprendimu

Java scenarijaus pratimų sąrašas su Java Basic mokymo kurso sprendimu.

Pratimo numeracija rodo sudėtingumo lygį, nuo paprasčiausio iki sudėtingiausio. Jei turite pastabų, klausimų ar pasiūlymų: rašykite mums info @bloginnovazione.it

1 pratimas: parašykite html puslapį su pastraipa su sakiniu:

Viskas, kas gali suklysti, suklys

su javascript suaktyvina kai kuriuos įvykius:

– onclick : nustatykite paryškintą tekstą ir geltoną foną
– ant mouseover : nustatykite pabrauktą tekstą ir oranžinę foną
– onmouseout: nustatykite 16 pikselių šriftą tekstui ir šviesiai mėlyną foną

<!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 pratimas: HTML puslapio su keturiais elementais, išdėstytais trimis eilutėmis puslapio centre (horizontaliai) rašymas

– pirmoje eilutėje du įvesties tekstai vienas šalia kito ir vienas nuo kito
– antroje eilutėje mygtukas su '+' operatoriumi, paspaudus mygtuką (onclick įvykis) turite perskaityti du pirmos eilutės įvesties laukus, juos pridėti ir įrašyti rezultatą trečios eilutės pastraipoje
– trečioje eilutėje pastraipa

parašykite js kodą išoriniame faile, kad importuotumėte į html per src ir įterptumėte į skyrių

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