<head> tag, but how does the location of the
<script> (whether in the
Specifically, how does it affect the scope of the function and where you can call it from?
Telling people to add
<SCRIPT> only in the head sounds like a reasonable thing to do, but as others have said there are many reasons why this isn't recommended or even practical - mainly speed and the way that HTML pages are generated dynamically.
This is what the HTML 4 spec says :
The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
And some sample HTML. Doesn't it look pretty all formatted here :)
And something to look forward to in HTML 5 :
New async attribute in
Note: There are ways [sic] a script can be executed:
The async attribute is "true": The script will be executed asynchrously with the rest of the page, so the script will be executed while the page continues the parsing.
The async attribute is "false", but the defer attribute is "true": The script will be executed when the page is finished with the parsing.
The normal rules of play still stand; don't use stuff before it's defined. :)
Also, take note that the 'put everything at the bottom' advice isn't the only rule in the book - in some cases it may not be feasible and in other cases it may make more sense to put the script elsewhere.
The main reason for putting a script at the bottom of a document is for performance, scripts, unlike other HTTP requests, do not load in parallel, meaning they'll slow down the loading of the rest of your page. Another reason for putting scripts at the bottom is so you don't have to use any 'DOM ready' functions. Since the script tag is below all elements the DOM will be ready for manipulation!
EDIT: Read this: http://developer.yahoo.com/performance/rules.html#js_bottom
One of the aspects of placement is performance. See this fine article within the YSlow discussion for why it's sometimes recommended you put them at the bottom of the document.
Position of script tag does matter. If you bind a Function with document Element then the document element has to be loaded first before we implement function. suppose getTeachers() is function in getTeachers.js file. This will give you an error:
It gives error before head is loaded first and it cannot find element with id specified. The below code is correction:
It doesn't. Most programming framework scatter scripts all throughout the page. I've only rarely seen problems because of that (and only from older browsers).
If your script refers to an ID on the page and the page has not been rendered (i.e. script is before HTML, or your script is executed with onload, rather then the DOM is ready) you can also get an error.
I ended up using this, not terribly elegant but works for me so far:
Note: Watch out for
< in this line:
for(var i=0;i<st.length; i++)
If you have an inline script (outside functions) located before functions it may call, you may get an error because they may not be not available yet. Not saying it is always going to happen, just that it may depending on browser type or version.
You should avoid putting scripts in the
<head> if possible as it slows down page display (see the link Alan posted).
©2020 All rights reserved.