| Readings
1. Read the following pages in Lagerstrom:
* ch. 7, Introduction to Programming and JavaScript
* "Storing Values in Variables", pp. 222-225
* prompt(), pp. 226-228
* Basic Math with JavaScript, pp. 299-308.
2. Read the following sections of About.com's JavaScript tutorial.
When reading web pages from commercial sites, you may find it helpful to configure Firefox to block popup windows and disable JavaScript (Tools -> Options -> Web Features), as this will suppress a lot of the "blinken lightzen" that distract from an otherwise readable web page. Remember to turn JavaScript back on for the 111 site, as it uses JavaScript for navigation.
* Hello World
* Variables
* Operators
* ALERT and CONFIRM
111 website architecture on uoregon.edu
In your 111 lab, you SSH'elled into uoregon.edu, moved to public_html, created a 111 directory, and created directories p1, p2, p3, p4, and p5. (If not, do so now for this project; see Sources of Programming Assistance, below.)
Any web pages you create for this project must be stored in ~/public_html/111/p1/. Note that "~" is a Unix control character that expands to "your home directory" on uoregon.edu (for example, "/home7/susanQ").
Project Description
Write a program that could be used to determine if a 10" pizza selling for $10.95 is a better value than a 14" pizza selling for $14.95.
Pizzas come in several sizes. Some businesses cut all sizes into 8 slices, others cut larger sizes into more slices. Knowing the price per slice and the slice per square inch would keep you on budget.
I/O Specification
Input: Your program should use prompt() to get two inputs from the user:
enter radius of the pizza
(user enters 8)
enter price of the pizza
(user enters 9.95)
Output: Use document.write() to create the following page content (don't worry to much about the number of decimal places-- we'll learn more about that later):
radius of pizza: 8 inches
cost of pizza: $9.95
sq in per slice: 25.13
cost per slice: $1.25
cost per sq in: $.05
Hit Reload to run this script again.
Algorithm for slice-o-matic
Algorithm slice-o-matic
declare variables: radius, price, areaSlice, costSlice, costSqrInch
define constant PI = 3.14159
prompt user for radius and price of pizza
//compute results (assume all pizzas have 8 slices)
areaSlice = PI radius 2 / 8
costSlice = price / 8
costSqrInch = price / (PI radius 2)
//write results to web page using document.write()
. . .
End algorithm.
Project Requirements
Complete the following requirements in the order shown by the project due-date.
1. On paper, write a draft copy of a JavaScript to solve the problem. Verify it by tracing it on the above to test cases. This does not have to be turned in.
2. Use TextPad (Windows) or Taco (Mac) to create an xhtml document, slice-o-matic.html: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>slice-o-matic</title> </head> <body> <h2>Ronco Slice-O-Matic Pizza Optimizer</h2> <script type="text/javascript"> //your program statements go here... </script> Hit Reload to run this script again. </body> </html> Complete the script in slice-o-matic.html by typing in the statements you wrote on paper in step 1, above.
3. Test the script in a browser. Use Firefox's File -> Open File.. command to preview your web page before installing it on the uoregon.edu server. Correct any errors (see Debugging JavaScript, below), and then reload the page.
4. Install slice-o-matic.html on the remote server, uoregon.edu. Use SSH to FTP slice-o-matic.html to ~/public_html/111/p1/. View your web page on the server by entering the URL http://uoregon.edu/~yourHomeDirectory/111/ in Firefox, which will display a directory listing in the browser. Then select slice-o-matic.html to view your page and run the script.
5. Extra Credit Option 1: Toppings (5 pts added to project score). Prompt the user for the price per topping and the number of toppings, before computing the costs. Do not work on extra credit options until after you have completed the project requirements. When you send your email notification to your gtf, please state "Extra Credit Option 1 Completed: Toppings."
6. Extra Credit Option 2: On-time delivery (5 pts added to project score). To allow for late arrivals, etc., project 1 may be submitted by 21:00 F 4/21. Students submitting project 1 by the original due date will receive +5 pts for "on time" delivery. This will apply to project 1 only; all subsequent projects must be submitted by the original due date. When you send your email notification to your gtf, please state "Extra Credit Option 2 Completed: On-time delivery."
Sources of Programming Assistance
1. Attend class regularly, and ask questions in class (we'll all be glad you did ;-)
2. Office Hours. Get started on your projects early enough to allow time for an office hour visit if you get stuck.
3. Email cannot substitute for office hours assistance. For short questions, however, send your message to everyone listed in office hours, not just your GTF or your instructor. Please include "111" in the subject line.
Debugging JavaScript
To save yourself an office hour trip:
* Mozilla Firefox: When a JavaScript is not working, even if it appears to be doing nothing at all, remember to select Tools -> JavaScript Console. This will open a window that shows any error messages and the location of the error by line number.
In TextPad, select View Line Numbers to locate the source of the error in your .html file.
* Internet Explorer (IE): If you are using a version of IE higher than 4, then you will need to turn on error notification by selecting Internet Options from the Tools menu and clicking the Advanced tab. In the Browsing category, make sure the Display Notification About Script Errors check box is selected.
Clarifications
Programming Tips:
1. XC Toppings. You can, for example, prompt as follows: Enter number of toppings ($0.50 each):, and then factor that in to the cost calculations.
2. Match the I/O specs as closely as possible.
A) Do not omit the $
B) Do not omit the word "inches"
C) You are not required to print just two digits to the right of the decimal point for P1 but, if you would like to do so, this web page tells you how:
http://www.cs.uoregon.edu/classes/06S/cis111/code/javascript/format-numbers.html |
