InformIT: Sams Teach Yourself JavaScript in 24 Hours > How JavaScript Fits into a Web Page

How JavaScript Fits into a Web Page

As you hopefully already know, HTML is the language you use to create Web documents. To refresh your memory, Listing 1.1 shows a short but sadly typical Web document.

Example 1.1. A simple HTML document

<html>
<head>
<title>Our Home Page</title>
</head>
<body>
<h1>The American Eggplant Society</h1>
<p>Welcome to our Web page. Unfortunately,
it's still under construction.</p>
</body>
</html>

This document consists of a header within the <head> tags and the body of the page within the <body> tags. To add JavaScript to a page, you'll use a similar tag: <script>.

The <script> tag tells the browser to start treating the text as a script, and the closing </script> tag tells the browser to return to HTML mode. In most cases, you can't use JavaScript statements except within <script> tags. The exception is event handlers, described later in this chapter.

Using the <script> tag, you can add a short script (in this case, just one line) to a Web document, as shown in Listing 1.2.

Example 1.2. A simple HTML document with a simple script

<html>
<head>
<title>Our Home Page</title>
</head>
<body>
<h1>The American Eggplant Society</h1>
<p>Welcome to our Web page. Unfortunately,
it's still under construction.
We last worked on it on this date:</p>
<script LANGUAGE="JavaScript" type="text/javascript">
document.write(document.lastModified);
</script>
</body>
</html>

JavaScript's document.write statement, which you'll learn more about later, sends output as part of the Web document. In this case, it displays the modification date of the document.

In this example, we placed the script within the body of the HTML document. There are actually four different places where you might use scripts:

In the body of the page. In this case, the script's output is displayed as part of the HTML document when the browser loads the page.
In the header of the page, between the <head> tags. Scripts in the header can't create output within the HTML document, but can be referred to by other scripts. The header is often used for functions—groups of JavaScript statements that can be used as a single unit. You will learn more about functions in Hour 3, "How JavaScript Programs Work."
Within an HTML tag, such as <body> or <form>. This is called an event handler and allows the script to work with HTML elements. When using JavaScript in Event handlers, you don't need to use the <script> tag. You'll learn more about event handlers in Hour 3.
In a separate file entirely. JavaScript supports the use of files with the .js extension containing scripts; these can be included by specifying a file in the <script> tag.

Using External JavaScript files

When you create more complicated scripts, you'll quickly find your HTML documents become large and confusing. To avoid this, you can use one or more external JavaScript files. These are files with the .js extension that contain JavaScript statements.

External scripts are supported by Netscape Navigator 3.0 or later and Internet Explorer 4.0 or later. To use an external script, you specify its filename in the <script> tag:

<script language="JavaScript" type="text/javascript" src="filename.js">
</script>

Since you'll be placing the JavaScript statements in a separate file, you don't need anything between the opening and closing <script> tags—in fact, anything between them will be ignored by the browser.

You can create the .js file using a text editor. It should contain one or more JavaScript commands, and only JavaScript—don't include <script> tags, other HTML tags, or HTML comments. Save the .js file in the same directory as the HTML documents that refer to it.

Browsers and JavaScript | Next Section

Previous Section