×

Cách sử dụng thẻ <script> để nhúng JavaScript trong HTML

Avatar of admin
admin 0 Views

Việc sử dụng thẻ <script> để nhúng JavaScript trong tài liệu HTML là kỹ năng cơ bản mà mọi nhà phát triển web cần nắm vững. Thẻ này cho phép tích hợp và chạy các đoạn mã JavaScript, giúp trang web trở nên tương tác và động hơn. Dưới đây là các cách phổ biến để sử dụng thẻ <script>.

1. Nhúng mã JavaScript trực tiếp trong tài liệu HTML

Trong trường hợp muốn nhúng trực tiếp mã JavaScript vào trang HTML, thẻ <script> thường được đặt trong phần <head> hoặc <body> của tài liệu. Đoạn mã JavaScript sẽ nằm giữa hai thẻ mở và đóng <script>.

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về thẻ script</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("Trang web đã tải xong!");
        });
    </script>
</head>
<body>
    <h1>Xin chào!</h1>
</body>
</html>

Trong ví dụ trên, đoạn mã JavaScript được nhúng trực tiếp trong phần <head> và sẽ chạy khi trang web được tải xong.

2. Liên kết tới một tập tin JavaScript bên ngoài

Việc sử dụng tập tin JavaScript bên ngoài giúp mã nguồn HTML rõ ràng hơn và cho phép tái sử dụng mã JavaScript trong nhiều trang HTML khác nhau. Để thực hiện, sử dụng thuộc tính src trong thẻ <script> để liên kết tới URL của tập tin JavaScript.

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về thẻ script</title>
    <script src="path/to/yourfile.js"></script>
</head>
<body>
    <h1>Xin chào!</h1>
</body>
</html>

Với phương pháp này, nội dung của tập tin yourfile.js sẽ được tải và thực thi.

3. Đặt thẻ <script> trước thẻ đóng </body>

Thông thường, mã JavaScript có thể tác động tới mọi phần tử DOM trong trang web. Để đảm bảo mọi phần tử đã được tải trước khi mã JavaScript chạy, một lợi ích của việc đặt thẻ <script> ngay trước thẻ đóng </body> là giúp tối ưu hóa hiệu suất tải trang.

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về thẻ script</title>
</head>
<body>
    <h1>Xin chào!</h1>
    <script>
        console.log("Trang web đã tải xong!");
    </script>
</body>
</html>

4. Sử dụng thuộc tính async và defer

Thuộc tính async và defer giúp kiểm soát thời điểm các tập tin JavaScript được tải và thực thi, nhằm tối ưu hóa hiệu suất.

  • Với async, tập tin JavaScript sẽ được tải song song với tài liệu HTML và thực thi ngay khi tải xong. Thích hợp cho các script không phụ thuộc vào các phần tử khác.

    Ví dụ:

    <script src="path/to/yourfile.js" async></script>

  • Với defer, tập tin JavaScript sẽ được tải song song với tài liệu HTML nhưng chỉ thực thi sau khi toàn bộ tài liệu HTML đã được phân tích cú pháp. Thường được sử dụng khi script cần tương tác với các phần tử DOM.

    Ví dụ:

    <script src="path/to/yourfile.js" defer></script>

Việc lựa chọn cách nhúng JavaScript phù hợp phụ thuộc vào yêu cầu cụ thể của dự án và mục đích sử dụng. Bằng cách thuần thục sử dụng thẻ <script>, các nhà phát triển có thể tạo ra những trang web có trải nghiệm người dùng phong phú và tương tác mạnh mẽ.

Comments

Bài viết liên quan