This tutorial assumes knowledge of the HTML language. Tags and usage are not covered except to illustrate the context within which scripts are developed. If you do not know how to write HTML documents, you'll be best served by first working through the accompanying HTML tutorial.

Limitations of HTML

It is important to remember that HTML is a markup language, not a programming language. The language describes the visual structure of elements arranged on a page; it does not perform any processing of text or graphical data contained on the page. Even when users enter data on the page, say through the use of forms, that data cannot be manipulated arithmetically or logically by the HTML language. You cannot add, subtract, or compare it through HTML. This is because the language does not contain the processing commands common to programming languages. It contains only formatting commands (markup tags) to describe the visual appearance of the page and the data contained in it.

For many Web applications this lack of processing commands is no great drawback. Most web pages are simple displays of information for which no processing is required. Even at sites that capture data with HTML forms, use of that data often takes place "off-site," using other languages to place the data into external files or databases, to process it in some fashion, and to store the resulting information.

Still, there are cases where availability of processing commands to the web page can be a great asset. For example (and in general): to respond to user actions such as opening or closing pages, clicking on buttons, or typing information into fields; to make calculations on and comparisions between numbers or text entered by users; to perform table look-up functions to provide users with information on an inquiry; to validate information typed into forms; to take alternative pathways through a web depending on users' responses to questions; to permit users to personalize web pages or to display different page formats depending on the type of browser being used; and, for the most part, to be able to do those things that most programming languages permit.

Enter JavaScript

You have likely heard of Java, one of the popular programming languages used on the Web. Relatively speaking, Java is a complex, full-bodied language that requires the special abilities and sensibilities of a programmer to use effectively. Not only that, Java requires a complete software development environment and tools to compose, compile, and make programs accessible. On the other hand, a subset of Java, called JavaScript, is a relatively easy-to-learn, simple-to-use scripting language that is accessible to virtually any web developer. JavaScript (JavaLite?) contains many of the processing capabilities of Java without the investment of time and effort needed to acquire full-fledged programming skills. Certainly, JavaScript does not give you the full processing capabilities that are provided by Java. Nevertheless, it does provide the common arithmetic, logical, and control capabilities that you are likely to need as a web author. Plus, the ability to interpret and act upon scripting commands is built into modern browsers. You do not need special development environments or tools to make JavaScript happen.

It should be mentioned at the outset that there is one serious limitation of JavaScript. It does not currently have the ability to read and write files. Within a commercial processing environment, this is a major limitation. Writing information to or accessing information from files or databases still requires the use of separate programs, external to HTML documents and their embedded scripts. As a group these are known as Common Gateway Interface (CGI) programs. You may have had occasion to use CGI programs, for example, to collect information from forms. Many such generalized programs, written by professional programmers, exist on the Web and will continue to be required for file processing. Still, JavaScript provides other valuable processing capabilities beyond HTML that can make your web pages more responsive to your users' needs.

Browser Settings

Figure 1-1. Netscape Navigator settings for JavaScript

For Internet Explorer 3.0 choose the View|Options menus and the "Security" tab. Then make sure that the "Run ActiveX scripts" checkbox is checked (see Figure 1-2).

Figure 1-2. Internet Explorer settings for JavaScript

Now you're all set to view pages with JavaScript content and, more importantly, you can write scripts to bring your own web pages more alive.

Some Examples

Locations of Scripts

At the same time, there are two locations in HTML documents where you can place scripts. Scripts can be enclosed within <SCRIPT> tags and placed anywhere within the document. The browser runs these scripts automatically when the page is loaded. For example, the script:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
document.write ("Last modified on " + document.lastModified)
//-->
</SCRIPT>

appears in the current HTML document immediately following the <BODY> tag. You can view the output of this script at the very top of this page where the date on which this document was last modified is displayed. You can see this script by viewing the document source in the browser.

These stand-alone, self-running scripts must be enclosed within <SCRIPT> tags as shown above. The LANGUAGE="JAVASCRIPT" parameter is optional. Notice also the pair of tags: <!-- and //-->. These are opening and closing "comment" tags, meaning that the entire script is commented out! Effectively, what you are doing is hiding the JavaScript commands from older browsers that do not recognize and cannot process them. Modern browsers with the ability to handle scripting languages can, however, recognize the commands between the comments and proceed to read and act upon them. You can decide whether or not to use comment lines depending on how courteous you wish to be to users with older browsers.

You can have any number of scipts scattered anywhere throughout the document. It is not necessary to enclose them all within a single <SCRIPT> section or even to place all the separate scripts in one location. However, there are preferred, and sometimes necessary, locations depending on the processing desired.

The second location for scripts is embedded within HTML tags. For example, the HTML specifications:

<FORM>
<INPUT TYPE="BUTTON" VALUE=" Red " onclick="document.bgColor='red' " >
<INPUT TYPE="BUTTON" VALUE="White" onclick="document.bgColor='white' " >
</FORM>

display the following buttons

Scripts embedded within HTML tags are run in response to user actions associated with the tags. These scripts respond to "events" that take place, such as the user clicking on a button, clicking inside a form field, clicking outside a form field, loading a new page, leaving the current page, and other such events. There are JavaScript commands called "event handlers" coded within tags and used to respond to such actions.

Most likely you will use a combination of these two methods. For example, you will code event handlers within HTML tags that call upon other scripts to carry out the actual processing. You can see this happening in the calculator application accessible below:

If you view this application you will notice that all of the processing routines are stacked together at the beginning of the HTML document. Within the body of the HTML code are embedded event handlers that respond to button clicks and call upon the scripts to carry out the processing.

We mentioned above that scripts appearing between <SCRIPT> tags are run by the browser when the page is loaded. In the calculator application most of the scripting is within these tags; however, it's not apparent that the browser does anything about the commands when the page loads. Well, in this case there is no processing immediately called for. The scripts aren't activated except in response to the event handlers. Still, the scripts are recognized, loaded, and await their call.

JavaScript is a fairly powerful language. By this we mean that you can perform complex processing with few commands. It encapusulates in certain single commands the processing power that would take multiple commands in other languages. Therefore, there are many useful tasks that can be done without knowing the entire structure or syntax of the language. You can get a quick start in using it. At the same time, JavaScript is nearly a full-featured programming language. It contains the arithmetic, logical, and control structures to compose full programs. Thus, both novices and professional programmers can find features that they need to accomplish their tasks.

But enough of the background and descriptive information. On the next page we jump right in and start learning and using JavaScript.

Previous Contents Next