JavaScript All-in-One For Dummies - Chris Minnick - E-Book

JavaScript All-in-One For Dummies E-Book

Chris Minnick

0,0
25,99 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.
Mehr erfahren.
Beschreibung

A developer's resource to learning one of the most-used scripting languages 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 tools, libraries, frameworks, and runtime environments new and experienced coders need to know. Start by learning the basics of JavaScript and progress through the techniques and tools used by professional JavaScript developers, even if you've never written code before. You also get the details of today's hottest libraries and frameworks--React.js, Vue.js, Svelte, and Node.js. * Learn the basics of web and application development with the JavaScript language * Grasp the similarities and differences between React.js, Vue.js, and Svelte * Discover how to write server-side JavaScript and how to access databases with Node.js * 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. This is the go-to Dummies guide for future and current coders who need an all-inclusive guide to the world of JavaScript.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern

Seitenzahl: 871

Veröffentlichungsjahr: 2023

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



JavaScript® All-in-One For Dummies®

Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com

Copyright © 2023 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc., and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: WHILE THE PUBLISHER AND AUTHORS HAVE USED THEIR BEST EFFORTS IN PREPARING THIS WORK, THEY MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES REPRESENTATIVES, WRITTEN SALES MATERIALS OR PROMOTIONAL STATEMENTS FOR THIS WORK. THE FACT THAT AN ORGANIZATION, WEBSITE, OR PRODUCT IS REFERRED TO IN THIS WORK AS A CITATION AND/OR POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE PUBLISHER AND AUTHORS ENDORSE THE INFORMATION OR SERVICES THE ORGANIZATION, WEBSITE, OR PRODUCT MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING PROFESSIONAL SERVICES. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR YOUR SITUATION. YOU SHOULD CONSULT WITH A SPECIALIST WHERE APPROPRIATE. FURTHER, READERS SHOULD BE AWARE THAT WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. NEITHER THE PUBLISHER NOR AUTHORS SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHER DAMAGES.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit https://hub.wiley.com/community/support/dummies.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2023933800

ISBN 978-1-119-90683-4 (pbk); ISBN 978-1-119-90684-1 (ebk); ISBN 978-1-119-90685-8 (ebk)

JavaScript® All-in-One For Dummies®

To view this book's Cheat Sheet, simply go to www.dummies.com and search for “JavaScript All-in-One For Dummies Cheat Sheet” in the Search box.

Table of Contents

Cover

Title Page

Copyright

Introduction

Why This Book?

Conventions Used in This Book

Foolish Assumptions

Icons Used in This Book

Beyond the Book

Where to Go from Here

Book 1: JavaScript Fundamentals

Chapter 1: Jumping into JavaScript

JavaScript, the Basics

Reading and Copying JavaScript Code

Starting Your Development Environment

Writing Your First JavaScript Program

Running Code in the Console

Rerunning Commands in the Console

Running Code in a Browser Window

Chapter 2: Filling Your JavaScript Toolbox

Installing Node.js

Configuring Visual Studio Code

Documenting Your Code

Coding Responsibly with Git

Chapter 3: Using Data

Making Variables with let

Making Constants with const

Taking a Look at the Data Types

Wrangling the Object: The Complex Data Type

Examining the Array — a Special Kind of Object

Getting a Handle on Scope

Chapter 4: Working with Operators and Expressions

Building Expressions

Operators: The Lineup

Other Operators

Chapter 5: Controlling Flow

Choosing a Path

Making Loops

Chapter 6: Using Arrays

Introducing Arrays

Creating Arrays

Accessing Array Elements

Modifying Arrays

Deleting Array Elements

Programming with Array Methods

Looping with Array Methods

Destructuring Arrays

Spreading Arrays

Chapter 7: Making and Using Objects

Objects: The Basics

Creating Objects

Modifying Objects

Comparing and Copying Objects

Understanding Prototypes

Deleting Object Properties

Chapter 8: Writing and Running Functions

Functions: An Introduction

Writing Functions

Writing Methods

Understanding Context and this

Chaining Functions

Chapter 9: Getting Oriented with Classes

Encapsulation

Abstraction

Inheritance

Polymorphism

Base Classes

Derived Classes

Constructors

Properties and Methods

Practicing and Becoming comfortable with Classes

Chapter 10: Making Things Happen with Events

Understanding the JavaScript Runtime Model

The Event Loop

Listening for Events

Chapter 11: Writing Asynchronous JavaScript

Understanding Asynchronous JavaScript

Making Promises

Using AJAX

Chapter 12: Using JavaScript Modules

Defining Modules

Exporting Modules

Importing Modules

Renaming Exports and Imports

Importing a Module Object

Loading Dynamic Modules

Importing Modules into HTML

Book 2: Meet Your Web Browser

Chapter 1: What a Web Browser Does

Interfacing with a Browser

Introducing the Browser Engine

The Rendering Engine

Networking

Chapter 2: Programming the Browser

Understanding Web APIs and Interfaces

Getting Around the Navigator

Stealing a Glimpse Through the Window

Introducing the HTML DOM

Knowing Your History

Book 3: React

Chapter 1: Getting Started with React

Understanding ReactJS

Initializing a Project with Vite

Introducing ReactDOM and the Virtual DOM

Chapter 2: Writing JSX

Learning the Fundamentals of JSX

Using JavaScript Expressions in JSX

Conditionally Rendering JSX

Making a List

Styling React Apps and Components

Chapter 3: Building React Components

Thinking in Components

Recognizing the Two Types of Data

Function Components

Class Components

The Component Lifecycle

Using the Lifecycle in Function Components

Composing Components

Chapter 4: Using Data and Events in React

Event Handling in React

Making Forms with React

Book 4: Vue

Chapter 1: Getting an Overview of Vue

Comparing Vue to React

Scaffolding Your First Vue.js Application

Mounting a Root Component

Exploring Vue's Two Styles

Installing Vue DevTools

Chapter 2: Introducing Vue Components

Introducing the Single-File Component

Naming Components

Following the Component Lifecycle

Handling Errors in Components

Chapter 3: Making Vue Templates

Writing HTML Templates

Using JavaScript in Templates

Introducing Directives

Conditional Rendering

Rendering Lists

Composing with Slots

Adding Style to Components

Chapter 4: Using Data and Reactivity

Passing and Using Props

Binding Data to Templates

Initializing and Changing Reactive Data

Introducing ref()

Computing Properties

Reacting to State Changes with Watch()

Chapter 5: Responding to Events

Setting Listeners with v-on

Using Event Modifiers

Binding Forms to Events and Data

Book 5: Svelte

Chapter 1: Getting Started with Svelte

What Makes Svelte Different?

Building Your Scaffolding

Getting the Svelte for VS Code Extension

Exploring a Svelte App

Playing with Svelte

Chapter 2: Building with Components

Writing Lean Components

Identifying What's in a Component

Adding Style to a Component

Chapter 3: Designing Templates

Elements Are the Building Blocks

Documenting Svelte with Comments

Choosing a Path

Creating Loops

Writing Text Expressions

Composing with Slots

Chapter 4: Using Directives

Listening for Events with on:

Creating Two-Way Bindings with :bind

Using Transition Animations

Chapter 5: Using the Component Lifecycle

The Svelte Lifecycle

Fetching Data in Svelte

Chapter 6: Advanced Svelte Reactivity

Constructing and Stocking the Store

Getting and Setting Context

Book 6: Sharpening Your Tools

Chapter 1: Building from Scratch

Why You Need a Build Tool

Managing Dependencies with npm

Writing Your First Files

Writing a dev Script

Making Modules

Chapter 2: Optimizing and Bundling

Automating Your Build Script

Converting to React

Chapter 3: Testing Your JavaScript

Using a Linter

Debugging in Chrome

Unit Testing

Book 7: Node.js

Chapter 1: Node.js Fundamentals

Learning What Makes Node.js Tick

Learning the Parts of Node.js

Introducing the Node.js Core Modules

Recognizing What Node.js Is Good For

Working with Node.js

Using REPL

Making and Using Node.js Modules

Getting Data to Node Modules

Node's Callback Pattern

Chapter 2: Streaming

Jumping into Streams

Creating Readable Streams

Creating Writable Streams

Producing Duplex Streams

Transforming Streams

Chaining Streams

Chapter 3: Working with Buffers

Knowing Your Buffer Basics

Decoding Buffers

Creating Buffers

Using Other Buffer Methods

Iterating over Buffers

Chapter 4: Accessing the File System

Importing the fs module

Reading Files

Writing Files

Using Paths

Getting File and Directory Information

Chapter 5: Networking with Node

A Note about Security

Making a Web Server

Chapter 6: Using Events

Introducing EventEmitter

Understanding and Using maxListeners

Removing Listeners

Emitting Once

Chapter 7: Error Handling and Debugging

Knowing the Types of Errors

Understanding Node.js's Error Object

Exceptions versus Errors

Handling Exceptions

Debugging Node.js Programs

Chapter 8: Accessing Databases

Getting Started with MongoDB

Starting MongoDB

Using Mongosh

Using MongoDB from Node.js

Chapter 9: Riding on the Express Train

Installing Express

Server-Side Routing with Express

Using Express Middleware

Analyzing a Complete Express Server

Serving a View

Using the Express Application Generator

Chapter 10: Registration and Authentication

Making and Configuring the Directory

Adding the App and Server Modules

Making Some Basic Routes

Testing Your Routes

Making a Schema with Mongoose

Implementing User Registration

Handling Authentication

Generating and Using Tokens

Finishing the Login Route

Index

About the Author

Connect with Dummies

End User License Agreement

List of Tables

Book 1 Chapter 3

TABLE 3-1 JavaScript Special Characters

Book 1 Chapter 4

TABLE 4-1 JavaScript Comparison Operators

TABLE 4-2 Arithmetic Operators

TABLE 4-3 Logical Operators

Book 1 Chapter 6

TABLE 6-1 JavaScript Array Methods

Book 1 Chapter 8

TABLE 8-1 The Built-In Top-Level Functions in JavaScript

Book 1 Chapter 10

TABLE 10-1 Events Supported by All HTML Elements

Book 2 Chapter 2

TABLE 2-1 Examples of

Window

Interface Properties

TABLE 2-2 Commonly-Used Methods of the

Window

Interface

TABLE 2-3 Important Properties of the Document Interface

TABLE 2-4 The Most Common Document Methods

TABLE 2-5 Properties of the Element Interface

TABLE 2-6 Useful Event Methods

Book 7 Chapter 3

TABLE 3-1 Common Buffer Methods

Book 7 Chapter 8

TABLE 8-1 A Relational Database Table

TABLE 8-2 Common MongoDB Shell Commands

List of Illustrations

Book 1 Chapter 1

FIGURE 1-1: Admiral Grace Murray Hopper invented modern computer programming.

FIGURE 1-2: Netscape Navigator in 1995.

FIGURE 1-3: The first version of Internet Explorer.

FIGURE 1-4: HTTP request and response.

FIGURE 1-5: The Chrome developer tools.

FIGURE 1-6: Viewing the code at Google.com.

FIGURE 1-7: The Sources tab in the developer tools.

FIGURE 1-8: Minified code on the Sources tab.

FIGURE 1-9: Google.com’s JavaScript, prettified.

FIGURE 1-10: The VS Code Get Started screen.

FIGURE 1-11: The Dark (Visual Studio) color theme.

FIGURE 1-12: Choosing the Open Folder option.

FIGURE 1-13: My code folder.

FIGURE 1-14: You can trust me.

FIGURE 1-15: Selecting Create New File from the command palette.

FIGURE 1-16: A new HTML file, created using the command palette.

FIGURE 1-17: The JavaScript console.

FIGURE 1-18: Running the JavaScript Name Creator code.

Book 1 Chapter 2

FIGURE 2-1: The VS Code Extensions panel.

FIGURE 2-2: The Prettier extension.

FIGURE 2-3: The Prettier extension settings.

FIGURE 2-4: The Format on Save setting.

FIGURE 2-5: Setting the default code formatter.

FIGURE 2-6: The Live Server extension.

FIGURE 2-7: A web page, served on Live Server.

FIGURE 2-8: Hot reloading updates the browser for you.

FIGURE 2-9: Previewing README.md in VS Code.

FIGURE 2-10: Select all but one box when installing Git for Windows.

FIGURE 2-11: Select Visual Studio Code as the default editor.

FIGURE 2-12: Setting the default branch name.

FIGURE 2-13: The Source Control panel in VS Code.

FIGURE 2-14: Authorize Visual Studio Code to access your GitHub account.

FIGURE 2-15: Congratulations! You've created your first repo.

FIGURE 2-16: The Source Control panel, with README.md under the Changes heading...

FIGURE 2-17: Viewing your repository's page on GitHub.

Book 1 Chapter 3

FIGURE 3-1: Declaring and initializing variables with let.

FIGURE 3-2: Attempting to change a constant results in an error.

FIGURE 3-3: Using

typeof

to get the data type.

Book 1 Chapter 5

FIGURE 5-1: Looping over an array's elements.

FIGURE 5-2: Iterating over a string.

Book 1 Chapter 6

FIGURE 6-1: Creating and viewing an array in the console.

FIGURE 6-2: Viewing the properties of the Array object.

FIGURE 6-3: Popping removes the last element.

FIGURE 6-4: Pushing adds a new element.

FIGURE 6-5: Shifting removes an element from the beginning of an array.

FIGURE 6-6: Unshift adds an element to the beginning of the array.

FIGURE 6-7: Slicing returns a portion of an array as a new array.

FIGURE 6-8: Splicing removes a number of elements from an array.

FIGURE 6-9: Using a callback function.

FIGURE 6-10: A copy of an array (or another object) is a reference to the origi...

Book 1 Chapter 7

FIGURE 7-1: Undocking the Developer Tools.

FIGURE 7-2:

Automobile

is a

Vehicle

.

Book 1 Chapter 8

FIGURE 8-1: The result of calling a function that requires an array without pas...

FIGURE 8-2: Creating functions conditionally.

FIGURE 8-3: Methods can change the values of properties.

FIGURE 8-4: Attempting to pass a function to a method.

FIGURE 8-5: Removing an element from an array.

FIGURE 8-6: The finished bookstore app.

FIGURE 8-7: The bookstore, after checkout.

Book 1 Chapter 9

FIGURE 9-1: Making a derived class.

Book 1 Chapter 10

FIGURE 10-1: The JavaScript runtime model.

FIGURE 10-2: Viewing the event object.

Book 1 Chapter 11

FIGURE 11-1: The error that's generated when running Listing 11-6.

FIGURE 11-2: Loading and displaying a local file.

FIGURE 11-3: Promise, fulfilled.

FIGURE 11-4: Converting a Response body to an object.

FIGURE 11-5: The possible outcomes of an HTTP request.

FIGURE 11-6: The Network tab.

FIGURE 11-7: Viewing the HTTP headers.

Book 1 Chapter 12

FIGURE 12-1: Loading modules dynamically in response to an event.

Book 2 Chapter 13

FIGURE 1-1: The components of a web browser.

FIGURE 1-2: The Elements tab contains tools for inspecting the DOM, CSSOM, and ...

FIGURE 1-3: Viewing the browser's networking functions.

FIGURE 1-4: Viewing local data storage on the Application tab.

Book 2 Chapter 2

FIGURE 2-1: Viewing the properties and methods of the navigator object.

FIGURE 2-2: Viewing the properties of the window object.

FIGURE 2-3: A DOM tree.

FIGURE 2-4: A simple to-do list, created using DOM methods.

Book 3 Chapter 1

FIGURE 1-1: A React UI is a higher level of abstraction.

FIGURE 1-2: A user interface mockup.

FIGURE 1-3: How state works.

FIGURE 1-4: Pass a function to a child to do inverse data flow.

FIGURE 1-5: The VS Code terminal window.

FIGURE 1-6: The message you see when Vite finishes creating a React app.

FIGURE 1-7: The default Vite React starter project.

FIGURE 1-8: The React Virtual DOM.

Book 3 Chapter 2

FIGURE 2-1: Using Babel's web-based interface.

Book 3 Chapter 3

FIGURE 3-1: Bing.com.

FIGURE 3-2: A weather map widget (source:

weatherwidget.io

).

FIGURE 3-3: Returning a function to stop the clock.

Book 4 Chapter 1

FIGURE 1-1: Answering questions and installing vue-create.

FIGURE 1-2: The default vue-create app.

FIGURE 1-3: A sheep-counting app, created by using the Options API.

FIGURE 1-4: The Vue DevTools extension.

Book 4 Chapter 2

FIGURE 2-1: The Vue component instance lifecycle.

FIGURE 2-2: Loading data from a server in the onMounted() lifecycle hook.

Book 4 Chapter 3

FIGURE 3-1: A static Vue component.

FIGURE 3-2: How mustache syntax got its name.

FIGURE 3-3: Templates don't have access to all JavaScript globals.

FIGURE 3-4: Counting to 100 with Vue.

FIGURE 3-5: The result of using a child object in a

v-for

loop.

FIGURE 3-6: Using the

FancyBorder

component.

FIGURE 3-7: Parents always win.

FIGURE 3-8: Scoped styles override globals.

FIGURE 3-9: Changing styles based on reactive data.

Book 4 Chapter 4

FIGURE 4-1: I'm trying to cut down.

FIGURE 4-2: Vue has a lot of stars.

FIGURE 4-3: A dynamic search box, created using a watcher function.

Book 4 Chapter 5

FIGURE 5-1: Handling events inline.

FIGURE 5-2: Handling events with a method handler.

FIGURE 5-3: Access to globals is restricted in inline event handlers.

Book 5 Chapter 1

FIGURE 1-1: Svelte-versus-React rendering.

FIGURE 1-2: The Vite + Svelte starter app.

FIGURE 1-3: Svelte for VS Code adds Svelte support to VS Code.

FIGURE 1-4: The start of your unsocial media app.

FIGURE 1-5: Rendering an array in a Svelte template.

FIGURE 1-6: Rendering a list of posts.

FIGURE 1-7: The first iteration of Soliloquy: social media without the social a...

Book 5 Chapter 2

FIGURE 2-1: Rendering a component with props.

FIGURE 2-2: Array methods don't trigger reactivity.

FIGURE 2-3: Using a reactive statement to display an error message.

FIGURE 2-4: The Soliloquy app, with character counting and an error message.

Book 5 Chapter 3

FIGURE 3-1: HTML in text will be escaped.

Book 5 Chapter 4

FIGURE 4-1: Testing the transition directive.

Book 5 Chapter 5

FIGURE 5-1: The

console.log()

method receives the old value.

FIGURE 5-2: The values in the console and in the DOM match now.

FIGURE 5-3: Mounting the

StockTicker

component.

FIGURE 5-4: Displaying an error message when a Promise is rejected.

Book 5 Chapter 6

FIGURE 6-1: The user preferences component.

FIGURE 6-2: Displaying a timer using a store.

Book 6 Chapter 1

FIGURE 1-1: Version 0.0.1 of the tentatively named Ball Moving Game.

Book 6 Chapter 2

FIGURE 2-1: The reorganized project structure.

FIGURE 2-2: That's some hot reloading you have there!

FIGURE 2-3: Bundled and minified JavaScript code.

FIGURE 2-4: The first pieces are in place!

FIGURE 2-5: The map.

Book 6 Chapter 3

FIGURE 3-1: The result of running ESLint.

FIGURE 3-2: Linting errors halt the build process.

FIGURE 3-3: The Sources panel.

FIGURE 3-4: Viewing your source code in the Sources panel.

FIGURE 3-5: Setting a breakpoint.

FIGURE 3-6: Setting a watch expression.

FIGURE 3-7: Look, ma — no configuration!

FIGURE 3-8: A successful test.

FIGURE 3-9: Running a test that fails.

FIGURE 3-10: Your first React test passes!

Book 7 Chapter 1

FIGURE 1-1: Unfortunately, Toasteroid never advanced past being a Kickstarter p...

FIGURE 1-2: Illustrating the parts of Node.js.

FIGURE 1-3: The Node.js core modules.

FIGURE 1-4: Running a simple Node.js web server.

FIGURE 1-5: Starting REPL.

FIGURE 1-6: Inspecting the console object.

FIGURE 1-7: The body of an HTTP request from Node.js.

FIGURE 1-8: Finding out REPL's commands with the

.help

command.

FIGURE 1-9: Drawing a triangle in the console.

FIGURE 1-10: Viewing the process object.

Book 7 Chapter 2

FIGURE 2-1: How streaming works.

FIGURE 2-2: Logging chunks.

FIGURE 2-3: A streaming Node.js counter.

FIGURE 2-4: Transforming

Moby Dick.

Book 7 Chapter 3

FIGURE 3-1: Reading binary data as text.

FIGURE 3-2: Decoding using the wrong scheme can produce garbled output.

FIGURE 3-3: Using for-of to iterate over a buffer.

Book 7 Chapter 4

FIGURE 4-1: Returning a buffer from

fs.readFile()

.

FIGURE 4-2: Using

path.resolve()

and

path.join()

.

FIGURE 4-3: Getting file and directory information.

Book 7 Chapter 5

FIGURE 5-1: Viewing your request headers.

Book 7 Chapter 6

FIGURE 6-1: Meet your new JavaScript framework name.

FIGURE 6-2: Node.js cannot read properties of

undefined

.

FIGURE 6-3: Setting too many event listeners causes Node.js to display a warnin...

Book 7 Chapter 7

FIGURE 7-1: Viewing the error object's properties.

FIGURE 7-2: An error because of an uncaught exception.

FIGURE 7-3: An error thrown because of an unhandled promise rejection.

FIGURE 7-4: The HTML form in a browser.

FIGURE 7-5: The returned confirmation page from the server.

FIGURE 7-6: The debugger starts and breaks at the first statement.

FIGURE 7-7: Viewing the debugger's Help information.

FIGURE 7-8: Watching the watchers.

FIGURE 7-9: Starting the debugger.

FIGURE 7-10: The Chrome DevTools Inspect interface.

FIGURE 7-11: The Chrome DevTools Inspect interface.

FIGURE 7-12: Your files have been added to the workspace.

FIGURE 7-13: The paused debugger.

Book 7 Chapter 8

FIGURE 8-1: The MongoDB download page.

FIGURE 8-2: Choosing the setup type.

FIGURE 8-3: Configuring MongoDB as a service.

FIGURE 8-4: Allow the installer program to make changes.

FIGURE 8-5: Creating your first collection.

FIGURE 8-6: Viewing the documents in a collection.

FIGURE 8-7: Seeing your new user.

FIGURE 8-8: Logging documents to the console.

Book 7 Chapter 9

FIGURE 9-1: Install the REST Client extension.

FIGURE 9-2: The rest.http file, containing Send Request links.

FIGURE 9-3: A response with a 201 status code.

FIGURE 9-4: Generating an Express application.

FIGURE 9-5: The default generated app's home page.

FIGURE 9-6: The default generated app's structure.

FIGURE 9-7: Calls to

app.use()

in

app.js

.

FIGURE 9-8: Viewing the

/users

route.

Book 7 Chapter 10

FIGURE 10-1: Testing the routes.

FIGURE 10-2: Successfully connected to the database.

FIGURE 10-3: Using a one-way hash.

FIGURE 10-4: User created successfully.

FIGURE 10-5: User already exists.

FIGURE 10-6: Getting an access token.

FIGURE 10-7: New post created!

Guide

Cover

Title Page

Copyright

Table of Contents

Begin Reading

Index

About the Author

Pages

i

ii

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

91

92

93

94

95

96

97

98

99

100

101

102

103

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

327

328

329

330

331

332

333

334

335

336

337

338

339

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

451

452

453

454

455

456

457

458

459

460

461

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

613

614

615

616

617

618

619

620

621

622

623

624

625

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

793

794

795

Introduction

“Do your work, and you shall reinforce yourself.”

—RALPH WALDO EMERSON

The following scenario plays out at some point in the career of every developer working on mobile or web apps today:

You show up at your new job (or new freelance gig). You were good enough at using JavaScript that you got hired, and now you’re feeling confident that you can start making contributions quickly.

The HR manager gives you a tour and brings you to your new desk — or maybe you work at home or at your local coffee shop. You log in to your new email account and see a message from your manager:

Welcome to the team! Normally, we’d give you a few weeks to get settled in, but we’re slammed and I’m hoping you can get working on some code right away.

This morning, please log in to Slack and clone our repo, and we’ll get you started on some low-level tasks. A couple of things you should know first are that we use a feature branch workflow, we enforce Google style with ESLint, and we unit-test with Mocha and Chai. Everything is Jamstack with MERN on the back end. The API isn't fully documented yet, but it's REST, and you should be able to figure out the endpoints by poking around with Postman. Here are a few small tasks where we could use your help today:

Figure out why the refresh token isn't getting set in some cases.

Our code splitting is suboptimal. Take a look at the webpack config and see whether you can improve the situation.

Speaking of suboptimal, we have some unnecessary Sass in the login module that may be slowing down our build and load times and should be converted to CSS Modules.

Our ticker widget still relies on jQuery (ha-ha!), and we need to refactor that out before we ship so that we don't embarrass ourselves.

Okay, that should be enough for today. We have our weekly stand-up tomorrow morning, and we can get you started on something more important then. Don't hesitate to reach out if you have questions!

Your palms start to sweat as you reread the message. You were told you'd be working with JavaScript. What's all this stuff? Sass? You know how to deal with unnecessary sass from your dog… .

You grab on to the part about jQuery. You recall reading about it in one of your books, and you're pretty sure you understand it. But why does the manager think it's so funny?

You close your email and go to the cafe to order a chai mocha latte and a Jamstack sandwich and have a rest in order to think about whether you really and truly need this job.

Why This Book?

I wrote this book because I've been in the situation just described numerous times in my career as a full-stack developer. Maybe you've already had an experience like that one and you want to make sure you're better prepared next time. Maybe you're going through this experience right now. Maybe you want to try to prevent this from happening to you as you begin your career in JavaScript programming. If you fit into any of these categories, this book is for you.

Software development is a dynamic craft. A good part of your responsibility as a professional programmer is to learn new things constantly. The world of JavaScript, however, is notoriously dynamic. Something you learn this year will likely be out of style or at least vastly different next year. There's no sense in fighting the current by sticking to your tried-and-true methods and tools. Many times, if not most of the time, new libraries and tools catch on quickly in JavaScript because they're genuinely useful and superior to the previous ones.

Learning new things can be difficult, and learning new things under pressure to begin using them on real-life projects can be particularly stressful unless you're properly prepared with the right attitude and sufficient experience.

My goal with this book is to prepare you to understand and work with JavaScript and JavaScript programmers. If you read this entire book, you'll understand much of what the manager in the scenario I described earlier said — and maybe even what to do about it. You'll also be well-equipped to continue your learning and to ask the right questions when something you haven't heard of comes up next time.

JavaScript is a huge topic

Programmers create new ways of working with JavaScript all the time and package them as libraries and frameworks that can be downloaded and used by other programmers. Think of libraries as tools to solve a particular problem in a different way. Think of a framework as a complete system for doing particular things.

No single person can know and remember every JavaScript library and framework that's been created. And there's really no need to. By definition, a JavaScript library or framework is just JavaScript. In theory, if you know JavaScript, you can learn every JavaScript library and framework. In fact, if you know enough about JavaScript, you can write your own JavaScript library or framework!

How this book is different

Most books about JavaScript focus on either teaching the JavaScript language itself, or on focusing on a single library or framework. Both approaches have their merits, but both leave out a vital ingredient for becoming a JavaScript programmer.

Learning to program with JavaScript isn't fundamentally about memorizing syntax or knowing every function available in a library or framework. If you know and understand the basics, you can look up everything else easily enough. Furthermore, if you spend a lot of time learning every function and feature of a particular library from a book, you'll be frustrated when you go to use it and find that much has changed in the time (whether it's a month or several years) since the book was published.

In my experience, it's much better to learn just enough about as many different ways of doing things as possible, so that when you encounter something new, you'll have something to compare it to.

Learn JavaScript as it's used

Knowing how to write JavaScript isn't enough to be able to develop apps. JavaScript lives in an environment, whether it's a web browser, a mobile phone, a web server, or a hardware device. Once you get to a certain level of proficiency with JavaScript, knowing how JavaScript interfaces with its environment is what's most important.

This book shows you how JavaScript is used in the real world, using a combination of real-world and simplified examples.

Understand similarities between the most popular libraries

Learning about a single library — whether it's React or Vue.js or Svelte or Angular — is great. But without knowledge of other ways of doing things, you may fall into the trap of thinking that every problem can be best solved by the tool you know.

If you learn a wide variety of tools, you'll understand how libraries and frameworks are constantly improving on what's been done before, and you'll gain an appreciation for why change is so important in the JavaScript world.

Adapt to new technologies

Another benefit of learning multiple ways to do the same thing is that you'll find that the more you learn, the easier it becomes to learn additional tools. One trait of outstanding JavaScript programmers is that they're excited by opportunities to learn new libraries and tools.

Conventions Used in This Book

This book is designed for readers who have some experience with programming or web development and who want to learn not only JavaScript but also how to apply it. Topics I describe in this book include how to

Write JavaScript code using the most modern and up-to-date syntax

Use the development tools used by professional JavaScript programmers

Build reactive user interfaces with ReactJS

Build reactive user interfaces with Vue.js

Build reactive user interfaces with Svelte

Write server-side JavaScript with Node.js

Connect to data sources with Node.js

Build a complete back-end application using Node.js

Connect a front-end user interface to a Node.js back end

As you read this book, keep the following information in mind:

The book can be read from beginning to end, but feel free to skip around, if you like. If a topic interests you, start there. You can always return to earlier chapters, if necessary.

At some point, you

will

get stuck and the code you write won’t work as intended. Do not fear! You can find many resources to help you, including support forums, others on the Internet, and me! You can email me directly at

[email protected]

or message me on Twitter, Mastodon, or through my website (

www.chrisminnick.com

). Additionally, you can submit a ticket and find additional code at my GitHub repo for this book, at

https://github.com/chrisminnick/javascriptaio

.

Code in the book appears in a monospaced font, like this:

<h1>Hi there!</h1>

.

Foolish Assumptions

I do not make many assumptions about you, the reader, but I do make a few.

I assume that you have some experience or familiarity with HTML and CSS. Many of the applications I show you how to develop make use of both fundamental languages of the web to style and structure their output. Many excellent books and tutorials have been written about both topics, and the amount of HTML and CSS knowledge you need can be learned in a day or two.

I assume that you have a computer running the latest version of Google Chrome. The examples in this book have been tested and optimized for the Chrome browser, which is available for free from Google. Even so, the examples also work in the latest version of Firefox, Safari, or Microsoft Edge.

I assume that you have access to an Internet connection. Many of the examples in this book can be completed without an Internet connection, but some require one.

I assume that you can download and install free software to your computer. Oftentimes, the computer you use at work has restrictions on what can be installed by the user. If you use your own computer to develop and run the applications in this book, that will generally work without a problem.

Icons Used in This Book

Here are the icons used in the book to flag text that should be given extra attention or that you can skip.

This icon flags useful information or explains a shortcut to help you understand a concept.

This icon explains technical details about the concept being explained. The details might be informative or interesting but are not essential to your understanding of the concept at this stage.

Try not to forget the material marked with this icon. It signals an important concept or process that you should keep in mind.

Watch out! This icon flags common mistakes and problems that can be avoided if you heed the warning.

Beyond the Book

A lot of extra content that you won't find in this book is available at www.dummies.com. Go online to find the following:

The source code for the examples in this book: You can find it at https://www.dummies.com/go/javascriptallinonefd.

The source code is organized by book and chapter. The best way to work with a chapter is to download all the source code for it at one time.

Updates:

Code and specifications are constantly changing, so the commands and syntax that work today may not work tomorrow. You can find any updates or corrections by visiting

www.dummies.com/go/javascriptallinonefd

or

https://github.com/chrisminnick/javascriptaio

.

Cheat Sheet:

The Cheat Sheet offers quick access to useful tips and shortcuts. Just go to

www.dummies.com

and type

JavaScript All-in-One For Dummies Cheat Sheet

in the Search box.

Where to Go from Here

All right, now that all the administrative stuff is out of the way, it’s time to get started. You can totally do this. Congratulations on taking your first step (or continuing your journey) in the exciting world of JavaScript! Feel free to jump around the book if you're interested in specific topics. If you're a total noob, start with Chapter 1 in Book 1.

Book 1

JavaScript Fundamentals

Contents at a Glance

Chapter 1: Jumping into JavaScript

JavaScript, the Basics

Reading and Copying JavaScript Code

Starting Your Development Environment

Writing Your First JavaScript Program

Running Code in the Console

Rerunning Commands in the Console

Running Code in a Browser Window

Chapter 2: Filling Your JavaScript Toolbox

Installing Node.js

Configuring Visual Studio Code

Documenting Your Code

Coding Responsibly with Git

Chapter 3: Using Data

Making Variables with let

Making Constants with const

Taking a Look at the Data Types

Wrangling the Object: The Complex Data Type

Examining the Array — a Special Kind of Object

Getting a Handle on Scope

Chapter 4: Working with Operators and Expressions

Building Expressions

Operators: The Lineup

Other Operators

Chapter 5: Controlling Flow

Choosing a Path

Making Loops

Chapter 6: Using Arrays

Introducing Arrays

Creating Arrays

Accessing Array Elements

Modifying Arrays

Deleting Array Elements

Programming with Array Methods

Looping with Array Methods

Destructuring Arrays

Spreading Arrays

Chapter 7: Making and Using Objects

Objects: The Basics

Creating Objects

Modifying Objects

Comparing and Copying Objects

Understanding Prototypes

Deleting Object Properties

Chapter 8: Writing and Running Functions

Functions: An Introduction

Writing Functions

Writing Methods

Understanding Context and this

Chaining Functions

Chapter 9: Getting Oriented with Classes

Encapsulation

Abstraction

Inheritance

Polymorphism

Base Classes

Derived Classes

Constructors

Properties and Methods

Practicing and Becoming comfortable with Classes

Chapter 10: Making Things Happen with Events

Understanding the JavaScript Runtime Model

The Event Loop

Listening for Events

Chapter 11: Writing Asynchronous JavaScript

Understanding Asynchronous JavaScript

Making Promises

Using AJAX

Chapter 12: Using JavaScript Modules

Defining Modules

Exporting Modules

Importing Modules

Renaming Exports and Imports

Importing a Module Object

Loading Dynamic Modules

Importing Modules into HTML