|
Java versus JavaScript versus HTML issues
|
|
Some simple motivating JavaScript examples
|
|
Language features and syntax
|
|
JavaScript's object model Ñ methods and properties
|
|
Arrays (old and new) in JavaScript
|
|
Method arguments
|
|
with and other object-related syntax
|
|
Built-in objects: Array, Date, Math, Object, String
|
|
Navigator objects: window, document, location, etc.
|
|
Property arrays: frames, anchors, forms, images, etc.
|
|
Event handling including Function object
|
|
Cookies
|
|
User objects and Examples including using JavaScript for frames
|
|
Java versus JavaScript versus HTML issues
|
|
Some simple motivating JavaScript examples
|
|
Language features and syntax
|
|
JavaScript's object model Ñ methods and properties
|
|
Arrays (old and new) in JavaScript
|
|
Method arguments
|
|
with and other object-related syntax
|
|
Built-in objects: Array, Date, Math, Object, String
|
|
Navigator objects: window, document, location, etc.
|
|
Property arrays: frames, anchors, forms, images, etc.
|
|
Event handling including Function object
|
|
Cookies
|
|
User objects and Examples including using JavaScript for frames
|
|
Historically, JavaScript was called LiveScript, which was developed by Netscape with some of the same goals as Java but focused on a "smaller world" Ñ manipulation of text and objects connected with Netscape clients
|
|
Markup Language ............................. Programming Language
|
|
Ñ> HTML JavaScript Java C++ <Ñ
|
In some cases, we use JavaScript 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 and/or to extend JavaScript to support more built-in objects (e.g., networking, images)
-
Think of JavaScript as 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 documents
-
E.g., PostScript is a domain-specific interpreter for text layout, MATLAB is an interpreter for matrix manipulation, Mathematica is domain-specific for mathematics applications, etc.
|
|
JavaScript is particularly useful for multi-frame windows and for manipulating forms without complex (server-side) CGI scripts
|
As a client-side programming language, JavaScript can be much faster than a CGI-based form, which has inevitable delays as required by server-client communication and invocation of a new process on the server side
-
Java shares this advantage
|
|
This increase in client-side processing speed is essential in some applications since users will not accept long delays (several seconds) in response to simple mouse clicks
|
|
Java is a broad industry standard, which has been carefully designed and is well documented
|
|
JavaScript (originally from Netscape, but supported by Microsoft) has a mediocre design and is poorly documented
|
|
Execute C code instruction Ñ 1 clock cycle ( 10^8 per sec)
|
|
Run a client-side C subroutine Ñ can do up to 10^6 instructions in time that is significant for user (few milliseconds)
|
|
JavaVM interpreter Ñ roughly 50 times slower than C
|
|
JavaVM Just in Time compiler (effectively compile JavaVM in real time) Ñ roughly 2Ð8 times slower than C
|
|
Native Java compiler Ñ same speed as C
|
|
Perl interpreter (processes entire 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!
|
|
CGI script Ñ server, network, and client HTML page regeneration delay measured in seconds
|
|
There is only one real JavaScript statement here, namely
|
|
document.writeln("textstring");
|
|
This statement outputs into current page the quoted text followed by a newline
|
|
Note the rather peculiar way we "hide" JavaScript from browsers that don't understand it by inserting a conventional HTML comment:
|
|
<SCRIPT LANGUAGE="JavaScript">
|
|
<!-- a comment to hide JavaScript from old browsers
|
|
// Insert JavaScript statements here
|
|
// end script hiding -->
|
|
</SCRIPT>
|
|
Depending on your needs, JavaScript may be written in <HEAD> or <BODY> section of HTML document
|
|
<HTML><HEAD><TITLE>JavaScript with Forms</TITLE>
|
|
<SCRIPT LANGUAGE="JavaScript">
|
|
<!-- a 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!");
|
|
}
|
|
// end script hiding -->
|
|
</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>Parameterized HTML</TITLE>
|
|
<SCRIPT LANGUAGE="JavaScript">
|
|
<!-- A comment to hide JavaScript from old browsers
|
|
var imagewidth=600; // Variables could be input
|
|
var imagefile="npac.gif"; // in a form or computed...
|
|
// end script hiding -->
|
|
</SCRIPT></HEAD>
|
|
<BODY> É Bunch of normal stuff
|
|
<SCRIPT LANGUAGE="JavaScript" >
|
|
<!-- A comment to hide JavaScript from old browsers
|
|
document.writeln('<img align=top width=' + imagewidth + ' src="' + imagefile + '" >');
|
|
// end script hiding -->
|
|
</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.writeln()
|
|
commands such as:
|
|
document.writeln("str1" + JSvariable + "str2");
|
|
Another way of achieving this is by directly embedding the variable into the HTML, requiring no <SCRIPT> tag and no document.write():
|
|
<IMG WIDTH="&{JSvar1};" SRC="&{JSvar2};">
|
|
where JSvar1 and JSvar2 are JavaScript variables
|
|
Syntax is modeled after HTML special characters: for example, > produces a literal greater than sign (>)
|
Such JavaScript entities can ONLY appear on the right-hand side of attribute value pairs
-
Cannot appear in arbitrary HTML text such as titles
-
The document.writeln approach has no such restriction!
|
|
JavaScript: User has full access to capabilities of Navigator and functionality of window components
|
|
Java: User relies on Java AWT (or perhaps HotJava browser) for user interface components
|
|
JavaScript: No explicit data types (loosely typed)
|
|
Java: Variable data types must be declared and carefully "cast" to convert from one type to another (strong typing)
|
|
JavaScript: Dynamic bindingÑobject references are interpreted at runtime (typical interpreted behavior)
|
|
Java: Static bindingÑobject references are resolved at compile time
|
|
Security: Today JavaScript and Java applets have significant security restrictions. This is a (Netscape) runtime and not a language feature!
|
|
JavaScript only has one simple type, namely:
|
|
var anumber = 137; // use var to define a number
|
|
var astring = "1"; // or to define a string
|
|
Loose typing in JavaScript allows interpreter to creatively interpret an expression. Note that strings take precedence over numbers:
|
|
var x = astring + anumber; // results in x = "1137"
|
|
(Early versions of JS inferred the type from the leftmost variable.)
|
|
Use parseInt and parseFloat to extract numerical values from strings
|
|
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). Also, one can use \n for newline and \t for tab (and a few others).
|
|
Boolean literals are either true or false
|
|
Comments come in two flavors:
|
|
/* any text including newlines */
|
|
statements; // comment terminated by newline
|
|
Bitwise logical operators: & (AND) | (OR) ^ (XOR) operate on 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 (position 31)
|
|
>>> is zero fill right shift with no special treatment of sign bit
|
|
Boolean operators are && (AND), || (OR), ! (NOT) and can only operate on boolean variables that are true or false
|
|
Relational operators are == > >= < <= != which can be used on numeric or string variables
|
|
Concatenation operator (+) joins two strings together:
|
|
x = "Hello "; y = "World!";
|
// x + y is "Hello World!"
-
Note + is written . in PERL
|
|
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, function, and constructor!
|
|
An object is a container with properties and methods inside it.
|
|
Variables or other objects inside an object are called properties
|
|
Functions inside an object are called methods
|
|
Arrays are defined as properties inside an object
|
|
Multidimensional arrays are arrays, which themselves have properties that are arrays
|
|
Variables are written in object-oriented fashion:
|
|
parentobject.prop1[index1].prop2..propN[indexN]
|
|
There is no hierarchical inheritance in object definitions, 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 Navigator and those defined by the user.
|
Here is an example of a Navigator object with a typical property and method
-
document is a Navigator object corresponding to an HTML page
-
document.writeln("string") is a document method, which outputs "string" followed by a newline
-
document.location is a document property containing its URL
|
|
top.setFrame("help.html","mainDisplay");
|
|
function setFrame(relativeURL,frameName) {
|
|
var actualURL = top.baseURL + relativeURL;
|
|
top.frames[frameName].location.href =
|
|
}
|
|
top refers to the top-level window in a frameset document. It has a property called frames, which is an array labeled by integers or by name as in <frame> name="frameName" </frame> tag
|
|
Setting a URL into the location.href property of a frame loads that page into the given frame
|
|
Use this.actualURL to distinguish local variable actualURL from a global variable of the same name
|
|
Put these functions in <head> </head> container to ensure they are loaded before anything else
|
|
You define a class template (to use Java lingo) with a function definition and then create an instance of the object with the new statement:
|
|
function MenuObject(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(); // To be discussed
|
|
}
|
|
Define two menu instances:
|
|
worldMenu = new MenuObject(1, 'world');
|
|
familyMenu = new MenuObject(2, 'family');
|
|
Object properties are accessed in natural o-o fashion:
|
|
var actualSelected = worldMenu.menuSelection;
|
|
familyMenu.color = 'red';
|
Curiously, in Netscape 2 you can also use array-like notation:
-
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 associates methods with user-defined objects, but with a syntax that appears very limiting since object methods have identical arguments to constructor 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!
|
|
One can iterate over all properties of an object:
|
|
for ( variable in object ) { É }
|
|
function dump_props(obj, obj_name) {
|
|
var result = "";
|
for ( var i in obj ) {
-
result +=
-
obj_name + "." + i + " = " + obj[i] + "<BR>";
|
|
}
|
|
return result + "<HR>";
|
|
}
|
|
Here i is an index and obj[i] is the 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"));
|
|
function foo(x1, x2) {
|
|
// the arguments array:
|
|
var argv = foo.arguments;
|
|
// number of arguments (same as argv.length):
|
|
var n = foo.arguments.length;
|
|
// y1 is same as this.x1 or argv[0]:
|
|
var y1 = foo.arguments[0];
|
|
// the last argument (same as argv[n-1]):
|
|
var yn = foo.arguments[n-1];
|
|
// use inside function to determine caller:
|
|
var wherefrom = foo.caller;
|
|
}
|
|
This allows one to process functions with a variable number of arguments
|
|
The arguments array is a property of all user-defined functions and Function objects.
|
The this keyword is very useful but confusing since it's not always clear what it refers to
-
Not always clear when this is needed
|
|
Here is an example that sets the URL for a link:
|
|
function setURL(obj) { // Put in <head> container
|
|
obj.target = "Desiredframe"; // set frame
|
|
obj.href = "http://www.npac.syr.edu"; // set URL
|
|
}
|
|
In the body of the HTML document:
|
|
<a href="" onClick="setURL(this)" onMouseOver="window.status='URL set dynamically in method setURL'; return true">Click Here for Dynamic URL</a>
|
|
Here this refers to a link object created by <a>..</a>
|
|
window.status is line at bottom, which usually records URL
|
|
Note setURL overrides href specified in <a> tag
|
|
There are JavaScript functions (not string methods) that convert strings to numbers
|
|
parseInt("15") or equivalently parseInt("15",10) both return the number 15 in base 10
|
|
The optional second argument is the desired radix so that parseInt("15",8) returns 17 in octal
|
|
If input string begins with "0x" the default radix is 16 (hexadecimal) whereas if it begins with "0" the default radix is 8 (octal) Ñ otherwise, the default radix is 10
|
|
x = 1 + "1"; // evaluates to "11"
|
|
x = 1 + parseInt("1"); // evaluates to 2
|
parseFloat(string) returns a floating point value
-
var x = "0.0314E+2"; var y = parseFloat(x); // sets y=3.14
|
|
On platforms that support it, parseInt and parseFloat return NaN (Not a Number) if parsing fails
|
|
eval is an important function that lets you evaluate JavaScript code on-the-fly
|
|
For instance, document.forms[0].myName.value is the value of a form element:
|
|
<INPUT TYPE="text" NAME="myName" VALUE="value" onChange="handle(this.name)">
|
|
this.name holds myName as an ASCII string:
|
|
var x = document.forms[0].myName.value; // No!
|
|
var s = "document.forms[0]." + myName + ".value";
|
|
var x = eval(s); // Yes!
|
|
That is, eval applies the JavaScript interpreter to its argument
|
|
This can be used to copy information between forms as in
|
|
eval("document.forms[1]." + myName + ".defaultvalue")
|
|
= eval("document.forms[0]." + myName + ".value")
|
|
For a long time, eval didn't work right, so check your browser!
|
|
Math has a set of properties (built-in constants) including
|
|
E, LN10, LN2, PI, SQRT1_2, and SQRT2. For example:
|
|
Math.PI is equal to 3.14159É
|
|
Math methods include the usual ones:
|
|
Math.abs(x) returns the absolute value of x
|
|
Math.max(x1,x2) returns the maximum of x1 and x2
|
|
Math.cos(x) returns the cosine of x (given in radians)
|
|
Math.round(x) rounds x to the nearest integer
|
|
Math.pow(2, 0.5) is equivalent to Math.sqrt(2)
|
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" sometimes returned by parseInt and parseFloat
|
|
Any constant such as "Hello World!" or a variable holding text is a String object in JavaScript. For example:
|
|
/* Add stem to newurl if the latter is a relative
|
|
address. Stem must end with a slash. */
|
|
function checkurl(stem, newurl) {
|
|
var len = newurl.length; // length property of String
|
|
var stemlen = stem.length;
|
if ( len < 7 )
-
return (stem + newurl); // URL is not absolute
|
|
var grab = newurl.substring(0,6); // first six chars
|
if( (grab == "ftp://") || (grab == "http:/") )
-
return newurl; // URL IS absolute!
|
|
return (stem + newurl);
|
|
}
|
|
function seturl(name) {
|
|
var addr = "http://www.npac.syr.edu/users/gcf/wisdom/";
|
|
name.href = checkurl(addr, "List.html");
|
|
}
|
|
The String object has one property:
|
|
myString.length gives string length in characters
|
|
JavaScript has only one type of String object, whereas Java has both String (fixed) and StringBuffer (mutable) classes
|
|
Characters are indexed from the left starting at 0 and ending with myString.length - 1
|
|
newstring = myString.substring(pos1,pos2);
|
|
returns the substring in position pos1 ... pos2 - 1
|
|
Peculiarly, if pos2 < pos1, the previous statement returns the substring in position pos2 ... pos1 - 1
|
|
/* Given two linked comma-separated strings containing parameter
|
|
names and values for an applet, return the corresponding HTML */
|
|
function commaseparated(appletpname,appletpvalue) {
|
|
var stop = appletpname.lastIndexOf(','); // last comma
|
|
if( appletpname.length <= 0 )
|
|
stop = -2; // length is property of String object
|
|
index = -1;
|
|
var ct = 0; // this is a precaution
|
|
var jndex1 = 0;
|
|
var jndex = -1;
|
|
while( index <= stop) { // scan through commas
|
|
index1 = appletpname.indexOf(',', index+1); // next comma
|
|
if (index1 < 0 ) index1 = appletpname.length; // no more commas
|
|
++ct;
|
|
if ( ct > 20 ) break;
|
|
jndex1 = appletpvalue.indexOf(',', jndex+1);
|
|
if ( jndex1 < 0 ) jndex1 = appletpvalue.length;
|
|
// Extract the stuff between commas
|
|
var grab1 = appletpname.substring(index+1, index1);
|
|
var grab2 = appletpvalue.substring(jndex+1, jndex1);
|
|
var tag = '<param name=' + grab1 + ' value="' + grab2 + '">';
|
|
top.document.writeln(tag);
|
|
index = index1;
|
|
jndex = jndex1;
|
|
}
|
|
}
|
|
We introduce two new methods:
|
|
myString.IndexOf(lookfor);
|
|
where myString and lookfor are any strings
|
|
IndexOf returns the position of a character in myString that begins a substring exactly matching lookfor:
|
|
var s = "http://www.npac.syr.edu";
|
|
s.IndexOf("www"); // returns 7
|
|
myString.IndexOf(lookfor, searchfrom);
|
|
where searchfrom specifies the starting position of the search (see the previous foil for an example)
|
|
myString.lastIndexOf(lookfor, lastsearchfrom);
|
|
is similar to IndexOf but starts from the end of the string
|
|
Default value of lastsearchfrom is myString.length - 1
|
|
IndexOf and lastIndexOf return -1 if requested string is not found
|
|
JavaScript really needs the powerful text processing capabilities of PERL. (Lets hope either Netscape adds them or somebody builds them.) On the other hand, JavaScript (like Java) has 21 built-in methods associated with the Date object!
|
|
today = new Date(); // current Date and Time
|
|
now = new Date("February 26, 1996 15:13:00"); /* sets now to date/time these notes were prepared! */
|
|
Both Java and JavaScript store dates internally as number of elapsed milliseconds since January 1, 1970 00:00:00.
|
|
In a Java, Date.UTC(date as bunch of numbers) and Date.parse(date as a text string) are static methods
|
|
There are methods such as getMonth that extract the month from a date
|
|
See the online resource for all possible methods!
|
|
The JavaScript hierarchy may be illustrated as follows:
|
|
top.frames[frameIndex].document.
|
|
forms[formIndex].elementName.value
|
|
where frameIndex and formIndex are usually numbers
|
The frames array may also be indexed by name. For example, frames["frameName"] is sometimes more convenient
-
One can use eval to generate framename
|
|
window and Frame are objects reflecting hierarchy
|
|
document, Form, history, Link, and location are objects defining parts of a window or frame
|
|
anchors, links, forms, frames, applets, and images are property arrays
|
|
top, parent, and self are properties of frames and windows
|
|
All of the above are defined within a single browser window
|
|
opener is a property of window, which contains the name of the window that called open to create the current window
|
|
<HEAD><SCRIPT>...</SCRIPT></HEAD>
|
|
<BODY>
|
|
Various actions that load a new URL into page
|
|
</BODY>
|
|
will result in the loss of all JavaScript methods and properties!
|
|
This can be avoided by using dummy frames:
|
|
<HEAD><SCRIPT>...</SCRIPT></HEAD>
|
|
<FRAMESET ROWS="1,*">
|
|
<FRAME NAME="DUMMY">
|
<FRAME NAME="ActualFrame"
-
SRC="Thiscontainsoldbodyhtml.html">
|
|
</FRAMESET>
|
|
Now use <a href="URL" target="ActualFrame"> so that reloading will NOT destroy your JavaScript!
|
|
Note we defined a dummy frame above ActualFrame that occupies one pixel (could use zero!). The * notation tells Netscape to assign the remaining rows to the second frame
|
<FRAME SRC="URL" NAME="name"
-
SCROLLING=YES|NO|AUTO NORESIZE
-
MARGINWIDTH="value" MARGINHEIGHT="value">
|
|
All of these are optional Ñ the URL is the document to be loaded into this frame, which is often blank since user or script will specify what to load using TARGET="name" in a link
|
|
The value of NAME attribute is used by TARGET and is essential if you want to load a frame from the outside. A document will load into the current frame if no target specified
|
|
scrolling=YES always gives frame scrollbars
|
|
scrolling=NO gives no scrollbars and truncates document if necessary
|
|
scrolling=AUTO allows Netscape to choose if scrollbars are needed
|
|
NORESIZE if present says that user can NOT resize this frame, which 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
|
The onLoad event handler is automatically called when you load (or reload) a page
-
<BODY onLoad="myFunc()">
-
<FRAMESET onLoad="myFunc()">
|
|
The onUnload event handler is automatically called when you exit a page
|
|
Images: the onAbort event handler is called when user aborts loading of image (by clicking stop button, e.g.)
|
|
Images and windows: the onError event handler is called when document or image loading causes an error
|
|
Windows, frames, and form elements: the onFocus event handler is called when the mouse moves within the scope of a window, frame, or form input field
|
|
The onBlur handler is the opposite of onFocus
|
|
Checkboxes, buttons (radio, reset, submit) and hyperlinks: the onClick handler is called when the item is clicked
|
|
Select, text, textarea: the onChange handler is called when a change occurs in these fields
|
|
onMouseOver plays same role for links and image maps that onFocus does for form elements
|
|
onMouseOut is the opposite of onMouseover
|
|
Text or textarea: the onSelect handler is called when text is selected
|
|
onSubmit handler is called when the submit button on a form is clicked
|
|
onReset handler is called when the reset button on a form is clicked
|
|
One can define a string of JavaScript as a function object:
|
|
target = new Function( [arg1,...,argn,] functionBody )
|
|
where the arguments arg1,...,argn are optional
|
|
target is either a variable, a property of an existing object, or an event handler such as window.onerror
|
|
var setBGcolor =
|
|
new Function("document.bgColor='antiquewhite'");
|
|
You can now execute setBGcolor() but note that the function can be changed at any time. For example,
|
|
setBGcolor = new Function("document.bgColor='pink'");
|
One can define event handlers dynamically, but they MUST be lowercase and they MUST have no arguments:
-
window.onfocus = setBGcolor;
|
Like eval, the function body may be constructed dynamically:
-
var myProp = 'bgcolor';
-
Function("document." + myProp + "='antiquewhite'");
|
|
<a href="" onClick="top.seturl(this,'item27.html')" onMouseOver="window.status='this is a test of onMouseOver'; return true">Exciting Item 27</a>
|
|
This is a very typical use of onClick in a hyperlink
|
|
Keyword this refers to current link object of type location
|
|
Set href to anything, even "", but do not omit otherwise won't be a link Ñ will be an anchor instead!
|
|
Set href and target frame in onClick event handler:
|
|
function seturl(linkname, fileurl) {
|
|
linkname.target = "top.mainframe";
|
|
linkname.href = fileurl); }
|
|
Put seturl in top frameset document. The <a> link is in a frame where onClick allows seturl to load required document into mainframe, the main display frame
|
|
JavaScript has a pair of timeout methods
|
|
// Call setTimeout and assign a handle:
|
|
yourID = setTimeout(exp, msecs);
|
|
// Abort process started by setTimeout:
|
|
clearTimeout(yourID);
|
|
setTimeout starts a timer that causes expression exp to be evaluated after a time interval of msecs milliseconds
|
These methods can be used to animate text or images, or make a display change after a given time interval
-
Also to start a daemon, which monitors what's going on!
|
|
Note setTimeout does not start a loop, just a single timing. Thus clearTimeout need not be called unless abnormal termination is required
|
|
If you want a loop, ensure exp 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 holding all occurrences of these objects for a particular document
|
|
We have already illustrated Form and Link; here we look at Image
|
|
The tag <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 an image using the statement:
|
|
image1 = new Image(); image1.src = "henry.jpg";
|
|
and then change an image in the document using:
|
|
document.fred.src = image1.src;
|
|
Note the image is fetched from cache, so this is fast!
|
|
This technique can be used for animated images, for example
|
|
Cookies were introduced by Netscape to preserve client state
|
|
For a CGI script servicing several clients (ordering T-shirts perhaps), it is useful for the client (not server) to store information such as name of user, passwords, etc.
|
Traditionally, state variable were passed using "hidden" fields:
-
<INPUT type="hidden" name="user" value="">
-
formname.user.value = WHATHAVEYOU;
|
|
Such hidden fields are passed to CGI scripts in same fashion as other variables set in text fields, etc.
|
|
Hidden values can either by set by JavaScript on the client or embedded into a page constructed by a CGI script, which might read N values and return a new form with M new fields and N old entries preserved in hidden fields
|
|
So hidden variables are nice but only preserved as long as you stick to page you started with or returned by CGI script
|
Cookies provide an alternative mechanism where information is saved in a special file on the client called cookies or cookies.txt
-
Note History, Cache, and Bookmarks are also saved on the client
|
|
Such files can preserve information in a more robust way than hidden fields!
|
|
Cookies are supported by Microsoft and Netscape and can be used (like forms) for purely client-side or client-server activities
|
|
Neither hidden fields or cookies are very secure
|
|
Cookies have five attributes: name, expires, domain, path and secure, which are specified on a single line. Only name is required; all other attributes are optional
|
|
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 the JavaScript page, your current statement and everything derived from it is "tainted"
-
Checking 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 them
-
However I don't think anybody does this ...
|
|
<head> <script language="JavaScript">
|
|
buttons = new top.MakeArray(2);
|
|
buttons[1] = 'one'; buttons[2] = 'two';
|
|
function testprocess(obj1, obj2, index) {
|
confirm(obj1.name + ' ' +
-
obj2.value + ' ' + index); }
|
|
</script> </head>
|
|
Then create a form as follows:
|
|
<form name="testbuttonsform">
|
|
<script language="JavaScript">
|
|
top.flexbuttons(1,"testgroup",2,buttons,2,"testprocess");
|
|
</script>
|
|
</form>
|
|
function flexbuttons(maxradio, groupname, number, indname, indexselected, onprocess)
|
|
/* Output a group of radio buttons or select
|
|
(user responsible for format of <form>):
|
|
- maxradio defines strategy: if more than
|
|
maxradio items use a select field, otherwise
|
|
use radio buttons
|
|
- groupname is name of group
|
|
- number is number of buttons with name
|
|
indname[1..number]
|
|
- indexselected is initial selection running
|
|
from 1 to number
|
|
- onprocess is name of onClick/onChange handler
|
|
*/
|
Outside Index
Summary of Material
Denote Foils where Image Critical
Denote Foils where Image has important information
Denote Foils where HTML is sufficient
denotes presence of Additional linked information which is greyed out if missing
