CISC103, Fall 2005

lab08: JavaScript Calculations involving a Form

Note—textbook references to HFH and JSA6

In this lab, and in the labs that follow, there will be references to your two textbooks:

• Head First HTML with CSS and XHTML
• JavaScript and AJAX, 6th Edition

I'll use the abbreviations HFH and JSA6 to refer to these two books. Please make a note of it.

Introduction

In this activity, you'll be given a sample problem, and a solution to that problem.

You'll then be given a similar problem, you'll asked to come up with your own solution.

The solved problem is similar to one covered in lecture: namely a version of the price-per-square inch calculation (just like the one in activity03), but using fields in an XHTML form element for input and output instead of using the window.prompt() method.

The problem where you will come up with your own solution will be the same as last week: is to determine the gas mileage of a car, given the starting odometer reading, the ending odometer reading, and the number of gallons of gas consumed in between the two odometer readings. However, this week you'll solve it using an HTML form for input and output.

Learning objectives

By the time you complete this activity, you should know how to do the following in JavaScript:

• set up a form in HTML containing both text input fields, and a button.
• read values from that form into JavaScript variables
• writing values from JavaScript variables back into that form

Other skills you'll also need that comes from lab06

• convert values to numeric data using parseInt() and parseFloat()
• do simple calculations using assignment statements
• How to put JavaScript into an HTML file that will pass validation at validator.w3.org.

Step-by-Step Instructions

Step 1: Look over the pizza.html web page

Here is the assignment for the file pizzaForm.html. Read over this assignment, then look at the solved problem in the file pizzaForm.html (located in the folder lab08 under the activities link on the course web page.)

radius = diameter / 2;

radius * radius

Try reloading the page several times. Also do a "view source" and read through and try to understand the XHTML and JavaScript source. Finally, note that if you run this through validator.w3.org, it will pass validation as XHTML 1.0 Transitional.

Step 2: Put the pizzaForm.html file on your web site on copland

Your next step is to put this pizzaForm.html file on your web site on copland, so that if you click on the link below (where your userid is in place of "userid"), the file comes up.

http://copland.udel.edu/~userid/cisc103/lab08/pizzaForm.html

Here's what you need to do:

1. Download the file to the hard drive of your PC
2. Open the ssh secure file transfer program, and connect to copland.udel.edu.
3. On the copland side of the window, navigate into public_html, and create a folder called cisc103 (if it doesn't already exist). Navigate into that folder.
4. Now, inside cisc103 (which is inside public_html), create a folder called lab08
5. Upload the pizza.html file into the folder lab08.
6. Make sure that

   http://copland.udel.edu/~userid/cisc103/lab08/pizzaForm.html
   
   links to the pizza.html page.
   
   Note: If you have trouble with errors such as "403 forbidden", then you need to right click on the file in the SSH File transfer program, and set the permissions of the file to the octal number "755". You may need to do this on the folders public_html, cisc103, and lab08 as well, if it was not already done.

7. When you have done this, you are ready to move on to steps 3 and 4. If you can't get it to work, you can move on to step 3 until you can get help from your TA or your instructor, but you won't be able to proceed to step 4 until you get this step to work.

Step 3: Write your own web page gas.html to calculate gas mileage

Now write a page similar to pizza.html called gas.html that solves the following problem. Save the file under a folder called lab08 under your personal folder on the H drive.

Note that in order for the JavaScript section to pass validation, you need to enclose it in an XHTML comment, as shown in the example pizzaForm.html.

Step 4: Upload gasForm.html to your web site on copland

Now, to submit the file, use the same process you used in step 2 to upload this file to the following URL:

http://copland.udel.edu/~userid/cisc103/lab08/gasForm.html

That's it!

Evaluation and Grading

This activity counts as a regular lab grade out of 100 pts, broken down as follows:

Copyright 2005, Phillip T. Conrad, CIS Dept., University of Delaware. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.