ถ้า HTML คือโครงสร้าง และ CSS คือการตกแต่ง JavaScript ก็คือ "สมอง" ที่ทำให้เว็บโต้ตอบและทำงานได้ เช่น กดปุ่มแล้วมีอะไรเกิดขึ้น ตรวจสอบฟอร์ม หรือดึงข้อมูลแบบเรียลไทม์ บทความนี้จะปูพื้นฐาน JavaScript ให้คุณเขียนโปรแกรมบนเว็บได้จริง ═══════════════════════════════════════ 📌 1. JavaScript คืออะไร และใส่อย่างไร ═══════════════════════════════════════ JavaScript (JS) เป็นภาษาโปรแกรมที่ทำงานในเบราว์เซอร์ ทำให้หน้าเว็บ "โต้ตอบ" กับผู้ใช้ได้ ต่างจาก HTML/CSS ที่เป็นเพียงโครงสร้างและหน้าตา วิธีใส่ JavaScript: 1) Internal — ใน <script> ท้าย <body>
javascript 
<body>
    ...เนื้อหา...
    <script>
        console.log("สวัสดี JavaScript");
    </script>
</body>
2) External — แยกไฟล์ .js (แนะนำ)
javascript 
<script src="app.js"></script>
*** console.log() ใช้แสดงผลใน Console (กด F12 → แท็บ Console) เพื่อ debug *** ═══════════════════════════════════════ 📦 2. ตัวแปร (Variables) และชนิดข้อมูล ═══════════════════════════════════════ ประกาศตัวแปรด้วย let และ const (เลิกใช้ var แบบเก่า)
javascript 
let name = "สมชาย";      // เปลี่ยนค่าได้
const pi = 3.14;         // ค่าคงที่ เปลี่ยนไม่ได้
let age = 25;
ชนิดข้อมูลพื้นฐาน:
javascript 
let text = "ข้อความ";          // String
let number = 100;              // Number
let isActive = true;           // Boolean (true/false)
let items = [1, 2, 3];         // Array (รายการ)
let person = { name: "โจ" };   // Object (กลุ่มข้อมูล)
let empty = null;              // ไม่มีค่า
let notSet;                    // undefined (ยังไม่กำหนด)
*** ใช้ const เป็นค่าเริ่มต้น ใช้ let เมื่อต้องเปลี่ยนค่า *** ═══════════════════════════════════════ ➕ 3. ตัวดำเนินการ (Operators) ═══════════════════════════════════════ คำนวณ: + - * / % (หารเอาเศษ)
javascript 
let sum = 5 + 3;      // 8
let mod = 10 % 3;     // 1
เปรียบเทียบ (คืน true/false):
javascript 
===   เท่ากันและชนิดเดียวกัน (แนะนำ)
!==   ไม่เท่ากัน
>  <  >=  <=
ตรรกะ:
javascript 
&&   และ (AND)
||   หรือ (OR)
!    ไม่ (NOT)
*** ใช้ === แทน == เสมอ เพื่อเลี่ยงบั๊กเรื่องการแปลงชนิดข้อมูล *** ═══════════════════════════════════════ 🔀 4. เงื่อนไข (Conditions) ═══════════════════════════════════════
javascript 
let score = 75;

if (score >= 80) {
    console.log("เกรด A");
} else if (score >= 70) {
    console.log("เกรด B");
} else {
    console.log("ต้องพยายามอีก");
}
Ternary (เงื่อนไขสั้น):
javascript 
let status = (age >= 18) ? "ผู้ใหญ่" : "เยาวชน";
Switch (เลือกหลายกรณี):
javascript 
switch (day) {
    case "Mon": console.log("จันทร์"); break;
    case "Tue": console.log("อังคาร"); break;
    default:    console.log("วันอื่น");
}
═══════════════════════════════════════ 🔁 5. การวนซ้ำ (Loops) ═══════════════════════════════════════ for — วนตามจำนวนรอบ
javascript 
for (let i = 1; i <= 5; i++) {
    console.log("รอบที่ " + i);
}
while — วนขณะที่เงื่อนไขเป็นจริง
javascript 
let n = 0;
while (n < 3) {
    console.log(n);
    n++;
}
forEach — วนสมาชิกใน Array (นิยมมาก)
javascript 
let fruits = ["แอปเปิล", "กล้วย", "ส้ม"];
fruits.forEach(function(fruit) {
    console.log(fruit);
});
═══════════════════════════════════════ 🔧 6. ฟังก์ชัน (Functions) ═══════════════════════════════════════ แบบปกติ (Function Declaration):
javascript 
function add(a, b) {
    return a + b;
}
let result = add(5, 3);   // 8
แบบ Arrow Function (สมัยใหม่ ES6):
javascript 
const multiply = (a, b) => {
    return a * b;
};
// เขียนสั้นได้: const multiply = (a, b) => a * b;

const greet = (name) => console.log("สวัสดี " + name);
greet("สมหญิง");
• พารามิเตอร์ (a, b) = ค่าที่รับเข้า • return = ค่าที่ส่งกลับ ═══════════════════════════════════════ 📚 7. Array และ Object ═══════════════════════════════════════ Array (รายการ):
javascript 
let nums = [10, 20, 30];
console.log(nums[0]);       // 10 (เริ่มนับจาก 0)
console.log(nums.length);   // 3
nums.push(40);              // เพิ่มท้าย → [10,20,30,40]
nums.pop();                 // ลบท้าย
Method ยอดนิยมของ Array:
javascript 
let doubled = nums.map(n => n * 2);        // แปลงทุกตัว
let big = nums.filter(n => n > 15);        // กรอง
let total = nums.reduce((s, n) => s + n, 0); // รวมยอด
Object (กลุ่มข้อมูลที่มีคุณสมบัติ):
javascript 
let user = {
    name: "สมชาย",
    age: 25,
    greet: function() {
        return "สวัสดี " + this.name;
    }
};
console.log(user.name);      // สมชาย
console.log(user.greet());   // สวัสดี สมชาย
═══════════════════════════════════════ 🌳 8. DOM — ควบคุมหน้าเว็บด้วย JS ═══════════════════════════════════════ DOM (Document Object Model) คือการที่ JS เข้าถึงและแก้ไของค์ประกอบใน HTML เลือกอิลิเมนต์:
javascript 
let title = document.getElementById("title");
let btn = document.querySelector(".btn");        // เลือกด้วย CSS selector
let items = document.querySelectorAll("li");     // เลือกทั้งหมด
แก้ไขเนื้อหาและสไตล์:
javascript 
title.textContent = "หัวข้อใหม่";        // เปลี่ยนข้อความ
title.innerHTML = "<b>ตัวหนา</b>";       // เปลี่ยน HTML
title.style.color = "red";               // เปลี่ยนสี
title.classList.add("active");           // เพิ่ม class
title.classList.toggle("hidden");        // สลับเปิด/ปิด class
═══════════════════════════════════════ 🖱️ 9. Events — ตอบสนองผู้ใช้ ═══════════════════════════════════════
javascript 
let button = document.querySelector("#myBtn");

button.addEventListener("click", function() {
    alert("คุณกดปุ่มแล้ว!");
});
Event ที่ใช้บ่อย:
javascript 
click      → คลิก
input      → พิมพ์ในช่อง input
submit     → ส่งฟอร์ม
mouseover  → เอาเมาส์ชี้
keydown    → กดปุ่มคีย์บอร์ด
═══════════════════════════════════════ 🎯 10. ตัวอย่างจริง: ปุ่มนับจำนวนคลิก ═══════════════════════════════════════ HTML:
javascript 
<button id="btn">กดฉัน</button>
<p id="count">0</p>
JavaScript:
javascript 
let count = 0;
const btn = document.getElementById("btn");
const display = document.getElementById("count");

btn.addEventListener("click", () => {
    count++;
    display.textContent = count;
});
→ ทุกครั้งที่กดปุ่ม ตัวเลขจะเพิ่มขึ้น 1 ทันที ตัวอย่าง 2: ตรวจฟอร์มก่อนส่ง
javascript 
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
    const email = document.querySelector("#email").value;
    if (email === "") {
        e.preventDefault();            // หยุดการส่ง
        alert("กรุณากรอกอีเมล");
    }
});
═══════════════════════════════════════ 🚀 11. ฟีเจอร์สมัยใหม่ (ES6+) ที่ควรรู้ ═══════════════════════════════════════ Template Literals — ต่อข้อความด้วย backtick
javascript 
let name = "โจ";
console.log(`สวัสดีคุณ ${name} ยินดีต้อนรับ`);
Destructuring — แตกค่าออกมา
javascript 
const user = { name: "โจ", age: 25 };
const { name, age } = user;
Spread Operator — กระจายค่า
javascript 
let a = [1, 2];
let b = [...a, 3, 4];    // [1, 2, 3, 4]
═══════════════════════════════════════ ✅ 12. สรุปและเส้นทางต่อไป ═══════════════════════════════════════ • ใช้ let/const (เลี่ยง var) และ === (เลี่ยง ==) • ฝึก DOM และ Events ให้คล่อง = ทำเว็บโต้ตอบได้ทุกแบบ • เรียนรู้ Array methods (map, filter, reduce) จะเขียนโค้ดสั้นและทรงพลัง • ลองทำโปรเจกต์เล็ก ๆ เช่น To-do list, เครื่องคิดเลข, นาฬิกา • เปิด Console (F12) เพื่อทดลองและ debug เสมอ เส้นทางต่อไปหลังพื้นฐานแน่น:
javascript 
JavaScript พื้นฐาน → DOM/Events → Fetch API (ดึงข้อมูล)
→ Framework (React, Vue) → Backend (Node.js)
จำไว้: โปรแกรมเมอร์เก่งขึ้นจากการ "เขียนโค้ดจริง" ไม่ใช่แค่อ่าน ลงมือทำโปรเจกต์เล็ก ๆ วันนี้เลย แล้วคุณจะพัฒนาไวมาก 💛