Quy trình biên dịch của Javascript - jQuery
Để học tốt Javascript nói chung và jQuery nói riêng thì ban phải hiểu quá trình biên dịch của Browser đối với các đoạn mã HTML và Javascript. ...
Để học tốt Javascript nói chung và jQuery nói riêng thì ban phải hiểu quá trình biên dịch của Browser đối với các đoạn mã HTML và Javascript.
Có nhiều bạn thắc mắc rằng tại sao khi đặt code JS tại vị trí này thì hoạt động bình thường nhưng khi đặt tại một vị trí khác thì lại không hoạt động? Trường hợp này thông thường do các bạn chưa hiểu nguyên lý biên dịch của trình duyệt Browser đối với các đoạn mã HTML và JS. Để hiểu rõ hơn thì qua bài này ta sẽ cùng thảo luận vấn đề này nhé.
1. Quy trình biên dịch của javascript
Cũng như các ngôn ngữ lập trình khác như PHP, C# thì javascript sẽ biên dịch từ trên xuống dưới và từ trái qua phải. Tuy nhiên trong javascript có thêm một số đặc điểm hơi khác xíu, đó là sự kiện window.onload, khi gặp những đoạn code nằm trong sự kiện này thì trình biên dịch sẽ bỏ qua và cho tới khi trang web load xong thì thực thi những đoạn code bên trong nó.
Ví dụ: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script language="javascript">
alert('Đoạn thứ nhất');
alert('Đoạn thứ hai');
window.onload = function (){
alert('Đoạn thứ ba');
};
alert('Đoạn thứ 4');
</script>
</body>
</html>Bạn thấy rõ ràng trong ví dụ tôi đã code theo thứ tự các hàm alert từ 0 -> 4, nhưng vì đoạn thứ 3 tôi đặt trong sự kiện window.onload nên nó sẽ được biên dịch sau cùng.
Và một điều nữa tôi cũng xin nhắc với các bạn là nếu như những đoạn code bạn không đặt trong sự kiện onload thì nếu như nó có truy xuất đến một thẻ HTML nào đó thì thẻ HTML đó phải nằm bên trên những đoạn code Javascript đó. Vì theo quy trình thì nó biên dịch sẽ chạy từ trên xuống nên khi đoạn biên dịch tới đoạn code JS thì đoạn code HTML vẫn chưa biên dịch nên sẽ bị lỗi undefined.
Ví dụ: XEM DEMO:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="demo">
Noi dung ben trong
</div>
<script language="javascript">
// Nếu như ta đặt nội dung thẻ script này trên thẻ div thì sẽ xuất hiện lỗi, vì
// theo quy trình thì nó biên dịch từ trên xuống và từ trái sang, nhưng lúc này
// thẻ div lại nằm dưới nên nó ko tìm thấy thẻ div
alert(document.getElementById('demo').innerHTML);
</script>
</body>
</html>2. Sự kiện onload trong jQuery
Với javascript thuần thì ta gọi là sự kiện window.onload như sau:
window.onload = function(){
// Nội dung bên trong
};Nhưng với jQuery thì ta sẽ gọi cách khác:
$(document).ready(function(){
/*Nội dung bên trong*/
});
Rất đơn giản phải không nào, bây giờ bạn ví dụ dưới đây nhé:
XEM DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<script language="javascript">
alert('Lần thứ nhất');
alert('Lần thứ hai');
$(document).ready(function(){
alert('Lần thứ ba');
});
alert('Lần thứ bốn');
</script>
</body>
</html>
Chạy lên và kết quả cũng tương đương.
3. Lời kết
Như vậy mình đã giới thiệu xong quy trình biên dịch của trình duyệt đối với HTML và Javascript, vấn đề này khá quan trọng nên bạn cần nắm bắt để sau này khi lập trình sẽ không có những lỗi không đáng có như thế này.
Nguồn: code24h.com
