CMSI 182
IN T R O D U C T I O N T O CO M P U T E R SC I E N C E
Fall 2006
Assignment 1026
This assignment caps off our XHTML exploration by integrating it with the JavaScript programming lan-
guage. This is a recurring theme in computer science — “interoperability” among multiple technologies.
For Submission
We start by interacting with the JavaScript scratch
page on the course Web site, after which it will be
your turn to make a full XHTML page + JavaScript
program from scratch.
Training Wheels: JavaScript Scratch Page
Modify the first two programs that you wrote in
Assignment 0921 (i.e., converting inches to centi-
meters and calculating the average of n numbers)
so that the input values for these programs are de-
rived from the entry fields of the JavaScript scratch
page on the course Web site. In both cases, have
your program use Input 1 for the user’s input.
•For the inches-to-centimeters conversion pro-
gram, you will need the built-in parseFloat() func-
tion to convert the text that the user enters into a
number that can be used for calculations.
•For the average of n numbers, have the user en-
ter the numbers as a comma-separated list (e.g.,
“8, 12, 30, 40, 48, 29, 22”). Then, use the built-in
split() method to convert this single piece of text
into an array of separate items (e.g., “8,” “12,”,
“30,” etc.). Finally, you will need the parseFloat()
again in order to convert the text into numbers.
To use split() correctly, invoke it this way:
var numberText = input1.value.split(", ");
This will give back an array (see the Operating Sys-
tems handout and the midterm) consisting of the
individual text items without the commas. Then,
you can loop through this array in a manner simi-
lar to how we have done our sample “batch op-
erating system” programs (handout, midterm).
Down the Rabbit Hole: Page and Program
Adapt the third program from Assignment 0921
— “make change” — into a complete XHTML +
JavaScript combination:
•Create an XHTML page with a form that holds
one text input field, labeled “Make Change for:”
(refer to your October 19 notes as well as the
JavaScript scratch page itself for pointers).
•Include a “Make Change” button in the form as
well, such that clicking on this button will display,
below the form (and not as an alert), the number
of quarters, dimes, nickels, and pennies that are
needed for the amount entered by the user.
•You will need the built-in parseInt() function to
convert the user’s text into a number.
•As a reminder, recall that the steps to designate a
section of your Web page that can be modified
by your JavaScript program are:
1. Create a span with an id attribute.
<span id="output"></span>
2. To modify the content of this span, use the
getElementById() method on the built-in docu-
ment object then set its innerHTML property.
document.getElementById("output").
innerHTML = /* Result goes here. */;
How to Turn it In
Do the assigned work electronically, then:
1. E-mail the code and XHTML file to me, and
2. Submit hardcopy versions of these items.
Turn these in by the October 26 class.
Extra Credit
Look up and learn how to use the for-in loop (it
looks like for (var i in array) { }) and use that in-
stead of while in the average calculation program.
Extra Extra Credit
Allow the “make change” program to have custom-
ized coin denominations — that is, let the user modify
the available set of coins with which to make
change. For example, instead of the “25, 10, 5, 1”
set that we use, the user might want to make
change with “20, 15, 3, 2, 1” denominations.