PDA

View Full Version : Location of JavaScript

hkgray
10-16-2002, 04:53 AM
Dear all,

I found that sometimes the script was put in head, sometimes in body and sometimes between head and body! Could you advise me what is the different between put the JavaScript or function in these place?

Thanks
Raymonds
beetle
10-16-2002, 05:04 AM
None really, except that if the script accesses objects on the page, the page must be fully loaded, or the script must appear later in the source code than the object which it trying to access.

Examples:<html>
<head>
<script>
alert(document.forms[0].name);
</script>
</head>

<body>
<form name="form1">
</form>
</body>
</html>As you can see the example above, the alert in the script tries to tell us the name of the form, but it cannot because the form isn't loaded at the time the script requests it. Just like reading a book...you don't know what's in Chapter 2 from having read Chapter 1. Now, again<html>
<head>
</head>

<body>
<form name="form1">
</form>
<script>
alert(document.forms[0].name);
</script>
</body>
</html>Now, the script appears later in the source code, and the form exists at this point, so the alert will correctly tell us the form's name.

Code is oftentimes placed in the head for organizational purposes, especially when it is all functions (or, code that has to be activated, so it does run immediately when read...) such as this example<html>
<head>
<script>
funtion alertForm() {
alert(document.forms[0].name);
}
</script>
</head>

<body onLoad="alertForm();">
<form name="form1">
</form>
</body>
</html>Here, the code is stuffed into a function, which we don't call until the body is completely loaded, which includes the form (I colored the entire body in blue) so again, we are properly alerted to the name of the form.
adios
10-16-2002, 05:09 AM
Between </head> and <body> : Wrong (but works, anyway).

The .html file is read from the top down - from <html> to </html>. When a <script></script> block is encountered (even if it's an external - <script src="..."> - JS), the script is processed at that time, before parsing continues. If all the code is inside functions, and none of the functions are called in earlier blocks of script, it really shouldn't make a difference where you put them. Top-level JS statements - ouside of functions - are executed immediately; so placement may well be critical. Any document.write()s will be output to the document (page) then and there, as if they were part of the HTML, so their placement is as significant as if they were hardcoded HTML. Putting your code in the <head>er is generally neater, less likely to cause problems with undefined routines/data, and easier to edit.
joh6nn
10-16-2002, 05:16 AM
there's not much difference. it's a matter of how you want the javascript to run. javascript runs at whatever point in the document, where it's written. so, if you want to make sure that a function is defined before a piece of html, you put the javascript in the head, so that it will be run first. if you want the javascript to dynamically write some of the html, you put in the body. get it?