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>
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;
}
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.
"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