Tag <script> ใน JavaScript: การใช้งานและตำแหน่งวาง

HTML <script> Tag

ใช้ครอบโค้ด JavaScript ฝั่ง Client-side สามารถวางได้ 3 ตำแหน่ง:

1. ใน <head> - โหลดก่อน Body (อาจ Block Rendering)
2. ใน <body> - แนะนำ วางก่อน </body> เพื่อไม่ Block Rendering
3. External File - <script src="app.js"></script> (แนะนำมากที่สุด)

ตัวอย่าง: ตัวแปรต้องอยู่ใน script tag

<html> <body> <p id="demo"></p> 
<script>
  var a = 1;
  var b = 2;
  var c = a + b;
  document.getElementById("demo").innerHTML = c;
</script> </body> </html>

ผลลัพธ์: 3

ตัวอย่างผิด: ตัวแปรอยู่นอก script tag

<html> <body> <p id="demo"></p> 
var a = 1; <!-- ผิด: ไม่อยู่ใน script tag -->
<script>
  var b = 2;
  var c = a + b; // ReferenceError: a is not defined
  document.getElementById("demo").innerHTML = c;
</script> </body> </html>

ผลลัพธ์: แสดงข้อความ var a = 1 เป็น Text ธรรมดา (ไม่ Execute)

Attributes สำคัญ

• async - โหลดแบบ Asynchronous (ไม่บล็อก HTML Parsing)
• defer - โหลดขนาน รันหลัง HTML Parse เสร็จ (ตามลำดับ)
• type="module" - ใช้ ES Modules