JavaScript: ทำให้หน้าเว็บมีชีวิต

ใช้ใน Challenge Day 1 และเป็นภาษาของทุกวันหลังจากนั้น

JavaScript คือภาษาโปรแกรมของเว็บ ใช้ทำสิ่งที่เกิดขึ้นเมื่อผู้ใช้กดหรือพิมพ์ และเป็นภาษาเดียวกับที่ใช้ใน React, Next.js และ Node.js ทั้งคอร์ส

At a glance

Item	Details
ไฟล์	`script.js` เชื่อมด้วย `<script src="script.js"></script>` ก่อน `</body>`
รันที่ไหน	เบราว์เซอร์ (หน้าเว็บ) และ Node.js (เซิร์ฟเวอร์)
ดูผลและ error	DevTools → แท็บ Console
ภาษาพี่น้อง	TypeScript = JavaScript ที่ระบุชนิดข้อมูล (ไฟล์ `.ts`, `.tsx`)

Syntax พื้นฐาน

// ตัวแปร: const = เปลี่ยนค่าไม่ได้, let = เปลี่ยนได้
const name = "Natch";
let count = 0;

// ชนิดข้อมูล
const age = 22;                          // number
const isStudent = true;                  // boolean
const skills = ["HTML", "CSS", "JS"];    // array
const me = { name: "Natch", age: 22 };   // object

// function
function greet(name) {
  return "Hello, " + name;
}
const add = (a, b) => a + b;             // arrow function

// เงื่อนไข
if (age >= 18) {
  console.log("ผู้ใหญ่");
} else {
  console.log("เด็ก");
}

// วนซ้ำ
for (const skill of skills) {
  console.log(skill);
}

Array methods

ใช้บ่อยมากใน React: map แปลงทุกตัว filter เลือกบางตัว

const prices = [60, 45, 70];

prices.map((p) => p * 2);        // [120, 90, 140]
prices.filter((p) => p > 50);    // [60, 70]
prices.find((p) => p > 50);      // 60
prices.reduce((sum, p) => sum + p, 0);  // 175

DOM: เลือก ฟัง เปลี่ยน

บนหน้าเว็บ JavaScript ทำ 3 อย่างหลัก: เลือก element, ฟัง event, และ เปลี่ยน หน้าเว็บ

// 1. เลือก element จาก HTML
const button = document.querySelector("#follow-btn");
let following = false;

// 2. ฟังว่าเมื่อไรถูกคลิก
button.addEventListener("click", () => {
  following = !following;

  // 3. เปลี่ยนหน้าเว็บ
  button.textContent = following ? "Following" : "Follow";
  button.classList.toggle("active");
});

ดึงข้อมูลด้วย fetch

เรียก API แล้วรอผลด้วย async / await ใช้จริงใน Day 3

async function loadProducts() {
  const res = await fetch("http://localhost:4000/api/products");
  const products = await res.json();
  console.log(products);
}