🎯 Tujuan ⚡ Sintaks JavaScript 🌳 DOM & Events 🎮 Live DOM Studio 📝 Evaluasi Formatif ✨ Rangkuman & Refleksi
Learn / Informatika / Informatika Lanjut / 04. JavaScript & DOM
🚀 Informatika Lanjut · Modul 04

Pemrograman Web Interaktif: JavaScript & DOM

Jika HTML adalah tulang dan CSS adalah pakaian, maka JavaScript adalah otak dan otot yang membuat halaman web hidup! Pelajari variabel modern (let/const), manipulasi Document Object Model (DOM), penanganan event tombol klik, serta animasi web interaktif.

⏱️ Waktu: 45 Menit ⚡ Bahasa: JavaScript ES6+ 📝 Evaluasi: 20 Soal (4 Bagian)
🎯

Tujuan Pembelajaran

Kompetensi yang akan kamu kuasai setelah menyelesaikan modul ini

01.
Sintaks JavaScript Modern (ES6)

Menggunakan variabel let & const, fungsi panah (arrow function), dan template literal string.

02.
Manipulasi Dokumen DOM

Mengambil elemen HTML dengan document.getElementById() dan mengubah teks (innerText) serta style CSS secara dinamis.

03.
Menangani Event Interaktif (EventListener)

Merespons aksi klik tombol pengguna (click), input form (submit/input), dan keyboard.

04.
Membangun Web Widget Interaktif

Membuat fitur nyata seperti Dark Mode toggle, konverter satuan, dan kalkulator nilai interaktif di browser.

1

Fondasi JavaScript Modern

Bahasa pemrograman paling populer di dunia web yang berjalan langsung di browser

📦

1. let vs const

const phi = 3.14; (Nilai tetap)
let skor = 0; (Nilai dapat berubah)
Hindari penggunaan var lama.

🎯

2. Arrow Function

const sapa = (nama) => {
  return `Halo, ${nama}!`;
};

🌲

3. DOM Selection

const el = document.getElementById('judul');
el.style.color = 'blue';

2

Cara Kerja Event Listener

Mendengarkan dan merespons setiap interaksi jemari pengguna pada layar

// 1. Tangkap tombol target di HTML:
const tombol = document.getElementById('btn-klik');
// 2. Pasang pendengar event saat tombol diklik:
tombol.addEventListener('click', () => {
alert('Tombol berhasil diklik!');
document.body.style.backgroundColor = '#EEF2FF';
});
🎮

Live DOM Manipulation Studio

Ubah teks, warna, dan tema kartu elemen HTML di samping kanan menggunakan kontrol JavaScript live!

DOM Playground
⚡ Kontrol JavaScript Live:
RENDERED DOM TARGET #card-preview

Belajar JS Seru Banget!

Elemen ini dikontrol langsung secara real-time via DOM API.

❤️ 12 Siswa Menyukai
📝

Evaluasi Formatif: JavaScript & DOM

Uji kemampuan koding JavaScript, DOM selector, dan penanganan event (Total Skor: 100)

Target Kelulusan Minimal 70 Poin
Bagian A

Pilihan Ganda (5 Soal · Bobot: 25 Poin)

1. Keyword yang digunakan dalam JavaScript modern untuk mendeklarasikan variabel yang nilainya bersifat konstan dan tidak dapat diubah adalah...

2. Perintah JavaScript untuk memilih satu elemen HTML berdasarkan atribut identitas id-nya adalah...

3. Metode yang digunakan untuk memasang pendengar aksi interaksi pengguna (seperti klik tombol) pada suatu elemen DOM adalah...

4. Perhatikan kode berikut: const total = (a, b) => a + b;. Penulisan fungsi ringkas dengan tanda panah tersebut disebut...

5. Tag HTML yang digunakan untuk menautkan atau menuliskan kode program JavaScript di dalam dokumen web adalah...

Bagian B

Benar atau Salah (5 Soal · Bobot: 25 Poin)

1. JavaScript dan Java adalah dua bahasa pemrograman yang sama persis pencipta dan fungsinya.
2. Properti innerHTML dapat digunakan untuk memasukkan struktur tag HTML baru ke dalam sebuah elemen.
3. Perintah console.log() digunakan untuk menampilkan pesan teks di layar browser siswa secara langsung.
4. Melalui DOM API, JavaScript dapat mengubah warna latar belakang dan ukuran huruf elemen CSS secara dinamis.
5. Event submit pada form HTML dapat dicegah reload halamannya menggunakan perintah event.preventDefault().
Bagian C

Menjodohkan Properti DOM & Hasil Aksinya (5 Pasangan · Bobot: 25 Poin)

Bagian D

Urutan Membuat Fitur Dark Mode dengan JavaScript (Bobot: 25 Poin)

Urutkan proses penulisan logika tombol sakelar tema gelap:

A. Menyiapkan tombol HTML: <button id="btn-theme">🌙 Mode Gelap</button>
B. Memilih elemen tombol di JS: const btn = document.getElementById('btn-theme');
C. Memasang event listener klik: btn.addEventListener('click', () => { ... });
D. Men-toggle kelas gelap pada body: document.body.classList.toggle('dark-mode');
E. Memperbarui teks tombol menjadi ☀️ Mode Terang jika tema gelap aktif
✨

Rangkuman Materi & Refleksi Belajar

Tuliskan pemahaman dan pengalaman belajarmu pada materi ini

1. Interaktivitas Dinamis: JavaScript mengubah halaman web statis menjadi aplikasi web interaktif yang responsif.

2. Kekuatan DOM API: Setiap tag HTML dapat diakses dan diubah secara instan tanpa perlu memuat ulang halaman peramban.

3. Ekosistem Terbesar: JavaScript adalah keterampilan wajib bagi setiap pengembang front-end maupun full-stack modern di era kini.