พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน JavaScript

การใช้งาน JavaScript ใน HTML5 สามารถทำได้หลายวิธี โดย JavaScript เป็นภาษาสคริปต์ที่ใช้เพื่อเพิ่มความสามารถเชิงโต้ตอบให้กับเว็บไซต์ เช่น การทำงานของฟอร์ม การอัปเดตเนื้อหาแบบไดนามิก และการสร้างแอนิเมชัน ใน HTML5 JavaScript สามารถใช้งานได้ทั้งการฝังสคริปต์ลงในหน้า HTML โดยตรง หรือการเชื่อมโยงไปยังไฟล์สคริปต์ภายนอก

การเขียน JavaScript ในแท็ก <script> ภายในไฟล์ HTML

การฝัง JavaScript ไว้ภายในแท็ก <script> จะทำให้โค้ด JavaScript สามารถทำงานร่วมกับโครงสร้าง HTML ในหน้านั้น ๆ ได้โดยตรง

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
</head>
<body>

    <h1>ยินดีต้อนรับ</h1>
    <button onclick="displayMessage()">คลิกที่นี่</button>

    <script>
        function displayMessage() {
            alert("สวัสดี! นี่คือการใช้ JavaScript ใน HTML5");
        }
    </script>

</body>
</html>

ตัวอย่างนี้เป็นการใช้ JavaScript เพื่อแสดงกล่องข้อความ (alert) เมื่อผู้ใช้คลิกที่ปุ่ม

การเขียน JavaScript ในไฟล์ภายนอก

การเชื่อมโยง JavaScript จากไฟล์ภายนอกทำให้โค้ดดูสะอาดและสามารถใช้ซ้ำได้ในหลายหน้าเว็บ การอ้างอิงไฟล์ภายนอกสามารถทำได้โดยใช้ <script> และระบุที่อยู่ของไฟล์สคริปต์

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>

    <h1>ยินดีต้อนรับ</h1>
    <button onclick="displayMessage()">คลิกที่นี่</button>

</body>
</html>

script.js

JavaScript
function displayMessage() {
    alert("สวัสดี! นี่คือการใช้ JavaScript จากไฟล์ภายนอก");
}

การเขียน JavaScript ในการจัดการเหตุการณ์ (Event Handling)

สามารถเขียนโค้ด JavaScript สำหรับการจัดการเหตุการณ์ (Event Handling) โดยตรงใน HTML ตัวอย่างเช่น

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling Example</title>
</head>
<body>

    <h1>กรุณาป้อนข้อมูลของคุณ</h1>
    <input type="text" id="name" placeholder="ป้อนชื่อของคุณ">
    <button onclick="showName()">แสดงชื่อ</button>

    <script>
        function showName() {
            var name = document.getElementById("name").value;
            alert("สวัสดี " + name);
        }
    </script>

</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้ป้อนชื่อและคลิกปุ่ม ระบบจะแสดงข้อความ “สวัสดี” ตามด้วยชื่อที่ป้อนลงไป

การใช้ JavaScript เพื่อจัดการ DOM (Document Object Model)

JavaScript สามารถใช้ในการจัดการเนื้อหาของหน้าเว็บได้โดยการปรับปรุงหรือเปลี่ยนแปลงโครงสร้าง DOM ตัวอย่างเช่น

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation Example</title>
</head>
<body>

    <h1 id="title">ยินดีต้อนรับ</h1>
    <button onclick="changeTitle()">เปลี่ยนข้อความ</button>

    <script>
        function changeTitle() {
            document.getElementById("title").innerHTML = "ข้อความใหม่";
        }
    </script>

</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกที่ปุ่ม ข้อความใน <h1> จะเปลี่ยนเป็น “ข้อความใหม่” โดยใช้ JavaScript เพื่อปรับปรุง DOM

การใช้ JavaScript ร่วมกับ API ใน HTML5

HTML5 มาพร้อมกับ API ที่หลากหลายซึ่งสามารถใช้ร่วมกับ JavaScript เพื่อเพิ่มฟังก์ชันให้กับเว็บ ตัวอย่างเช่น การใช้ Geolocation API เพื่อดึงพิกัดของผู้ใช้

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation Example</title>
</head>
<body>

    <h1>พิกัดที่ตั้งของคุณ</h1>
    <button onclick="getLocation()">แสดงพิกัด</button>
    <p id="location"></p>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                document.getElementById("location").innerHTML = "เบราว์เซอร์ของคุณไม่รองรับ Geolocation";
            }
        }

        function showPosition(position) {
            document.getElementById("location").innerHTML = "ละติจูด: " + position.coords.latitude +
                "<br>ลองจิจูด: " + position.coords.longitude;
        }
    </script>

</body>
</html>

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

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ