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" — 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:
(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:
Finally, we need to tell the browser that we want to run some
> that instruct the browser to do things) called
need to include some common functionality (called
libraries) - one
that is a popular open source library, and one that was written for
<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):
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)
Next open up the other file,
example1.js. To start, we will use one of the simplest operations,
; 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.
Congratulations! You’ve just written your first program!