This lab is different from ones you have done so far. In this lab, you'll be
The solved problem is this: write a web page that allows a user to determine the price-per-square-inch of a pizza of a given diameter and price.
The problem where you will come up with your own solution 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.
By the time you complete this lab, you should know how to do the following in JavaScript:
window.prompt()
parseInt()
and parseFloat()
document.write()
You should also know how to put JavaScript into an HTML file that will pass validation at validator.w3.org.
Here is the assignment for the file pizza.html. Read over this assignment, then look at the solved problem in the file pizza.html (located in the folder lab06 under the labs on the course web page.)
Write out the contents of an HTML file pizza.html that would run a JavaScript script that prompts the user to enter the size of a pizza (the diameter) and the price of a pizza, and calcuates the price per square inch. 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 HTML 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 HTML 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 HTML and JavaScript source. Finally, note that if you run this through validator.w3.org, it will pass validation as HTML 4.01 Transitional.
Your next step is to put this pizza.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/lab06/pizza.html
Here's what you need to do:
http://copland.udel.edu/~userid/cisc103/lab06/pizza.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 lab06 as well, if it was not already done.
Now write a page similar to pizza.html called gas.html that solves the following problem. Save the file under a folder called lab06 under your personal folder on the H drive.
Write out the contents of an HTML file gas.html that would run a JavaScript script that prompts the user to enter a starting odometer reading, and ending odometer reading, and the number of gallons of gas consumed during that trip. Output the gas mileage for that trip in miles per gallon. The formula is:
Include an HTML 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 HTML 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 HTML comment, as shown in the example pizza.html.
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/lab06/gas.html
This activity counts as a regular lab grade out of 100 pts, broken down as follows:
20 pts | Validation | Validate page against validator.w3.org. There should be no HTML errors |
20 pts | Style | HTML 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 |
40 pts | Correctness | The web page should behave as described in the assignment description |
20 pts | Following directions | The web page should be submitted according to the directions in the assignment. (5 pts for having pizza.html available online at the correct address, 10 pts for having the gas.html file available online at the correct address). |
Copyright 2006, 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.