จาวาสคริปต์อยู่ที่ไหน

สารบัญ

    แสดงสารบัญ

แท็ก <script>

ใน HTML โค้ด JavaScript จะถูกแทรกระหว่างแท็ก <script> และ </script>

ตัวอย่าง

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

ตัวอย่าง JavaScript เก่าอาจใช้แอตทริบิวต์ประเภท: <script; type="text/javascript">.
ไม่จำเป็นต้องมีแอตทริบิวต์ประเภท JavaScript เป็นภาษาสคริปต์เริ่มต้นใน HTML

ฟังก์ชั่นและกิจกรรม JavaScript

function JavaScript คือบล็อกของโค้ด JavaScript ที่สามารถดำเนินการได้เมื่อ "เรียก" เพื่อ

ตัวอย่างเช่น สามารถเรียกใช้ฟังก์ชันได้เมื่อมีเหตุการณ์เกิดขึ้น เช่น เมื่อผู้ใช้คลิกปุ่ม

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับฟังก์ชันและเหตุการณ์ต่างๆ ในบทต่อๆ ไป

JavaScript ใน <head> หรือ <body>

คุณสามารถวางสคริปต์จำนวนเท่าใดก็ได้ในเอกสาร HTML

สคริปต์สามารถวางไว้ในส่วน <body> หรือในส่วน <head> ของหน้า HTML หรือทั้งสองอย่าง

จาวาสคริปต์ใน <หัว>

ในตัวอย่างนี้ function ของ JavaScript จะถูกวางไว้ในส่วน <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>

ลองด้วยตัวคุณเอง →

<!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>

จาวาสคริปต์ใน <body>

ในตัวอย่างนี้ function ของ JavaScript จะถูกวางไว้ในส่วน <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>

ลองด้วยตัวคุณเอง →

<!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> จะช่วยปรับปรุงการแสดงผล ความเร็ว เนื่องจากการตีความสคริปต์จะทำให้การแสดงผลช้าลง

จาวาสคริปต์ภายนอก

สคริปต์ยังสามารถวางในไฟล์ภายนอก:

ไฟล์ภายนอก: myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

สคริปต์ภายนอกสามารถใช้งานได้จริงเมื่อใช้โค้ดเดียวกันในหน้าเว็บต่างๆ จำนวนมาก

ไฟล์ JavaScript มีนามสกุลไฟล์ .js

หากต้องการใช้สคริปต์ภายนอก ให้ใส่ชื่อของไฟล์สคริปต์ในแอตทริบิวต์ src (แหล่งที่มา) ของ แท็ก <script>:

ตัวอย่าง

<script src="myScript.js"></script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

คุณสามารถวางการอ้างอิงสคริปต์ภายนอกใน <head> หรือ <body> ตามที่คุณต้องการ

สคริปต์จะทำงานเหมือนกับว่าอยู่ในตำแหน่งที่มีแท็ก <script> อยู่ทุกประการ

สคริปต์ภายนอกต้องไม่มีแท็ก <script>

ข้อดีของจาวาสคริปต์ภายนอก

การวางสคริปต์ในไฟล์ภายนอกมีข้อดีบางประการ:

  • มันแยก 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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click Me</button>

<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="https://www.w3schools.com/js/myScript.js"></script>

</body>
</html>

ตัวอย่างนี้ใช้ เส้นทางของไฟล์ เพื่อเชื่อมโยงไปยัง myScript.js:

ตัวอย่าง

<script src="/js/myScript.js"></script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="/js/myScript.js"></script>

</body>
</html>

ตัวอย่างนี้ไม่ใช้เส้นทางเพื่อเชื่อมโยงไปยัง myScript.js:

ตัวอย่าง

<script src="myScript.js"></script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางของไฟล์ได้ในบท HTML เส้นทางไฟล์