Apa Itu JavaScript? Panduan Pemula untuk Bahasa Pemrograman Web

Sampai di sini kamu sudah kenalan dengan dua dari tiga bahasa web. Lewat HTML kamu bisa menyusun struktur halaman, dan lewat CSS kamu bisa membuatnya enak dilihat. Masalahnya, halaman yang dihasilkan keduanya kebanyakan cuma diam saja. Tombol diklik, tidak terjadi apa-apa. Kotak isian diketik, juga tidak ada reaksi. Supaya halaman benar-benar bisa melakukan sesuatu, kamu butuh bahasa yang ketiga: JavaScript.

JavaScript inilah yang menyulap halaman statis menjadi aplikasi yang interaktif — memunculkan dan menyembunyikan elemen, menanggapi klik, memvalidasi form, memperbarui konten tanpa perlu memuat ulang halaman, dan masih banyak lagi. Di antara ketiga bahasa tadi, JavaScript juga yang paling besar cakupannya, sekaligus yang pertama benar-benar masuk ranah pemrograman — ada logika dan ada pengambilan keputusan di dalamnya. Tapi tenang, nggak usah keder duluan. Kita akan mulai pelan-pelan dari titik paling awal.

JavaScript itu sebenarnya apa

JavaScript adalah bahasa pemrograman yang berjalan di dalam browser. Bagian “di dalam browser” ini penting, dan kalau dipikir-pikir cukup keren: setiap browser sudah punya mesin JavaScript bawaan, jadi kode yang kamu tulis itu langsung dijalankan di perangkat pengunjung — dan dari situlah halaman bisa menanggapi apa pun yang mereka lakukan.

Di sinilah letak perbedaan mendasarnya dengan HTML dan CSS. Coba ingat lagi model tiga lapisan tadi:

HTML itu strukturnya — apa saja yang ada di halaman (judul, paragraf, tombol).
CSS itu tampilannya — seperti apa wujudnya (warna, tata letak, font).
JavaScript itu perilakunya — apa yang dikerjakannya (segala hal yang terjadi saat kamu berinteraksi).

Pakai lagi perumpamaan rumah seperti sebelumnya: HTML itu rangka dan temboknya, CSS itu cat dan perabotannya, sementara JavaScript itu listrik dan saluran airnya — sistem yang bekerja dan langsung merespons begitu kamu menekan saklar atau memutar keran. Rumah tanpa semua itu memang tetap berdiri dan kelihatan rapi, tapi tidak ada yang benar-benar berfungsi. Nah, JavaScript-lah yang membuat halaman jadi berfungsi.

JavaScript ADALAH bahasa pemrograman (tidak seperti HTML dan CSS)

Ini benar-benar lompatan yang besar. HTML dan CSS bukan bahasa pemrograman — keduanya cuma menggambarkan struktur dan gaya, tapi tidak bisa mengambil keputusan atau menjalankan logika apa pun. JavaScript bisa. Ia mampu menyimpan informasi, menentukan pilihan (“kalau pengguna sudah login, tampilkan ini”), mengulang sebuah aksi, menghitung, sampai bereaksi terhadap suatu kejadian. Kemampuan itu membuatnya jauh lebih bertenaga, walaupun konsekuensinya memang ada lebih banyak hal yang perlu dipelajari. Tapi setimpal kok — di sinilah halamanmu akhirnya benar-benar terasa hidup.

Apa yang bisa dilakukan JavaScript

Biar lebih kebayang, ini beberapa hal sehari-hari yang sebenarnya digerakkan oleh JavaScript di website yang kamu pakai tiap hari:

Menu dropdown yang terbuka begitu sebuah tombol diklik.
Validasi form (“mohon masukkan email yang valid”) sebelum datanya dikirim.
Memasukkan barang ke keranjang belanja tanpa halaman harus dimuat ulang.
Carousel gambar yang bergeser sendiri atau saat panahnya kamu klik.
Hasil pencarian yang langsung muncul sambil kamu mengetik.
Tombol “dark mode” yang langsung mengganti tema saat itu juga.

Semua contoh tadi sama saja polanya: JavaScript menangkap sesuatu yang dilakukan pengguna, lalu mengubah halaman sebagai tanggapannya. Begitu kamu menguasai pola itu, web tidak lagi sekadar tumpukan dokumen statis — ia berubah jadi sesuatu yang bisa kamu pakai untuk membangun alat dan aplikasi sungguhan.

Catatan soal nama: JavaScript vs Java

Satu hal kecil yang perlu diluruskan biar tidak salah kaprah: JavaScript dan Java itu dua bahasa yang benar-benar berbeda. Namanya memang mirip, tapi keduanya sama sekali tidak berkaitan — nama “JavaScript” dulu cuma keputusan marketing di era 1990-an yang ikut-ikutan numpang nama Java yang saat itu lagi naik daun. Kalau tujuanmu membuat halaman web jadi interaktif, JavaScript-lah yang kamu butuhkan. Java itu bahasa lain yang umumnya dipakai untuk jenis software yang berbeda. Jadi jangan sampai tertukar, dan untuk sekarang Java tidak perlu kamu pikirkan sama sekali.

Menambahkan JavaScript ke halaman

Sama seperti CSS, JavaScript juga harus disambungkan dulu ke HTML-mu. Ada dua cara utama, dan polanya bakal terasa familier buat kamu.

Internal: tag script

Kamu bisa menulis JavaScript langsung di dalam tag <script> pada HTML-mu. Tag ini biasanya ditaruh tepat sebelum tag penutup </body>:

<body>
  <h1>Halamanku</h1>

  <script>
    console.log("Halo dari JavaScript!");
  </script>
</body>

Eksternal: berkas terpisah (dianjurkan)

Sama persis seperti pada CSS, untuk proyek sungguhan cara yang lebih rapi adalah menaruh JavaScript-mu di file .js tersendiri lalu menautkannya:

<body>
  <h1>Halamanku</h1>

  <script src="script.js"></script>
</body>

Dan di script.js:

console.log("Halo dari JavaScript!");

Dengan begini kodemu jadi lebih rapi dan terpisah dari HTML, satu file skrip bisa dipakai untuk beberapa halaman sekaligus, dan ini memang sudah jadi standar untuk situs sungguhan mana pun — alasannya sama persis seperti memakai stylesheet eksternal.

Taruh tag script-mu di akhir body

Taruh tag <script> (atau tautan skrip eksternalmu) tepat sebelum tag penutup </body>. Alasannya begini: browser membaca halaman dari atas ke bawah, sementara JavaScript sering perlu mengutak-atik elemen HTML. Kalau skripnya jalan duluan sebelum elemen-elemen itu sempat dibuat, ya jelas tidak akan ketemu. Dengan menaruh skrip di bagian paling akhir, seluruh isi halaman sudah selesai dimuat lebih dulu, sehingga kodemu aman berinteraksi dengan apa pun yang ada di halaman. Kebiasaan sepele ini menyelamatkanmu dari salah satu bug pemula yang paling sering terjadi.

JavaScript pertamamu: console

Cara paling sederhana untuk melihat JavaScript benar-benar bekerja adalah lewat console.log(), yang mencetak pesan ke console browser — semacam panel khusus developer untuk menampilkan pesan dan melakukan debugging:

console.log("Halo, dunia!");
console.log(2 + 2);

Untuk melihat hasilnya, buka developer tools di browser-mu (tekan F12, atau klik kanan → Inspect), lalu pindah ke tab “Console”. Pesanmu akan muncul tercetak di situ. Selama proses belajar, console bakal jadi alat yang paling sering kamu buka — kamu akan memakai console.log() berulang kali untuk mengecek nilai dan memahami apa yang sebenarnya sedang dikerjakan kodemu.

Baris kedua tadi, console.log(2 + 2), sebenarnya memberi sinyal sesuatu: JavaScript bisa berhitung. Coba jalankan, dan console akan mencetak 4. JavaScript barusan benar-benar menghitung angka itu — hal yang sama sekali tidak bisa dilakukan oleh HTML maupun CSS. Inilah sisi “pemrograman” yang mulai kelihatan.

Sedikit cicipan interaktivitas

Biar kamu dapat sedikit bayangan ke mana arah semua ini, ini satu contoh kecil yang utuh — sebuah tombol yang memunculkan pesan begitu diklik:

<button onclick="alert('Kamu mengklikku!')">Klik aku</button>

Begitu pengguna mengklik tombol ini, JavaScript langsung memunculkan kotak peringatan berisi pesan tadi. Contohnya memang sederhana, tapi sudah merangkum inti dari cara kerja JavaScript: ada sesuatu yang terjadi (sebuah klik), lalu kode dijalankan sebagai tanggapannya. Hampir semua hal interaktif di web pada dasarnya cuma versi yang lebih rumit dari ide yang sama persis ini — sebuah kejadian, dan kode yang bereaksi terhadapnya.

(Pada kode sungguhan, JavaScript akan dipisah dari HTML, bukan ditempel langsung lewat onclick seperti ini. Cara yang benar untuk menangani kejadian akan kita bahas di bagian lain dari section ini. Untuk sekarang, contoh ini cukup untuk memperlihatkan konsep dasarnya.)

Penutup

Sekarang kamu sudah paham lapisan ketiga sekaligus yang paling bertenaga dari web:

JavaScript adalah bahasa pemrograman yang berjalan di browser dan mengatur perilaku sebuah halaman — apa saja yang dikerjakannya — sementara HTML mengurus struktur dan CSS mengurus tampilan.
Berbeda dari HTML dan CSS, ini pemrograman yang sesungguhnya: bisa menyimpan data, mengambil keputusan, mengulang aksi, dan bereaksi terhadap apa yang dilakukan pengguna.
Ia tidak ada hubungannya dengan Java, walaupun namanya mirip.
Cara menambahkannya adalah lewat tag <script>, idealnya berupa file .js eksternal yang ditautkan tepat sebelum </body>.
console.log() mencetak pesan ke console browser — alat andalanmu saat belajar maupun debugging.
Intinya, JavaScript itu soal kejadian dan reaksi: ada sesuatu yang terjadi, lalu kodemu berjalan.

Ini baru awal dari perjalanan yang jauh lebih panjang dibanding HTML atau CSS, dan justru di situ serunya — di sinilah kamu berhenti sekadar mendeskripsikan halaman dan mulai benar-benar memrogramnya. Langkah berikutnya yang paling oke adalah langsung buka console browser-mu dan coba sendiri beberapa baris console.log().

Di artikel selanjutnya, kita akan masuk ke fondasi paling dasar dari bahasa pemrograman apa pun: variabel dan tipe data — bagaimana JavaScript menyimpan dan memberi label pada potongan-potongan informasi supaya kodemu bisa mengolahnya.