วิธีเพิ่มสคริปต์ (Script) ใน HTML

เพื่อเพิ่มสคริปต์ ให้ใช้แท็ก <script> แท็ก <script> ใน HTML ใช้สำหรับประกาศสคริปต์ (เช่น JavaScript) ภายในเอกสาร HTML ของคุณ

แอตทริบิวต์เพิ่มเติมของแท็ก <script>

แอตทริบิวต์	ค่า	คำอธิบาย
`async`	async	ระบุว่าสคริปต์จะถูกดำเนินการแบบ Asynchronous (ไม่บล็อกการโหลดหน้า) - ใช้กับสคริปต์ภายนอกเท่านั้น
`charset`	charset	กำหนดการเข้ารหัสตัวอักษรที่สคริปต์ใช้ (เช่น UTF-8)
`defer`	defer	ประกาศว่าสคริปต์จะไม่สร้างเนื้อหาใดๆ เบราว์เซอร์จึงสามารถพาร์สและเรนเดอร์หน้าต่อไปได้ - ใช้กับสคริปต์ภายนอก
`src`	URL	ระบุ URI/URL ของสคริปต์ภายนอก
`type`	text/javascript, module, etc.	ระบุภาษาสคริปต์เป็น content-type (MIME type) ค่าเริ่มต้นคือ `text/javascript` ใน HTML5 ไม่จำเป็นต้องระบุ
`xml:space`	preserve	Deprecated - ระบุว่าควรเก็บ whitespace ในโค้ดไว้หรือไม่

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อแสดงสคริปต์ใน HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML script Tag</title>
  </head>
  <body>
    <script>
      document.write("You're visiting tutorialspoint!");
    </script>
  </body>
</html>

Async vs Defer - ความแตกต่างสำคัญ

คุณสมบัติ	`async`	`defer`	ไม่มี attribute
ดาวน์โหลด	ขนานกับการพาร์ส HTML	ขนานกับการพาร์ส HTML	บล็อกการพาร์ส HTML
ดำเนินการ	ทันทีหลังดาวน์โหลดเสร็จ (ลำดับไม่แน่นอน)	หลัง HTML พาร์สเสร็จ ก่อน DOMContentLoaded (ตามลำดับ)	ทันทีที่เจอ (บล็อกการพาร์ส)
เหมาะสำหรับ	สคริปต์อิสระ (analytics, ads)	สคริปต์ที่ต้องใช้ DOM / ต้องเรียงลำดับ	สคริปต์เล็กๆ / inline

แนวทางปฏิบัติที่ดีที่สุดสมัยใหม่

<!-- โมดูล ES6 (Modern) -->
<script type="module" src="app.js"></script>

<!-- สคริปต์ภายนอกทั่วไป - ใช้ defer สำหรับสคริปต์หลัก -->
<script src="main.js" defer></script>

<!-- สคริปต์ที่ไม่ต้องการ DOM - ใช้ async -->
<script src="analytics.js" async></script>

<!-- Inline script -->
<script>
  // โค้ดที่รันทันที
</script>