วิธีรวมไฟล์ JavaScript ภายนอกในหน้า HTML

แท็ก <script> ใช้ประกาศสคริปต์ภายในเอกสาร HTML สำหรับ JavaScript ฝั่งไคลเอนต์ (client-side) แต่ถ้าต้องการเพิ่มไฟล์ JavaScript ภายนอก ให้ใช้แอตทริบิวต์ src ของแท็ก <script>

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

แอตทริบิวต์	ค่า	คำอธิบาย
`async`	async	ระบุว่าสคริปต์รันแบบ asynchronous (ไม่บล็อกการโหลดหน้า)
`charset`	charset	กำหนด character encoding ของสคริปต์
`defer`	defer	สคริปต์จะไม่สร้างเนื้อหา ให้เบราว์เซอร์พาร์สหน้าต่อไปได้เลย
`src`	URL	ระบุ URI/URL ของไฟล์สคริปต์ภายนอก (ใช้สำหรับ include ไฟล์ .js)
`type`	MIME type	ระบุภาษาสคริปต์ (ปกติคือ `text/javascript`)

ตัวอย่าง: Include ไฟล์ JavaScript ภายนอก

ไฟล์ HTML (index.html):

<!DOCTYPE html> <html>
  <body>
    <h2>Alert Button</h2>
    <p>External JavaScript file is myscript.js</p>
    <button type="button" onclick="sayHello()">Click</button>
    <script src="myscript.js"></script>
  </body>
</html>

ไฟล์ myscript.js:

function sayHello() {
  alert("Hello World");
}

ขั้นตอนสรุป

เขียนโค้ด JavaScript ทั้งหมดในไฟล์ข้อความธรรมดา นามสกุล .js
อ้างอิงไฟล์นั้นใน HTML ด้วย <script src="filename.js"></script>
วางแท็ก script ที่ตำแหน่งที่เหมาะสม (มักวางก่อน </body> หรือใน <head> พร้อม defer)