In this free HTML JavaScript tutorial, the dummies will have some simple, short concepts about JavaScript OOP programming, OOP in JavaScript such as: how to define a JavaScript class, how to set Publich methods, how to set Private variables, how to set static methods, ... through some simple HTML JavaScript example codes.

Read more JavaScript OOP tutorials below:

- OOP in JavaScript: Some Basics
- Simple Concepts about Types and Objects in JavaScript OOP
- JavaScript OOP - Scopes and Contexts
- OOP JavaScript: Public and Private Methods
- Basic OOP Concepts in Javascript

• Demo
• Enlarge
• Reload
• New window

This post will cover the following topics:

• Javascript is not a toy!
• How to define a class
• How to set Publich methods
• How to set Private variables
• How to set static methods

JavaScript for Dummies?

Programming languages are like football teams - it doesn't matter which you like, you will support it and protect its interest no matter what. Back in the days when i was young, I remember the same old discussion between two development teams where i used to work - C++ vs. Delphi. I guess its an endless discussion where the people and the languages change but the content basically stay the same.
What's weird is that when i talk to fellow developers about JavaScript i get a weird feeling that everybody looks at it as more of a toy rather than a powerful client side development tool. The major critic that i get is this is a very simple functional language, that cannot match to the object oriented concept that drive most languages. One friend even told me that this is a language for bored teenagers.
I agree - JavaScript is an easy to learn language, but that doesn't mean that it's a simple one. I see it as a positive thing that you can quickly achieve your goals without needing to know all the language capabilities, and you can learn very fast how to really use the language capabilities to accomplish things even better or faster.
I decided to show how you can shape JavaScript to be used as an Object Oriented language. I don't think that you must code JavaScript always in object oriented style, but you should have this ability and choose when you think it's the best solution to implement.

In this post i will focus on the basics of Object Oriented programming - public, private and static declarations.

Defining a Class

In Javascript everything is an object, even functions. In order to define a new class we should just define a new function like so:

view source
print?
1.function Player(url){}

No in order to create an instance of this class we can write the following:

view source
print?
1.var player1 = new Player("http://youtube.com/...");

This line of code will create a new instance of the function object and return the reference to it. Not to confuse, but if the function return a value it won't be placed in player1. for example, let's say you have a function like so:

view source
print?
1.function f1(){ return 100;}
2.var a = f1();
3.var b = new f1();

The difference between the two is that a will be assigned with 100 while b will be assigned with the reference to a new f1 function object.

Public Methods

As in any object oriented language, the first thing you would like to do is define some public methods for your class. In Javascritp we will use the prototype keyword to setup new methods for this class. You can do this like so:

view source
print?
01.function Player(url){
02.}
03. 
04.Player.prototype.start = function(){
05.//...do some stuff here...
06.}
07.Player.prototype.stop = function(){
08.//...do some stufff here...
09.}

For those of you who prefer to create classes encapsulated in one declaration you can also write the same code as so:

view source
print?
01.function Player(url){
02.}
03. 
04.Player.prototype = {
05.    start: function(){
06.        //...do some stuff here...
07.    } ,
08.    stop: function(){
09.        //...do some stuff here...
10.    }
11.};

These two declarations achieve the same result. This is part of the reasons that i love javascript so much - it can be so simple and so complicated at the same time.
Now you can use the class methods as so:

view source
print?
1.var player1 = new Player("http://youtube.com/...");
2.player1.start();
3.player1.stop();

Public Variables

In order to set public variables we will use the this keyword that allow us to preserve state for our object.

view source
print?
1.function Player(url){
2.    this.url = url;
3.}

Now we have a public variable that can be accessed using the class properties as so:

view source
print?
1.var player1 = new Player("http://youtube.com/...");
2.player1.url = "http://youtube.com/differenturl";
3.player1.start();

Usually it is bad practice to allow access to the class inner variables, and such variables needs to be set private.

Private Variables

In order to create private variables we would simple declare them in the constructor as so:

view source
print?
1.function Player(url){
2.    var m_url = url;
3.}

Now the variable m_url is not accessible to anyone. Well that doesn't make sense, right? We want to allow our public methods to access the data.
We solve this using closure. A closure is a protected variable space, created by using nested functions. In order to better understand it we first need to understand how JavaScript function declaration works. Function declaration in Javascritp is based on two main concepts: lexically scoped and function-level scope. Lexically means that function run in the scope they are defined in and not in the scope they are executed in, as other language usually do. Function-level means, like most languages, that a variable declared in function is not accessible outside that function. Using these concepts we can now declare our private variables that will be accessible to our public methods:

view source
print?
01.function Player(url){
02.    var m_url = url;
03.    this.start = function(){
04.        //now i can access m_url
05.    };
06.    this.stop = function(){
07.        //now i can access m_url
08.    }
09.}

The difference between this code and the previous ones, is that the public methods were declared using the prototype while now they are declared using the this keyword. The main difference is in the way the JavaScript engine execute this code. When declaring functions using the prototype, the Javascript engine creates only one instance of the function in memory and dynamically assigns the this according to the calling object. On the other hand, when declaring a method inside the object constructor, as we did in the last example, the JavaScript engine will create a copy of that function in memory for every instance that you create from the Player class. Usually this shouldn't be a big factor, but its important to know the difference.

Static Methods & Variables

Using closures and the prototype characteristic i mentioned above you can also create static methods like so:

view source
print?
01.function Player(url){
02.    var m_url = url;
03.    this.start = function(){
04.        //now i can access m_url
05.    };
06.    this.stop = function(){
07.        //now i can access m_url
08.    }
09.    var static_int = 0;
10.    Player.prototype.getStatic = function(){ return static_int;};
11.    Player.prototype.setStatic = function(v){ static_int = v; };
12.}
13. 
14.var p1 = new Player();
15.var p2 = new Player();
16.p1.setStatic(100);
17.alert( p2.getStatic() ); //will print 100.

I hope this example shows the power of JavaScript once you understand how to shape it to whatever you need. I the next post I will show how to implement interfaces and inheritance in Javascript.

• Code
• Print

• Comment (1)
• Write

by Powerslave, 13/05/2012 06:05 PM
after a quick look... Reply

Your static is not static, but inherited. You cannot add static methods or variables in JS.

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New