|
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
|
|
<SCRIPT LANGUAGE="JavaScript" >
|
|
<!-- A Conventional comment to hide JavaScript from old browsers
|
|
...... Bunch of JavaScript Statements .......
|
|
//scriptend-->
|
|
</SCRIPT>
|
|
Note depending on your needs, JavaScript can be in Header or Body section of document
|
|
<HTML><HEAD><TITLE>Javascript with Forms</TITLE>
|
|
<SCRIPT LANGUAGE="JavaScript" >
|
|
<!-- A Conventional comment to hide JavaScript from old browsers
|
|
function compute(form) {
|
|
if( confirm("Is this what you want?"))
|
|
form.result.value = eval(form.expr.value);
|
|
else alert("Enter a new expression then!"); }
|
|
//scriptend-->
|
|
</SCRIPT></HEAD>
|
|
<BODY><FORM>
|
|
Enter An Expression:
|
|
<INPUT TYPE="text" NAME="expr" SIZE=15>
|
|
<INPUT TYPE="button" VALUE="DoIt!" ONCLICK="compute(this.form)">
|
|
<BR>Result:
|
|
<INPUT TYPE="text" NAME="result" SIZE=15>
|
|
<BR>
|
|
</FORM></BODY></HTML>
|
|
<HTML><HEAD><TITLE>Javascript for Parameterizing HTML</TITLE>
|
|
<SCRIPT LANGUAGE="JavaScript" >
|
|
<!-- A Conventional comment to hide JavaScript from old browsers
|
|
var imagewidth=600; // These could be changed by form input or some
|
|
var imagefile="npac.gif"; // computation based on size of window etc.
|
|
//scriptend-->
|
|
</SCRIPT></HEAD>
|
|
<BODY> ......Bunch of Normal Stuff
|
|
<SCRIPT LANGUAGE="JavaScript" >
|
|
<!-- A Conventional comment to hide JavaScript from old browsers
|
|
document.writeln('<img align=top width=' + imagewidth + ' src="' + imagefile + '" >');
|
|
//scriptend-->
|
|
</SCRIPT>
|
|
.... Yet More Normal Stuff
|
|
</BODY></HTML>
|
|
Note single quotes used for JavaScript, Double quotes for HTML -- can use \' if necessary to hide special meaning from JavaScript
|
|
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
|
|
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!"
|
|
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 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.
|
|
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
|
|
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
|
|
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";
|
|
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
|
|
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"));
|
|
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
|
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
|
|
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
|
|
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")
|
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
|
|
/* 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; }
|
|
}
|
|
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
|
|
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!
|
|
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
|
|
<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
|
|
<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
|
onClick -- button,checkbox,radio,reset,submit in forms
-
-- links specified by <a > -- handler called when item clicked
|
|
onFocus -- select,text,textarea in forms -- handler called when Mouse lies in scope of this field
|
|
onBlur is opposite of onFocus and corresponds to Mouse leaving scope of those form fields
|
|
onChange -- select,text,textarea in forms when change occurs in these fields
|
|
onMouseOver -- plays same role for link that onFocus does for form elements
|
|
onSelect -- text or textarea in forms -- handler called when text selected
|
|
onSubmit -- forms -- handler called when submit button on form clicked
|
|
<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.
|
|
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(name,file) {
|
|
name.target="top.mainframe";
|
|
name.href = checkurl("http://www.npac.syr.edu/wisdom/",file); }
|
|
An Interesting use of JavaScript is produce documents that carry with them the necessary information to be used in a Index -- manframe example system
|
|
The idea is that pages loaded into subsidiary frames carry with them the necessary JavaScript to set appropriate control structures in top (the HTML page defining frames)
|
|
For instance there could be FIRST NEXT CAROUSEL PREVIOUS etc. options in top to loop through URL's of a given set
|
|
These can be neatly preset by a call to a routine such as AccumulateInfo on following foil
|
|
Options specify name (worldname) or need for special processing (style)
|
|
Other options specify URL's of related documents -- indices/Foils to loop through etc.
|
|
Note all calls are optional
|
|
<script language="JavaScript">
|
|
<!--scriptbegin
|
|
top.textsize('title',72);
|
|
top.textsize('bullet1',42,47,81);
|
|
top.textsize('reset');
|
|
top.AccumulateInfoPage('familyname',"CPS616");
|
|
top.AccumulateInfoPage('worldname',"NPAC");
|
|
top.AccumulateInfoPage('style','webfoil');
|
|
//scriptend-->
|
|
</script>
|
|
</head>
|
|
<head> ... <script language="JavaScript">
|
|
testbuttons = new top.MakeArray(2);
|
|
testbuttons[1]='one';
|
|
testbuttons[2]='two';
|
|
function testprocess(object1,object2,index) {
|
|
confirm(object1.name + ' ' + object2.value + ' ' + index); }
|
|
</script></head>
|
|
This can give a form created by JavaScript
|
|
<form name="testbuttonsform">
|
|
<script language="JavaScript">
|
|
top.flexbuttons(1,"testgroup",2,testbuttons,2,"testprocess");
|
|
</script>
|
|
</form>
|
|
function flexbuttons(maxradio, groupname, number, indname, indexselected, onprocess)
|
|
/* Output a group of single selection radio or select buttons */
|
|
/* maxradio defines strategy -- if more than maxradio items use a select field, if smaller than this use radio buttons */
|
|
/* User responsible for <form> </form> container and any formatting */
|
|
/* onprocess is textstring of "onclick/change" function" */
|
|
/* number is number of buttons with name indname[1...number] */
|
|
/* groupname is name of group */
|
|
/* indexselected running from 1 to number is initial selection */
|
Abstract * Foil Index for this file
