CYAN YELLOW MAGENTA BLACK PANTONE 123 CV BOOKS FOR PROFESSIONALS BY PROFESSIONALS® THE EXPERT’S VOICE® IN WEB DEVELOPMENT Companion eBook Available Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional Beginning Dear Reader, J This is the only book you’ll need to learn the ins and outs of modern JavaScript a development. This means concentrating on unobtrusive cross-browser tech- Beginning niques that enhance the user experience for the vast majority of us, but don’t v break the page when the user is using a screenreader or has JavaScript disabled. It Coauthor of also means shying away from outdated DHTML hacks. When I wrote it, I had a Web Accessibility: three goals in mind: to write a book that teaches you the language, uses real- JavaScript DOM Web Standards and world examples, and concentrates on techniques that will stand the test of time. S Regulatory Compliance Writing a beginner’s book about JavaScript is a tricky subject, but I’ve been with careful to achieve a balance between basics and useful functionality—you’ll c 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 r will teach you how to write clean and maintainable code. If you’re already an Scripting Ajax i experienced JavaScripter, it’ll help you brush up on JavaScript and say goodbye and p to outdated practices. The book is packed with real-world examples to learn from and use in your t own projects, saving you hours of development time. The examples have been developed with certain ideals in mind: being platform and browser agnostic, with 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 From Novice to Professional aD the same. I’m confident that you’ll find a wealth of useful information within n O these pages. d Join online discussions: Regards, A M forums.apress.com j Christian Heilmann aS FOR PROFESSIONALS BY PROFESSIONALS™ xc r The ultimate guide to modern JavaScript development! Companion eBook THE APRESS ROADMAP ip t Beginning CSS i Web Development n Pro CSS Techniques g Beginning XML See last page for details with DOM and Ajax on $10 eBook version Pro JavaScript Techniques Beginning JavaScript with DOM Scripting and Ajax H Christian Heilmann e SOURCECODEONLINE i l m www.apress.com ISBN 1-59059-680-3 a Foreword by Simon Willison, 53999 n US $39.99 n Technology Development at Yahoo! Shelve in JavaScript/ Web Development User level: Beginner–Intermediate 6 89253 59680 7 9 781590 596807 this print for content only—size & color not accurate spine = 0.968" 512 page count 6803.book Page i Friday, June 23, 2006 9:05 AM Beginning JavaScript with DOM Scripting and Ajax From Novice to Professional ■ ■ ■ Christian Heilmann 6803.book Page ii 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 iii 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 iv Friday, June 23, 2006 9:05 AM 6803.book Page v Friday, June 23, 2006 9:05 AM 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 (CSSand 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 v 6803.book Page vi Friday, June 23, 2006 9:05 AM 6803.book Page vii Friday, June 23, 2006 9:05 AM 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 vii 6803.book Page viii 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 ix 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