Hướng dẫn script trong html

1] Thẻ trong HTML

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

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




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

Xem ví dụ

2] Các thuộc tính của thẻ

- Thẻ 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ẻ

- 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:




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

Xem ví dụ




    

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.




    
WEB CƠ BẢN
var hoten = document.getElementById["name"].innerHTML; alert["Xin chào: " + hoten];

Xem ví dụ




    
        var hoten = document.getElementById["name"].innerHTML;
        alert["Xin chào: " + hoten];
    
    
WEB CƠ BẢN

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ã
    WEB CƠ BẢN
    được thực thi trước, nên nó có thể lấy nội dung của phần tử
    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ã
    WEB CƠ BẢN
    bị thực thi sau, nên nó không thể lấy nội dung của phần tử
    .

- 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:




    
    
WEB CƠ BẢN

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.




    
    
WEB CƠ BẢN

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ụ:

Chủ Đề