สัปดาห์ที่ 6 DOM Manipulation และ Event Handling

สไลด์บทเรียน

วัตถุประสงค์

1. เลือก element จาก DOM และเปลี่ยนเนื้อหา/style/class ได้
2. ใช้ event listener เพื่อสร้างการโต้ตอบกับผู้ใช้ได้
3. สร้าง Interactive Web Page อย่างง่ายได้

หัวข้อย่อย

1. DOM คืออะไร
2. querySelector และ querySelectorAll
3. การอ่านและเปลี่ยน textContent, value, classList
4. Event: click, input, submit
5. Event Object
6. การสร้างและลบ element
7. แนวทางแยก state, render และ event handler

เนื้อหา

DOM คือโครงสร้างข้อมูลของหน้าเว็บที่ JavaScript เข้าถึงและแก้ไขได้ เมื่อผู้ใช้คลิก พิมพ์ หรือส่งฟอร์ม JavaScript สามารถฟัง event และอัปเดตหน้าเว็บให้ตอบสนองทันที

การเขียนโค้ด DOM ที่ดูแลต่อได้ควรแยกส่วนข้อมูลออกจากส่วนแสดงผล เช่น เก็บข้อมูลไว้ในตัวแปร แล้วมี function สำหรับ render ข้อมูลลงหน้าเว็บ

ตัวอย่าง

const button = document.querySelector("#save");
const output = document.querySelector("#result");

button.addEventListener("click", () => {
  output.textContent = "Saved";
});

กิจกรรมในชั้นเรียน

สร้างหน้าเว็บโต้ตอบ เช่น counter, todo list ขนาดเล็ก หรือแบบฟอร์มที่แสดงผลทันที

ศึกษาค้นคว้านอกเวลา

พัฒนาแบบฟอร์มโต้ตอบที่อ่านค่าจาก input และแสดงผลในหน้าเดียวกัน

คำถามทบทวน

1. DOM ช่วยให้ JavaScript ควบคุมหน้าเว็บได้อย่างไร
2. Event listener ทำงานเมื่อใด
3. เพราะเหตุใดจึงควรแยก logic ออกจากการ render

กลับรายวิชา