Full HTML for
Given by Tom Scavo,Geoffrey C. Fox at CPS616 Technologies of the Information Age on Spring Semester 98. Foils prepared 16 June 98
Outside Index
Summary of Material
| Java vs. JavaScript |
| JavaScript Basics and Syntax |
| JavaScript Core Objects |
| JavaScript Events |
| Client-side JavaScript |
| JavaScript Object Model |
| Advanced Topics: Cookies, Security, LiveConnect, and LiveWire |
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
JavaScript A Web Scripting Language
Outline
General Remarks
Version History
JavaScript 1.2
JScript 3.1
ECMAScript
Java vs. JavaScript
PPT Slide
PPT Slide
Performance Issues
JavaScript Basics
JavaScript Scripts
"Hello World" Example
"Hello World" Example (cont'd)
Form Example
Form Example (cont'd)
The <SCRIPT> Tag
The <SCRIPT> Tag (cont'd)
The <SCRIPT> Tag (cont'd)
JavaScript URLs
JavaScript Syntax
Basic Syntax
Variables
Operators
Expressions
Reserved Words
Statements
The if Statement
The switch Statement
The for Statement
The while Statement
The do...while Statement
The with Statement
JavaScript Core Objects
Basic Concepts
PPT Slide
The eval Function
Parsing Functions
Other Global Functions
Built-in Objects
Array Objects
Array Methods
Boolean Objects
Date Objects
Date Methods
Function Objects
Function Arguments
The Math Object
Math Properties
Math Methods
Number Objects
Number Properties
Number Properties (cont'd)
Object Objects
RegExp Objects
RegExp Objects (cont'd)
RegExp Objects (cont'd)
String Objects
String Methods
String Methods (cont'd)
JavaScript Events
Events
Event Handlers
Event Handlers (cont'd)
Event Handlers (cont'd)
Event Handler Examples
Event Object
Event Object (cont'd)
Client-side JavaScript
Object Hierarchy
Object Referencing
Window and Frame Objects
Window Properties
Window Properties (cont'd)
Frame Properties
Frame Example (cont'd)
Frame Example (cont'd)
Frame Example (cont'd)
Frameset Documents
Window and Frame Methods
History Object
Location Object
Document Object
Document Properties
Document Properties (cont'd)
Document Methods
Form Objects
Form Properties
Form Methods
Image Objects
Image Animation
Layer Objects
Built-in Arrays
HTML-reflected Arrays
Client-side String Methods
Navigator Objects
MimeType Objects
Plugin Objects
JavaScript Object Model
User-defined Objects
User-defined Methods
Another Example
The prototype Property
The prototype Property (cont'd)
Prototype-based Inheritance
Advanced Topics
Cookies
Cookies (cont'd)
Cookies (cont'd)
JavaScript Security
Same Origin Policy
The domain Property
Data Tainting
Signed Scripts
Signed Scripts (cont'd)
Certificates
JAR Files
Using signtool
Writing Signed Scripts
Writing Signed Scripts (cont'd)
LiveConnect
LiveConnect (cont'd)
LiveWire
LiveWire (cont'd)
Outside Index
Summary of Material
HTML version of Basic Foils prepared 16 June 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/javascriptjune98/ |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Java vs. JavaScript |
| JavaScript Basics and Syntax |
| JavaScript Core Objects |
| JavaScript Events |
| Client-side JavaScript |
| JavaScript Object Model |
| Advanced Topics: Cookies, Security, LiveConnect, and LiveWire |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| JavaScript (originally called LiveScript) is a web scripting language for clients and servers |
| Client-side JavaScript facilitates rapid prototyping and is more responsive than CGI |
| Client-side 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 16 June 98
Full HTML Index
| 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.x is supported in MSIE 4.0 |
| JScript 3.0 and later are ECMA-compliant [Standard ECMA-262, June 1997] |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
New features in JavaScript 1.2 (NN4.0):
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
New features in JScript 3.1 (MSIE4.0):
|
| Adequate documentation is lacking, however |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| ECMAScript refers to standard ECMA-262 released in June 1997 |
| ECMAScript is essentially JavaScript with all client and server-side features removed |
| The emerging HTML and XML Document Object Models (DOMs) will be bound initially to ECMAScript |
| Currently, only JScript 3.1 is ECMA-compliant |
HTML version of Basic Foils prepared 16 June 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 |
| Java is class-based |
| JavaScript is primarily supported by Netscape and Microsoft |
| JavaScript has neither of these qualities |
| JavaScript is object-based with no class structure |
| JavaScript is prototype-based |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Java classes and instances are distinct |
| A Java class has zero or more constructors |
| Java property inheritance follows class hierarchy |
| In Java, no way to add properties at run-time |
| All JavaScript objects are instances |
| JS object definition and constructor are identical |
| JavaScript property inheritance follows prototype chain |
| JavaScript properties may be added or removed at run-time |
| Java vs. JavaScript (cont'd) |
HTML version of Basic Foils prepared 16 June 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 |
| Java vs. JavaScript (cont'd) |
HTML version of Basic Foils prepared 16 June 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 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98 
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 JavaScript-disabled browsers |
HTML version of Basic Foils prepared 16 June 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 16 June 98
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> |
| Scripts may be hidden from old browsers |
HTML version of Basic Foils prepared 16 June 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 16 June 98
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 (aForm, expr, result) referred to in the script |
HTML version of Basic Foils prepared 16 June 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> |
| The newest version is "JavaScript1.2" |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Multiple <SCRIPT> tags are allowed |
| Within a single <SCRIPT>, a function may be called before it is defined |
| Within a single document, a function defined in one <SCRIPT> may not be called from a previous <SCRIPT> |
| In particular, a function defined in the <BODY> may not be called from the <HEAD> |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| JavaScript code may be stored in an external file (and is therefore reusable): |
| <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 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| JavaScript syntax resembles Java and C |
| Braces { } are used for grouping |
| Use single or double quotes (equivalently) around string literals |
| Escapes: \b \t \n \f \r \" \' \\ |
| Other literals: null, true, and false |
| JavaScript is case-sensitive while HTML is not (which sometimes leads to problems!) |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
Variables (identifiers) must begin with a letter, underscore, or dollar sign:
|
| Declare variables in var statements: var aNumber = 137; var aString = "1"; |
| JavaScript "entities" in HTML attributes: <IMG SRC="&{v1};" WIDTH="&{v2};"> where v1 and v2 are JavaScript variables |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Assignment operators: = += -= *= /= %= <<= >>= >>>= &= ^= |= |
| JavaScript supports the usual arithmetic operators, as well as: % ++ -- |
| Concatenation operator: + |
| Bit operators: & | ^ ~ << >> >>> |
| Relational operators: == > >= < <= != |
| Logical operators: && || ! |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
Examples:
|
An if-expression returns a value:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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 16 June 98
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 16 June 98
Full HTML Index
| 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 16 June 98
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 16 June 98
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, labeled break, and continue are permitted in for and while loops |
| JavaScript supports recursion as well |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| A do...while loop tests its condition at the bottom of the loop: do { statements } while ( condition ); |
| In this case, the statements in the loop body are guaranteed to execute at least once |
| This loop is new in JavaScript 1.2 and JScript 3.0 |
HTML version of Basic Foils prepared 16 June 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 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| JavaScript is object-based with no classes and, hence, no (class) inheritance |
| An object possesses properties and methods |
| A property is an attribute of an object |
| A method acts on an object |
| All JavaScript objects have toString() and valueOf() methods |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| The Global Object |
| The implicitly defined Global object is the top-level JavaScript object |
| It has two properties: NaN (Not-a-Number) and Infinity (but NN supports neither) |
| There are seven global functions: |
| plus the eval(...) function! |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
The function eval( string ) invokes the JavaScript interpreter on its string argument, which is evaluated in the context of the current window (i.e., globally)
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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_var = string_val - 0; |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| isNaN( number ) returns true if and only if its argument is NaN |
| isFinite( number ) returns false if its argument is NaN, Infinity, or ?Infinity; otherwise, it returns true |
| escape( string ) returns a URL-encoded string; unescape( string ) performs the inverse operation |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| JavaScript has ten built-in objects: |
| plus the Global object discussed earlier |
An instance object is created with new:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| In NN 3.0 (and even in 2.0!), we write: var states = new Array(50); states[0] = "Alabama"; states[1] = "Alaska"; // etc. |
| Every array has a length property: var 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 16 June 98
Full HTML Index
JavaScript 1.1 (and above) supports some powerful array methods:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
The Date constructor has many forms: today = new Date(); xmas = new Date( 97, 12, 25 ); birthday = new Date( "April 6, 1952" );
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| The Date object has no properties; access to date and time fields is via dozens of "set" and "get" methods: xmas.setYear(xmas.getYear()+1); |
There are two "static" Date methods:
|
| Both convert their argument(s) to milliseconds past January 1, 1970 UTC |
HTML version of Basic Foils prepared 16 June 98
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 |
| NB: Function arguments are passed by value |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Functions may take an arbitrary number of arguments: function User() { this.name = User.arguments[0]; this.group = User.arguments[1]; this.email = new Array(); var 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 16 June 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 16 June 98
Full HTML Index
| These properties are primarily for convenience: |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Each method in the middle column requires two arguments |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| There is a Number constructor, but it is rarely used since JavaScript automatically converts numeric literals to numeric objects as needed |
| Some useful properties are provided: MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY, and POSITIVE_INFINITY |
HTML version of Basic Foils prepared 16 June 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 16 June 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 global boolean function isNaN() |
| Note: NN2.0 and MSIE3.0 do not support Number.NaN! |
HTML version of Basic Foils prepared 16 June 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 |
| The corresponding function is Object(...) |
HTML version of Basic Foils prepared 16 June 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 16 June 98
Full HTML Index
| Here are two 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 16 June 98
Full HTML Index
| 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 16 June 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 as needed |
| String characters are indexed starting with 0 |
| The String object has one property: var n = myStr.length; |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
Core JavaScript String methods:
|
| Static method: String.fromCharCode(...) |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Client-side JavaScript defines more than a dozen String methods (discussed later) |
Six new methods added in JavaScript 1.2:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
Events are associated with
|
| JavaScript introduces event handlers to handle these events |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
| The onLoad event handler is triggered when a page is loaded or reloaded : <BODY onLoad="init()"> Similarly, 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 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
| Properties of an Event object: |
| The Click object, for example, supports all but the data property (note: the *X and *Y properties are undefined for button clicks) |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| A fully-qualified reference: window.document.myForm.myButton.value |
| window (often suppressed) and document are pre-defined objects |
| myForm and myButton are user-defined object names |
| value is a property of the Button object (and most other form elements) |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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 16 June 98
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 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 16 June 98
Full HTML Index
| An analogy with the UNIX shell: |
HTML version of Basic Foils prepared 16 June 98
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 16 June 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 16 June 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 16 June 98
Full HTML Index
Absolute references:
|
Relative references:
|
| In which documents are |
| these references valid? |
HTML version of Basic Foils prepared 16 June 98
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 <HEAD> |
| Use <NOFRAMES> inside <FRAMESET> for frames-impaired browsers |
HTML version of Basic Foils prepared 16 June 98
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. For example, var msg = "The alert() method\n"; msg += " is handy for debugging."; window.alert( msg ); |
HTML version of Basic Foils prepared 16 June 98
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 browser buttons |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
| There is one Document object (called document) per window or frame |
| The Document object 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 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
| 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 16 June 98
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, but these are seldom used explicitly |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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 16 June 98
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 16 June 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 16 June 98
Full HTML Index
| Images may be pre-loaded (they should be cached in the <HEAD>, especially if they are to be used in the <BODY>): var 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 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
| 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) |
| Note: Layers are not supported in MSIE |
HTML version of Basic Foils prepared 16 June 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 16 June 98
Full HTML Index
| Plus the elements array, whose parent is the Form object |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Client-side JavaScript defines more than a dozen String methods, including: |
HTML version of Basic Foils prepared 16 June 98
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 16 June 98
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 16 June 98
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 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Objects are defined with the function statement. The following Circle object, for example, has property r: function Circle( r ) { this.r = ( r > 0 ) ? r : 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 16 June 98
Full HTML Index
| User-defined Methods |
| Methods are defined as Function objects: function Circle( r ) { this.r = ( r > 0 ) ? r : 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 16 June 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 16 June 98
Full HTML Index
| 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 16 June 98
Full HTML Index
| We can add methods to built-in objects, too: // 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; } |
| Now add the method to the Array object with the prototype property: Array.prototype.contains = contains; |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Define the parent object: function Ellipse( r1, r2 ) { this.r1 = ( r1 > 0 ) ? r1 : 0; this.r2 = ( r2 > 0 ) ? r2 : 0; this.area = new Function( "return Math.PI * this.r1 * this.r2" ); } |
| Define the child object: function Circle( r ) { this.r = ( r > 0 ) ? r : 0; this.parent = Ellipse; this.parent( r, r ); } Circle.prototype = new Ellipse; |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
A cookie is:
|
| 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 16 June 98
Full HTML Index
A cookie
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| A cookie string may not contain semicolons, commas, or whitespace (use escape() and unescape()) |
Minimum specifications:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
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,
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
An important bug fix appeared in NN2:
|
| See this URL for an interesting account: 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 16 June 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 16 June 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 16 June 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 |
The following objects may be signed:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Scripts are signed using Netscape's Signing Tool (signtool), a command-line utility that creates digital signatures for Java class files, JavaScript scripts, plugins, etc. |
| 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 16 June 98
Full HTML Index
| A certificate is an electronic document used to identify an individual or organization |
| An object-signing certificate is a special kind of certificate that allows you to associate your digital signature with one or more files |
| A digital signature is analogous to a handwritten signature (that is, it is difficult to refute and may be legally binding) |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Signed objects are packaged in a JAR (Java Archive) file, a sort of "digital envelope" based on the ZIP archive format |
Using signtool, one associates digital signatures with the files in a JAR, which:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| First check to see what object-signing certificates are available: % signtool -l |
| If none are available, a test certificate may be created with the command: % signtool -G MyTestCert |
| To sign scripts in directory "signdir", type: % signtool -k MyTestCert -J signdir |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| First, identify inline scripts to be signed: <SCRIPT ... ARCHIVE="some.jar" ID="1"> |
| The script ID must be unique in the JAR |
| JavaScript source files don't need an ID: <SCRIPT ... ARCHIVE="some.jar" SRC="file.js"> |
| Note: Only one ARCHIVE attribute per document is necessary, in which case all signed objects are stored in a single JAR |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Signed scripts may request expanded privileges |
| For example, to access private data: netscape.security.PrivilegeManager. enablePrivilege( "UniversalBrowserRead" ); |
| "UniversalBrowserRead" is just one of many target privileges that may be requested |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| 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 fortunately the basic syntax is the same |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
With LiveConnect:
|
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| LiveWire is Netscape's proprietary alternative to CGI, which lets developers create database applications in JavaScript |
| It consists of two components: a compiler and a server extension (both require Enterprise Server) |
HTML version of Basic Foils prepared 16 June 98
Full HTML Index
| Server-side JavaScript is used to connect to and interact with a database server |
| A server-side object called DbPool lets you (efficiently) connect to multiple databases or multiple times to a single database |
| Client-side JavaScript is contained in <SCRIPT> tags; server-side JavaScript is contained in <SERVER> tags and must be pre-compiled on the server |