JS-4: Real Cases
Real Cases
Section titled “Real Cases”บทนี้นำทุกอย่างที่เรียนมารวมกัน — ใช้ JavaScript จัดการ DOM, events, forms และ data persistence ใน browser จริง
เป้าหมายการเรียนรู้
Section titled “เป้าหมายการเรียนรู้”- ใช้ querySelector, createElement และ classList จัดการ DOM ได้
- สร้าง event listeners และทำ form validation ได้
- ใช้ localStorage เก็บข้อมูลถาวรใน browser ได้
- สร้าง todo app ที่ทำงานได้จริง
Progress 0 / 4
โครงสร้างบท
Section titled “โครงสร้างบท” 01 — DOM Manipulation querySelector, createElement, textContent, classList
02 — Events & Forms event listeners, form validation, preventDefault, delegation
03 — localStorage & JSON JSON.stringify/parse, localStorage, data persistence
Lab: Todo App สร้าง todo app พร้อม localStorage
จาก Console สู่ Browser
Section titled “จาก Console สู่ Browser”จนถึงตอนนี้เราเขียน JavaScript ใน console — ตอนนี้จะเริ่มเชื่อมต่อกับ HTML elements จริง ๆ
User Action → Event → JavaScript → DOM Update ↑ | └────────── Visual Feedback ─────────┘เตรียมตัว
Section titled “เตรียมตัว”สำหรับบทนี้ให้สร้างไฟล์ HTML ง่าย ๆ เพื่อทดสอบ:
<!DOCTYPE html><html lang="th"><head> <meta charset="UTF-8"> <title>JS Practice</title></head><body> <div id="app"></div> <script src="app.js"></script></body></html>