Hallo guys,
Is it absolutely necessary to put the JavaScript code in the HEAD? I have a lot of JavaScript code in the BODY and they all appears to be working just fine. What is the downside of putting JavaScript code in the BODY? What can go wrong?
Sometimes you can not avoid putting JavaScript code in the BODY. Like for instance, when you provide your members with a HTML code for a poll and the code has JavaScript in it.
Actually, a lot of JS gurus these days advocate putting your scripts just before the closing body tag. That way, the page loads first (HTML and CSS) and it’s handy also handy to have the DOM elements in place first where the JS has to act on them. (Otherwise, you have to tell the script not to run until the page has loaded).
Yes, true, but usually that is junk code, so don’t base your understanding of JS around that stuff.
What? How dare you call my code junk! 
The best place to put the script tag is immediately before the </body> tag. Not all older scripts will work when put there though (although ones designed to go in the <head> should all also work better if moved there.
By moving the script to the end you allow the rest of the page to load first without being held up waiting for the script to load first.
I’ve always read that JavaScript code should go between the <HEAD> tags. How come that “they” didn’t realise then that it’s better to put JavaScript at the end of the page immediately before the </body> tag? How come that people are now realising this?
If you are provided code for some purpose—like a Facebook app—that sits somewhere in the body, it’s usually pretty evil stuff. Ideally, the JavaScript is not inline but more ‘aloof’, leaving the user with something functional if JS is off.
The debate about where to put scripts is an interesting one. I have a good book on JS, first published in '05, which tells you to put the scripts in the head, but recently I got the new edition, which advocates putting the JS just before the closing </body> tag. The web is evolving, and people are refining their understanding of best practice as things move along.
Before HTML4 scripts were only allowed in the head. From HTML4 onwards, they were allowed in the body as well. After further investigations took place, the benefits of doing so were discovered. The trouble is that ancient web browsers (much older than IE6) weren’t able to have scripts in the body.
It takes a while for old web browsers to die (or die out enough), so it has only been within the past 4 years or so that it has been a viable technique to use widely.
So now you have a choice when scripts need to touch the body content.
Head scripts cannot directly touch the body, because at that moment, the body does not yet exist. So, head scripts have to employ various type of trickery in order to touch the body.
[list][]They may wait for the onload event, by which time people are sick and tired of waiting for images to finish loading before the script can begin
[]They may wait for the DOM to finish loading, which require difficult to remember cross-browser code, and is also only supported in some web browsers
[*]Or they may use a timed interval to continue polling the page until the part they want to touch becomes available.[/list]
Another problem with head scripts is that they completely block the page loading process. Whenever a head script is encounted, nothing on the page is allowed to loaded until the head script has loaded, and fully finishes running its script.
Body scripts have some advantages over that.
[list][]They automatically have access to everything that’s above them, so there’s no need to wait an onload event.
[]They can be run immediately, so they get to be executed even before the DOM has finished loading.
[*]Polling techniques by using timed intervals aren’t required, but may still have a useful place from the head.[/list]