Table of Contents
| Introduction | |
| Ch. 1 | Getting Acquainted with JavaScript | 1 |
| Ch. 2 | Start Me Up! | 13 |
| Ch. 3 | Language Essentials | 29 |
| Ch. 4 | Image Basics | 59 |
| Ch. 5 | More Fun with Images | 79 |
| Ch. 6 | Frames, Frames, and More Frames | 103 |
| Ch. 7 | Working with Browser Windows | 131 |
| Ch. 8 | Form Handling | 155 |
| Ch. 9 | Forms and Regular Expressions | 193 |
| Ch. 10 | Making Your Pages Dynamic | 215 |
| Ch. 11 | Handling Events | 235 |
| Ch. 12 | JavaScript and Cookies | 255 |
| Ch. 13 | Introducing CSS | 273 |
| Ch. 14 | Working with DHTML | 293 |
| Ch. 15 | User Interface Design with JavaScript | 319 |
| Ch. 16 | Applied JavaScript | 335 |
| Ch. 17 | Manipulating Nodes | 371 |
| Ch. 18 | Bookmarklets | 387 |
| Ch. 19 | Working with Visual Tools | 407 |
| Ch. 20 | Debugging Common Errors | 427 |
| App. A | JavaScript Genealogy and Reference | 441 |
| App. B | JavaScript Reserved Words | 463 |
| App. C | Cascading Style Sheets Reference | 467 |
| App. D | Where to Learn More | 475 |
| Index | 483 |
Forewords & Introductions
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.
Read an Excerpt
Chapter 3: Fun with Images
Creating More Effective RolloversTo 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...
loading...