book

JavaScript Cookbook, 3rd Edition

by Adam D. Scott, Matthew MacDonald, Shelley Powers

July 2021

Intermediate to advanced

535 pages

11h 55m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Includes

Sandbox

Preface
Book AudienceBook OrganizationConventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
I. The JavaScript Language
1. Setting Up a Development Environment
Choosing a Code EditorProblemSolutionDiscussionSee AlsoUsing the Developer Console in Your BrowserProblemSolutionDiscussionSee AlsoRunning Blocks of Code in the Developer ConsoleProblemSolutionDiscussionSee AlsoUsing Strict Mode to Catch Common MistakesProblemSolutionDiscussionSee AlsoFilling in HTML Boilerplate with Emmet ShortcutsProblemSolutionDiscussionInstalling the npm Package Manager (with Node.js)ProblemSolutionDiscussionSee AlsoExtra: Using a Terminal and ShellDownloading a Package with npmProblemSolutionDiscussionExtra: Understanding package.jsonUpdating a Package with npmProblemSolutionDiscussionSetting Up a Local Test ServerProblemSolutionDiscussionSee AlsoEnforcing Code Standards with a LinterProblemSolutionDiscussionStyling Code Consistently with a FormatterProblemSolutionDiscussionExperimenting in a JavaScript PlaygroundProblemSolutionDiscussion
2. Strings and Regular Expressions
Checking for an Existing, Nonempty StringProblemSolutionDiscussionConverting a Numeric Value to a Formatted StringProblemSolutionDiscussionSee AlsoInserting Special CharactersProblemSolutionDiscussionSee AlsoInserting EmojisProblemSolutionDiscussionUsing Template Literals for Clearer String ConcatenationProblemSolutionDiscussionPerforming a Case-Insensitive String ComparisonProblemSolutionDiscussionChecking If a String Contains a Specific SubstringProblemSolutionDiscussionReplacing All Occurrences of a StringProblemSolutionDiscussionSee AlsoReplacing HTML Tags with Named EntitiesProblemSolutionDiscussionSee AlsoUsing a Regular Expression to Replace Patterns in a StringProblemSolutionDiscussionExtra: Regular ExpressionsExtracting a List from a StringProblemSolutionDiscussionSee AlsoFinding All Instances of a PatternProblemSolutionDiscussionExtra: Highlighting MatchesRemoving Whitespace from the Beginning and End of a StringProblemSolutionDiscussionSee AlsoConverting the First Letter of a String to UppercaseProblemSolutionDiscussionSee AlsoValidating an Email AddressProblemSolutionDiscussionSee Also
3. Numbers
Generating Random NumbersProblemSolutionDiscussionSee AlsoGenerating Cryptographically Secure Random NumbersProblemSolutionDiscussionRounding to a Specific Decimal PlaceProblemSolutionDiscussionSee AlsoPreserving Accuracy in Decimal ValuesProblemSolutionDiscussionSee AlsoConverting a String to a NumberProblemSolutionDiscussionConverting a Decimal to a Hexadecimal ValueProblemSolutionDiscussionConverting Between Degrees and RadiansProblemSolutionDiscussionCalculating the Length of a Circular ArcProblemSolutionDiscussionManipulating Very Large Numbers with BigIntProblemSolutionDiscussion
4. Dates
Getting the Current Date and TimeProblemSolutionDiscussionSee AlsoConverting a String to a DateProblemSolutionDiscussionSee AlsoAdding Days to a DateProblemSolutionDiscussionSee AlsoComparing Dates and Testing Dates for EqualityProblemSolutionDiscussionSee AlsoCalculating the Time Elapsed Between Two DatesProblemSolutionDiscussionSee AlsoFormatting a Date Value as a StringProblemSolutionDiscussionSee Also
5. Arrays
Checking If an Object Is an ArrayProblemSolutionDiscussionIterating Over All the Elements in an ArrayProblemSolutionDiscussionChecking If Two Arrays Are EqualProblemSolutionDiscussionBreaking Down an Array into Separate VariablesProblemSolutionDiscussionSee AlsoPassing an Array to a Function That Expects a List of ValuesProblemSolutionDiscussionSee AlsoCloning an ArrayProblemSolutionDiscussionSee AlsoMerging Two ArraysProblemSolutionDiscussionSee AlsoCopying a Portion of an Array by PositionProblemSolutionDiscussionSee AlsoExtracting Array Items That Meet Specific CriteriaProblemSolutionDiscussionSee AlsoEmptying an ArrayProblemSolutionDiscussionRemoving Duplicate ValuesProblemSolutionDiscussionSee AlsoFlattening a Two-Dimensional ArrayProblemSolutionDiscussionSearching Through an Array for Exact MatchesProblemSolutionDiscussionSee AlsoSearching Through an Array for Items That Meet Specific CriteriaProblemSolutionDiscussionSee AlsoRemoving or Replacing Array ElementsProblemSolutionDiscussionSorting an Array of Objects by a Property ValueProblemSolutionDiscussionTransforming Every Element of an ArrayProblemSolutionDiscussionCombining an Array’s Values in a Single CalculationProblemSolutionDiscussionSee AlsoValidating Array ContentsProblemSolutionDiscussionSee AlsoCreating a Collection of Nonduplicated ValuesProblemSolutionDiscussionCreating a Key-Indexed Collection of ItemsProblemSolutionDiscussion
6. Functions
Passing a Function as an Argument to Another FunctionProblemSolutionDiscussionSee AlsoUsing Arrow FunctionsProblemSolutionDiscussionSee AlsoProviding a Default Parameter ValueProblemSolutionDiscussionCreating a Function That Accepts Unlimited ArgumentsProblemSolutionDiscussionSee AlsoUsing Named Function ParametersProblemSolutionDiscussionSee AlsoCreating a Function That Stores its State with a ClosureProblemSolutionDiscussionSee AlsoCreating a Generator Function That Yields Multiple ValuesProblemSolutionDiscussionSee AlsoExtra: Building a Repeatable Pseudorandom Number GeneratorReducing Redundancy by Using Partial ApplicationProblemSolutionDiscussionAdvanced: A Partial Function FactoryExtra: Using bind() to Partially Provide ArgumentsFixing this with Function BindingProblemSolutionDiscussionExtra: self = thisImplementing a Recursive AlgorithmProblemSolutionDiscussion
7. Objects
Checking if an Object Is a Certain TypeProblemSolutionDiscussionUsing an Object Literal to Bundle DataProblemSolutionDiscussionSee AlsoExtra: Computed Property NamesChecking If an Object Has a PropertyProblemSolutionDiscussionSee AlsoIterating Over All the Properties of an ObjectProblemSolutionDiscussionSee AlsoTesting for an Empty ObjectProblemSolutionDiscussionMerging the Properties of Two ObjectsProblemSolutionDiscussionCustomizing the Way a Property Is DefinedProblemSolutionDiscussionSee AlsoPreventing Any Changes to an ObjectProblemSolutionDiscussionIntercepting and Changing Actions on an Object with a ProxyProblemSolutionDiscussionCloning an ObjectProblemSolutionDiscussionSee AlsoMaking a Deep Copy of an ObjectProblemSolutionDiscussionCreating Absolutely Unique Object Property KeysProblemSolutionDiscussionCreating Enums with SymbolProblemSolutionDiscussionSee Also
8. Classes
Creating a Reusable ClassProblemSolutionDiscussionSee AlsoExtra: Multiple ConstructorsAdding Properties to a ClassProblemSolutionDiscussionSee AlsoExtra: Private FieldsGiving a Class a Better String RepresentationProblemSolutionDiscussionUsing the Constructor Pattern to Make a Custom ClassProblemSolutionDiscussionSee AlsoSupporting Method Chaining in Your ClassProblemSolutionDiscussionAdding Static Methods to a ClassProblemSolutionDiscussionUsing a Static Method to Create ObjectsProblemSolutionDiscussionInheriting Functionality from Another ClassProblemSolutionDiscussionExtra: Prototype ChainsOrganizing Your JavaScript Classes with ModulesProblemSolutionDiscussionSee Also

9. Asynchronous Programming
Updating the Page During a LoopProblemSolutionDiscussionSee AlsoUsing a Function That Returns a PromiseProblemSolutionDiscussionSee AlsoPromisifying an Asynchronous Function That Uses a CallbackProblemSolutionDiscussionSee AlsoExecuting Multiple Promises ConcurrentlyProblemSolutionDiscussionWaiting for a Promise to Finish with Await and AsyncProblemSolutionDiscussionCreating an Asynchronous Generator FunctionProblemSolutionDiscussionSee AlsoUsing a Web Worker to Perform a Background TaskProblemSolutionDiscussionSee AlsoAdding Progress Support to a Web WorkerProblemSolutionDiscussionSee Also
10. Errors and Testing
Catching and Neutralizing an ErrorProblemSolutionSolutionSee AlsoCatching Different Types of ErrorsProblemSolutionDiscussionSee AlsoCatching Asynchronous ErrorsProblemSolutionDiscussionSee AlsoDetecting Unhandled ErrorsProblemSolutionDiscussionExtra: Logging ToolsThrowing a Standard ErrorProblemSolutionDiscussionSee AlsoThrowing a Custom ErrorProblemSolutionDiscussionSee AlsoWriting Unit Tests for Your CodeProblemSolutionDiscussionSee AlsoExtra: Writing Tests FirstTracking Test Code CoverageProblemSolutionDiscussion
II. JavaScript in the Browser
11. Browser Tools
Debugging JavaScriptProblemSolutionDiscussionAnalyzing Runtime PerformanceProblemSolutionDiscussionIdentifying Unused JavaScriptProblemSolutionDiscussionUsing Lighthouse to Measure Best PracticesProblemSolutionDiscussion
12. Working with HTML
Accessing a Given Element and Finding Its Parent and Child ElementsProblemSolutionDiscussionTraversing the Results from querySelectorAll() with forEach()ProblemSolutionDiscussionAdding Click Functionality to an ElementProblemSolutionDiscussionFinding All Elements That Share an AttributeProblemSolutionDiscussionAccessing All Elements of a Specific TypeProblemSolutionDiscussionSee AlsoDiscovering Child Elements Using the Selectors APIProblemSolutionDiscussionSee AlsoChanging an Element’s Class ValueProblemSolutionDiscussionSetting an Element’s Style AttributeProblemSolutionDiscussionExtra: Accessing an Existing Style SettingAdvancedAdding Text to a New ParagraphProblemSolutionDiscussionInserting a New Element in a Specific DOM LocationProblemSolutionDiscussionChecking If a Checkbox Is CheckedProblemSolutionDiscussionAdding Up Values in an HTML TableProblemSolutionDiscussionExtra: forEach and querySelectorAllExtra: Modularization of GlobalsDeleting Rows from an HTML TableProblemSolutionDiscussionHiding Page SectionsProblemSolutionDiscussionCreating Hover-Based Pop-Up Info WindowsProblemSolutionDiscussionValidating Form DataProblemSolutionDiscussionExtra: HTML5 Form Validation TechniquesHighlighting Form Errors and AccessibilityProblemSolutionDiscussionSee AlsoCreating an Accessible Automatically Updated RegionProblemSolutionDiscussion
13. Fetching Remote Data
Requesting Remote Data with FetchProblemSolutionDiscussionUsing XMLHttpRequestProblemSolutionDiscussionSubmitting a FormProblemSolutionDiscussionPopulating a Selection List from the ServerProblemSolutionDiscussionParsing Returned JSONProblemSolutionDiscussionFetching and Parsing XMLProblemSolutionDiscussionSending Binary Data and Loading into an ImageProblemSolutionDiscussionSharing HTTP Cookies Across DomainsProblemSolutionDiscussionUsing Websockets to Establish a Two-Way Communication Between Client and ServerProblemSolutionDiscussionSee AlsoLong Polling a Remote Data SourceProblemSolutionDiscussion
14. Data Persistence
Persisting Information with CookiesProblemSolutionDiscussionUsing sessionStorage for Client-Side StorageProblemSolutionDiscussionSee AlsoCreating a localStorage Client-Side Data Storage ItemProblemSolutionDiscussionSee AlsoPersisting Larger Chunks of Data on the Client Using IndexedDBProblemSolutionDiscussionSimplifying IndexedDB with a LibraryProblemSolutionDiscussion
15. Working with Media
Adding JavaScript to SVGProblemSolutionDiscussionExtra: Using SVG LibrariesAccessing SVG from a Web Page ScriptProblemSolutionDiscussionCreating an SVG Bar Chart with D3ProblemSolutionDiscussionIntegrating SVG and the Canvas Element in HTMLProblemSolutionDiscussionExtra: Canvas? Or SVG?Running a Routine When an Audio File Begins PlayingProblemSolutionDiscussionControlling Video from JavaScript with the video ElementProblemSolutionDiscussion
16. Writing Web Applications
Bundling JavaScriptProblemSolutionDiscussionExtra: Using npm ModulesJavaScript and the Mobile WebProblemSolutionDiscussionSee AlsoWriting a Progressive Web ApplicationProblemSolutionDiscussionTesting and Profiling a Progressive Web ApplicationProblemSolutionDiscussionGetting the Value of the Current URLProblemSolutionDiscussionRedirecting a URLProblemSolutionDiscussionCopying Text to a User’s ClipboardProblemSolutionDiscussionEnabling a Mobile-Like Notification in the Desktop BrowserProblemSolutionDiscussionExtra: Web Notifications and the Page Visibility APILoading a File Locally in the BrowserProblemSolutionDiscussionExtending the Possible with Web ComponentsProblemSolutionDiscussionChoosing a Front-End FrameworkProblemSolutionReactVueSvelteAngular
III. Node.js
17. Node Basics
Managing Node Versions with Node Version ManagerProblemSolutionDiscussionResponding to a Simple Browser RequestProblemSolutionDiscussionInteractively Trying Out Node Code Snippets with REPLProblemSolutionDiscussionExtra: Wait a Second, What Global Object?Reading and Writing File DataProblemSolutionDiscussionAdvancedGetting Input from the TerminalProblemSolutionDiscussionSee AlsoGetting the Path to the Current ScriptProblemSolutionDiscussionWorking with Node Timers and Understanding the Node Event LoopProblemSolutionDiscussion
18. Node Modules
Searching for a Specific Node Module via npmProblemSolutionDiscussionConverting Your Library into a Node ModuleProblemSolutionDiscussionSee AlsoTaking Your Code Across Module EnvironmentsProblemSolutionDiscussionSee AlsoCreating an Installable Node ModuleProblemSolutionDiscussionExtra: The README File and Markdown SyntaxWriting Multiplatform LibrariesProblemSolutionDiscussionUnit Testing Your ModulesProblemSolutionDiscussion
19. Managing Node
Using Environment VariablesProblemSolutionDiscussionManaging Callback HellProblemSolutionDiscussionAccessing Command-Line Functionality Within a Node ApplicationProblemSolutionDiscussionExtra: Using Child Processes with WindowsPassing Command-Line ArgumentsProblemSolutionDiscussionCreating a Command-Line Utility with Help from CommanderProblemSolutionDiscussionKeeping a Node Instance Up and RunningProblemSolutionDiscussionMonitoring Application Changes and Restarting During Local DevelopmentProblemsSolutionDiscussionScheduling Repeat TasksProblemSolutionDiscussionTesting the Performance and Capability of Your WebSockets ApplicationProblemSolutionDiscussion
20. Remote Data
Fetching Remote DataProblemSolutionDiscussionScreen ScrapingProblemSolutionDiscussionAccessing JSON-Formatted Data via a RESTful APIProblemSolutionDiscussionSee Also
21. Building Web Applications with Express
Using Express to Respond to RequestsProblemSolutionDiscussionUsing the Express-GeneratorProblemSolutionDiscussionRoutingProblemSolutionDiscussionWorking with OAuthProblemSolutionDiscussionOAuth 2 User Authentication with Passport.jsProblemSolutionDiscussionServing Up Formatted DataProblemSolutionDiscussionBuilding a RESTful APIProblemSolutionDiscussionBuilding a GraphQL APIProblemSolutionDiscussion
Index

Content preview from JavaScript Cookbook, 3rd Edition

Chapter 11. Browser Tools

As a web developer, the browser is the window through which the world accesses your creations. It also provides helpful tooling for developing and testing your sites. It is a worthwhile investment to learn how to use your browser’s development tools so that you may better and more easily debug your code. In this chapter we’ll cover several useful features for debugging, profiling, and analyzing JavaScript.

For simplicity, all of the examples in this book will make use of Google Chrome’s Developer Tools (DevTools). At the time of writing, Chrome’s usage makes up over 65% of the global browser share. Most other browsers offer similar functionality. Mozilla’s Firefox Developer Edition is an excellent alternative with useful developer features.

Debugging JavaScript

Problem

You need to know the value of a variable at a specific point in your JavaScript code’s execution.

Solution

Use a breakpoint to inspect code values and types. When setting a breakpoint, the browser’s debugger will stop at the point of the breakpoint’s code execution and display each of the current values in scope. It is then possible to step through the code or allow the JavaScript to finish executing. Figure 11-1 shows a screenshot of code paused on a breakpoint.

A screenshot of the Chrome debugger with a breakpoint set

To set a breakpoint on a specific line of JavaScript ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781492055747Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills