Seri Pemrograman Web Dasar : Bagian 6 – Serunya Main-main dengan DOM & Event di JavaScript!

Halo, teman-teman web developer pemula! 👋
Nggak kerasa ya, kita sudah sampai di pertemuan ke-6. Setelah sebelumnya kita kenalan sama yang namanya HTML, CSS, dan JavaScript, sekarang waktunya kita naik level sedikit 🔥

Hari ini, kita bakal belajar tentang dua hal super keren dari JavaScript, yaitu:

• DOM (Document Object Model) 🧱
• Event Handling 🖱️

Yuk, kita bongkar satu per satu! 💥

---

🧱 Apa Itu DOM?

DOM itu ibarat peta interaktif dari halaman HTML kita. Bayangin aja kamu punya halaman web, terus kamu pengen mengubah teks, menyembunyikan gambar, atau mengganti warna background lewat JavaScript. Nah, semua itu bisa kamu lakukan lewat DOM.

DOM bikin setiap elemen di HTML bisa dijadikan objek yang bisa kita utak-atik dengan kode!

Contoh sederhana nih:

let judul = document.getElementById("judul");
judul.innerText = "Halo dunia, dari JavaScript!";

📌 Penjelasan:

• getElementById artinya ambil elemen HTML yang punya ID judul
• Terus kita ganti teksnya pakai innerText

Gampang kan? 😄

---

🖱️ Apa Itu Event?

Nah, sekarang bayangin kamu punya tombol di web kamu, dan kamu pengen bikin tombol itu bisa melakukan sesuatu saat diklik, misalnya munculin alert, ganti warna, atau nambah elemen.

Itulah yang disebut event.

📍 Event adalah kejadian, seperti:

• Klik tombol 🖱️
• Ketik di keyboard ⌨️
• Arahkan mouse 🐭
• Scroll halaman 📜
• Submit form 📩

Dan kita bisa menangani event itu dengan kode JavaScript, pakai yang namanya Event Listener.

Contohnya gini:

<button id="tombolKlik">Klik Aku!</button>

<script>
document.getElementById("tombolKlik").addEventListener("click", function() {
  alert("Tombolnya diklik dong 😆!");
});
</script>

🧠 Artinya:

• Saat tombol diklik, muncullah pesan alert yang lucu!

---

🎨 Studi Kasus: Ubah Background Halaman

Yuk coba latihan kecil-kecilan! Kita bikin tombol yang kalau diklik bisa mengganti warna latar belakang halaman:

<button id="ubahWarna">Ubah Warna Background</button>

<script>
document.getElementById("ubahWarna").addEventListener("click", function() {
  document.body.style.backgroundColor = "lightblue";
});
</script>

📢 Coba sendiri, dan lihat sihirnya terjadi! ✨

---

🔥 Kenapa Ini Penting?

Bayangin kamu bikin:

• Kalkulator online 🧮
• Formulir pendaftaran interaktif 📝
• Game kecil berbasis web 🎮
• Atau bahkan toko online 💳

Semuanya butuh interaksi dengan pengguna. Nah, DOM dan Event ini adalah kunci utama untuk bikin semua itu bisa berjalan dengan interaktif dan responsif.

---

🏁 Kesimpulan Dulu Nih

Hari ini kita udah belajar:
✅ Apa itu DOM dan gimana cara manipulasi elemen HTML lewat JavaScript
✅ Cara menangani event seperti klik, submit, dll
✅ Contoh kasus sederhana yang bisa langsung kamu praktekkan

Biar makin jago, jangan lupa latihan, latihan, dan latihan ya!
Coding itu kayak main gitar — makin sering dipraktikkan, makin mahir kamu jadinya! 🎸

---

💡 Tantangan Buat Kamu!

Coba buat proyek mini seperti ini:

• 🎈 Buat tombol “Ganti Tema” yang bisa ubah warna halaman
• 📋 Buat form pendaftaran yang saat dikirim menampilkan pesan “Terima kasih!”
• 🔢 Buat input angka dan tombol “Hitung Kuadrat”

Nanti minggu depan kita akan bahas tentang form & validasi di JavaScript. So, pastikan kamu nggak ketinggalan ya! 🚀