JavaScript Example 1-1
"Hello World"

Click Here for Previous JavaScript Tutorial Home Click Here for Next

Purpose

Ever since Brian Kernighan and Dennis Ritchie wrote the first book on C, it has become customary to introduce a new programming language by explaining how to use it to print "Hello World". There are good reasons for this. In writing and executing such a seemingly simple program, one must deal with all the nuts and bolts of preparing the source code, submitting it to the compiler or interpreter, and viewing the output. It's a good place to start with JavaScript as well.

Source Code

The simplest JavaScript "Hello World" program is pretty much as follows:

1:   <script type="text/javascript">
2:   <!-- to hide script contents from old browsers
3:   document.write("Hello World!")
4:   // end hiding contents from old browsers  -->
5:   </script>

The essential element is line 3, the call to document.write(). We'll look at this in a little more detail later.

Lines 1 and 5 are the HTML tags (<script> ... </script>) that define what's between them as a script of some sort that is to be executed by your browser. HTML itself doesn't care what kind of script it is and other scripting languages besides JavaScript, e.g. VBScript or TCL, may be supported by a browser. In this case the type attribute of the SCRIPT tag declares the script to be JavaScript. These are called "client-side" scripts to distinguish them from "server-side" scripts that would be executed by the HTTP server before it delivers the document.

Note: You may see the language="JavaScript" attribute appearing in a SCRIPT tag. This is the proprietary Netscape style and has been deprecated by W3C in HTML 4. It should be sufficient to use the type attribute, but you may need to use the language attribute if you need to distinguish between JavaScript versions.

Lines 2 and 4 are very odd looking. Line 2 starts an HTML comment, which ends at the end of line 4. Thus everything between them looks like an HTML comment to browsers that don't support JavaScript. But a JavaScript interpreter will just ignore line 3, and will treat line 4 as a JavaScript comment because it starts with "//". Pretty clever, huh?

Putting JavaScript Code in the HTML Header

We'll examine each line of the program in due course, but first a word about placing the JavaScript code in your document. If you look at the very top of this page (you might have to scroll back), you should see the words "Hello World!" in the top line, before the title. That's because this page contains the JavaScript code shown above. The code is in the page header and was executed by your browser when the page was loaded. Because the code was executed in the page header, the "Hello World" appears before anything in the body of the page.

Here's how the code looks in the HTML header of this page:

<html>
  <head>
    <title>
      JavaScript Example 1 -- Hello World
    </title>
<script type="text/javascript">
    <!-- to hide script contents from old browsers
    document.write("Hello World!");
    // end hiding contents from old browsers  -->
</script>
  </head>
  <body>
  ... etc.

Putting JavaScript Code In the HTML Body

You can put JavaScript in the header of your HTML document, as we've just described, or in the body. In the HTML source of the next paragraph, the very same JavaScript code appears again. This time it is executed as part of the body of the document, so "Hello World" will appear in the body.

I said, " ".

Here's the HTML and JavaScript that created the paragraph above:

      <blockquote>I said, <i>"<script type="text/javascript">
        <!-- to hide script contents from old browsers
        document.write("Hello World!");
        // end hiding contents from old browsers  -->
        </script>"</i>.
      </blockquote>

Calling document.write()

According to Netscape's JavaScript Reference Manual, The document object, "Contains information about the current document, and provides methods for displaying HTML output to the user." The write() method simply takes a list of one or more expressions (separated by commas) and passes them to the HTML parser. In other words, you can generate plain text, HTML tags, even JavaScript code. In fact one could dynamically generate the entire displayed document.

Viewing Actual Document Source with Netscape

The following only applies to Netscape browsers. Try using your browser's "View Page Source" command on this document and look for the place where we used JavaScript to print "Hello World!" in the body. You should see something like this:

      <BLOCKQUOTE>
        I said, <I>"
Hello World!
        "</I>.
      </BLOCKQUOTE>

What happened to the JavaScript? You don't see it because Netscape is only showing you the HTML that it is displaying, not the raw document itself. If you're working with JavaScript code, there will be times when you'd like to see the actual source. Netscape lets you do this through its view-source: protocol. Try opening:

view-source:http://www.chipchapin.com/JavaScript/example1-01.html

Now you should get the raw source.

Using the NOSCRIPT Tag

Not all browsers support scripts. Or a browser may just not support JavaScript, or the user may have disabled JavaScript. For these reasons it's a good idea to give the browser some alternative content using NOSCRIPT. The idea is similar to using a NOFRAMES tag in an HTML document that uses frames.

The example below uses JavaScript, if available, to print a document's last modification date. But if JavaScript is not available it prints a manually maintained string that appears within the NOSCRIPT tags.

<script type="text/javascript">
  <!--
  lastmod = document.lastModified     // get string of last modified date
  lastmoddate = Date.parse(lastmod)   // convert modified string to date
  if(lastmoddate == 0){               // unknown date (or January 1, 1970 GMT)
     document.writeln("Last Modified: Unknown")
     } else {
     document.writeln("Last Modified: " + lastmod)
  }// -->
</script>
<noscript>
  Updated November 19, 2000
</noscript>

Putting JavaScript Code in a Separate File

It is possible to make reference to JavaScript code in a separate file instead of including it all in your HTML file. This is usually a good idea when you are sharing the same JavaScript code in multiple documents. The big advantage is that you only have to maintain the JavaScript in a single file, rather than editing each document. Think of it as an "include" directive (something we all wish was part of HTML anyway).

To load JavaScript from a separate file, one uses the src attribute with the SCRIPT tag.

<script type="text/javascript" src="myjava.js">
</script>

In the example above, notice the use of src="myjava.js". The src attribute defines the name of the source file to be read. Also notice the standard filename suffix ".js" for JavaScript files.

The JavaScript source file should consist only of legal JavaScript code and comments. For example, the following could be the contents of myjava.js:

// File: myjava.js
// Author: Chip Chapin
// Updated: 1/6/01
document.write("Hello from inside myjava.js")

Resources

Netscape JavaScript Developer's Guide
See Chapter 9, Embedding JavaScript in HTML.
Netscape JavaScript Reference Manual
Refer to the section describing the document object.
W3C HTML 4.01 Specification (December 24, 1999)
See Chapter 18 on Scripts.
Dr. Clue's JavaScript Tutorials
I found Dr. Clue's tutorials to be very helpful when I was getting started with JavaScript.
 
Click Here for Previous JavaScript Tutorial Home Click Here for Next