In
the examples, the values of variables are assumed to be those assigned in
earlier examples. That is, read the examples first to last.
1.
A declaration for a variable x: var x;
2.
A declaration for a variable x giving an initial value of
3, and declaring y: var x = 3, y;
3.
A declaration for variables iT, i and limit2, initializing iT: var
iT = 3, i, limit2;
4.
A declaration for variables x and A, a 4 element array: var
x, A = new Array(4);
(The
array elements are A[0], A[1], A[2],
and A[3].)
5.
A declaration for 20 element arrays Pix and Box:
var Pix = new Array(20),
Box = new Array(20);
(The
array elements are Pix[0], Pix[1],
, Pix[19],
and Box[0], Box[1],
, Box[19].)
6.
A declaration for strg initialized to the empty
string: var
strg = "";
7.
An assignment statement to initialize iT to an empty image: iT = new Image;
8.
An assignment statement to increment variable x: x = x + 1;
9.
Like 8, using the increment statement: x++;
10.
An assignment statement concatenating a string ("Numero") and a numeric value (x):
strg = "Numero "
+ x;
11.
An assignment statement concatenating a string value (strg) and a blank:
strg
= strg + " "
12.
Using mod (remainder after division) to limit a number to the values 0, 1 or
2: x = x%3;
13.
Initializing a variable using an assignment statement: limit2
= 12;
14.
Assigning to a variable the sum of two numbers: y = x + limit2;
15.
Incrementing the variable limit2 by 2: limit2
= limit2 + 2;
16.
Assigning a GIF image to the variable iT: iT.src
= "orca.gif";
17.
World Famous Iteration looping on iteration variable i to initialize an array to
store images:
for
(i = 0; i<20; i++) {
Pix[i] = new Image;
}
18.
World Famous Iteration looping on iteration variable y to initialize an array to
store images:
for (y = 0; y < 20; y++) {
Box[y] = new Image;
}
19.
Assigning a GIF image to the first element of the Pix array: Pix[0].src
= "humpback.gif";
20.
Assigning a series of images (whale1.gif, whale2.gif,
, whale19.gif) to the last 19 elements of
Pix, i.e. to prefetch the
images. (Notice that the WFI is used, but that the index sequence produced (0,
1,
, 18) is one less than the desired sequence (1, 2,
, 19), and so 1 is
added in the two places where the desired sequence is needed):
for (y = 0; y < 19;
y++) {
Pix[y + 1].src = "whale" + (y + 1) +
".gif";
}
(Notice
that the y + 1 operations are both additions; the other two pluses
are concatenates.)
21.
Solving #20 without using the WFI, but using a custom form of iteration with
the index sequence (1, 2,
, 19) and iteration variable y:
for (y = 1; y < 20;
y++) {
Pix[y].src = "whale" + y + ".gif";
}
22. Using a WFI to place 10 copies of the orca
whale image on a web page:
for (i=0; i<10; i++) {
document.write("<img src='orca.gif'>");
}
(Assuming
these are the only images on the Web page, they were stored by the browser in
the documents image array as elements document.images[0], document.images[1],
, document.images[9].)
23. Using a WFI to change the 10 orca pictures to the first ten whale pictures stored in Pix.
for (y=0; y<10; y++){
document.images[y].src = Pix[y].src;
}
24. Using a WFI to change the 10 pictures (see
#23) to the last ten whale pictures stored in Pix.
for
(i = 0; i < 10; i++){
document.images[i].src = Pix[i+10].src;
}
25. Adding another picture to the web page,
after the images of #22.
document.write('<img
src="humpback.gif">');
(If
this image follows those of #22, then it is stored in document.images[10], i.e. it is the 11th
image.)
26. Writing a function runthru() to animate the humpback
whale picture (the 11th image) by cycling through the whale GIFs
stored in Pix at one frame every 30 milliseconds, assuming frame and timerID were declared (var
frame=0, timerID;):
function runthru(){
frame
=(frame+1)%20; //select next image,
wrapping around after 19
document.images[10].src = Pix[frame].src; // update image
timerID =
setTimeout("runthru()",30); // set timer for next
}
27. Starting up the animation of #26: timerID =
setTimeout("runthru()", 30);
28. Writing a function switcher() to animate the 10 orca
whale pictures (#22) so that every second they either are all orca (orca.gif) or are all humpback (humpback.gif) images, assuming pick was declared (var pick=0;):
function switcher(){
pick = 1
pick; //switch from 0 to 1 or from
1 to 0
if (pick == 0){ // is this the orca (0) or the humpback (1)?
for (i
= 0; i < 10; i++){ // orca, use
WFI to run thru 10 pix
document.images[i].src = "orca.gif"; // update to orca
}
} // close the "then" clause
else {
for (i
= 0; i < 10; i++){ // humpy, use
WFI to run thru 10 pix
document.images[i].src = "humpback.gif"; // update to humpy
}
} // close the "else" clause
timerID =
setTimeout("switcher()", 1000); // set timer for a second
}
29. Starting up the animation of #28 to begin 7 seconds after loading:
timerID =
setTimeout("switcher()", 7000);
New Web page beginning here
but same program
30. Using a WFI to prefetch twenty images (color0.gif, color1.gif,
, color19.gif) into the previously initialized (#18) Box array:
for
(i=0; i<20; i++) {
Box[i].src = "color" + i + ".gif";
}
31. Placing the first of the color images onto
the Web page:
document.write("<img
src='color0.gif'>");
(Assuming
this is the only image on the page, it is stored in document.images[0].)
32. Writing a function spectrum() to animate the colored
image (#31) to sweep through the colors, one every thirty milliseconds,
assuming tint was declared (var
tint=0;):
function spectrum(){
tint =
(tint+1)%20; // increment tint to
next color, wrapping at 19
document.images[0].src = Box[tint].src;
// update to next color
timerID =
setTimeout ("spectrum()", 30); // set timer for next
}
33.
A WFI to set the values of the 4 elements of array A to 5, 6, 7, 8:
for (y = 0; y < 4;
y++){
A[y] = 5 + y;
}
34. Add the elements of the array A (yielding 26): x = A[0] + A[1] + A[2] +
A[3];
35. Using a WFI to do the same operation as #34:
x = 0; // initialize x for the purpose of summing
up
for (y = 0; y < 4;
y++){
x = x + A[y];
}
(This is longer for 4 elements, but can work for 1000 elements if 4 is changed to 1000, unlike #34.)