1. 1 Events Lect 8

2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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”;

12. 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. 13 <input type=“button” value=“Click Here for Lucky Number” onClick=“document.getElementById(‘number’). value = ‘15’;” /> Text Box for Displaying Output

14. 14 Text Box Example See lucky_number_without_form.html

15. 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. 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