Artikler

JavaScript-øvelser med løsning for grunnleggende JavaScript-treningskurs

Liste over java script øvelser med løsning for Java Basic treningskurs.

Nummereringen av øvelsen er en indikasjon på vanskelighetsgraden, fra den enkleste til den mest kompliserte. Hvis du har kommentarer, spørsmål eller forslag: skriv til oss på info @bloginnovazione.it

Oppgave 1: Skriv en html-side som inneholder et avsnitt med setningen:

Alt som kan gå galt vil gå galt

med javascript utløser noen hendelser:

– onclick : angi fet skrift for teksten og gul for bakgrunnen
– onmouseover : satt understreket for teksten og oransje for bakgrunnen
– onmouseout : angi 16px font for teksten og lyseblått for bakgrunnen

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

Oppgave 2: Skrive en html-side med fire elementer arrangert på tre linjer i midten av siden (horisontalt)

– i den første raden legger to inn tekst side ved side og med avstand fra hverandre
– i den andre linjen en knapp med '+'-operatoren, når du klikker på knappen (onclick-hendelse) må du lese de to inndatafeltene på den første linjen, legge dem til og skrive resultatet i avsnittet på den tredje linjen
– i tredje linje et avsnitt

skriv js-koden i en ekstern fil for å importere til html via src for å sette inn i seksjonen

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