Tutorials

Javascript Tutorial

by Heidi Brumbaugh

I'll take you from a high-level overview of JavaScript language concepts through several useful scripts you can modify for use in your own pages.
This tutorial introduces JavaScript, a language you can use to embed commands in an HTML document. This article assumes no prior knowledge of programming, but does assume HTML familiarity. I'll take you from a high-level overview of JavaScript language concepts through several useful scripts you can modify for use in your own pages. This tutorial supplements Netscape's official JavaScript Authoring Guide, which is a thorough reference but doesn't give you much in the way of getting started.

What HTML Isn't

HyperText Markup Language (HTML) thrives in a static environment. You put up a page, then it pretty much stays where it is until the user calls up a new page, for example by clicking on a link. HTML lets you combine text and graphics, and gives you tools such as frames and tables to get the layout just the way you want it. HTML is pretty, but it ain't smart. If you need to process information (such as data entered into a form) you have to send it over the data stream back to your server (very smart), which then generates a new HTML page and sends it back to the user for display.
This process, accomplished via a protocol called CGI (Common Gateway Interface), gets the job done...but if your user isn't connected via an Ethernet or ISDN line, it has obvious disadvantages. CGI is a server-side process. The need to perform client-side processing was addressed in the earliest helper apps, such as those to view pictures or play back sound snippets. Java and ActiveX controls are mechanisms by which developers can embed functionality, not just information, into an HTML page. However, there are times when you need a little bit more than what HTML can offer without the complexity of Java. That's where JavaScript fills the bill.

What JavaScript Is

JavaScript shares the fundamental feature of all programming languages: it can get data from some source, process that data, and output the results. Because it is integrated into HTML, JavaScript already knows what your browser knows, and can figure out, for example how many form elements are on a page or how many frames are in a window. It also knows how to work with this environment, and can perform such tasks as targeting a specific frame for output just as you could target a frame to contain the contents of a hypertext link in HTML.
The types of things you can use JavaScript for include: controlling a page; opening and closing windows and frames; programmatically accessing the history window (which allows the developer to refer to previously viewed documents) and other browser features.
Furthermore, with JavaScript you can provide feedback to the user, generate new HTML pages using variable information, and implement user-defined functions.

The Object Model

Like most other programming languages of its generation, JavaScript is characterized by the object model. This means that you think about your JavaScript program in terms of the objects-the things you want to work with. For programming purposes, the browser window is an object. The HTML document is an object. Each form in the document is an object, made up in turn of other objects such as text boxes and radio buttons. Objects aren't static entities that float in space. You can access information about them, do things to them, or respond to events that happen to them. In programming terms, information about an object is called the object's properties.
Actions you can perform on or with objects are called methods. The mechanism by which you can respond to something that happens to an object is an event handler. Objects, properties, methods, and event handlers are the building blocks of JavaScript programs.
Let's look at how we can put these components to practical use to improve the interface of three sample HTML pages. In each case our goal will be to provide dynamic, context sensitive information to the user that is over and above what is included in the text of the page itself. The first example will employ the status bar to emphasize important information on the screen. The second example will bring up an alert box. The third example will bring up an entire window of information in response to the user clicking on a button. Be especially careful not to make a typo. Program commands must be typed in precisely or an error is likely to occur. If you learn best by doing, I've added some suggested exercises throughout the article that will help you make sure you understand the concepts. (Editor's Note: Click here to enter Heidi's mini-menu of sample programs and links, while here is a zipped file of all the sample code modules.)

Example 1: The Status Bar Application

The first application is for a fictional company, JS Software's download page. The goal of the program is to give the user a little more information than what is in the text of the page, without being obtrusive. We can do this by manipulating the status bar. In JavaScript, the window object has a property called status that describes the text that is currently displayed on the status bar of the user's browser. The defaultStatus property describes what is normally shown in the status bar while the user's mouse pointer is over that window (but not, for example, over a hot spot). We use objects by giving each one a distinctive name. Some objects, such as the window, have a built-in name. We can refer to the current window as either window or self. In JavaScript syntax, the object is separated from properties or methods with a period. Therefore, both

window.status

self.status

refer to the contents of the status bar, which we can either read from or write to. If you've programmed before, it may help to think of this kind of expression as a variable. If you haven't programmed before, the important thing to know is that in order to assign a value to a variable or in this case a property you write a command that looks like this:

propertyName = propertyValue

where propertyName is the name of the property and propertyValue is an expression that evaluates to a valid value for propertyValue to contain. An expression can be the result of an equation, the value of another variable or property, or a literal value, such as a series of characters enclosed in quotation marks.

window.status = "Click here to download the compressed Mac version of Ziffle Zot."

is a valid expression, as is:

window.status = "The old status was " + window.defaultStatus

Note the way you can combine elements, in this case by concatenating a string of characters and another property value by using the plus sign.

More: Web Developer