The concept that I was trying to explain is that the bird
can be animated by moving it a little bit at a time and
then redrawing the screen. By far the most complex
operation is to draw the bird and any other elements such
as text, links and other images. Fortunately for us, we do
not need to do any of that. Drawing the page is the
responsibility of the Browser. All we need to do is to
change the position of the bird. Dynamic HTML will do the
rest for us by recognizing that the DOM (Document Object
Model, has been changed and telling the browser to redraw
it.
In the example above, the bird is moved across the screen
by adding 10 (pixels) to its horizontal position each
frame. This is computed with a simple math operation:
newleft = newleft + 10;
Since newleft is initially assigned a value of -10, every
time this statement is executed, the value of newleft will
increase by 10. -10 to 0 to 10 to 20 etc. If you look at
the statement it should be pretty apparent how that works.
It simply says that newleft is equal to itself plus 10. To
make the bird fly faster we could increase the distance it
is moved each frame from 10 to say 15 or 20 and to slow it
down we could add 5.
Last time I posted a final example at is67fig3.htm and asked you
if you could spot the difference. You may want to refresh the
screen a few times. In this example, the bird will appear
to slow down before it comes to a complete stop. This was
accomplished by replacing the statement
OK this is a little more complex math but the concept is
quite easy. It simply moves the bird 20% of the distance
that it has left to go before it reaches its final
position. Its final position is at 400. Its current
position is at 'newleft' so its new position will be at
newleft plus 20% of the remaining distance which is (400 -
newleft) * 0.2. This will be shorter each frame making the
bird appear to slow down.
So far I have not explained all of the 'syntax' of the
examples so don't be concerned if you still do not fully
understand how some of the statements work.
To backup a bit we need to understand a few fundamental
concepts behind nearly all programming languages.
An obvious one is an assignment. This is where a value is
given to something and often includes an equal sign.
'newleft = 10' is a simple example.
A less obvious but equally important operation is a test.
There are several examples using 'if' statements in the
above example. An 'if' statement works by simply testing
if something is true. If it is, then an operation or a
block of statements will be executed. What will happen if
it is not true will depend upon how you construct your
'if' statement. In this example:
The value for newleft is assigned to the bird's position
using the Netscape method if 'ns4' is true and using the
Internet Explorer method if 'ie4' is true. This example
could be expanded to include as many 'else if' statements
as necessary. A final 'else' statement could also be added
to execute a statement if none of the previous statements
are true. An expanded form of this 'if' block could look
like:
if(ns4)
{
document.bird.left = newleft;
document.write('The bird is at ' + newleft);
}
else if(ie4)
{
bird.style.left = newleft;
document.write('The bird is at ' + newleft);
}
else
document.write('Warning -Unrecognized Browser');
Curly { brackets } have been added to the first two tests
in order to write the bird's position if either Browser is
used. The final 'else' statement will simply print a
warning message if neither browser has been detected.
Less obvious tests are the initial browser detection
statements:
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
Although there is not an 'if' statement, there is still a
test and an assignment. These two lines could be written
like this:
The reason I used the first method is obviously because it
is more compact but the result will be the same. Can you
figure out why?
The final thing to know about a test is what constitutes
True and False? Very simply zero '0' is false everything
else is true. Any test that does not result in 0 will be
considered true:
if(1), if(5-4), if(6==6) are all true.
if(0), if(5-5), if(6==7) are all false.
if(document.all != 0) is true if you are using Internet
Explorer.
if(document.all == 0) is true if you are not using
Internet Explorer.
Note the double '==' and the '!='. These are logical
expressions that are often used in tests.
== is equal to.
!= is not equal to.
< is less than.
> is greater than.
<= is less than or equal to.
>= is greater than or equal to.
The test: if(6==7) is false. The test: if(6=7) is an error
because the constant 6 cannot be made to be 7.
The final major construct in a programming language is a
loop. This is where a block of code or function can be
executed more than once. A typical construct for a loop is
with the 'for' statement.
for (count = 0; count < 10; count++)
document.write('Hello World');
The variable count is initially assigned a value of zero
'0'. The second part 'count < 10' is a test which will
cause the loop to execute as long as it is true. The third
part of the 'for' statement is an assignment which will
increase the value of count by 1 each time the loop is
executed.
Another common construct is with the 'while' statement.
var count = 10;
while (count > 0)
{
document.write("Hello World " + count);
count --;
}
You can use { curly braces } in either method when you
want to execute more than one line in the loop;
Note the statement 'count-;'. This is a common
abbreviation you will often see in Javascript and several
other languages. It simply means subtract 1 from this
variable. Other common abbreviations are:
count++; // is equivalent to: count = count + 1;
newleft += 10; // add 10 to this variable;
value *= (20/100); // multiply the variable by 20%
and so on.
The example is70fig1 above includes a loop but it does not
use either a 'for' or a 'while' statement. Do you see how
it is done?
With and 'if' statement.
function frameloop() {
update();
if(newleft < 400) window.setTimeout("frameloop();", waitTime);
}
One reader noted that this is not true recursion because
the function is being repeatedly called by the system.
Maybe so but it is recursive (semantics). The 'if'
statement will cause the 'frameloop' function to be called
until the vale of 'newleft' is greater than 400.
The fact is there are many different ways to perform a
task using a programming language. Some methods may be
better than others but the only wrong method is one that
does not work.
Next week I will wrap up this introduction to JavaScript
with a few practical examples.
"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.
