Lewati ke konten utama
Numekara
Konsultasi GratisKontak

F4 · Modul 10

DOM, event, dan formulir

51 langkah singkat, dari mudah sampai tantangan.

  1. Level 1

    Kenal

  2. Level 2

    Paham

  3. Level 3

    Terapkan

  4. Level 4

    Tantangan

  5. Level 5

    Pendalaman

Intinya

  • DOM adalah pohon simpul yang dibangun pengurai HTML; querySelector bisa null, dataset selalu string, dan atribut value hanya nilai awal.
  • Data masuk ke halaman lewat textContent, properti, atau append(string), tidak pernah lewat innerHTML: pengurai HTML mengubah data menjadi markup, dan atribut handler event ikut berjalan.
  • Event menempuh jalur capture → target → bubble yang dihitung sekali di awal; delegasi memakai bubbling dan closest untuk satu pendengar bagi banyak elemen.
  • FormData berisi string; validasi klien adalah pengalaman pengguna, validasi server adalah keamanan, karena semua yang datang dari peramban bisa dipalsukan.
  • Formulir aksesibel: label tersambung, pesan galat berupa teks yang ditautkan, aria-invalid yang dihapus saat benar, ringkasan galat yang menerima fokus.

Sebelum mulai

±4 jam.

Modul ini memakai materi di bawah. Belum yakin? Ulas dulu bagian yang disebut.

Hasil belajar: membaca dan mengubah halaman lewat DOM (seleksi, penelusuran, dataset, membuat elemen) tanpa membuka celah XSS; menjelaskan apa yang dilakukan pengurai HTML saat kamu memakai innerHTML dan kenapa textContent aman; memasang dan melepas pendengar event, menelusuri fase capture, target, dan bubble, serta memakai delegasi event; menjelaskan algoritma dispatch dan pipeline render peramban; membaca formulir dengan FormData, memvalidasi di klien dengan Constraint Validation API, dan menjelaskan kenapa server tetap wajib memvalidasi; menerapkan aksesibilitas dasar formulir (label, aria-invalid, aria-describedby, ringkasan galat, fokus); menulis renderTabel, validasiKasbon, dan formulir kasbon yang lengkap.

Proyek: Laporan Warung langkah 10: renderTabel(wadah, data), validasiKasbon(data), dan formulir kasbon yang aksesibel (kontrak proyek §3).

Istilah di modul ini (47)

Ketuk istilah untuk melihat penjelasannya. Di materi, istilah bergaris titik membuka kartu yang sama. Semua istilah course

Bahan modul

Semua kode, latihan, dan data modul ini dalam satu zip, untuk dijalankan di laptop atau Google Colab.

  • 9 berkas latihan + tes
Semua data course (data-f4.zip) Cara menjalankan di laptop
Lihat isi zip
  • BACA-DULU.txt
  • index.html
  • latihan_f4_10_1.ts
  • latihan_f4_10_2.ts
  • latihan_f4_10_3.ts
  • latihan_f4_10_4.ts
  • latihan_f4_10_5.ts
  • latihan_f4_10_6.ts
  • latihan_f4_10_7.ts
  • latihan_f4_10_8.ts
  • latihan_f4_10_9.ts