JavaScript Absolute Beginner's Guide, 2nd Edition

Make the most of JavaScript--even if you've never programmed anything before. __JavaScript Absolute Beginner's Guide__ is the fastest way to learn JavaScript and use it together with CSS3 and HTML5 to create powerful web and mobile experiences. Learn how to do what you want, the way you want, one incredibly easy step at a time. JavaScript has never been this simple! Here's a small sample of what you'll learn: * Organize your code with variables * Understand how functions make your code reusable * Use the popular if/else statement to help make a decision in code * Learn about switch statements and when to use them * Work with for, while, and do...while loops * Learn how to use global and local scope * Understand what closures are * Learn about the various places your code can live * Understand how to write comments and use good commenting practices * Learn about the basic types of objects you'll run into in JavaScript * Find out that pizza has an educational value beyond just being deliciously awesome * Learn how to perform common string operations * Use arrays to handle lists of data * Learn to create custom objects * Get up to speed on some of the big ES6 changes 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? Hello, World! The HTML Document Looking at the Code: Statements and Functions 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 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 Phew 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 Multi-Line 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! II: It’s an Object-Oriented World 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 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 to Your Array Removing Items from the Array Finding Items in the Array 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 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/split Finding Something Inside a String Upper and Lower Casing Strings 15 When Primitives Behave Like Objects Strings Aren’t the Only Problem Let’s Pick on Strings Anyway Why This Matters 16 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 17 Getters and Setters A Tale of Two Properties Meet Getters and Setters Shout Generator Logging Activity Property Value Validation 18 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 19 Extending Built-in Objects Say Hello to prototype...again—Sort of! Extending Built-in Objects is Controversial You Don’t Control the Built-in Object’s Future Some Functionality Should Not Be Extended or Overridden 20 Using Classes The Class Syntax and Object Creation Creating an Object Meet the Constructor What Goes Inside the Class Extending Objects 21 Booleans and the Stricter === and !== Operators The Boolean Object The Boolean Function Strict Equality and Inequality Operators 22 Null and Undefined Null Undefined III: Working with the DOM 23 All About JSON (aka 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? 24 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 25 Finding Elements in the Dom Meet the querySelector Family querySelector querySelectorAll It Really Is the CSS Selector Syntax 26 Modifying Dom Elements DOM Elements Are Objects—Sort of! Let’s Actually Modify DOM Elements Changing an Element’s Text Value Attribute Values 27 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 Checking Whether a Class Value Exists Going Further 28 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 29 Creating and Removing Dom Elements Creating Elements Removing Elements Cloning Elements 30 In-Browser Developer Tools Meet the Developer Tools Inspecting the DOM Debugging JavaScript Meet the Console Inspecting Objects Logging Messages IV: Dealing with Events 31 Events What Are Events? Events and JavaScript 1. Listening for Events 2. Reacting to Events A Simple Example The Event Arguments and the Event Type 32 Event Bubbling and Capturing Event Goes Down. Event Goes Up Meet the Phases Who Cares? Event, Interrupted 33 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 34 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 35 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 36 Handling Events for Multiple Elements How to Do All of This A Terrible Solution A Good Solution Putting It All Together 37 Conclusion Glossary A-F G-S T-W Index A B C D E F G H I J K L M N O P Q R S T U V W Who knew how simple using JavaScript could be? Make the most of JavaScript—even if you've never programmed anything before. JavaScript Absolute Beginner's Guide is the fastest way to learn JavaScript and use it together with CSS3 and HTML5 to create powerful web and mobile experiences. Learn how to do what you want, the way you want, one incredibly easy step at a time. JavaScript has never been this simple! Here's a small sample of what you'll learn: • Organize your code with variables • Understand how functions make your code reusable • Use the popular if/else statement to help make a decision in code • Learn about switch statements and when to use them • Work with for, while, and do...while loops • Learn how to use global and local scope • Understand what closures are • Learn about the various places your code can live • Understand how to write comments and use good commenting practices • Learn about the basic types of objects you'll run into in JavaScript • Find out that pizza has an educational value beyond just being deliciously awesome • Learn how to perform common string operations • Use arrays to handle lists of data • Learn to create custom objects • Get up to speed on some of the big ES6 changes JavaScript Absolute Beginner's Guide serves as an easy-to-understand tutorial on both scripting basics and JavaScript itself. The book is written in a clear and very personable style with an extensive use of practical, complete examples. The book is filled with large, full-color illustrations and all the programming code is displayed in color to help the beginner understand the key components and structure of the language