1 Events Lect 8

2 Event-driven Pages one 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. mouseclick an 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:  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:  note the need for two different types of quotes  Why won’t it say anything on the button?  onClick expects JavaScript by default. No 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 … pair of tags. Recall: what does document.bgColor='blue'; do?

6 onMouseOver <a href="#" onMouseOver= "document.bgColor='blue';"> Watch me!  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: <a href="#" onMouseOver = "document.bgColor='blue';" onMouseOut = "document.bgColor=‘white';" > Now watch me!  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: 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.gif  we 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 Boxes general form of a text box element:  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’;” /> 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 Output the 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