JavaScript · Bab 5

Latihan Studi Kasus & Evaluasi Mandiri

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

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: Kalkulator Nilai Sederhana

Kebutuhan aplikasi:

1. Pengguna mengisi nilai tugas dan praktik.
2. JavaScript menghitung rata-rata.
3. Program menentukan status lulus atau remedial.
4. Hasil ditampilkan pada halaman.

5.2 Studi Kasus: Daftar Tugas Dinamis

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

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);. Outputnya adalah "1020" karena operator + melakukan concatenation saat salah satu operand berupa string.
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 cekKelulusan(nilai) dan jelaskan mengapa 75 === "75" bernilai false.

Lanjut ke Lab Bab 5 →