X hits on this document

Word document

JavaScript Tutorial: bouncing ball - page 5 / 7





5 / 7

function getObj(name)


 if (document.getElementById)


     this.obj = document.getElementById(name);

     this.style = document.getElementById(name).style;


 else if (document.all)


        this.obj = document.all[name];

        this.style = document.all[name].style;


 else if (document.layers)


        this.obj = document.layers[name];

        this.style = document.layers[name];



The if statements are 'saying', do you understand document.getElementByID?  Putting this more formally, does your Document Object Model include a getElementById method for document?  If it does, then we will use it.  If your DOM does not have such a method, how about document.all?  If you understand that, then we will use that, and so on.

The usage of getObj will be to create an object that can be used to change the positioning of the div element that holds the image of the ball.  The img tag cannot be re-positioned directly.  The code to create the ball object is

var ballobj;

ballobj = new getObj("ball");

Notice that this browser specific code does not ask the question: which browser is in use.  This method of checking for the specific code accomplishes the task and you need not remember which browser uses what methods.

Now we move on to the implementation.


You need to do some preparation before testing any code, so you may as well do it right away.  Prepare 1 image file to be the ball or whatever picture you want to move.  You may later want to create images to be the walls that the ball bounces against.  

Open up the code you used for the positioning exercise in NotePad.

Put Bouncing Ball as the title.

Document info
Document views27
Page views27
Page last viewedSat Jan 21 18:12:54 UTC 2017