JavaScript Cookbook (Oreilly Cookbooks)

554 Pages·2010·6.68 MB·English

by  Shelley Powers

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 [email protected].
Editor: Simon St.Laurent Indexer: Potomac Indexing, LLC
Production Editor: Adam Zaremba Cover Designer: Karen Montgomery
Copyeditor: Colleen Toporek Interior Designer: David Futato
Proofreader: Kiel Van Horn 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 trade-
marks 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 con-
tained 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