Previous: What is JavaScript? | Next: Creating Functions in JavaScript |
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 canincluding Internet Explorer, Netscape, and othersin 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 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.
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 pageparticularly the event handling bitsmay have to change before the Web can go fully XHTML Strict.
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.
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.
<!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:
The <script> container has been added in the <body> of the document. That's typical when you're using the script to create something within the document's body, instead of defining functions, which happens in the <head>. In more complicated scripts, you'll likely have <script> containers in both sections.
Within the document.writeln() command, the closing </h1> tag actually looks like <\/h1>. That's because the closing / would otherwise be misinterpreted by the document.writeln() method as the beginning of a special character, such as the newline (/n) character. So, you need to escape the forward slash using the backslash.
Because you're using the <meta> element to specify the scripting content, you don't need a type attribute for <script>. However, the language attribute is still there for backward compatibility.
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 |