03-javascript.html

<div class="breadcrumb">
  <span class="breadcrumb-link" onclick="loadLesson('intro')">หน้าแรก</span> / <span>JavaScript</span>
</div>

<h2><span class="emoji">⚡</span>JavaScript - ทำให้เว็บมีชีวิตชีวา</h2>

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

<h3>วิธีการใส่ JavaScript</h3>

<div class="step-card">
  <h4>1. Internal JavaScript (ใส่ใน &lt;script&gt; tag)</h4>
  <pre><code class="language-html" data-language="html">
&lt;p id=&quot;myFirstScript&quot;&gt;สวัสดี ชาวโลก!&lt;/p&gt;

&lt;script&gt;
    document.getElementById("myFirstScript").textContent = "Hello World!";
&lt;/script&gt;
    </code></pre>
</div>

<div class="step-card">
  <h4>2. External JavaScript (ใส่ในไฟล์ .js แยกต่างหาก) - แนะนำ!</h4>
  <pre><code class="language-javascript">
&lt;!-- ในไฟล์ HTML --&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;

&lt;!-- ในไฟล์ script.js --&gt;
alert('สวัสดี!');
    </code></pre>
</div>

<h3>ตัวแปร (Variables)</h3>

<pre><code class="language-javascript">
// ประกาศตัวแปร
var name = "สมชาย";
let age = 25;
const city = "กรุงเทพ";

// ใช้ตัวแปร
console.log(name);  // แสดง "สมชาย" ในคอนโซล
</code></pre>

<div class="info-box">
  <strong>ℹ️ ข้อมูล:</strong> ใช้ <code>let</code> และ <code>const</code> แทน <code>var</code> เพราะมีความปลอดภัยมากกว่า
</div>

<h3>ประเภทข้อมูล</h3>

<pre><code class="language-javascript">
// 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: "กรุงเทพ"
};
</code></pre>

<h3>Conditional Statements (if/else)</h3>

<pre><code class="language-javascript">
let age = 18;

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

<h3>Loops (การวนซ้ำ)</h3>

<pre><code class="language-javascript">
// for loop
for (let i = 0; i &lt; 5; i++) {
    console.log(i);  // พิมพ์ 0, 1, 2, 3, 4
}

// while loop
let count = 0;
while (count &lt; 5) {
    console.log(count);
    count++;
}
</code></pre>

<h3>Functions (ฟังก์ชัน)</h3>

<pre><code class="language-javascript">
// ประกาศฟังก์ชัน
function greet(name) {
    return "สวัสดี, " + name + "!";
}

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

<h3>การจัดการ DOM (Document Object Model)</h3>

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

<pre><code class="language-html">
&lt;p id=&quot;myId&quot;&gt;#myId&lt;/p&gt;
&lt;p class=&quot;myClass&quot;&gt;.myClass&lt;/p&gt;
&lt;script&gt;
    // เลือกองค์ประกอบ
    let element = document.getElementById("myId");
    let elements = document.querySelectorAll(".myClass");

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

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

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

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

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

<pre><code class="language-html">
&lt;!-- HTML ---&gt;
&lt;button id="myButton"&gt;คลิกฉัน&lt;/button&gt;

&lt;p id=&quot;myParagraph&quot;&gt;-&lt;/p&gt;

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

<h3>ตัวอย่าง: To-Do List ง่ายๆ</h3>

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

    &lt;script&gt;
        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 = "";
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<div class="navigation">
  <button class="btn btn-primary" id="prev-btn" data-current="javascript">← ก่อนหน้า</button>
  <button class="btn btn-primary" id="next-btn" data-current="javascript">ถัดไป →</button>
</div>

<div class="lesson-quiz">
  <h3>แบบทดสอบสั้นๆ (JavaScript)</h3>
  <div data-quiz-src="exercises/js-quiz.json"></div>
</div>