Javascript Absolute Beginner's Guide, Third Edition

Introduction...................1

Parlez-Vous JavaScript? 2

Contacting Me/Getting Help...................... 2

1 Hello, World!... 5

What Is JavaScript?....... 7

Hello, World!.................. 9

Statements, Expressions, and Functions..12



I The Basic Stuff

2 Values and Variables..................... 15

Using Variables............16

More Variable Stuff......18

3 Functions....... 23

What Is a Function?.....26

A Simple Function.......26

Creating a Function That Takes Arguments...........................30

Creating a Function That Returns Data...35

4 Conditional Statements: if, else, and switch............... 39

The If/Else Statement..40

Switch Statements.......49

Deciding Which to Use..............................55

5 Looping with for, while, and do...while!...................... 57

The for Loop................59

The Starting Point........62

Some for Loop Examples..........................64

The Other Loops.........67

6 Commenting Your Code...FTW!.... 71

What Are Comments?.72

Commenting Best Practices......................76

7 Timers............ 79

Delaying with setTimeout..........................80

8 Variable Scope.............................. 85

Global Scope...............86

Local Scope..................88

Miscellaneous Scoping Shenanigans.......89

9 Closures......... 95

Functions Within Functions.......................96

When the Inner Functions Aren't Self-Contained................100

10 Where Should Your Code Live?.. 109

Approach #1: All the Code Lives in Your HTML Document...................113

Approach #2: The Code Lives in a Separate File................114

So, Which Approach to Use?..................118

11 Console Logging Basics.............. 123

Meet the Console......124

Displaying the Console............................126

If You Want to Follow Along...................127

Console Logging 101..............................128



II It's an Object-Oriented World

12 Of Pizza, Types, Primitives, and Objects................... 135

Let's First Talk About Pizza.......................136

From Pizza to JavaScript!.........................139

What Are Objects?....141

The Predefined Objects Roaming Around in JavaScript....142

13 Arrays.......... 145

Creating an Array......146

Accessing Array Values............................147

Adding Items.............149

Removing Items.........151

Finding Items.............152

Merging Arrays..........152

Mapping, Filtering, and Reducing Arrays.............................153

The Old School Way.153

Modifying Each Array Item with map.....154

Getting One Value from an Array of Items...........................157

A Short Foray into Functional Programming........................160

14 Strings......... 161

The Basics...................162

String Properties and Methods...............163

15 Combining Strings and Variables 173

Our Setup...................174

16 When Primitives Behave Like Objects....................... 179

Strings Aren't the Only Problem.............180

Let's Pick on Strings Anyway...................180

Why This Matters.......182

17 Numbers...... 185

Using a Number........186

Operators...................187

Incrementing and Decrementing............188

Hexadecimal and Octal Values...............190

Special Values-Infinity and NaN...........190

The Math Object.......191

Random Numbers.....196

18 Getters and Setters.................... 201

A Tale of Two Properties..........................202

Meet Getters and Setters........................205

19 A Deeper Look at Objects.......... 211

Meet the Object........212

Creating Custom Objects........................222

The this Keyword.......226

20 Using Classes.............................. 231

The Class Syntax and Object Creation..232

Extending Objects.....240

21 Extending Built-in Objects.......... 247

Say Hello to prototype Again, Sort Of!..249

Using a Subclassing Approach................253

Extending Built-in Objects Is Controversial................255

22 Arrow Functions......................... 259

What Are Arrow Functions?.....................260

Putting It All Together..............................263

23 Making Sense of this and More.. 265

The this Keyword 101..............................266

24 Booleans and the Stricter === and !== Operators... 277

The Boolean Object..278

The Boolean Function..............................278

Strict Equality and Inequality Operators281

25 Null and Undefined.................... 283

Null..............................284

Undefined...................284

26 All About JSON (JavaScript Object Notation).......... 287

What Is JSON?...........288

Looking Inside a JSON Object...............292

Reading JSON Data..297

Writing JSON Data?..300



III Working with the DOM

27 JS, the Browser, and the DOM... 303

What HTML, CSS, and JavaScript Do....304

HTML Defines the Structure....................304

Prettify My World, CSS!...........................306

It's JavaScript Time!...307

Meet the Document Object Model........309

28 Finding Elements in the DOM.... 315

Meet the querySelector Family...............316

It Really Is the CSS Selector Syntax........318

29 Modifying DOM Elements.......... 321

DOM Elements Are Objects, Sort Of!....322

Let's Actually Modify DOM Elements.....324

30 Styling Our Content................... 337

Why Would We Set Styles Using JavaScript?..............338

A Tale of Two Styling Approaches..........338

31 Using CSS Custom Properties.... 345

What Are CSS Custom Properties/Variables?................346

Setting Complex Values Easily................348

32 Traversing the DOM................... 353

Finding Your Way Around........................354

Putting It All Together..............................358

33 Creating and Removing DOM Elements.................... 363

Creating Elements.....364

Removing Elements..372

Cloning Elements......374

34 Quickly Adding Many Elements into the DOM......... 381

General Approach.....383

Getting Started..........384

35 In-Browser Developer Tools........ 397

Meet the Developer Tools.......................398



IV Dealing with Events

36 Events.......... 417

What Are Events?......418

Events and JavaScript..............................420

A Simple Example.....423

The Event Arguments and the Event Type.............426

37 Event Bubbling and Capturing... 429

Event Goes Down, Event Goes Up........430

Meet the Phases........434

Who Cares?................437

Event, Interrupted.....438

38 Mouse Events............................. 443

Meet the Mouse Events...........................444

The MouseEvent Properties....................451

Dealing with the Mouse Wheel..............454

39 Keyboard Events........................ 457

Meet the Keyboard Events......................458

Using These Events...459

The Keyboard Event Properties..............460

Some Examples.........461

40 Page Load Events and Other Stuff............................ 467

The Things That Happen During Page Load..........468

The DOMContentLoaded and load Events................471

Scripts and Their Location in the DOM.473

Script Elements: async and defer...........477

41 Loading Script Files Dynamically 481

The Basic Technique.482

Running Our Dynamically Loaded Script First............486

Running Dependent Code After Our Script File Has Loaded........488

42 Handling Events for Multiple Elements..................... 491

How to Do All This....493



V Totally Useful Topics that Only Make Sense Now

43 Using Emojis in HTML, CSS, and JavaScript.............. 501

What Are Emojis Exactly?........................502

Emojis in HTML..........503

44 Making HTTP/Web Requests in JavaScript................ 511

The Example..............513

Meet Fetch.................514

Meet XMLHttpRequest............................520

45 Accessing the Webcam............... 529

The Example..............530

Overview of How This Works..................531

Adding the Code.......532

Examining the Code.535

46 Array and Object Destructuring. 539

Destructuring Examples...........................541

47 Storing Data Using Web Storage.............................. 549

How Web Storage Works........................550

Getting Your Code On.............................552

48 Variable and Function Hoisting.. 559

JavaScript and Compiler Behavior.........560

49 Working with Sets...................... 565

Creating a Set, Part I.566

Adding Items to a Set..............................567

How Checking for Duplicates Works......567

Creating a Set, Part 2569

Checking the Size of Our Set..................570

Deleting Items from a Set.......................571

Checking If an Item Exists.......................572

Looping Through Items in a Set.............572

Entries, Keys, and Values.........................573

50 Conclusion... 577

Glossary............................ 581



9780137959167, TOC, 10/13/2022