Recall, JavaScripts may be multiple and appear in either the <HEAD> or <BODY>, and are generally of the form:

To link to a JavaScript file:

III. JavaScript Arrays

Recall in Introduction to JavaScript we described simple data types: strings, numbers, and Boolean variables which were used to store a single variable. Most "industrial strength" programs process large numbers of variables for which arraysare essential.

Syntax for creating a JavaScript array using the Array constructor includes:

var a = new Array();

This creates an empty array with no elements.

The second method for using the Array constructor explicitly specifies values for the first n elements of the array:

var b = new Array(5,4,3,2,1,"testing", "testing")

Here each argument in the list specifies and element value and may be of any type.

The third method for using the constructor to create an array is:

var c = new Array(10)

This creates an array of length 10 with undefined values, but with the length property of value 10.

Arrays may also be created using assignment of array literals:

var primes = [2,3,5,7,11];

var d = ["a", true, 3.14];

Note again that JavaScript's "weak typing" allows the mixing of data types.

Arrays in JavaScript are sparce(unlike arrays in C and Java). Thus, the code:

a[0] = 1;

a[1000] = "Element one thousand";

will require only two storage locations in memory, even though

a.length = 1001

Array Methods

JavaScript supports about a dozen methods for operating on arrays. Among the more useful are:

Array.join()converts all the elements of an array to a string and concatenates them.

var a = [10, 20, 30]; // Create an array

s = a.join(); // Returns string "10,20,30"

t = a.join(""); // Returns string "102030"

r = a.join(" "); // Returns string "10 20 30"

Note: the default separator for the Array.join() method is the comma, ",".

Array.reverse() reverses the order of the elements of an array. Operating on the above a array, the following code produces:

s = a.reverse(" "); // returns 30 20 10

t = a.reverse(); // returns 30,20,10

Note: again, the default separator for the Array.reverse() method is the comma, but the values returned are the same data type as the elements of array a.

Array.sort() sorts elements of an array into alphabetical order when called with no arguments. If elements are numerical it converts them to strings and then sorts them.

b=new Array("banana", "cherry", "apple");

b.sort(); // returns "apple","banana","cherry"

var c=[33, 4, 1111, 222];

c.sort(); // returns 1111,222,33,4

See, both array b and array c are sorted "in place" alphabetically, but the type of c remains numerical.

How could we sort the original c array into increasing numerical order? We need a comparison function as the argument to sort(). The following code will do it:

var c=[33, 4, 1111, 222];

c.sort(function(c,d) {

return c - d;

}); // returns 4,33,222,1111

The function(c,d) returns a negative number if c < d (i.e., in correct order), a zero if c = d (also correct order), and a positive number if c > d. The sort function does a type of bubble sort, with the initial arguments (c,d) = (c[3],c[0]) respectively. To understand the operation of the sort function, it is useful to insert alert( c + " " + d); just ahead of the return c - d statement.

Array.concat() return the original array augmented by the arguments of concat. For instance, the following code produces:

var a = [1,2,3];

a.concat(4,5); // returns [1,2,3,4,5]

a.concat([4,5]); // returns [1,2,3,4,5]

a.concat([4,5],[6,7]); // returns [1,2,3,4,5,6,7]

a.concat(4,[5,[6,7]]); // returns [1,2,3,4,5,[6,7]]

Note how Array.concat() flattens arrays but does not recursively flattens arrays of arrays.

3. New object literalscircle and homer are created as a comma-separated list of property specifications enclosed within curly braces.

4. The new function object square(x) is created by the new operator working with the Function() constructor.

5. Notice how the listPropertyNames function correctly lists the properties of the circle, homer, and square objects.

6. Notice how correct values calculated by the square function are reported by the alert and document.write output methods.

7. Notice how the occupation property of homer is correctly referenced by homer.occupation and reported with a document.write.

8. Notice how the properties of background objects window and document are reported.

9. Finally, notice how typeof reports that homer is of type object.

V. Building JavaScript Classes using Prototypes

One feature of OOP is the concept of class and the efficiencies possible through inheritance of the properties of the class prototype by instances of the class. Classes in JavaScript are defined through the use of the prototype object. Consider how we can define the Circle class with properties of area and circumference.

VI. JavaScript Built-In Event Methods

JavaScript supports a large array of Events which are detected by Event Handler methods. The problem is that each event is sensitive to only certain HTML elements. Thus, for instance, the Click event, detected by the onClick event handler can only be used with form elements and links.

Event

Applies to

Occurs when

Event Handler

Abort

images

User aborts the loading of an image (for example by clicking a link or clicking the Stop button)

Example 5: Client-Side Search Engine

A typical database application involves sophisticated search of a client-side database. Assume your database is a JavaScript array of WWW addresses of essential sites (like a bookmark list) in the format: