CISC103, Fall 2005

Activity 4: JavaScript Calculations involving a Form


Introduction

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

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

Finally, you'll be given a more challenging problem, and 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.

(Note: window.prompt() is the full name of the method prompt();—the method prompt() is a method of the window object, and the dot syntax window.prompt() shows this.

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 a form for input and output.

Learning objectives

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

Other skills you'll also need that comes from previous activities:

You should also know how to put JavaScript into an XHTML 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 activity04 under the activities link on the course web page.)

Write out the contents of an XHTML file pizza.html that contains a form like the following. The form has fields for the size of a pizza (the diameter) and the price of a pizza, and the price per square inch, and a calculate button.

pizza calculator
price of pizza
size of pizza (inches)
price per sq inch

Include a JavaScript function called "calculatePricePerSquareInch" that will calculate the price per square inch by reading the diameter and price out of the table, and storing the result back into the price per square inch field in the table.

Make an event handler so that when you click the calculate button, the function is called.

Use Math.PI as the constant π The formula for radius is:

radius = diameter / 2;

The formula for area of a pizza (um, I mean circle), is:

area = πr2

You can calculate radius squared in JavaScript with

radius * radius

Include an XHTML comment near the top of the file that includes the file name, your name, the date, and the assignment (activity 3 for CISC103).

Be sure all your tags follow the XHTML standard: i.e. they should be all closed, properly nested, and written with lowercase letters. Your file should pass validation at http://validator.w3.org

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/activity04/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 activity04
  5. Upload the pizza.html file into the folder activity04.
  6. Make sure that

    http://copland.udel.edu/~userid/cisc103/activity04/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 activity04 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 activity04 under your personal folder on the H drive.

Write out the contents of an XHTML file gas.html that would run a JavaScript script containing a form with fields that allow the user to enter a starting odometer reading, and ending odometer reading, and the number of gallons of gas consumed during that trip. Include a button that is labelled "calculate gas mileage". That button should invoke a JavaScript function that performs the calculation.

The formula is:

gas mileage = (endOdometer - startOdometer)
totalGallons

Include an XHTML comment near the top of the file that includes the file name, your name, the date, and the assignment (activity 3 for CISC103).

Be sure all your tags follow the XHTML standard: i.e. they should be all closed, properly nested, and written with lowercase letters. Your file should pass validation at http://validator.w3.org

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/activity04/gasForm.html

Step 5: Create pizzaCompare.html

Now design a page called pizzaCompare.html according to this description:

Write out the contents of an XHTML file pizzaCompare.html that contains a form that looks like the table below.

This table allows the user to compare the price of two different pizzas.

pizza calculator
price of first pizza price of second pizza
size of first pizza (inches) size of second pizza
price per sq inch price per square inch
better choice better choice
 

(Note that the XHTML for this form in this assignment file activity04.html is not entirely complete in terms of JavaScript related items, so only use this form for the visual look, not necessarily for the coding!)

Include a JavaScript function called "calculateBetterDeal()" that will calculate the price per square inch for both pizzas by reading the diameter and price out of the table, and storing the result back into the price per square inch fields in the table. Then set the "better value" field to either show "this one" on the left, or on the "right", depending on which one is a better value. If there is no difference (i.e. both pizzas are the same price per square inch), show "no difference" in both fields.

You'll need to use the if/if else/else construct of JavaScript in your "calculateBetterDeal()" function. You might need to consult section 8.5 and 8.6 in Deitel/Deitel/Goldberg 3rd Edition (the pink book) or Project 6 in Essentials for Design, JavaScript Level One.

Make an event handler so that when you click the calculate button, the function is called.

Also make an event handler an a function that will clear the entire table if/when the "clear fields" button is pressed.

Use Math.PI as the constant π The formula for radius is:

radius = diameter / 2;

The formula for area of a pizza (um, I mean circle), is:

area = πr2

You can calculate radius squared in JavaScript with

radius * radius

Include an XHTML comment near the top of the file that includes the file name, your name, the date, and the assignment (activity 3 for CISC103).

Be sure all your tags follow the XHTML standard: i.e. they should be all closed, properly nested, and written with lowercase letters. Your file should pass validation at http://validator.w3.org

 

 

Step 6: Upload pizzaCompare.html

Use SSH Secure File Transfer to upload pizzaCompare.html to your website at:

http://copland.udel.edu/~userid/cisc103/activity04/pizzaCompare.html


Evaluation and Grading

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

20 pts Validation Validate gasForm.html and pizzaCompar.html pages against validator.w3.org. There should be no XHTML errors (10 points each)
20 pts Style XHTML and JavaScript code should be clean and neat, with tags aligned and indented properly to make the code readable. JavaScript code should contain comments to explain what is happening in the code (10 points each)
40 pts Correctness The web page should behave as described in the assignment description (20 points each)
20 pts Following directions The web page should be submitted according to the directions in the assignment. (For example, 6 pts for having pizzaForm.html at the correct address, 7 pts each for having gasForm.html, and pizzaCompare available online at the correct address.)

 

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.