// Scenario 1
<script>
myFunction(); // This won't work.
</script>
<script>
function myFunction() {
alert("ok");
}
</script>
// Scenario 2
<script>
myFunction(); // This will work.
function myFunction() {
alert("ok");
}
</script>
Why? Thanks for your help!
In JavaScript, scripts are loaded in the order they appear on the page and are blocking. Because you put them in separate script tags, they are loaded separately. The first is loaded and the method executed without it being defined. In the second example, the method definition and the call are loaded at the same time, meaning that the method does exist when it is called.
every script tag the page find, it will execute it.
so the first script, it runs myFunction(), but it's not there, ERROR.
For the second, myFunction is there, so OK.
But pay attention that the following is also error:
<script>
myFunction(); // error
var myFunction = function() {
alert("ok");
}
</script>
when you define myFunction with var, it's now a local variable(here its global scope, so global variable), named myFunction, and only assigned to a function during run-time. So during run-time, you call myFunction() but it is not assigned with a value yet, event don't know whether myFunction is a function or not.
when you do it as following
<script>
myFunction(); // OK
function myFunction() {
alert("ok");
}
</script>
A function named myFunction will be created during something like pre-process, which does some initial work.
and after that is the run-time, which handles myFunction(). So now, when it's called, there is a function with the name of it, no problems.
The entire first script tag is parsed and executed before the second one is considered. As part of parsing a script, function declarations are recognized ahead of time, which is why the second one works while the first one doesn't.
JavaScript: The Definitive Guide
JavaScript statements that appear between and tags are executed in order of appearance; when more than one script appears in a file, the scripts are executed in the order in which they appear. If a script calls document.write( ), any text passed to that method is inserted into the document immediately after the closing tag and is parsed by the HTML parser when the script finishes running. The same rules apply to scripts included from separate files with the src attribute.
Javascript is client side scipting language. When web page loads browser checks for all syntex and function available in the page.
<script> tag and calling from other <script> tag then browser will only check within first <script> tag.rajesh kakawat's answer seems to agree with what I observed but I haven't seen this issue addressed directly in Flanagan's book, "JavaScript: The Definitive Guide" or elsewhere.
js is read and 'compiled' together (with script tags above in the page's html) and executed script tag by script tag - one script tag at a time - consecutively down the page using all of the definitions, etc. from all of the script tags above (but not from script tags below in the page's html).
This is what appears to be happening:
This means that if a function is defined in a script tag below (hasn't been processed yet) and called in the current script tag then a "'function x' undefined" error will occur because the js interpreter doesn't know about it yet. However within a given script tag a function can be defined below the call in the listing and work the same as if it had been defined above in the listing.
