New JavaScript features in Navigator 3.0

Discover the new and improved JavaScript
functionality in Netscape's latest browser

In Greek mythology, Atlas was a luckless Titan condemned for all eternity to support the heavens upon his shoulders. Perhaps it is mere coincidence that Netscape used "Atlas" as the code-name for its latest version of the popular Navigator browser software. Or perhaps it is indeed an obscure reference to the burden Netscape carries in keeping the Internet free from the looming threat of Microsoft.

Whereas Zeus, god of all Greek gods, condemned Atlas to his everlasting hardship, it is Netscape who burdens itself with the task of competing for the centerpiece prize of the Internet, the world's standard Web browser. Netscape "Atlas" -- now better known as Netscape 3.0 -- is considered a major upgrade from Netscape 2.0, though you wouldn't know it by looking at it.

On the outside, Netscape 3.0 is much the same as the previous version, except for a small handful of noted enhancements (such as support of a few enhanced HTML layout features, including borderless frames).

Rather, it's the inside that's different, in ways the casual observer cannot see. One of the major improvements in Netscape 3.0 is JavaScript, the built-in scripting language that provides for interactive and intelligent control over the HTML content of a page. JavaScript is more mature and refined this time around, with many of its "version 1.0" bugs squashed. What's more, JavaScript supports a number of enhancements, including new object constructors, in-place image replacement, and direct communication between it and Java applets and plugins. Though JavaScript is far from being complete, it has taken another step in becoming a world-class user scripting language.

The new JavaScript features in Netscape 3.0 are actually very extensive. You'll want to check out the JavaScript documentation (http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html) for full details. I'll review the most important ones here, and of course, cover them in more detail in coming months.

Using the built-in object constructors

Netscape 3.0 sports a number of built-in object constructors to make programming easy. Three of them -- Date, Array, and Object -- are available in Netscape 2.0. Netscape 3.0 adds functionality to the Array constructor, as well as new object constructor functions.

As you may know, an object constructor is a built-in function that creates an object. For example, you can create an object with the current date with the following:

now = new Date();

Netscape 3.0 supports the following object constructors. In all cases these constructors are used with the new statement to create new instances of objects.

  • Array
  • Boolean
  • Date
  • Function
  • Images
  • Number
  • Object
  • Options
  • String

The Date and Object constructors have not been changed since Netscape 2.0. Following are descriptions of what's new with the Array, Boolean, Function, Number, and String constructors. The Images and Options objects are part of the new features in Netscape 3.0 that allow for in-place image replacement and dynamic updating of selection lists, respectively. See "Using the image object" and "Modifiable select objects" for more information about these.

Array constructor

The Array object constructor was introduced in Netscape 2.0, but is refined in Netscape 3.0. You use it with a new operator to create a new array. Here's one example that creates an array with ten elements, numbered 0 through 9:

myarray = new Array(10);

Elements can be added dynamically to an Array object. For instance, the following creates a basic array variable, and the number of elements contained in the array is set dynamically by assigning values to the upper and lower index ranges:

var myarray = new Array();
myarray[0] = "first element";
myarray[99] = "last element";

This array has 100 elements: 0 though 99. You can test the number of elements in an array by using the length property. Here's an example that displays the number of elements of an array:

alert (myarray.length);

As a handy shortcut, Netscape 3.0 supports what some programmers call a "dense array" -- an array in which a single step both constructs the array and defines the elements. (This process is sometimes referred to as an "implicit assignment," because the elements are implicitly assigned as the array variable is defined.) The following example creates an array with three elements.

myarray = new Array("element 0", "element 1", "element 2");

Netscape 3.0 adds several new methods to Array objects. These include sort and join.

  • Use join to combine the elements of an array into a single string. The syntax: arrayname.join (separator);
  • Use sort to arrange an array in alphabetical order. The syntax: arrayname.sort();

Boolean constructor

Use the Boolean constructor to explicitly create a variable with a Boolean value. Here's one quick example in which the value of the variable bool is set automatically to false:

bool = new Boolean();

You can define a logical value before or after you define the variable. Here's an example of defining the value when the new Boolean variable is created:

bool = new Boolean(true);

Function constructor

Use the Function constructor to make "anonymous" functions. It's one method you can use to create functions on the fly. Here's an example:

var mul = new Function ("x", "y", "return x * y")
var Result = mul(5,4)
alert (Result)  // displays 20

Number constructor

The Number constructor is used to define a number variable. A practical use of the Number constructor is to type cast a string as a number. The following turns the string "123.45" into a number.

mynumber = new Number ("123.45");

String constructor

The String constructor allows you to explicitly define a new string. You can define an empty string object, then fill it with text, or you can, in one line of code, define the string object and assign text to it. Here are examples of both methods:

myString = new String ();
myString = "This is a test";
anotherString = new String ("Text goes here");

Using the new image object

Images defined by the <IMG> tag are now reflected in JavaScript. All images in a document are in an array called document.images. The number of images in a document is document.images.length. For example, you can now refer to the first image in a document as document.images[0], the second image as document.images[1], and so on.

Each image object has properties for the IMG attributes that include the following:

src
SRC attribute: URL of the image. This is the only required attribute.
complete
Loading status: tells you if the image has loaded.
name
NAME attribute: Property of NAME= attribute.
lowsrc
LOWSRC attribute: URL of the low-resolution image, if any.
height, width
HEIGHT, WIDTH attributes: height and width of image in pixels.
border
BORDER attribute: width of image border in pixels.
vspace, hspace
VSPACE, HSPACE attributes: horizontal and vertical space in pixels.

The great benefit of this new feature in Netscape 3.0: You can set the src and lowsrc properties with new images that dynamically change the content of graphics. For example, the following changes the first image in the document with a new file:

document.images[0].src = "http://myserver.com/pix/newimage.gif";

Extending scripts with JavaScript libraries

A long-awaited addition to JavaScript is the ability to define a separate page for the JavaScript program. This is now done in Netscape 3.0 using the SRC attribute of the <SCRIPT> tag. Here's an example:

<HTML>
<HEAD><TITLE>SRC Test</TITLE>
<SCRIPT SRC="test.js">
alert ("this is an alert within the script tag")
</SCRIPT>
</HEAD>
</HTML>
  • Files used with the SRC attribute should end with the js file extension.
  • The .js file should contain JavaScript only, and no <SCRIPT> tag.
  • You may include JavaScript code in the main HTML (the one with <SCRIPT SCR=>) to provide compatibility with Netscape 2.0. Netscape 3.0 will ignore the JavaScript code within this <SCRIPT> container and only process the .js file.
Note: In order to use the new *.js library file feature, your server must be set up to serve these files using a MIME type of application/x-javascript. Otherwise Netscape will ignore the *.js file, and nothing will appear to happen (or you will get an error). If your server is not already set up to serve *.js files as application/x-javascript, you will need to add this as a new supported MIME type. Refer to your server documentation or system administrator for the details.

Netscape 3.0 also adds a <NOSCRIPT> tag. The contents of this tag are ignored by JavaScript, but processed as HTML when JavaScript is disabled or unimplemented. Example:

<NOSCRIPT>
<H1>No JavaScript</H1>
You see this text if JavaScript is disabled or unimplemented.
</NOSCRIPT>

Using the typeof operator

Netscape 3.0 provides a new typeof operator that queries the type of variable given to it. The result is one of the following:

  • undefined (no variable defined of that name)
  • array
  • boolean
  • date
  • function
  • image
  • number
  • object
  • option
  • string

The typeof operator is especially handy if you want to see if a variable has been defined. To use the typeof operator, enclose the name of the variable in parentheses. Here's an example (the answer is String):

var Test = "This is a test"
var Result = typeof(Test)
alert (Result)

Connecting with Java

JavaScript now shares a closer relationship to Java, using a feature Netscape calls

LiveConnect

. For example, you can write JavaScript that initiates a public variable or method in a Java applet you've loaded, and you can even write some Java code directly in JavaScript.

Each applet in a document is reflected by the new document.appletName property, where appletName is the name of the applet, defined by the NAME attribute of the <APPLET> tag. For example, the following HTML includes a simple applet called "mojaApplet":

<APPLET CODE=Mojaapp.class NAME=mojaApplet WIDTH=60 HEIGHT=30>
<PARAM NAME=label VALUE=Mojaapp>
</APPLET>

You would then reference it in JavaScript as follows:

document.mojaApplet
document.applets["mojaapplet"]

You can also reference applets by index, starting with 0 for the first applet in the document, 1 for the next, and so forth. For example:

document.applets[0]

All public variables declared in an applet are available in JavaScript. Static methods and properties declared in an applet are available in JavaScript as methods and properties of the applet object. You can get and set property values, and you can call methods that return string, numeric, and Boolean values. For more information on how values are passed from Java and JavaScript, be sure to consult the JSObject Package documentation (http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/moja.html), provided by Netscape. Note that the LiveConnect implementation in Netscape 3.0, while reasonably good, is not entirely complete, and does not function identically across all platforms. Be sure to completely test all JavaScript if your code will be used by a variety of platforms.

The top level of the Java package namespace appears in JavaScript under the name Packages. Aliases are used to access packages more quickly. You can refer to the Java class java.lang.System as Packages.java.lang.System or just java.lang.System. Once you have a reference to this class, you can access fields and methods with the same syntax that you would use in Java.

For example, the following code snippet prints a message to the Java console:

var System = java.lang.System;
System.err.println("This text comes from JavaScript");

You can also use some Java class constructors in JavaScript. For example, the following syntax is allowed in Netscape 3.0, and can be used to greatly enhance JavaScript:

var mydate = new java.util.Date();

Testing for plug-ins

JavaScript now has the ability to test if a user has installed a particular plug-in, such as Shockwave or ToolVox. You can also check if the browser is capable of handling a particular type.

The navigator object has two properties for checking installed plug-ins:

  • The mimeTypes object is an array of all MIME types supported by Netscape (either internally, via helper apps, or by plug-ins). Each element of the array is a mimeType object; available properties are provided for type, description, and suffixes (file extensions).
  • The plugins object is an array of all plug-ins currently installed. Each element of the array is a plugins object, which has properties for its name and description as well as an array of mimeType objects for the MIME types supported by that plug-in.

For example, the following checks to see if the Shockwave plug-in is installed and displays an embedded Shockwave movie if it is:

var plugin = navigator.plugins["Shockwave"];
if (plugin)
    document.write("<EMBED SRC='shock.dir' HEIGHT=100 WIDTH=100>")
else
    document.write("You don't have Shockwave installed!")

Or, when you are more interested in determining if a certain MIME type is supported by an available plug-in, you can use the following:

var mimetype = navigator.mimeTypes["audio/midi"]
if (mimetype)
    document.writeln("Click <A HREF='sound.mid'>here</A> to listen to a sound")
else
    document.writeln("Sorry, but there is no support for MIDI sounds on your browser.")

A navigator.mimeType object has three predefined properties:

  • name -- the name of the MIME type, for example: video/mpeg, audio/x-wav
  • description -- the description of the type
  • suffixes -- a string that lists possible file suffixes (also known as filename extensions) for the MIME type
Related:
1 2 Page 1
Page 1 of 2