00_intro.txt

:next_link: 01_values
:load_files: ["js/intro.js"]

= Introduction =

This is a book about getting ((computer))s to do what you want them to
do. Computers are about as common as screwdrivers today, but contain a
lot more hidden complexity, and thus are harder to operate and
understand. To many, they remain alien, slightly threatening things.

image::img/computer.svg[alt="Communicating with a computer"]

(((graphical user interface)))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 the
computer, unfeeling manipulator 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.

(((programming language)))(((machine language)))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.

(((human language)))(((expressivity)))Human languages allow words and
subsentences to be combined in many, many ways, allowing us to say
many, many different things. Computer languages, though typically less
grammatically flexible, follow a similar principle.

(((JavaScript,availability of)))(((casual computing)))Casual computing
has become become much more widespread in the past twenty 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 just about every
web ((browser)), and thus available on just about every consumer
device.

indexsee:[web browser,browser]

This book intends to make you familiar enough with this language to be
able to make a computer do what you want.

== On programming ==

[quote, Confucius]
____
(((Confucius)))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.
____

(((programming,difficulty of)))Besides explaining JavaScript, I also
want to 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 basic rules, tend to become
complex enough to introduce their own rules and complexity. You're
building your own maze, in a way, and might just get lost in it.

(((learning)))There will be times at which 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 _combine_ in
ways that require you to make additional connections.

It is up to you to make the effort necessary. 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,
re-read some material, and _always_ 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.

[quote, Joseph Weizenbaum, Computer Power and Human Reason]
____
(((Weizenbaum+++,+++ Joseph)))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.
____

(((program,nature of)))(((data)))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.

(((computer)))A computer is a machine built to act as a host for these
immaterial machines. Computers themselves can only do 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 enormous numbers of these simple actions in order to do very
complicated things.

(((programming,joy of)))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.

If we are not careful, its size and ((complexity)) will grow out of
control, confusing even the person who created it. This is the main
problem of programming: keeping programs under control. 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.

(((programming style)))(((best practices)))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 that go
outside of this little safe zone to be _bad_ programmers.

(((experiment)))(((learning)))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.

== Why language matters ==

(((programming language)))(((binary)))In the beginning, at the birth
of computing, there were no programming languages. Programs looked
something like this:

----
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
----

(((programming,history of)))(((punch card)))(((complexity)))That is a
program to add the numbers from 1 to 10 together and print out the
result `(1 + 2 + ... + 10 = 55)`. It could run on a very 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 imagine how
this was a tedious, error-prone procedure. Even the writing of simple
programs required much cleverness and discipline. Complex ones were
nearly inconceivable.

(((bit)))(((wizard (mighty))))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.

(((memory)))(((instruction)))Each line of the program above contains a
single instruction. It could be written in English like this:

[source,text/plain]
----
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.
----

(((readability)))(((naming)))(((variable)))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:

[source,text/plain]
----
 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”
----

(((loop)))(((jump)))(((summing)))At this point it is not too hard to
see how the program works. Can you? The first two lines give two
memory locations their starting values: `total` will be used to build
up the result of the computation, and `count` keeps track of the
number that we are currently looking at. The lines using `compare` are
probably the weirdest ones. What the program wants to do is see
whether `count` is equal to 11 in order to decide whether it can stop
yet. Because our hypothetical machine is rather primitive, it can only
test whether a number is zero and make a decision (jump) based on
that. So, it uses the memory location labeled `compare` to compute the
value of `count - 11` and makes a decision based on that value. The
next two lines add the value of `count` to the result and increment
`count` by 1 every time the program has decided that it is not 11 yet.

Here is the same program in JavaScript:

[source,javascript]
----
var total = 0, count = 1;
while (count <= 10) {
  total += count;
  count += 1;
}
console.log(total);
// → 55
----

(((while loop)))(((loop)))This 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 any more. The `while` 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: `count <= 10`, which means “`count` is less than or equal to
10”. We no longer have to create a temporary value and compare that
to zero. This was an uninteresting detail, and the power of
programming languages is that they take care of uninteresting details
for us.

(((console.log)))At the end of the program, after the `while` has
finished, the `console.log` operation is applied to the result in
order to write it as output.

(((sum function)))(((range
function)))(((abstraction)))(((function)))Finally, here is what the
program could look like if we happened to have the convenient
operations `range` and `sum` available, which respectively create a
((collection)) of numbers within a range and compute the sum of a
collection of numbers:

[source,javascript]
----
console.log(sum(range(1, 10)));
// → 55
----

(((readability)))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: `log` the `sum` of the `range` of numbers from
1 to 10. (We will see in link:04_data.html#data[later chapters] how to
build things like `sum` and `range`.)

(((programming language,power of)))(((composition)))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 `while` and `console.log`), allows you to define your own building
blocks (such as `sum` and `range`), and makes it easy to compose these
blocks.

== What is JavaScript? ==

indexsee:[WWW,World Wide Web] indexsee:[Web,World Wide Web]

(((history)))(((Netscape Navigator)))(((browser)))(((web
application)))(((JavaScript)))(((JavaScript,history of)))(((World Wide
Web))) JavaScript was introduced in 1995, as a way to add programs to
Web pages in the Netscape Navigator browser. The language has since
been adapted by all other major graphical web browsers. It has made
the current generation of web applications possible—browser-based
email clients, maps, and social networks—and is also used in more
traditional sites to provide various forms of interactivity and
cleverness.

(((Java)))(((naming)))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 in popularity. Someone
thought it a good idea to try to ride along on this success. Now we
are stuck with the name.

(((ECMAScript)))(((compatibility)))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 organization, which did the standardization. In practice, the
terms ECMAScript and JavaScript can be used interchangeably—they are
two names for the same language.

(((JavaScript,weaknesses of)))(((debugging)))There are those who will
say _terrible_ 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.

(((JavaScript,flexibility of)))(((flexibility)))This flexibility also
has its advantages, though. It leaves space for a lot of techniques
that are impossible in more rigid languages, and, as we will see, for
example, in the link:10_modules.html#modules[chapter on modules], 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 _like_ JavaScript.

(((future)))(((JavaScript,versions of)))(((ECMAScript)))(((ECMAScript
6)))There have been several _versions_ of JavaScript. ECMAScript
version 3 was the dominant, 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 4th
edition was abandoned in 2008, leading to the much less ambitious 5th
edition coming out in 2009. We're now at the point where all major
browsers support this 5th edition, which is the language version that
this book will be focusing on. A 6th edition is in the process of
being finalized, and some browsers are starting to support new
features from this edition.

(((JavaScript,uses of)))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 link:20_node.html#node[Chapter
20], are providing a powerful environment for programming JavaScript
outside of the browser.

== Code, and what to do with it ==

(((reading code)))(((writing code)))Code is the text that makes up
programs. Most chapters in this book contain quite a lot of it. In my
experience, reading and writing ((code)) is an indispensable part of
((learning)) to program. Try to not just glance over the examples, read
them attentively and understand them. This will 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.

I recommend to try out your solutions to exercises in an actual
JavaScript ((interpreter)), to get immediate feedback on whether what
you are doing is working or not, and, hopefully, to be tempted to
((experiment)) and go beyond the exercises.

ifdef::html_target[]

When reading this book in your browser, you can edit (and run) all
example programs by clicking on them.

endif::html_target[]

ifdef::tex_target[]

(((sandbox)))(((code sandbox)))(((running code)))Most of the example
code in this book can be found on the book's ((website)), at
http://eloquentjavascript.net/code[_eloquentjavascript.net/code_],
which also provides an easy way to run the programs and experiment
with writing your own code.

endif::tex_target[]

(((developer tools)))(((JavaScript console)))Running JavaScript
programs outside of this book's sandbox is also possible. You can opt
to install Node.js, and use it run text files that contain programs.
Or you can use your browser's developer console (typically found
somewhere under a “tools” or “developer” menu) and play around in
there. In link:12_browser.html#script_tag[Chapter 12], the way in
which JavaScript programs are embedded in web pages (HTML files) is
explained. There are also websites like http://jsbin.com[_jsbin.com_]
which provide a friendly interface for running JavaScript code in a
browser.

== Typographic conventions ==

(((factorial function)))In this book, text written in a `monospaced`
font should be understood to 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:

[source,javascript]
----
function fac(n) {
  if (n == 0)
    return 1;
  else
    return fac(n - 1) * n;
}
----

(((console.log)))Sometimes, in order to show the output that a program
produces, the expected output is written below it, with two slashes
and an arrow in front:

[source,javascript]
----
console.log(fac(8));
// → 40320
----

Good luck!