สอน JavaScript ตั้งแต่ต้น

JavaScript คือภาษาที่ทำให้หน้าเว็บตอบสนองต่อผู้ใช้ได้ ทุกเว็บเบราว์เซอร์รันได้โดยไม่ต้องติดตั้งอะไรเพิ่ม และปัจจุบันยังใช้ฝั่งเซิร์ฟเวอร์ผ่าน Node.js ได้ด้วย บทความนี้จะให้คุณเริ่มจากตัวแปรและฟังก์ชัน ไปจนถึงการทำงานกับอาร์เรย์ และใช้งานกับหน้าเว็บ

ตัวอย่างในบทความนี้ถูกรันจริงด้วย Node.js และได้ผลลัพธ์ตามที่แสดง ส่วนที่ทำงานกับหน้าเว็บ (DOM) ต้องทดสอบในเบราว์เซอร์

สิ่งที่ต้องเตรียม

• เว็บเบราว์เซอร์ใดก็ได้ (กด F12 แล้วเลือกแท็บ Console เพื่อลองคำสั่ง)
• หรือ Node.js เวอร์ชัน 18 ขึ้นไป สำหรับรันไฟล์ `.js` ในเครื่อง

ภาพรวมการทำงาน

ตัวแปร

ใช้ `const` สำหรับค่าที่ไม่เปลี่ยน และ `let` สำหรับค่าที่เปลี่ยนได้

const schoolName = "โรงเรียนตัวอย่าง";
let count = 0;
count = count + 1;
console.log(schoolName, count);

ฟังก์ชัน

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

ฟังก์ชันรับค่าเข้า ทำงาน แล้วส่งค่ากลับด้วย `return` คำสั่ง `if` ตรวจทีละเงื่อนไข และเงื่อนไขแรกที่เป็นจริงจะทำงาน

อาร์เรย์ พร้อม map, reduce และ forEach

ตัวอย่างต่อไปนี้ใช้ข้อมูลนักเรียนเป็นอาร์เรย์ของออบเจกต์ แล้วสร้างเกรดและค่าเฉลี่ย

const students = [
  { name: "สมชาย", score: 85 },
  { name: "สมหญิง", score: 72 },
  { name: "สมศักดิ์", score: 45 },
];

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

const grades = students.map(s => `${s.name}: ${grade(s.score)}`);
const average = students.reduce((sum, s) => sum + s.score, 0) / students.length;

console.log("สวัสดี JavaScript");
grades.forEach(line => console.log(line));
console.log("คะแนนเฉลี่ย:", average.toFixed(2));

ผลลัพธ์ที่ได้จากการรันจริง

สวัสดี JavaScript
สมชาย: A
สมหญิง: B
สมศักดิ์: F
คะแนนเฉลี่ย: 67.33

• `map` สร้างอาร์เรย์ใหม่จากการแปลงทุกตัว
• `reduce` รวมค่าทั้งหมดเป็นค่าเดียว
• `forEach` ทำงานกับทุกตัวโดยไม่สร้างอาร์เรย์ใหม่
• `toFixed(2)` ปัดทศนิยมให้เหลือสองตำแหน่งเพื่อแสดงผล

ทำงานกับหน้าเว็บ (DOM)

ในเบราว์เซอร์ JavaScript อ่านและแก้ไขหน้าเว็บได้ผ่าน DOM ตัวอย่างนี้เปลี่ยนข้อความเมื่อกดปุ่ม

<p id="message">ยังไม่ได้กด</p>
<button id="btn">กดฉัน</button>
<script>
  const message = document.getElementById("message");
  document.getElementById("btn").addEventListener("click", () => {
    message.textContent = "กดแล้ว!";
  });
</script>

ทดสอบด้วยการบันทึกเป็นไฟล์ `.html` แล้วเปิดในเบราว์เซอร์ คลิกปุ่มแล้วข้อความจะเปลี่ยน

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

• **ใช้ `=` แทน `===`:** `===` เปรียบเทียบทั้งค่าและชนิดข้อมูล ควรใช้เสมอ
• **ลืมว่า `const` เปลี่ยนค่าไม่ได้:** ถ้าต้องเปลี่ยนค่าให้ใช้ `let`
• **เรียกองค์ประกอบ DOM ก่อนที่หน้าจะโหลด:** วางสคริปต์ไว้ท้าย `<body>` หรือใช้ `defer`

ขั้นต่อไป

ลองเพิ่มฟีเจอร์ในตัวอย่าง DOM เช่น ช่องกรอกคะแนนแล้วคำนวณเกรดทันที จากนั้นเรียนรู้ `fetch` เพื่อดึงข้อมูลจากเซิร์ฟเวอร์

สรุป

JavaScript ใช้ตัวแปร ฟังก์ชัน และอาร์เรย์เป็นพื้นฐาน และทำงานกับหน้าเว็บผ่าน DOM และเหตุการณ์ต่าง ๆ การฝึกด้วยตัวอย่างสั้น ๆ ที่รันได้จริงจะทำให้เข้าใจเร็วที่สุด