book

JavaScript Cookbook

by Shelley Powers

July 2010

Intermediate to advanced

552 pages

12h 40m

English

O'Reilly Media, Inc.

Start your free trial

Related skills

JavaScript

Associated roles

Backend developer
Database administrator
Frontend developer
Product manager

QA engineer

+1 more

Audience, Assumptions, and ApproachConventions Used in This BookUsing Code ExamplesHow to Contact UsSafari® Books OnlineAcknowledgments
1.0. Introduction1.1. Concatenating Two or More Strings1.2. Concatenating a String and Another Data Type1.3. Conditionally Comparing Strings1.4. Finding a Substring in a String1.5. Extracting a Substring from a String1.6. Checking for an Existing, Nonempty String1.7. Breaking a Keyword String into Separate Keywords1.8. Inserting Special Characters1.9. Processing Individual Lines of a textarea1.10. Trimming Whitespace from the Ends of a String1.11. Left- or Right-Pad a String
2.0. Introduction2.1. Testing Whether a Substring Exists2.2. Testing for Case-Insensitive Substring Matches2.3. Validating a Social Security Number2.4. Finding and Highlighting All Instances of a Pattern2.5. Replacing Patterns with New Strings2.6. Swap Words in a String Using Capturing Parentheses2.7. Using Regular Expressions to Trim Whitespace2.8. Replace HTML Tags with Named Entities2.9. Searching for Special Characters
3.0. Introduction3.1. Printing Out Today’s Date3.2. Printing Out the UTC Date and Time3.3. Printing Out an ISO 8601 Formatted Date3.4. Converting an ISO 8601 Formatted Date to a Format Acceptable to the Date Object3.5. Creating a Specific Date3.6. Scheduling a Future Date3.7. Tracking Elapsed Time3.8. Creating a Timeout3.9. Creating Recurring Timers3.10. Using Function Closures with Timers
4.0. Introduction4.1. Keeping an Incremental Counter4.2. Converting a Decimal to a Hexadecimal Value4.3. Creating a Random Number Generator4.4. Randomly Generating Colors4.5. Converting Strings in a Table to Numbers4.6. Summing All Numbers in a Table Column4.7. Converting Between Degrees and Radians4.8. Find the Radius and Center of a Circle to Fit Within a Page Element4.9. Calculating the Length of a Circular Arc
5.0. Introduction5.1. Looping Through an Array5.2. Creating a Multidimensional Array5.3. Creating a String from an Array5.4. Sorting an Array5.5. Store and Access Values in Order5.6. Store and Access Values in Reverse Order5.7. Create a New Array as a Subset of an Existing Array5.8. Searching Through an Array5.9. Flatten a Multidimensional Array5.10. Search and Remove or Replace Array Elements5.11. Applying a Function Against Each Array Element5.12. Applying a Function to Every Element in an Array and Returning a New Array5.13. Creating a Filtered Array5.14. Validating Array Contents5.15. Using an Associative Array to Store Form Element Names and Values
6.0. Introduction6.1. Creating a Block of Reusable Code6.2. Passing Single Data Values to and from a Function6.3. Passing Complex Data Objects to a Function6.4. Creating a Dynamic Runtime Function6.5. Passing a Function As an Argument to Another Function6.6. Implementing a Recursive Algorithm6.7. Create a Function That Remembers Its State6.8. Improving Application Performance with a Generalized Currying Function6.9. Improve Application Performance with Memoization (Caching Calculations)6.10. Using an Anonymous Function to Wrap Global Variables
7.0. Introduction7.1. Detecting When the Page Has Finished Loading7.2. Capturing the Location of a Mouse Click Event Using the Event Object7.3. Creating a Generic, Reusable Event Handler Function7.4. Canceling an Event Based on Changed Circumstance7.5. Preventing an Event from Propagating Through a Set of Nested Elements7.6. Capturing Keyboard Activity7.7. Using the New HTML5 Drag-and-Drop7.8. Using Safari Orientation Events and Other Mobile Development Environments
8.0. Introduction8.1. Ask the Web Page Reader to Confirm an Action8.2. Creating a New, Stripped-Down Browser Window8.3. Finding Out About the Browser Accessing the Page8.4. Warning the Web Page Reader About Leaving a Page8.5. Changing Stylesheets Depending on Color Support8.6. Modifying Image Dimensions Depending on Page Size8.7. Creating Breadcrumbs in a CMS Template Page8.8. Bookmarking a Dynamic Page8.9. Preserving State for Back Button, Page Refresh

9.0. Introduction9.1. Accessing Form Text Input Values9.2. Dynamically Disabling and Enabling Form Elements9.3. Getting Information from a Form Element Based on an Event9.4. Performing an Action When a Radio Button Is Clicked9.5. Checking for a Valid Phone Number9.6. Canceling a Form Submission9.7. Preventing Duplicate Form Submissions9.8. Hiding and Displaying Form Elements9.9. Modifying a Selection List Based on Other Form Decisions
10.0. Introduction10.1. Gracefully Handling No JavaScript Support10.2. Checking for Errors in Functions10.3. Using an Alert for Simple Debugging10.4. Catching an Error and Providing Graceful Error Handling10.5. Initiating Manageable Errors10.6. Using Firebug with Firefox10.7. Setting a Breakpoint and Examining Data with Firebug10.8. Firefox and the Console10.9. Using IE’s Built-in Debugger10.10. Setting a Breakpoint with IE Developer Tools10.11. Opera’s Dragonfly10.12. Setting a Breakpoint with Dragonfly10.13. Turning on Safari’s Development Tools10.14. Setting a Breakpoint with Safari’s Debugger10.15. Debugging in Chrome
11.0. Introduction11.1. Access a Given Element and Find Its Parent and Child Elements11.2. Accessing All Images in the Web Page11.3. Discover All Images Within an Article11.4. Discover all Images in Articles Using the Selectors API11.5. Finding the Parent Element for a Group of Elements11.6. Highlighting the First Paragraph in Every Element11.7. Apply a Striping Theme to an Unordered List11.8. Creating an Array of All Elements of a Given Class11.9. Finding All Elements That Share an Attribute11.10. Finding All Checked Options11.11. Summing All the Values in a Table Row11.12. Get Element Attributes11.13. Get Style Information for an Element
12.0. Introduction12.1. Using innerHTML: A Quick and Easy Approach to Adding Content12.2. Inserting Elements Before Existing Page Elements12.3. Appending a New Element to the End of a Page12.4. Triggering Older Versions of IE to Style New Elements12.5. Inserting a New Paragraph12.6. Adding Text to a New Paragraph12.7. Adding Attributes to an Existing Element12.8. Testing for a Boolean Attribute12.9. Removing an Attribute12.10. Moving a Paragraph12.11. Replacing Links with Footnote Bullets12.12. Adding Rows to an Existing Table12.13. Removing a Paragraph from a div Element12.14. Deleting Rows from an HTML Table12.15. Changing the Element’s CSS Style Properties
13.0. Introduction13.1. Determining the Area of the Web Page13.2. Measuring Elements13.3. Locating Elements in the Page13.4. Hiding Page Sections13.5. Creating Collapsible Form Sections13.6. Adding a Page Overlay13.7. Creating Tab Pages13.8. Creating Hover-Based Pop-up Info Windows13.9. Collapsing or Resizing the Sidebar
14.0. Introduction14.1. Displaying a Hidden Page Section14.2. Creating an Alert Message14.3. Highlighting Form Field with Missing or Incorrect Data14.4. Adding Keyboard Accessibility to a Page Overlay14.5. Creating Collapsible Form Sections14.6. Displaying a Flash of Color to Signal an Action14.7. Adding ARIA Attributes to a Tabbed Page Application14.8. Live Region
15.0. Introduction15.1. Creating Basic Shapes in Canvas (Using the canvas Element)15.2. Implementing Canvas Applications in IE15.3. Creating a Dynamic Line Chart in Canvas15.4. Adding JavaScript to an SVG File15.5. Accessing SVG from Web Page Script15.6. Emulating SVG in Internet Explorer15.7. Enable Interactive SVG Embedded in HTML15.8. Using the Math Functions to Create a Realistic, Ticking Analog Clock in SVG15.9. Integrating SVG and the Canvas Element in HTML15.10. Turning on WebGL Support in Firefox and WebKit/Safari15.11. Running a Routine When an Audio File Begins Playing15.12. Controlling Video from JavaScript with the video Element
16.0. Introduction16.1. Defining a Basic JavaScript Object16.2. Keeping Object Members Private16.3. Expanding Objects with prototype16.4. Adding Getter/Setter to Objects16.5. Inheriting an Object’s Functionality16.6. Extending an Object by Defining a New Property16.7. Enumerating an Object’s Properties16.8. Preventing Object Extensibility16.9. Preventing Object Additions and Changes to Property Descriptors16.10. Preventing Any Changes to an Object16.11. One-Off Objects and Namespacing Your JavaScript16.12. Rediscovering “this” with Prototype.bind16.13. Chaining Your Object’s Methods
17.0. Introduction17.1. Packaging Your Code17.2. Testing Your Code with JsUnit17.3. Minify Your Library17.4. Hosting Your Library17.5. Using an External Library: Building on the jQuery Framework17.6. Using Existing jQuery Plug-ins17.7. Convert Your Library to a jQuery Plug-in17.8. Safely Combining Several Libraries in Your Applications
18.0. Introduction18.1. Accessing the XMLHttpRequest Object18.2. Preparing the Data for Transmission18.3. Determining the Type of Query Call18.4. Adding a Callback Function to an Ajax Request18.5. Checking for an Error Condition18.6. Processing a Text Result18.7. Making an Ajax Request to Another Domain (Using JSONP)18.8. Populating a Selection List from the Server18.9. Using a Timer to Automatically Update the Page with Fresh Data18.10. Communicating Across Windows with PostMessage
19.0. Introduction19.1. Process an XML Document Returned from an Ajax Call19.2. Extracting Pertinent Information from an XML Tree19.3. Generate a JavaScript Object with JSON, Old-School Style19.4. Parse a JSON Formatted String19.5. Convert an Object to a Filtered/Transformed String with JSON19.6. Convert hCalendar Microformat Annotations into a Canvas Timeline19.7. Glean Page RDFa and Convert It into JSON Using rdfQuery and the jQuery RDF Plug-in
20.0. Introduction20.1. Attaching Persistent Information to URLs20.2. Creating a Cookie to Persist Information Across Pages20.3. Persisting Information Using the History.pushState Method and window.onpopevent20.4. Using sessionStorage for Client-Side Storage20.5. Creating a localStorage Client-Side Data Storage Item20.6. Persisting Data Using a Relational Data Store
21.0. Introduction21.1. Creating a Browser Add-0n, Plug-in, or Extension21.2. Creating Desktop and Mobile Widgets21.3. Creating JavaScript Applications for the iPhone, Android, and BlackBerry with PhoneGap21.4. Enhancing Tools with JavaScript21.5. Creating Efficient Desktop Applications with Web Workers and the File API

Overview

Why reinvent the wheel every time you run into a problem with JavaScript? This cookbook is chock-full of code recipes that address common programming tasks, as well as techniques for building web apps that work in any browser. Just copy and paste the code samples into your project—you’ll get the job done faster and learn more about JavaScript in the process.

You'll also learn how to take advantage of the latest features in ECMAScript 5 and HTML5, including the new cross-domain widget communication technique, HTML5's video and audio elements, and the drawing canvas. You'll find recipes for using these features with JavaScript to build high-quality application interfaces.