The Basics of Object-Oriented JavaScript

Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet.
While in the past it was a common argument that JavaScript was a basic language and was very ‘slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

JavaScript can have all that an Object-Orientated language has to offer, albeit with some extra effort outside of the scope of this article.

Let’s Create an Object

view plaincopy to clipboardprint?

1. function myObject(){  
2. };  

    function myObject(){
    };

Congratulations, you just created an object. There are two ways to
create a JavaScript object: they are ‘Constructor functions’ and
‘Literal notation’. The one above is a Constructor function,
I’ll explain what the difference is shortly, but before I do, here
is what an Object definition looks like using literal notation.

view plaincopy to clipboardprint?

1. var myObject = {  
2. };  

    var myObject = {
    };

Literal is a preferred option for name spacing so that your JavaScript
code doesn’t interfere (or vice versa) with other scripts running on the
page and also if you are using this object as a single object and not requiring
more than one instance of the object, whereas Constructor function type
notation is preferred if you need to do some initial work before the object
is created or require multiple instances of the object where each instance
can be changed during the lifetime of the script. Let’s continue to build
on both our objects simultaneously so we can observe what the differences are.

Defining Methods and Properties

Constructor version:

view plaincopy to clipboardprint?

1. function myObject(){  
2.     this.iAm = 'an object';  
3.     this.whatAmI = function(){  
4.         alert('I am ' + this.iAm);  
5.     };  
6. };  

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Literal version:

view plaincopy to clipboardprint?

1. var myObject = {  
2.     iAm : 'an object',  
3.     whatAmI : function(){  
4.         alert('I am ' + this.iAm);  
5.     }  
6. }  

    var myObject = {
        iAm : 'an object',
        whatAmI : function(){
            alert('I am ' + this.iAm);
        }
    }

For each of the objects we have created a property ‘iAm’ which contains a
string value that is used in our objects method ‘whatAmI’ which alerts a message.

Properties are variables created inside an object and methods are functions created inside an object.

Now is probably as good a time as any to explain how to use properties and
methods (although you would already have done so if you are familiar with a library).
To use a property first you type what object it belongs to – so in this case it’s myObject –
and then to reference its internal properties, you put a full stop and then the name of the
property so it will eventually look like myObject.iAm (this will return ‘an object’).
For methods, it is the same except to execute the method, as with any function, you must
put parenthesis after it; otherwise you will just be returning a reference to the function
and not what the function actually returns. So it will look like myObject.whatAmI()
(this will alert ‘I am an object’).

Now for the differences:

• The constructor object has its properties and methods defined with the
  keyword ‘this’ in front of it, whereas the literal version does not.
• In the constructor object the properties/methods have their ‘values’
  defined after an equal sign ‘=’ whereas in the literal version, they are
  defined after a colon ‘:’.
• The constructor function can have (optional) semi-colons ‘;’ at the
  end of each property/method declaration whereas in the literal version
  if you have more than one property or method, they MUST be separated with
  a comma ‘,’, and they CANNOT have semi-colons after them, otherwise JavaScript will return an error.

There is also a difference between the way these two types of object declarations are used.
To use a literally notated object, you simply use it by referencing its variable name,
so wherever it is required you call it by typing;

1. myObject.whatAmI();  

    myObject.whatAmI();

With constructor functions you need to instantiate (create a new instance of)
the object first; you do this by typing;

view plaincopy to clipboardprint?

1. var myNewObject = new myObject();  
2. myNewObject.whatAmI();  

    var myNewObject = new myObject();
    myNewObject.whatAmI();

Using a Constructor Function.

Let’s use our previous constructor function and build upon it so it performs some basic
(but dynamic) operations when we instantiate it.

view plaincopy to clipboardprint?

1. function myObject(){  
2.     this.iAm = 'an object';  
3.     this.whatAmI = function(){  
4.         alert('I am ' + this.iAm);  
5.     };  
6. };  

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Just like any JavaScript function, we can use arguments with our constructor function;

view plaincopy to clipboardprint?

1. function myObject(what){  
2.     this.iAm = what;  
3.     this.whatAmI = function(language){  
4.         alert('I am ' + this.iAm + ' of the ' + language + ' language');  
5.     };  
6. };  

function myObject(what){
 this.iAm = what;
 this.whatAmI = function(language){
  alert('I am ' + this.iAm + ' of the ' + language + ' language');
 };
};

Now let’s instantiate our object and call its whatAmI method, filling in the required
fields as we do so.

view plaincopy to clipboardprint?

1. var myNewObject = new myObject('an object');  
2. myNewObject.whatAmI('JavaScript');  

    var myNewObject = new myObject('an object');
    myNewObject.whatAmI('JavaScript');

This will alert ‘I am an object of the JavaScript language.’

To Instantiate or not to Instantiate

I mentioned earlier about the differences between Object Constructors and Object Literals and that
when a change is made to an Object Literal it affects that object across the entire script, whereas when
a Constructor function is instantiated and then a change is made to that instance, it won’t affect any
other instances of that object. Let’s try an example;
First we will create an Object literal;

view plaincopy to clipboardprint?

1. var myObjectLiteral = {  
2.     myProperty : 'this is a property'  
3.    }  
4.    //alert current myProperty  
5.    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'  
6.    //change myProperty  
7.    myObjectLiteral.myProperty = 'this is a new property';  
8.    //alert current myProperty  
9.    alert(myObjectLiteral.myProperty); //this will alert 'this is a new property', as expected  

 var myObjectLiteral = {
     myProperty : 'this is a property'
    }
    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'
    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';
    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a new property', as expected

Even if you create a new variable and point it towards the object, it will have the same effect.

view plaincopy to clipboardprint?

1. var myObjectLiteral = {  
2.     myProperty : 'this is a property'  
3.    }  
4.    //alert current myProperty  
5.    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'  
6.    //define new variable with object as value  
7.    var sameObject = myObjectLiteral;  
8.    //change myProperty  
9.    myObjectLiteral.myProperty = 'this is a new property';  
10.    //alert current myProperty  
11.    alert(sameObject.myProperty); //this will still alert 'this is a new property'  

 var myObjectLiteral = {
     myProperty : 'this is a property'
    }
    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'
    //define new variable with object as value
    var sameObject = myObjectLiteral;
    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';
    //alert current myProperty
    alert(sameObject.myProperty); //this will still alert 'this is a new property'

Now let’s try a similar exercise with a Constructor function.

view plaincopy to clipboardprint?

1. //this is one other way of creating a Constructor function  
2. var myObjectConstructor = function(){  
3.     this.myProperty = 'this is a property'  
4.    }  
5.    //instantiate our Constructor  
6.    var constructorOne = new myObjectConstructor();  
7.    //instantiate a second instance of our Constructor  
8.    var constructorTwo = new myObjectConstructor();  
9.    //alert current myProperty of constructorOne instance  
10.    alert(constructorOne.myProperty); //this will alert 'this is a property'  
11.     //alert current myProperty of constructorTwo instance  
12.    alert(constructorTwo.myProperty); //this will alert 'this is a property'  

 //this is one other way of creating a Constructor function
 var myObjectConstructor = function(){
     this.myProperty = 'this is a property'
    }
    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();
    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();
    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a property'
     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will alert 'this is a property'

So as expected, both return the correct value, but let’s change the myProperty for one of the instances.

view plaincopy to clipboardprint?

1. //this is one other way of creating a Constructor function  
2. var myObjectConstructor = function(){  
3.     this.myProperty = 'this is a property'  
4.    }  
5.    //instantiate our Constructor  
6.    var constructorOne = new myObjectConstructor();  
7.    //change myProperty of the first instance  
8.    constructorOne.myProperty = 'this is a new property';  
9.    //instantiate a second instance of our Constructor  
10.    var constructorTwo = new myObjectConstructor();  
11.    //alert current myProperty of constructorOne instance  
12.    alert(constructorOne.myProperty); //this will alert 'this is a new property'  
13.     //alert current myProperty of constructorTwo instance  
14.    alert(constructorTwo.myProperty); //this will still alert 'this is a property'  

 //this is one other way of creating a Constructor function
 var myObjectConstructor = function(){
     this.myProperty = 'this is a property'
    }
    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();
    //change myProperty of the first instance
    constructorOne.myProperty = 'this is a new property';
    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();
    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a new property'
     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will still alert 'this is a property'

As you can see from this example, even though we changed the property of constructorOne
it didn’t affect myObjectConstructor and therefore didn’t affect constructorTwo. Even if
constructorTwo was instantiated before we changed the myProperty property of constructorOne,
it would still not affect the myProperty property of constructorTwo as it is a completely different
instance of the object within JavaScript’s memory.
So which one should you use? Well it depends on the situation, if you only need one object of its kind for
your script (as you will see in our example at the end of this article), then use an object literal, but if you need several instances of an object, where each instance
is independent of the other and can have different properties or methods depending on the way it’s constructed, then use a constructor function.

This and That

While explaining constructor functions, there were a lot of ‘this’ keywords being thrown around
and I figure what better time to talk about scope!
Now you might be asking ‘what is this scope you speak of’?’ Scope in JavaScript is function/object based, so that means if you’re outside
of a function, you can’t use a variable that is defined inside a function (unless you use a closure).
There is however a scope chain, which means that a function inside another function can access a
variable defined in its parent function. Let’s take a look at some example code.

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2. var var1 = 'this is global and is available to everyone';  
3. function function1(){  
4.     var var2 = 'this is only available inside function1 and function2';  
5.     function function2(){  
6.         var var3 = 'this is only available inside function2';  
7.     }  
8. }  
9. </script>  

<script type="text/javascript">
var var1 = 'this is global and is available to everyone';
function function1(){
 var var2 = 'this is only available inside function1 and function2';
 function function2(){
  var var3 = 'this is only available inside function2';
 }
}
</script>

As you can see in this example, var1 is defined in the global object
and is available to all functions and object, var2 is defined inside function1
and is available to function1 and function2, but if you try to reference it from the global object
it will give you the error ‘var2 is undefined’, var3 is only accessible to function2.

So what does ‘this’ reference? Well in a browser, ‘this’ references the window object, so technically
the window is our global object. If we’re inside an object, ‘this’ will refer to the object itself however
if you’re inside a function, this will still refer to the window object and likewise if you’re inside a method
that is within an object, ‘this’ will refer to the object.
Due to our scope chain, if we’re inside a sub-object (an object inside an object), ‘this’ will refer to
the sub-object and not the parent object.
As a side note, it’s also worth adding that when using functions like setInterval, setTimeout and eval,
when you execute a function or method via one of these, ‘this’ refers to the window object as these are methods of window, so
setInterval() and window.setInterval() are the same.
Ok now that we have that out of the way, let’s do a real world example and create a
form validation object!

Real world Usage: A Form Validation Object

First I must introduce you to the addEvent function which we will create and is a
combination of ECMAScript’s (Firefox, Safari, etc.. ) addEventListener() function and
Microsoft ActiveX Script’s attachEvent() function.

view plaincopy to clipboardprint?

1. function addEvent(to, type, fn){  
2.     if(document.addEventListener){  
3.         to.addEventListener(type, fn, false);  
4.     } else if(document.attachEvent){  
5.         to.attachEvent('on'+type, fn);  
6.     } else {  
7.         to['on'+type] = fn;  
8.     }  
9. };  

    function addEvent(to, type, fn){
        if(document.addEventListener){
            to.addEventListener(type, fn, false);
        } else if(document.attachEvent){
            to.attachEvent('on'+type, fn);
        } else {
            to['on'+type] = fn;
        }
    };

This creates a new function with three arguments, to being the DOM object we are attaching
the event to, type being the type of event and fn being the function run when
the event is triggered. It first checks whether addEventListener is supported, if so it will use that, if not it will check
for attachEvent and if all else fails you are probably using IE5 or something equally obsolete so
we will add the event directly onto its event property (note: the third option will overwrite any
existing function that may have been attached to the event property while the first two will add
it as an additional function to its event property).
Now let’s set up our document so it is similar to what you might see when you develop jQuery stuff.
In jQuery you would have;

view plaincopy to clipboardprint?

1. $(document).ready(function(){  
2.     //all our code that runs after the page is ready goes here  
3. });  

    $(document).ready(function(){
        //all our code that runs after the page is ready goes here
    });

Using our addEvent function we have;

view plaincopy to clipboardprint?

1.    addEvent(window, 'load', function(){  
2.     //all our code that runs after the page is ready goes here  
3. });  

    addEvent(window, 'load', function(){
  //all our code that runs after the page is ready goes here
 });

Now for our Form object.

view plaincopy to clipboardprint?

1. var Form = {  
2.     validClass : 'valid',  
3.     fname : {  
4.         minLength : 1,  
5.         maxLength : 15,  
6.         fieldName : 'First Name'  
7.     },  
8.     lname : {  
9.         minLength : 1,  
10.         maxLength : 25,  
11.         fieldName : 'Last Name'  
12.     },  
13.     validateLength : function(formEl, type){  
14.         if(formEl.value.length > type.maxLength || formEl.value.length < type.minLength ){  
15.             formEl.className = formEl.className.replace(' '+Form.validClass, '');  
16.             return false;  
17.         } else {  
18.             if(formEl.className.indexOf(' '+Form.validClass) == -1)  
19.             formEl.className += ' '+Form.validClass;  
20.             return true;  
21.         }  
22.     },  
23.     validateEmail : function(formEl){  
24.         var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;  
25.         var emailTest = regEx.test(formEl.value);  
26.         if (emailTest) {  
27.             if(formEl.className.indexOf(' '+Form.validClass) == -1)  
28.             formEl.className += ' '+Form.validClass;  
29.             return true;  
30.         } else {  
31.             formEl.className = formEl.className.replace(' '+Form.validClass, '');  
32.             return false;  
33.         }  
34.     },  
35.     getSubmit : function(formID){  
36.         var inputs = document.getElementById(formID).getElementsByTagName('input');  
37.         for(var i = 0; i < inputs.length; i++){  
38.             if(inputs[i].type == 'submit'){  
39.                 return inputs[i];  
40.             }  
41.         }  
42.         return false;  
43.     }  
44. };  

var Form = {
 validClass : 'valid',
 fname : {
  minLength : 1,
  maxLength : 15,
  fieldName : 'First Name'
 },
 lname : {
  minLength : 1,
  maxLength : 25,
  fieldName : 'Last Name'
 },
 validateLength : function(formEl, type){
  if(formEl.value.length > type.maxLength || formEl.value.length < type.minLength ){
   formEl.className = formEl.className.replace(' '+Form.validClass, '');
   return false;
  } else {
   if(formEl.className.indexOf(' '+Form.validClass) == -1)
   formEl.className += ' '+Form.validClass;
   return true;
  }
 },
 validateEmail : function(formEl){
  var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
  var emailTest = regEx.test(formEl.value);
  if (emailTest) {
   if(formEl.className.indexOf(' '+Form.validClass) == -1)
   formEl.className += ' '+Form.validClass;
   return true;
  } else {
   formEl.className = formEl.className.replace(' '+Form.validClass, '');
   return false;
  }
 },
 getSubmit : function(formID){
  var inputs = document.getElementById(formID).getElementsByTagName('input');
  for(var i = 0; i < inputs.length; i++){
   if(inputs[i].type == 'submit'){
    return inputs[i];
   }
  }
  return false;
 }
};

So this is quite basic but can easily be expanded upon.
To break this down first we create a new property which is just the string name of our 'valid' css class
that when applied to the form field, adds valid effects such as a green border. We also define our two sub-objects, fname and lname,
so we can define their own properties that can be used by methods elsewhere, these properties are minLength
which is the minimum amount of characters these fields can have, maxLength which is the max characters
the field can have and fieldName which doesn't actually get used, but could be grabbed for
things like identifying the field with a user friendly string in an error message (eg. 'First Name field is required.').
Next we create a validateLength method that accepts two arguments: formEl the DOM element to validate
and the type which refers to one of the sub-object to use (i.e. fname or lname).
This function checks whether the length of the field is between the minLength and maxLength range, if it's not
then we remove our valid class (if it exists) from the element and return false, otherwise if it is then we add the valid class and return true.
Then we have a validateEmail method which accepts a DOM element as an arguement, we then test this DOM elements value against an
email type regular expression; again if it passes we add our class and return true and vice versa.
Finally we have a getSubmit method. This method is given the id of the form and then loops through all input elements inside the specified form
to find which one has a type of submit (type="submit"). The reason for this method is to return the submit button so we can
disable it until the form is ready to submit.
Let's put this validator object to work on a real form. First we need our HTML.

view plaincopy to clipboardprint?

1. <body>  
2. <form id="ourForm">  
3.     <label>First Name</label><input type="text" /><br />  
4.     <label>Last Name</label><input type="text" /><br />  
5.     <label>Email</label><input type="text" /><br />  
6.     <input type="submit" value="submit" />  
7. </form>  
8. </body>  

    <body>
    <form id="ourForm">
        <label>First Name</label><input type="text" /><br />
        <label>Last Name</label><input type="text" /><br />
        <label>Email</label><input type="text" /><br />
        <input type="submit" value="submit" />
    </form>
    </body>

Now let's access these input objects using JavaScript and validate them when the form submits.

view plaincopy to clipboardprint?

1. addEvent(window, 'load', function(){  
2.     var ourForm = document.getElementById('ourForm');  
3.     var submit_button = Form.getSubmit('ourForm');  
4.     submit_button.disabled = 'disabled';  
5.     function checkForm(){  
6.         var inputs = ourForm.getElementsByTagName('input');  
7.         if(Form.validateLength(inputs[0], Form.fname)){  
8.             if(Form.validateLength(inputs[1], Form.lname)){  
9.                 if(Form.validateEmail(inputs[2])){  
10.                         submit_button.disabled = false;  
11.                         return true;  
12.                 }  
13.             }  
14.         }  
15.         submit_button.disabled = 'disabled';  
16.         return false;  
17.     };  
18.     checkForm();  
19.     addEvent(ourForm, 'keyup', checkForm);  
20.     addEvent(ourForm, 'submit', checkForm);  
21. });  

addEvent(window, 'load', function(){
 var ourForm = document.getElementById('ourForm');
 var submit_button = Form.getSubmit('ourForm');
 submit_button.disabled = 'disabled';
 function checkForm(){
  var inputs = ourForm.getElementsByTagName('input');
  if(Form.validateLength(inputs[0], Form.fname)){
   if(Form.validateLength(inputs[1], Form.lname)){
    if(Form.validateEmail(inputs[2])){
      submit_button.disabled = false;
      return true;
    }
   }
  }
  submit_button.disabled = 'disabled';
  return false;
 };
 checkForm();
 addEvent(ourForm, 'keyup', checkForm);
 addEvent(ourForm, 'submit', checkForm);
});

Let's break down this code.
We wrap our code in the addEvent function so when the window is loaded this script runs.
Firstly we grab our form using its ID and put it in a variable named ourForm, then we grab
our submit button (using our Form objects getSubmit method) and put it in a variable named submit_button,
and then set the submit buttons disabled attribute to 'disabled'.
Next we define a checkForm function. This stores all the inputs inside the form field as an array and we attach it to a
variable named.. you guessed it.. inputs!
Then it defines some nested if statements which test each of the fields inside the inputs array against our Form methods.
This is the reason we returned true or false in our methods, so if it returns true, we pass that if statement and continue onto the next,
but if it returns false, we exit the if statements.
Following our function definition, we execute the checkForm function when the page initially loads and also attach the function to a keyup event
and a submit event.
You might be asking, why attach to submit if we disabled the submit button. Well if you are focused on an input field and hit the enter key, it will
attempt to submit the form and we need to test for this, hence the reason our checkForm function returns true (submits the form) or false (doesn't submit form).

Conclusion

So we learned how to define the different object types within JavaScript and create properties and methods within them. We also learned a nifty addEvent function and got to use our object in a basic real world example.
This concludes the basics of JavaScript Object Orientation. Hopefully, this may start you on your way to building your own JavaScript library! If you liked this article and are interested in other JavaScript related topics, post them in the comments as I'd be happy to continue writing them. Thanks for reading.