console
.
log
(
"echo"
);
// prints "echo" to the console
/*
In the previous line, everything up to the double forward slashes
is JavaScript code, and must be valid syntax. The double
forward slashes start a comment, and will be ignored by JavaScript.
This text is in a block comment, and will also be ignored
by JavaScript. We've chosen to indent the comments of this block
for readability, but that's not necessary.
*/
/*Look, Ma, no indentation!*/
Cascading Style Sheets (CSS), which we’ll see shortly, also use JavaScript syntax for
block comments (inline comments are not supported in CSS). HTML (like CSS)
doesn’t have inline comments, and its block comments are different than JavaScript.
They are surrounded by the unwieldy
<!--
and
-->
:
<
head
>
<
title
>HTML and CSS Example</
title
>
<!-- this is an HTML comment...
which can span multiple lines. -->
<
style
>
body
:
{
color
:
red
; }
/* this is a CSS comment...
which can span multiple lines. */
</style>
<
script
>
console
.
log
(
"echo"
);
// back in JavaScript...
/* ...so both inline and block comments
are supported. */
</
script
>
</
head
>
Getting Started
We’re going to start by creating three files: an HTML file, a CSS file, and a JavaScript
source file. We could do everything in the HTML file (JavaScript and CSS can be
embedded in HTML), but there are certain advantages to keeping them separate. If
you’re new to programming, I strongly recommend that you follow along with these
instructions step by step: we’re going to take a very exploratory, incremental approach
in this chapter, which will facilitate your learning process.
It may seem like we’re doing a lot of work to accomplish something fairly simple, and
there’s some truth in that. I certainly could have crafted an example that does the
same thing with many fewer steps, but by doing so, I would be teaching you bad hab‐
its. The extra steps you’ll see here are ones you’ll see over and over again, and while it
may seem overcomplicated now, you can at least reassure yourself that you’re learning
to do things the right way.
Getting Started | 5
