Bab 4: JavaScript

Logika, Interaksi, dan State

Bahasa yang memberi kehidupan pada halaman web.

Tujuan Pembelajaran

📝 Menulis variabel (const, let), fungsi, array, dan objek.
🔄 Memanipulasi DOM secara dinamis.
🖱️ Menangani event (click, input, submit).
💾 Mengelola state dan localStorage.
🚀 Membangun Interactive Task Manager dengan CRUD.

Peta Arsitektur Frontend

Bab 1-2: HTML

Struktur gedung: ruangan, pintu, furniture.

Bab 3: CSS

Dekorasi: cat, lampu, tata letak, responsivitas.

Bab 4: JavaScript

Manajer gedung: merespons tamu (event), mengubah tata letak (DOM), dan mencatat data (State).

Level 1: AI sebagai Ensiklopedia

Bab ini tetap manual-first. JavaScript adalah fondasi.

✅ AI Boleh:

Menjelaskan penyebab error setelah mencoba.
Memberi analogi konsep abstrak.
Menjawab pertanyaan "mengapa?".

❌ AI DILARANG:

Menulis kode logika untuk Anda.
Menyelesaikan proyek Task Manager.
Men-debug sebelum Anda mencoba manual.

Mental Model JavaScript

Alur event-driven dari aksi pengguna ke layar:

Aksi Pengguna (Klik) 🖱️

↓

Event Listener / Handler 📡

↓

State Berubah & DOM Dimanipulasi 🔄

↓

Browser Re-render (Layout → Paint → Composite) 🎨

Variabel: const vs let

Gunakan const sebagai default. Gunakan let hanya jika nilai berubah.

// const: nilai tidak bisa di-reassign
const nama = "Dira";
nama = "Andi"; // ❌ Error!

// let: nilai bisa di-reassign (contoh: counter)
let usia = 22;
usia = 23;     // ✅ Berhasil

// var: JANGAN GUNAKAN LAGI (masalah scope)

By Value vs By Reference

Primitif di-copy nilainya. Objek di-copy alamatnya.

const obj1 = { value: 10 };
const obj2 = obj1; // Keduanya merujuk ke memori SAMA

obj2.value = 20;

console.log(obj1.value); // Output: 20
// Mengapa? Karena obj2 = obj1 hanya menyalin reference!

Fungsi: Mengelompokkan Kode

Declaration

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

Arrow Function

const sapa = (nama) => {
  return `Halo, ${nama}!`;
}

// Setara dengan:
const sapa = nama => `Halo ${nama}`;

Ubah Halaman Programatik

JavaScript berinteraksi langsung dengan DOM Tree.

// Mengambil referensi elemen
const judul = document.getElementById('judul');

// ✅ AMAN: Mengubah Teks
judul.textContent = 'Teks baru';

// ❌ BAHAYA (XSS): Inner HTML dengan input user
judul.innerHTML = '<strong>Bold</strong>';

// Mengubah Styling (Lebih disarankan toggle class)
judul.classList.add('highlight');

Event Handling

Membuat elemen merespons tindakan.

const tombol = document.getElementById('btn');
let hitungan = 0;

tombol.addEventListener('click', (event) => {
  hitungan++;
  console.log(`Diklik! Total: ${hitungan}`);
  console.log(event.target); // Elemen yang diklik
});

State-Driven Rendering

Prinsip: Pisahkan Data (State) dari Tampilan (DOM).

1. State adalah satu-satunya sumber kebenaran (Source of Truth).

2. Event mengubah State.

3. Fungsi render membangun ulang DOM berdasarkan State terbaru.

Event → State Update → Re-render → DOM

Menyimpan Data: localStorage

Menyimpan data string agar bertahan dari reload halaman.

// Menyimpan Objek (Harus di-stringify)
const user = { name: 'Dira', age: 22 };
localStorage.setItem('user', JSON.stringify(user));

// Mengambil dan Parse Objek
const savedData = localStorage.getItem('user');
const savedUser = JSON.parse(savedData);

⚠️ Jangan pernah simpan token/password di localStorage!

Tantangan Manual

1. Debugging

Temukan bug pada kode counter menggunakan `console.log` dan DevTools.

2. Prediksi Output

Prediksi output dari code block tanpa menjalankannya (Test mental model).

3. Tugas Implementasi

Buat list Task sederhana dengan localStorage, murni mengandalkan memori sendiri.

Proyek: Interactive Task Manager

Integrasi HTML (Bab 2), CSS (Bab 3), dan JavaScript (Bab 4).

Tambah: Input judul task dengan validasi.
Tampil: Render list dengan flexbox layout.
Hapus: Hapus dari DOM dan state lokal.
Persistensi: Sinkronisasi selalu dengan localStorage.

Transisi ke Bab 5

Dari Manual ke AI-Assisted

🎉 Selamat! Bagian I terbangun sempurna.

Selanjutnya di Bab 5, Anda akan masuk ke Level 2. AI boleh membantu menulis kode (snippet), tetapi Anda diwajibkan melakukan:

Generate → Evaluate → Explain → Modify