วิธีใช้ HTML <script> Element

เรียนรู้วิธีใช้ HTML <script> element

HTML <script> element ใช้เพื่อเพิ่ม JavaScript code ลงใน document

ด้วย <script> คุณเพิ่ม JavaScript ได้ 2 วิธี:

• Embed JavaScript code inline โดยตรงใน document
• Import/load external JavaScript file (.js)

เรื่องนี้เกี่ยวกับการ load JavaScript แบบ internal vs external

มาดูทั้งสองตัวเลือก

Inline JavaScript

เพื่อ embed JavaScript code inline ให้กำหนด opening และ closing script tags แล้ววาง JS code ภายใน:

<script>
// Add your JavaScript code here
</script>

<script> element สามารถวางได้ 2 ตำแหน่ง:

1. ภายใน <head> element ของ document:

<!DOCTYPE html>
<html>
<head>
<script>
// Add your JavaScript code here
</script>
</head>
<body> ... </body>
</html>

2. นอก <head> element ก่อน closing </body> tag:

<!DOCTYPE html>
<html>
<head></head>
<body> ...
<script>
// Add your JavaScript code here
</script>
</body>
</html>

ความแตกต่างระหว่างวาง JavaScript ใน <head> vs <body> คืออะไร?

ความแตกต่างคือ performance (ประสิทธิภาพ) และอาจเป็น big difference

โดย default HTML documents และ elements ถูก parsed (อ่าน) และ rendered จากบนลงล่าง เมื่อคุณ load และ run JavaScript code ใน <head> การ render ส่วนที่เหลือ ของ page elements (visible content) จะถูก block จนกว่า script จะ parsed และรัน code เสร็จ

การ execute JavaScript file อาจใช้ไม่กี่ milliseconds (ms) หรือหลายวินาที ขึ้นอยู่กับขนาดและประเภทของโค้ดที่ execute ดังนั้นอาจ delay เวลาที่หน้าเว็บกลายเป็น interactive (ใช้งานได้) ให้ผู้ใช้

เมื่อวาง JavaScript code ที่ล่างสุด (ก่อน </body>) JavaScript code จะไม่ load และ execute จนกว่า หลังจาก page content ทั้งหมด rendered และมองเห็นได้แล้ว นี่หลีกเลี่ยง blocking page content ทำให้ผู้ใช้ interact กับ web page ได้เร็วขึ้น

ตอนนี้คุณรู้วิธี embed inline JavaScript และวิธีทำให้ performant ที่สุด

ต่อไปมาดูการ import external JavaScript code และความแตกต่างจาก internal (inline) JavaScript

Import external JavaScript file

เพื่อ load external JavaScript code คุณต้อง import ผ่าน file ที่มี extension .js เช่น main.js

ทำงานดังนี้:

<script src="main.js"></script>

เหมือนกับ inline JavaScript คุณสามารถวางได้ 2 ตำแหน่ง:

1. ภายใน <head> element:

<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
</head>
<body> ... </body>
</html>

2. ก่อน closing body element tag </body>:

<!DOCTYPE html>
<html>
<head></head>
<body> ...
<script src="main.js"></script>
</body>
</html>

The defer attribute

ด้วย modern Javascript มีวิธีที่ performant กว่ามาก ในการรัน external scripts เทียบกับการ load ที่ล่างสุดของหน้า

เราสามารถใช้ defer attribute บน <script> elements:

<script defer src="main.js"></script>

แล้ววางภายใน <head> element:

<!DOCTYPE html>
<html>
<head>
<script defer src="main.js"></script>
</head>
<body> ... </body>
</html>

ด้วย defer approach JavaScript code จะถูก load (ไม่ execute) ระหว่าง ที่ HTML code กำลัง parsing แต่จะไม่ execute จนกว่า หลังจาก HTML parsing เสร็จ

หาก external script วางที่ล่างสุด (ก่อน </body>) ลำดับจะเป็น:

• First, HTML code parses
• Then HTML renders
• Then JavaScript code loads
• Then JavaScript code executes

ด้วย defer เรา load JavaScript code ระหว่าง ที่ HTML parsing (แบบ parallel) ดังนั้นทันทีที่ HTML เสร็จ JavaScript code ก็พร้อม execute แล้ว

ทำไมถึงดีกว่า? ไม่ได้ดีกว่าตลอดเวลา แต่วェ็บไซต์หลายแห่งพึ่งพา JavaScript ทำงานทันทีที่หน้าเว็บกลายเป็น interactive และ approach นี้ทำให้ site พร้อมสำหรับ interaction เร็วขึ้นมาก

โอเคถ้ายังไม่เข้าใจ defer concept เลยก็ไม่เป็นไร จะเข้าใจเมื่อมีประสบการณ์ปฏิบัติ

สิ่งสำคัญคือรู้ว่า โดยทั่วไป นี่คือวิธีที่ performant ที่สุดในการรัน JavaScript code บนเว็บไซต์

Good to know:

• คุณสามารถใช้ defer attribute ได้เฉพาะ external JavaScript files — ไม่ใช่ inline JavaScript code
• เมื่อ import external scripts ต้องระบุ relative source path หาก JavaScript main.js file อยู่ใน folder js ภายใน root project directory ให้ import ดังนี้ src="/js/main.js"
• คุณอาจเห็น <script> elements ที่มี language identifier ด้วย type attribute <script type="text/javascript"> ใน HTML5 (latest version) ไม่ต้องทำแล้ว เพราะเป็น default แล้ว