It is time to write your fi rst JavaScript. In keeping with a long programming tradition, the objective of your fi rst script is to write “Hello, world!” to a document object. Grant-ed this JavaScript isn’t the most exciting to write, but the more exciting JavaScripts are yet to come. For now, it is important that you learn how to write a basic JavaScript.
A JavaScript consists of JavaScript statements that are placed within the
<script> HTML tags in a web page. This means that you don’t need any special tools to write a JavaScript. You can use the same tools to write a JavaScript that you use to write your web page.
You place the <script> tag containing your JavaScript in one of two places within the web page—either within the <head> tags or within the <body> tags.
Developers call scripts within the <head> tag header scripts and scripts placed within the <body> tag body scripts. You’ll learn more about the differences be-tween header and body scripts later in this book.
Now for the moment that you’ve been waiting for. You’ll create the web page shown in Figure 1-1.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world! JavaScript</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
document.write('Hello, world!') </script>
</body>
</html>
No doubt most of this code looks familiar, since you’ve probably written some-thing similar to it many times before. The fi rst two lines are standard in every web page. Next is the <head> tag that contains the title of the web page. This is fol-lowed by the <body> tag.
ch01.indd Sec1:7
ch01.indd Sec1:7 4/26/2005 8:50:00 AM4/26/2005 8:50:00 AM
Within the <body> tag is the <script> tag that contains the one-line Java- Script. The <script> tag is very similar to other HTML tags in that it has an opening (<script>) tag and ending (</script>) tag. The <script> tag also has two HTML attributes: language and type.
The <script> tag signals the browser that a script is coming—not HTML. The browser processes scripts differently than HTML. The language attribute is as-signed the value "Javascript", which informs the browser that the scripting language is JavaScript. The type attribute tells the browser that the script is in plain text and that the text is organized in the format of a JavaScript. This simply gives the browser information on how to read the JavaScript code.
Everything between the opening <script> and ending </script> tags is the script and must be written using JavaScript. This example is a one-line script. First, the line is a JavaScript statement. A statement is like a sentence that tells the browser to do something. Next, you notice the dot syntax. This is a clue telling you that the JavaScript statement contains an object, which in this case is named document.
You also notice something on the right side of the dot. Knowing that the left side of the dot is the name of an object, you probably fi gure that the right side of the dot must be either a property or method of the object. In this example, it’s a method.
The clue that gives this away are the parentheses—and you read about the write() method previously in this chapter.
NOTE
Figure 1-1 Your fi rst JavaScript displays “Hello, world!” in a web page.
ch01.indd Sec1:8
ch01.indd Sec1:8 4/26/2005 8:50:00 AM4/26/2005 8:50:00 AM
The name of the method is write(), which describes what the method does—it writes something to the document. The text 'Hello, world!' appears between the parentheses. This is the information that is written to the document. You must enclose the information within quotation marks; otherwise, the browser will think you are referring to a JavaScript instruction. JavaScript can use single or double quo-tations.
Save this web page to your hard disk, and then open it in your browser. You’ve now successfully written your fi rst JavaScript program. If you don’t see this mes-sage displayed on the web page, one or two things are likely to be the problem:
First, make sure that the entire HTML and JavaScript code is written exactly the way that you see it in the preceding listing. Sometimes a typographical error slips into the code and confuses the browser. Second, make sure that the JavaScript op-tion on your browser isn’t turned off. If it is, turn it on and reload the web page.
Usually, JavaScript is enabled as the default for Microsoft Internet Explorer and Netscape Navigator. You can determine whether JavaScript is enabled and how to enable it if it is disabled.
For Microsoft Internet Explorer, follow these steps:
1. Choose Tools | Internet Options.
2. Select the Security tab.
3. Click the Custom Level button.
4. In the Security Settings dialog box, scroll down to the Scripting area and fi nd Active Scripting.
5. Select Enable.
6. Click the OK button, and then click OK again.
For Netscape, follow these steps:
1. Choose Edit | Preferences.
2. Double-click Advanced Category.
3. Select Scripts & Plug-ins.
4. Select Enable JavaScript options.
5. Click OK.
NOTE
NOTE If you are using a different version of Netscape Navigator, keep in mind the steps you take may differ somewhat.
ch01.indd Sec1:9
ch01.indd Sec1:9 4/26/2005 8:50:01 AM4/26/2005 8:50:01 AM
“Old Timers” Don’t Like JavaScript
Most browsers today have no problem running a JavaScript, assuming that the Ja-vaScript option is turned on. However, you never know if someone some place on the Internet hasn’t upgraded to a new browser or still uses a very old browser.
Microsoft Internet Explorer 3 and earlier versions, Netscape 1.x, and America Online versions 3 and earlier can’t run JavaScript because they don’t know how to interpret JavaScript code. Instead, these browsers display the JavaScript instead of running it. This means that your JavaScript is displayed for all to see.
You can hide your JavaScript from these “old timers” by placing your script in an HTML comment section of a web page. You’ll recall from when you learned HTML that a browser treats anything between <!-- and --> as a comment.
Browsers that are JavaScript-enabled recognize and run a JavaScript that is con-tained within an HTML comment. Older browsers simply ignore the JavaScript, thinking that the script is a comment.
The following listing illustrates how to hide your JavaScript from older brows-ers. Notice that the HTML comment is placed inside the <script> and
</script> tags and around the JavaScript code. Some rookie JavaScript devel-opers place the HTML comment outside the <script> tags. If you do this, the browser assumes your JavaScript is an HTML comment and will ignore everything within the HTML comment. Simply said, your JavaScript won’t run.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hiding Hello world! JavaScript</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
document.write('Hello, world!') -->
</script>
</body>
</html>
ch01.indd Sec1:10
ch01.indd Sec1:10 4/26/2005 8:50:01 AM4/26/2005 8:50:01 AM