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>
Working Logic
"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.
So it is very easy to create complex webpages using the javascript
|
No responses found. Be the first to respond and make money from revenue sharing program.
|