Peran JavaScript dalam Web

Halaman yang kita bangun selama course ini telah terstruktur rapi oleh HTML dan tampil menarik berkat CSS, tetapi semuanya diam: tombol tidak bereaksi, menu tidak terbuka, dan angka tidak berhitung. Lapisan yang menambahkan interaksi tersebut adalah JavaScript. Chapter ini memperkenalkan posisi JavaScript sebagai lapisan ketiga web, contoh interaksi yang sering kita temui, serta cara JavaScript bekerja di dalam browser. Di akhir chapter, kita membuat satu interaksi kecil dengan script inline.

Tiga Lapisan pada Halaman Web #

Pada chapter awal course ini kita melihat bahwa web modern dibangun oleh tiga teknologi yang saling melengkapi; kini saatnya menatap lapisan ketiga lebih dekat:

HTML dan CSS bersifat deklaratif: kita menyatakan hasil yang diinginkan, lalu browser yang mengerjakannya. JavaScript adalah bahasa pemrograman utuh dengan variabel, kondisi, perulangan, dan fungsi, sehingga kita dapat menuliskan langkah-langkah yang berubah-ubah mengikuti aksi pengunjung. Karena itulah JavaScript disebut lapisan perilaku (behavior).

Contoh Interaksi yang Digerakkan JavaScript #

Bayangkan toko daring fiktif milik Siti; beberapa interaksi berikut hampir pasti dikerjakan JavaScript:

• Menu mobile: tombol garis tiga membuka panel navigasi pada layar kecil.
• Validasi realtime: pesan “Format email belum benar” muncul saat Budi mengetik, sebelum form dikirim.
• Kalkulasi keranjang: jumlah barang dan total harga diperbarui begitu Siti menambah produk.
• Sapaan dinamis: heading menyapa “Selamat pagi” atau “Selamat malam” sesuai jam perangkat.

Pola pada semua contoh sama: browser mengamati aksi pengunjung seperti klik dan ketikan, lalu JavaScript merespons dengan membaca atau mengubah bagian halaman yang relevan.

Cara JavaScript Bekerja di Browser #

JavaScript berjalan di dalam browser pada komponen bernama JavaScript engine, tanpa perlu memasang apa pun. Saat parser mengurai dokumen, browser membentuk pohon objek bernama DOM (Document Object Model), yaitu representasi objek dari setiap elemen HTML pada halaman.

Dari JavaScript, kita memilih elemen, mengubah teksnya, menambah atau melepas class, serta memasang reaksi terhadap event — aksi pengunjung seperti klik dan ketikan. Setiap perubahan pada DOM langsung memperbarui layar; itulah yang membuat halaman terasa hidup.

JavaScript Bukan Pengganti HTML dan CSS #

Prinsip penting sebelum menulis script: jangan memakai JavaScript untuk hal yang telah cukup dengan HTML atau CSS. Contoh pilihan yang tepat:

• Navigasi antarhalaman cukup dengan elemen a; tidak perlu script.
• Konten yang terbuka-tutup sederhana dapat memakai elemen details (lihat section Interactive Elements).
• Pesan error form bawaan dari atribut validasi HTML biasanya lebih andal (lihat section Forms).
• Perubahan warna dan animasi tampilan adalah wilayah CSS.

Pendekatan ini disebut progressive enhancement: halaman tetap berfungsi tanpa JavaScript, lalu script menambah kenyamanan — sebab script dapat gagal karena koneksi lambat, dimatikan pengunjung, atau error pada kode.

Interaksi Kecil Pertama #

Kita tutup chapter ini dengan satu interaksi nyata: tombol yang mengubah teks sebuah paragraf. Contoh di bawah memakai tiga kemampuan JavaScript — memilih elemen, merespons klik, dan mengubah teks — yang dibedah tuntas pada chapter-chapter berikutnya; di sini cukup amati pola besarnya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Interaksi Pertama</title>
</head>
<body>
  <h1>Interaksi Pertama</h1>
  <p id="sapaan">Belum ada sapaan.</p>
  <button id="tombol-sapa" type="button">Tampilkan Sapaan</button>
  <script>
    const paragraf = document.getElementById("sapaan");
    const tombol = document.getElementById("tombol-sapa");
    tombol.addEventListener("click", function () {
      paragraf.textContent = "Halo, Budi! Selamat belajar JavaScript.";
    });
  </script>
</body>
</html>

Output yang Dihasilkan:

Saat halaman dibuka:
  - Paragraf menampilkan teks "Belum ada sapaan."
Saat tombol "Tampilkan Sapaan" ditekan:
  - Paragraf berubah menjadi "Halo, Budi! Selamat belajar JavaScript."

Mari kita telaah peran setiap baris penting di atas:

1. Baris 10 (<p id="sapaan">): paragraf sasaran perubahan; atribut id membuatnya dapat dipilih dari JavaScript.
2. Baris 11 (<button type="button">): tombol pemicu interaksi; type="button" mencegah tombol berperilaku sebagai tombol submit form.
3. Baris 13-14 (document.getElementById): script memilih paragraf dan tombol berdasarkan id-nya, sehingga kedua elemen siap dimanipulasi.
4. Baris 15 (addEventListener("click", ...)): script memasang reaksi; fungsi di dalamnya baru berjalan ketika tombol ditekan.
5. Baris 16 (paragraf.textContent = ...): reaksi mengganti isi teks paragraf, dan browser segera menampilkan teks baru.
6. Baris 12 dan 18 (<script>): script inline menempel di akhir body, tempat seluruh elemen telah terbentuk.

Kode di atas menempel langsung di dalam file HTML. Untuk halaman nyata, JavaScript biasanya dipisah ke file sendiri agar markup tetap bersih dan script dapat dipakai ulang antarhalaman; chapter berikutnya membahas cara menghubungkannya beserta pilihan posisinya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Apa itu JavaScript?
• MDN Web Docs — Elemen script

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Interaksi Pertama</title>
</head>
<body>
  <h1>Interaksi Pertama</h1>
  <p id="sapaan">Belum ada sapaan.</p>
  <button id="tombol-sapa" type="button">Tampilkan Sapaan</button>
  <script>
    const paragraf = document.getElementById("sapaan");
    const tombol = document.getElementById("tombol-sapa");
    tombol.addEventListener("click", function () {
      paragraf.textContent = "Halo, Budi! Selamat belajar JavaScript.";
    });
  </script>
</body>
</html>