A simple OOP JavaScript Application

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.

1^st way: Creating our first object using var 

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

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:

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

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

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:

name: "Almar Mike"

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

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

document.write(me.name);

Example 2 (Method):

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

me.run(); 

2^nd way: Constructors 

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

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: 

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

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

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 

1^st way: 

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

2^nd way: 

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

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

We've get: 

Almar Mike
i'm running 

Advanced samples...

Inheriting Objects

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