reveal.js

# บทที่ 3

JavaScript และ Modern Front-end

---

## เป้าหมาย

- ใช้ **JavaScript** สร้างหน้าเว็บแบบ interactive
- เข้าใจ **ES6+**, variable, function และ module
- จัดการ **DOM** และ **Event**
- ใช้ **Fetch API** และ **Async/Await**
- สร้างรายการข้อมูลที่ค้นหาและกรองได้

---

## JavaScript บนหน้าเว็บ

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
flowchart LR
  A[User Action<br/>ผู้ใช้] --> B[Event Listener<br/>รับเหตุการณ์]
  B --> C[JavaScript Logic<br/>ตรรกะ]
  C --> D[DOM Update<br/>อัปเดตหน้า]
  C --> E[Fetch API<br/>เรียก API]
  E --> D
</pre>

---

## ES6+ Essentials

| หัวข้อ | ใช้ทำอะไร |
|---|---|
| `const`, `let` | เก็บข้อมูล |
| Arrow Function | เขียน callback ให้กระชับ |
| Template Literal | แทรกค่าลงข้อความ |
| Destructuring | แยกค่าจาก object/array |
| Module | แยกโค้ดเป็นไฟล์ |

---

## Variables

```js
const courseName = 'Web Application Development';

let learnerCount = 25;
learnerCount = learnerCount + 1;

console.log(`${courseName}: ${learnerCount} learners`);
```

- ใช้ `const` เป็นค่าเริ่มต้น
- ใช้ `let` เมื่อค่าต้องเปลี่ยน
- หลีกเลี่ยง `var` ในโค้ดใหม่

---

## Functions

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

const formatCurrency = (amount) => `${amount.toLocaleString()} บาท`;

console.log(formatCurrency(calculateTotal(120, 3)));
```

---

## Array Methods

```js
const devices = products.filter((product) =>
  product.category === 'device'
);

const names = devices.map((product) => product.name);
```

| Method | หน้าที่ |
|---|---|
| `map` | แปลงข้อมูล |
| `filter` | คัดข้อมูล |
| `find` | หา item แรก |
| `reduce` | รวมค่า |

---

## DOM

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#b8bb26'}}}%%
flowchart TD
  A[document<br/>เอกสาร] --> B[html]
  B --> C[head]
  B --> D[body]
  D --> E[main<br/>เนื้อหา]
  E --> F[button<br/>ปุ่ม]
  E --> G[section<br/>ผลลัพธ์]
</pre>

---

## DOM Update

```html
<button id="loadButton">โหลดข้อมูล</button>
<p id="status">ยังไม่ได้โหลดข้อมูล</p>

button.addEventListener('click', () => {
    statusText.textContent = 'กำลังโหลดข้อมูล...';
  });
</script>
```

---

## Events

| Event | ใช้กับ |
|---|---|
| `click` | ปุ่ม เมนู card |
| `input` | ช่องค้นหา |
| `submit` | ฟอร์ม |
| `change` | select/checkbox |
| `keydown` | shortcut |

---

## Form Event

```js
form.addEventListener('submit', (event) => {
  event.preventDefault();
  result.textContent = `คำค้นหา: ${keywordInput.value}`;
});
```

- `submit` เกิดเมื่อส่งฟอร์ม
- `preventDefault()` ป้องกัน reload
- อ่านค่าจาก input แล้วอัปเดต DOM

---

## Modules

```js
// api.js
export async function getProducts() {
  const response = await fetch('/api/products.json');
  return response.json();
}
```

```js
// app.js
import { getProducts } from './api.js';

const products = await getProducts();
```

---

## Fetch Flow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
sequenceDiagram
  participant U as User<br/>ผู้ใช้
  participant B as Browser<br/>เบราว์เซอร์
  participant A as API<br/>บริการข้อมูล
  U->>B: Click Load Data
  B->>A: fetch('/api/products')
  A-->>B: JSON Response
  B-->>U: Render Cards
</pre>

---

## Async/Await

```js
async function loadProducts() {
  try {
    const response = await fetch('/api/products.json');
    const products = await response.json();
    return products;
  } catch (error) {
    return [];
  }
}
```

---

## เวลาแสดงข้อมูล

- **T**: เวลารวมก่อนเห็นข้อมูล
- **N**: เวลา network
- **P**: เวลา process ข้อมูล
- **R**: เวลา render ลง DOM

---

## Mini App

```html
<form id="searchForm">
  <input id="keyword" type="search">
  <button type="submit">ค้นหา</button>
</form>

<section id="productList"></section>
```

---

## Filter + Render

```js
form.addEventListener('submit', (event) => {
  event.preventDefault();

const keyword = keywordInput.value.toLowerCase();
  const filtered = products.filter((product) =>
    product.name.toLowerCase().includes(keyword)
  );

renderProducts(filtered);
});
```

---

## Checklist

- ใช้ `const` และ `let` เหมาะสม
- แยก logic เป็น function
- เลือก DOM ด้วย selector ที่ชัดเจน
- ใช้ `addEventListener`
- จัดการ loading/error เมื่อเรียก API
- อัปเดต DOM เฉพาะส่วนที่จำเป็น

---

## กิจกรรม

สร้าง **Product Explorer** หรือ **Student Directory**

1. โหลดข้อมูลจาก API จำลองหรือ array จำลอง
2. แสดงข้อมูลเป็น card
3. ค้นหาและกรองข้อมูลได้
4. แสดงจำนวนผลลัพธ์
5. แสดงข้อความเมื่อไม่พบข้อมูล

---

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

1. `let`, `const` และ `var` ต่างกันอย่างไร
2. DOM ทำให้หน้าเว็บ interactive ได้อย่างไร
3. `map` และ `filter` ต่างกันอย่างไร
4. ทำไมต้องใช้ `preventDefault()` กับ form
5. `async/await` ช่วยให้งาน API อ่านง่ายขึ้นอย่างไร