Nguyên lý thực thi mã lệnh trong JavaScript
- Trước tiên, để tiện cho việc xưng hô thì tất cả những câu lệnh trong cặp thẻ <script></script> hoặc những câu lệnh trong tập tin JavaScript, ta tạm gọi chúng là "kịch bản" . 1) Thứ tự thực thi của các câu lệnh trong kịch bản - Trong một kịch bản, các câu lệnh JavaScript được ...
- Trước tiên, để tiện cho việc xưng hô thì tất cả những câu lệnh trong cặp thẻ <script></script> hoặc những câu lệnh trong tập tin JavaScript, ta tạm gọi chúng là "kịch bản".
1) Thứ tự thực thi của các câu lệnh trong kịch bản
- Trong một kịch bản, các câu lệnh JavaScript được thực thi lần lượt theo thứ tự từ trên xuống dưới
Giống như thứ tự được sắp đặt trong kịch bản bên dưới:
- Câu lệnh document.write("<h2>Tài liệu học HTML</h2>") sẽ được thực thi đầu tiên
- Câu lệnh document.write("<h2>Tài liệu học CSS</h2>") được thực thi thứ hai
- Câu lệnh document.write("<h2>Tài liệu học JavaScript</h2>") thực thi cuối cùng
<script>
document.write("<h2>Tài liệu học HTML</h2>");
document.write("<h2>Tài liệu học CSS</h2>");
document.write("<h2>Tài liệu học JavaScript</h2>");
</script>
- Có những kịch bản mà trong đó câu lệnh bên dưới phải cần đến dữ liệu từ câu lệnh ở trên. Vì vậy, việc xác định thứ tự của các câu lệnh là vô cùng quan trọng (Nếu xác định sai có thể dẫn đến trường hợp kịch bản thực thi không như mong đợi hoặc xảy ra lỗi)
- Ở kịch bản bên dưới, đầu tiên là khởi tạo biến a có giá trị 100, biến b giá trị 70. Kế đến tạo biến c với giá trị là tổng của a và b. Cuối cùng hiển thị lên màn hình giá trị của biến c.
- Vì phải tồn tại a và b thì c mới có thể tính tổng của a và b được. Do đó, câu lệnh var c = a + b phải nằm sau câu lệnh var a = 100 và var b = 70
- Vì phải tồn tại c thì mới hiển thị ra màn hình giá trị của nó được. Nên câu lệnh document.write(c) phải nằm sau câu lệnh var c = a + b
<script>
var a = 100;
var b = 70;
var c = a + b;
document.write(c);
</script>
2) Thứ tự thực thi của các kịch bản trong trang web
- Trong một trang web, các kịch bản được thực thi lần lượt theo thứ tự từ trên xuống dưới
<!DOCTYPE html>
<html>
<head>
<title>Lập Trình Web</title>
</head>
<body>
<p>Tài liệu học HTML</p>
<script>
document.write("<p>Tài liệu học CSS</p>");
document.write("<p>Tài liệu học JavaScript</p>");
</script>
<p>Tài liệu học MySQL</p>
<p>Tài liệu học PHP</p>
<script>
var a = 100;
var b = 70;
var c = a + b;
document.write(c);
</script>
</body>
</html>
- Các kịch bản được viết tách biệt nhau, đó là do cách trình bày của người lập trình viên. Tuy nhiên, về mặt ý nghĩa thì chúng cũng giống như một kịch bản. Các câu lệnh của kịch bản phía trên sẽ cung cấp dữ liệu cho các câu lệnh của kịch bản phía dưới.
Trang web bên dưới có ba kịch bản, nhưng chúng mang ý nghĩa giống như kịch bản:
var b = 70;
var c = a + b;
document.write(c);
<!DOCTYPE html>
<html>
<head>
<title>Lập Trình Web</title>
</head>
<body>
<p>Tài liệu học HTML</p>
<script>
var a = 100;
var b = 70;
</script>
<p>Tài liệu học CSS</p>
<p>Tài liệu học JavaScript</p>
<script>
var c = a + b;
</script>
<p>Tài liệu học MySQL</p>
<p>Tài liệu học PHP</p>
<script>
document.write(c);
</script>
</body>
</html>
Thứ tự thực thi của các tập tin JavaScript được nhúng vào trang web cũng giống các đoạn <script>
3) Mối liên hệ giữa HTML và mã lệnh JavaScript
- Không riêng gì thứ tự thực thi giữa các câu lệnh JavaScript mới quan trọng, thứ tự thực thi giữa HTML và JavaScript cũng quan trọng không kém.
Ở đoạn mã bên dưới, <h2 id="demo">Tài liệu học HTML</h2> thực thi trước để tạo một phần tử có id là demo, sau đó câu lệnh document.getElementById("demo").innerHTML = "Tài liệu học CSS" được thực thi với ý nghĩa là thay thế nội dung của phần tử có id là demo thành câu Tài liệu học CSS
<h2 id="demo">Tài liệu học HTML</h2>
<script>
document.getElementById("demo").innerHTML = "Tài liệu học CSS";
</script>
- Ở ví dụ phía trên, phần tử có id là demo phải tồn tại trước thì câu lệnh JavaScript mới có thể thay thế nội dung của nó thành câu Tài liệu học CSS được. Còn nếu thay thế nội dung mà trong khi phần tử đó chưa tồn tại thì sẽ dẫn đến trường hợp bị lỗi.
Ở đoạn mã bên dưới, câu lệnh document.getElementById("demo").innerHTML = "Tài liệu học CSS" không thể thực thi được vì phần tử có id là demo chưa tồn tại.
<script>
document.getElementById("demo").innerHTML = "Tài liệu học CSS";
</script>
<h2 id="demo">Tài liệu học HTML</h2>
- Trong JavaScript, khi một câu lệnh bị lỗi thì việc thực thi sẽ kết thúc (tức là những câu lệnh JavaScript nằm sau câu lệnh bị lỗi sẽ không được thực thi tiếp)
- Không giống như những ngôn ngữ lập trình khác, khi bị lỗi JavaScript không hiển thị thông báo lên màn hình, nó chỉ hiển thị lỗi trong phần Console của trình duyệt (Bạn sẽ được tìm hiểu kỹ về vấn đề này trong bài Cách tìm và khắc phục lỗi trong JavaScript)
- Có một cách để đề phòng trường hợp người lập trình viên sơ ý sắp xếp sai thứ tự của mã HTML và JavaScript dẫn đến tình trạng phần tử HTML không tồn tại khiến câu lệnh JavaScript thực thi bị lỗi, đó chính là đặt các kịch bản JavaScript nằm ở vị trí cuối cùng trong phần tử <body>, bởi vì khi đó các mã HTML được thực thi trước đảm bảo phần tử HTML tồn tại trước khi mã lệnh JavaScript được thực thi. Ngoài ra nó còn giúp cải thiện tốc độ tải giao diện của trang web (vì mã HTML được thực thi trước)
