book

JavaScript for Kids

by Nick Morgan

December 2014

Beginner

336 pages

6h 32m

English

No Starch Press

Read now

Unlock full access

Who Should Read This Book?How to Read This BookWhat’s in this Book?Have Fun!
Meet JavaScriptWhy Learn JavaScript?Writing Some JavaScriptThe Structure of a JavaScript ProgramSyntaxCommentsWhat You Learned
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

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
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
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
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
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
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
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
Delaying Code with setTimeoutCanceling a TimeoutCalling Code Multiple Times with setIntervalAnimating Elements with setIntervalResponding to User ActionsResponding to ClicksThe mousemove EventWhat You LearnedProgramming Challenges
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
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
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
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
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
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
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
More JavaScriptWeb ProgrammingHTMLCSSServer-Side Code with Node.jsGraphical ProgrammingCanvasSVG Using Raphaël3D ProgrammingProgramming RobotsAudio ProgrammingGame ProgrammingSharing Your Code Using JSFiddle
More Smart Books for Curious Kids!

Content preview from JavaScript for Kids

Chapter 13. The Canvas Element

JavaScript isn’t all about playing with text and numbers. You can also use JavaScript to draw pictures with the HTML canvas element, which you can think of as a blank canvas or sheet of paper. You can draw almost anything that you want on this canvas, such as lines, shapes, and text. The only limit is your imagination!

In this chapter, you’ll learn the basics of drawing on the canvas. In the following chapters, we’ll build on our knowledge to create a canvas-based JavaScript game.

Creating a Basic Canvas

As our first step in using the canvas, create a new HTML document for the canvas element, as shown in the following listing. Save this document as canvas.html:

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

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.

Start your free trial

Publisher Resources

ISBN: 9781457189838Errata Page

JavaScript for Kids

by Nick Morgan

Chapter 13. The Canvas Element

Creating a Basic Canvas

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.

You might also like