You are previewing JavaScript Absolute Beginner’s Guide.
O'Reilly logo
JavaScript Absolute Beginner’s Guide

Book Description

JavaScript Absolute Beginner's Guide

No experience necessary!

Make the most of JavaScript -- even if you've never programmed anything before. This book 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!

This is the easiest, most practical beginner’s guide to programming JavaScript with simple, reliable instructions for doing everything you really want to do! Here’s a small sample of what you’ll learn:

  • Learn why JavaScript is awesome

  • 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 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

  • Understand how text is treated in JavaScript 

  • Learn how to perform common string operations

  • Use arrays to handle lists of data

  • Learn to create custom objects

  • Purchase of JavaScript Absolute Beginner's Guide in any format includes free access to the online Web Edition, which provides several special features to help you learn:

  • The complete text of the book online

  • Short videos by the author introducing each chapter

  • Interactive quizzes to test your understanding of the material

  • Updates and corrections as they become available

  • This Web Edition can be viewed on all types of computers and mobile devices with any modern web browser that supports HTML5.

    Contents at a Glance

  • 1 Hello, World!

  • Part I: The Basic Stuff

  • 2 Values and Variables

  • 3 Functions

  • 4 Conditional Statements: If, Else, and Switch

  • 5 Meet the Loops: For, While, and Do…While!

  • 6 Timers

  • 7 Variable Scope

  • 8 Closures

  • 9 Where Should Your Code Live?

  • 10 Commenting Your Code

  • Part II: It’s an Object-Oriented World

  • 11 Of Pizza, Types, Primitives, and Objects

  • 12 Strings

  • 13 When Primitives Behave Like Objects

  • 14 Arrays

  • 15 Numbers

  • 16 A Deeper Look at Objects

  • 17 Extending Built-in Objects

  • 18 Booleans and the Stricter === and !== Operators

  • 19 Null and Undefined

  • 20 Immediately Invoked Function Expressions

  • Part III: Working with the DOM

  • 21 JS, The Browser, and The DOM

  • 22 Finding Elements in the DOM

  • 23 Modifying DOM Elements

  • 24 Styling Your Content

  • 25 Traversing the DOM

  • 26 Creating and Removing DOM Elements

  • 27 In-Browser Developer Tools

  • Part IV: Dealing with Events

  • 28 Events

  • 29 Event Bubbling and Capturing

  • 30 Mouse Events

  • 31 Keyboard Events

  • 32 Page Load Events and Other Stuff

  • 33 Handling Events for Multiple Elements

  • 34 Conclusion

  • Table of Contents

    1. About This E-Book
    2. Title Page
    3. Copyright Page
    4. Accessing the Free Web Edition
    5. Contents at a Glance
    6. Table of Contents
    7. Dedication
    8. Acknowledgments
    9. About the Author
    10. Introduction
      1. Parlez-vous JavaScript?
      2. Contacting Me/Getting Help
    11. 1. Hello, World!
      1. What Is JavaScript?
      2. A Simple Example
        1. Code Editing Tools
        2. The HTML Document
      3. Looking at the Code: Statements and Functions
    12. Part I: The Basic Stuff
      1. 2. Values and Variables
        1. Using Variables
        2. More Variable Stuff
          1. Naming Variables
          2. More on Declaring and Initializing Variables
      2. 3. Functions
        1. What Is a Function?
          1. A Simple Function
        2. Creating a Function That Takes Arguments
        3. Creating a Function That Returns Data
          1. The Return Keyword
          2. Exiting the Function Early
      3. 4. Conditional Statements: If, Else, and Switch
        1. The If/Else Statement
          1. Meet the Conditional Operators
          2. Creating More Complex Expressions
          3. Variations on the If/Else Statement
          4. Phew
        2. Switch Statements
          1. Using a Switch Statement
          2. Similarity to an If/Else Statement
        3. Deciding Which to Use
      4. 5. Meet the Loops: For, While, and Do...While!
        1. The for Loop
          1. The Starting Condition
          2. Terminating Condition (aka Are we done yet?)
          3. Reaching the End
          4. Putting It All Together
        2. Some for Loop Examples
          1. Stopping a Loop Early
          2. Skipping an Iteration
          3. Going Backwards
          4. You Don’t Have to Use Numbers
          5. Array! Array! Array!
          6. Oh No He Didn’t!
        3. The Other Loops
          1. The while Loop
          2. The do...while Loop
      5. 6. Timers
        1. Meet the Three Timers
          1. Delaying with setTimeout
          2. Looping with setInterval
          3. Animating Smoothly with requestAnimationFrame
      6. 7. Variable Scope
        1. Global Scope
        2. Local Scope
        3. Miscellaneous Scoping Shenanigans
          1. Declarations Using var Do Not Support Block Scoping
        4. How JavaScript Processes Variables
        5. Closures
      7. 8. Closures
        1. Functions within Functions
        2. When the Inner Functions Aren’t Self-Contained
      8. 9. Where Should Your Code Live?
        1. The Options on the Table
        2. Approach #1: All the Code Lives in Your HTML Document
        3. Approach #2: The Code Lives in a Separate File
          1. The JavaScript File
          2. Referencing the JavaScript File
        4. So...Which Approach to Use?
          1. Yes, My Code Will Be Used on Multiple Documents!
          2. No, My Code Is Used Only Once, on a Single HTML Document!
      9. 10. Commenting Your Code
        1. What Are Comments?
          1. Single Line Comments
          2. Multi-line Comments
        2. Commenting Best Practices
    13. Part II: It’s an Object-Oriented World
      1. 11. Of Pizza, Types, Primitives, and Objects
        1. Let’s First Talk About Pizza
        2. From Pizza to JavaScript
        3. What Are Objects?
        4. The Predefined Objects Roaming Around
      2. 12. Strings
        1. The Basics
        2. String Properties and Methods
          1. Accessing Individual Characters
          2. Combining (aka Concatenating) Strings
          3. Making Substrings out of Strings
          4. Splitting a String/split
          5. Finding Something Inside a String
          6. Upper and Lower Casing Strings
      3. 13. When Primitives Behave Like Objects
        1. Strings Aren’t the Only Problem
        2. Let’s Pick on Strings Anyway
        3. Why This Matters
      4. 14. Arrays
        1. Creating an Array
        2. Accessing Array Values
        3. Adding Items to Your Array
        4. Removing Items from the Array
        5. Finding Items in the Array
        6. Merging Arrays
      5. 15. Numbers
        1. Using a Number
        2. Operators
          1. Doing Simple Math
          2. Incrementing and Decrementing
        3. Special Values—Infinity and NaN
          1. Infinity
          2. NaN
        4. The Math Object
          1. The Constants
          2. Rounding Numbers
          3. Trigonometric Functions
          4. Powers and Square Roots
          5. Getting the Absolute Value
          6. Random Numbers
      6. 16. A Deeper Look at Objects
        1. Meet the Object
          1. Creating Objects
          2. Specifying Properties
        2. Creating Custom Objects
        3. The this Keyword
      7. 17. Extending Built-in Objects
        1. Say Hello to Prototype...Again—Sort of!
        2. Extending Built-in Objects Is Controversial
          1. You Don’t Control the Built-in Object’s Future
          2. Some Functionality Should Not Be Extended or Overridden
      8. 18. Booleans and the Stricter === and !== Operators
        1. The Boolean Object
        2. The Boolean Function
        3. Strict Equality and Inequality Operators
      9. 19. Null and Undefined
        1. Null
        2. Undefined
      10. 20. Immediately Invoked Function Expressions
        1. Writing a Simple IIFE
        2. Writing an IIFE That Takes Arguments
        3. When to Use an IIFE
          1. Avoiding Code Collisions
          2. Closures and Locking in State
        4. Making Things Private
    14. Part III: Working with the DOM
      1. 21. JS, The Browser, and The DOM
        1. What HTML, CSS, and JavaScript Do
        2. HTML Defines the Structure
        3. Prettify My World, CSS!
        4. It’s JavaScript Time!
        5. Meet the Document Object Model
          1. The Window Object
          2. The Document Object
      2. 22. Finding Elements in the DOM
        1. Meet the querySelector Family
          1. querySelector
          2. querySelectorAll
        2. It Really Is the CSS Selector Syntax
      3. 23. Modifying DOM Elements
        1. DOM Elements Are Objects—Sort of!
        2. Let’s Actually Modify DOM Elements
          1. Changing an Element’s Text Value
          2. Attribute Values
      4. 24. Styling Your Content
        1. Why Would You Set Styles Using JavaScript?
          1. A Tale of Two Styling Approaches
          2. Setting the Style Directly
        2. Adding and Removing Classes Using classList
          1. Adding Class Values
          2. Removing Class Values
          3. Toggling Class Values
          4. Checking Whether a Class Value Exists
          5. Going Further
      5. 25. Traversing the DOM
        1. Finding Your Way Around
          1. Dealing with Siblings and Parents
          2. Let’s Have Some Kids!
        2. Putting It All Together
          1. Checking Whether a Child Exists
          2. Accessing All the Child Elements
          3. Walking the DOM
      6. 26. Creating and Removing DOM Elements
        1. Creating Elements
        2. Removing Elements
        3. Cloning Elements
      7. 27. In-Browser Developer Tools
        1. Meet the Developer Tools
          1. Inspecting the DOM
          2. Debugging JavaScript
          3. Meet the Console
          4. Inspecting Objects
          5. Logging Messages
    15. Part IV: Dealing with Events
      1. 28. Events
        1. What Are Events?
        2. Events and JavaScript
          1. 1. Listening for Events
          2. 2. Reacting to Events
        3. A Simple Example
        4. The Event Arguments and the Event Type
      2. 29. Event Bubbling and Capturing
        1. Event Goes Down. Event Goes Up.
        2. Meet the Phases
        3. Who Cares?
        4. Event, Interrupted
      3. 30. Mouse Events
        1. Meet the Mouse Events
          1. Clicking Once and Clicking Twice
          2. Mousing Over and Mousing Out
          3. The Very Click-like Mousing Down and Mousing Up Events
          4. The Event Heard Again...and Again...and Again!
          5. The Context Menu
        2. The MouseEvent Properties
          1. The Global Mouse Position
          2. The Mouse Position Inside the Browser
          3. Detecting Which Button Was Clicked
        3. Dealing with the Mouse Wheel
      4. 31. Keyboard Events
        1. Meet the Keyboard Events
        2. Using These Events
        3. The Keyboard Event Properties
        4. Some Examples
          1. Checking That a Particular Key Was Pressed
          2. Doing Something When the Arrow Keys Are Pressed
          3. Detecting Multiple Key Presses
      5. 32. Page Load Events and Other Stuff
        1. The Things That Happen During Page Load
          1. Stage Numero Uno
          2. Stage Numero Dos
          3. Stage Numero Three
        2. The DOMContentLoaded and load Events
        3. Scripts and Their Location in the DOM
        4. Script Elements—Async and Defer
          1. async
          2. defer
      6. 33. Handling Events for Multiple Elements
        1. How to Do All of This
          1. A Terrible Solution
          2. A Good Solution
          3. Putting It All Together
      7. 34. Conclusion
    16. Glossary
    17. Index
    18. Code Snippets