Coba buka lagi halaman profil belajarmu, hasil akhir Session 2. Rapi, berwarna, dan sekarang bahkan tahu cara menyesuaikan diri di layar sempit. Tetapi coba klik apa pun di halaman itu. Ketik apa pun. Tunggu apa pun terjadi.

Tidak ada yang terjadi. Dan itu wajar, karena halaman ini belum tahu cara merespons.

HTML sudah mengurus strukturnya. CSS sudah mengurus tampilannya. Yang belum ada adalah perilaku: kemampuan halaman untuk bereaksi, menghitung, mengubah dirinya sendiri berdasarkan apa yang terjadi. Itu pekerjaan bahasa ketiga di dunia web, dan namanya JavaScript.

Kalau HTML adalah kerangka rumah dan CSS adalah cat serta penataannya, JavaScript adalah perilaku penghuninya: lampu yang menyala saat saklar ditekan, pintu yang berbunyi saat diketuk. Rumahnya sudah berdiri dan sudah rapi. Episode ini adalah perkenalan pertama dengan penghuninya.

Yang Akan Dipelajari

Di akhir episode ini, kamu akan memahami apa itu JavaScript dan bagaimana ia berhubungan dengan HTML dan CSS yang sudah kamu kuasai.

Kamu akan membuat file script.js pertamamu dan menghubungkannya ke halaman, mengikuti pola yang sama seperti menghubungkan style.css di Episode 2.01.

Kamu akan berkenalan dengan console, sebuah panel di browser tempat JavaScript bisa "berbicara" kepadamu, dan mencoba perintah pertamamu di sana: console.log().

Kamu juga akan mengenal variable, tempat menyimpan nilai, beserta tiga tipe data paling dasar: teks, angka, dan benar-salah.

Kita belum membahas cara JavaScript mengubah tampilan halaman, merespons klik, atau menyimpan kumpulan data. Semua itu punya jadwalnya sendiri di episode-episode berikutnya. Hari ini, JavaScript baru berbicara ke console, belum ke halamannya.

Apa Itu JavaScript

JavaScript adalah bahasa pemrograman yang berjalan di browser dan membuat halaman web bisa berperilaku, bukan sekadar tampil. Kalau HTML menjawab "ini bagian apa" dan CSS menjawab "bagian ini terlihat seperti apa", JavaScript menjawab "apa yang terjadi kalau begini".

Perbedaan ini penting dipegang sejak awal. Sejauh ini, halaman profil belajarmu selalu tampil sama persis setiap kali dibuka: judul yang sama, kartu yang sama, warna yang sama. Itu ciri halaman statis. Dengan JavaScript, halaman bisa mulai berubah sesuai keadaan: menghitung sesuatu, mengingat pilihan pengguna, menyesuaikan isi tanpa perlu memuat ulang. Kita belum sampai ke bagian mengubah tampilan hari ini, tetapi arahnya ke sana.

Satu prinsip yang layak dipegang sejak episode pertama ini: JavaScript sebaiknya memperkuat apa yang sudah dibangun HTML, bukan menggantikannya. Halaman yang strukturnya sudah bermakna sejak Session 1 harus tetap bermakna walau nanti diberi perilaku. Prinsip ini belum banyak terasa hari ini karena kita baru berbicara ke console, tetapi akan jadi pegangan penting begitu JavaScript mulai menyentuh halaman.

Menghubungkan Script ke Halaman

Sama seperti CSS, JavaScript butuh diperkenalkan ke halaman HTML supaya dijalankan. Caranya lewat element <script>.

Buat file baru bernama script.js, kosong dulu, di folder yang sama dengan index.html dan style.css. Lalu tambahkan satu baris di dekat penutup <body>:

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

Perhatikan letaknya: bukan di <head> seperti <link> untuk CSS, melainkan tepat sebelum </body>, setelah seluruh isi halaman. Alasannya sederhana. Browser membaca HTML dari atas ke bawah. Kalau <script> diletakkan di atas, ia bisa mulai berjalan sebelum seluruh halaman selesai dibaca, dan itu bisa membingungkan begitu JavaScript nanti mulai berurusan dengan isi halaman. Meletakkannya di akhir memastikan halaman sudah lengkap lebih dulu, baru perilakunya dinyalakan.

Attribute src menunjuk lokasi file, persis seperti href pada <link> atau src pada <img>. Pola yang sama, tiga kali kamu temui, tiga element berbeda.

Console: Tempat JavaScript Bicara

Sekarang bagian yang paling langsung terasa. Buka index.html di browser, lalu tekan F12 untuk membuka DevTools, alat yang sama yang kamu pakai untuk device toolbar di Episode 2.05. Kali ini, klik tab Console, bukan device toolbar.

Console adalah panel tempat JavaScript menuliskan pesan untukmu, dan tempat kamu bisa mencoba perintah JavaScript langsung tanpa menulis file. Ia semacam ruang bicara antara kamu dan browser.

Klik di dalam area console, ketik baris berikut, lalu tekan Enter:

console.log("Halo dari JavaScript");

Teks di dalam kutip langsung muncul di console. Itulah console.log() bekerja: ia menampilkan apa pun yang kamu berikan ke dalam tanda kurungnya. Perintah ini akan jadi teman paling setiamu sepanjang belajar JavaScript, dipakai untuk memeriksa apakah kode berjalan sesuai dugaan.

Coba juga ketik sembarang angka tanpa console.log, misalnya 2 + 2, lalu Enter. Console langsung menghitung dan menjawab 4. Console tidak hanya menampilkan pesan; ia juga bisa menjalankan JavaScript sungguhan, sekadar untuk mencoba-coba.

Variable: Tempat Menyimpan Nilai

Mengetik langsung di console enak untuk coba-coba, tetapi tidak tersimpan. Refresh halaman, semuanya hilang. Untuk menyimpan nilai supaya bisa dipakai lagi, JavaScript punya variable.

Variable adalah nama yang kita berikan untuk sebuah nilai, supaya nilainya bisa dipanggil ulang lewat nama itu. Cara membuatnya pakai kata kunci let, diikuti nama variable, tanda sama dengan, lalu nilainya:

let judulHalaman = "Profil Belajar HTML";

Baris ini membuat variable bernama judulHalaman dan mengisinya dengan teks "Profil Belajar HTML". Nama variable boleh kamu tentukan sendiri; pilih nama yang menjelaskan isinya, sama seperti prinsip memilih nama class di Episode 2.01.

Setelah dibuat, variable bisa dipanggil lewat namanya, tanpa kutip:

console.log(judulHalaman);

Baris ini menampilkan isi judulHalaman di console, yaitu Profil Belajar HTML.

Tipe Data Dasar

Nilai "Profil Belajar HTML" tadi punya tipe tertentu, dan JavaScript mengenali beberapa tipe data dasar. Tiga yang paling sering kamu pakai di awal adalah string, number, dan boolean.

String adalah teks, selalu ditulis di antara tanda kutip, boleh kutip dua atau kutip satu:

let judulHalaman = "Profil Belajar HTML";

Number adalah angka, ditulis tanpa kutip sama sekali:

let jumlahKategori = 4;

Boolean hanya punya dua kemungkinan nilai: true atau false, juga ditulis tanpa kutip. Ia dipakai untuk pertanyaan yang jawabannya benar atau salah:

let sudahResponsif = true;

Perhatikan pola pentingnya: string butuh kutip, number dan boolean tidak. Ini mirip aturan CSS yang kamu ingat dari Episode 2.02, tempat setiap jenis nilai punya aturan penulisannya sendiri. Kelupaan kutip pada string, atau menambah kutip pada number, adalah sumber error yang sangat umum bagi pemula, dan akan kita bahas lagi di bagian kesalahan umum.

Praktik Kecil: Data Halaman di Console

Waktunya menggabungkan semuanya. Buka script.js yang tadi kamu buat kosong, lalu isi dengan tiga variable berikut, masing-masing mendeskripsikan halaman profil belajarmu:

let judulHalaman = "Profil Belajar HTML";
let jumlahKategori = 4;
let sudahResponsif = true;

console.log(judulHalaman);
console.log(jumlahKategori);
console.log(sudahResponsif);

Tiga variable itu bukan angka sembarangan. judulHalaman adalah judul asli h1 di halamanmu sejak Episode 1.04. jumlahKategori adalah jumlah item di daftar kategori sejak Episode 1.03. Dan sudahResponsif merayakan pencapaian Episode 2.05 kemarin: halamanmu memang sudah responsif, jadi nilainya true.

Simpan file, lalu refresh index.html di browser. Buka lagi tab Console di DevTools. Halaman itu sendiri terlihat identik seperti sebelumnya, karena memang belum ada yang berubah di tampilannya. Tetapi di console, tiga baris ini akan menyambutmu:

Profil Belajar HTML
4
true

Kalau ketiga baris itu muncul, script-mu sudah terhubung dan berjalan dengan benar. Ini pertama kalinya file JavaScript-mu benar-benar dibaca oleh browser.

Sebelum lanjut, coba ubah nilai jumlahKategori menjadi angka lain, simpan, refresh, dan lihat console berubah mengikuti. Rasakan bahwa console selalu menampilkan nilai variable saat ini, bukan nilai yang kamu bayangkan.

Kesalahan Umum Pemula

Kesalahan pertama: lupa membuka tab Console, lalu mengira JavaScript tidak berjalan. Console tidak otomatis terbuka bersama halaman; kamu harus membuka DevTools dan memilih tabnya sendiri setiap kali ingin memeriksa.

Kesalahan kedua: tertukar kutip pada tipe data. Menulis let jumlahKategori = "4"; membuat 4 dianggap teks, bukan angka, dan nanti bisa berperilaku aneh saat dihitung. Ingat pola pentingnya: string pakai kutip, number dan boolean tidak.

Kesalahan ketiga: salah ketik nama variable saat memanggilnya. Menulis let judulHalaman lalu memanggil console.log(judulHalamn) membuat browser membalas error "is not defined", karena bagi JavaScript, itu dua nama yang berbeda. JavaScript sangat harfiah soal ejaan.

Kesalahan keempat: meletakkan <script> di <head> tanpa alasan khusus. Untuk tahap ini, selalu taruh di akhir <body>. Menaruhnya di <head> bisa membuat script mencoba berjalan sebelum halamannya siap.

Kesalahan kelima: mengedit script.js tapi lupa menyimpan atau lupa refresh. Ritual yang sama sejak Episode 1.01: simpan dulu, baru refresh, baru periksa hasilnya.

Rangkuman

JavaScript adalah bahasa perilaku: kalau HTML mengurus struktur dan CSS mengurus tampilan, JavaScript mengurus apa yang terjadi. Ia dihubungkan ke halaman lewat <script src="...">, diletakkan di akhir <body>.

Console, dibuka lewat tab Console di DevTools, adalah tempat JavaScript berbicara kepadamu lewat console.log(), dan tempat kamu bisa mencoba perintah langsung.

Variable menyimpan nilai lewat let nama = nilai, dan tiga tipe data dasar yang kamu kenal hari ini adalah string ("teks", pakai kutip), number (4, tanpa kutip), dan boolean (true/false, tanpa kutip).

Halaman profil belajarmu belum terlihat berubah, tetapi di baliknya, ia sudah mulai belajar bicara.

Berikutnya

Console yang menampilkan nilai tetap itu sudah lumayan, tetapi belum benar-benar berguna. JavaScript baru terasa hidup ketika ia bisa mengambil keputusan dan mengulang pekerjaan tanpa kita tulis satu per satu.

Di Episode 3.02, kita akan membahas function, blok kode yang bisa dipanggil ulang, dan condition, cara JavaScript memilih jalan berdasarkan situasi. Dengan keduanya, data yang hari ini cuma dipajang di console mulai bisa diolah.

Belajar Lebih Lanjut

Kalau ingin belajar lebih lanjut, kamu juga bisa membaca beberapa rujukan berikut.