HTML and CSS Reference
In-Depth Information
3. Locate the
input
element for the Clear button and add an
onclick
attribute to run
the
clearWin()
function when the button is clicked.
4. Locate the
input
element for the backspace button (
<-
) and add an
onclick
attri-
bute to run the
erase()
function when the button is clicked.
5. Add an
onclick
attribute to the equal button (=) to run the
calcExpression()
function when the button is clicked.
6. Scroll to the top of the file and add the
calcPress()
function to the embedded
script
element. The purpose of this function is to append a symbol to the text
displayed in the calculator screen. The
calcPress()
function should include the
following:
a. A single parameter named
symbol
b. A command that uses the
+=
operator to add the value of the
symbol
parameter to
the value of the
calcwindow
field within the
calculator
form
7. Create a function named
calcExpression()
. The purpose of this function is to
append the calculated value to the expression displayed on the calculator screen.
The function has no parameters. Add the following commands:
a. Declare a variable named
cString
that is equal to the text contained in the
calcwindow
field of the
calculator
form.
b. Use the
eval()
method to store the numeric value of
cString
in a variable named
cvalue
.
c. Change the text string value of the
calcwindow
field from the
calculator
form to
cString
=
cValue
where
cString
is the value of the
cString
variable and
cValue
is the value of the
cValue
variable.
8. Create a function named
clearWin()
. The purpose of this function is to erase the
contents of the calculator screen. The function has no parameters but should have a
single command that changes the value of the
calcwindow
field in the calculator to
an empty text string (“”).
9. Save your changes to the file.
10. Open the
calculator.htm
file in your Web browser. Click the different calculator
buttons and verify that you can enter a mathematical expression into the calculator.
Click the backspace button (
<-
) and verify that you can erase the last character from
the screen. Click the equal button (=) and verify that the calculator adds the calcu-
lated numeric value to the expression. Finally, click the Clear button and verify that
all of the text is removed from the calculator screen.
11. Submit your completed project to your instructor, in either printed or electronic
form, as requested.
Case Problem 3
Write a script
to create a
random number
guessing game.
data Files needed for this case Problem: guesstxt.htm, headmenu.jpg, kglog.jpg,
kgstyles.css, links.jpg, modernizr-1.5.js, title.jpg
Kiddergarden
Pete Burnham manages the Web site Kiddergarden, a family-friendly site
containing games, puzzles, stories, and other activities. Pete has asked for your help in
developing a Web page containing a number guessing game.
Pete needs you to create a script that generates a random integer between 1 and 500.
A user has up to 10 guesses to guess the number. After each guess, the page will tell the
user whether his or her guess is too high, too low, or exactly correct. A preview of the
page is shown in Figure 11-40.