Artikoloj

JavaScript-ekzercoj kun solvo por Baza JavaScript trejna kurso

Listo de java skripto ekzercoj kun solvo por Java Baza trejna kurso.

La numerado de la ekzerco estas indika pri la nivelo de malfacileco, de la plej simpla ĝis la plej komplika. Se vi havas komentojn, demandojn aŭ sugestojn: skribu al ni ĉe info @bloginnovazione.it

Ekzerco 1: Skribu html-paĝon enhavantan alineon kun la frazo:

Ĉio, kio povas misfunkcii, misfunkcios

per Javaskripto ekigas kelkajn eventojn:

– onclick : agordu grasan por la teksto kaj flavan por la fono
– surmouseover : substrekita por la teksto kaj oranĝa por la fono
- onmouseout: agordu 16px tiparon por la teksto kaj helbluan por la fono

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

Ekzerco 2: Skribo de html-paĝo kun kvar elementoj aranĝitaj sur tri linioj en la centro de la paĝo (horizontale)

– en la unua vico du enigu tekston unu apud la alia kaj interspacigitaj
– en la dua vico butonon kun la operatoro '+', kiam vi alklakas la butonon (onklaka evento) vi devas legi la du enigkampojn de la unua vico, aldoni ilin kaj skribi la rezulton en la alineo de la tria vico
– en la tria linio alineo

skribu la js-kodon en ekstera dosiero por importi en la html per src por enmeti en la sekcion

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