Kenalan dengan JavaScript, Otak di Balik Web Interaktif

Selama 11 episode terakhir, kamu membangun halaman web yang indah tapi diam. Diklik tidak merespons, diketik tidak mengingat, di-scroll tidak berubah. Sekarang kita menyalakan apinya. JavaScript adalah bahasa yang memberi otak pada halaman web: merespons klik, memvalidasi form, mengambil data, menganimasikan tampilan. Kalau HTML adalah kerangka dan CSS adalah penampilan, JavaScript adalah sistem sarafnya. Ini episode pembuka seri JavaScript Basic, dan sudut pandangnya berbeda dari seri sebelumnya: kita mulai dari cara berpikir, bukan dari daftar sintaks.

Dua persepsi salah yang perlu diluruskan. Pertama, "JavaScript itu versi Java yang disederhanakan". Bukan. Keduanya bahasa yang sama sekali berbeda, namanya mirip murni karena strategi marketing tahun 1995. JavaScript awalnya bernama Mocha, lalu LiveScript, lalu diganti menjadi JavaScript untuk menumpang popularitas Java yang sedang naik daun. Jangan tertukar. Kedua, "JavaScript cuma untuk efek-efek kecil di web". Dulu mungkin iya. Sekarang JavaScript menjalankan server (Node.js), aplikasi mobile, bahkan program desktop. Tapi semua kehebatan itu berakar dari konsep dasar yang akan kamu pelajari di seri ini.

Kenapa JavaScript Ada

Cerita singkatnya begini. Tahun 1995, Brendan Eich di Netscape diminta membuat bahasa scripting untuk browser dalam waktu super singkat, konon sekitar 10 hari. Tujuannya sederhana: halaman web waktu itu statis total, dan orang ingin ada yang bisa "bergerak" tanpa harus me-reload halaman. Bahasa itu lahir, lalu Microsoft membuat versi tiruannya sendiri bernama JScript yang sedikit berbeda, dan mulailah era kacau di mana kode yang jalan di satu browser rusak di browser lain.

Untuk mengakhiri kekacauan itu, bahasa ini distandarisasi oleh organisasi ECMA International pada 1997. Versi standarnya dinamakan ECMAScript, karena nama "JavaScript" adalah merek dagang yang tidak bisa dipakai untuk standar. Jadi rumusnya: ECMAScript adalah buku aturannya, JavaScript adalah bahasa yang mengikuti aturan itu. Kalau kamu mendengar istilah ES6 atau ES2015, itu nama versi standarnya, dan versi itulah yang membawa fitur-fitur modern yang akan kamu pakai.

Pelajaran dari sejarah ini: JavaScript dirancang untuk satu hal, membuat web interaktif. Semua yang kamu pelajari di seri ini kembali ke tujuan itu.

Tiga Cara Menjalankan JavaScript

Kamu tidak butuh install apa-apa untuk mulai. Ada tiga cara, dari yang paling cepat sampai yang paling beneran:

1. Konsol browser. Tekan F12 (atau Ctrl+Shift+J), pilih tab Console, ketik kode, tekan Enter. Ini kalkulator sekaligus laboratorium JavaScript-mu. Setiap kali ingin mencoba sesuatu dengan cepat, larinya ke sini.

2. Tag script di HTML. Tulis kode di antara <script> dan </script>, biasanya sebelum penutup </body> supaya HTML-nya selesai dimuat dulu.

<script>
  alert("Halo dari JavaScript!");
</script>

3. File terpisah. Cara profesional: tulis di file app.js, hubungkan dengan <script src="app.js"></script>. Sama seperti CSS eksternal, alasannya sama: bisa dipakai ulang dan rapi.

console.log("Halo");

Empat Cara JavaScript Berkomunikasi

JavaScript punya beberapa cara menampilkan sesuatu dan menerima input. Masing-masing untuk keperluan berbeda:

• console.log("pesan"): menulis ke konsol. Untuk debugging, dipakai terus-menerus sepanjang kariermu.
• alert("pesan"): memunculkan kotak dialog popup. Menghentikan seluruh kode sampai pengguna menekan OK. Bagus untuk demo, mengganggu untuk aplikasi beneran, pakai hemat-hemat.
• prompt("Siapa namamu?"): popup yang meminta input teks dan mengembalikan jawaban sebagai string.
• Mengubah isi halaman: cara yang benar untuk berkomunikasi dengan pengunjung.

let nama = prompt("Siapa namamu?");
alert("Halo, " + nama + "!");
console.log("Pengunjung bernama: " + nama);

Perhatikan kata let: itu cara membuat variabel, kotak penyimpanan bernama untuk data. let nama = ... artinya "buatkan kotak bernama nama dan simpan jawaban pengguna di dalamnya". Tanda + di antara string artinya "sambungkan". Variabel adalah konsep pertama dari "cara berpikir seperti programmer", dan episode berikutnya akan membedahnya penuh.

Keajaiban Pertama: Mengubah Halaman Sendiri

Ini momen yang membuat JavaScript terasa ajaib. Dengan DOM (Document Object Model, cara JavaScript "melihat" struktur HTML sebagai objek yang bisa diutak-atik), halaman bisa mengubah dirinya sendiri.

<h1 id="judul">Halo, dunia!</h1>
<button id="tombol">Klik saya</button>

<script>
  let judul = document.getElementById("judul");
  let tombol = document.getElementById("tombol");

  tombol.addEventListener("click", function() {
    judul.textContent = "Tombolnya diklik!";
    judul.style.color = "#E8590C";
  });
</script>

Uraikan alur berpikirnya baris per baris, karena ini pola yang akan kamu pakai ratusan kali:

1. document.getElementById("judul"): "Ambilkan elemen yang id-nya judul." Hasilnya disimpan di variabel judul. Sekarang variabel itu adalah pegangan ke elemen aslinya.
2. tombol.addEventListener("click", ...): "Tombol, kalau kamu diklik, jalankan fungsi ini." Ini namanya event: JavaScript menunggu sesuatu terjadi, lalu bereaksi.
3. Di dalam fungsi: ubah textContent (isi teksnya) dan style.color (warnanya, ya, JavaScript bisa mengatur CSS juga).

Perhatikan: tidak ada reload halaman. Tidak ada kirim data ke mana-mana. Halaman yang sama, diubah dari dalam, seketika. Inilah esensi web interaktif.

tombol.addEventListener("click", function() {
  judul.textContent = "Tombolnya diklik!";
});

JavaScript Tidak Hanya di Browser

Meski lahir untuk browser, JavaScript sekarang hidup di banyak tempat. Tahun 2009, Ryan Dahl mengambil mesin JavaScript V8 milik Chrome dan menjalankannya di luar browser, lahirlah Node.js. Sejak itu JavaScript bisa menjadi bahasa server, dan satu bahasa dipakai untuk frontend dan backend sekaligus. Nanti di seri Node.js dan Express (fase 6 kurikulum kita), kamu akan merasakan sendiri manfaatnya.

Untuk seri ini, fokus kita tetap browser, karena di sanalah JavaScript bertemu HTML dan CSS. Satu hal penting untuk dipahami sejak awal: console.log, alert, dan document sebenarnya BUKAN bagian dari bahasa JavaScript inti. Mereka disediakan oleh lingkungan tempat kode berjalan (browser menyediakan DOM dan Console API, Node.js menyediakan API-nya sendiri). Bahasa intinya (variabel, fungsi, perulangan) sama di mana-mana, "perabot" di sekitarnya tergantung rumahnya. Pembedaan ini akan menyelamatkanmu dari kebingungan saat pindah ke Node.js nanti.

let umur = prompt("Umur kamu berapa?");
console.log(umur + 5);

Latihan: Tombol Sapaan Interaktif

Latihan ini menggabungkan semua yang baru kamu pelajari. Buat file sapa.html:

1. Buat h1 dengan id sapaan berisi teks "Halo, siapa di sana?", sebuah button dengan id tombol-sapa bertuliskan "Kenalan yuk", dan hubungkan file sapa.js terpisah.
2. Di sapa.js: saat tombol diklik, minta nama lewat prompt, lalu ubah isi h1 menjadi "Halo, [nama]! Selamat datang di web interaktif." dan ubah warnanya. Catat juga namanya ke console dengan console.log.
3. Ubah, jangan ketik ulang: setelah berhasil, modifikasi kodenya supaya kalau pengguna menekan Cancel pada prompt (jawabannya null), sapaan berubah menjadi "Yah, tidak jadi kenalan." Pikirkan dulu alurnya sebelum menulis: data apa yang mungkin masuk, kondisi apa yang perlu dicek.
4. Buka DevTools tab Console, klik tombolnya beberapa kali dengan nama berbeda, dan perhatikan log-nya. Biasakan membuka konsol setiap kali bereksperimen dengan JavaScript mulai sekarang.

Di episode berikutnya, Variabel, Tipe Data, dan Operator di JavaScript, kita masuk ke fondasi cara berpikir programmer: menyimpan data dalam variabel, mengenal jenis-jenis data, dan mengolahnya dengan operator. Mulai dari sanalah kamu benar-benar "ngoding", bukan sekadar menempel kode.