JavaScript — Membuat Halaman Hidup

HTML memberi struktur, CSS memberi tampilan, dan JavaScript membuat halamanmu bisa merespons — klik tombol, isi form, hitung sesuatu secara otomatis.

1. Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang berjalan langsung di browser. Berbeda dari HTML dan CSS yang sifatnya statis (deklaratif), JavaScript memungkinkan halaman berperilaku secara dinamis — bereaksi terhadap apa yang dilakukan pengguna.

Tanpa JavaScript, sebuah tombol "Tambah ke Keranjang" hanya akan jadi kotak biru tanpa fungsi apa pun. JavaScript yang membuat klik tombol itu benar-benar melakukan sesuatu.

2. Variabel: Tempat Menyimpan Data

Variabel adalah "kotak penyimpanan" yang punya nama, tempat kamu menyimpan nilai untuk dipakai lagi nanti.

let nama = "Budi";
let umur = 25;
let sudahMenikah = false;

console.log(nama); // menampilkan: Budi

Ada tiga cara mendeklarasikan variabel di JavaScript modern: let (nilai bisa diubah), const (nilai tetap, tidak bisa diubah setelah didefinisikan), dan var (cara lama, sebaiknya dihindari di kode baru).

Tipe Data Dasar

3. Fungsi: Mengelompokkan Instruksi

Fungsi adalah blok kode yang bisa dipanggil ulang kapan pun dibutuhkan, tanpa harus menulis ulang instruksi yang sama.

function sapa(nama) {
  return "Halo, " + nama + "!";
}

console.log(sapa("Ani"));   // Halo, Ani!
console.log(sapa("Budi"));  // Halo, Budi!

Bagian nama di dalam tanda kurung disebut parameter — nilai yang "dimasukkan" ke dalam fungsi setiap kali dipanggil. Kata return menentukan apa yang "dikembalikan" oleh fungsi tersebut.

4. Kondisi: if/else dalam Kode Nyata

Ingat logika if/else di Modul 01? Inilah bentuknya dalam JavaScript sungguhan:

let nilai = 80;

if (nilai >= 75) {
  console.log("Lulus");
} else {
  console.log("Remedial");
}

Operator perbandingan yang sering dipakai: === (sama dengan), !== (tidak sama dengan), >, <, >=, <=.

5. Array: Menyimpan Banyak Data Sekaligus

let buah = ["apel", "jeruk", "mangga"];

console.log(buah[0]);     // "apel" (index dimulai dari 0)
console.log(buah.length); // 3

buah.push("nanas");       // menambah item ke akhir array
console.log(buah);        // ["apel", "jeruk", "mangga", "nanas"]

Array sangat penting karena hampir semua data di dunia nyata berbentuk daftar — daftar produk, daftar pesan, daftar to-do (yang akan kamu bangun di Modul 05).

Looping Lewat Array

let buah = ["apel", "jeruk", "mangga"];

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}
// atau cara yang lebih modern:
buah.forEach(function(item) {
  console.log(item);
});

6. Event: Merespons Aksi Pengguna

Event adalah "kejadian" yang bisa direspons JavaScript — klik tombol, ketikan keyboard, submit form, dan sebagainya.

<button id="tombolku">Klik Saya</button>

<script>
document.getElementById("tombolku").addEventListener("click", function() {
  alert("Tombol diklik!");
});
</script>

document.getElementById(...) adalah cara JavaScript "mencari" elemen HTML tertentu di halaman, supaya bisa dimanipulasi atau diberi event listener seperti contoh di atas.

7. Latihan Pemahaman

Rangkuman Modul Ini

• Variabel (let, const) menyimpan data yang bisa dipakai ulang.
• Fungsi mengelompokkan instruksi agar bisa dipanggil berulang tanpa menulis ulang kode.
• if/else memungkinkan kode mengambil keputusan berdasarkan kondisi.
• Array menyimpan banyak data sekaligus dan bisa di-looping.
• Event listener membuat halaman bisa merespons aksi pengguna seperti klik dan input.

Sekarang kamu sudah punya tiga fondasi utama web development: HTML, CSS, dan JavaScript. Di modul selanjutnya, kamu akan menggabungkan ketiganya untuk membangun proyek pertamamu yang benar-benar bisa dipakai: aplikasi to-do list.