AdvancedDOMScripting

Advanced DOM Scripting,高级DOM编程8563FM,qxd6/25/0711:01 AM Page1AdvanCED DOM ScriptingDynamic Web Design TechniquesJeffrey SambellsWith Aaron gustafsonfriendsofDESIGNER TO DE E RTMan Apress company8563FM.qxd6/25/0711:01 AM Page11AdvanCED DOM ScriptingDynamic Web Design TechniquesCopyright 2007 by Jeffrey Sambells, Aaron GustafsonAll rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical.ncluding photocopying, recording, or by any information storage or retrieval system, without the prior writtenpermission of the copyright owner and the publisherISBN-13(pbk):978-1-59059856-6SBN-10(pbk):1-59059856-3Printed and bound in the united states of america 987654321Trademarked 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 ofnfringement of the trademarkDistributed to the book trade worldwide by Springer-Verlag New York, InC, 233 Spring Street, 6th Floor, New York, NY 10013Phone1-800-springer,fax201-348-4505,e-mailorders-ny@springer-sbm.comorvisitwww.springeronline.comFor information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705Phone510-549-5930,fax510-549-5939,e-mailinfo@apress.comorvisitwww.apress.comThe information in this book is distributed on an"as is"basis, without warranty. Although every precaution has been taken in thepreparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to anyloss or damage caused or alleged to be caused directly or indirectly by the information contained in this workThesourcecodeforthisbookisfreelyavailabletoreadersatwww.friendsofed.cominthedownloadssectionLead editor Senior Production editorChris mills Laura CheuTechnical Reviewers CompositorCameron Turner, victor Sumner Dina QuanEditorial board ArtistSteve Anglin, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Kinetic Publishing Services, LLCJason Gilmore, Jonathan Hassell, Chris Mills, Matthew Moodie,Jeffrey Pepper, Ben Renow-Clarke, Dominic Shakeshaft, ProofreaderMatt Wade, Tom Welsh Liz WelchProject MKylie Johnston Broccoli Information ManagementCopy edit MaagnerNicole Flores Bruce TangCopy editoInterior and Cover desiLang Kurt KrAssistant Production Director Manufacturing DirectorKari Brooks-Copony Tom Debolski8563FM qxd 6/25/07 11: 01 AM Page iiiFor Stephanie and Addison, thanks for smilingeffrey cambellTo my soul mate, Kelly.一 Aaron gustafson8563FM,qxd6/25/0711:01 AM Page1vCONTENTS AT A GLANCEAbout the authorsAbout the technical reviewersAbout the Cover Image designerAcknowledgmentsXVIlIntroductionPART ONE DOM SCRIPTING IN DETAILChapter 1 Do It Right with Best PracticesChapter 2 Creating Your Own Reusable Objects51Chapter 3 Understanding the DOM2 Core and DOM2 HTML89Chapter 4 Responding to User Actions and Events149Chapter 5 Dynamically Modifying Style and CascadingStyle Sheets203Chapter 6 Case Study: A Photo Cropping and resizing Tool249PART TWO COMMUNICATING OUTSIDE THE BROWSERChapter 7 Adding Ajax to the Mix285Chapter 8 Case Study: Enabling Asynchronous File Uploadswith Progress Indicators3458563FM qxd 6/25/07 11: 01 AM Page v-bPART THREE SOME GREAT SOURCEChapter 9 Using Libraries to Increase Productivity375Chapter 10 Adding Effects to Enhance User Experience405Chapter 11 Mashups Galore! Using APls to Add Maps, Searching,and much more455Chapter 12 Case Study: Style Your select with the DOM507Index5558563FM axd 6/25/07 11: 01 AM Page viCONTENTSAbout the authorsAbout the technical reviewersAbout the Cover Image designerAcknowledgmentsXVIlIntroductionPART ONE DOM SCRIPTING IN DETAILChapter 1 Do It Right with Best PracticesUnobtrusive and progressive enhancementPutting JavaScript to workSeparating your behavior from your structure·6How to include javaScript the right wayThat javascript: prefix8Don't version check!4Use capability detectionhen browser version sniffing is OK16Degrade gracefully for guaranteed accessibility16Dont require javaScript for content-period6Plan for reuse with namespacesSimplify things with reusable objects19Beginning the aDs library.20The ADs is Compatible method21The ADSso method22The ADS.addEvento and aDs remove evento methods24The ADs. getElements By ClassNameo method26The ADs toggle display method28The ADs. insertAftero method28The ADs remove Children and ADS prepend childe methods29Get your hands dirty.308563FM axd 6/25/07 11: 01 AM Page viiCONTENTSCommon gotchas in the JavaScript syntax30Case sensitivity30Single vs double quotesBreaking lines31Optional semicolons and parentheses32Overloading(not really).33Anonymous functions33Scope resolution and closures34Iterating over objects.39Referencing vs calling a function(missing parentheses)40A practical example: WYSIWYG JavaScript rollover redux40Summar48Chapter 2 Creating Your Own Reusable Objects51What's in anInheritance53Understanding object members53Everything,'s in the window object.56Making it all possible with scope and closureCreating your own objects60One becomes many: creating the constructor6Adding static methods63Adding public methods to the prototype64Controlling access with private and privileged members65Do public, private, privileged, and static really matter?The object literal.68What is this?71Redefining your context with callo and apply o73try, catch(, and exceptions.76A practical example: your own debugging log78Why use a JavaScript logging object?78The myLoggero object78The myLogger create Window method80The myLogger.write RawO method82The myLogger write and myLogger header methods85ummaryChapter 3 Understanding the DOM2 Core and DOM2 HTML89The dom, not javascript, is your document·90Objects and interfaces90Levels of the dom91DOM Level o91DOM Level 191Level 2Level 392Which level is correct fo938563FM axd 6/25/07 11: 01 AM Page viiiCONTENCreating a sample documentCreating the dom file96Choosing a browser98The dom core.100The importance of inheritance in the dom102The core node object103Node names, values, and types103Node parents, children, and siblings108Node attributesThe node owner Document property113Checking for children and attributes114Manipulating your DOM node tree115Duplicating and moving a node117The Core element object119Manipulating Element attributes119ocating Element objects within Element objects120The core document object120The document documentElement propertyCreating nodes with document methodsLocating elements with Document methods122Traversing and iterating the dom tree122DOM HTM125The dom2 hTML htmldocument object126The htML htmlelement object127A practical example: converting hand-coded Html to dom code127The dom generation tool HTML file.128Testing with an example html fragment130Adding to the ads library131The generateDOM object framework133The encoded method133The checkForVariableo method134The generate method134The processNodeo and processAttribute o methods136Summary146Chapter 4 Responding to User Actions and events149DOM2 Events150Types of events.151Object eventsThe load and unload events151The abort and error events152The resize event153The scroll event153Mouse movement events153Mouse click events156Keyboard events159