Click here to Skip to main content
Click here to Skip to main content

A simple OOP JavaScript Application

, 3 May 2012
Rate this:
Please Sign up or sign in to vote.
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:

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(); 

2nd way: Constructors 

Constructors are the 2nd 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 

1st way: 

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

2nd 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

License

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

Share

About the Author

Almar Mike
Other
United States United States
No Biography provided

Comments and Discussions

 
QuestionAdding properties with prorotype PinmemberKoulSlou1-May-12 2:41 
AnswerRe: Adding properties with prorotype Pinmemberalmarmike2-May-12 2:00 
Questionnice PinmemberJagz W1-May-12 2:29 
AnswerRe: nice PinmemberAlmar Mike4-May-12 17:31 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140826.1 | Last Updated 3 May 2012
Article Copyright 2012 by Almar Mike
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid