3
You will learn more about the difference between a function and a method in
In the head, we have the line
<link rel="stylesheet" href="main.css">
; this is
what links the currently empty CSS file into your document. Then, at the end of the
body, we have the line
<script src="main.js"></script>
, which is what links the
JavaScript file into your document. It may seem odd to you that one goes in the head
and the other goes at the end of the body. While we could have put the
<script>
tag
in the head, there are performance and complexity reasons for putting it at the end of
the body.
In the body, we have
<h1>My first application!</h1>
, which is first-level header
text (which indicates the largest, most important text on the page), followed by a
<p>
(paragraph) tag, which contains some text, some of which is italic (denoted by the
<i>
tag).
Go ahead and load index.html in your browser. The easiest way to do this on most
systems is to simply double-click on the file from a file browser (you can also usually
drag the file onto a browser window). You’ll see the body contents of your HTML file.
There are many code samples in this book. Because HTML and
JavaScript files can get very large, I won’t present the whole files
every time: instead, I will explain in the text where the code sample
fits into the file. This may cause some trouble for beginning pro‐
grammers, but understanding the way code fits together is impor‐
tant, and can’t be avoided.
The JavaScript Console
We’ve already written some JavaScript:
console.log('main.js loaded')
. What did
that do? The console is a text-only tool for programmers to help them diagnose their
work. You will use the console extensively as you go through this book.
Different browsers have different ways of accessing the console. Because you will be
doing this quite often, I recommend learning the keyboard shortcut. In Firefox, it’s
Ctrl-Shift-K (Windows and Linux) or Command-Option-K (Mac).
In the page in which you loaded index.html, open the JavaScript console; you should
see the text “main.js loaded” (if you don’t see it, try reloading the page).
console.log
is a method
that will print whatever you want to the console, which is very helpful
for debugging and learning alike.
One of the many helpful features of the console is that, in addition to seeing output
from your program, you can enter JavaScript directly in the console, thereby testing
The JavaScript Console | 7
