Learn Enough JavaScript to Be Dangerous
A tutorial introduction to programming with JavaScript
Michael Hartl
Contents
- About the author
- Chapter 1 Hello, world!
- Chapter 2 Strings
- Chapter 3 Arrays
- Chapter 4 Other native objects
- Chapter 5 Functions
- Chapter 6 Functional programming
- Chapter 7 Objects and prototypes
- Chapter 8 Testing and test-driven development
- Chapter 9 Events and DOM manipulation
- Chapter 10 Shell scripts with Node.js
- Chapter 11 Full sample app: Image gallery
About the author
Michael Hartl is the creator of the Ruby on Rails Tutorial, one of the leading introductions to web development, and is cofounder and principal author at Learn Enough. Previously, he was a physics instructor at the California Institute of Technology (Caltech), where he received a Lifetime Achievement Award for Excellence in Teaching. He is a graduate of Harvard College, has a Ph.D. in Physics from Caltech, and is an alumnus of the Y Combinator entrepreneur program.
Chapter 1 Hello, world!
As the only language that can be executed inside web browsers, JavaScript is an essential part of every programmer’s toolkit. Learn Enough JavaScript to Be Dangerous is designed to get you started writing practical and modern JavaScript programs as fast as possible, using the latest JavaScript technologies (including Node.js and ES6), with a focus on the real tools used every day by software developers.
Unlike most JavaScript tutorials, we’ll be treating JavaScript as a general-purpose programming language right from the start, so our examples won’t be confined to the browser. The result is a practical narrative introduction to JavaScript—a perfect complement both to in-browser coding tutorials and to the voluminous but hard-to-navigate JavaScript reference material on the Web.
You won’t learn everything there is to know about JavaScript—that would take thousands of pages and centuries of effort—but you will learn enough JavaScript to be dangerous (Figure 1.1).1
There are no programming prerequisites for Learn Enough JavaScript to Be Dangerous, although it certainly won’t hurt if you’ve programmed before. What is important is that you’ve started developing your technical sophistication (Box 1.1), either on your own or using the preceding Learn Enough tutorials. These tutorials include the following, which together make a good list of prerequisites for this book:
- Learn Enough Command Line to Be Dangerous
- Learn Enough Text Editor to Be Dangerous
- Learn Enough Git to Be Dangerous
- Learn Enough HTML to Be Dangerous
- Learn Enough CSS & Layout to Be Dangerous
An essential aspect of using computers is the ability to figure things out and troubleshoot on your own, a skill we at Learn Enough call technical sophistication.
Developing technical sophistication means not only following systematic tutorials like Learn Enough Command Line to Be Dangerous, Learn Enough Git to Be Dangerous, Learn Enough HTML to Be Dangerous, and Learn Enough CSS & Layout to Be Dangerous, but also knowing when it’s time to break free of a structured presentation and just start Googling around for a solution.
Learn Enough JavaScript to Be Dangerous will give us ample opportunity to practice this essential technical skill.
In particular, as alluded to above, there is a wealth of JavaScript reference material on the Web, but it can be hard to use unless you already know basically what you’re doing. One goal of this tutorial is to be the key that unlocks the documentation. This will include lots of pointers to my favorite JavaScript source, the Mozilla Developer Network (MDN) Web Docs (or just “MDN” for short).
Especially as the exposition gets more advanced, I’ll also frequently include the exact web searches I used to figure out how to accomplish the particular task at hand. For example, how do you use JavaScript to return all elements on a page that match, say, a particular CSS class? Like this: Google “javascript css class return all elements”.
In order to learn enough JavaScript to be dangerous, we’ll begin at the beginning with a series of simple “hello, world” programs using several different techniques (Chapter 1), including an introduction to Node.js, a fast and widely used execution environment for JavaScript programs. In line with the Learn Enough philosophy of always doing things “for real”, even as early as Chapter 1 we’ll deploy a (very simple) dynamic JavaScript application to the live Web.
After mastering “hello, world”, we’ll take a tour of some JavaScript objects, including strings (Chapter 2), arrays (Chapter 3), and other native objects (Chapter 4). Taken together, these chapters constitute a gentle introduction to object-oriented programming with JavaScript.
In Chapter 5, we’ll learn the basics of functions, an essential subject for virtually every programming language. We’ll then apply this knowledge to an elegant and powerful style of coding called functional programming (Chapter 6).
Having covered the basics of built-in JavaScript objects, in Chapter 7 we’ll learn how to make objects of our own. In particular, we’ll define an object for a phrase, and then develop a method for determining whether or not the phrase is a palindrome (the same read forward and backward).
Our initial palindrome implementation will be rather rudimentary, but we’ll extend it in Chapter 8 using a powerful technique called test-driven development (TDD). In the process, we’ll learn more about testing generally, as well as how to create and publish a self-contained software package called an NPM module (and thereby join the large and growing ecosystem of software packages managed by npm, the Node Package Manager).
In Chapter 9, we’ll apply our new NPM module to a JavaScript web application: a site for detecting palindromes. This will give us a chance to learn about events and DOM manipulation. We’ll start with the simplest possible implementation, and then add several extensions of steadily increasing sophistication, including alerts, prompts, and an example of an HTML form.
In Chapter 10, we’ll learn how to write nontrivial shell scripts using JavaScript, a much-neglected topic that underscores JavaScript’s growing importance as a general-purpose programming language. Examples include reading from both files and URLs, with a final example showing how to manipulate a downloaded file as if it were an HTML web page.
In Chapter 11, we’ll apply the techniques from Chapter 9 and Chapter 10 to a real, industrial-grade website. In particular, we’ll extend the sample application from Learn Enough CSS & Layout to Be Dangerous to add a functional image gallery that dynamically changes images, CSS classes, and page text in response to user clicks. (We’ll be using Git to clone a repository directly, so you’ll be able to build and deploy the image gallery even if you haven’t completed Learn Enough CSS & Layout to Be Dangerous.)
In most cases, typing in code examples by hand is the most effective way to learn, but sometimes copying and pasting is more practical. To make the latter more convenient, all code listings from this book are available online at the following URL:
https://github.com/learnenough/learn_enough_javascript_code_listings
Although full-blown web development with a dynamically rendered front-end and a database back-end is beyond the scope of this book, by the end of Learn Enough JavaScript to Be Dangerous you’ll have a solid foundation on which to build such skills. We’ll end the tutorial with pointers to additional resources for extending your JavaScript knowledge further, as well as to further Learn Enough tutorials for full-stack web development—specifically, using Ruby (via Sinatra) and Ruby on Rails, for which a background in JavaScript is excellent preparation.
1.1 Introduction to JavaScript
JavaScript was originally developed by computer scientist Brendan Eich (Figure 1.2)2 for Netscape Navigator, the first commercial web browser, under the name “LiveScript” (Box 1.2). The original use of JavaScript is still its main use—namely, “making cool things happen on web pages”, typically via manipulation of the Document Object Model (DOM) introduced in Learn Enough CSS & Layout to Be Dangerous. In recent years, though, JavaScript’s role has expanded significantly, and it is now often used as a back-end and general-purpose programming language as well.
What’s in a name? That which we call a rose By any other word would smell as sweet.
—William Shakespeare, Romeo and Juliet 2.2.46–47
What we now call JavaScript was originally called “LiveScript” by its creators at Netscape, but at the time of its planned release there was an enormous amount of hype about Java, a language developed by Sun Microsystems. In an attempt to capitalize on this hype, Netscape changed LiveScript’s name to “JavaScript”—thereby causing endless confusion for developers wondering what it has to do with Java. (The answer is: nothing.)
Later on, a standardized version of JavaScript called ECMAScript (pronounced ECK-muh-script) was created in an effort to improve cross-browser compatibility. Technically, what most people call “JavaScript” is more properly called “ECMAScript”, with JavaScript being only ECMAScript’s most common implementation, but in this tutorial we follow the common convention of using “JavaScript” to refer to the language in general. The main exception to this rule is our occasional use of contracted names like “ES6”, which refers to the sixth edition of ECMAScript (a particularly large and important update, adding many useful features to the ECMAScript/JavaScript standard).
Finally, it’s worth noting that the misspelling “Javascript”, with a lowercase “s”, is extremely common, to the point of being borderline acceptable, even in relatively formal contexts. I frankly find the “Javascript” spelling to be more appealing than the rather pedantic official version, but it is technically wrong, so in this tutorial we’ll stick with “JavaScript”, and be technically correct.
In order to give you the best broad-range introduction to programming with JavaScript, Learn Enough JavaScript to Be Dangerous uses four main methods:
- Front-end JavaScript programs running in the user’s browser
- An interactive prompt with a Node.js Read-Evaluate-Print Loop (REPL)
- Standalone JavaScript files (including the Node Package Manager)
- Shell scripts (as introduced in Learn Enough Text Editor to Be Dangerous)
We’ll begin our study of JavaScript with four variations on the time-honored theme of a “hello, world” program, a tradition that dates back to the early days of the C programming language. The main purpose of “hello, world” is to confirm that our system is correctly configured to execute a simple program that prints the string hello, world! (or some close variant) to the screen. By design, the program is simple, allowing us to focus on the challenge of getting the program to run in the first place.
Since the original and still most common application of JavaScript is to write programs that execute on the Web, we’ll start by writing (and deploying!) a program to display a greeting in a web browser. We’ll then write a series of three programs using the JavaScript execution system Node.js: first in the Node REPL, then in a JavaScript library file called hello.js, and finally in an executable shell script called hello.
Throughout what follows, I’ll assume that you have access to a Unix-compatible system like macOS or Linux (including the Linux-based Cloud9 IDE, as described in the free tutorial Learn Enough Dev Environment to Be Dangerous). If you use the cloud IDE, I recommend creating a development environment called javascript-tutorial. The cloud IDE uses the Bash shell program by default, and Mac users can use whichever shell program they prefer—this tutorial should work with either Bash or the default Z shell (Zsh). See “Using Z Shell on Macs with the Learn Enough Tutorials” for more information.
1.2 JS in a web browser
Even though JavaScript is increasingly used as a general-purpose programming language, it still thrives in its native habitat of the web browser. Accordingly, our first “hello, world” program involves displaying a notification, or alert, created by JavaScript code on a web page.
We’ll begin by making a directory for this tutorial using mkdir -p (which creates intermediate directories as necessary),3 along with an HTML index file using the touch command:4
$ mkdir -p ~/repos/js_tutorial
$ cd ~/repos/js_tutorial
$ touch index.html
Next, we’ll follow the practice introduced in Learn Enough Git to Be Dangerous and put our project under version control with Git:
$ git init
$ git add -A
$ git commit -m "Initialize repository"
At this point, we’re ready to make our first edit. We’ll start in familiar territory by adding a simple HTML skeleton (without JavaScript) to our index page, as shown in Listing 1.1. The result appears in Figure 1.3.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Learn Enough JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, world!</h1>
<p>This page includes an alert written in JavaScript.</p>
</body>
</html>
This page’s paragraph is a little lie, because we haven’t yet added any JavaScript. Let’s change that by putting in a script tag containing a single command:
<script>
alert("hello, world!");
</script>
Here we’ve used alert, which is a JavaScript function, a piece of code that takes in arguments and performs some task with them. As shown in Figure 1.4, the anatomy of a JavaScript function call is the function’s name, an open parenthesis, zero or more arguments, a closing parenthesis, and a semicolon to end the line. (We’ll learn more about functions, including how to define our own, in Chapter 5.)
In this case, alert takes in a string (Chapter 2) and displays it as an alert in the browser. To see this in action, let’s add the alert code to our index page, as shown in Listing 1.2. Technically, we could place the script tag anywhere on our page, but it’s conventional to place it in the head of the document (especially when including external JavaScript files, as we’ll see in Section 5.2).
index.html
<!DOCTYPE html>
<html>
<head>
<title>Learn Enough JavaScript</title>
<meta charset="utf-8">
<script>
alert("hello, world!");
</script>
</head>
<body>
<h1>Hello, world!</h1>
<p>This page includes an alert written in JavaScript.</p>
</body>
</html>
Upon refreshing the page, our browser now displays a friendly greeting (Figure 1.5).
1.2.1 Deployment
As a final step, let’s deploy our incredibly fancy JavaScript app to the live Web. Our technique is the same one covered in Learn Enough Git to Be Dangerous, Learn Enough HTML to Be Dangerous, and Learn Enough CSS & Layout to Be Dangerous, namely, a free site hosted at GitHub Pages.
Deploying at even this early stage is a powerful proof-of-concept—all kidding aside about our “incredibly fancy” app, we really are deploying a live website, which was an enormously difficult step only a few years ago, and yet now we can do it in seconds.
First, let’s commit the changes made in Listing 1.2:
$ git commit -am "Add a JavaScript 'hello, world'"
The next step is to create a new remote repository at GitHub, as shown in Figure 1.6. (If any of these steps are unfamiliar, consult Learn Enough Git to Be Dangerous for details.)
Next, configure your local system with the remote repository and push it up (taking care to fill in <username> with your GitHub username and using a GitHub personal access token when prompted for a password) and then push it up:
$ git remote add origin https://github.com/<username>/js_tutorial.git
$ git push -u origin main
Because videos are relatively hard to update, the screencasts that accompany this book use master, which was the default branch name for the first 15+ years of Git’s existence, but the text has been updated to use main, which is the current preferred default. See the Learn Enough blog post “Default Git Branch Name with Learn Enough and the Rails Tutorial” for more information.
To complete the deployment, all we need to do is edit the Settings (Figure 1.7) and configure our site to be served off the main branch by GitHub Pages, as shown in Figure 1.8 and Figure 1.9.
main branch.
With that, you can now visit your site at the following URL:5
https://<username>.github.io/js_tutorial
The result should be the same “hello, world!” greeting seen in Figure 1.5, except now on the live Web (Figure 1.10). “It’s alive!” (Figure 1.11).6
1.2.2 Exercises
- What happens if you put a second alert after the first one?
1.3 JS in a REPL
Our next two closely related examples of a “hello, world” program involve a Read-Eval-Print Loop, or REPL (pronounced “repple”). A REPL is a program that reads input, evaluates it, prints out the result (if any), and then loops back to the read step. Most modern programming languages provide a REPL, and JavaScript is no exception. In fact, as hinted above, it actually provides two.
1.3.1 Browser console
Our first example of a REPL is the browser console, which is available in most modern browsers as part of the standard suite of developer tools. Whether these tools are available by default depends on the browser you use; they’re included automatically in Google Chrome, for example, but in Safari they have to be installed. Use your technical sophistication (Box 1.1) to figure out the setup for your browser of choice.
The developer tools can typically be accessed by right-clicking (or Ctrl-clicking) in your browser window and selecting Inspect Element to open the web inspector (Figure 1.12). The result should look something like Figure 1.13.
At this point, we’re ready to access the console by clicking on the corresponding tab in the developer tools, as shown in Figure 1.14. As we’ll see in Section 5.2, the console is a valuable debugging tool, as it has access to the full DOM and other aspects of our application’s environment, as well as displaying any warnings or errors that might affect our application. In particular, note that Figure 1.14 shows a warning (regarding a missing favicon.ico file); knowing when you can and can’t safely ignore such warnings is a hallmark of technical sophistication. (In this case, it’s safe to ignore. In addition, your setup may or may not show the exact same error. Is that a problem?)
We’re finally ready to write our “hello, world” program using the console REPL. Our method is to use console, which is a JavaScript object that represents the console and its associated data, functions, etc. In particular, the console object has a function called log, which prints out (“logs”) its argument to the screen. We can access it using a “dot” notation that has become standard across a wide variety of object-oriented languages, as seen in Listing 1.3.
> console.log("hello, world!");
In the context of objects, a function like log called using the dot notation is often called a method.
At this point, you should type the console.log command into your browser console, noting that the > in Listing 1.3 represents the console prompt itself, and shouldn’t be typed literally. The result should resemble Figure 1.15. (We’ll explain the meaning of undefined in Section 2.3.)
Alert readers (no pun intended) might have noticed that the command in Listing 1.3 includes a terminating semicolon (Figure 1.4), whereas the command shown in Figure 1.15 doesn’t. This discrepancy is included in order to show that the two commands work the same, and it is common to omit the semicolon when using an interactive console. For consistency, we’ll generally include the semicolon throughout the rest of this tutorial (even in consoles), but it’s good to be aware of both conventions in case you see something different in other people’s code.
1.3.2 Node prompt
Every web browser in the known Universe can execute JavaScript programs, but part of treating JavaScript as a general-purpose programming language means running it at the command line as well. This means installing and using a command-line program capable of evaluating JavaScript programs, and nowadays the most popular choice is abundantly clear: Node.js (usually pronounced “node jay-ess”, and often called “Node” for short).
It’s possible that Node.js is already installed on your system. The easiest way to check is to use the which command (as described in Learn Enough Command Line to Be Dangerous):
$ which node
/usr/local/bin/node
If the path to a node executable is displayed, you’re good to go.
If Node isn’t present on your system, you should install it at this point. If you’re using a Macintosh with Homebrew installed, you can run
$ brew install node
to get the latest version. If you already have it installed, run
$ brew upgrade node
instead.
Otherwise, go to the Node.js website and follow the download and installation instructions for your system.
Once it’s installed, running the Node.js REPL is easy—just run the node command at the command line, as seen in Listing 1.4.
$ node
>
As with the browser console, > represents the Node prompt, and like the console it allows us to run commands interactively. (For simplicity, we’ll sometimes use “console” to refer either to the browser console or to the Node REPL.) In particular, to replicate the “hello, world” program from Listing 1.3, we can simply type the same command at the Node prompt, as follows:
> console.log("hello, world!");
hello, world!
(Depending on your system, you might see undefined appear as well; we’ll discuss this detail in Section 2.3.)
That’s it! In both the browser console and Node prompt, we can print “hello, world!” with this single command:
> console.log("hello, world!");
1.3.3 Exercises
- What happens if you run an
alertin the browser console? What about in the Node console?
1.4 JS in a file
As convenient as it is to be able to explore JavaScript interactively, most Real Programming™ takes place in text files created with a text editor. In this section, we’ll show how to create and execute a JavaScript file with the same “hello, world” program we’ve discussed in the previous two sections. The result will be a simplified prototype of the reusable JavaScript files we’ll start learning about in Section 5.2.
We’ll start by creating a JavaScript file (with a .js file extension) for our hello program:
$ touch hello.js
Next, using our favorite text editor, we’ll fill the file with the contents shown in Listing 1.5. Note that the code is exactly the same as in Listing 1.3 and subsequent examples, with the difference being that in a JavaScript file there’s no command prompt >.
hello.js
console.log("hello, world!");
At this point, we’re ready to execute our program using the same node command we used in Listing 1.4 to bring up the Node prompt. The only difference is that this time we include an argument with the name of our file:
$ node hello.js
hello, world!
As before, the result is to print “hello, world!”, this time to the terminal screen. (Inside the program, the return value of console.log is undefined as before, but it’s not displayed since, unlike with interactive prompts, return values aren’t displayed by command-line programs.)
Although this example is simple, it’s a huge step forward, as we’re now in the position to write JavaScript programs much longer than could comfortably fit in an interactive console or Node session.
1.4.1 Exercises
- What happens if you give
console.logtwo arguments, as in Listing 1.6?
hello.js
console.log("hello, world!", "how's it going?");
1.5 JS in a shell script
Although the code in Section 1.4 is perfectly functional, when writing a program to be executed in the command line shell it’s often better to use an executable script of the sort discussed in Learn Enough Text Editor to Be Dangerous. Now that JavaScript can be used so effectively outside the browser, it has joined more traditional “scripting languages” like Perl, Python, and Ruby as an excellent choice for writing such shell scripts.
Let’s see how to make an executable script using Node. We’ll start by creating a file called hello:
$ touch hello
Note that we didn’t include the .js extension—this is because the filename itself is the user interface, and there’s no reason to expose the implementation language to the user. Indeed, there’s a reason not to: by using the name hello, we give ourselves the option to rewrite our script in a different language down the line, without changing the command our program’s users have to type. (Not that it matters in this simple case, but the principle should be clear. We’ll see a more realistic example in Section 10.3.)
There are two steps to writing a working script. The first is to use the same command we’ve seen before (Listing 1.5), preceded by a “shebang” line telling our system to use node to execute the script.
The exact shebang line is system-dependent; you can find the proper executable path for your system by running the which command:
$ which node
/usr/local/bin/node
Using this command for the shebang line in the hello file gives the shell script shown in Listing 1.7.
hello
#!/usr/local/bin/node
console.log("hello, world!");
We could execute this file directly using the node command as in Section 1.4, but a true shell script should be executable without the use of an auxiliary program. (That’s what the shebang line is for.) Instead, we’ll follow the second of the two steps mentioned above and make the file itself executable using the chmod (“change mode”) command combined with +x (“plus executable”):
$ chmod +x hello
At this point, the file should be executable, and we can execute it by preceding the command with ./, which tells our system to look in the current directory (dot = .) for the executable file. (Putting the hello script on the PATH, so that it can be called from any directory, is left as an exercise.) The result looks like this:
$ ./hello
hello, world!
Success! We’ve now written a working JavaScript shell script suitable for extension and elaboration. As mentioned briefly above, we’ll see an example of a real-life utility script in Section 10.3.
Throughout the rest of this tutorial, we’ll mainly use the Node REPL for initial investigations, but the eventual goal will almost always be to create a file (either pure code or HTML) containing JavaScript.
1.5.1 Exercises
- By moving the file or changing your system’s configuration, add the
helloscript to your environment’s PATH. (You may find the steps in Learn Enough Text Editor to Be Dangerous helpful.) Confirm that you can runhellowithout prepending./to the command name.
