Bab 01: Mengenal JavaScript dan Cara Kerjanya di Browser

Kalau kamu baca ini, berarti kamu udah siap buat kenalan sama JavaScript si tukang sulap di balik layar web yang bikin halaman web nggak cuma diam kayak lukisan di museum, tapi bisa langsung ngobrol sama kamu.

Bayangin kamu klik tombol “Beli Sekarang”, lalu muncul notifikasi “Yakin nih, Bos? Barangnya limited lho!” nah itu semua kerjaannya JavaScript. Tanpa dia, internet bakal kayak kopi instan tanpa gula, berfungsi, tapi hambar.

Artikel ini aku rancang khusus buat kamu yang pengin paham JavaScript dari nol, tanpa jargon ribet, tanpa teori bertele-tele, dan tentu dengan bahasa santai ala warung kopi biar otak nggak kepanasan.

Yuk, kita mulai perjalanan ke dunia scripting yang seru ini!

Apa Itu JavaScript?

JavaScript (sering disingkat JS) adalah bahasa pemrograman ringan, dinamis, dan interpreted, maksudnya dijalankan langsung tanpa perlu kompilasi panjang, yang digunakan untuk membuat web interaktif. Kalau HTML itu kerangka tubuh, dan CSS itu bajunya, maka JavaScript itu otot dan sarafnya yang bikin halaman bisa bergerak, bereaksi, dan ngegas pas kamu lama mikir di checkout!

JavaScript vs HTML & CSS

• HTML Struktur (judul, paragraf, tombol).
• CSS Gaya (warna, ukuran, animasi dasar).
• JavaScript Logika & perilaku, misal jika tombol diklik, akan tampilkan pesan, atau jika scroll ke bawah, maka sembunyikan header.

Mereka bertiga kayak trio superhero yang masing-masing kuat sendiri, tapi kalau kerja bareng? Web jadi hidup.

Sejarah singkat & standar ECMAScript

JavaScript lahir tahun 1995, diciptakan oleh Brendan Eich dalam waktu 10 hari! (Ya, kamu nggak salah baca, 10 hari!) Awalnya namanya Mocha, lalu ganti LiveScript, baru jadi JavaScript (meski nggak ada hubungannya dengan Java, itu cuma strategi marketing biar laku, maklum waktu itu Java lagi populer, jadi bisa dikatakan ikut numpang tenar).

Saat ini, spesifikasi resmi JavaScript diatur oleh ECMAScript (baca: Eck-Mah-Script), bukan nama band indie, tapi standar internasional yang bikin JS jalan konsisten di browser mana pun.

Kenapa Harus Belajar JavaScript?

Hampir semua website interaktif hari ini pakai JavaScript, dari Instagram, Google Maps, sampai website jualan online langgananmu. Bahkan aplikasi desktop (Electron) dan mobile (React Native) juga pakai JS!

Contoh hal-hal yang bisa dilakukan JS:

• Validasi form tanpa reload halaman
• Animasi saat scroll
• Fetch data dari server (AJAX/fetch)
• Game mini di browser
• Auto-complete saat ngetik di kolom pencarian

Bayangin kamu bikin toko online, trus pelanggan nanya, “Kapan barangnya sampe?” kalau pakai JS, kamu bisa bikin chatbot otomatis yang jawab: “Sabar ya, Bos! Lagi dikirim pakai jet pribadi!”

Cara Kerja JavaScript di Browser

Browser punya mesin khusus buat baca JavaScript, misalnya V8 (di Chrome), atau SpiderMonkey (di Firefox). Saat kamu buka halaman web, browser akan:

• Baca HTML bangun struktur
• Terapkan CSS kasih gaya
• Jalankan JavaScript kasih jiwa

JS dijalankan secara sinkron (baris per baris), tapi bisa juga asinkron (misal nunggu data dari server tanpa nge hang halaman).

Ruang lingkup (DOM, event, interaction)

• DOM (Document Object Model) Struktur HTML yang bisa diubah-ubah pakai JS.
• Event Aksi pengguna (klik, scroll, ketik) yang bisa dipantau oleh JS.
• Interaction Gabungan DOM + event → bikin halaman responsif ke user.

Contoh:

document.getElementById("tombol").addEventListener("click", () => {
  alert("Kamu klik aku? Aku terharu, Bos!");
});

document.getElementById("tombol").addEventListener("click", () => {
  alert("Kamu klik aku? Aku terharu, Bos!");
});

Di Mana Nulis Kode JavaScript

Tag <script>

JavaScript ditulis di dalam tag <script> di file HTML.

Inline vs internal vs external

• Inline JS langsung di atribut HTML, misal: onclick=”alert(‘Hai!’)”. Nggak disarankan karena susah dirawat.
• Internal JS di dalam <script>…</script> di file HTML. Oke buat eksperimen kecil.
• External JS di file terpisah misal di file script.js, lalu dipanggil pakai:

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

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

Best practice! Lebih rapi, reusable, dan bisa di cache browser.

Best practice peletakan script di HTML

Taruh <script> di akhir body sebelum </body>. Kenapa? Supaya HTML & CSS selesai dimuat dulu dan biar user nggak nunggu lama cuma gara-gara JS lagi mikir.

<!DOCTYPE html>
<html>
<body>
  <!-- Konten web -->
  <script src="app.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
  <!-- Konten web -->
  <script src="app.js"></script>
</body>
</html>

Cara JavaScript Menampilkan Output (Dasar)

JS punya beberapa cara buat nge print sesuatu ke user:

Contoh cepat:

console.log("Halo, dunia!"); // Cek di F12 → Console
document.getElementById("output").innerText = "JavaScript tuh asik, Bos!";

console.log("Halo, dunia!"); // Cek di F12 → Console
document.getElementById("output").innerText = "JavaScript tuh asik, Bos!";

Kesimpulan

• JavaScript = bahasa interaktif untuk web
• JS jalan di browser, pakai mesin seperti V8
• Bisa ubah HTML (DOM), tangkap event, dan tampilkan output
• Selalu simpan JS di file terpisah & taruh script di akhir body
• console.log() itu sahabat terbaikmu saat coding

Coba kamu salin kode di bawah ke file index.html, buka di browser, lalu tekan F12 → Console:

<!DOCTYPE html>
<html>
<head>
  <title>Latihan JS Pertama</title>
</head>
<body>
  <h1 id="judul">Belum ada aksi</h1>
  <button onclick="ubahJudul()">Klik Aku!</button>

  <script>
    function ubahJudul() {
      document.getElementById("judul").innerText = "Kamu keren, Bos!";
      console.log("JavaScript berhasil dijalankan! 🎉");
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Latihan JS Pertama</title>
</head>
<body>
  <h1 id="judul">Belum ada aksi</h1>
  <button onclick="ubahJudul()">Klik Aku!</button>

  <script>
    function ubahJudul() {
      document.getElementById("judul").innerText = "Kamu keren, Bos!";
      console.log("JavaScript berhasil dijalankan! 🎉");
    }
  </script>
</body>
</html>

Kalau judulnya berubah pas klik tombol maka selamat, kamu baru saja bikin halaman web yang hidup.

JavaScript itu kayak bumbu dapur, nggak kelihatan, tapi tanpa dia, masakan web bakal tawar. Dan kamu, udah ambil langkah pertama buat jadi koki handal di dapur digital.

Ingat: semua developer hebat dulu juga pernah nulis console.log (“why isn’t this working??”) sambil geleng-geleng. Jadi santai aja, eksperimen terus, dan jangan takut error, itu cuma cara JavaScript ngajak ngobrol.