Objects in JavaScript
JavaScript is an object oriented language. However, in practice objects defined by the programmer himself are rarely used, except in complex DOM API's. Of course such standard objects as window and document and their numerous offspring are very important, but they are defined by the browser, not by the programmer.
I myself have written JavaScript for more than three years without ever defining an object. The technique explained on this page is the firstpractical use of programmer-defined objects I've found.
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.
Normal JavaScript functions are also methods (hence the brackets). If you do
document.write('text')
you execute the pre-defined write() method of the document object. If you write your own functions you add methods to the window object, the parent of all other JavaScript objects.
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.
So you already use methods and properties in everyday JavaScripting. Since most of these are preprogrammed functions and variables, you usually don't need to worry about the objects themselves, they're just a kind of 'black boxes' that contain useful stuff. The methods and properties (functions and variables) that you define yourself are usually added to the window object.
Defining an object and properties
But now we want to create an object of our own. This is simple:
var theStatus = new Object;
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
theStatus.Home = 'normal';
Now we have added a new property Home to our object and set its value to the string 'normal'. (Remember that JavaScript is case sensitive, so the property home does not exist, only Home.)
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 cannot do:
var x = document.images;
for (var i=0;i<x.length;i++)
{
var theName = x[i].name;
theStatus.theName = '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
theStatus.theName = 'normal';
JavaScript faithfully creates a new property named theName and sets its value to 'normal'. After executing this script you have only one property theName. This is not what we want, we want one property for each image.
Associative arrays
So we have to use one of JavaScript's minor mysteries. In JavaScript, objects are also associative arrays (or hashes). That is, the property
theStatus.Home
can also be read or written by calling
theStatus['Home']
Thus, you can access each property by entering the name of the property as a string into this array. Such an array associates each keywith a value (in this case the key Home is associated with the valuenormal). In the Perl programming language it is also called a hash.
Unlike Perl, which requires you to create such an associative array explicitly, JavaScript automatically creates a associative array for each object.
You see this behaviour with common objects like a form. You can access a form by performing either of these DOM calls:
document.forms['theForm'] document.forms.theForm
(You can also use document.theForm but that's a special case, not regular behaviour of JavaScript objects/associative arrays).
So when we want to set the status of each image to 'normal' in our object, we do
var x = document.images; for (var i=0;i<x.length;i++) { var theName = x[i].name; theStatus[theName] = 'normal'; }
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.
All this is JavaScript magic at its fullest. I don't completely understand what I'm doing either, but it works just fine. Basically you now have the power to let one name or string refer to another one.