การเขียน JavaScript Syntax

JavaScript (JS) เป็นภาษาโปรแกรมที่ใช้งานได้หลายด้าน โดยเฉพาะในเว็บเบราว์เซอร์ เพื่อทำให้หน้าเว็บมีความโต้ตอบและมีฟังก์ชันที่หลากหลายขึ้น การเรียนรู้ Syntax ของ JavaScript เป็นเรื่องสำคัญเพราะมันเป็นโครงสร้างพื้นฐานที่ทำให้โปรแกรมทำงานได้ตามที่เราต้องการ

1. ตัวแปร (Variables)

ใน JavaScript สามารถประกาศตัวแปรได้โดยใช้คำสำคัญ var, let, หรือ const ซึ่ง let และ const เป็นวิธีที่แนะนำมากกว่า เนื่องจาก var มีปัญหาเรื่องการ scope ที่ไม่ชัดเจน

var ใช้ประกาศตัวแปรทั่วไป

var name = "John";  // ประกาศตัวแปร name

let ใช้สำหรับตัวแปรที่ต้องการเปลี่ยนค่าได้

let age = 25;  // สามารถเปลี่ยนค่าได้
age = 26;

const ใช้สำหรับตัวแปรที่ค่าคงที่ ไม่สามารถเปลี่ยนค่าได้

const pi = 3.14159;  // ไม่สามารถเปลี่ยนค่าได้

2. ชนิดข้อมูล (Data Types)

JavaScript รองรับหลายชนิดข้อมูล เช่น

String ข้อความ

let greeting = "Hello World!";

Number ตัวเลข (ทั้งจำนวนเต็มและทศนิยม)

let age = 30;
let price = 9.99;

Boolean ค่าจริงหรือเท็จ (true/false)

let isAvailable = true;

Array กลุ่มของข้อมูล

let fruits = ["apple", "banana", "cherry"];

Object เก็บข้อมูลแบบคู่ค่า (key-value)

let person = {
    name: "Alice",
    age: 25,
    city: "New York"
};

3. Operators (ตัวดำเนินการ)

ตัวดำเนินการคณิตศาสตร์ ใช้ในการคำนวณ เช่น บวก (+), ลบ (-), คูณ (*), หาร (/)

let x = 5;
let y = 3;
let sum = x + y;  // ผลลัพธ์คือ 8

ตัวดำเนินการเปรียบเทียบ ใช้ในการเปรียบเทียบ เช่น เท่ากัน (==), ไม่เท่ากัน (!=), มากกว่า (>), น้อยกว่า (<)

let a = 10;
let b = 20;
console.log(a == b);  // ผลลัพธ์คือ false

ตัวดำเนินการตรรกะ ใช้ในเงื่อนไข เช่น AND (&&), OR (||), NOT (!)

let x = true;
let y = false;
console.log(x && y);  // ผลลัพธ์คือ false

4. เงื่อนไข (Conditional Statements)

ใช้ในการตัดสินใจทำงานตามเงื่อนไขที่กำหนด

if…else ใช้เพื่อตรวจสอบเงื่อนไขและทำงานตามเงื่อนไขนั้น

let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult.");
}

switch ใช้เมื่อต้องการตรวจสอบหลายเงื่อนไข

let color = "red";
switch (color) {
    case "red":
        console.log("Color is red");
        break;
    case "blue":
        console.log("Color is blue");
        break;
    default:
        console.log("Color is unknown");
}

5. Loops (การวนซ้ำ)

ใช้สำหรับทำงานซ้ำ ๆ ตามที่เรากำหนด

for loop วนซ้ำตามจำนวนครั้งที่กำหนด

for (let i = 0; i < 5; i++) {
    console.log(i);  // ผลลัพธ์คือ 0, 1, 2, 3, 4
}

while loop วนซ้ำตราบใดที่เงื่อนไขยังเป็นจริง

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

6. Functions (ฟังก์ชัน)

ฟังก์ชันคือกลุ่มของโค้ดที่สามารถเรียกใช้ซ้ำได้

การประกาศฟังก์ชัน

function greet(name) {
    console.log("Hello " + name);
}
greet("John");  // เรียกใช้ฟังก์ชัน ผลลัพธ์คือ Hello John

ฟังก์ชันแบบลูกศร (Arrow Functions)

const add = (a, b) => a + b;
console.log(add(5, 3));  // ผลลัพธ์คือ 8

7. การจัดการ DOM (Document Object Model)

JavaScript สามารถใช้จัดการองค์ประกอบ HTML ผ่าน DOM ได้

การเลือกองค์ประกอบ

let element = document.getElementById("myElement");

การแก้ไขเนื้อหาขององค์ประกอบ

element.innerHTML = "Hello, World!";

8. Event Handling (การจัดการเหตุการณ์)

JavaScript สามารถตรวจจับเหตุการณ์ต่าง ๆ เช่น การคลิก หรือการเลื่อนเมาส์

ตัวอย่างการจัดการคลิก

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

9. Asynchronous Programming (การเขียนโปรแกรมแบบไม่ประสานเวลา)

JavaScript รองรับการทำงานแบบ asynchronous ผ่านการใช้ setTimeout, setInterval, Promises, และ async/await

setTimeout รันโค้ดหลังจากเวลาที่กำหนด

setTimeout(function() {
    console.log("Hello after 2 seconds");
}, 2000);

Promises ใช้จัดการ asynchronous actions

let promise = new Promise(function(resolve, reject) {
    let success = true;
    if (success) {
        resolve("Success!");
    } else {
        reject("Failure!");
    }
});
promise.then(function(result) {
    console.log(result);
});

10. Error Handling (การจัดการข้อผิดพลาด)

JavaScript มีวิธีการจัดการข้อผิดพลาดผ่านการใช้ try...catch

ตัวอย่างการใช้ try…catch

try {
    let result = riskyFunction();
} catch (error) {
    console.log("An error occurred: " + error.message);
}

นี่เป็นเพียงพื้นฐานของ JavaScript Syntax ซึ่งยังมีฟีเจอร์และฟังก์ชันที่ลึกซึ้งกว่านี้ในการเขียนโปรแกรม ซึ่งจะได้เรียนในบทต่อๆไป