Contoh Sederhana: Mengubah Tombol
Ketika kamu mengklik tombol:
- JavaScript mendeteksi aksi klik pada elemen HTML tersebut.
- JavaScript kemudian ngasih perintah ke DOM untuk:
- Mengubah Struktur (HTML): Misalnya, menambahkan elemen paragraf baru di bawah tombol.
- Mengubah Gaya (CSS): Misalnya, mengubah warna tombol dari biru jadi hijau, atau nyembunyiin (hide) sebuah kotak.
Karena DOM berubah, tampilan website di browser juga langsung berubah secara dinamis, tanpa perlu me-load ulang seluruh halaman.
III. Studi Kasus: Membuat Tombol “Mode Gelap” (Dark Mode)
Ini adalah contoh yang paling sering kita temui, dan ini adalah kolaborasi sempurna dari tiga sekawan ini:
HTML Si Pemberi Struktur:
- Menyediakan tag untuk tombol: <button id=”tombol-mode”>Ubah Mode</button>
- Menyediakan tag untuk bodi halaman: <body class=”terang”>…</body>
CSS Si Pemberi Gaya (Skenario):
- CSS mendefinisikan tampilan awal (mode terang): body.terang { background: white; color: black; }
- CSS mendefinisikan tampilan mode gelap: body.gelap { background: black; color: white; }
JavaScript Si Otak Pintar (Aksi):
- Perintah JavaScript: “Hei, DOM, ketika si <button id=”tombol-mode”> diklik…”
- Logika JavaScript: “…periksa body halaman. Kalau dia punya class terang, ganti class-nya jadi gelap. Kalau dia punya class gelap, ganti balik jadi terang.”
Hasilnya? JavaScript hanya mengubah class di HTML, dan CSS langsung menjalankan gaya yang sesuai dengan class baru itu. Website pun langsung berubah dari terang ke gelap secara interaktif dan cepat!
IV. Kesimpulan: Fondasi Interaktivitas Modern
HTML, CSS, dan JavaScript adalah fondasi teknologi canggih di era digital ini. Mereka enggak bersaing, tapi saling melengkapi:
- HTML memastikan kontennya ada.
- CSS memastikan kontennya enak dilihat.
- JavaScript memastikan kontennya bisa berinteraksi, merespons pengguna, dan membuat pengalaman pengembangan web menjadi dinamis.
Tanpa kolaborasi ketiganya melalui DOM, website tidak akan bisa nge-load feed baru di media sosial, memvalidasi data formulir secara instan, atau menjalankan game online di browser. Mereka adalah trio wajib yang menjamin website modern itu interaktif dan fungsional.
