Js tải tệp html

Trong bài này chúng ta sẽ tìm hiểu cửa sổ sự kiện. onload trong javascript, đây là sự kiện xảy ra khi mọi tài nguyên của trang web đã được tải xong

Nội dung chính Hiển thị

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

Javascript có một sự kiện được sử dụng khá nhiều đó là sự kiện

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

1. Cửa sổ sự kiện. onload là gì?

Sự kiện

var flag = do_validate[];
function do_validate[]{
    // code here
}

Sự kiện này rất quan trọng, nó giúp ta biết được khi nào thì trình duyệt tải hết tài nguyên trên hệ thống, giúp ta có thể thâm nhập vào quá trình tải dữ liệu của trình duyệt

Bài viết này đã được đăng tại [free tuts. bọc lưới]

Cú pháp của javascript onload as after

window.onload = function[]
{
    // code
};

Trong đó phần code chính là những đoạn mã javascript mà bạn muốn chạy khi xảy ra sự kiện onload, tức là khi mọi thứ đã được duyệt xong.

2. Hiểu về quá trình biên dịch trong Javascript

Cũng như các ngôn ngữ lập trình khác, Javascript sẽ chạy biên dịch từ trên xuống dưới và từ trái qua phải. Chính vì vậy, khi sử dụng một hàm mà phía trên nó không tồn tại tại hàm đó thì sẽ bị lỗi không xác định. Và để giải quyết vấn đề này, chúng ta sẽ sử dụng sự kiện onload trong js

Trường hợp file js riêng

Javascript sẽ tải tất cả dữ liệu của tệp JS xong rồi mới biên dịch, vì vậy thứ tự các hàm nằm trong cùng một tệp javascript là không quan trọng

Ví dụ. Nếu đoạn mã bên dưới nằm trên cùng một tệp thì không có lỗi mặc định hàm

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

Giả sử bạn có hàm

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

Ví dụ. Đoạn mã này sai vì hàm

var flag = do_validate[];
function do_validate[]{
    // code here
}

tập tin. js

var flag = do_validate[];
function do_validate[]{
    // code here
}

mục lục. html

var flag = do_validate[];
function do_validate[]{
    // code here
}

Nhưng nếu sửa lại như thế này thì sẽ đúng

var flag = do_validate[];
function do_validate[]{
    // code here
}

Trường hợp đặt trong thẻ html

Khi bạn gán một hàm nào đó cho một sự kiện nào đó trong HTML thì cũng phải tuân theo quy định trên, nghĩa là nếu bạn gán một hàm mà phía trên thẻ HTML không có thì nó sẽ báo lỗi là không xác định

Ví dụ. Đoạn mã này cũng sai vì hàm

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

Nhưng nếu bạn sửa lại như thế này thì sẽ đúng

var flag = do_validate[];
function do_validate[]{
    // code here
}

Trường hợp đặt trong nhiều tập lệnh thẻ

Javascript sẽ tải tất cả các mã đoạn bên trong mỗi tập lệnh thẻ rồi mới biên dịch, tức là nó được duyệt từ trên xuống, tập lệnh thẻ thẻ nào là tải tất cả các mã j bên trong đó và biên dịch, sau đó rồi mới nhảy sang

Vì vậy, nếu bạn sử dụng một hàm được định nghĩa phía bên dưới nhưng nằm ở tập lệnh chung thẻ thì không sao

var flag = do_validate[];
function do_validate[]{
    // code here
}

Nhưng if it is hai thẻ script khác nhau thì sẽ bị lỗi

var flag = do_validate[];
function do_validate[]{
    // code here
}

3. Ví dụ về sự kiện onload trong Javascript

Các đoạn mã nằm bên trong sự kiện

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

Ví dụ 1. Trong đoạn mã này mình gọi hàm

var flag = do_validate[];
function do_validate[]{
    // code here
}

var flag = do_validate[];
function do_validate[]{
    // code here
}

Ví dụ 2. Nếu vẫn chưa tin thì bạn làm ví dụ sau đây, trong ví dụ này ta thực hiện cảnh báo thứ tự của quá trình biên dịch

var flag = do_validate[];
function do_validate[]{
    // code here
}

Nếu run theo thứ tự sẽ là 1 -> 3 -> 2, nhưng sự kiện onload sẽ thực hiện cuối cùng nên thứ tự sẽ là 1 -> 2 -> 3

4. Lời kết

Như vậy sự kiện tải trong Javascript được sử dụng khá nhiều do nó được xử lý sau cùng nên sẽ tránh được khá nhiều lỗi không xác định. Tuy nhiên, không phải lúc nào dùng nó cũng tốt mà bạn phải cân nhắc nhé. Và đ áng may ra bài này mình viết ở những bài đầu tiên nhưng mình sợ khó giải thích vì nó liên quan đến hàm trong javascript, sự kiện trong javascript.