Learn Javascript
Object Oriented Javascript
Join the Discussion
More of this Tutorial
Introduction
In the early tutorials in this series we learned about structured programming using javascript with IF and CASE statements, FOR and WHILE loops and FUNCTION calls. Next we learned about the predefined CLASSES and how to create OBJECTS belonging to those classes. We then went on to cover the Document Object Model and how to access the METHODS and PROPERTIES of objects within our web page. Recent tutorials have covered detecting EVENTS and using them to trigger Javascript processing.
With the various object processing that we have looked at we have touched on Object Oriented processing but the majority of what we ave looked at in coding uses structured rather than object oriented techniques. The majority of Javascript code that you will find out on the web in the various libraries of such code will be coded this way. The reason for this is that the majority of Javascript programmers probably don't even realize that Javascript is an object oriented language.
Object Oriented Programming
So what is an object oriented programming language as compared to (say) a structured language (and Javascript is one of the few languages that is both)? Well one of the most obvious differences is the use of different terminology to describe the parts of our code. In a structured program we have variables. In an object oriented program we have objects. In a structured program we have functions. In an object oriented program we have methods.
At this point it might sound like we are just using different terms to refer to the same things and to some extent we are. The main difference between a structured and an object oriented program is how we use the components of our program.
In an object oriented program we have classes such as the predefined array class. We create objects within that class using what is called a constructor. In Javascript the constructor is run using code like this:
This runs the constructor method for the Array class (or whatever class we reference) to create an object of that type.
A class contains definitions for the properties that the objects belonging to the class will have as well as methods that can be run for that object in order to change the values of the properties.
When we look at an object (whether one we have defined from a predefined class or one that is part of the DOM) then we see that each of the properties defined for that object has a value (or state to use the object oriented term). We can also run the methods associated with the object in order to change the state of one or more of the properties.
We have already seen how to do this when we looked at the tutorials covering predefined classes and the DOM. The sections of code where we perform such processing are object oriented code. To make an object oriented program we need to code the rest of the program the same way. This means that we need to create our own classes and define the properties and methods associated with them We can then construct our own objects derived from those classes and manipulate the properties and methods for those objects the same way that we do for all objects.
Yes we will still have if statements and loops, all programs need those to control what the code is to do but the sections of code that contain these constructs will be relatively short and most will be contained within methods belonging to one of the objects.
Generic Objects
There is one predefined class that we haven't looked at yet. This is the Object class. This class is used to define generic objects. These are basically stand alone objects that are the only one of their type and for which a separate class definition does not exist. We can define such a generic object like this:
Having defined the object we can now create properties belonging to the new object like this:
uri.ext = '';
In this example we have created two properties and set both equal to empty text strings. We can of course create as many properties as we want and assign whatever we want to them.
It is also possible to add a method to a generic object. Here is an example:
Using What You Know
In an earlier tutorial we looked at how a function can return a value to the calling code. In all of the cases that we looked at we were only able to return one value. There appeared to be no way of returning more than one value from a function. This is where creating a generic object can be really useful because that object can be the value that is being returned from the function and since the object can have any number of properties we can use such an object to return as many values as we need to from any function that we write.
