Click here to Skip to main content
12,445,916 members (59,701 online)
Click here to Skip to main content
Add your own
alternative version

Stats

42K views
177 downloads
12 bookmarked
Posted

Using Objects In JavaScript

, 8 Mar 2006
Rate this:
Please Sign up or sign in to vote.
How to use objects in JavaScript.

Introduction

JavaScript can not only do client side validation, but can also solve complex problems. Here, I am going to explain how to use classes in JavaScript.

OOPs to POPs

Most programmers use hundreds of functions in a single web page or in a separate js file, and it is too difficult to make changes on them because they are function oriented. Think about object oriented programming. OOP makes things simple and easy as we can split our objectives into objects. We are not lucky! JavaScript doesn't have support for OOP but it supports prototype oriented programming (POPs).

Creating the Employee Object

Consider the typical Employee object. An Employee object may have some fields and functions. In this example, I am going show you how to create an Employee object, and an EmployeeCollection object which will hold a number of Employee objects.

<script>
/*
Employee
--------
    Fields:
      Id
      Name

EmployeeCollection
-------------------
    Fields:
        indexer
        count
    Functions:
        Add
        Delete
        Display
*/


//This Function is used to create the collection object.
//Copy this function to create your own collection objects.
function CreateCollection(ClassName)    
{
    var obj=new Array();
    eval("var t=new "+ClassName+"()");
    for(_item in t)
        {
            eval("obj."+_item+"=t."+_item);
        }
    return obj;
}
    
function EmployeeCollection()
{
    this.Container="";
    this.Add=function(obj)
    {
        this.push(obj);
    }
    this.Display=function()
    {
        str="<Table border=1 width=200 ><tr><td>" + 
            "<b>Name</b></td><td><b>" + 
            "Age</b></td><tr>";
        for(i=0;i<this.length;i++)
            str+="<Tr><Td>"+this[i].Name+ 
                 "</Td><Td>"+this[i].Age+
                 "</Td></Tr>";
        str+="</Table>";
        this.Container.innerHTML=str;
    }
}
    
function Employee(Name,Age)
{
    this.Name=Name;
    this.Age=Age;
}
    
//Using the EmployeeCollection and Employee Obejcts
empCollection=new CreateCollection("EmployeeCollection");     
empCollection.Add(new Employee("Jax",26));
empCollection.Add(new Employee("Shionk",45));
empCollection.Add(new Employee("Maya",25));
empCollection.Container=document.getElementById("grid");
alert(empCollection[0].Name);
empCollection.Display();

</script>

How it works

"eval" is used to perform dynamic operations. We can declare variables at runtime. The "CreateCollection" function is used to create a collection object. A collection object is nothing but a combination of arrays and any business entity. Here the entity object is EmployeeCollection. "CreateCollection" first creates the array object and it will add all the fields and functions from EmployeeCollection to the object. So we will get both Array, and EmployeeCollection's fields and functions.

Conclusion

At last, we implemented some of the OOP concepts in JavaScript. I'm now trying to implement inheritance in JavaScript.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Manikandan.net
Web Developer
India India
"Manikandan Balakrishnan" Working as an IT consultant with LogicaCMG’s Global Service Delivery part-India, he has a good experience on Web/Win development (C#, Asp.net) and enterprise application integration (BizTalk) technologies. Prior to this he worked on world’s biggest e-learning product with Excel Soft Technologies, Mysore.

City: Coimbatore, TN
CreativeManix@gmail.com

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralJSOOP Library Pin
weerstra7-Jun-06 2:49
memberweerstra7-Jun-06 2:49 
General+= is also slow Pin
rmatejka9-Mar-06 0:27
memberrmatejka9-Mar-06 0:27 
GeneralRe: += is also slow Pin
srinath g nath4-Nov-07 20:49
membersrinath g nath4-Nov-07 20:49 
Generaleval kills performance Pin
rmatejka8-Mar-06 23:05
memberrmatejka8-Mar-06 23:05 
GeneralRe: eval kills performance Pin
Juergen Posny9-Mar-06 0:12
memberJuergen Posny9-Mar-06 0:12 
GeneralRe: eval kills performance Pin
seansulli12-Nov-07 6:10
memberseansulli12-Nov-07 6:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 8 Mar 2006
Article Copyright 2006 by Manikandan.net
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid