-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path00_intro.html
More file actions
391 lines (387 loc) · 26 KB
/
00_intro.html
File metadata and controls
391 lines (387 loc) · 26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!doctype html>
<head>
<meta charset="utf-8">
<title>Introduction :: Eloquent JavaScript</title>
<link rel=stylesheet href="js/node_modules/codemirror/lib/codemirror.css">
<script src="js/acorn_codemirror.js"></script>
<link rel=stylesheet href="css/ejs.css">
<script src="js/sandbox.js"></script>
<script src="js/ejs.js"></script>
<script>var sandboxLoadFiles = ["code/intro.js"];</script>
</head>
<article>
<nav>
<a href="index.html" title="cover">◆</a>
<a href="01_values.html" title="next chapter">▶</a>
</nav>
<h1>Introduction</h1>
<p><a class=p_ident id="p_yrPhUd2xSg" href="#p_yrPhUd2xSg"></a>This is a book about getting computers to do what you want them to
do. Computers are about as common as screwdrivers today, but they contain a
lot more hidden complexity and thus are harder to operate and
understand. To many, they remain alien, slightly threatening things.</p>
<div class="image">
<img src="img/generated/computer.png" alt="Communicating with a computer">
</div>
<p><a class=p_ident id="p_HHVStQZWvV" href="#p_HHVStQZWvV"></a>We’ve found two effective ways of
bridging the communication gap between us, squishy biological
organisms with a talent for social and spatial reasoning, and
computers, unfeeling manipulators of meaningless data. The first is to
appeal to our sense of the physical world and build interfaces that
mimic that world and allow us to manipulate shapes on a screen with
our fingers. This works very well for casual machine interaction.</p>
<p><a class=p_ident id="p_8m5Rp23sjC" href="#p_8m5Rp23sjC"></a>But we have not yet found a good way to use
the point-and-click approach to communicate things to the computer
that the designer of the interface did not anticipate. For open-ended
interfaces, such as instructing the computer to perform arbitrary
tasks, we’ve had more luck with an approach that makes use of our
talent for language: teaching the machine a language.</p>
<p><a class=p_ident id="p_K2V1ftdEtw" href="#p_K2V1ftdEtw"></a>Human languages allow words and
phrases to be combined in many ways, which allows us to say
many different things. Computer languages, though typically less
grammatically flexible, follow a similar principle.</p>
<p><a class=p_ident id="p_bwwZnQ61Ct" href="#p_bwwZnQ61Ct"></a>Casual computing
has become much more widespread in the past 20 years, and
language-based interfaces, which once were the default way in which
people interacted with computers, have largely been replaced with
graphical interfaces. But they are still there, if you know where to
look. One such language, JavaScript, is built into almost every
web browser and is thus available on just about every consumer
device.</p>
<p><a class=p_ident id="p_4GmkOQecwp" href="#p_4GmkOQecwp"></a>This book intends to make you familiar
enough with this language to be able to make a computer do what you
want.</p>
<h2><a class=h_ident id="h_gxw0/HAaxt" href="#h_gxw0/HAaxt"></a>On programming</h2>
<blockquote>
<p><a class=p_ident id="p_UtBFH8wCra" href="#p_UtBFH8wCra"></a>I do not enlighten those who are not eager to learn,
nor arouse those who are not anxious to give an explanation
themselves. If I have presented one corner of the square and they
cannot come back to me with the other three, I should not go over the
points again.</p>
<footer>Confucius</footer>
</blockquote>
<p><a class=p_ident id="p_Qlcbw56E8q" href="#p_Qlcbw56E8q"></a>Besides explaining JavaScript, I also
will introduce the basic principles of programming. Programming, it
turns out, is hard. The fundamental rules are typically simple and
clear. But programs built on top of these rules tend to become complex
enough to introduce their own rules and complexity. You’re building
your own maze, in a way, and you might just get lost in it.</p>
<p><a class=p_ident id="p_5QcfzjhTZM" href="#p_5QcfzjhTZM"></a>There will be times when reading this book feels terribly
frustrating. If you are new to programming, there will be a lot of new
material to digest. Much of this material will then be <em>combined</em> in
ways that require you to make additional connections.</p>
<p><a class=p_ident id="p_zXHEILSN8i" href="#p_zXHEILSN8i"></a>It is up to you to make the necessary effort. When you are struggling
to follow the book, do not jump to any conclusions about your own
capabilities. You are fine—you just need to keep at it. Take a break,
reread some material, and <em>always</em> make sure you read and understand
the example programs and exercises. Learning is hard work, but
everything you learn is yours and will make subsequent learning
easier.</p>
<blockquote>
<p><a class=p_ident id="p_kxgeCuF7g8" href="#p_kxgeCuF7g8"></a>The computer programmer is a creator of
universes for which he [sic] alone is responsible. Universes of virtually
unlimited complexity can be created in the form of computer programs.</p>
<footer>Joseph Weizenbaum, <cite>Computer Power and Human Reason</cite></footer>
</blockquote>
<p><a class=p_ident id="p_mDbd/yWUsd" href="#p_mDbd/yWUsd"></a>A program is many things. It is a
piece of text typed by a programmer, it is the directing force that
makes the computer do what it does, it is data in the computer’s
memory, yet it controls the actions performed on this same memory.
Analogies that try to compare programs to objects we are familiar with
tend to fall short. A superficially fitting one is that of a
machine—lots of separate parts tend to be involved, and to make the
whole thing tick, we have to consider the ways in which these parts
interconnect and contribute to the operation of the whole.</p>
<p><a class=p_ident id="p_EKeN9PLQQ9" href="#p_EKeN9PLQQ9"></a>A computer is a machine built to act as a host for these
immaterial machines. Computers themselves can do only stupidly
straightforward things. The reason they are so useful is that they do
these things at an incredibly high speed. A program can ingeniously
combine an enormous number of these simple actions in order to do very
complicated things.</p>
<p><a class=p_ident id="p_4RuBjh0gX8" href="#p_4RuBjh0gX8"></a>To some of us, writing computer programs is a
fascinating game. A program is a building of thought. It is costless
to build, it is weightless, and it grows easily under our typing
hands.</p>
<p><a class=p_ident id="p_PGl86LvZKv" href="#p_PGl86LvZKv"></a>But without care, a program’s size and complexity will grow out of
control, confusing even the person who created it. Keeping programs
under control is the main problem of programming. When a program
works, it is beautiful. The art of programming is the skill of
controlling complexity. The great program is subdued—made simple in
its complexity.</p>
<p><a class=p_ident id="p_9vRRUeidla" href="#p_9vRRUeidla"></a>Many programmers believe
that this complexity is best managed by using only a small set of
well-understood techniques in their programs. They have composed
strict rules (“best practices”) prescribing the form programs should
have, and the more zealous among them will consider those who go
outside of this safe little zone to be <em>bad</em> programmers.</p>
<p><a class=p_ident id="p_+tnT9xRk/U" href="#p_+tnT9xRk/U"></a>What hostility to the richness of
programming—to try to reduce it to something straightforward and
predictable, to place a taboo on all the weird and beautiful programs!
The landscape of programming techniques is enormous, fascinating in
its diversity, and still largely unexplored. It is certainly dangerous
going, luring the inexperienced programmer into all kinds of
confusion, but that only means you should proceed with caution and
keep your wits about you. As you learn there will always be new
challenges and new territory to explore. Programmers who refuse to
keep exploring will stagnate, forget their joy, and get bored with
their craft.</p>
<h2><a class=h_ident id="h_oAyXcPDj8N" href="#h_oAyXcPDj8N"></a>Why language matters</h2>
<p><a class=p_ident id="p_UoFCRNUJFq" href="#p_UoFCRNUJFq"></a>In the
beginning, at the birth of computing, there were no programming
languages. Programs looked something like this:</p>
<pre>00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000</pre>
<p><a class=p_ident id="p_ZcLLqDwtFk" href="#p_ZcLLqDwtFk"></a>That is a
program to add the numbers from 1 to 10 together and print out the
result: <code>1 + 2 + ... + 10 = 55</code>. It could run on a simple,
hypothetical machine. To program early computers, it was necessary to
set large arrays of switches in the right position or punch holes in
strips of cardboard and feed them to the computer. You can probably imagine
how tedious and error-prone this procedure was. Even writing simple
programs required much cleverness and discipline. Complex ones were
nearly inconceivable.</p>
<p><a class=p_ident id="p_LyiHWsUpk3" href="#p_LyiHWsUpk3"></a>Of course, manually entering these
arcane patterns of bits (the ones and zeros) did give the programmer
a profound sense of being a mighty wizard. And that has to be worth
something in terms of job satisfaction.</p>
<p><a class=p_ident id="p_FVhBy3r9Pt" href="#p_FVhBy3r9Pt"></a>Each line of the previous program contains a
single instruction. It could be written in English like this:</p>
<pre data-language="text/plain" class="snippet cm-s-default"><a class=c_ident id="c_5SRucnTrpg" href="#c_5SRucnTrpg"></a>1. Store the number 0 in memory location 0.
2. Store the number 1 in memory location 1.
3. Store the value of memory location 1 in memory location 2.
4. Subtract the number 11 from the value in memory location 2.
5. If the value in memory location 2 is the number 0,
continue with instruction 9.
6. Add the value of memory location 1 to memory location 0.
7. Add the number 1 to the value of memory location 1.
8. Continue with instruction 3.
9. Output the value of memory location 0.</pre>
<p><a class=p_ident id="p_M+oRlzgd8m" href="#p_M+oRlzgd8m"></a>Although that is already
more readable than the soup of bits, it is still rather unpleasant. It
might help to use names instead of numbers for the instructions and
memory locations.</p>
<pre data-language="text/plain" class="snippet cm-s-default"><a class=c_ident id="c_8V4qsLuPea" href="#c_8V4qsLuPea"></a> Set “total” to 0.
Set “count” to 1.
[loop]
Set “compare” to “count”.
Subtract 11 from “compare”.
If “compare” is zero, continue at [end].
Add “count” to “total”.
Add 1 to “count”.
Continue at [loop].
[end]
Output “total”.</pre>
<p><a class=p_ident id="p_j3dSs/BAQG" href="#p_j3dSs/BAQG"></a>Can you see how the program
works at this point? The first two lines give
two memory locations their starting values: <code>total</code> will be used to
build up the result of the computation, and <code>count</code> will keep track of the
number that we are currently looking at. The lines using <code>compare</code> are
probably the weirdest ones. The program wants to see
whether <code>count</code> is equal to 11 in order to decide whether it can stop
running. Because our hypothetical machine is rather primitive, it can only
test whether a number is zero and make a decision (or jump) based on
that. So it uses the memory location labeled <code>compare</code> to compute the
value of <code>count - 11</code> and makes a decision based on that value. The
next two lines add the value of <code>count</code> to the result and increment
<code>count</code> by 1 every time the program has decided that <code>count</code> is not 11 yet.</p>
<p><a class=p_ident id="p_OW1EmW8ax2" href="#p_OW1EmW8ax2"></a>Here is the same program in JavaScript:</p>
<pre data-language="javascript" class="snippet cm-s-default"><a class=c_ident id="c_XACs1qbEhQ" href="#c_XACs1qbEhQ"></a><span class="cm-keyword">var</span> <span class="cm-variable">total</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-variable">count</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>;
<span class="cm-keyword">while</span> (<span class="cm-variable">count</span> <span class="cm-operator"><=</span> <span class="cm-number">10</span>) {
<span class="cm-variable">total</span> <span class="cm-operator">+=</span> <span class="cm-variable">count</span>;
<span class="cm-variable">count</span> <span class="cm-operator">+=</span> <span class="cm-number">1</span>;
}
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">total</span>);
<span class="cm-comment">// → 55</span></pre>
<p><a class=p_ident id="p_oomhltDv3/" href="#p_oomhltDv3/"></a>This version gives us a few more improvements.
Most importantly, there is no need to specify the way we want the
program to jump back and forth anymore. The <code>while</code> language
construct takes care of that. It continues executing the block
(wrapped in braces) below it as long as the condition it was given
holds. That condition is <code>count <= 10</code>, which means “<code>count</code> is less than or equal to
10”. We no longer have to create a temporary value and compare that
to zero, which was an uninteresting detail. Part of the power of
programming languages is that they take care of uninteresting details
for us.</p>
<p><a class=p_ident id="p_sycwD+B9SD" href="#p_sycwD+B9SD"></a>At the end of the program, after the <code>while</code> construct has
finished, the <code>console.log</code> operation is applied to the result in
order to write it as output.</p>
<p><a class=p_ident id="p_wn1/ZRqPgW" href="#p_wn1/ZRqPgW"></a>Finally, here is what the
program could look like if we happened to have the convenient
operations <code>range</code> and <code>sum</code> available, which respectively create a
collection of numbers within a range and compute the sum of a
collection of numbers:</p>
<pre data-language="javascript" class="snippet cm-s-default"><a class=c_ident id="c_MrGJG8EmmP" href="#c_MrGJG8EmmP"></a><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">sum</span>(<span class="cm-variable">range</span>(<span class="cm-number">1</span>, <span class="cm-number">10</span>)));
<span class="cm-comment">// → 55</span></pre>
<p><a class=p_ident id="p_fqK/4k+tTK" href="#p_fqK/4k+tTK"></a>The moral of this story is that the same program can
be expressed in long and short, unreadable and readable ways. The
first version of the program was extremely obscure, whereas this last
one is almost English: <code>log</code> the <code>sum</code> of the <code>range</code> of numbers from
1 to 10. (We will see in <a href="04_data.html#data">later chapters</a> how to
build operations like <code>sum</code> and <code>range</code>.)</p>
<p><a class=p_ident id="p_jgTrT21F6N" href="#p_jgTrT21F6N"></a>A good
programming language helps the programmer by allowing them to talk
about the actions that the computer has to perform on a higher level.
It helps omit uninteresting details, provides convenient building
blocks (such as <code>while</code> and <code>console.log</code>), allows you to define your
own building blocks (such as <code>sum</code> and <code>range</code>), and makes those blocks
easy to compose.</p>
<h2><a class=h_ident id="h_GlF1Kuv0JF" href="#h_GlF1Kuv0JF"></a>What is JavaScript?</h2>
<p><a class=p_ident id="p_NnFf9SYflZ" href="#p_NnFf9SYflZ"></a> JavaScript was introduced in 1995 as a way to add programs to
web pages in the Netscape Navigator browser. The language has since
been adopted by all other major graphical web browsers. It has made modern
web applications possible—applications with which you can interact
directly, without doing a page reload for every action. But it is also used in more
traditional websites to provide various forms of interactivity and
cleverness.</p>
<p><a class=p_ident id="p_XQARvdMdFm" href="#p_XQARvdMdFm"></a>It is important to note that JavaScript has
almost nothing to do with the programming language named Java. The
similar name was inspired by marketing considerations, rather than
good judgment. When JavaScript was being introduced, the Java language
was being heavily marketed and was gaining popularity. Someone
thought it was a good idea to try to ride along on this success. Now we
are stuck with the name.</p>
<p><a class=p_ident id="p_f4BBnjDgSI" href="#p_f4BBnjDgSI"></a>After its adoption outside of
Netscape, a standard document was written to describe the way the
JavaScript language should work to make sure the various pieces of
software that claimed to support JavaScript were actually talking
about the same language. This is called the ECMAScript standard, after
the Ecma International organization that did the standardization. In
practice, the terms ECMAScript and JavaScript can be used interchangeably—they
are two names for the same language.</p>
<p><a class=p_ident id="p_WpVPn/5Qrf" href="#p_WpVPn/5Qrf"></a>There are those who will
say <em>terrible</em> things about the JavaScript language. Many of these
things are true. When I was required to write something in JavaScript
for the first time, I quickly came to despise it. It would accept
almost anything I typed but interpret it in a way that was completely
different from what I meant. This had a lot to do with the fact that I
did not have a clue what I was doing, of course, but there is a real
issue here: JavaScript is ridiculously liberal in what it allows. The
idea behind this design was that it would make programming in
JavaScript easier for beginners. In actuality, it mostly makes finding
problems in your programs harder because the system will not point
them out to you.</p>
<p><a class=p_ident id="p_oTz4zfL7GZ" href="#p_oTz4zfL7GZ"></a>This flexibility also
has its advantages, though. It leaves space for a lot of techniques
that are impossible in more rigid languages, and as you will see (for
example in <a href="10_modules.html#modules">Chapter 10</a>) it
can be used to overcome some of JavaScript’s shortcomings. After
learning the language properly and working with it for a while, I have
learned to actually <em>like</em> JavaScript.</p>
<p><a class=p_ident id="p_uvrRwRP2CF" href="#p_uvrRwRP2CF"></a>There have been several versions of JavaScript. ECMAScript
version 3 was the widely supported version in the time of
JavaScript’s ascent to dominance, roughly between 2000 and 2010.
During this time, work was underway on an ambitious version 4, which
planned a number of radical improvements and extensions to the
language. Changing a living, widely used language in such a radical
way turned out to be politically difficult, and work on the version 4
was abandoned in 2008, leading to the much less ambitious version 5
coming out in 2009. We’re now at the point where all major
browsers support version 5, which is the language version that
this book will be focusing on. A version 6 is in the process of
being finalized, and some browsers are starting to support new
features from this version.</p>
<p><a class=p_ident id="p_qDzS+9f4mb" href="#p_qDzS+9f4mb"></a>Web browsers are not the only platforms on
which JavaScript is used. Some databases, such as MongoDB and CouchDB,
use JavaScript as their scripting and query language. Several
platforms for desktop and server programming, most notably the
Node.js project (the subject of <a href="20_node.html#node">Chapter
20</a>) are providing a powerful environment for programming JavaScript
outside of the browser.</p>
<h2><a class=h_ident id="h_UmlI5uNVqn" href="#h_UmlI5uNVqn"></a>Code, and what to do with it</h2>
<p><a class=p_ident id="p_vaDhHr+EAd" href="#p_vaDhHr+EAd"></a>Code is the text that makes up
programs. Most chapters in this book contain quite a lot of it. In my
experience, reading code and writing code are indispensable parts of
learning to program, so try to not just glance over the examples. Read
them attentively and understand them. This may be slow and confusing
at first, but I promise that you will quickly get the hang of it. The
same goes for the exercises. Don’t assume you understand them
until you’ve actually written a working solution.</p>
<p><a class=p_ident id="p_TTKKe5L9Nw" href="#p_TTKKe5L9Nw"></a>I recommend you try your solutions to exercises
in an actual JavaScript interpreter. That way, you’ll get immediate feedback on
whether what you are doing is working, and, I hope, you’ll be
tempted to experiment and go beyond the exercises.</p>
<p><a class=p_ident id="p_NCyHfLuN8B" href="#p_NCyHfLuN8B"></a>When reading this book in your browser, you can edit (and run) all
example programs by clicking them.</p>
<p><a class=p_ident id="p_lSuuLUcwMp" href="#p_lSuuLUcwMp"></a>If you want to run the
programs defined in this book outside of the book’s sandbox, some care
is required. Many examples stand on their own and should work in any
JavaScript environment. But code in later chapters is mostly written
for a specific environment (the browser or Node.js) and can run only
there. In addition, many chapters define bigger programs, and the
pieces of code that appear in them depend on each other or on external
files. The <a href="http://eloquentjavascript.net/code">sandbox</a> on the website
provides links to Zip files containing all of the scripts and data
files necessary to run the code for a given chapter.</p>
<h2><a class=h_ident id="h_QzUnm0u8/B" href="#h_QzUnm0u8/B"></a>Overview of this book</h2>
<p><a class=p_ident id="p_Nb8pnSxfWH" href="#p_Nb8pnSxfWH"></a>This book contains roughly three parts. The first 11 chapters discuss
the JavaScript language itself. The next eight chapters are about web
browsers and the way JavaScript is used to program them. Finally,
two chapters are devoted to Node.js, another environment to program
JavaScript in.</p>
<p><a class=p_ident id="p_vtV983SU2Q" href="#p_vtV983SU2Q"></a>Throughout the book, there are five <em>project chapters</em>, which describe
larger example programs to give you a taste of real programming. In
order of appearance, we will work through building an
<a href="07_elife.html#elife">artificial life simulation</a>, a
<a href="11_language.html#language">programming language</a>, a
<a href="15_game.html#game">platform game</a>, a
<a href="19_paint.html#paint">paint program</a>, and a
<a href="21_skillsharing.html#skillsharing">dynamic website</a>.</p>
<p><a class=p_ident id="p_tBWN2J/neE" href="#p_tBWN2J/neE"></a>The language part of the book starts with four chapters to introduce
the basic structure of the JavaScript language. They introduce
<a href="02_program_structure.html#program_structure">control structures</a>
(such as the <code>while</code> word you saw in this introduction),
<a href="03_functions.html#functions">functions</a> (writing your own
operations), and <a href="04_data.html#data">data structures</a>. After these,
you will be able to write simple programs. Next, Chapters
<a href="05_higher_order.html#higher_order">5</a> and
<a href="06_object.html#object">6</a> introduce techniques to use functions
and objects to write more <em>abstract</em> code and thus keep complexity
under control.</p>
<p><a class=p_ident id="p_BQGfU79Z/i" href="#p_BQGfU79Z/i"></a>After a <a href="07_elife.html#elife">first project chapter</a>, the first
part of the book continues with chapters on
<a href="08_error.html#error">error handling and fixing</a>, on
<a href="09_regexp.html#regexp">regular expressions</a> (an important tool for
working with text data), and on
<a href="10_modules.html#modules">modularity</a>—another weapon against
complexity. The <a href="11_language.html#language">second project chapter</a>
concludes the first part of the book.</p>
<p><a class=p_ident id="p_ENnJdVvZOh" href="#p_ENnJdVvZOh"></a>The second part, Chapters <a href="12_browser.html#browser">12</a> to
<a href="19_paint.html#paint">19</a>, describes the tools that browser
JavaScript has access to. You’ll learn to display things on the screen
(Chapters <a href="13_dom.html#dom">13</a> and
<a href="16_canvas.html#canvas">16</a>), respond to user input (Chapters
<a href="14_event.html#event">14</a> and <a href="18_forms.html#forms">18</a>), and
communicate over the network (<a href="17_http.html#http">Chapter 17</a>).
There are again two project chapters in this part.</p>
<p><a class=p_ident id="p_dXulxOfRlF" href="#p_dXulxOfRlF"></a>After that, <a href="20_node.html#node">Chapter 20</a> describes Node.js, and
<a href="21_skillsharing.html#skillsharing">Chapter 21</a> builds a simple web
system using that tool.</p>
<h2><a class=h_ident id="h_BqJ9mLVGGj" href="#h_BqJ9mLVGGj"></a>Typographic conventions</h2>
<p><a class=p_ident id="p_tcuoG/QVih" href="#p_tcuoG/QVih"></a>In this book, text written in a <code>monospaced</code>
font will represent elements of programs—sometimes
they are self-sufficient fragments, and sometimes they just refer to
part of a nearby program. Programs (of which you have already seen a
few), are written as follows:</p>
<pre data-language="javascript" class="snippet cm-s-default"><a class=c_ident id="c_+dxUF296oM" href="#c_+dxUF296oM"></a><span class="cm-keyword">function</span> <span class="cm-variable">fac</span>(<span class="cm-def">n</span>) {
<span class="cm-keyword">if</span> (<span class="cm-variable-2">n</span> <span class="cm-operator">==</span> <span class="cm-number">0</span>)
<span class="cm-keyword">return</span> <span class="cm-number">1</span>;
<span class="cm-keyword">else</span>
<span class="cm-keyword">return</span> <span class="cm-variable">fac</span>(<span class="cm-variable-2">n</span> <span class="cm-operator">-</span> <span class="cm-number">1</span>) <span class="cm-operator">*</span> <span class="cm-variable-2">n</span>;
}</pre>
<p><a class=p_ident id="p_gHBEJochZ9" href="#p_gHBEJochZ9"></a>Sometimes, in order to show the output that a program
produces, the expected output is written after it, with two slashes
and an arrow in front.</p>
<pre data-language="javascript" class="snippet cm-s-default"><a class=c_ident id="c_C1hfQzBD5u" href="#c_C1hfQzBD5u"></a><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">fac</span>(<span class="cm-number">8</span>));
<span class="cm-comment">// → 40320</span></pre>
<p><a class=p_ident id="p_SBvr6KXTHm" href="#p_SBvr6KXTHm"></a>Good luck!</p>
<nav>
<a href="index.html" title="cover">◆</a>
<a href="01_values.html" title="next chapter">▶</a>
</nav>
</article>