JavaScript Basics (Web Design in a Nutshell, 2nd Edition)

28.2.1. Functions

There are two parts to most JavaScript applications: the functions that tell the browser what to do, and actual uses of these functions. Let's take the example of a simple web page that displays a linked document in a second window:

<HTML> 
<HEAD>
<SCRIPT LANGUAGE="JavaScript"> 
<!--
function openWin(URL) { 
    aWindow = window.open(URL,"composerwindow","toolbar=no,width=350,
height=400,status=no,scrollbars=yes,resize=no,menubar=no"); 
} 
//--> 
</SCRIPT> 
</HEAD> 

<BODY> 
<P><A HREF="javascript:openWin('mozart.html');">Mozart</A></P> 
<P><A HREF="javascript:openWin('beethoven.html');">Beethoven</A></P> 
<P><A HREF="javascript:openWin('wagner.html');">Wagner</A></P> 
</BODY> 
</HTML>

The JavaScript inside the <script> tags defines a function, called openWin( ), that tells the browser what to do when the function is called. Now look at the body of the document. The openWin( ) function is being called from the anchor tags. Let's take a look at one of those lines:

<A HREF="javascript:openWin('mozart.html');">Mozart</A>

The line starts off as a normal <a href> tag. But the value of href is not a standard URL; it's a call to a JavaScript function. The word javascript: tells the browser that the link contains JavaScript code. In this case, that code is a call to the openWin( ) function, which was defined up in the head of the document. Since the JavaScript call is in a link, the function is run when the user clicks on the link (the word "Mozart"). The content in parentheses -- mozart.html--specifies a value that is passed to the openWin( ) function. We'll see what passing is all about when we look at the function. The rest of the line is a standard link -- the hypertext and the closing anchor tag.

Now let's look at the openWin( )function:

function openWin(URL) { 
    aWindow = window.open(URL,"composerwindow","toolbar=no,width=350,
height=400,status=no,scrollbars=yes,resize=no,menubar=no"); 
}

The first line of code declares a new function with the name openWin( ); this declaration is simply a way of giving a name to a set of instructions for the browser. The set of parentheses indicates that the function takes arguments, and the names of the arguments are listed inside the parentheses. Arguments are information that must be given to a function when it is called; the function uses this information to perform its job. In this example, the openWin( ) function takes one argument, a URL, and uses the URL to open a new window that displays the page at that location.

After the function declaration comes an opening curly bracket ({). You'll see the closing curly bracket (}) on the last line. Everything between these curly brackets is the code that is run each time the function is called.

The two lines of code are actually one line that runs longer than the printable area of this page. The line starts by creating a new variable. A variable is just a name that is associated with a piece of information. In this case, we're putting the result of some window-opening code into the variable called aWindow. The window-opening code returns information about the window it opened, so if we wanted to do something else to the window later, like close it, we could use aWindow to refer to that specific window. More commonly, variables are used to store information about the current state of the page or the user environment, such as the browser being used or the user's name.

The window-opening code calls the window.open( ) function, which is a predefined function that is built into JavaScript. It provides a standard way to open a new window and lets you specify a bunch of information about the window to be opened. There are three arguments for window.open( ): the URL of the document to be displayed in the window, the name of the window, and the characteristics of the window. Note that when we call window.open( ), we're not specifying an actual URL, but instead using the URL argument that is passed into the openWin( ) function. Thus, when we specify the URL mozart.html in the anchor tag, that URL gets passed first to the openWin( ) function and then to the window.open( ) function, which results in that document being displayed in the new window.

The second argument to window.open( ), "composerwindow", is a string that indicates the name of the new window. A string is simply a collection of characters surrounded by single or double quotes. The final argument is another string that specifies the characteristics of the window: the window's size is 350 by 400; it has scrollbars but no tool bar, status bar, or menu bar; and it cannot be resized by the user. Note that no spaces or carriage returns are permitted inside the string for this final argument.

Now that you understand all the code here, let's review what happens when the user clicks on the links. When a user clicks the Mozart link, the openWin( ) code runs, passing the URL mozart.html to the function window.open( ), which opens a new 350 400 window that displays the document at that URL. When the user clicks the Beethoven link, the same function runs, but the code passes the beethoven.html URL to the function, and that document is displayed in the window.

28.2.2. Event Handlers

In the previous example, the JavaScript function was triggered when the user clicked on an ordinary link. JavaScript code can also be triggered by more subtle user actions, such as moving the mouse over an element on the page (commonly called a "rollover"), or by browser actions, such as the loading of a page. These actions are called events. In JavaScript, you tie specific functionality to events with event handlers. An event handler simply watches for a predefined event and executes some code when it occurs. This response to user action is the foundation of interactivity.

In the following example, the onMouseOver event handler triggers a function called turnOn( ) when the user passes the mouse over the image on the page:

<img src="button_off.gif" onMouseOver="turnOn(  );">

The turnOn( ) function gives the browser instructions to swap out the button_off.gif image with another one. This kind of code is the basis of the rollover buttons that are so popular on the Web today. Rollover scripts are discussed in detail in Section 28.3, "Sample Scripts" of this chapter.

Table 28-1 contains a complete list of event handlers recognized by the different versions of JavaScript.

Table 28-1. JavaScript event handlers

Event handler	Supported by
`onAbort`	Images (1.1)
`onBlur`, `onFocus`	Text input elements (all versions); windows, all form elements (1.1)
`onChange`	Select menus, text input elements (all versions)
`onClick`	Button elements, links (all versions)
`onDblClick`	Entire document, images, links, button elements (1.2)
`onError`	Images, windows (1.1)
`onKeyDown`, `onKeyPress`, `onKeyUp`	Entire document, images, links, text input elements (1.2)
`onLoad`, `onUnload`	Windows (all versions); images (1.1)
`onMouseDown`, `onMouseUp`	Entire document, links, images, button elements (1.2)
`onMouseOver`, `onMouseOut`	Links, images, layers (1.2)
`onReset`, `onSubmit`	Form elements (1.1)

28.2. JavaScript Basics

28.2.1. Functions

28.2.2. Event Handlers

Table 28-1. JavaScript event handlers