Object Oriented JavaScript

Oct2308Oct 23, 08

A common failure among beginning JavaScript programmers is to underestimate the complexity of JavaScript as a viable language. The structure exists in JavaScript to create complex and dynamic objects, and simplify your everyday coding.

Object-Oriented Programming (or "OOP") is a method of application design that uses "objects" and their interactions. These "objects" can be likened to boxes of different shapes an sizes, each one duplicable as a completely separate entity. The first step to create an object is to define the structure and the inner properties upon which it will be formed. In JavaScript, we define objects the same way we create static functions:

function objectName() {
// function body

Once the name for our new object is defined (in the example, the object was give the name "objectName"), we need to create internal variables for the function to use. To associate a variable with it's parent function, we have to create it using the "this" keyword. From above, we replace the "// function body" with something like the following:

this.x = 8;
this.y = 10;

The same technique is used to associate functions with an object:
this.func = function() {
alert("Hello, World!");
return true;

And that's the basic outline for our tutorial's object. Your likely wondering why this is any simpler than just writing JavaScript like you normally would. The beauty of objects is we can create "instances" of them, using the new keyword. Each time we create an instance of the object, it makes a whole new copy of that structure we created, and we are given the ability to manipulate it as one single entity. Think of it as defining the height and width of a box, and then saying "I want one of those boxes". Conveniently, we gave our object two integer variables called x and y, which we can pretend is the box's width and height. Let's look at the code used to create an instance of our object, "objectName":

var box1 = new objectName();

So, now we can refer to the new instance of "objectName" using the variable "box1". The second line of code does something interesting - it displays the x variable from box1 on the screen. Notice how x was accessed from [u]outside[/u] the object's structure definition. Instead of using the "this" keyword, we replace that with "box1", which is the name of the instance we created. When we were making the structure for our object "objectName", the keyword "this" referred to "objectName" - but in a special way, so that each instance of the object has it's own separate x inside it! Let's see the entire process of creating an object's structure ("Box"), then creating an instance of the object ("myBox") and accessing a value from the new instance:

// Create the structure:
function Box() {
this.Height = 80;
this.Width = 150;

// Create an instance of "Box", call it "myBox":
var myBox = new Box();

// Now alert myBox's "Height" property:

Congratulations! You just learned why some websites load much, much faster than others, and seem to respond better to mouse input and other things. If you feel good about yourself, wrap your head around the snippet of the ShutterbOrg object structure below:

function ShutterbOrgClass() {
this.version = "1.1.2";
this.editors = new Array();

ShutterbOrgClass.prototype.CreateNew = function(args) {

if(!args || !args.constructor || (args.constructor!=Object && args.constructor!=Function))
args = {};

if(this.wizard && this.wizard.Controls)

if(args.nofocus!=true && this.editors.length==1 && this.editors[0].value.replace("<br />","").length==0) {
return false;

var ph = document.getElementById("editor_placeholder");

var form = document.createElement("form");
/* snip */

var editor = new Editor("shutterborg_editor_"+this.editors.length, "<br />", "http://shutterb.org/themes/default/style.css", null, "UTF-8", "", ["imagesuploader"], null);
editor.enableCleanHTML = true;
window.setTimeout("ShutterbOrg.editors["+this.editors.length+"].htmlview.focus();", 100);

return true;

ShutterbOrgClass.prototype.OpenFromDisk = function() {
/* snip */

ShutterbOrgClass.prototype.OpenFromWeb = function() {
/* snip */

ShutterbOrg = new ShutterbOrgClass();

About Jason Miller:

I am a JavaScript developer from Waterloo, Ontario, Canada. When I am not typing green code onto a black screen, you might find me at the nearest coffee pub checking out the brew. I run a internet firm called developIT and maintain blogs and web apps when I can.
Leave a Comment

Post Comment