Pengenalan JavaScript: Membuat Website Interaktif

HTML bikin struktur, CSS bikin tampilan. Tapi kalau mau website-nya bergerak, bereaksi, dan interaktif — itu tugasnya JavaScript.

Setiap tombol yang Anda klik, form yang validasi otomatis, animasi yang muncul di layar — semuanya di-handle JavaScript. Bahasa ini jadi “otak” di balik semua interaksi di web.

1. JavaScript Itu Apa?

JavaScript adalah bahasa pemrograman yang jadi standar di web. Awalnya cuma buat manipulasi DOM (struktur HTML di browser), tapi sekarang JavaScript bisa dipake di mana aja — server (Node.js), mobile app (React Native), desktop app (Electron), bahkan robotika.

Yang bikin JavaScript spesial:

Run langsung di browser — gak perlu install apapun, tinggal tulis kode di file .html dan buka di browser
Single-threaded — eksekusi kode satu per satu secara berurutan
Event-driven — responsif terhadap aksi user (klik, scroll, ketik)
Dynamic typing — tipe data ditentukan saat runtime, gak perlu deklarasi tipe

Kalau HTML itu fondasi dan CSS itu cat, JavaScript itu listrik yang bikin semua beneran nyala.

2. Cara Kerja JavaScript di Browser

Browser punya mesin JavaScript — namanya JS Engine. Setiap browser punya versi sendiri:

Browser	JS Engine
Chrome	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore
Edge	V8 (sekarang)

Alur kerjanya:

Anda tulis kode JS → Browser baca → JS Engine parse → Eksekusi → Hasil muncul di halaman

Gak perlu compile, gak perlu install runtime. Browser langsung jalanin kode-nya.

Contoh simpel:

// Anda tulis ini
alert("Halo, Dunia!");

// Browser langsung munculin popup "Halo, Dunia!"

Begitu kode di atas di-load browser, langsung jalan. Simpel.

3. Tiga Cara Menerapkan JavaScript di HTML

Ada tiga cara nulis JavaScript di halaman web. Masing-masing punya tempat dan kegunaan sendiri.

3.1 Inline JavaScript

JavaScript langsung ditulis di atribut HTML. Paling simpel, tapi jarang dipake di proyek nyata karena susah di-maintain.

<button onclick="alert('Anda klik tombol ini!')">
    Klik Saya
</button>

Ketika tombol diklik, browser langsung jalanin kode di atribut onclick.

Kapan pake ini? Cuma buat quick test atau demo. Di proyek nyata, hindari cara ini.

3.2 Internal JavaScript

JavaScript ditulis di dalam tag <script> di file HTML yang sama. Biasanya ditaruh di akhir <body> supaya script-nya load setelah konten HTML selesai.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Internal JS</title>
</head>
<body>
    <h1>Halo dari Internal JS</h1>
    <p id="pesan"></p>

    <script>
        document.getElementById("pesan").textContent = "Teks ini diubah oleh JavaScript!";
        console.log("Internal JS berhasil jalan!");
    </script>
</body>
</html>

Output di halaman:

Teks ini diubah oleh JavaScript!

Output di console:

Internal JS berhasil jalan!

Kapan pake ini? Untuk script yang cuma dipake di satu halaman. Kalau script-nya dipake di banyak halaman, pake external.

3.3 External JavaScript

JavaScript ditulis di file terpisah dengan ekstensi .js, lalu di-link dari file HTML. Ini cara yang paling banyak dipake di proyek nyata.

Buat file script.js:

document.getElementById("pesan").textContent = "Teks ini diubah oleh JavaScript external!";
console.log("External JS berhasil jalan!");

Di file HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>External JS</title>
</head>
<body>
    <h1>Halo dari External JS</h1>
    <p id="pesan"></p>

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

Hasilnya sama persis kayak internal. Tapi kelebihannya:

Bisa dipake ulang — file script.js bisa di-link dari banyak halaman
Lebih rapi — kode JS dipisah dari HTML
Cache-able — browser bisa cache file .js terpisah, bikin loading lebih cepat

Perbandingan Tiga Cara

Metode	Syntax	Cocok Untuk
Inline	`onclick="..."` di tag HTML	Quick test, demo
Internal	`<script>...</script>` di HTML	Script satu halaman
External	`<script src="file.js">`	Proyek nyata

Tips: Di artikel selanjutnya kita bakal sering pake cara external karena itu best practice.

4. Console.log — Sahabat Developer

Sebelum lanjut ke topik berat, kenalan dulu sama console.log(). Ini function paling sering dipake buat debugging — nge-print nilai variabel, status program, atau pesan di browser console.

Buka browser (Chrome/Firefox), tekan F12 atau Ctrl + Shift + J (Chrome) / Ctrl + Shift + K (Firefox) buat buka console.

console.log("Halo, Dunia!");
console.log(123);
console.log(true);
console.log([1, 2, 3]);

Output di console:

Halo, Dunia!
123
true
[1, 2, 3]

console.log() bisa nerima tipe data apapun — string, angka, boolean, array, object, bahkan error.

Kalau di coding Python Anda pake print() untuk debug, di JavaScript pakenya console.log().

5. Variabel — Tempat Nyimpen Data

Variabel itu seperti kotak berlabel yang Anda pake buat nyimpen data. Nama label-nya itu nama variabel, isinya itu nilai (value).

Di JavaScript ada tiga cara deklarasi variabel: var, let, dan const.

5.1 `var` — Versi Lama

var nama = "Budi";
var umur = 25;

console.log(nama); // "Budi"
console.log(umur); // 25

var itu versi lama. Masih bisa dipake, tapi punya masalah scope yang bikin kode gampang bermasalah. Sebisa mungkin hindari var di kode baru.

5.2 `let` — Variabel yang Bisa Diubah

let nama = "Budi";
nama = "Andi"; // Bisa diubah

console.log(nama); // "Andi"

let itu yang Anda butuhkan kalau nilai variabel bakal berubah seiring waktu — misal: counter, nama user yang login, atau status proses.

5.3 `const` — Variabel yang Gak Bisa Diubah

const PI = 3.14159;
// PI = 3; // ❌ Error! Assignment to constant variable

console.log(PI); // 3.14159

const dipake buat nilai yang pasti gak akan berubah — seperti PI, API key, atau URL endpoint.

Perbandingan `var`, `let`, `const`

Fitur	`var`	`let`	`const`
Scope	Function	Block	Block
Re-declaration	✅ Bisa	❌ Gak bisa	❌ Gak bisa
Re-assignment	✅ Bisa	✅ Bisa	❌ Gak bisa
Hoisting	✅ (undefined)	✅ (TDZ)	✅ (TDZ)

TDZ = Temporal Dead Zone — variabel ada tapi belum bisa diakses sampai baris deklarasinya dijalankan.

Nama Variabel yang Bener

// ✅ Bener
let nama = "Budi";
let umurSaya = 25;
let isLogin = true;

// ❌ Salah
let 1nama = "Budi";      // Gak boleh mulai angka
let nama saya = "Budi";  // Gak boleh ada spasi
let my-nama = "Budi";    // Gak boleh ada hyphen
let let = "Budi";        // Gak boleh pake keyword reserved

Convention yang umum dipake:

camelCase untuk JavaScript: namaLengkap, umurSaya, isLogin
Nama yang deskriptif: userAge lebih jelas dari ua
Boolean diawali is/has: isLoggedIn, hasPermission

6. Recap

Konsep	Penjelasan Singkat
JavaScript	Bahasa pemrograman buat interaksi di web
JS Engine	Mesin yang nge-run kode JS di browser
Inline JS	Ditulis di atribut HTML, jarang dipake
Internal JS	Ditulis di `<script>` dalam file HTML
External JS	Ditulis di file `.js` terpisah (best practice)
`console.log()`	Debug — nge-print nilai ke browser console
`var`	Deklarasi variabel versi lama (hindari)
`let`	Variabel yang bisa diubah
`const`	Variabel yang gak bisa diubah

Penutup

JavaScript itu bahasa yang bikin website beneran hidup. Tanpa JS, halaman web cuma teks statis yang gak bisa ngapa-ngapain.

Di artikel selanjutnya, kita bakal bedah Variables & Data Types lebih dalam — tipe data primitif (string, number, boolean, null, undefined), type coercion, dan cara nge-handle data di JavaScript.