Keith DOM Scripting: RELATED TITLES DOM SCRIPTING Web Design with JavaScript and the Document Object Model Learn how to: Apply dynamic behavior to your pages without inserting JavaScript in your markup. Write scripts that degrade gracefully when JavaScript isn’t available. Use web standards to ensure cross-browser compatibility. DOM Scripting Harness the power of the DOM to create user-controlled animation. Also includes an introduction to Ajax. Web Design with JavaScript and the Document Object Model ou might have heard of the Document Object Model. You will almost Ycertainly have heard of JavaScript. This book explains exactly what these technologies are, where they came from, and what they can do for you. You don’t need to be a programmer to understand DOM Scripting. In fact, this book is aimed specifically at web designers. Programming concepts are illustrated with easy-to-follow tutorials to teach you the ropes of JavaScript Separate behavior from structure using and the DOM as painlessly as possible. You will build practical, real-world examples that you can use on your websites. But this book is more than just unobtrusive JavaScript. a collection of useful scripts: it also examines best practices. JavaScript and the Document Object Model are two very powerful technologies that go Add dynamic effects with progressive together like peanut butter and jelly, but if they aren’t used with forethought, enhancement. the results could be messy. The examples given here will encourage you to think about DOM Scripting in a responsible, user-centric way. Ensure backwards-compatibility through graceful degradation. If you’re already using web standards like CSS and XHTML, you’ll appreciate the enhancements that DOM Scripting can offer. Just as CSS allows you to keep your presentation separate from your structure, you can use unobtrusive JavaScript to add dynamic behavior to your web pages without messing with your markup or sacrificing usability. This book is your indispensable guide. SHELVING CATEGORY 1. WEB DESIGN 2. WEB DEVELOPMENT ISBN 1-59059-533-5 Mac/PC compatible 53499 US $34.99 Jeremy Keith www.friendsofed.com http://domscripting.com Foreword by Dave Shea 6 89253 59533 6 9 781590 595336 this print for reference only—size & color not accurate spine = 0.856" 368 page count 5335FM_final.qxd 15/8/05 11:15 am Page i DOM Scripting Web Design with JavaScript and the Document Object Model Jeremy Keith 5335FM_final.qxd 15/8/05 11:15 am Page ii DOM Scripting Web Design with JavaScript and the Document Object Model Copyright © 2005 by Jeremy Keith 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 (pbk): 1-59059-533-5 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 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 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 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 freely available to readers at www.friendsofed.com in the Downloads section. Lead Editor Copy Editor Chris Mills Julie M. Smith Technical Reviewer Assistant Production Director Jon Stephens Kari Brooks-Copony Editorial Board Production Editor Steve Anglin, Dan Appleman, Linda Marousek Ewan Buckingham, Gary Cornell, Tony Davis, Jason Gilmore, Compositor and Artist Jonathan Hassell, Chris Mills, Katy Freer Dominic Shakeshaft, Jim Sumser Proofreader Associate Publisher Christy Wagner Grace Wong Indexer Project Manager John Collin Beckie Stones Cover Designer Copy Edit Manager Jeremy Keith and Kurt Krames Nicole LeClerc Manufacturing Director Tom Debolski 5335FM_final.qxd 15/8/05 11:15 am Page iii DEDICATION For Jessica, my wordridden wife. 5335FM_final.qxd 15/8/05 11:15 am Page v CONTENTS AT A GLANCE Foreword . xv About the Author . xvii About the Technical Reviewer . xviii About the Foreword Writer . xix Acknowledgments . xx Introduction . xxi Chapter 1: A Brief History of JavaScript. 3 Chapter 2: JavaScript Syntax . 13 Chapter 3: The Document Object Model. 41 Chapter 4: A JavaScript Image Gallery . 57 Chapter 5: Best Practices . 77 Chapter 6: Image Gallery Revisited. 93 5335FM_final.qxd 15/8/05 11:15 am Page vi Chapter 7: Creating Markup on the Fly. 119 Chapter 8: Enhancing Content . 145 Chapter 9: CSS-DOM . 177 Chapter 10: Animated Slideshow . 207 Chapter 11: Putting It All Together . 243 Chapter 12: The Future of DOM Scripting . 293 Reference . 311 Index . 329 vi 5335FM_final.qxd 15/8/05 11:15 am Page vii CONTENTS Foreword . xv About the Author . xvii About the Technical Reviewer . xviii About the Foreword Writer . xix Acknowledgments . xx Introduction . xxi Chapter 1: A Brief History of JavaScript. 3 The origins of JavaScript . 4 What is a Document Object Model? . 5 The browser wars . 6 The D word: DHTML . 6 Clash of the browsers . 7 Raising the standard . 7 Thinking outside the browser . 8 The end of the browser wars . 8 A new beginning . 9 What’s next? . 10 5335FM_final.qxd 15/8/05 11:15 am Page viii CONTENTS Chapter 2: JavaScript Syntax . 13 What you’ll need . 14 Syntax. 16 Statements . 16 Comments . 16 Variables . 18 Data types . 20 Strings . 20 Numbers. 21 Boolean values . 22 Arrays . 22 Associative arrays . 24 Operations . 25 Arithmetic operators . 25 Conditional statements . 27 Comparison operators . 29 Logical operators . 29 Looping statements . 30 while . 31 do...while . 31 for . 32 Functions . 33 Variable scope . 35 Objects . 36 Native objects . 38 Host objects . 38 What’s next? . 39 Chapter 3: The Document Object Model. 41 D is for document . 42 Objects of desire. 42 Dial M for model . 43 Nodes . 45 element nodes . 45 text nodes . 46 attribute nodes . 46 Cascading Style Sheets . 47 getElementById . 49 getElementsByTagName . 50 Taking stock . 52 getAttribute . 52 setAttribute . ..