Artiklid

JavaScripti harjutused koos lahendusega JavaScripti baaskursuse jaoks

Java skripti harjutuste loend koos lahendusega Java Basic koolituskursuse jaoks.

Harjutuse numeratsioon näitab raskusastet, alates kõige lihtsamast kuni kõige keerulisemani. Kui teil on kommentaare, küsimusi või ettepanekuid: kirjutage meile aadressil info @bloginnovazione.it

Harjutus 1: Kirjutage html-leht, mis sisaldab lõiku lausega:

Kõik, mis võib valesti minna, läheb valesti

JavaScript käivitab mõned sündmused:

– onclick : määrake teksti jaoks paks ja tausta jaoks kollane
– onmouseover : määrake teksti jaoks allajoonitud ja taustaks oranž
– onmouseout : määrake teksti jaoks 16 piksli font ja tausta jaoks helesinine

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

Harjutus 2: HTML-lehe kirjutamine nelja elemendiga, mis on paigutatud kolmele reale lehe keskel (horisontaalselt)

– esimeses reas kaks sisestusteksti kõrvuti ja vahedega
– teises reas nupp operaatoriga '+', nupule klõpsates (onclick sündmus) tuleb lugeda esimese rea kaks sisestusvälja, lisada need ja kirjutada tulemus kolmanda rea lõiku
– kolmandal real lõik

kirjutage js-kood välisesse faili, et importida jaotisesse sisestamiseks src kaudu html-i

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