JavaScript for Kids - A Playful Introduction to Programming (Nick Morgan) (Z-Library)

📄 File Format: PDF

💾 File Size: 13.4 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

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 intro- duction 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 SHELVE IN : PROGRAM M ING LANGUAGES/JAVASCRIPT www.nostarch.com TH E F I N EST I N G E E K E NTE RTA I N M E NT™ For kids aged 10+ (and their parents) real programming. real easy. REAL P i . REAL EASY .$34.95 ($36 95 CDN) Illustrations by Miran Lipovaca N i c k M o r g a n Java Script FOR KIDS A Playful Introduction to Programming 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! ABOUT THE AUTHOR Nick Morgan is a frontend engineer at Twitter. He loves all programming languages but has a particular soft spot for JavaScript. Nick lives in San Francisco (the foggy part) with his fiancée and their fluffy dog, Pancake. He blogs at skilldrick.co.uk.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  Use the Canvas element to draw and animate graphics  Program real user-controlled games with collision detection and score keeping web pages react to user input J a v a S c r ip t f o r K id s J a v a s c r ip t f o r k id s M o r g a n

📄 Page 2

JavaScript for Kids

📄 Page 3

(This page has no text content)

📄 Page 4

JavaScript for Kids A Playful Introduction to Programming By Nick Morgan San Francisco

📄 Page 5

JavaScript for KidS. Copyright © 2015 by Nick Morgan. All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. Printed in USA First printing 18 17 16 15 14 1 2 3 4 5 6 7 8 9 ISBN-10: 1-59327-408-4 ISBN-13: 978-1-59327-408-5 Publisher: William Pollock Production Editor: Riley Hoffman Cover Illustration: Tina Salameh Illustrator: Miran Lipovac� a Developmental Editors: William Pollock and Seph Kramer Technical Reviewer: Angus Croll Copyeditor: Rachel Monaghan Compositor: Riley Hoffman Proofreader: Paula L. Fleming For information on distribution, translations, or bulk sales, please contact No Starch Press, Inc. directly: No Starch Press, Inc. 245 8th Street, San Francisco, CA 94103 phone: 415.863.9900; info@nostarch.com www.nostarch.com Library of Congress Control Number: 2014953113 No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the benefit of the trademark owner, with no inten- tion of infringement of the trademark. The information in this book is distributed on an “As Is” basis, without warranty. While every precau- tion has been taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in it.

📄 Page 6

To Philly (and Pancake)

📄 Page 7

(This page has no text content)

📄 Page 8

About the Author Nick Morgan is a frontend engineer at Twitter. He loves all pro- gramming languages but has a particular soft spot for JavaScript. Nick lives in San Francisco (the foggy part) with his fiancée and their fluffy dog, Pancake. He blogs at skilldrick.co.uk. About the Illustrator Miran Lipovaca is the author of Learn You a Haskell for Great Good!. He enjoys boxing, playing bass guitar, and, of course, drawing. He has a fascination with dancing skeletons and the number 71, and when he walks through automatic doors he pre- tends that he’s actually opening them with his mind. About the Technical Reviewer Angus Croll is the author of If Hemingway Wrote JavaScript, and he is obsessed with JavaScript and literature in equal measure. He works on Twitter’s UI framework team, where he co-authored the Flight framework. He writes the influential JavaScript, JavaScript blog and speaks at conferences worldwide. He tweets at @angustweets.

📄 Page 9

(This page has no text content)

📄 Page 10

BRIef CoNTeNTS Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii Part I: fundamentals Chapter 1: What Is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Chapter 2: Data Types and Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Chapter 3: Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Chapter 4: Objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Chapter 5: The Basics of HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Chapter 6: Conditionals and Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Chapter 7: Creating a Hangman Game. . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Chapter 8: Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Part II: Advanced JavaScript Chapter 9: The DOM and jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Chapter 10: Interactive Programming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Chapter 11: Find the Buried Treasure! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Chapter 12: Object-Oriented Programming . . . . . . . . . . . . . . . . . . . . . . . . 181 Part III: Canvas Chapter 13: The canvas Element. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Chapter 14: Making Things Move on the Canvas. . . . . . . . . . . . . . . . . . . . 217 Chapter 15: Controlling Animations with the Keyboard . . . . . . . . . . . . . . 235 Chapter 16: Making a Snake Game: Part 1 . . . . . . . . . . . . . . . . . . . . . . . . 251 Chapter 17: Making a Snake Game: Part 2 . . . . . . . . . . . . . . . . . . . . . . . . 267 Afterword: Where to Go from Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Glossary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

📄 Page 11

(This page has no text content)

📄 Page 12

CoNTeNTS IN DeTAIl Acknowledgments xxi Introduction xxiii Who Should Read This Book?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xxiv How to Read This Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xxiv What’s in This Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv Have Fun! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xxvi Part I: fundamentals 1 What Is JavaScript? 3 Meet JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Why Learn JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Writing Some JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 The Structure of a JavaScript Program. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2 Data Types and Variables 13 Numbers and Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Naming Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Creating New Variables Using Math. . . . . . . . . . . . . . . . . . . . . . . . . 19 Incrementing and Decrementing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 += (plus-equals) and – = (minus-equals). . . . . . . . . . . . . . . . . . . . . . . 22 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Joining Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Finding the Length of a String. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Getting a Single Character from a String . . . . . . . . . . . . . . . . . . . . . 26 Cutting Up Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Changing Strings to All Capital or All Lowercase Letters . . . . . . . . 28 Booleans. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Logical Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Comparing Numbers with Booleans . . . . . . . . . . . . . . . . . . . . . . . . . 33

📄 Page 13

xii Contents in Detail undefined and null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 3 Arrays 39 Why Should You Care About Arrays? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Creating an Array. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Accessing an Array’s Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Setting or Changing Elements in an Array. . . . . . . . . . . . . . . . . . . . . . . . . . 43 Mixing Data Types in an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Working with Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Finding the Length of an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Adding Elements to an Array. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Removing Elements from an Array . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Adding Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Finding the Index of an Element in an Array . . . . . . . . . . . . . . . . . 52 Turning an Array into a String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Useful Things to Do with Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Finding Your Way Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Decision Maker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Creating a Random Insult Generator . . . . . . . . . . . . . . . . . . . . . . . . 59 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 #1: New Insults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 #2: More Sophisticated Insults. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 #3: Use + or join? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 #4: Joining Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 4 objects 63 Creating Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Keys Without Quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Accessing Values in Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Adding Values to Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Adding Keys with Dot Notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Combining Arrays and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 An Array of Friends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Exploring Objects in the Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Useful Things to Do with Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Keeping Track of Owed Money. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Storing Information About Your Movies . . . . . . . . . . . . . . . . . . . . . . 74 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

📄 Page 14

Contents in Detail xiii Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 #1: Scorekeeper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 #2: Digging into Objects and Arrays . . . . . . . . . . . . . . . . . . . . . . . . . 76 5 The Basics of HTMl 77 Text Editors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Our First HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Tags and Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Heading Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 The p Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Whitespace in HTML and Block-Level Elements . . . . . . . . . . . . . . . 81 Inline Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 A Full HTML Document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 HTML Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Adding Links to Your HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Link Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Title Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 6 Conditionals and loops 89 Embedding JavaScript in HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Conditionals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 if Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 if…else Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Chaining if…else Statements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 while Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 for Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 #1: Awesome Animals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 #2: Random String Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 #3: h4ck3r sp34k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 7 Creating a Hangman Game 105 Interacting with a Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Creating a Prompt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Using confirm to Ask a Yes or No Question . . . . . . . . . . . . . . . . . . 108 Using Alerts to Give a Player Information . . . . . . . . . . . . . . . . . . . 109 Why Use alert Instead of console.log? . . . . . . . . . . . . . . . . . . . . . . . 109

📄 Page 15

xiv Contents in Detail Designing Your Game. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Using Pseudocode to Design the Game . . . . . . . . . . . . . . . . . . . . . . 110 Tracking the State of the Word . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Designing the Game Loop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Coding the Game. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Choosing a Random Word. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Creating the Answer Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Coding the Game Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Ending the Game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 The Game Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 #1: More Words . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 #2: Capital Letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 #3: Limiting Guesses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 #4: Fixing a Bug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 8 functions 123 The Basic Anatomy of a Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Creating a Simple Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Calling a Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Passing Arguments into Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Printing Cat Faces! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Passing Multiple Arguments to a Function. . . . . . . . . . . . . . . . . . . 128 Returning Values from Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Using Function Calls as Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Using Functions to Simplify Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 A Function to Pick a Random Word. . . . . . . . . . . . . . . . . . . . . . . . . 132 A Random Insult Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Making the Random Insult Generator into a Function . . . . . . . . . 134 Leaving a Function Early with return. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Using return Multiple Times Instead of if...else Statements. . . . . . . . . . . 136 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 #1: Doing Arithmetic with Functions. . . . . . . . . . . . . . . . . . . . . . . . 138 #2: Are These Arrays the Same? . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 #3: Hangman, Using Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

📄 Page 16

Contents in Detail xv Part II: Advanced JavaScript 9 The DoM and jQuery 143 Selecting DOM Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Using id to Identify Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Selecting an Element Using getElementById. . . . . . . . . . . . . . . . . 145 Replacing the Heading Text Using the DOM . . . . . . . . . . . . . . . . . 146 Using jQuery to Work with the DOM Tree . . . . . . . . . . . . . . . . . . . . . . . . . 148 Loading jQuery on Your HTML Page . . . . . . . . . . . . . . . . . . . . . . . 148 Replacing the Heading Text Using jQuery . . . . . . . . . . . . . . . . . . . 148 Creating New Elements with jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Animating Elements with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Chaining jQuery Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 #1: Listing Your Friends with jQuery (And Making Them Smell!). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 #2: Making a Heading Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 #3: Delaying Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 #4: Using fadeTo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 10 Interactive Programming 155 Delaying Code with setTimeout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Canceling a Timeout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Calling Code Multiple Times with setInterval . . . . . . . . . . . . . . . . . . . . . . 158 Animating Elements with setInterval . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Responding to User Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Responding to Clicks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 The mousemove Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 #1: Follow the Clicks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 #2: Create Your Own Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 #3: Cancel an Animation with a Click . . . . . . . . . . . . . . . . . . . . . . . 166 #4: Make a “Click the Header” Game! . . . . . . . . . . . . . . . . . . . . . . . 166

📄 Page 17

xvi Contents in Detail 11 find the Buried Treasure! 167 Designing the Game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Creating the Web Page with HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Picking a Random Treasure Location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Picking Random Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Setting the Treasure Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . 171 The Click Handler. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Counting Clicks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Calculating the Distance Between the Click and the Treasure . . . 172 Using the Pythagorean Theorem . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Telling the Player How Close They Are. . . . . . . . . . . . . . . . . . . . . . 175 Checking If the Player Won . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 #1: Increasing the Playing Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 #2: Adding More Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 #3: Adding a Click Limit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 #4: Displaying the Number of Remaining Clicks . . . . . . . . . . . . . . 179 12 object-oriented Programming 181 A Simple Object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Adding Methods to Objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Using the this Keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Sharing a Method Between Multiple Objects . . . . . . . . . . . . . . . . . 183 Creating Objects Using Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Anatomy of the Constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Creating a Car Constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Drawing the Cars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Testing the drawCar Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Customizing Objects with Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Adding a draw Method to the Car Prototype. . . . . . . . . . . . . . . . . . 191 Adding a moveRight Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Adding the Left, Up, and Down move Methods. . . . . . . . . . . . . . . . 193 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 #1: Drawing in the Car Constructor. . . . . . . . . . . . . . . . . . . . . . . . . 195 #2: Adding a speed Property. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 #3: Racing Cars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

📄 Page 18

Contents in Detail xvii Part III: Canvas 13 The canvas element 199 Creating a Basic Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Drawing on the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Selecting and Saving the canvas Element. . . . . . . . . . . . . . . . . . . . 201 Getting the Drawing Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Drawing a Square . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Drawing Multiple Squares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Changing the Drawing Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Drawing Rectangle Outlines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Drawing Lines or Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Filling Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Drawing Arcs and Circles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Drawing a Quarter Circle or an Arc. . . . . . . . . . . . . . . . . . . . . . . . . 210 Drawing a Half Circle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Drawing a Full Circle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Drawing Lots of Circles with a Function. . . . . . . . . . . . . . . . . . . . . . . . . . . 212 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 #1: A Snowman-Drawing Function . . . . . . . . . . . . . . . . . . . . . . . . . 214 #2: Drawing an Array of Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 #3: Painting with Your Mouse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 #4: Drawing the Man in Hangman . . . . . . . . . . . . . . . . . . . . . . . . . 215 14 Making Things Move on the Canvas 217 Moving Across the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Clearing the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Drawing the Rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Changing the Position. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Viewing the Animation in the Browser . . . . . . . . . . . . . . . . . . . . . . 219 Animating the Size of a Square . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 A Random Bee. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 A New circle Function. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Drawing the Bee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Updating the Bee’s Location. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Animating Our Buzzing Bee. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Bouncing a Ball! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 The Ball Constructor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Drawing the Ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

📄 Page 19

xviii Contents in Detail Moving the Ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Bouncing the Ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Animating the Ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 #1: Bouncing the Ball Around a Larger Canvas . . . . . . . . . . . . . . . 233 #2: Randomizing this.xSpeed and this.ySpeed . . . . . . . . . . . . . . . . 233 #3: Animating More Balls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 #4: Making the Balls Colorful. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 15 Controlling Animations with the Keyboard 235 Keyboard Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Setting Up the HTML File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Adding the keydown Event Handler . . . . . . . . . . . . . . . . . . . . . . . . 237 Using an Object to Convert Keycodes into Names . . . . . . . . . . . . . 238 Moving a Ball with the Keyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Setting Up the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Defining the circle Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Creating the Ball Constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Defining the move Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Defining the draw Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Creating a setDirection Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Reacting to the Keyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Animating the Ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Running the Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 #1: Bouncing Off the Walls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 #2: Controlling the Speed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 #3: Flexible Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 16 Making a Snake Game: Part 1 251 The Game Play . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 The Structure of the Game. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Using setInterval to Animate the Game . . . . . . . . . . . . . . . . . . . . . 254 Creating the Game Objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Setting Up Keyboard Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Game Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Creating the HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Defining the canvas, ctx, width, and height Variables . . . . . . . . . . 256

📄 Page 20

Contents in Detail xix Dividing the Canvas into Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Defining the score Variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Drawing the Border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Displaying the Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Setting the Text Baseline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Setting the Size and Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Writing the drawScore Function . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Ending the Game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 #1: Putting It Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 #2: Animating the Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 #3: Adding Text to Hangman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 17 Making a Snake Game: Part 2 267 Building the Block Constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Adding the drawSquare Method . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Adding the drawCircle Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Adding the equal Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Creating the Snake . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Writing the Snake Constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Drawing the Snake . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Moving the Snake . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Adding the move Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Adding the checkCollision Method. . . . . . . . . . . . . . . . . . . . . . . . . . 279 Setting the Snake’s Direction with the Keyboard. . . . . . . . . . . . . . . . . . . . 281 Adding the keydown Event Handler . . . . . . . . . . . . . . . . . . . . . . . . 281 Adding the setDirection Method . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Creating the Apple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Writing the Apple Constructor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Drawing the Apple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Moving the Apple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 What You Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Programming Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 #1: Making the Game Bigger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 #2: Coloring the Snake . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 #3: Making the Game Speed Up as You Play . . . . . . . . . . . . . . . . . 292 #4: Fixing the apple.move Method . . . . . . . . . . . . . . . . . . . . . . . . . . 292