September 24, 2025

JavaScript Foundations: รู้จัก JavaScript และพื้นฐานที่จำเป็น

Console & DebugVariables & Data TypesControl FlowTemplate LiteralsDebugging Techniques

ก่อนที่เราจะเริ่มเขียนโค้ด มาทำความเข้าใจกันก่อนว่า JavaScript คืออะไร และทำไมเราถึงต้องเรียนมัน

ลองนึกภาพเว็บไซต์เป็นเหมือนบ้านหนึ่งหลัง:

HTML คือโครงสร้างบ้าน (ผนัง, หลังคา, ประตู, หน้าต่าง)
CSS คือการตกแต่งบ้าน (สี, ขนาด, รูปแบบ)
JavaScript คือสิ่งที่ทำให้บ้านมีชีวิต (ไฟเปิด-ปิดได้, ประตูเปิด-ปิดได้, แอร์ทำงาน)

พูดง่ายๆ JavaScript ทำให้เว็บของเราโต้ตอบกับผู้ใช้ได้ ไม่ว่าจะเป็นการคลิกปุ่ม, กรอกฟอร์ม, หรือแสดงข้อมูลแบบ real-time

ข่าวดีคือ: คุณไม่ต้องติดตั้งอะไรเลย! เพราะทุก browser มี JavaScript มาให้แล้ว เปิด browser ขึ้นมาก็เริ่มเรียนได้เลย

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

ทำไมต้องเรียน JavaScript?

🤔 คำถามที่หลายคนสงสัย:

"ถ้าอยากทำเว็บ เรียน HTML กับ CSS อย่างเดียวไม่พอหรอ?"
"JavaScript ยากไหม? เหมาะกับมือใหม่หรือเปล่า?"

คำตอบคือ: ถ้าคุณอยากทำเว็บที่ทำงานได้จริงๆ JavaScript คือสิ่งที่หลีกเลี่ยงไม่ได้ และไม่ต้องกังวล มันไม่ยากอย่างที่คิด!

JavaScript ทำอะไรได้บ้าง?

1. ทำให้เว็บโต้ตอบได้ (Interactive)

javascript

// เมื่อคลิกปุ่ม แสดงข้อความ
button.onclick = () => {
  alert("สวัสดี! คุณเพิ่งคลิกปุ่ม");
};

💡 ตัวอย่าง: ปุ่ม Like บน Facebook, ปุ่ม Add to Cart ใน Shopee

2. เปลี่ยนแปลงหน้าเว็บโดยไม่ต้องโหลดใหม่

javascript

// เปลี่ยนข้อความโดยไม่ต้อง refresh หน้า
document.getElementById("message").innerText = "ข้อความใหม่";

💡 ตัวอย่าง: การอัพเดทจำนวน notification, การโหลดข้อมูลเพิ่มเมื่อ scroll ลง

3. ตรวจสอบข้อมูลก่อนส่ง

javascript

// ตรวจสอบว่ากรอกอีเมลหรือยัง
if (email === "") {
  alert("กรุณากรอกอีเมล");
}

💡 ตัวอย่าง: การเช็คฟอร์มสมัครสมาชิก, การเช็ครหัสผ่านว่าปลอดภัยหรือไม่

JavaScript ทำงานอย่างไร?

มาดูตัวอย่างง่ายๆ กัน:

html

<!-- นี่คือ HTML ธรรมดา -->
<button id="myButton">คลิกฉันสิ!</button>
<p id="result">ยังไม่มีอะไรเกิดขึ้น...</p>

<script>
  // นี่คือ JavaScript
  const button = document.getElementById("myButton");
  const result = document.getElementById("result");

  button.onclick = () => {
    result.innerText = "ว้าว! คุณคลิกปุ่มแล้ว! 🎉";
  };
</script>

อธิบายทีละขั้น:

เรามีปุ่มและข้อความบนหน้าเว็บ (HTML)
JavaScript "จับ" ปุ่มและข้อความมาเก็บไว้
เมื่อมีคนคลิกปุ่ม JavaScript จะเปลี่ยนข้อความทันที
ทั้งหมดนี้เกิดขึ้นโดยไม่ต้อง refresh หน้าเว็บ!

Developer Tools: ห้องทดลองของเรา

🔧 เปิด Developer Tools ยังไง?

เปิด Browser (Chrome หรือ Firefox แนะนำ)
เลือกวิธีใดวิธีหนึ่ง:
- กด F12 (ง่ายที่สุด!)
- คลิกขวาที่หน้าเว็บ -> เลือก "Inspect" หรือ "ตรวจสอบ"
- Windows/Linux: Ctrl+Shift+I
- Mac: Cmd+Option+I

🎯 สิ่งแรกที่ต้องรู้จัก: Console Tab

Console คือที่ที่เราจะเขียน JavaScript ได้ทันที ไม่ต้องสร้างไฟล์ ไม่ต้องติดตั้งอะไร!

มาลองกัน:

เปิด DevTools
คลิกที่แท็บ Console
พิมพ์คำสั่งด้านล่างแล้วกด Enter (ใน Browser ใหม่ๆ ไม่ต้องกด Enter ก็ได้)

javascript

// ลองพิมพ์แต่ละบรรทัดแล้วกด Enter
2 + 2;
// คุณจะเห็น: 4

"Hello" + " " + "World";
// คุณจะเห็น: "Hello World"

10 > 5;
// คุณจะเห็น: true

💡 เคล็ดลับ: Console เหมือนเครื่องคิดเลขขั้นสูง - พิมพ์อะไร มันจะแสดงผลทันที!

📚 แท็บอื่นๆ ที่น่าสนใจ (เรียนไปเรื่อยๆ จะเข้าใจเอง)

แท็บ	ใช้ทำอะไร	ตัวอย่างการใช้งาน
Elements	ดู/แก้ HTML และ CSS	ลองแก้สีปุ่ม, เปลี่ยนข้อความ
Network	ดูการโหลดข้อมูล	เช็คว่ารูปภาพโหลดเร็วไหม
Sources	ดูโค้ดทั้งหมด	หา bug ในโค้ด
Application	ดูข้อมูลที่เก็บไว้	ดู cookies, localStorage

Console: เริ่มเขียน JavaScript บรรทัดแรก

🎮 ลองเล่นกับ Console

เปิด Console แล้วลองพิมพ์ตามนี้ (พิมพ์ทีละบรรทัด):

javascript

// 1. แสดงข้อความ - คำสั่งพื้นฐานที่สุด
console.log("สวัสดี JavaScript!"); // <-- อันนี้ต้องกด Enter
// 💡 console.log() คือคำสั่งแสดงผล เหมือนการ print ในภาษาอื่นๆ

// 2. JavaScript เป็นเครื่องคิดเลขได้!
10 + 5; // ผลลัพธ์: 15 (บวก)
10 - 5; // ผลลัพธ์: 5  (ลบ)
10 * 5; // ผลลัพธ์: 50 (คูณ)
10 / 5; // ผลลัพธ์: 2  (หาร)
10 % 3; // ผลลัพธ์: 1  (หารเอาเศษ - 10 หาร 3 ได้ 3 เศษ 1)

// 3. ต่อข้อความ (String)
"Hello" + " " + "World"; // ผลลัพธ์: "Hello World"
"ฉันอายุ " + 25 + " ปี"; // ผลลัพธ์: "ฉันอายุ 25 ปี"

🎨 Console แบบมีสีสัน

javascript

// ข้อความปกติ (สีขาว/ดำ)
console.log("ข้อความทั่วไป");

// คำเตือน (สีเหลือง) - ใช้เมื่อมีอะไรน่าระวัง
console.warn("⚠️ ระวัง! นี่คือคำเตือน");

// ข้อผิดพลาด (สีแดง) - ใช้เมื่อมี error
console.error("❌ พัง! เกิดข้อผิดพลาด");

// ข้อมูล (บางครั้งเป็นสีฟ้า)
console.info("ℹ️ ข้อมูลเพิ่มเติม");

// ล้าง console ทั้งหมด
console.clear();

💡 ทำไมต้องใช้ console.log()?

เปรียบเทียบ:

เวลาทำอาหาร เราชิมรสชาติระหว่างทำ
เวลาเขียนโค้ด เราใช้ console.log() ดูผลระหว่างทาง

มันช่วยให้เรา:

เช็คว่าโค้ดทำงานถูกไหม - ดูค่าตัวแปร
หา bug - ดูว่าโค้ดทำงานถึงบรรทัดไหน
ทดสอบ logic - ดูผลการคำนวณ

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

วิธีที่ 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", () => {
        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", () => {
  alert("คุณคลิกปุ่ม!");
});

Variables และ Data Types: กล่องเก็บข้อมูล

📦 Variables คืออะไร? (อธิบายแบบเข้าใจง่าย)

ตัวแปร (Variable) คือกล่องเก็บข้อมูล ที่เราตั้งชื่อเพื่อเรียกใช้ทีหลัง

ลองนึกภาพ:

คุณมีกล่อง 📦 หลายใบ
แต่ละกล่องติดป้ายชื่อ (ชื่อตัวแปร)
ข้างในกล่องเก็บของได้ (ค่าของตัวแปร)
เวลาจะใช้ของ แค่เรียกชื่อกล่อง

🔤 การสร้างตัวแปรใน JavaScript

มี 3 คำสั่ง แต่จริงๆ ใช้แค่ 2 อย่าง:

javascript

// 1️⃣ const - ค่าคงที่ (ใช้บ่อยที่สุด 90%)
const name = "สมชาย";
// 💡 const = constant (คงที่) เหมือนเขียนด้วยปากกาลบไม่ได้
// ✅ ใช้เมื่อ: ค่าไม่ต้องเปลี่ยน เช่น ชื่อ, config, ค่าคงที่ทางคณิตศาสตร์

const PI = 3.14159; // ค่า PI ไม่มีวันเปลี่ยน
const birthYear = 1995; // ปีเกิดไม่เปลี่ยน
const API_URL = "api.example.com"; // URL API คงที่

// ❌ ถ้าพยายามเปลี่ยนค่า const จะ error
// name = "สมหญิง"; // Error: Assignment to constant variable

// 2️⃣ let - ค่าที่เปลี่ยนได้ (ใช้ 10%)
let score = 0;
// 💡 let = อนุญาตให้เปลี่ยนค่าได้ เหมือนเขียนด้วยดินสอลบได้
// ✅ ใช้เมื่อ: ค่าต้องเปลี่ยน เช่น counter, status, score

score = score + 10; // เปลี่ยนเป็น 10
score += 5; // เพิ่มอีก 5 (ตอนนี้เป็น 15)

let currentUser = "guest";
currentUser = "สมชาย"; // เปลี่ยนจาก guest เป็น สมชาย ✅

// 3️⃣ var - ⚠️ อย่าใช้! (old style)
var oldStyle = "ไม่แนะนำ";
// 💡 var มีปัญหาหลายอย่าง ตอนนี้ไม่ใช้แล้ว
// ❌ ถ้าเจอในโค้ดเก่า ให้เปลี่ยนเป็น let หรือ const

🎯 กฎง่ายๆ ในการเลือกใช้

javascript

// เริ่มด้วย const เสมอ
const userName = "John";

// ถ้าต้องเปลี่ยนค่าจริงๆ ค่อยใช้ let
let loginAttempts = 0;
loginAttempts++; // ต้องเพิ่มค่า จึงใช้ let

// ลืม var ไปได้เลย!

📊 Data Types: ข้อมูลมีกี่แบบ?

ใน JavaScript ข้อมูลมีหลายประเภท แต่ละแบบใช้เก็บข้อมูลต่างกัน:

🔍 ทำไมต้องรู้จัก Data Types?

เหมือนการเลือกกล่องให้เหมาะกับของ:

กล่องใส่ตัวเลข -> เก็บอายุ, ราคา, จำนวน
กล่องใส่ข้อความ -> เก็บชื่อ, ที่อยู่
กล่องใส่ความจริง/เท็จ -> เก็บสถานะ login, เปิด-ปิด

มาดูแต่ละประเภทกัน:

javascript

// 1️⃣ String (ข้อความ) - เก็บตัวอักษร, ข้อความ
const firstName = "สมชาย"; // ใช้ double quotes " "
const lastName = 'ใจดี'; // ใช้ single quotes ' '
const greeting = `สวัสดี ${firstName}`; // ใช้ backticks ` ` (แนะนำ!)

// 💡 ตัวอย่างการใช้งาน String
const email = "user@example.com";
const phoneNumber = "081-234-5678";
const message = "ยินดีต้อนรับเข้าสู่เว็บไซต์";
const productName = "iPhone 15 Pro Max";

// 2️⃣ Number (ตัวเลข) - เก็บตัวเลขทุกชนิด
const age = 25; // เลขจำนวนเต็ม (integer)
const price = 299.99; // เลขทศนิยม (decimal/float)
const temperature = -5; // เลขติดลบ
const score = 0; // ศูนย์

// 💡 ตัวอย่างการใช้งาน Number
const productPrice = 1500.5; // ราคาสินค้า
const quantity = 3; // จำนวนสินค้า
const discount = 10; // ส่วนลด 10%
const total = productPrice * quantity * (1 - discount / 100);
console.log(`ราคารวม: ${total} บาท`); // ราคารวม: 4051.35 บาท

// 3️⃣ Boolean (จริง/เท็จ) - เก็บสถานะ on/off, yes/no, true/false
const isLoggedIn = true; // ล็อกอินแล้ว
const isAdmin = false; // ไม่ใช่แอดมิน
const hasPermission = true; // มีสิทธิ์

// 💡 ตัวอย่างการใช้งาน Boolean
const isOnline = true; // สถานะออนไลน์
const isVerified = false; // ยังไม่ยืนยันตัวตน
const acceptTerms = true; // ยอมรับเงื่อนไข
const showNotification = age >= 18; // แสดงการแจ้งเตือนถ้าอายุ >= 18

// 4️⃣ Undefined (ยังไม่ได้กำหนดค่า) - ตัวแปรที่ประกาศแล้วแต่ยังไม่ใส่ค่า
let userName; // ตอนนี้ userName = undefined
console.log(userName); // แสดง: undefined

// 💡 เมื่อไหร่จะเจอ undefined?
// - ตัวแปรที่ประกาศแต่ไม่ได้ใส่ค่า
// - function ที่ไม่ return อะไร
// - เข้าถึง property ที่ไม่มีใน object

// 5️⃣ Null (ค่าว่างโดยเจตนา) - บอกว่า "ตั้งใจให้ว่าง"
let selectedUser = null; // ยังไม่ได้เลือก user
let searchResult = null; // ยังไม่มีผลการค้นหา

// 💡 null vs undefined
// undefined = ลืมใส่ค่า หรือยังไม่ได้ใส่
// null = ตั้งใจให้ว่าง

// 6️⃣ Array (อาเรย์/รายการ) - เก็บข้อมูลหลายๆ ค่าในตัวแปรเดียว
const colors = ["แดง", "เขียว", "น้ำเงิน"];
const scores = [85, 92, 78, 95, 88];
const mixed = ["ข้อความ", 123, true]; // เก็บหลายประเภทได้

// 💡 การเข้าถึงข้อมูลใน Array (เริ่มนับจาก 0)
console.log(colors[0]); // "แดง" (ตัวแรก)
console.log(colors[1]); // "เขียว" (ตัวที่สอง)
console.log(colors[2]); // "น้ำเงิน" (ตัวที่สาม)

// 💡 ตัวอย่างการใช้งาน Array
const shoppingCart = ["กาแฟ", "ขนมปัง", "นม"];
const todoList = ["ทำการบ้าน", "ออกกำลังกาย", "อ่านหนังสือ"];
const monthlyExpenses = [15000, 12000, 18000, 14500];

// 7️⃣ Object (ออบเจกต์) - เก็บข้อมูลแบบมีชื่อ (key-value)
const user = {
  name: "สมชาย",
  age: 25,
  email: "somchai@example.com",
  isActive: true,
};

// 💡 การเข้าถึงข้อมูลใน Object
console.log(user.name); // "สมชาย"
console.log(user.age); // 25
console.log(user["email"]); // "somchai@example.com"

// 💡 ตัวอย่าง Object ที่ซับซ้อนขึ้น (เหมือนข้อมูลจริง)
const product = {
  id: 1,
  name: "กาแฟเย็น",
  price: 45,
  category: "เครื่องดื่ม",
  sizes: ["S", "M", "L"],
  inStock: true,
  shop: {
    name: "ร้านกาแฟใจดี",
    location: "สยาม",
  },
};

// 🔍 วิธีเช็คประเภทข้อมูลด้วย 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 ใน JavaScript!)
console.log(typeof [1, 2, 3]); // "object"
console.log(typeof { name: "John" }); // "object"

🔧 Operators: เครื่องมือจัดการข้อมูล

Operators คือเครื่องหมายที่ใช้จัดการข้อมูล เหมือนเครื่องหมาย +, -, *, / ที่เราใช้ในคณิตศาสตร์

1️⃣ Arithmetic Operators (คณิตศาสตร์พื้นฐาน)

javascript

// 🔢 เครื่องหมายคณิตศาสตร์ที่ใช้บ่อย
const a = 10;
const 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      (หารเอาเศษ - modulo)
console.log(a ** b); // 1000   (ยกกำลัง - 10³)

// 💡 ตัวอย่างการใช้งาน
const price = 100;
const quantity = 3;
const total = price * quantity; // 300

const totalMinutes = 135;
const hours = Math.floor(totalMinutes / 60); // 2 ชั่วโมง
const minutes = totalMinutes % 60; // 15 นาที
console.log(`${hours} ชั่วโมง ${minutes} นาที`);

2️⃣ เพิ่ม/ลดค่าทีละ 1

javascript

let counter = 0;

// เพิ่มทีละ 1
counter++; // counter = 1
counter++; // counter = 2

// ลดทีละ 1
counter--; // counter = 1

// 💡 ใช้เมื่อไหร่?
// - นับจำนวนครั้ง
// - ทำ loop
// - นับจำนวน like, view

let likes = 10;
button.onclick = () => {
  likes++; // เพิ่ม like
  console.log(`มี ${likes} likes`);
};

3️⃣ Assignment Operators (ตัวย่อ)

javascript

let score = 10;

// วิธีเขียนแบบยาว vs แบบย่อ
score = score + 5; // แบบยาว
score += 5; // แบบย่อ (ทำเหมือนกัน)

// ตัวย่ออื่นๆ
score += 10; // score = score + 10
score -= 3; // score = score - 3
score *= 2; // score = score * 2
score /= 4; // score = score / 4

// 💡 ตัวอย่างการใช้งาน
let cartTotal = 0;
cartTotal += 150; // เพิ่มสินค้า 150 บาท
cartTotal += 200; // เพิ่มสินค้า 200 บาท
cartTotal -= 50; // ใช้ส่วนลด 50 บาท
console.log(`ยอดรวม: ${cartTotal} บาท`); // 300 บาท

4️⃣ Comparison Operators (เปรียบเทียบ)

javascript

// ⚠️ ระวัง! มี 2 แบบ
// == เปรียบเทียบค่า (แปลง type อัตโนมัติ) ❌ อย่าใช้
// === เปรียบเทียบทั้งค่าและ type ✅ ใช้อันนี้

console.log(5 == "5"); // true  (แปลง "5" เป็น 5 แล้วเปรียบเทียบ)
console.log(5 === "5"); // false (ต่างกัน: number vs string)

console.log(0 == false); // true  (งงมาก!)
console.log(0 === false); // false (ถูกต้อง)

// 🎯 กฎง่ายๆ: ใช้ === และ !== เสมอ!
const userAge = "18";

// ❌ แบบนี้อาจเกิด bug
if (userAge == 18) {
}

// ✅ แบบนี้ชัดเจน ปลอดภัย
if (parseInt(userAge) === 18) {
}

// เปรียบเทียบขนาด
console.log(10 > 5); // true  (มากกว่า)
console.log(10 >= 10); // true  (มากกว่าหรือเท่ากับ)
console.log(10 < 20); // true  (น้อยกว่า)
console.log(10 <= 10); // true  (น้อยกว่าหรือเท่ากับ)

5️⃣ Logical Operators (ตรรกะ)

javascript

// && (AND - และ) = ทั้งสองต้องเป็นจริง
const hasUsername = true;
const hasPassword = true;
const canLogin = hasUsername && hasPassword; // true

// 💡 เหมือนการเข้าร้าน:
// ต้องมีบัตรสมาชิก และ ต้องมีเงิน
const hasMembership = true;
const hasMoney = false;
const canBuy = hasMembership && hasMoney; // false (ไม่มีเงิน)

// || (OR - หรือ) = อย่างน้อยหนึ่งตัวเป็นจริง
const hasVisa = false;
const hasMastercard = true;
const canPay = hasVisa || hasMastercard; // true

// 💡 เหมือนการจ่ายเงิน:
// จ่ายด้วย Visa หรือ Mastercard ก็ได้

// ! (NOT - ไม่) = กลับค่าจริง/เท็จ
const isLoggedIn = false;
const isGuest = !isLoggedIn; // true (ไม่ได้ login = แขก)

// 💡 ตัวอย่างการใช้งาน
const age = 20;
const hasIDCard = true;
const canBuyAlcohol = age >= 20 && hasIDCard;

const isWeekend = true;
const isHoliday = false;
const canRelax = isWeekend || isHoliday; // true (วันหยุดหรือสุดสัปดาห์)

6️⃣ String Operations (จัดการข้อความ)

javascript

// การต่อ string แบบเก่า (ใช้ +)
const firstName = "สมชาย";
const lastName = "ใจดี";
const fullName = firstName + " " + lastName; // "สมชาย ใจดี"

// การต่อ string แบบใหม่ (Template Literals) ✅ แนะนำ!
const age = 25;
const introduction = `สวัสดีครับ ผม${firstName} ${lastName} อายุ ${age} ปี`;
console.log(introduction);
// "สวัสดีครับ ผมสมชาย ใจดี อายุ 25 ปี"

// 💡 ทำไมต้องใช้ Template Literals?
// 1. อ่านง่ายกว่า
// 2. ใส่ตัวแปรได้สะดวก
// 3. ขึ้นบรรทัดใหม่ได้
const message = `
สวัสดีคุณ ${firstName}
ยินดีต้อนรับเข้าสู่ระบบ
วันนี้คุณมี 3 ข้อความใหม่
`;

🚦 Control Flow: สอนโปรแกรมตัดสินใจ

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 - ทำซ้ำอัตโนมัติ

Loop คือการสั่งให้โปรแกรมทำอะไรซ้ำๆ โดยไม่ต้องเขียนโค้ดซ้ำ

📚 ทำไมต้องใช้ Loop?

มาดูปัญหานี้: ถ้าเราอยากแสดงข้อความ "สวัสดี" 5 ครั้ง

❌ วิธีที่ไม่ดี - เขียนซ้ำ:

javascript

console.log("สวัสดีครั้งที่ 1");
console.log("สวัสดีครั้งที่ 2");
console.log("สวัสดีครั้งที่ 3");
console.log("สวัสดีครั้งที่ 4");
console.log("สวัสดีครั้งที่ 5");
// ถ้าอยากทำ 100 ครั้ง? 😱

✅ วิธีที่ดี - ใช้ Loop:

javascript

for (let i = 1; i <= 5; i++) {
  console.log(`สวัสดีครั้งที่ ${i}`);
}
// เปลี่ยนเป็น 100 ครั้ง? แค่เปลี่ยน 5 เป็น 100!

🎯 Loop

Loop เหมือนกับสิ่งที่เราทำซ้ำๆ ทุกวัน:

กิจกรรม	เทียบกับ Loop
แปรงฟัน 2 นาที	ทำซ้ำจนครบเวลา (while loop)
วิ่ง 5 รอบ	ทำซ้ำจำนวนรอบที่แน่นอน (for loop)
กินข้าวจนอิ่ม	ทำซ้ำจนเข้าเงื่อนไข (do-while)
เช็คข้อความทุกคนในกลุ่ม	วนดูทีละคน (for...of)

1️⃣ for loop - เมื่อรู้จำนวนรอบ

โครงสร้าง for loop:

javascript

// for (ตัวแปรเริ่มต้น; เงื่อนไขดำเนินการต่อ; เปลี่ยนแปลงตัวแปร)

for (let i = 0; i < 5; i++) {
  // i = 0: เริ่มที่ 0
  // i < 5: ทำต่อถ้า i น้อยกว่า 5
  // i++: เพิ่ม i ทีละ 1
  console.log(`รอบที่ ${i + 1}`);
}

🔍 มาดูทีละขั้นตอน:

let i = 0 -> ตั้งค่าเริ่มต้น i = 0
เช็ค i < 5 -> 0 < 5? ✅ จริง -> ทำในวงเล็บ
แสดง "รอบที่ 1"
i++ -> i เป็น 1
เช็ค i < 5 -> 1 < 5? ✅ จริง -> ทำต่อ
...ทำไปเรื่อยๆ จนกว่า i = 5
เช็ค i < 5 -> 5 < 5? ❌ เท็จ -> หยุด!

ตัวอย่างการใช้งาน:

javascript

// นับ 1-10
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

// นับถอยหลัง 10-1
for (let countdown = 10; countdown >= 1; countdown--) {
  console.log(`เหลือ ${countdown} วินาที`);
}
console.log("💥 บูม!");

// วนลูป array - แสดงรายการสินค้า
const products = ["โทรศัพท์", "หูฟัง", "เคส"];
for (let i = 0; i < products.length; i++) {
  console.log(`${i + 1}. ${products[i]}`);
}
// 1. โทรศัพท์
// 2. หูฟัง
// 3. เคส

2️⃣ while loop - เมื่อไม่รู้จำนวนรอบแน่นอน

โครงสร้าง while loop:

javascript

// while (เงื่อนไข) {
//   ทำอะไรซักอย่าง
//   อย่าลืมเปลี่ยนเงื่อนไข!
// }

let count = 0;
while (count < 3) {
  console.log(`นับ: ${count}`);
  count++; // สำคัญ! ถ้าไม่มีจะวนลูปไม่รู้จบ
}

💡 เมื่อไหร่ใช้ while?

เมื่อไม่รู้ว่าจะทำกี่รอบ
ขึ้นอยู่กับเงื่อนไข เช่น รอจน user ตอบถูก

ตัวอย่าง - เกมทายตัวเลข:

javascript

let secretNumber = 7;
let guess = 0;
let attempts = 0;

// ทายจนกว่าจะถูก (แต่จำกัด 5 ครั้ง)
while (guess !== secretNumber && attempts < 5) {
  guess = Math.floor(Math.random() * 10) + 1; // สุ่มเลข 1-10
  attempts++;
  console.log(`ครั้งที่ ${attempts}: ทาย ${guess}`);

  if (guess === secretNumber) {
    console.log("🎉 ถูกต้อง!");
  } else if (attempts === 5) {
    console.log("😢 หมดโอกาส");
  }
}

⚠️ ระวัง Infinite Loop!

javascript

// ❌ อันตราย - วนไม่รู้จบ
let x = 1;
while (x > 0) {
  console.log(x); // x ไม่เคยเปลี่ยน!
  // ลืม x-- หรือเงื่อนไขหยุด
}

// ✅ ปลอดภัย - มีการเปลี่ยนเงื่อนไข
let y = 5;
while (y > 0) {
  console.log(y);
  y--; // เปลี่ยนค่า y
}

3️⃣ do...while - ทำอย่างน้อย 1 รอบแน่ๆ

ต่างจาก while ยังไง?

while: เช็คก่อน -> ถ้าเท็จไม่ทำเลย
do...while: ทำก่อน 1 รอบ -> ค่อยเช็ค

javascript

// ตัวอย่าง: เมนูที่ต้องแสดงอย่างน้อย 1 ครั้ง
let choice;
do {
  console.log("=== เมนู ===");
  console.log("1. เริ่มเกม");
  console.log("2. ดูคะแนน");
  console.log("3. ออกจากเกม");

  // สมมุติ user เลือก 3
  choice = 3;
} while (choice !== 3);

console.log("ขอบคุณที่เล่น!");

4️⃣ for...of - วนลูป Array แบบง่าย (แนะนำ!)

ทำไมต้องใช้ for...of?

javascript

const colors = ["แดง", "เขียว", "น้ำเงิน"];

// ❌ แบบเก่า - ยุ่งยาก
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

// ✅ แบบใหม่ - ง่ายและอ่านง่าย
for (const color of colors) {
  console.log(color);
}

ตัวอย่างการใช้งาน:

javascript

// ตะกร้าสินค้า
const cart = ["☕ กาแฟ", "🥐 ครัวซองต์", "🥛 นม"];
console.log("สินค้าในตะกร้า:");
for (const item of cart) {
  console.log(`- ${item}`);
}

// คำนวณราคารวม
const prices = [45, 65, 35];
let total = 0;
for (const price of prices) {
  total += price;
}
console.log(`รวม: ${total} บาท`);

5️⃣ for...in - วนลูป Object Properties

javascript

const student = {
  name: "สมศรี",
  age: 20,
  grade: "A",
  major: "Computer Science",
};

// แสดงข้อมูลทั้งหมด
console.log("ข้อมูลนักศึกษา:");
for (const key in student) {
  console.log(`${key}: ${student[key]}`);
}
// name: สมศรี
// age: 20
// grade: A
// major: Computer Science

6️⃣ Break และ Continue - ควบคุม Loop

break = หยุดทันที | continue = ข้ามรอบนี้

javascript

// ตัวอย่าง: หาเลขที่หาร 7 ลงตัว
for (let i = 1; i <= 20; i++) {
  if (i % 7 === 0) {
    console.log(`เจอแล้ว! ${i} หาร 7 ลงตัว`);
    break; // หยุดทันทีเมื่อเจอ
  }
  console.log(`${i} หาร 7 ไม่ลงตัว`);
}

// ตัวอย่าง: แสดงเฉพาะเลขคู่
for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) {
    continue; // ข้ามเลขคี่
  }
  console.log(`เลขคู่: ${i}`);
}
// แสดง: 2, 4, 6, 8, 10

7️⃣ Nested Loops - Loop ซ้อน Loop

javascript

// สร้างสูตรคูณ
console.log("=== สูตรคูณ ===");
for (let i = 2; i <= 3; i++) {
  console.log(`สูตรคูณแม่ ${i}:`);
  for (let j = 1; j <= 5; j++) {
    console.log(`  ${i} x ${j} = ${i * j}`);
  }
  console.log(""); // เว้นบรรทัด
}

🎮 ลองทำดู: Mini Project

โจทย์: สร้างรูปสามเหลี่ยมด้วยดาว

javascript

// ผลลัพธ์ที่ต้องการ:
// *
// **
// ***
// ****
// *****

// เฉลย:
for (let i = 1; i <= 5; i++) {
  let stars = "";
  for (let j = 1; j <= i; j++) {
    stars += "*";
  }
  console.log(stars);
}

💡 Tips การเลือกใช้ Loop

ใช้เมื่อ	Loop ที่แนะนำ	ตัวอย่าง
รู้จำนวนรอบแน่นอน	for	แสดง 1-10
ไม่รู้จำนวนรอบ	while	รอจน user ตอบถูก
ต้องทำอย่างน้อย 1 รอบ	do...while	แสดงเมนู
วนลูป Array	for...of	แสดงรายการสินค้า
วนลูป Object	for...in	แสดง properties

📝 Template Literals และ String Methods

Template Literals - การต่อ String แบบสมัยใหม่

ปัญหาของการต่อ String แบบเก่า

javascript

// ❌ แบบเก่า - อ่านยาก เขียนยาก
const name = "สมชาย";
const age = 25;
const city = "กรุงเทพ";

const oldIntro =
  "สวัสดีครับ ผมชื่อ " + name + " อายุ " + age + " ปี อาศัยอยู่ที่ " + city;
// ปัญหา:
// 1. ต้องใส่ + เยอะมาก
// 2. ลืมเว้นวรรคง่าย
// 3. อ่านยากว่าตัวแปรอยู่ตรงไหน

// ✅ แบบใหม่ - Template Literals (ใช้ backtick `)
const newIntro = `สวัสดีครับ ผมชื่อ ${name} อายุ ${age} ปี อาศัยอยู่ที่ ${city}`;
// ข้อดี:
// 1. เขียนเหมือนประโยคปกติ
// 2. ใส่ตัวแปรด้วย ${}
// 3. อ่านง่ายเข้าใจทันที

🎯 ความสามารถพิเศษของ Template Literals

1. ใส่นิพจน์ (Expression) ได้:

javascript

const price = 150;
const quantity = 3;
const discount = 0.1; // ส่วนลด 10%

// คำนวณในตัว
console.log(`
  ราคาสินค้า: ${price} บาท
  จำนวน: ${quantity} ชิ้น
  ราคารวม: ${price * quantity} บาท
  ส่วนลด: ${price * quantity * discount} บาท
  ราคาสุทธิ: ${price * quantity * (1 - discount)} บาท
`);

2. ขึ้นบรรทัดใหม่ได้ง่าย:

javascript

// ❌ แบบเก่า - ต้องใช้ \n
const oldMessage = "บรรทัดที่ 1\nบรรทัดที่ 2\nบรรทัดที่ 3";

// ✅ แบบใหม่ - พิมพ์เป็นหลายบรรทัดได้เลย
const newMessage = `
บรรทัดที่ 1
บรรทัดที่ 2
บรรทัดที่ 3
`;

3. สร้าง HTML ได้สะดวก:

javascript

const product = {
  name: "กาแฟลาเต้",
  price: 65,
  image: "latte.jpg",
  inStock: true,
};

// สร้าง HTML card
const productCard = `
  <div class="product-card">
    <img src="${product.image}" alt="${product.name}">
    <h3>${product.name}</h3>
    <p class="price">${product.price} บาท</p>
    <button ${product.inStock ? "" : "disabled"}>
      ${product.inStock ? "เพิ่มในตะกร้า" : "สินค้าหมด"}
    </button>
  </div>
`;

4. ใส่เงื่อนไขได้:

javascript

const hour = new Date().getHours();
const greeting = `สวัสดี${hour < 12 ? "เช้า" : hour < 18 ? "บ่าย" : "ค่ำ"}`;

const score = 85;
const result = `คุณได้เกรด ${
  score >= 80 ? "A" : score >= 70 ? "B" : score >= 60 ? "C" : "F"
} (${score} คะแนน)`;

🔧 String Methods - เครื่องมือจัดการข้อความ

1️⃣ Methods สำหรับเช็คและค้นหา

javascript

const email = "john.doe@example.com";

// 🔍 includes() - มีคำนี้ไหม?
if (email.includes("@")) {
  console.log("✅ เป็นอีเมลที่ถูกต้อง");
}

// 📍 indexOf() - อยู่ตำแหน่งไหน?
const atPosition = email.indexOf("@"); // 8
if (atPosition === -1) {
  console.log("❌ ไม่พบ @ ในอีเมล");
}

// 🎯 startsWith() และ endsWith()
const url = "https://www.example.com";
if (url.startsWith("https://")) {
  console.log("✅ เว็บไซต์ปลอดภัย (HTTPS)");
}

const filename = "document.pdf";
if (filename.endsWith(".pdf")) {
  console.log("📄 ไฟล์ PDF");
}

2️⃣ Methods สำหรับแปลงข้อความ

javascript

const username = "  JohnDoe123  ";

// ✂️ trim() - ตัดช่องว่าง
console.log(username.trim()); // "JohnDoe123"

// 🔤 เปลี่ยน case
console.log(username.toUpperCase()); // "  JOHNDOE123  "
console.log(username.toLowerCase()); // "  johndoe123  "

// 💡 ใช้งาน: เช็ค username โดยไม่สนใจ case
const inputUsername = "johndoe123";
const storedUsername = "JohnDoe123";

if (inputUsername.toLowerCase() === storedUsername.toLowerCase()) {
  console.log("✅ Username ถูกต้อง");
}

3️⃣ Methods สำหรับตัดและแยกข้อความ

javascript

// ✂️ slice() - ตัดเอาบางส่วน
const phoneNumber = "081-234-5678";
const areaCode = phoneNumber.slice(0, 3); // "081"
const lastFour = phoneNumber.slice(-4); // "5678"

// 🔨 split() - แยกเป็น array
const fullName = "สมชาย ใจดี มากมาย";
const nameParts = fullName.split(" ");
console.log(nameParts); // ["สมชาย", "ใจดี", "มากมาย"]

// 🔗 join() - รวม array เป็น string
const words = ["JavaScript", "is", "awesome"];
console.log(words.join(" ")); // "JavaScript is awesome"
console.log(words.join("-")); // "JavaScript-is-awesome"

4️⃣ Methods สำหรับแทนที่ข้อความ

javascript

// 🔄 replace() - แทนที่คำแรกที่เจอ
let message = "Hello World! World is beautiful";
message = message.replace("World", "JavaScript");
console.log(message); // "Hello JavaScript! World is beautiful"

// 🔁 replaceAll() - แทนที่ทั้งหมด
message = message.replaceAll("World", "JavaScript");
console.log(message); // "Hello JavaScript! JavaScript is beautiful"

// 💡 ใช้งาน: ซ่อนข้อมูลสำคัญ
const creditCard = "1234-5678-9012-3456";
const maskedCard = creditCard.slice(-4).padStart(19, "*");
console.log(maskedCard); // "***************3456"

🎮 ตัวอย่างการใช้งาน

1. Validation - ตรวจสอบข้อมูล:

javascript

function validateEmail(email) {
  // ตรวจสอบอีเมลแบบง่าย
  email = email.trim().toLowerCase();

  if (!email.includes("@")) {
    return "❌ อีเมลต้องมี @";
  }

  if (!email.includes(".")) {
    return "❌ อีเมลต้องมี domain";
  }

  if (email.startsWith("@") || email.endsWith("@")) {
    return "❌ @ อยู่ตำแหน่งไม่ถูกต้อง";
  }

  return "✅ อีเมลถูกต้อง";
}

2. Format ข้อความ:

javascript

function formatPhoneNumber(phone) {
  // ลบอักขระที่ไม่ใช่ตัวเลข
  const cleaned = phone.replace(/\D/g, "");

  // จัด format เป็น XXX-XXX-XXXX
  if (cleaned.length === 10) {
    return `${cleaned.slice(0, 3)}-${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
  }

  return phone;
}

console.log(formatPhoneNumber("0812345678")); // "081-234-5678"

3. Extract ข้อมูล:

javascript

function extractHashtags(text) {
  // หา hashtags ทั้งหมดในข้อความ
  const words = text.split(" ");
  const hashtags = words.filter((word) => word.startsWith("#"));
  return hashtags;
}

const post = "วันนี้อากาศดี #สุขภาพดี #ออกกำลังกาย #morning";
console.log(extractHashtags(post));
// ["#สุขภาพดี", "#ออกกำลังกาย", "#morning"]

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

ข้อผิดพลาดที่มือใหม่เจอบ่อย

❌ ข้อผิดพลาด #1: ใช้ == แทน ===

ปัญหา: JavaScript พยายามช่วยแปลง type ให้อัตโนมัติ แต่บางครั้งมันแปลงผิด!

javascript

console.log("5" == 5); // true  ❓ (string "5" = number 5?)
console.log(0 == false); // true  ❓ (0 = false?)
console.log("" == false); // true  ❓ (ค่าว่าง = false?)

ตัวอย่างปัญหา:

javascript

const userAge = "18"; // อายุจาก input form (เป็น string)

// ❌ แบบนี้อาจทำให้เกิด bug
if (userAge == 18) {
  console.log("อายุครบ 18"); // แสดงผลถูก แต่โค้ดไม่ชัดเจน
}

// ✅ แบบนี้ชัดเจนและปลอดภัย
if (parseInt(userAge) === 18) {
  console.log("อายุครบ 18");
}

🎯 วิธีแก้: ใช้ === และ !== เสมอ! จำง่ายๆ:

=== เช็คทั้งค่าและ type
== เช็คแค่ค่า (อันตราย!)

❌ ข้อผิดพลาด #2: ลืมประกาศตัวแปร

ปัญหา: ถ้าไม่ใส่ const/let JavaScript จะสร้างตัวแปร global ให้อัตโนมัติ!

javascript

function calculatePrice() {
  // ❌ ลืมใส่ const
  price = 100;
  tax = 7;
  total = price + tax;
}

calculatePrice();
console.log(total); // 107 - อันตราย! เข้าถึงได้จากข้างนอก

// ✅ วิธีที่ถูกต้อง
function calculatePriceCorrect() {
  const price = 100;
  const tax = 7;
  const total = price + tax;
  return total;
}

const result = calculatePriceCorrect();
console.log(result); // 107

❌ ข้อผิดพลาด #3: สับสนเรื่อง Type

ปัญหา: JavaScript ไม่บอก error เมื่อ type ผิด แต่ผลลัพธ์จะผิด!

javascript

// สถานการณ์จริง: คำนวณราคาสินค้า
const price = "150"; // ราคาจาก input (string)
const quantity = "3"; // จำนวนจาก input (string)
const shipping = 50; // ค่าส่ง (number)

// ❌ ผลลัพธ์ผิด
const wrongTotal = price + shipping;
console.log(wrongTotal); // "15050" (ต่อ string แทนการบวก!)

// ✅ แปลง type ก่อนคำนวณ
const rightTotal = parseInt(price) * parseInt(quantity) + shipping;
console.log(rightTotal); // 500 (ถูกต้อง)

💡 เคล็ดลับ: ข้อมูลจาก input, prompt, หรือ API มักเป็น string เสมอ!

❌ ข้อผิดพลาด #4: Array และ Object ชี้ไปที่เดียวกัน

ปัญหา: การ copy array/object ด้วย = ไม่ได้สร้างของใหม่!

javascript

// ตัวอย่าง: ตะกร้าสินค้า
const cart1 = ["กาแฟ", "ขนมปัง"];
const cart2 = cart1; // ❌ ไม่ได้ copy! แค่ชี้ไปที่เดียวกัน

cart2.push("นม");
console.log(cart1); // ["กาแฟ", "ขนมปัง", "นม"] - cart1 เปลี่ยนด้วย!

// ✅ วิธี copy ที่ถูกต้อง
const cart3 = [...cart1]; // ใช้ spread operator
cart3.push("น้ำส้ม");
console.log(cart1); // ["กาแฟ", "ขนมปัง", "นม"] - cart1 ไม่เปลี่ยน ✅

// สำหรับ Object ก็เหมือนกัน
const user1 = { name: "สมชาย", age: 25 };
const user2 = { ...user1 }; // copy ที่ถูกต้อง
user2.age = 30;
console.log(user1.age); // 25 - ไม่เปลี่ยน

❌ ข้อผิดพลาด #5: เข้าถึง Property ที่ไม่มี

ปัญหา: พยายามใช้ property ที่ไม่มีอยู่จะเกิด error

javascript

const product = {
  name: "กาแฟ",
  price: 45,
  // ไม่มี discount
};

// ❌ Error: Cannot read property 'toFixed' of undefined
const savings = product.discount.toFixed(2);

// ✅ วิธีที่ 1: เช็คก่อนใช้
if (product.discount) {
  const savings = product.discount.toFixed(2);
}

// ✅ วิธีที่ 2: ใช้ optional chaining (?.)
const savings = product.discount?.toFixed(2) || "0.00";

// ✅ วิธีที่ 3: กำหนดค่า default
const discount = product.discount || 0;
const savings = discount.toFixed(2);

❌ ข้อผิดพลาด #6: ตัวพิมพ์ใหญ่-เล็กต่างกัน = คนละตัว

ปัญหา: JavaScript แยกตัวพิมพ์ใหญ่-เล็ก (case-sensitive)

javascript

const firstName = "สมชาย";
const FirstName = "สมหญิง"; // คนละตัวแปร!
const FIRSTNAME = "สมศรี"; // อีกตัวหนึ่ง!

console.log(firstname); // ❌ Error! firstname is not defined
console.log(firstName); // ✅ "สมชาย"

// ตัวอย่างที่เจอบ่อย
const isLogin = true; // ตั้งชื่อตัวแปร
if (islogin) {
  // ❌ พิมพ์ผิด
  console.log("Welcome");
}

💡 สรุป Tips ป้องกันข้อผิดพลาด

ข้อควรทำ	เหตุผล
ใช้ เป็นหลัก	ป้องกันเปลี่ยนค่าโดยไม่ตั้งใจ
ใช้ แทน	เช็คทั้ง type และค่า
ประกาศตัวแปรทุกครั้ง	ป้องกัน global variable
แปลง type ก่อนคำนวณ	ป้องกันผลลัพธ์ผิด
ใช้ spread operator	Copy array/object อย่างถูกต้อง
เช็ค null/undefined	ป้องกัน error
ระวัง case-sensitive	ตัวพิมพ์ใหญ่-เล็กต่างกัน

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

ทำไม Debug ถึงสำคัญ?

Debug คือการหาและแก้ bug (ข้อผิดพลาด) ในโค้ด เปรียบเหมือนนักสืบที่ตามหาตัวร้าย:

ดูหลักฐาน (console.log)
ตั้งจุดสังเกต (breakpoint)
ตรวจสอบค่าตัวแปร
ดูการไหลของโค้ด (flow)

เครื่องมือ Debugging

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

🎮 ลองทำดู: แบบฝึกหัด

🧮 Exercise 1: สร้างเครื่องคิดเลข

javascript

// 🎯 สร้างเครื่องคิดเลขที่รองรับ 4 การคำนวณพื้นฐาน
// รับ 2 ตัวเลขและ operation แล้วคืนค่าผลลัพธ์

function calculator(num1, num2, operation) {
  // เขียนโค้ดที่นี่
  // operation: 'add', 'subtract', 'multiply', 'divide'
}

// ทดสอบ:
console.log(calculator(10, 5, "add")); // ควรได้ 15
console.log(calculator(10, 5, "subtract")); // ควรได้ 5
console.log(calculator(10, 5, "multiply")); // ควรได้ 50
console.log(calculator(10, 5, "divide")); // ควรได้ 2
console.log(calculator(10, 0, "divide")); // ควรได้ "Cannot divide by zero"

💡 เฉลย

javascript

function calculator(num1, num2, operation) {
  // แปลงให้เป็น number ก่อนคำนวณ
  num1 = Number(num1);
  num2 = Number(num2);

  switch (operation) {
    case "add":
      return num1 + num2;
    case "subtract":
      return num1 - num2;
    case "multiply":
      return num1 * num2;
    case "divide":
      // เช็คการหารด้วย 0
      if (num2 === 0) {
        return "Cannot divide by zero";
      }
      return num1 / num2;
    default:
      return "Invalid operation";
  }
}

// หรือใช้ if-else
function calculator(num1, num2, operation) {
  num1 = Number(num1);
  num2 = Number(num2);

  if (operation === "add") {
    return num1 + num2;
  } else if (operation === "subtract") {
    return num1 - num2;
  } else if (operation === "multiply") {
    return num1 * num2;
  } else if (operation === "divide") {
    if (num2 === 0) return "Cannot divide by zero";
    return num1 / num2;
  }
  return "Invalid operation";
}

📅 Exercise 2: ตรวจสอบ Leap Year

javascript

// 🎯 เช็คว่าปีนั้นเป็น leap year (ปีอธิกสุรทิน) หรือไม่
// Leap year มีเงื่อนไข:
// - หาร 4 ลงตัว และ
// - (ไม่หาร 100 ลงตัว หรือ หาร 400 ลงตัว)

function isLeapYear(year) {
  // เขียนโค้ดที่นี่
}

// ทดสอบ:
console.log(isLeapYear(2024)); // true (หาร 4 ลงตัว)
console.log(isLeapYear(2023)); // false (หาร 4 ไม่ลงตัว)
console.log(isLeapYear(2000)); // true (หาร 400 ลงตัว)
console.log(isLeapYear(1900)); // false (หาร 100 ลงตัว แต่หาร 400 ไม่ลงตัว)
console.log(isLeapYear(2020)); // true

💡 เฉลย

javascript

function isLeapYear(year) {
  // วิธีที่ 1: เขียนเงื่อนไขเต็ม
  if (year % 400 === 0) {
    return true;
  }
  if (year % 100 === 0) {
    return false;
  }
  if (year % 4 === 0) {
    return true;
  }
  return false;
}

// วิธีที่ 2: เขียนแบบย่อ
function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

// วิธีที่ 3: เขียนแบบอ่านง่าย
function isLeapYear(year) {
  const divisibleBy4 = year % 4 === 0;
  const divisibleBy100 = year % 100 === 0;
  const divisibleBy400 = year % 400 === 0;

  return divisibleBy4 && (!divisibleBy100 || divisibleBy400);
}

🔢 Exercise 3: หาค่ามากสุดใน Array

javascript

// 🎯 หาค่าที่มากที่สุดใน array ของตัวเลข
// ถ้า array ว่าง ให้ return null

function findMax(numbers) {
  // เขียนโค้ดที่นี่
}

// ทดสอบ:
console.log(findMax([5, 2, 9, 1, 7])); // 9
console.log(findMax([3])); // 3
console.log(findMax([-5, -2, -9])); // -2
console.log(findMax([])); // null
console.log(findMax([100, 50, 200, 75])); // 200

💡 เฉลย

javascript

// วิธีที่ 1: ใช้ Math.max
function findMax(numbers) {
  if (numbers.length === 0) {
    return null;
  }
  return Math.max(...numbers);
}

// วิธีที่ 2: ใช้ for loop
function findMax(numbers) {
  if (numbers.length === 0) {
    return null;
  }

  let max = numbers[0];
  for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
      max = numbers[i];
    }
  }
  return max;
}

// วิธีที่ 3: ใช้ reduce
function findMax(numbers) {
  if (numbers.length === 0) return null;

  return numbers.reduce((max, current) => {
    return current > max ? current : max;
  }, numbers[0]);
}

🔤 Exercise 4: กลับ String

javascript

// 🎯 กลับลำดับตัวอักษรใน string
// เช่น "hello" -> "olleh"

function reverseString(str) {
  // เขียนโค้ดที่นี่
}

// ทดสอบ:
console.log(reverseString("hello")); // "olleh"
console.log(reverseString("JavaScript")); // "tpircSavaJ"
console.log(reverseString("12345")); // "54321"
console.log(reverseString("a")); // "a"
console.log(reverseString("")); // ""
console.log(reverseString("Hello World")); // "dlroW olleH"

💡 เฉลย

javascript

// วิธีที่ 1: ใช้ built-in methods
function reverseString(str) {
  return str.split("").reverse().join("");
}

// วิธีที่ 2: ใช้ for loop แบบย้อนหลัง
function reverseString(str) {
  let reversed = "";
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}

// วิธีที่ 3: ใช้ for...of
function reverseString(str) {
  let reversed = "";
  for (let char of str) {
    reversed = char + reversed;
  }
  return reversed;
}

// วิธีที่ 4: ใช้ reduce
function reverseString(str) {
  return str.split("").reduce((reversed, char) => char + reversed, "");
}

📝 Exercise 5: นับจำนวนคำ

javascript

// 🎯 นับจำนวนคำใน string
// คำคือข้อความที่คั่นด้วย space (ไม่นับ space ซ้อน)

function countWords(sentence) {
  // เขียนโค้ดที่นี่
}

// ทดสอบ:
console.log(countWords("Hello world from JavaScript")); // 4
console.log(countWords("I love coding")); // 3
console.log(countWords("JavaScript")); // 1
console.log(countWords("")); // 0
console.log(countWords("   Multiple   spaces   between   ")); // 3
console.log(countWords("One")); // 1

💡 เฉลย

javascript

// วิธีที่ 1: ใช้ split และ filter
function countWords(sentence) {
  // trim() ตัด space หน้า-หลัง
  // split(' ') แยกด้วย space
  // filter(word => word) กรองเอาเฉพาะที่ไม่ใช่ string ว่าง
  if (!sentence.trim()) {
    return 0;
  }

  return sentence
    .trim()
    .split(" ")
    .filter((word) => word).length;
}

// วิธีที่ 2: ใช้ regex
function countWords(sentence) {
  // \s+ หมายถึง space/tab/newline ตั้งแต่ 1 ตัวขึ้นไป
  const trimmed = sentence.trim();
  if (!trimmed) return 0;

  return trimmed.split(/\s+/).length;
}

// วิธีที่ 3: นับแบบ manual
function countWords(sentence) {
  sentence = sentence.trim();
  if (!sentence) return 0;

  let count = 0;
  let inWord = false;

  for (let char of sentence) {
    if (char === " ") {
      inWord = false;
    } else if (!inWord) {
      count++;
      inWord = true;
    }
  }

  return count;
}

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

ยินดีด้วย! 🎊 หลังจบบทนี้ คุณสามารถ:

💻 ทักษะพื้นฐาน

✅ เปิด DevTools และใช้ Console - เหมือนมีห้องทดลองส่วนตัวในทุก browser
✅ ฝัง JavaScript ในเว็บ 3 แบบ - inline, internal, external (รู้ว่าแบบไหนใช้ตอนไหน)
✅ สร้างและใช้ตัวแปร - เก็บข้อมูลด้วย const/let แทนที่จะเขียนซ้ำๆ

🧮 ทักษะการจัดการข้อมูล

✅ ใช้ Data Types ได้ถูกต้อง - รู้ว่าเมื่อไหร่ใช้ string, number, boolean, array, object
✅ คำนวณและเปรียบเทียบ - ใช้ operators ต่างๆ ได้อย่างมั่นใจ (และรู้ว่า === ปลอดภัยกว่า ==)
✅ จัดการข้อความ - ต่อ string ด้วย Template Literals, ตัด แยก แปลงด้วย String Methods

🎮 ทักษะการควบคุมโปรแกรม

✅ สั่งให้โปรแกรมตัดสินใจ - if/else, switch case เหมือนสอนโปรแกรมให้คิดเอง
✅ ทำงานซ้ำอัตโนมัติ - for, while, for...of ไม่ต้องเขียนโค้ดซ้ำ 100 บรรทัด
✅ หา Bug และแก้ไข - ใช้ console.log() และ DevTools เหมือนนักสืบ

🚀 ที่สำคัญที่สุด

✅ มั่นใจที่จะลองผิดลองถูก - รู้ว่า Error ไม่ใช่ความล้มเหลว แต่เป็นครูที่ดี
✅ อ่านโค้ดคนอื่นได้ - เข้าใจ syntax พื้นฐานแล้ว พร้อมเรียนรู้ต่อ

💡 Key Takeaways - บทเรียนสำคัญ

🎯 สิ่งที่ต้องจำ

JavaScript อยู่ใน browser ทุกตัว - ไม่ต้องติดตั้งอะไร เปิดมาก็เขียนได้เลย
const > let > var - เริ่มด้วย const เสมอ ใช้ let เมื่อจำเป็น ลืม var ไปได้เลย
=== เสมอ ไม่ใช้ == - ป้องกัน bug แปลกๆ จากการแปลง type อัตโนมัติ
Template Literals ` ทำให้ชีวิตง่าย - ต่อ string สบายๆ ไม่ต้อง + เยอะๆ

🛠️ เคล็ดลับการเรียนรู้

Console คือสนามซ้อม - ทดลองใน console ก่อนเขียนจริง ผิดกี่ครั้งก็ได้
Error คือเพื่อนที่ซื่อสัตย์ - มันบอกว่าผิดตรงไหน อ่านให้ดีๆ
Google คือเพื่อนแท้ - Developer ทุกคน Google ทุกวัน ไม่ต้องอาย

🌟 Mindset ที่ถูกต้อง

ไม่ต้องจำทุกอย่าง - จำ concept สำคัญ ส่วน syntax Google ได้
เขียนโค้ดทุกวัน แค่ 15 นาที - ดีกว่าเรียนทีละเยอะแล้วหยุดนาน
สนุกกับการลองผิดลองถูก - Programming คือการแก้ปัญหา ไม่ใช่การท่องจำ

🎯 Next Step - ก้าวต่อไป

📚 บทหน้า: Functions & Scope

ในบทหน้า เราจะเรียนรู้การสร้าง "เครื่องมือ" ของเราเอง:

🔹 Functions พื้นฐาน

สร้างฟังก์ชันเก็บโค้ดที่ใช้บ่อย
3 วิธีเขียน function (มีข้อดีข้อเสียต่างกัน)

🔹 Scope - ขอบเขตตัวแปร

ทำไมบางตัวแปรใช้ได้บางที่ บางตัวใช้ได้ทุกที่
Hoisting - JavaScript ยกอะไรขึ้นก่อน?

🔹 Advanced Patterns

Higher-order functions (function ที่รับ function)
Callbacks - สั่งให้ทำอะไรเมื่อเสร็จแล้ว
Real-world: debounce (ป้องกันคลิกรัวๆ), throttle (จำกัดความถี่)

🚀 พร้อมแล้วใช่ไหม?

คุณมีพื้นฐานแข็งแรงพอแล้ว ไปต่อกันเลย!

Tip

💭 ความลับของ Developer เก่ง:

ไม่ใช่คนที่จำโค้ดได้ทั้งหมด แต่เป็นคนที่รู้ว่าจะหาคำตอบได้จากไหน Google, Stack Overflow, Documentation คือเครื่องมือทำงานประจำวัน แม้แต่ developer 10+ ปี ก็ยัง Google syntax พื้นฐานอยู่เป็นประจำ!

สิ่งสำคัญคือ: เข้าใจ concept + รู้วิธีหาคำตอบ ✨