Javascript (window.onload events)

For my engineering project I've had to use various different languages (C++, HTML, PHP, Javascript to name a few), I thought that if I occasionally blogged about different things that I'm learning, not in any particular order but just interesting points of reference (like my post on HTTPS) then I could assist my learning and hopefully help any others who are browsing the Internet looking for some reference material.

Window Onload Events In Javascript

One very common approach to having a script method run when a page loads is to attach a method to the window.onload event. However before I started investigating this, I found it very useful to remind myself what objects and methods actually are in Javascript.

Objects and Methods

A method in javascript is a special kind of function that comes with using an object orientated language. They are functions that belong to objects which means that they are sometimes called "member functions" and they are designed to reduce the amount of repeat programming that is required by not applying themselves to a specifically named object (Object1, object2, object3 etc..) but they can operate directly on the properties of the object that they belong to.
For example.

watch.minutes

The property 'minutes' is attached to the object 'watch' using a concatenation, what we then do is increase it's value by 5 each time the object is called.

if (watch.minutes > 59) { watch.minutes -= 60; watch.hours += 1; }

Now what happens is; IF the watch.minutes property exceeds 59, then we subtract 60 from watch.minutes and increase the watch.hours property by 1.

So now that we've had a brief overview of objects and methods (there are always a few other ways of writing all of these, many can be found online) it's time to move onto the window.onload event.

window.onload
Some scripts require that you run something immediately after the web page finishes loading. The normal way to do this is to add an onload attribute to the body tag. You don't have to do it that way though, you can set up a global event handler to do it instead.

This is done for two reasons, with a global event handler it is easier to add the code to webpages, rather than having to edit the body tag. Secondly if the event handler is added to an external Javascript file attached to the page, then you may not need to edit the page at all.

However, global event handlers do require that you use them to call a function, and not have them execute code directly. This is done because we probably want to refer to the page content itself and we can't do that until that content exists on the client-side to be referenced.

An example of how this event can be triggered is below:

function init(){ ...code... } window.onload=init;

Here the function init() is defined first, then it is called and executed using the window.onload event handler. Instead of assigning a predefined function you can also assign a 'nameless' function to the event handler:

window.onload=function(){ ...code... }

Or use a function() constructor:

window.onload=new Function("...code...");

Despite it's apparent usefulness there are actually many situations in which using the window.onload event is not the best method, from what I have briefly read Modern Ajax frameworks have now introduced the idea of a 'document ready' event. This is an event that will fire when the document is ready to have DOM (I'll do an article about the DOM at a later date) manipulations performed on it. The "onload" event fires only after EVERYTHING on the page has loaded. The jQuery framework is a good place to start with document.ready functions because it doesn't change any of Javascript's core functionality, and will generally stay out of your way and let you do things as you like when you want to.


I find this little investigation to be really useful in helping me clarify a few things, it's presented me with a load more questions to investigate, but that's the process of learning! More information on Javascript basics and the window.onload event handler can be found across the web.