Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Object Oriented JavaScript Programming: Classes and Objects

In this article I will cover the concept of Classes and Objects in JavaScript. I will discuss the different ways to create the classes and objects and use it.

Introduction:

This tutorial will deal with classes and objects in JavaScript. Here will cover the basic concept of JavaScript classes and objects and write some basic programs to understand the working of classes and objects.

Class in JavaScript:

We have worked with some predefined classes and objects in previous tutorial, Now let’s define our own class.

Without knowing that how to create the user defined classes in JavaScript you cannot get fully into writing object oriented JavaScript programs. Before defining classes, developers will have to determine which properties and methods your class should have and what those methods do. After defining class you can create objects in the same way as in predefined classes.

There are three ways to define classes in JavaScript.

Using a Function:

Probably the most common way to create a class is a function. You can define a normal JavaScript function and then create an object by using the new keyword. To define properties for an object follow the below code snippet. Using a function you can define classes by internally defining and declaring method in addition to the prototype.

function player(name) {
this.playerName = name;
}

To create your Player objects using your newly defined Player class, simply declare them and use the new keyword to initialize them:

varPlayer = new Player("SachinTendulkar");

Using objects literals:

Literals are shorter way to define objects and arrays in JavaScript. Here's the same functionality as described in the previous examples, but this time using object literal syntax:

var linux= {
type: "ubuntu",
structure: "kde",
getInfo: function () {
return this.structure + ', ' + this.type ;
    }
}

In this case you don't need to (and cannot) create an instance of the class, it already exists. So you simply start using this instance.

linux.structure = "kde2.0";
alert(linux.getInfo());

One more method to define classes is singleton using a function.

Objects in JavaScript:

JavaScript is an object oriented programming language, so its variables are dependent upon the objects. In object oriented programming language, users create their own object to use variable types. An object is special kind of variable that contains the properties and methods. We have so far seen several built-in object like array, string etc., in addition to these built-in objects, you can also create your own.

We know that JavaScript is an Object Based Programming language. An Object Based Programming language allows you to define your own objects. There are two script will show you to class declaration and using object as an instance of class.

Listing 1: Script of classes and objects in JavaScript

 
<html>
<head>
<Script language="JavaScript">
function ClassDeclaration()
{
var Data = 15;
var Food = "Pizza";
this.SetData = SetData;
this.SetFood = SetFood;
this.ShowData = DisplayData;
this.ShowFood = DisplayFood; 

function DisplayData(){
  alert( Data );
}

function DisplayFood(){
  alert( Food );
}

function SetData( mydata ) {
  Data = mydata;
}

function SetFood( myFood ) {
    Food = myFood;
}

}
var Object1 = new ClassDeclaration();
var Object2 = new ClassDeclaration();
Object1.SetData(100000);
Object1.SetFood( "Object1: I Want to eat Pizza" );
Object2.SetData(200000 );
Object2.SetFood( "Object2: I Want to eat Burger " );
Object1.ShowData(); 
Object1.ShowFood(); 
Object2.ShowData(); 
Object2.ShowFood(); 
</script>
</head>
</body>
</html>
 
objects1 values inserted in runtime
objects1 values inserted in runtime 2

Figure 1: Above figure is output of objects1 values inserted in runtime.

There is another script which will explain the method declaration and objects

Listing 2: Script of method declaration

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
exampleObject = {
	Attribute1 : "This is first Attribute",
	Attribute2 : "This is second Attribute",
	Attribute3 : ["One", 5, 10, "Fifteen"],
	
	method1 : function(){
alert("Method has been called: " + this.Attribute1)}
};

exampleObject.method1();
alert(exampleObject.Attribute3[2])
 
var circle = { a : 0, b : 0, radius: 3 } 

var square = { 
	upperLeft : { a : 4, b : 4 },
	lowerRight : { a : 4, b : 4}
}

alert(square.upperLeft.a); 

//-->
</script>
</body>
</html> 
different object values
different object values 2

Figure 2: Above figure is output of different object values

Objects can contain data and methods that act upon that data. Objects can contain other objects. It does not have classes, but it can call the constructors which initialize the object data, Object acts as containers for class variables and methods. The Object an instance of a class and object is the run-time manifestation of a particular exemplar of a class.

Conclusion:

I covered the basic concepts of classes and objects. Object oriented concept is very important now days and many programming languages are supporting this. Go through the examples of this article and let us know if you have any questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login