INTRODUCTION TO OBJECT ORIENTED JAVASCIRPT

This article explains different ways you can create a custom object using the JavaScript language. The JavaScript language includes several built-in objects, such as Array, String, and Date etc... But, if there are custom functions that you want to create, you can create your own custom objects using one of the available methods.

Properties and methods are what make objects functional and usable.

The best way to understand the concept of an object is to think of a real-life object.

 For example, use a dog as your object. A dog can have properties such as legs, ears, a tail, possibly a collar, and so on. A dog can have methods such as barking, eating, sleeping, and so on. The methods can alter the properties of the dog. For example, if the dog is barking, its ears may stand up, and if the dog is sleeping its ears might be floppy .Imagine wanting to use a dog object in your project. It can save a lot of time if you are interested in creating multiple dog objects because they all have a lot of the same basic properties and methods. And, if you want to use a dog object in another project, you can easily reuse the object you already created.

Following are the different ways to create a custom object using the JavaScript language:

• The Object function.
• Literal notation.
• Object constructor and prototyping.

The Object function

The JavaScript language includes a function named Object, which when used with the new operator creates an object. The Object function is the starting point for any custom functionality you want to achieve by creating an object.

1. Creating a custom object using the Object function

var Gallery = new Object();

To make the Gallery object helpful, you can add properties and methods to give it functionality.

2. A custom Gallery object with properties and methods

var Gallery = new Object();

/* 

The properties of the Gallery object are CurrentIndex, Images, and _loopInterval.

To define them as properties of the Gallery object, you simply assign them to the 

Gallery object using dot syntax—append a dot and a variable name and then assign 

that variable a value. */

window.onload= function()

{

    Gallery.Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 

'istockphoto_14667148.jpg'];

    Gallery.CurrentIndex = 0;

    Gallery._loopInterval = setInterval(Gallery.Next, 2500);

};

/*  The methods used are Next, Prev, and Display. 

To define them as methods of the Gallery object, you use dot syntax and assign 

each one its own function. 

*/

Gallery.Next = function()

{

    if(Gallery.CurrentIndex < (Gallery.Images.length-1))

    {

        Gallery.CurrentIndex++;

    }

    else

    {

        Gallery.CurrentIndex = 0;

    }

    Gallery.Display();

};

Gallery.Prev = function()

{

    if(Gallery.CurrentIndex > 0)

    {

        Gallery.CurrentIndex--;

    }

    else

    {

        Gallery.CurrentIndex = (Gallery.Images.length-1);

    }

    Gallery.Display();

};

Gallery.Display = function()

{

    var photoGallery = document.getElementById('photo-gallery');

    var currentImage = Gallery.Images[Gallery.CurrentIndex];

    photoGallery.src = "../assets/img/"+currentImage;

};

/* Both the Next and Prev methods use the properties in this object. The CurrentIndex property identifies what the current index of the Images array is so that when you increase or decrease the index it references a different array item. The Images property is an array that stores the images that you are displaying in the gallery. The _loopInterval property automatically loops through the images in the gallery every 2.5 seconds. */

To call one of the methods in this object, such as the Next method, you simply need to reference the Gallery object, followed by a dot, followed by the name of the method (Next), and, finally, followed by opening and closing parentheses

3. Calling the Next method in the custom Gallery object

Gallery.Next();

To actually put this object into action, you can easily create controls that 

navigate the images in your Images array. First, you need to include the 

JavaScript file, which in this case is an external file named Gallery.js.

 Then you just need to add an HTML img tag that displays the images and add 

hyperlinks that control the next and previous navigation

4. Sample HTML file with the custom Gallery object and Gallery functions

<html> <head> <title>Getting Started with Object-Oriented JavaScript</title> <script type="text/javascript" src="js/Gallery.js"></script> </head> <body> <img src="../assets/img/istockphoto_14149033.jpg" id="photo-gallery" /> <p>     <a href="#" onclick="Gallery.Prev();">&lt; Previous</a>     &nbsp;     <a href="#" onclick="Gallery.Next();">Next &gt;</a> </p> </body> </html> To be continued …