การเรียกใช้งาน JavaScript

ในการเขียนโค้ด JavaScript สิ่งที่สำคัญคือการเลือกตำแหน่งที่เหมาะสมในการวางโค้ด เพื่อให้สคริปต์ทำงานตามที่ต้องการ ในบทนี้เราจะอธิบายถึง 3 ตำแหน่งหลักที่สามารถใส่ JavaScript ได้ใน HTML

  1. Internal JavaScript (เขียนภายในไฟล์ HTML)
  2. External JavaScript (แยกไฟล์ JavaScript ออกมา)
  3. 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 ช่วยให้โค้ดสะอาด และการบำรุงรักษาง่าย นอกจากนี้ยังช่วยลดการทำงานซ้ำในหน้าเว็บหลายหน้า โดยการนำไฟล์เดียวมาใช้งานได้หลายหน้า

ขั้นตอนการใช้งาน

  1. สร้างไฟล์ JavaScript (เช่น myscript.js)
  2. ในไฟล์ 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 ขึ้นอยู่กับความต้องการและโครงสร้างของเว็บไซต์

  1. Internal JavaScript เขียนโค้ดในหน้า HTML โดยตรง มักวางไว้ใน <head> หรือท้าย <body>
  2. External JavaScript แยกโค้ดออกมาเป็นไฟล์ .js เพื่อใช้ซ้ำและจัดการง่ายขึ้น
  3. In-line JavaScript ใช้สำหรับผูกเหตุการณ์กับองค์ประกอบเฉพาะ

การเลือกวิธีใส่ JavaScript อย่างถูกต้องจะช่วยให้การจัดการโค้ดง่ายขึ้นม๊ากมาก

Leave a Reply