Index
Symbols
- - operator, 178–179
"" (quotation marks), 12, 160–161
// comments, 71–72
/* */ comments, 72
/= operator, 178
; (semicolon), 11
|| operator, 42
+ operator, 163
++ operator, 178–179
+= operator, 163, 178
= = operator, 42, 246
= = = operator, 240–241, 245, 246
-= operator, 178
!= = operator, 240–241
!= operator, 42
%= operator, 178
&& operator, 42
() (parentheses), 25–26
**= operator, 178
*= operator, 178
[] (brackets), 144
{} (brackets), 26
< operator, 42
<= operator, 42
> operator, 42
>= operator, 42
A
absolute value, 185
abstraction, objects as, 138–139
accessing
array values, 145–146
child objects, 303
console, 337
developer tools, 324–326
string characters, 161–162
accessor properties, 188
data properties, compared, 188–190
addEventListener function, 346–348, 362–363
adding
array values, 147–148
class values, 293
properties, 197–200
alert function, 11–12, 119–120, 340
altKey property, 384
animation with requestAnimationFrame function, 80–81
appendChild method, 309–310
appending child objects to parent, 309–313
arguments, 28–32
for callback functions, 156–157
for event handlers, 351–352
array literal notation, 145
Array object, 140, 170
arrays, 143–158
creating, 144–145
in JSON, 256
merging, 150–151
shuffling, 213–219
values
accessing, 145–146
adding, 147–148
combining, 155–157
counting, 146
filtering, 154–155
finding, 150
modifying, 151–153
removing, 149–150
arrow key presses, 386
async attribute, 400
attribute selectors, 276
attribute values, changing in DOM, 286–288
B
best practices, 73–75
bigint type, 137
block scope, 87–90
Boolean function, 238–240
Boolean logic, 45, 237–241
Boolean function, 238–240
Boolean object, 238
boolean type, 237
in JSON, 254–255
strict equality/inequality operators, 240–241
Boolean object, 140, 170, 238
boolean type, 137, 170, 237
bracket notation, 199
brackets ([]), 144
brackets ({}), 26
break keyword, 50, 63–64
breakpoints, 332, 337
browser mouse position, 376–377
browsers
console. See console
developer tools. See developer tools
bubbling events, 355–366
phases, 361–364
stopping propagation, 364–366
usage example, 356–360
button property, 377–378
buttons property, 378
C
callback functions, 154, 155
arguments, 156–157
functional programming, 157–158
calling functions, 24, 27
capturing events, 355–366
phases, 361–364
stopping propagation, 364–366
usage example, 356–360
case (of strings), changing, 168, 191
case blocks, 48–51
changing
attribute values in DOM, 286–288
case of strings, 168, 191
text values in DOM, 284–285
variable values, 19–20
characters in strings
accessing, 161–162
finding, 166–167
charAt method, 162
charCode property, 384, 385
child objects, 206–207, 299–300
accessing, 303
appending to parent, 309–313
checking existence, 303
event handling, 409–412
properties, 301–302
removing from parent, 314–315
childNodes property, 313
children property, 301–302, 313
choosing document structure, 114–116
class keyword, 222
class values
adding, 293
checking existence, 294
removing, 293–294
toggling, 294
classes, 221–235
constructor functions, 224–226
creating, 222
elements of, 226–229
extending objects, 229–235
functions in, 229
classList API, 292–294
add method, 293
contains method, 294
remove method, 293–294
toggle method, 294
className property, 287–288
clearInterval function, 80
clearTimeout function, 78
click event, 347, 368–370
clientX property, 376–377
clientY property, 376–377
cloneNode method, 315–319
cloning HTML elements, 315–319
closures, 93–104
nested functions, 94–97
sharing variables via, 98–104
combining
array values, 155–157
strings, 163
comments, 69–75
best practices, 73–75
JSDoc comments, 72–73
multi-line comments, 72
purpose of, 70–71
single line comments, 71–72
concat method, 150–151, 163
concatenating strings, 163
condition, for loops, 62
conditional statements, 37–54
complex expressions, 44–45
else if keyword, 46–47
if statements, 45–46
if/else statements, 39–41
operators, 41–44
strict equality/inequality operators, 240–241
switch statements, 47–54
which to use, 53–54
console, 119–130, 337–340
accessing, 337
Console API, 125
displaying, 121–124
inspecting objects, 338
log method
predefined text in, 125–127
values in, 127–128
logging messages, 340
purpose of, 120–121
scope in, 339
warnings and errors, 128–130
Console API, 125
console.log function, 340
const keyword, 19–20, 88
constants, 181–182
constructor functions, 171, 224–226
constructor keyword, 224
contains method, 294
contextmenu event, 374–375
continue keyword, 64
converting strings to numbers, 179
counting array values, 146
createElement method, 306
CSS, –
properties
naming, 291–292
setting, 290–291
purpose of, 264–265
selector syntax, 276–277
ctrlKey property, 384
D
data properties, 187–188
accessor properties, compared, 188–190
Date object, 140, 170
dblclick event, 347, 368–370
dealWithKeyboard event handler, 383–384
debugging JavaScript, 331–337
declaring variables, 16, 18–20, 86–87, 90
decrementing
for loops, 64–65
operators for, 177–179
default actions, preventing, 366
default blocks, 50–51
defer attribute, 400–401
defining functions, 24
delays with setTimeout function, 78
delete keyword, 201
detail property, 378–379
developer tools, 323–340
accessing, 324–326
console. See console
debugging JavaScript, 331–337
DOM view, View Source, compared, 326–331
displaying
console, 121–124
warnings and errors, 128–130
document object, 269–271, 298
Document Object Model. See DOM (Document Object Model)
document property, 299
document structure, 105–116, 262–266
choosing, 114–116
CSS in, 264–265
DOM hierarchy, compared, 297–298
HTML in, 262–264
JavaScript in, 265–266
JavaScript within HTML document, 109–110
JavaScript within JavaScript file, 110–113
document.documentElement property, 299
document.write function, 57
DOM (Document Object Model), 267–271
events within
phases, 361–364
usage example, 356–360
HTML elements
cloning, 315–319
creating, 306–312
finding, 273–277
modifying, 279–288
as objects, 280–282
removing, 314–315
inspecting, 326–331
navigating hierarchy, 297–304
accessing child elements, 303
checking child existence, 303
child properties, 301–302
document structure, compared, 297–298
parent/sibling properties, 301
properties for, 298–300
recursively walking, 303–304
nodes, 267–268
objects
document object, 269–271
window object, 269
script placement in, 397–400
DOM view, View Source, compared, 326–331
DOMContentLoaded event, 347, 395–396
DOMMouseScroll event, 347, 378–379
dot notation, 197–199
do.while loops, 66–67
E
elements (HTML)
cloning, 315–319
creating, 306–312
finding in DOM, 273–277
querySelector function, 275–277
querySelectorAll function, 275–277
modifying in DOM, 279–288
attribute values, 286–288
text values, 284–285
nodes, compared, 319
as objects, 280–282
parents/siblings/children, 299–303
removing, 314–315
styles. See styles
else if keyword, 46–47
error method, 128–130
Event Bubbling Phase, 362
Event Capturing Phase, 361
event handlers, 347–348
arguments, 351–352
for multiple elements, 405–413
with parent/child relationship, 409–412
what not to do, 408–409
usage example, 348–351
event targets, 359, 411
Event type, 352
events, 343–353
bubbling, 355–366
phases, 361–364
stopping propagation, 364–366
usage example, 356–360
capturing, 355–366
phases, 361–364
stopping propagation, 364–366
usage example, 356–360
handling. See event handlers
keyboard events, 381–389
arrow key presses, 386
Keyboard event properties, 384
list of, 382
listening for, 383
multiple key presses, 386–389
particular key presses, 385
list of, 347
listening for, 346–348, 363–364
mouse events, 367–379
click event, 368–370
contextmenu event, 374–375
dblclick event, 368–370
DOMMouseScroll event, 378–379
list of, 368
mousedown event, 372–373
mouseenter event, 371
MouseEvent properties, 375–378
mouseleave event, 371
mousemove event, 373
mouseout event, 370–371
mouseover event, 370–371
mouseup event, 372–373
mousewheel event, 378–379
page load events, 391–396
DOMContentLoaded event, 395–396
load event, 395–396
stages of page loads, 392–395
preventing default actions, 366
purpose of, 344–345
removing listeners, 352–353
usage example, 348–351
exiting functions early, 34
exponents, 184–185
expressions, 40
complex, 44–45
operators
conditional, 41–44
incrementing/decrementing, 177–179
order of operation, 177
extending objects, 213–220
with classes, 229–235
controversy around, 219–220
shuffling arrays example, 213–219
extends keyword, 231–232
extracting substrings, 164–165
F
filter method, 150, 154–155
filtering array values, 154–155
find method, 150
findIndex method, 150
finding
array values, 150
HTML elements in DOM, 273–277
querySelector function, 275–277
querySelectorAll function, 275–277
string characters, 166–167
firstChild property, 301–302
for loops, 57–65
break keyword, 63–64
condition, 62
continue keyword, 64
decrementing, 64–65
iterations, 63
non-numeric values in, 65
starting point, 61
step region, 61–62
function keyword, 25
Function object, 140, 170
functional programming, 157–158
functions, 11–12, 21–34
arguments, 28–32
Boolean function, 238–240
callback functions, 154–155
arguments, 156–157
functional programming, 157–158
calling, 24, 27
in classes, 226–229
constructor functions, 171, 224–226
defining, 24
event handlers. See event handlers
exiting early, 34
getters/setters, 187–193
basic usage, 190–191
logging example, 191–192
uppercase generator example, 191
validation example, 192–193
local scope, 86
nested functions, 94–97
purpose of, 23
returning data, 33
sharing variables in, 98–104
trigonometric functions, 183–184
G
getAttribute function, 276, 286
getters, 187–193
basic usage, 190–191
in classes, 226–229
logging example, 191–192
uppercase generator example, 191
validation example, 192–193
global mouse position, 375–376
global scope, 84–86
H
handling events. See event handlers
Hello, World! –12
hexadecimal numbers, 179
hoisting variables, 91
HTML, –
elements
cloning, 315–319
creating, 306–312
finding, 273–277
modifying, 279–288
as objects, 280–282
parents/siblings/children, 299–303
removing, 314–315
styles. See styles
JavaScript within, 109–110
purpose of, 262–264
script tag, 10–11
async attribute, 400
defer attribute, 400–401
placement of, 113, 397–400
HTML documents, writing, –11
html element, 298
I
id property, 287–288
if statements, 45–46
if/else statements, 39–41
else if keyword, 46–47
operators, 41–44
switch statements, compared, 51–54
includes method, 150
incrementing, operators for, 177–179
index positions, 162
indexOf method, 150, 166–167
Infinity value, 180
inheritance, 212
initializing variables, 16, 18–20, 86–87
in-scope, 89
insertAfter function, 312–313
insertBefore function, 310–312
inspecting
DOM (Document Object Model), 326–331
objects, 338
iterations, for loops, 63
skipping, 64
J
JavaScript
debugging, 331–337
document structure, 105–116
choosing, 114–116
within HTML document, 109–110
within JavaScript file, 110–113
explained, –
Hello, World! –12
purpose of, 265–266
requirements,
styles and
classList API, 292–294
naming CSS properties, 291–292
purpose of, 290
setting CSS properties, 290–291
JavaScript files, 110–113
referencing, 111–113
structure of, 110–111
when to use, 114–116
JSDoc comments, 72–73
JSON (JavaScript Object Notation), 247–259
data
parsing, 259
reading, 257–258
writing, 259
object literal syntax, 248–251
objects
property names, 252
values, 253–256
JSON.parse method, 259
K
Keyboard event properties, 384
keyboard events, 381–389
arrow key presses, 386
Keyboard event properties, 384
list of, 382
listening for, 383
multiple key presses, 386–389
particular key presses, 385
keyCode property, 384–385
keydown event, 347, 382–383
keypress event, 382–383, 385
keysPressed event handler, 387–388
keysReleased event handler, 388
keyup event, 347, 382–383
L
lastChild property, 301–302
lastIndexOf method, 150, 167
let keyword, 16, 18–19, 88, 90
listening for events, 346–348, 363–364
click event, 368–370
contextmenu event, 374–375
dblclick event, 368–370
DOMMouseScroll event, 378–379
keyboard events, 383, 385–389
mousedown event, 372–373
mouseenter event, 371
MouseEvent properties, 375–378
mouseleave event, 371
mousemove event, 373
mouseout event, 370–371
mouseover event, 370–371
mouseup event, 372–373
mousewheel event, 378–379
on multiple elements, 405–413
page load events, 395–396
load event, 347, 395–396
local scope, 86
log method
predefined text in, 125–127
values in, 127–128
logging example (getters/setters), 191–192
logging in console, 340
loops, 55–67
do.while loops, 66–67
for loops, 57–65
break keyword, 63–64
condition, 62
continue keyword, 64
decrementing, 64–65
iterations, 63
non-numeric values in, 65
starting point, 61
step region, 61–62
setInterval function, 79–80
while loops, 66
M
map method, 152–153
match method, 167
Math object, 140, 170, 180–185
absolute value, 185
constants, 181–182
powers/square roots, 184–185
random numbers, 185
rounding numbers, 182
trigonometric functions, 183–184
Math.abs() function, 185
Math.acos() function, 184
Math.asin() function, 184
Math.atan() function, 184
Math.ceil() function, 183
Math.cos() function, 184
Math.E constant, 181
Math.exp() function, 184
Math.floor() function, 183
Math.LN2 constant, 181
Math.LN10 constant, 181
Math.LOG2E constant, 181
Math.LOG10E constant, 181
Math.PI constant, 181, 182
Math.pow() function, 184
Math.random() function, 185
Math.round() function, 183
Math.sin() function, 184
Math.sqrt() function, 184
Math.SQRT1_2 constant, 181
Math.SQRT2 constant, 181
Math.tan() function, 184
merging arrays, 150–151
metaKey property, 384
modifying
array values, 151–153
HTML elements in DOM, 279–288
attribute values, 286–288
text values, 284–285
mouse events, 367–379
click event, 368–370
contextmenu event, 374–375
dblclick event, 368–370
DOMMouseScroll event, 378–379
list of, 368
mousedown event, 372–373
mouseenter event, 371
MouseEvent properties, 375–378
browser mouse position, 376–377
button clicked, 377–378
global mouse position, 375–376
mouseleave event, 371
mousemove event, 373
mouseout event, 370–371
mouseover event, 370–371
mouseup event, 372–373
mousewheel event, 378–379
mousedown event, 372–373
mouseenter event, 371
MouseEvent properties, 375–378
browser mouse position, 376–377
button clicked, 377–378
global mouse position, 375–376
mouseleave event, 371
mousemove event, 347, 373
mouseout event, 347, 370–371
mouseover event, 347, 370–371
mouseup event, 372–373
mousewheel event, 378–379
multi-line comments, 72
multiple elements, event handlers for, 405–413
with parent/child relationship, 409–412
what not to do, 408–409
multiple key presses, 386–389
N
naming
CSS properties, 291–292
variables, 17–18
NaN keyword, 180
navigating DOM hierarchy, 297–304
accessing child elements, 303
checking child existence, 303
child properties, 301–302
document structure, compared, 297–298
parent/sibling properties, 301
properties for, 298–300
recursively walking, 303–304
nested functions
explained, 94–97
sharing variables in, 98–104
nesting objects, 199–200
new keyword, 222–224
nextSibling property, 301
nodes, 267–268
elements (HTML), compared, 319
non-numeric values in for loops, 65
null type, 137, 244, 246, 256
Number object, 140, 170
number type, 137, 170
numbers, 175–185
as 64-bit floating point, 176
absolute value, 185
basic usage, 176
constants, 181–182
converting strings to, 179
Infinity value, 180
in JSON, 254
NaN keyword, 180
octal/hexadecimal, 179
operators
incrementing/decrementing, 177–179
order of operation, 177
powers/square roots, 184–185
random, 185
rounding, 182
trigonometric functions, 183–184
O
object literal syntax, 197, 248–251
Object type, 137, 196, 203
objects, 138, 195–211. See also classes; names of specific objects
as abstraction, 138–139
constructor functions, 171
creating, 197, 205–208, 222–224
DOM
document object, 269–271
window object, 269
DOM elements as, 280–282
extending, 213–220
with classes, 229–235
controversy around, 219–220
shuffling arrays example, 213–219
inspecting, 338
JSON
property names, 252
values, 253–256
list of, 140
nesting, 199–200
Object type, 196
parent/child objects, 206–207
primitives as, 141, 169–173
properties, 196
adding, 197–200
removing, 200–201
prototype chain, 201–204
prototypical inheritance model, 212
this keyword, 209–211
octal numbers, 179
operators
conditional, 41–44
incrementing/decrementing, 177–179
order of operation, 177
strict equality/inequality, 240–241
order of operation, 177
out-of-scope, 89
P
page load events, 391–396
DOMContentLoaded event, 395–396
load event, 395–396
stages of page loads, 392–395
parent objects, 206–207, 299–300
appending children, 309–313
event handling, 409–412
properties, 301
removing children, 314–315
parentheses (), 25–26
parentNode property, 301
parseInt function, 179
parsing JSON data, 259
phases for events, 361–364
pizza analogy, 134–136
pop method, 149–150
position of mouse, 375–377
powers (for numbers), 184–185
preventDefault function, 366, 374–375, 389
previousSibling property, 301
primitives, 138. See also names of specific types
Object-form of, 141, 169–173
properties, 196
adding, 197–200
in CSS
naming, 291–292
setting, 290–291
in DOM hierarchy, 298–300
child properties, 301–302
parent/sibling properties, 301
for Event type, 352
in JSON
names, 252
reading values, 257–258
for Keyboard event, 384
for MouseEvent, 375–378
browser mouse position, 376–377
button clicked, 377–378
global mouse position, 375–376
removing, 200–201
prototype chain, 201–204, 207–208, 214–219
prototypical inheritance model, 212
push method, 147–148
Q
querySelector function, 275–277
querySelectorAll function, 275–277
quotation marks (""), 12, 160–161
R
random numbers, 185
raw text, parsing, 259
reading JSON data, 257–258
recursively walking DOM hierarchy, 303–304
reduce method, 155–157
referencing JavaScript files, 111–113
RegExp object, 140, 170
remove method, 315
removeChild method, 314–315
removeEventListener function, 352–353
removing
array values, 149–150
class values, 293–294
event listeners, 352–353
HTML elements, 314–315
properties, 200–201
requestAnimationFrame function, 80–81
return keyword, 33–34
returning data
from functions, 33
from nested functions, 94–97
rounding numbers, 182
S
scope. See variable scope
screenX property, 375–376
screenY property, 375–376
script tag, 10–11
async attribute, 400
defer attribute, 400–401
document structure, 105–116
choosing, 114–116
JavaScript within HTML document, 109–110
JavaScript within JavaScript file, 110–113
placement of, 113, 397–400
scroll event, 347
semicolon (;), 11
setAttribute method, 286–287
setInterval function, 79–80
setters, 187–193
basic usage, 190–191
in classes, 226–229
logging example, 191–192
uppercase generator example, 191
validation example, 192–193
setTimeout function, 78
sharing variables in functions, 98–104
shift method, 149–150
shiftKey property, 384
shuffling arrays, 213–219
sibling objects, 299–300
properties, 301
single line comments, 71–72
slice method, 164
split method, 165–166
splitting strings, 165–166
square roots, 184–185
starting point, for loops, 61
statements, 11
step region, for loops, 61–62
stepping through code, 334–336
stopPropagation method, 364–366, 412
strict equality/inequality operators, 240–241
string literals, 160–161
String object, 140, 170–173
string type, 137, 170
strings, 12, 159–168
case, changing, 168, 191
characters
accessing, 161–162
finding, 166–167
combining, 163
converting to numbers, 179
in JSON, 253
splitting, 165–166
string literals, 160–161
substrings, extracting, 164–165
style object, 290
styles, 289–294. See also CSS
JavaScript and
classList API, 292–294
naming CSS properties, 291–292
purpose of, 290
setting CSS properties, 290–291
rules, 289
substr method, 164–165
substrings, extracting, 164–165
super keyword, 233
switch statements, 47–54
if/else statements, compared, 51–54
symbol type, 137
T
text values, changing in DOM, 284–285
textContent property, 284–285
this keyword, 209–211
timers, 77–81
requestAnimationFrame function, 80–81
setInterval function, 79–80
setTimeout function, 78
toggling class values, 294
toLowerCase method, 168
toUpperCase method, 168
trigonometric functions, 183–184
type coercion, 240–241
typeof keyword, 172, 245
types, 133–141. See also names of specific types
list of, 137
objects, 138, 195–211
as abstraction, 138–139
adding properties, 197–200
constructor functions, 171
creating, 197, 205–208, 222–224
extending, 213–220
list of, 140
nesting, 199–200
Object type, 196
parent/child objects, 206–207
primitives as, 141, 169–173
properties, 196
prototype chain, 201–204
prototypical inheritance model, 212
removing properties, 200–201
this keyword, 209–211
pizza analogy, 134–136
primitives, 138
Object-form of, 141, 169–173
U
UI development with setTimeout function, 78
undefined type, 137, 201, 244–246
undefined variables, 90–92
unshift method, 147–148
uppercase generator example (getters/setters), 191
V
validation example (getters/setters), 192–193
values, 15. See also types
in arrays
accessing, 145–146
adding, 147–148
combining, 155–157
counting, 146
filtering, 154–155
finding, 150
modifying, 151–153
removing, 149–150
changing in variables, 19–20
in JSON, 253–256
arrays, 256
booleans, 254–255
null, 256
numbers, 254
objects, 255–256
reading, 257–258
strings, 253
in log method, 127–128
null, 244
undefined, 244–246
validating, 192–193
var keyword, 90
variable scope, 20, 83–92
block scope, 87–90
closures, 98–104
in console, 339
global scope, 84–86
in-scope, 89
local scope, 86
out-of-scope, 89
variables, 16–20
changing values, 19–20
declaring, 16, 18–20, 86–87, 90
hoisting, 91
initializing, 16, 18–20, 86–87
naming, 17–18
processing, 90–92
sharing in functions, 98–104
undefined, 90–92
View Source command, DOM view, compared, 326–331
W
walking DOM hierarchy, 303–304
warn method, 128–130
web pages. See document structure
wheel event, 347, 378–379
wheelDelta property, 378–379
which property, 378
while loops, 66
whitespace in comments, 74
window object, 269, 298
window property, 299
writing
HTML documents, –11
JSON data, 259
