Free Online Tutorials

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:

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.

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

alert(myTestObject.property1);

this will alert: “this is a property”.
to trigger the method you do the same:

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.

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:

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

and to use the object:

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.

window.document

the document Object also has child Objects. the body Object

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:

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:

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.

Inheritance

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