Click here to Skip to main content
15,867,756 members
Articles / Web Development / HTML
Tip/Trick

A simple OOP JavaScript Application

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
3 May 2012CPOL2 min read 25K   6   4
The basics of organizing code with OOP in JS

Introduction

What is OOP?

OOP (Object Oriented Programming) is a way to manage functions and variables without having to create like tons of functions with prefixes that you have to remember. In a logical way of explaning this, OOP is a data structures consisting of properties and methods, basically it's a way to group variables and functions; Since the Simula programming language, many dynamic programming language start to implementing it too (eg. C, C++); JS/EcmaScript was the first web-based programming language that supports OOP.

1st way: Creating our first object using var 

To create an object in JS, you just do it almost like Perl:

JavaScript
var me = {};

Note that my_object is the object's name.

Adding some methods & properties

To add a method, you need to write a annoymus function inside the curly braces:

JavaScript
run: function(){ document.write("i'm running!"); } 

You can also do: your object name + dot (.) + the method's name

JavaScript
my_obj.run = function(){ document.write("i'm running!"); };

Note that the function() is not enclosed with the parentheses

To add a property, do this inside the curly braces:

JavaScript
name: "Almar Mike"

Again, you can also do: your object name + dot (.) + the property's name as seen above 

JavaScript
my_obj.name = "Almar Mike"

Warning: When you're done with a method or a property in the parentheses, place a colon at the end of it if it's not the final method/property  

Initialize our object: 

We do not need to create an instance of our object. All we need to do now is access your object's methods/properties. Let's look at 2 examples using our object.

Example 1 (Property):

To access a property, type in your object name + dot (.) + the property's name

JavaScript
document.write(me.name);

Example 2 (Method):

To access a property, type in your object name + dot (.) + the property's name

JavaScript
me.run(); 

2nd way: Constructors 

Constructors are the 2nd way to create objects but the developer can develop new objects based on it. For example:

JavaScript
function me_object(a,b){
	this.name= a;
	this.run = b;
}  

a = Name

b = Run Function

You also gonna need to define your own object: 

JavaScript
var me = new me_object("Almar Mike", function(){
		document.write("i'm running");
});

Again, I'm gonna write the property and start the method...

JavaScript
document.write(me.name);
me.run();

Putting it together

Now that we have a complete object set-up, it's time to write the files!

JS 

1st way: 

JavaScript
var me = {
	run: function(){ document.write("i'm running"); },
	name: "Almar Mike"
};

2nd way: 

JavaScript
function me_object(a,b){
	this.name=a;
	this.run = b;
}
var me = new me_object("Almar Mike", function(){
		document.write("i'm running");
});
document.write(me.name);
me.run();

HTML

HTML
<script src='obj.js'></script>

We've get: 

Almar Mike
i'm running 

Advanced samples...

Inheriting Objects

JavaScript
var obj = {me:1};
var test = {};

test.prototype = obj.prototype;
alert(test.me);

obj is the "targeting" object.

test is the inheriting object from the obj object

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Other
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionAdding properties with prorotype Pin
KoulSlou1-May-12 2:41
KoulSlou1-May-12 2:41 
AnswerRe: Adding properties with prorotype Pin
Almar Mike2-May-12 2:00
Almar Mike2-May-12 2:00 
Questionnice Pin
Jagz W1-May-12 2:29
professionalJagz W1-May-12 2:29 
AnswerRe: nice Pin
Almar Mike4-May-12 17:31
Almar Mike4-May-12 17:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.