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>

Quảng cáo

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:

Quảng cáo

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ó app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

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