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.
<html> <head> <title> My first script </title> </head> <body> <script language="javascript" type="text/javascript"> <!-- Hide script from older browsers document.write("Hello, World!") // End hiding script from old browsers --> </script> </body> </html> 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.
If you are familiar with HTML tags , here’s where you should jump in again.
<script language="javascript" type="text/javascript">
The
<script>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
documentis 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.