Javascript for Kids
Total Page:16
File Type:pdf, Size:1020Kb
For kids aged 10+ (and their parents) rReEaAlL pPrrooggrraammmmiinngg.. J R EAL EA SY. J Java Script r eal ea sy. av Java Script av Illustrations by Miran Lipovaca JavaScript is the programming language of With visual examples like bouncing balls, ascript for kids aScript for Kids the Internet, the secret sauce that makes the animated bees, and racing cars, you can really FFOORR KKIIDDSS Web awesome, your favorite sites interactive, see what you’re programming. Each chapter and online games fun! builds on the last, and programming challenges JavaScript for Kids is a lighthearted intro- at the end of each chapter will stretch your A Pl ay fu l I ntro du ctio n to Pro g r am min g duction that teaches programming essentials brain and inspire your own amazing programs. through patient, step-by-step examples paired Make something cool with JavaScript today! with funny illustrations. You’ll begin with ABOUT THE AUTHOR the basics, like working with strings, arrays, Nick Morgan and loops, and then move on to more advanced Nick Morgan is a frontend engineer at topics, like building interactivity with jQuery Twitter. He loves all programming languages and drawing graphics with Canvas. but has a particular soft spot for JavaScript. Along the way, you’ll write games such as Nick lives in San Francisco (the foggy part) Find the Buried Treasure, Hangman, and with his fiancée and their fluffy dog, Pancake. Snake. You’ll also learn how to: He blogs at skilldrick.co.uk. 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 Morgan P S H R O E L $34.95 ($36.95 CDN) G V R E A I M N M : I N G LANGUAGES/JAVASCRIPT www.nostarch.com TH E FINEST I N G EEK ENTERTAI N M ENT ™ JavaScript for Kids JavaScript for Kids A Playful Introduction to Programming By Nick Morgan San Francisco 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; [email protected] 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. To Philly (and Pancake) 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. 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 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 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