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.
[](http://eloquentjavascript.net/00_intro.html#p_HHVStQZWvV)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.
[](http://eloquentjavascript.net/00_intro.html#p_8m5Rp23sjC)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.
[](http://eloquentjavascript.net/00_intro.html#p_K2V1ftdEtw)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.
[](http://eloquentjavascript.net/00_intro.html#p_bwwZnQ61Ct)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.
[](http://eloquentjavascript.net/00_intro.html#p_4GmkOQecwp)This book intends to make you familiar enough with this language to be able to make a computer do what you want.
## [](http://eloquentjavascript.net/00_intro.html#h_gxw0/HAaxt)On programming
> [](http://eloquentjavascript.net/00_intro.html#p_UtBFH8wCra)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.
>
> Confucius
[](http://eloquentjavascript.net/00_intro.html#p_Qlcbw56E8q)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.
[](http://eloquentjavascript.net/00_intro.html#p_5QcfzjhTZM)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?*combined*?in ways that require you to make additional connections.
[](http://eloquentjavascript.net/00_intro.html#p_zXHEILSN8i)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*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.
> [](http://eloquentjavascript.net/00_intro.html#p_kxgeCuF7g8)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.
>
> Joseph Weizenbaum,?Computer Power and Human Reason
[](http://eloquentjavascript.net/00_intro.html#p_mDbd/yWUsd)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.
[](http://eloquentjavascript.net/00_intro.html#p_EKeN9PLQQ9)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.
[](http://eloquentjavascript.net/00_intro.html#p_4RuBjh0gX8)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.
[](http://eloquentjavascript.net/00_intro.html#p_PGl86LvZKv)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.
[](http://eloquentjavascript.net/00_intro.html#p_9vRRUeidla)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?*bad*?programmers.
[](http://eloquentjavascript.net/00_intro.html#p_+tnT9xRk/U)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.
## [](http://eloquentjavascript.net/00_intro.html#h_oAyXcPDj8N)Why language matters
[](http://eloquentjavascript.net/00_intro.html#p_UoFCRNUJFq)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
~~~
[](http://eloquentjavascript.net/00_intro.html#p_ZcLLqDwtFk)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 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.
[](http://eloquentjavascript.net/00_intro.html#p_LyiHWsUpk3)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.
[](http://eloquentjavascript.net/00_intro.html#p_FVhBy3r9Pt)Each line of the previous program contains a single instruction. It could be written in English like this:
~~~
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.
~~~
[](http://eloquentjavascript.net/00_intro.html#p_M+oRlzgd8m)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.
~~~
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”.
~~~
[](http://eloquentjavascript.net/00_intro.html#p_j3dSs/BAQG)Can you see how the program works at this point? 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`?will keep track of the number that we are currently looking at. The lines using?`compare`?are probably the weirdest ones. The program wants to see whether?`count`?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?`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?`count`?is not 11 yet.
[](http://eloquentjavascript.net/00_intro.html#p_OW1EmW8ax2)Here is the same program in JavaScript:
~~~
var total = 0, count = 1;
while (count <= 10) {
total += count;
count += 1;
}
console.log(total);
// → 55
~~~
[](http://eloquentjavascript.net/00_intro.html#p_oomhltDv3/)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?`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. That condition is?`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, which was an uninteresting detail. Part of the power of programming languages is that they take care of uninteresting details for us.
[](http://eloquentjavascript.net/00_intro.html#p_sycwD+B9SD)At the end of the program, after the?`while`?construct has finished, the`console.log`?operation is applied to the result in order to write it as output.
[](http://eloquentjavascript.net/00_intro.html#p_wn1/ZRqPgW)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:
~~~
console.log(sum(range(1, 10)));
// → 55
~~~
[](http://eloquentjavascript.net/00_intro.html#p_fqK/4k+tTK)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?[later chapters](http://eloquentjavascript.net/04_data.html#data)?how to build operations like?`sum`?and?`range`.)
[](http://eloquentjavascript.net/00_intro.html#p_jgTrT21F6N)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 those blocks easy to compose.
## [](http://eloquentjavascript.net/00_intro.html#h_GlF1Kuv0JF)What is JavaScript?
[](http://eloquentjavascript.net/00_intro.html#p_NnFf9SYflZ)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.
[](http://eloquentjavascript.net/00_intro.html#p_XQARvdMdFm)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.
[](http://eloquentjavascript.net/00_intro.html#p_f4BBnjDgSI)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.
[](http://eloquentjavascript.net/00_intro.html#p_WpVPn/5Qrf)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.
[](http://eloquentjavascript.net/00_intro.html#p_oTz4zfL7GZ)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?[Chapter 10](http://eloquentjavascript.net/10_modules.html#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.
[](http://eloquentjavascript.net/00_intro.html#p_uvrRwRP2CF)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.
[](http://eloquentjavascript.net/00_intro.html#p_qDzS+9f4mb)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?[Chapter 20](http://eloquentjavascript.net/20_node.html#node)) are providing a powerful environment for programming JavaScript outside of the browser.
## [](http://eloquentjavascript.net/00_intro.html#h_UmlI5uNVqn)Code, and what to do with it
[](http://eloquentjavascript.net/00_intro.html#p_vaDhHr+EAd)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.
[](http://eloquentjavascript.net/00_intro.html#p_TTKKe5L9Nw)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.
[](http://eloquentjavascript.net/00_intro.html#p_NCyHfLuN8B)When reading this book in your browser, you can edit (and run) all example programs by clicking them.
[](http://eloquentjavascript.net/00_intro.html#p_lSuuLUcwMp)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[sandbox](http://eloquentjavascript.net/code)?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.
## [](http://eloquentjavascript.net/00_intro.html#h_QzUnm0u8/B)Overview of this book
[](http://eloquentjavascript.net/00_intro.html#p_Nb8pnSxfWH)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.
[](http://eloquentjavascript.net/00_intro.html#p_vtV983SU2Q)Throughout the book, there are five?*project chapters*, which describe larger example programs to give you a taste of real programming. In order of appearance, we will work through building an?[artificial life simulation](http://eloquentjavascript.net/07_elife.html#elife), a[programming language](http://eloquentjavascript.net/11_language.html#language), a?[platform game](http://eloquentjavascript.net/15_game.html#game), a?[paint program](http://eloquentjavascript.net/19_paint.html#paint), and a?[dynamic website](http://eloquentjavascript.net/21_skillsharing.html#skillsharing).
[](http://eloquentjavascript.net/00_intro.html#p_tBWN2J/neE)The language part of the book starts with four chapters to introduce the basic structure of the JavaScript language. They introduce?[control structures](http://eloquentjavascript.net/02_program_structure.html#program_structure)?(such as the?`while`?word you saw in this introduction),?[functions](http://eloquentjavascript.net/03_functions.html#functions)?(writing your own operations), and?[data structures](http://eloquentjavascript.net/04_data.html#data). After these, you will be able to write simple programs. Next, Chapters?[5](http://eloquentjavascript.net/05_higher_order.html#higher_order)?and?[6](http://eloquentjavascript.net/06_object.html#object)?introduce techniques to use functions and objects to write more?*abstract*?code and thus keep complexity under control.
[](http://eloquentjavascript.net/00_intro.html#p_BQGfU79Z/i)After a?[first project chapter](http://eloquentjavascript.net/07_elife.html#elife), the first part of the book continues with chapters on?[error handling and fixing](http://eloquentjavascript.net/08_error.html#error), on?[regular expressions](http://eloquentjavascript.net/09_regexp.html#regexp)?(an important tool for working with text data), and on?[modularity](http://eloquentjavascript.net/10_modules.html#modules)—another weapon against complexity. The?[second project chapter](http://eloquentjavascript.net/11_language.html#language)?concludes the first part of the book.
[](http://eloquentjavascript.net/00_intro.html#p_ENnJdVvZOh)The second part, Chapters?[12](http://eloquentjavascript.net/12_browser.html#browser)?to?[19](http://eloquentjavascript.net/19_paint.html#paint), describes the tools that browser JavaScript has access to. You’ll learn to display things on the screen (Chapters?[13](http://eloquentjavascript.net/13_dom.html#dom)?and?[16](http://eloquentjavascript.net/16_canvas.html#canvas)), respond to user input (Chapters?[14](http://eloquentjavascript.net/14_event.html#event)?and?[18](http://eloquentjavascript.net/18_forms.html#forms)), and communicate over the network ([Chapter 17](http://eloquentjavascript.net/17_http.html#http)). There are again two project chapters in this part.
[](http://eloquentjavascript.net/00_intro.html#p_dXulxOfRlF)After that,?[Chapter 20](http://eloquentjavascript.net/20_node.html#node)?describes Node.js, and?[Chapter 21](http://eloquentjavascript.net/21_skillsharing.html#skillsharing)?builds a simple web system using that tool.
## [](http://eloquentjavascript.net/00_intro.html#h_BqJ9mLVGGj)Typographic conventions
[](http://eloquentjavascript.net/00_intro.html#p_tcuoG/QVih)In this book, text written in a?`monospaced`?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:
~~~
function fac(n) {
if (n == 0)
return 1;
else
return fac(n - 1) * n;
}
~~~
[](http://eloquentjavascript.net/00_intro.html#p_gHBEJochZ9)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.
~~~
console.log(fac(8));
// → 40320
~~~
[](http://eloquentjavascript.net/00_intro.html#p_SBvr6KXTHm)Good luck!
- perface
- Introduction
- Part 1: Language
- 1 Values, Types, and Operators
- 2 Program Structure
- 3 Functions
- 4 Data Structures: Objects and Arrays
- 5 Higher-order Functions
- 6 The Secret Life of Objects
- 7 Project: Electronic Life
- 8 Bugs and Error Handling
- 9 Regular Expressions
- 10 Modules
- 11 Project: A Programming Language
- Part 2: Browser
- 12 JavaScript and the Browser
- 13 The Document Object Model
- 14 Handling Events
- 15 Project: A Platform Game
- 16 Drawing on Canvas
- 17 HTTP
- 18 Forms and Form Fields
- 19 Project: A Paint Program
- Part 3: Node
- 20 Node.js
- 21 Project: Skill-Sharing Website
- Other Pages