Please keep
voting for us
as a Top 100
Web site!
|
|
|
Javascript Tutorial, Part 2
Writing an Event Handler
You saw above how to change the status bar's value. Now you just need to know where to enter the code to "catch" when the mouse is over a link. It turns out that when the user moves the mouse cursor over an anchor, the browser generates something called a mouse over event. We need to "trap" this event by writing an event handler. The syntax for this sort of thing is:
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=/old?u=http%3A%2F%2Fwww.webdeveloper.com%2Fjavascript%2F%26quot%3Bftp%3A%2Fftp.jsnet.com%2Fflzmac.hqx%26quot&y=1999 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=/old?u=http%3A%2F%2Fwww.webdeveloper.com%2Fjavascript%2F%26quot%3B%26quot%3B&y=1999 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=/old?u=http%3A%2F%2Fwww.webdeveloper.com%2Fjavascript%2F%26quot%3B%26quot%3B&y=1999 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=/old?u=http%3A%2F%2Fwww.webdeveloper.com%2Fjavascript%2F%26quot%3B%26quot%3B&y=1999 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.
[ Click here to move to the next part of the article ]
Copyright © 1999
internet.com CorporationAll Rights Reserved. Legal Notices.
Contact the WebDeveloper.com staff
Last modified: Wed Sep 22 06:11:44 EDT 1999
Refresh Daily
Join Editor-in-Chief David Fiedler
and find truth, justice, and a clue or two.
ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML
