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