JavaScript · Bab 5

Latihan Studi Kasus & Evaluasi Mandiri

Menggabungkan dasar JavaScript, percabangan, perulangan, DOM, CSS, dan event handling dalam studi kasus kecil.

Bab ini berisi praktik produksi atau tantangan mandiri, jadi hanya tersedia satu versi.

Bab ini menggabungkan konsep dari Bab 1 sampai Bab 4. Fokusnya bukan menghafal sintaks, tetapi membaca kebutuhan, memecahnya menjadi langkah kecil, lalu mengubah halaman web secara interaktif.

5.1 Studi Kasus: Pengukur Suhu Ruangan

Kebutuhan aplikasi:

1. Pengguna mengisi suhu pagi dan sore.
2. JavaScript menghitung rata-rata.
3. Program menentukan status Hangat atau Sejuk.
4. Hasil ditampilkan pada halaman.

5.2 Studi Kasus: Daftar Bekal Dinamis

Daftar bekal memakai input, tombol, array, perulangan, dan DOM. Saat tombol ditekan, bekal baru masuk ke array lalu daftar ditampilkan ulang.

Di lab, status nilai memakai kata yang tertulis di instruksi lab (misalnya Lulus untuk nilai yang cukup), bukan status suhu. Deklarasi ini sudah ada di lab: hasil, inputTugas, tugas, dan tombol terkait; jangan mendeklarasikannya lagi. Terapkan teknik contoh dengan data dan format keluaran yang diminta instruksi lab.

5.3 Evaluasi Mandiri

Gunakan daftar berikut untuk memeriksa pemahaman:

• Dapat menjelaskan tiga cara memasang JavaScript pada HTML.
• Dapat memilih kapan memakai const dan let.
• Dapat memakai operator dan percabangan untuk menentukan keputusan.
• Dapat memakai loop untuk mengolah array.
• Dapat memilih elemen DOM dan mengubah teks/class.
• Dapat memakai event untuk merespons klik, input, keyboard, atau submit form.

Soal Evaluasi Modul

Jawab pertanyaan berikut untuk memastikan konsep inti dari Bab 1 sampai Bab 4 sudah benar-benar dipahami:

1. Diberikan kode let x = "10"; let y = 20; console.log(x + y);. Apa yang tercetak dan mengapa?
2. Jelaskan perbedaan let, const, dan var, terutama dari sisi scope, reassign, hoisting, dan Temporal Dead Zone.
3. Tuliskan loop untuk mencetak angka genap dari 2 sampai 10.
4. Isi <select id="tahun"></select> dengan option tahun 2020 sampai 2026 memakai for.
5. Pilih seluruh elemen p.deskripsi, lalu ubah warna teksnya menjadi hijau.
6. Pasang event pada tombol btn-kirim agar paragraf status berubah menjadi "Pesan Terkirim" saat tombol diklik.
7. Buat percabangan yang mencetak "Sangat Baik" jika nilai minimal 85, "Baik" jika minimal 70, dan "Perlu Bimbingan" jika di bawah 70.
8. Buat fungsi cekLolos(nilai) dan jelaskan mengapa 75 === "75" bernilai false.

Berikutnya: JSON dan fetch di bab 6 untuk mengambil data dari server.