Click here to Skip to main content
13,869,102 members
Click here to Skip to main content
Add your own
alternative version


6 bookmarked
Posted 29 Apr 2012
Licenced CPOL

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


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 = 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 = "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


Example 2 (Method):

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

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){ a; = 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...


Putting it together

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


1st way: 

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

2nd way: 

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


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

obj is the "targeting" object.

test is the inheriting object from the obj object


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


About the Author

Almar Mike
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionAdding properties with prorotype Pin
KoulSlou1-May-12 3:41
memberKoulSlou1-May-12 3:41 
AnswerRe: Adding properties with prorotype Pin
Almar Mike2-May-12 3:00
memberAlmar Mike2-May-12 3:00 
Questionnice Pin
Jagz W1-May-12 3:29
professionalJagz W1-May-12 3:29 
AnswerRe: nice Pin
Almar Mike4-May-12 18:31
memberAlmar Mike4-May-12 18: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 3 May 2012
Article Copyright 2012 by Almar Mike
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid