Beginning JavaScript with DOM scripting and Ajax

this print for content only—size & color not accurate spine = 0.968" 512 page count

BOOKS FOR PROFESSIONALS BY PROFESSIONALS®

Coauthor of

Web Accessibility:

Web Standards and

Regulatory Compliance

US $39.99

Shelve in JavaScript/

Web Development

User level:

Beginner–Intermediate

JavaScript Heilmann

THE EXPERT’S VOICE® IN WEB DEVELOPMENT

Christian Heilmann

Foreword by Simon Willison,

Technology Development at Yahoo!

Beginning

JavaScript with DOM

Scripting and Ajax

From Novice to Professional

CYAN

MAGENTA

YELLOW

BLACK

PANTONE 123 CV

ISBN 1-59059-680-3

9 781590 596807

53999

6 89253 59680 7

Companion

eBook Available

The ultimate guide to modern JavaScript development!

www.apress.com

SOURCE CODE ONLINE

Companion eBook

See last page for details

on $10 eBook version

forums.apress.com

FOR PROFESSIONALS

BY PROFESSIONALS™

Join online discussions:

THE APRESS ROADMAP

Pro JavaScript Techniques

Pro CSS Techniques

Beginning XML

with DOM and Ajax

Beginning JavaScript

with DOM Scripting and Ajax

Beginning CSS

Web Development

Beginning JavaScript with DOM Scripting

and Ajax: From Novice to Professional

Dear Reader,

This is the only book you’ll need to learn the ins and outs of modern JavaScript

development. This means concentrating on unobtrusive cross-browser tech￾niques that enhance the user experience for the vast majority of us, but don’t

break the page when the user is using a screenreader or has JavaScript disabled. It

also means shying away from outdated DHTML hacks. When I wrote it, I had

three goals in mind: to write a book that teaches you the language, uses real￾world examples, and concentrates on techniques that will stand the test of time.

Writing a beginner’s book about JavaScript is a tricky subject, but I’ve been

careful to achieve a balance between basics and useful functionality—you’ll

start slow enough to not get out of your depth and progress up to coding work￾ing examples of Ajax and DOM scripting. If you’re a JavaScript novice, this book

will teach you how to write clean and maintainable code. If you’re already an

experienced JavaScripter, it’ll help you brush up on JavaScript and say goodbye

to outdated practices.

The book is packed with real-world examples to learn from and use in your

own projects, saving you hours of development time. The examples have been

developed with certain ideals in mind: being platform and browser agnostic,

accessible, web standards compliant, and very easy to maintain by others.

I’ve experienced a lot in my eight years of developing JavaScript, and I’m not

shy about discussing the mistakes I’ve made in the past to help you avoid making

the same. I’m confident that you’ll find a wealth of useful information within

these pages.

Regards,

Christian Heilmann

Beginning and DOM Scripting Ajax

with

Beginning JavaScript

with DOM Scripting

and Ajax

From Novice to Professional

■■■

Christian Heilmann

6803.book Page i Friday, June 23, 2006 9:05 AM

Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional

Copyright © 2006 by Christian Heilmann

All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,

electronic or mechanical, including photocopying, recording, or by any information storage or retrieval

system, without the prior written permission of the copyright owner and the publisher.

ISBN-13 (pbk): 978-1-59059-680-7

ISBN-10 (pbk): 1-59059-680-3

Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1

Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence

of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark

owner, with no intention of infringement of the trademark.

Lead Editors: Charles Brown, Chris Mills

Technical Reviewer: Jon Stephens

Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick,

Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser,

Keir Thomas, Matt Wade

Project Manager: Beth Christmas

Copy Edit Manager: Nicole LeClerc

Copy Editor: Ami Knox

Assistant Production Director: Kari Brooks-Copony

Production Editor: Katie Stence

Compositor: Pat Christenson

Proofreader: Lori Bring

Indexer: Broccoli Information Management

Artist: April Milne

Cover Designer: Kurt Krames

Manufacturing Director: Tom Debolski

Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,

New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or

visit http://www.springeronline.com.

For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA

94710. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit http://www.apress.com.

The information in this book is distributed on an “as is” basis, without warranty. Although every precaution

has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to

any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly

by the information contained in this work.

The source code for this book is available to readers at http://www.beginningjavascript.com and http://

www.apress.com.

6803.book Page ii Friday, June 23, 2006 9:05 AM

To Ioanna, who can sleep and look like an angel while some geek next to her hacks on the

keyboard of a laptop and constantly mutters “Why won’t you work” under his breath.

6803.book Page iii Friday, June 23, 2006 9:05 AM

6803.book Page iv Friday, June 23, 2006 9:05 AM

v

Contents at a Glance

Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xv

About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

■CHAPTER 1 Getting Started with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

■CHAPTER 2 Data and Decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

■CHAPTER 3 From DHTML to DOM Scripting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

■CHAPTER 4 HTML and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

■CHAPTER 5 Presentation and Behavior (CSS and Event Handling) . . . . . . . . . . 123

■CHAPTER 6 Common Uses of JavaScript: Images and Windows . . . . . . . . . . . 183

■CHAPTER 7 JavaScript and User Interaction: Navigation and Forms . . . . . . . . . . 241

■CHAPTER 8 Back-End Interaction with Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

■CHAPTER 9 Data Validation Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

■CHAPTER 10 Modern JavaScript Case Study: A Dynamic Gallery . . . . . . . . . . . . 387

■CHAPTER 11 Using Third-Party JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

■APPENDIX Debugging JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

6803.book Page v Friday, June 23, 2006 9:05 AM

6803.book Page vi Friday, June 23, 2006 9:05 AM

vii

Contents

Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xv

About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

■CHAPTER 1 Getting Started with JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

The Why of JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

What Is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Problems and Merits of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Why Use JavaScript If It Cannot Be Relied On? . . . . . . . . . . . . . . . . . . . . . . . 6

JavaScript in a Web Page and Essential Syntax . . . . . . . . . . . . . . . . . . . . . . 7

JavaScript Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Code Execution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

An Aside About Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Simple JavaScript Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

■CHAPTER 2 Data and Decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Data, Data Types, and Data Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

The String Data Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

JavaScript Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Converting Different Types of Data . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

The Composite Data Types: Array and Object . . . . . . . . . . . . . . . . . . . . . . . 30

Objects JavaScript Supplies You with: String, Date,

and Math. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

The Array Object’s Methods and Properties . . . . . . . . . . . . . . . . . . 42

6803.book Page vii Friday, June 23, 2006 9:05 AM

viii ■CONTENTS

Making Decisions in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

The Logical and Comparison Operators . . . . . . . . . . . . . . . . . . . . . . . 45

Conditional Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Testing Multiple Values: the switch Statement. . . . . . . . . . . . . . . . 52

Repeating Things: Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

■CHAPTER 3 From DHTML to DOM Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

JavaScript As “the Behavior Layer” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Object Detection vs. Browser Dependence . . . . . . . . . . . . . . . . . . . . 65

Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

JavaScript and Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Good Coding Practices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Naming Conventions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Code Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Commenting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Short Code via Ternary Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Sorting and Reuse of Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Variable and Function Scope. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Keeping Scripts Safe with the Object Literal . . . . . . . . . . . . . . . . . . . 81

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

■CHAPTER 4 HTML and JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

The Anatomy of an HTML Document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Providing Feedback in Web Pages via JavaScript:

The Old School Ways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Using window Methods: prompt(), alert(),

and confirm(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Accessing the Document via the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Of Children, Parents, Siblings, and Values . . . . . . . . . . . . . . . . . . . . . . . . . . 99

From the Parents to the Children . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

From the Children to the Parents . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Among Siblings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Changing Attributes of Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

6803.book Page viii Friday, June 23, 2006 9:05 AM

■CONTENTS ix

Creating, Removing, and Replacing Elements. . . . . . . . . . . . . . . . . . . . . . 109

Avoiding NOSCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Shortening Your Scripts via InnerHTML. . . . . . . . . . . . . . . . . . . . . . . 115

DOM Summary: Your Cheat Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

DOMhelp: Our Own Helper Library . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

■CHAPTER 5 Presentation and Behavior (CSS and Event Handling) . . 123

Changing the Presentation Layer via JavaScript. . . . . . . . . . . . . . . . . . . . 123

Helping the CSS Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Changing the Document’s Behavior via Event Handling . . . . . . . . . . . . . 153

Events in the W3C-Compliant World . . . . . . . . . . . . . . . . . . . . . . . . . 156

Fixing Events for the Non-W3C-Compliant World . . . . . . . . . . . . . . 165

Never Stop Optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

The Ugly Page Load Problem and Its Ugly Solutions. . . . . . . . . . . . 173

Reading and Filtering Keyboard Entries . . . . . . . . . . . . . . . . . . . . . . 174

The Dangers of Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

■CHAPTER 6 Common Uses of JavaScript: Images and Windows . . . . 183

Images and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Basics of Image Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Preloading Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Rollover Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Slide Shows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Summary of Images and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 211

Windows and JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Window Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Window Methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Summary: Windows and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 238

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

6803.book Page ix Friday, June 23, 2006 9:05 AM

x ■CONTENTS

■CHAPTER 7 JavaScript and User Interaction: Navigation and Forms. . . 241

Navigation and JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

The Fear of the Page Reload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Basics of Navigation and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 242

Browser Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

In-Page Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Site Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Pagination. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

Summary of Navigation with JavaScript . . . . . . . . . . . . . . . . . . . . . . 272

Forms and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Basics of Forms with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Form Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Interactive Forms: Hiding and Showing Dependent Elements. . . . 291

Custom Form Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Summary of Forms and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

■CHAPTER 8 Back-End Interaction with Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Household Cleaning Liquid, Football Club, or Flash Gordon’s

Spacecraft: What Is Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Et Tu, Cache? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Putting the X Back into Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Replacing XML with JSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Using Server-Side Scripts to Reach Third-Party Content. . . . . . . . 316

XHR on Slow Connections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

A Larger Ajax Example: Connected Select Boxes . . . . . . . . . . . . . . 323

Optional Dynamic Ajax Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

■CHAPTER 9 Data Validation Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

Pros and Cons of Client-Side JavaScript Validation . . . . . . . . . . . . . . . . . 343

A Quick Reminder About Protecting Content with JavaScript. . . . . . . . . 344

The One-Size-Fits-All Validation Myth . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

6803.book Page x Friday, June 23, 2006 9:05 AM

■CONTENTS xi

Basic JavaScript Validation with String and Numeric Methods . . . . . . . 346

String Validation Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

Numeric Validation Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352

Regular Expressions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Syntax and Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Wildcard Searches, Constraining Scope, and Alternatives . . . . . . 358

Restricting the Number of Characters with Quantifiers . . . . . . . . . 359

Word Boundaries, Whitespace, and Other Shortcuts . . . . . . . . . . . 360

Methods Using Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . 361

The Power of Parenthesis Grouping. . . . . . . . . . . . . . . . . . . . . . . . . . 361

Regular Expression Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Summary of Validation Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Form Validation Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

Designating Mandatory Fields. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

The Hidden Field Method. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

The Indicator Element Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

The CSS Classes Method. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

The Custom Attribute Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

Failures of These Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Sharing Validation Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Giving Users Validation Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369

Showing a List of Erroneous Fields . . . . . . . . . . . . . . . . . . . . . . . . . . 369

Replacing the Main Form with a Clickable Error Message. . . . . . . 374

Highlighting Erroneous Fields Individually . . . . . . . . . . . . . . . . . . . . 376

Instant Validation Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

Other Dynamic Validation Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

■CHAPTER 10 Modern JavaScript Case Study: A Dynamic Gallery . . . . . 387

Basics of Thumbnail Galleries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

What Is a Thumbnail Gallery and What Should It Do? . . . . . . . . . . . . . . . 388

Static Thumbnail Galleries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388

Faking Dynamic Galleries with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 389

Displaying Captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

Dynamic Thumbnail Galleries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Creating an Image Badge from a Folder. . . . . . . . . . . . . . . . . . . . . . . . . . . 406

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

6803.book Page xi Friday, June 23, 2006 9:05 AM

xii ■CONTENTS

■CHAPTER 11 Using Third-Party JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

What the Web Offers You . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

Code Snippets, RSS Feeds, APIs, and Libraries . . . . . . . . . . . . . . . . . . . . 416

RSS Feeds and REST APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Examples of REST APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

Using a Library: Short, Shorter, jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Dangers of jQuery and Other Libraries Using Their

Own Syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

Using an API: Adding a Map to Your Site with Google Maps. . . . . . . . . . 427

Full Service: The Yahoo Developer Network and User

Interface Library. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Bouncy Headlines Using YUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Replacing Pop-Up Windows Using the YUI Connection

Manager and Container Components. . . . . . . . . . . . . . . . . . . . . . 444

Yahoo User Interface Library Summary. . . . . . . . . . . . . . . . . . . . . . . 449

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450

■APPENDIX Debugging JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Common JavaScript Mistakes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Misspellings and Case-Sensitivity Issues . . . . . . . . . . . . . . . . . . . . . 451

Trying to Access Undefined Variables . . . . . . . . . . . . . . . . . . . . . . . . 452

Incorrect Number of Closing Braces and Parentheses . . . . . . . . . . 454

Concatenation Gone Wrong. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456

Assigning Instead of Testing the Value of a Variable . . . . . . . . . . . 458

Tracing Errors with alert() and “Console” Elements . . . . . . . . . . . . . 458

Error Handling with try and catch() . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

Sequential Uncommenting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Error Reporting in Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463

Microsoft Internet Explorer 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463

Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Opera 8.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466

Firefox 1.5.0.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466

JSLint and JSUNIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

6803.book Page xii Friday, June 23, 2006 9:05 AM

xiii

Foreword

There has never been a more exciting time to learn JavaScript. It may be a cliché, but it’s

certainly true. After years spent banished in a wilderness of browser wars and false promises,

JavaScript has finally emerged as an essential part of any web developer’s toolbox. No longer

just a vehicle for ads and annoyances, it is now a valuable component of the next generation of

web applications.

What has caused this sudden rush of interest? The first reason is purely practical: browser

improvements have finally made it viable to write cross-browser JavaScript with some certainty

that it will actually work. The second is more revolutionary: Ajax, an old technique with a new

name that enables client-side code to communicate directly with a server without refreshing

the whole page. This simple ability has thrown web application development wide open,

enabling new, innovative interfaces and dramatically altering user expectations of how web

interfaces can behave.

This adoption has been helped by the growing realization that JavaScript is not a toy

language. Despite its numerous warts, beneath its deceptively simple exterior lie a host of

powerful features not seen in many mainstream languages: closures, prototypal inheritance,

and extensive support for the functional programming style. That such a flexible language is

now installed on hundreds of millions of computers is a cause for celebration in itself.

Just because you can do something doesn’t mean that you should. Not all browsers are

born equal, and accessibility (both for people and for alternative devices) remains an essential

aspect of developing for the Web. Understanding the issues and techniques around progressive

enhancement is an important part of the JavaScript learning curve.

The set of challenges posed by JavaScript development is huge.

Browsers frequently deviate from what standard specifications there are, and pseudo￾standards are common and frequently unavoidable.

Ambitious new applications are uncovering browser bugs that have laid dormant for years.

The complexity of those applications is itself a problem, introducing new problems related to

maintaining large code bases.

Thankfully, the global JavaScript community has risen to the challenge. A wealth of

code and resources awaits the intrepid developer, but the value of this treasure trove can be

unlocked only through a solid understanding of the underlying platform. This book will provide

you with that knowledge.

As a long-standing teacher and leader in that community, Christian is the ideal guide to

this intricate world. This book comprises accumulated wisdom obtainable only through years

of experience.

Christian will teach you to apply JavaScript tastefully, responsibly, and elegantly in a way

that will delight your users and impress your peers.

Simon Willison

Technology Development at Yahoo!

6803.book Page xiii Friday, June 23, 2006 9:05 AM

6803.book Page xiv Friday, June 23, 2006 9:05 AM