สัปดาห์ที่ 5: JavaScript กับ DOM และ Event

เป้าหมายของสัปดาห์

สัปดาห์นี้เรียนรู้การทำให้หน้าเว็บ โต้ตอบกับผู้ใช้ ผ่าน DOM, Event, Form Validation, Web Storage และ Browser APIs ซึ่งเป็นพื้นฐานสำคัญของเว็บแอปพลิเคชันฝั่ง Client-Side

Timeline ประวัติ DOM และ Browser APIs

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart LR
  subgraph E1["ยุคเอกสารเว็บ / Document Web"]
    A["1998
DOM Level 1
โครงสร้างเอกสารมาตรฐาน"]
    B["2000
DOM Level 2 Events
ระบบ Event มาตรฐาน"]
  end
  subgraph E2["ยุคเว็บโต้ตอบ / Interactive Web"]
    C["2005
AJAX Era
หน้าเว็บอัปเดตข้อมูลได้"]
    D["2009
Web Storage
localStorage/sessionStorage"]
  end
  subgraph E3["ยุคเว็บแอป / Web App Platform"]
    E["2010s
Browser APIs
Geolocation, Notification"]
    F["ปัจจุบัน
Modern DOM APIs
Observer, Clipboard, Media Queries"]
  end
  A --> B --> C --> D --> E --> F

ผลลัพธ์การเรียนรู้

เมื่อเรียนจบสัปดาห์นี้ ผู้เรียนสามารถ

• เลือกและ traverse element ผ่าน DOM
• สร้าง แทรก ลบ และแก้ไข element ด้วย JavaScript
• ใช้ Event Handling และเข้าใจ Bubbling/Capturing
• ตรวจสอบฟอร์มด้วย JavaScript และ Constraint Validation API
• บันทึกข้อมูลลง localStorage/sessionStorage
• ใช้ Browser APIs เบื้องต้น เช่น Geolocation, Notification, Clipboard และ IntersectionObserver

หัวข้อย่อย

สมการจำนวน Listener ทั้งหมด

โดยที่ L คือจำนวน event listener ทั้งหมด, n คือจำนวน element, และ e คือจำนวน event ที่ผูกต่อ element

กิจกรรมประจำสัปดาห์

• สร้าง Todo List ที่เพิ่ม ลบ และบันทึกข้อมูลได้
• เพิ่ม form validation แบบ real-time
• บันทึก theme ลง localStorage
• ทดลองใช้ Clipboard API หรือ Notification API

กลับรายวิชา