JavaScript Basics

JavaScript can be difficult to learn for new programmers. There are several traits to the language that lend to this difficulty, but perhaps the most frustrating part for beginners is that JavaScript is case sensitive. Almost all JavaScript programmers have gone through the growing pains of pulling their hair out because of a lowercase letter where there should have been an uppercase one or vice versa. Debugging problems because of the wrong case can be tough. Fortunately, FrontPage provides IntelliSense for JavaScript, making it much easier to avoid many of the problems new programmers encounter.

For more information on using IntelliSense, see "Adding Tag Attributes Using IntelliSense," p. 522.

For more information on debugging JavaScript code, see "Front and Center: Debugging," p. 494.

Adding JavaScript to a Web Page

JavaScript can be added to a Web page either right within the page's HTML code or in an external script file with a .js file extension. To add JavaScript to a Web page, you use the <script> tag. JavaScript code can consist of standalone code sections that are executed as soon as the browser encounters them and JavaScript functions that are executed only when they are explicitly called.

A function is a section of code that performs an action. To run the code in a function, you simply use the function name. The following code section defines a JavaScript function called writeDateTime in a Web page. The function is called when the page is loaded by specifying the function name in the onload event of the <body> tag.

 <html> <head>   <script language="javascript">   <!--     function writeDateTime() {       document.write(Date());       return true;     }   //-->   </script> </head> <body onload="writeDateTime();"> </body> </html>

When this Web page is opened in a Web browser, the current date and time are displayed as shown in Figure 24.1. This happens because the onload attribute of the <body> tag calls the writeDateTime JavaScript function. We'll discuss the details of the function later in this chapter.

Figure 24.1. The output of the `writeDateTime()` JavaScript function.

graphics/24fig01.gif

Notice that the script is surrounded by HTML comment tags . These are inserted so that browsers that cannot process JavaScript will ignore the script. Modern browsers have no problems processing JavaScript code, but some older browsers do not understand JavaScript. By enclosing the script in HTML comment tags, you ensure that your page will work correctly for everyone viewing it.

Linking to an External Script File

JavaScript can also be included in an external file and linked to a Web page with the <script> tag. The following code calls the same JavaScript function as the previous example, but it uses an external script file:

 <html> <head>   <script language="javascript" src="/books/2/138/1/html/2/jscript.js">   </script> </head> <body onload="writeDateTime();"> </body> </html>

The jscript.js file contains the JavaScript function that is called in the onload attribute of the <body> tag. The code inside of jscript.js is as follows:

 function writeDateTime() {   document.write(Date()); }

Note that the jscript.js file does not contain any HTML code, including the <script> tag. It only contains JavaScript code.

There are benefits to including your scripts in a separate file. The primary benefit is that it is very easy to reuse the script in many files without duplicating the code in each file. This also makes it extremely easy to change the script if needed. If you include the script inside the HTML files, a change in the script has to be made in every HTML file including that script. If the script is inside a .js file, the script only needs to be changed in the .js file. All HTML files that link to that script will then run the updated script automatically.

Adding Inline JavaScript

As mentioned earlier, JavaScript can also be entered as standalone code instead of inside a function. When JavaScript is entered into a page using this method, the code is executed as soon as it is encountered. The following code produces the same output as the code you've seen previously, but it does so with a standalone code segment instead of a JavaScript function:

 <html> <head> </head> <body>   <script language="javascript">   <!--     document.write(Date());   //-->   </script> </body> </html>

Notice that in this example, there is no line declaring a JavaScript function. Instead, only the code inside the writeDateTime function is included. In the previous example, in order for the code to execute, you had to call the writeDateTime function from the onload attribute of the <body> tag. In this example, no function call is required because the JavaScript code is not within a function. As you can see, placing JavaScript code inside a function allows you to control when that code is run.

TIP

Because JavaScript inside a function does not run until the function is called, the Web browser will not inform you of any errors in that code until you call the function. Therefore, when you are testing pages with JavaScript functions in them, make sure that you call all of your functions during testing.

Adding JavaScript to a Web Page

Figure 24.1. The output of the writeDateTime() JavaScript function.

Linking to an External Script File

Adding Inline JavaScript

Figure 24.1. The output of the `writeDateTime()` JavaScript function.