apress beginning javascript with dom scripting and ajax, from novice to professional (2006)

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 DOM Scripting and 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 orders-ny@springer-sbm.com, 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 info@apress.com, 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 [...]... particularly keen on JavaScript, PHP, Linux, and MySQL Jon coauthored Professional JavaScript, Second Edition (Wrox Press, 2001), Beginning MySQL Database Design and Optimization: From Novice to Professional (Apress, 2004), and PHP 5 Recipes: A Problem-Solution Approach (Apress, 2005) He was also the technical reviewer for Jeremy Keith’s DOM Scripting: Web Design with JavaScript and the Document Object... GETTING STARTED WITH JAVASCRIPT In this chapter you’ll learn • What JavaScript is and what it can do for you • The advantages and disadvantages of JavaScript • How to add JavaScript to a web document and its essential syntax • Object-oriented programming (OOP) in relation to JavaScript • How to write and run a simple JavaScript program Chances are that you have already come across JavaScript, and already... these controls and how to use them Modern Flash and Macromedia Flex applications do have the option to stream media and being vector based—are visually scalable, something JavaScript and HTML controls aren’t On the other hand, they require the plug-in to be installed JavaScript in a Web Page and Essential Syntax Applying JavaScript to a web document is very easy; all you need to do is to use the script... of JavaScript and modern JavaScript techniques, including DOM scripting for dynamic behavior and styling, and event handling We’ll then look at essential applications of JavaScript, including data validation, image and window manipulation, and dynamic enhancements for forms and navigation menus Next, I turn your attention to probably the biggest JavaScript- related buzzword of the moment—Ajax Ajax standards... Java to JavaScript The name is confusing though, as there is no real connection between Java and JavaScript although some of the syntax looks similar Java is to JavaScript what Car is to Carpet — From a JavaScript discussion group on Usenet Netscape created the JavaScript language in 1996 and included it in their Netscape Navigator (NN) 2.0 browser via an interpreter that read and executed the JavaScript. .. with JavaScript and allow developers without any scripting knowledge to change the look and feel • Enhance a web document with JavaScript and allow HTML developers to use your functionality by simply adding a CSS class to an element • Use progressive enhancement to make a web document nicer only when and if the user agent allows for it • Use Ajax to bridge the gap between back end and client side,... longer to build something and think it’ll last forever Since the Web is about content and change, it’ll become obsolete if we don’t upgrade our web products constantly and allow other data sources to feed into it or get information from it Enough introductions—you got this book to learn about JavaScript, so let’s start by talking quickly about JavaScript s history and assets before diving right into it... easy to understand and maintain • Write scripts that do not interfere with other JavaScripts • Write scripts that make web sites easier to use without blocking out non -JavaScript users • Write scripts that are independent of the browser or user agent trying to understand them—which means that in some years they will still be usable and won’t rely on obsolete technology • Enhance a web site with JavaScript. .. people, and have some fun along the way! Let’s get on with the fun—keep reading xxiii 6803.book Page xxiv Friday, June 23, 2006 9:05 AM 6803.book Page 1 Friday, June 9, 2006 3:19 PM CHAPTER 1 ■■■ Getting Started with JavaScript T his book is about a scripting language called JavaScript and how to use it in a practical manner After you read it, you’ll be able to • Understand JavaScript syntax and structures... like to thank those who helped me by solving problems and asking for more and more features—my fellow WaSP DOM Scripting Task Force Members, Stuart Colville, Matt Warden, Jens Grochtdreis, Ingo Chao, Volkan Ozcelik, and many others on the evolt list, CSSdiscuss, and my blog comments Thanks to my former colleagues at Agilisys and my current colleagues at Yahoo for testing help and support, and to Good . Heilmann Beginning DOM Scripting and 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. 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. 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