การทำงานร่วมกันด้วย JavaScript

เมนูเปิด แต่ปุ่มยังบอกว่าเป็นปิด

• แผงที่มองเห็นได้และสถานะ accessibility อาจไม่ตรงกัน การโต้ตอบที่เชื่อถือได้ควรอัปเดตทั้งเนื้อหาและควบคุมที่อธิบายมัน
• JavaScript ในเบราว์เซอร์ตอบสนองต่อการใช้งานของผู้ใช้ ห้ามใส่ข้อมูลลับเช่นรหัสผ่านในโค้ดฝั่ง client เพราะผู้เยี่ยมชมสามารถตรวจสอบและแก้ไขสิ่งที่กำลังทำงานบนเครื่องของตนเองได้

หาองค์ประกอบที่ parses แล้ว

• DOM แทนเอกสารโดยแบ่งเป็นโหนดเมื่อ HTML ถูก parse โค้ดสามารถค้นหาโหนดที่มีอยู่และเปลี่ยนแปลงคุณสมบัติของโหนดนั้นได้
• สคริปต์ที่ทำงานก่อนเป้าหมายถูก parse อาจได้รับ null สคริปต์ภายนอกแบบ deferred จะทำงานหลังการ parse; ส่วนสคริปต์ที่อยู่ท้าย body ก็ทำงานได้ดีสำหรับองค์ประกอบที่อยู่เหนือมันอยู่แล้ว

ลงทะเบียนการตอบสนองเพียงครั้งเดียว

• Event บันทึกการกระทำเช่นการคลิกหรือส่งฟอร์ม addEventListener ทำการลงทะเบียน function เพื่อทำงานเมื่อ event นั้นถูกส่งออกมา
• หาปุ่มและแผง (panel) ลงทะเบียน listener แล้วอัปเดต state ทุกครั้งที่คลิก อย่าเรียก function ขณะลงทะเบียนมันหากคุณต้องการส่งมันไปเป็น handler

รักษาค่าสำรองให้ใช้งานได้

• บันทึกเป็นไฟล์ HTML ลิงก์จะปรากฏให้เห็นตั้งแต่ต้น; ปุ่มสลับจะแสดงก็ต่อเมื่อ handler ของมันพร้อมใช้งานแล้วเท่านั้น
• คลิกปุ่มสองครั้ง ตรวจสอบว่าแผงและ aria-expanded เปลี่ยนแปลงไปด้วยกัน ปุ่ม native ยังตอบสนองต่อการกดจากคีย์บอร์ดด้วย

<!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>

แยกการตรวจสอบที่ช่วยได้จากการตรวจสอบที่เชื่อถือได้

• การตรวจสอบจากเบราว์เซอร์สามารถให้ผลตอบรับได้รวดเร็ว แต่เซิร์ฟเวอร์ต้องตรวจสอบค่าและสิทธิ์ที่ส่งมาอย่างอิสระ ผู้เรียกอาจข้ามหรือแก้ไขโค้ดในเบราว์เซอร์ได้
• ใช้ textContent เพื่อแทรกข้อความธรรมดาแทนการตีความว่าเป็น HTML ตรวจสอบองค์ประกอบที่ขาดหายและความผิดพลาดก่อนเพิ่มฟีเจอร์อื่นๆ

ติดตามการกระทำสองครั้งและความล้มเหลว

• บันทึกสถานะเริ่มต้นและสถานะหลังการกระตุ้นสองครั้ง ทดสอบอีกครั้งโดยใช้คีย์บอร์ด แล้วตรวจสอบว่าการนำทางที่สำคัญยังคงมีอยู่โดยไม่ต้องใช้สคริปต์
• อธิบายว่าอะไรทำงานในเบราว์เซอร์และอะไรยังต้องการการตรวจสอบจากเซิร์ฟเวอร์ ทดลองตัวอย่างนี้ในเครื่องโดยไม่ส่งข้อมูลฟอร์มจริง