JavaScript ใช้ใน HTML ผ่าน <script>...</script> หรือ External file อีกวิธีคือ Inline JavaScript เขียนโค้ด JS โดยตรงใน HTML event attributes
โดยปกติ HTML event attributes เรียกฟังก์ชันที่ประกาศใน script tags แต่มองเขียนโค้ด JS ตรงใน onClick ได้
ตัวอย่าง
<p>
<a href="#" onClick="alert('Hello World');">Click</a>
</p>
⚠️ ข้อควรระวังสำคัญ
การเพิ่ม Inline JavaScript ไม่ถือเป็น good practice ตามมาตรฐานการเขียนโค้ด และไม่ควรทำตาม
เหตุผลที่ไม่ควรใช้ Inline JS
- Separation of Concerns: ผสม HTML (โครงสร้าง) กับ JavaScript (พฤติกรรม) ทำให้บำรุงรักษายาก
- Content Security Policy (CSP): บล็อก inline scripts ได้ เพื่อความปลอดภัย
- Debugging ยาก: ไม่เจอ line number ใน console
- ไม่สามารถ reuse: โค้ดซ้ำหากใช้หลายที่
- XSS Risk: เพิ่มโอกาส Cross-Site Scripting attacks
แนวทางที่ดีกว่า
<!-- HTML -->
<button id="myBtn">Click</button>
<!-- JavaScript (แยกไฟล์หรือใน script tag) -->
<script>
document.getElementById('myBtn').addEventListener('click', function() {
alert('Hello World');
});
</script>
