Acknowledgments. Who Should Read This Book?...xxiv How to Read This Book...xxiv What s in This Book?...xxv Have Fun!...xxvi

Transcription

1 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 Data Types and Variables 13 Numbers and Operators...15 Variables...17 Naming Variables...19 Creating New Variables Using Math Incrementing and Decrementing = (plus-equals) and = (minus-equals) Strings...23 Joining Strings...25 Finding the Length of a String Getting a Single Character from a String...26 Cutting Up Strings...27 Changing Strings to All Capital or All Lowercase Letters...28 Booleans Logical Operators...30 Comparing Numbers with Booleans...33

2 undefined and null...37 What You Learned Arrays 39 Why Should You Care About Arrays?...40 Creating an Array Accessing an Array s Elements...42 Setting or Changing Elements in an Array Mixing Data Types in an Array...45 Working with Arrays...46 Finding the Length of an Array...46 Adding Elements to an Array 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 #3: Use + or join? #4: Joining Numbers 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 Storing Information About Your Movies...74 What You Learned...75 xii

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

4 Designing Your Game Using Pseudocode to Design the Game Tracking the State of the Word Designing the Game Loop Coding the Game Choosing a Random Word Creating the Answer Array Coding the Game Loop Ending the Game The Game Code What You Learned Programming Challenges #1: More Words #2: Capital Letters #3: Limiting Guesses #4: Fixing a Bug Functions 123 The Basic Anatomy of a Function Creating a Simple Function Calling a Function Passing Arguments into Functions Printing Cat Faces! Passing Multiple Arguments to a Function Returning Values from Functions Using Function Calls as Values Using Functions to Simplify Code A Function to Pick a Random Word A Random Insult Generator Making the Random Insult Generator into a Function Leaving a Function Early with return Using return Multiple Times Instead of if...else Statements What You Learned Programming Challenges #1: Doing Arithmetic with Functions #2: Are These Arrays the Same? #3: Hangman, Using Functions xiv

5 Part II: Advanced JavaScript 9 The DOM and jquery 143 Selecting DOM Elements Using id to Identify Elements Selecting an Element Using getelementbyid Replacing the Heading Text Using the DOM Using jquery to Work with the DOM Tree Loading jquery on Your HTML Page Replacing the Heading Text Using jquery Creating New Elements with jquery Animating Elements with jquery Chaining jquery Animations What You Learned Programming Challenges #1: Listing Your Friends with jquery (And Making Them Smell!) #2: Making a Heading Flash #3: Delaying Animations #4: Using fadeto Interactive Programming 155 Delaying Code with settimeout Canceling a Timeout Calling Code Multiple Times with setinterval Animating Elements with setinterval Responding to User Actions Responding to Clicks The mousemove Event What You Learned Programming Challenges #1: Follow the Clicks #2: Create Your Own Animation #3: Cancel an Animation with a Click #4: Make a Click the Header Game! xv

6 11 Find the Buried Treasure! 167 Designing the Game Creating the Web Page with HTML Picking a Random Treasure Location Picking Random Numbers Setting the Treasure Coordinates The Click Handler Counting Clicks Calculating the Distance Between the Click and the Treasure Using the Pythagorean Theorem Telling the Player How Close They Are Checking If the Player Won Putting It All Together What You Learned Programming Challenges #1: Increasing the Playing Area #2: Adding More Messages #3: Adding a Click Limit #4: Displaying the Number of Remaining Clicks Object-Oriented Programming 181 A Simple Object Adding Methods to Objects Using the this Keyword Sharing a Method Between Multiple Objects Creating Objects Using Constructors Anatomy of the Constructor Creating a Car Constructor Drawing the Cars Testing the drawcar Function Customizing Objects with Prototypes Adding a draw Method to the Car Prototype Adding a moveright Method Adding the Left, Up, and Down move Methods What You Learned Programming Challenges #1: Drawing in the Car Constructor #2: Adding a speed Property #3: Racing Cars xvi

7 Part III: Canvas 13 The canvas Element 199 Creating a Basic Canvas Drawing on the Canvas Selecting and Saving the canvas Element Getting the Drawing Context Drawing a Square Drawing Multiple Squares Changing the Drawing Color Drawing Rectangle Outlines Drawing Lines or Paths Filling Paths Drawing Arcs and Circles Drawing a Quarter Circle or an Arc Drawing a Half Circle Drawing a Full Circle Drawing Lots of Circles with a Function What You Learned Programming Challenges #1: A Snowman-Drawing Function #2: Drawing an Array of Points #3: Painting with Your Mouse #4: Drawing the Man in Hangman Making Things Move on the Canvas 217 Moving Across the Page Clearing the Canvas Drawing the Rectangle Changing the Position Viewing the Animation in the Browser Animating the Size of a Square A Random Bee A New circle Function Drawing the Bee Updating the Bee s Location Animating Our Buzzing Bee Bouncing a Ball! The Ball Constructor Drawing the Ball xvii

8 Moving the Ball Bouncing the Ball Animating the Ball What You Learned Programming Challenges #1: Bouncing the Ball Around a Larger Canvas #2: Randomizing this.xspeed and this.yspeed #3: Animating More Balls #4: Making the Balls Colorful Controlling Animations with the Keyboard 235 Keyboard Events Setting Up the HTML File Adding the keydown Event Handler Using an Object to Convert Keycodes into Names Moving a Ball with the Keyboard Setting Up the Canvas Defining the circle Function Creating the Ball Constructor Defining the move Method Defining the draw Method Creating a setdirection Method Reacting to the Keyboard Animating the Ball Putting It All Together Running the Code What You Learned Programming Challenges #1: Bouncing Off the Walls #2: Controlling the Speed #3: Flexible Controls Making a Snake Game: Part The Game Play The Structure of the Game Using setinterval to Animate the Game Creating the Game Objects Setting Up Keyboard Control Game Setup Creating the HTML Defining the canvas, ctx, width, and height Variables xviii

9 Dividing the Canvas into Blocks Defining the score Variable Drawing the Border Displaying the Score Setting the Text Baseline Setting the Size and Font Writing the drawscore Function Ending the Game What You Learned Programming Challenges #1: Putting It Together #2: Animating the Score #3: Adding Text to Hangman Making a Snake Game: Part Building the Block Constructor Adding the drawsquare Method Adding the drawcircle Method Adding the equal Method Creating the Snake Writing the Snake Constructor Drawing the Snake Moving the Snake Adding the move Method Adding the checkcollision Method Setting the Snake s Direction with the Keyboard Adding the keydown Event Handler Adding the setdirection Method Creating the Apple Writing the Apple Constructor Drawing the Apple Moving the Apple Putting It All Together What You Learned Programming Challenges #1: Making the Game Bigger #2: Coloring the Snake #3: Making the Game Speed Up as You Play #4: Fixing the apple.move Method xix

10 Afterword Where to Go from Here 293 More JavaScript Web Programming HTML CSS Server-Side Code with Node.js Graphical Programming canvas SVG Using Raphaël D Programming Programming Robots Audio Programming Game Programming Sharing Your Code Using JSFiddle Glossary 299 Index 305 xx