CPS616 1996
CPS 616
January-April 1996
Computational Science Track on base technologies for the Information Age:
Module on JavaScript from Netscape
Instructor: Geoffrey Fox
Version 25 February 96
teamed with Wojtek Furmanski, Nancy McCracken
Syracuse University
111 College Place
Syracuse
New York 13244-4100
Abstract of CPS616 JavaScript Presentatation
Some Simple Motivating Examples
Language Features and Syntax
The Peculiar Object Model -- Functions Properties and Methods
MakeArray and how to fool Interpreter into Arrays
Arguments of Functions
with and other object related syntax
The Math String and Date Objects
The Navigator Objects
Event Handling
User Objects and examples including using JavaScript for frames
General Remarks on JavaScript
Historically JavaScript was called LiveScript and developed by Netscape with some of the same goals as Java but focussed on a "smaller world" -- manipulation of text and options connected with Netscape Clients
Now we can use it as an alternative to Java where the "rapid prototyping" of a fully scriped language is helpful
JavaScript can be thought of as Java with the AWT (Abstract Windowing Toolkit) replaced by Netscape Client
JavaScript particularly useful for multi-frame windows and for manipulating forms without complex CGI (Server Side) scripts
Hello World Example of JavaScript- I
A Test of JavaScriptContinue with conventional HTML
Hello World Example of JavaScript- II
There is only one real JavaScript statement here -- namely
document.writeln("textstring");
This outputs into current page the text in quotes followed by a newline
And note the rather peculiar way we "hide" JavaScript from browsers that can't understand it by enclosing in convential HTML Comment syntax
Note depending on your needs, JavaScript can be in Header or Body section of document
Example of Clicking on a Form - I
Javascript with Forms
Example of Clicking on a Form - II
Enter An Expression: 9+5
Result: 14
confirm is a native Javascript method popping up a window, requesting confirmation of requested action
alert is a native Javascript method popping up a window with a message requiring user to place OK to get rid of.
onclick="Javascript Statement Block" naturally executes statement(s) when button clicked
Example of Parameterized HTML
Javascript for Parameterizing HTML
......Bunch of Normal Stuff
.... Yet More Normal Stuff
Note single quotes used for JavaScript, Double quotes for HTML -- can use \' if necessary to hide special meaning from JavaScript
The JavaScript Language -- Values, Names Etc.
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
The JavaScript Language -- Expressions - I
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
The JavaScript Language -- Expressions - II
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!"
The JavaScript Language -- Conditionals
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
JavaScript Object Model -- I
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.
JavaScript Object Model -- II
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
Example of a JavaScript Function
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 name="textofframelabel" 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 section so as to ensure they are loaded before anything else
Creation of JavaScript Objects
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
function Display(no) {
this.displayno = no; // Label display instance
this.pageframe = 'foil'; // Default for name of frame to put page in
this.indexframe= 'list'; // Default for name of frame to be index in
this.pagepointer = null; // Default URL for page to use
this.indexpointer = null; // Default URL for index to use
}
cps616 = new Display(1); // create an object cps616
cps616.pagepointer = "../cps616over96/webfoilindex.html";
cps616.indexpointer = "../cps616over96/foillist.html";
Addition of Methods to Object Definitions
Define a new function outside Display by
function LoadDisplay {
top.setframe(this.pagepointer,this.pageframe);
top.setframe(this.indexpointer,this.indexframe);
}
Add to Display definition after this.indexpointer = null;
this.LoadDisplay = LoadDisplay;
Now executing cps616.LoadDisplay(); // should load pages of CPS616 into their specified frames
General Syntax is:
Objectname.methodname = functionname;
where Objectname is an existing Object
Final Version of Display "Constructor"
This leads to "final" version of Display
function Display(no) {
this.displayno = no; // Label display instance
this.pageframe = 'foil'; // Default for name of frame to put page in
this.indexframe= 'list'; // Default for name of frame to be index in
this.pagepointer = null; // Default URL for page to use
this.indexpointer = null; // Default URL for index to use
this.LoadDisplay = LoadDisplay; // call this method to load URL's into pages
}
The JavaScript with Statement for objects
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
}
The for ... in JavaScript syntax
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] + " "; }
result += "";
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"));
The MakeArray Function and Arrays of Objects - I
Somewhat peculiarly, one can refer to properties of any object in an array notation. Namely:
cps616[0]; is same as cps616.displayno;
cps616[4]; is same as cps616.indexpointer;
This feature can be used to define objects that act just like arrays: set magic function
function MakeArray(size) {
this.length = size;
for( var i=1; i<=size; i++ ) {
this[i]= 0; }
}
The MakeArray Function and Arrays of Objects - II
var maxdisplay = 10;
displays = new MakeArray(maxdisplay);
for( var n=1; n <= maxdisplay; n++) {
displays[n] = new Display(n); } // set elements of displays to be objects of "class" Display
Now we have an array of Display objects of length maxdisplay which can be referenced as displays[1] ... displays[maxdisplay] with properties such as
displays[currentdisplay].pageframe; etc.
This can be nested with MakeArray used say inside a function such as Display to get variables referenced like
displays[currentdisplay].nestedarray[itsindex]; // and so on for more array indices -- this implies we put in Display
this.nestedindex = new MakeArray (whathaveyou) ;
for( var n=1; n <= whathaveyou; n++) {
nestedindex[n] = null; } // Override initialization in MakeArray
The arguments Array in JavaScript
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
The this keyword in JavaScript
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 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:
Click Here for Dynamic URL
Here this refers to link object created by
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
The parseInt parseFloat System functions
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
The eval JavaScript Function
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
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")
The Math Object in JavaScript
There are currently four built in types of objects in JavaScript
Date, Math , string (one object each -- string is lower case s) plus a whole bunch connected with HTML documents
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 string Object in JavaScript - I
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");
}
Explanation of string methods - I
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) and they start with a capital S!
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
The string Object in JavaScript - II
/* 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('');
index=index1;
jndex=jndex1; }
}
Explanation of string methods - II
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
The Date Object in JavaScript
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!
The Structure of the Navigator Object/Property Hierarchy
This is still unclear as documentation incomplete and what works changes with time!
The Confused Window Labelling Scheme
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
Note manual written to accomodate both client(navigator) and server(LiveWire) objects but this presentation only covers client side (Server side introduced April 96)
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 are array properties
top parent self are properties labelling particular frames and windows
Role of Frames in JavaScript
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?
Frame Basics in Netscape HTML -- Example
Bunch of JavaScript
<h2> This Page needs frames -- please find a kinder URL</b>
Frame Basics in Netscape HTML -- Rules
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 tag for each