A Complete Guide to Web Design

(やまだぃちぅ) #1
Sample Scripts 381

JavaScript

Sample Scripts

Web Design in a Nutshell, eMatter Edition

The window opening code uses thewindow.open method, which is a standard
way of controlling windows, specifying a bunch of information about the window
to be opened. There are three parameters forwindow.open: the URL to be
displayed in the window, the name of the window, and the characteristics of the
window. In this function, we’re not specifying a single URL; we’re asking to have a
URL passed to the function when it is run. That’s what’s happening when we give
the URL mozart.html in the anchor tag; we’re “passing” that URL to the
openWin() function.


The textthewindowgives the name of the window. The final parameter gives the
characteristics of the window: 350×400, with scrollbars, no toolbar, no status bar,
no menu bar, and it can’t be resized by the user. Note that in the final set of
quotes, no spaces or carriage returns are permitted.


Now that we understand all the code here, let’s review what happens when the
user clicks on the links. When the Mozart link is clicked, theopenWin()code is
run, passing the URLmozart.htmlto the function, which opens a new 350× 400
window displaying that URL. When the Beethoven link is clicked, the same func-
tion is run, butbeethoven.htmlis passed to the function and displayed in the
window.


Now that we’ve covered the basic terms and concepts of JavaScript, let’s look at
some scripts that will enhance the functionality of your pages.


Sample Scripts


How about some useful scripts to get you started? This section offers several
scripts you can copy into your web pages.


Status Line Messages


Probably the simplest JavaScript you can add to your site is a message that appears
in the status bar (the bar at the bottom that shows URLs or says “Document:
Done”). You can use this bar to display a message when the user places the
mouse over a link. To do this simply add a little JavaScript to a standard anchor
tag. You don’t even need to declare a script. Non-JavaScript-compatible browsers
will simply ignore the code. Here’s how you do it:


<A HREF="mozart.com" onMouseOver="window.status='A study of
Mozart’s operas'; return true;">Mozart</A>

The above code displays the text “A study of Mozart’s operas” when the user puts
the cursor over the Mozart link. To use this code on your site, just replace the text
between the single quotes (and the URL and hypertext, of course).


Opening a New Window


We detailed the code for opening a new window earlier in the chapter, so we’ll
just take a quick look here at which code needs to be replaced to use this script
on your site. The code again:


<HTML>
<HEAD>
Free download pdf