25,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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:
Seitenzahl: 871
Veröffentlichungsjahr: 2023
Ähnliche
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
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
