Javascript: How JavaScript Fits into a Web Page

by the3factory 2/29/2008 6:28:00 AM

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

Listing 1A 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 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 in an HTML document except within <script> tags. The exception is event handlers, described later in this hour.

JavaScript and HTML

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

Did you Know?

If you want to try this example in a browser but don't want to type it, the HTML document is available on this book's website (as are all of the other listings).

Listing 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:
            <script language="JavaScript" type="text/javascript">
            document.write(document.lastModified);
            </script>
            </p>
            </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.

By the Way

Notice that the <script> tag in Listing 2 includes the parameter type="text/javascript". This specifies the scripting language to the browser. You can also specify a JavaScript version, as you'll learn later in this hour.

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 don't immediately affect the HTML document, but can be referred to by other scripts. The header is often used for functionsgroups of JavaScript statements that can be used as a single unit.
Within an HTML tag, such as <body> or <form> This is called an event handler and enables the script to work with HTML elements. When using JavaScript in event handlers, you don't need to use the <script> tag.
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 Separate 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 all modern browsers. To use an external script, you specify its filename in the <script> tag:

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

Because you'll be placing the JavaScript statements in a separate file, you don't need anything between the opening and closing <script> tagsin 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 JavaScriptdon'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.
Did you Know?

External JavaScript files have a distinct advantage: You can link to the same .js file from two or more HTML documents. Because the browser stores this file in its cache, this can reduce the time it takes your web pages to display.

Events

Many of the useful things you can do with JavaScript involve interacting with the user, and that means responding to eventsfor example, a link or a button being clicked. You can define event handlers within HTML tags to tell the browser how to respond to an event. For example, Listing 3 defines a button that displays a message when clicked.

Listing 3. A Simple Event Handler

<html>
            <head>
            <title>Event Test</title>
            </head>
            <body>
            <h1>Event Test</h1>
            <button onclick="alert('You clicked the button.')">
            </body>
            </html>

Tags: javascript, event