FIT100 Fluency With Information Technology

JavaScript Vocabulary and Examples

 

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 document’s 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.)