Full HTML for

Basic foilset Overview of Advanced JavaScript -- Web Scripting Language

Given by Tom Scavo,Geoffrey C. Fox at CPS616 Technologies of the Information Age on Spring Semester 98. Foils prepared 20 April 98
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 security
LiveConnect and LiveWire

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

 Denote Foils where Image Critical
Denote Foils where Image has important information
Denote Foils where HTML is sufficient
denotes presence of Additional linked information which is greyed out if missing
1 JavaScript A Web Scripting Language
2 Outline
3 JavaScript Resources for Foil 3 General Remarks
4 Standard ECMA-262 Version History
5 Whats New in JavaScript 1.2 JavaScript 1.2
6 Whats New in JScript 3.0 JScript 3.0
7 Java vs. JavaScript
8 Java vs. JavaScript (cont'd)
9 Performance Issues
10 JavaScript Scripts for Foil 10 JavaScript Scripts
11 "Hello World" Example
12 Simple scripts for Foil 12 "Hello World" Example (cont'd)
13 Form Example
14 Form Example Form Example (cont'd)
15 Authoring Guide, Handling Events Events
16 Event Handlers for Foil 16 Event Handlers I
17 Event Handlers for Foil 17 Event Handlers II
18 New Event Handlers for Foil 18 Event Handlers III
19 Event Handler Examples
20 JavaScript URLs for Foil 20 JavaScript URLs
21 The <SCRIPT> Tag
22 The SRC Attribute The <SCRIPT> Tag (cont'd)
23 JavaScript Syntax for Foil 23 JavaScript Syntax
24 JavaScript Variables for Foil 24 Variables
25 Operators for Foil 25 Operators
26 Expressions for Foil 26 Expressions
27 Statements for Foil 27 Statements
28 IF-THEN-ELSE for Foil 28 The if Statement
29 The switch Statement The switch Statement
30 Iteration and Recursion for Foil 30 The for Statement
31 General Iteration for Foil 31 The while Statement
32 The do...while Statement The do...while Statement
33 The with Statement
34 JavaScript Object Model for Foil 34 JavaScript Object Model
35 JavaScript Objects for Foil 35 JavaScript Object Hierarchy
36 Object Referencing Object Referencing
37 Authoring Guide, Using Windows and Frames Window and Frame Objects
38 Window Properties for Foil 38 Window Properties
39 Window Properties (cont'd)
40 Frame Properties for Foil 40 Frame Properties
41 Frame Example I
42 Frame Example II
43 Frame Example III
44 Frameset Documents for Foil 44 Frameset Documents
45 Window and Frame Methods for Foil 45 Window and Frame Methods
46 History Properties and Methods for Foil 46 History Object
47 The Location Object for Foil 47 Location Object
48 Document Object
49 Document Properties for Foil 49 Document Properties
50 Document Properties for Foil 50 Document Properties (cont'd)
51 Document Methods for Foil 51 Document Methods
52 Form Objects for Foil 52 Form Objects
53 Form Properties for Foil 53 Form Properties
54 Form Methods
55 Layers for Foil 55 Layer Objects
56 Navigator Object for Foil 56 Navigator Objects
57 Displaying All MimeType Objects MimeType Objects
58 Plugins for Foil 58 Plugin Objects
59 Authoring Guide, Predefined Core Objects and Functions Built-in Objects
60 Array Objects for Foil 60 Array Objects
61 Array Methods Array Methods
62 Built-in Arrays
63 HTML-reflected Arrays
64 Boolean Objects for Foil 64 Boolean Objects
65 The Date Object for Foil 65 Date Objects
66 Date Methods for Foil 66 Date Methods
67 Function Objects for Foil 67 Function Objects
68 Function Arguments
69 Image Objects Image Objects
70 Animation for Foil 70 Image Animation
71 Math Objects
72 Math Properties Math Properties
73 Math Methods for Foil 73 Math Methods
74 Number Objects
75 Number Properties
76 Number Properties (cont'd)
77 Object Objects
78 String Objects
79 String Methods for Foil 79 String Methods
80 The Event Object Event Object
81 The Event Object for Foil 81 Event Object (cont'd)
82 RegExp Object
83 RegExp Object RegExp Object (cont'd)
84 Regular Expressions for Foil 84 RegExp Object (cont'd)
85 A User-defined Object User-defined Objects
86 User-defined Methods
87 User-defined Methods User-defined Methods (cont'd)
88 The prototype Property The prototype Property
89 Another User-defined Object
90 Built-in Functions for Foil 90 Built-in Functions
91 Parsing Functions for Foil 91 Parsing Functions
92 The eval() Function Other Functions
93 Authoring Guide, Netscape Cookies Cookies
94 Authoring Guide, Using Cookies Cookies (cont'd)
95 Cookies Cookies (cont'd)
96 Authoring Guide, JavaScript Security JavaScript Security
97 Same Origin Policy
98 The domain Property
99 Data Tainting
100 Signed Scripts
101 Signed Scripts (cont'd)
102 LiveAudio and LiveConnect for Foil 102 LiveConnect
103 LiveConnect for Foil 103 LiveConnect (cont'd)
104 LiveWire

Outside Index Summary of Material

HTML version of Basic Foils prepared 20 April 98

Foil 1 JavaScript A Web Scripting Language

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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/
http://www.npac.syr.edu/users/gcf/javascriptapril98/
HTML version of Basic Foils prepared 20 April 98

Foil 2 Outline

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 security
LiveConnect and LiveWire
HTML version of Basic Foils prepared 20 April 98

Foil 3 General Remarks

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index JavaScript Resources for Foil 3
JavaScript (originally called LiveScript) is an interpreter for Web documents
Client-side JavaScript facilitates rapid prototyping and is more responsive than CGI
JavaScript is particularly useful for frameset documents and HTML forms
Refs: JavaScript, The Definitive Guide by David Flanagan (2nd ed, O'Reilly, 1997); The JavaScript Bible by Danny Goodman (3rd ed, IDG, 1998)
HTML version of Basic Foils prepared 20 April 98

Foil 4 Version History

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Standard ECMA-262
JavaScript 1.0 debuted in NN 2.0 (Feb 96)
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
Both JavaScript 1.2 and JScript 3.0 are ECMA-compliant [ECMA Standard 262]
HTML version of Basic Foils prepared 20 April 98

Foil 5 JavaScript 1.2

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Whats New in JavaScript 1.2
New features in JavaScript 1.2 (NN4.0):
  • Event object and event capturing
  • Ten new event handlers
  • Nested functions; new Number() and String() functions
  • New statements: switch and do...while
  • Many new methods and properties (especially for Window, String, and Array objects)
  • Perl4-compatible regular expressions
  • Signed script security model
HTML version of Basic Foils prepared 20 April 98

Foil 6 JScript 3.0

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Whats New in JScript 3.0
New features in JScript 3.0 (MSIE4.0):
  • Conditional execution (meta-statements)
  • New statements: switch and do...while
  • Two new identity operators (=== and !==)
  • Perl4-compatible regular expressions
  • Debugger support
JScript documentation is scarce, however
HTML version of Basic Foils prepared 20 April 98

Foil 7 Java vs. JavaScript

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 8 Java vs. JavaScript (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
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 20 April 98

Foil 9 Performance Issues

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Typically, up to 106 C instructions may be executed in a few milliseconds
A 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 20 April 98

Foil 10 JavaScript Scripts

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index JavaScript Scripts for Foil 10
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 JavaScript-disabled browsers
HTML version of Basic Foils prepared 20 April 98

Foil 11 "Hello World" Example

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

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

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Simple scripts for Foil 12
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>
Scripts may be hidden from old browsers
HTML version of Basic Foils prepared 20 April 98

Foil 13 Form Example

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
<HTML>
<HEAD><TITLE>JavaScript with Forms</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function compute() {
if ( window.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 20 April 98

Foil 14 Form Example (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Form Example
confirm is a method of the Window object
eval is a built-in JavaScript function (in NN2)
onClick is a JavaScript event handler
Note the user-defined names (aForm, expr, result) referred to in the script
HTML version of Basic Foils prepared 20 April 98

Foil 15 Events

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Authoring Guide, Handling Events
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 20 April 98

Foil 16 Event Handlers I

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Event Handlers for Foil 16
HTML version of Basic Foils prepared 20 April 98

Foil 17 Event Handlers II

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Event Handlers for Foil 17
HTML version of Basic Foils prepared 20 April 98

Foil 18 Event Handlers III

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index New Event Handlers for Foil 18
JavaScript 1.2 adds ten new event handlers
Three existing handlers (onClick, onMouseOut, and onMouseOver) have new properties
All these events are supported by IE4.0 except onDragDrop
HTML version of Basic Foils prepared 20 April 98

Foil 19 Event Handler Examples

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
The onLoad event handler is triggered when a page is loaded or reloaded : <BODY onLoad="aFunction()"> 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 20 April 98

Foil 20 JavaScript URLs

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index JavaScript URLs for Foil 20
A trivial example of a JavaScript URL is javascript:alert("Hello World!")
A JavaScript URL may appear anywhere 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 20 April 98

Foil 21 The <SCRIPT> Tag

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 22 The <SCRIPT> Tag (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The SRC Attribute
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 20 April 98

Foil 23 JavaScript Syntax

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index JavaScript Syntax for Foil 23
JavaScript syntax resembles Java and C
Braces { } are used for grouping
Use single or double quotes (they are equivalent) around strings
Literals: null, true, and false
JavaScript is case-sensitive while HTML is not (which sometimes leads to problems!)
HTML version of Basic Foils prepared 20 April 98

Foil 24 Variables

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index JavaScript Variables for Foil 24
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 20 April 98

Foil 25 Operators

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Operators for Foil 25
Assignment operators: = += -= *= /= %= <<= >>= >>>= &= ^= |=
Supports the usual arithmetic operators and %, ++, and --
Concatenation operator: +
Bit operators: & | ^ ~ << >> >>>
Relational operators: == > >= < <= !=
Logical operators: && || !
HTML version of Basic Foils prepared 20 April 98

Foil 26 Expressions

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Expressions for Foil 26
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 20 April 98

Foil 27 Statements

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Statements for Foil 27
JavaScript statements include: break, continue, do, for, function, if, return, switch, var, while, and with
Multiple statements on one line are separated by semicolons
Statement blocks are delimited by braces
Comments come in two flavors: /* any text including newlines */ // comment terminated by newline
HTML version of Basic Foils prepared 20 April 98

Foil 28 The if Statement

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index IF-THEN-ELSE for Foil 28
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 20 April 98

Foil 29 The switch Statement

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The switch Statement
The switch statement is new is JS 1.2: switch ( fruit ) { case "oranges": price = 0.59; break; case "apples": price = 0.32; break; case "bananas": price = 0.48; break; default: price = null; }
HTML version of Basic Foils prepared 20 April 98

Foil 30 The for Statement

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Iteration and Recursion for Foil 30
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 20 April 98

Foil 31 The while Statement

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index General Iteration for Foil 31
A more general looping structure:
// Compute r = m % n for m,n > 0:
var r = m;
while ( r >= n ) {
r -= n;
}
break, labeled break, and continue are permitted in for and while loops
JavaScript supports recursion as well
HTML version of Basic Foils prepared 20 April 98

Foil 32 The do...while Statement

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The do...while Statement
A do...while loop tests its condition at the bottom of the loop: do { statements } while ( condition );
In this case, the loop body is executed at least one time
This loop is new in JavaScript 1.2
HTML version of Basic Foils prepared 20 April 98

Foil 33 The with Statement

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 34 JavaScript Object Model

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index JavaScript Object Model for Foil 34
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 20 April 98

Foil 35 JavaScript Object Hierarchy

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index JavaScript Objects for Foil 35
HTML version of Basic Foils prepared 20 April 98

Foil 36 Object Referencing

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Object Referencing
A fully-qualified reference: window.document.myForm.myButton.value
window (often suppressed) and document are built-in object instances
myForm and myButton are user-supplied object names
value is a property of the Button object (and most other form elements)
HTML version of Basic Foils prepared 20 April 98

Foil 37 Window and Frame Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Authoring Guide, Using Windows and Frames
A Window object--the top-level JavaScript object--is the reflection of a <BODY> or <FRAMESET> tag
A browser window may be divided into subwindows called frames
A Frame object--the reflection of a <FRAME> tag--"inherits" all of its properties and methods from the Window object
HTML version of Basic Foils prepared 20 April 98

Foil 38 Window Properties

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Window Properties for Foil 38
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 previous window or frame in a hierarchy of frames
A window may have a name: myWin = window.open(URL);
Note: The opener property is not supported in NN2.
HTML version of Basic Foils prepared 20 April 98

Foil 39 Window Properties (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
An analogy with the UNIX shell:
HTML version of Basic Foils prepared 20 April 98

Foil 40 Frame Properties

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Frame Properties for Foil 40
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 20 April 98

Foil 41 Frame Example I

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 42 Frame Example II

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
<!-- 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 20 April 98

Foil 43 Frame Example III

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 44 Frameset Documents

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Frameset Documents for Foil 44
The <FRAMESET> and <BODY> tags are mutually exclusive
No closing tag for <FRAME> is needed
A frameset document may contain a <SCRIPT> in its <HEAD>
Use <NOFRAMES> inside <FRAMESET> for frames-impaired browsers
HTML version of Basic Foils prepared 20 April 98

Foil 45 Window and Frame Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Window and Frame Methods for Foil 45
Both Window and Frame objects have blur, focus, clearTimeout, and setTimeout methods
The Window object also has alert, close, confirm, open, and prompt methods. For example, var msg = "The alert() method\n"; msg += " is handy for debugging."; window.alert( msg );
HTML version of Basic Foils prepared 20 April 98

Foil 46 History Object

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index History Properties and Methods for Foil 46
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 20 April 98

Foil 47 Location Object

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The Location Object for Foil 47
The Location object corresponds to the URL of the current document
To load a new document into the current window, use: window.location.href = "foo.html"; or simply window.location = "foo.html";
Location object properties: href, protocol, host, pathname, search
HTML version of Basic Foils prepared 20 April 98

Foil 48 Document Object

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
There is one Document object (called document) per window or frame
Document has numerous subobjects (Anchor, Applet, Embed, Area, Form, Image, Link, Layer) and property arrays (anchors[], applets[], embeds[], forms[], images[], links[], layers[])
HTML version of Basic Foils prepared 20 April 98

Foil 49 Document Properties

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Document Properties for Foil 49
A Document object has the following 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 20 April 98

Foil 50 Document Properties (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Document Properties for Foil 50
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 20 April 98

Foil 51 Document Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Document Methods for Foil 51
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, but these are seldom used explicitly
HTML version of Basic Foils prepared 20 April 98

Foil 52 Form Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Form Objects for Foil 52
Every Form object is the reflection of an HTML <FORM> tag
The forms[] array may be indexed by integer or name (i.e., forms[0] or forms['myForm'] )
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 20 April 98

Foil 53 Form Properties

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Form Properties for Foil 53
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 20 April 98

Foil 54 Form Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 55 Layer Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Layers for Foil 55
Think of a Layer object (new in JS 1.2) as a dynamic document within a document
Each <LAYER> tag generates a Layer object and a corresponding element in the layers[] array
Layers have many methods and properties (most of which may be modified on-the-fly)
HTML version of Basic Foils prepared 20 April 98

Foil 56 Navigator Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Navigator Object for Foil 56
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 20 April 98

Foil 57 MimeType Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Displaying All MimeType Objects
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 20 April 98

Foil 58 Plugin Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Plugins for Foil 58
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 20 April 98

Foil 59 Built-in Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Authoring Guide, Predefined Core Objects and Functions
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 20 April 98

Foil 60 Array Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Array Objects for Foil 60
In NN 3.0 (and also in 2.0!), 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 20 April 98

Foil 61 Array Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Array Methods
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 20 April 98

Foil 62 Built-in Arrays

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Built-in Arrays
JavaScript has numerous 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 20 April 98

Foil 63 HTML-reflected Arrays

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Plus the elements array, whose parent is the Form object
HTML version of Basic Foils prepared 20 April 98

Foil 64 Boolean Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Boolean Objects for Foil 64
To create a false Boolean object, use: new Boolean() new Boolean(0) new Boolean(null) new Boolean("") new Boolean(false) or simply use the literal false
All other values create a Boolean object with initial value true!
HTML version of Basic Foils prepared 20 April 98

Foil 65 Date Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The Date Object for Foil 65
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
Note: The Date object is buggy in NN2
HTML version of Basic Foils prepared 20 April 98

Foil 66 Date Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Date Methods for Foil 66
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 20 April 98

Foil 67 Function Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Function Objects for Foil 67
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 20 April 98

Foil 68 Function Arguments

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 69 Image Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Image Objects
Images may be pre-loaded; they should be cached in the <HEAD>, especially if they are to be used in the <BODY>: images = new Array( num ); for ( var i = 0; i < num; i++ ) { images[i] = new Image(); images[i].src = "image"+ i +".gif"; }
This code loads files "image1.gif", "image2.gif", and so on
HTML version of Basic Foils prepared 20 April 98

Foil 70 Image Animation

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Animation for Foil 70
Now suppose we have the tag <IMG NAME=img> in the <BODY>. The following recursive method animates the cached images: var n = 0; function animate() { document.img.src = images[n].src; n = (n + 1) % images.length; id = setTimeout("animate()", 250); }
HTML version of Basic Foils prepared 20 April 98

Foil 71 Math Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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 20 April 98

Foil 72 Math Properties

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Math Properties
These properties are primarily for convenience:
HTML version of Basic Foils prepared 20 April 98

Foil 73 Math Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Math Methods for Foil 73
Each method in the middle column requires two args
HTML version of Basic Foils prepared 20 April 98

Foil 74 Number Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
There is a Number constructor, but it is rarely used since JavaScript automatically converts numeric literals to numeric objects when necessary
Some useful properties are provided, however: MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY, and POSITIVE_INFINITY
HTML version of Basic Foils prepared 20 April 98

Foil 75 Number Properties

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Number.MIN_VALUE is the smallest positive number representable
Number.POSITIVE_INFINITY is returned by any operation that is greater than Number.MAX_VALUE
Number.NEGATIVE_INFINITY is returned by any operation that is less than -Number.MAX_VALUE
HTML version of Basic Foils prepared 20 April 98

Foil 76 Number Properties (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Number.NaN is returned by parseInt() and parseFloat() when the parsing operation fails
An attempt to divide by zero also returns Number.NaN
Test for Number.NaN using the boolean function isNaN()
Note: NN2.0 and MSIE3.0 do not support Number.NaN!
HTML version of Basic Foils prepared 20 April 98

Foil 77 Object Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
The Object constructor converts its argument (any numeric, boolean, or string literal) to a JavaScript object: var s = new Object( "NPAC" ); is equivalent to var s = new String( "NPAC" ); This is usually unnecessary, however
HTML version of Basic Foils prepared 20 April 98

Foil 78 String Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
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
String characters are indexed starting with 0
HTML version of Basic Foils prepared 20 April 98

Foil 79 String Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index String Methods for Foil 79
The String object has one property: var n = myStr.length;
There are two groups of methods:
  • string markup methods (anchor, big, bold, etc.) for writing formatted strings into HTML documents
  • string manipulation methods (charAt, indexOf, substring, etc.)
Six new methods added in JavaScript 1.2
HTML version of Basic Foils prepared 20 April 98

Foil 80 Event Object

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The Event Object
An Event object (new in JavaScript 1.2) is passed to an event handler when an event occurs
There are 23 types of events, one for each handler: for example, a Click event is passed to the onClick handler when a link or form element is clicked
An Event object has up to 11 properties
HTML version of Basic Foils prepared 20 April 98

Foil 81 Event Object (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The Event Object for Foil 81
Properties of an Event object:
The Click object, for example, supports all but the data property (although the *X and *Y properties are undefined for button clicks)
HTML version of Basic Foils prepared 20 April 98

Foil 82 RegExp Object

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
An RegExp object (new in JavaScript 1.2) corresponds to a regular expression
There are two syntaxes: regexp1 = new RegExp( "pattern" ); regexp2 = /pattern/;
The latter "compiles" the pattern: regexp2 == regexp1.compile("pattern")
The RegExp object has two other methods: exec( str ) and test( str )
HTML version of Basic Foils prepared 20 April 98

Foil 83 RegExp Object (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index RegExp Object
Here are some examples: function isDigit( str ) { var regexp = /^[0-9]*$/; return regexp.test( str ); } function isSSN( str ) { // match 999999999 or 999-99-9999 var regexp = /^(\d{9}|\d{3}-\d{2}-\d{4})$/; return regexp.test( str ); }
HTML version of Basic Foils prepared 20 April 98

Foil 84 RegExp Object (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Regular Expressions for Foil 84
String methods have been added to JavaScript 1.2 to handle regular expressions: search( regexp ); // like test(...) match( regexp ); // like exec(...) replace( regexp, newsubstr );
match(...) returns an array of strings
The split(...) method now takes a regular expression as optional parameter: var strArray = str.split( /\s*;\s*/ );
HTML version of Basic Foils prepared 20 April 98

Foil 85 User-defined Objects

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index A User-defined Object
Objects are defined with the function statement. The following Circle object, for example, has property r: function Circle( r ) { this.r = r || 1.0; }
The this keyword permits this function to be used as a constructor: var c = new Circle( 2.0 ); var area = Math.PI * c.r * c.r;
HTML version of Basic Foils prepared 20 April 98

Foil 86 User-defined Methods

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
User-defined Methods
Methods are defined as Function objects: function Circle( r ) { this.r = r || 1.0; this.getRadius = new Function( "return this.r" ); this.setRadius = new Function( "r", "this.r = r" ); }
Note: The last argument of the Function constructor is implicitly the method body
HTML version of Basic Foils prepared 20 April 98

Foil 87 User-defined Methods (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index User-defined Methods
Methods may be added after the fact: function Circle_area() { return Math.PI * this.r * this.r; } Circle.prototype.area = Circle_area;
Use the previous method as follows: var radius = 1/Math.sqrt( Math.PI ); var c = new Circle( radius ); var area = c.area();
HTML version of Basic Foils prepared 20 April 98

Foil 88 The prototype Property

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The prototype Property
Add methods to built-in 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 20 April 98

Foil 89 Another User-defined Object

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Here's another example: function Car( make, model ) { this.make = make || ""; this.model = model || ""; this.color = null; this.setColor = new Function( "color", "this.color = color" ); }
Instantiate a Car object with new: myCar = new Car( "Ford", "Explorer" ); myCar.setColor( "red" );
HTML version of Basic Foils prepared 20 April 98

Foil 90 Built-in Functions

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Built-in Functions for Foil 90
Built-in Functions
JavaScript has seven built-in functions not associated with any object:
Plus the boolean function isNaN(), which is used in conjunction with the parsing functions
HTML version of Basic Foils prepared 20 April 98

Foil 91 Parsing Functions

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Parsing Functions for Foil 91
parseInt() and parseFloat() convert their arguments to numbers: parseFloat("12.34"); //returns 12.34 parseInt("12.34"); //returns 12 parseFloat("12.34 ft"); //returns 12.34 parseInt("111", 2); //returns 7 parseFloat("$12.34"); //returns NaN
A handy trick: var numeric_val = string_val - 0;
HTML version of Basic Foils prepared 20 April 98

Foil 92 Other Functions

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index The eval() Function
The function eval(str) evaluates its string argument in the context of the current window
In NN3.0 and later, eval(...) may be invoked on an arbitrary object (i.e., eval is a genuine method); in this case, its argument is evaluated in the context of that object
HTML version of Basic Foils prepared 20 April 98

Foil 93 Cookies

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Authoring Guide, Netscape Cookies
A cookie is:
  • a named string stored by the browser
  • a property of the Document object
The cookie mechanism gives the browser a kind of memory, that is, a cookie "saves state"
Originally, only CGI scripts could read/write cookie strings, but with JavaScript, cookies are handled entirely on the client side
HTML version of Basic Foils prepared 20 April 98

Foil 94 Cookies (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Authoring Guide, Using Cookies
A cookie
  • persists for the duration of the browser session (but an expiration date may be given)
  • is associated with the subtree of the document that created it (but a cookie path may be specified)
  • is accessible to pages on the server that created it (but a cookie domain may be declared)
HTML version of Basic Foils prepared 20 April 98

Foil 95 Cookies (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Cookies
A cookie string may not contain semicolons, commas, or whitespace (use escape() and unescape())
Minimum specifications:
  • No more than 300 cookies per client
  • No more than 20 cookies per server
  • No more than 4Kb per cookie
HTML version of Basic Foils prepared 20 April 98

Foil 96 JavaScript Security

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index Authoring Guide, JavaScript Security
When browsing the Web, two pieces of information are considered public: the IP address of the client and the type of browser. All other data are considered private. In particular,
  • JavaScript does not permit access to the underlying file system
  • JavaScript can not establish a direct connection to an Internet host
HTML version of Basic Foils prepared 20 April 98

Foil 97 Same Origin Policy

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
An important bug fix appeared in NN2:
  • Scripts from one server may not read properties of windows or documents from another server
http://www.osf.org/~loverso/javascript/
For example, a script from home.netscape.com may not read the properties of a document loaded from developer.netscape.com
HTML version of Basic Foils prepared 20 April 98

Foil 98 The domain Property

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
The document.domain property is initialized to the hostname of the server from which the document was loaded
This property may be set to any valid domain suffix of itself
For example, if document.domain is "home.netscape.com", it may be set to "netscape.com" (but not "ape.com")
HTML version of Basic Foils prepared 20 April 98

Foil 99 Data Tainting

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Data tainting, an alternative to the Same Origin Policy, was experimentally implemented in NN3.0
Data tainting allows access to private data (e.g., history[] array) but forbids "export" of this data over the Internet
Both data and methods may be tainted
Tainting has been disabled in NN4, in favor of signed scripts
HTML version of Basic Foils prepared 20 April 98

Foil 100 Signed Scripts

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
A new security model called signed scripts was implemented in NN4.0
Signed scripts are based upon the Java security model for signed objects, and include the following:
  • inline scripts specified with <SCRIPT> tag
  • event handlers
  • JavaScript entities
  • separate JavaScript files
HTML version of Basic Foils prepared 20 April 98

Foil 101 Signed Scripts (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
Scripts are signed using Netscape's Page Signer tool (a Perl script)
Scripts may be served from a secure (SSL) server, in which case they're treated as if signed with the public key of that server
Users retain the right to deny the privileges requested by the signed script
HTML version of Basic Foils prepared 20 April 98

Foil 102 LiveConnect

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index LiveAudio and LiveConnect for Foil 102
LiveConnect is a communications protocol for Java applets, plugins, and JavaScript
A JavaObject is a JavaScript wrapper around a Java object; a JSObject is a Java wrapper around a JavaScript object
MSIE3.0 does not support LiveConnect; instead, applets are treated as ActiveX objects, but the basic syntax is the same
HTML version of Basic Foils prepared 20 April 98

Foil 103 LiveConnect (cont'd)

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index LiveConnect for Foil 103
With LiveConnect:
  • JavaScript can access the classes of the browser's Java VM
  • JavaScript can read/write the public variables of an applet and invoke public methods; same for Java-enabled plug-ins
  • Applets and Java-enabled plug-ins can read/write JavaScript object properties and invoke JavaScript functions
HTML version of Basic Foils prepared 20 April 98

Foil 104 LiveWire

From Overview of Advanced JavaScript -- Web Scripting Language CPS616 Technologies of the Information Age -- Spring Semester 98. *
Full HTML Index
LiveWire is a non-standard alternative to CGI
LiveWire lets developers write CGI programs in JavaScript
It consists of two components: a compiler and a server extension
© 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