精精通JavaScript(英文版)

1、This technique goes way beyond simple fade-in DHTML, however. The ability to knowwhether JavaScript is disabled/enabled and to apply styles is a huge win for careful webdevelopers.Event AccessibilityThe final piece to take into consideration when developing a purely unobtrusive web applica-tion is t

2、o make sure that your events will work even without the use of a mouse. By doing this,you help two groups of people: those in need of accessibility assistance (vision-impaired users),and people who dont like to use a mouse. (Sit down one day, disconnect your mouse fromyour computer, and learn how to

3、 navigate the Web using only a mouse. Its a real eye-openingexperience.)To make your JavaScript events more accessible, anytime you use the click, mouseover,and mouseout events, you need to strongly consider providing alternative nonmouse bind-ings. Thankfully there are easy ways to quickly remedy t

4、his situation:Click event: One smart move on the part of browser developers was to make the clickevent work whenever the Enter key is pressed. This completely removes the need to pro-vide an alternative to this event. One point to note, however, is that some developers liketo bind click handlers to

5、submit buttons in forms to watch for when a user submits a webpage. Instead of using that event, the developer should bind to the submit event on theform object, a smart alternative that works reliably.Mouseover event:When navigating a web page using a keyboard, youre actually changingthe focus to d

6、ifferent elements. By attaching event handlers to both the mouseover andfocus events you can make sure that youll have a comparable solution for both keyboardand mouse users.Mouseout event: Like the focus event for the mouseover event, the blur event occurswhenever the user s focus moves away from a

7、n element. You can then use the blur eventas a way to simulate the mouseout event with the keyboard.Now that you know which event pairs behave the way you want them to, you canrevisit Listing 6-3 to build a hoverlike effect that works, even without a mouse, as shown in Listing 6-17.Listing 6-17. Att

8、aching Pairs of Events to Elements to Allow for Accessible Web Page Use/ Find all the elements, to attach the event handlers to themvar li = document.getElementsByTagName(a);for ( var i = 0; i a.length; i+ ) / Attach a mouseover and focus event handler to the element,/ which changes the s background

9、 to blue when the user either/ mouses over the link, or focuses on it (using the keyboard)ai.onmouseover = ai.onfocus = function() this.style.backgroundColor = blue;CHAPTER 6 n EVENTS 1327273ch06final.qxd 11/16/06 8:16 AM Page 132this print for content onlysize & color not accurate spine = 0.893 384

10、 page countBOOKS FOR PROFESSIONALS BY PROFESSIONALSResigPro JavaScriptTechniquesTHE EXPERTS VOICE IN WEB DEVELOPMENTJohn ResigProJavaScriptTechniquesISBN 1-59059-727-39 781590 597279544996 89253 59727 9CompanioneBook AvailableReal-world JavaScript techniques for the modern, professional web develope

11、rSOURCE CODE ONLINECompanion eBookSee last page for details on $10 eBook versionTHE APRESS ROADMAPBeginning XMLwith DOM and Ajax:From Novice to ProfessionalBeginning JavaScript withDOM Scripting and Ajax:From Novice to ProfessionalBeginning CSSWeb Development:From Novice to ProfessionalFoundations o

12、f AjaxPro JavaScriptTechniquesPro CSS TechniquesAjax and REST Recipes:A Problem-Solution ApproachAjax Patternsand Best PracticesPro JavaScriptTechniquesDear Reader,If one thing is apparent in modern web applications, it is that JavaScriptprogramming is a required skill, demanding knowledgeable devel

13、opers. Theproblem is that up until just recently, JavaScript has been treated as a toy lan-guagewhen it is anything but.In this book I show you how modern JavaScript development works,emphasizing the practical skills necessary to build professional, dynamic webapplications.I start with some of the f

14、undamentals of object-oriented JavaScript, bestpractices, and debugging and testing, and then move on to DOM scripting andevents and how they allow JavaScript, CSS, and HTML to interact dynamically.Youll take that knowledge and use it to build page-enhancing effects and inter-esting interactions. Ne

15、xt, I provide a detailed exploration of the concepts behindAjax and how it can improve the user experience. Finally, I give you a look at thefuture of JavaScriptwhere is it going from here? At the end of the book, severalappendixes are provided so you can look up syntax quickly and easily.Throughout

16、 this book I provide a number of case studies and sets of reusablefunctions that you can follow along with and use in your own applications todemonstrate the concepts covered. This includes everything from image galleriesand autocomplete search boxes to a full Ajax wiki application. Additionally, Ip

17、rovide a number of examples that utilize modern JavaScript libraries such asPrototype, Scriptaculous, and others.I wrote this book to get any programmer with simple JavaScript experiencecompletely up to date with the latest techniques behind the technology. I hopethat youll gain a greater understand

18、ing and learn everything that you need tobecome a successful JavaScript developer. John ResigJohn ResigPro JavaScriptTechniques7273fmfinal.qxd 11/16/06 8:02 AM Page iPro JavaScript TechniquesCopyright 2006 by John ResigAll rights reserved. No part of this work may be reproduced or transmitted in any

19、 form or by any means,electronic or mechanical, including photocopying, recording, or by any information storage or retrievalsystem, without the prior written permission of the copyright owner and the publisher.ISBN-13 (pbk): 978-1-59059-727-9ISBN-10 (pbk): 1-59059-727-3Printed and bound in the Unit

20、ed States of America 9 8 7 6 5 4 3 2 1Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrenceof a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademarkowner, with no intention of infringement of the trademark.J

21、ava and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc., in theUS and other countries. Apress, Inc., is not affiliated with Sun Microsystems, Inc., and this book was writ-ten without endorsement from Sun Microsystems, Inc. Lead Editor: Chris MillsTechnical Revi

22、ewer: Dan WebbEditorial 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 WadeProject Manager: Tracy Brown CollinsCopy Edit Manager: Nicole FloresCopy E

23、ditor: Jennifer WhippleAssistant Production Director: Kari Brooks-CoponyProduction Editor: Laura EstermanCompositor: Linda Weidemann, Wolf Creek PressProofreader: April EddyIndexer: Broccoli Information ManagementArtist: April MilneCover Designer: Kurt KramesManufacturing Director: Tom DebolskiDistr

24、ibuted 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-nyspringer-sbm , or visit :/ springeronline . For information on translations, please contact Apress directly at 2560 Ninth Str

25、eet, Suite 219, Berkeley,CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail infoapress , or visit :/ apress . The information in this book is distributed on an “as is basis, without warranty. Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apr

26、ess shall have anyliability to any person or entity with respect to any loss or damage caused or alleged to be caused directlyor indirectly by the information contained in this work. The source code for this book is available to readers at :/ apress in the Source Code/Download section and on the boo

27、ks web site at :/. 7273fmfinal.qxd 11/16/06 8:02 AM Page iiContents at a GlanceAbout the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvAbout the Technical Reviewer . . . . . . . . . . . . . . . . .

28、. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviiAcknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xixPART 1 n n n Introducing Modern JavaScriptn CHAPTER 1 Modern JavaScript Program

29、ming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3PART 2 n n n Professional JavaScript Developmentn CHAPTER 2 Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19n CHAPTER 3 Creating Reusable Code . . . . . . . . . . . . . . . . . .

30、. . . . . . . . . . . . . . . . . . . . . 39n CHAPTER 4 Tools for Debugging and Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59PART 3 n n n Unobtrusive JavaScriptn CHAPTER 5 The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77n C

31、HAPTER 6 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111n CHAPTER 7 JavaScript and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135n CHAPTER 8 Improving Forms . . . . . . . . . . . .

32、. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169n CHAPTER 9 Building an Image Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191PART 4 n n n Ajaxn CHAPTER 10 Introduction to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33、. . . . . . . . . . 215n CHAPTER 11 Enhancing Blogs with Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233n CHAPTER 12 Autocomplete Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247n CHAPTER 13 An Ajax Wiki . . . . . . . . . .

34、 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265iii7273fmfinal.qxd 11/16/06 8:02 AM Page iiiPART 5 n n n The Future of JavaScriptn CHAPTER 14 Where Is JavaScript Going? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287PART 6 n n n Appendixe

35、sn APPENDIX A DOM Reference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307n APPENDIX B Events Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325n APPENDIX C The Browsers . . . . . . . . . . . . . .

36、 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345n INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3497273fmfinal.qxd 11/16/06 8:02 AM Page ivContentsAbout the Author . . . . .

37、. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvAbout the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviiAcknowledgments . . . . . . . . . . . .

38、 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xixPART 1 n n n Introducing Modern JavaScriptn CHAPTER 1 Modern JavaScript Programming. . . . . . . . . . . . . . . . . . . . . . . . . . . 3Object-Oriented JavaScript . . . . . . . . . . . . . . .

39、 . . . . . . . . . . . . . . . . . . . . . . . . . 3Testing Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Packaging for Distribution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Unobtrusive DOM Scripti

40、ng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9JavaScr

41、ipt and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42、. . . . . . . . . . . . . . . . 13Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16PART 2 n n n Professional JavaScript Developmentn CHAPTER 2 Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43、. . 19Language Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Function Overloading and Type-Checking. . . . . . . . . . . . . . . . . .

44、 . . . . 21Scope. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Closures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Context. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

45、 . . . . . . . . . . . . . . . . . . . . . . . 30v7273fmfinal.qxd 11/16/06 8:02 AM Page vObject-Oriented Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46、. . . . . 32Object Creation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38n CHAPTER 3 Creating Reusable Code . . . . . . . . . . . . . .

47、 . . . . . . . . . . . . . . . . . . . . . . 39Standardizing Object-Oriented Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Prototypal Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Classical Inheritance . . . . . . . . . . . . . . .

48、 . . . . . . . . . . . . . . . . . . . . . . . . . 40The Base Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44The Prototype Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Packaging . . . . . . . . . . . . . . .

49、. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Namespacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Cleaning Up Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Compression. .

50、 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54Distribution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51、 . . . . . . . . . . . . . . . 58n CHAPTER 4 Tools for Debugging and Testing . . . . . . . . . . . . . . . . . . . . . . . . . . 59Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Error Console . . . . . . . . . . . . . . . . . . .

52、 . . . . . . . . . . . . . . . . . . . . . . . . . . . 59DOM Inspectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Firebug. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Venkman . . . . . . . . .

53、 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68JSUnit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54、. . . . . . . . . . 69J3Unit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Test.Simple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Summary . . . . . . . . . . . . . . . . . . . . . . . .

55、 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73nCONTENTS vi7273fmfinal.qxd 11/16/06 8:02 AM Page viPART 3 n n n Unobtrusive JavaScriptn CHAPTER 5 The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77An Introduction to the Document Object Model . .

56、 . . . . . . . . . . . . . . . . . . . . 77Navigating the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Handling White Space in the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Simple DOM Navigation . . . . . . . . . . . . . . . . .

57、. . . . . . . . . . . . . . . . . . . . 82Binding to Every HTML Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84Standard DOM Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Waiting for the HTML DOM to Load . . . . . . . . . . . . . . . . . .

58、. . . . . . . . . . . . . . 87Waiting for the Page to Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Waiting for Most of the DOM to Load . . . . . . . . . . . . . . . . . . . . . . . . . . 87Figuring Out When the DOM Is Loaded . . . . . . . . . . . . . . . . . . . . . . . .

59、 88Finding Elements in an HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Finding Elements by Class Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Finding Elements by CSS Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92XPath . . . . . . . .

60、. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Getting the Contents of an Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Getting the Text Inside an Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Getting the HT