Full HTML for GLOBAL Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames

HELP! * YELLOW=global GREY=local Full HTML for

GLOBAL foilset Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames

Given by Geoffrey Fox at CPS616 spring 1997 on Feb 17 and 19 1997. Foils prepared 21 February 97
Abstract * Foil Index for this file Secs 76.3 See also color IMAGE

Basic Language variables and Statements
Objects, functions and constructors
New and Old Array syntax
Built in Objects and Methods including parseInt, parseFloat, eval, Date, String, Math, Function and Number
Frames in HTML and JavaScript
Event Handlers
setTimeout / clearTimeout

Table of Contents for full HTML of Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames

1 CPS 616 JavaScript Lectures
with Audio February 17 and 19 97
Language Objects and Frames
See:
http://www.npac.syr.edu/users/gcf/cps616-97feb17
2 Abstract of CPS616-97 Lectures of February 17 and 19
3 The JavaScript Language -- Values, Names Etc.
4 Type Conversion--Subtracting Strings and Numerics
5 The JavaScript Language -- Expressions - I
6 The JavaScript Language -- Expressions - II
7 String Operators: the Concatenation Operator
8 The JavaScript Language -- Conditionals
9 JavaScript Object Model -- I
10 Object Hierarchy in JavaScript
11 JavaScript Object Model -- II
12 Example of a JavaScript Function
13 Recursion Example
14 Creation of JavaScript Objects
15 User Defined Objects Continued
16 The JavaScript with Statement for objects
17 The for ... in JavaScript syntax
18 The New Way of Defining Arrays
19 The old MakeArray Function and Arrays of Object
20 More on Arrays -- Properties and Multidimensions
21 Arrays Example
22 The arguments Array in JavaScript
23 The this keyword in JavaScript
24 The parseInt parseFloat System functions
25 The eval JavaScript Function
26 Built-In JavaScript and LiveWire Objects
27 Built-In JavaScript and LiveWire Objects
28 The Math and Number Objects in JavaScript
29 Math properties(an exhaustive list)
30 Math computation(a simple example of reading/writing form data
31 Math methods (an incomplete list)
32 The String Object in JavaScript - I
33 Explanation of String methods - I
34 Text attributes
35 Text size(an exhaustive list)
36 Strings (the JavaScript 'substring' method is wierd)
37 The String Object in JavaScript - II
38 Explanation of String methods - II
39 The Date Object in JavaScript
40 Creating Date Object Instances
41 Using Date Object Methods
42 The Structure of the Navigator Object/Property Hierarchy
43 The Confused Window Labelling Scheme
44 The Window Hierarchy Pictorially
45 Creating New Windows
46 Role of Frames in JavaScript
47 Frame Basics in Netscape HTML -- Example
48 Frames (writing) (a typical use of frames and JavaScript involving a control frame and a content frame)
49 Frame Basics in Netscape HTML -- Rules
50 Use of Dummy Frames in JavaScript
51 General Syntax of <Frameset> </Frameset>
52 General Syntax of <Frame> tag
53 Event Handlers in JavaScript - I
54 onMouseOver method (better examples are needed)
55 onunload event handler
56 Event Handlers in JavaScript - II
57 Event Handlers in JavaScript - III
58 Event Handlers in JavaScript - IV
59 The Function Object and Event Handlers
60 JavaScript Form Example
61 JavaScript Link Example
62 Structure of Index -- mainframe Case
63 setTimeout and clearTimeout
64 setTimeout method
65 Scrolling text using setTimeout
66 Slide Show with Colors
67 setTimeOut Example -- Display Current Time - I
68 setTimeOut Example -- Display Current Time - II

This table of Contents Abstract

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 1 CPS 616 JavaScript Lectures
with Audio February 17 and 19 97
Language Objects and Frames
See:
http://www.npac.syr.edu/users/gcf/cps616-97feb17

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 76.3

Full HTML Index

Instructor: Nancy McCracken

teamed with Meryem Ispirli, Geoffrey Fox,

Tom Scavo, John Yip

Syracuse University

111 College Place

Syracuse

New York 13244-4100

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 2 Abstract of CPS616-97 Lectures of February 17 and 19

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 76.3

Full HTML Index

Basic Language variables and Statements

Objects, functions and constructors

New and Old Array syntax

Built in Objects and Methods including parseInt, parseFloat, eval, Date, String, Math, Function and Number

Frames in HTML and JavaScript

Event Handlers

setTimeout / clearTimeout

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 3 The JavaScript Language -- Values, Names Etc.

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 38.8

Addon Full HTML Index

JavaScript only has one simple type -- namely:

var anumber = 137; // or the SAME type var

var astring = "1"; // to define a string

The loose typing in JavaScript, allows interpreter to creatively interpret an expression and default (this is change from early documentation which claimed type taken from leftmost variable) is that strings have precedence over numbers so that for instance:

x = astring + anumber; // results in x = "1137"

use parseInt and parseFloat to extract numerical values from strings (see later)

Note special value null (no quotes) can be used as a null value

Strings can be delimited by '..text..' or "..text.." which are identical in meaning (unlike PERL) and one can use \n for newline and \t for TAB

Boolean literals are either true or false

Comments are /* any stuff including newlines */ or

Javascript statements; // This is a comment until new line

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 4 Type Conversion--Subtracting Strings and Numerics

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 72

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 5 The JavaScript Language -- Expressions - I

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 77.7

Addon Full HTML Index

JavaScript expressions and basic operators are similar to C PERL and Java

Assignment Operators are = += -= *= /= %= <<= >>= >>>= &= ^= |=

with x += y; meaning x= x + y;
and x %= y; meaning x = x%y; // x mod(y)

Conditional Expressions

status = (age >= 18) ? "adult" : "minor"; // sets status to be "adult" if age is larger than or equal to 18. Otherwise it is set to "minor"

Arithmetic operators are as usual with in addition ++ and --

y = ++x; // increments x by 1 and sets y to be final value of x

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 6 The JavaScript Language -- Expressions - II

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 221.7

Addon Full HTML Index

Bitwise logical operators & (AND) | (OR) ^ (XOR) operate on the two numbers expressed in 32 bit integer form and perform indicated logical operation on each bit separately

<< is bitwise left shift discarding bits at left (high order) and zero filling at right

>> is bitwise right shift propagating the sign bit in high order (oposition 31)

>>> is zero fill right shift with no special treatment of sign bit

Boolean operations are && (AND), || (OR), ! (NOT) and can only operate on boolean variables which are true or false

Comparison Operators are == > >= < <= != which can be used on numerical OR string variables

Concatenation operator + joins two strings together

Note + is called . in PERL

x= "Hello "; y= "World!";

x + y is "Hello World!"

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 7 String Operators: the Concatenation Operator

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 80.6

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 8 The JavaScript Language -- Conditionals

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 133.9

Addon Full HTML Index

These are roughly a subset of those in Java

if statements cannot use else if and must have statements to be executed placed in curly braces unless only one statement

if( condition ) {

Need curlies if more than one statement here; }

else { // Optional of course

Statements which can contain nested if's; }

for and while are essentially as in Java

for( initial expression ; condition; increment expression ) {

statements to execute; }

while(condition) {

stuff to do as long as condition true; }

break can appear in for or while loops and causes control to pass to statement after end of for or while loop. Named break's as in Java or PERL are not supported

continue in a for or while loop skips over remaining statements in body and goes to next iteration of each loop

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 9 JavaScript Object Model -- I

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 224.6

Addon Full HTML Index

JavaScript has a simple object oriented structure without any inheritance ( a major difference from Java)

JavaScript has a rather confused syntax for defining objects which mixes the role of Class definition, function and constructor!

An object is a container which has variables (simple datatypes) other objects or methods inside it.

Variables or other objects inside an object are called properties

functions inside an object are called its methods

Arrays are defined as sequential properties inside a particular object

Multidimensional arrays are constructed as object arrays which themselves have properties which are arrays.

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 10 Object Hierarchy in JavaScript

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 139.6

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 11 JavaScript Object Model -- II

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 220.3

Addon Full HTML Index

variables can be written in a fashion such as:

parentobject.property1[index1].property2..finalproperty[indexN]

Note there is no hierarchical inheritance in definition of objects but the ability to define object properties that are themselves objects creates a natural hierarchical naming scheme

Object Methods are naturally referred to as

object ...property.method(arguments)

Methods Objects and Properties are naturally divided into those defined by Netscape and those defined by user.

Here is an example of a Netscape object with a typical property and method

document is a Netscape object typically defined by a .html page
document.writeln is method of this object which outputs string followed by a newline
document.location is a property of this object containing its URL

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 12 Example of a JavaScript Function

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 302.4

Addon Full HTML Index

top.setframe("help.html","maindisplay");

function setframe(relativeurldesired,framelabel) {

var actualurl = top.baseurl + relativeurldesired;
top.frames[framelabel].location.href = this.actualurl;

}

top is a Netscape(Navigator) object with a property frames which is an array labelled by either integers or by value of name attribute in <frame> name="textofframelabel" </frame> tag

Setting a URL into location.href property of a frame loads that page into given frame.

top labels functions defined in page that defines frames

use this.actualurl to distinguish function's variable actualurl from a global variable of same name

Put these functions in <head> </head> section so as to ensure they are loaded before anything else

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 13 Recursion Example

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 63.3

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 14 Creation of JavaScript Objects

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 256.3

Full HTML Index

You define the Class template (to use a Java lingo) with a function definition

Then create an instance of the object with the new statement which acts as a constructor to initialize values

function MakeMenu(no,name) {

this.no = no; // Give instance a numerical label

this.name = name; // Label this particular menu

this.color = 'black';

this.menuselection = 1;

this.count =0;

this.options = new Array(); // We will discuss this later

}

worldmenu = new MakeMenu(1,'world');

familymenu = new MakeMenu(2,'family'); // define two menu instances

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 15 User Defined Objects Continued

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 146.8

Full HTML Index

You can access object properties in a natural fashion such as:

var actualselected = worldmenu.menuselection;

familymenu.color = 'red';

Curiously you can also use in Netscape 2 an array like notation to which we will return:

familymenu[0] is same as familymenu.no

familymenu[1] is same as familymenu.name etc.

We will return to this when we discuss arrays

One can associate methods with user objects but with a syntax that appears very limiting as object methods have identical arguments to function

General Syntax is:

Objectname.methodname = functionname;

where Objectname is an existing Object and functionname is an existing function -- it can be used to set event handlers with no arguments!

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 16 The JavaScript with Statement for objects

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 73.4

Full HTML Index

with ( ParticularObject ) {

..Any old statements ..

}

// Within these curly braces, ParticularObject is assumed to be default object for any property or method that does not specify a parent object

with (Math) { // An example

area = PI *r*r; // PI is in Math object

x= r * cos(theta); // cos is method in Math Object

y= r * sin(theta); // sin is a method in Math Object

}

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 17 The for ... in JavaScript syntax

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 103.6

Full HTML Index

This allows one to iterate over all the properties of an object

for ( variable in object ) { // Generic Form

Bunch of statements }

function dump_props(obj, obj_name) {

var result = "";

for( var i in obj) {

result += obj_name + "." + i + " = " + obj[i] + "<BR>"; }

result += "<HR>";

return result;

}

Here i runs over names of Properties and obj[i] is actual property

Note user supplies obj and obj_name

function car(make,model) { // An Example

this.make = make;

this.model = model; }

mycar = new car("Ford","Explorer");

document.writeln(dump_props(mycar,"mycar"));

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 18 The New Way of Defining Arrays

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 758.8

Addon Full HTML Index

Write var area = new Array(); // Introduced in Netscape 3

and then you can set as described in Netscape Press book on JavaScript

area[0] = "Alabama";

area[1] = "Alabama";

area[2] = "Alaska"; // etc.

acode[0] = 205;

acode[1] = 334;

acode[2] = 907; // mappring area codes to states

area.length is automatically set as length of array ( 3 in this case)

Note you can set array elements to be objects to make Arrays of objects

e.g. listofmenus = new Array();

listofmenus[0] = new menuobject(1,'world');

worldmenu = listofmenus[0]; // A synonym

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 19 The old MakeArray Function and Arrays of Object

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 279.3

Addon Full HTML Index

This is the old way of defining arrays and only way allowed in Netscape 2.

You were asked to define a special function

function MakeArray(size) {

this.length = size;

for( var i=1; i<=size; i++ ) {

this[i]= 0; }

}

This gives arrays where you must predefine a size (a problem) and where arrays count from 1 not 0 (an artifact of MakeArray setting this.length = size at start not end of function. The latter feature could lead to great joy for Fortran programmers!

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 20 More on Arrays -- Properties and Multidimensions

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 164.1

Addon Full HTML Index

Note one can easily define and use multidimensional arrays as in syntax

listofmenus[0].options[0]='Admin';
var currentworld = 0;
listofmenus[currentworld].options[1]='FoilWorld'; // etc.

Arrays (the new ones!) have some interesting methods

MyArray.sort(sortmethod) returns list sorted in fashion determined by optional argument sortmethod (a user function comparing two elements)
MyArray.join(separator) returns a string of the MyArray elements separated by the character string separator
MyArray.reverse() reverses order in Array

MyArray = new Array(Initialsize,value0,value1, ...); // can specify an initialsize and initial values at the user's pleasure. These arguments are opitional and undefined initial values are set to null

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 21 Arrays Example

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 180

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 22 The arguments Array in JavaScript

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 156.9

Full HTML Index

function anyoldname(x1,x2) {

var argv = anyoldname.arguments;

n = anyoldname.arguments.length; // number of arguments -- same as argv.length

var y1 = anyoldname.arguments[0]; // y1 is same as this.x1 or argv[0]

var yn = anyoldname.arguments[n-1]; // last argument -- same as argv[n-1]

var wherefrom = anyoldname.caller; // use inside function to find where called from

}

This allows one to find number of arguments when called and process functions with variable number of arguments

Netscape documentation says this is a property of Functions (interpreted functions) but appears to work on both!

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 23 The this keyword in JavaScript

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 322.5

Full HTML Index

this keyword can be very important but it is also confusing as not clear what it refers to at times.

Also not always clear when needed

Here is an example of use to set URL for a link

function seturl(obj) { // Put in <head></head> Part of document

obj.target = "Desiredframe"; // set frame you want it to go in!

obj.href="http://www.npac.syr.edu"; // or calculate URL dynamically

}

In normal HTML page place:

<a href="" onClick="seturl(this)" onMouseOver="window.status='URL set dynamically in routine seturl';return true" >Click Here for Dynamic URL</a>

Here this refers to link object created by <a ..> </a>

window.status is line at bottom which usually records URL

Note can specify nontrivial href and onClick but if onClick specifies href property it overrides that in HTML page

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 24 The parseInt parseFloat System functions

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 136.8

Full HTML Index

These are system functions ( not string methods) that convert strings to numbers

parseInt("15") or equivalently parseInt("15",10) both return the number 15

The optional second argument is radix so that parseInt("15",8) returns 17

If input string begins with "0x" the default radix is 16 (hexadecimal) whereas if it begins with "0" the radix is 8 (octal) -- otherwise default radix is 10

x = 1 +"1"; // evaluates to "11" whereas

x = 1 + parseInt("1"); // evaluates to 2

parseFloat(string) returns floating point equivalent of string

var x = "0.0314E+2"; var y = parseFloat(x); // sets y = 3.14

on platforms that support it, parseInt and parseFloat will return NaN (Not a Number) when argument is inappropriate

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 25 The eval JavaScript Function

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 205.9

Addon Full HTML Index

eval is an important function as it allows you build Javascript dynamically

For instance document.forms[0].actualtextname.value is value of form element specified as

<INPUT TYPE="text" NAME="actualtextname" VALUE="value" onChange="handle(this.name)" >

this.name holds actualtextname but as an ascii string which cannot be directly be used in

var x = document.forms[0].actualtextname.value;

var x = eval("document.forms[0]." + actualtextname + ".value"); // works!

eval applies JavaScript interpreter to argument and then re-interprets as shown above

This can be used to copy information between forms as in

eval("document.forms[1]." + actualtextname + ".defaultvalue") = eval("document.forms[0]." + actualtextname + ".value")

eval did not work properly for a long time! -- Please check on your browser

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 26 Built-In JavaScript and LiveWire Objects

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 169.9

Full HTML Index

JavaScript has its distinctive built-in objects associated with navigator (window, document etc.) and server (for LiveWire)

There are also currently seven other built in types of objects in JavaScript which are in LiveWire as well

Array, Boolean, Function, Date, Math , Number, String

We have described Array and will ignore Boolean

We will review the others in following

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 27 Built-In JavaScript and LiveWire Objects

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 74.8

Full HTML Index

JavaScript has its distinctive built-in objects associated with navigator (window, document etc.) and server (for LiveWire)

There are also currently seven other built in types of objects in JavaScript which are in LiveWire as well

Array, Boolean, Function, Date, Math , Number, String

We have described Array and will ignore Boolean

We will review the others in following

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 28 The Math and Number Objects in JavaScript

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 63.3

Addon Full HTML Index

Math has a set of properties(built in constants) including

E LN10 LN2 PI SQRT1_2 SQRT2 so that

Math.PI = 3.14159 etc.

Math methods include the usual ones in Fortran Intrinsic library with examples

Math.random() returns pseudo random number between 0 and 1

Math.abs(x) returns absolute value of x

Math.max(x1,x2) returns maximum of two numbers x1 and x2

Math.cos(x) returns cosine of argument x in radians

Math.round(x) rounds x to nearest positive or negative integer

The Number object has properties defining system dependent constants such as:

Number.MAX_VALUE is Largest representable number on your machine
Number.NaN represents "Not a Number" used by parseInt and parseFloat

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 29 Math properties(an exhaustive list)

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 48.9

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 30 Math computation(a simple example of reading/writing form data

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 31.6

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 31 Math methods (an incomplete list)

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 46

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 32 The String Object in JavaScript - I

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 66.2

Full HTML Index

Any constant such as "Hello World!" or variable holding text is a string object in JavaScript -- here is the first example

/* Add stem to newurl if latter is a relative address */

/* stem must end with a slash */

function checkurl(stem,newurl) {

var len = newurl.length; // length Property of string object
var stemlen = stem.length;
if( len < 7 ) {
- return (stem + newurl); } // Input was not absolute
var grab = newurl.substring(0,6); // Get first six characters
if( (grab == "ftp://") || (grab == "http:/") )
- return newurl; // input was definitely absolute
return (stem + newurl);

}

function seturl(name) {

name.href = checkurl("http://www.npac.syr.edu/users/gcf/wisdom/","List.html");

}

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 33 Explanation of String methods - I

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 66.2

Addon Full HTML Index

the String object has one property with actualstring.length recording length in characters of string

Note we only have one type of string object -- Java has String (fixed) and StringBuffer (mutable)

characters are indexed from the left starting at 0 and ending with actualstring.length-1

newstring = actualstring.substring(index1,index2); // returns a string consisting of characters in locations index1 ... index2-1

Peculiarly if index2 < index1, substring returns locations index2 ... index1-1

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 34 Text attributes

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 25.9

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 35 Text size(an exhaustive list)

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 43.2

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 36 Strings (the JavaScript 'substring' method is wierd)

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 41.7

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 37 The String Object in JavaScript - II

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 73.4

Full HTML Index

/* take two linked comma separated strings containing parameter names and

values for an Applet and produce correct HTML definition of them */

function commaseparated(appletpname,appletpvalue) {

var stop = appletpname.lastIndexOf(','); // last occurrence of ,

if( appletpname.length <= 0 ) stop = -2; // length is only property of string object

index = -1;

var ct = 0; // this is just a precaution

var jndex1 = 0;

var jndex = -1;

while( index <= stop) { // scan through commas

index1= appletpname.indexOf(',',index+1); // next occurrence of ,

if(index1 < 0 ) index1= appletpname.length; // no more ,'s

++ct;

if(ct >20 ) break;

jndex1 = appletpvalue.indexOf(',',jndex+1);

if(jndex1 < 0 ) jndex1= appletpvalue.length;

grab1 = appletpname.substring(index+1,index1); // Extract the stuff between commas

grab2 = appletpvalue.substring(jndex+1,jndex1);

top.document.writeln('<param name=' + grab1 + ' value="' + grab2 + '">');

index=index1;

jndex=jndex1; }

}

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 38 Explanation of String methods - II

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 76.3

Full HTML Index

This example introduces two new methods

actualstring.IndexOf(lookfor); // where lookfor can be any string or property holding a string

This returns index in actualstring where character in actualstring starts a substring that exactly matches lookfor

"http://www.npac.syr.edu".IndexOf("www"); // returns 7

actualstring.IndexOf(lookfor, searchfrom); // searchfrom is the index where search starts -- in example where we scan for commas, searchfrom is set to be one more than location where last comma found

IndexOf and lastIndexOf return -1 if requested string cannot be found

actualstring.lastIndexOf(lookfor, lastsearchfrom); // is just like IndexOf but starts from the end not the beginning of the string

default value of lastsearchfrom is actualstring.length-1

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 39 The Date Object in JavaScript

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 54.7

Addon Full HTML Index

JavaScript really needs the powerful text processing capabilities of PERL -- Lets hope either Netscape adds them or somebody builds these functions

On the otherhand JavaScript like Java has an amazing number of capabilities associated with the Date object including 21 builtin methods

today = new Date(); // sets today to current Date and Time

asiwrite = new Date("February 26, 1996 15:13:00"); // sets asiwrite to date and time that these notes were prepared!

Note both Java and JavaString store dates internally as number of elapsed milliseconds since January 1,1970 00:00:00.

In a Java lookalike, Date.UTC(date as bunch of numbers) and Date.parse(date as a text string) are "class or static" methods

There are methods such as getMonth which extracts month from a date

See the online resource for all possible methods!

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 40 Creating Date Object Instances

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 59

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 41 Using Date Object Methods

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 36

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 42 The Structure of the Navigator Object/Property Hierarchy

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Critical Information in IMAGE

Secs 84.9

Full HTML Index

Note window is basic concept and frames are children of window of same object type

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 43 The Confused Window Labelling Scheme

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 148.3

Full HTML Index

Typical property top.frames[name or number].document.

forms[ index and not name ].elementname.value illustrates hierarchy going from top to bottom as one goes from left to right

One can also use framename instead of frames["framename"] -- latter is very much more convenient as can access more easily as variable frame in JavaScript code

If eval works, one can use this to generate framename

navigator window and frame are objects defining hierarchy of cascading containers

document form history link location are objects defining parts of a window or frame.

anchors links forms frames applets images are array properties

top parent self are properties labelling particular frames and windows

Note these are all defined within a single browser window

opener is a property of a window defining the window of document that called window.open to instantiate this window

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 44 The Window Hierarchy Pictorially

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Critical Information in IMAGE

Secs 105.1

Full HTML Index

top is frameset containing three grey windows while parent is one with three red frames

childw is frameset in new browser window which is brown

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 45 Creating New Windows

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 93.6

Full HTML Index

The window object has a method open which allows one to create entirely new windows which are equivalent to cliocking "New Web Browser" on Netscape File Menu

childw = window.open(URL,Largely_Irrelevant_Name, Quite_Important_Features);

The last argument is a set of comma separated options such as

toolbar = yes [no]
location = yes [no] (display a location bar or not)
resizable = on [off] (allow resizing of window)
status = yes [no] (display status bar at bottom)
menubar = yes [no]
directories = yes [no] (display the not so useful directories bar)
scrollbars = yes [no] (allow or not scrollbars if needed)
width = W; (number of pixels in window width)
height = H; (number of pixels)

Javascript in spawned window can access properties of originating window as top.opener

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 46 Role of Frames in JavaScript

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 80.6

Full HTML Index

Frames are very relevant to JavaScript because not only can JavaScript help the various frames talk to each other but also one sometimes needs dummy frames to preserve JavaScript between pages

In Java AWT we learnt about hierarchical layout schemes -- in Netscape 2.0 world the containers in which subcomponents are laid out are frames and forms within frames.

In Layout Manager language, Netsape uses HTML syntax to control layout
HTML is more powerful than mechanisms in AWT Layout Managers?

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 47 Frame Basics in Netscape HTML -- Example

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 97.9

Addon Full HTML Index

<HTML>

<HEAD>

Bunch of JavaScript

</HEAD>

<FRAMESET ROWS="10%,80%,10%" >

<FRAME SRC="topbanner.html" >

<FRAMESET COLS="30%,70%" >

<FRAME SRC="index.html">
<FRAME SRC="Mainstuff.html">

</FRAMESET>

<FRAME SRC="bottombanner.html" >

</FRAMESET>

<NOFRAMES>

<h2> This Page needs frames -- please find a kinder URL</b>

</NOFRAMES>

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 48 Frames (writing) (a typical use of frames and JavaScript involving a control frame and a content frame)

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 59

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 49 Frame Basics in Netscape HTML -- Rules

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 66.2

Full HTML Index

A document that contains a FRAMESET must NOT have a BODY tag and so normal HTML tags cannot appear in a document that defines these containers

One needs an end </FRAMESET> tag for each <FRAMESET> but no end tag for <FRAME>'s

Note JavaScript can appear in header of a document defining frames and these JavaScript properties and methods can always be accessed (in read or write mode) by documents inside frames by refering to as top.property/method

Anything inside <NOFRAMES> .... </NOFRAMES> container will be ignored by a Framess capable browser (such as Netscape 2.0) and output by one that cannot produce frames such as Netscape 1.X

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 50 Use of Dummy Frames in JavaScript

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 93.6

Full HTML Index

<HEAD> Bunch of JavaScript</HEAD>

<BODY>

Sundry actions that load a new URL into page

</BODY>

will result in loss of all JavaScript methods and properties as you load new page! This can be avoided by using dummy frames as below

<HEAD> Bunch of JavaScript</HEAD>

<FRAMESET ROWS="1,*" >

<FRAME NAME="DUMMY" >

<FRAME NAME="ActualFrame" SRC="Thiscontainsoldbodyhtml.html" >

</FRAMESET>

Now use target="ActualFrame" in <a href="URL"> and reloading ActualFrame will NOT destroy your JavaScript!

Note we defined a dummy frame which occupied one pixel (could use zero!) above ActualFrame

The * notation tells Netscape to assign the remaining rows to second frame

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 51 General Syntax of <Frameset> </Frameset>

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 92.1

Full HTML Index

<Frameset Rows="rowlist" Cols="collist" >

Each of rowlist and collist must be null or comma separated values defining Nrow by Ncol frames -- typically one of these is unity as one uses hierarchical Framesets to get a nonuniform grid

Following <Frameset> there must be the correct number of frames defined either by a <Frame> tag or by <Frameset></Frameset> hierarchical definition

rowlist and collist can be comma separated mixture of

absolute number such as 100 specifying pixels to be allocated
percentage such as 30% specifying percentage of available space
* notation where a single * means all the remaining space
rows="50,2*,*,*" means first frame gets 50 pixels while remaining 3 frames get 50%,25%,25% respectively of remaining space

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 52 General Syntax of <Frame> tag

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 46

Full HTML Index

<frame Src="URL" Name="framename" Noresize scrolling=YES|NO|AUTO Marginwidth="value" Marginheight="value" >

All of these are optional -- the URL defined by Src attribute is document to be loaded into this frame -- this is often blank as user or other JavaScript code will specify what to load using TARGET="framename" in a link (<a > or equivalent)

The value of Name attribute is used by target and is essential if you want to be able to load into this frame from the outside. A link inside this frame will load into this frame if no taget specified

Noresize if present says that user canNOT resize this frame -- this has impact on ability of related frames to be resized

Marginwidth and Marginheight are given in pixels to specify the margin to be used around the frame

scrolling=YES will always give frame scrollbars

scrolling=NO will give no scrollbars and truncate document if necessary

scrolling=AUTO allows Netscape to choose if scrollbars are appropriate

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 53 Event Handlers in JavaScript - I

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 46

Addon Full HTML Index

There are four major types of events which you can add event handlers

Form related events
links
Loading and Unloading new window
Loading Images and Browsing Image Maps

These are new (to traditional non JavaScript HTML) attributes inside those tags which traditionally respond to Mouse clicks or movement (or possibly text input)

One can set event handlers in two ways described on following page

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 54 onMouseOver method (better examples are needed)

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 20.1

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 55 onunload event handler

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 38.8

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 56 Event Handlers in JavaScript - II

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 84.9

Full HTML Index

You can set event handlers within HTML TAG using syntax like

onclick="whattocall(arg1,arg2...)"

Alternatively set event handler explicitly with

document.myform.mybutton.onclick=anotherfunction; // where anotherfunction is a function without arguments and there are NO () in this syntax but you must have () when specifying inside TAG
Also note JavaScript is case sensitive and onclick is ALL lower case here but in HTML which is not case sensitive you are free to use any case in ONclicK= " .. " syntax

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 57 Event Handlers in JavaScript - III

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 96.4

Full HTML Index

onUnLoad event handler is called when you exit a particular page

onLoad event handler is called when you load (or reload on returning to page) a new page

<body onLoad='alert("You have just seen my first JavaScript Program Loaded!")' .. other body tags ... >

onAbort -- Images -- handler called when user aborts loading of image by for instance clicking stop button

onError -- Images and windows -- called when document or Image loading causes an error

onFocus -- windows, frames, and all elements in forms -- handler called when Mouse lies in scope of a window/frame or particular form field

onBlur is opposite of onFocus and corresponds to Mouse leaving scope of those form fields (or window, frames)

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 58 Event Handlers in JavaScript - IV

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 80.6

Full HTML Index

onClick -- button,checkbox,radio,reset,submit in form and links specified by <a > -- handler called when item clicked

onChange -- select,text,textarea in forms when change occurs in these fields

onMouseOver -- plays same role for link that onFocus does for form elements

onMouseout -- opposite of onMouseover for links and also set when user moves mouse pointer outside area defined by image map

onSelect -- text or textarea in forms -- handler called when text selected

onSubmit -- forms -- handler called when submit button on form clicked

onReset -- forms -- handler called when user resets a form

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 59 The Function Object and Event Handlers

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 96.4

Full HTML Index

One can define a string of JavaScript to be compiled as a function with syntax

Target = new Function( [arg1,...argn], functionBody)

where the optional arg1,...argn are arguments for formal function defined in functionBody

Target is either the name of a variable or a property of an existing object or an event handler such as window.onerror

var setBGcolor = new Function("document.bgColor='antiquewhite'");

so you can now execute setBGcolor() where the function can be changed at any time with another setBGcolor = new Function("document.bgColor='pink'");

One can define dynamic event handlers which as described MUST be lower case and MUST have no arguments

window.onfocus = setBGcolor;

Note like eval, functionBody can be JavaScript constructed dynamically as in

var dynamic = 'bgcolor';
Function("document." + dynamic + "='antiquewhite'");

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 60 JavaScript Form Example

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * See also color IMAGE

Secs 37.4

Full HTML Index

<form>

To test tree of knowledge

<input type="text" name="data" size=30 onFocus="window.status='this is a Test of onFocus'; return true">

<input type="button" value="clickit!" onClick="top.dosomething('This is a Test of onClick')" >

</form>

This shows a couple of simple form elements with onFocus and onClick illustrated

window.status is property holding message at bottom of browser window

One would typically have onChange handler as well in text field. Note that with these handlers one does NOT need server side CGI script to process form

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 61 JavaScript Link Example

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 67.6

Full HTML Index

<a href="" onClick="top.seturl(this,'nextitem27.html')" onMouseOver="window.status='this is a Test of onMouseOver'; return true">Exciting Item 27</a>

Note this very typical use of onClick in <a > link.

this is current link and of object type location.

set href to be anything including "" -- don't leave out otherwise won't be a link -- will be anchor instead -- this insures that link blue!

set href and target frame in onClick Event handler

This is is how you get indices to work

put seturl in top document defining frames
<a > links are in index frame and onClick there allows seturl to load required document into mainframe -- the main display frame

function seturl(linkname,fileurl) {

linkname.target="top.mainframe";

linkname.href = fileurl); }

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 62 Structure of Index -- mainframe Case

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Critical Information in IMAGE

Secs 33.1

Full HTML Index

Top document has JavaScript in <head> </head> and defines <frameset></frameset> split in two by columns

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 63 setTimeout and clearTimeout

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 96.4

Addon Full HTML Index

These are methods of a given window or frame

yourID = setTimeout(JSexp, timeinmsecs);

sets yourID to a handle which can be used in

clearTimeout(yourID); // which completely clears what was started by setTimeout

setTimeout starts a timer which causes JavaScript expression JSexp to be evaluated after a time interval of timeinmsecs which is expressed in milliseconds

Time outs can be used to animate text or images and make a display change at after a given interval

Also to start a daemon monitoring whats going on!

Note setTimeout does not start a LOOP -- just a single timing.

Thus clearTimeout need NOT be called unless you want abnormal termination

Further if you want a loop, please ensure JSexp restarts a new setTimeout

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 64 setTimeout method

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 34.5

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 65 Scrolling text using setTimeout

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 36

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 66 Slide Show with Colors

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. *

Secs 24.4

Full HTML Index

See Original Foil

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 67 setTimeOut Example -- Display Current Time - I

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 93.6

Full HTML Index

<SCRIPT>

var timerID = null; // will be returned by call to setTimeout

var timerrunning = false;

function stopclock() { // terminate timeout

if( timerrunning )
- clearTimeout(timerID);
timerrunning = false; }

function startclock()

{ // terminate timeout, display time, start timeout

stopclock();showtime(); }

function showtime()

{ // display time, start timeout

// Calculate current time in timeValue
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000); // Update every second
timerrunning = true; }

</SCRIPT>

HELP! * YELLOW=global GREY=local HTML version of GLOBAL Foils prepared 21 February 97

Foil 68 setTimeOut Example -- Display Current Time - II

From Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames CPS616 spring 1997 -- Feb 17 and 19 1997. * Important Information in IMAGE

Secs 56.1

Full HTML Index

The previous JavaScript goes in header of document whose body is:

<BODY onLoad="startclock()" >

<FORM name="clock" onSubmit="0" >

<input type="text" name="face" size=12 value="" >

</FORM>

</BODY>

Note <FORM> only used for output using

document.clock.face.value

onload function called when page is loaded and this starts timer.

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 Fri Feb 21 1997

GLOBAL foilset Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames

Table of Contents for full HTML of Feb 17/19 Delivered Lecture for Course CPS616 -- aJavaScript Language Objects and Frames

Foil 1 CPS 616 JavaScript Lectureswith Audio February 17 and 19 97Language Objects and FramesSee:http://www.npac.syr.edu/users/gcf/cps616-97feb17

Foil 2 Abstract of CPS616-97 Lectures of February 17 and 19

Foil 3 The JavaScript Language -- Values, Names Etc.

Foil 4 Type Conversion--Subtracting Strings and Numerics

Foil 5 The JavaScript Language -- Expressions - I

Foil 6 The JavaScript Language -- Expressions - II

Foil 7 String Operators: the Concatenation Operator

Foil 8 The JavaScript Language -- Conditionals

Foil 9 JavaScript Object Model -- I

Foil 10 Object Hierarchy in JavaScript

Foil 11 JavaScript Object Model -- II

Foil 12 Example of a JavaScript Function

Foil 13 Recursion Example

Foil 14 Creation of JavaScript Objects

Foil 15 User Defined Objects Continued

Foil 16 The JavaScript with Statement for objects

Foil 17 The for ... in JavaScript syntax

Foil 18 The New Way of Defining Arrays

Foil 19 The old MakeArray Function and Arrays of Object

Foil 20 More on Arrays -- Properties and Multidimensions

Foil 21 Arrays Example

Foil 22 The arguments Array in JavaScript

Foil 23 The this keyword in JavaScript

Foil 24 The parseInt parseFloat System functions

Foil 25 The eval JavaScript Function

Foil 26 Built-In JavaScript and LiveWire Objects

Foil 27 Built-In JavaScript and LiveWire Objects

Foil 28 The Math and Number Objects in JavaScript

Foil 29 Math properties(an exhaustive list)

Foil 30 Math computation(a simple example of reading/writing form data

Foil 31 Math methods (an incomplete list)

Foil 32 The String Object in JavaScript - I

Foil 33 Explanation of String methods - I

Foil 34 Text attributes

Foil 35 Text size(an exhaustive list)

Foil 36 Strings (the JavaScript 'substring' method is wierd)

Foil 37 The String Object in JavaScript - II

Foil 38 Explanation of String methods - II

Foil 39 The Date Object in JavaScript

Foil 40 Creating Date Object Instances

Foil 41 Using Date Object Methods

Foil 42 The Structure of the Navigator Object/Property Hierarchy

Foil 43 The Confused Window Labelling Scheme

Foil 44 The Window Hierarchy Pictorially

Foil 45 Creating New Windows

Foil 46 Role of Frames in JavaScript

Foil 47 Frame Basics in Netscape HTML -- Example

Foil 48 Frames (writing) (a typical use of frames and JavaScript involving a control frame and a content frame)

Foil 49 Frame Basics in Netscape HTML -- Rules

Foil 50 Use of Dummy Frames in JavaScript

Foil 51 General Syntax of <Frameset> </Frameset>

Foil 52 General Syntax of <Frame> tag

Foil 53 Event Handlers in JavaScript - I

Foil 54 onMouseOver method (better examples are needed)

Foil 55 onunload event handler

Foil 56 Event Handlers in JavaScript - II

Foil 57 Event Handlers in JavaScript - III

Foil 58 Event Handlers in JavaScript - IV

Foil 59 The Function Object and Event Handlers

Foil 60 JavaScript Form Example

Foil 61 JavaScript Link Example

Foil 62 Structure of Index -- mainframe Case

Foil 63 setTimeout and clearTimeout

Foil 64 setTimeout method

Foil 65 Scrolling text using setTimeout

Foil 66 Slide Show with Colors

Foil 67 setTimeOut Example -- Display Current Time - I

Foil 68 setTimeOut Example -- Display Current Time - II

Foil 1 CPS 616 JavaScript Lectures
with Audio February 17 and 19 97
Language Objects and Frames
See:
http://www.npac.syr.edu/users/gcf/cps616-97feb17