DOM_Scripting_Web_Design_with_JavaScript_and_the_Document_Object_Model_In1UMhl.pdf - Keith DOM Scripting RELATED TITLES DOM SCRIPTING Web Design with

DOM_Scripting_Web_Design_with_JavaScript_and_the_Document_Object_Model_In1UMhl.pdf

This preview shows page 1 out of 364 pages.

You've reached the end of your free preview.

Want to read all 364 pages?

Unformatted text preview: 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. Harness the power of the DOM to create user-controlled animation. Also includes an introduction to Ajax. ou might have heard of the Document Object Model. You will almost certainly have heard of JavaScript. This book explains exactly what these technologies are, where they came from, and what they can do for you. Y 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 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 a collection of useful scripts: it also examines best practices. JavaScript and the Document Object Model are two very powerful technologies that go together like peanut butter and jelly, but if they aren’t used with forethought, the results could be messy. The examples given here will encourage you to think about DOM Scripting in a responsible, user-centric way. 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. DOM Scripting Web Design with JavaScript and the Document Object Model Separate behavior from structure using unobtrusive JavaScript. Add dynamic effects with progressive enhancement. Ensure backwards-compatibility through graceful degradation. S H E LV I N G C AT E G O R Y 1. WEB DESIGN 2. WEB DEVELOPMENT ISBN 1-59059-533-5 53499 Mac/PC compatible US $34.99 Jeremy Keith 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 . 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 . 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 in the Downloads section. Lead Editor Chris Mills Technical Reviewer Jon Stephens Editorial Board Steve Anglin, Dan Appleman, Ewan Buckingham, Gary Cornell, Tony Davis, Jason Gilmore, Jonathan Hassell, Chris Mills, Dominic Shakeshaft, Jim Sumser Associate Publisher Grace Wong Project Manager Beckie Stones Copy Edit Manager Nicole LeClerc Copy Editor Julie M. Smith Assistant Production Director Kari Brooks-Copony Production Editor Linda Marousek Compositor and Artist Katy Freer Proofreader Christy Wagner Indexer John Collin Cover Designer Jeremy Keith and Kurt Krames Manufacturing Director Tom Debolski 5335FM_final.qxd 15/8/05 11:15 am Page iii D E D I C AT I O N For Jessica, my wordridden wife. 5335FM_final.qxd 15/8/05 11:15 am Page v C O N T E N T S AT A G L A N C E 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 . . . . . Syntax. . . . . . . . . . . . Statements . . . . . . . . . Comments . . . . . . . Variables . . . . . . . . . . Data types . . . . . . . Strings . . . . . . . Numbers. . . . . . Boolean values . . Arrays . . . . . . . . . Associative arrays . Operations . . . . . . . . . Arithmetic operators . Conditional statements . . Comparison operators Logical operators . . . Looping statements . . . . while . . . . . . . . . . do...while . . . . . for . . . . . . . . . . . Functions . . . . . . . . . . Variable scope . . Objects . . . . . . . . . . . Native objects . . . . . Host objects . . . . . . What’s next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 16 16 16 18 20 20 21 22 22 24 25 25 27 29 29 30 31 31 32 33 35 36 38 38 39 Chapter 3: The Document Object Model. . . . . . . . . . . . . . 41 D is for document . . . . . . . . Objects of desire. . . . . . . . . Dial M for model . . . . . . . . Nodes . . . . . . . . . . . . element nodes . . . . . text nodes . . . . . . . . attribute nodes . . . . . Cascading Style Sheets . getElementById . . . . . . . getElementsByTagName . . Taking stock . . . . . . . . . . . getAttribute . . . . . . . . . setAttribute . . . . . . . . . What’s next? . . . . . . . . . . . viii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 42 43 45 45 46 46 47 49 50 52 52 54 55 5335FM_final.qxd 15/8/05 11:15 am Page ix CONTENTS Chapter 4: A JavaScript Image Gallery . . . . . . . . . . . . . . . 57 The markup . . . . . . . . . . . . . . . . . . . . The JavaScript . . . . . . . . . . . . . . . . . . . A DOM diversion . . . . . . . . . . . . . . . Finishing the function. . . . . . . . . . . . . Applying the JavaScript . . . . . . . . . . . . . . Event handlers . . . . . . . . . . . . . . . . . Expanding the function . . . . . . . . . . . . . . Introducing childNodes. . . . . . . . . . . . Introducing the nodeType property . . . . . Adding a description in the markup. . . . . Changing the description with JavaScript . . Introducing the nodeValue property . . . . Introducing firstChild and lastChild . . . . . Using nodeValue to update the description What’s next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 61 62 62 63 63 65 66 67 68 69 69 70 70 74 Chapter 5: Best Practices . . . . . . . . . . . . . . . . . . . . . . 77 Please don’t let me be misunderstood Don’t blame the messenger . . . . The Flash mob . . . . . . . . . . . . Question everything . . . . . . . . Graceful degradation . . . . . . . . . . The javascript: pseudo-protocol . . Inline event handlers . . . . . . . . Who cares? . . . . . . . . . . . . . The lessons of CSS . . . . . . . . . . . . Progressive enhancement . . . . . Unobtrusive JavaScript . . . . . . . . . Backwards compatibility . . . . . . . . Browser sniffing . . . . . . . . . . . What’s next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 78 79 80 81 82 82 83 84 85 86 88 90 90 Chapter 6: Image Gallery Revisited. . . . . . . . . . . . . . . . . 93 A quick recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Does it degrade gracefully? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Is the JavaScript unobtrusive? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Adding the event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Checkpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 What’s in a name?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Looping the loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Changing behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Closing it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Share the load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 ix 5335FM_final.qxd 15/8/05 11:15 am Page x CONTENTS Assuming too much . . . . . Fine-tuning . . . . . . . . Keyboard access . . . . . Beware of onkeypress . . Sharing hooks with CSS . DOM Core and HTML-DOM . What’s next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 107 109 110 112 115 117 Chapter 7: Creating Markup on the Fly. . . . . . . . . . . . . . 119 document.write. . . . . . . . . . . . . . innerHTML . . . . . . . . . . . . . . . . Pros and cons . . . . . . . . . . . . DOM methods . . . . . . . . . . . . . . createElement . . . . . . . . . . . . appendChild . . . . . . . . . . . . . createTextNode . . . . . . . . . . . A more complex combination . Revisiting the image gallery . . . . . . . insertBefore . . . . . . . . . . . . . Writing the insertAfter function Using the insertAfter function . The finished image gallery . . . . . Summary . . . . . . . . . . . . . . . . . What’s next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 122 125 125 126 127 128 130 132 135 136 137 138 142 143 Chapter 8: Enhancing Content . . . . . . . . . . . . . . . . . . 145 What not to do . . . . . . . . . . . . . . . . . . . . Making the invisible visible . . . . . . . . . . . . . The content . . . . . . . . . . . . . . . . . . . . . . HTML or XHTML? . . . . . . . . . . . . . . . . The markup . . . . . . . . . . . . . . . . . . . . . . The CSS . . . . . . . . . . . . . . . . . . . . . . . . The JavaScript. . . . . . . . . . . . . . . . . . . . . Displaying abbreviations . . . . . . . . . . . . Writing the displayAbbreviations function Creating the markup . . . . . . . . . . . . A browser bomb . . . . . . . . . . . . . . Displaying citations . . . . . . . . . . . . . . . Writing the displayCitations function . . . Displaying access keys . . . . . . . . . . . . . . The markup . . . . . . . . . . . . . . . . . The JavaScript . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . What’s next? . . . . . . . . . . . . . . . . . . . . . x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 147 148 149 149 151 152 152 153 155 161 ...
View Full Document

  • Fall '19
  • Web Design, World Wide Web, Document Object Model, Jeremy Keith

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes