SUMMARY

Code Comparison

Below is a comparison of the final code used by JavaScript, jQuery, and ActionScript to animate the box across the screen and back again repeatedly.

While the code syntax is different, notice all of the OOP code has the following things in common:

1. An object is created.
2. An object is given a name.
3. An object is told to do something:
   1. a timer is created (e.g., ENTER_FRAME (Flash) and setInterval (JavaScript/jQuery))
   2. an if/else loop is created to check stage size and reset the box to right side if box "x" position is greater than stage width.
   3. a variable is incremented by 10 pixels each time the function is executed.
      
      

NOTE: Notice the the JavaScript and jQuery are almost the same except for a few minor differences:

1. They use a different "wrapper" for loading code:
   
   
   1. JavaScript: window.onload = function() { main code goes here... };
   2. jQuery: $(document).ready(function(e) { main code goes here... });
      
      
2. They use a different object reference naming convention:
   
   
   1. JavaScript: var myBoxObject = document.getElementById("myBox").style and myBoxObject.left = currentXPos + "px";
   2. jQuery: $("#myBox").css("left", currentXPos);
      
      
3. They use a different rendering mode:
   
   
   1. JavaScript: The default browser
   2. jQuery: The local or remote jQuery framework

NOTE: It is no surprise that jQuery uses similar code as JavaScript because jQuery IS one of many JavaScript Class Libraries. A few include:

1. Dojo Toolkit
2. MooTools
3. Prototype JavaScript Framework
   

For a complete list of JavaScript libraries and other JavaScript resources, go to List of JavaScript libraries on the Wikipedia web site.

JavaScript Code

 

<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 animateBox function
     
}; //End of onLoad function

</script>

 

jQuery Code

 

<script>

$(document).ready(function(e)
{
 var currentXPos = 0;
 var intervalHandler = setInterval(animateBox,50);
 var windowSize = window.innerWidth;

 function animateBox()  
  {
   currentXPos += 10;
   if(currentXPos > windowSize)
   {
    currentXPos = 0;
   }
   else                 
   {
    $("#myBox").css("left", currentXPos);	
   };
  }; //End of animateBox function
     
}); //End of $(document).ready

</script>

 

ActionScript Code

 

myBox.addEventListener(Event.ENTER_FRAME, moveBox)

function moveBox(eventObject:Event):void
{
/*If myBox x position is larger than the stage 
width, set its x position back to zero.*/
  if (myBox.x > stage.stageWidth)
  {
   //myBox x position to zero.
   myBox.x = 0;
  }
  else
  {
   //Else, continue to move box by 10px repeatedly
   myBox.x += 10;
  }
}