Vị trí JavaScript trong HTML File

Có một sự linh động trong việc cung cấp JavaScript code bất cứ đâu trong một tài liệu HTML. Tuy nhiên, các cách được ưu tiên nhất để bao gồm JavaScript trong một HTML file là:

Script trong khu vực <head>...</head>
Script trong khu vực <body>...</body>
Script trong khu vực <body>...</body> và <head>...</head>.
Script trong file ngoại vi và sau đó bao gồm trong khu vực <head>...</head>

Trong phần tới, chúng ta sẽ thấy cách chúng ta có thể đặt JavaScript trong một HTML file theo các cách khác nhau:

JavaScript trong khu vực <head>...</head>

Nếu bạn muốn có một script chạy trên một số sự kiện, như khi người sử dụng vào nơi nào đó, thì khi đó bạn sẽ đặt script đó trong Head như sau:

<html>

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

Code trên sẽ cho kết quả sau:

JavaScript trong khu vực <body>...</body>

Nếu bạn cần một script để chạy khi trang tải để mà script này tạo nội dung trong trang, thì khi đó, script nên là một 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 định nghĩa bởi sử dụng JavaScript. Bạn xem code sau:

<html>

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

Code này sẽ cho kết quả sau:

JavaScript trong khu vực <body> và <head>

Bạn có thể đặt JavaScript code trong khu vực <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="Xin chao!" />
      
   </body>
</html>

Code trên sẽ cho kết quả sau:

JavaScript trong file ngoại vi

Khi bạn bắt đầu làm việc rộng rãi hơn với JavaScript, bạn sẽ tìm thấy rằng có các trường hợp bạn đang sử dụng lại JavaScript code đồng nhất trên nhiều trang của một site.

Bạn không bị giới hạn để duy trì code đồng nhất trong nhiều HTML file. Thẻ script cung cấp một kỹ thuật cho phép bạn lưu JavaScript trong một file ngoại vi và sau đó bao gồm nó trong các HTML file của bạn.

Dưới đây là một ví dụ để chỉ cách bạn có thể bao gồm một JavaScript file ngoại vi trong HTML code bởi sử dụng thẻ script và thuộc tính src của nó.

<html>

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

Để sử dụng JavaScript từ một nguồn file ngoại vi, bạn cần viết tất cả code nguồn JavaScript của bạn trong một file văn bản đơn với đuôi mở rộng ".js" và sau đó bao gồm file đó như trên.

Ví dụ, bạn có thể giữ nội dung sau trong filename.js và sau đó bạn có thể sử dụng hàm sayHello trong HTML file sau khi bao gồm filename.js này.

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

Các bài học JavaScript khác tại AZCode: