Turbo Screen Sharing Adobe Acrobat Connect Professional offers users the ability to have a more productive and engaging web conferencing experience while providing the IT department with a program that efficiently utilizes bandwidth and minimally impacts the infrastructure. Learn More! » Informal Learning: Extending the Impact of Enterprise Ideas and Information Forward-thinking organizations are turning to enterprise learning in their quest to be better informed, better skilled, better supported at the point of need, and more competitive in their respective marketplaces. Learn More! » Rapid E-Learning: Maturing Technology Brings Balance and Possibilities Rapid e-learning addresses both time and cost issues by using technology tools to shift the dynamics of e-learning development. Learn why more skilled learning professionals use these tools and how you can get a solution to keep pace with your business demands. » Delivering on the Promise of ELearning This white paper defines the framework to launch e-learning as a set of teaching, training, and learning practices not bound by a specific technology platform or learning management system. It offers practical suggestions for creating digital learning experiences that engage learners by building interest and motivation and providing opportunities for active participation. »

Javascript Tutorial
Part 2

by Heidi Brumbaugh

Writing an Event Handler

onEvent="action"

where action is the JavaScript code to execute when the event occurs. This syntax is implemented as an extension to the HTML tag's definition. Our anchor ends up looking like this:

<a href="ftp://ftp.jsnet.com/flzmac.hqx" onMouseOver="window.status='Click here to download the compressed Mac version of Ziffle Zot.'; return true">Our new Mac Ziffle Zot!</a>

The JavaScript code contains two statements. To assign more than one statement to an event, the statements must be separated by a semicolon. According to the official JavaScript docs, the return true statement is required inside the onMouseOver event handler if you modify status or defaultStatus. This is one of those things that you don't need to know exactly what it does; just put it in there.

The other thing to notice here is that since all of the JavaScript commands are enclosed in double-quotes, we need to use single quotes to delineate the expression. Bring up this page on your browser and move the mouse cursor around to see the program in action. Pretty slick! Customizing the status bar is one of those little things you can do to your page that give it a polished, professional feel.

And speaking of polishing, on my browser I notice that after I move the cursor off the link, the status bar doesn't change back. I suspect this is because defaultStatus is undefined, so let's define it. The expression now reads:

onMouseOver="window.defaultStatus='';

window.status='Click here to download the compressed Mac version of Ziffle Zot.'; return true"

Here, defaultStatus is equal to two single quotation marks in a row, or an empty string. As you can see, you can set defaultStatus to anything you want, from nothing, to your own status message, to your company's slogan. However, just because you can set it, doesn't mean you should. Users are accustomed to getting certain information from that section of the screen, so consider the implications first.

Example 2: The Alert Box application

The second example gives the user feedback after a form has been submitted. JavaScript can easily let you generate an alert box. You do this by calling the alert method. In programming terminology, a method is a function that acts on a specific object. A function is a piece of code that performs a specific task. In this case, the alert function acts on the window object, but this is implied, so the syntax

window.alert()

and

alert()

have the same effect. Notice the parentheses, which provide a place to put function arguments. Arguments are additional, variable pieces of information that the function does something with. In this case, we'll pass as an argument the message to display in the alert box.

JavaScript requires parentheses after method names, even if the parentheses are empty. Once again, we'll enter a JavaScript command as an event handler. In this case, the event is onSubmit, which is generated when the user clicks on the Submit button on a form. The onSubmit event handler goes in the form tag; the final version looks like this:

<form action="" method="POST" onSubmit="alert('Thank you for your feedback.'); return true">

The argument is enclosed in single quotes again, since the entire expression is in double-quotes. The return true statement in this case tells the onSubmit event handler to go ahead and post the data.

Note I've let the action field blank since we're not really posting anything. If this were an actual form, you would include your favorite mailto: or CGI command. The alert box and status bar messages shown here are useful features you can implement into your HTML pages in a variety of ways. However, as a programming language, JavaScript offers much more power than this. You can manipulate data and make decisions, selecting what to do based on input from the user.

The Confirm Method

JavaScript's confirm method has the same syntax as the alert box, but it displays a Cancel button as well as an OK button and returns a value based on what the user pressed. The return value in this case is true if the user clicks OK and false if the user clicks Cancel. You can look at this value by clicking on the Test button under the first example. Here is the code for that button:

alert('The return value of the confirm method is: ' + confirm('Please click OK or Cancel.'))

The confirm expression is evaluated first, since we need that value to pass to the alert box. If you click OK, true is returned and added to "The return value of the confirm method is: ".

Let's modify the page to allow the user to confirm whether to send theform. The form implementing this second version of the program is below the test button in Example 2. Recall the return true code which instructed the onSubmit handler to post the form data. We'll replace true with a confirm method that will be evaluated based on what the user clicks.

<form action="" method="POST" onSubmit="return confirm('Are you sure you want to submit this data?')">

Another way to accomplish this is to perform a decision branch, that is, do one thing if something happens, and something different if something else happens. The JavaScript syntax to use is the if statement, which has the form:

if (condition) {
   do something }
else {
   do something else}

Statements are enclosed in the curly brackets; multiple statements are separated by semicolons. The else clause is optional. Let's combine the two examples:

<form action="" method="POST"

   onSubmit="if (confirm('Are you sure you want to submit
this data?'))

      {alert('Thank you for your feedback.'); return true}

   else

      {return false}">

Understanding how expressions are evaluated is crucial to learning how to program. If you're not sure what's happening in the above examples, you may want to reread the preceding sections before continuing.

Exercise: The prompt method gives you a way to get text input from the user. Look up the syntax for this method in Netscape's documentation. Write a program that asks the user for a line of text when he or she clicks on a button. Display the text on the status bar.