Javascript Object – Oriented

 

Object – Oriented

 

Object

 

An object is a “package” of data ; A collection of properties (variables) and method (functions) all classed under a single name. For example , imagine that there was an object named car. We could say that the car object named car. We could say that the car object possesses several properties: make, model, year, and color, for example. We might even say that car possesses some methods: go( ), stop( ) , and reverse( ). Although car is obviously fictional , you can see that its properties and methods all relate to a common theme.

 

In javascript you own objects for storing data. More commonly , though , you will use the many “built-in ” objects which allow you to work with, manipulate, and access the web page and web browser. This set of pre-existing objects is known as the “Document object Model”.

 

 Document Object Model

 

Often reffered to as the DOM , this object model is a hierarchy of all objects “built in ” to Javascript. Most of these objects are directly related to characteristics of the web page or browser. The reason we quality the term “built in” is because the DOM is technically separate from Javascript itself. That is , the javascript language specification , standardized by the ECMA, does not actually specify the nature or specifics of the DOM. Consequently , Netscape and Microsoft have developed their own individual  DOM’s which are not entirely compatible. Additionally , the DOM stands apart from javascript because it could theoretically be accessed by other scripting languages  as well. Below is a graphical chart illustrating a high-level view of Netscape’s DOM. Microsoft’s DOM is actually a superset of Netscape’s, and so the chart below actually represents a subset of Microsoft’s own DOM.

 

Properties

 

Access the properties of an object with a simple notation: objectName.propertyName. Both the object name and property name are case sensitive , so watch your typing. Because a property is essentially a variable, you can create new properties by simply assigning it a value. Assuming , for instance , that carObj already exists (we’ll learn to create a new object shortly), you can give it properties named make, model, and year as follows:

 

carObj.make =”Toyota”;

carObj.model=”Camry”;

carObj.year=1990;

document.write(carObj.year);

 

A Javascript object , basically , is an array. If you’re familiar with other languages you probably recognize an array as a collection of values residing within a single named data structure.You can access an object’s properties either using the objectName.propertyName syntax illustrated above, or by using an array syntax:

 

carObj[“make”]=”Toyota”;

carObj[“model”]=”Camry”;

document.write(carObj[“year”]);

 

Methods

 

Unlike a basic data array, an object can also contain functions, which are known as methods when part of an object . you call a method using the basic syntax: objectName.methodName(). Any arguments required for the method are passed between the parentheses, just like a normal function call.

 

For example, the window object possesses a method named close(), which simply closes the specified browser window:

 

Window.close();

 

Creating Objects

 

Most of the time you will be referencing objects which are built-in to the DOM. However , you may want to create your own objects for storing data within a Javascript program. There are several ways to create a new object, but we will look at two: creating a direct instance of an object and creating an object prototype.

 

Direct instance of an object

 

Despite the awkward sound name, a “direct instance of an object” simply means creating a new single object, such as myPetDog:

 

myPetDog=new Object();

myPetDog.name=”Barney”;

myPetDog.breed=”beagle”;

myPetDog.year=1981;

 

Assigning a method to your new object is also simple. Assume that you already have coded a function named woof(), which causes a barking sound to play:

 

myPetDog.woof=woof;

 

 

Prototype of an object

 

Sometimes, you will want to create a “template” or prototype of an object. This does not create an actual instance of the object, but defines the structure of the object. In the future , then, you can quickly stamp out a particular instance of the object . Suppose that instead of myPetDog , you created a prototype object named petDog. This object could then be a template for a particular pet dog object. First, create a function which defines the petDog structure:

 

function petDog(name,breed,year)

{

this.name=name;

this.breed=breed;

this.year=year;

}

 

Now that the petDog prototype has been set, you can quickly create single instances of a new object based on the petDog structure:

 

myPetDog=new petDog(“barney”,”beagle”,1981);

yourPetDog=new petDog(“max”,”terrier”,1990);

 

Example

 

<html>

<head>

<title>User defined objects</title>

<script>

Function Print()

{

document.write(“Employee Number:”+this.Eno);

document.write(“<br>”);

document.write(“Employee Name:”+this.Ename);

document.write(“<br>”);

document.write(“Employee salary”+this.salary);

}

function Hra()

{

document.write(“<br>”);

document.write(“HRA:”+(this.salary*50/100));

document.write(“<br>”);

}

function Employee(Eno,Ename,Salary)

{

this.Eno=Eno;

this.Ename=Ename;

this.salary=salary;

this.Hra=Hra;

this.Print=Print;

}

</script>

</head>

<body style=”background-color:#c0c0c0;”>

<script>

var emp01=new Employee(100,”Bill Gates”,90000);

emp01.print();

emp01.Hra();

</script>

</body>

</html>