รูปแบบการเขียนjavascriptร่วมกับhtml
การเขียน JavaScript (JS) ร่วมกับ HTML สามารถทำได้หลายรูปแบบ ขึ้นอยู่กับความต้องการและความซับซ้อนของโปรเจกต์ นี่คือรูปแบบหลักๆ ที่ใช้กัน:
1. การฝังโค้ดในแท็ก <script> (Internal JS)
คุณสามารถเขียนโค้ด JavaScript โดยตรงภายในไฟล์ HTML เดียวกัน โดยใช้แท็ก <script> โดยทั่วไปจะวางไว้ที่ส่วนท้ายของแท็ก <body> เพื่อให้มั่นใจว่าองค์ประกอบ HTML ทั้งหมดโหลดเสร็จก่อนที่สคริปต์จะเริ่มทำงาน
ตัวอย่าง:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript</title>
</head>
<body>
<h1>การใช้งาน Internal JavaScript</h1>
<button onclick="showAlert()">คลิกที่นี่</button>
<script>
// โค้ด JavaScript อยู่ที่นี่
function showAlert() {
alert("สวัสดี! นี่คือข้อความจาก Internal JavaScript");
}
</script>
</body>
</html>
2. การเชื่อมโยงไฟล์ภายนอก (External JS)
นี่เป็นรูปแบบที่ แนะนำมากที่สุด สำหรับโปรเจกต์ขนาดใหญ่หรือโปรเจกต์ที่มีโค้ด JavaScript มากมาย คุณจะเขียนโค้ด JavaScript ทั้งหมดไว้ในไฟล์แยกต่างหาก (มักจะลงท้ายด้วยนามสกุล .js) แล้วเชื่อมโยงมายังไฟล์ HTML โดยใช้แท็ก <script> พร้อมแอตทริบิวต์ src
ข้อดี:
จัดการง่าย: โค้ด HTML และ JavaScript แยกจากกัน ทำให้บำรุงรักษาและอ่านง่ายขึ้น
นำกลับมาใช้ใหม่ได้: ไฟล์ JS เดียวสามารถใช้ร่วมกับหน้า HTML หลายหน้าได้
ประสิทธิภาพ: เบราว์เซอร์สามารถแคช (Cache) ไฟล์ JS ภายนอกได้ ทำให้โหลดเร็วขึ้นในการเข้าชมครั้งถัดไป
ตัวอย่าง:
ไฟล์ index.html:
HTML
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript</title>
</head>
<body>
<h1>การใช้งาน External JavaScript</h1>
<button id="myButton">คลิกที่นี่</button>
<script src="script.js"></script>
</body>
</html>
ไฟล์ script.js:
JavaScript
// โค้ด JavaScript ภายนอกอยู่ในไฟล์นี้
document.getElementById('myButton').addEventListener('click', function() {
alert("สวัสดี! นี่คือข้อความจาก External JavaScript");
});
3. การเขียนโค้ดในแอตทริบิวต์ HTML (Inline JS)
นี่คือการเขียนโค้ด JavaScript สั้นๆ โดยตรงในแอตทริบิวต์ของแท็ก HTML เช่น onclick, onmouseover, หรือ onchange
ข้อควรระวัง:
ไม่แนะนำ สำหรับโค้ดที่ซับซ้อนหรือโค้ดจำนวนมาก
ทำให้โค้ด อ่านยาก และ บำรุงรักษายาก
ขัดต่อหลักการแยกความรับผิดชอบ (Separation of Concerns)
ตัวอย่าง:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>การใช้งาน Inline JavaScript</h1>
<button onclick="alert('สวัสดีจาก Inline JS!');">คลิ กที่นี่</button>
</body>
</html>
สรุปและแนวทางปฏิบัติที่แนะนำ
รูปแบบ วิธีการ แนะนำสำหรับ
External JS ไฟล์ .js ภายนอก เชื่อมด้วย <script src="ไฟล์.js"></script> ทุกโปรเจกต์ โดยเฉพาะโปรเจกต์ขนาดใหญ่ (👍)
Internal JS โค้ดในแท็ก <script> ภายในไฟล์ HTML โค้ดสั้นๆ หรือการทดลองง่ายๆ
Inline JS โค้ดในแอตทริบิวต์ HTML (เช่น onclick) หลีกเลี่ยงถ้าทำได้, ใช้สำหรับฟังก์ชันที่ง่ายที่สุดเท่านั้น
นอกจาก 3 รูปแบบหลัก (Inline / Internal / External) ที่หลายคนเจอเวลาเริ่มเขียน html javascript แล้ว อีกเรื่องที่ทำให้ “โค้ดไม่ทำงาน” บ่อยมากคือเรื่องตำแหน่งการวาง <script> และการรอให้ DOM โหลดเสร็จก่อนค่ะ 1) วาง <script> ไว้ตรงไหนดีถึงปลอดภัย? - ถ้าวางไฟล์ External JS ไว้ท้าย </body> (ก่อนปิดแท็ก) ส่วนใหญ่จะเวิร์กสุด เพราะ HTML โหลดปุ่ม/องค์ประกอบต่างๆ เสร็จก่อน แล้วค่อยรัน JS - ถ้าจำเป็นต้องวางไว้ใน <head> แนะนำใส่ attribute defer เช่น <script src="script.js" defer></script> ข้อดีคือไฟล์ JS จะโหลดไปพร้อมๆ กับ HTML แต่จะรันหลังจาก DOM สร้างเสร็จ ทำให้ document.getElementById(...) หา element เจอ 2) ต่างกันยังไงระหว่าง defer กับ async? - defer: โหลดระหว่าง parse HTML และ “รันหลัง DOM พร้อม” (เหมาะกับสคริปต์ที่ต้องจับปุ่ม/ผูก event) - async: โหลดและรันทันทีที่โหลดเสร็จ อาจรันก่อน DOM พร้อม (เหมาะกับสคริปต์ที่ไม่พึ่ง element เช่น analytics บางแบบ) 3) แนะนำเลิกใช้ Inline JS แล้วผูก event ในไฟล์แทน Inline แบบ onclick="..." ใช้ง่ายก็จริง แต่พอโค้ดยาวขึ้นจะดูแลยากมาก ฉันมักเปลี่ยนเป็นใส่ id หรือ class แล้วไป addEventListener ใน JS เช่น HTML: <button id="myButton">คลิกที่นี่</button> JS: document.getElementById('myButton').addEventListener('click', showAlert); function showAlert(){ alert('สวัสดี!'); } แบบนี้แยกหน้าที่ชัด (HTML จัดโครง, JS จัดพฤติกรรม) 4) ถ้าใช้ Internal JS แนะนำเขียนให้เป็นระเบียบ ถ้าอยากลองอะไรเร็วๆ ในไฟล์เดียว ให้ใส่ <script> ไว้ท้าย body และตั้งชื่อฟังก์ชัน/คอมเมนต์ให้ชัด จะอ่านง่ายกว่าเขียนปนกับ onclick เยอะๆ 5) เช็กลิสต์เวลา JS ไม่ทำงาน (เจอบ่อยมาก) - สะกด id ให้ตรง (myButton vs mybutton) - ลืมใส่ # ตอน querySelector เช่น document.querySelector('#myButton') - วาง <script> ไว้ใน head แต่ไม่ใช้ defer - เปิด Console แล้วมี error แต่ไม่ได้ดู (กด F12 > Console) สรุปส่วนตัว: ถ้าเป็นงานจริงหรือทำหลายหน้า ฉันเลือก External JS เป็นหลัก แล้วใช้ defer หรือวางท้าย </body> เพื่อให้การใช้งาน html javascript ลื่นและดูแลง่ายกว่าในระยะยาวค่ะ
🥰🥰