JavaScript for the World Wide Web: Visual QuickStart Guide, Fifth Edition

JavaScript for the World Wide Web: Visual QuickStart Guide, Fifth Edition

by Tom Negrino, Dori Smith

Paperback(Revised)

$18.28 $21.99 Save 17% Current price is $18.28, Original price is $21.99. You Save 17%.

Product Details

ISBN-13: 9780321194398
Publisher: Peachpit Press
Publication date: 06/23/2003
Series: Visual QuickStart Guide Series
Edition description: Revised
Pages: 498
Product dimensions: 6.96(w) x 9.22(h) x 1.07(d)

About the Author

Veteran journalist and Mac guru Tom Negrino is the author of Macromedia Contribute for Windows: Visual QuickStart Guide and numerous other Visual QuickStart guides, including (with Dori Smith) the last three editions of this volume. Dori Smith is a programmer and journalist who, like Tom, has several Visual QuickStart Guides under her belt, including Java 2 for the World Wide Web: Visual QuickStart Guide. Both authors are on the Steering Committee for the Web Standards Project.

Read an Excerpt


Chapter 3: Fun with Images

Creating More Effective Rollovers

To make the illusion of animation work, you need to make sure that the replacement image appears immediately, with no delay while it is fetched from the server. To do that, you use JavaScript to preload all the images into the browser¹s cache (so that they are already on the user¹s hard disk when they are needed) and place the images into script variables. Then when the user moves the mouse over an image, the script swaps out one variable containing an image for a second variable containing the replacement image. Script 3.2 shows how it is done. The visible result is the same as in Figures 3.1 and 3.2, but the apparent animation is smoother.

To create a better rollover:

1. if (document.images) {
arrowRed = new Image
arrowBlue = new Image
arrowRed.src = "images/redArrow.gif" arrowBlue.src =
"images/blueArrow.gif"
}

This code checks to see if the browser understands image objects (see sidebar). If the browser does, the code assigns arrowRed and arrowBlue to two separate image objects. Then, using the .src property, it fills the two objects with the GIFs of the red and blue arrows.

2. else {
arrowRed = " "
arrowBlue = " "
document.arrow = " "
}
This is the code that tells old browsers (ones that failed the test in step 1) what to do. In order to keep from getting error messages in old browsers, we have tocreate some dummy variables-that is, variables that won't do anything but be created and set to empty. Think of them as placeholders. Create two variables named arrowRed and arrowBlue, andset them to empty. Then create and set document.arrow to empty, too.

3. < A HREF=next.html onMouseover='document.arrow.src=arrowRed.src 'onMouseout=document.arrow.src='arrowBlue.src>

The rest of the rollover gets handled in the link tag. When the user puts the mouse over the blue arrow graphic (onMouseover), the script swaps the blue arrow for the graphic with the red arrow (document.arrow.src=arrowRed.src). When the mouse cursor leaves the area of the graphic, the script reverts the graphic back to the blue arrow.

Tip

When you prepare your graphics for rollovers, make sure that all your GIF images are not transparent. Transparent images will show the image they are replacing underneath.
Both the original and the replacement images need to have identical dimensions. Otherwise, the browser will resize the images for you and probably won't like the distorted result.

Triggering Rollovers from a Link

In prior examples, the user triggered the rollover by moving the mouse over an image. But you can also make a rollover occur when the user points at a text link, as in Figures 3.3 and 3.4. All you need to do is to puta text link within the <A HREF tag, as inScript 3.3.

To trigger a rollover from a link:u <A HREF=next.html onMouseover='document.arrow.src=arrowRed.src 'onMouseout=document.arrow.src='arrowBlue.src > <H1 >Next page </H1 >' </A > <P > <BR >

Note that the text link that says Next page is within the link tag, which makes it the thing that onMouseover and onMouseout use as a trigger. We've moved the IMG tag out of the link tag; it now follows the link tag.

Tip

This trigger technique is useful when you want to provide the user with a preview of what they will see if they click the link at which they are pointing. For example, say you have a travel site describing trips to Scotland, Tahiti, and Cleveland. On the left of the page could be a column of text links for each destination, while on the right could be a preview area where an image appears. As the user points at the name of a destination, a picture of that place appears in the preview area. Clicking on the link takes the user to a page detailing their fabulous vacation spot...

Table of Contents

Introductionxi
Chapter 1Getting Acquainted with JavaScript1
What JavaScript Is2
JavaScript Isn't Java3
Where JavaScript Came From4
What JavaScript Can Do5
What JavaScript Can't Do6
The Snap-together Language7
Handling Events9
Values and Variables10
Assignments and Comparisons11
What Tools to Use?12
Chapter 2Start Me Up!13
Where to Put Your Scripts15
Hiding Scripts from Old Browsers16
Putting Comments in Scripts17
Alerting the User18
Confirming a User's Choice20
Prompting the User22
Redirecting the User23
Redirecting the User with a Link25
Browser Detection26
Chapter 3Language Essentials29
Detecting Browser Plug-ins30
Around and Around with Loops32
Writing with Loops35
Using For/In Loops37
Using Do/While Loops39
Checking if Java Is Enabled41
Functions43
Using Multi-level Conditionals46
Working with Functions That Return Values48
Handling Errors50
Putting More than One Script on a Page52
Scrolling Status Bars54
Status Bar Messages57
Chapter 4Image Basics59
Creating Rollovers61
Creating More Effective Rollovers63
Putting Multiple Rollovers on a Page65
Triggering Rollovers from a Link67
Making Multiple Links Change a Single Rollover69
Working with Multiple Rollovers72
Using a Function to Code Multiple Images with a Single Rollover75
Using a Function to Code Multiple Rollovers77
Chapter 5More Fun with Images79
Creating Cycling Banners81
Creating Multiple Cycling Banners84
Making the Banner Cycling Wait for the User86
Adding Links to Cycling Banners87
Building Slideshows89
Building Wraparound Slideshows92
Displaying a Random Image94
Cycling Images with a Random Start96
Displaying Multiple Random Images97
Combining a Rollover with an Image Map99
Chapter 6Frames, Frames, and More Frames103
Keeping a Page out of a Frame105
Forcing a Page into a Frame106
Forcing a Site into a Frame108
Loading a Frame111
Creating and Loading a Dynamic Frame113
Sharing Functions Between Frames115
Storing Information in Frames118
Loading Multiple Frames at Once121
Browser Detection with Frames125
Working with Iframes127
Chapter 7Working with Browser Windows131
Opening a New Window132
Loading Different Contents into a Window134
Opening a New Window Using an Image Link136
Opening Multiple Windows138
Opening Multiple Windows Simultaneously140
Scrolling a Window142
Updating One Window from Another144
Creating New Pages with JavaScript146
Closing a Window148
Creating a Control Panel150
Positioning a Window on the Screen152
Displaying an Alert when a Window is Loaded154
Chapter 8Form Handling155
Verifying Passwords157
Using Images as Submit Buttons159
Select-and-Go Navigation163
Changing Menus Dynamically166
Selecting Menu Items170
Working with Radio Buttons173
Setting One Field with Another176
Validating Zip Codes180
Validating Email Addresses184
Chapter 9Forms and Regular Expressions193
Validating an Email Address with Regular Expressions195
Validating a File Name200
Extracting Strings203
Formatting Strings206
Formatting and Sorting Strings210
Formatting and Validating Strings212
Chapter 10Making Your Pages Dynamic215
Putting the Current Date into a Web Page216
Working with Days218
Customizing a Message for the Time of Day219
Displaying Dates by Time Zone220
Converting Military Time to AM/PM223
Creating a Countdown226
Working with Referrer Pages229
Writing Text into a Document on the Fly230
Date Methods233
Chapter 11Handling Events235
Handling Window Events236
Mouse Event Handling242
Form Event Handling249
Key Event Handling252
Chapter 12JavaScript and Cookies255
Baking Your First Cookie257
Reading a Cookie260
Showing Your Cookies261
Using Cookies as Counters263
Deleting Cookies265
Handling Multiple Cookies267
Displaying "New to You" Messages269
Chapter 13Introducing CSS273
Saying it with Style275
Styles with Class279
Changing Fonts with CSS282
Checking Your ID284
Styles and Spans287
Distinguished Links289
Positioning Absolutely291
Chapter 14Working with DHTML293
DHTML Browsers & "Standards"294
Moving an Object in Two Dimensions (Netscape 4.x only)295
Moving an Object in Two Dimensions (Internet Explorer Win/Mac)298
Moving an Object in Two Dimensions (Netscape 6+ only)300
Moving an Object in Two Dimensions (Cross-browser)303
Moving an Object in Three Dimensions (Netscape 4.x only)305
Moving an Object in Three Dimensions (Netscape 6+ only)308
Moving an Object in Three Dimensions (Cross-browser)310
Moving DHTML Text (Cross-browser)312
Modifying a DHTML Drop Shadow (IE Windows)314
Rotating a DHTML Shadow (IE Windows)316
Modifying a DHTML Glow (IE Windows)317
Chapter 15User Interface Design with JavaScript319
Pull-Down Menus320
Sliding Menus325
Tool Tips328
Click-Anywhere Form Fields332
Chapter 16Applied JavaScript335
Using an External .js File336
A Slideshow with Captions340
A Silly Name Generator343
Bar Graph Generator348
An Object-oriented Bar Graph Generator356
Style Sheet Switcher361
Chapter 17Manipulating Nodes371
About Node Manipulation372
Adding Nodes374
Deleting Nodes376
Deleting Specific Nodes378
Inserting Nodes381
Replacing Nodes384
Chapter 18Bookmarklets387
Your First Bookmarklet388
Changing a Page's Background Color392
Web-safe Colors393
Word Lookups395
Viewing Images397
Displaying ISO Latin Characters400
Converting RGB Values to Hex401
Converting Values403
A Bookmarklet Calculator404
Chapter 19Working with Visual Tools407
The Pros and Cons of Visual Tools408
Using Behaviors in Dreamweaver413
Flying Objects in Adobe GoLive417
Creating Pop-Up Menus in Fireworks420
Customizing Dreamweaver423
Chapter 20Debugging Common Errors427
The Built-in Debugging Aids428
JavaScript Debuggers429
Common Errors431
Following Variables While a Script is Running435
Viewing Variables in Another Window436
Writing Error Messages to Another Window438
Appendix AJavaScript Genealogy and Reference441
JavaScript Versions442
ECMAScript445
Browsers and JavaScript446
Object Flowchart447
The Big Object Table451
Appendix BJavaScript Reserved Words463
Appendix CCascading Style Sheets Reference467
Appendix DWhere to Learn More475
Finding Help on the Web476
Books481
Index483

Introduction

Welcome to JavaScript! Using this easy-to-learn programming language, you'll be able to add pizzazz to your Web pages and make them more useful for you and for your site's visitors. We've written this book as a painless introduction to JavaScript, so you don't have to be a geek or a nerd to write a script. Pocket protectors will not be necessary at any time. As a friend of ours says, "We're geeky, so you don't have to be!"

We wrote this book for you

We figure that if you're interested in JavaScript, then you've already got some experience in creating HTML pages and Web sites, and you want to take the next step by adding some interactivity to your sites. We don't assume that you know anything about programming or scripting. We also don't assume that you are an HTML expert (though if you are, that's just fine). We do assume that you've got at least the basics of building Web pages down, and that you have some. familiarity with common HTML, such as links, images, forms, and frames.

In this new edition, we ve added some extra explanation of HTML in new sidebars called "Just Enough HTML" You won't find these sidebars in every chapter, just the ones where we think you'll need a quick reference. Having this HTML information handy means you won't need two books open just to remember the syntax of a particular HTML attribute.

If you already know something about programming, you should be aware that we don't take the same approach to JavaScript as you might have seen in other books. We don't delve deeply into JavaScript's syntax and structure, and we don't pretend that this book is a comprehensive language reference. (though you'll find some valuable reference material in Appendix A, the color section in the back of the book). There are several other books on the market that do that job admirably, and we list them at the end of this book, in Appendix D. The difference between those books and this one is that instead of getting bogged down in formalism, we concentrate on showing you how to get useful tasks done with JavaScript without a lot of extraneous information.

How to use this book

Throughout the book, we've used some devices that should make it easier for you to work with both the book and with JavaScript itself.

In the step-by-step instructions that make up most of the book, we've used a special type style to denote either HTML or JavaScript code, like this:

<BODY>
window.status

You'll also notice that we show the HTML in uppercase, and the JavaScript in lowercase, which makes it easier to distinguish between the two on a Web page. Whenever you see a quote mark in a JavaScript, it is always a straight quote (like ' or "), never curly quotes (aka "smart" quotes, like' or "). Curly quotes will prevent your JavaScript from working, so make sure that you avoid them when you write scripts.

In the illustrations accompanying the stepby-step instructions, weve highlighted the part of the scripts that we're discussing in red, so you can quickly find what we're talking about. We often also highlight parts of the screen shots of Web browser windows in red, to indicate the most important part of the picture. Because book pages are narrower than computer screens, some of the lines of JavaScript code are too long to fit on the page. When this happens, we've broken the line of code up into one or more segments, inserted this gray arrow -• to indicate that it's a continued line, and indented the rest of the line. Here's an example of how we show long lines in scripts.

document.write("You're running a -> JavaScript-enabled browser.")

You say browser, we say Kumbaya

Thanks to the tug-of-war over the JavaScript language between Netscape and Microsoft (you ll find more about that struggle in Appendix A of this book, "JavaScript Genealogy and Reference"), we have some scripts that only work in various versions of Netscape Navigator or Communicator, and others that only work in versions of Microsoft Internet Explorer. And to make things more exciting, some scripts work only on Internet Explorer for Windows or Internet Explorer for Mac OS.

In previous editions, some readers have raised questions about bias due to our inclusion of scripts that only work in one browser. Wed like to assure you that we haven' t done this by choice-we really do wish that all of these scripts worked everywhere. If there were some way to make them more compatible across browsers, wed tell you. Unfortunately, the makers of each browser have decided not to support equivalent functionality. We could have included only those scripts that work everywhere, but that would have kept some useful scripts out of this book, and wouldn't be fair to users who only care about a particular browser.

Consequently, we've decided to include all of the scripts, but to mark them clearly as to what works where. To let you know which scripts work in which browsers, we've marked scripts with icons:

N

Scripts marked with this icon work well in Netscape Navigator or Communicator, on Windows, Macs, or flavors of Unix.

IEwin

Scripts marked with this icon WIn work well in Internet Explorer for Windows (Windows 95 and later).

IEmac

Scripts marked with this icon work MAC well in Internet Explorer 5 or later for Mac OS.

If a script doesn't have any icon next to it, it means that the script will work well in any browser.

We (along with our crack team of testers) have tested our scripts in a wide variety of browsers, on several different operating systems, including Windows 95, 98, and 2000; Mac OS 9 and Mac OS X; and Linux. Besides various versions of Netscape and Microsoft browsers, we ve also done some testing using Opera (Opera 5 for Windows, and Opera 5 pre-release for Mac) and iCab (another Mac browser). If you're wondering about the opensource Mozilla browser, it was still in prerelease when we wrote this edition in the early months of 2001. We've done a bit of testing with it, but because it is unfinished, we have not made it a focus of our testing. Netscape 6, which is based in part on Mozilla, was released while we were writing this edition. We have tested the scripts in this new edition with Netscape 6, but as the browser was widely reported to have significant bugs in its initial release, some scripts may have problems in the Netscape 6 version you'll have available when you read this. You should check our companion Web site for the latest versions of the scripts in this book (see below). We did not have access to Internet Explorer 6 for any platform while writing this book; again, if there are any script changes necessary for that browser, we'll note the changes on our Web site.

Don't type that code!

Some JavaScript books print the scripts, and expect you to type in the examples. We think that's way too retro for this day and age. It was tough enough for us to do all that typing, and there's no reason you should have to repeat that work So we've prepared a companion Web site for this book, one that includes all of the scripts in the book, ready for you to just copy and paste into your own Web pages. The site also includes additional tips and scripts. If we discover any mistakes in the book that got through the editing process, we'll list the updates on the site, too. You can find our companion site at:

http://www.javascriptworld.com/

If for some reason you do plan to type in some script examples, you might find that the examples don't seem to work, because you don't have the supporting files that we used to create the examples. For example, in a task where a video plays when you click an on-screen button, you'll need a movie file. No problem. We've put all of those files up on the book's Web site, nicely packaged for you to download. You'll find one downloadable file that contains all of the scripts, HTML files, and the sound and image files we used. If you have any questions, please check the FAQ (Frequently Asked Questions) page on the companion Web site.

If you've read the FAQ, and your question isn't answered there, you can contact us via email at: js4@javascriptworld.com. We regret that because of the large volume of email that we get, we cannot answer email about the book sent to our personal email addresses. We can only guarantee that mes sages sent to the js4@javascriptworld.com address will be answered.

Time to get started

One of the best things about JavaScript is that it's easy to start with a simple script that makes cool things happen on your Web page, then add more complicated stuff as you need it. You don't have to learn a whole book's worth of information before you can start improving your Web pages.

Of course, every journey begins with the first step, and if you've read this far, your journey into JavaScript has already begun. Thanks for joining us; please keep your hands and feet inside the moving vehicle. And please, no flash photography.

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews