home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Book HomeWeb Design in a NutshellSearch this book

28.2. JavaScript Basics

JavaScript code is usually placed directly in an HTML document. The code can go in either the head or the body, and there can be numerous scripts in a single HTML document. Here's the syntax:

<SCRIPT LANGUAGE="JavaScript"> 
<!--
script goes here 
//-->
</SCRIPT>

The <script> tags define the boundaries of the script and set the scripting language to JavaScript. The language attribute is necessary to distinguish JavaScript from other scripting languages, like VBScript, that can also be embedded in web pages. Finally, HTML comments surround the script to hide the code from really old browsers that don't understand the <script> tag. Otherwise, those browsers would just display the code like preformatted text, which isn't very pretty.

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)



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.