Artikels

JavaScript-oefeninge met oplossing vir Basiese JavaScript-opleidingskursus

Lys van Java script oefeninge met oplossing vir Basiese Java opleidingskursus.

Die nommering van die oefening is 'n aanduiding van die moeilikheidsgraad, van die eenvoudigste tot die mees ingewikkelde. As jy enige kommentaar, vrae of voorstelle het: skryf aan ons by info @bloginnovazione.it

Oefening 1: Skryf 'n html-bladsy wat 'n paragraaf bevat met die sin:

Enigiets wat verkeerd kan gaan, sal verkeerd loop

aktiveer sommige gebeurtenisse met javascript:

– onclick: stel vetdruk vir die teks en geel vir die agtergrond
– onmouseover : stel onderstreep vir die teks en oranje vir die agtergrond
– onmouseout: stel 16px-font vir die teks en ligblou vir die agtergrond

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

Oefening 2: Skryf 'n html-bladsy met vier elemente wat op drie lyne in die middel van die bladsy gerangskik is (horisontaal)

– in die eerste reël voer twee teks langs mekaar in en uitmekaar gespasieer
– in die tweede ry 'n knoppie met die '+' operateur, wanneer jy op die knoppie klik (onclick event) moet jy die twee invoervelde van die eerste ry lees, dit byvoeg en die resultaat in die paragraaf van die derde ry skryf
– in die derde reël 'n paragraaf

skryf die js-kode in 'n eksterne lêer om in die html in te voer via src om in die afdeling in te voeg

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