Interaktivitas dengan JavaScript

Menu terbuka, tetapi tombolnya masih menunjukkan status tertutup

• Panel yang terlihat dan status aksesibilitasnya bisa berbeda. Interaksi yang andal memperbarui baik konten maupun kontrol yang mendeskripsikannya.
• JavaScript browser merespons tindakan pengguna. Jangan masukkan kredensial pribadi dalam kode klien; pengunjung dapat memeriksa dan mengubah apa yang berjalan di mesin mereka.

Temukan elemen yang telah diparsing

• DOM merepresentasikan dokumen sebagai node saat HTML diparsir. Kode dapat querying node yang sudah ada dan mengubah propertinya.
• Skrip yang berjalan sebelum targetnya diparsir mungkin mendapatkan null. Skrip eksternal tertunda akan berjalan setelah parsing selesai; skrip di akhir body juga dapat berfungsi untuk elemen yang sudah berada di atasnya.

Daftarkan respons sekali saja

• Event mencatat suatu tindakan seperti klik atau pengiriman formulir. addEventListener mendaftarkan fungsi untuk dijalankan ketika event tersebut dikirimkan.
• Temukan tombol dan panel, daftarkan pendengar (listener), lalu perbarui state pada setiap klik. Jangan panggil fungsi saat mendaftarkannya jika Anda bermaksud melewatkan fungsi tersebut sebagai handler.

Pertahankan fallback yang dapat digunakan

• Simpan ini sebagai file HTML. Tautan terlihat secara awal; tombol toggle hanya muncul setelah handler-nya siap.
• Klik tombol dua kali. Pastikan panel dan aria-expanded berubah bersama-sama. Tombol bawaan juga merespons aktivasi keyboard.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Club menu</title></head>
<body>
  <button id="menu-button" type="button" hidden
          aria-controls="menu-panel" aria-expanded="true">Menu</button>
  <nav id="menu-panel" aria-label="Club">
    <a href="#meeting">Meeting details</a>
  </nav>
  <main id="meeting"><h1>Meet Thursday in room 12</h1></main>
  <script>
    const button = document.querySelector('#menu-button');
    const panel = document.querySelector('#menu-panel');
    button.addEventListener('click', () => {
      panel.hidden = !panel.hidden;
      button.setAttribute('aria-expanded', String(!panel.hidden));
    });
    button.hidden = false;
  </script>
</body>
</html>

Pisahkan pemeriksaan bantuan dari pemeriksaan terpercaya

• Validasi browser dapat memberikan umpan balik cepat, tetapi server harus memvalidasi nilai yang dikirimkan dan izin secara independen. Pemanggil dapat melewati atau mengubah kode browser.
• Gunakan textContent untuk menyisipkan teks biasa alih-alih menafsirkannya sebagai HTML. Periksa elemen yang hilang dan kesalahan sebelum menambahkan fitur lebih lanjut.

Jejakkan dua aksi dan kegagalan

• Catat state awal dan state setelah dua kali aktivasi. Ulangi menggunakan keyboard, lalu pastikan navigasi esensial tetap tersedia tanpa skrip.
• Jelaskan apa yang berjalan di browser dan apa yang masih memerlukan pemeriksaan server. Uji contoh lokal ini tanpa mengirim data formulir sungguhan.