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!
TÓM TẮT NỘI DUNG
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.html
và my-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 | ... .... <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> |
... .... <script type="text/javascript" src="my-scripts.js"></script> <head> |
Ư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"> <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 | ... .... <script type="text/javascript"> <!-- Internal Javascript 2 --!> |
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> |
... .... <script type="text/javascript"> <head> |
Ư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ử |
Ư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 |