reveal.js

# สัปดาห์ที่ 5

JavaScript พื้นฐาน

---

## เป้าหมายบทเรียน

- อธิบาย JavaScript ใน browser ได้
- ใช้ `let` และ `const`
- เข้าใจ data types และ operators
- เขียน conditions และ loops
- สร้าง functions และ arrow functions
- ใช้ arrays และ objects เบื้องต้น

---

## JavaScript ทำอะไร

- คำนวณ
- ตรวจเงื่อนไข
- จัดการข้อมูล
- ควบคุมพฤติกรรมหน้าเว็บ

---

## 1. JavaScript ทำงานในเว็บอย่างไร

```mermaid
flowchart LR
  HTML[HTML Structure] --> CSS[CSS Presentation]
  CSS --> JS[JavaScript Behavior]
  JS --> UX[User Interaction]
```

---

## เชื่อม JavaScript กับ HTML

```html
<script src="js/main.js" defer></script>
```

ใช้ `defer` เพื่อให้ browser โหลด script โดยไม่ขัดจังหวะการอ่าน HTML

---

## ทดลองใน Console

```js
console.log("Hello Front-end");
```

`console.log()` ใช้ตรวจค่าระหว่างพัฒนาใน DevTools

---

## 2. Variables: let และ const

```js
const title = "Frontend";
let count = 0;

count++;
```

---

## ใช้ let หรือ const

| คำสั่ง | ใช้เมื่อ | เปลี่ยนค่าใหม่ได้หรือไม่ |
|---|---|---|
| `const` | ค่าที่ไม่ต้อง assign ใหม่ | ไม่ได้ |
| `let` | ค่าที่ต้องเปลี่ยนระหว่างทำงาน | ได้ |

---

## ตั้งชื่อตัวแปร

- ใช้ camelCase
- ชื่อสื่อความหมาย
- หลีกเลี่ยง `x`, `data`, `thing`
- ไม่ใช้ `var` ในงานใหม่

```js
const studentName = "Suda";
let userScore = 0;
```

---

## 3. Data Types

| Type | ตัวอย่าง |
|---|---|
| String | `"HTML"` |
| Number | `42` |
| Boolean | `true` |
| Undefined | `undefined` |
| Null | `null` |
| Array | `["HTML", "CSS"]` |
| Object | `{ name: "Ann" }` |

---

## ตัวอย่าง Data Types

```js
const title = "Portfolio";
const year = 2026;
const isPublished = true;
const tags = ["HTML", "CSS", "JavaScript"];
const student = {
  name: "Suda",
  major: "AI and Digital Innovation",
};
```

---

## ตรวจชนิดข้อมูล

```js
console.log(typeof title);       // string
console.log(typeof year);        // number
console.log(typeof isPublished); // boolean
```

ข้อมูลจาก form มักเป็น string ต้องแปลงก่อนคำนวณ

```js
const price = Number("120");
```

---

## 4. Operators

```js
const subtotal = 100 * 3;
const discount = subtotal * 0.1;
const total = subtotal - discount;
```

| Operator | ความหมาย |
|---|---|
| `+` | บวกหรือเชื่อม string |
| `-` | ลบ |
| `*` | คูณ |
| `/` | หาร |
| `%` | เศษจากการหาร |

---

## Comparison Operators

```js
const score = 75;

console.log(score >= 50);  // true
console.log(score === 75); // true
console.log(score !== 0);  // true
```

ใช้ `===` และ `!==` เพื่อลดการแปลงชนิดข้อมูลอัตโนมัติ

---

## Logical Operators

```js
const age = 20;
const hasTicket = true;

const canEnter = age >= 18 && hasTicket;
```

- `&&` และ
- `||` หรือ
- `!` ไม่

---

## Template Literal

```js
const name = "Suda";
const message = `Hello, ${name}`;
```

ใช้ backtick เพื่อแทรกค่าตัวแปรในข้อความ

---

## 5. Conditions

```js
if (score >= 50) {
  status = "pass";
} else {
  status = "retry";
}
```

---

## หลายเงื่อนไข

```js
const score = 82;

if (score >= 80) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else if (score >= 50) {
  console.log("Pass");
} else {
  console.log("Retry");
}
```

---

## แยกเงื่อนไขให้อ่านง่าย

```js
const isEmailValid = email.includes("@");
const isPasswordValid = password.length >= 8;

if (isEmailValid && isPasswordValid) {
  console.log("Form is valid");
}
```

---

## Ternary Operator

```js
const status = score >= 50 ? "pass" : "retry";
```

ใช้กับเงื่อนไขสั้น ๆ ที่คืนค่า

---

## 6. Loops

ใช้ทำงานซ้ำ เช่น แสดงรายการหรือคำนวณหลายค่า

```js
for (let i = 1; i <= 5; i++) {
  console.log(`รอบที่ ${i}`);
}
```

---

## for...of

```js
const skills = ["HTML", "CSS", "JavaScript"];

for (const skill of skills) {
  console.log(skill);
}
```

เหมาะกับการวนอ่านค่าจาก array

---

## forEach

```js
skills.forEach((skill) => {
  console.log(`กำลังเรียน ${skill}`);
});
```

---

## คำนวณผลรวม

```js
const scores = [80, 75, 90];
let total = 0;

for (const score of scores) {
  total += score;
}

const average = total / scores.length;
```

---

## 7. Functions

```js
function calculateTotal(price, quantity) {
  return price * quantity;
}

const total = calculateTotal(120, 3);
```

---

## Arrow Functions

```js
const total = (price, qty) => price * qty;
```

---

## Function ที่มีเงื่อนไข

```js
const gradeOf = (score) => {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "Pass";
  return "Retry";
};
```

---

## ตั้งชื่อ Function

ใช้คำกริยาและสื่อหน้าที่

- `calculateTotal`
- `renderProfile`
- `validateEmail`
- `getAverageScore`

---

## 8. Arrays

```js
const skills = ["HTML", "CSS", "JavaScript"];

console.log(skills[0]);     // HTML
console.log(skills.length); // 3

skills.push("Angular");
```

---

## Array Methods

| Method | หน้าที่ |
|---|---|
| `push` | เพิ่ม item ท้าย array |
| `pop` | ลบ item ท้าย array |
| `map` | แปลงเป็น array ใหม่ |
| `filter` | กรองข้อมูล |
| `find` | ค้นหา item แรกที่ตรงเงื่อนไข |

---

## Objects

```js
const student = {
  id: "651234",
  name: "Suda",
  score: 82,
  isActive: true,
};

console.log(student.name);
console.log(student["score"]);
```

---

## Array of Objects

```js
const courses = [
  { code: "04-511-208", title: "Front-end Development" },
  { code: "04-522-306", title: "Web Application Development" },
];

for (const course of courses) {
  console.log(`${course.code}: ${course.title}`);
}
```

---

## Checklist ก่อนส่งงาน JavaScript

- ใช้ `const` เป็นค่าเริ่มต้น
- ใช้ `let` เมื่อค่าต้องเปลี่ยน
- ใช้ `===` และ `!==`
- แยก logic ที่ใช้ซ้ำออกเป็น function
- ตรวจชนิดข้อมูลก่อนคำนวณ
- ระวัง loop ไม่สิ้นสุด
- ใช้ array/object ให้เหมาะกับข้อมูล

---

## กิจกรรม

แก้โจทย์ JavaScript ด้วย variables, conditions, loops และ functions

---

## คำถามท้ายบท

1. `let` และ `const` ต่างกันอย่างไร
2. ทำไมข้อมูลจาก form จึงต้องระวังชนิดข้อมูล
3. Function ช่วยให้โค้ดดูแลต่อได้อย่างไร
4. Array และ Object ใช้เก็บข้อมูลต่างกันอย่างไร