JavaScript สามารถวางไว้ใน <body> และ <head> ในส่วนของหน้าเว็บ HTML
<script> แท็ก
ใน HTML, โค้ด JavaScript จะต้องแทรกระหว่าง <script> และ </script> แท็ก
ตัวอย่าง
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
ตัวอย่างเก่าอาจใช้แอตทริบิวต์ประเภท: <script type="text/javascript">
ประเภทแอตทริบิวต์นี้ไม่จำเป็น JavaScript เป็นภาษาสคริปต์เริ่มต้นในรูปแบบ HTML
ฟังก์ชั่น JavaScript และเหตุการณ์
จาวาสคริปต์ function เป็นบล็อคของโค้ด JavaScript ที่สามารถดำเนินการเมื่อ "ถามว่า" สำหรับ
ยกตัวอย่างเช่นฟังก์ชั่นที่สามารถดำเนินการเมื่อมีเหตุการณ์เกิดขึ้นเช่นเมื่อผู้ใช้คลิกปุ่ม
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับฟังก์ชั่นและเหตุการณ์ในบทต่อ
JavaScript ใน <head> หรือ <body>
คุณสามารถวางจำนวนสคริปต์ใด ๆ ในเอกสาร HTML
สคริปที่สามารถวางใน <body> หรือใน <head> ส่วนของหน้าเว็บ HTML หรือทั้งใน
การรักษารหัสทั้งหมดในที่เดียวอยู่เสมอเป็นนิสัยที่ดี
JavaScript ใน <head>
ในตัวอย่างนี้ฟังก์ชัน JavaScript จะอยู่ใน <head> ส่วนของหน้าเว็บ HTML
ฟังก์ชั่นถูกเรียก (เรียกว่า) เมื่อมีการคลิกปุ่ม:
ตัวอย่าง
<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
ลองตัวเอง» JavaScript ใน <body>
ในตัวอย่างนี้ฟังก์ชัน JavaScript จะอยู่ใน <body> ส่วนของหน้าเว็บ HTML
ฟังก์ชั่นถูกเรียก (เรียกว่า) เมื่อมีการคลิกปุ่ม:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
ลองตัวเอง» มันเป็นความคิดที่ดีที่จะวางสคริปต์ที่ด้านล่างของ <body> องค์ประกอบ
นี้สามารถปรับปรุงการโหลดหน้าเพราะสคริปต์รวบรวมสามารถชะลอการแสดงผล
JavaScript ภายนอก
สคริปยังสามารถอยู่ในไฟล์ภายนอก
MyScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
สคริปต์ภายนอกมีการปฏิบัติเมื่อรหัสเดียวกันถูกนำมาใช้ในหลายหน้าเว็บที่แตกต่างกัน
ไฟล์ JavaScript มีนามสกุลไฟล์ .js
จะใช้สคริปต์ภายนอกใส่ชื่อของไฟล์สคริปต์ในคุณลักษณะ src (ต้นฉบับ) ของ <script> แท็ก:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html> ลองตัวเอง» คุณสามารถวางการอ้างอิงภายนอกสคริปต์ใน <head> หรือ <body> เท่าที่คุณต้องการ
สคริปต์จะทำตัวราวกับว่ามันอยู่ตรงที่ <script> แท็กตั้งอยู่
สคริปต์ภายนอกไม่สามารถมี <script> แท็ก
ข้อดีภายนอก JavaScript
วาง JavaScripts ในแฟ้มภายนอกมีข้อดีบางอย่าง
- มันแยกรหัส HTML และ
- มันทำให้ HTML และ JavaScript ง่ายต่อการอ่านและการบำรุงรักษา
- ไฟล์ JavaScript Cached สามารถเพิ่มความเร็วในการโหลดหน้าเว็บ