ถ้า 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) ``` จำไว้: โปรแกรมเมอร์เก่งขึ้นจากการ "เขียนโค้ดจริง" ไม่ใช่แค่อ่าน ลงมือทำโปรเจกต์เล็ก ๆ วันนี้เลย แล้วคุณจะพัฒนาไวมาก 💛