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....700

Installing 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....733

Testing 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

JavaScript All-in-One For Dummies saves you shelf space by offering a complete introduction to JavaScript and how it's used in the real world. This book serves up JavaScript coding basics before diving into the libraries, frameworks, and runtime environments new and experienced coders need to know. Start by learning the basics of JavaScript—anyone can do it, even if you've never written code before. Then go into the details of today's hottest frameworks—React.js, Vue.js, Svelte, and Node.js. Cozy up and learn some JavaScript!

• Learn the basics of web and application development with the JavaScript language
• Work with React, Vue, Svelte, Node.js, and the real-world tools that professionals use
• Gain a highly marketable skill, with one of the most popular coding languages
• Launch or further your career as a coder with easy-to-follow instruction

This is the go-to Dummies guide for future and current coders who need an all-inclusive guide JavaScript.