book

JavaScript for Kids

Name: JavaScript for Kids
Author: Nick Morgan
ISBN: 9781593274085

by Nick Morgan

December 2014

Beginner

336 pages

6h 32m

English

No Starch Press

Read now

Unlock full access

JavaScript for Kids: A Playful Introduction to Programming
Dedication
About the Author
About the Illustrator
About the Technical Reviewer
Acknowledgments
Introduction
Who Should Read This Book?How to Read This BookWhat’s in this Book?Have Fun!
I. Fundamentals
1. What Is JavaScript?
Meet JavaScriptWhy Learn JavaScript?Writing Some JavaScriptThe Structure of a JavaScript ProgramSyntaxCommentsWhat You Learned
2. Data Types and Variables
Numbers and OperatorsVariablesNaming VariablesCreating New Variables Using MathSeconds in an HourSeconds in a DaySeconds in a YearAge in SecondsIncrementing and Decrementing+= (plus-equals) and –= (minus-equals)StringsJoining StringsFinding the Length of a StringGetting a Single Character from a StringCutting Up StringsChanging Strings to All Capital or All Lowercase LettersBooleansLogical Operators&& (and)|| (or)! (not)Combining logical operatorsComparing Numbers with BooleansGreater ThanLess ThanEqual ToDouble Equalsundefined and nullWhat You Learned

3. Arrays
Why Should You Care About Arrays?Creating an ArrayAccessing an Array’s ElementsSetting or Changing Elements in an ArrayMixing Data Types in an ArrayWorking with ArraysFinding the Length of an ArrayAdding Elements to an ArrayRemoving Elements from an ArrayAdding ArraysJoining Multiple ArraysFinding the Index of an Element in an ArrayTurning an Array into a StringUseful Things to Do with ArraysFinding Your Way HomeBuilding the Array with PushGoing in Reverse with popDecision MakerUsing Math.random()Rounding Down with Math.floor()The Complete Decision MakerCreating a Random Insult GeneratorWhat You LearnedProgramming Challenges
4. Objects
Creating ObjectsKeys Without QuotesAccessing Values in ObjectsAdding Values to ObjectsAdding Keys with Dot NotationCombining Arrays and ObjectsAn Array of FriendsExploring Objects in the ConsoleUseful Things to Do with ObjectsKeeping Track of Owed MoneyStoring Information About Your MoviesWhat You LearnedProgramming Challenges
5. The Basics of HTML
Text EditorsOur First HTML DocumentTags and ElementsHeading ElementsThe p ElementWhitespace in HTML and Block-Level ElementsInline ElementsA Full HTML DocumentHTML HierarchyAdding Links to Your HTMLLink AttributesTitle AttributesWhat You Learned
6. Conditionals and Loops
Embedding JavaScript in HTMLConditionalsif Statementsif...else StatementsChaining if...else StatementsLoopswhile LoopsCounting Sheep with a while loopPreventing Infinite Loopsfor LoopsUsing for Loops with Arrays and StringsOther Ways to use for LoopsWhat You LearnedProgramming Challenges
7. Creating a Hangman Game
Interacting with a PlayerCreating a PromptUsing confirm to Ask a Yes or No QuestionUsing Alerts to Give a Player InformationWhy Use alert Instead of console.log?Designing Your GameUsing Pseudocode to Design the GameTracking the State of the WordDesigning the Game LoopCoding the GameChoosing a Random WordCreating the Answer ArrayCoding the Game LoopShowing the Player’s ProgressHandling the Player’s InputUpdating the Game StateEnding the GameThe Game CodeWhat You LearnedProgramming Challenges
8. Functions
The Basic Anatomy of a FunctionCreating a Simple FunctionCalling a FunctionPassing Arguments into FunctionsPrinting Cat Faces!Passing Multiple Arguments to a FunctionReturning Values from FunctionsUsing Function Calls as ValuesUsing Functions to Simplify CodeA Function to Pick a Random WordA Random Insult GeneratorMaking the Random Insult Generator into a FunctionLeaving a Function Early with returnUsing return Multiple Times Instead of if...else StatementsWhat You LearnedProgramming Challenges
II. Advanced JavaScript
9. The DOM and jQuery
Selecting DOM ElementsUsing id to Identify ElementsSelecting an Element Using getElementByIdReplacing the Heading Text Using the DOMUsing jQuery to Work with the DOM TreeLoading jQuery on Your HTML PageReplacing the Heading Text Using jQueryCreating New Elements with jQueryAnimating Elements with jQueryChaining jQuery AnimationsWhat You LearnedProgramming Challenges
10. Interactive Programming
Delaying Code with setTimeoutCanceling a TimeoutCalling Code Multiple Times with setIntervalAnimating Elements with setIntervalResponding to User ActionsResponding to ClicksThe mousemove EventWhat You LearnedProgramming Challenges
11. Find the Buried Treasure!
Designing the GameCreating the Web Page with HTMLPicking a Random Treasure LocationPicking Random NumbersSetting the Treasure CoordinatesThe Click HandlerCounting ClicksCalculating the Distance Between the Click and the TreasureUsing the Pythagorean TheoremTelling the Player How Close They AreChecking If the Player WonPutting It All TogetherWhat You LearnedProgramming Challenges
12. Object-Oriented Programming
A Simple ObjectAdding Methods to ObjectsUsing the this KeywordSharing a Method Between Multiple ObjectsCreating Objects Using ConstructorsAnatomy of the ConstructorCreating a Car ConstructorCreating the HTML DocumentThe Car Constructor functionCalling the Car ConstructorDrawing the CarsTesting the drawCar FunctionCustomizing Objects with PrototypesAdding a draw Method to the Car PrototypeAdding a moveRight MethodAdding the Left, Up, and Down move MethodsWhat You LearnedProgramming Challenges
III. Canvas
13. The Canvas Element
Creating a Basic CanvasDrawing on the CanvasSelecting and Saving the canvas ElementGetting the Drawing ContextDrawing a SquareDrawing Multiple SquaresChanging the Drawing ColorDrawing Rectangle OutlinesDrawing Lines or PathsFilling PathsDrawing Arcs and CirclesDrawing a Quarter Circle or an ArcDrawing a Half CircleDrawing a Full CircleDrawing Lots of Circles with a FunctionWhat You LearnedProgramming Challenges
14. Making Things Move on the Canvas
Moving Across the PageClearing the CanvasDrawing the RectangleChanging the PositionViewing the Animation in the BrowserAnimating the Size of a SquareA Random BeeA New circle FunctionDrawing the BeeUpdating the Bee’s LocationChanging the Coordinate with an Offset ValueChecking if the Bee Reaches the EdgeReturning the Updated CoordinateAnimating Our Buzzing BeeBouncing a Ball!The Ball ConstructorDrawing the BallMoving the BallBouncing the BallAnimating the BallWhat You LearnedProgramming Challenges
15. Controlling Animations with the Keyboard
Keyboard EventsSetting Up the HTML FileAdding the keydown Event HandlerUsing an Object to Convert Keycodes into NamesMoving a Ball with the KeyboardSetting Up the CanvasDefining the circle FunctionCreating the Ball ConstructorDefining the move MethodDefining the draw MethodCreating a setDirection MethodReacting to the KeyboardAnimating the BallPutting It All TogetherRunning the CodeWhat You LearnedProgramming Challenges
16. Making a Snake Game: Part 1
The Game PlayThe Structure of the GameUsing setInterval to Animate the GameCreating the Game ObjectsSetting Up Keyboard ControlGame SetupCreating the HTMLDefining the canvas, ctx, width, and height VariablesDividing the Canvas into BlocksDefining the score VariableDrawing the BorderDisplaying the ScoreSetting the Text BaselineSetting the Size and FontWriting the drawScore FunctionEnding the GameWhat You LearnedProgramming Challenges
17. Making a Snake Game: Part 2
Building the Block ConstructorAdding the drawSquare MethodAdding the drawCircle MethodAdding the equal MethodCreating the SnakeWriting the Snake ConstructorDefining the Snake SegmentsSetting the Direction of MovementDrawing the SnakeMoving the SnakeAdding the move MethodCreating a New HeadChecking for Collisions and Adding the HeadEating the AppleAdding the checkCollision MethodChecking for Wall CollisionsChecking for Self-CollisionsSetting the Snake’s Direction with the KeyboardAdding the keydown Event HandlerAdding the setDirection MethodCreating the AppleWriting the Apple ConstructorDrawing the AppleMoving the ApplePutting It All TogetherWhat You LearnedProgramming Challenges
Afterword: Where To Go From Here
More JavaScriptWeb ProgrammingHTMLCSSServer-Side Code with Node.jsGraphical ProgrammingCanvasSVG Using Raphaël3D ProgrammingProgramming RobotsAudio ProgrammingGame ProgrammingSharing Your Code Using JSFiddle
Glossary
Updates
More Smart Books for Curious Kids!
Index
Copyright

Content preview from JavaScript for Kids

Chapter 14. Making Things Move on the Canvas

Creating canvas animations in JavaScript is a lot like creating a stop-motion animation. You draw a shape, pause, erase the shape, and then redraw it in a new position. This may sound like a lot of steps, but JavaScript can update the position of the shape very quickly in order to create a smooth animation. In Chapter 10, we learned how to animate DOM elements. In this chapter, we’ll animate our canvas drawings.

Moving Across the Page

Let’s use canvas and setInterval to draw a square and move it slowly across a page. Create a new file called canvasanimation.html and add the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Animation</title>
</head>

<body>
    <canvas id="canvas" width="200" height= ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781457189838Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

JavaScript for Kids

by Nick Morgan

Chapter 14. Making Things Move on the Canvas

Moving Across the Page

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.