FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


simple Javascript OOP tutorial





Marcuzzo
JavaScript Objects:
an object is a collection of Methods and properties.

javascript has predefined object types such as: Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, or String

it also allows you to create your own user defined objects.

Lets create a simple object.
this is the code:
Code:
function newTestClass(){
   this.property1  = "this is a property";
   this.method1 = function(){
      alert("this is a method");
   }
}

here we have the blueprint or Constructor of an Object.

to create the actual object you need to construct it using the new statement.
eg:
Code:
var myTestObject = new newTestClass();


at this point the variable myTestObject holds a handle or reference to the newTestClass Object.

this Object has 1 property named property1 which basicly is a variable within the newTestClass Object.
And 1 method named method1 which is a function within the newTestClass Object.

you can access the property of the newly created object like all Object Oriented Languages:
Object.property
Code:
alert(myTestObject.property1);

this will alert: "this is a property".

to trigger the method you do the same:
Code:
myTestObject.method1();

this will alert: "this is a method";

Public Vs. Private:
in our example Object the Method method1 is a public Method, meaning that it can be accessed from outside the object.
a private method is a method that you only want to use from within the object and keep it hidden to the outside.
to create a private method you leave out the this statement when declaring the function.
Code:

function objectWithPrivateMethod(){
   this.testMethod = function(){ // public method
      alert("this is a test");
      alert(privateMethod("this is a test"));
   }
   var privateMethod = function(str){
      return "#" + str + "#";
   }
}

here the method testMethod can be accessed from outside the object.
and when you try to access the privateMethod from outside the object you will get an error telling you that the object doesn't have a property named privateMethod.
this is because the method is private.

Inline Objects:

now lets say you want to create an object where you only need One instance of the object.
in this case you would choose to create an inline or singleton object:
Code:

myObject = {
 propA : "this is a property",
 method1 : function(str){
  alert(str);
 }
};


and to use the object:
Code:

alert(myObject.propA);
myObject.method1("hello world");


DOM:
the Document Object Model is available in All browsers.
It holds Objects like the window Object.

Objects can also be embedded.
like for instance the document Object
the document object is a child Object of the window Object.
Code:
window.document


the document Object also has child Objects. the body Object
Code:
window.document.body

and so on... the full details can be found on MSDN.

you can also manipulate the DOM of a webpage at runtime.
you can create new elements, remove elements, change the style of an element and so on

Embedded Objects:
just like in the DOM you can create your own objects that have child objects and another child object if you want.
example
Code:

function ParentObject(){
   this.prop = "test Property";
   this.child = new function (){
      this.childProp = "property of Object.Object";
      this.childMethod = function(){
         alert("Child Object Property");
      }
   }
}


and you would use the code like this:
Code:

var parent = new ParentObject();
alert(parent.prop);
alert(parent.child.childProp);
parent.child.childMethod();

I hope this little tutorial has made a difference for you.
cheers.
Marco
Marcuzzo
Inheritance

Code:
/**
* Simple Javascript inheritance
* I wrote this to be tested in WScript, but you can use it in a browser too.
* just change WScript.echo to alert
*/
function Lamp ( bInitialState )
{
 
  this.isOn = ( bInitialState ) ? true : false; // default the value to false if none provided
 
  this.turnOn = function ()
  {
    this.isOn = true;
  }
 
  this.turnOff = function()
  {
    this.isOn = false;
  }
 
  this.isOn = function ()
  {
    return this.isOn;
  }
 
  this.toString = function()
  {
    var status = ( this.isOn ) ? "ON" : "OFF" ;
    return "The lamp is turned " + status + ".";
  }
}


ColorLamp.prototype = new Lamp();           // Here's where the inheritance occurs
ColorLamp.prototype.constructor=ColorLamp;  // Otherwise instances of ColorLamp would have a constructor of Lamp

function ColorLamp(color)
{
  this.color = color
 
  this.toString = function ()
  {
    var status = ( this.isOn ) ? "ON" : "OFF" ;
    print ("The ColorLamp is turned " + status + ", and the color is " + this.color );
  }
}

function print ( s )
{
  WScript.echo(s);
}

var colorLamp = new ColorLamp("red");
print ( colorLamp.toString() );
colorLamp.turnOff();
print ( colorLamp.toString() );



I modified it a little but I got it from here: http://phrogz.net/js/classes/OOPinJS2.html
anjumrizwi
Very Good article. For long time I was in confusing state regarding oops in Javascript.
You article cleared my concept. Now I am confident. I will use oops approach
chatrack
This tutorial really helpful
asim
this was great, Very Happy , but also knowledgeable. Please keep on posting such tutorials, they are helpful in many ways.
Related topics
Styling <abbr> in IE
Handling Css using Javascript
PHP OOP Tutorial
Spanish Javascript Tutorial
Simple full Sig tutorial
javascript function not being seen
Very simple javascript functions...
Javascript random code generator script needed please
Need help fixing simple javascript ORNeed an actionscripter
Javascript and Dynamic Select Boxes
JavaScript Games
Flash intros usually are bad but what if...
i need this simple javascript
CSS Animation
Reply to topic    Frihost Forum Index -> Miscellaneous -> Tutorials

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.