Advanced JavaScript: Interaksi Browser

Sampai di sini kamu sudah bisa menulis JavaScript yang "hidup di kepala": variabel, function, array, object, sampai async/await. Kamu juga sudah bisa menyusun halaman dengan HTML dan mempercantiknya dengan CSS. Masalahnya, dua dunia itu masih berjalan sendiri-sendiri. JavaScript-mu belum bisa menyentuh halaman, membaca isi form, bereaksi saat tombol diklik, atau mengambil data dari server lalu menampilkannya. Materi ini menyambungkan keduanya. Setelah selesai, kamu bisa membuat halaman yang benar-benar interaktif, seperti katalog toko online yang bisa dicari, difilter, dan punya keranjang belanja.

Urutannya sengaja dibuat bertahap. Kita mulai dari Regular Expression, alat untuk mengenali pola teks yang nanti kamu pakai untuk validasi form. Lalu kita belajar "membaca peta" halaman lewat DOM, kemudian mengubah halaman dan merespons aksi pengguna lewat event. Setelah itu kita ambil data sungguhan dari internet dengan fetch. Terakhir, semua digabung dalam Proyek Akhir Fase 2: landing page responsif dengan katalog produk dinamis. Siapkan browser (Chrome atau Firefox), buka DevTools dengan F12, dan ketik ulang contoh-contohnya sendiri. Menyalin-tempel memang lebih cepat, tapi mengetik sendiri jauh lebih nempel di ingatan.