JavaScript ไปที่ไหน
<script> แท็ก
ใน HTML โค้ด JavaScript จะถูกแทรกระหว่าง<script>
และ</script>
แท็ก
ตัวอย่าง
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
ตัวอย่าง JavaScript แบบเก่าอาจใช้แอตทริบิวต์ประเภท: <script type="text/javascript">
แอตทริบิวต์ type ไม่จำเป็น JavaScript เป็นภาษาสคริปต์เริ่มต้นใน HTML
ฟังก์ชันและเหตุการณ์ของ JavaScript
JavaScript function
คือบล็อกของโค้ด JavaScript ที่สามารถดำเนินการได้เมื่อ "ถูกเรียก" สำหรับ
ตัวอย่างเช่น สามารถเรียกใช้ฟังก์ชันเมื่อมีเหตุการณ์เช่น เมื่อผู้ใช้คลิกปุ่ม
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับฟังก์ชันและกิจกรรมต่างๆ ในบทต่อๆ ไป
JavaScript ใน <head> หรือ <body>
คุณสามารถวางสคริปต์จำนวนเท่าใดก็ได้ในเอกสาร HTML
สคริปต์สามารถวางใน<body>
, หรือ ใน<head>
ส่วนของหน้า HTML หรือทั้งสองอย่าง
JavaScript ใน <head>
ในตัวอย่างนี้ JavaScript function
จะอยู่ใน<head>
ส่วนของหน้า HTML
ฟังก์ชั่นถูกเรียกใช้ (เรียก) เมื่อมีการคลิกปุ่ม:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript ใน <body>
ในตัวอย่างนี้ JavaScript function
จะอยู่ใน<body>
ส่วนของหน้า HTML
ฟังก์ชั่นถูกเรียกใช้ (เรียก) เมื่อมีการคลิกปุ่ม:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<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>
แท็ก:
ตัวอย่าง
<script src="myScript.js"></script>
คุณสามารถวางการอ้างอิงสคริปต์ภายนอกใน<head>
หรือ<body>
ตามที่คุณต้องการ
สคริปต์จะทำงานเหมือนกับว่าอยู่ในตำแหน่งที่<script>
แท็กตั้งอยู่พอดี
สคริปต์ภายนอกไม่สามารถมี<script>
แท็ก
ข้อดีของ JavaScript ภายนอก
การวางสคริปต์ในไฟล์ภายนอกมีข้อดีบางประการ:
- มันแยก HTML และรหัส
- ทำให้อ่านและบำรุงรักษา HTML และ JavaScript ได้ง่ายขึ้น
- ไฟล์ JavaScript ที่แคชไว้สามารถเพิ่มความเร็วในการโหลดหน้าได้
ในการเพิ่มไฟล์สคริปต์หลายไฟล์ในหน้าเดียว - ใช้แท็กสคริปต์หลายรายการ:
ตัวอย่าง
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
ข้อมูลอ้างอิงภายนอก
สคริปต์ภายนอกสามารถอ้างอิงได้ 3 วิธี:
- ด้วย URL แบบเต็ม (ที่อยู่เว็บแบบเต็ม)
- ด้วยเส้นทางของไฟล์ (เช่น /js/)
- ไร้หนทาง
ตัวอย่างนี้ใช้URL แบบเต็มเพื่อลิงก์ไปยัง myScript.js:
ตัวอย่าง
<script src="https://www.w3schools.com/js/myScript.js"></script>
ตัวอย่างนี้ใช้เส้นทางของไฟล์เพื่อเชื่อมโยงไปยัง myScript.js:
ตัวอย่าง
<script src="/js/myScript.js"></script>
ตัวอย่างนี้ไม่ใช้พาธในการลิงก์ไปยัง myScript.js:
ตัวอย่าง
<script src="myScript.js"></script>
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับพา ธของไฟล์ได้ในบทHTML File Paths