|
Javascript programming may be written as a set of statements and procedures but its true power lies in the fact that it can also be written using object oriented programming principles.
An object in javascript is comparable to objects in real life. A car, for example, is made up of many parts which we can call objects and each part (or object) has it own properties (length, weight, ...) and functions (start the car, rotate, ...) where by function here is meant a more complex property. We all know that a car needs a battery to start and therefore the battery may be considered as an object with properties such as voltage, dimensions, etc. and its main function is to start the car. The advantage in defining batteries as objects with their properties and functions is that they can be made by a group of technician specilized in batteries only and they can be used anywhere they are needed: in small cars, large cars, sports cars, etc.
In computer programming, objects are defined to be reused in any situation they are needed. In order to use an object, its properties and functions has to be well understood. Examples below are used to further explain the use of objects in javascript.
Objects in Javascript
In the javascript program example 1 below, the statement
function RectangleObject(){
}
is used as a constructor to defines an object type called rectangleObject.
The statement var Rectangle_1 = new RectangleObject(); in the same example creates an instance of the object defined above using the operator new followed by the function RectangleObject() which is a constructor. We can create many instances of the object.
Run Javascript Example Program 1 and check that the result displayed is I am an empty object. Note that the object defined above does not do much. In more examples below, we will further examine objects and their properties and methods.
Javascript Example Program 1
<!DOCTYPE html>
<html>
<body>
<script>
function RectangleObject(){
alert("I am an empty object");
}
var Rectangle_1 = new RectangleObject();
</script>
</body>
</html>
Properties and Methods of Objects in Javascript
Objects as defined in javascript may be designed to have properties and functions called methods which make them powerful tools in developing libraries and in reusing the code developed.
In example 2 below, we have added 2 properties width and length and 2 methods perimeter and area to the object rectangleObject defined in example 1 above. this is used to assign values to the properties and methods of the object considered. this refers to the object being considered.
The statement var Rectangle_1 = new RectangleObject(2,6); creates an object with a width equal to 2 and a length equal to 6.
Rectangle_1.length in the statement alert(Rectangle_1.length); refers to the value of the length of object Rectangle_1.
The statment Rectangle_1.perimeter() in the statement alert(Rectangle_1.perimeter()); uses the function perimeter() to calculate the perimeter of Rectangle_1.
Run the example below and check that the length and the perimeter displayed are 6 and 16 respectively. Change Rectangle_1.length to Rectangle_1.width and Rectangle_1.perimeter() to Rectangle_1.area() and check that values displyed are 2 and 12 respectively.
Javascript Example Program 2
<!DOCTYPE html>
<html>
<body>
<script>
function RectangleObject(W,L){
// property (1) width
this.width = W;
// property (2) length
this.length = L;
// method (1) perimeter
this.perimeter = function(){
return 2*(this.width+this.length);
};
// method (2) area
this.area = function(){
return this.width*this.length;
};
}
var Rectangle_1 = new RectangleObject(2,6);
alert(Rectangle_1.length);
alert(Rectangle_1.perimeter());
</script>
</body>
</html>
More on Objects in Javascript
We now use an example to show that objects can be used to define other objects.
In Example 3 below, we have used example 2 to which we have added the definition of another object RectangleSolidObject which uses an object of the type RectangleObject as a base through the statement this.base = RectObject;.
We have also defined the surface area function surfaceArea() of an object of type RectangleSolidObject and its volume function volume().
Run the example below and check that the value displyed of the volume is 1200.
Javascript Example Program 3
<!DOCTYPE html>
<html>
<body>
<script>
function RectangleObject(W,L){
// property (1) width
this.width = W;
// property (2) length
this.length = L;
// method (1) perimeter
this.perimeter = function(){
return 2*(this.width+this.length);
};
// method (2) area
this.area = function(){
return this.width*this.length;
};
}
var Rectangle_1 = new RectangleObject(2,6);
// define another object using an object
function RectangleSolidObject(RectObject,D){
// property (1) base
this.base = RectObject;
// property (2) depth
this.depth = D;
// method (1) surfaceArea
this.surfaceArea = function(){
return 2*(this.base.length*this.base.width) + 2*(this.base.length*this.depth) + 2*(this.base.width*this.depth);
};
// method (2) volume
this.volume = function(){
return this.base.width*this.base.length*this.depth;
};
}
var recSolid_1 = new RectangleSolidObject(Rectangle_1,100);
alert(recSolid_1.volume());
</script>
</body>
</html>
As it can be seen from these examples, the object oriented programming (OOP) principles in javascript opens up numerous applications and uses. Once defined, objects may be used as needed assuming that we know the properties of these objects. Javascript have several in-built objects that makes javascript programming efficient.
Books and References
1 - http://www.w3schools.com/js/default.asp - JavaScript Tutorial
2 - JavaScript and JQuery: Interactive Front-End Web Development 1st Edition - Jon Duckett - ISBN-13: 978-1118531648
3 - A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer. (Volume 2) - Mark Myers
4 - A Smarter Way to Learn JavaScript: The new approach that uses technology to cut your effort in half - Mark Myers
|
