|
Java versus JavaScript versus HTML Issues
|
|
Some Simple Motivating Examples
|
|
Language Features and Syntax
|
|
The Peculiar Object Model -- Functions Properties and Methods
|
|
Arrays in old and new JavaScript
|
|
Arguments of Functions
|
|
with and other object related syntax
|
|
The JavaScript built in Math String and Date Objects
|
|
The Navigator Objects -- Frames Windows Document Form
|
|
Event Handling including Function object
|
|
Cookies
|
|
User Objects and Examples including using JavaScript for frames
|
|
Java versus JavaScript versus HTML Issues
|
|
Some Simple Motivating Examples
|
|
Language Features and Syntax
|
|
The Peculiar Object Model -- Functions Properties and Methods
|
|
Arrays in old and new JavaScript
|
|
Arguments of Functions
|
|
with and other object related syntax
|
|
The JavaScript built in Math String and Date Objects
|
|
The Navigator Objects -- Frames Windows Document Form
|
|
Event Handling including Function object
|
|
Cookies
|
|
User Objects and Examples including using JavaScript for frames
|
|
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
|
|
TEXT ............................................. COMPUTER Language
|
|
HTML --> JavaScript Java <--- C++
|
Now we can use it under some circumstances as an alternative to Java where the "rapid prototyping" of a fully scripted language is helpful
-
We expect somebody to develop a fully interpreted Java -- equivalently to extend JavaScript to support more built-in objects (e.g. networking, images)
-
JavaScript is "either" active text (HTML) or a focused language!
|
JavaScript can be thought of as Java with the AWT (Abstract Windowing Toolkit) replaced by Netscape Client
-
JavaScript is a domain specific Interpreter for "Web Document Domain"
-
e.g. Postscript is a domain specific Interpreter for text layout and MATLAB is an interpreter for matrix manipulation, Mathematica is domain specific for mathematics ......
|
|
Execute C code Instruction -- 1 clock cycle ( 10^8 per second)
|
|
Run a client side C subroutine -- can do upto 10^6 instructions in time (few milliseconds) that is significant for user
|
|
JavaVM Interpreter -- roughly 50 times slower than C
|
|
JavaVM Just in Time Compiler (effectively compile JavaVM in real time) -- roughly 2 to 8 times slower than C
|
|
Native Java Compiler -- same speed as C
|
|
Perl Interpreter (but does process whole program before interpreting) -- 500 times slower than C except in runtime
|
Tcl, JavaScript "true" Interpreters - 5000 times slower than C
-
Can still do 100-1000 instructions in time that users don't notice!
|
|
Contact Host via CGI script -- Server, Network and Client HTML page regeneration delay can be measured in seconds.
|
|
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
|
|
One can parameterize HTML using document.write(ln) commands such as:
|
|
document.writeln("string1" + JSvariable +"string2"); // etc.
|
|
A "lighter weight way of achieving this can be illustrated by direct HTML syntax with NO <SCRIPT> tag and no document.write
|
|
<IMG WIDTH="&{JSvar1};" SRC="&{JSvar2};" >
|
|
where JSvar1 and JSvar2 are JavaScript variables holding width and URL of image
|
|
Syntax is modeled on that for for special characters
|
Such JavaScript Entities can ONLY appear on RIGHT HAND side of attribute values
-
Cannot appear in HTML text such as titles.
-
document.writeln approach has no such restriction!
|
|
JavaScript: User has full access to capabilities of Netscape Navigator in functionality of window components
|
|
Java: User relies on Java AWT (or potentially HotJava browser) for features of Window Components
|
|
JavaScript: No explicit data types (just var) --- loose typing
|
|
Java: Variable data types must be declared and carefully "cast" to convert -- strong typing
|
|
JavaScript: Dynamic Binding. Object references are interpreted at runtime (typical interpreter)
|
|
Java: Static Binding. Object references must exist at compile time.
|
|
Security: Both JavaScript and Java applets as implemented today have significant security restrictions. This is a (Netscape) Runtime and not a language feature!
|
|
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 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
|
|
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!
|
|
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"));
|
|
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
|
|
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!
|
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")
|
|
eval did not work properly for a long time! -- Please check on your browser
|
|
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
|
|
/* 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
-
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
|
|
<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
|
|
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)
|
|
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
|
|
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'");
|
|
<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); }
|
|
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
|
|
The document object has several important subobjects including Anchor, Applet, Area, Form, Image and Link.
|
|
It also has arrays anchors, applets, forms, images and links arrays holding all the occurrences of these objects in a particular document.
|
|
We have illustrated Form and Link already -- here we look at Image
|
|
<IMG NAME="fred" SRC="jim.gif" > in an HTML file generates an object document.fred of type Image with property document.fred.src="jim.gif"
|
One can preload images using syntax like:
-
image1 = new Image(); image1.src = "henry.jpg";
-
and then change Image in document using
-
document.fred.src = image1.src;
-
henry.jpg is fetched from cache and so this is fast!
|
|
This technology can be used for animated images and also to quickly change a picture displayed in perhaps an online shop catalog where user chooses a new item in a form.
|
|
Cookies were introduced by Netscape to preserve client side state
|
|
If you have a CGI script that services several clients (ordering T Shirts perhaps), it is neatest to use client and not server to store information such as name of user, passwords etc.
|
Traditionally used as passed in forms using "hidden" fields
-
<INPUT type=hidden" name="user" value="" >
-
set by formname.user.value = WHATHAVEYOU;
|
|
Such hidden fields are passed to CGI scripts in same fashion as other variables set in form text fields
|
|
hidden values can either by set by JavaScript on client side or returned built into a page constructed by CGI script which might read N values and return a new form with M new fields for user and N old entries preserved in hidden fields
|
|
So hidden variables are nice but only preserved as long as you keep to page you started with or that returned by CGI script.
|
|
Tainting ensures that certain properties cannot be freely used
|
|
These "taintable" properties include cookie, links, title etc in document; most interesting properties of forms; history; location
|
Once you access such a property from a SERVER different from that which spawned JavaScript page, then your current statement and everything derived from it is "tainted"
-
Note testing to see if a variable is tainted, taints your program and so one cannot write useful JavaScript programs involving tainted quantities and networking
|
|
tainted variables may NOT be passed over the Network to other servers e.g. to a CGI Script
|
You can control the tainting of pages and untaint them so that remote servers can freely use
-
However I don't think anybody does this ......
|
|
<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
Addon
Secs 74.8