1
Events
Lect 8
2
Event-driven Pagesone popular feature of the Web is its interactive nature
e.g., you click on buttons to make windows appear e.g., you enter credit card information in a form
and submit it pages that respond to user actions such as mouse clicks
or form entries are known as event-driven pages JavaScript code can be combined with HTML
elements such as buttons and text boxes to produce event-driven pages
an event is a user action – e.g. mouseclickan event handler is javascript code that responds to a
user’s action e.g. a button can be associated with JavaScript code
that will execute when the button is clicked
3
Buttons
general form of a button element: <input type="button" value="BUTTON_LABEL" onClick="JAVASCRIPT_CODE" />
the TYPE attribute of the INPUT element identifies the element to be a button
no ID is needed here the VALUE attribute specifies the text label that
appears on the button the ONCLICK attribute specifies the action to take
place when the button is clicked any JavaScript statement(s) can be assigned
to the ONCLICK attribute
4
Buttons (cont.)
for example: <input type="button"
onClick= "alert('Ouch!');" />
note the need for two different types of quotes Why won’t it say anything on the button? onClick expects JavaScript by default. No <script>
tags are needed. (What “speaks” HTML? ) Try it
5
Mouse Events
onMouseOver event handler is triggered when the user moves the mouse over a particular part of the webpage.
The programmer has to define the part of the webpage to be monitored. This can be done by using the HTML
<a href= >… </a > pair of tags.
Recall: what does document.bgColor='blue'; do?
6
onMouseOver<a href="#" onMouseOver="document.bgColor='blue';"> Watch me! </a> The # simply refers to the current page. It doesn’t
link to another page. In this example, the background color of the page
turns blue when the user moves the mouse over the link labeled "Watch me!"
Again, since two levels of quotes are needed, a second type of quote is used. How would this be interpreted if double quotes
were used both times? Please note that the page remains blue even
when the mouse is moved away from the link.You do it. Watch the capitalization.
7
onMouseOut onMouseOut event handler is triggered when the user
moves the mouse away from the place on the webpage.
If the programmer doesn't want the onMouseOver change to remain when the mouse is removed, onMouseOut can be used:
<br /> <a href="#"
onMouseOver = "document.bgColor='blue';"
onMouseOut = "document.bgColor=‘white';" >
Now watch me! </a> Now the color of the webpage will turn white when the
user moves the mouse off the link. If it was initially white, the color will be restored.
Try it. Compare the two links.
8
Dynamic Images you can dynamically modify images recall:<img id="photo" src="happy.gif" alt="Happy Face" />causes the image stored in the file happy.gif to appear in the page
you can change the image by assigning a new value to its SRC attribute:
document.getElementById(‘photo’).src = ‘sad.gif’;replaces happy.gif with sad.gifwe will also replace the alt attribute.we will use a button
9
Dynamic Image Example
See mood.html
Try it. since you don’t have the pictures in your folder, you will see only the alt.
10
Text Boxesgeneral form of a text box element: <input type="text" id="TEXTBOX_NAME" 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 identity so that it can be referenced
the VALUE attribute specifies text that initially appears in the box
We’ve displayed default text and allowed the user to enter text.
Add a textbox
11
Output via Text Boxes
now the programmer can change the text after the page is displayed:
to display output in a text box, an assignment statement is used to assign text to the value attribute as part of the assignment, we must specify the
ID of the box the general form is: document.getElementById(“TEXTBOX_ID”).
value = “VALUE_TO_BE_DISPLAYED”;
Update textbox
For example:
document.getElementById(“name”).
value = “Jane”;
Add a script containing an alert and a textbox change.
Now we combine button and textbox.Again note the need for 2 kinds of quotes.
12
13
<input type=“button” value=“Click Here for Lucky Number”
onClick=“document.getElementById(‘number’).
value = ‘15’;” />
<hr />
<input type=“text” id=“number” />
Text Box for Displaying Output
14
Text Box Example
See lucky_number_without_form.html
15
Output via Text Boxes
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)
A text box doesn't require the user to close the alert window after each display
16
Input and Outputthe same text box can be used for both input and output
user can enter a temperature in either box, then convert to other
user can enter a number, then double it by clicking the button