CST295: Web Programming with JavaScript
Project 4: Chapter 7
-
Create a four page website, a "Home Page" and three (3) JavaScript
application pages, in which all four
of the web documents share the following elements:
-
The
<head> element should include:
-
a comment with your name and
the project due date
-
a
<title> element with the title
"Project No. 4"
-
a
<meta> element that references
the "UTF-8" character set
-
a
<link> element that links to
a stylesheet that incorporates both formatting and layout
as per your own specifications
-
The structure of the document within the
<body>
element contains header, nav,
section, aside and
footer blocks all of your own design
(except as noted just below)
-
The
nav block within the the <body>
element includes links to all four (4) web pages in the website
and incorporates a "rollover" effect of your own choice
-
The
section block within the the <body>
element includes either the project instructions on the
"Home Page" or the JavaScript code for each page depending
upon which document it is (see below)
-
The
footer block within the the <body>
element includes an <address> block which
contains a script that writes to the document window a
date object instantiated to the current system
date formatted to the toString representation
-
The formatting and layout elements for the CSS stylesheet properties
are per your own design and specifications; for a higher grade you
should use extensive creative and professional-looking stylesheet
formatting
-
The
section block within the the <body>
element of the "Home Page" includes (see below):
-
A
<p> (paragraph) that is a general description
of the overall project
-
An unordered list with descriptions of each of the JavaScript
assigned applications
-
The Part 1 web document "Calculate the Products of Two Arrays" includes:
-
In the
section block of the <body>
element write a script that:
-
Creates two arrays ("array1" and "array2") of 10 elements each into
which are assigned random
integers between 1 and 10
-
Creates a third array ("productArray") into which will be stored the
products (multiplication) of all of the elements of the first two arrays
-
Using a
for...in loop, displays in table
columns within the document window the values of the two arrays of
"random values", as well as the array of "products"
-
Uses stylesheet formatting to create the borders for the table, and its
column headings and cells; in addition the CSS properties
width,
margin-left, and margin-right can be used in
combination with each other to center the table below the document
heading
-
The Part 2 web document "Count Occurrence of Numbers" includes:
-
In the
section block of the <body>
element write a script that:
-
Creates an array ("numbers") of 25 elements into which is assigned
random
integers between 1 and 25
-
Creates a second array ("counters") also of 25 elements which will
be used to count the number of occurrences of all values between
1 and 25 in the "numbers" array
-
Once both arrays have been completed, uses a
for...in
loop to iterate through the "counters" array and displays in the
document window the index and the "count" of all elements
for which the "count" value is greater than zero (0)
-
The
index and "count" of elements list should be
single-spaced but centered in the document window using CSS formatting
-
The Part 3 web document "Find a Soda Flavor" includes:
-
In the
section block of the <body>
element write a script that:
-
Creates a 2-dimensional array of soda ID#'s
(
integer type) and soda flavors
(string type), e.g.:
| Soda ID |
Soda Flavor |
| 101 |
"Cola" |
| 103 |
"Lemon Lime" |
| 105 |
"Ginger Ale" |
| 107 |
"Orange Soda" |
| 110 |
"Grape Soda" |
| 111 |
"Diet Cola" |
| 114 |
"Cream Soda" |
| 118 |
"Cherry Cola" |
| 121 |
"Vanilla Cola" |
| 124 |
"Sarsaparilla" |
-
Prompts the user to input a target (search) key "soda ID#" and
parses the user input to an
integer
-
Enumerates through the left-side elements (soda ID#'s) of the
2-dimensional array to find a soda ID# that matches
the target key
-
If the target key is found in the left-side elements of soda
ID#'s, writes to the document window the matching right-side
element of soda flavors
-
If the target key is not found in
the left-side elements of soda ID#'s, writes a "Not found" error
message to the document window
-
This problem also can be solved using two separate arrays for
the "soda IDs" and "soda flavors"; search the "soda ID" array
to find a match for the target key and then use the matching
index to retrieve the value from the "soda flavors" array
-
Students may work on all projects in teams
of two or three, and, if so, all students in the group must submit
the same project to their own dropboxes in Blackboard. In the
text box's dropbox, as well as in the source code documentation
(comments), state the name(s) of the classmate(s) with whom you
worked.
-
The completed project with a .ZIP file of the
entire folder containing the all files that
make up the website submitted electronically via an attachment to a
Blackboard
dropbox is due to Prof. Struck no later than 11:59 p.m. on the date
listed in the course outline.