A Balanced Introduction to Computer Science and Programming
David Reed
Creighton University
Copyright © 2004 by Prentice Hall
Chapter 9: Event-Driven Programming
Solutions to odd numbered exercises
EXERCISE 9.1:
Enter the lucky.html text from Figure 9.2 into a new Web page, then load the
page in the browser to verify that it behaves as described.
Once you have done this, save a copy of the page under the name lotto.html
and modify it so that it predicts the winner of a PICK-4 lottery. You should update the
page's text appropriately and modify the button so that its label reads "Click for
Today's PICK-4 Winner". The DisplayNumber function, instead of displaying a
single number, should pick 4 random numbers from the range 0 to 9 and display them in an
alert box, separated by dashes. Figure 9.4 depicts an example of an alert box
containing a PICK-4 winning number.
Figure 9.4: Sample of a PICK-4 alert box.
|
<![CDATA[
<html>
<!-- lotto.html Dave Reed -->
<!-------------------------------------------->
<head>
<title> Pick-4 Lotto</title>
<script language="JavaScript"
src="http://www.creighton.edu/~csc107/random.js">
</script>
</head>
<body>
<div style="text-align:center">
<h2>Lucky Dave's Gift To You</h2>
<p>Numbers rule our lives. If you would like the benefit of Lucky Dave's
amazing powers of prognostication, click on the button below to receive
today's Pick-4 Lotto winner!</p>
<form name="ButtonForm">
<input type="button" value="Click for Pick-4 Winner"
onClick="alert('The Pick-4 winner will be: ' +
RandomInt(0, 9) + '-' + RandomInt(0, 9) + '-' +
RandomInt(0, 9) + '-' + RandomInt(0,9));">
</form>
</div>
</body>
</html>
]]>
|
EXERCISE 9.3:
Enter the revised convert.html text from Figure 9.7 into a new Web page, then
load the page in the browser to verify that it behaves as described.
In EXERCISE 7.2 of Chapter 7, you expanded your temperature conversion page so that
it could convert in both directions. Make similar modifications to the page in Figure
9.7, using text boxes for input and output. The page should include your
FahrToCelsius and CelsiusToFahr functions, as well as two text boxes,
one for Fahrenheit and one for Celsius. If users enter a temperature in the Fahrenheit
box and click a button labeled "Fahr --> Celsius", then the corresponding temperature
should appear in the Celsius box. Likewise, if they enter a temperature in the Celsius
box and click the button labeled "Fahr <-- Celsius", the corresponding temperature
should appear in the Fahrenheit box. Your page should look similar to the one depicted
in Figure 9.9.
Figure 9.9: Sample of temperature conversion page.
|
<![CDATA[
<html>
<!-- convert.html Dave Reed -->
<!-- This page converts temperatures from Fahrenheit to Celsius. -->
<!----------------------------------------------------------------->
<head>
<title>Temperature Conversion Page</title>
<script language="JavaScript">
function FahrToCelsius(tempInFahr)
// Assumes: tempInFahr is a temperature in Fahrenheit
// Returns: the equivalent temperature in Celsius
{
return (5/9) * (tempInFahr - 32);
}
function CelsiusToFahr(tempInCelsius)
// Assumes: tempInFahr is a temperature in Celsius
// Returns: the equivalent temperature in Fahrenheit
{
return ((9/5) * tempInCelsius) + 32;
}
function ConvertFtoC()
// Assumes: document.TempForm.tempBox contains degrees Fahrenheit
// Results: assigns document.TempForm.celsiusBox the equiv. temperature
{
var tempF, tempC;
tempF = parseFloat(document.TempForm.fahrBox.value);
tempC = FahrToCelsius(tempF);
document.TempForm.celsiusBox.value = tempC;
}
function ConvertCtoF()
// Assumes: document.TempForm.tempBox contains degrees Fahrenheit
// Results: assigns document.TempForm.celsiusBox the equiv. temperature
{
var tempF, tempC;
tempC = parseFloat(document.TempForm.celsiusBox.value);
tempF = CelsiusToFahr(tempC);
document.TempForm.fahrBox.value = tempF;
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Temperature Conversion Page</h2>
Enter a temperature in a box and click on the desired button to convert.
<form name="TempForm">
Fahrenheit:
<input type="text" name="fahrBox" size=10 value="" />
<input type="button" value="Fahr -> Celsius"onClick="ConvertFtoC();" />
<input type="button" value="Fahr <- Celsius"onClick="ConvertCtoF();" />
<input type="text" name="celsiusBox" size=10 value="" />
:Celsius
</form>
</div>
</body>
</html>
]]>
|
EXERCISE 9.5:
Create a Web page named double.html that includes the DoubleIt
function in the HEAD. The page should contain a text box with an initial value of 1 and
a button labeled "Double It". When the user clicks the button, the DoubleIt
function should be called to double the contents of the text box.
If you start with a value of 1 in the text box, how many times must you click for the
value to exceed 500? How many times to exceed 1000?
<![CDATA[
<html>
<!-- double.html Dave Reed -->
<!-- This page doubles a number at the click of a button. -->
<!---------------------------------------------------------->
<head>
<title>Double the Number</title>
<script language="JavaScript">
function DoubleIt()
// Assumes: document.NumForm.number contains a number
// Results: the number in the box is doubled
{
var num;
num = parseFloat(document.NumForm.number.value);
document.NumForm.number.value = 2 * num;
}
</script>
</head>
<body>
<form name="NumForm">
<input type="button" value="Double the number:" onClick="DoubleIt();" />
<input type="text" name="number" size=10 value="1" />
</form>
</body>
</html>
]]>
After 9 clicks, the number reaches 512.
After 10 clicks, the number reaches 1,024.
|
EXERCISE 9.7:
Reimplement your Magic 8-Ball page, magic.html, from Chapter 7 (EXERCISE 7.9).
The page should contain a text area in which the user can enter a question, as well as a
button to submit that question. When the user clicks the button, the program should
generate a random response (as before) and display this response in a text box.
Note: This page is unique in that it completely ignores the input it receives
from the user. Of course, users may not realize this -- some may think that the Magic
8-Ball has considered their questions carefully before responding!
|
<![CDATA[
<html>
<!-- magic.html Dave Reed -->
<!-- This page simulates an event-driven Magic 8-ball. -->
<!-------------------------------------------------------->
<head>
<title> Magic 8-ball</title>
<script type="text/javascript"
src="http://www.creighton.edu/~csc107/random.js">
</script>
<script language="JavaScript">
function GetResponse()
// Results: writes a random response in document.MagicForm.output
{
var response;
response = RandomOneOf(["yes", "no", "definitely", "highly unlikely",
"maybe", "unclear, try again"]);
document.MagicForm.output.value = response;
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Magic 8-ball</h2>
Enter your question in the text area below:
<form name="MagicForm">
<textarea name="input" rows=5 cols=40 wrap="virtual"></textarea>
<br /><br />
<input type="button" value="Ask the Magic 8-ball"
onClick="GetResponse()" />
<br /><br />
The Magic 8-ball says: <input type="text" name="output" size=30 value="" />
</form>
</div>
</body>
</html>
]]>
|
EXERCISE 9.9:
Create a Web page named newpics.html that is similar to pics.html, but
which contains only one button controlling the image. When a user clicks this button, a
function (with no inputs) should be called to randomly select among several images.
For example, the following JavaScript statement, when executed, would randomly choose
from among four image file names (happy.gif, sad.gif,
scared.gif, and bored.gif) and assign the chosen file name to the SRC
attribute of an image named face:
<![CDATA[
document.images.face.src = RandomOneOf(["happy.gif", "sad.gif",
"scared.gif", "bored.gif"]);
]]>
|
<![CDATA[
<html>
<!-- newpics.html Dave Reed -->
<!-- This page randomly selects from among images on a button click. -->
<!--------------------------------------------------------------------->
<head>
<title> Picture Fun </title>
<script type="text/javascript"
src="http://www.creighton.edu/~csc107/random.js">
</script>
<script type="text/javascript">
function ChangeImage()
// Assumes: picFile is the name of an image file
// Results: changes the source of pic to picFile
{
document.images.face.src = RandomOneOf(["happy.gif", "sad.gif",
"scared.gif", "bored.gif"]);
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>How do you feel today?</h2>
<img name="face" src="happy.gif" alt="face image" />
<br /><br />
<form name="PicForm">
<input type="button" value="Click to find out"
onClick="ChangeImage();" />
</form>
</div>
</body>
</html>
]]>
|