CST295: Web Programming with JavaScript
Project 7: Chapter 17
-
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. 7"
-
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 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 web pages in the website and
incorporates a "rollover" effect of your own choice; or optionally
substitute for the "rollover" menu in the head block
an img with an image map
with links to the four web documents
-
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 "Day of Week" includes:
-
In the
section block of the <body> element,
create an HTML document with a layout
(use CSS for the layout, not a table)
similar to the one in the image below that includes:
-
Three
input 'text' boxes for "year" (4-digit),
"month" (1 - 12) and "date" (1 - 31) with three associated
label elements
-
A
button element with an onclick event
handler to the JavaScript function in the
<head> element as defined below
-
A paragraph
<p> element directly above the button
that displays the output for this application
-
In a <
head> script that executes when the onclick()
event "fires" for the button element:
-
Gets the "year", "month" and "date" from the three
input 'text'
boxes (use method parseInt to convert the values to type int)
-
Use the Zeller's congruence algorithm below
(developed by Christian Zeller) to calculate the day of the week as a
number (0 - 6) with the result assigned to a variable
where:
-
h is the day of the week (0 = Saturday;
1 = Sunday; 2 = Monday; 3 = Tuesday; 4 = Wednesday;
5 = Thursday; 6 = Friday)
-
q is the day of the month (1 - 31)
-
m is the month of the year
(March = 3; April = 4; ...; December = 12);
January and February are counted as months
13 and 14 of the following year
-
j is the century
(i.e. year ÷ 100)
-
k is the year of the century
(i.e. year % 100)
Note: the division
in the formula is integer
division
-
Write the result as the day of week
string to the innerHTML
property of the output paragraph <p>
element as per the image above
-
The Part 2 web document "Ice Cream Cone" application that
prepares an order for an ice cream cone purchase:
-
In the
section block of the <body>
element, create an HTML document similar to the one in the image
below that includes:
-
A
select 'DropDownList' block with option
elements for at least eight different ice cream flavors with
matching value attributes, and with an onchange
eventhandler to the JavaScript function in the
<head> element as defined below
-
Three
input 'radio' buttons for either 1, 2 or 3 scoops
of ice cream; the checked attribute is set on
as the default for the "1 scoop" radio button
-
Three
input 'radio' buttons for either a "wafer", "waffle"
or "sugar" cone; the checked attribute is set on
as the default for the "wafer cone" radio button
-
An
input 'checkbox' for either "sprinkles" or "no sprinkles"
-
A
button element with an onclick event
handler to the JavaScript function in the
<head> element as defined below
-
A paragraph
<p> element directly above the button
that displays the output for this application
-
In a <
head> script that executes when the onchange
event "fires" for the select element and also
when the onclick event "fires" for the button element:
-
Get results from the "form" elements as follows:
-
The "ice cream flavor"
value from the selected option
of the selection list select block
-
A
string either "1" or "2" or "3" based upon which of the "scoops"
input 'radio' buttons' checked properties is true
-
A
string either "wafer" or "waffle" or "sugar" based upon which of
the "cones" input 'radio' buttons' checked properties is
true
-
The
string "with sprinkles" based upon whether or not the checked
property is true for the "sprinkles" input 'checkbox'
-
Write the accumulated results plus descriptive labels to the
innerHTML
property of the output paragraph <p> element as per the
image above
-
The Part 3 web document "Validate a Form" application
that validates user textbox input and includes:
-
In the
section block of the <body> element,
create an HTML document with a layout
(use CSS for the layout, not a table)
similar to the one in the image below that includes:
-
Four
input 'text' boxes for "first name",
"last name", "state" and "ZIP code" with four associated
label elements, each textbox with an onkeypress
eventhandler that passes an 'event' parameter to
oneof three JavaScript function
code blocks in the <head>
element as defined below
-
In a <
head> script that executes when the onkeypress
event "fires" for either the "first name" or "last name" input 'text'
box:
-
Assign to a 'unicode' variable either the
charCode or the
keyCode from the 'event' parameter
-
Test
if the 'unicode' variable is
or is not the <Backspace> key
-
If the 'unicode' variable is not <Backspace>,
if the 'unicode' variable is not an uppercase letter (see call
to function 'isUpperCase' below) and
it is not a lowercase letter (see call to function 'isLowerCase'
below), return the boolean value false
to disable the current keypress event
-
Call the
function 'isUpperCase' with the 'unicode' variable
as a parameter which returns a boolean value true
if the parameter is Unicode for an uppercase letter (A - Z) and false
if it is not
-
Call the
function 'isLowerCase' with the 'unicode' variable
as a parameter which returns a boolean value true
if the parameter is Unicode for an lowercase letter (a - z) and false
if it is not
-
In a <
head> script that executes when the onkeypress
event "fires" for the "state" input 'text' box:
-
Assign to a 'unicode' variable either the
charCode or the
keyCode from the 'event' parameter
-
Test
if the 'unicode' variable is
or is not the <Backspace> key
-
If the 'unicode' variable is not <Backspace>,
if the 'unicode' variable is not an uppercase letter (see call
to function 'isUpperCase' below) or
the length of (current number of characters in) the the
"state" input 'text' box is 2 or greater, return
the boolean value false to disable the current
keypress event
-
Call the
function 'isUpperCase' with the 'unicode' variable
as a parameter which returns a boolean value true
if the parameter is Unicode for an uppercase letter (A - Z) and false
if it is not
-
In a <
head> script that executes when the onkeypress
event "fires" for the "ZIP code" input 'text' box:
-
Assign to a 'unicode' variable either the
charCode or the
keyCode from the 'event' parameter
-
Test
if the 'unicode' variable is
or is not the <Backspace> key
-
If the 'unicode' variable is not <Backspace>,
if the 'unicode' variable is not a digit (see call
to function 'isDigit' below) or
the length of (current number of characters in) the the
"ZIP code" input 'text' box is 5 or greater, return
the boolean value false to disable the current
keypress event
-
Call the
function 'isDigit' with the 'unicode' variable
as a parameter which returns a boolean value true
if the parameter is Unicode for a digit (0 - 9) and false
if it is not
-
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.