สัปดาห์ที่ 4: JavaScript พื้นฐาน

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

สัปดาห์นี้เรียนรู้ JavaScript พื้นฐาน สำหรับต่อยอดไปสู่ DOM, TypeScript และ Angular โดยเริ่มจากตัวแปร ชนิดข้อมูล โครงสร้างควบคุม ฟังก์ชัน array methods และ object

Timeline ประวัติ JavaScript

%%{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["ยุคเริ่มต้น / Early Web"]
    A["1995
JavaScript ถือกำเนิด
Created for browser scripting"]
    B["1997
ECMAScript 1
Standardization begins"]
  end
  subgraph E2["ยุคเว็บแอป / Web App Era"]
    C["2005
AJAX popular
Dynamic web interaction"]
    D["2009
Node.js
JavaScript on server"]
  end
  subgraph E3["ยุคสมัยใหม่ / Modern JS"]
    E["2015
ES6
let, const, class, modules"]
    F["ปัจจุบัน
Modern JavaScript
Frontend, Backend, Tooling"]
  end
  A --> B --> C --> D --> E --> F

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

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

• ใช้ var, let, const และอธิบาย Scope ได้
• เลือกใช้ชนิดข้อมูลพื้นฐานของ JavaScript ได้เหมาะสม
• เขียนเงื่อนไขและ loop ได้
• สร้างและเรียกใช้ฟังก์ชันได้หลายรูปแบบ
• ใช้ array methods เพื่อแปลง กรอง ค้นหา และสรุปข้อมูลได้
• ใช้ object, destructuring และ spread/rest operator ได้

หัวข้อย่อย

สมการภาพรวมคะแนนเฉลี่ย

โดยที่ avg คือค่าเฉลี่ย, n คือจำนวนข้อมูลทั้งหมด, และ xᵢ คือค่าข้อมูลลำดับที่ i

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

• เขียนโปรแกรมคำนวณคะแนนเฉลี่ยจาก array
• แยกผู้ผ่านและไม่ผ่านด้วย filter
• สร้าง object นักศึกษาและใช้ destructuring เพื่อแสดงผล
• ใช้ function แปลงคะแนนเป็นเกรด

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

1. let และ const ต่างกันอย่างไร
2. typeof null ให้ผลลัพธ์อะไร และควรระวังอย่างไร
3. for...of และ for...in ต่างกันอย่างไร
4. Arrow function ไม่มี this ของตัวเองหมายความว่าอะไร
5. map, filter, reduce ใช้ต่างกันอย่างไร
6. Spread operator กับ rest parameter ใช้ต่างบริบทกันอย่างไร

กลับรายวิชา