JavaScript for Kids

JavaScript for Kids

by Nick Morgan
Released December 2014
Publisher(s): No Starch Press
ISBN: 9781593274085

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on ebooks.com
Start your free trial

Book description

JavaScript is the programming language of the Internet, the secret sauce that makes the Web awesome, your favorite sites interactive, and online games fun!

JavaScript for Kids is a lighthearted introduction that teaches programming essentials through patient, step-by-step examples paired with funny illustrations. You'll begin with the basics, like working with strings, arrays, and loops, and then move on to more advanced topics, like building interactivity with jQuery and drawing graphics with Canvas.

Along the way, you'll write games such as Find the Buried Treasure, Hangman, and Snake. You'll also learn how to:

  • Create functions to organize and reuse your code
  • Write and modify HTML to create dynamic web pages
  • Use the DOM and jQuery to make your web pages react to user input
  • Use the Canvas element to draw and animate graphics
  • Program real user-controlled games with collision detection and score keeping
With visual examples like bouncing balls, animated bees, and racing cars, you can really see what you're programming. Each chapter builds on the last, and programming challenges at the end of each chapter will stretch your brain and inspire your own amazing programs. Make something cool with JavaScript today!

Ages 10+ (and their parents!)

Publisher resources

View/Submit Errata

Table of contents

  1. JavaScript for Kids: A Playful Introduction to Programming
  2. Dedication
  3. About the Author
  4. About the Illustrator
  5. About the Technical Reviewer
  6. Acknowledgments
  7. Introduction
    1. Who Should Read This Book?
    2. How to Read This Book
    3. What’s in this Book?
    4. Have Fun!
  8. I. Fundamentals
    1. 1. What Is JavaScript?
      1. Meet JavaScript
      2. Why Learn JavaScript?
      3. Writing Some JavaScript
      4. The Structure of a JavaScript Program
        1. Syntax
        2. Comments
      5. What You Learned
    2. 2. Data Types and Variables
      1. Numbers and Operators
      2. Variables
        1. Naming Variables
        2. Creating New Variables Using Math
          1. Seconds in an Hour
          2. Seconds in a Day
          3. Seconds in a Year
          4. Age in Seconds
        3. Incrementing and Decrementing
        4. += (plus-equals) and –= (minus-equals)
      3. Strings
        1. Joining Strings
        2. Finding the Length of a String
        3. Getting a Single Character from a String
        4. Cutting Up Strings
        5. Changing Strings to All Capital or All Lowercase Letters
      4. Booleans
        1. Logical Operators
          1. && (and)
          2. || (or)
          3. ! (not)
          4. Combining logical operators
        2. Comparing Numbers with Booleans
          1. Greater Than
          2. Less Than
          3. Equal To
          4. Double Equals
      5. undefined and null
      6. What You Learned
    3. 3. Arrays
      1. Why Should You Care About Arrays?
      2. Creating an Array
      3. Accessing an Array’s Elements
      4. Setting or Changing Elements in an Array
      5. Mixing Data Types in an Array
      6. Working with Arrays
        1. Finding the Length of an Array
        2. Adding Elements to an Array
        3. Removing Elements from an Array
        4. Adding Arrays
          1. Joining Multiple Arrays
        5. Finding the Index of an Element in an Array
        6. Turning an Array into a String
      7. Useful Things to Do with Arrays
        1. Finding Your Way Home
          1. Building the Array with Push
          2. Going in Reverse with pop
        2. Decision Maker
          1. Using Math.random()
          2. Rounding Down with Math.floor()
          3. The Complete Decision Maker
        3. Creating a Random Insult Generator
      8. What You Learned
      9. Programming Challenges
    4. 4. Objects
      1. Creating Objects
        1. Keys Without Quotes
      2. Accessing Values in Objects
      3. Adding Values to Objects
        1. Adding Keys with Dot Notation
      4. Combining Arrays and Objects
        1. An Array of Friends
      5. Exploring Objects in the Console
      6. Useful Things to Do with Objects
        1. Keeping Track of Owed Money
        2. Storing Information About Your Movies
      7. What You Learned
      8. Programming Challenges
    5. 5. The Basics of HTML
      1. Text Editors
      2. Our First HTML Document
      3. Tags and Elements
        1. Heading Elements
        2. The p Element
        3. Whitespace in HTML and Block-Level Elements
        4. Inline Elements
      4. A Full HTML Document
      5. HTML Hierarchy
      6. Adding Links to Your HTML
        1. Link Attributes
        2. Title Attributes
      7. What You Learned
    6. 6. Conditionals and Loops
      1. Embedding JavaScript in HTML
      2. Conditionals
        1. if Statements
        2. if...else Statements
        3. Chaining if...else Statements
      3. Loops
        1. while Loops
          1. Counting Sheep with a while loop
          2. Preventing Infinite Loops
        2. for Loops
          1. Using for Loops with Arrays and Strings
          2. Other Ways to use for Loops
      4. What You Learned
      5. Programming Challenges
    7. 7. Creating a Hangman Game
      1. Interacting with a Player
        1. Creating a Prompt
        2. Using confirm to Ask a Yes or No Question
        3. Using Alerts to Give a Player Information
        4. Why Use alert Instead of console.log?
      2. Designing Your Game
        1. Using Pseudocode to Design the Game
        2. Tracking the State of the Word
        3. Designing the Game Loop
      3. Coding the Game
        1. Choosing a Random Word
        2. Creating the Answer Array
        3. Coding the Game Loop
          1. Showing the Player’s Progress
          2. Handling the Player’s Input
          3. Updating the Game State
        4. Ending the Game
      4. The Game Code
      5. What You Learned
      6. Programming Challenges
    8. 8. Functions
      1. The Basic Anatomy of a Function
      2. Creating a Simple Function
      3. Calling a Function
      4. Passing Arguments into Functions
        1. Printing Cat Faces!
        2. Passing Multiple Arguments to a Function
      5. Returning Values from Functions
      6. Using Function Calls as Values
      7. Using Functions to Simplify Code
        1. A Function to Pick a Random Word
        2. A Random Insult Generator
        3. Making the Random Insult Generator into a Function
      8. Leaving a Function Early with return
      9. Using return Multiple Times Instead of if...else Statements
      10. What You Learned
      11. Programming Challenges
  9. II. Advanced JavaScript
    1. 9. The DOM and jQuery
      1. Selecting DOM Elements
        1. Using id to Identify Elements
        2. Selecting an Element Using getElementById
        3. Replacing the Heading Text Using the DOM
      2. Using jQuery to Work with the DOM Tree
        1. Loading jQuery on Your HTML Page
        2. Replacing the Heading Text Using jQuery
      3. Creating New Elements with jQuery
      4. Animating Elements with jQuery
      5. Chaining jQuery Animations
      6. What You Learned
      7. Programming Challenges
    2. 10. Interactive Programming
      1. Delaying Code with setTimeout
      2. Canceling a Timeout
      3. Calling Code Multiple Times with setInterval
      4. Animating Elements with setInterval
      5. Responding to User Actions
        1. Responding to Clicks
        2. The mousemove Event
      6. What You Learned
      7. Programming Challenges
    3. 11. Find the Buried Treasure!
      1. Designing the Game
      2. Creating the Web Page with HTML
      3. Picking a Random Treasure Location
        1. Picking Random Numbers
        2. Setting the Treasure Coordinates
      4. The Click Handler
        1. Counting Clicks
        2. Calculating the Distance Between the Click and the Treasure
        3. Using the Pythagorean Theorem
        4. Telling the Player How Close They Are
        5. Checking If the Player Won
      5. Putting It All Together
      6. What You Learned
      7. Programming Challenges
    4. 12. Object-Oriented Programming
      1. A Simple Object
      2. Adding Methods to Objects
        1. Using the this Keyword
        2. Sharing a Method Between Multiple Objects
      3. Creating Objects Using Constructors
        1. Anatomy of the Constructor
        2. Creating a Car Constructor
          1. Creating the HTML Document
          2. The Car Constructor function
          3. Calling the Car Constructor
      4. Drawing the Cars
      5. Testing the drawCar Function
      6. Customizing Objects with Prototypes
        1. Adding a draw Method to the Car Prototype
        2. Adding a moveRight Method
        3. Adding the Left, Up, and Down move Methods
      7. What You Learned
      8. Programming Challenges
  10. III. Canvas
    1. 13. The Canvas Element
      1. Creating a Basic Canvas
      2. Drawing on the Canvas
        1. Selecting and Saving the canvas Element
        2. Getting the Drawing Context
        3. Drawing a Square
        4. Drawing Multiple Squares
      3. Changing the Drawing Color
      4. Drawing Rectangle Outlines
      5. Drawing Lines or Paths
      6. Filling Paths
      7. Drawing Arcs and Circles
        1. Drawing a Quarter Circle or an Arc
        2. Drawing a Half Circle
        3. Drawing a Full Circle
      8. Drawing Lots of Circles with a Function
      9. What You Learned
      10. Programming Challenges
    2. 14. Making Things Move on the Canvas
      1. Moving Across the Page
        1. Clearing the Canvas
        2. Drawing the Rectangle
        3. Changing the Position
        4. Viewing the Animation in the Browser
      2. Animating the Size of a Square
      3. A Random Bee
        1. A New circle Function
        2. Drawing the Bee
        3. Updating the Bee’s Location
          1. Changing the Coordinate with an Offset Value
          2. Checking if the Bee Reaches the Edge
          3. Returning the Updated Coordinate
        4. Animating Our Buzzing Bee
      4. Bouncing a Ball!
        1. The Ball Constructor
        2. Drawing the Ball
        3. Moving the Ball
        4. Bouncing the Ball
        5. Animating the Ball
      5. What You Learned
      6. Programming Challenges
    3. 15. Controlling Animations with the Keyboard
      1. Keyboard Events
        1. Setting Up the HTML File
        2. Adding the keydown Event Handler
        3. Using an Object to Convert Keycodes into Names
      2. Moving a Ball with the Keyboard
        1. Setting Up the Canvas
        2. Defining the circle Function
        3. Creating the Ball Constructor
        4. Defining the move Method
        5. Defining the draw Method
        6. Creating a setDirection Method
        7. Reacting to the Keyboard
        8. Animating the Ball
      3. Putting It All Together
      4. Running the Code
      5. What You Learned
      6. Programming Challenges
    4. 16. Making a Snake Game: Part 1
      1. The Game Play
      2. The Structure of the Game
        1. Using setInterval to Animate the Game
        2. Creating the Game Objects
        3. Setting Up Keyboard Control
      3. Game Setup
        1. Creating the HTML
        2. Defining the canvas, ctx, width, and height Variables
        3. Dividing the Canvas into Blocks
        4. Defining the score Variable
      4. Drawing the Border
      5. Displaying the Score
        1. Setting the Text Baseline
        2. Setting the Size and Font
        3. Writing the drawScore Function
      6. Ending the Game
      7. What You Learned
      8. Programming Challenges
    5. 17. Making a Snake Game: Part 2
      1. Building the Block Constructor
        1. Adding the drawSquare Method
        2. Adding the drawCircle Method
        3. Adding the equal Method
      2. Creating the Snake
        1. Writing the Snake Constructor
          1. Defining the Snake Segments
          2. Setting the Direction of Movement
        2. Drawing the Snake
      3. Moving the Snake
        1. Adding the move Method
          1. Creating a New Head
          2. Checking for Collisions and Adding the Head
          3. Eating the Apple
        2. Adding the checkCollision Method
          1. Checking for Wall Collisions
          2. Checking for Self-Collisions
      4. Setting the Snake’s Direction with the Keyboard
        1. Adding the keydown Event Handler
        2. Adding the setDirection Method
      5. Creating the Apple
        1. Writing the Apple Constructor
        2. Drawing the Apple
        3. Moving the Apple
      6. Putting It All Together
      7. What You Learned
      8. Programming Challenges
  11. Afterword: Where To Go From Here
    1. More JavaScript
    2. Web Programming
      1. HTML
      2. CSS
      3. Server-Side Code with Node.js
    3. Graphical Programming
      1. Canvas
      2. SVG Using Raphaël
    4. 3D Programming
    5. Programming Robots
    6. Audio Programming
    7. Game Programming
    8. Sharing Your Code Using JSFiddle
  12. Glossary
  13. Updates
    1. More Smart Books for Curious Kids!
  14. Index
  15. Copyright

Product information

  • Title: JavaScript for Kids
  • Author(s): Nick Morgan
  • Release date: December 2014
  • Publisher(s): No Starch Press
  • ISBN: 9781593274085