Thực hành Javascript qua từng bước-JavaScript Step by Step

JavaScript Step by Step, Second Edition Steve Suehring D ow n lo a d f ro m W o w ! e B o o k < w w w .w o w e b o o k. co m > Published with the authorization of Microsoft Corporation by: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, California 95472 Copyright © 2010 Steve Suehring Complying with all applicable copyright laws is the responsibility of the user. All rights reserved. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without express written permission of O’Reilly Media, Inc. Printed and bound in the United States of America. 1 2 3 4 5 6 7 8 9 M 5 4 3 2 1 0 Microsoft Press titles may be purchased for educational, business or sales promotional use. Online editions are also available for most titles ( For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com. Visit our website at microsoftpress.oreilly.com. Send comments to mspinput@microsoft.com. Microsoft, Microsoft Press, ActiveX, Excel, FrontPage, Internet Explorer, PowerPoint, SharePoint, Webdings, Windows, and Windows 7 are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Other product and company names mentioned herein may be the trademarks of their respective owners. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, prod- uct, domain name, e-mail address, logo, person, place, or event is intended or should be inferred. This book expresses the author’s views and opinions. The information contained in this book is provided without any express, statutory, or implied warranties. Neither the author, O’Reilly Media, Inc., Microsoft Corporation, nor their respective resellers or distributors, will be held liable for any damages caused or alleged to be caused either directly or indirectly by such information. Acquisitions and Development Editor: Russell Jones Production Editor: Holly Bauer Production Services: Online Training Solutions, Inc. Technical Reviewer: Michael Bazarewsky Indexing: Potomac Indexing, LLC Cover: Karen Montgomery Illustrator: Robert Romano 978-0-735-64552-3 To Chris —Steve Suehring D ow n lo a d f ro m W o w ! e B o o k < w w w .w o w e b o o k. co m > v Contents at a Glance Part I JavaWhat? The Where, Why, and How of JavaScript 1 JavaScript Is More Than You Might Think . . . . . . . . . . . . . . . . . . . . 3 2 Developing in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3 JavaScript Syntax and Statements . . . . . . . . . . . . . . . . . . . . . . . . . 49 4 Working with Variables and Data Types . . . . . . . . . . . . . . . . . . . . 61 5 Using Operators and Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Part II Applying JavaScript 6 Controlling Flow with Conditionals and Loops . . . . . . . . . . . . . 119 7 Working with Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 8 Objects in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 9 The Browser Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Part III Integrating JavaScript into Design 10 The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 11 JavaScript Events and the Browser . . . . . . . . . . . . . . . . . . . . . . . . 223 12 Creating and Consuming Cookies . . . . . . . . . . . . . . . . . . . . . . . . 239 13 Working with Images in JavaScript . . . . . . . . . . . . . . . . . . . . . . . 253 14 Using JavaScript with Web Forms . . . . . . . . . . . . . . . . . . . . . . . . 275 15 JavaScript and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 16 JavaScript Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Part IV AJAX and Server-Side Integration 17 JavaScript and XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 18 JavaScript Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 19 A Touch of AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 20 A Bit Deeper into AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367 vi Contents at a Glance Part V jQuery 21 An Introduction to JavaScript Libraries and Frameworks . . . . . 383 22 An Introduction to jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 23 jQuery Effects and Plug-Ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 vii Table of Contents Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Introducing JavaScript Step by Step, Second Edition . . . . . . . . . . . . . . . . . . . . .xix Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Part I JavaWhat? The Where, Why, and How of JavaScript 1 JavaScript Is More Than You Might Think . . . . . . . . . . . . . . . . . . . . 3 A Brief History of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Enter Internet Explorer 3 .0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 And Then Came ECMAScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 So Many Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 The DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 What’s in a JavaScript Program? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 JavaScript Placement on Your Webpage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 What JavaScript Can Do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 What JavaScript Can’t Do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 JavaScript Can’t Be Forced on a Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 JavaScript Can’t Guarantee Data Security . . . . . . . . . . . . . . . . . . . . . . . . . . 11 JavaScript Can’t Cross Domains . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 JavaScript Doesn’t Do Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Tips for Using JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Where JavaScript Fits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Which Browsers Should the Site Support? . . . . . . . . . . . . . . . . . . . . . . . . . . 15 What’s New in ECMAScript Version 5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 New Array Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 New Controls on Object Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 New JSON Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Changes to the Date Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Microsoft is interested in hearing your feedback so we can continually improve our books and learning resources for you. To participate in a brief online survey, please visit: www.microsoft.com/learning/booksurvey/ What do you think of this book? We want to hear from you! viii Table of Contents A New Strict Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2 Developing in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 JavaScript Development Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Configuring Your Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Writing JavaScript with Visual Studio 2010 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Your First Web (and JavaScript) Project with Visual Studio 2010 . . . . . . . 24 Using External JavaScript Files with Visual Studio 2010 . . . . . . . . . . . . . . 28 Writing JavaScript with Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Your First Web (and JavaScript) Project with Eclipse . . . . . . . . . . . . . . . . . 33 Using External JavaScript Files with Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . 38 Writing JavaScript Without an IDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Your First Web (and JavaScript) Project with Notepad . . . . . . . . . . . . . . . 41 Using External JavaScript Files Without an IDE . . . . . . . . . . . . . . . . . . . . . . 44 Debugging JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 3 JavaScript Syntax and Statements . . . . . . . . . . . . . . . . . . . . . . . . . 49 A Bit of Housekeeping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Case Sensitivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 White Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Semicolons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Placing JavaScript Correctly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 JavaScript Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 What’s in a Statement? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 The Two Types of JavaScript Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Reserved Words in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 A Quick Look at Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 JavaScript’s New Strict Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Table of Contents ix 4 Working with Variables and Data Types . . . . . . . . . . . . . . . . . . . . 61 Data Types in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Working with Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Working with Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Booleans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Defining and Using Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Declaring Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Variable Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Variable Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 The Date Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Using the RegExp Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 The Syntax of Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 References and Garbage Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Learning About Type Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Number Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 String Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Boolean Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 5 Using Operators and Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Meet the Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Additive Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Multiplicative Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Bitwise Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Equality Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Relational Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 The in Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 The instanceof Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Unary Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Incrementing and Decrementing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Converting to a Number with the Plus Sign . . . . . . . . . . . . . . . . . . . . . . . 107 Creating a Negative Number with the Minus Sign . . . . . . . . . . . . . . . . . 107 Negating with bitwise not and logical not . . . . . . . . . . . . . . . . . . . . . . . . . 107 x Table of Contents Using the delete Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Returning Variable Types with the typeof Operator . . . . . . . . . . . . . . . . 111 The void Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Assignment Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 The Comma Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Part II Applying JavaScript 6 Controlling Flow with Conditionals and Loops . . . . . . . . . . . . . 119 If (and How) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Syntax for if Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 The prompt() Function in Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . 121 Compound Conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Using else if and else Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Working with Ternary Conditionals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Testing with switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Looping with while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 The while Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 The do...while Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Using for Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 The for Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 The for...in Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 The for each...in Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Validating Forms with Conditionals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 7 Working with Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 What’s in a Function? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Function Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Variable Scoping Revisited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Return Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 More on Calling Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Anonymous/Unnamed Functions (Function Literals) . . . . . . . . . . . . . . . 154 Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 A Look at Dialog Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Table of Contents xi 8 Objects in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Object-Oriented Development . . . . . . . . . . . . . . . . . . . .