สัปดาห์ที่ 1: บทนำและกระบวนทัศน์การโปรแกรมเว็บ

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

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

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

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

  1. อธิบายวิวัฒนาการของเว็บตั้งแต่ Web 1.0 ถึง Web 3.0 ได้
  2. อธิบายวงจร HTTP request/response และบทบาทของ DNS, TCP/IP, HTTPS ได้
  3. แยกความแตกต่างระหว่าง Client-Side, Server-Side และ Full-Stack ได้
  4. เลือกใช้แนวทาง Static, Dynamic หรือ Hybrid Web ให้เหมาะกับประเภทโปรเจกต์ได้
  5. ใช้เครื่องมือพื้นฐาน เช่น Browser DevTools, VS Code, Terminal, Node.js และ Postman ได้
  6. เห็นภาพรวมของเทคโนโลยีเว็บสมัยใหม่และแผนการเรียนรู้ของรายวิชา

หัวข้อย่อย

ลำดับ หัวข้อ ไฟล์บทเรียน สไลด์
1 ประวัติและวิวัฒนาการของเว็บ webprogram-01-introduction-01-web-evolution.md webprogram-01-introduction-01-web-evolution-slides.mdx
2 โครงสร้างอินเทอร์เน็ตและ HTTP/HTTPS webprogram-01-introduction-02-internet-http.md webprogram-01-introduction-02-internet-http-slides.mdx
3 Client-Side, Server-Side และ Full-Stack webprogram-01-introduction-03-development-paradigms.md webprogram-01-introduction-03-development-paradigms-slides.mdx
4 Static Web และ Dynamic Web webprogram-01-introduction-04-static-dynamic-web.md webprogram-01-introduction-04-static-dynamic-web-slides.mdx
5 เครื่องมือพัฒนาเว็บ webprogram-01-introduction-05-web-development-tools.md webprogram-01-introduction-05-web-development-tools-slides.mdx
6 เทคโนโลยีเว็บสมัยใหม่ webprogram-01-introduction-06-modern-web-technologies.md webprogram-01-introduction-06-modern-web-technologies-slides.mdx

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

  1. เปิด Browser DevTools แล้วสำรวจแท็บ Elements, Console และ Network
  2. เข้าเว็บไซต์ที่ใช้บ่อย 1 เว็บไซต์ แล้วสังเกต request, response, status code และไฟล์ที่ถูกโหลด
  3. วาดแผนภาพการทำงานของเว็บ 1 หน้า ตั้งแต่ผู้ใช้พิมพ์ URL จนเห็นหน้าเว็บ
  4. เขียนสรุปสั้น ๆ ว่าโปรเจกต์เว็บที่สนใจควรเป็น Static, Dynamic หรือ Hybrid เพราะอะไร

แบบทดสอบหลังเรียนประจำสัปดาห์

  1. Web 1.0, Web 2.0 และ Web 3.0 แตกต่างกันอย่างไร
  2. DNS มีบทบาทอย่างไรเมื่อผู้ใช้พิมพ์ชื่อเว็บไซต์
  3. HTTP method GET และ POST ต่างกันอย่างไร
  4. Client-Side และ Server-Side มีข้อดีข้อจำกัดต่างกันอย่างไร
  5. Static Web เหมาะกับโปรเจกต์ประเภทใด
  6. DevTools ช่วยนักพัฒนาเว็บตรวจสอบปัญหาอะไรได้บ้าง
  7. ยกตัวอย่าง frontend framework และ backend framework อย่างละ 2 ตัว

กลับรายวิชา