Lab 03 JavaScript.....................................................................................................

3
Lab 03 Overview..................................................................................................... 3
Lab 03 Part 1 - Form onsubmit Event....................................................................4
Task 1: Create form.............................................................................................. 4
Task 2: Create onsubmit event.............................................................................4
Task 3: Demonstrate work.................................................................................... 4
Lab 03 - Part 2 - Form Validation.............................................................................5
Task 1: Download Web Application.......................................................................5
Task 2: Implement Order Form Validation............................................................5
Task 3: Implement Delivery Form Validation........................................................6
Task 4: Implement Payment Form Validation........................................................7
Task 5 Submission............................................................................................. 7
Lab 03 Part 3 Enhance JavaScript Game............................................................8
Lab 03 Part 3.1 - Enhance JavaScript Game.......................................................8
Task 1: Review and understand the application................................................8
Task 2: Port the application to your system.....................................................9
Task 3: Change the card images.......................................................................9
Task 4: Add a Start Game button......................................................................9
Task 5: End of game message...........................................................................9
Task 6: Fix the Reveal Images feature.............................................................10
Lab 03 Part 3.2 Implement JavaScript Cookies..............................................10
JavaScript Cookies Reference..........................................................................10
Task 1: Implement Enhancement....................................................................10
User Interface and Functional Requirements:..............................................10
Add three forms fields:.................................................................................10
Page load:.................................................................................................... 10
Start game:.................................................................................................. 11
End of game:................................................................................................ 12
Cookie Format Specifications:......................................................................12
Part 3 Submission............................................................................................ 12
Lab 03 Grading Scheme........................................................................................ 13

Part 1.................................................................................................................. 13
Part 2.................................................................................................................. 14
Part 3.1............................................................................................................... 15
Part 3.2............................................................................................................... 16

Lab 03 JavaScript
Lab 03 Overview
Lab 03 consists of three parts:

Part 1: Form onsubmit Event

Part 2: Form Validation
Part 3: Enhance Game

Lab 03 is worth 6.5% of your final grade where the marks are distributed as follows:

Part 1: 20% - Due January 26, 2015

Part 2: 20% - Due January 28, 2015
Part 3: 60% - Due February 6, 2015

Lab 03 Part 1 - Form onsubmit Event

What you will do:
Create a form and a simple Javascript that will be executed when the submit
button in the form is clicked.
Task 1: Create form
Create an HTML form (that conforms to HTML5) as per the mocked up form
below. Use the HTML5 INPUT type tag features appropriate for the input field.
All fields are required!
Your form data is to be submitted to the form_echo.cgi script. Note that your
form data must be sent to the server via the POST method.

Test your form to make sure it works.

Task 2: Create onsubmit event
Create a Javascript function that is executed when the forms Submit button is
clicked. The event onsubmit corresponds to the user clicking the forms Submit
button. The onsubmit event is an attribute of the form tag and its value is the
script/function to be executed when the event occurs.
The script should implement the following basic user functionality:

Present a final confirmation window to the user before the form data is
submitted to the server for processing. The confirm window will allow the
user to proceed if he/she clicks OK or to cancel the form submission when the
cancel button is clicked.

Task 3: Demonstrate work

You need to demonstrate your work before the end of January 26, 2015 lab
period.

Lab 03 - Part 2 - Form Validation

What you will do:
Implement and test client-side form validation for the GPS-ware Order Form
web application.
Task 1: Download Web Application
Download and unzip the content of the Web Form Validation Case Study
file. The file is located in the following folder: Course Documents /
Week3&4 / Topic 03: JavaScript / JS_Case_Study. You will also need the file
file named Lab03 - Part 2 Functions which contains functions called by
form1, form2 and form3. The functions in the file need to be carefully
reviewed and understood before use as you will need to replace the masked
code with working code.
Task 2: Implement Order Form Validation
Implement and test form1 validation as per the validation requirements and
specifications outlined below.
The functions referenced below have been declared in the
head function of the form1.htm html document. You are
simply required to develop the JavaScript code that meets the
stated requirements and specifications. There are also a
number of pre-defined functions that exist in the functions.js
file.
General notes:
User should not be able to submit the form (click next) unless the order
is complete. A complete order consists of the user having purchased
at least one product and selected a shipping method.
Page Load Event (onload)
For the on page load event, call the startForm() function to write
todays date in the forms date field and then set focus to the prod
field. Hint: Use the existing todayTxt() function to compute and
format todays date.
Form Reset Button (onreset)
Reload the html page when the user clicks the reset button.

Form Submit Button (onsubmit)

For the form submission event, call the checkForm1() function to
confirm that the order is complete, that is, a product and shipping
method must be selected. Hint: An order is incomplete if the values of
prod or qty are zero. A shipping method must also be selected for the
order to be complete. Use the checkRadio() function to verify if the
user has selected one of the shipping method radio buttons.
Calculate Product Price
Call the calPrice() function to calculate the product price, subtotal, tax
and total and update the corresponding form fields whenever the user
changes the product or quantity fields. Hint: use the onchange event
to trigger the call to the calPrice() function. Use the calTotal() function
to compute and update the subtotal, taxes and total form field values.
Calculate Subtotal, Taxes and Total
The calTotal() is called from the calPrice and calShipping functions.
The function calculates and updates the subtotal, tax and total field
values.
Calculate Shipping Cost
Call the calShipping() function to calculate shipping cost, subtotal, tax
and total and update the corresponding form fields whenever the user
selects a shipping method radio button. Hint: use the onclick event to
trigger the call to the calShipping() function. Use the calTotal()
function to compute and update the subtotal, taxes and total form field
values.
Task 3: Implement Delivery Form Validation
Implement and test form2 validation as per the validation requirements and
specifications outlined below.
The functions referenced below have been declared in the
head function of the form2.html document. You are simply
required to develop the JavaScript code that meets the stated
requirements and specifications. There are also a number of
pre-defined functions that exist in the functions.js file.
General notes:
User should not be able to submit the Delivery Form (click next) unless
all Contact information fields have been entered and the Postal Code
format is valid.

Form Submit Button (onsubmit)

For the form submission event, call the checkForm2() function to
ensure that no fields have been left empty and that the Postal Code
conforms to the ANA NAN format. Hint: Use the checkEmpty() function
to verify if fields have been left empty. Use the checkZip() function to
validate the format of postal code field.
Postal Code Validation
The function checkZip(a) tests the a string value against the regular
expression postalCodeRE and returns false if the test fails to indicate
an invalid postal code format.
Task 4: Implement Payment Form Validation
Implement and test form3 validation as per the validation requirements and
specifications outlined below.
The functions referenced below have been declared in the
head function of the form3.html document. You are simply
required to develop the JavaScript code that meets the stated
requirements and specifications. There are also a number of
pre-defined functions that exist in the functions.js file.
General notes:
User should not be able to submit the Payment Form (click next) unless
all Credit Card Information fields have been entered and the credit card
number conforms to the Luhn rule.
Form Submit Button (onsubmit)
For the form submission event, call the checkForm3() function to
ensure that no fields have been left empty and that the credit card
number conforms to the Luhn rule. Hint: Use the checkEmpty()
function to verify if the Name and number fields have been left empty.
Use the checkRadio() function to ensure the user has selected a credit
card type. Use valid_credit_card() function to verify that the credit card
number conforms to the Luhn formula.

Task 5 Submission
Zip up your application (include all web application files) and submit to Blackboard
before the due date.

Lab 03 Part 3 Enhance JavaScript Game

Lab 03 Part 3 consists of two parts.
In part 3.1 you will enhance a JavaScript based game.
In part 3.2 you will implement cookies in the game for the purpose of tracking game
scores.
Lab 03 Part 3.1 - Enhance JavaScript Game
What you will do:
Review and understand an existing JavaScript application for the purposes of:
a. Understanding the basics of JavaScript programming:
i. Variables
ii. Arrays
iii. Objects
iv. Functions
v. Events
b. Porting the application to your local system for the purposes of
making the application completely standalone
c. Implementing simple program modifications
1. Replacing game cards with your own
2. Implementing game improvements
3. Fixing a broken feature

Task 1: Review and understand the application

Familiarize yourself with the application functionality hosted at
http://kidsofthecross.com/concentration/animals/index.html.
Once you have become familiar with the application, examine the html and
JavaScript code for the purposes of understanding the code that implements
the features.
Here are some of the questions you should be able to answer:

The role of each function, for example:

o Which JavaScript function executes when the html page loads?
o Which JavaScript function executes when you click a card?
The purpose of each variable/object, for example:
o Which variable is used to store the status of each card
o Which variable/object stores the image for each game card
o Which variable stores a cards screen locations (two locations
per screen)
o What object and property name is used to modify a cards image

You should step through the code to understand different use cases and help
you understand the code, for example:

Game start;
No cards matched;
Cards matched;
End of game;
Select an already match card.

Task 2: Port the application to your system

Move the application files to your local system such that the application runs
as a standalone application.
The application files such as the HTML, JavaScripts and images MUST be
organized according to the following directory structure:

Please note that HTML and JavaScript code modifications will be required to
support the above directory structure.
Task 3: Change the card images
Create your own game card images.
Task 4: Add a Start Game button
Add a button labeled Start Game such that the Elapsed Time remains at zero
(0) until the user has clicked the Start Game button.
Prevent a user from flipping a card unless the game has been started.
Present the user with a warning should he/she try to flip a card before the
game has been started.
Hint: Consult the Lab 03 Part 3.1 Task 4 Hints document.
Task 5: End of game message
Display an end of game message via an alert window where the message
content is based on the game score.
Here are sample messages:

For 100%: Congratulation your memory is flawless!

Between 80 99%: Very good memory!
Between 60 79%: Keep practicing!
Between 50 59%: Are you getting enough sleep!

Less than 50%: Dont quit your day job!

Task 6: Fix the Reveal Images feature

Enable and make the Reveal Images feature work.

Lab 03 Part 3.2 Implement JavaScript Cookies

What you will do:
You will enhance the Animal Concentration game to keep track of a users
last and all time high score.
You will implement the enhancements according to the functionality and
specifications described below.
JavaScript Cookies Reference
You may customize the code at this link http://www.w3schools.com/js/js_cookies.asp
to help you implement the cookie functionality.
Task 1: Implement Enhancement
The sections that follow describe the user interface and functional
requirements that you will implement using JavaScript cookies to maintain a
users last and all time high score.
User Interface and Functional Requirements:
Refer to the Cookie Format Specifications on the next page for details about
the cookie and its content.
Add three forms fields:
User field: to display of username
o This is a readonly field
Last Score, High Score fields: to display the users Last and High score
values.
o These are readonly fields

Page load:
Add the following page Onload event processing:

Does a cookie with name = userscore exist?

o Yes

Parse the cookies values to display userid, last and high

score values in the corresponding fields.

Prompt the user (via a prompt window) for a game user id

until the user has entered a !(empty, null, undefined, all
spaces or length=0) value.
Create cookie for user, setting last and high score values
to 0%.
For example, lets say the user entered chimp as the user
id. You would write the following cookie:
Cookie name: userscore
Cookie value: chimp,0%,0%

No

Start game:
Do not allow a user to start a game with an empty, null, undefined, spaces or
length = 0 User value. Implement the following functionality should any of
the latter conditions be true:

Prompt the user (via a prompt window) for a game user id until the
user has entered a !(empty, null, undefined, all spaces or length=0)
value.
Create cookie for user, setting last and high score values to 0%.
For example, lets say the user entered chimp as the user id. You
would write the following cookie:
o Cookie name: userscore
o Cookie value: chimp,0%,0%

End of game:
1. At the end of the game, update (on-screen and cookie) the users last
and high score where:
a. Last score = current game score
b. High score = the greater of the (current game score and current
high score)
Cookie Format Specifications:
Cookie name:
userscore
Cookie value: userid,lastscore%,highscore%
o Note that the userid, last and high score values are comma
separated. Use the string split method to separate the cookie
value into three separate parts: userid, lastscore and highscore.
Cookie expiry: 1 year
Note that the cookie mechanism being implemented does not allow a
browser to maintain more than one users score.

Part 3 Submission
Zip up your application (include all web application files) and submit to Blackboard
before the due date.

Lab 03 Grading Scheme

Part 1
1.3 points
Deductions prefixed with ####
Task 1: Create form /.65
1. 11 fields consisting of 8 input, 1 select and 2 radio buttons .1
2. Use of HTML5 required attribute on mandatory fields .15
3. Form tag attributes: .2
action=/cgi-bin/form_echo.cgi
method=post
4. Use of HTML5 INPUT tag type attribute values .1

type=tel
type=email
5. form elements .1
Input tag: id, type and name attributes
If used, label tag: for attribute value matches control id value
select tag

Example: <select name=prov>

<option value=on> Ontario </option>

Radio button: id, type, name and value attributes

Task 2: onsubmit event /.65
Javascript function called when the forms submit button is clicked. No
errors!
1. form atttibute: onsubmit=return .15
2. User is presented with a confirmation window
Click OK Send form data to server .25
Click cancel Do not send remain on form .25
Javascript function returns false if user clicks cancel

Part 2
1.3 points
Deductions are indicated with ######
Task 2: Order form .65
onload and reset events: Todays date written in date field .

.22

onsubmit event: Must not be able to move to the next form unless: .21
Alert message is presented if validation fails!
User selected product with a NON zero quantity
Selected shipment method.
An onchange event (on product type, quantity and shipment): recalculates
the product, shipment, subtotal, taxes and total price values. .22

Task 3: Delivery form .32

Onsubmit event: Must not be able to move to the next form unless:
Alert message is presented if validation fails!
All fields are completed (fields left empty have their colour changed!)
Postal code is valid
Task 4: Payment form .33
Onsubmit event: Must not be able to move to the next form unless:
Alert message is presented if validation fails!
All fields are completed (fields left empty have their colour changed!)
Credit card # is valid (378282246310005)

Part 3.1
2.6 points
Task 2: Application runs locally /.52

Task 3: Card images personalized /.52

Task 4: Start Button /.52
o Display error if user tries to flip a card before start button clicked
o Timer stays at 0 until start button clicked
o When Start button clicked timer starts at 0
Task 5: End of game message /.52
o For 100%: Congratulation your memory is flawless!
o Between 80 99%: Very good memory!
o Between 60 79%: Keep practicing!
o Between 50 59%: Are you getting enough sleep!
o Less than 50%: Dont quit your day job!
o
Task 6: Fix Reveal Images button /.52

Part 3.2
1.3 points

Add three form fields read only - /.25

Onload - .4
1. No cookie exist /.2
a. Prompted for user id
i. Blank not allowed error message presented
ii. Cookie written
1. Check cookie format!
iii. Form fields updated
1. Cookie exists /.2
a. Form field properly updated!

End of game: /.4

1. Last and high score properly updated
2. Form fields updated
3. Cookie updated

Cookie spec /.25

Userscore = userid,last, high expiry = 1 year!