Object Oriented Programming is a relatively new concept in the computing field. It is supposed to make life simpler and easier for the programmer, however, the newly initiated get confused quickly. I too was disconcerted at the beginning even though I had a good programming experience with BASIC and FORTRAN. The concept is actually quite simple and if you read this session well, I assure you that you will soon grasp it.
Note: JavaScript is not a true Object Oriented language as C++ or Java but rather an Object Based language.
Its a wild world out there
Before I start describing objects in programming aspect, let’s look some pictures.
Here are two ferocious bears and a docile bamboo eating panda. They are animals that we find in a zoo (Its not pleasant to come across the grizzly in the wild)
Are animals objects?
Yes! The Wildlife Foundation might disapprove of this… but then, I guess it’s harmless if we just take it as a analogy!
We see objects all around us, the chair we sit on, the table on which our computer is placed and even other humans.
Object Properties
To describe a bear or a panda, we specify its characteristics such as color, size, weight, eating habits, the place where its found etc. These are properties of the animal.
Polar Bears
Color: White
Diet: Fish, seals… non-vegetarian
Location: The North Tundra
Panda
Color: White and Black
Diet: Bamboo shoots
Location: China
Object Methods
So what are the things a polar bear can do? It eats, runs, swims, hibernates in the winter season etc. A Panda also eats and runs but it can also climbs trees and seldom swims!
Such actions are the functions of the animal object. Functions in object programming are called methods.
Thus, an object can be anything, a living being, an inanimate item, a city or even an idea. An object is described by its characteristics called properties and can preform certain functions called methods.
JavaScript Objects
Objects in JavaScript are software entities such as the browser window or an HTML document.
Let’s describe the browser window object and some its properties and methods.
A browser window object is created whenever a document is loaded in a browser.
Its Properties
- Width
- Height
- Name
- The URL of the document it displays
Its Methods
- Open
- Close
- Resize
So, you can define a window object with its properties such as width, height, name etc. The behaviour of the window can be controlled using its methods such as open, close, resize etc.
The document displayed by the browser window object is itself an object with its own properties and methods. Thus, the document object is contained in the window object.
Consider an analogy of our galaxy (Milky Way) object that consists of other objects such as our solar system which further contains objects such as the Earth and the Sun. An easy way to describe the Earth to an alien residing in some other galaxy would be:
Milky way – Solar System – Earth
Note that the above can also be written as:
Universe – Milky Way – Solar System – Earth
But since there is only one universe (hope so!), we can leave out the redundant term. Thus, the Milky Way is a parent object to the Solar System which is itself a parent to the Earth.
JavaScript uses the period to separate the parent object from its components. Hence, to refer to the document object we use the following notation:
window.document
A HTML Form called contactform inside the document might be referred as:
window.document.contactform
For convenience, webdevelopers name HTML elements using the NAME attribute. Thus, a text field named address located in a form named contactform is refered as:
window.document.contactform.address
or a radio button called answer as:
window.document.contactform.answer
or text field called name as:
window.document.contactform.name
As you would have noticed, the ‘window’ object is the parent to all other objects, so it is not necessary to explicitly specify it.
