TD WIDTH=93>30 LOOP 95 MARQUEE 98-99

Chapter 20 -- Understanding the JavaScript Reference Section

Chapter 20

Understanding the JavaScript Reference Section

CONTENTS

JavaScript is a scripting language used with HTML pages to increase functionality and interaction with the end user. It was developed by Netscape with Sun's Java language.

Finding information on programming in JavaScript can be a bit like looking for the Holy Grail. Among Netscape's site, online tutorials, and examples, information seems to be everywhere but at your fingertips. So here is the information you're looking for in one place, including statements, operators, and color values.

JavaScript and Java

It's important to note that JavaScript is a completely different beast from Java. Java is an object-oriented programming language developed by Sun Microsystems, and needs a variety of compilers and support files to function. It is useful for programmers and developers who have prior programming experience with languages like C++.

Programs developed under the Java development kit can work as full-fledged, stand-alone applications or as applets embedded in HTML pages. Even though applets are embedded in HTML pages, they still arrive on the client's computer as separate files.

JavaScript was developed by Netscape. It is a cousin to Java, containing a smaller and simpler set of commands that vary slightly in their implementation.

JavaScript's structure and syntax are similar to Java's but JavaScript is only functional when included as part of an HTML page. You can't develop applets or stand-alone applications with JavaScript-it can only reside within an HTML script and function when loaded on a compatible browser such as Netscape 2.0.

Using This Section

Several conventions used in this section make finding information easier.

Each entry has the same basic structure. Following the term and its type (object, property, or method) is a brief description of its use. This is followed by the syntax of the command.

Some items, especially those relating to forms, have a variety of implementations. The basic variations are listed as part of the syntax. Italicized items need to be replaced with actual values or variable names. Given the following syntax:

document.formName

a form called userInfo would be implemented this way:

document.userInfo

Methods with an asterisk are built-in methods and don't need association with an object to function.

A detailed description of use and programming examples is next, followed by a cross-reference to related items in the book.

When you see the term URL, it refers to a complete Uniform Resource Locator, including type and machine address, plus path and hash if applicable.

General Terms

Although they are not necessarily JavaScript objects or keywords, these terms can help you to understand JavaScript and how it works. These include general terms used in most discussions about JavaScript and its implementations.

Event Handlers

Event handlers are special items in JavaScript that give it much of its power. They allow the programmer to look for specific user behavior in relation to the HTML page, such as clicking a form button or moving the mouse pointer over an anchor.

Event handlers are embedded in HTML tags, typically used as part of forms, but are also included as a part of some anchors and links.

Virtually anything a user can do to interact with a page is covered with the event handlers, from moving the mouse to leaving the current page. For example, the following line displays "Netscape's Home Page" in the status bar instead of the link's URL when the mouse is placed over the anchor:

<A HREF="home.netscape.com"
onMouseOver="window.status='Netscape's Home Page';
return true">

Functions

A function is a user-defined or built-in method that performs a task. It can also return a value when used with the return statement. Functions are universal and do not need to be associated with an object to run, while methods are integrated with objects.

As a general rule, it's best to place function definitions within the <HEAD> tags of a document. This practice ensures that any functions are loaded and ready before the user has a chance to interact with the rest of the page.

Hierarchies

In a hierarchy, objects exist in a set relation to each other. For example, Navigator objects have a structure that reflects the construction of an HTML page. This is called instance hierarchy because it only works with specific instances of objects rather than with general classes.

The window object is the parent of all other Navigator objects. Underneath the window object, location, history, and document all share precedence. Under document are other objects such as forms, links, and anchors.

Each object is a descendant of a higher object. A form called orderForm is an object and it is also a property of document. As such, it is called document.orderForm.

Another way to think about a hierarchy is the relationship items in the real world have to each other. Spokes, handlebars, and pedals are all objects that belong to a bicycle. A bicycle is an object that belongs to ground transportation. Ground transportation is an object that belongs to modes of travel.

If represented as JavaScript objects, these relationships could be expressed this way:

travelMode.groundTransport.bicycle.handleBars

The highest and most nonspecific object is on the left and it gains specificity as it moves to the right and its descendants begin to branch out.

Java

In the words of Sun Microsystems, "Java is a simple, robust, object-oriented, platform-independent multithreaded, dynamic, general-purpose programming environment." What all these buzz-words mean is that Java is ideally suited for creating applets and applications for the Internet, for intranets, and for any other complex, distributed network.

Once compiled, it is possible for a single piece of Java source code to run on any machine-Windows 95, Solaris, Macintosh, or any other-that is equipped with a Java interpreter. Programming in Java requires a Java Developer's Kit with compiler and core classes provided by Sun or a third-party vendor, such as Symantec.

JavaScript

JavaScript is a scripting language for HTML documents developed by Netscape in cooperation with Sun Microsystems. Scripts are performed after specific user-triggered events. Creating JavaScript Web documents requires a text editor and compatible browser. Netscape Gold also includes an editor within the browser itself, so an external text editor isn't necessary.

Although not directly related to Java, JavaScript can interact with the exposed properties and methods of Java applets embedded on an HTML page. The difference boils down to this-Java applets exist outside the browser, whereas JavaScript only exists within a browser.

Literals

A literal is a value that can be assigned to a variable. Literals are what they are and do not change. Examples include 1, 3.1415927, "Bob," and true.

Several types of literals in JavaScript correspond to the variable types.

Integers

Integers are whole numbers such as 1, 16, and 25,896. They can be expressed in decimal (base 10), hexadecimal (base 16), or octal (base 8) form.

Hexadecimal numbers include 0-9 and A-F, and are represented in JavaScript by preceding the number with 0x (zero-x). Octal numbers only include 0-7 and are preceded by 0 (zero).

For example, decimal 23 is represented in hexadecimal by 0x17 and in octal by 027.

Floating-Point Numbers

Floating-point numbers are fractional portions of integers and must include at least one digit, and a decimal point or exponent symbol ("e" or "E").

The following are all ways of expressing the same floating-point number:

3.1415927
3145927e-7
.3141527E1

Boolean Literals

Boolean literals have only two values, true or false. In some implementations of JavaScript, 0 (false) and 1 (true) cannot be substituted for Boolean values. The current versions of Netscape Navigator and Gold both support 0 and 1 as Boolean false and true.

Strings

Strings are defined by any number of characters within single or double quotation marks. Use the backslash (\) to escape the quotation marks to print special characters. For
example, the following:

document.write("Doc said, \"Festus, you need a bath,\"
and wrinkled his nose.")

results in:

Doc said, "Festus, you need a bath," and wrinkled his
nose.

Methods

A method is a function assigned to an object. For example, userName.toUpperCase() returns an uppercase version of the string contained in userName.

Objects

An object is a construct with properties that are JavaScript variables or other objects. Functions associated with an object are called the object's methods. You access the properties and methods of an object with a simple notation:

objectName.propertyName
objectName.methodName

All names are case-sensitive.

If an object called house has the properties of bedrooms, bathrooms, floors, and squareFeet, you could access its values by using the object notation:

house.bedrooms
house.bathrooms
house.floors
house.squareFeet

Another way of thinking of objects is an array using the following array notation:

house["bedrooms"]
house["bathrooms"]
house["floors"]
house["squareFeet"]

The same object is also represented in JavaScript by a traditional array:

house[0]
house[1]
house[2]
house[3]

This type of relationship between indexes and strings is called an associative array.

Creating a new object requires a function that instantiates (creates an instance of) the object. Using the house example, the following function would create a new instance of a house object:

function House(bedrooms, bathrooms, floors, squareFeet) {
        this.bedrooms = bedrooms;
        this.bathrooms = bathrooms;
        this.floors = floors;
        this.squareFeet = squareFeet
}

Now that the object is defined, an instance is created by using the new directive:

500South5th = new House(2, 1, 1, 1700)

Other objects can be included as part of the object definition. For example, an object called owner has properties called name, age, mortgageLength:

function Owner(name, age, mortgageLength) {
        this.name = name;
        this.age = age;
        this.mortgageLength = mortgageLength
}

Adding an additional argument and line to the House function adds an owner to the house:

function House(bedrooms, bathrooms, floors, squareFeet, owner) {
        this.bedrooms = bedrooms;
        this.bathrooms = bathrooms;
        this.floors = floors;
        this.squareFeet = squareFeet;
        this.owner = owner
}

Now, owner Glenn Woodson, 38, with a 20-year mortgage, represented by G_Woodson, is included with the house:

G_Woodson = new Owner("Glenn Woodson",38,20);
500South5th = new House(2, 1, 1, 1700, G_Woodson)

The properties of G_Woodson are included as part of 500South5th:

500South5th.bedrooms
500South5th.bathrooms
500South5th.floors
500South5th.squareFeet
500South5th.G_Woodson.name
500South5th.G_Woodson.age
500South5th.G_Woodson.mortgageLength

Operators

An operator performs a function on one or more operands or variables. Operators are divided into two basic classes: binary and unary. Binary operators need two operands and unary operators need a single operand.

For example, addition is a binary operand:

sum = 1 + 5

Unary operands are often used to update counters. The following example increases the counter variable by 1:

counter++

Properties

Properties are used to describe an object or its current state. A property is defined by assigning it a value. The value can be assigned by the browser, the program, or as the user interacts with the page.

Several properties in JavaScript contain constants-values that never change. These are items such as the value of Pi (P) or Euler's constant (E). Other items change from page to page but can't be changed, such as form elements.

Scripts

One or more JavaScript commands can be enclosed in a <SCRIPT> tag. The advent of several scripting languages has made it necessary to identify for the browser which language is being used. For JavaScript, the syntax is:

<SCRIPT LANGUAGE="JavaScript">
<!--
...Statements...
// -->
</SCRIPT>

The use of the LANGUAGE attribute is still optional in Netscape browsers, but this could change if other languages, such as Microsoft's VBScript, are implemented.

Note the use of HTML comment tags, <!--