www.it-ebooks.info www.it-ebooks.info JavaScript Cookbook Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info JavaScript Cookbook Shelley Powers Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info 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 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 Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info 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 Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info 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 Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info 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 Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info 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 Download from Wow! eBook <www.wowebook.com> www.it-ebooks.info [...]... Most are based in HTML, but there are some that are based in XHTML, the XML serialization of HTML In addition, most of the examples are based in HTML5, though I’ve also used a couple of other HTML versions, especially with the SVG examples: HTML5 XHTML5 XHTML+SVG . are based in HTML5, though I’ve also used a couple of other HTML versions, especially with the SVG examples: HTML5 <!DOCTYPE html> XHTML5 <!DOCTYPE. applications using your browser’s debugger • Work with the new HTML5 drag-and-drop • Communicate using the new HTML5 cross-documentation techniques • Implement concurrent