Thẻ <script> trong HTML


1) Thẻ <script> trong HTML

- Thẻ <script> được dùng để làm thùng chứa cho các câu lệnh JavaScript.

Ví dụ:

- Phần tử <script> bên dưới chứa bốn câu lệnh JavaScript


<!DOCTYPE html>
<html>
<body>
    <script>
        var name = "Nguyễn Thành Nhân";
        var year = 1993;
        var info = name + " sinh năm " + year;
        document.write(info);     
    </script>
</body>
</html>
Xem ví dụ

2) Các thuộc tính của thẻ <script>

- Thẻ <script> có bốn thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về bốn thuộc tính đó:

src

Xác định đường dẫn đến tập tin JavaScript mà bạn muốn sử dụng cho trang web

async

Đảm bảo việc mã lệnh JavaScript chỉ được thực thi sau khi trang web đã được tải xong hoàn toàn

defer

Đảm bảo việc mã lệnh JavaScript chỉ được thực thi sau khi trang web đã được tải xong hoàn toàn

charset

Xác định kiểu mã hóa ký tự được sử dụng trong tập tin JavaScript

2.1) Thuộc tính src

- Thông thường, các câu lệnh JavaScript được viết bên cặp thẻ <script></script>

- Tuy nhiên, ta còn một cách khác là viết chúng vào bên trong một tập tin JavaScript, sau đó dùng thuộc tính src để nhúng tập tin JavaScript đó vào trang web.

- Ví dụ: Tôi có một tập tin JavaScript tên là taptin03.js với nội dung như sau:

var name = "Nguyễn Thành Nhân";
var year = 1993;
var info = name + " sinh năm " + year;
document.write(info);

- Khi đó, đoạn mã của hai ví dụ bên dưới sẽ có ý nghĩa như sau:

Ví dụ 1:

<!DOCTYPE html>
<html>
<body>
    <script>
        var name = "Nguyễn Thành Nhân";
        var year = 1993;
        var info = name + " sinh năm " + year;
        document.write(info);     
    </script>
</body>
</html>
Xem ví dụ
Ví dụ 2:

<!DOCTYPE html>
<html>
<body>
    <script src="http://webcoban.vn/file/js/taptin03.js"></script>
</body>
</html>
Xem ví dụ

2.2) Thuộc tính async

- Trước khi đi vào tìm hiểu thuộc tính async, bạn vui lòng xem qua hai ví dụ bên dưới.

Ví dụ 1:

<!DOCTYPE html>
<html>
<body>
    <div id="name">WEB CƠ BẢN</div>
    <script>
        var hoten = document.getElementById("name").innerHTML;
        alert("Xin chào: " + hoten);
    </script>
</body>
</html>
Xem ví dụ
Ví dụ 2:

<!DOCTYPE html>
<html>
<body>
    <script>
        var hoten = document.getElementById("name").innerHTML;
        alert("Xin chào: " + hoten);
    </script>
    <div id="name">WEB CƠ BẢN</div>
</body>
</html>
Xem ví dụ

- Sau khi xem qua hai ví dụ trên, ta thấy:

  • Trong ví dụ một: Câu lệnh var hoten = document.getElementById("name").innerHTML; thực thị được, vì đoạn mã <div id="name">WEB CƠ BẢN</div> được thực thi trước, nên nó có thể lấy nội dung của phần tử <div> và hiển thị.
  • Trong ví dụ hai: Câu lệnh var hoten = document.getElementById("name").innerHTML; thực thị bị lỗi, vì đoạn mã <div id="name">WEB CƠ BẢN</div> bị thực thi sau, nên nó không thể lấy nội dung của phần tử <div>.

- Từ đây, thuộc tính async giúp chúng ta khắc phục tình trạng này, nó đảm bảo việc mã lệnh JavaScript chỉ được thực thi sau khi trang web đã được tải xong hoàn toàn (Tuy nhiên, thuộc tính async chỉ áp dụng cho trường hợp tập tin JavaScript ngoài)

- Ví dụ: Tôi có một tập tin JavaScript tên là taptin02.js với nội dung như sau:

var hoten = document.getElementById("name").innerHTML;
alert("Xin chào: " + hoten);

- Khi đó, mã lệnh JavaScript sẽ được thực thi bình thường trong đoạn mã bên dưới:

<!DOCTYPE html>
<html>
<body>
    <script src="http://webcoban.vn/file/js/taptin02.js" async></script>
    <div id="name">WEB CƠ BẢN</div>
</body>
</html>
Xem ví dụ

2.3) Thuộc tính defer

- Tương tự như thuộc tính async, thuộc tính defer đảm bảo việc tập tin JavaScript chỉ được thực thi sau khi trang web đã được tải xong hoàn toàn.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <script src="http://webcoban.vn/file/js/taptin02.js" defer></script>
    <div id="name">WEB CƠ BẢN</div>
</body>
</html>
Xem ví dụ

2.4) Thuộc tính charset

- Thuộc tính charset dùng để xác định kiểu mã hóa ký tự được sử dụng trong tập tin JavaScript ngoài.

- Ví dụ:

<script src="../file/js/taptin02.js" charset="UTF-8"></script>