DOM Scripting: Web Design with JavaScript and the Document Object Model

337 Pages·2010·8.079 MB·English

by  Jeremy Keith, Jeffrey Sambells

Second
Edition
D
O
M

S
C
R
I
P
T
I
N
G

DOM Scripting
Web Design with JavaScript and the
Document Object Model
Second Edition

■ ■ ■
Jeremy Keith
with Jeffrey Sambells

i
DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition
Copyright © 2010 by Jeremy Keith with Jeffrey Sambells
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-4302-3389-3
ISBN-13 (electronic): 978-1-4302-3390-9
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and
images only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if
they are not identified as such, is not to be taken as an expression of opinion as to whether or not
they are subject to proprietary rights.
Publisher and President: Paul Manning
Lead Editor: Ben Renow-Clarke
Technical Reviewer: Rob Drimmie
Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan
Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey
Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt
Wade, Tom Welsh
Coordinating Editors: Candace English
Copy Editor: Jim Compton and Marilyn Smith
Compositor: MacPS, LLC
Indexer: Toma Mulligan
Artist: April Milne
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring
Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail
[email protected], or visit www.springeronline.com.
For information on translations, please e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional
use. eBook versions and licenses are also available for most titles. For more information, reference
our Special Bulk Sales–eBook Licensing web page at www.apress.com/info/bulksales.
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.
ii
For Jessica, my wordridden wife
—Jeremy

For Stephanie, Addison, and Hayden, always by my side
—Jeffrey
iii
Contents at a Glance

■Contents ................................................................................................................ v(cid:1)
■About the Authors .............................................................................................. xiii(cid:1)
■About the Technical Reviewer ............................................................................ xiv(cid:1)
■Acknowledgments ............................................................................................... xv(cid:1)
■Introduction ....................................................................................................... xvi
■Chapter 1: A Brief History of JavaScript ............................................................... 1(cid:1)
■Chapter 2: JavaScript Syntax ................................................................................ 7(cid:1)
■Chapter 3: The Document Object Model .............................................................. 31(cid:1)
■Chapter 4: A JavaScript Image Gallery ............................................................... 45(cid:1)
■Chapter 5: Best Practices .................................................................................... 59(cid:1)
■Chapter 6: The Image Gallery Revisited .............................................................. 73(cid:1)
■Chapter 7: Creating Markup on the Fly ............................................................... 95(cid:1)
■Chapter 8: Enhancing Content ........................................................................... 123(cid:1)
■Chapter 9: CSS-DOM .......................................................................................... 149(cid:1)
■Chapter 10: An Animated Slideshow ................................................................. 175(cid:1)
■Chapter 11: HTML5 ............................................................................................ 205(cid:1)
■Chapter 12: Putting It All Together .................................................................... 227(cid:1)
■Appendix: DOM Scripting Libraries ................................................................... 279(cid:1)
■Index ................................................................................................................. 303(cid:1)
iv
Contents

■Contents at a Glance ............................................................................................ iv(cid:1)
■About the Authors .............................................................................................. xiii(cid:1)
■About the Technical Reviewer ............................................................................ xiv(cid:1)
■Acknowledgments ............................................................................................... xv(cid:1)
■Introduction ........................................................................................................ xvi

■Chapter 1: A Brief History of JavaScript ............................................................... 1(cid:1)
The origins of JavaScript ................................................................................................ 1(cid:1)
The Document Object Model ........................................................................................... 2(cid:1)
The browser wars ........................................................................................................... 3(cid:1)
The D word: DHTML ............................................................................................................................... 3(cid:1)
Clash of the browsers ............................................................................................................................ 3(cid:1)
Raising the standard ....................................................................................................... 4(cid:1)
Thinking outside the browser ................................................................................................................ 4(cid:1)
The end of the browser wars ................................................................................................................. 4(cid:1)
A new beginning .................................................................................................................................... 5(cid:1)
What’s next? ................................................................................................................... 5(cid:1)
■Chapter 2: JavaScript Syntax ................................................................................ 7(cid:1)
What you’ll need ............................................................................................................. 7(cid:1)
Syntax ............................................................................................................................. 9(cid:1)
Statements ............................................................................................................................................. 9(cid:1)
Comments ............................................................................................................................................ 10(cid:1)
Variables .............................................................................................................................................. 10(cid:1)
v
■ CONTENTS
Data types ............................................................................................................................................ 12(cid:1)
Arrays ................................................................................................................................................... 14(cid:1)
Objects ................................................................................................................................................. 16(cid:1)
Operations ..................................................................................................................... 17(cid:1)
Arithmetic operators ............................................................................................................................ 17(cid:1)
Conditional statements ................................................................................................. 19(cid:1)
Comparison operators .......................................................................................................................... 20(cid:1)
Logical operators ................................................................................................................................. 21(cid:1)
Looping statements ...................................................................................................... 22(cid:1)
The while loop ...................................................................................................................................... 22(cid:1)
The for loop .......................................................................................................................................... 24(cid:1)
Functions ...................................................................................................................... 24(cid:1)
Objects .......................................................................................................................... 27(cid:1)
Native objects ...................................................................................................................................... 28(cid:1)
Host objects ......................................................................................................................................... 29(cid:1)
What’s next? ................................................................................................................. 29(cid:1)
■Chapter 3: The Document Object Model .............................................................. 31(cid:1)
D is for document .......................................................................................................... 31(cid:1)
Objects of desire ........................................................................................................... 31(cid:1)
Dial M for model ............................................................................................................ 32(cid:1)
Nodes ............................................................................................................................ 33(cid:1)
Element nodes ..................................................................................................................................... 34(cid:1)
Text nodes ............................................................................................................................................ 34(cid:1)
Attribute nodes ..................................................................................................................................... 34(cid:1)
Cascading Style Sheets ........................................................................................................................ 35(cid:1)
Getting Elements .................................................................................................................................. 37(cid:1)
Taking stock ......................................................................................................................................... 41(cid:1)
Getting and Setting Attributes ....................................................................................... 41(cid:1)
getAttribute .......................................................................................................................................... 41(cid:1)
vi
■ CONTENTS
setAttribute .......................................................................................................................................... 43(cid:1)
What’s next? ................................................................................................................. 44(cid:1)
■Chapter 4: A JavaScript Image Gallery ............................................................... 45(cid:1)
The markup ................................................................................................................... 45(cid:1)
The JavaScript .............................................................................................................. 47(cid:1)
A DOM diversion ................................................................................................................................... 48(cid:1)
Finishing the function .......................................................................................................................... 49(cid:1)
Applying the JavaScript ................................................................................................ 49(cid:1)
Event handlers ..................................................................................................................................... 49(cid:1)
Expanding the function ................................................................................................. 51(cid:1)
Introducing childNodes ........................................................................................................................ 51(cid:1)
Introducing the nodeType property ...................................................................................................... 52(cid:1)
Adding a description in the markup ..................................................................................................... 53(cid:1)
Changing the description with JavaScript ........................................................................................... 54(cid:1)
Introducing the nodeValue property ..................................................................................................... 54(cid:1)
Introducing firstChild and lastChild ...................................................................................................... 55(cid:1)
Using nodeValue to update the description ......................................................................................... 55(cid:1)
What’s next? ................................................................................................................. 58(cid:1)
■Chapter 5: Best Practices .................................................................................... 59(cid:1)
Mistakes of the past ..................................................................................................... 59(cid:1)
Don’t blame the messenger ................................................................................................................. 59(cid:1)
The Flash mob ...................................................................................................................................... 60(cid:1)
Question everything ............................................................................................................................. 60(cid:1)
Graceful degradation .................................................................................................... 61(cid:1)
The javascript: pseudo-protocol .......................................................................................................... 62(cid:1)
Inline event handlers ............................................................................................................................ 62(cid:1)
Who cares? .......................................................................................................................................... 63(cid:1)
The lessons of CSS ....................................................................................................... 63(cid:1)
Separation of structure and style ......................................................................................................... 63(cid:1)
vii
■ CONTENTS
Progressive enhancement ................................................................................................................... 64(cid:1)
Unobtrusive JavaScript ................................................................................................. 65(cid:1)
Backward compatibility ................................................................................................ 67(cid:1)
Object detection ................................................................................................................................... 67(cid:1)
Browser sniffing ................................................................................................................................... 68(cid:1)
Performance considerations ......................................................................................... 69(cid:1)
Minimizing DOM access and markup ................................................................................................... 69(cid:1)
Assembling and placing scripts ........................................................................................................... 70(cid:1)
Minification .......................................................................................................................................... 70(cid:1)
What’s next? ................................................................................................................. 71(cid:1)
■Chapter 6: The Image Gallery Revisited .............................................................. 73(cid:1)
A quick recap ................................................................................................................ 73(cid:1)
Does it degrade gracefully? .......................................................................................... 74(cid:1)
Is the JavaScript unobtrusive? ..................................................................................... 75(cid:1)
Adding the event handler ..................................................................................................................... 75(cid:1)
Share the load ...................................................................................................................................... 80(cid:1)
Assuming too much ...................................................................................................... 82(cid:1)
Fine-tuning .................................................................................................................... 84(cid:1)
Keyboard access ........................................................................................................... 86(cid:1)
Beware of onkeypress ......................................................................................................................... 87(cid:1)
Sharing hooks with CSS ................................................................................................ 88(cid:1)
DOM Core and HTML-DOM ............................................................................................ 91(cid:1)
What’s next? ................................................................................................................. 92(cid:1)
■Chapter 7: Creating Markup on the Fly ............................................................... 95(cid:1)
Some old-school methods ............................................................................................ 95(cid:1)
document.write .................................................................................................................................... 95(cid:1)
innerHTML ............................................................................................................................................ 97(cid:1)
DOM methods ............................................................................................................. 100(cid:1)
createElement .................................................................................................................................... 101(cid:1)
viii