Artikel

Latihan JavaScript dengan solusi untuk kursus pelatihan JavaScript Dasar

Daftar latihan skrip java dengan solusi untuk kursus pelatihan Dasar Java.

Penomoran latihan menunjukkan tingkat kesulitan, dari yang paling sederhana hingga yang paling rumit. Jika Anda memiliki komentar, pertanyaan atau saran: tulis kepada kami di info @bloginnovazione.it

Latihan 1: Tulis halaman html yang berisi paragraf dengan kalimat:

Apa pun yang bisa salah akan salah

dengan javascript memicu beberapa peristiwa:

– onclick : set bold untuk teks dan kuning untuk background
– onmouseover : atur garis bawah untuk teks dan oranye untuk latar belakang
– onmouseout : atur font 16px untuk teks dan biru muda untuk latar belakang

<!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: Menulis halaman html dengan empat elemen disusun dalam tiga baris di tengah halaman (mendatar)

– di baris pertama dua input teks berdampingan dan diberi spasi
– di baris kedua tombol dengan operator '+', ketika Anda mengklik tombol (acara onclick) Anda harus membaca dua bidang input dari baris pertama, menambahkannya dan menulis hasilnya di paragraf baris ketiga
- di baris ketiga paragraf

tulis kode js di file eksternal untuk diimpor ke html melalui src untuk dimasukkan di 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