JavaScript - Vị trí trong tệp HTML

Có một sự linh hoạt được đưa ra để đưa mã JavaScript vào bất kỳ đâu trong tài liệu HTML. Tuy nhiên, các cách ưu tiên nhất để đưa JavaScript vào tệp HTML như sau:

Tập lệnh trong phần <head> ... </head>.
Tập lệnh trong phần <body> ... </body>.
Tập lệnh trong phần <body> ... </body> và <head> ... </head>.
Tập lệnh trong một tệp bên ngoài và sau đó đưa vào phần <head> ... </head>.

Trong phần sau, chúng ta sẽ xem cách chúng ta có thể đặt JavaScript trong tệp HTML theo những cách khác nhau.

JavaScript trong phần <head> ... </head>

Nếu bạn muốn có một tập lệnh chạy trên một số sự kiện, chẳng hạn như khi người dùng nhấp vào một nơi nào đó, thì bạn sẽ đặt tập lệnh đó vào đầu như sau:

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

Đoạn mã này sẽ tạo ra các kết quả sau:

JavaScript trong phần <body> ... </body>

Nếu bạn cần một tập lệnh để chạy khi trang tải để tập lệnh tạo nội dung trong trang, thì tập lệnh sẽ nằm trong phần <body> của tài liệu. Trong trường hợp này, bạn sẽ không có bất kỳ hàm nào được xác định bằng JavaScript. Hãy xem đoạn mã sau.

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

Đoạn mã này sẽ tạo ra các kết quả sau:

JavaScript trong phần <body> và <head>

Bạn có thể đặt toàn bộ mã JavaScript của mình trong phần <head> và <body> như sau:

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

Đoạn mã này sẽ tạo ra kết quả sau:

JavaScript trong tệp bên ngoài

Khi bạn bắt đầu làm việc rộng rãi hơn với JavaScript, bạn sẽ có khả năng nhận thấy rằng có những trường hợp bạn đang sử dụng lại mã JavaScript giống hệt nhau trên nhiều trang của một trang web.

Bạn không bị hạn chế để duy trì mã giống hệt nhau trong nhiều tệp HTML. Cácscript thẻ cung cấp cơ chế cho phép bạn lưu trữ JavaScript trong một tệp bên ngoài và sau đó đưa nó vào các tệp HTML của bạn.

Đây là một ví dụ cho thấy cách bạn có thể bao gồm một tệp JavaScript bên ngoài trong mã HTML của mình bằng cách sử dụng script thẻ và nó src thuộc tính.

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

Để sử dụng JavaScript từ nguồn tệp bên ngoài, bạn cần viết tất cả mã nguồn JavaScript của mình trong một tệp văn bản đơn giản có phần mở rộng là ".js" và sau đó bao gồm tệp đó như được hiển thị ở trên.

Ví dụ: bạn có thể giữ nội dung sau trong filename.js tập tin và sau đó bạn có thể sử dụng sayHello trong tệp HTML của bạn sau khi bao gồm tệp filename.js.

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