Artikel

Latihan JavaScript sareng solusi pikeun kursus pelatihan JavaScript Dasar

Daptar latihan java script kalawan solusi pikeun kursus latihan Java Basic.

Panomeran latihan nuduhkeun tingkat kasulitan, ti nu pangbasajanna nepi ka nu paling pajeulit. Upami anjeun gaduh koméntar, patarosan atanapi saran: nyerat ka kami di info @bloginnovazione.it

Latihan 1: Tulis halaman html anu ngandung paragraf sareng kalimah:

Naon waé anu salah bakal salah

kalawan javascript pemicu sababaraha acara:

– onclick : setel kandel pikeun téks jeung konéng keur latar
– onmouseover: set digaris handap pikeun téks jeung oranyeu keur latar
- onmouseout: nyetél font 16px kanggo téks sareng biru muda pikeun latar

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

Latihan 2: Nulis halaman html kalayan opat unsur disusun dina tilu garis di tengah halaman (horizontal)

– dina baris kahiji dua input téks samping jeung dipisahkeun
- dina garis kadua tombol sareng operator '+', nalika anjeun ngaklik tombol (acara onclick) anjeun kedah maca dua widang input tina baris kahiji, tambahkeun sareng nyerat hasilna dina paragraf garis katilu
– dina baris katilu a paragraf

nulis kode js dina file éksternal pikeun ngimpor kana html via src pikeun nyelapkeun dina bagian

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