September 20, 2025

JavaScript Foundations: รู้จัก JavaScript และพื้นฐานที่ใช้จริง

JavaScriptWeb DevelopmentProgramming BasicsEssential

ถ้าถามว่า "JavaScript คืออะไร?" คำตอบสั้นๆ คือภาษาที่ทำให้เว็บมีชีวิต แต่ถ้าถามว่า "เริ่มเขียนยังไง?" ผมจะบอกว่า - เปิด browser แล้วลงมือทำเลย ไม่ต้องติดตั้งอะไรเพิ่ม วันนี้ผมจะพาคุณเริ่มต้นจากศูนย์ พร้อมเทคนิคที่ผมใช้จริงในงาน

ทำความรู้จัก JavaScript และ Developer Tools

JavaScript คืออะไร?

JavaScript เป็นภาษาโปรแกรมที่:

ทำงานบน Browser - ไม่ต้องติดตั้งอะไรเพิ่ม
Dynamic - เปลี่ยนแปลงหน้าเว็บได้แบบ real-time
Event-driven - ตอบสนองการคลิก พิมพ์ scroll
ใช้งานได้ทั้ง Frontend และ Backend - แต่ series นี้เน้น Frontend

Developer Tools: อาวุธลับของ Web Developer

เปิด browser (แนะนำ Chrome หรือ Firefox) แล้วกด:

Windows/Linux: F12 หรือ Ctrl+Shift+I
Mac: Cmd+Option+I
หรือ: คลิกขวา -> Inspect

แท็บสำคัญที่ต้องรู้

Console - รันโค้ด JavaScript, ดู errors, debug
Elements - ดูและแก้ HTML/CSS แบบ real-time
Network - ดู API calls, load time
Sources - ดู source code, set breakpoints
Application - ดู localStorage, cookies

Console: Playground ของเรา

javascript

// พิมพ์ใน Console แล้วกด Enter
console.log("สวัสดี JavaScript!");
// Output: สวัสดี JavaScript!

// คณิตศาสตร์พื้นฐาน
console.log(10 + 5); // 15
console.log(10 - 5); // 5
console.log(10 * 5); // 50
console.log(10 / 5); // 2
console.log(10 % 3); // 1 (เศษจากการหาร)

// ต่อ string
console.log("Hello" + " " + "World");
// Output: Hello World

// Console methods อื่นๆ ที่ใช้บ่อย
console.warn("คำเตือน!"); // แสดงเป็นสีเหลือง
console.error("เกิดข้อผิดพลาด!"); // แสดงเป็นสีแดง
console.clear(); // ล้าง console

การฝัง JavaScript ในเว็บ

Tip

ทดสอบโค้ดออนไลน์ได้ทันที: ไม่ต้องสร้างไฟล์บนเครื่อง! ไปที่ CodePen แล้ว copy โค้ดด้านล่างไปวาง - HTML ใส่ช่อง HTML, JavaScript ใส่ช่อง JS แล้วคลิก Run ก็เห็นผลเลย

วิธีที่ 1: Inline JavaScript

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First JS</title>
  </head>
  <body>
    <h1>Hello World</h1>

    <!-- Inline JS (ไม่แนะนำสำหรับ production) -->
    <button onclick="alert('คุณคลิกปุ่ม!')">คลิกฉัน</button>
  </body>
</html>

วิธีที่ 2: Internal JavaScript

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First JS</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <button id="myButton">คลิกฉัน</button>

    <!-- Internal JS -->
    <script>
      const button = document.getElementById("myButton");
      button.addEventListener("click", function () {
        alert("คุณคลิกปุ่ม!");
      });
    </script>
  </body>
</html>

วิธีที่ 3: External JavaScript (แนะนำ!)

html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My First JS</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <button id="myButton">คลิกฉัน</button>

    <!-- External JS (ใส่ก่อน </body>) -->
    <script src="script.js"></script>
  </body>
</html>

javascript

// script.js
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
  alert("คุณคลิกปุ่ม!");
});

Syntax พื้นฐาน: Variables และ Data Types

Variables: ตัวแปร 3 แบบ

ใน JavaScript มีวิธีประกาศตัวแปร 3 แบบ แต่ใช้จริงแค่ 2 แบบ

javascript

// 1. const - ค่าคงที่ (ใช้ 90%)
const name = "สมชาย";
const PI = 3.14159;
const config = { apiUrl: "https://api.example.com" };
// name = "สมหญิง"; // ❌ Error! ไม่สามารถเปลี่ยนได้

// 2. let - ค่าที่เปลี่ยนแปลงได้ (ใช้ 10%)
let score = 0;
score = score + 10; // ✅ OK
score += 5; // ✅ OK (shorthand)

let isLoggedIn = false;
isLoggedIn = true; // ✅ OK

// 3. var - อย่าใช้! (legacy code)
var oldWay = "deprecated"; // ❌ มีปัญหา scope

กฎทอง: ใช้ const เป็นหลัก ถ้าต้องเปลี่ยนค่าจริงๆ ค่อยใช้ let

Data Types: ประเภทข้อมูลใน JavaScript

JavaScript เป็น dynamically typed - ไม่ต้องระบุ type ตอนประกาศตัวแปร

javascript

// 1. String - ข้อความ
const firstName = "สมชาย"; // double quotes
const lastName = 'ใจดี'; // single quotes
const fullName = `${firstName} ${lastName}`; // template literals (แนะนำ!)

// 2. Number - ตัวเลข (ทั้ง integer และ float)
const age = 25; // integer
const price = 299.99; // float
const negative = -100; // negative number
const infinity = Infinity; // special value
const notANumber = NaN; // Not a Number

// 3. Boolean - true/false
const isActive = true;
const isDeleted = false;
const isGreater = 10 > 5; // true

// 4. Undefined - ยังไม่มีค่า
let userName; // undefined
let userAge = undefined; // explicitly undefined

// 5. Null - ค่าว่างโดยตั้งใจ
const emptyValue = null;

// 6. Array - ลิสต์ของข้อมูล
const numbers = [1, 2, 3, 4, 5];
const mixed = ["text", 123, true, null];
const users = [
  { name: "สมชาย", age: 25 },
  { name: "สมหญิง", age: 23 },
];

// 7. Object - กลุ่มข้อมูลแบบ key-value
const person = {
  name: "สมชาย",
  age: 25,
  address: {
    city: "กรุงเทพ",
    zipcode: "10110",
  },
  hobbies: ["อ่านหนังสือ", "เขียนโค้ด"],
};

// เช็ค type ด้วย typeof
console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (bug ใน JS!)
console.log(typeof []); // "object"
console.log(typeof {}); // "object"

Operators: ตัวดำเนินการ

javascript

// Arithmetic Operators
const a = 10, b = 3;
console.log(a + b); // 13 - บวก
console.log(a - b); // 7  - ลบ
console.log(a * b); // 30 - คูณ
console.log(a / b); // 3.333... - หาร
console.log(a % b); // 1  - หารเอาเศษ
console.log(a ** b); // 1000 - ยกกำลัง

// Increment/Decrement
let count = 5;
count++; // 6 (เพิ่ม 1)
count--; // 5 (ลด 1)

// Assignment Operators
let x = 10;
x += 5; // x = x + 5 -> 15
x -= 3; // x = x - 3 -> 12
x *= 2; // x = x * 2 -> 24
x /= 4; // x = x / 4 -> 6

// Comparison Operators
console.log(5 == "5"); // true (type coercion)
console.log(5 === "5"); // false (strict equality) ✅ ใช้อันนี้!
console.log(5 != "5"); // false
console.log(5 !== "5"); // true ✅ ใช้อันนี้!
console.log(10 > 5); // true
console.log(10 >= 10); // true
console.log(10 < 20); // true
console.log(10 <= 10); // true

// Logical Operators
const hasEmail = true;
const hasPassword = false;

console.log(hasEmail && hasPassword); // false (AND)
console.log(hasEmail || hasPassword); // true (OR)
console.log(!hasEmail); // false (NOT)

// String Concatenation
const firstName = "John";
const lastName = "Doe";
const fullName = firstName + " " + lastName; // "John Doe"
const greeting = `Hello, ${fullName}!`; // "Hello, John Doe!"

Control Flow: การควบคุมการทำงาน

if/else - เงื่อนไขพื้นฐาน

javascript

// if statement
const age = 20;
if (age >= 18) {
  console.log("เป็นผู้ใหญ่");
}

// if-else
const score = 75;
if (score >= 80) {
  console.log("เกรด A");
} else {
  console.log("ไม่ได้ A");
}

// if-else if-else
const temperature = 32;
if (temperature > 35) {
  console.log("ร้อนมาก");
} else if (temperature > 25) {
  console.log("อากาศดี");
} else if (temperature > 15) {
  console.log("เย็นสบาย");
} else {
  console.log("หนาว");
}

// Nested conditions
const hasTicket = true;
const age2 = 15;

if (hasTicket) {
  if (age2 >= 18) {
    console.log("เข้าชมได้");
  } else {
    console.log("ต้องมีผู้ปกครอง");
  }
} else {
  console.log("กรุณาซื้อตั๋ว");
}

// Ternary operator (shorthand if-else)
const userAge = 20;
const status = userAge >= 18 ? "ผู้ใหญ่" : "เด็ก";
console.log(status); // "ผู้ใหญ่"

// Multiple conditions
const username = "admin";
const password = "1234";

if (username === "admin" && password === "1234") {
  console.log("Login สำเร็จ");
} else {
  console.log("Username หรือ Password ไม่ถูกต้อง");
}

switch - เงื่อนไขหลายทาง

javascript

const day = "Monday";

switch (day) {
  case "Monday":
    console.log("วันจันทร์ - เริ่มต้นสัปดาห์ใหม่");
    break;
  case "Friday":
    console.log("วันศุกร์ - ใกล้วันหยุดแล้ว!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("วันหยุด!");
    break;
  default:
    console.log("วันทำงานปกติ");
}

// ตัวอย่างใช้กับ menu
const menuChoice = 2;

switch (menuChoice) {
  case 1:
    console.log("เพิ่มข้อมูล");
    break;
  case 2:
    console.log("แก้ไขข้อมูล");
    break;
  case 3:
    console.log("ลบข้อมูล");
    break;
  case 4:
    console.log("ออกจากโปรแกรม");
    break;
  default:
    console.log("กรุณาเลือก 1-4");
}

Loops - การวนซ้ำ

javascript

// 1. for loop - รู้จำนวนรอบแน่นอน
for (let i = 0; i < 5; i++) {
  console.log(`รอบที่ ${i + 1}`);
}
// Output: รอบที่ 1, 2, 3, 4, 5

// วนลูปถอยหลัง
for (let i = 5; i > 0; i--) {
  console.log(`นับถอยหลัง: ${i}`);
}

// วนลูป array ด้วย index
const colors = ["แดง", "เขียว", "น้ำเงิน"];
for (let i = 0; i < colors.length; i++) {
  console.log(`${i}: ${colors[i]}`);
}

// 2. while loop - ไม่รู้จำนวนรอบแน่นอน
let count = 0;
while (count < 3) {
  console.log(`Count: ${count}`);
  count++;
}

// ตัวอย่างจริง: รอ user input
let userInput = "";
let attempts = 0;
while (userInput !== "yes" && attempts < 3) {
  // userInput = prompt("พิมพ์ yes เพื่อดำเนินการต่อ");
  userInput = "yes"; // simulate
  attempts++;
}

// 3. do...while - ทำอย่างน้อย 1 รอบ
let number = 0;
do {
  console.log(`Number: ${number}`);
  number++;
} while (number < 3);

// 4. for...of - วนลูป array values (แนะนำ!)
const fruits = ["🍎 แอปเปิล", "🍌 กล้วย", "🍊 ส้ม"];
for (const fruit of fruits) {
  console.log(fruit);
}

// 5. for...in - วนลูป object properties
const person = {
  name: "สมชาย",
  age: 25,
  city: "กรุงเทพ",
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// 6. break และ continue
for (let i = 0; i < 10; i++) {
  if (i === 3) {
    continue; // ข้ามรอบนี้
  }
  if (i === 7) {
    break; // หยุด loop
  }
  console.log(i);
}
// Output: 0, 1, 2, 4, 5, 6

// Nested loops
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

Template Literals และ String Methods

Template Literals (backticks)

javascript

// String concatenation แบบเก่า
const firstName = "สมชาย";
const lastName = "ใจดี";
const age = 25;

const oldWay = "ชื่อ: " + firstName + " " + lastName + " อายุ: " + age;

// Template literals แบบใหม่ (ใช้ backtick `)
const newWay = `ชื่อ: ${firstName} ${lastName} อายุ: ${age}`;

// ใส่ expression ได้
const price = 100;
const quantity = 3;
console.log(`ราคารวม: ${price * quantity} บาท`);

// Multi-line strings
const message = `
สวัสดีครับ
วันนี้เป็นวันที่ดี
ขอให้โชคดี
`;

// HTML templates
const user = {
  name: "John Doe",
  avatar: "avatar.jpg",
  role: "Admin",
};

const userCard = `
    <div class="user-card">
        <img src="${user.avatar}" alt="${user.name}">
        <h3>${user.name}</h3>
        <span class="role">${user.role}</span>
    </div>
`;

// Conditional ใน template
const stock = 5;
const stockStatus = `สินค้า${stock > 0 ? `เหลือ ${stock} ชิ้น` : "หมด"}`;

String Methods ที่ใช้บ่อย

javascript

const text = "  JavaScript is Awesome  ";

// Length
console.log(text.length); // 26

// Case conversion
console.log(text.toUpperCase()); // "  JAVASCRIPT IS AWESOME  "
console.log(text.toLowerCase()); // "  javascript is awesome  "

// Trim whitespace
console.log(text.trim()); // "JavaScript is Awesome"
console.log(text.trimStart()); // "JavaScript is Awesome  "
console.log(text.trimEnd()); // "  JavaScript is Awesome"

// text.trimStart() นี้ต้องลองใช้เมาส์คลุมดูนะไม่งั้นไม่เห็นว่าค่ามันเปลี่ยน

// Search
const email = "user@example.com";
console.log(email.includes("@")); // true
console.log(email.indexOf("@")); // 4
console.log(email.startsWith("user")); // true
console.log(email.endsWith(".com")); // true

// Extract
const phone = "02-123-4567";
console.log(phone.slice(0, 2)); // "02"
console.log(phone.substring(3, 6)); // "123"

// Replace
const message = "Hello World";
console.log(message.replace("World", "JavaScript")); // "Hello JavaScript"

// Split and Join
const csv = "apple,banana,orange";
const fruits = csv.split(","); // ["apple", "banana", "orange"]
console.log(fruits.join(" - ")); // "apple - banana - orange"

Project: Interactive Todo List

มาสร้าง Todo List ที่ใช้ทุกอย่างที่เรียนมา:

html

<!-- todo.html -->
<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <title>My Todo List</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, sans-serif;
        max-width: 500px;
        margin: 50px auto;
        padding: 20px;
      }
      .todo-item {
        display: flex;
        align-items: center;
        padding: 10px;
        margin: 5px 0;
        background: #f5f5f5;
        border-radius: 5px;
      }
      .completed {
        text-decoration: line-through;
        opacity: 0.5;
      }
      button {
        margin-left: auto;
        padding: 5px 10px;
        cursor: pointer;
      }
      #todoInput {
        width: 70%;
        padding: 10px;
        font-size: 16px;
      }
      #addBtn {
        width: 25%;
        padding: 10px;
        font-size: 16px;
        background: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>📝 My Todo List</h1>

    <div>
      <input type="text" id="todoInput" placeholder="เพิ่มรายการใหม่..." />
      <button id="addBtn">เพิ่ม</button>
    </div>

    <div id="stats"></div>
    <div id="todoList"></div>

    <script src="todo.js"></script>
  </body>
</html>

javascript

// todo.js - ใช้ทุกอย่างที่เรียนมา

// Data structure
let todos = [];
let nextId = 1;

// DOM elements
const todoInput = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");
const todoListDiv = document.getElementById("todoList");
const statsDiv = document.getElementById("stats");

// Add todo function
function addTodo() {
  const task = todoInput.value.trim();

  // Validation
  if (task === "") {
    alert("กรุณาใส่รายการ");
    return;
  }

  // Create todo object
  const newTodo = {
    id: nextId++,
    task: task,
    completed: false,
    createdAt: new Date().toLocaleString("th-TH"),
  };

  // Add to array
  todos.push(newTodo);

  // Clear input
  todoInput.value = "";

  // Update display
  displayTodos();
  updateStats();

  console.log(`Added: ${task}`);
}

// Display todos
function displayTodos() {
  // Clear current display
  todoListDiv.innerHTML = "";

  // Check if empty
  if (todos.length === 0) {
    todoListDiv.innerHTML = "<p>ไม่มีรายการ</p>";
    return;
  }

  // Loop and create HTML
  for (let i = 0; i < todos.length; i++) {
    const todo = todos[i];

    const todoItem = document.createElement("div");
    todoItem.className = "todo-item";
    if (todo.completed) {
      todoItem.classList.add("completed");
    }

    todoItem.innerHTML = `
            <input type="checkbox"
                   ${todo.completed ? "checked" : ""}
                   onchange="toggleTodo(${todo.id})">
            <span>${todo.task}</span>
            <button onclick="deleteTodo(${todo.id})">ลบ</button>
        `;

    todoListDiv.appendChild(todoItem);
  }
}

// Toggle todo completion
function toggleTodo(id) {
  // Find todo
  const todo = todos.find((t) => t.id === id);

  if (todo) {
    // Toggle completed status
    todo.completed = !todo.completed;

    // Update display
    displayTodos();
    updateStats();

    // Log action
    const action = todo.completed ? "completed" : "uncompleted";
    console.log(`Todo ${action}: ${todo.task}`);
  }
}

// Delete todo
function deleteTodo(id) {
  // Filter out the todo
  const todoToDelete = todos.find((t) => t.id === id);
  todos = todos.filter((t) => t.id !== id);

  // Update display
  displayTodos();
  updateStats();

  console.log(`Deleted: ${todoToDelete.task}`);
}

// Update statistics
function updateStats() {
  const total = todos.length;
  const completed = todos.filter((t) => t.completed).length;
  const pending = total - completed;

  statsDiv.innerHTML = `
        <p>ทั้งหมด: ${total} |
           เสร็จแล้ว: ${completed} |
           รอดำเนินการ: ${pending}</p>
    `;
}

// Event listeners
addBtn.addEventListener("click", addTodo);

// Enter key support
todoInput.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    addTodo();
  }
});

// Initial display
displayTodos();
updateStats();

// Test data (comment out in production)
addTodo = function () {
  const testTasks = ["เรียน JavaScript", "ทำ Todo List", "อ่านบทถัดไป"];
  const randomTask = testTasks[Math.floor(Math.random() * testTasks.length)];
  todoInput.value = randomTask;

  const task = todoInput.value.trim();
  if (task) {
    const newTodo = {
      id: nextId++,
      task: task,
      completed: false,
      createdAt: new Date().toLocaleString("th-TH"),
    };
    todos.push(newTodo);
    todoInput.value = "";
    displayTodos();
    updateStats();
  }
};

console.log("Todo List Ready! Try adding some tasks.");

Common Mistakes และวิธีแก้ไข

javascript

// 1. ❌ ใช้ == แทน ===
console.log("5" == 5); // true (type coercion)
console.log("5" === 5); // false (ถูกต้อง)
console.log(0 == false); // true (งงมาก!)
console.log(0 === false); // false (ถูกต้อง)

// ✅ ใช้ === และ !== เสมอ
if (userInput === "yes") {
}
if (count !== 0) {
}

// 2. ❌ ลืมประกาศตัวแปร
function badExample() {
  message = "Hello"; // กลายเป็น global!
}

// ✅ ประกาศตัวแปรเสมอ
function goodExample() {
  const message = "Hello"; // local variable
}

// 3. ❌ ใช้ var แทน let/const
for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100); // พิมพ์ 5 ทั้งหมด!
}

// ✅ ใช้ let ใน loop
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100); // พิมพ์ 0,1,2,3,4
}

// 4. ❌ String concatenation ยุ่งเหยิง
const name = "John";
const age = 30;
const message = "Name: " + name + ", Age: " + age + " years old";

// ✅ ใช้ template literals
const betterMessage = `Name: ${name}, Age: ${age} years old`;

// 5. ❌ ไม่ handle edge cases
function divide(a, b) {
  return a / b; // ถ้า b = 0 จะได้ Infinity!
}

// ✅ Check edge cases
function safeDivide(a, b) {
  if (b === 0) {
    console.error("Cannot divide by zero");
    return null;
  }
  return a / b;
}

// 6. ❌ Modify array while looping
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    numbers.splice(i, 1); // Bug! จะข้าม element
  }
}

// ✅ ใช้ filter แทน
const oddNumbers = numbers.filter((n) => n % 2 !== 0);

Debugging Techniques ที่ใช้จริง

javascript

// 1. Console methods ต่างๆ
const data = { name: "John", age: 30, city: "Bangkok" };

console.log("Normal log", data);
console.warn("Warning message"); // สีเหลือง
console.error("Error message"); // สีแดง
console.info("Info message"); // ข้อมูลทั่วไป
console.debug("Debug info"); // debug level

// 2. console.log with style
console.log("%c Styled text!", "color: blue; font-size: 20px;");

// 3. console.table - แสดงข้อมูลเป็นตาราง
const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 },
];
console.table(users);

// 4. console.group - จัดกลุ่ม logs
console.group("User Details");
console.log("Name: John");
console.log("Age: 30");
console.log("City: Bangkok");
console.groupEnd();

// 5. console.time - วัดเวลา
console.time("Loop timer");
for (let i = 0; i < 1000000; i++) {
  // some operation
}
console.timeEnd("Loop timer"); // Loop timer: 1ms

// 6. console.assert - เช็คเงื่อนไข
const age = 15;
console.assert(age >= 18, "User is under 18!");

// 7. debugger statement
function complexCalculation(x, y) {
  const step1 = x * 2;
  const step2 = y * 3;
  debugger; // Browser จะหยุดที่นี่
  const result = step1 + step2;
  return result;
}

// 8. การ log object แบบมี context
const userName = "John";
const userAge = 30;

// แทนที่จะ
console.log(userName);
console.log(userAge);

// ใช้แบบนี้ดีกว่า
console.log({ userName, userAge }); // { userName: "John", userAge: 30 }

// 9. Break on error ใน DevTools
// ไปที่ Sources tab -> คลิก pause icon -> เลือก "Pause on exceptions"

// 10. Conditional breakpoint
// คลิกขวาที่ line number ใน Sources -> Add conditional breakpoint
// ใส่เงื่อนไข เช่น i === 500

Practice Exercises

javascript

// 1. สร้างเครื่องคิดเลขง่ายๆ
function calculator(num1, num2, operation) {
  // เขียนโค้ดที่นี่
  // operation: 'add', 'subtract', 'multiply', 'divide'
}

// 2. เช็คว่าปีนั้นเป็น leap year หรือไม่
function isLeapYear(year) {
  // Leap year: หาร 4 ลงตัว แต่ไม่หาร 100 ลงตัว
  // ยกเว้นหาร 400 ลงตัว
}

// 3. หาค่ามากสุดใน array
function findMax(numbers) {
  // เช่น [5, 2, 9, 1, 7] -> return 9
}

// 4. กลับ string
function reverseString(str) {
  // เช่น "hello" -> "olleh"
}

// 5. นับจำนวนคำ
function countWords(sentence) {
  // เช่น "Hello world from JavaScript" -> 4
}

Outcome: สิ่งที่คุณทำได้แล้ว

หลังจบบทนี้ คุณสามารถ:

✅ เปิด DevTools และใช้ Console - รันโค้ด debug ดู errors
✅ ฝัง JavaScript ในเว็บ - ทั้งแบบ inline, internal, external
✅ ใช้ variables และ data types - const, let, string, number, boolean, array, object
✅ ใช้ operators - arithmetic, comparison, logical
✅ ควบคุม flow - if/else, switch, for, while, do-while
✅ จัดการ strings - template literals, string methods
✅ สร้าง Todo List แบบ interactive - รวมทุกอย่างที่เรียนมา
✅ Debug โค้ด - ใช้ console methods และ DevTools

Key Takeaways

JavaScript ทำงานบน browser ได้ทันที - ไม่ต้องติดตั้งอะไร
ใช้ const เป็นหลัก - let เมื่อต้องเปลี่ยนค่า, ลืม var ไปเลย
=== ดีกว่า == - strict equality ป้องกัน bug
Template literals คือเพื่อนแท้ - ใช้ backticks ทำให้ชีวิตง่ายขึ้น
Console คือที่ซ้อม - ลองผิดลองถูกใน console ก่อนเขียนจริง
Debugging เป็นส่วนหนึ่งของการเขียนโค้ด - ไม่ใช่ความล้มเหลว

Next Step

บทหน้า: Functions & Scope - เราจะเจาะลึก:

Function declarations vs expressions vs arrow functions
Scope, hoisting และ closures
Higher-order functions
Callback patterns และ event handling
Real-world patterns: debounce, throttle

พร้อมแล้วไปต่อเลย! 🚀

Tip

จากประสบการณ์: อย่าพยายามจำทุกอย่าง ให้ focus ที่การเข้าใจ concept แล้วลงมือทำ Google และ MDN docs คือเพื่อนที่ดีที่สุดของ developer ทุกคน แม้แต่คนที่มีประสบการณ์ 10+ ปี ก็ยัง Google อยู่ทุกวัน