Pages

Thursday 4 July 2019

JavaScript and HTML Training class








Introduction of JavaScript 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 . . . . . . . . . . . . . . . . . . . . . . . . . . 8
  1. Values, Types, and Operators 10
Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Unary operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Boolean values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Empty values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Automatic type conversion . . . . . . . . . . . . . . . . . . . . . . . . . 18
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
  1. 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
for loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Breaking Out of a Loop . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Updating bindings succinctly . . . . . . . . . . . . . . . . . . . . . . . 34
Dispatching on a value with switch . . . . . . . . . . . . . . . . . . . . 34
Capitalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3 Functions 39
Defining a function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Bindings and scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Functions as values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Declaration notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Arrow functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
The call stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Optional Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Closure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Recursion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Growing functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Functions and side effects . . . . . . . . . . . . . . . . . . . . . . . . . 54
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4 Data Structures: Objects and Arrays 57
The weresquirrel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Data sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Mutability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
The lycanthrope’s log . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Computing correlation . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Array loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
The final analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Further arrayology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Strings and their properties . . . . . . . . . . . . . . . . . . . . . . . . 72
Rest parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
The Math object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Destructuring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78




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

Exercises 126
  1. Bugs and Errors 128
Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Strict mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Error propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Cleaning up after exceptions . . . . . . . . . . . . . . . . . . . . . . . . 136
Selective catching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Assertions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
9 Regular Expressions 143
Creating a regular expression . . . . . . . . . . . . . . . . . . . . . . . 143
Testing for matches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Sets of characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Repeating parts of a pattern . . . . . . . . . . . . . . . . . . . . . . . . 146
Grouping subexpressions . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Matches and groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
The Date class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Word and string boundaries . . . . . . . . . . . . . . . . . . . . . . . . 150
Choice patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
The mechanics of matching . . . . . . . . . . . . . . . . . . . . . . . . 151
Backtracking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
The replace method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Greed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Dynamically creating RegExp objects . . . . . . . . . . . . . . . . . . 157
The search method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
The lastIndex property . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Parsing an INI file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
International characters . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
  1. Modules 167
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Packages 168
Improvised modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Evaluating data as code . . . . . . . . . . . . . . . . . . . . . . . . . . 170
CommonJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
ECMAScript modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Building and bundling . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Module design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
  1. Asynchronous Programming 180
Asynchronicity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Crow tech . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Callbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Failure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Networks are hard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Collections of promises . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Network flooding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Message routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Async functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Generators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
The event loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Asynchronous bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
  1. Project: A Programming Language 202
Parsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
The evaluator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Special forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
The environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Cheating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
  1. JavaScript and the Browser 216
Networks and the Internet . . . . . . . . . . . . . . . . . . . . . . . . . 216
The Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218




HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
HTML and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
In the sandbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Compatibility and the browser wars . . . . . . . . . . . . . . . . . . . 222
  1. The Document Object Model 224
Document structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Trees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
The standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Moving through the tree . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Finding elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Changing the document . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Creating nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Cascading styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Query selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Positioning and animating . . . . . . . . . . . . . . . . . . . . . . . . . 238
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
15 Handling Events 243
Event handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Events and DOM nodes . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Event objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Default actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Key events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Pointer events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Scroll events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Focus events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Load event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Events and the event loop . . . . . . . . . . . . . . . . . . . . . . . . . 255
Timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Debouncing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

16 Project: A Platform Game 261
The game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
The technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Levels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Reading a level . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Actors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Encapsulation as a burden . . . . . . . . . . . . . . . . . . . . . . . . . 268
Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Motion and collision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Actor updates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Tracking keys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Running the game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
17 Drawing on Canvas 284
SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
The canvas element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Lines and surfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Drawing a pie chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Transformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Storing and clearing transformations . . . . . . . . . . . . . . . . . . . 297
Back to the game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Choosing a graphics interface . . . . . . . . . . . . . . . . . . . . . . . 304
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
18 HTTP and Forms 308
The protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Browsers and HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
HTTP sandboxing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Appreciating HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Security and HTTPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Form fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Disabled fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

The form as a whole . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Checkboxes and radio buttons . . . . . . . . . . . . . . . . . . . . . . . 321
Select fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
File fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Storing data client-side . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
19 Project: A Pixel Art Editor 330
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
The state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
DOM building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
The canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
The application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Drawing tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Saving and loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Undo history . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Let’s draw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Why is this so hard? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
  1. Node.js 350
Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
The node command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Installing with NPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
The file system module . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
The HTTP module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Streams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
A file server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
  1. Project: Skill-Sharing Website 369
Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Long polling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
HTTP interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
The server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
The client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Exercise Hints 388
Program Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Data Structures: Objects and Arrays . . . . . . . . . . . . . . . . . . . 390
Higher-Order Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
The Secret Life of Objects . . . . . . . . . . . . . . . . . . . . . . . . . 393
Project: A Robot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Bugs and Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Asynchronous Programming . . . . . . . . . . . . . . . . . . . . . . . . 398
Project: A Programming Language . . . . . . . . . . . . . . . . . . . . 399
The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . 400
Handling Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Project: A Platform Game . . . . . . . . . . . . . . . . . . . . . . . . . 402
Drawing on Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
HTTP and Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Project: A Pixel Art Editor . . . . . . . . . . . . . . . . . . . . . . . . 406
Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Project: Skill-Sharing Website . . . . . . . . . . . . . . . . . . . . . . . 409