Previous: What is JavaScript? Next: Creating Functions in JavaScript

Entering Scripts in Your Web Documents

JavaScript is simply more plain-text markup that you're adding to your Web pages, so you don't need any new applications or tools. That said, a text-based editor that includes a JavaScript reference is always helpful, and you may want to have the JavaScript guide from Netscape open in a Web browser window as you work (it's at http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htm). It's also important to test your scripts carefully in as many Web browsers as you can—including Internet Explorer, Netscape, and others—in different version numbers, and for different computing platforms. If you're using JavaScript for business or organizational use, testing is very important.

JavaScript authoring involves a new element, the <script> element. Although the element is your typical XHTML container element, what isn't typical is that you'll need to hide the <script> element within your page.

The <script> Element and Script Hiding

The <script> element is used to add JavaScript commands to your HTML pages. This is done so that JavaScript-compatible browsers can determine which text is actually scripting commands and which text should be displayed in the browser window. <script> is a container that can accept the attribute type, which enables you to specify the scripting language used. (Generally, JavaScript is the default.)

NOTE

For backward compatibility, particularly for browsers that predate the 3.0 level of IE and Netscape, you may want to include the language="JavaScript" attribute as well. It isn't necessary for later browsers, but using both type and language is the most complete approach.

Here's how it works:

<script type="text/javascript">
Script function definitions
</script>

Although some old browsers that don't recognize JavaScript may just skip over the <script> element and its contents, it's also possible that an old browser will attempt to interpret your script commands or other text as HTML markup. So, you've got to be careful about how you hide the script stuff.

For non-JavaScript browsers, you do that hiding with the scripts commands within the opening and closing brackets of the HTML comment element:

<script type="text/javascript">
<!--
script commands
// -->
</script>

To keep scripts from causing trouble in older browsers, we've got to add all these special commands. You might have even noticed that you have to put two slashes (//) in front of the closing XHTML comment tag. This is because JavaScript will generate errors when it sees -->; it will try to interpret that as scripting code. (To JavaScript, that looks like two minus signs and a greater than sign.) So, you need to comment the comment, using JavaScript's comment command, which happens to be those two slashes.

Of course, the primary purpose of JavaScript comments is to include information about the script itself. Using JavaScript's two comment types, you can add information about how the script works and why it does what it does:

<script type="text/javascript">
<!--
script command  // A comment about this command
...script commands...
/* If you have longer comments, you can place then
between these two comment elements */
// this JavaScript comment precedes the HTML comment closing tag -->
</script>

The two types of comments are the single-line JavaScript comment and the multi-line comment. Single-line comments start with two forward slashes and must completely fit on a single line with a return at the end. Multi-line comments can be enclosed in an opening comment element (/*) and a closing comment element (*/), with as much space and comments inside as desired.

TIP

With all these comments and hiding, it's not a bad idea to create a template for starting out with your script-based pages. You can use that template to begin pages from scratch, or you can cut and paste all the default scripting comments and elements to get a head start.

Strict Versus Transitional

If you're hiding scripts within your Web document, you'll need to use the XHTML Transitional DTD. If you want to use the strict DTD with scripts, you can, but only if you link to your script's function definitions instead of embedding them in the page (more on that in a moment), or if you take an additional hiding step within the page.

The reason for this type of hiding is that certain common characters used in JavaScript are interpreted differently in XML. (And XHTML is HTML cast in XML, remember?) As a result, the characters < and & can be mistaken for XML items instead of the scripting elements they're intended to be. The solution is to include another layer of hiding to prevent an XML interpreter from interpreting the scripting as XML commands. Here's how:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Strict Scripting</title>

<script type="text/javascript">
<![CDATA[
 ...script commands...
]]>
</script>
</head>

In this case, the <![CDATA[ and ]]> tags are used to tell the XML parser to ignore what comes between them. At least, that's the official recommendation. The problem is that this method of hiding is still somewhat theoretical. It may be the desired approach for future Web browsers, but right now it simply doesn't work. So, using the strict DTD with the <script> element in your pages is tough.

If you really want to use the strict DTD, there is another solution. You can place the script function declarations (the script portions that appear in the <head> of your document) in a separate document and link to it. That would look something like

<head>
<title>Linking to JavaScript</title>
<script type="text/javascript" src="script_functions.js">
</script>
</head>

The document script_functions.jp would be a simple text file that starts with the first JavaScript command, just as if it were enclosed in the <script> container. This is by far the best way to get around all the scripting hiding issues.

NOTE

To avoid all this, you might want to simply use the transitional DTD on your JavaScript pages. (That's how I'll do it in examples throughout this chapter and the next two.) Also, be aware that at some point in the future, aspects of scripting on the page—particularly the event handling bits—may have to change before the Web can go fully XHTML Strict.

Script Meta Type and <noscript>

Technically, each instance of the <script> element should include a type attribute (although not all Web browsers require this to the letter). You can get around that, however, by declaring a default using the <meta> element in the <head> of your document:

<head>
<title>JavaScript By Default Page</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>

Doing this will be particularly important as you get deeper into scripting. JavaScript's event handlers (where a script function is called from within the Web page itself) don't allow you to specify script type, so they rely on the <meta> definition (or force the browser to guess) .

Finally, XHTML also offers the option of a <noscript> container that can be used within a <script> element to offer alternative text and markup for browsers that don't support scripting. That looks something like

<body>
<script type="text/javascript">
<!--
//<![CDATA[
 ...functions...
// ]]>
// -->
</script>
<noscript>
<p>It appears your browser doesn't support JavaScript. Please visit 
<a href="noscript.html">the no-script page</a> to see a non-JavaScript 
version of this page.</p>
</noscript>
</body>

Let's put it all together in a template and a quick example.

The "Hello World" Example

Whenever you learn a new programming language, traditionally the first example you encounter is a "Hello World" script or program. This Hello World example will show you the basics of the hiding and scripting commands and how the <script> elements work.

For the purpose of this example, you need to know one command you haven't been introduced to yet. It's document.writeln(), and it's called a method in JavaScript. A method is a function that's built into a particular object, enabling it to do something automatically. In this case, it can automatically "write" to the object "document." In other words, the method document.writeln() writes text to your Web page.

Listing 1 is a complete HTML document that includes some basic JavaScript.

Listing 1 Hello World Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<BODY>
<script language="JavaScript">
<!-- hide script
document.writeln("<h1>Hello World!<\/h1>")
// end hiding -->
</script>
<noscript>
<p>Your browser doesn't appear to support JavaScript.</p>
</noscript>
</body>
</html>

This example offers a few things worth discussing:

Save this document as something like helloworld.html and then open it using a Web browser. If your browser is capable of dealing with JavaScript, your output should look something like Figure 2. If it's not, you'll just see the <noframes> text.

Figure 2 Here's the result of the Hello World script in all its glory.

Previous: What is JavaScript? Next: Creating Functions in JavaScript