One last important note about this chapter. This is the lone chapter in the book in
which the code samples will be written in ES5 syntax, not ES6 (Harmony). This is to
ensure that the code samples will run, even if you aren’t using a browser that has
implemented ES6. In the following chapters, we will talk about how to write code in
ES6 and “transcompile” it so that it will run on legacy browsers. After we cover that
ground, the rest of the book will use ES6 syntax. The code samples in this chapter are
simple enough that using ES5 doesn’t represent a significant handicap.
For this exercise, you’ll want to make sure the files you create are in
the same directory or folder. I recommend that you create a new
directory or folder for this example so it doesn’t get lost among
your other files.
Let’s start with the JavaScript file. Using a text editor, create a file called main.js. For
now, let’s just put a single line in this file:
console
.
log
(
'main.js loaded'
);
Then create the CSS file, main.css. We don’t actually have anything to put in here yet,
so we’ll just include a comment so we don’t have an empty file:
/* Styles go here. */
Then create a file called index.html:
<!doctype html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"main.css"
>
</
head
>
<
body
>
<
h1
>My first application!</
h1
>
<
p
>Welcome to <
i
>Learning JavaScript, 3rd Edition</
i
>.</
p
>
<
script
src
=
"main.js"
></
script
>
</
body
>
</
html
>
While this book isn’t about HTML or web application development, many of you are
learning JavaScript for that purpose, so we will point out some aspects of HTML as
they relate to JavaScript development. An HTML document consists of two main
parts: the head and the body. The head contains information that is not directly dis‐
played in your browser (though it can affect what’s displayed in your browser). The
body contains the contents of your page that will be rendered in your browser. It’s
important to understand that elements in the head will never be shown in the
browser, whereas elements in the body usually are (certain types of elements, like
<script>
, won’t be visible, and CSS styles can also hide body elements).
6 | Chapter 1: Your First Application
