When do you put Javascript in body, when in head and when use doc.load? [duplicate]

Question 1

$(document).ready() simply ensures that all DOM elements are loaded before your javascript is loaded.

When it doesn't matter

Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. the DOM ready event also allows you more flexibility to run scripts on different parts of the page. For example:

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

will run because the map div has been loaded before the script runs. In fact, you can get some pretty good performance improvements by placing your scripts at the bottom of the page.

When it does matter

However, if you are loading your scripts in the <head> element, most of your DOM has not loaded. This example will not work:

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

will not, since the map div has not been loaded.

A safe solution

You can avoid this by simply wait until the entire DOM has loaded:

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

There are plenty of articles that explain this, as well as the jQuery documentation itself.

Question 2

By modern "best practice", it's like this:

Put scripts in the <head> when they should happen before the page starts being rendered. Examples are things like HTML 5 shim libraries or Modernizr.
Put scripts in "ready" handlers when there's limited control over how the script is imported. Things like utilities that can be included on a page to unobtrusively add features generally use "ready" handlers because they can't be sure of how they'll be used.
Put scripts at the end of the <body> if you can get away with it in all other cases.

Sometimes you end up with dependencies in pages that require things that you'd otherwise like to load at the end of the body element. That's an undesirable situation, but if you can't avoid it that can force scripts to be loaded in the <head> instead of at the end of the <body>.

It's good to load things at the end of the document because browsers evaluate the contents of <script> tags when they load them. (There are some "modern" ways to avoid this, but that's getting into more complicated territory.)

The decision of when to use "ready" handlers (or "load" handlers, for that matter) is a little different than the decision about where to put the <script> tag. If you've got intra-page widgets from a server-side template system that generate (undesirable, but what can you do?) jQuery references for example, then you need to import jQuery at the top of the page, even though other code may defer initialization to "ready" handlers. That is to say, the decision about when to use "ready" has to do with whether your script is willing to rely on being imported into a page at the right point, or if it wants to ensure that the right thing happens regardless of where its <script> tag is placed.

Question 3

It is a matter of when you need the code to be executed.

If you are going to manipulate the DOM tree (e.g. move elements around/ show-hide etc) and you put your code in the head of your document, your elements will not be there when your code is executed, therefore your code will not work.

In that case you can put your code in the head of your document and invoke it when the document DOM is ready, with $(document).ready()

Putting code at the end of your document is rarely necessary, one occasion I can think of is google plus +1 button, that requires you to place a script after the last +1 button, so you just stick it to the end of your document to be sure.