Artiklar

JavaScript-övningar med lösning för grundläggande JavaScript-utbildning

Lista över java script övningar med lösning för Java Basic utbildningskurs.

Numreringen av övningen är en indikation på svårighetsgraden, från den enklaste till den mest komplicerade. Om du har några kommentarer, frågor eller förslag: skriv till oss på info @bloginnovazione.it

Övning 1: Skriv en HTML-sida som innehåller ett stycke med meningen:

Allt som kan gå fel kommer att gå fel

med javascript utlöser vissa händelser:

– onclick : ställ in fetstil för texten och gul för bakgrunden
– onmouseover : ställ in understruket för texten och orange för bakgrunden
– onmouseout : ställ in 16px teckensnitt för texten och ljusblått för bakgrunden

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

Övning 2: Skriva en HTML-sida med fyra element ordnade på tre rader i mitten av sidan (horisontellt)

– på första raden matar två in text sida vid sida och på avstånd från varandra
– på den andra raden en knapp med '+'-operatorn, när du klickar på knappen (onclick-händelse) måste du läsa de två inmatningsfälten på den första raden, lägga till dem och skriva resultatet i stycket på den tredje raden
– på tredje raden ett stycke

skriv js-koden i en extern fil för att importera till html via src för att infoga i avsnittet

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