Does javascript have to be in the head tags?
JavascriptJavascript Problem Overview
I believe javascript can be anywhere (almost), but I almost always see it in between <head></head>. I am using jquery and wanted to know if it has to be in the head tags for some reason or if will break something if I move it. Thank you.
EDIT: Why is it almost always in the head tags?
Javascript Solutions
Solution 1 - Javascript
No, it can be anywhere. In fact, it’s sometimes a good idea to put it at the bottom of the document. For an explanation why, see http://developer.yahoo.com/performance/rules.html#js_bottom.
Solution 2 - Javascript
JavaScript is executed wherever it is found in the document. If you place inline JavaScript in the body, it will be executed when the browser comes to it. If you're using $(document).ready(...) to execute things, then the positioning shouldn't matter. Otherwise, you may find corner cases where it matters. In general, it does not matter. Scripts end up in the head tag mostly out of tradition.
Solution 3 - Javascript
Basically, browsers stop rendering page until .js files are completely downloaded and processed. Since they render page progressively as HTML arrives, the later .js files are referenced, the better user experience will be.
So the trick is to include only absolutely crucial scripts in the head, and load remaining ones towards the end of the page.
Solution 4 - Javascript
Everything stops when the browser reads a script tag until it has processed it. Your page will therefore render quicker if you move the script tags down as far as possible - ideally just before the end body tag. Obviously the total load time will be the same.
You will have to make sure you don't actually call any jQuery functions until jQuery is included of course.
Solution 5 - Javascript
JS changes so quickly these days with new frameworks coming out every week and each one claims to be "the bees knees" by its advocates.
Gumbo is right to say a script tag can be referenced anywhere that supports an inline element, but the choice to load an external JS file or include JS code within a
Solution 6 - Javascript
No. SCRIPT is not only categorized as head.misc element but also as special element and thus everywhere allowed where inline elements are allowed. So you can put a SCRIPT wherever inline elements are allowed:
<p>foo <script>document.write("bar")</script></p>
In fact, some recommend to put SCRIPT elements at the end of the BODY just before the closing tag so that the whole document is parsed before the JavaScript is loaded. That is to prevent JavaScript from blocking parallel downloads.
Solution 7 - Javascript
Actually, for performance reasons, you almost always want to put your script tags at the bottom of your page. Why? You want your page structure and your CSS to load first so that the user sees the page right away. Then you want all your behavior driven code to load last. YSlow is a good firefox extension that will show you a grade for performance. One of the items it grades you on is whether you have javascript at the bottom rather than the top.
Solution 8 - Javascript
Just be careful about the bad effects on latency that you can have, depending on the user's browser and where exactly you place your Javascript in the page -- see just about all that Steve Souders has to say, including the videos of his Stanford lectures, and the fruit of his labors left behind e.g. here (put scripts at the bottom of the page in as much as feasible, etc etc).
Solution 9 - Javascript
-
Because you don't want JavaScript mixed with HTML - content with behaviour. Preferably you want it in a separate file.
-
Having JS elsewhere has advantages and disadventages - it will be executed at different time, for instance, and you can write to the document from javascript located in the body.
Solution 10 - Javascript
It can go in the head or body tag. Just keep in mind that it will execute whenever is read and not necessarily when the document is finished loading. Take a look here.
Solution 11 - Javascript
In some cases, yes the script may not work if its in the wrong location. Some JavaScript needs to be executed after a specific HTML element, others need to be exactly where you want your script output to show, others should be in the head of the document. It really depends on how the code is written. If you are not sure, you should execute your code on window.load or DOMready: http://www.javascriptkit.com/dhtmltutors/domready.shtml