JavaScript dalam Browser

Toko online Budi menampilkan tombol “Tambah ke Keranjang”. Ketika tombol itu ditekan, angka pada ikon keranjang harus bertambah, total harga harus diperbarui, dan tombol berubah tampilan — semuanya tanpa memuat ulang halaman. HTML bisa menggambar tombolnya dan CSS bisa mewarnainya, tetapi keduanya tidak mampu membuat halaman bereaksi terhadap klik. Tugas itu jatuh ke JavaScript, satu-satunya bahasa yang dijalankan browser secara langsung.

Di dalam browser, JavaScript mendapat panggung yang jauh lebih luas daripada bahasa intinya saja. Browser menyediakan kumpulan API siap pakai: mengubah isi halaman, mendengarkan aksi pengguna, menyimpan data di sisi pengunjung, dan berkomunikasi dengan server. Chapter ini memetakan kemampuan-kemampuan tersebut dan menampilkan contoh nyata yang kita uji sendiri, sehingga istilah seperti DOM, event, dan browser API tidak lagi terasa abstrak.

Bahasa Inti vs API Browser #

Hal pertama yang perlu kita pisahkan dengan tegas adalah dua lapisan yang berbeda. Lapisan pertama adalah bahasa inti yang didefinisikan spesifikasi ECMAScript: aturan variabel, function, class, Promise, dan operator. Lapisan kedua adalah API browser — kumpulan object tambahan yang disediakan oleh lingkungan tempat kode berjalan (host environment). Tabel berikut merangkumnya:

Pemisahan ini menjelaskan perilaku yang sering membingungkan pemula: variabel dan function tetap bekerja di mana pun, tetapi document hanya ada di browser. Ketika berkas yang ditulis untuk halaman web dijalankan dengan Node.js, muncul pesan ReferenceError: document is not defined — bukan karena kodenya salah, melainkan karena lingkungan eksekusinya tidak menyediakan object tersebut.

Tiga Kemampuan Pokok di Browser #

Hampir semua interaksi pada halaman web modern berdiri di atas tiga kemampuan berikut:

• Manipulasi DOM: membaca dan mengubah struktur serta isi halaman — menambah elemen, mengganti teks, memodifikasi class untuk perubahan tampilan.
• Penanganan event: merespons aksi pengguna seperti klik, ketikan pada form, dan scroll, lalu menjalankan kode sebagai reaksinya.
• Komunikasi jaringan: mengambil atau mengirim data ke server lewat fetch tanpa memuat ulang halaman — fondasi aplikasi web modern.

Gabungan ketiganya terlihat di mana-mana pada situs yang kita pakai sehari-hari: validasi form yang menandai alamat email yang salah sebelum data dikirim, tab produk yang berganti konten saat diklik, galeri gambar yang meluncur halus, hingga mode gelap yang langsung mengubah seluruh tampilan halaman. Semua fitur itu adalah kombinasi dari membaca dan mengubah DOM, mendengarkan event, dan kadang bertanya ke server.

Chapter ini membahas dua kemampuan pertama lewat contoh yang bisa dijalankan; kemampuan ketiga menyusul setelah kita mengenal data dan function lebih dalam.

DOM: Halaman sebagai Object #

Ketika browser membaca dokumen HTML, browser membangun Document Object Model (DOM): pohon object yang mewakili setiap elemen halaman. Tag <h1> menjadi sebuah node, tag <button> menjadi node lain, dan seterusnya. Node-node itu punya hubungan keluarga: elemen <body> menjadi induk (parent) bagi elemen di dalamnya, sementara elemen di dalamnya adalah anak (child) bagi <body>. Struktur pohon ini meniru persis cara elemen HTML bersarang di dokumen.

JavaScript berinteraksi dengan pohon ini — membaca isinya, mengubahnya, menambah atau menghapus node, dan browser merender ulang bagian halaman yang berubah. Berkat DOM, halaman tidak lagi sekadar dokumen statis: ia menjadi struktur hidup yang bisa diprogram.

Kita mulai dari struktur HTML sederhana berikut. Perhatikan bahwa tag <script> diletakkan di akhir <body> agar elemen #judul sudah ada ketika kode dijalankan (aturan pemuatan yang lebih rapi dibahas pada section Script Tag):

<!DOCTYPE html>
<html>
  <body>
    <h1 id="judul">Selamat Datang</h1>
    <script src="ubah-judul.js"></script>
  </body>
</html>

Berkas ubah-judul.js membaca isi elemen judul, mengubahnya, lalu membaca ulang untuk membuktikan perubahan tersebut:

// ubah-judul.js — membaca dan mengubah isi halaman lewat DOM
const judul = document.querySelector("#judul");

console.log(`Sebelum: ${judul.textContent}`);

judul.textContent = "Toko Buku Maya";

console.log(`Sesudah: ${judul.textContent}`);

Output yang Dihasilkan (console browser):

Sebelum: Selamat Datang
Sesudah: Toko Buku Maya

Keluaran di atas dicatat dari eksekusi nyata kode ini pada lingkungan DOM jsdom di terminal; console Chrome maupun Firefox menghasilkan dua baris yang persis sama. Mari kita bedah baris demi baris:

1. Baris 2 (document.querySelector("#judul")): method querySelector mencari elemen pertama yang cocok dengan selector CSS #judul (tanda # berarti “berdasarkan atribut id”) dan mengembalikan object elemen tersebut.
2. Baris 4 (console.log(...)): properti textContent berisi teks di dalam elemen. Baris ini membaca nilai awal — "Selamat Datang" — sebelum ada perubahan.
3. Baris 6 (judul.textContent = "Toko Buku Maya"): penugasan ke textContent mengganti isi elemen. Browser mendeteksi perubahan DOM dan merender ulang bagian halaman yang bersangkutan.
4. Baris 8 (console.log(...)): pembacaan ulang menampilkan "Toko Buku Maya", membuktikan bahwa perubahan benar-benar tersimpan pada object elemen.

Merespons Aksi Pengguna lewat Event #

Mengubah judul saat halaman dibuka hanya berjalan sekali. Interaksi nyata membutuhkan event: sinyal yang dihasilkan browser ketika sesuatu terjadi — tombol ditekan, huruf diketik, kursor digerakkan. Kita mendaftarkan function sebagai penangan event (event handler) lewat addEventListener, dan browser menjalankan function itu setiap event terjadi:

const tombol = document.querySelector("#tambah");

tombol.addEventListener("click", function () {
  console.log("Tombol diklik!");
});

tombol.click(); // di browser nyata, klik datang dari pengguna

Output yang Dihasilkan (console browser):

Tombol diklik!

Contoh ini juga kami eksekusi nyata di lingkungan jsdom untuk memastikan keluarannya. Baris terakhir memanggil method click() secara manual hanya agar contoh bisa diuji tanpa pengguna; pada halaman sungguhan, klik berasal dari pengunjung. Bagian function () { ... } akan kita bedah tuntas pada section Functions — untuk sekarang, cukup pahami bahwa kita mengirimkan “paket kode” ke browser untuk dijalankan nanti.

Alur lengkapnya bisa digambarkan sebagai berikut:

Dalam kata-kata: pengguna menekan tombol, browser mencatat kejadiannya sebagai event click, browser menemukan listener yang terdaftar lewat addEventListener, menjalankan function penangan event, function tersebut mengubah DOM, dan browser merender ulang bagian yang berubah. Siklus inilah yang berulang ribuan kali pada aplikasi web yang kita pakai sehari-hari.

Setelah memahami peran JavaScript di browser, pertanyaan berikutnya wajar muncul: bisakah bahasa yang sama berjalan di luar browser? Jawabannya bisa — dan itulah topik chapter berikutnya.

// ubah-judul.js — membaca dan mengubah isi halaman lewat DOM
const judul = document.querySelector("#judul");

console.log(`Sebelum: ${judul.textContent}`);

judul.textContent = "Toko Buku Maya";

console.log(`Sesudah: ${judul.textContent}`);