Tuỳ vào mục đích sử dụng mà các đoạn mã javascript sẽ được chèn vào các file html theo các cách khác nhau. Dưới đây là các cách thông dụng để chèn javascript vào trang html, mỗi cách đều có ưu điểm và nhược điểm của riêng nó.
Chèn javascript trực tiếp vào các thẻ html
Chúng ta có thể viết các đoạn mã javascript ngắn để chèn vào phần giá trị của các thuộc tính sự kiện của các thẻ html. Các thuộc tính sự kiện là thuộc tính dùng để định nghĩa tương tác giữa người dùng và các thẻ html. Chúng ta có các thuộc tính sự kiện phổ biến như onclick, onchange ...
Cú pháp:
<body>
<h1>Chèn javascript vào website</h1>
<a href="#" onclick="alert(1)">Click me</a>
</body>Trong ví dụ này: Chúng ta đã chèn đoạn mã xuất hiện hộp thoại mỗi khi người dùng nhấn vào thẻ a.
Ưu điểm: Nhanh, không lưu cache, tính cập nhật tức thời.
Nhược điểm: Lạm dụng quá nhiều làm file html trở nên rối và khó kiểm soát. Chỉ thực hiện được các tác vụ liên quan đến sự kiện.
Chèn javascript thông qua thẻ script ngay trong tài liệu html
Chúng ta có thể dùng thẻ script tại phần nội dung của head hoặc body. Nếu chèn trong phần head, javascript sẽ được tải và thực thi trước khi trình duyệt render nội dung web bên trong body. Vì vậy, nếu không thật sự bị ràng buộc, chúng ta nên khai báo thẻ script tại vị trí là các thẻ con trực tiếp cuối cùng của body.
Lưu ý: Trong một file html có thể có nhiều thẻ script. Khi này, các đoạn code javascript sẽ được thực thi theo thứ tự và có ảnh hưởng lẫn nhau.
Cú pháp:
<body>
<h1>Chèn javascript vào website</h1>
<a href="#">Click me</a>
<script>
document.write("hello");
</script>
</body>
Ưu điểm: Code javascript không bị lưu cache, tính cập nhật tức thời.
Nhược điểm: Chỉ áp dụng cho trang html hiện tại. Chưa thật sự tách biệt code html và javascript.
Chèn javascript từ file .js độc lập
Chúng ta có thể sử dụng thẻ script để chèn file js độc lập vào trang html theo cấu trúc sau:
File html viết:
<body>
<h1>Chèn javascript vào website</h1>
<a href="#">Click me</a>
<script src="js/index.js"></script>
</body>
Khi này trong thư mục js, chúng ta tạo file index.js với nội dung sau:
alert(1);
Như vậy, khi mở website trên trình duyệt sẽ có hộp thoại xuất hiện và in ra số 1.
Note: Thuộc tính src trong thẻ script dùng khai báo đường dẫn của file js, tính từ file html hiện tại nếu là đường dẫn tương đối.
Ưu điểm: Có thể áp dụng cho nhiều file html. Có thể lưu cache nhằm tăng tốc độ web và giảm tải cho máy chủ.
Nhược điểm: Tính cập nhật không tức thời vì bị lưu cache.
Chúng ta vừa xem các cách để chèn javascript vào trang html. Ở những bài tiếp theo, chúng ta sẽ bắt đầu tìm hiểu cách viết code javascript để thực hiện các tác vụ cơ bản.
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Hướng dẫn chèn javascript vào html