Javascript includes and code placement...

[xhyperx]

I feel like Im doing good, in terms of the syntax, and some other esoteric aspects of Javascript...but somethings are not quite intuitive, and I don't find any reference info on these questions:1) I see some code examples placing statements such as <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo..js"></script> in the HEAD section...and sometimes I see statements like that in the BODY??? Obviously there is a time to do it one way or the other.... what is the deciding factor, and what is the impact.2) Likewise for code... I see some code <script type="text/javascript"> blah blah blah </script> placed in the HEAD and some times code placed in the BODY...I can assume that sometimes when you want code to actually execute at a certain time you might choose one over the other... But in terms of function definitions, does it matter? Also, what is the condition for when I would want code (outside of a function) to execute in the HEAD versus teh BODY?Thanks in advance for any useful insights offered...

[jeffman]

The normal location is the head.Sometimes a script is embedded in the body because it actually writes text or HTML in that exact location. You might do that if you want to write the current time or something stored in a cookie, like the user's name. This is kind of an old-fashioned technique, typically replaced by the next technique:Sometimes a script is embedded in the body because it wants to update the contents of an HTML element while the page is downloading. If the script were in the head, it would not be able to execute until the body fired an onload event, because there is no other way to be sure the element in question has been written into the DOM. If you place the script immediately after the element that needs updating, you can be sure that the element has been placed in the DOM, and the updates will occur properly.

[thescientist]

or you just put all your scripts at the end of the body.

[xhyperx]

Thats for the replies folks...Just a last review on your perspectives.So the head is executed after load, which includes the Body being processed...ie: all elements placed into the DOM.I've seen quite a few posts on other forums unrelated to my question, but the writer/coder states that they have a habit of putting their script code just before the </body>...Would that be better, equivalent, or worse than putting my script in the head?Oh BTW... The level of detail you've explained here...where would I find this info online...?

[jeffman]

A script in the head DOES NOT execute after load. Any statement in any script's global space (ie, not in a function) executes as soon as the browser reads it. That is why many scripts have structures like this:

function init () {   // statement   // statement   // etc.	}window.onload = init;

Assigning the init function to window.onload happens while the script downloads. init is executed after the onload event fires.

[thescientist]

Oh BTW... The level of detail you've explained here...where would I find this info online...?

http://www.w3schools.com/js/js_whereto.asp

[ShadowMage]

So the head is executed after load, which includes the Body being processed...ie: all elements placed into the DOM.

Nope. Like DD explained above, anything in the global scope (ie, the stuff directly inside the script tags and not in a function or event handler) will execute as soon as it is read/downloaded. DD shows an example of creating a script that will run after the DOM has finished loading.

I've seen quite a few posts on other forums unrelated to my question, but the writer/coder states that they have a habit of putting their script code just before the </body>...Would that be better, equivalent, or worse than putting my script in the head?

The main difference is that all of the elements on the page have already loaded so there is no real need to put script in an onload event like DD showed you. Other than that, it's pretty much the same. A lot of people suggest putting scripts at the end of the body for loading time's sake, but I've never really noticed any significant differences. Of course, my development is all done on an intranet with a super fast connection, so that could be why I don't see a difference. I personally prefer to keep my scripts in the head for the sake of organization.

[jeffman]

Another possible reason why people put scripts at the end is that attaching methods to the onload event can get dicey. I showed you the traditional technique because it is the most cross-browser reliable. It is also a little dangerous if you include 3rd-party libraries. If they sloppily use the same technique, one method will overwrite the other. There is a DOM technique for doing the same thing that has some advantages, but older versions of IE require a different technique, so you have to add some cross-browser code that is a small hassle. Putting multiple scripts at the end usually avoids all that.

[justsomeguy]

Putting scripts in the body is also a good way to show application startup messages while each script file downloads, since it waits for one script to download before going on to the next script element.

	<div id="loading-mask" style=""></div>	<div id="loading">	  <div class="loading-indicator"><img src="images/loading.gif" style="margin-right:8px; float:left; vertical-align:top; width: 32px; height: 32px;"><div id="loading-msg">Loading...<br><div id="loading-status"></div></div></div>	</div>	<script type="text/javascript">	document.getElementById("loading-mask").style.display = "block";	document.getElementById("loading").style.display = "block";	</script>	<script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading base components";</script>	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>	<script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading core API";</script>	<script type="text/javascript" src="ext/ext-all.js"></script>	<script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading extensions";</script>	<script type="text/javascript" src="include/patch.js"></script>	<script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading LMS base";</script>	<script type="text/javascript" src="include/lms.js"></script>	<script type="text/javascript" src="include/language.js"></script>	<script type="text/javascript" src="include/custom.js"></script>	<script type="text/javascript">document.getElementById("loading-status").innerHTML = "Starting";</script>

[ShadowMage]

Putting scripts in the body is also a good way to show application startup messages while each script file downloads, since it waits for one script to download before going on to the next script element.

Ah, that's a nifty trick. Never thought of that.

[thescientist]

I like that too!