Hướng dẫn chèn Javascript vào một trang HTML | Series Javascript căn bản | Bài 3

Chào mừng các bạn đến với bài giảng tiếp theo của series Javascript căn bản!

Trong bài giảng trước ta đã tìm hiểu về cú pháp tổng quát và trình tự xử lý của Javascript. Tiếp tục với quá trình từng bước tìm hiểu những nội dung căn bản nhất của Javascript, trong bài giảng này, ta sẽ tìm hiểu cách để chèn Javascript vào HTML để khiến nó hoạt động.

Cùng bắt đầu thôi!

Phương thức hoạt động của Javascript

Đối với Client-side Javascript (đã trình bày ở bài 1), các đoạn mã Javascript không thể hoạt động độc lập mà cần thông qua một trang HTML. Nghĩa là nếu bạn có một tập tin chỉ chứa code Javascript, bạn không thể khiến nó hoạt động bằng cách mở trực tiếp tập tin này, mà thay vào đó, bạn cần chèn nó vào một trang HTML. Thông qua HTML, các đoạn mã Javascript sẽ được xử lý bằng trình duyệt web.

Đối với Server-side Javascript, hoccode.org sẽ trình bày phương thức hoạt động của nó trong một series bài giảng khác.

Các phương pháp chèn Javascript vào HTML

Tương tự như CSS, Có 3 phương pháp để bạn có thể chèn Javascript vào một trang HTML: External Javascript, Internal Javascript và Inline Javascript.

External Javascript

External Javascript là phương pháp mà trong đó, các đoạn code Javascript sẽ được lưu vào một tập tin có phần mở rộng là .js và kết nối với trang HTML thông qua phần tử thẻ <script></script>.

Ví dụ, mình có 2 file lần lượt là home.htmlmy-scripts.js được lưu chung một folder, và mình có thể dùng phương pháp External Javascript để chèn my-scripts.js vào home.html như sau:

my-scripts.js home.html
document.addEventListener("DOMContentLoaded", function(event) { 
  alert('External Javascript đã hoạt động');
});
<html lang="vi">
   <head>
   </head>
   <body>
      ....
      <script type="text/javascript" src="my-scripts.js"></script>
   <body>
</html>

Qua ví dụ trên bạn có thể thấy được, URL của file my-scripts.js chính là giá trị của thuộc tính src thuộc phần tử thẻ <script></script>.

Lưu ý:

Nội dung lưu ý Demo
Bạn có thể chèn nhiều file External Javascript vào chung 1 trang HTML ...
<body>

   ....
   <script type="text/javascript" src="my-scripts.js"></script>
<body>
...
Bạn có thể chèn External Javascript ở bất kỳ vị trí nào trong trang HTML mà bạn muốn, kể cả trong phần tử thẻ <head></head> ...
<head>

   ....
   <script type="text/javascript" src="my-scripts.js"></script>
<head>
<body>
   ...
</body>
...
Ưu và nhược điểm của phương pháp External Javascript
Ưu điểm Nhược điểm

Bạn có thể viết một kịch bản Javascript dài và phức tạp.

Bạn có thể viết một kịch bản Javascript với số lượng lớn dòng code trên tập tin .js

Việc tách biệt nơi lưu trữ code Javascript và HTML giúp code của bạn trở nên gọn gàng hơn.

Tận dụng cơ chế caching của trình duyệt để giúp trang HTML có tốc độ load và render nhanh hơn.

Code Javascript có thể xuất ra dạng nén (.min.js) để có dung lượng nhỏ nhất có thể, từ đó cải thiện tốc độ load trang ở hầu hết các website hiện nay.

Tốn nhiều thao tác & bước thực hiện nhất

Nếu xảy ra lỗi code Javascript, bạn tốn thời gian để xác định dòng code lỗi đó đang nằm trên tập tin nào.

Internal Javascript

Internal Javascript là phương pháp mà trong đó, các đoạn code Javascript được đặt trong phần tử thẻ <script></script> của một trang HTML.

Ví dụ:

Source code
<html lang="vi">
   <head>
   </head>
   <body>
      ....
      <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function(event) { 
        alert('External Javascript đã hoạt động');
      });
      </script>

   <body>
</html>

Lưu ý:

Nội dung lưu ý Demo
Bạn có thể chèn nhiều Internal Javascript vào chung 1 trang HTML ...
<body>

   ....
   <!-- Internal Javascript 1 --!>

   <script type="text/javascript">
      var a = 5;
      var b = 10;
   </script>

   <!-- Internal Javascript 2 --!>
   <script type="text/javascript">
       alert (a+b);
   </script>

<body>
...
Bạn có thể chèn Internal Javascript ở bất kỳ vị trí nào trong trang HTML mà bạn muốn, kể cả trong phần tử thẻ <head></head> ...
<head>

   ....
   <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function(event) { 
        alert('External Javascript đã hoạt động');
      });
   </script>

<head>
<body>
   ...
</body>
...
Ưu và nhược điểm của phương pháp Internal Javascript
Ưu điểm Nhược điểm

Bạn có thể viết một kịch bản Javascript dài và phức tạp.

Tốn ít thao tác thực hiện hơn so với External Javascript


Bạn khó có thể viết một kịch bản Javascript với số lượng lớn dòng code bởi làm thế sẽ khiến file HTML trở nên rất dài và nặng.

Inline Javascript

Inline Javascript là phương pháp mà trong đó, code Javascript sẽ được chèn trực tiếp vào phần tử HTML thông qua các thuộc tính HTML thuộc nhóm event (Ví dụ: onload, onlick, onmouseover, onmouseout...)

Ví dụ:

Source code Diễn giải
...
<body onload="alert('Body đã load xong!');">
    ...
</div>
...

Giá trị của thuộc tính onload chính là một Javascript statement.

Sau khi trình duyệt hoàn tất load phần tử body, một cảnh báo với nội dung Body đã load xong sẽ được hiện lên.

...
<button onclick="alert('Body đã click vào nút hiện cảnh báo!');">
    Hiện cảnh báo
</button>
...

Giá trị của thuộc tính onclick chính là một Javascript statement.

Ngay sau khi người dùng click vào phần tử <button></button>, một cảnh báo sẽ xuất hiện.

Ưu và nhược điểm của phương pháp Inline Javascript
Ưu điểm Nhược điểm

Tốn ít thao tác thực hiện nhất


Bạn có thể viết một kịch bản rất ngắn với 1 vài statement đơn giản.

Thời điểm trình duyệt xử lý Inline Javascript phụ thuộc vào thuộc tính HTML mà bạn lựa chọn


Đăng ký để nhận được thông báo mỗi khi có bài viết mới!