Các cách nhúng JavaScript vào trang web

Các cách nhúng JavaScript vào trang web

Anh NguyễnBạn nghĩ gì về bài viết này?

Ở bài viết trước, mình và các bạn đã cùng tìm hiểu về Cú pháp trong JavaScript. Trong bài viết này, mình sẽ hướng dẫn các bạn cách để nhúng JavaScript vào trang web.

Tương tự như với CSS, chúng ta có thể khai báo lệnh JavaScript ở bất cứ nơi nào trong tài liệu HTML một cách linh hoạt. Tuy nhiên, các cách được ưu tiên nhất để nhúng JavaScript vào HTML như sau:

  • Sử dụng thẻ <script> bên trong mã HTML
  • Sử dụng file JavaScript riêng biệt
  • Viết mã JavaScript ngay trong thẻ các thẻ html

Thẻ <script>

Chúng ta có thể sử dụng thẻ <script> để nhúng mã JavaScript như sau:

<script>
     document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Đoạn mã JavaScript trên sẽ được thực thi và ghi dòng chữ “My First JavaScript” vào trong thẻ có id là “demo”.

Chúng ta có thể đặt thẻ <script> bên trong thẻ <head> hoặc vào bất cứ vị trí nào mong muốn bên trong thẻ <body>.

Lưu ý: Các đoạn mã JavaScript thường được đặt ở cuối thẻ <body> nhằm tăng tốc độ hiển thị của trang web. Tại sao lại thế?

Trong ví dụ sau đây, đoạn mã JavaScript được đặt trước thẻ đóng của thẻ <body>:

Lưu ý: Trong ví dụ trên chúng ta có sử dụng khái niệm hàm (function) và sự kiện (event), sẽ được đề cập đến ở phần sau.

File Javascript riêng biệt

Chúng ta cũng có thể viết mã JavaScript vào các file riêng biệt, sau đó nhúng vào trang HTML sử dụng thẻ <script>. Các file JavaScript được lưu với phần đuôi là .js.

Chẳng hạn, đây là nội dung của file my-script.js:

function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Chúng ta có thể nhúng file này vào trong trang HTML như sau:

<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

Lưu ý: Nên nhúng file JavaScript ở phần cuối của tài liệu HTML để tăng tốc độ hiển thị của trang web.

Các ưu điểm của việc sử dụng các file JavaScript riêng biệt:

  • Tách rời mã JavaScript và mã HTML khiến cho việc viết mã trở nên dễ dàng hơn, dễ bảo trì, dễ đọc
  • Các file JavaScript này thường được lưu trong bộ cache của trình duyệt, khiến cho việc tải trang trở nên nhanh chóng hơn
  • Có thể tái sử dụng được các file JavaScript cho nhiều trang web khác nhau, thậm chí là nhiều website khác nhau.

Viết mã JavaScript ngay khi khai báo các thẻ html

Trong ví dụ sau đây, chúng ta viết mã HTML ngay trong thuộc tính onclick của thẻ button (onclick là một sự kiện – chúng ta sẽ tìm hiểu về các sự kiện ở phần sau).

Lưu ý: Việc viết mã JavaScript trực tiếp ở trong các thẻ html không được khuyến khích và ít được dùng. Lí do tại sao, cùng mình trả lời dưới comment nhé!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận