This JavaScript tutorial was written by Michael Peterson in the spring of 1999 while working on towards a Master of Information Science degree in the School of Library and Information Science at Indiana University (Bloomington). It is intended to act as a supplement to the introductory JavaScript tutorial of Dr. Howard Rosenbaum< and to Jen Burroway's tutorial. By no means is this tutorial comprehensive. It covers those features that I find to be most important (that are not covered in the other tutorials above) or most interesting. For a complete reference to all features of JavaScript, I heartily recommend Danny Goodman’s excellent book, The JavaScript Bible. 

All source code in this tutorial is my original work and is freely available in parts or in whole to anyone who wishes to copy and use it. The tutorial examples are best viewed with a level 4 or 5 browser. Code that will not work properly in earlier browser versions is generally noted beforehand.

The best online reference for Javascript is the Netscape Developer site.

Short History of JavaScript

JavaScript was created by Brendan Eich at Netscape in 1995 and first appeared in the Netscape Navigator 2 (NN2) browser. The NN2 version is now called JavaScript 1.0, but in its earliest incarnation, before the Java revolution, it was called LiveScript. With each new Netscape browser level, new JavaScript features have been implemented. NN3 implements JavaScript 1.1 and NN4 implements JavaScript 1.2.  Each new release is backward compatible, but has many features not recognized in older browsers

As Microsoft entered the browser wars, it too implemented a scripting language, called JScript, that is very similar to Netscape’s JavaScript. Internet Explorer (IE) 1 and 2 did not have JScript capability. Early releases of IE3’s JScript are virtually equivalent to JavaScript 1.0, while later ones are JavaScript 1.1 compatible.  IE4 JScript is compatible with most features of JavaScript 1.2, but has features that go beyond JavaScript 1.2.  These features are a result of the new and more extensive Document Object Model (DOM) in IE4 compared to NN4. Likewise, there are some features of JavaScript 1.2 that are not present in JScript (such the <LAYER> object). 

In response to the need for compatibility between the browsers, a standard JavaScript/JScript language, called ECMAScript (typically pronounced eck'-ma) has been codified.  This core language is basically equivalent to JavaScript 1.1 and promises have been made by the browser makers to keep all future browsers compatible with at least this much.

The architecture of JavaScript

As will be discussed in another section, the Document Object Model (DOM) is the architecture around which JavaScript operates. The DOM defines what aspects of a browser window and a document within a window are scriptable (meaning that you can change them on-the-fly without having to change the html source code or load in a new page from the web server). For example, images are scriptable in JavaScript in the sense that an image can be changed via a mouse rollover. In order to be scriptable, an html feature must be loaded as an object into the browser’s document object model. The DOM is predefined by the browser makers and cannot be modified by a "JavaScripter".

Some things, such as paragraphs of text set off by <p> </p> tags, are not objects in the current Netscape (NN4) DOM and therefore are not scriptable. However, in Netscape they can be made scriptable by using the <LAYER> object, which is not present in the IE DOM implementation. NN4 also allows you to alter the position of elements (such as a paragraph) through change the CSS-P (Cascading Style Sheets - Positioning) properties. Layers and CSS-P will not be discussed in this tutorial, however. Everything is a scriptable object in IE4 and IE4. The IE DOM will probably be adopted by Netscape with their level 5 release due in late 1999.

< The different competing browser implementations and the creation of novel features with each new browser release has created problems of incompatibility. In fact, the two central frustrations of working with JavaScript are 1) the limitations of the DOM in the current browsers and 2) incompatibilities between NN and IE and incompatibilities between v. 1.0, 1.1 and 1.2.

JavaScript is a scripting language, not a full-fledged programming language like Java or C++. Scripting languages generally have many built in short-cuts and features tha are taken care of by the system as opposed to having to be explicitly declared and tracked by the programmer. While Java is a full-fledged applications programming language, JavaScript can do many things in the browser environment that Java cannot. Java and JavaScript should be viewed as complementary and the latter is much easier to learn for the novice programmer. Likewise, there are synergies between using JavaScript for some things (such as passing values and doing client-side data entr validation) and a CGI-program (via Perl or some other language) for server-side processing.

Like Java, JavaScript is object-oriented. In its simplest meaning, object-oriented means that items in the program (such as buttons, textfields and images in a browser window) are abstracted as objects and that the program runs by means of objects talking to one another. In an object-oriented setting, the objects are related to one another in a hierarchical fashion. For JavaScript, the relationship of the browser objects is predefined by the DOM, as shown in this figure.

Note for programmers familiar with object-oriented settings:

The DOM used by JavaScript is a containment hierarchy, not an inheritance hierarchy as is implemented in Java and C++. Essentially, this means that the hierarchy is used only to set up pathways for referencing objects in the DOM, but objects do not inherit methods or data properties from their superclasses. To compensate for this situation, all methods and variables in JavaScript are public (to put it in Java terms). The distinction between class (static) methods and instance methods is maintained in JavaScript.