Description
Book SynopsisKirupa Chinnathambi has spent most of his life trying to teach others to love web development as much as he does. In 1999, before blogging was even a word, he started posting tutorials on kirupa.com. In the years since then, he has written hundreds of articles, written a few books (none as good as this one, of course!), and recorded a bunch of videos you can find on YouTube. When he isn't writing or talking about web development, he spends his waking hours helping make developers happy and productive as a Product Manager at Google. In his nonwaking hours, he is probably sleeping, joining Meena in running after their daughter Akira, protecting himself from Pixel (aka a T-rex in an unassuming cat's body)or writing about himself in the third person.
You can find him on Twitter, Facebook, LinkedIn, and the interwebs at large. Just search for his name in your favorite search engine.
Table of ContentsIntroduction...................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
