Bab 01: Mengenal JavaScript dan Cara Kerjanya di Browser

Ayo kenalan dulu sama JavaScript si tukang sulap di balik layar 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 pengen mengenal 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 tag <script> di akhir body sebelum tag </body>. Kenapa? Supaya HTML & CSS selesai dimuat dulu dan biar user nggak nunggu lama cuma gara-gara JS lagi mikir. Contoh seperti dibawah ini:

<!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.

Materi Lanjutan JavaScript Dasar

Kalau kamu sudah siap melangkah lebih jauh, lanjutkan ke bab berikutnya:

Bab 02: Cara Menulis Syntax JavaScript

Atau, kalau kamu ingin mengulang dan mengenal tentang konsep JavaScript Dasar

Belajar JavaScript Dasar

FAQ

1. Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website menjadi interaktif. JavaScript biasanya dijalankan langsung di browser pengguna.

2. Untuk apa fungsi JavaScript di website?

JavaScript digunakan untuk menampilkan interaksi seperti klik tombol, validasi form, animasi, dan perubahan tampilan halaman secara dinamis.

3. Apakah JavaScript sama dengan Java?

Tidak. JavaScript dan Java adalah dua bahasa pemrograman yang berbeda dengan fungsi dan penggunaan yang berbeda pula.

4. Di mana JavaScript dijalankan?

JavaScript bisa dijalankan di browser (frontend) dan juga di server menggunakan Node.js (backend).

5. Apakah belajar JavaScript harus bisa HTML dan CSS dulu?

Disarankan iya. HTML dan CSS membantu memahami struktur dan tampilan halaman sebelum mempelajari JavaScript.

6. Apakah JavaScript cocok untuk pemula?

Ya. JavaScript termasuk bahasa yang cocok untuk pemula karena mudah dipelajari dan hasilnya bisa langsung dilihat di browser.

7. Apakah JavaScript wajib dipelajari web developer?

Hampir wajib. JavaScript adalah teknologi utama dalam pengembangan website modern agar halaman menjadi interaktif.

8. Bagaimana cara mulai belajar JavaScript untuk pemula?

Mulailah dengan mempelajari dasar seperti variabel, fungsi, dan cara menampilkan output langsung di browser.