For the past two weeks I have been introducing JavaScript.
Please visit issue65top1.htm and issue66top1.htm to review these
articles. This week I will jump ahead a bit to show you
how to create your own animation using JavaScript.
This is an image of a bird that has been positioned on a
web page using Cascading Style Sheets or CSS. CSS is
essential in order to do animation or many other advanced
web page effects. If you have forgotten about CSS or need
a refresher, take a look at issue64top1.htm
You will notice that the bird's position is set with the
"left" and "top" style values at 200 and 200 in pixel
coordinates. Obviously if you change these numbers to say
"left:400; top:200" the location of the bird on the web
page will change.
In order to see the change, you will have to reload
(refresh) the page! Or will you? Do you remember Dynamic
HTML? If you want a refresher on that visit: issue63top1.htm.
When a Web Page is loaded into the Browser, a copy of the
document is made. This is called the Document Object Model
or DOM. With Dynamic HTML if you change anything in the
DOM, the Browser will automatically reload it. In this case,
if we change the "left" position of the bird, the Browser will
reload the page with the new DOM and the bird will
'magically' appear to move.
To animate the bird, all we need to do is to keep changing
the bird's position a little bit at a time and DHTML will
automatically redraw the screen.
But how do you change the bird's position?
With JavaScript.
The trick is to find where in the DOM the value of the
bird's position is stored. If you look at the example, you
will notice that it has an 'id' called "bird" (id="bird").
Using the 'id' we can look for an element called "bird"
and find the style "left". Unfortunately there is a small
wrench (spanner) in the works here. The way to find the id
"bird" is not the same for Internet Explorer and Netscape.
That means that you will need to do it differently for
each browser.
So how do you do it? First find out which Browser is being
used. There are several ways to do it. Here is a simple
JavaScript method:
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
This works by setting the variables 'ns4' and 'ie4' to
true or false by looking for elements called
'document.layers' which only Netscape supports and for
'document.all' which only Internet Explorer supports. I
will explain the actual JavaScript code next week.
The first two var's test if Internet Explorer or Netscape
is being used as we previously discussed. The next two
lines set values for two additional variables. The first
"newleft" is the position we are going to move the bird
to. This is initially set to -10 which is just off the
left edge of the Browser window. The second variable
"waitTime" is set to 20. This is the amount of time we
will wait between each frame of the animation and is
supposed to be in 1/1000's of a second. In practice it
will be less depending upon the speed of the viewer's
computer.
Next is the function 'update()'. I discussed functions
last week. This function will be used to assign the bird's
new position. The first thing we do is to increase the
value of "newleft" by 10 pixels. If we want the bird to
fly faster we would make this number larger and smaller to
fly slower. The next lines test if Netscape or Internet
Explorer is being used to assign the new position to the
bird's 'left' style. Each time this function is executed,
the "newleft" variable will increase by 10 and will then
be assigned to the bird'd 'left' style to move it by 10
pixels to the right.
Following the 'update' function is another function called
'frameloop()'. This function calls the 'update' function
to move the bird. The final line is a special case. The
first part is an 'if' statement to test if the "newleft"
variable is still less than 400. I will discuss "if"
statements next week. The second part is a special event
handler that calls another function and then waits for the
specified amount of time. The time is approximately
20/1000 of a second as was set with the waitTime variable.
The function that gets called is this function
'frameloop'. You may recall last week I mentioned
recursion when a function calls itself and that it should
generally be avoided. This is the special case where
recursion is used.
So if you have followed this so far, the frameloop
function will repeatedly call the update function to move
the bird 10 pixels at a time until the bird's left style
reaches 400 where it will stop.
The only other thing that is missing to make this
animation work is something to start the 'frameloop'
function the first time. This is done with another event
handler called 'onLoad'. This event can be placed in the
BODY tag to call 'frameloop' after the page has finished
loading. The format is:
<BODY onLoad="frameloop()">
That is an awful lot to digest for one week. I said that I
was jumping ahead and I did. Although some of this may be
excessively complex for an introduction to JavaScript, I
wanted to illustrate how it can be applied and used for a
real effect.
Next week I will explain some of these JavaScript
operations in a little more detail to help you understand
what is happening. By making just a few minor changes, you
can significantly change the animation. Take a look at
this example and see if you can spot the change. is67fig3.htm
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
