Index

Symbols accessing values in looping through && (and), 30–31, 33 objects with, 66 elements of, * (multiplication), 15–17 adding elements to an 100–101 *= (multiply and assign), array with, 43–44 modifying, 43–44 23, 104 creating an array with, 41 vs. objects, 67–68 : (colon), 65 removing elements A , (comma), 128 from, 48–50 {} (curly ), 64, 67 add and assign (+=) operator, assigning values, 18 $ ( jQuery function), 149. See 22, 73 attributes, HTML, also jQuery addition, 15–17 86–87, 300 " (double ), with strings, 25, 61, 108 B 23–24, 65 alert method, 109–110 = (assignment), 18 and (&&) operator, beginPath context method, == (double equals), 36 30–31, 33 206–210 === (exactly equals), animation block-level HTML elements, 35–36, 96 with canvas 81–82 ! (not), 3 bouncing ball, 227–232 body / (division), 15–16 changing size, 220–221 of a control structure, /= (divide and assign), 23 moving horizontally, 92–95, 97, 99 > (greater than), 33–34 218–221 of a function, 124 # (id in selector strings), 149 random bee, 221–226 body element, 84–85 - (subtraction), 15–16 with setInterval, 159–161 Booleans, 14, 30–37, 300 -- (decrement), 21 append jQuery method, comparing numbers with, -= (subtract and assign), 22 150, 188 33–37 < (less than), 34 arc context method, in conditional statements, () (parentheses), 16–17, 209–212 91–96 27, 125 arguments, for functions, logical operators, 30–33 . (period). See dot notation 126, 300 for yes-or-no answers, || (or), 31–32, 33 arrays, 39–40, 54–60, 300 108–109 + (addition), 15–17 accessing, 42–43 brackets with strings, 25, 61, 108 adding elements to, 47, 50 curly, 64, 67 ++ (increment), 21 combining multiple, square. See square += (add and assign), 22, 73 50–52 brackets ; (semicolon), 14, 99 combining with objects, break keyword, 116 ' (single quotation mark), 24 69–71 [] (square brackets) converting to a string, 53 accessing a character creating, 41–42 calling from a string and data types, 45 functions, 125, 126, 300 with, 26 finding index of element methods, 47 accessing elements from in, 52–53 camel case, 19, 300 an array with, finding length of, 46 42–43, 45

JavaScript for Kids © 2014 by Nick Morgan canvas element, 199 conditionals, 89, 300 dot notation, 66 animating, 217–218 if...else statements, 91, accessing object keys bouncing ball, 227–232 93–96, 136–137 with, 69 changing size, 220–221 if statements, 91–93 adding keys to objects moving horizontally, confirm function, 108 with, 68 218–221 console, 7 adding methods to objects random bee, 221–226 calling constructors with, 182–183 circles and arcs, 209–213 in, 187 adding properties to clearing, 219 exploring objects in, objects with, 182 colors, 203–204 71–72 double equals (==) creating, 200 finding errors with, 120 operator, 36 lines and paths logging values to, 91 double quotation mark ("), drawing, 206–207 typing in, 42 23–24, 65 filling, 207–209 viewing output from drawing context (for rectangles and squares keyboard events canvas), 201 drawing, 201–203 with, 237 outlining, 205–206 console.log method, 91, 125 E resources, 295 vs. alert, 109–110 elements, HTML, 80, 301 Cascading Style Sheets constructors, 185–186, 300 else keyword, 93, 95 (CSS), 295 control structures, 90, 300. element, 82–83 chaining if...else See also conditionals; end tags, HTML, 80, 303 statements, 94–96 loops equal to (===) operator, chaining jQuery coordinates, browser, 163 35–36, 96 animations, 152 CSS (Cascading Style errors, 120 Chrome, web browser and Sheets), 295 event handlers, 162, 169, console, 7 css jQuery method, 188–189 171, 301 clearInterval function, curly brackets, 64, 67 event object, 162–163, 172 158–159 exactly equals (===) clearRect context method, D operator, 35–36, 96 218–219 data, 14, 300 execute, 8, 301 clearTimeout function, 157 decrementing, 21, 300 click events, 162 dialogs, 106–110, 300 F coercion, 108 divide and assign (/) fadeIn jQuery method, 152 collision detection, 229–231, operator, 23 fadeOut jQuery method, 151 278–280 division, 15–16 fadeTo jQuery method, 154 colon (:), 65 document object false (Boolean value), comma (,), 128 model (DOM), 14, 30. See also comments, 10–11, 118, 300 143–147, 301 Booleans concat method, 50–52 document.getElementById fill context method, condition (of a control DOM method, 207, 222 structure) 145–146, 200–201 fillRect context method, in for loops, 99 DOM (document 200–205, 207, in if...else object model), 219–220, 258, 269 statements, 95 143–147, 301 fillStyle context property, in if statements, 92 DOM tree, 144 203, 223, 258, in while loops, 97 263–264, 269–270

306 INDEX JavaScript for Kids © 2014 by Nick Morgan fillText context method, Google Chrome, web indexes, in arrays, 260, 262–264 browser and 42–43, 301 Find the Buried Treasure! console, 7 changing elements with, game, 167–169 graphical programming, 4 43–44 calculating distances, greater than (>) operator, and data types, 45 172–174 33–34 finding, 52–53 click handler, 171–172 with strings, 57–58 code for, 176–178 H indexOf method, 52–53 creating web , h1 element, 80 infinite loops, 98–99, 301 169–170 Hangman game, 105–106 inline HTML elements, design, 168–169 choosing a random word, 82–83 displaying hints, 175–176 113–114 innerHTML property, 145–147 randomizing treasure code for, 118–120 interactive programming, location, 170–171 creating with functions, 155–166 win condition, 176 139–140 interval ID, 159, 254, floor method, 57, 103 design, 110–113 264, 290 context property, displaying player’s 262–264 progress, 115 J for loops, 99–102 drawing join method, 53–54, 61 function keyword, 128. See guesses, 266 jQuery, 143–144, 301 also functions hangman, 215 $ function, 149 functions, 123–124, 301 responding to player animating elements with, arguments, 126–127, input, 115–116 151–152 128–129 updating game state, creating new elements calling, 125, 126, 300 116–118 with, 150–151 vs. if...else statements, win condition, 118 keyboard events, 136–137 head element, 84–85 responding with, leaving early, 135 height attribute, 170, 200 236, 244 returning values from, hide jQuery method, 153 loading on page, 148 125, 129–131, 302 href attribute, 87 replacing page text with, shorthand, 137 HTML, 77–88, 143–144, 294 148–149 simplifying code with, attributes, 86–87, 300 132–134 elements, 80, 301 K hierarchy, 84–85 keyCode event property, G nesting, 84–85 237, 281 games, programming, html element, 84, 164 keydown event, 236–238, 6, 297. See also , 78, 85–86 244, 281 Find the Buried keys (in objects), 63, 65, 182 Treasure! game; I adding, 68 Hangman game; id attribute, 145, 149 and quotation marks, 65 Snake game if...else statements, 91, key-value pairs (in objects), getContext canvas method, 93–96, 136–137 63, 65, 182, 302 200–201 if statements, 91–93 keywords, 17, 302 getElementById, 145–146, img element, 169, 171, 188 200–201 incrementing, 21, 301

JavaScript for Kids INDEX 307 © 2014 by Nick Morgan L O Q length property Object.keys method, 67, 75 queue (data structure), 56 on arrays, 46, 60, 72 object-oriented quotation marks, 23–24, 65 on strings, 25–26 programming, less than (<) operator, 34 181–196, 302 R libraries, 148, 302 objects, 63, 72–75, 302 radians, 209–211 lineTo context method, accessing values in, random number generation, 206–208 66–67 with Math.random, 57 lineWidth context property, adding keys to, 68 returning values from 205–206, 223 adding methods to, functions, 125, links, 78, 85–86 182–185 129–131, 302 literals, 64–65 adding values to, 67–68 return keyword, 130, logs, 91 combining with arrays, 132, 302 loops, 89, 302 69–71 for loops, 99–102 creating, 64–65, 182 S while loops, 97–99 with constructors, script element, 90, 148 185–186 selector strings, 149, 303 M customizing with semicolons, 14, 99 mathematical operators, prototypes, 190–194 setInterval function, 15–17 exploring with the 158–159 Math.floor, 57, 103 console, 71–72 bouncing ball, 231–232 Math.PI, 210–212 offset jQuery method, with canvas, 218–221 Math.random, 57 160–161, 164, 189 with keyboard input, 245 Math.sqrt, 174 offsetX and offsetY event moving text, 159–161 methods, 42, 302 properties, 172 random bee, 225–226 adding to objects, operators, 15–17 and Snake game, 254, 182–183 or (||) operator, 31–32, 33 285–290 calling, 47 setTimeout function, 156–157 sharing between objects, P shift method, 50 183–185 pageX and pageY event show jQuery method, 153 and this, 183 properties, 162, single quotation mark, 24 mousemove event, 164–165 slice method, 27 164–165, 215 parentheses, (), 16–17, slideDown jQuery moveTo context method, 27, 125 method, 152 206–208 p element, 80–81 slideUp jQuery method, 152 multiplication, 15–17 period (.). See dot notation Snake game multiply and assign (*=) pi (π), 210–212 apple operator, 23, 104 plaintext, 78 creating, 283–284 music programming, 4, 297 pop method, 48–49, 55 moving, 284–285 prompt method, 106–108, 146 code for, 285–290 N properties, 46, 182, 302 collision detection, 272, new keyword, 185–187, 189 __proto__ properties, 72 279–281 Node.js, 295 prototype property, 190, 228 design, 253–255 not (!) operator, 32 prototypes, 72, 190–196, 228 displaying text, 260–264 numbers, 14–23, 42, 66 pseudocode, 110–111, 253 drawing null value, 37–38, 108, 302 push method, 47, 55 circle, 270–271 Pythagorean theorem, 173 square, 269–270

308 INDEX JavaScript for Kids © 2014 by Nick Morgan ending the game, stroke context method, V 264–265, 272 206–210, 222 values (in objects), 63, game grid strokeRect context method, 65, 182 adding border, 258–260 205, 225, 231 accessing, 66–67 creating Block, 268–269 strokeStyle context adding, 67–68 setting up, 256–258 property, of, 65 game play, 252 205–206, 223 variables, 17–23, 303 HTML code, 255–256 strong element, 82–83 vs. arrays, 40 snake Sublime Text, 78–79 creating with math, creating, 273–275 subtract and assign (-=) 19–21 moving, 275–277 operator, 22 increasing and decreasing setting direction of, subtraction, 15–16 values of, 21–23 281–283 SVG, 296 naming, 19 square brackets, [] syntax, 10, 303 undefined and null for, accessing a character syntax highlighting, 79 37–38 from a string var keyword, 17, 18, 19 with, 26 T accessing elements from tags, HTML, 80, 303 W an array with, textAlign context property, web browsers, 6–7 42–43, 45 262–264 while loops, 97–99 accessing values in textBaseline context whitespace, 81, 82, 303 objects with, 66 property, 261, width attribute, 170, 200 adding elements to an 263–264 array with, 43–44 text editors, 78–79, 303 creating an array with, 41 text jQuery method, 176 square root, 174 this keyword, 183, 187, src attribute, 148, 170 191–192 stack (data structure), 56 timeout ID, 157 start tag, 80, 303 title attribute, 87–88 statements, 14 toLowerCase method, 28–29 strings, 14, 23–24, 303 toUpperCase method, 28–29 accessing single character true (Boolean value), 14, 30. from, 26–27 See also Booleans changing case of, 28–30 finding length of, 25–26 U joining, 25 undefined value, 17–18, looping through each 37–38, 44, 125, 303 character of, unshift method, 48–49 101, 116 as object keys, 63, 65, 66 slicing, 27–28 turning arrays into, 53–54

JavaScript for Kids INDEX 309 © 2014 by Nick Morgan