Table Of Content2
n
d
E
d
i
t
i
o
n
JavaScript
Cookbook
PROGRAMMING THE WEB
■
■
■
■
■
■
■
■
■
■
■
■
■
Shelley Powers
JavaScript Cookbook
“
Problem solving with JavaScript is a lot trickier now that its use has expanded A comprehensive, example-
considerably in size, scope, and complexity. This cookbook has your back, driven tour of the language
with recipes for common tasks across the JavaScript world, whether you’re ”
and its platforms.
working in the browser, the server, or a mobile environment. Each recipe
includes reusable code and practical advice for tackling JavaScript objects, —Dr. Axel Rauschmayer
author of Speaking JavaScript
Node, Ajax, JSON, data persistence, graphical and media applications, complex
frameworks, modular JavaScript, APIs, and many related technologies.
Aimed at people who have some experience with JavaScript, the first part
covers traditional uses of JavaScript, along with new ideas and improved
functionality. The second part dives into the server, mobile development,
and a plethora of leading-edge tools. You’ll save time—and learn more
about JavaScript in the process.
Topics include:
Classic JavaScript:
■ Arrays, functions, and the JavaScript Object
■ Accessing the user interface
■ Testing and accessibility
■ Creating and using JavaScript libraries
■ Client-server communication with Ajax
■ Rich, interactive web efects
JavaScript, All Blown Up:
■ New ECMAScript standard objects
■ Using Node on the server
Shelley Powers has been working
■ Modularizing and managing JavaScript with and writing about web tech-
nologies—from the first release
■ Complex JavaScript frameworks
of JavaScript to the latest graphics
■ Advanced client-server communications and design tools—for more than 18
years. Her recent O’Reilly books have
■ Visualizations and client-server graphics
covered JavaScript, HTML5 media
■ Mobile application development objects, Ajax, and web graphics.
JAVASCRIPT/WEB Twitter: @oreillymedia
facebook.com/oreilly
US $49.99 CAN $57.99
ISBN: 978-1-491-90188-5
SECOND EDITION
JavaScript Cookbook
Shelley Powers
JavaScript Cookbook, Second Edition
by Shelley Powers
Copyright © 2015 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://safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or [email protected].
Editors: Simon St. Laurent and Brian MacDonald Indexer: Judy McConville
Production Editor: Kara Ebrahim Cover Designer: Ellie Volckhausen
Copyeditor: Jasmine Kwityn Interior Designer: David Futato
Proofreader: Kara Ebrahim Illustrator: Rebecca Demarest
February 2015: Second Edition
Revision History for the Second Edition:
2015-01-23: First release
See http://oreilly.com/catalog/errata.csp?isbn=9781491901885 for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. JavaScript Cookbook, Second Edition, the
cover image of a little egret, and related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the information and instruc‐
tions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors
or omissions, including without limitation responsibility for damages resulting from the use of or reliance
on this work. Use of the information and instructions contained in this work is at your own risk. If any code
samples or other technology this work contains or describes is subject to open source licenses or the intel‐
lectual property rights of others, it is your responsibility to ensure that your use thereof complies with such
licenses and/or rights.
ISBN: 978-1-491-90188-5
[LSI]
Table of Contents
The World of JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Part I. Classic JavaScript
1. The JavaScript Not-So-Simple Building Blocks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1. Differentiating Between a JavaScript Object, Primitive, and Literal 3
1.2. Extracting a List from a String 7
1.3. Checking for an Existing, Nonempty String 10
1.4. Inserting Special Characters 14
1.5. Replacing Patterns with New Strings 16
1.6. Finding and Highlighting All Instances of a Pattern 18
1.7. Swapping Words in a String Using Capturing Parentheses 22
1.8. Replacing HTML Tags with Named Entities 25
1.9. Converting an ISO 8601 Formatted Date to a Date Object Acceptable
Format 25
1.10. Using Function Closures with Timers 29
1.11. Tracking Elapsed Time 31
1.12. Converting a Decimal to a Hexadecimal Value 32
1.13. Summing All Numbers in a Table Column 33
1.14. Converting Between Degrees and Radians 36
1.15. Find the Radius and Center of a Circle to Fit Within a Page Element 37
1.16. Calculating the Length of a Circular Arc 39
1.17. Using ES6 String Extras Without Leaving Users in the Dirt 40
2. JavaScript Arrays. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.1. Searching Through an Array 43
2.2. Flattening a Two-Dimensional Array with concat() and apply() 45
2.3. Removing or Replacing Array Elements 46
2.4. Extracting a Portion of an Array 48
iii
2.5. Applying a Function Against Each Array Element 48
2.6. Traversing the Results from querySelectorAll() with forEach() and call() 50
2.7. Applying a Function to Every Element in an Array and Returning a New
Array 51
2.8. Creating a Filtered Array 52
2.9. Validating Array Contents 52
2.10. Using an Associative Array to Store Form Element Names and Values 54
2.11. Using a Destructuring Assignment to Simplify Code 58
3. Functions: The JavaScript Building Blocks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3.1. Placing Your Function and Hoisting 61
3.2. Passing a Function As an Argument to Another Function 63
3.3. Implementing a Recursive Algorithm 65
3.4. Preventing Code Blocking with a Timer and a Callback 68
3.5. Creating a Function That Remembers Its State 72
3.6. Converting Function Arguments into an Array 75
3.7. Reducing Redundancy by Using a Partial Application 77
3.8. Improving Application Performance with Memoization (Caching
Calculations) 80
3.9. Using an Anonymous Function to Wrap Global Variables 82
3.10. Providing a Default Parameter 83
4. The Malleable JavaScript Object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
4.1. Keeping Object Members Private 86
4.2. Using Prototype to Create Objects 87
4.3. Inheriting an Object’s Functionality 90
4.4. Extending an Object by Defining a New Property 92
4.5. Preventing Object Extensibility 94
4.6. Preventing Any Changes to an Object 95
4.7. Namespacing Your JavaScript Objects 97
4.8. Rediscovering this with Prototype.bind 100
4.9. Chaining Your Object’s Methods 103
5. JavaScript and Directly Accessing the User Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
5.1. Accessing a Given Element and Finding Its Parent and Child Elements 107
5.2. Accessing All Images in the Web Page 110
5.3. Discovering All Images in Articles Using the Selectors API 116
5.4. Setting an Element’s Style Attribute 119
5.5. Applying a Striped Theme to an Unordered List 122
5.6. Finding All Elements That Share an Attribute 123
5.7. Inserting a New Paragraph 124
5.8. Adding Text to a New Paragraph 125
iv | Table of Contents
5.9. Deleting Rows from an HTML Table 127
5.10. Adding a Page Overlay 129
5.11. Creating Collapsible Form Sections 133
5.12. Hiding Page Sections 136
5.13. Creating Hover-Based Pop-Up Info Windows 137
5.14. Displaying a Flash of Color to Signal an Action 140
6. Preliminary Testing and Accessibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
6.1. Cleaning Up Your Code with JSHint 143
6.2. Unit Testing Your Code with QUnit 145
6.3. Testing Your Application in Various Environments 148
6.4. Performance Testing Different Coding Techniques 152
6.5. Highlighting Errors Accessibly 156
6.6. Creating an Accessible Automatically Updated Region 163
7. Creating and Using JavaScript Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
7.1. Finding the Perfect Library 165
7.2. Testing for Features with Modernizr.load 166
7.3. Going Beyond the Math Object’s Capability 168
7.4. Finding the Number of Days Between Two Dates 170
7.5. Using an External Library: Building on the jQuery Framework 171
7.6. Using a jQuery Plugin 174
7.7. Handling Keyboard Shortcuts with Mousetrap 177
7.8. Utilizing the Utility Library Underscore 180
7.9. Packaging Your Code 182
7.10. Adding Support for Private Data Members 185
7.11. Minify Your Library 187
7.12. Hosting Your Library 189
7.13. Serving Code from a CDN 192
7.14. Convert Your Library to a jQuery Plug-in 193
7.15. Safely Combining Several Libraries in Your Applications 195
8. Simplified Client-Server Communication and Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
8.1. Handling an XML Document Returned via an Ajax Call 199
8.2. Extracting Pertinent Information from an XML Tree 201
8.3. Parsing and Automatically Modifying JSON 206
8.4. Converting an Object to a Filtered/Transformed String with JSON 208
8.5. Making an Ajax Request to Another Domain (Using JSONP) 209
8.6. Processing JSON from an Ajax Request 212
8.7. Populating a Selection List from the Server 214
8.8. Using a Timer to Automatically Update the Page with Fresh Data 218
Table of Contents | v
9. Creating Media Rich, Interactive Web Effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
9.1. Creating a Dynamic Line Chart in Canvas 221
9.2. Adding JavaScript to SVG 227
9.3. Accessing SVG from Web Page Script 231
9.4. Integrating SVG and the Canvas Element in HTML 233
9.5. Running a Routine When an Audio File Begins Playing 235
9.6. Controlling Video from JavaScript with the video Element 237
9.7. Adding Filter Effects to Video via Canvas 241
Part II. JavaScript, All Blown Up
10. The New ECMAScript Standard Objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
10.1. Using let in Your Browser Application 250
10.2. Creating a Collection of Non-Duplicated Values 253
10.3. Creating Unique Key/Value Pairs with Uniquely Different Keys 255
10.4. Creating Absolutely Unique Object Property Keys 258
10.5. Iterating Through Tasks Made Easy 260
10.6. Creating Functions that Gracefully Yield 261
10.7. Implementing Just-in-Time Object Behavioral Modifications with
Proxies 263
10.8. Creating a True Class and Extending It (with a Little Help from Traceur) 266
10.9. Using Promises for Efficient Asynchronous Processing 270
11. Node: JavaScript on the Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
11.1. Responding to a Simple Browser Request 273
11.2. Serving Up Formatted Data 276
11.3. Reading and Writing File Data 278
11.4. Using let and Other ES 6 Additions in Node 283
11.5. Interactively Trying Out Node Code Snippets with REPL 284
11.6. Getting Input from the Terminal 287
11.7. Working with Node Timers and Understanding the Node Event Loop 289
11.8. Managing Callback Hell 293
11.9. Accessing Command-Line Functionality Within a Node Application 297
11.10. Running Node and Apache on the Same Port 300
11.11. Keeping a Node Instance Up and Running 302
11.12. Monitoring Application Changes and Restarting 304
11.13. Screen Scraping with Request 305
11.14. Creating a Command-Line Utility with Help From Commander 307
12. Modularizing and Managing JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
12.1. Loading Scripts with a Script Loader 312
vi | Table of Contents
12.2. Loading Scripts Asynchronously the HTML5 Way 315
12.3. Converting Your JavaScript to AMD and RequireJS 316
12.4. Using RequireJS with jQuery or Another Library 319
12.5. Loading and Using Dojo Modules 323
12.6. Installing and Maintaining Node Modules with npm 325
12.7. Searching for a Specific Node Module via npm 326
12.8. Converting Your Library into a Node Module 327
12.9. Taking Your Code Across All Module Environments 329
12.10. Creating an Installable Node Module 333
12.11. Packaging and Managing Your Client-Side Dependencies with Bower 338
12.12. Compiling Node.js Modules for Use in the Browser with Browserify 340
12.13. Unit Testing Your Node Modules 342
12.14. Running Tasks with Grunt 345
13. Fun with APIs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
13.1. Accessing JSON-Formatted Data via a RESTful API 351
13.2. Creating a RESTFul API with Restify 355
13.3. Enabling a Mobile-Like Notification in the Desktop Browser 360
13.4. Loading a File Locally in the Browser 362
13.5. Creating a Mini E-Pub Reader Using Web Workers and the File API 365
13.6. Exploring Google Maps and Other APIS 371
13.7. Accessing Twitter’s API from a Node Application 379
14. JavaScript Frameworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
14.1. Using the Express-Generator to Generate an Express Site 388
14.2. Converting a Generated Express Site into a Basic MVC App 396
14.3. Choosing a SPA Framework: Deconstructing the TodoMVC 410
14.4. Working with the OAuth Framework 422
14.5. Extending the Possible with Web Components 436
15. Advanced Client-Server Communications and Streams. . . . . . . . . . . . . . . . . . . . . . . . . . 447
15.1. Allowing Cross-Domain Requests 447
15.2. Implementing a PUT Request in Ajax 450
15.3. Sending Binary Data Through Ajax and Loading into an Image 453
15.4. Sharing HTTP Cookies Across Domains 455
15.5. Establishing Two-Way Communication Between Client and Server 458
15.6. Unloading and Zipping Files Using Transform Streams 464
15.7. Testing the Performance and Capability of Your WebSockets Application 466
16. Data Visualizations and Client/Server Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
16.1. Creating an SVG Bar Chart with D3 470
16.2. Mapping Data Point Variations with a Radar Chart 476
Table of Contents | vii
16.3. Feeding a Scrolling Timeline via WebSocket 478
16.4. Generating Screenshots of Generated Web Page Content (PhantomJS) 483
16.5. Converting Graphics to Text (Ocrad.js) 489
16.6. Cropping (or Otherwise Modifying) Uploaded Images 491
17. Data and Persistence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
17.1. Validating Form Data 495
17.2. Persisting Information Using HTML5 502
17.3. Using sessionStorage for Client-Side Storage 505
17.4. Creating a localStorage Client-Side Data Storage Item 513
17.5. Using Squel.js to Query a MySQL Database 517
17.6. Persisting Larger Chunks of Data on the Client Using IndexedDB 520
17.7. Accessing Data in the Cloud Using Dropbox Datastores 523
18. JavaScript Hits the (Mobile) Road. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535
18.1. Creating an Installable, Hosted Web App 535
18.2. Packaging Web Apps for the Amazon Appstore 541
18.3. Building a Basic Android App Using Cordova (PhoneGap) 543
18.4. Porting Where Am I? to Android 551
18.5. Creating a Geolocation Firefox OS App 559
18.6. Porting the Geolocation App to a Google Chrome App 569
18.7. Publishing Your Geolocation App in the Kindle Fire OS Environment 577
18.8. Debugging Your Android or Amazon Fire OS App 580
18.9. Getting Information About the Device 583
A. Up and Running in jsBin and jsFiddle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
viii | Table of Contents
