Home

ABCs of OOP Objects

JavaScript Example

A. Create An Object:

  1. Open Dreamweaver (or your favorite editor) and create a new page.
  2. In Code View, create a blank pair of <div> tags between the <body> tags: 
<body>
  <div></div>
</body>

NOTE: This is an invisible object (container). To "see" it, we need to give it some CSS properties.

  1. To "style" the <div> tags, write the following CSS ID selector rules between a pair of <style> tags within the <head> tags:
<style>

#myBox{
  height:100px; 
  width:100px; 
  background-color:blue;
  color:white;
  position:absolute;} 

</style>

NOTE: The position:absolute name/value pair causes the <div> tag to "float" above the page so that it can be animated later.

B. Give Object A Name:

  1. In Code View, give the <div> tag an ID name:

    2. <div id = "myBox"></div>

  2. (Optional) Add a small amount of text between the <div> tags:

    <div id="myBox">My Blackbox</div>

  3. Preview the page in a browser.

    TEST RESULT: You should see the <div> tag "styled" with the CSS rules.

C. Talk To Object and Tell Object To Do Something:

  1. In Code View, write the following code between a pair of <script> tags just below the closing style tag (</style>). Comments are optional:
<script>

window.onload = function() 
{
 var currentXPos = 0;
 var intervalHandler = setInterval(animateBox,50);
 var boxObject = document.getElementById("myBox").style;
       
  function animateBox()  
  {
   currentXPos = currentXPos + 1;
   boxObject.left = currentXPos + "px";	
  }; //End of animateBox function
         
}; //End of onLoad function

</script>
Click to view comments on code if necessary
  • window.onload = function ( ) { code goes here... }; will load this function and its code when page loads on start.
  • var intervalHandler = setInterval(animateBox, 50); The variable intervalHandler is assigned to a built-in JavaScript function setInterval which tells the function animateBox to execute every 50 millisecond (ms). The setInterval method is like a timer that has a 50 ms delay that is executed repeatedly.
  • currentXPos = currentXPos + 1; set the currentXPos variable to its current value plus 1 pixel each time this function is executed.
  • var boxObject = document.getElementById("myBox").style stores a reference of the object in a variable (boxObject) by getting its ID name which is attached to a style object.
  • boxObject.left = currentXPos + "px"; tell the object to set its CSS left style property to the current x position value (see previous two bullets) so that the box can move 1 pixel each time the function is executed.
  • Any valid unit of measurement other than "px" could be used (i.e., pt, em, cm, etc.) as long as they are in quotes.
  • It is important to note the even though the "left" property of the boxObject is being set, the box "on screen" will animate to the right. The reason for this is the the "left" properties is a reference of the object from the left size of the stage starting at zero. So if you set it at 20 px from the left of the stage, the object moves 20 px to the right of the stage.
  • It is very important to note that "style" is an object and NOT a property in the code reference: document.getElementById("myBox").style;. What you have here is an object (i.e., style) "attached" to another object (document.getElementById("myBox")). When you have multiple objects "nested or attached" together, you will used multiple dots to separate them. In the end, however, you still have to assign a property to the nested objects (e.g., document.getElementById("myBox").style.left) somewhere in the code to "talk" to the object property.
  • Moreover, it is more important to remember that you do not talk to the object or objects but to the last object's property within a series of nested objects. To help you understand this let's paint some real world examples that you can relate to. If I wanted to get the color of my button on my shirt, I would create a variable like this:

    var myColor = myBody.myShirt.myButton.color;

    Notice, I had to "drill down" from myBody to myShirt to myButton to talk to the button to ascertain (get) its color. Had I said," myBody.color, I would get the color of myBody. If I had said, "myBody.myShirt.color," I would get the color of my shirt. Neither one of these is the color of the button. To get it, I would have to write: myBody.myShirt.myButton.color. This is similar to navigating to get to a particular file nesting is several folder (e.g., c://myfolder1/myfolder2/myfolder3/myfile). You are not trying to get to any of the folder but the file nesting in several folders.
  1. Preview the page in a browser:

    TEST RESULT: You should see the box move SLOWLY across the screen one pixel at a time. (One-by-one, not much fun.). Also, note that the box runs right off the page never to be seen again.

  2. Replace currentXPos = currentXPos + 1; with:

    currentXPos++; or with currentXPos += 1;

  3. Preview the page in a browser again:

    TEST RESULT: You should see same result. The currentXPos++; or currentXPos += 1; are shorthands for incrementing a value by one in most programming languages.

  4. Replace currentXPos++; or currentXPos += 1; with:

    currentXPos += 10;

  5. Preview the page in a browser again:

    TEST RESULT: This time you should see the box move FASTER (10 pixels every time the code is executed).

  6. Now, update the code with the changes that are highligted in gray: 
<script>

window.onload = function() 
{
 var currentXPos = 0;
 var intervalHandler = setInterval(animateBox,50);
 var myBoxObject = document.getElementById("myBox").style;
 var windowSize = window.innerWidth;

 function animateBox()  
  {
   currentXPos += 10;
   if(currentXPos > windowSize)
   {
     currentXPos = 0;
   }
   else                 
   {
       myBoxObject.left = currentXPos + "px";	
   }; //End of if/else statement
  }; //End of animateBox function
     
}; //End of onLoad function

</script>
Click to view comments on code if necessary
  • The main code has been "wrapped" with an "if/else" conditional statement ( if (condition is true) {do this} else {do that} ) which in essence says, "Check to see IF the box "x" position value is greater that the value of the stage's width and IF so set the box "x" position back to zero ELSE continue animating as usual each time the code is executed.
  • var windowSize = document.innerWidth; is a variable that stores a "reference" to the stage width so that it can LATER be used in the if/else conditional statement instead of this value being hard-wired (i.e., 960). innerWidth returns the "inner" width of the browser window and behave with responsive design.
  1. Preview the page in a browser again:

    TEST RESULT: This time the box REAPPEARS on the left of the screen after it exits  the right side of the screen.
(Optional) Advanced JavaScript Examples
< Previous Topic     Next Topic >

© 2015. RMCS. All rights reserved.