Lesson 24: Event-Driven Programming

Due by the beginning of class on Monday, Apr. 5

One of the features of the World Wide Web that makes it so popular is its interactive nature. When you access a Web page, you don't just view the page, you interact with it. You click on links and buttons to change pages or to make windows pop up, or you enter information in forms and view responses based on your entries. In these and many other ways, Web pages are responsive to your actions. In other words, Web pages are "event-driven", reacting to events that you initiate such as mouse clicks or keyboard entries.

The way in which events are handled within a page is specified using JavaScript. Thus, the skills you have learned in JavaScript programming can now be applied to writing interactive Web pages. Instead of prompting the user for their grades, you can allow them to enter the grades in boxes on the page and then click a button to compute their average. While the same JavaScript code can compute the average in either case, the event-driven page provides a more attractive and intuitive interface for the user.

In this lesson, you will begin using JavaScript as a tool for controlling event-driven Web pages. In particular, you will use buttons to initiate actions, text boxes to read in values, and text areas to display results.

Initiating Actions via Buttons

The simplest type of event handler in Web pages is a button. If you have done any surfing on the Web, you have no doubt run across buttons such as the following:

By clicking the mouse on the button, something happens (you are taken to a new page, a window pops up, your credit card number is stolen, etc.) Buttons are HTML elements which can be embedded in pages and used to control the behavior of the page. A button element looks like the following:

<INPUT TYPE="button" NAME="ButtonName" VALUE="ButtonLabel" ONCLICK="JavaScriptCode"> The NAME attribute of a button specifies the name by which that button will be referred. The VALUE attribute specifies the label that will appear on the button (for example, the button pictured above has VALUE="Click here for free money!". The ONCLICK attribute specifies what is to happen when the button is clicked. This can be any piece of JavaScript code enclosed in quotes. For example, ONCLICK="alert('Thanks, I needed that.');" specifies that the JavaScript alert function should be called to display the message "Thanks, I needed that.".

Unlike other HTML elements such as IMG which can appear anywhere in a page, button elements must always appear inside of forms. A form element is simply a grouping of buttons and other event-driven elements within a page. In the HTML document below, a button called clicker is contained in a form called EventForm. When loaded, this page will contain a single button labeled "Click Me". When that button is clicked, the message will appear in an alert box.

<HTML> <HEAD> <TITLE> Fun with Forms</TITLE> </HEAD> <BODY> <FORM NAME="EventForm"> <INPUT TYPE="button" NAME="clicker" VALUE="Click Me" ONCLICK="alert('Thanks, I needed that.');"> </FORM> </BODY> </HTML>


Exercise 1:     Cut-and-paste this HTML code into a document called event1.html. Load this page to verify that it behaves as described above.

Modify the code so that the button is labeled "Click for Lucky Number", and the alert message displays a message of the form: "The lucky number for the day is X", where X is a random integer between 1 and 100.

Inputting Values via Text Boxes

A button provides a simple mechanism for the user to interact with the page. By clicking on the button, they can initiate some action. Other form elements allow the user to provide information that can be used in performing those actions. For example, a text box allows the user to enter a single line of input. A text box element looks like the following:

<INPUT TYPE="text" NAME="TextInputName" VALUE="InitialText"> The NAME attribute of a text box specifies the name by which that box will be referred. The VALUE attribute specifies the text that will initially appear in the text box (before the user enters anything). The contents of a text box can be accessed at any time as: document.FORM-NAME.TEXT-BOX-NAME.value

For example, in the HTML document below, a text box named userName is used to read in the user's name. The contents of that text box (document.EventForm.userName.value) are accessed by the button when it is clicked, and that text is displayed as part of the alert message. Notice that multiple form elements, a button and a text box in this case, can be contained between a single set of form tags. In general any number of form elements can appear between the form tags as long as each element has a unique NAME.

<HTML> <HEAD> <TITLE> Fun with Forms</TITLE> </HEAD> <BODY> <FORM NAME="EventForm"> Enter your name here: <INPUT TYPE="text" NAME="userName"> <BR><BR> <INPUT TYPE="button" NAME="clicker" VALUE="Click Me" ONCLICK="alert('Thanks, ' + document.EventForm.userName.value + ', I needed that.');"> </FORM> </BODY> </HTML>


Exercise 2:     Cut-and-paste this HTML code into a document called event2.html. Load this page to verify that it behaves as described above.

Modify the code so that it has two input text boxes, one for first name and one for last name. The message displayed in the alert box should include both names.

Displaying Values via Text Areas

Text boxes can be used for output as well as input. For example, you could have a button write to a text box when it is clicked, simply by assigning the value of that text box, e.g.,

ONCLICK="document.EventForm.userName.value='Dave';" While this is sometimes useful, the fact that text boxes can only contain one line of text is often too limiting. An alternative is a text area, which can contain any number of lines of text. A text area element looks like the following: <TEXTAREA NAME="TextInputName" ROWS=NumRows COLS=NumCols WRAP="virtual"> Initial Text </TEXTAREA> The NAME attribute of a text area specifies the name by which that area will be referred. The number of rows and columns of text are specified by the attributes ROWS and COLS. The attribute assignment WRAP="virtual" ensures that text will wrap from one line to the next as needed, as opposed to running off the edge of the text area. The initial text that is to appear in the text area (if any) is enclosed between the <TEXTAREA ...> and </TEXTAREA> tags.

For example, in the HTML document below, the message is displayed by assigning it to the value of the text area.

<HTML> <HEAD> <TITLE> Fun with Forms </TITLE> </HEAD> <BODY> <FORM NAME="EventForm"> Enter your name: <INPUT TYPE="text" NAME="userName"> <BR><BR> <INPUT TYPE="button" NAME="clicker" VALUE="Click Me" ONCLICK="message='Thanks, ' + document.EventForm.userName.value + ', I needed that'; document.EventForm.output.value=message;"> <BR><BR> <TEXTAREA NAME="output" ROWS=2 COLS=40 WRAP="virtual"></TEXTAREA> </FORM> </BODY> </HTML>


Exercise 3:     Cut-and-paste this HTML code into a document called event3.html. Load this page to verify that it behaves as described above.

Modify the code so that it has two input text boxes, both for reading in numbers. The message displayed in the text area should be of the form: "Of the two numbers you entered, X is the larger", where X is the larger of the two numbers entered in the text boxes.


Exercise 4:     Using input text boxes, a button, and an output text area, write an event-driven Mad Lib program. The user should be able to enter words of the appropriate types into the text boxes, and then click on the button to see the story in the text area. Try to make your page as simple and intuitive to use as possible (e.g., you might want to add directions at the top of the page).

Lesson Summary

Solutions to odd numbered exercises (posted late afternoon of due date).