Programming Environment

To work through this curriculum, you will need to have a way to write and run Javascript programs. Javascript programs can be run in various ways, but the most common way is to run them with a web browser like Firefox or Chrome.

In order to run a Javascript program with a web browser, you need a small page that tells the browser what to do. Browsers read HTML pages that tell them not only what text and images to display on the screen, but also any Javascript that should be run.

To try examples in this text or write your own programs, you should create two files. You should do this with a Text Editor, which is like a word processor but for programs. A good (mostly) free one that runs on Macs, Windows, and Linux is called Sublime Text (mostly free means that it costs money, but it has a free trial that lasts forever).

Create a folder where you can hold all the programs you will write throughout this curriculum; name the folder tlcjs. Then open up Sublime Text and create two new files in this folder: example1.html and example1.js. In "example1.html" — which is the file that you will open with your web browser — we need to tell the web browser that we want to run example1.js. We also want to include some pre-constructed functionality for this curriculum. All HTML files start with a declaration of the particular version of HTML that we are using. HTML dates back to 1993, and many changes have happened, but to tell the browser that we want the current version, we start every HTML file with:

<!doctype html>

(By the way, we recommend typing, not copying this, so you get the muscle memory of coding in your fingers!)

Then we need to start a section of the HTML document called the "body." There are different parts of HTML documents, but this is the only one we need:

<body id="tlc-body">

Finally, we need to tell the browser that we want to run some Javascript. There is a tag (the name for these words inside < and > that instruct the browser to do things) called script that tells the browser to run a particular javascript file. First, we need to include some common functionality (called libraries) - one that is a popular open source library, and one that was written for this curriculum:

  <script src="http://tlcjs.org/js/lodash.min.js"></script>
  <script src="http://tlcjs.org/js/tlc.js"></script>

Lastly, we need to tell it to include our example1.js file (which we haven’t written yet):

  <script src="example1.js"></script>

Now save that file. It should look something like (for why the <script> lines are further in than the rest, see the next section, "Indenting Code"):

<!doctype html>
<body id="tlc-body">
  <script src="http://tlcjs.org/js/lodash.min.js"></script>
  <script src="http://tlcjs.org/js/tlc.js"></script>
  <script src="example1.js"></script>

Indenting Code (and HTML)

You’ve probably noticed the spaces I put in front of some statements. In JavaScript, these are not required—the computer will accept the program just fine without them. In fact, even the line breaks in programs are optional. You could write a program as a single long line if you felt like it. The role of the indentation inside blocks is to make the structure of the code stand out. In complex code, where new blocks are opened inside other blocks, it can become hard to see where one block ends and another begins. With proper indentation, the visual shape of a program corresponds to the shape of the blocks inside it. I like to use two spaces for every open block, but tastes differ—some people use four spaces, and some people use tab characters.

Next open up the other file, example1.js. To start, we will use one of the simplest operations, print, which simply prints a value on the page. In this case, we’ll just print out the number 1:

print(1);

The ; at the end of the line is an indication that we’ve finished the current operation. We’ll get into this more later.

Now save that file too, and open up example1.html in a web browser. You can do this either by going to File->Open in the browser or dragging the file onto the application icon (if applicable). When you do that, you should see a page with 1 on it.

Your first program: a '1'!

Congratulations! You’ve just written your first program!