Full HTML for

Basic foilset Overview of Basic JavaScript -- Web Client Scripting Language

Given by Tom Scavo,Geoffrey C. Fox at Jackson State CSC499 on Fall Semester 97. Foils prepared 1 Dec 97
Outside Index Summary of Material

Java vs. JavaScript
Simple motivating examples
Event handling and scripting
Language features and syntax
JavaScript object model
Built-in objects and functions
Cookies and tainting
LiveConnect and LiveWire

Table of Contents for full HTML of Overview of Basic JavaScript -- Web Client Scripting Language

 Denote Foils where Image Critical
Denote Foils where Image has important information
Denote Foils where HTML is sufficient
1 JavaScript A Web-Client Scripting Language
2 Outline
3 General Remarks
4 Version History
5 Java vs. JavaScript
6 PPT Slide
7 Performance Issues
8 JavaScript Scripts
9 "Hello World" Example
10 "Hello World" Example (cont'd)
11 Form Example
12 Form Example (cont'd)
13 Events
14 Event Handlers
15 PPT Slide
16 Event Handler Examples
17 JavaScript URLs
18 The <SCRIPT> Tag
19 PPT Slide
20 JavaScript Syntax
21 Variables
22 Operators
23 Expressions
24 Statements
25 The if Statement
26 The for Statement
27 The while Statement
28 The with Statement
29 JavaScript Object Model
30 JavaScript Object Hierarchy
31 Object Referencing
32 Window and Frame Objects
33 Window Properties
34 Window Properties (cont'd)
35 Frame Properties
36 Frame Example
37 PPT Slide
38 Frame Example (cont'd)
39 Frameset Documents
40 Window and Frame Methods
41 History Object
42 Location Object
43 Document Object
44 Document Properties
45 PPT Slide
46 Document Methods
47 Form Objects
48 Form Properties
49 Form Methods
50 Navigator Objects
51 MimeType Objects
52 Plugin Objects
53 Built-in Objects
54 Array Objects
55 Array Methods
56 PPT Slide
57 HTML-reflected Arrays
58 Boolean Objects
59 Date Objects
60 Date Methods
61 Function Objects
62 Function Arguments
63 Math Objects
64 Math Properties
65 Math Methods
66 String Objects
67 String Methods
68 User-defined Objects
69 PPT Slide
70 PPT Slide
71 LiveWire

Outside Index Summary of Material

HTML version of Basic Foils prepared 1 Dec 97

Foil 1 JavaScript A Web-Client Scripting Language

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Tom Scavo and Geoffrey Fox
Northeast Parallel Architectures Center
Syracuse University
111 College Place
Syracuse, NY 13244-4100
http://www.npac.syr.edu/projects/tutorials/JavaScript/
HTML version of Basic Foils prepared 1 Dec 97

Foil 2 Outline

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Java vs. JavaScript
Simple motivating examples
Event handling and scripting
Language features and syntax
JavaScript object model
Built-in objects and functions
Cookies and tainting
LiveConnect and LiveWire
HTML version of Basic Foils prepared 1 Dec 97

Foil 3 General Remarks

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
JavaScript (originally called LiveScript) is an interpreter for Web documents
Since it is client-side software, JavaScript facilitates rapid prototyping and is more responsive than CGI
JavaScript is particularly useful for frameset documents and HTML forms
Reference: JavaScript, The Definitive Guide by David Flanagan (2nd ed, O'Reilly, 1997)
HTML version of Basic Foils prepared 1 Dec 97

Foil 4 Version History

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
JavaScript 1.0 debuted in NN 2.0
JavaScript 1.1 appeared in NN 3.0
NN 4.0 (aka Communicator) supports JavaScript 1.2
MSIE 3.0 introduced JScript 2.0, a subset of JavaScript 1.1
JScript 3.0 is supported in MSIE 4.0
HTML version of Basic Foils prepared 1 Dec 97

Foil 5 Java vs. JavaScript

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Sun's Java is fast becoming a broad industry standard
Java is well designed and documented
Java is object-oriented with (single) inheritance
JavaScript is primarily supported by Netscape
JavaScript has neither of these qualities
JavaScript is object-based with no class structure
HTML version of Basic Foils prepared 1 Dec 97

Foil 6 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Java vs. JavaScript (cont'd)
Java applets are distinct from HTML
Java is strongly typed with static (compile-time) binding
Java bytecodes are interpreted (or "Just In Time" compiled) on the client
JavaScript is tightly coupled with HTML
JavaScript is loosely typed with dynamic (run-time) binding
high-level JavaScript source code is interpreted on the client
HTML version of Basic Foils prepared 1 Dec 97

Foil 7 Performance Issues

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Typically, up to 106 C instructions may be executed in a few milliseconds
Java interpeter is roughly 50 times slower than C
Java "Just In Time" compiler is roughly 2–8 times slower than C
Perl is 500 times slower than C
JavaScript is 5000 times slower than C
HTML version of Basic Foils prepared 1 Dec 97

Foil 8 JavaScript Scripts

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A script is enclosed in a <SCRIPT> container: <SCRIPT LANGUAGE="JavaScript"> ... </SCRIPT>
Scripts may be put in the <BODY> or the <HEAD>, depending on your needs
Use <NOSCRIPT>...</NOSCRIPT> for browsers with JavaScript disabled
HTML version of Basic Foils prepared 1 Dec 97

Foil 9 "Hello World" Example

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
<HTML>
<HEAD><TITLE>An Example</TITLE></HEAD>
<BODY>
<!-- Insert HTML here -->
<SCRIPT LANGUAGE="JavaScript">
document.writeln("<H1>Hello World!</H1>");
</SCRIPT>
<!-- Insert more HTML here -->
</BODY>
</HTML>
HTML version of Basic Foils prepared 1 Dec 97

Foil 10 "Hello World" Example (cont'd)

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
There is only one JavaScript statement: document.writeln("<H1>Hello World!</H1>");
The writeln method writes its argument into the current document
The script is in the <BODY> since it writes HTML code into the document; other scripts are written in the <HEAD>
HTML version of Basic Foils prepared 1 Dec 97

Foil 11 Form Example

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
<HTML>
<HEAD><TITLE>JavaScript with Forms</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function compute() {
if ( confirm("Is this what you want?") )
aForm.result.value = eval(aForm.expr.value);
}
</SCRIPT></HEAD>
<BODY><FORM NAME="aForm"> Enter expression:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Compute!"
onClick="compute()"> <BR> Result:
<INPUT TYPE="text" NAME="result" SIZE=15>
</FORM></BODY>
</HTML>
HTML version of Basic Foils prepared 1 Dec 97

Foil 12 Form Example (cont'd)

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
confirm is a method of the Window object
eval is a built-in JavaScript function
onClick is a JavaScript event handler
Note the user-defined names of the form and text fields referred to in the script
HTML version of Basic Foils prepared 1 Dec 97

Foil 13 Events

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Events are associated with
  • forms
  • hyperlinks
  • images and image maps
  • loading and unloading of documents
  • input focus of a window or form element
JavaScript introduces event handlers to handle these events
HTML version of Basic Foils prepared 1 Dec 97

Foil 14 Event Handlers

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
HTML version of Basic Foils prepared 1 Dec 97

Foil 15 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Event Handlers (cont'd)
HTML version of Basic Foils prepared 1 Dec 97

Foil 16 Event Handler Examples

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The onLoad event handler is triggered when a page is (re)loaded: <BODY onLoad="myFunc()"> The onUnload handler is called when a page is exited
Here's another example:
<FORM
onSubmit="return check(this)">
...
</FORM>
HTML version of Basic Foils prepared 1 Dec 97

Foil 17 JavaScript URLs

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A trivial example of a JavaScript URL is javascript:alert("Hello World!")
A JavaScript URL may appear any-where an ordinary URL is expected: <A HREF="javascript:history.back()">Previous Page</A>
Navigator even has a mini-scripting environment invoked by typing javascript: into the browser's location text field
HTML version of Basic Foils prepared 1 Dec 97

Foil 18 The <SCRIPT> Tag

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
If you have two versions of a JavaScript script, you can load one or the other:
<SCRIPT LANGUAGE="JavaScript1.1">
// Ignored by Navigator 2.0:
location.replace("newVersion.html");
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
// Read by Navigator 2.0 and above
</SCRIPT>
HTML version of Basic Foils prepared 1 Dec 97

Foil 19 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The <SCRIPT> Tag (cont'd)
JavaScript code may be stored in an external file:
<SCRIPT SRC="JScode.js">
// The body of this <SCRIPT> is
// executed only if "JScode.js"
// is not found!
document.write("File not found!");
</SCRIPT>
An external file must have a .js extension and the server must be configured properly
HTML version of Basic Foils prepared 1 Dec 97

Foil 20 JavaScript Syntax

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
JavaScript syntax resembles Java and C
Braces { } are used for grouping
Quoted strings use (functionally equivalent) single or double quotes
Literal values: null, true, and false
JavaScript is case-sensitive, while HTML is not (which sometimes leads to problems!)
HTML version of Basic Foils prepared 1 Dec 97

Foil 21 Variables

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Variables (identifiers) must begin with a letter, underscore, or dollar sign:
  • var := [a-zA-Z_$][a-zA-Z0-9_$]*
Declare variables in var statements: var aNumber = 137; var aString = "1";
Embed variables in HTML attributes: <IMG SRC="&{v1};" WIDTH="&{v2};"> where v1 and v2 are JavaScript vars
HTML version of Basic Foils prepared 1 Dec 97

Foil 22 Operators

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Assignment operators: = += -= *= /= %= <<= >>= >>>= &= ^= |=
Supports the usual arithmetic operators, and also %, ++, and --
Concatenation operator: +
Bit operators: & | ^ ~ << >> >>>
Relational operators: == > >= < <= !=
Logical operators: && || !
HTML version of Basic Foils prepared 1 Dec 97

Foil 23 Expressions

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Examples:
  • sum += x; // same as sum = sum + x
  • r -= n; q++;
  • s = "temp" + 1; // assign "temp1" to s
  • phi = (1 + Math.sqrt(5))/2;
  • valid = (age > 21 && age <= 65);
An if-expression returns a value:
  • p = ( k < 0 ) ? 1/y : y;
HTML version of Basic Foils prepared 1 Dec 97

Foil 24 Statements

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
JavaScript statements include: break, continue, for, function, if, return, var, while, and with
Statements are separated by semicolons
Statement blocks delimited by braces
Comments come in two flavors: /* any text including newlines */ // comment terminated by newline
HTML version of Basic Foils prepared 1 Dec 97

Foil 25 The if Statement

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Assuming boolean variable isWhite:
if ( isWhite ) {
document.bgColor = "pink";
isWhite = false;
} else {
document.bgColor = "white";
isWhite = true;
}
The else block is optional, of course
HTML version of Basic Foils prepared 1 Dec 97

Foil 26 The for Statement

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A simple for-loop:
// Compute x^k for k > 0:
for (var y=1, i=0; i<k; i++) {
y *= x;
}
Here is another type of for-loop:
for (var prop in object) {
statements
}
HTML version of Basic Foils prepared 1 Dec 97

Foil 27 The while Statement

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A more general looping structure:
// Compute r = m % n for m,n > 0:
var r = m;
while ( r >= n ) {
r -= n;
}
break and continue in for and while loops are permitted
JavaScript supports recursion as well
HTML version of Basic Foils prepared 1 Dec 97

Foil 28 The with Statement

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
with ( someObject ) { statements }
someObject is the default object used for any unqualified object references: with ( Math ) { area = PI*r*r; // Math property PI x = r*cos(theta); // Math method cos y = r*sin(theta); // Math method sin }
HTML version of Basic Foils prepared 1 Dec 97

Foil 29 JavaScript Object Model

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
JavaScript is object-based with no classes and, hence, no inheritance
An object possesses properties as well as methods
A property is an attribute of an object
A method acts on an object
All JavaScript objects have eval, toString, and valueOf methods
HTML version of Basic Foils prepared 1 Dec 97

Foil 30 JavaScript Object Hierarchy

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
HTML version of Basic Foils prepared 1 Dec 97

Foil 31 Object Referencing

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A fully-qualified reference: window.document.myForm.myButton.value
window (often suppressed) and document are built-in object names
myForm and myButton are user-supplied object names
value is a property of the Button object
HTML version of Basic Foils prepared 1 Dec 97

Foil 32 Window and Frame Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The Window object--the top-level JavaScript object--corresponds to an autonomous browser window
A browser window may be divided into subwindows called frames
The Frame object "inherits" all of its properties and methods from Window
Each <FRAME> tag in an HTML document generates a Frame object
HTML version of Basic Foils prepared 1 Dec 97

Foil 33 Window Properties

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
window and self are synonyms for the current window
top refers to the highest-level window in a hierarchy of frames
parent refers to the next-level window or frame in a hierarchy of frames
A window may have a name: myWin = window.open(URL);
HTML version of Basic Foils prepared 1 Dec 97

Foil 34 Window Properties (cont'd)

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
An analogy with the UNIX shell:
HTML version of Basic Foils prepared 1 Dec 97

Foil 35 Frame Properties

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A Frame object also has properties called window, self, and parent
The most important property of the Frame object is the frames[] array
Each <FRAME> tag automatically creates an entry in the frames[] array
Frames may also have names, as in <FRAME NAME="upperFrame">
HTML version of Basic Foils prepared 1 Dec 97

Foil 36 Frame Example

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
<!-- File: index.html -->
<HTML>
<FRAMESET ROWS="90%,10%">
<FRAME SRC="skeleton.html"
NAME="upperFrame">
<FRAME SRC="navigate.html"
NAME="navigateFrame">
</FRAMESET>
<NOFRAMES>...</NOFRAMES>
</HTML>
HTML version of Basic Foils prepared 1 Dec 97

Foil 37 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Frame Example (cont'd)
<!-- File: skeleton.html -->
<HTML>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="category.html"
NAME="listFrame">
<FRAME SRC="titles.html"
NAME="contentFrame">
</FRAMESET>
</HTML>
HTML version of Basic Foils prepared 1 Dec 97

Foil 38 Frame Example (cont'd)

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Absolute references:
  • top.navigateFrame
  • top.upperFrame
  • top.upperFrame.contentFrame
  • top.upperFrame.listFrame
Relative references:
  • parent.upperFrame
  • parent.contentFrame
  • parent.parent.navigateFrame
In which documents are
these references valid?
HTML version of Basic Foils prepared 1 Dec 97

Foil 39 Frameset Documents

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The <FRAMESET> and <BODY> tags are mutually exclusive
No closing tag for <FRAME> is needed
A frameset document may contain a <SCRIPT> in its header
Use <NOFRAMES> inside <FRAMESET> for frames-impaired browsers
HTML version of Basic Foils prepared 1 Dec 97

Foil 40 Window and Frame Methods

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Both Window and Frame objects have blur, focus, clearTimeout, and setTimeout methods
The Window object also has alert, close, confirm, open, and prompt methods
HTML version of Basic Foils prepared 1 Dec 97

Foil 41 History Object

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
There is one History (and Location) object per window or frame
The History object is essentially an array of URLs (called history[]), which most browsers restrict access to
Two methods back() and forward() perform the same functions as the corresponding Navigator buttons
HTML version of Basic Foils prepared 1 Dec 97

Foil 42 Location Object

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The Location object corresponds to the URL of the current document
To load a new document into the current window, use the command: window.location.href = "foo.html"; or more simply window.location = "foo.html";
Location object properties: href, protocol, host, pathname, search
HTML version of Basic Foils prepared 1 Dec 97

Foil 43 Document Object

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
There is one Document object (called document) per window or frame
The Document object is a reflection of the <BODY>...</BODY> container
Document has numerous subobjects (Anchor, Applet, Embed, Area, Form, Image, Link) and property arrays (anchors, applets, embeds, forms, images, links)
HTML version of Basic Foils prepared 1 Dec 97

Foil 44 Document Properties

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A Document object has numerous color properties: alinkColor, linkColor, vlinkColor, bgColor, and fgColor
Other Document properties include lastModified and URL: with ( document ) { writeln('<TT>', URL, '</TT><BR>'); writeln('Updated: ', lastModified); }
HTML version of Basic Foils prepared 1 Dec 97

Foil 45 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Document Properties (cont'd)
To list the properties of document:
for ( var prop in document ) {
with ( document ) {
write(prop + " = ");
writeln(eval(prop), "<BR>");
}
}
Recall that the with statement qualifies all object references within its scope
HTML version of Basic Foils prepared 1 Dec 97

Foil 46 Document Methods

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The write(...) and writeln(...) methods take a comma-separated list of string expressions
The open and close methods (not to be confused with window.open and window.close) open and close a document for writing
HTML version of Basic Foils prepared 1 Dec 97

Foil 47 Form Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Every Form object is the reflection of an HTML <FORM> tag
The forms[] array may be accessed by index or name
A Form object has many subobjects, each corresponding to an HTML form element; these are reflected in the elements[] array
HTML version of Basic Foils prepared 1 Dec 97

Foil 48 Form Properties

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Form elements are reflected in the elements[] array. For example, document.forms[0].elements[1]; is the second element of the first form
Most Form properties (action, encoding, method, and target) are read/write variables, that is, these properties may be modified on-the-fly
HTML version of Basic Foils prepared 1 Dec 97

Foil 49 Form Methods

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Invoking the submit() or reset() method on a Form object has the same effect as pressing the corresponding button
The event handlers onSubmit() and onReset() may be used to override the default submit and reset actions
HTML version of Basic Foils prepared 1 Dec 97

Foil 50 Navigator Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The Navigator object contains information about the browser
Two properties are appName and appVersion
Methods include javaEnabled and taintEnabled
All windows share the same Navigator object, which is truly global
HTML version of Basic Foils prepared 1 Dec 97

Foil 51 MimeType Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The MimeType object is a subobject of the Navigator object
The mimeTypes[] array contains an entry for each MIME type supported by the browser
Properties of MimeType include description, type, and suffixes
The property enabledPlugin refers to a Plugin object
HTML version of Basic Foils prepared 1 Dec 97

Foil 52 Plugin Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Like MimeType, the Plugin object is a subobject of the Navigator object
The plugins[] array contains an entry for each installed plugin
Each Plugin object is an array of MimeType objects. For example, navigator.plugins[0][0].type is a MIME type supported by plugins[0]
HTML version of Basic Foils prepared 1 Dec 97

Foil 53 Built-in Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
JavaScript has ten built-in objects:
plus a Math object with no constructor
An instance object is created with new:
  • var myImage = new Image();
  • var answers = new Array(0,1,0);
HTML version of Basic Foils prepared 1 Dec 97

Foil 54 Array Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
In NN 3.0 (and also in 2.0!), we write: var states = new Array(50); states[0] = "Alabama"; states[1] = "Alaska"; // etc.
Every array has a length property: n = states.length; // n = 2
Two-dimensional arrays are allowed: var acodes = new Array(50); acodes[0] = new Array(205,334);
HTML version of Basic Foils prepared 1 Dec 97

Foil 55 Array Methods

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
JavaScript 1.1 supports some powerful array methods:
  • myArray.sort(compFunc) sorts myArray according to compFunc (a user-defined, boolean-valued function of two arguments)
  • myArray.join(sep) returns a string of elements separated by sep
  • myArray.reverse() reverses the order of the elements in myArray
HTML version of Basic Foils prepared 1 Dec 97

Foil 56 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Built-in Arrays
JavaScript has thirteen built-in arrays, each with its own length property:
Plus the history array--the only one whose name does not end in "s"!
HTML version of Basic Foils prepared 1 Dec 97

Foil 57 HTML-reflected Arrays

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Plus the elements array, whose parent is the Form object
HTML version of Basic Foils prepared 1 Dec 97

Foil 58 Boolean Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
To create a false Boolean object, type: new Boolean() new Boolean(0) new Boolean(null) new Boolean("") new Boolean(false)
All other values create a Boolean object with initial value true!
HTML version of Basic Foils prepared 1 Dec 97

Foil 59 Date Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
A Date object does not have a corresponding HTML construct
The Date constructor has many forms: today = new Date(); xmas = new Date(97, 12, 25); birthday = new Date("April 6, 1952");
The Date() constructor may also be used as a function with no arguments
HTML version of Basic Foils prepared 1 Dec 97

Foil 60 Date Methods

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The Date object has no properties; access to date and time fields is via numerous "set" and "get" methods: xmas.setYear(xmas.getYear()+1);
There are two "static" Date methods:
  • Date.parse( date_string )
  • Date.UTC( year, month, day )
Both convert their argument(s) to milliseconds past January 1, 1970 GMT
HTML version of Basic Foils prepared 1 Dec 97

Foil 61 Function Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Every function statement gives rise to a Function object
Function objects are also created with the new operator: window.onload = new Function( "document.bgColor='white'");
Function objects may be anonymous
HTML version of Basic Foils prepared 1 Dec 97

Foil 62 Function Arguments

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Functions may take an arbitary number of arguments: function User() { this.name = User.arguments[0]; this.group = User.arguments[1]; this.email = new Array(); n = User.arguments.length; for (var i = 2; i < n; i++) this.email[i-2]=User.arguments[i]; }
Note: the arguments array is built in
HTML version of Basic Foils prepared 1 Dec 97

Foil 63 Math Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Math is the only built-in object that does not have a constructor
Its sole purpose is to provide constants (properties) and functions (methods)
The with statement is particularly useful in conjunction with Math: with (Math) { x = r*cos(PI/2); y = r*sin(PI/2); }
HTML version of Basic Foils prepared 1 Dec 97

Foil 64 Math Properties

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
These properties are primarily for convenience:
HTML version of Basic Foils prepared 1 Dec 97

Foil 65 Math Methods

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Each method in the last column requires two arguments
HTML version of Basic Foils prepared 1 Dec 97

Foil 66 String Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
String objects are created as in var myStr = new String("NPAC"); or more simply with var myStr = "NPAC";
Actually, the latter is a string literal, but these are automatically converted to objects when necessary
Characters are indexed starting with 0
HTML version of Basic Foils prepared 1 Dec 97

Foil 67 String Methods

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
The String object has one property: var n = myStr.length;
There are two groups of methods:
  • string markup (anchor, big, bold, etc.) for writing formatted strings into HTML documents
  • string manipulation (charAt, indexOf, substring, etc.)
HTML version of Basic Foils prepared 1 Dec 97

Foil 68 User-defined Objects

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Arbitrary objects are defined with the function statement: function car(make, model) { this.make = make; this.model = model; this.color = null; this.setColor = new Function("color", "this.color = color"); }
Instantiate an object with new: myCar = new Car("Ford", "Explorer"); myCar.setColor("red");
HTML version of Basic Foils prepared 1 Dec 97

Foil 69 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
User-defined Methods
Methods may be added to objects: // Does an array contain element x ? function contains(x) { for (var i=0; i<this.length; i++) { if (this[i] == x) return true; } return false; }
Add the method to the Array object with the prototype property: Array.prototype.contains = contains;
HTML version of Basic Foils prepared 1 Dec 97

Foil 70 PPT Slide

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
Built-in Functions
JavaScript has seven built-in functions:
Plus the boolean function isNaN, which is used in conjunction with the parsing functions
HTML version of Basic Foils prepared 1 Dec 97

Foil 71 LiveWire

From Overview of Basic JavaScript -- Web Client Scripting Language Jackson State CSC499 -- Fall Semester 97. *
Full HTML Index
LiveWire lets developers write CGI programs in JavaScript
It consists of two components: a compiler and a server extension
LiveWire is a non-standard alternative to CGI
© Northeast Parallel Architectures Center, Syracuse University, npac@npac.syr.edu

If you have any comments about this server, send e-mail to webmaster@npac.syr.edu.

Page produced by wwwfoil on Sun Nov 29 1998