รูปแบบการเขียนjavascriptร่วมกับhtml

#พื้นฐานการเขียนเว็ปไซต์

#javascript

การเขียน 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) หลีกเลี่ยงถ้าทำได้, ใช้สำหรับฟังก์ชันที่ง่ายที่สุดเท่านั้น