Index
Symbols
* (asterisk), multiplication operator, 20, 151
[] (brackets)
array declaration, 140
property definition, 167
|| conditional operator, 35
&& conditional operator, 35
< conditional operator, 35
<= conditional operator, 35
> conditional operator, 35
>= conditional operator, 35
{ } (curly braces) in functions, 23
-- (decrement operator), 152, 153
- = (decrement operator), 152
/ = (division operator), 152
= = (equality operator), 35
comparison with == = strict equality operator, 192-194, 198
/ (forward slash), division operator, 151
+ + (increment operator), 152, 153
!= (inequality operator), 35
comparison with != = strict inequality operator, 192-194
- (minus sign), subtraction operator, 151
%= (modulus operator), 152
/*.*/ (multi-line comments), 104
*= (multiplication operator), 152
( ) (parentheses)
in functions, 23
in mathematical expressions, 151
% (percent sign), modulus operator, 151
+ (plus sign)
addition operator, 151
concatenation operator, 125-126
+ = (plus-equal sign)
concatenation operator, 125-126
increment operator, 152
““ (quotation marks) in strings, 11, 123
; (semicolon) in statements, 11
// (single line comments), 103-104
= = = (strict equality operator), 35
comparison with = = equality operator, 192-194, 198
!== (strict inequality operator), 35
comparison with != inequality operator, 192-194
A
abs( ) function (Math object), 159
absolute paths, referencing JavaScript files, 94-96
absolute value, 159
accessibility tools, DOM and, 278
accessing
all children, 261
characters in strings, 124-125
acos( ) function (Math object), 158
add method (classList API), 250-251
addEventListener function, 302-304, 341-342
adding
addition operator, 151
alert function, 11
arguments, 24
console.log function versus, 296
altKey property (keyboard events), 342
animation, requestAnimationFrame function, 62-64
anonymous functions, 202
arguments
in IIFE, 204
concat method, 147
length property, 142
pop method, 145
push method, 143
shift method, 145
shuffling arrays example (extending objects), 179-180
slice method, 146
arrays
merging, 147
shuffling arrays example (extending objects), 179-180
asin( ) function (Math object), 158
asterisk (*), multiplication operator, 20, 151
async attribute (script tag), 358-359
atan( ) function (Math object), 158
attribute selectors, 234
attribute values, modifying in DOM elements, 242-244
B
Boolean Logic, 37
Boolean type, 114
initializing variables as, 189
as primitives, 190
brackets ([])
array declaration, 140
property definition, 167
break keyword
in for loops, 53
breakpoints
removing, 293
setting, 288
browser Developer Tools. See Developer Tools
browser-specific mouse position, 334-335
bubbling events phase, 318
when to use, 319
built-in objects. See objects; primitives
button detection mouse properties, 335-336
button property (MouseEvent object), 335-336
buttons property (MouseEvent object), 336
C
cancelAnimationFrame function, 63
canceling
animation frames, 63
looping timers, 62
timers, 60
capturing events phase, 316
when to use, 319
Cascading Style Sheets. See CSS
case (of strings), changing, 130
case statements in switch statements, 39-42
ceil( ) function (Math object), 157
characters in strings
charAt method (String object), 125
charCode property (keyboard events), 342, 343-344
accessing all, 261
checking existence, 261
mouse events and, 329
class values
checking existence, 252
removing, 251
toggling, 251
className property, 244
clearInterval function, 62
clearTimeout function, 60
clientX property (MouseEvent object), 334-335
clientY property (MouseEvent object), 334-335
outer variable references, 207-212
code collision avoidance, 206-207
Code Convention, 16
code editors, 8
code placement options, 90-92, 355-358, 360-361
code privacy, providing, 213-216
comments
JSDoc comments, 105
multi-line comments, 104
complex expressions in if/else statements, 36-37
concat method
Array object, 147
String object, 126
concatenating strings, 125-126
conditional operators in, 34-36
switch statement comparison, 42-44
if/else-if/else statements, 38-39
if-only statements, 38
if/else statement comparison, 42-44
console (Developer Tools), 293
console.log function, 296
constructor functions, 135
contains method (classList API), 252
context menus, disabling, 332-333
continue keyword, 53
converting strings to numbers, 154
cos( ) function (Math object), 158
create method (Object type), 171-174
createElement method (DOM), 266
Crockford, Douglas, 16
ctrlKey property (keyboard events), 342
curly braces ({ }) in functions, 23
currentTarget property (Event type), 308
cursor. See mouse
custom objects, creating, 169-174
D
Date.now( ) function, 83
decisions. See conditional statements
declaring
decrementing
for loops, 54
default statements, 42
defer attribute (script tag), 358, 359-360
defining
delays. See timers
detail property (DOMMouseScroll event), 336-337
Developer Tools, 279
console, 293
logging messages, 296
disabling context menus, 332-333
distance calculation example, 20-21
division operator, 151
document object, 228-229, 256-257, 354
Document Object Model. See DOM (Document Object Model)
documents (HTML). See HTML documents
document.writeln function, 50
DOM (Document Object Model), 225-226
accessibility tools and, 278
JavaScript objects comparison, 238-240
text values, 242
accessing all children, 261
checking child existence, 261
parent and sibling relationships, 259
usage examples, 262
searching in
querySelector function, 233
querySelectorAll function, 233-234
viewing in Developer Tools, 282-287
window object, 227
DOMContentLoaded event, 303, 353-355, 358
DOMMouseScroll event, 303, 336-337
dot notation, 167
E
E property (Math object), 155
equality operator (= =), 35
comparison with == = strict equality operator, 192-194, 198
Event Bubbling Phase, 318
when to use, 319
Event Capturing Phase, 316
when to use, 319
event handlers, 304
event targets, 314
Event type, 308
events
handling. See event handlers
keyboard events
detecting particular keys, 343-344
list of, 303
listening for
addEventListener function, 302-304
in document object, 354
removeEventListener function, 309
mouse events
list of, 326
mouseenter, 329
mouseleave, 329
mousemove, 331
MouseEvent object, 333
browser-specific mouse position, 334-335
global mouse position, 333-334
scroll wheel movement, 336-337
page loads
DOMContentLoaded and load events, 353-355
exiting functions early, 28-29
exp( ) function (Math object), 158
extending objects
array shuffling example, 179-180
F
files, JavaScript in, 91, 93-96
finding
characters in strings, 129-130
floor( ) function (Math object), 157
accessing array values, 142
decrementing, 54
missing sections, 55
non-numerical iterations, 54
skipping iterations, 53
starting condition, 51
stopping early, 53
terminating condition, 51
forward slash (/), division operator, 151
function keyword, 22
functions. See also methods
abs( ), 159
acos( ), 158
addEventListener, 302-304, 341-342
alert, 11
arguments, 24
console.log function versus, 296
anonymous functions, 202
asin( ), 158
atan( ), 158
cancelAnimationFrame, 63
ceil( ), 157
clearInterval, 62
clearTimeout, 60
console.log, 296
constructor functions, 135
cos( ), 158
Date.now( ), 83
definition, 22
distance calculation example, 21
document.writeln, 50
exp( ), 158
floor( ), 157
getElementById, 235
getElementsByClassName, 235
getElementsByTagName, 235
IIFE
arguments in, 204
code collision avoidance, 206-207
outer variable references, 207-212
initializing variables in, 72-74
insertAfter, 271
pow( ), 158
purpose of, 201
querySelector, 233, 234-235, 257
querySelectorAll, 233-235, 257
random( ), 159
removeEventListener, 309
round( ), 157
showDistance
returning data, 27
sin( ), 158
sqrt( ), 158
tan( ), 158
G
getElementById function, 235
getElementsByClassName function, 235
getElementsByTagName function, 235
global mouse position, 333-334
H
handling events. See event handlers
hidden code with IIFE, 213-216
hoisting variables, 72-74, 205
hovering. See mouseover event
HTML (Hypertext Markup Language)
directly with style object, 249-250
with JavaScript, 248
code placement within, 90, 92-93
JavaScript, purpose of, 223-224
page loads
DOMContentLoaded and load events, 353-355
parsing, 96
script tag placement, 96, 355-358, 360-361
hybrid code placement option, 91-92
Hypertext Markup Language. See HTML
I
id property, 244
conditional operators in, 34-36
switch statement comparison, 42-44
if/else-if/else statements, 38-39
if-only statements, 38
IIFE (Immediately Invoked Function Expression)
arguments in, 204
code collision avoidance, 206-207
outer variable references, 207-212
incrementing with operators, 152-153
index positions, 124
index values of arrays, 142
indexOf method
inequality operator (!=), 35
comparison with != = strict inequality operator, 192-194
Infinity keyword, 153
initializing variables, 14-15, 16-17
as booleans, 189
inner functions, shared variables, 81-86
insertAfter function, 271
insertBefore function, 268-270
iterations
non-numerical, 54
skipping, 53
J
JavaScript
code placement options, 90-92, 355-358, 360-361
JavaScript Variable Name Validator, 16
JSDoc comments, 105
K
keyboard events
detecting particular keys, 343-344
keyboards, 339
keyCode property (keyboard events), 342, 343-344
keywords
break
in for loops, 53
continue, 53
function, 22
Infinity, 153
let, 72
NaN, 154
return
exiting functions early, 28-29
typeof, 137
L
lastIndexOf method
length property
Array object, 142
String object, 124
let keyword, 72
lexical scope, 205
listening for events
addEventListener function, 302-304
in document object, 354
removeEventListener function, 309
literal notation, 167
literals, string, 123
LN2 property (Math object), 155
LN10 property (Math object), 155
LOG2E property (Math object), 155
LOG10E property (Math object), 155
logging messages, 296
accessing array values, 142
decrementing, 54
missing sections, 55
non-numerical iterations, 54
skipping iterations, 53
starting condition, 51
stopping early, 53
terminating condition, 51
types of, 48
while loops, 56
lowercase, changing strings to, 130
M
match method (String object), 130
Math object, 117, 134, 154-155. See also numbers
absolute value, 159
powers and square roots, 158-159
random numbers, 159
rounding numbers, 157
trigonometric functions, 158
merging arrays, 147
metaKey property (keyboard events), 343
methods. See also functions
charAt (String object), 125
concat
Array object, 147
String object, 126
contains (classList API), 252
createElement (DOM), 266
indexOf
lastIndexOf
match (String object), 130
pop (Array object), 145
preventDefault (Event type), 308, 321, 333, 347
push (Array object), 143
remove (classList API), 251
shift (Array object), 145
slice
Array object, 146
String object, 127
split (String object), 128-129
stopPropagation (Event type), 308, 320-321, 370
substr (String object), 127-128
toggle (classList API), 251
toLowerCase (String object), 130
toUpperCase (String object), 130
unshift (Array object), 143-144
minus sign (-), subtraction operator, 151
modifying DOM elements, 240-241
text values, 242
modulus operator, 151
mouse, 325
browser-specific mouse position, 334-335
global cursor position, 333-334
scroll wheel movement, 336-337
mouse events
list of, 326
mouseenter, 329
mouseleave, 329
mousemove, 331
mouseenter event, 329
MouseEvent object, 333
browser-specific mouse position, 334-335
global mouse position, 333-334
scroll wheel movement, 336-337
mouseleave event, 329
mousewheel event, 303, 336-337
multi-line comments, 104
multiple elements, events on, 365-371
multiplication operator, 20, 151
N
NaN keyword, 154
accessing all children, 261
checking child existence, 261
parent and sibling relationships, 259
usage examples, 262
nextSibling property, 259
non-numerical iterations in for loops, 54
Null type, 114
Number type, 114
numbers. See also Math object
absolute value, 159
converting strings to, 154
Infinity keyword, 153
NaN keyword, 154
operators
incrementing and decrementing, 152-153
simple math, 151
powers and square roots, 158-159
random numbers, 159
rounding, 157
types, 150
usage examples, 150
O
object literal syntax, 163
DOM element comparison, 238-240
[[Prototype]] property, 166
accessing all, 261
checking existence, 261
constructor functions, 135
custom objects, creating, 169-174
document, 228-229, 256-257, 354
DOM element comparison, 238-240
extending
array shuffling example, 179-180
properties, 259
prototype, 165
prototypical inheritance model, 178
temporarily converting primitives to, 133-138
operators
incrementing and decrementing, 152-153
simple math, 151
outer functions, shared variables, 81-86
outer variables, referencing, 207-212
P
page loads
DOMContentLoaded and load events, 353-355
properties, 259
parentheses (( ))
in functions, 23
in mathematical expressions, 151
parentNode property, 259
parsing HTML documents, 96
percent sign (%), modulus operator, 151
phases (event listening), 316-318
when to use, 319
PI property (Math object), 155, 156-157
pizza metaphor (types), 110-113
plus sign (+)
addition operator, 151
concatenation operator, 125-126
pop method (Array object), 145
pow( ) function (Math object), 158
preventDefault method (Event type), 308, 321, 333, 347
previousSibling property, 259
primitives, 115
booleans as, 190
temporary conversion to objects, 133-138
private code with IIFE, 213-216
properties, 162
className, 244
CSS, styling directly, 249-250
Event type, 308
id, 244
MouseEvent object
browser-specific mouse position, 334-335
global mouse position, 333-334
scroll wheel movement, 336-337
parent and sibling objects, 259
prototype, extending objects, 181-185
textContent, 242
__proto__ property, 164
prototype chains, 166, 170-171
prototype objects, 165
prototype property, extending objects, 181-185
[[Prototype]] property, 166
prototypical inheritance model, 178
push method (Array object), 143
Q
querySelector function, 233, 234-235, 257
querySelectorAll function, 233-235, 257
quotation marks (““) in strings, 11, 123
R
random( ) function (Math object), 159
random numbers, 159
referencing
relative paths, referencing JavaScript files, 94-96
remove method (classList API), 251
removeEventListener function, 309
removing
breakpoints, 293
class values, 251
repeats. See loops
requestAnimationFrame function, 62-64
requestID variable, 64
return keyword
exiting functions early, 28-29
returning data from functions, 27-28
Revealing Module Pattern, 215
right-click menus, disabling, 332-333
round( ) function (Math object), 157
rounding numbers, 157
S
scope of variables
initializing variables in functions, 72-74
inspecting objects, 295
lexical scope, 205
screenX property (MouseEvent object), 333-334
screenY property (MouseEvent object), 333-334
placement in HTML document, 96, 355-358, 360-361
referencing JavaScript files, 94-96
scroll event, 303
scroll wheel movement, 336-337
searching in DOM
querySelector function, 233
querySelectorAll function, 233-234
semicolon (;) in statements, 11
shared variables in inner functions, 81-86
shift method (Array object), 145
shiftKey property (keyboard events), 342
showDistance function
returning data, 27
shuffling arrays example (extending objects), 179-180
sin( ) function (Math object), 158
slice method
Array object, 146
String object, 127
split method (String object), 128-129
sqrt( ) function (Math object), 158
SQRT1_2 property (Math object), 155
SQRT2 property (Math object), 155
square brackets ([])
array declaration, 140
property definition, 167
src attribute (script tag), 94-95
starting condition in for loops, 51
statements
conditional
if/else-if/else statements, 38-39
if-only statements, 38
default, 42
definition, 10
loops
types of, 48
while loops, 56
semicolon (;) in, 11
stepping through code, 290-292
stopPropagation method (Event type), 308, 320-321, 370
strict equality operator (= = =), 35
comparison with = = equality operator, 192-194, 198
strict inequality operator (!= =), 35
comparison with != inequality operator, 192-194
string literals, 123
charAt method, 125
concat method, 126
length property, 124
match method, 130
slice method, 127
toLowerCase method, 130
toUpperCase method, 130
String type, 114
accessing characters in, 124-125
changing case, 130
converting to numbers, 154
finding characters within, 129-130
primitive versus object forms, 134-136
quotation marks (““) in, 11, 123
substrings, 126
slice method, 127
styling HTML elements, 247-248
directly with style object, 249-250
with JavaScript, 248
substr method (String object), 127-128
substrings, 126
slice method, 127
subtraction operator, 151
if/else statement comparison, 42-44
T
tags. See script tag
tan( ) function (Math object), 158
target property (Event type), 308
terminating condition in for loops, 51
text values, modifying in DOM elements, 242. See also strings
textContent property, 242
timeID variable, 60
canceling, 60
requestAnimationFrame function, 62-64
toggle method (classList API), 251
toggling class values, 251
toLowerCase method (String object), 130
toUpperCase method (String object), 130
trigonometric functions, 158
true/false. See booleans
type coercion, 193
type property (Event type), 308
typeof keyword, 137
types
for numbers, 150
primitives, 115
U
Undefined type, 114
unshift method (Array object), 143-144
uppercase, changing strings to, 130
V
values
definition, 14
variables
arguments as, 26
definition, 14
as booleans, 189
outer variables, referencing, 207-212
requestID, 64
scope
inspecting objects, 295
lexical scope, 205
shared variables in inner functions, 81-86
timeID, 60
View Source command (Developer Tools), 284-287
viewing DOM in Developer Tools, 282-287
W
web documents. See HTML documents
wheelDelta property (mousewheel events), 336-337
which property (MouseEvent object), 336
while loops, 56
whitespace in comments, 106