JavaScript lab exercise
COMP-1536
Due: At the end of the lab period
School of Computing and Academic Studies
Program: CST
The objective of this lab is to familiarize you with JavaScript, JavaScript arrays, and JavaScript debugging.
Startup
Start by downloading and extracting a file named ChineseZodiacForLoopStartup.zip. You will find the following files:
The Images folder contains 12 images that represent the Chinese Zodiac animals. Notice that some images are in GIF format and others are in PNG format.
Chinese_Zodiac_for_loop_1D.html has the code that declares and initializes two arrays. The first array SignNames contains the Chinese Zodiac signs. The second array SignImages contains the Chinese Zodiac animal images. Here’s a pictorial representation of both of these arrays:
SignNames 1D Array
Rat
Ox
Tiger
Rabbit
Dragon
Snake
Horse
Goat
Monkey
Rooster
Dog
Pig
SignImages 1D Array rat.gif ox.gif tgr.gif rbt.png drgn.png snk.png hrs.gif gt.gif mnky.png rstr.gif dog.gif pig.gif
Chinese_Zodiac_for_loop_2D.html has the code that declares and initializes a single array named signs. The signs array is essentially a two dimensional array that holds both the 12 sign animal names and their respective animal image files. Here’s a pictorial representation of the signs 2D array:
signs 2D Array
Rat
Ox
Tiger
Rabbit
Dragon
Snake
Horse
Goat
Monkey
Rooster
Dog
Pig rat.gif ox.gif tgr.gif rbt.png drgn.png snk.png hrs.gif gt.gif mnky.png rstr.gif dog.gif pig.gif
Your Mission
Write dynamic JavaScript for-loop(s) that display a table with the 12 Chinese Zodiac signs as column header, and the years displayed below the appropriate column headings. Begin the table with the year 1912 and end with the current year. Get the current year from the JavaScript Date() object. You may want to use the modulus operator to determine the number of columns in each row of the table.
Use the arrays in each HTML file that contains the appropriate sign and