1

What does the browser first do when it imports an external javascript for a html page? Does it try to compile it?
I asked this question because I got an exception when I tried to first import a cluetip jquery js file and then the Jquery.js file.

This worked :

<script src="/pollweb1/jquery.js" type="text/javascript"></script>
<script src="/pollweb1/jquery.cluetip.js " type="text/javascript"></script>



This did not work : 

<script src="/pollweb1/jquery.cluetip.js " type="text/javascript"></script>
<script src="/pollweb1/jquery.js" type="text/javascript"></script>


I can see that for jquery.cluetip.js to work it needs the jquery.js file. But why does the order matter? Does the browser try to compile it as soon as it imports a javascript file?

Ashwin
  • 12,691
  • 31
  • 118
  • 190
  • 1
    http://stackoverflow.com/questions/9827652/does-order-of-javascript-import-matter – Zera42 Jun 01 '13 at 09:42
  • All of the first script will be parsed and executed before the browser gets to the second script. – nnnnnn Jun 01 '13 at 10:28
  • If it only contains function definitions the function(s) won't actually be called though they will be parsed (which would pick up syntax errors but not runtime errors). But you must call the function _somewhere,_ right? And presumably you're not adding your own code into jquery.js. Does cluetip.js contain a document ready handler? Or are you also adding JS code on the html page itself? – nnnnnn Jun 01 '13 at 10:35
  • @nnnnnn : no, cluetip does not include document handler. The document handler I am including in the html page itself(after importing the two external js files) – Ashwin Jun 01 '13 at 12:57

1 Answers1

6

The order matters because the cluetip.js file has dependencies on jquery.js and the browser loads the scripts in the order it encounters them. When the browser attempts to load the cluetip.js script it tries to make use of these dependencies. Since jQuery is not loaded the statements relying on jQuery fail.

On a side note, Javascript is an interpreted language, the scripts are never actually compiled. This is why you discover most of your errors at runtime when something fails, if it were compiled you would be alerted to errors prior to visiting your web page. When the browser encounters a script, it begins to execute it. Most times any real action is delayed until the page has been loaded, so the first few tasks mainly establish global variables/objects such as jQuery or registering jQuery plugins.

I assume the cluetip.js plugin attempts to register with jQuery however it cannot find it since it hasn't been loaded yet, furthering the point that the order matters.

As always the best reference for this is the actual specification.

One way to picture this is through a short example. Image we had a page with these scripts:

OurPage.html

<head>
   <script type="text/javascript" src="script1.js"></script>
   <script type="text/javascript" src="script2.js"></script>
</head>

And the scripts:

script1.js

 alert(msg); //msg is undefined

script2.js

var msg = "hello world";

The browser first loads script1.js which attempts to alert the msg variable, however the msg variable is included in script2.js which has not been loaded yet, therefore we are informed by the browser that msg is undefined. This is what is happening in your example, just on a larger level.

Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189
  • _"the scripts are never actually compiled"_ - Except that modern JS engines may in fact compile some of the code. (Some browsers have a phased approach where all the code is interpreted to begin with, then "hot" code is optimised, and "very hot" code is compiled.) And usually the entire script is parsed before it is executed, which is why syntax errors at the end of a script can prevent the whole script running (but runtime errors obviously happen while it is running). – nnnnnn Jun 01 '13 at 10:20
  • 1
    _"therefore we are alerted that msg is undefined"_ - You probably won't get an alert, you'll probably get a reference error. – nnnnnn Jun 01 '13 at 10:27
  • @nnnnnn : The jquery.cluetip.js just contains a funciton. That function is called only after the whole page has been loaded (i.e after jquery.js has been imported). Because the cluettip() function is called in document.ready() funcion. – Ashwin Jun 01 '13 at 10:31
  • @Ashwin - Yes, but if the document ready handler is assigned in the cluetip.js it will cause an error because jquery.js hasn't been executed yet so `$()` or `$jQuery()` will give a reference error. As Kevin has pointed out in his first paragraph. – nnnnnn Jun 01 '13 at 10:34
  • 1
    @nnnnnn Thanks for sharing the information regarding Javascript compilation, but in general will you receive compile time errors? Also, I may have misused the word `alerted` I should have said informed as I was referencing the errors logged by different browsers. Thanks for the input. – Kevin Bowersox Jun 01 '13 at 16:56