Javascript Made Easy: Your First Script

Email a friend

To

From

Thank you

Sorry

In my
last column, I wrote about what
JavaScript is, and what it can and can't do. This time around, it's time to
actually start working with code.

It's a long-standing tradition in
the coding world that the first thing you write in any new programming language
should always display "Hello, World!" I'm not out to upset tradition here, so
that's what we'll start with, too. Running the script below will display that
same classic phrase on your very own Web page.

If you're familiar with HTML tags, most of this should look pretty familiar. You
can skip to
later in the
article
. For those who aren't in the know about HTML, I'll start from the top.

<html>

This tag tells the browser that what follows is
HTML code, which the browser should understand. Browsers tell the difference
between the tags on your page and text that should be displayed by surrounding
the tag with angle brackets: < and >. Anything inside these characters is a
command to the browser.

<head>

This starts the
head
section of the HTML
page. Here's where things (such as the title of the page) are defined once for
the entire page. Most of our future scripts will be put into the head area.

<title>
My first script
</title>

These lines tell the browser the title of the page: "My first script." The title
section is enclosed within beginning and ending

<title>

tags.
An ending tag looks just like a beginning tag, with one difference: it starts
with

</

instead of

<

.

</head>

And so ends the
head
part of the HTML page. In
the same way that

</title>

ended the title section,

</head>

ends the head section.

<body>

As you might have guessed by now, this tag starts the
body section of the HTML page. This area contains everything: all the text and
images that are displayed on the page itself. In this particular case, our goal
is to write text into the Web page, so our script goes into the body area.

tag tells the browser that what follows (until
the ending tag) is a script. If a browser doesn't understand JavaScript, it's
supposed to just ignore everything inside the

<script>

tags.

There are two more items inside this tag; they're called
attributes
. In
this case, they're the language and type attributes of the script tag, and
they're required by the
W3C
(the
World Wide Web Consortium, who defines HTML) in order for this to be a valid HTML
page. They're each assigned a value, and together they tell the browser that it
should expect the next few lines to be JavaScript text.

<!-- Hide script from older browsers

Remember, I just said
that browsers that don't understand JavaScript are supposed to skip everything
inside the

<script>

tags. Well, unfortunately, some don't.
Some of them have the bad habit of assuming that everything inside these tags is
text that you want to display in the browser window. The result, as you might
expect, is ugly. Really ugly.

This line is for those browsers. It starts off by indicating a long-form HTML
comment, using

<!--

. If the browser thinks that the comment is HTML, it
will ignore everything until it sees the end of this comment. And that's what you
want to happen should your JavaScript encounter such a browser.

The comment should always be the very first line right after the

<script>

tag, so it doesn't try to read the JavaScript.
However, for smarter browsers that understand that it's in the middle of some
JavaScript, this same line is just a single line comment. JavaScript will ignore
everything on this line until the first hard return.

document.write("Hello, World!")

Here's the line of actual JavaScript. It calls the
write()
method of the
document
object, and passes it the phrase "Hello, World!" as a parameter.

OK, let's try that again, in English this time.

We start off with something that JavaScript calls a
document
. Put simply,
a document is just a Web page. Elements that JavaScript understands are called
objects
, so

document

is an object.

If we want to write something on this Web page, the command is called
write
. A command that does something is called a
method
, and
methods are applied to objects. You can always tell a method because it's
followed by a set of parentheses. If it helps, you can think of objects as nouns
and methods as verbs, and when you put the two together, you can make something
happen.

JavaScript uses something called
dot syntax
to put its pieces together.
That means that objects and their associated methods are separated by periods
(dots). So when you see

document.write()

, you know that the
write()
method is associated with the
document
object.

So, now that we're writing something, what are we going to write? That's where
those parentheses come in. Whatever is inside the parentheses will be written out
to our Web page, and in this case that's "Hello, World!" Anything can be given to
(
passed to
)

write()

, from a piece of text to another object
entirely. In order for JavaScript to know that we want to write text and not
something else, we put the text inside quotation marks (straight ones, because
browsers don't understand curly quotes). Whatever's passed to

write()

is
known as a
parameter
.

So, once again, and you'll probably understand it this time: JavaScript calls the
write()
method of the
document
object, then passes it the phrase
"Hello, World!" as a parameter. And when that's done, you'll see the words
written inside your browser window.

// End hiding script from old browsers -->

Here's where those older browsers that don't understand JavaScript pick up again. The first two
characters,

//

, are another way of telling JavaScript to ignore everything
on this line as a comment. But those older browsers are still looking for the
ending half of that long-form comment, and that's what this line ends with. As
long as this is the very last line before the

</script>

tag,
everything inside will be seen as just one big HTML comment.

</script>

As you'd expect by now, this is the end of the
script.

</body>

Here's the end of the
body
section.

</html>

And here's the end of the entire Web page. This
should be the very last bit of text on your HTML page.

By the way, how you indent your code doesn't matter -- in fact, you don't have to
indent it at all. I've done it in this lesson simply to make it easy to see where
tags begin and end. I recommend that you use a similar style in your own scripts,
as it's very helpful when you're trying to figure out where you've made a
mistake.

Wow -- all that just to put a couple of words on the page? Actually, although
this particular example may not accomplish much by itself, it does help to
demonstrate a large number of important concepts. You'll see these same concepts
being used over and over in upcoming JavaScript columns.

DORI SMITH is co-author of the best-selling
JavaScript for the WWW: Visual
QuickStart Guide, 3rd Edition
and author of
Java for the WWW: Visual
QuickStart Guide
. In addition to writing, she has been programming for more
than twenty years and is a frequent speaker at industry conferences.