JavaScript - ตำแหน่งในไฟล์ HTML

มีความยืดหยุ่นในการรวมโค้ด JavaScript ที่ใดก็ได้ในเอกสาร HTML อย่างไรก็ตามวิธีที่ต้องการมากที่สุดในการรวม JavaScript ในไฟล์ HTML มีดังนี้ -

สคริปต์ในส่วน <head> ... </head>
สคริปต์ในส่วน <body> ... </body>
สคริปต์ในส่วน <body> ... </body> และ <head> ... </head>
สคริปต์ในไฟล์ภายนอกแล้วรวมไว้ในส่วน <head> ... </head>

ในส่วนต่อไปนี้เราจะดูว่าเราสามารถวาง JavaScript ในไฟล์ HTML ได้อย่างไร

JavaScript ในส่วน <head> ... </head>

หากคุณต้องการให้สคริปต์ทำงานในบางเหตุการณ์เช่นเมื่อผู้ใช้คลิกที่ใดที่หนึ่งคุณจะวางสคริปต์นั้นไว้ในส่วนหัวดังนี้ -

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

JavaScript ในส่วน <body> ... </body>

หากคุณต้องการให้สคริปต์ทำงานขณะที่เพจโหลดเพื่อให้สคริปต์สร้างเนื้อหาในเพจสคริปต์จะไปอยู่ในส่วน <body> ของเอกสาร ในกรณีนี้คุณจะไม่มีฟังก์ชันที่กำหนดโดยใช้ JavaScript ดูรหัสต่อไปนี้

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

JavaScript ในส่วน <body> และ <head>

คุณสามารถใส่โค้ด JavaScript ของคุณในส่วน <head> และ <body> ได้ดังนี้ -

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

JavaScript ในไฟล์ภายนอก

เมื่อคุณเริ่มทำงานกับ JavaScript อย่างครอบคลุมมากขึ้นคุณจะพบว่ามีหลายกรณีที่คุณนำโค้ด JavaScript ที่เหมือนกันมาใช้ซ้ำในหลาย ๆ หน้าของไซต์

คุณไม่ได้ถูก จำกัด ให้ดูแลรหัสที่เหมือนกันในไฟล์ HTML หลายไฟล์ script แท็กมีกลไกเพื่อให้คุณสามารถจัดเก็บ JavaScript ในไฟล์ภายนอกจากนั้นรวมไว้ในไฟล์ HTML ของคุณ

นี่คือตัวอย่างเพื่อแสดงวิธีการรวมไฟล์ JavaScript ภายนอกในโค้ด HTML ของคุณโดยใช้ script แท็กและ src แอตทริบิวต์

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

ในการใช้ JavaScript จากแหล่งที่มาของไฟล์ภายนอกคุณต้องเขียนซอร์สโค้ด JavaScript ทั้งหมดของคุณในไฟล์ข้อความธรรมดาที่มีนามสกุล ".js" จากนั้นรวมไฟล์ดังที่แสดงด้านบน

ตัวอย่างเช่นคุณสามารถเก็บเนื้อหาต่อไปนี้ไว้ได้ filename.js จากนั้นคุณสามารถใช้ไฟล์ sayHello ในไฟล์ HTML ของคุณหลังจากรวมไฟล์ filename.js

function sayHello() {
   alert("Hello World")
}