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