Step 7 - Fondasi JavaScript Untuk Dokumen Hidup

Memahami JavaScript dari sudut pandang interaksi nyata: event, state kecil, dan feedback user.

JavaScript paling berguna saat ia membuat dokumen jadi hidup tanpa mengorbankan kejelasan.

Fokus utama

• tangkap aksi user
• proses logika sederhana
• tampilkan feedback yang jelas

Step praktik

Step 1: Event dulu, animasi belakangan

const button = document.querySelector('#save-btn');
const status = document.querySelector('#status');

button.addEventListener('click', () => {
  status.textContent = 'Data sedang disimpan...';
});

Step 2: Simpan state minimal

Gunakan objek kecil untuk state lokal, jangan langsung over-engineer.

Step 3: Beri feedback eksplisit

User harus tahu: proses dimulai, berhasil, atau gagal.

Step 4: Lindungi dari aksi berulang

Nonaktifkan tombol saat proses berjalan agar tidak dobel request.

Studi kasus nyata

Kasus: Form pendaftaran webinar

Masalah: user klik berkali-kali karena tidak ada feedback.
Solusi: status text + disable button + hasil sukses/gagal.

Hasil:

• submit ganda berkurang
• pengalaman pengguna lebih tenang
• data masuk lebih bersih

Checklist latihan

• Buat 1 tombol dengan state loading
• Tampilkan pesan sukses/gagal
• Disable tombol selama proses
• Pastikan tombol aktif kembali saat selesai

Checklist mengingat

• Interaksi = aksi + respons
• Feedback cepat mengurangi kebingungan user
• State kecil sering sudah cukup

Mini proyek

Bangun modul “Simpan Catatan” sederhana:

• textarea
• tombol simpan
• pesan status

Target: user paham apa yang terjadi tanpa menebak.

Progress belajar

Progress belajar topik JS: 20%