Client-Side Interactions & State Management

UI คือภาพสะท้อนของข้อมูล — เราไม่ลบแถวออกจาก HTML แต่ลบ item ออกจาก array แล้วสั่ง render ใหม่

HTML vs UI vs DOM

• HTML เป็น "โครงกระดูก" ของ UI — เว็บไม่มี HTML ไม่ได้
• DOM เป็น programming interface (API) ให้ JavaScript เข้าไปเปลี่ยนโครงสร้าง สไตล์ และเนื้อหาได้
• ลำดับใน HTML (อะไรมาก่อน อะไรจัดกลุ่มกัน) คือหัวใจของ accessibility

DOM Tree

<html lang="en">
  <head><title>Accessing DOM</title></head>
  <body>
    <script>
      const heading = document.createElement("h1");
      const headingText = document.createTextNode("Big Head!");
      heading.appendChild(headingText);
      document.body.appendChild(heading);
    </script>
  </body>
</html>

Event-Driven Architecture (EDA)

ส่วนประกอบของระบบสื่อสารกันด้วยการ "ผลิต" และ "ตอบสนอง" ต่อ event

Event Loop

• JavaScript เป็น single-threaded — ทำงานได้ทีละอย่าง
• ระหว่างรอผู้ใช้คลิกหรือรอไฟล์โหลด มันไม่ค้าง แต่เอา event ไปเข้า queue
• จุดที่ข้อสอบชอบถาม: ถ้าเอางานหนัก (เช่นประมวลผลสินค้า 10,000 ชิ้น) มารันบน main thread ตรง ๆ UI จะ ค้าง (hang)
• แก้ด้วย logic แบบ asynchronous

Event Delegation

document.getElementById('catalog').addEventListener('click', function(event) {
    const btn = event.target.closest('.add-to-cart');
    if (!btn) return;                      // คลิกโดนที่ว่าง ไม่ต้องทำอะไร
    const id = btn.dataset.id;             // อ่าน data-id ของปุ่มที่ถูกคลิก
    addToCart(id);
});

Debouncing

ช่องค้นหาที่กรองทุกการกดแป้นอาจยิง 10 requests ใน 2 วินาที — แก้ด้วยการรอให้ผู้ใช้หยุดพิมพ์ 300msก่อนค่อยทำงาน

let timer;
searchBox.addEventListener('input', function(e) {
    clearTimeout(timer);                        // ยกเลิกนัดเดิม
    timer = setTimeout(function() {
        filterProducts(e.target.value);         // ทำจริงเมื่อเงียบครบ 300ms
    }, 300);
});

State เป็น Single Source of Truth

1. UI คือภาพสะท้อนของ state — ไม่ลบแถวใน HTML แต่ลบ item ออกจาก array แล้ว render ใหม่ ถ้าข้อมูลถูก UI จะถูกตาม
2. แยก logic ออกจาก trigger — filterProducts() ไม่ควรสนใจว่าถูกเรียกจาก input box หรือ dropdown ทำให้นำกลับมาใช้ซ้ำและเทสต์ง่าย
3. เผื่อ edge case — ถ้าค้นแล้วไม่เจอ ต้องมี state "No results found" ไม่ใช่ปล่อยหน้าว่าง

localStorage / sessionStorage / cookies

localStorage.setItem('theme', 'dark');        // เพิ่ม/ทับค่า
const theme = localStorage.getItem('theme');  // อ่านค่า
localStorage.removeItem('theme');             // ลบเฉพาะ key
localStorage.clear();                         // ล้างทั้ง origin

• Same-Origin Policy — แยกตาม protocol + domain + port เช่น http://site.com อ่านข้อมูลของ https://site.com ไม่ได้
• Synchronous — ถ้าข้อมูลใหญ่มากจะบล็อก main thread

Serialization Bridge

localStorage เก็บได้แค่ string จึงต้องแปลงไปกลับ

localStorage.setItem('cart', JSON.stringify(cartArray));   // Saving  : object → string
const cart = JSON.parse(localStorage.getItem('cart'));      // Loading : string → object

State Rehydration — ลำดับตอนเปิดหน้า

1. Check — มี key shopping_cart ใน localStorage ไหม
2. Validate — ข้อมูลที่ได้เป็น array ที่ใช้ได้จริงไหม (เผื่อข้อมูลเสีย)
3. Sync — ตั้งค่าตัวแปร global cartState ให้เท่ากับข้อมูลที่บันทึกไว้
4. Render — เรียกฟังก์ชันอัปเดต UI ทันที ให้ผู้ใช้เห็นของในตะกร้าตั้งแต่หน้าโหลดเสร็จ

ความเสี่ยง XSS ของ localStorage

ทางลด: sanitize ข้อมูลก่อนเอาไปแสดงผลใน DOM, ใช้ cookie แบบ HttpOnly สำหรับ token ที่อ่อนไหว และตั้งอายุ token ให้สั้น