CS131 - Spring 2004

Lesson 7: Event-driven Programming

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 that 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('Yeah, right.');" specifies that the JavaScript alert function should be called to display the message "Yeah, right.".

Note the use of single quotes for the message 'Yeah, right.'. JavaScript strings can be enclosed in either single quotes or double quotes. This flexibility with quotes is useful in cases such as this, where one string must be nested inside another.

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> <!-- button.html 8/21/2000 --> <!--------------------------------------------> <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 7.1:    Cut-and-paste the button.html text into a new HTML document and load this page in the browser to verify that it behaves as described. This exercise will give you a head start for the next one. There is nothing to turn in for this exercise.


EXERCISE 7.2:    Modify the button.html page 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. Include the HTML for the page as your solution to this exercise.

Input/output 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="TextBoxName" SIZE=NumChars VALUE="InitialText">

The NAME attribute of a text box specifies the name by which that box will be referred. The SIZE attribute specifies the size of the box in terms of the number of characters that will fit in the box. The VALUE attribute (if present) specifies the text that will initially appear in the text box. The contents of a text box can be accessed at any time using

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.

<HTML> <!-- textbox1.html 8/21/2000 --> <!----------------------------------------------> <HEAD> <TITLE> Fun with Forms</TITLE> </HEAD> <BODY> <FORM NAME="EventForm"> Enter your name here: <INPUT TYPE="text" SIZE=12 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 7.3:    Cut-and-paste the textbox1.html text into a new HTML document and load this page in the browser to verify that it behaves as described. This exercise will give you a head start on the next one. There is nothing to turn in for this exercise.


EXERCISE 7.4:    Modify the textbox1.html page so that it has two input text boxes, one for first name and one for last name. Also modify the page so that the message displayed in the alert box includes both names. Include the HTML of the page as your solution for this exercise.

Text boxes can be used for output as well as input. In fact, a text box is a perfect analogy for memory cells. Recall that JavaScript variables are associated with memory cells so that each reference to a variable accesses the value in its memory cell, and each assignment to that variable stores a value in the memory cell. Similarly, a text box stores a value that can be accessed and assigned a value via the name

document.FORM-NAME.TEXT-BOX-NAME.value where the FORM-NAME and TEXT-BOX-NAME vary for each text box. For example, the following page contains a text box that stores a number. When the button labeled "Double" is clicked, the value stored in that text box is accessed, doubled, and then assigned back to the text box. The result is that each click of the button doubles the contents of the box.

<HTML> <!-- textbox2.html 8/21/2000 --> <!----------------------------------------------> <HEAD> <TITLE> Fun with Forms</TITLE> </HEAD> <BODY> <FORM NAME="EventForm"> Enter a number here: <INPUT TYPE="text" SIZE=12 NAME="number" VALUE=2> <BR><BR> <INPUT TYPE="button" NAME="double" VALUE="Double" ONCLICK="document.EventForm.number.value= parseFloat(document.EventForm.number.value) * 2;"> </FORM> </BODY> </HTML>


EXERCISE 7.5:    Cut-and-paste the textbox2.html text into a new HTML document and load this page in the browser to verify that it behaves as described. This exercise will give you a head start for the next one. There is nothing to turn in for this exercise.


EXERCISE 7.6:    Modify the textbox2.html page so that it has three additional buttons, labeled "Halve", "Increment", and "Decrement". When the "Halve" button is clicked, the number in the text box should be divided by 2. Similarly, the "Increment" button should cause the value in the box to have 1 added to it, and "Decrement" should cause the value to have 1 subtracted from it. Note: there should be only the one text box in the page, with all four buttons acting on the value in that box.

In addition, text boxes can have an attribute that specifies what is to happen when the contents of the box change, i.e., when the user enters a new value. Similar to the ONCLICK attribute for buttons, the ONCHANGE attribute for text boxes is assigned JavaScript code that is executed when the contents of the box are changed. For example, the following page contains two text boxes named box1 and box2. Each text box has an ONCHANGE attribute specifying that its contents are to be copied to the other box whenever it is changed. The effect is that the two boxes will always mirror each other, no matter which is changed.

<HTML> <!-- textbox3.html 8/21/2000 --> <!----------------------------------------------> <HEAD> <TITLE> Fun with Forms</TITLE> </HEAD> <BODY> <FORM NAME="EventForm"> <INPUT TYPE="text" NAME="box1" SIZE=10 VALUE="" ONCHANGE="document.EventForm.box2.value = document.EventForm.box1.value;"> &nbsp; <----> &nbsp; <INPUT TYPE="text" NAME="box2" SIZE=10 VALUE="" ONCHANGE="document.EventForm.box1.value = document.EventForm.box2.value;"> </FORM> </BODY> </HTML>


EXERCISE 7.7:    Study the textbox3.html example above until you have a good understanding of how it works. If you want you can copy-and-paste it into a new HTML document and experiment with it. A good understanding of this example will help you with the next exercise. There is nothing to turn in for this exercise.


EXERCISE 7.8:    Create a new, event-driven page named convert.html that performs the same tasks as ftoc.html and ctof.html (see Lesson 6). The new page should have two text boxes labeled "Temperature in Fahrenheit:" and "Temperature in Celsius:". Whenever the user enters a temperature in one of the boxes, the converted temperature should automatically appear in the other box. As in Lesson 6, your page will need to load the convert.js library in order to access your fahrToCelsius and celsiusToFahr functions. Turn in the HTML for this page as your solution to this exercise.

Input/output via text areas

While text boxes provide a natural means of inputting and displaying values in a Web page, the fact that text boxes can only contain one line of text is often 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="TextAreaName" ROWS=NumRows COLS=NumCols WRAP> 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 WRAP 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, numbers are entered into two text boxes. At the click of the button, the compareMessage function is called to compare the two numbers and construct a message identifying the max and min. This message is then displayed in the text area. Note that the text that appears in the text area cannot contain HTML tags. Instead, the special character sequence '\n' can be used to specify a line break (similar to the <BR> tag).

<HTML> <!-- textarea.html 8/21/2000 --> <!----------------------------------------------> <HEAD> <TITLE> Fun with Forms</TITLE> <SCRIPT LANGUAGE="JavaScript"> function compareMessage() // Assumes: document.EventForm.number1 and // document.EventForm.number2 contain numbers // Returns: message identifying max and min of the numbers { var num1, num2; num1 = parseFloat(document.EventForm.number1.value); num2 = parseFloat(document.EventForm.number2.value); return "The maximum of the two is " + Math.max(num1, num2) + "\n" + "The minimum of the two is " + Math.min(num1, num2); } </SCRIPT> </HEAD> <BODY> <FORM NAME="EventForm"> Numbers: <INPUT TYPE="text" SIZE=3 NAME="number1"> <INPUT TYPE="text" SIZE=3 NAME="number2"> <BR><BR> <INPUT TYPE="button" NAME="comparer" VALUE="Compare the Numbers" ONCLICK="document.EventForm.output.value=compareMessage()"> <BR><BR> <TEXTAREA NAME="output" ROWS=2 COLS=40 WRAP></TEXTAREA> </FORM> </BODY> </HTML>


EXERCISE 7.9:    Study the textarea.html example above. If you would like you can copy-and-paste it into a new HTML document and experiment with it. A good understanding of this example will help you with the next exercise which asks you to create a very similar page. There is nothing to turn in for this exercise.


EXERCISE 7.10:    Re-implement grades.html (see Lesson 4 and Lesson 5) as an interactive, event-driven page. You should have a text box for each of the individual scores, and a single button to compute the grades. A message listing the lesson and lab averages, as well as the roll call average, should then be displayed in a text area. Include the HTML for this page as your solution for this exercise.

Lesson Summary

Solutions to odd numbered exercises.