JavaScript
Fundamentals
JavaScript in HTML
เรียนรู้วิธีใส่ JavaScript ในหน้า HTML ด้วย inline script tag และการแยกไฟล์ .js ภายนอก พร้อมแนวทางวาง script ให้เหมาะกับผู้เริ่มต้น
1. JavaScript เข้าไปทำงานใน HTML ได้อย่างไร
HTML คือโครงสร้างของหน้าเว็บ เช่น heading, paragraph, button และ form ส่วน JavaScript คือโค้ดที่เพิ่มพฤติกรรมให้หน้าเว็บ เช่น แสดงข้อความใน console, เปลี่ยนข้อมูล, หรือทำงานเมื่อผู้ใช้กดปุ่ม เมื่อ browser โหลดหน้า HTML แล้วเจอ tag `<script>` browser จะอ่าน JavaScript ในจุดนั้นและรันคำสั่งตามลำดับ
ตัวอย่างนี้มีปุ่มอยู่ใน HTML และมี JavaScript ที่แสดงข้อความใน console เมื่อ browser อ่านถึง script
<button>เริ่มเรียน JavaScript</button>
<script>
console.log("หน้า HTML โหลดแล้ว");
console.log("JavaScript เริ่มทำงานจาก script tag");
</script>ในตัวอย่างนี้ JavaScript ยังไม่ได้เปลี่ยนปุ่มโดยตรง แต่ช่วยให้เห็นก่อนว่าโค้ด JavaScript สามารถอยู่ในเอกสาร HTML และรันตอน browser โหลดหน้าได้
2. Inline script tag
Inline script คือการเขียน JavaScript ไว้ข้างใน tag `<script>` โดยตรงในไฟล์ HTML วิธีนี้เหมาะกับการทดลองเร็ว ๆ หรือ demo สั้น ๆ เพราะเห็น HTML และ JavaScript ในที่เดียวกัน
<h1>ร้านกาแฟ</h1>
<p>เปิดทุกวัน 08:00 - 18:00</p>
<script>
console.log("ยินดีต้อนรับสู่ร้านกาแฟ");
console.log("หน้าเว็บพร้อมใช้งาน");
</script>- เหมาะกับตัวอย่างสั้น ๆ ที่ต้องการลองทันที
- อ่านง่ายเมื่อโค้ดยังมีไม่กี่บรรทัด
- ไม่เหมาะกับโปรเจกต์จริงที่ JavaScript เริ่มยาวขึ้น
- ถ้ามีหลายหน้าแล้วใช้โค้ดชุดเดียวกัน การเขียน inline จะทำให้ต้องคัดลอกซ้ำหลายไฟล์
3. Inline event handler
Inline event handler คือการเขียน JavaScript ไว้ใน attribute ของ HTML โดยตรง เช่น `onclick` เพื่อให้โค้ดทำงานเมื่อเกิดเหตุการณ์บางอย่าง คำว่า event หมายถึงเหตุการณ์ที่เกิดขึ้นกับหน้าเว็บ เช่น ผู้ใช้คลิกปุ่ม พิมพ์ข้อความ หรือส่งฟอร์ม ในตัวอย่างนี้เราจะใช้แค่ `onclick` เพื่อ log ข้อความง่าย ๆ ก่อน
เมื่อผู้ใช้กดปุ่ม browser จะรัน JavaScript ที่อยู่ใน onclick แล้วแสดงข้อความใน console
<button onclick="console.log('hiii')">ดูเมนูวันนี้</button>รูปแบบนี้ต่างจาก inline script tag เพราะโค้ดไม่ได้อยู่ใน `<script>` แต่ฝังอยู่ใน attribute ของ element โดยตรง วิธีนี้เข้าใจง่ายสำหรับตัวอย่างสั้นมาก แต่ถ้าโค้ดเริ่มยาวหรือมีหลายปุ่ม ควรย้าย JavaScript ไปไว้ในไฟล์ภายนอกเพื่อให้อ่านและดูแลง่ายขึ้น
| รูปแบบ | ตัวอย่าง | เหมาะกับอะไร |
|---|---|---|
| Inline event handler | <button onclick="console.log('hiii')">ดูเมนูวันนี้</button> | demo สั้น ๆ ที่อยากให้โค้ดทำงานตอนเกิด event |
| Inline script tag | <script>console.log("โหลดหน้าแล้ว")</script> | โค้ดสั้น ๆ ที่รันตอน browser อ่านถึง script |
4. External JavaScript file
External JavaScript file คือการแยก JavaScript ไปไว้ในไฟล์ `.js` เช่น `app.js` แล้วใช้ `<script src="app.js"></script>` เพื่อเชื่อมไฟล์นั้นเข้ากับ HTML วิธีนี้เป็นรูปแบบที่ใช้บ่อยในโปรเจกต์จริง เพราะ HTML รับผิดชอบโครงหน้า ส่วน JavaScript รับผิดชอบพฤติกรรมของหน้า
<h1>Todo App</h1>
<button>เพิ่มงานใหม่</button>
<script src="app.js"></script>console.log("โหลดไฟล์ app.js แล้ว");
console.log("พร้อมเพิ่ม behavior ให้หน้าเว็บ");- อ่านง่ายขึ้น — HTML ไม่ปนกับ JavaScript จำนวนมาก
- ดูแลง่ายขึ้น — แก้ behavior ในไฟล์ JavaScript ไฟล์เดียว
- ใช้ซ้ำง่ายขึ้น — หลายหน้า HTML สามารถเชื่อมไฟล์ `.js` ชุดเดียวกันได้
5. วาง `<script>` ตรงไหน
สำหรับผู้เริ่มต้น วิธีที่ปลอดภัยและเข้าใจง่ายคือวาง `<script>` ไว้ก่อน `</body>` เพราะ browser จะสร้าง HTML ส่วนใหญ่เสร็จก่อน แล้วค่อยรัน JavaScript ถ้าวาง script ไว้ใน `<head>` โดยไม่มีการจัดการเพิ่มเติม JavaScript อาจทำงานก่อน element บางตัวถูกสร้าง ทำให้หา element ไม่เจอในบท DOM ภายหลัง
<!doctype html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<title>JavaScript in HTML</title>
</head>
<body>
<h1>หน้าแรก</h1>
<button>เริ่มใช้งาน</button>
<script src="app.js"></script>
</body>
</html>ในโปรเจกต์จริงจะเจอ `defer` ได้บ่อย เช่น `<script src="app.js" defer></script>` เพื่อบอกให้ browser โหลดไฟล์ JavaScript ได้ แต่รันหลังจากอ่าน HTML แล้ว สำหรับบทนี้ให้จำก่อนว่า "วางก่อน `</body>`" เป็นจุดเริ่มต้นที่ชัดและปลอดภัย
6. ข้อผิดพลาดที่เจอบ่อย
| ข้อผิดพลาด | ผลที่เกิดขึ้น | วิธีแก้ |
|---|---|---|
| path ไฟล์ผิด เช่น `src="ap.js"` แต่ไฟล์จริงชื่อ `app.js` | browser โหลดไฟล์ JavaScript ไม่เจอ | ตรวจชื่อไฟล์ ตำแหน่งโฟลเดอร์ และตัวพิมพ์เล็ก-ใหญ่ให้ตรงกัน |
| ลืมปิด `</script>` | HTML หลังจากนั้นอาจถูกมองเป็น JavaScript ทำให้หน้าเพี้ยนหรือ error | ปิด tag ให้ครบทุกครั้ง |
| ใช้ `src` แล้วใส่โค้ด JavaScript ข้างใน tag เดียวกัน | ทำให้สับสนว่าโค้ดควรมาจากไฟล์นอกหรือข้างใน HTML | เลือกอย่างใดอย่างหนึ่ง: inline script หรือ external file |
| ใส่โค้ดยาว ๆ ใน `onclick` | HTML อ่านยาก และแก้ไขพฤติกรรมของปุ่มหลายจุดได้ยาก | ใช้ `onclick` เฉพาะ demo สั้น ๆ แล้วค่อยแยก JavaScript ไปไว้ในไฟล์ `.js` |
| เรียกใช้ element ก่อน HTML ถูกโหลด | JavaScript หา element ไม่เจอ | เริ่มต้นด้วยการวาง `<script>` ก่อน `</body>` |
ถ้าใช้ external file ให้ปล่อยด้านใน script tag ว่างไว้ แล้วเขียนโค้ดในไฟล์ .js แทน
<!-- ไม่แนะนำ -->
<script src="app.js">
console.log("โค้ดนี้ควรย้ายไปอยู่ใน app.js");
</script>
<!-- แนะนำ -->
<script src="app.js"></script>