One philosophy of programming is to try to design programs to imitate the real world. Objects are the method used to do this. We can define an object by stating its characteristics (properties) and the things it can do (methods). A webpage is a good place to start looking at objects. You can observe things on a page and think of them as objects such as textbox, image, button, etc. We'll start our formal discussion by coding an image object that has several properties (id of the page element, height, width, name of the picture file) and we'll define some behaviors it can exhibit (grow, show).

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function picture(elementId,height,width,source)
  {
  this.elementId=elementId;
  this.height=height;
  this.width=width;
  this.source=source;
  this.show = function()
    {
    document.getElementById(this.elementId).height=this.height;
    document.getElementById(this.elementId).width=this.width;
    document.getElementById(this.elementId).src=this.source
    }
  this.grow = function(height,width)
    {
    this.height=height;
    this.width=width;
    this.show()
    }
  }
function start()
  {
  myImage=new picture("Img1",100,200,"pic1.jpg");
  myImage.show();
  myImage2=new picture("Img2",100,200,"pic2.jpg");
  myImage2.show()
  }
function changePic()
  {
  if (document.getElementById("textHeight").value>"")
    {
    myImage.grow(document.getElementById("textHeight").value,document.getElementById("textWidth").value)
    }
  else
    {
    alert("Enter a value first.")
    }
  }
</SCRIPT>
</HEAD>
<BODY>
<IMG ID="Img1">
<INPUT TYPE="text" ID="textHeight">
<INPUT TYPE="text" ID="textWidth">
<INPUT TYPE="button" ONCLICK="start()" VALUE="Click me">
<INPUT TYPE="button" ONCLICK="changePic()" VALUE="Click me next"><BR>
<IMG ID="Img2">
</BODY>
</HTML>

Code

This subject is much more complicated than what I just displayed but I think my time is better spent exploring built-in objects. The characteristics of each object are straight forward and can be obtained in the reference lists. Events of objects need a closer look. For instance, the <BODY> object can respond to the following events:
onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
A very good list can be found Here. I am going to use the keyboard event onkeyup as an example of how events can enrich your javascript pages.
The following code is a simple program where the user moves a ball by pressing the arrow keys.

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function whichKey(event){
  var myKey=event.keyCode;
  switch (myKey){
    case 37:
      var x=document.getElementById("ball").style.left;
      x=x.substr(0,x.length-2)-32;
      document.getElementById("ball").style.left=x+"px";
      break;
    case 39:
      var x=document.getElementById("ball").style.left;
      x=x.substr(0,x.length-2)*1+32;
      document.getElementById("ball").style.left=x+"px";
      break;
    case 38:
      var x=document.getElementById("ball").style.top;
      x=x.substr(0,x.length-2)*1-32;
      document.getElementById("ball").style.top=x+"px";
      break;
    case 40:
      var x=document.getElementById("ball").style.top;
      x=x.substr(0,x.length-2)*1+32;
      document.getElementById("ball").style.top=x+"px";
      break;
  }
}
</SCRIPT>
</HEAD>
<BODY onkeyup="whichKey(event)">
<IMG SRC="maze.jpg"><BR>
<SPAN ID="ball" STYLE="position:absolute; left:0px; top:200px;"><IMG SRC="ball.jpg"></SPAN>
</BODY>
</HTML>

Code

(When the page loads, click anywhere on the maze to put the focus on OUR frame.)
One unusual thing is that when you press a key an event object is created behind the scenes. We read the keyCode property of the event object to see what key was pressed.
If you want to see a complete maze game which restricts movement to the path look HERE.


Demo 1