03/08/2018, 10:06

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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Javascript - Ngôn ngữ biên dịch hay thông dịch

Có 2 cụm từ mà chúng ta hay nhắc đến khi nói về một ngôn ngữ lập trình là biên dịch (compiled) và thông dịch (interpreted). 2 cụm từ này biểu đạt cho cách thức mà máy tính có thể hiểu được những gì chúng ta viết và thực thi nó. Ngôn ngữ thông dịch Ngôn ngữ được coi là thông dịch khi chương ...

Hoàng Hải Đăng viết 21:20 ngày 11/10/2018

Dùng jsperf kiểm tra tốc độ của JavaScript, JQuery

Tại sao tôi cần? Các ứng web phát triển dựa trên nền tảng của JavaScript và các thư viện, framework xung quanh ngôn ngữ này ngày càng phổ biến. Những thư viện, framework như JQuery, Prototype, AngularJS, Knockout… giúp cho việc phát triển ứng dụng web ngày càng dễ dàng hơn. Bên cạnh ...

Tạ Quốc Bảo viết 17:34 ngày 01/10/2018

Gọi hàm Javascript sử dụng biến tên của hàm

Trong bài viết này mình chia sẻ với các bạn cách gọi hàm Javascript mà tên hàm đó được định nghĩa thông qua một biến hoặc bạn có thể hiểu đơn giản là hàm do người dùng tự đinh nghĩa hoặc hàm động. Hàm mà tên của hàm có thể được định nghĩa bằng cách ghép các chuỗi hay các giá trị khác nhau để tạo ...

Trần Trung Dũng viết 16:48 ngày 01/10/2018

CSS Transition – Kiểm soát quy trình chuyển động của hiệu ứng

Ở phần trước, hẳn các bạn đã biết cách tạo hiệu ứng chuyển động cho các phần tử. Nhưng transition không chỉ đơn giản là dừng lại ở đó. Bởi vì ngoài các phần có hiệu ứng ra thì nó còn có thêm một câu hỏi khác nữa. Đó là quá trình chuyển động đó sẽ diễn ra như thế nào? Kiểm soát quy trình chuyển ...

Trịnh Tiến Mạnh viết 14:10 ngày 07/09/2018
0