Javascript Absolute Beginners Guide, Third Edition

Make the most of today's JavaScript--even if you've never programmed anything before. JavaScript Absolute Beginner's Guide, Third Edition is the fastest way to learn JavaScript, starting with the basics and gradually going deeper and broader into all the techniques you need to begin building highly scalable, performant web apps and experiences. Do what you want, the way you want, one incredibly easy step at a time! Learn all this, and much more: Start fast with the basics: values, variables, functions, conditionals, loops, closures, and more Create well-organized, clear code that's easy to reuse and improve Learn proven best practices to build web apps that scale with outstanding performance Make the most of powerful object-oriented techniques to build complex, extensible apps Wrangle data like a pro by learning how to use the popular JSON standard, arrays, web storage, and more Translate your ideas into visually compelling and interactive content by learning how to work with the DOM Identify and fix issues quickly by learning how to use the in-browser development tools Understand the ins and outs of events and how you can use them to react to actions the user or the page will perform Learn how to ensure your code runs lightning-fast with extra coverage of performance optimizations and techniques you can use Learn the basics that set you up to more quickly use modern web frameworks like React, Vue, Next.js, and Nuxt Explore advanced features such as object destructuring, making web requests, the class syntax, accessing your webcam, variable hoisting, and more Get up-to-speed on the latest JavaScript enhancements proposed by the EcmaScript standard Cover Title Page Copyright Page Contents at a Glance Table of Contents Introduction Parlez-Vous JavaScript? Contacting Me/Getting Help 1 Hello, World! What Is JavaScript? What JavaScript Looks Like Hello, World! The HTML Document Statements, Expressions, and Functions Part I: The Basic Stuff 2 Values and Variables Using Variables More Variable Stuff Naming Variables More on Declaring and Initializing Variables 3 Functions What Is a Function? A Simple Function Creating a Function That Takes Arguments Creating a Function That Returns Data The Return Keyword Exiting the Function Early Function Expressions 4 Conditional Statements: if, else, and switch The If/Else Statement Meet the Conditional Operators Creating More Complex Expressions Variations on the If/Else Statement Switch Statements Using a Switch Statement Similarity to an If/Else Statement Deciding Which to Use 5 Looping with for, while, and do...while! The for Loop The Starting Point The Step The Condition (aka How Long to Keep Looping) Putting It All Together Some for Loop Examples Breaking a Loop Skipping an Iteration Going Backwards You Don’t Have to Use Numbers Oh No He Didn’t! The Other Loops The while Loop The do...while Loop 6 Commenting Your Code...FTW! What Are Comments? Single-Line Comments Multiline Comments Commenting Best Practices 7 Timers Delaying with setTimeout Looping with setInterval Animating Smoothly with requestAnimationFrame 8 Variable Scope Global Scope Local Scope Miscellaneous Scoping Shenanigans Block Scoping How JavaScript Processes Variables Closures 9 Closures Functions Within Functions When the Inner Functions Aren’t Self-Contained 10 Where Should Your Code Live? Approach #1: All the Code Lives in Your HTML Document Approach #2: The Code Lives in a Separate File The JavaScript File Referencing the JavaScript File So, Which Approach to Use? Yes, My Code Will Be Used on Multiple Documents! No, My Code Is Used Only Once on a Single HTML Document! 11 Console Logging Basics Meet the Console Displaying the Console If You Want to Follow Along Console Logging 101 Meet the log Method Going Beyond Predefined Text Displaying Warnings and Errors Part II: It’s an Object-Oriented World 12 Of Pizza, Types, Primitives, and Objects Let’s First Talk About Pizza From Pizza to JavaScript! What Are Objects? The Predefined Objects Roaming Around in JavaScript 13 Arrays Creating an Array Accessing Array Values Adding Items Removing Items Finding Items Merging Arrays Mapping, Filtering, and Reducing Arrays The Old School Way Modifying Each Array Item with map Filtering Items Getting One Value from an Array of Items More on the Callback Function Arguments A Short Foray into Functional Programming 14 Strings The Basics String Properties and Methods Accessing Individual Characters Combining (aka Concatenating) Strings Getting Substrings Out of Strings Splitting a String with split Finding Something Inside a String Uppercasing and Lowercasing Strings 15 Combining Strings and Variables Our Setup Using the + Operator (aka String Concatenation) Template Literals (aka String Interpolation) 16 When Primitives Behave Like Objects Strings Aren’t the Only Problem Let’s Pick on Strings Anyway Why This Matters 17 Numbers Using a Number Operators Doing Simple Math Incrementing and Decrementing Hexadecimal and Octal Values Special Values—Infinity and NaN Infinity NaN The Math Object The Constants Rounding Numbers Trigonometric Functions Powers and Square Roots Getting the Absolute Value Random Numbers 18 Getters and Setters A Tale of Two Properties Meet Getters and Setters Shout Generator Logging Activity Property Value Validation 19 A Deeper Look at Objects Meet the Object Creating Objects Adding Properties Removing Properties What Is Going on Behind the Scenes? Creating Custom Objects The this Keyword 20 Using Classes The Class Syntax and Object Creation Creating an Object Meet the Constructor What Goes Inside the Class Extending Objects 21 Extending Built-in Objects Say Hello to prototype Again, Sort Of! Using a Subclassing Approach Extending Built-in Objects Is Controversial You Don’t Control the Built-in Object’s Future Some Functionality Should Not Be Extended or Overridden 22 Arrow Functions What Are Arrow Functions? Starting with the Basics Of Arguments and Parenthesis To Curly Bracket or Not to Curly Bracket Putting It All Together 23 Making Sense of this and More The this Keyword 101 When this Just Ain’t Right Using a Redefined Version of the this Keyword Arrow Functions and Their Lexical Scope One Method to Bind Them All 24 Booleans and the Stricter === and !== Operators The Boolean Object The Boolean Function Strict Equality and Inequality Operators 25 Null and Undefined Null Undefined 26 All About JSON (JavaScript Object Notation) What Is JSON? Looking Inside a JSON Object Property Names The Values Reading JSON Data Parsing JSON-Looking Data into Actual JSON Writing JSON Data? Part III: Working with the DOM 27 JS, the Browser, and the DOM What HTML, CSS, and JavaScript Do HTML Defines the Structure Prettify My World, CSS! It’s JavaScript Time! Meet the Document Object Model The window Object The Document Object 28 Finding Elements in the DOM Meet the querySelector Family querySelector querySelectorAll It Really Is the CSS Selector Syntax 29 Modifying DOM Elements DOM Elements Are Objects, Sort Of! Let’s Actually Modify DOM Elements Changing an Element’s Text Value Attribute Values Basics of Attribute Access Custom Attributes 30 Styling Our Content Why Would We Set Styles Using JavaScript? A Tale of Two Styling Approaches Setting the Style Directly Adding and Removing Classes Using JavaScript Going Further 31 Using CSS Custom Properties What Are CSS Custom Properties/Variables? Setting Complex Values Easily 32 Traversing the DOM Finding Your Way Around Dealing with Siblings and Parents Let’s Have Some Kids! Putting It All Together Checking If a Child Exists Accessing All the Child Elements Walking the DOM 33 Creating and Removing DOM Elements Creating Elements Removing Elements Cloning Elements 34 Quickly Adding Many Elements into the DOM General Approach Example Getting Started The innerHTML Approach The DocumentFragment Approach Removing Elements (Emptying an Entire Subtree) 35 In-Browser Developer Tools Meet the Developer Tools Inspecting the DOM Debugging JavaScript Meet the Console Inspecting Objects Logging Messages Part IV: Dealing with Events 36 Events What Are Events? Events and JavaScript Listening for Events Reacting to Events A Simple Example The Event Arguments and the Event Type 37 Event Bubbling and Capturing Event Goes Down, Event Goes Up Meet the Phases Who Cares? Event, Interrupted 38 Mouse Events Meet the Mouse Events Clicking Once and Clicking Twice Mousing Over and Mousing Out The Very Click-Like Mousing Down and Mousing Up Events The Event Heard Again...and Again...and Again! The Context Menu The MouseEvent Properties The Global Mouse Position The Mouse Position Inside the Browser Detecting Which Button Was Clicked Dealing with the Mouse Wheel 39 Keyboard Events Meet the Keyboard Events Using These Events The Keyboard Event Properties Some Examples Checking That a Particular Key Was Pressed Doing Something When the Arrow Keys Are Pressed Detecting Multiple Key Presses 40 Page Load Events and Other Stuff The Things That Happen During Page Load Stage Numero Uno Stage Numero Dos Stage Numero Three The DOMContentLoaded and load Events Scripts and Their Location in the DOM Script Elements: async and defer async defer 41 Loading Script Files Dynamically The Basic Technique Running Our Dynamically Loaded Script First Running Dependent Code After Our Script File Has Loaded 42 Handling Events for Multiple Elements How to Do All This A Terrible Solution A Good Solution Putting It All Together Part V: Totally Useful Topics that Only Make Sense Now 43 Using Emojis in HTML, CSS, and JavaScript What Are Emojis Exactly? Emojis in HTML Using the Emoji Directly Specifying the Emoji Codepoint 44 Making HTTP/Web Requests in JavaScript The Example Meet Fetch Diving into the Code Wrapping Up the Example Meet XMLHttpRequest Creating the Request Sending the Request Asynchronous Stuff and Events Processing the Request Processing the Request...for Realz! 45 Accessing the Webcam The Example Overview of How This Works Adding the Code Examining the Code 46 Array and Object Destructuring Destructuring Examples General Overview Using Arrays Destructuring with Objects 47 Storing Data Using Web Storage How Web Storage Works What Exactly Goes on Inside Web Storage Data Is Tied to Your Domain Getting Your Code On Adding Data Retrieving Data Removing Data Dealing with File Size Detecting Support for Web Storage What About Session Storage? 48 Variable and Function Hoisting JavaScript and Compiler Behavior Variable Declarations Function Declarations Some Hoisting Quirks 49 Working with Sets Creating a Set, Part I Adding Items to a Set How Checking for Duplicates Works Creating a Set, Part 2 Checking the Size of Our Set Deleting Items from a Set Checking If an Item Exists Looping Through Items in a Set Entries, Keys, and Values 50 Conclusion Glossary A B C D E F G I J L N O P R S T V W Index A B C D E F G H I J K L M N O P R Q S T U V W X Y Z