Where to add your Javascript

So you've decided to add a JavaScript to your page but you are not sure where to add it in your page source.

If you have copied the JavaScript from a JavaScript repository site or from a book then the instructions with the script may suggest where to put it. These suggestions are based on the knowledge of the person who wrote the script and they may not have picked the best placement for their script. I have one book that mistakenly suggests placing scripts between the </head> and <body> tags in your page which is a completely invalid coding practice since all of the code between your <html> and </html> tags should be inside of either the head or body container tag pairs (or inside the <frameset> container tag pair if you are using frames).

So where is the correct place to put your javascript?

Well, firstly I suggest that you load JavaScript separately from your page and use

 <script type="text/javascript" src="myscript.js"></script> 

to reference the script from within your page. This allows you to do away with the <!-- --> around the script that used to be used to hide it from browsers such as Internet Explorer 2 that don't understand the script tag (and which the xhtml standard says should comment out the whole script. This also allows you to use the script on multiple pages without having to include a complete copy of the script in each page. It also allows you to use the script to generate code to be included in each page and which can be globally changed across your site just by amending the script rather than having to modify each page. Doing this actually becomes more useful as your site grows to more pages and so its useful to get in the habit of linking to your scripts in this way from the start even though it may not seem worth the trouble if you only have one or two pages.

So all we have to do to start with is to save each piece of JavaScript that we want loaded to a different place in our page(s) or which we only want to use on some pages into its own .js file and load them all to our site. You can call these files whatever you like as long as the name ends with .js but I suggest that you use a descriptive name using only letters and numbers. Now all we need to do to include the script into our page is to use the script code above substituting the filename for myscript.js.

But where in the page source should these statements be placed? I still haven't answered that question so I'd better do so now.

Take a look at your JavaScript code. Does the code contain functions? If so then all of these functions should be within a script that should be placed just before the body tag at the bottom of your page.

The next thing to check for is any code that you want to ensure gets executed before the page gets loaded (eg. a test for if your non-frames page is loading inside someone's frameset). This code needs to be in a script within the head section of your page below the title and any meta tags and link statements.

If the code isn't contained within functions then does it contain either document.write or document.writeln statements or does it call functions that contain these statements? If so then the script really ought to be rewritten to use innerHTML or DOM commands instead but if you can't do that (for example because it iis a Google AdSense script) then the tag to link to this script needs to be placed within the body section of your page at the point in your page source where you want the html code (or text) to appear that is being written to your page by this javascript. If you don't want all of the document.write(ln) statements to write to the same point in your page you will need to split them into separate files so that you can link each to the appropriate point in your page.

To execute a script after the page has finished loading you need to place the script at the bottom of the page. If the script is to be executed when the visitor performs some other activity on your page then place the script within a function and call it from the appropriate JavaScript event listener from within the script itself.

Do you have any JavaScript that you haven't yet managed to place? Probably not but if you do you need to decide whether the script is more appropriately placed in the head section of your page where it will execute before the page gets loaded or should it be placed within the body section of the page where it will execute when the page source has loaded to the point in the page where you have included your script. Generally if the script can't go just before the </body> tag it probably means that the script is using a really old approach and should be rewritten so that it can be run from the bottom of the page.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow