DOM & User Interaction

Inilah puncak dari perjalanan belajar JavaScript Anda. Selama ini, kita hanya melihat hasil kode di dalam kotak hitam bernama Console. Sekarang, kita akan belajar cara menjembatani kode JavaScript kita dengan tampilan visual website yang dilihat oleh pengguna. Di sinilah Anda berubah dari seorang penulis logika menjadi seorang pengembang aplikasi web yang interaktif.

Apa itu DOM?

DOM (Document Object Model) adalah representasi dari halaman web Anda yang telah diubah oleh browser menjadi sebuah "pohon objek". Bayangkan halaman HTML Anda sebagai sebuah struktur pohon: <html> adalah akarnya, <body> adalah cabangnya, dan elemen seperti <h1> atau <button> adalah daun-daunnya.

Dengan JavaScript, kita bisa memanjat pohon ini, mengambil daunnya, mengubah warnanya, menghapus cabangnya, atau bahkan menanam daun baru secara dinamis tanpa harus me-refresh halaman.

Mengambil Elemen HTML

Sebelum memanipulasi sesuatu, kita harus "menangkap" elemen tersebut terlebih dahulu. JavaScript menyediakan beberapa cara, namun yang paling modern dan fleksibel adalah menggunakan querySelector.

// Menangkap elemen berdasarkan ID
const judul = document.querySelector("#title");

// Menangkap elemen berdasarkan Class
const deskripsi = document.querySelector(".description");

// Menangkap elemen berdasarkan Tag
const tombol = document.querySelector("button");

Mengubah Konten & Style

Setelah elemen berhasil ditangkap dan disimpan ke dalam variabel, kita bisa mulai melakukan perubahan. Kita bisa mengubah teksnya (textContent), mengubah struktur HTML di dalamnya (innerHTML), atau memanipulasi tampilannya (style).

const teksStatus = document.querySelector("#status");

// Mengubah isi teks
teksStatus.textContent = "Pesanan sedang diproses...";

// Mengubah gaya visual (CSS via JS)
teksStatus.style.color = "blue";
teksStatus.style.fontWeight = "bold";

Kesalahan Umum: Menggunakan properti CSS di JavaScript dengan tanda hubung (seperti font-weight) akan menyebabkan error. Di JavaScript, kita menggunakan format camelCase (seperti fontWeight).

Event Dasar & addEventListener

Agar website terasa hidup, ia harus bisa merespons tindakan pengguna (seperti klik, ketikan keyboard, atau pergerakan mouse). Tindakan ini disebut sebagai Event.

Kita menggunakan fungsi addEventListener() untuk "mendengarkan" kapan sebuah event terjadi, lalu menjalankan sebuah fungsi sebagai reaksinya.

const tombolKlik = document.querySelector("#btn-magic");

// addEventListener(nama_event, fungsi_yang_dijalankan)
tombolKlik.addEventListener("click", function () {
  alert("Tombol telah diklik! Keajaiban dimulai.");
  document.body.style.backgroundColor = "lightyellow";
});

Alur Eksekusi:

JavaScript mencari elemen dengan ID btn-magic.
JavaScript memasang "telinga" (listener) pada tombol tersebut untuk mendeteksi klik.
Saat pengguna mengklik tombol, fungsi di dalam kurung kurawal segera dijalankan.
Muncul peringatan alert, kemudian warna latar belakang seluruh halaman (document.body) berubah.

Studi Kasus: Interaksi User Sederhana (Counter)

Mari kita gabungkan semua yang telah kita pelajari: variabel, function, dan DOM untuk membuat aplikasi penghitung angka (Counter).

Struktur HTML (Asumsi):

<h1 id="angka-counter">0</h1>
<button id="btn-tambah">Tambah Angka</button>

Kode JavaScript:

// 1. Inisialisasi data di memori
let angka = 0;

// 2. Tangkap elemen DOM
const tampilanAngka = document.querySelector("#angka-counter");
const tombolTambah = document.querySelector("#btn-tambah");

// 3. Buat logika interaksi
tombolTambah.addEventListener("click", () => {
  // Update data di memori
  angka = angka + 1;

  // Update tampilan visual agar sesuai dengan data
  tampilanAngka.textContent = angka;

  // Tambahan logika: jika angka mencapai 10, beri warna merah
  if (angka >= 10) {
    tampilanAngka.style.color = "red";
  }
});

Kenapa ini penting? Contoh di atas menunjukkan pola dasar hampir semua aplikasi web modern:

Data berubah (angka).
Tampilan mengikuti perubahan data tersebut (textContent).
Logika memberikan aturan tambahan (if).

Prediksi Output: Setiap kali tombol diklik, angka di layar akan naik satu per satu. Saat klik ke-10, angka tidak hanya bertambah tetapi juga berubah warna menjadi merah. Pengguna merasakan pengalaman yang responsif dan dinamis.