วิธีฝัง JavaScript ในไฟล์ HTML: Inline, External, Module

มี 3 วิธีหลักในการนำ JavaScript ไปใช้ใน HTML:

1. Inline Script: เขียนโค้ดใน <script> โดยตรง
2. External Script: อ้างอิงไฟล์ .js ด้วย <script src="...">
3. ES Module: ใช้ <script type="module"> รองรับ import/export

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ฝัง JavaScript ใน HTML</title>
  <!-- External script ก่อน body ปิด หรือใน head พร้อม defer -->
  <script src="script.js" defer></script>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>ฝัง JavaScript ใน HTML</h1>
  <div class="result"></div>
  <!-- Inline script -->
  <script>
    const resEle = document.querySelector(".result");
    resEle.innerHTML += "Inline JavaScript โหลดแล้ว<br>";
  </script>
</body>
</html>

script.js (External)

// script.js
const resEle = document.querySelector(".result");
resEle.innerHTML += 'External JavaScript โหลดแล้ว ';

ผลลัพธ์

แอตทริบิวต์สำคัญของ <script>

ลำดับการโหลดและรัน

<head>
  <script src="a.js" defer></script>   <!-- 1. ดาวน์โหลดขนาน -->
  <script src="b.js" defer></script>   <!-- 2. ดาวน์โหลดขนาน -->
  <script src="c.js" async></script>   <!-- 3. ดาวน์โหลดขนาน รันทันทีเสร็จ -->
</head>
<body>
  <script> console.log('inline 1'); </script> <!-- 4. รันทันที -->
  <script src="d.js" defer></script>   <!-- 5. รันหลัง DOM ready ตามลำดับ a,b,d -->
  <script> console.log('inline 2'); </script> <!-- 6. รันทันที -->
</body>

Best Practices

• วาง <script src="..." defer> ใน <head> — เริ่มดาวน์โหลดเร็ว ไม่บล็อกรendrer
• หลีกเลี่ยง inline script ยาว — แยกเป็นไฟล์ภายนอกเพื่อแคชได้
• ใช้ type="module" สำหรับโค้ดสมัยใหม่ (import/export, top-level await)
• รวม/บีบอัด (bundle/minify) ไฟล์ .js ใน production