Docs/Basic/พื้นฐาน JavaScript
Basic

พื้นฐาน JavaScript

·43 ครั้งที่อ่าน

มาถึงส่วนที่สนุกที่สุดแล้วครับ! ถ้า HTML คือโครงกระดูก และ CSS คือเสื้อผ้า JavaScript (JS) ก็คือ "สมองและระบบประสาท" ที่ทำให้เว็บของเรา "โต้ตอบ" กับผู้ใช้ได้ (เช่น กดปุ่มแล้วมีหน้าต่างเด้งขึ้นมา หรือคำนวณเลขให้เรา)

1. JavaScript ทำงานตอนไหน?

JS มักจะทำงานเมื่อเกิด "เหตุการณ์" (Event) บางอย่างขึ้น เช่น:

  • ผู้ใช้ คลิก (Click)

  • ผู้ใช้ พิมพ์ (Type)

  • หน้าเว็บ โหลดเสร็จ (Load)

2. ไวยากรณ์พื้นฐานที่ต้องรู้ (Syntax)

เราเขียน JS ไว้ภายใต้ Tag <script> (มักจะวางไว้ก่อนปิด </body>)

ตัวแปร (Variables): เก็บข้อมูล

เหมือนเราเอาของใส่กล่องแล้วติดป้ายชื่อไว้

let name = "สมชาย";      // เก็บข้อความ (String)
let age = 25;           // เก็บตัวเลข (Number)
const pi = 3.14;        // const คือค่าที่ห้ามเปลี่ยน (Constant)

ฟังก์ชัน (Functions): ชุดคำสั่ง

เหมือน "สูตรอาหาร" ที่เราสั่งให้มันทำซ้ำได้

function sayHello() {
    alert("สวัสดีครับ ยินดีที่ได้รู้จัก!");
}

3. การเชื่อมต่อกับ HTML (DOM Manipulation)

นี่คือหัวใจสำคัญครับ คือการใช้ JS ไปสั่งเปลี่ยน HTML หรือ CSS

  • document.getElementById('id-name') : คือการ "ชี้เป้า" ไปที่ Element นั้นๆ

  • .innerHTML : เปลี่ยนข้อความข้างใน

  • .style : เปลี่ยน CSS ผ่าน JS

4. ตัวอย่าง: ทำปุ่ม "เปลี่ยนสีพื้นหลัง"

ลองดู Code นี้ครับ ผมจะทำให้พอกดปุ่มแล้วสีพื้นหลังเปลี่ยน และข้อความเปลี่ยนตาม

<!DOCTYPE html>
<html>
<head>
    <style>
        .box { padding: 20px; border: 2px solid #333; text-align: center; transition: 0.3s; }
    </style>
</head>
<body>

    <div id="myBox" class="box">
        <h2 id="text">ลองกดปุ่มด้านล่างดูสิ</h2>
        <button onclick="changeContent()">คลิกเพื่อเปลี่ยน!</button>
    </div>

    <script>
        // ฟังก์ชันที่จะทำงานเมื่อคลิกปุ่ม
        function changeContent() {
            // 1. ชี้เป้าไปที่ Element ที่ต้องการ
            let box = document.getElementById('myBox');
            let heading = document.getElementById('text');

            // 2. สั่งเปลี่ยนคำ
            heading.innerHTML = "ว้าว! เปลี่ยนไปแล้ว";

            // 3. สั่งเปลี่ยน CSS
            box.style.backgroundColor = "yellow";
            box.style.borderColor = "orange";
            
            // 4. แสดงข้อความแจ้งเตือนบนหน้าจอ
            console.log("ปุ่มถูกกดแล้ว!"); 
        }
    </script>

</body>
</html>

5. สรุปความสัมพันธ์ (HTML + CSS + JS)

  • HTML โครงสร้างกระดูก / อวัยวะ

  • CSS ความสวยงามผิวหนัง / เสื้อผ้า

  • JS การทำงานสมอง / กล้ามเนื้อ

คำแนะนำ: อย่าทิ้งพื้นฐาน HTML/CSS/JS เพราะถ้า "พื้นฐานแน่น" เวลา AI เขียน Code พลาด คุณจะมองออกทันทีว่าจุดไหนผิด (เหมือนการเป็น "หัวหน้าช่าง" ที่คุม "ลูกน้อง AI" นั่นเอง)