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 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:
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.
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.
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:
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.
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.
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.,
For example, in the HTML document below, the message is displayed by assigning it to the value of the text area.
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.
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).