ในการเขียนโค้ด JavaScript สิ่งที่สำคัญคือการเลือกตำแหน่งที่เหมาะสมในการวางโค้ด เพื่อให้สคริปต์ทำงานตามที่ต้องการ ในบทนี้เราจะอธิบายถึง 3 ตำแหน่งหลักที่สามารถใส่ JavaScript ได้ใน HTML
- Internal JavaScript (เขียนภายในไฟล์ HTML)
- External JavaScript (แยกไฟล์ JavaScript ออกมา)
- In-line JavaScript (เขียนใน Attribute ของ HTML Tag)
1. Internal JavaScript (ภายในไฟล์ HTML)
การเขียนโค้ด JavaScript ภายในไฟล์ HTML สามารถทำได้โดยวางโค้ดภายในแท็ก <script>
โดยทั่วไปนิยมวางไว้ที่ส่วน <head>
หรือท้าย <body>
ของเอกสาร HTML
ตัวอย่างการใส่ใน <head>
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script>
document.write("Hello from the Head section!");
</script>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
ตัวอย่างการใส่ท้าย <body>
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<script>
document.write("Hello from the Body section!");
</script>
</body>
</html>
เหตุผลที่วางไว้ท้าย <body>
- การวางโค้ดท้าย
<body>
ช่วยให้หน้าเว็บโหลด HTML ก่อน แล้วจึงรัน JavaScript เพื่อไม่ให้มีการหน่วงในการแสดงผลหน้าเว็บ
2. External JavaScript (แยกไฟล์ JavaScript)
การแยก JavaScript ออกมาเป็นไฟล์ .js ช่วยให้โค้ดสะอาด และการบำรุงรักษาง่าย นอกจากนี้ยังช่วยลดการทำงานซ้ำในหน้าเว็บหลายหน้า โดยการนำไฟล์เดียวมาใช้งานได้หลายหน้า
ขั้นตอนการใช้งาน
- สร้างไฟล์ JavaScript (เช่น
myscript.js
) - ในไฟล์ HTML ให้ลิงก์ไปยังไฟล์ JavaScript โดยใช้
<script src="path/to/myscript.js"></script>
ตัวอย่างไฟล์ HTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="myscript.js"></script>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
ตัวอย่างไฟล์ myscript.js
document.write("Hello from external JavaScript!");
ข้อดีของการใช้ External JavaScript:
- ช่วยให้โค้ดแยกเป็นระเบียบ
- ลดขนาดไฟล์ HTML
- ใช้งานไฟล์เดียวในหลายๆ หน้า
3. In-line JavaScript (เขียนใน Attribute ของ HTML Tag)
การเขียน JavaScript ในแบบ In-line มักใช้ในกรณีที่ต้องการผูกเหตุการณ์ (event) กับองค์ประกอบ HTML บางตัว ตัวอย่างเช่น เมื่อคลิกปุ่มแล้วให้แสดงข้อความ
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<button onclick="alert('Button Clicked!')">Click Me</button>
</body>
</html>
ข้อดี
- เขียนง่ายในกรณีที่สั้นและเรียบง่าย
- ใช้สำหรับจัดการกับเหตุการณ์เฉพาะเจาะจง
ข้อเสีย
- ไม่เหมาะกับโค้ดยาวๆ
- อาจทำให้ HTML ดูยุ่งเหยิง
สรุป
การเลือกตำแหน่งในการใส่ JavaScript ขึ้นอยู่กับความต้องการและโครงสร้างของเว็บไซต์
- Internal JavaScript เขียนโค้ดในหน้า HTML โดยตรง มักวางไว้ใน
<head>
หรือท้าย<body>
- External JavaScript แยกโค้ดออกมาเป็นไฟล์ .js เพื่อใช้ซ้ำและจัดการง่ายขึ้น
- In-line JavaScript ใช้สำหรับผูกเหตุการณ์กับองค์ประกอบเฉพาะ
การเลือกวิธีใส่ JavaScript อย่างถูกต้องจะช่วยให้การจัดการโค้ดง่ายขึ้นม๊ากมาก