Material Pengajaran Live Coding: DOM & JavaScript Asynchronous

Repositori ini berisi modul live coding untuk mata kuliah Pemrograman Web, khususnya materi DOM (Document Object Model) dan JavaScript Asynchronous.

Setiap folder dirancang khusus untuk mempermudah dosen/instruktur melakukan live coding secara bertahap saat mengajar.

---

📁 Struktur Folder & Topik Pertemuan

No	Folder	Topik Materi	Deskripsi Live Coding
1	01-mengakses-dom/	Mengakses DOM	Penggunaan getElementById, querySelector, querySelectorAll, getElementsByClassName.
2	02-mengubah-dom/	Mengubah DOM	Manipulasi teks (textContent), HTML (innerHTML), style, atribut, dan manipulasi elemen (createElement, appendChild, remove).
3	03-mengelola-event/	Mengelola Event	Menerapkan addEventListener, menangani event click, input, submit (preventDefault), serta membaca event object.
4	04-event-delegation/	Event Delegation	Efisiensi listener pada elemen induk untuk menangani elemen anak yang dinamis (contoh: Todo List).
5	05-penggunaan-callback/	Penggunaan Callback	Pemahaman First-Class Functions, Synchronous Callback vs Asynchronous Callback (setTimeout).
6	06-masalah-callback/	Masalah Callback (Callback Hell)	Simulasi Pyramid of Doom pada alur asynchronous berurutan (Login -> Fetch Profile -> Fetch Posts).
7	07-solusi-async-await/	Solusi dengan async/await	Refactoring dari Callback Hell ke Promises, lalu disederhanakan dengan async/await dan try...catch + fetch().
8	08-cara-kerja-async/	Cara Kerja Async (Event Loop)	Visualisasi urutan eksekusi: Synchronous Code vs Microtask Queue (Promise) vs Macrotask Queue (setTimeout).

---

🚀 Panduan Penggunaan untuk Live Coding

1. Jalankan dengan Live Server: Gunakan ekstensi Live Server pada VS Code di masing-masing folder agar perubahan saat live coding langsung terlihat di browser.
2. Skenario Pengajaran:
   • Buka README.md pada folder terkait untuk melihat alur penjelasan & poin penting.
   • Buka index.html dan script.js.
   • Dosen dapat mengosongkan/mengomentari kode pada script.js lalu menuliskan kodenya kembali bersama mahasiswa (step-by-step).
   • Gunakan Developer Console Browser (F12 / Cmd + Option + I) untuk memperlihatkan log dan inspeksi elemen.

---

Dibuat untuk materi pengajaran perkuliahan Pemrograman Web.