HTML and CSS Reference
In-Depth Information
Now, as I frequently tell my students, I am compelled to tell you the truth. In fact,
String
may not be
necessary here. JavaScript sometimes does these conversions, also termed
casts
, automatically.
However, sometimes it doesnt, so it is good practice to make it explicit.
The size of the field is the maximum required for three characters. The Georgia font is not a monospace
font—all characters are not the same size—so this is the largest space that might be necessary. You
might notice different amounts of space left over depending on the text in the field.
Note: JavaScript makes use of parentheses, curly brackets, and square brackets. They are not
interchangeable. The parentheses are used in
function
headers and in function and method calls; in
if
,
for
,
switch
, and
while
statement headers; and for specifying the order of operations in complex
expressions. The curly brackets are used to delimit the definition of functions and the clauses of
if
,
for
,
switch
and
while
statements. The square brackets are used to define arrays and to return
specific members of arrays. The language of Cascading Style Sheets puts curly brackets around
each style. HTML markup includes < and >, often called pointy brackets or angle brackets.
Displaying results using animation
Youve seen examples of animation in the bouncing ball application in Chapter 3 and the cannonball and
slingshot in Chapter 4. To recap, animation is produced by displaying a sequence of still pictures in quick
succession. The individual pictures are called frames. In what is called
computed
animation,
new
positions for objects on the screen are calculated for each successive frame. One way to produce
animation is to use the
setInterval
command to set up an interval event, like so:
tid = setInterval(flyin,100);
This causes the
flyin
function to be invoked every 100 milliseconds (10 times per second). The variable
tid
, for timer identifier, is set so the code can turn the interval event off. The
flyin
function will create
Throw
objects of increasing size holding the appropriate image. When an object reaches a designated
size, the code displays the result and adjusts the score. This is why the variables
result
and
newscore
must be global variables—they are set in
choose
and used in
flyin
.
The
flyin
function also makes use of a global variable named
size
that starts off at 15 and is
incremented by 5 each time
flyin
is invoked. When
size
is over 50, the timing event is stopped, the
result message displayed, and the score changed.
function flyin() {
ctx.drawImage(compimg, 70,100,size,size);
size +=5;
if (size>50) {
clearInterval(tid);
ctx.fillText(result,200,100,250);
document.f.score.value = String(newscore);
}
}
By the way, I had to modify the code in order to grab these screenshots. Figure 8-5 is the screen after the
very first invocation of
flyin
.
