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

HTML5 การใช้งาน script Tag

ใน HTML5, แท็ก <script> ใช้สำหรับการรวมและเรียกใช้โค้ด JavaScript ภายในเว็บเพจ ซึ่งมีหลายรูปแบบการใช้งานขึ้นอยู่กับวิธีการจัดการและการโหลดสคริปต์

การฝัง 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>Script Example</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script>
        document.querySelector('h1').innerText = "Hello from JavaScript!";
    </script>
</body>
</html>

ในตัวอย่างนี้ JavaScript จะถูกฝังภายใน <script> และจะทำงานเมื่อเว็บเพจโหลดเสร็จแล้ว

การลิงก์ไฟล์ JavaScript ภายนอก

การแยกโค้ด 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>External Script Example</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script src="app.js"></script>
</body>
</html>

app.js

JavaScript
document.querySelector('h1').innerText = "Hello from External JavaScript!";

การใช้ไฟล์ JavaScript ภายนอกจะต้องระบุด้วย src attribute ไปยังไฟล์ที่เก็บโค้ด JavaScript

การใช้ defer Attribute

เมื่อใช้ defer attribute, สคริปต์จะถูกเลื่อนการโหลดจนกว่าเว็บเพจจะโหลดเสร็จแล้ว จากนั้นจึงค่อยดำเนินการสคริปต์

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Defer Script Example</title>
    <script src="app.js" defer></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

ในตัวอย่างนี้, สคริปต์จะทำงานหลังจากที่เนื้อหาของหน้าโหลดเสร็จเรียบร้อยแล้ว ช่วยลดปัญหาการบล็อกการโหลดของหน้า

การใช้ async Attribute

async จะโหลดสคริปต์แบบไม่บล็อกการโหลดของหน้าเว็บ อย่างไรก็ตามสคริปต์จะทำงานทันทีที่โหลดเสร็จ ซึ่งอาจไม่เป็นลำดับ

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async Script Example</title>
    <script src="app.js" async></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

ในกรณีที่ใช้ async, สคริปต์จะโหลดและทำงานทันทีที่พร้อม แต่อาจจะไม่รอให้หน้าเว็บโหลดเสร็จทั้งหมดก่อน

การเขียนสคริปต์ในส่วนท้ายของ <body>

การวางแท็ก <script> ที่ส่วนท้ายของเอกสารมักเป็นวิธีการทั่วไปที่ช่วยให้หน้าเว็บโหลดเร็วขึ้นก่อนที่จะรันสคริปต์

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script at End Example</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script src="app.js"></script>
</body>
</html>

วิธีนี้ช่วยให้ HTML ถูกโหลดก่อนที่ JavaScript จะเริ่มทำงาน

การกำหนด type สำหรับโมดูล (ES6 Modules)

ใน HTML5 และ JavaScript เวอร์ชันใหม่ๆ เราสามารถใช้ JavaScript แบบโมดูลด้วย type="module" ซึ่งช่วยให้สามารถนำเข้าและส่งออกฟังก์ชันหรือค่าระหว่างไฟล์ JavaScript ได้

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Script Example</title>
    <script type="module" src="app.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

app.js

JavaScript
import { greet } from './helper.js';
document.querySelector('h1').innerText = greet();

helper.js

JavaScript
export function greet() {
    return "Hello from a Module!";
}

การใช้ nomodule สำหรับเบราว์เซอร์เก่า

nomodule ใช้สำหรับจัดการเบราว์เซอร์ที่ไม่รองรับโมดูล โดยจะรันสคริปต์ที่มี nomodule เฉพาะในเบราว์เซอร์ที่ไม่สนับสนุนโมดูลเท่านั้น

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>No Module Example</title>
    <script nomodule src="legacy.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

สรุป

  • การฝังโค้ด JavaScript ใน <script> ใช้สำหรับโค้ดที่เรียบง่ายหรือที่ไม่ซับซ้อน
  • การลิงก์ไฟล์ภายนอกช่วยในการจัดการโค้ดที่ขนาดใหญ่ขึ้น
  • defer และ async ช่วยในการเพิ่มประสิทธิภาพการโหลดของหน้าเว็บ
  • การใช้ module ช่วยให้สามารถใช้ JavaScript แบบโมดูลาร์

ตัวเลือกต่าง ๆ เหล่านี้ช่วยให้เราสามารถเลือกวิธีการที่เหมาะสมกับโครงสร้างและขนาดของเว็บไซต์หรือแอปพลิเคชันที่พัฒนาขึ้นได้

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

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