JavaScript® All-in-One For Dummies®

Title Page....3 Copyright Page....4 Table of Contents....7 Introduction....25 Why This Book?....26 JavaScript is a huge topic....26 How this book is different....27 Learn JavaScript as it’s used....27 Understand similarities between the most popular libraries....27 Adapt to new technologies....28 Conventions Used in This Book....28 Foolish Assumptions....29 Icons Used in This Book....29 Beyond the Book....30 Where to Go from Here....30 Book 1 JavaScript Fundamentals....31 Chapter 1 Jumping into JavaScript....33 JavaScript, the Basics....33 JavaScript is a programming language....34 A look at programming language levels....34 Machine code is processor-specific....34 High-level languages are abstractions....34 Compilation makes programs portable....35 A short and epic history of JavaScript....36 The two superpowers....36 The early battles....38 Eich is back with a brand-new invention....38 Imitation is the sincerest form of flattery....38 The long road to standardization....38 How JavaScript changes....39 Reading and Copying JavaScript Code....39 How the web works....39 Front end and back end....40 The front end is open, the back end is closed....42 The value of a service....45 JavaScript on the server....46 Starting Your Development Environment....46 Installing Visual Studio Code....47 Learning to use Visual Studio Code....49 Creating a new project....49 Learning the one essential command....51 Writing Your First JavaScript Program....53 JavaScript is made of statements....54 JavaScript is case-sensitive....55 JavaScript ignores white space....55 JavaScript programmers use camelCase and underscores....56 camelCase....56 Underscore....56 Dashes....56 Running Code in the Console....57 Rerunning Commands in the Console....58 Running Code in a Browser Window....59 Running JavaScript from HTML event attributes....59 Running HTML inside script elements....60 Including JavaScript files in your HTML....61 Chapter 2 Filling Your JavaScript Toolbox....65 Installing Node.js....67 Configuring Visual Studio Code....67 Getting prettier....68 Installing Live Server....71 Documenting Your Code....75 Line comments....75 Block comments....75 The README file....76 The basics of Markdown....77 Coding Responsibly with Git....79 Introducing Git....79 Installing Git....80 Configuring and testing Git....81 Learning the basics of Git....84 Moving forward with Git and GitHub....86 Chapter 3 Using Data....87 Making Variables with let....87 Declaring variables....88 Initializing variables....88 Using variables....88 Naming variables....90 Making Constants with const....90 When to use constants....91 Naming constants....91 Taking a Look at the Data Types....92 JavaScript is loose and dynamic....92 Passing by value....93 String data type....93 Escaping characters....94 Creating strings with template literal notation....94 Working with string functions....95 Number data type....97 Working with number functions....97 Knowing when to convert between strings and numbers....98 bigInt data type....98 Boolean data type....99 Converting to Boolean....99 Getting Truthy and Falsy....100 NaN data type....101 Undefined data type....101 Symbol data type....101 Wrangling the Object: The Complex Data Type....102 Examining the Array — a Special Kind of Object....103 Getting a Handle on Scope....104 Chapter 4 Working with Operators and Expressions....105 Building Expressions....106 Operators: The Lineup....107 Operator precedence....107 Using parentheses....108 Assignment operators....109 Comparison operators....109 Arithmetic operators....110 Concatenation operator....110 Logical operators....111 Combining operators....113 Other Operators....113 Chapter 5 Controlling Flow....115 Choosing a Path....115 if . . . else statements....115 Multiple paths with if else....116 The ternary operator....116 Switch statements....117 Making Loops....121 for loops....121 for . . . in loops....122 for . . . of loops....124 while loops....124 do . . . while loops....125 break and continue statements....126 Chapter 6 Using Arrays....129 Introducing Arrays....130 Creating Arrays....132 Using the Array() constructor....132 Using array literal notation....133 Using the split function....133 Accessing Array Elements....134 Modifying Arrays....135 Deleting Array Elements....135 Programming with Array Methods....136 Pushing and popping....137 Shifting and unshifting....138 Slicing an array....140 Splicing an array....140 Looping with Array Methods....141 Passing callback functions to array methods....141 Reducing an array....142 Mapping an array....143 Filtering arrays....145 Destructuring Arrays....146 Spreading Arrays....146 Chapter 7 Making and Using Objects....149 Objects: The Basics....149 Creating Objects....151 Making objects using literal notation....151 Making objects using a constructor function....152 Making objects with class....152 Making objects with Object.create()....154 Modifying Objects....154 Using dot notation....154 Using square brackets notation....155 Comparing and Copying Objects....156 Understanding Prototypes....158 Deleting Object Properties....162 Chapter 8 Writing and Running Functions....163 Functions: An Introduction....164 Using Top-level functions....165 Using methods of built-in objects....166 Passing by value....166 Passing by reference....167 Writing Functions....168 Naming functions....168 Passing arguments....169 Using rest parameters....169 Using the arguments object....170 Passing functions as arguments....170 Setting default parameters....171 Writing a function body....172 Returning data....173 Using a return value as an argument....173 Creating conditional code with return....173 Function declaration scope and hoisting....174 Declaring Anonymous functions....174 Defining function expressions....174 Writing anonymous functions as arrow functions....176 Simplifying arrow functions....176 Knowing the limits of arrow functions....178 Arrow functions don't have this....178 Arrow functions don't have the arguments object....178 Writing Methods....178 Understanding Context and this....179 Passing an object to a function....180 Setting the context of a function....181 Using call()....181 Using apply()....181 Using bind()....182 Passing a function from one object to another....182 Passing a function to a child to change the parent....183 Chaining Functions....189 Chapter 9 Getting Oriented with Classes....191 Encapsulation....192 Abstraction....192 Inheritance....193 Polymorphism....193 Base Classes....193 Recognizing that classes aren’t hoisted....194 Using class expressions....194 Making instances of base classes....194 Derived Classes....194 Constructors....195 Properties and Methods....197 Creating methods in a class....197 Overriding methods in a derived class....198 Defining methods, properties, and fields....198 Public members....199 Private members....199 Static members....200 Practicing and Becoming comfortable with Classes....201 Chapter 10 Making Things Happen with Events....205 Understanding the JavaScript Runtime Model....206 Stacking function calls....206 Heaping objects....207 Queuing messages....207 The Event Loop....207 JavaScript is single-threaded....207 Messages run until they’re done....208 Listening for Events....208 Listening with HTML event attributes....209 Listening with Event handler properties....209 Using addEventListener()....210 Selecting your event target....210 Setting addEventListener()’s parameters....210 The Event object....214 Listening on multiple targets....214 Dispatching events programmatically....216 Triggering built-in events....217 Creating and triggering custom events....218 Removing event listeners....218 Preventing default actions....219 Chapter 11 Writing Asynchronous JavaScript....221 Understanding Asynchronous JavaScript....222 Reading synchronous code....222 Events to the rescue....223 Calling you back....224 Making Promises....226 Writing promises....227 Introducing async functions....230 Converting nested callbacks to async functions....231 Converting promise chains to async functions....232 Handling errors with async/await....234 Using AJAX....234 Getting data with the Fetch API....235 Getting a response with fetch()....235 Parsing the Response....236 Calling other Response methods....237 Response.blob()....237 Response.text()....238 Handling fetch() errors....238 The fetch init object....239 Introducing HTTP....240 The request method....241 HTTP status codes....241 Making requests with CORS....242 Making a simple request....242 Making a non-simple request....243 Working with JSON data....244 Getting JSON data....246 Sending JSON data....246 Chapter 12 Using JavaScript Modules....247 Defining Modules....248 Exporting Modules....248 Named exports....249 Default exports....249 Importing Modules....251 Importing named modules....251 Importing default modules....251 Renaming Exports and Imports....252 Importing a Module Object....252 Loading Dynamic Modules....253 Importing Modules into HTML....253 Book 2 Meet Your Web Browser....255 Chapter 1 What a Web Browser Does....257 Interfacing with a Browser....258 Introducing the Browser Engine....259 The Rendering Engine....259 The JavaScript engine....261 Identifying and preventing render blocking....261 Unblocking your code with async and defer....262 Networking....263 Data storage....263 Chapter 2 Programming the Browser....265 Understanding Web APIs and Interfaces....265 Hooking into interfaces....266 Built-in browser APIs....266 Custom APIs....267 Getting Around the Navigator....267 Inspecting the navigator’s quirks....268 Navigator properties....268 Stealing a Glimpse Through the Window....270 Window properties....271 Window methods....271 Introducing the HTML DOM....273 Document properties....273 Document methods....274 Selecting element nodes....275 Selecting with getElementById()....276 Selecting using selectors....276 Creating and adding elements to the DOM....278 Element nodes....279 Element methods....280 Knowing Your History....281 Book 3 React....285 Chapter 1 Getting Started with React....287 Understanding ReactJS....287 Distilling “Thinking in React”....288 Building a React UI....289 Step 1: Design the component hierarchy....289 Step 2: Build a static version in React....290 Step 3: Identify the state....292 Step 4: Determine where the state should live....293 Step 5: Implement inverse data flow....293 React is component-based....294 React is declarative....295 React is just JavaScript....295 Initializing a Project with Vite....295 Introducing Vite....296 Launching the VS Code terminal....296 Touring the structure of a React app....298 node_modules....299 public....299 src....299 .gitignore....300 package-lock.json....300 package.json....300 vite.config.js....300 Modifying a React project....301 Introducing ReactDOM and the Virtual DOM....302 Chapter 2 Writing JSX....305 Learning the Fundamentals of JSX....305 JSX is not HTML....306 JSX is XML....306 Transpiling with Babel....307 Writing HTML output with JSX....307 Using built-in components....308 Attributes that are different in JSX....308 JSX uses camelCase....308 JSX must be valid XML....309 Using JavaScript Expressions in JSX....309 Conditionally Rendering JSX....310 Conditional rendering with element variables....311 Conditional rendering with &&....312 Conditional rendering with the conditional operator....313 Making a List....314 Styling React Apps and Components....316 Adding global styles....316 Using local styles....317 Using the style attribute....317 Using style objects....318 Making style modules....319 Other style strategies....320 Chapter 3 Building React Components....321 Thinking in Components....322 Designing your own elements....322 Returning valid values....324 Recognizing the Two Types of Data....324 Props....324 Getting reactive with state....325 How state enables reactivity....328 Function Components....328 Functions are stateless....329 Introducing useState()....329 Class Components....331 The Component Lifecycle....333 The mounting methods....333 Kicking it off with the constructor....333 Getting the derived state....334 Rendering the output....334 Finishing the mount....336 The updating methods....337 Optimizing with shouldComponentUpdate()....337 Getting a snapshot....338 Finishing the update....339 Unmounting a component....339 Using the Lifecycle in Function Components....340 Running effects less often....341 Performing an effect on unmounting....343 Composing Components....345 How inheritance works in object-oriented programming....345 Composition using explicit props....346 Composition using the children prop....347 Composition with custom hooks....348 Chapter 4 Using Data and Events in React....351 Event Handling in React....352 Using event attributes....352 Dispatching Synthetic Events....352 Specifying a handler function....353 Passing arguments to an event handler....353 Passing functions as props....354 Defining event handlers in class components....354 Defining methods using arrow syntax....356 Passing event handler functions from function components....357 Making Forms with React....358 Using controlled inputs....359 Using uncontrolled forms....361 Book 4 Vue....365 Chapter 1 Getting an Overview of Vue....367 Comparing Vue to React....367 Scaffolding Your First Vue.js Application....368 Bootstrapping with vue-create....368 Installing Volar....370 Exploring the structure of a Vue app....371 Going to the src....372 Mounting a Root Component....372 Configuring an app....373 Mounting multiple apps....373 Exploring Vue's Two Styles....374 The Options API....374 The Composition API....376 Deciding which API to use....376 Installing Vue DevTools....377 Chapter 2 Introducing Vue Components....381 Introducing the Single-File Component....381 The script element....382 The setup() function....382 The setup shortcut....384 Naming Components....386 Following the Component Lifecycle....386 onMounted()....386 onUpdated()....389 onUnmounted()....389 onBeforeMount()....390 onBeforeUpdate()....390 onBeforeUnmount()....390 onErrorCaptured()....390 Handling Errors in Components....390 Chapter 3 Making Vue Templates....393 Writing HTML Templates....393 Using JavaScript in Templates....395 Calling functions....396 JavaScript in templates is restricted....396 Using globals in templates....397 Introducing Directives....397 Built-in directives....397 Directive shorthand names....399 Passing arguments to directives....399 Dynamic arguments....399 Directive modifiers....399 Custom directives....400 Conditional Rendering....402 Conditional rendering with JavaScript....402 Conditional rendering using directives....402 Using v-show....402 Using v-if, v-else, and v-else-if....403 Rendering Lists....403 Using v-for with numbers and strings....404 Using v-for with objects....404 Using v-for with arrays....406 Specifying a key....407 Composing with Slots....407 Specifying fallback content....409 Naming slots....410 Adding Style to Components....411 Global CSS....411 Scoped CSS....412 Multiple style blocks....413 CSS modules....414 v-bind in CSS....415 Chapter 4 Using Data and Reactivity....419 Passing and Using Props....420 Defining props with ....420 Defining props with setup()....421 Binding Data to Templates....422 Initializing and Changing Reactive Data....424 reactive() creates a Proxy object....425 Limitations of reactive()....426 Introducing ref()....427 Experimenting with Reactivity Transform....428 Computing Properties....429 Reacting to State Changes with Watch()....432 Chapter 5 Responding to Events....435 Setting Listeners with v-on....435 Inline handlers....435 Method handlers....437 Choosing between method and inline handlers....438 Using Event Modifiers....440 Using key modifiers....441 Detecting exact combinations....443 Binding Forms to Events and Data....443 Making two-way bindings with v-model....444 Using v-model with various input types....444 Book 5 Svelte....445 Chapter 1 Getting Started with Svelte....447 What Makes Svelte Different?....447 Building Your Scaffolding....449 Getting the Svelte for VS Code Extension....450 Exploring a Svelte App....451 Playing with Svelte....455 Building the basic look-and-feel....455 Making reactive data....456 Handling the event....459 Chapter 2 Building with Components....461 Writing Lean Components....461 Identifying What’s in a Component....463 Scripting in Svelte components....463 Exporting and using props....464 Defining props....464 Passing props....464 Triggering reactivity with assignments....466 Recognizing that array methods don’t trigger updates....466 Creating reactive statements....469 Using <script> data and functions....470 Adding Style to a Component....471 Chapter 3 Designing Templates....475 Elements Are the Building Blocks....475 Using the built-in elements....475 No adjustments necessary....476 Some attributes don’t require quotes....476 Using custom elements....476 Documenting Svelte with Comments....477 Choosing a Path....478 Creating Loops....480 Writing Text Expressions....482 Composing with Slots....483 Chapter 4 Using Directives....487 Listening for Events with on:....487 Basic event handling....488 Attaching modifiers to event listeners....488 Forwarding events....489 Handling multiple events....490 Creating Two-Way Bindings with :bind....490 Recognizing that number inputs create numbers....491 Binding select inputs....491 Using Transition Animations....492 Creating your first transition....492 Passing arguments to transitions....494 Creating unidirectional transitions....494 Chapter 5 Using the Component Lifecycle....495 The Svelte Lifecycle....495 Mounting....496 Using beforeUpdate() and afterUpdate()....497 Using onDestroy()....497 Getting ticks....498 Fetching Data in Svelte....500 Refreshing data....501 Awaiting asynchronous requests....503 Chapter 6 Advanced Svelte Reactivity....507 Constructing and Stocking the Store....507 Creating a writable store....508 Creating a readable store....508 Subscribing to a store....509 Unsubscribing from a store....509 Setting and updating a store....510 Using the reactive shortcut....511 Store starting and stopping functions....512 Getting and Setting Context....514 Book 6 Sharpening Your Tools....517 Chapter 1 Building from Scratch....519 Why You Need a Build Tool....520 "Back in my day . . ."....520 The road to dependency hell....521 Enter package management....521 Managing Dependencies with npm....521 Initializing a project....521 Learning the parts of package.json....524 Metadata in package.json....524 Npm scripts....524 Dependencies....525 Reading semver....525 Using the node_modules folder....526 Local-versus-global installs....527 Updating npm....527 Writing Your First Files....527 Writing a dev Script....529 Making Modules....530 Refactoring index.js....530 The moveBall() function....531 The generateMap() function....532 Adding style....533 Testing for collisions....534 Testing it out....535 Chapter 2 Optimizing and Bundling....537 Automating Your Build Script....537 Installing and using a module bundler....538 Configuring your dev server....539 Building it up....542 Copying static assets....543 Cleaning up....544 Converting to React....546 Configuring Webpack for React....546 Converting the UI to React....548 Detecting collisions....555 Chapter 3 Testing Your JavaScript....559 Using a Linter....560 Debugging in Chrome....566 Getting started with the Sources panel....566 Building a source map....566 Editing your code in the Sources panel....568 Setting breakpoints....568 Using watch expressions....570 Unit Testing....571 Installing and configuring Jest....571 Writing your first test....572 Learning how Jest works....574 Test suites....574 Test specs....574 Expectations....575 Writing better code through testing....576 Using testing-library....577 Book 7 Node.js....581 Chapter 1 Node.js Fundamentals....583 Learning What Makes Node.js Tick....584 Node.js is not a programming language....584 Node.js is not a framework....584 Node.js is a runtime environment....584 Web browsers are runtime environments, too....585 Node.js lets JavaScript out of the sandbox....585 Why developers need Node.js....585 Learning the Parts of Node.js....586 The V8 engine....587 libuv....587 Node.js bindings....588 The Node.js standard library....588 Introducing the Node.js Core Modules....588 Recognizing What Node.js Is Good For....590 Why is Node.js so fast?....590 What is Node.js not good at?....591 Working with Node.js....591 Writing a Node.js program....592 Monitoring your script....593 Running a code on the command line....594 Using REPL....594 Playing with the Node.js REPL....594 Working with REPL commands....597 Making and Using Node.js Modules....599 Using CommonJS....599 Using ES modules....601 Setting the module type in package.json....603 Getting Data to Node Modules....604 Environment variables....605 Setting environment variables from the command line....606 Setting environment variables with .env....606 Passing arguments....608 Node’s Callback Pattern....608 Chapter 2 Streaming....611 Jumping into Streams....611 Chunking is the key....612 Loading without streams....612 Converting to streams....613 Viewing chunks....614 Identifying types of streams....616 Creating Readable Streams....616 Reading readable streams from the fs module....617 Distinguishing between the two read modes....618 Flowing mode....618 Paused mode....619 Creating Writable Streams....620 Producing Duplex Streams....622 Backpressure....622 PassThrough....623 Transforming Streams....623 Chaining Streams....624 Chapter 3 Working with Buffers....627 Knowing Your Buffer Basics....627 Differentiating between encoding and decoding....628 Examining buffer content....629 Decoding Buffers....630 Creating Buffers....631 Using Other Buffer Methods....633 Iterating over Buffers....635 Chapter 4 Accessing the File System....637 Importing the fs module....637 Reading Files....638 Reading from a file with fs.read()....638 Opening a file with fs.open() and callbacks....638 Opening, writing to, and closing a file using Promises....640 Using readFile()....641 Using readFileSync()....642 Writing Files....643 Writing it to disk with fs.write()....643 Using fs.writeFile()....644 Using Paths....645 Getting File and Directory Information....647 Listing the files in a directory....647 Finding directories....648 Getting file stats....648 Chapter 5 Networking with Node....651 A Note about Security....652 Making a Web Server....654 Understanding the Request object....656 Understanding the response object....657 The response header....657 The response body....659 Methods of the response object....660 The writeHead() method....660 The end() method....660 The write() method....661 Using implicit headers....661 Knowing the differences between setHeader() and writeHead()....661 Chapter 6 Using Events....663 Introducing EventEmitter....664 Creating custom events....664 Extending EventEmitter....665 Passing arguments to listeners....666 Using this in an event handler function....666 Using arrow functions as event handlers....667 Understanding and Using maxListeners....668 Finding the value of defaultMaxListeners....668 Exceeding the maximum listeners for an emitter....669 Increasing the maximum number of listeners....670 Removing Listeners....671 Removing individual listeners....671 Removing all listeners....672 Emitting Once....673 Chapter 7 Error Handling and Debugging....675 Knowing the Types of Errors....675 Operational errors....676 Programmer errors....676 Understanding Node.js’s Error Object....677 Reading error.stack....678 Reading a stack frame....678 Exceptions versus Errors....678 Handling Exceptions....679 Catching exceptions with promises....680 Creating an uncaught Promise rejection....680 Catching a promise rejection....681 Using finally()....682 Catching exceptions with async functions....683 Debugging Node.js Programs....684 Using the command-line debugger....687 Debugging in Chrome DevTools....691 Adding a workspace....693 Setting breakpoints....693 Setting a watch expression....695 Setting log points....695 Learning more about Chrome's DevTools Inspect interface....696 Chapter 8 Accessing Databases....697 Getting Started with MongoDB....698 Discerning between relational and NoSQL databases....698 Data types in relational databases....700 Data types in NoSQL databases....700Installing MongoDB....701 Installing MongoDB on Windows....701 Installing MongoDB on macOS....704 Installing MongoDB on Linux....704 Starting MongoDB....704 Starting MongoDB on Windows....705 Starting MongoDB on macOS....705 Using Mongosh....705 Connecting to MongoDB and creating a database....705 Creating a collection....706 Making an id and listing documents....706 Finding documents....708 Returning fewer fields....708 Sorting lists....708 Limiting lists....709 Making complex queries using operators....709 Learning MongoDB Shell commands....710 Working with users and roles....711 Using MongoDB from Node.js....712 Installing the Node.js driver....713 Connecting to a MongoDB server....713 Inserting documents into a collection....715 Getting data....717 Database operations are asynchronous....717 Using a Cursor object....717 Using results in your program....718 Using findOne()....718 Examining your Find options....718 Updating data....719 Update options....719 Combining update and insert....719 Deleting data....720 Chapter 9 Riding on the Express Train....721 Installing Express....721 Server-Side Routing with Express....723 Introducing routing methods....723 Using routing methods....723 String paths....723 Path patterns....724 Path regular expressions....724 Path parameters....725 Using Express Middleware....725 The next() function....726 Types of middleware....726 Application-level middleware....727 Router-level middleware....727 Error-handling middleware....728 Built-in middleware....729 Third-party middleware....730 Serving static files....730 Analyzing a Complete Express Server....731 Installing the server and dependencies....733 Setting up a REST client....733Testing the API server....735 Serving a View....737 Benefiting from a template engine....737 Introducing Pug....738 Using the Express Application Generator....739 Chapter 10 Registration and Authentication....745 Making and Configuring the Directory....746 Adding the App and Server Modules....747 Making Some Basic Routes....749<br> Testing Your Routes....752 Making a Schema with Mongoose....754 Using mongoose.Schema and mongoose.model....754 Installing Mongoose and connecting to a database....755 Creating the User model....757 Create the post model....758 Implementing User Registration....758 Understanding the basics of authentication....759 Programming the user sign-up route....759 Understanding password security....760 Understanding hashes....760 Adding salt to hashing....762 Hashing and saving....762 Testing user registration....764 Handling Authentication....765 Generating and Using Tokens....768 Recognizing that tokens must expire....768 Sending a refresh token....769 Handling tokens securely....769 Understanding XSS attacks....769 Finishing the Login Route....770 Testing the login route....773 Looking at an access token....774 Using an access token....775 Index....779 EULA....819