28 March 2012

CMT3313 - Week 4 Post - JavaScript Interpreter

Interpreter
In this post I will write about the JavaScript Interpreter, its advantages and disadvantages and also carry out a small test on multiple browsers to see how they interpret the JavaScript code.


JavaScript Interpreted
JavaScript, unlike server-side programming languages is not compiled all at one go and then executed once. Instead it is interpreted line-by-line and executed immediately. This does make the overall execution slower than complied applications, but on the other hand, just imagine every JavaScript code present in a site being compiled on the user's machine every time he/she visits the site (don't forget, JavaScript is a client-side language). It would make the viewers' experience dreadful, as compiling all the JavaScript code at one time would certainly take a few moments! So there's one of the nice aspects of using an interpreter for a client-side language.


Some might say that compiled languages are better, because you only have to compile it once on one machine to produce a compiled version, which you can run on many other machines. With JavaScript being interpreted, it's true you have to compile it every time you which to run it and to do so, the machine you or the users who will be running the JavaScript application must have the interpreter installed on it, but not to worry, as today's internet browsers all have JavaScript interpreters embedded in them, so all you need is an Internet browser and this is normally installed on every machine by default.


One disadvantage which personally bugs me a bit is the fact that the JavaScript source code is available for everyone to see, sure you can store all the code in a separate file from the HTML, but still, if anyone has access to the hosting server, he/she wouldn't have any trouble looking at your code. But hay look on the bright side! At least your code could teach someone some new things.


Testing How the Interpreter Works


So I was thinking, if JavaScript is interpreted line-by-line and executed on the fly, I think it must be of crucial importance where to place communicating functions and the best way to know for sure is try it out!



<html>
     <head>
           <title>Test JS Interpreter</title>
           <script type="text/javascript">
                  //This statement calls the 'caller()' function before it is defined
                  caller();


                  //This function calls the 'receiver()' function before it is defined
                  function caller(){
                       try{
                              var blnCall = true;
                              receiver(blnCall);
                       }catch(err){
                              alert(err);
                       }
                  }

                  function receiver(blnCallRequest){
                        if(blnCallRequest){
                                alert("Receiver Responds to Caller");
                        }
                  }
           </script>
   </head>
   <body>
           <h1>Testing JavaScript Interpreter</h1>
   </body>
</html>


The simple code above consists of an HTML page with a heading and two JavaScript functions; 'caller()' and 'receiver()' and a statement at the beginning which calls the caller() function.
The 'caller()' function passes a boolean variable to the 'receiver()' function. This in turn will check if the received boolean is true and if so displays a message box.


As you can see, the 'receiver()' function is defined below the 'caller()' function, this means that when the interpreter, interprets the line of code which calls the 'receiver()' function and tries to execute it, an error should occur as the interpreter hasn't yet interpreted the line which defines the 'receiver()' function and the same goes at the start of the script with the statement calling the 'caller()' function. Please note that at this point the information I have given is what I think should happen, I have not tested this out yet so lets start by first testing it using Google Chrome, then Mozilla Firefox and finally Internet Explorer 9.


Google Chrome Result:


Google Chrome Test: Works
Mozilla Firefox Result:


Mozilla Firefox Test: Works


Internet Explorer 9:


Internet Explorer 9 Test: Works


Would you look at that! It still worked, but why did this happen?


Findings
After carrying out some research on how most JavaScript interpreters work I found out that the interpreter doesn't necessarily interpret one line and execute it. Instead it can interpret all or portions of the JavaScript code and store it in memory, ready to be executed all at once. This is why the code above worked regardless!


The following is an explanation available on Will Bontrager's article about JavaScript Tutorial Part1:


"Interpreted language" means when it loads a page, the browser's interpreter uses the original source code and translates it into machine language. The translation is stored in the browser's memory ready to run all or portions of it as appropriate. When the browser window gets ready to load a different web page, the previous page's translated JavaScript is discarded.

No comments:

Post a Comment