Eloquent JavaScript

---

---

Eloquent JavaScript
3rd edition
Marijn Haverbeke

---

Copyright © 2018 by Marijn Haverbeke
This work is licensed under a Creative Commons attribution-noncommercial
license (
http://creativecommons.org/licenses/by-nc/3.0/
). All code in the
book may also be considered licensed under an MIT license (
https://eloquentjavascript.
net/code/LICENSE
).
The illustrations are contributed by various artists: Cover and chapter illus-
trations by Madalina Tantareanu. Pixel art in Chapters 7 and 16 by Antonio
Perdomo Pastor. Regular expression diagrams in Chapter 9 generated with
regexper.com by Jeff Avallone. Village photograph in Chapter 11 by Fabrice
Creuzot. Game concept for Chapter 16 by Thomas Palef.
The third edition of Eloquent JavaScript was made possible by 325 financial
backers.
You can buy a print version of this book, with an extra bonus chapter included,
printed by No Starch Press at
http://a-fwd.com/com=marijhaver-20&asin-
com=1593279507
.
i

---

Contents
Introduction
1
On programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
Why language matters . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
What is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
Code, and what to do with it . . . . . . . . . . . . . . . . . . . . . . .
7
Overview of this book . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
Typographic conventions . . . . . . . . . . . . . . . . . . . . . . . . . .
9
1 Values, Types, and Operators
10
Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
Unary operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
Boolean values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
Empty values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
Automatic type conversion . . . . . . . . . . . . . . . . . . . . . . . . .
19
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
2 Program Structure
22
Expressions and statements . . . . . . . . . . . . . . . . . . . . . . . .
22
Bindings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
Binding names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
The environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
The console.log function . . . . . . . . . . . . . . . . . . . . . . . . . .
26
Return values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
Control flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
Conditional execution . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
while and do loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
Indenting Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
32
for loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
33
Breaking Out of a Loop . . . . . . . . . . . . . . . . . . . . . . . . . .
33
ii

---

Updating bindings succinctly . . . . . . . . . . . . . . . . . . . . . . .
34
Dispatching on a value with switch . . . . . . . . . . . . . . . . . . . .
35
Capitalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
37
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
3 Functions
40
Defining a function . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
Bindings and scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
41
Functions as values . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
Declaration notation . . . . . . . . . . . . . . . . . . . . . . . . . . . .
44
Arrow functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
The call stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
46
Optional Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
Closure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
Recursion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
Growing functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
53
Functions and side effects . . . . . . . . . . . . . . . . . . . . . . . . .
55
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
57
4 Data Structures: Objects and Arrays
59
The weresquirrel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
Data sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
60
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
62
Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
63
Mutability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
The lycanthrope’s log . . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
Computing correlation . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
Array loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
The final analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
71
Further arrayology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
73
Strings and their properties . . . . . . . . . . . . . . . . . . . . . . . .
74
Rest parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
76
The Math object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
77
Destructuring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
79
JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
80
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
81
iii

---

Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
82
5 Higher-Order Functions
85
Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
86
Abstracting repetition . . . . . . . . . . . . . . . . . . . . . . . . . . .
86
Higher-order functions . . . . . . . . . . . . . . . . . . . . . . . . . . .
88
Script data set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
Filtering arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
90
Transforming with map . . . . . . . . . . . . . . . . . . . . . . . . . . .
91
Summarizing with reduce . . . . . . . . . . . . . . . . . . . . . . . . . .
92
Composability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
Strings and character codes . . . . . . . . . . . . . . . . . . . . . . . .
95
Recognizing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
97
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
98
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
99
6 The Secret Life of Objects
100
Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Class notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Overriding derived properties . . . . . . . . . . . . . . . . . . . . . . . 106
Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Polymorphism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
The iterator interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Getters, setters, and statics . . . . . . . . . . . . . . . . . . . . . . . . 114
Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
The instanceof operator . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
7 Project: A Robot
121
Meadowfield . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
The task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Persistent data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Simulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
The mail truck’s route . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Pathfinding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
iv

---

Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
8 Bugs and Errors
132
Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Strict mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Error propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Cleaning up after exceptions . . . . . . . . . . . . . . . . . . . . . . . . 141
Selective catching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Assertions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
9 Regular Expressions
148
Creating a regular expression . . . . . . . . . . . . . . . . . . . . . . . 148
Testing for matches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Sets of characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Repeating parts of a pattern . . . . . . . . . . . . . . . . . . . . . . . . 151
Grouping subexpressions . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Matches and groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
The Date class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Word and string boundaries . . . . . . . . . . . . . . . . . . . . . . . . 155
Choice patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
The mechanics of matching . . . . . . . . . . . . . . . . . . . . . . . . 156
Backtracking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
The replace method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Greed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Dynamically creating RegExp objects . . . . . . . . . . . . . . . . . . 162
The search method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
The lastIndex property . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Parsing an INI file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
International characters . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
10 Modules
173
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
v

---

Packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Improvised modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Evaluating data as code . . . . . . . . . . . . . . . . . . . . . . . . . . 176
CommonJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
ECMAScript modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Building and bundling . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Module design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
11 Asynchronous Programming
186
Asynchronicity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Crow tech . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Callbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Failure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Networks are hard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Collections of promises . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Network flooding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Message routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Async functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Generators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
The event loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Asynchronous bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
12 Project: A Programming Language
209
Parsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
The evaluator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Special forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
The environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Cheating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
13 JavaScript and the Browser
224
Networks and the Internet . . . . . . . . . . . . . . . . . . . . . . . . . 224
The Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
vi

---

HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
HTML and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
In the sandbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Compatibility and the browser wars . . . . . . . . . . . . . . . . . . . 231
14 The Document Object Model
232
Document structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Trees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
The standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Moving through the tree . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Finding elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Changing the document . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Creating nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Cascading styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Query selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Positioning and animating . . . . . . . . . . . . . . . . . . . . . . . . . 247
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
15 Handling Events
252
Event handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Events and DOM nodes . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Event objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Default actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Key events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Pointer events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Scroll events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Focus events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Load event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Events and the event loop . . . . . . . . . . . . . . . . . . . . . . . . . 265
Timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Debouncing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
vii

---

16 Project: A Platform Game
271
The game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
The technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Levels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Reading a level . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Actors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Encapsulation as a burden . . . . . . . . . . . . . . . . . . . . . . . . . 279
Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Motion and collision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Actor updates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Tracking keys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Running the game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
17 Drawing on Canvas
295
SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
The canvas element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Lines and surfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Drawing a pie chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Transformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Storing and clearing transformations . . . . . . . . . . . . . . . . . . . 308
Back to the game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Choosing a graphics interface . . . . . . . . . . . . . . . . . . . . . . . 315
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
18 HTTP and Forms
319
The protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Browsers and HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
HTTP sandboxing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Appreciating HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Security and HTTPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Form fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Disabled fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
viii

---

The form as a whole . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Checkboxes and radio buttons . . . . . . . . . . . . . . . . . . . . . . . 333
Select fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
File fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Storing data client-side . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
19 Project: A Pixel Art Editor
342
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
The state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
DOM building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
The canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
The application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Drawing tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Saving and loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Undo history . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Let’s draw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Why is this so hard? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
20 Node.js
363
Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
The node command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Installing with NPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
The file system module . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
The HTTP module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Streams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
A file server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
21 Project: Skill-Sharing Website
382
Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Long polling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
HTTP interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
The server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
The client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
ix

---

Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Exercise Hints
402
Program Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Data Structures: Objects and Arrays . . . . . . . . . . . . . . . . . . . 404
Higher-Order Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
The Secret Life of Objects . . . . . . . . . . . . . . . . . . . . . . . . . 407
Project: A Robot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Bugs and Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Asynchronous Programming . . . . . . . . . . . . . . . . . . . . . . . . 412
Project: A Programming Language . . . . . . . . . . . . . . . . . . . . 413
The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . 414
Handling Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Project: A Platform Game . . . . . . . . . . . . . . . . . . . . . . . . . 416
Drawing on Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
HTTP and Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Project: A Pixel Art Editor . . . . . . . . . . . . . . . . . . . . . . . . 420
Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Project: Skill-Sharing Website . . . . . . . . . . . . . . . . . . . . . . . 423
x

---