JavaScript for the World Wide Web: Visual QuickStart Guide

JavaScript for the World Wide Web: Visual QuickStart Guide

Paperback(Older Edition)

$16.62 $19.99 Save 17% Current price is $16.62, Original price is $19.99. You Save 17%. View All Available Formats & Editions

Temporarily Out of Stock Online

Eligible for FREE SHIPPING

Overview

JavaScript for the World Wide Web: Visual QuickStart Guide by Tom Negrino

JavaScript for the World Wide Web, 4th Edition: Visual QuickStart Guide is the perfect book for those who are familiar with HTML and are ready to move up to the next level to add some pizzazz and interactivity to their Web site. Using a task-based, visual step-by-step approach and loads of useful illustrations, readers learn the basics of JavaScript: creating rollovers and frames, validating forms, working with browser windows, adding dynamic elements to your site, and more.

This revised bestseller has been expanded with five new chapters and a new appendix. New material can be found in the following chapters:

  • Forms and Regular Expressions
  • Handling Events
  • Introducing Cascading Style Sheets
  • Applied JavaScript
  • Bookmarklets
  • and a new appendix: Cascading Style Sheets Reference

An exciting new feature of this book is the 16-page color appendix of the JavaScript Object Flowchart and the JavaScript Object Table, all in glorious four-color detail.

Don't want to wear out your fingers by typing in all that code? Check out the supplemental Web site, where you can find all the scripts ready for you to cut and paste into your own work, as well as additional notes, addenda, and updates.

Product Details

ISBN-13: 9780201735178
Publisher: Peachpit Press
Publication date: 05/01/2001
Series: Visual QuickStart Guide Series
Edition description: Older Edition
Pages: 432
Product dimensions: 7.00(w) x 9.00(h) x 0.86(d)

About the Author

Tom Negrino writes books and is a contributing editor for Macworld magazine. He's been working with the Macintosh since the innocent, halcyon days of 1984. Shortly thereafter, he began his writing career with MacGuide magazine , joining the Macworld ranks in 1987. His work has also appeared in Digital Video magazine, where he was a contributing editor and monthly columnist.

Tom is a frequent speaker at Macworld Expo, Thunder Lizard's conferences, and other computer trade shows, and is a freelance computer consultant. He has served on the board of the Los Angeles Macintosh Group since 1985, recently ending his tenure as the group's president.

Dori Smith has been programming for over 20 years. As a partner in Chalcedony Consulting, she does programming, training, writing, and Web design. You can find out more about her at her personal site. Dori is also a contributing editor for NetProfessional magazine, is on their advisory board, and is a member of the Web Standards Project Steering Committee.

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

Introduction.

1. Getting Acquainted with JavaScript.

What JavaScript Is. What JavaScript Can Do. JavaScript Isn't Java. The Snap-together Language. Handling Events. Values and Variables. Assignments and Comparisons. What Tools to Use?

2. Start Me Up!

Where to Put Your Scripts. Hiding Scripts from Old Browsers. Putting Comments in Scripts. Alerting the User. Confirming a User's Choice. Prompting the User. Redirecting the User. Redirecting the User with a Link. Browser Detection. Plug-in Detection. Around and around with Loops. Checking if Java Is Enabled. Functions. Putting More Than One Script on a Page. Scrolling Status Bars. Status Bar Messages.

3. Fun with Images.

Creating Rollovers. Creating More Effective Rollovers. Putting Multiple Rollovers on a Page. Triggering Rollovers from a Link. Multiple Images Changing a Single Rollover. Working with Multiple Rollovers. Using a Function to Simplify Coding Multiple Images with a Single Rollover. Using a Function to Simplify Coding Multiple Rollovers. Creating Cycling Banners. Making the Banner Cycling Wait for the User. Adding Links to Cycling Banners. Building Slide Shows. Building Wraparound Slide Shows. Displaying a Random Image. Displaying Multiple Random Images. Combining a Rollover with an Image Map. Automatically Changing Background Colors.

4. Frames, Frames, and More Frames.

Keeping a Page out of a Frame. Forcing a Page into a Frame. Forcing a Site into a Frame. Loading a Frame. Creating and Loading a Dynamic Frame. Sharing Functions between Frames. Storing Information in Frames. Loading Multiple Frames at Once. Browser Detection with Frames.

5. Working with Browser Windows.

Opening a New Window. Loading Different Contents into a Window. Opening a New Window Using an Image Link. Scrolling a Window. Updating One Window from Another. Creating New Pages with JavaScript. Closing a Window. Creating a Control Panel. Positioning a Window on the Screen. Displaying an Alert when a Window Is Loaded.

6. Validating Forms.

Verifying Passwords. Select-and-Go Navigation. Selecting Menu Items. Working with Radio Buttons. Setting One Field with Another. Validating Zip Codes. Validating Email Addresses.

7. Forms and Regular Expressions.

Validating an Email Address with Regular Expressions. Validating a File Name. Extracting Strings. Formatting Strings. Formatting and Sorting Strings. Formatting and Validating Strings.

8. Making Your Pages Dynamic.

Putting the Current Date into a Web Page. Working with Days. Customizing A Message for the Time of Day. Displaying Dates by Time Zone. Converting Military Time to AM/PM. Creating a Countdown. Working with Referrer Pages. Writing Text into a Document on the Fly. Date Methods.

9. Handling Events.

Handling Windows Events. Mouse Event Handling. Form Event Handling. Key Event Handling.

10. JavaScript and Cookies.

Baking Your First Cookie. Reading a Cookie. Showing Your Cookies. Using Cookies as Counters. Deleting Cookies. Handling Multiple Cookies. Displaying “New to You” Messages.

11. Introducing CCS.

Saying It with Style. Styles with Class. Changing Fonts with CSS. Checking Your ID. Styles and Spans. Distinguished Links. Positioning Absolutely.

12. Working with DHTML.

DHTML Browsers & “Standards.” Moving an Object in Two Dimensions (Netscape 4.x only). Moving an Object in Two Dimensions (IE Mac and IE Windows). Moving an Object in Two Dimensions (Netscape 6 only). Moving an Object in Two Dimensions (Cross-browser). Moving an Object in Three Dimensions (Netscape 4.x only). Moving an Object in Three Dimensions (Netscape 6 only). Moving an Object in Three Dimensions (Cross-browsers). Moving DHTML Text. Modifying a DHTML Drop Shadow. Rotating a DHTML Shadow. Modifying a DHTML Glow.

13. Using Interface Design with JavaSript.

Pull-Down Menus. Sliding Menus. Tool Tips. Click-Anywhere Form Fields.

14. Applied JavaSript.

Using an External .js File. A Slideshow with Captions. A Silly Name Generator. Bar Graph Generator.

15. Bookmarklets.

Your First Bookmarklet. Changing a Page's Background Color. Web-safe Colors. Word Lookups. Viewing Images. Displaying ISO Latin Characters. Converting RGB Values to Hex. Converting Values. A Bookmarklet Calculator.

16. Working with Visual Tools.

The Pros and Cons of Visual Tools. Using Behaviors in Dreamweaver. Flying Objects in Adobe GoLive. Creating Pop-Up Menus in Fireworks. Customizing Dreamweaver.

17. Debugging Common Errors.

The Built-In Debugging Aids. JavaScript Debuggers. Common Errors. Following Variables while a Script is Running. Viewing Variables in Another Window. Writing Error Messages to Another Window.

Appendix A. JavaScript Genealogy and Reference.

JavaScript Versions. ECMAScript. Browsers and JavaScript. Object Flowchart. The Big Object Table.

Appendix B. JavaScript Reserved Words.

Appendix C. Cascading Style Sheets Reference.

Appendix D. Where to Learn More.

Finding Help on the Web. Books.

Index.

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

JavaScript for the World Wide Web: Visual QuickStart Guide 3.2 out of 5 based on 0 ratings. 20 reviews.
aquagrunty on LibraryThing 7 days ago
My first programming book, it taught me the general basic ideas of programming. A bit lacking on content compared to other brands, but very noob friendly. If Javascript is going to be your first programming language, this is book a good choice, but otherwise choose something with more content like the SAMS Teach Yourself series.
Guest More than 1 year ago
This book is terrible and the back cover lies. This doesn't work like a reference book, it doesn't even provide difintions for basic functions. And it begins by saying that Javascript is nothing like Java which is a complete lie. I bought this book, learned Java, and then came back to JScript. I can do most of these examples more efficiently just based on my Java background. The book is a failure for anyone interested in real web design.
Guest More than 1 year ago
Good introduction of Javascript. Some handy scripts to get started. I recommend this for anyone starting out.
Guest More than 1 year ago
This book is a complete waste of time and money. If you want to use JavaScript, start it right by using other choice of book.
Guest More than 1 year ago
Read the other review, and you'll know what i'm talking about. It doesn't explain anything. I learned html from reading a couple of books, and wanted to improve my abilities. If that is your case go buy a diffrent book! This one is horrible. Some of the code, doesn't even work!
Guest More than 1 year ago
If you don't have time to learn how to add JavaScript to your Web pages, use the book and its companion site where you can download scripts without having to type it all in. The book is set up by the cool stuff you want to add to your Web site to jazz it up. Don't expect explanations of definitions, objects, operators, syntax, and all that stuff that scare the non-programmer. There are other books that serve that purpose. This one is to help you add scripts quickly and painlessly or even tweak them. It takes you step-by-step through each feature along with its code and a screen shot so you know what to do.
Guest More than 1 year ago
Basically, this is a good book to start learning the fundamentals of JavaScript. This is the book I used to learn the basics. Also, because of its small size, its not exactly a book that will intimidate beginners. I borrowed this book from the library, and within like 3 weeks of reading it, trying to write my own code, and experimenting, I managed to do some pretty neat things, so basically i highly recommend this book for beginners who want to learn the foundation of javascript.
Guest More than 1 year ago
This book seems to have been written for those who want to include some JavaScript functionality on their webpages without having to learn the nitty-gritty. The 'programming-lingo' is not explained well for non-programmers, and the explanation of the examples and algorithms are not thorough. It does not enable one to build further then the listed examples. If you want some scipts to copy onto your webpage - great. If you want to learn the language this is not the book for you.
Guest More than 1 year ago
I strongly recommend this book to people who are just starting to learn about JavaScript. The book is quite simple and well organized in an easy to read fashion. The colors add a lot of flavor and the occasional tips are quite useful. I totally disagree with those who have rated this book anything less than 3 stars because it compares quite well to other good books in the market. I also like the way they have left a lot of space in most pages for those who like to write comments for their personal future reference. You can also download all scripts from their web site so no need to type. The only thing I don't like is the focus of the book is mostly on Netscape.
Guest More than 1 year ago
This is by far my favorite book. This book took a 'I know nothing about javascript' to creating customized scripts. If you know absolutely nothing about javascript, this book is for you. Prior knowledge of HTML is needed but after that this book is the one to get. After this book dive in to DHTML for the World Wide Web also by the same publisher.
Guest More than 1 year ago
book worthless. You will learn pretty much nothing about javascript. This book is written so you can use the exact scripts to accomplish small tasks. Better off cutting and pasting somewhere than typing in something that is not well explained anyway. - Not for beginners (you will learn zero), pro's know better. This book sucks.
Guest More than 1 year ago
I really enjoy this book. I am the type of person that likes to figure things out by myself, and not going trough the multiple definitions and explanations. Therefore, I recommend this book only to those who aren't really into reading tons of explanations and definitions, but can understand most things without help.
Guest More than 1 year ago
I was very excited to get this book, but it ends up with returning it. This book has very poor explaintation about how to use methods or each function etc. It just decribes when you should put those commands and where to put it, but it never tells you why, which will make you really frustrated especially if you are a beginner.
Guest More than 1 year ago
This book really opened the door to JavaScript for me. It shows you step by step, in easy to follow samples, how to create a bunch of useful scripts. Everything is done cross browser and cross platform compatible so you don't waste your time writing scripts that don't work. If you are ready to start learning JavaScript then this book is the book to get, I recommend it to everyone starting to learn JavaScript.
Guest More than 1 year ago
In my opinion this is one of the worst books for learning javascript. It doesn't explain what each function does, it just gives you a chart on what the different functions mean. All they give you is example upon example, never really explaining why putting this over here makes this do that. If you just want to copy some scripts and put them on your page, buy this book. I recommend getting scripts off the internet. But if you actually want to learn javascript buy another book. This book is one simple reason that I am turned off about java script. So for the record one more time, don't waste your money on this book, it may say bestseller on it, but it never tells you how many returns or garbage cans this book has had.
Guest More than 1 year ago
This book is virtually useless. It doesn't teach you JavaScript, it jsut gives you many specific examples, but becuase it never gets into the syntax of the language, you can do little more than use thier scripts on your page. If you want to learn JavaScript, this book is not for you, if all you wanna do is a few rollovers, then use Adobe ImageReady. Who is this book for? Not me.
Guest More than 1 year ago
i know HTML and i wanted to learn javascript this is a greaty book for just that.
Guest More than 1 year ago
This books offers reference type access as well as some samples. There are more thorough and extensive books I'm sure but this was perfect for me, my price range, and what I wanted from a programming book.
Guest More than 1 year ago
I purchased this book as the 3rd Edition to the Peachpit Press series on JavaScript. I had purchased the 1st Edition by Ted Gesing and Jeremy Schneider (ISBN: 0-201-68814-X) a couple of years ago and found it very helpful. The 3rd Edition has almost twice as many pages so I assumed it would contain additional information not covered in the 1st edition. I am sorry to report that the 3rd edition has made some serious omissions. For example, the word 'return' allows the programmer to specify whether a form is submitted or not. This can be very important if you catch an error during validation and wish to stop the submit process. The text does not mention it. Another example, parseInt and parseFloat are functions that ensure that a value is interpreted as a number and not text. Again, there is no reference to these important functions. I would urge anyone to seek out the 1st edition referened above as a good reference book instead of the 3rd edition.
Guest More than 1 year ago
This book is a great tutorial on JavaScript if you already know HTML. It is full of easy to follow examples. BUY THIS!!!