[Page 534 (continued)]16.3. User Interfaces in JavaScript JavaScript is also really useful for creating Web pages that interact with the user. Here's an example of a JavaScript function that puts up dialogs, little windows that interact with the user with prompts and simple buttons (Figure 16.7). function check() { var agree = false; agree = confirm("Do you enjoy CS?"); if (agree) notes=prompt("Give me one good thing about CS:");
[Page 535] if (! agree) notes=prompt("Why don't you like CS?"); alert("You said:"+notes); } <script> check() </script> </body> </html>
Figure 16.7. Example JavaScript dialog windows. 
This example uses three kinds of dialogs (exactly the same way that annoying Web pages put these up!): A confirm() dialog box displays a single line of text and returns TRue or false. An alert() beeps and displays one line with an OK button. There is no return value. A prompt() asks the user for one line of text, then returns that text.
Now this function runs when you first load the page into your browser. Is that what you really want to happen? The user goes to your page, and suddenly, before any text appears, dialog boxes pop up. It's more natural to have these kinds of boxes pop up when the user clicks on something. The keys to responding to users are events. Events are actions taken by the user that can be caught by your program in JavaScript. We say that an event triggers a JavaScript program. Events include the user typing a key, moving the mouse, or clicking the mouse. Example events include: onKeyPress is triggered when the user presses a key and releases it. onKeyDown and onKeyUp are triggered on either the downstroke or upstroke of pressing a key. onClick and onDblClick are triggered on clicking or double clicking on something.
[Page 536]onMouseOver, onMouseOut, and onMouseMove are triggered when the mouse is over something, moves off of something, or moves at all when over something. onMouseDown and onMouseUp for pressing the mouse key down or back up. onChange is triggered when a text field is changed.
There are many more events defined in JavaScript, some of which depend on a specific browser. Netscape Navigator may have some slightly different events than Microsoft Internet Explorer, for example. To catch one of these events, you assign the event to some JavaScript code in a string. Most of these events can be used with anchor or image tags. onChange can be used with text fields, as we'll see in just a few pages. Figure 16.8 is an example of catching a mouse click event on a picture, then putting up a dialog box in response. Figure 16.8. Example catching the onClick event. 
We can use events to do all kinds of different things, including opening a window and going to a new URL in that window. We open windows in JavaScript with the open() function. The open() function takes three inputs: The URL to go to, the name of the window, and optionally, properties of the window to change. Here's an example for opening up a separate window when an image is clicked upon (Figure 16.9). <html> <head> <title>The Simplest Possible Web Page</title> <script> function goToHawaii() { var win=open('http://www.cc.gatech.edu/~mark.guzdial/hawaii/ ','Hawaii'); } </script> </head> <body> <h1>A Simple Heading</h1> <p>This is a very simple web page.</p> <p><image src="/books/1/79/1/html/2/mediasources/beach.jpg" onClick="goToHawaii()" /> This page was created on <script> document.write(Date()); </script></p> </body> </html>
[Page 537] Figure 16.9. Opening a JavaScript window. 
Windows are objects in JavaScript. We manipulate their instance variables as properties. Here's an example of changing the properties of the window as it opens (Figure 16.10). <head> <title>The Simplest Possible Web Page</title> <script> function goToHawaii() {
[Page 538] var win=open('http://www.cc.gatech.edu/~mark.guzdial/hawaii/ ','Hawaii', "titlebar=no,width=200"); } </script> </head>
Figure 16.10. Changing the new JavaScript window. (This item is displayed on page 537 in the print version) 
Windows aren't the only objects in JavaScript with useful properties to change. It turns out that even plain old list items have style properties, which in turn have color properties. We access these using dot notation (Figure 16.11). The current object in JavaScript is called this. In this example, list items start in one color, turn another when the mouse comes over them, and another when the mouse leaves. <body> <h1>A Simple Heading</h1> <p>This is a very simple web page.</p> <p>Pick any item...</p> <ul> <li onmouseover="this.style.color='green'" onmouseout="this.style.color='black'">Pick me!</li> <li onmouseover="this.style.color='red'" onmouseout="this.style.color='yellow'">No, pick me!</li> <li onmouseover="this.style.color='magenta'" onmouseout="this.style.color='pink'">No, no -- I'm the one!</li> </ul>
Figure 16.11. Changing color of list items. 
Mostly, when we think about user interfaces, though, we probably think about having fields (places where users can type text) and buttons (graphical areas where the user can click). To create fields and buttons in HTML (for JavaScript to control and manipulate), we need a form. Forms are created with tags <form>...</form> (Figure 16.12). Some examples of things we can have in forms include: <input type="text" name="address1"> creates a single-line text field named address1. <input type="button" value="Click me"> creates a button that appears on the page as Click me. type="textarea" is for larger text fields with more than one line.
[Page 539]type="radio" is for buttonsthose round buttons that usually appear in series where only one in a set can be selected.
Figure 16.12. A simple HTML form. 
Normally, forms are connected to URLs. Form URLs are often CGI scripts or servlets, little programs (often written in Java!) that will process the form and then respond to the user with a new HTML page. Using JavaScript, we can actually do computation on forms completely from within the HTML page. Figure 16.13 is an inch-to-centimeter converter programmed in JavaScript that uses an HTML form for input. You'll notice several features of JavaScript herethe names of inputs in the form are actually properties of the form. The value of the text area is another property, all of which can be changed. Figure 16.13. Inch/centimeter converter in JavaScript. 
| 