Thư viện tri thức trực tuyến
Kho tài liệu với 50,000+ tài liệu học thuật
© 2023 Siêu thị PDF - Kho tài liệu học thuật hàng đầu Việt Nam
JavaScript Cookbook
Nội dung xem thử
Mô tả chi tiết
JavaScript Cookbook
JavaScript Cookbook
Shelley Powers
Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo
JavaScript Cookbook
by Shelley Powers
Copyright © 2010 Shelley Powers. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions
are also available for most titles (http://my.safaribooksonline.com). For more information, contact our
corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com.
Editor: Simon St.Laurent
Production Editor: Adam Zaremba
Copyeditor: Colleen Toporek
Proofreader: Kiel Van Horn
Indexer: Potomac Indexing, LLC
Cover Designer: Karen Montgomery
Interior Designer: David Futato
Illustrator: Robert Romano
Printing History:
July 2010: First Edition.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of
O’Reilly Media, Inc. JavaScript Cookbook, the image of a lesser egret, and related trade dress are trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a
trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume
no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
ISBN: 978-0-596-80613-2
[SB]
1278088163
Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
1. Working with JavaScript Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Concatenating Two or More Strings 3
1.2 Concatenating a String and Another Data Type 4
1.3 Conditionally Comparing Strings 5
1.4 Finding a Substring in a String 8
1.5 Extracting a Substring from a String 9
1.6 Checking for an Existing, Nonempty String 10
1.7 Breaking a Keyword String into Separate Keywords 13
1.8 Inserting Special Characters 15
1.9 Processing Individual Lines of a textarea 16
1.10 Trimming Whitespace from the Ends of a String 17
1.11 Left- or Right-Pad a String 19
2. Using Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1 Testing Whether a Substring Exists 24
2.2 Testing for Case-Insensitive Substring Matches 25
2.3 Validating a Social Security Number 26
2.4 Finding and Highlighting All Instances of a Pattern 28
2.5 Replacing Patterns with New Strings 31
2.6 Swap Words in a String Using Capturing Parentheses 32
2.7 Using Regular Expressions to Trim Whitespace 35
2.8 Replace HTML Tags with Named Entities 36
2.9 Searching for Special Characters 37
3. Dates, Time, and Timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.1 Printing Out Today’s Date 41
3.2 Printing Out the UTC Date and Time 42
3.3 Printing Out an ISO 8601 Formatted Date 43
v
3.4 Converting an ISO 8601 Formatted Date to a Format Acceptable
to the Date Object 45
3.5 Creating a Specific Date 47
3.6 Scheduling a Future Date 48
3.7 Tracking Elapsed Time 49
3.8 Creating a Timeout 49
3.9 Creating Recurring Timers 50
3.10 Using Function Closures with Timers 52
4. Working with Numbers and Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.1 Keeping an Incremental Counter 57
4.2 Converting a Decimal to a Hexadecimal Value 59
4.3 Creating a Random Number Generator 59
4.4 Randomly Generating Colors 60
4.5 Converting Strings in a Table to Numbers 61
4.6 Summing All Numbers in a Table Column 62
4.7 Converting Between Degrees and Radians 64
4.8 Find the Radius and Center of a Circle to Fit Within a Page Element 65
4.9 Calculating the Length of a Circular Arc 67
5. Working with Arrays and Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
5.1 Looping Through an Array 71
5.2 Creating a Multidimensional Array 71
5.3 Creating a String from an Array 73
5.4 Sorting an Array 74
5.5 Store and Access Values in Order 75
5.6 Store and Access Values in Reverse Order 76
5.7 Create a New Array as a Subset of an Existing Array 77
5.8 Searching Through an Array 78
5.9 Flatten a Multidimensional Array 79
5.10 Search and Remove or Replace Array Elements 80
5.11 Applying a Function Against Each Array Element 82
5.12 Applying a Function to Every Element in an Array and Returning
a New Array 83
5.13 Creating a Filtered Array 84
5.14 Validating Array Contents 86
5.15 Using an Associative Array to Store Form Element Names and
Values 88
6. Building Reusability with JavaScript Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
6.1 Creating a Block of Reusable Code 94
6.2 Passing Single Data Values to and from a Function 95
6.3 Passing Complex Data Objects to a Function 96
vi | Table of Contents
6.4 Creating a Dynamic Runtime Function 98
6.5 Passing a Function As an Argument to Another Function 100
6.6 Implementing a Recursive Algorithm 101
6.7 Create a Function That Remembers Its State 103
6.8 Improving Application Performance with a Generalized Currying
Function 107
6.9 Improve Application Performance with Memoization (Caching
Calculations) 109
6.10 Using an Anonymous Function to Wrap Global Variables 112
7. Handling Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
7.1 Detecting When the Page Has Finished Loading 117
7.2 Capturing the Location of a Mouse Click Event Using the Event
Object 119
7.3 Creating a Generic, Reusable Event Handler Function 122
7.4 Canceling an Event Based on Changed Circumstance 125
7.5 Preventing an Event from Propagating Through a Set of Nested
Elements 126
7.6 Capturing Keyboard Activity 129
7.7 Using the New HTML5 Drag-and-Drop 132
7.8 Using Safari Orientation Events and Other Mobile Development
Environments 140
8. Browser Pieces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
8.1 Ask the Web Page Reader to Confirm an Action 144
8.2 Creating a New, Stripped-Down Browser Window 144
8.3 Finding Out About the Browser Accessing the Page 145
8.4 Warning the Web Page Reader About Leaving a Page 146
8.5 Changing Stylesheets Depending on Color Support 147
8.6 Modifying Image Dimensions Depending on Page Size 149
8.7 Creating Breadcrumbs in a CMS Template Page 150
8.8 Bookmarking a Dynamic Page 153
8.9 Preserving State for Back Button, Page Refresh 156
9. Form Elements and Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
9.1 Accessing Form Text Input Values 159
9.2 Dynamically Disabling and Enabling Form Elements 161
9.3 Getting Information from a Form Element Based on an Event 161
9.4 Performing an Action When a Radio Button Is Clicked 164
9.5 Checking for a Valid Phone Number 166
9.6 Canceling a Form Submission 167
9.7 Preventing Duplicate Form Submissions 169
9.8 Hiding and Displaying Form Elements 171
Table of Contents | vii
9.9 Modifying a Selection List Based on Other Form Decisions 173
10. Debugging and Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
10.1 Gracefully Handling No JavaScript Support 177
10.2 Checking for Errors in Functions 180
10.3 Using an Alert for Simple Debugging 181
10.4 Catching an Error and Providing Graceful Error Handling 182
10.5 Initiating Manageable Errors 184
10.6 Using Firebug with Firefox 185
10.7 Setting a Breakpoint and Examining Data with Firebug 188
10.8 Firefox and the Console 190
10.9 Using IE’s Built-in Debugger 194
10.10 Setting a Breakpoint with IE Developer Tools 196
10.11 Opera’s Dragonfly 198
10.12 Setting a Breakpoint with Dragonfly 201
10.13 Turning on Safari’s Development Tools 201
10.14 Setting a Breakpoint with Safari’s Debugger 207
10.15 Debugging in Chrome 208
11. Accessing Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
11.1 Access a Given Element and Find Its Parent and Child Elements 214
11.2 Accessing All Images in the Web Page 216
11.3 Discover All Images Within an Article 221
11.4 Discover all Images in Articles Using the Selectors API 222
11.5 Finding the Parent Element for a Group of Elements 226
11.6 Highlighting the First Paragraph in Every Element 227
11.7 Apply a Striping Theme to an Unordered List 230
11.8 Creating an Array of All Elements of a Given Class 231
11.9 Finding All Elements That Share an Attribute 232
11.10 Finding All Checked Options 233
11.11 Summing All the Values in a Table Row 234
11.12 Get Element Attributes 237
11.13 Get Style Information for an Element 238
12. Creating and Removing Elements and Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
12.1 Using innerHTML: A Quick and Easy Approach to Adding
Content 241
12.2 Inserting Elements Before Existing Page Elements 242
12.3 Appending a New Element to the End of a Page 246
12.4 Triggering Older Versions of IE to Style New Elements 247
12.5 Inserting a New Paragraph 248
12.6 Adding Text to a New Paragraph 249
12.7 Adding Attributes to an Existing Element 251
viii | Table of Contents
12.8 Testing for a Boolean Attribute 252
12.9 Removing an Attribute 253
12.10 Moving a Paragraph 254
12.11 Replacing Links with Footnote Bullets 254
12.12 Adding Rows to an Existing Table 257
12.13 Removing a Paragraph from a div Element 260
12.14 Deleting Rows from an HTML Table 262
12.15 Changing the Element’s CSS Style Properties 264
13. Working with Web Page Spaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
13.1 Determining the Area of the Web Page 270
13.2 Measuring Elements 272
13.3 Locating Elements in the Page 273
13.4 Hiding Page Sections 276
13.5 Creating Collapsible Form Sections 277
13.6 Adding a Page Overlay 281
13.7 Creating Tab Pages 284
13.8 Creating Hover-Based Pop-up Info Windows 289
13.9 Collapsing or Resizing the Sidebar 292
14. Creating Interactive and Accessible Effects with JavaScript, CSS, and ARIA . . . . . . 297
14.1 Displaying a Hidden Page Section 299
14.2 Creating an Alert Message 300
14.3 Highlighting Form Field with Missing or Incorrect Data 302
14.4 Adding Keyboard Accessibility to a Page Overlay 308
14.5 Creating Collapsible Form Sections 312
14.6 Displaying a Flash of Color to Signal an Action 316
14.7 Adding ARIA Attributes to a Tabbed Page Application 320
14.8 Live Region 323
15. Creating Media Rich and Interactive Applications . . . . . . . . . . . . . . . . . . . . . . . . . . 325
15.1 Creating Basic Shapes in Canvas (Using the canvas Element) 326
15.2 Implementing Canvas Applications in IE 328
15.3 Creating a Dynamic Line Chart in Canvas 330
15.4 Adding JavaScript to an SVG File 333
15.5 Accessing SVG from Web Page Script 335
15.6 Emulating SVG in Internet Explorer 338
15.7 Enable Interactive SVG Embedded in HTML 339
15.8 Using the Math Functions to Create a Realistic, Ticking Analog
Clock in SVG 345
15.9 Integrating SVG and the Canvas Element in HTML 347
15.10 Turning on WebGL Support in Firefox and WebKit/Safari 350
15.11 Running a Routine When an Audio File Begins Playing 351
Table of Contents | ix
15.12 Controlling Video from JavaScript with the video Element 353
16. JavaScript Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
16.1 Defining a Basic JavaScript Object 360
16.2 Keeping Object Members Private 361
16.3 Expanding Objects with prototype 362
16.4 Adding Getter/Setter to Objects 364
16.5 Inheriting an Object’s Functionality 366
16.6 Extending an Object by Defining a New Property 369
16.7 Enumerating an Object’s Properties 374
16.8 Preventing Object Extensibility 377
16.9 Preventing Object Additions and Changes to Property Descriptors 379
16.10 Preventing Any Changes to an Object 380
16.11 One-Off Objects and Namespacing Your JavaScript 381
16.12 Rediscovering “this” with Prototype.bind 383
16.13 Chaining Your Object’s Methods 385
17. JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
17.1 Packaging Your Code 390
17.2 Testing Your Code with JsUnit 392
17.3 Minify Your Library 397
17.4 Hosting Your Library 397
17.5 Using an External Library: Building on the jQuery Framework 400
17.6 Using Existing jQuery Plug-ins 402
17.7 Convert Your Library to a jQuery Plug-in 404
17.8 Safely Combining Several Libraries in Your Applications 408
18. Communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
18.1 Accessing the XMLHttpRequest Object 414
18.2 Preparing the Data for Transmission 416
18.3 Determining the Type of Query Call 417
18.4 Adding a Callback Function to an Ajax Request 420
18.5 Checking for an Error Condition 421
18.6 Processing a Text Result 422
18.7 Making an Ajax Request to Another Domain (Using JSONP) 422
18.8 Populating a Selection List from the Server 424
18.9 Using a Timer to Automatically Update the Page with Fresh Data 427
18.10 Communicating Across Windows with PostMessage 430
19. Working with Structured Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
19.1 Process an XML Document Returned from an Ajax Call 436
19.2 Extracting Pertinent Information from an XML Tree 437
19.3 Generate a JavaScript Object with JSON, Old-School Style 442
x | Table of Contents
19.4 Parse a JSON Formatted String 444
19.5 Convert an Object to a Filtered/Transformed String with JSON 445
19.6 Convert hCalendar Microformat Annotations
into a Canvas Timeline 447
19.7 Glean Page RDFa and Convert It into JSON Using rdfQuery and
the jQuery RDF Plug-in 450
20. Persistence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
20.1 Attaching Persistent Information to URLs 458
20.2 Creating a Cookie to Persist Information Across Pages 462
20.3 Persisting Information Using the History.pushState Method and
window.onpopevent 465
20.4 Using sessionStorage for Client-Side Storage 469
20.5 Creating a localStorage Client-Side Data Storage Item 476
20.6 Persisting Data Using a Relational Data Store 479
21. JavaScript Outside the Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
21.1 Creating a Browser Add-0n, Plug-in, or Extension 484
21.2 Creating Desktop and Mobile Widgets 489
21.3 Creating JavaScript Applications for the iPhone, Android, and
BlackBerry with PhoneGap 494
21.4 Enhancing Tools with JavaScript 496
21.5 Creating Efficient Desktop Applications with
Web Workers and the File API 500
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
Table of Contents | xi
Preface
I wrote my first book on JavaScript 15 years ago, and had to scramble just to find enough
material to fill a book. With the JavaScript Cookbook, I had to choose among hundreds
of uses to determine what to include. After all these years of watching JavaScript grow,
I am still surprised at how far-reaching the use of JavaScript has become. In my opinion,
there is no more useful programming language or development tool. About the only
technology with wider use is HTML.
This book is for those who have dabbled with JavaScript and wish to try out new
techniques, or increase their grasp of both fundamentals and advanced features of
JavaScript. Along the way, I’ll demonstrate how to:
• Work with the JavaScript objects, such as String, Array, Number, and Math
• Create reusable objects
• Query and create new elements in the Document Object Model (DOM)
• Use the new Selectors API for efficient and targeted querying
• Use JavaScript with new HTML5 technologies, such as the new media elements,
video and audio
• Create interactive applications
• Manage your web page space
• Store data in various ways, from the simple to the complex
• Use JavaScript with Scalable Vector Graphics (SVG) and the canvas element
• Work with some of the interesting data structures, like Microformats and RDFa
• Package your library for others to use, as well as use other libraries in your
applications
• Ensure your JavaScript applications are accessible through the use of Accessible
Rich Internet Applications (ARIA)
• Work in environments other than the typical desktop browser, such as creating
mobile phone web applications, or extending Photoshop with new behaviors
• Use and create jQuery plug-ins
• Develop Ajax applications
xiii
• Debug your applications using your browser’s debugger
• Work with the new HTML5 drag-and-drop
• Communicate using the new HTML5 cross-documentation techniques
• Implement concurrent programming with Web Workers
• Use the File API to access a desktop file directly in client-side JavaScript
It’s not a complete encyclopedia of JavaScript use today—no one book can cover all
there is to cover. But hopefully, you’ll come away with an appreciation of all you can
do with JavaScript.
Bon appetit!
Audience, Assumptions, and Approach
Readers of this book should have some exposure to web development, and the use of
JavaScript. In addition, the recipe format means I’ll be focusing on specific tasks, rather
than providing an overall general introduction. I won’t cover every last aspect of a
JavaScript topic, such as Strings. Instead, I’ll focus on the more common tasks, or
challenges, associated with the topic.
There will be lots of code, some of it in code snippets, some in full-page applications.
The recipes are also cross-referenced, so if I mention a specific topic in one recipe that
was covered in another, I’ll include this information in the “See Also” section for the
recipe. To assist you, I’ve also created example code for all of the recipes that you can
download and work with immediately.
Target Browsers
Throughout the book, I’ll mention the target browsers. The majority of example code
in this book has been designed for, and tested to work with, the latest releases of the
most commonly used browsers:
• Firefox 3.6x on Mac and Windows
• Safari 4.0x on Mac and Windows
• Opera 10.x on Mac and Windows
• Chrome 5.x on Windows
• Internet Explorer 8 on Windows
I didn’t have a Linux machine to test for that environment, but, knock on wood, most
of the recipes should work in a Linux environment with Firefox. I also didn’t have a
System 7 for testing the IE9 preview, but most of the applications should work, including those using SVG (a new addition for IE9).
Some of the recipes required a specialized environment, such as a mobile device or
emulator, or beta (or alpha) release of the browser. I made a note where an example
xiv | Preface