WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Javascript Tutorial Part 2

Javascript Tutorial
Part 2

by Heidi Brumbaugh

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="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.

[ < Javascript Tutorial:
Part 1 ]
[ Javascript Tutorial:
Part 3 > ]




HTML5 Development Center


Recent Articles