How do you add a JavaScript to your page?

JavaScript can be added to a web page in several different ways but there is only one way that should be used when adding new scripts (the other ways used to be necessary back when JavaScript was first introduced and didn't have a proper way to interact with the web page).

JavaScript can be added into the head section of the page in which case any executable statements will be executed before the page is loaded. They can be added to the body of the page in which case statements will execute before the rest of the page loads. Any external JavaScript referenced in the head will also delay the loading of any of the other files in the page. You should therefore only include your script in the head of the page if the script is deciding whether to allow the page to load at all. For a script to belong there it should include code that will optionally stop loading the current page and start loading a replacement.

JavaScript can be embedded into the page itself in which case it will be preceded by a <script type="text/javascript"; statement and followed by a </script> statement. JavaScript so contained used to be contained within an HTML comment <!-- --> so that Internet Explorer 2 and Netscape 1 do not attempt to process the code as HTML but as those browsers are long dead there is no need to do that any more and in fact doing so can cause problems with some content. You avoid this completely if you place the script in a separate file and reference it by adding a src attribute to your script tag - this also means you can include the same script in multiple pages simply by specifying a script tag in each that references the JavaScript file.. You might also see language attribute in the script tag in some web pages - this attribute was done away with long ago and so its use generally indicates that the script is intended for early versions of Netscape rather than for modern browsers.

JavaScript event handlers can be embedded directly into your HTML code. This is not a good idea though for several reasons including that where the script is used in multiple pages you need to include that code in each page rather than just once as would be the case if you put it with the rest of the JavaScript. Also event handlers overwrite one another and so using event handlers at all is not a good idea as it can lead to clashes where adding a second script to the page stops both from working. The better solution is to use event listeners in the separate JavaScript file.

Scripts can be attached anywhere in the body of the web page where thety will run when the loading of the page reaches that point. This is the spot where you must place scripts that contain antiquated document.write statements intended for Netscape 3 and earlier browsers rather than using innerHTML or the document object model commands supported by modern browsers. If you have control over the content of the script then you should never use document.write in your scripts as there are many possible problems with them plus they mean that your scripts are jumbled with the HTML instead of being kept separate.

The ideal way to attach almost all modern JavaScript is with a script tag immediately before the </body> tag which references the javaScript from an external file and to have no other references to JavaScript in the HTML whatsoever. This will result in the web page loading faster because the loading of the rest of the page will not be delayed while JavaScript is loading. Also the JavaScript will be able to run sooner because the HTML that the script references is already loaded prior to the script tag being reached whereas the alternative of waiting for the load event to trigger means that the script waits for all the other files associated with the page to load even though it isn't going to reference any of them.. It also provides a better experience for the small group of visitors who don't have JavaScript enabled in their browser as the page will load faster for them too as it will not need to waste time downloading any JavaScript that isn't going to be run anyway. Finally, keeping your JavaScript separate from the HTML makes it easier to maintain both of them.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow