2/24/2009
1
Chapter 7 - continued
Event-Driven Pages
Output via Text Boxes
a button provides a simple mechanism for user
interaction in a Web page
by clicking the button, the user initiates some action
a
text box
is an event-handler that can display
text (a word or phrase)
unlike an alert window, the text box appears as a box
embedded in the page
text can be written to the box by JavaScript code
(i.e., the box displays output)
Output via Text Boxes
for example, we could re-
implement the lucky
number page using a text
box
the text box containing
the random number is
embedded in the page
doesn't require the user
to close the alert window
after each number
Output via Text Boxes
general form of a text box element:
<input type="text" id="BOX_NAME"
size="NUM_CHARS" value="INITIAL_TEXT" />
the TYPE attribute of the INPUT element identifies the element
to be a text box
the ID attribute gives the element an identifier so that it can be
referenced (sometimes referred to as the name of the element)
the SIZE attribute specifies the size of the box (number of
characters that fit)
the VALUE attribute specifies text that initially appears in the
box
Output via Text Boxes
•to display text in a text box, a JavaScript assignment
is used to assign to its value attribute
•as part of the assignment, must specify the absolute
name of the box
•the general form is:
document.getElementById('BOX_NAME').value =
VALUE_TO_BE_DISPLAYED;
when the button is
clicked, the JavaScript
commands are
executed
the commands
generate a random
number and assign it to
the text box
as a result, each
button click yields a
new number in the box
