— Bab 03

JavaScript — otak halaman web.

Halaman HTML cuma diam. Dengan JavaScript, halaman bisa bereaksi, menghitung, menyimpan data, memvalidasi form, menampilkan animasi dinamis. Kita akan mulai dari benar-benar nol.

Materi 01

Apa itu JavaScript?

JavaScript (sering disingkat JS) adalah bahasa pemrograman yang berjalan di browser pengunjung. Dia yang membuat halaman jadi hidup — tombol bisa diklik dan memicu sesuatu, angka bisa bertambah otomatis, form bisa divalidasi sebelum dikirim, dan lainnya.

Perbedaan HTML, CSS, JavaScript

BahasaPeranAnalogi rumah
HTMLStruktur, isiPondasi & tembok
CSSTampilanCat, dekorasi, furniture
JavaScriptPerilaku, interaksiListrik, saklar, pintu otomatis
JavaScript bukan Java Meski namanya mirip, JavaScript tidak ada hubungannya dengan Java. Dulu nama aslinya "Mocha", lalu diganti ke "JavaScript" karena alasan marketing. Sampai sekarang kadang masih bikin bingung pemula.
Materi 02

Cara menulis JavaScript

Ada dua cara menyisipkan JavaScript ke HTML:

1. Di dalam tag <script>

inline-script.html 
<!DOCTYPE html>
<html>
<body>
  <h1>Halo!</h1>

  <script>
    console.log("Script jalan!");
    alert("Halo dari JavaScript!");
  </script>
</body>
</html>

2. File .js terpisah (direkomendasikan)

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

Melihat output

  • console.log(...) — tampil di Console browser (F12 → tab Console).
  • alert(...) — tampil sebagai popup.
  • document.body.textContent = "..." — tampil di halaman.
Console browser Di Chrome/Firefox/Edge: tekan F12 (atau klik kanan → Inspect) lalu pilih tab Console. Di sinilah pesan console.log dan error JavaScript akan muncul. Ini tempat penting untuk debugging.
Taruh <script> di mana? Sebaiknya di akhir body (sebelum </body>). Kalau di head, script akan jalan sebelum HTML selesai dimuat, dan kemungkinan gagal menemukan elemen. Atau pakai atribut defer: <script src="..." defer></script>.
Materi 03

Variabel — wadah untuk data

Variabel adalah "kotak" untuk menyimpan data. Di JavaScript modern, ada 3 kata kunci:

  • let — nilai bisa berubah.
  • const — nilai tetap (constant), tidak bisa diganti.
  • var — cara lama, sebaiknya hindari.
variabel.js 
let umur = 20;
const nama = "Budi";
const PI = 3.14;

umur = 21;   // ✓ boleh, let bisa diubah
// nama = "Ani"; // ✗ error, const tidak bisa

console.log(nama, umur); // Budi 21

Aturan penamaan variabel

  • Hanya huruf, angka, _, dan $.
  • Tidak boleh dimulai dengan angka.
  • Case-sensitive: nama dan Nama berbeda.
  • Pakai camelCase: namaLengkap, bukan nama_lengkap atau NamaLengkap.
  • Nama harus deskriptif: hargaTotal lebih baik daripada x atau h.
Kebiasaan baik Default pakai const. Baru ganti ke let kalau kamu tahu nilainya akan berubah. Ini membuat code lebih aman dan mudah dibaca.
Materi 04

Tipe data

JavaScript punya beberapa jenis data bawaan:

TipeContohCatatan
String"Halo" atau 'Halo'Teks, selalu diapit tanda kutip
Number42, 3.14, -7Angka (bulat atau desimal)
Booleantrue, falseDua nilai saja: benar atau salah
Array[1, 2, 3]Daftar/list
Object{nama: "Ani"}Pasangan kunci–nilai
nullnullSengaja kosong
undefinedundefinedBelum diberi nilai
tipe-data.js 
const teks = "Halo dunia";
const angka = 42;
const desimal = 3.14;
const sudahLogin = true;
const hobi = ["baca", "ngoding", "musik"];
const user = {
  nama: "Ani",
  umur: 22,
  aktif: true
};

// Akses array pakai index (mulai dari 0)
console.log(hobi[0]);       // "baca"
console.log(hobi[2]);       // "musik"
console.log(hobi.length);   // 3

// Akses object pakai kunci
console.log(user.nama);     // "Ani"
console.log(user["umur"]);  // 22

Template literal — gabung string dengan mudah

Pakai backtick (`) untuk gabungkan teks dan variabel tanpa +.

template.js 
const nama = "Budi";
const umur = 20;

// Cara lama (masih jalan)
const sapa1 = "Halo " + nama + ", umur " + umur;

// Template literal (lebih enak dibaca)
const sapa2 = `Halo ${nama}, umur ${umur}`;

console.log(sapa2); // Halo Budi, umur 20
Materi 05

Operator

Operator adalah simbol untuk melakukan operasi pada nilai.

Aritmatika

OperatorFungsiContoh
+Tambah / gabung string5 + 3 → 8
-Kurang10 - 4 → 6
*Kali6 * 7 → 42
/Bagi15 / 3 → 5
%Sisa bagi (modulo)10 % 3 → 1
**Pangkat2 ** 3 → 8

Perbandingan

OperatorFungsi
===Sama persis (nilai & tipe) — PAKAI INI
!==Tidak sama persis
==Sama nilai (tipe bisa beda) — hindari
>, <Lebih besar / kecil
>=, <=Lebih besar / kecil atau sama

Logika

OperatorFungsi
&&DAN (dua-duanya harus true)
||ATAU (minimal satu true)
!TIDAK (negasi)
operator.js 
const umur = 18;
const punyaKTP = true;

console.log(umur >= 17);              // true
console.log(umur >= 17 && punyaKTP);   // true
console.log(umur < 17 || !punyaKTP);  // false

// Hati-hati: == vs ===
console.log(5 == "5");   // true (dikonversi dulu)
console.log(5 === "5");  // false (tipe beda)
// SELALU pakai === untuk perbandingan
Materi 06

Kondisi (if / else)

Kondisi membuat program mengambil keputusan: "kalau begini lakukan A, kalau tidak lakukan B".

kondisi.js 
const nilai = 75;

if (nilai >= 90) {
  console.log("A — Sangat Baik");
} else if (nilai >= 75) {
  console.log("B — Baik");
} else if (nilai >= 60) {
  console.log("C — Cukup");
} else {
  console.log("D — Perlu belajar lagi");
}
// Output: B — Baik

Operator ternary — if/else satu baris

Untuk kondisi sederhana, bisa ditulis dalam satu baris:

ternary.js 
const umur = 18;

// Cara panjang
let status;
if (umur >= 17) {
  status = "Dewasa";
} else {
  status = "Anak-anak";
}

// Cara pendek (ternary)
const status2 = umur >= 17 ? "Dewasa" : "Anak-anak";

console.log(status2); // Dewasa

Switch — banyak pilihan

switch.js 
const hari = "Senin";

switch (hari) {
  case "Senin":
    console.log("Awal minggu");
    break;
  case "Jumat":
    console.log("Hampir weekend");
    break;
  case "Sabtu":
  case "Minggu":
    console.log("Weekend!");
    break;
  default:
    console.log("Hari biasa");
}
Materi 07

Perulangan (loop)

Loop dipakai untuk menjalankan code berulang kali tanpa perlu menulis ulang.

1. for — kalau tahu jumlah perulangannya

for.js 
// Cetak 1 sampai 5
for (let i = 1; i <= 5; i++) {
  console.log("Angka: " + i);
}

// Penjelasan bagian-bagiannya:
// let i = 1   → nilai awal
// i <= 5      → syarat lanjut loop
// i++         → apa yang dilakukan setiap putaran

2. while — selama syarat true

while.js 
let jumlah = 0;

while (jumlah < 10) {
  jumlah += 2;
  console.log(jumlah);
}
// 2, 4, 6, 8, 10

3. for...of — loop isi array

for-of.js 
const buah = ["apel", "mangga", "jeruk"];

for (const item of buah) {
  console.log(item);
}
// apel, mangga, jeruk

4. forEach — cara lain loop array

foreach.js 
const buah = ["apel", "mangga", "jeruk"];

buah.forEach((item, index) => {
  console.log(`${index + 1}. ${item}`);
});
// 1. apel
// 2. mangga
// 3. jeruk
Awas infinite loop! Kalau syarat loop tidak pernah false, browser akan hang. Di while pastikan ada sesuatu yang mengubah kondisi jadi false. Di for, pastikan i++ atau counter-nya ada.
Materi 08

Fungsi

Fungsi adalah "paket code" yang bisa dipanggil berkali-kali. Seperti resep: tulis sekali, pakai berkali-kali.

Cara 1: function declaration

function.js 
function tambah(a, b) {
  return a + b;
}

function sapa(nama) {
  return `Halo, ${nama}!`;
}

// Cara memanggil
const hasil = tambah(3, 5);
console.log(hasil);          // 8
console.log(sapa("Budi"));   // Halo, Budi!

Cara 2: arrow function (modern)

arrow.js 
// Bentuk panjang
const tambah = (a, b) => {
  return a + b;
};

// Bentuk pendek (kalau cuma 1 baris return)
const kali = (a, b) => a * b;

// Satu parameter, tanpa kurung
const kuadrat = n => n * n;

console.log(tambah(2, 3));   // 5
console.log(kali(4, 5));     // 20
console.log(kuadrat(7));     // 49

Parameter default

default-param.js 
const sapa = (nama = "Teman") => {
  return `Halo, ${nama}!`;
};

console.log(sapa());         // Halo, Teman!
console.log(sapa("Ani"));    // Halo, Ani!
return vs aksi Fungsi bisa mengembalikan nilai (pakai return) atau melakukan aksi (misalnya mengubah halaman, mencetak ke console). Fungsi tanpa return otomatis return undefined.
Materi 09

Array — daftar data

Array adalah daftar berurutan. Item diakses pakai index yang dimulai dari 0.

array.js 
const buah = ["apel", "mangga", "jeruk", "pisang"];

console.log(buah[0]);         // "apel"
console.log(buah[3]);         // "pisang"
console.log(buah.length);     // 4

// Menambah data
buah.push("nanas");           // tambah di akhir
buah.unshift("durian");       // tambah di awal

// Menghapus data
buah.pop();                   // hapus terakhir
buah.shift();                 // hapus pertama

// Cek apakah ada
console.log(buah.includes("mangga")); // true

// Gabung jadi string
console.log(buah.join(", "));  // "apel, mangga, jeruk, pisang"

Method array yang sering dipakai

array-methods.js 
const angka = [1, 2, 3, 4, 5];

// map — ubah setiap item jadi hal lain
const kuadrat = angka.map(n => n * n);
console.log(kuadrat); // [1, 4, 9, 16, 25]

// filter — ambil yang memenuhi syarat
const genap = angka.filter(n => n % 2 === 0);
console.log(genap); // [2, 4]

// reduce — gabungkan jadi satu nilai
const total = angka.reduce((a, b) => a + b, 0);
console.log(total); // 15

// find — cari satu yang cocok
const pertamaLebihDari3 = angka.find(n => n > 3);
console.log(pertamaLebihDari3); // 4
Materi 10

Object — data dengan kunci

Object menyimpan data dalam bentuk pasangan kunci–nilai. Cocok untuk mewakili "sesuatu" yang punya banyak properti.

object.js 
const user = {
  nama: "Ani",
  umur: 22,
  email: "ani@contoh.com",
  hobi: ["baca", "nonton"],
  alamat: {
    kota: "Surabaya",
    provinsi: "Jawa Timur"
  }
};

// Akses properti
console.log(user.nama);           // "Ani"
console.log(user["email"]);       // "ani@contoh.com"
console.log(user.alamat.kota);    // "Surabaya"

// Ubah / tambah properti
user.umur = 23;
user.telepon = "081234567890";

// Hapus properti
delete user.email;

// Cek properti
console.log("nama" in user);      // true
console.log(Object.keys(user));   // ["nama", "umur", "hobi", ...]

Method di dalam object

method-object.js 
const kalkulator = {
  angka: 0,
  tambah(n) {
    this.angka += n;
    return this;  // supaya bisa chain
  },
  kali(n) {
    this.angka *= n;
    return this;
  },
  tampil() {
    console.log("Hasil:", this.angka);
  }
};

kalkulator.tambah(5).kali(3).tampil();
// Hasil: 15
Materi 11

DOM Manipulation — ubah halaman dengan JS

DOM (Document Object Model) adalah representasi halaman HTML dalam bentuk objek JavaScript. Lewat DOM, JavaScript bisa membaca atau mengubah isi halaman.

Memilih elemen

select.js 
// Pilih satu elemen
const judul = document.querySelector("h1");
const tombol = document.querySelector("#kirim");      // id
const kartu = document.querySelector(".kartu");       // class

// Pilih banyak elemen
const semuaKartu = document.querySelectorAll(".kartu");
const semuaP = document.querySelectorAll("p");

Membaca & mengubah isi

ubah.js 
const el = document.querySelector("#pesan");

// Baca
console.log(el.textContent);  // teks saja
console.log(el.innerHTML);    // HTML-nya

// Tulis
el.textContent = "Teks baru";
el.innerHTML  = "<strong>Tebal</strong>";

// Ubah gaya
el.style.color = "red";
el.style.fontSize = "24px";
el.style.backgroundColor = "yellow";

// Tambah/hapus class
el.classList.add("aktif");
el.classList.remove("nonaktif");
el.classList.toggle("visible"); // ada→hilang, hilang→ada

// Atribut
const img = document.querySelector("img");
img.src = "foto-baru.jpg";
img.alt = "Foto baru";

Membuat elemen baru

buat-elemen.js 
// Buat elemen baru
const p = document.createElement("p");
p.textContent = "Paragraf baru dari JS";
p.classList.add("highlight");

// Masukkan ke halaman
document.body.appendChild(p);

// Atau ke elemen tertentu
const container = document.querySelector(".container");
container.appendChild(p);

// Hapus elemen
const lama = document.querySelector(".lama");
lama.remove();
Materi 12

Event — merespons tindakan pengguna

Event adalah "sesuatu yang terjadi" — user klik, ketik, scroll, submit form, hover. JavaScript bisa "mendengarkan" event dan menjalankan code saat event terjadi.

event.html 
<button id="tombol">Klik saya</button>
<p id="pesan">Belum diklik</p>

<script>
  const btn = document.querySelector("#tombol");
  const pesan = document.querySelector("#pesan");

  btn.addEventListener("click", () => {
    pesan.textContent = "Kamu klik tombolnya!";
    pesan.style.color = "tomato";
  });
</script>
Coba langsung

Belum diklik

Event yang sering dipakai

EventKapan terjadi
clickSaat elemen diklik
inputSaat isi input berubah (setiap ketik)
changeSaat nilai berubah & fokus pindah
submitSaat form dikirim
mouseover, mouseoutMasuk/keluar area elemen
keydown, keyupSaat tombol keyboard ditekan
scrollSaat halaman/elemen di-scroll
loadSaat halaman selesai dimuat

Contoh: live input

live-input.js 
const input = document.querySelector("#nama");
const output = document.querySelector("#output");

input.addEventListener("input", (e) => {
  const val = e.target.value;
  output.textContent = val ? `Halo, ${val}!` : "Halo, ...";
});
Coba langsung

Halo, ...

Materi 13

Form validation

Validasi form adalah salah satu tugas klasik JavaScript. Kita cek input user sebelum dikirim.

validasi.html 
<form id="myForm">
  <label>Nama:</label>
  <input type="text" id="nama">
  <label>Email:</label>
  <input type="email" id="email">
  <button type="submit">Kirim</button>
  <p id="pesan"></p>
</form>

<script>
  const form = document.querySelector("#myForm");
  const pesan = document.querySelector("#pesan");

  form.addEventListener("submit", (e) => {
    e.preventDefault(); // cegah form dikirim default

    const nama = document.querySelector("#nama").value.trim();
    const email = document.querySelector("#email").value.trim();

    if (nama === "") {
      pesan.textContent = "Nama wajib diisi!";
      pesan.style.color = "red";
      return;
    }

    if (nama.length < 3) {
      pesan.textContent = "Nama minimal 3 huruf!";
      pesan.style.color = "red";
      return;
    }

    if (!email.includes("@")) {
      pesan.textContent = "Email tidak valid!";
      pesan.style.color = "red";
      return;
    }

    pesan.textContent = `Terima kasih, ${nama}!`;
    pesan.style.color = "green";
    form.reset();
  });
</script>
Jangan cuma andalkan validasi di JavaScript Validasi JS mudah di-bypass oleh orang yang tahu cara. Selalu validasi ulang di server (pakai PHP). Validasi JS untuk pengalaman yang lebih baik, validasi server untuk keamanan.
Materi 14

LocalStorage — menyimpan data di browser

LocalStorage memungkinkan kamu menyimpan data di browser pengunjung. Data ini tetap ada walaupun browser ditutup. Cocok untuk tema, pengaturan, atau data kecil lainnya.

localstorage.js 
// Simpan data
localStorage.setItem("nama", "Budi");
localStorage.setItem("tema", "gelap");

// Ambil data
const nama = localStorage.getItem("nama");
console.log(nama); // "Budi"

// Ambil data yang tidak ada
const xyz = localStorage.getItem("xyz"); // null

// Hapus satu item
localStorage.removeItem("tema");

// Hapus semua
localStorage.clear();

// Simpan object/array (harus dikonversi ke JSON)
const user = { nama: "Ani", umur: 22 };
localStorage.setItem("user", JSON.stringify(user));

// Ambil object
const data = JSON.parse(localStorage.getItem("user"));
console.log(data.nama); // "Ani"
Fakta menarik Progress yang kamu centang di labcodeku ini disimpan pakai localStorage. Itu sebabnya meski kamu tutup tab, progresmu tetap ada saat kamu buka lagi. Coba buka Developer Tools → Application → Local Storage untuk melihat datanya.
Kuis Cepat

Cara paling tepat mendeklarasikan variabel yang nilainya tidak akan berubah adalah...

Latihan Akhir

Bikin to-do list sederhana

Buat aplikasi to-do list yang bisa menambah dan menghapus tugas. Data disimpan di LocalStorage agar tidak hilang saat refresh.

Tugas

Ketentuan

  1. Ada input text untuk mengetik tugas baru.
  2. Ada tombol "Tambah" untuk menyimpan tugas.
  3. Daftar tugas tampil di bawah.
  4. Setiap tugas ada tombol "Hapus" di sebelahnya.
  5. Data disimpan di localStorage — tidak hilang saat refresh.
Lihat contoh jawaban
todo.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <style>
    body {
      font-family: Arial;
      max-width: 500px;
      margin: 2rem auto;
      padding: 1rem;
    }
    input, button { padding: 8px; font-size: 16px; }
    ul { list-style: none; padding: 0; }
    li {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: #f5f5f5;
      margin-bottom: 6px;
      border-radius: 6px;
    }
    .hapus {
      background: tomato;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>To-Do List</h1>
  <input type="text" id="inputTugas" placeholder="Tugas baru...">
  <button id="btnTambah">Tambah</button>
  <ul id="daftar"></ul>

  <script>
    const input = document.querySelector("#inputTugas");
    const btn = document.querySelector("#btnTambah");
    const daftar = document.querySelector("#daftar");

    // Ambil data dari localStorage
    let tugas = JSON.parse(localStorage.getItem("tugas") || "[]");

    function render() {
      daftar.innerHTML = "";
      tugas.forEach((t, i) => {
        const li = document.createElement("li");
        li.innerHTML = `
          <span>${t}</span>
          <button class="hapus" data-i="${i}">Hapus</button>
        `;
        daftar.appendChild(li);
      });
    }

    function simpan() {
      localStorage.setItem("tugas", JSON.stringify(tugas));
    }

    btn.addEventListener("click", () => {
      const teks = input.value.trim();
      if (teks === "") return;
      tugas.push(teks);
      simpan();
      render();
      input.value = "";
      input.focus();
    });

    daftar.addEventListener("click", (e) => {
      if (e.target.classList.contains("hapus")) {
        const i = e.target.dataset.i;
        tugas.splice(i, 1);
        simpan();
        render();
      }
    });

    // Enter di input = klik tambah
    input.addEventListener("keydown", (e) => {
      if (e.key === "Enter") btn.click();
    });

    render();
  </script>
</body>
</html>
Bonus challenge Coba tambahkan fitur: checkbox di setiap tugas untuk menandai selesai, dan style tugas yang sudah selesai dengan text-decoration: line-through.
Cheatsheet

Ringkasan JavaScript

SintaksFungsi
const x = 10;Variabel tetap
let y = 20;Variabel bisa berubah
console.log(x)Cetak ke console
if (x > 5) { ... }Kondisi
x === y ? "ya" : "tidak"Ternary
for (let i=0; i<5; i++)Loop biasa
arr.forEach(x => {...})Loop array
arr.map(x => x*2)Transform array
arr.filter(x => x>5)Saring array
function f(a) { return a; }Fungsi
const f = (a) => a*2;Arrow function
document.querySelector('#id')Pilih elemen
document.querySelectorAll('.x')Pilih banyak elemen
el.textContent = "..."Ganti teks
el.innerHTML = "..."Ganti HTML
el.style.color = "red"Ganti gaya
el.classList.add/remove/toggleGanti class
el.addEventListener('click', fn)Pasang event
localStorage.setItem(k, v)Simpan data
localStorage.getItem(k)Ambil data
JSON.stringify(obj)Object → string
JSON.parse(str)String → object