Javascript Absolute Beginner's Guide, Third Edition

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

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