หน้าแรก / JavaScript

⚡JavaScript - ทำให้เว็บมีชีวิตชีวา

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

วิธีการใส่ JavaScript

1. Internal JavaScript (ใส่ใน <script> tag)


<p id="myFirstScript">สวัสดี ชาวโลก!</p>

<script>
    document.getElementById("myFirstScript").textContent = "Hello World!";
</script>

2. External JavaScript (ใส่ในไฟล์ .js แยกต่างหาก) - แนะนำ!


<!-- ในไฟล์ HTML -->
<script src="script.js"></script>

<!-- ในไฟล์ script.js -->
alert('สวัสดี!');

ตัวแปร (Variables)


// ประกาศตัวแปร
var name = "สมชาย";
let age = 25;
const city = "กรุงเทพ";

// ใช้ตัวแปร
console.log(name);  // แสดง "สมชาย" ในคอนโซล
ℹ️ ข้อมูล: ใช้ let และ const แทน var เพราะมีความปลอดภัยมากกว่า

ประเภทข้อมูล


// String (ข้อความ)
let message = "สวัสดี";

// Number (ตัวเลข)
let age = 25;
let price = 99.99;

// Boolean (จริง/เท็จ)
let isActive = true;

// Array (อาร์เรย์ - รายการ)
let colors = ["แดง", "เขียว", "น้ำเงิน"];

// Object (อ็อบเจกต์)
let person = {
    name: "สมชาย",
    age: 25,
    city: "กรุงเทพ"
};

Conditional Statements (if/else)


let age = 18;

if (age >= 18) {
    console.log("คุณเป็นผู้ใหญ่");
} else {
    console.log("คุณยังเป็นเด็ก");
}

Loops (การวนซ้ำ)


// for loop
for (let i = 0; i < 5; i++) {
    console.log(i);  // พิมพ์ 0, 1, 2, 3, 4
}

// while loop
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

Functions (ฟังก์ชัน)


// ประกาศฟังก์ชัน
function greet(name) {
    return "สวัสดี, " + name + "!";
}

// เรียกใช้ฟังก์ชัน
console.log(greet("สมชาย"));  // แสดง "สวัสดี, สมชาย!"

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

DOM คือการแทนเนื้อหาของเว็บเพจในรูปแบบของต้นไม้ JavaScript ช่วยให้คุณสามารถเข้าถึงและแก้ไของค์ประกอบ HTML ได้


<p id="myId">#myId</p>
<p class="myClass">.myClass</p>
<script>
    // เลือกองค์ประกอบ
    let element = document.getElementById("myId");
    let elements = document.querySelectorAll(".myClass");

    // เปลี่ยนข้อความ
    element.textContent = "ข้อความใหม่";

    // เปลี่ยน HTML
    element.innerHTML = "<strong>ข้อความหนา</strong>";

    // เพิ่ม/ลบ Class
    element.classList.add("active");
    element.classList.remove("inactive");

    // เปลี่ยน Style
    elements[0].style.color = "red";
    element.style.fontSize = "20px";
</script>

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


<!-- HTML --->
<button id="myButton">คลิกฉัน</button>

<p id="myParagraph">-</p>

<script>
    // JavaScript
    let button = document.getElementById("myButton");
    button.addEventListener("click", function() {
        document.getElementById("myParagraph").textContent = "คุณคลิกปุ่ม!";
    });
</script>

ตัวอย่าง: To-Do List ง่ายๆ


<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <style>
        body { font-family: Arial; }
        .done { text-decoration: line-through; }
    </style>
</head>
<body>
    <h1>รายการสิ่งที่ต้องทำ</h1>
    <input type="text" id="taskInput" placeholder="ใส่งานใหม่">
    <button onclick="addTask()">เพิ่ม</button>
    <ul id="taskList"></ul>

    <script>
        function addTask() {
            let input = document.getElementById("taskInput");
            let task = input.value;

            if (task === "") {
                alert("กรุณาใส่งาน!");
                return;
            }

            let list = document.getElementById("taskList");
            let li = document.createElement("li");
            li.textContent = task;
            li.onclick = function() {
                this.classList.toggle("done");
            };
            list.appendChild(li);

            input.value = "";
        }
    </script>
</body>
</html>

แบบทดสอบสั้นๆ (JavaScript)