Placing JavaScript correctly
How often do you visit websites with script errors? Frequently my Firebug Firefox Add-On lights up with “undefined” errors when I visit JavaScript intensive websites. Sure it doesn’t affect the functionality of the site (usually) but it’s just plain bad form, specially when it’s so easily avoided. Where you place your JavaScript should depend on how it is used in your site - Here’s some simple rules of thumb for placing JavScripts:
If the script needs to be run before the page is fully loaded to do some pre-processing for example such as browser and
resolution checks place the script in the header as this is always loaded before content in the body:
<head>
<style type="text/css" media="all">
@import "css/layout.css"
</style>
<script language='text/javascript'>
<!--
/*
For the purpose of example this script would load a stylesheet
based on the screen resolution.
*/
var width = screen.width;
var height = screen.height;
if (width < 1024) {
document.write('<style type="text/css" media="all">@import "css/layout800×600.css"');
} else {
document.write('<style type="text/css" media="all">@import "css/layout1024×768.css"</style>');
}
// -->
</script>
</head>
If the script manipulates html content the DOM must exist prior to the script execution. To make sure this is the case you can use the native window.onload() method which fires when the total document is loaded:
<head>
<script language='text/javascript'>
<!--
/*
For the purpose of example this script would create
a menu for the site
*/
function init_menu() {
// do stuff here
}
window.onload = init_menu();
//-->
</script></head>
Or placing you could place your script /function call later in the document - usually just before the closing body tag:
<script language='text/javascript'> <!-- init_menu(); // --> </script>
I typically use the latter (before the closing body tag) because you can simply call multiple scripts relatively safely and avoid any window.onload() clashes since it is very possible other third-party scripts may be using this.
Update:
In addition to the above methods to make sure the DOM is loaded you can use the Prototype libraries “DOM ready”, dom:loaded event observer (which I have been using more recently) since it fires once the page markup has completed but before all the images etc have loaded:
document.observe('dom:loaded', function(){
//any code here will be read once the DOM is ready, before images are loaded etc
});
And lastly, it’s always a good idea to check the DOM element(s) your targeting exist before you start manipulating them:
<script language='text/javascript'>
<!--
var glider = document.getElementById('glider');
if (glider != undefined) {
// do stuff
}
// -->
</script>
