Suppose you have a mouseover / click image swap script. You want to keep track of the status of each image, whether it is normal, mouseovered or clicked. In addition you want to be able to reach this status by image name. So if you have an image named ‘Home ‘ you want to read out
and get one of the values ‘normal ‘, ‘mouseover ‘ or ‘clicked ‘, corresponding to the current status of the image.
Since the only other programming languages I know are Commodore 64 Basic (which is not object oriented, to put it mildly) and Perl (which doesn’t need to be object oriented) and since I don’t have any formal training in programming I cannot write a general introduction to objects and object oriented programming. Therefore a quick overview will have to suffice.
Methods and properties
- Methods are ‘things that do something’, they can be recognized by their brackets (). When you call them, like object.method(). something happens.
- Properties are ‘things that are something’. They have a value, for instance a number, a string or a Boolean value. When you call them, like object.property. you get (or set) this value.
Likewise, if you ask for the innerHeight of a page, you access a property of the window object and if you define a variable of your own you really add a new property to the window object.
Defining an object and properties
But now we want to create an object of our own. This is simple:
Now we have initialized our theStatus object and we can start adding properties (in this example we don’t need methods). What we want is to create one property for each image on the page. We could do
All this is very useful, but using this notation we encounter problems later on. Suppose we want to create a property of theStatus for each image on the page. The property should have the same name as the image and its value should be ‘normal’.
We go through the entire images array of the page, take the name of each image and then try to create a new property with the same name. But the code above doesn’t work. Each time you do
can also be read or written by calling
Thus, you can access each property by entering the name of the property as a string into this array. Such an array associates each key with a value (in this case the key Home is associated with the value normal ). In the Perl programming language it is also called a hash .
You see this behaviour with common objects like a form. You can access a form by performing either of these DOM calls:
So when we want to set the status of each image to ‘normal’ in our object, we do
and it works. Now theName (a string) is put into the brackets  where a string is expected. So you create a new key/value pair, which is the same as a new property with a value.
for (var i in object)
for (var i in object) is equivalent to Perl foreach $key (keys %hash) .
Just as you can go through each element of a normal array by
you can also go through each element of an associative array. Suppose you want to go through the status values of all images. If the status of the image is ‘mouseover ‘ you want to call a function callFn() and pass the image name to it. You can of course tediously write out everything:
But this quickly leads to immense scripts. Besides, if you rename an image later on you also have to change a line of code and of course you forget, so you get errors etc.
you go through all properties of the theStatus object (= all keys in the associative array theStatus ). The variable i succesively becomes the name of each property of the object (key of the associative array) so you can do something with theStatus[i] and it is done to each property.
In this case, if an image status has the value ‘mouseover ‘ you call callFn() and pass it the key (the name of the image).
A tiny script for your testing pleasure. If you click this link this script is executed: