Full HTML for
Given by Geoffrey C. Fox (Tom Scavo) at CPS616 Technologies of the Information Age on Spring Semester 99. Foils prepared 3 March 99
Outside Index
Summary of Material
| Java vs. JavaScript, Interpreters vs. Compilers |
| JavaScript Basics and Syntax |
| JavaScript Core Objects |
| JavaScript Events |
| Client-side JavaScript (the basic browser AWT) |
| JavaScript Object Model |
Following Lecture Set is Advanced Topics:
|
| Some of this material was prepared by Tom Scavo |
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
CPS616 Web Technologies Lectures on JavaScript I Basic Web Scripting Language and use in HTML Pages
Outline
General Remarks
Why would you use JavaScript I?
Why would you use JavaScript II?
Why would you use JavaScript III?
Why would you use JavaScript IV?
Version History
JavaScript 1.2
JScript 3.1
ECMAScript
Java vs. JavaScript I
Java vs. JavaScript II
Java vs. JavaScript III
Java vs. JavaScript IV
Performance Issues
JavaScript Basics
We Need to Know HTML!
JavaScript Scripts
"Hello World" Example
"Hello World" Example (cont'd)
Form Example
Form Example (cont'd)
Example of Parameterized HTML
The <SCRIPT> Tag
The <SCRIPT> Tag (cont'd)
The <SCRIPT> Tag (cont'd)
JavaScript URLs
JavaScript Entities
JavaScript Syntax
Basic Syntax
Variables
Operators
Expressions
Reserved Words
Statements
The if Statement
The switch Statement
The for Statement
The while Statement
The do...while Statement
The with Statement
JavaScript Core Objects
Basic Concepts
The Global Object
The eval Function
Parsing Functions
Other Global Functions
Built-in Objects
Array Objects
Array Methods
Boolean Objects
Date Objects
Date Methods
Function Objects
Function Arguments
The Math Object
Math Properties
Math Methods
Number Objects
Number Properties
Number Properties (cont'd)
Object Objects
RegExp Objects I
RegExp Objects II -- Examples
RegExp Objects III -- String Methods
Simple Regular Expression Patterns
Regular Expressions -- Special Characters
Grouping Patterns in Regular Expressions
Anchoring and Alternation in Regular Expressions
Parentheses in Regular Expressions
The Backslash \ Operator
Static Properties of RegExp Object I
Static Properties of RegExp Object II
Some Regular Expression Examples
Examples of Replace and test
Examples of match (string) and exec (RegExp)
Multiple Calls to exec Method
String Objects
String Methods
String Methods (cont'd)
JavaScript Events
Events
Event Handlers
Event Handlers (cont'd)
Event Handlers (cont'd)
Event Handler Examples
Event Object
Event Object (cont'd)
Client-side JavaScript
Object Hierarchy
Object Referencing
Window and Frame Objects
Window Properties
Window Properties (cont'd)
Frame Properties
Frame Example
Frame Example (cont'd)
Frame Example (cont'd)
Frameset Documents
Window and Frame Methods
History Object
Location Object
Document Object
Document Properties
Document Properties (cont'd)
Document Methods
Form Objects
Form Properties
Form Methods
Image Objects
Image Animation
Layer Objects
Built-in Arrays
HTML-reflected Arrays
Client-side String Methods
Navigator Objects
MimeType Objects
Plugin Objects
JavaScript Object Model
How to define Objects in JavaScript
User-defined Objects
User-defined Methods
Another Example
The prototype Property
The prototype Property (cont'd)
Prototype-based Inheritance
Outside Index
Summary of Material
HTML version of Basic Foils prepared 3 March 99 
Full HTML Index
| Geoffrey Fox |
| Northeast Parallel Architectures Center |
| Syracuse University |
| 111 College Place |
| Syracuse, NY 13244-4100 |
| http://www.npac.syr.edu/projects/tutorials/JavaScript/ |
| http://www.npac.syr.edu/users/gcf/javascriptImarch99/ |
HTML version of Basic Foils prepared 3 March 99 
Full HTML Index
| Java vs. JavaScript, Interpreters vs. Compilers |
| JavaScript Basics and Syntax |
| JavaScript Core Objects |
| JavaScript Events |
| Client-side JavaScript (the basic browser AWT) |
| JavaScript Object Model |
Following Lecture Set is Advanced Topics:
|
| Some of this material was prepared by Tom Scavo |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript (originally called LiveScript) is a web scripting language for clients and servers |
| Client-side JavaScript facilitates rapid prototyping and is more responsive than CGI |
| Client-side JavaScript is particularly useful for frameset documents and HTML forms |
| Refs: JavaScript, The Definitive Guide by David Flanagan (3rd ed, O'Reilly, 1998); The JavaScript Bible by Danny Goodman (3rd ed, IDG, 1998); Dynamic HTML, The Definitive Reference by Danny Goodman (1st ed, O'Reilly, 1998). |
| Download the latest JavaScript manuals from Netscape http://developer.netscape.com/tech/javascript/index.html |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Originally JavaScript was designed to do what you think Java should do -- elegant dynamic animation on the client side |
| Then along came Java and JavaScript was eclipsed as it was just Netscape and not so well designed |
| Netscape tried to make it a server side language (LiveWire) instead of Perl but Java was much better here as well |
| JavaScript lived on for simple arithmetic on client side to produce somewhat better frames (as clicking on a link can call a JavaScript function instead of just loading a URL) and to quickly check forms client side without going back to server which is slow |
| A serious weakness was that dynamic aspects of JavaScript could only be used at "load" time and other changes of JavaScript required a "reload" which is real ugly and slow |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Then along came Microsoft and Netscape became distracted and quality of Java on the client side suffered and in fact is still problematical as Java in the browser has poor performance and lags Sun's version |
| Further the Web Consortium W3C never really liked Java butting in and thought HTML was the answer |
| JavaScript is Java with HTML and browser as AWT |
| W3C came along with XML and the DOM (Document Object Model) |
| In particular dynamic HTML extensions allowed one to get many benefits of JavaScript dynamically without reloading .... |
| Now all this was screwed up in version 4 browsers -- especially by Netscape -- and so the vision was obscured! |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| So Java is a good low level tool and how you program your stock market simulation downloaded from the online broker |
| However dynamical HTML and JavaScript is becoming preferred method of client implementations |
Use JavaScript to manipulate "components of documents" and Java to do arithmetic
|
| As world develops HTML + JavaScript will become XML and HTML -- both with JavaScript to capture dynamic issues |
| On Server, Java always wins (unless you use C++ for performance) |
HTML version of Basic Foils prepared 3 March 99 
Full HTML Index
| Typically JavaScript is invoked from HTML and HTML text and JavaScript text are intertwined |
| If you need to make a dynamic page from C++ Perl or Java you must write the HTML from these languages |
| You can invoke applets from HTML but HTML and applet actions are not linked. In case of JavaScript HTML and JavaScript are closely linked |
JavaScript is an example of an important concept -- the domain specific interpreter which we can expect to be of growing importance
|
| Text ...................................................... Computer Language HTML---> JavaScript Java <----- C++ |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript 1.0 debuted in NN 2.0 (Feb 96) |
| JavaScript 1.1 appeared in NN 3.0 |
| NN 4.0 (a.k.a. Communicator) supports JavaScript 1.2 |
| MSIE 3.0 introduced JScript 2.0, a subset of JavaScript 1.1 |
| JScript 3.x is supported in MSIE 4.0 |
| JScript 3.0 and later from IE are ECMA-compliant [Standard ECMA-262, June 1997] as is JavaScript 1.1 and following versions from Netscape |
| JavaScript 1.3 and 1.4 released with modest changes including better exception handling and Java-JavaScript linkage |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
New features in JavaScript 1.2 (NN4.0):
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
New features in JScript 3.1 (MSIE4.0):
|
| Adequate documentation is lacking, however |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| ECMAScript refers to standard ECMA-262 released in June 1997 |
| ECMAScript is essentially JavaScript with all client and server-side features removed i.e. It is the language and not the browser AWT handler |
| The emerging HTML and XML Document Object Models (DOMs) will be bound initially to ECMAScript |
| So one can use ECMAScript in several different domains (HTML XML VRML ...) by adding support for appropriate domain specific objects |
| Netscape Site has ECMAScript standard document |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Sun's Java is fast becoming a broad industry standard |
| Java is well designed and documented |
| Java is object-oriented with (single) inheritance |
| Java is class-based |
| JavaScript is primarily supported by Netscape and Microsoft |
| JavaScript started quite "roughly" but is improving in design -- however some issues connected to browser are totally ill defined as browser ill defined -- e.g. what happens in what order when frames loaded .... |
| JavaScript is object-based with no class structure |
| JavaScript is prototype-based |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Java classes and instances are distinct |
| A Java class has zero or more constructors |
| Java property inheritance follows class hierarchy |
| In Java, no way to add properties at run-time |
| JS object definition and constructor are identical and defined like methods |
| JavaScript property inheritance follows prototype chain |
| JavaScript properties may be added or removed at run-time |
| So essentially in JS, class structure is totally dynamic (a.k.a. Ill defined) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Java applets are distinct from HTML |
| Java is strongly typed with static (compile-time) binding |
| Java bytecodes are interpreted (or "Just-In-Time" compiled) on the client |
| JavaScript is tightly coupled with HTML |
| JavaScript is loosely typed with dynamic (run-time) binding |
| High-level JavaScript source code is interpreted on the client but is often MUCH faster than Java as integrated into browser |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
Typical Java applet Structure
|
Typical JavaScript Structure
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Typically, up to 106 C instructions may be executed in a few milliseconds (the time it takes a person to notice anything!) as one instruction in 1 clock cycle (say 108/sec) |
| A Java interpreter is roughly 50 times slower than C |
| Java "Just-In-Time" compiler is roughly 2–8 times slower than C whereas a native Java Compiler (and perhaps future JIT's) are about same speed as C |
Perl is 500 times slower than C (an interpreter but analyses whole code before interpreting)
|
Tcl, JavaScript (true interpreters) are 5000 times slower than C
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Like most interpreters (just look at BASIC), JavaScript has a huge and growing number of methods and properties corresponding to the many different features in a browser window |
To study JavaScript, we will need to use all the features of HTML including
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A script is enclosed in a <SCRIPT> container: <SCRIPT LANGUAGE="JavaScript"> ... </SCRIPT> |
| Scripts may be put in the <BODY> or the <HEAD>, depending on your needs |
| Use <NOSCRIPT>...</NOSCRIPT> for JavaScript-disabled browsers |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| <HTML> |
| <HEAD><TITLE>An Example</TITLE></HEAD> |
| <BODY> |
| <!-- Insert HTML here --> |
| <SCRIPT LANGUAGE="JavaScript"> |
| document.writeln("<H1>Hello World!</H1>"); |
| </SCRIPT> |
| <!-- Insert more HTML here --> |
| </BODY> |
| </HTML> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| There is only one JavaScript statement: document.writeln("<H1>Hello World!</H1>"); |
| The writeln method writes its argument into the current document |
The script is in the <BODY> since it writes HTML code into the document; other scripts are written in the <HEAD> so they are processed and available in body
|
| Scripts may be hidden from old browsers using arcane construct <SCRIPT LANGUAGE="JavaScript" > <!-- A comment to a dinosaur .... Bunch of Exciting JavaScript Statements ..... //script ends here --> </SCRIPT> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| <HTML> |
| <HEAD><TITLE>JavaScript with Forms</TITLE> |
| <SCRIPT LANGUAGE="JavaScript"> |
| function compute() { |
| if ( window.confirm("Is this what you want?") ) |
| aForm.result.value = eval(aForm.expr.value); |
| } |
| </SCRIPT></HEAD> |
| <BODY><FORM NAME="aForm"> Enter expression: |
| <INPUT TYPE="text" NAME="expr" SIZE=15> |
| <INPUT TYPE="button" VALUE="Compute!" |
| onClick="compute()"> <BR> Result: |
| <INPUT TYPE="text" NAME="result" SIZE=15> |
| </FORM></BODY> |
| </HTML> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| confirm is a method of the Window object which pops up a window requesting confirmation of requested action |
| eval is a built-in JavaScript function |
| onClick is a JavaScript event handler and onClick ="your stuff" executes JavaScript code yourstuff |
| Note the user-defined names (aForm, expr, result) referred to in the script |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| <HTML><HEAD><TITLE>JavaScript Used to Parameterize HTML</HTML> |
| <SCRIPT LANGUAGE="JavaScript" > var imagewidth=600;// These could be changed by form var imagefile="npac.gif"; //input or some computation // based on size of window (available to JavaScript) </SCRIPT></HEAD> |
| <BODY> <h2>Plain old HTML of any type</h2> ...... <SCRIPT LANGUAGE="JavaScript" > document.writeln(`<imag align=top width=` + imagewidth + `src="' + imagefile +'" >'); </SCRIPT> |
| <b>And the beat goes on ...</b> |
| </BODY></HTML> |
| Note the horrible mix of ` (JavaScript) and " (HTML) |
| JavaScript Variables |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| If you have two versions of a JavaScript script, you can load one or the other: |
| <SCRIPT LANGUAGE="JavaScript1.1"> |
| // Ignored by Navigator 2.0: |
| location.replace("newVersion.html"); |
| </SCRIPT> |
| <SCRIPT LANGUAGE="JavaScript"> |
| // Read by Navigator 2.0 and above |
| </SCRIPT> |
| The newest version is "JavaScript1.2" |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Multiple <SCRIPT> tags are allowed |
| Within a single <SCRIPT>, a function may be called before it is defined |
| Within a single document, a function defined in one <SCRIPT> may not be called from a previous <SCRIPT> |
| In particular, a function defined in the <BODY> may not be called from the <HEAD> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript code may be stored in an external file (and is therefore reusable): |
| <SCRIPT SRC="JScode.js"> // The body of this <SCRIPT> is // executed only if "JScode.js" // is not found! document.write("File not found!"); </SCRIPT> |
| An external file must have a .js extension and the server must be configured properly |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A trivial example of a JavaScript URL is javascript:alert("Hello World!") |
| A JavaScript URL may appear anywhere an ordinary URL is expected: <A HREF="javascript:history.back()">Previous Page</A> |
Note must use <A HREF=" javascript: void(anyoldfunction())" > if you do not want link to be invoked!
|
Navigator even has a mini-scripting environment invoked by typing javascript:into the browser's location text field
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| One can parameterize HTML using document.write(ln) commands such as: |
| document.writeln("string1" + Jsvariable + "string2");// etc. |
| There is another way of achieving this without a <SCRIPT> tag and no document.writeln -- namely |
| <IMG width="&{JSvar1};" src="&{JSvar2}" > |
| where JSvar1 and JSvar2 are JavaScript variables holding width and URL of image |
Syntax is modeled on that for special characters where
|
Such JavaScript Entities can only appear on right hand side of attributes values and cannot appear in HTML text such as titles
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript syntax resembles Java and C |
| Braces { } are used for grouping |
| Use single or double quotes (equivalently) around string literals |
| Escapes: \b \t \n \f \r \" \' \\ |
| Other literals: null, true, and false |
| JavaScript is case-sensitive while HTML is not (which sometimes leads to problems!) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
Variables (identifiers) must begin with a letter, underscore, or dollar sign:
|
| Declare variables in var statements: var aNumber = 137; var aString = "1"; |
| JavaScript "entities" in HTML attributes: <IMG SRC="&{v1};" WIDTH="&{v2};"> where v1 and v2 are JavaScript variables |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Assignment operators: = += -= *= /= %= <<= >>= >>>= &= ^= |= |
| JavaScript supports the usual arithmetic operators, as well as: % ++ -- |
| Concatenation operator: + |
| Bit operators: & | ^ ~ << >> >>> |
| Relational operators: == > >= < <= != |
| Logical operators: && || ! |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
Examples:
|
An if-expression returns a value:
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript statements include: break, continue, do, for, function, if, return, switch, var, while, and with |
| Multiple statements on one line are separated by semicolons |
| Statement blocks are delimited by braces |
| Comments come in two flavors: /* any text including newlines */ // comment terminated by newline |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Assuming boolean variable isWhite: |
| if ( isWhite ) { |
| document.bgColor = "pink"; |
| isWhite = false; |
| } else { |
| document.bgColor = "white"; |
| isWhite = true; |
| } |
| The else block is optional, of course |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The switch statement is new is JS 1.2: switch ( fruit ) { case "oranges": price = 0.59; break; case "apples": price = 0.32; break; case "bananas": price = 0.48; break; default: price = null; } |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A simple for-loop: |
| // Compute x^k for k > 0: |
| for (var y=1, i=0; i<k; i++) { |
| y *= x; |
| } |
| Here is another type of for-loop: |
| for (var prop in object) { |
| statements |
| } |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A more general looping structure: |
| // Compute r = m % n for m,n > 0: |
| var r = m; |
| while ( r >= n ) { |
| r -= n; |
| } |
| break, labeled break, and continue are permitted in for and while loops |
| JavaScript supports recursion as well |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A do...while loop tests its condition at the bottom of the loop: do { statements } while ( condition ); |
| In this case, the statements in the loop body are guaranteed to execute at least once |
| This loop is new in JavaScript 1.2 and JScript 3.0 |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| with ( someObject ) { statements } |
| someObject is the default object used for any unqualified object references: with ( Math ) { area = PI*r*r; // Math property PI x = r*cos(theta); // Math method cos y = r*sin(theta); // Math method sin } |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript is object-based with no classes and, hence, no (class) inheritance |
| An object possesses properties and methods |
| A property is an attribute of an object |
| A method acts on an object |
| All JavaScript objects have toString() and valueOf() methods |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The implicitly defined Global object is the top-level JavaScript object |
| It has two properties: NaN (Not-a-Number) and Infinity (but NN supports neither) |
| There are seven global functions: |
| plus the eval(...) function! |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
The function eval( string ) invokes the JavaScript interpreter on its string argument, which is evaluated in the context of the current window (i.e., globally)
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| parseInt(...) and parseFloat(...) convert their arguments to numbers: parseFloat("12.34"); //returns 12.34 parseInt("12.34"); //returns 12 parseFloat("12.34 ft"); //returns 12.34 parseInt("111", 2); //returns 7 parseFloat("$12.34"); //returns NaN |
| A handy trick: var numeric_var = string_val - 0; |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| isNaN( number ) returns true if and only if its argument is NaN |
| isFinite( number ) returns false if its argument is NaN, Infinity, or ?Infinity; otherwise, it returns true |
| escape( string ) returns a URL-encoded string; unescape( string ) performs the inverse operation |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript has ten built-in objects: |
| plus the Global object discussed earlier |
An instance object is created with new:
|
| We will learn how to create objects in other ways later on e.g. fred = {}; creates a null object. |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| In NN 3.0 (and even in 2.0!), we write: var states = new Array(50); states[0] = "Alabama"; states[1] = "Alaska"; // etc. |
| Every array has a length property: var n = states.length; // n = 2 |
| Two-dimensional arrays are allowed: var acodes = new Array(50); acodes[0] = new Array(205,334); |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
JavaScript 1.1 (and above) supports some powerful array methods:
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| To create a false Boolean object, use: new Boolean() new Boolean( 0 ) new Boolean( null ) new Boolean( "" ) new Boolean( false ) or simply use the literal false |
| All other values create a Boolean object with initial value true! |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
The Date constructor has many forms: today = new Date(); xmas = new Date( 97, 12, 25 ); birthday = new Date( "April 6, 1952" );
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The Date object has no properties; access to date and time fields is via dozens of "set" and "get" methods: xmas.setYear(xmas.getYear()+1); |
There are two "static" Date methods:
|
| Both convert their argument(s) to milliseconds past January 1, 1970 UTC |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Every function statement gives rise to a Function object |
| Function objects are also created with the new operator: window.onload = new Function( "document.bgColor='white'" ); |
| Function objects may be anonymous |
| NB: Function arguments are passed by value |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Functions may take an arbitrary number of arguments: function User() { this.name = User.arguments[0]; this.group = User.arguments[1]; this.email = new Array(); var n = User.arguments.length; for (var i = 2; i < n; i++) this.email[i-2]=User.arguments[i]; } |
| Note: the arguments[] array is built in |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Math is the only built-in object that does not have a constructor |
| Its sole purpose is to provide constants (properties) and functions (methods) |
| The with statement is particularly useful in conjunction with Math: with ( Math ) { x = r*cos( PI/2 ); y = r*sin( PI/2 ); } |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| These properties are primarily for convenience: |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Each method in the middle column requires two arguments |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| There is a Number constructor, but it is rarely used since JavaScript automatically converts numeric literals to numeric objects as needed |
| Some useful properties are provided: MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY, and POSITIVE_INFINITY |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Number.MIN_VALUE is the smallest positive number representable |
| Number.POSITIVE_INFINITY is returned by any operation that is greater than Number.MAX_VALUE |
| Number.NEGATIVE_INFINITY is returned by any operation that is less than ?Number.MAX_VALUE |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Number.NaN is returned by parseInt(...) and parseFloat(...) when the parsing operation fails |
| An attempt to divide by zero also returns Number.NaN |
| Test for Number.NaN using the global boolean function isNaN() |
| Note: NN2.0 and MSIE3.0 do not support Number.NaN! |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The Object constructor converts its argument (any numeric, boolean, or string literal) to a JavaScript object: var s = new Object( "NPAC" ); is equivalent to var s = new String( "NPAC" ); This is usually unnecessary, however |
| The corresponding function is Object(...) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
An RegExp object (new in JavaScript 1.2) corresponds to a regular expression
|
| There are two syntax's for defining regular expressions: regexp1 = new RegExp( "pattern" ); // or regexp1 = new RegExp( "pattern","flags" ); regexp2 = /pattern/flags; // no quotes |
| Flags are g (match to all occurences) and i (ignore case) or of course gi |
The latter literal version "compiles" the pattern and is equivalent to
|
| The RegExp object has two other methods: exec(str) and test(str)and we can also invoke regular expression processing using new String object methods |
| There are both static (as in RegExp.input) and dynamic (as in regexp1.global) properties of regular expressions |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Here are two examples: function isDigit( str ) { var regexp = /^[0-9]*$/; return regexp.test( str ); } function isSSN( str ) { // match 999999999 or 999-99-9999 var regexp = /^(\d{9}|\d{3}-\d{2}-\d{4})$/; return regexp.test( str ); } |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
String object methods have been added to JavaScript 1.2 to handle regular expressions -- consider an ordinary string ordstr
|
The split(...) method now takes a regular expression as optional parameter:
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
Simple Single-character Patterns are :
|
Character class is a Single-character Pattern and represented as a set [c1c2c3...cN] which matches any one of the listed characters
|
Negated character class is represented by a carat ^ after left [ square bracket
|
| There are a set of special character classes shown overleaf such as \w which is equivalent to [A-Za-z0-9_]. |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| [\b] backspace |
| \b Word Boundary |
| \B NOT a Word Boundary |
| \cC Control Character C |
| \d Matches a digit |
| \f Form Feed |
| \D Matches a NON digit |
| \n New Line |
| \s White Space \f\n\r\t\v |
| \r Carriage Return |
| \S Not a White Space |
| \t tab |
| \v vertical tab |
| \w Any word Character |
| \W Not a word Character |
| \\ Backslash itself |
| \n (n integer) nth () selected as in $n |
| \ooctal Char with this octal rep |
| \xhex Char with this hex rep |
| . Anything |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Sequence is c1c2c3.. -- a sequence of single characters |
| * or {0,} is "zero or more" of previous character |
| + or {1,} is "one or more" of previous character |
| ? or {0,1} is "zero or one" of previous character |
| All matching is greedy -- they maximize number of characters "eaten up" starting with leftmost matching |
| Curly Brace Notation: |
| c{n1,n2} means from n1 to n2 instances of character c |
| c{n1,} means n1 or more instances of character c |
| c{n1} means exactly n1 instances of character c |
| c{0,n2} means n2 or less instances of character c |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
For single characters, alternates can be specified by square brackets with
|
For general strings one can use | to represent alternatives or so that above example can also be written
|
Patterns can be Anchored in four ways:
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Parentheses can be used as "memory" for relating different parts of a match or for relating substitution to match |
If a part of a regular expression is enclosed in parentheses, the MATCHED value is stored in temporary variables \1 \2 .. for first,second .. set of parentheses
|
Parentheses can also be used to clarify meaning of a regular expression by defining precedence of a set of operations and so distinguish for instance
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
When using the constructor function, the normal string escape rules (preceding special characters with \ when included in a string) are necessary. For example, the following are equivalent:
|
For characters that are usually treated literally,\ indicates that the next character is special and not to be interpreted literally.
|
While for characters that are usually treated specially, \ indicates that the next character is not special and should be interpreted literally.
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
RegExp.input or RegExp.$_ is text which we are comparing regular expression with
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| RegExp.multiline if true, search through newlines |
| RegExp.$` or RegExp.leftContext is part of searched string before matched part |
| RegExp.$& or RegExp.lastMatch is part of searched string that is matched to by regular expression |
| RegExp.$' or RegExp.rightContext is part of searched string after matched part |
| So String searched is RegExp.leftContext + RegExp.lastMatch + RegExp.rightContext |
| RegExp.lastParen The last parenthesized substring match, if any |
| RegExp.$1,$2 .. $9 are the first through ninth parenthesized expressions matched |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| /\s0(1+)/ matches "white space", followed by zero and 1 or more ones -- the set of ones is stored in \1 ( $1) |
| /[0-9]\.0\D/ matches "the answer is 1.0 exactly" but not "The answer is 1.00". |
| In first case $` is "the answer is ", $& is "1.0 " and $' is "exactly" |
| /a.*c.*d/ matches "axxxxcxxxxcdxxxxd" with $` and $' as null and $& as full string |
| /(a.*b)c.*d/ matches "axxxxbcxxxxbd" with |
| \1 as "axxxxb" -- note backtracking as greedy (a.*b) first matches to "axxxxbcxxxxb" but then tries again when following c.*d fails to match |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| <SCRIPT LANGUAGE="JavaScript1.2"> |
| re = /(\w+)\s(\w+)/; |
| str = "John Smith"; |
| newstr=str.replace(re, "$2, $1"); |
| document.write(newstr) |
| </SCRIPT> // Prints out Smith, John |
| Suppose re is a RegExp object and str a string, then: |
| function testinput(re, str){ |
| if (re.test(str)) |
| midstring = " contains "; |
| else |
| midstring = " does not contain "; |
| document.write (str + midstring + re.source); |
| } |
| Prints out a summary of matching result |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| //Match one d followed by one or more b's followed by one d |
| //Remember matched b's and the following d |
| myRe=/d(b+)(d)/ig; str = "cdbBdbsbz"; |
| myArray = myRe.exec( str ); |
| myArray.index Index of First Character Matched i.e. 1 |
| myArray.input The original String i.e. cdbBdbsbz |
| myArray[0] The characters matched i.e. dbBd |
| myArray[1] The first parenthesis i.e. bB |
| myArray[2] The second parenthesis i.e. d |
| The static properties of RegExp are set including $` $& $' $1 $2 lastMatch lastParen |
| Properties source lastIndex multiline global ignoreCase of myRe are also set |
| Can also use myArray = str.match(myRe) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| If your regular expression uses the g flag, you can use the exec method multiple times to find successive matches in the same string. When you do so, the search starts at the substring of str specified by the regular expression's lastIndex property. For example, assume you have this script: |
| <SCRIPT LANGUAGE="JavaScript1.2"> |
| myRe=/ab*/g; |
| str = "abbcdefabh" |
| myArray = myRe.exec(str); |
| document.writeln("Found " + myArray[0] + ". Next match starts at " + myRe.lastIndex) |
| mySecondArray = myRe.exec(str); |
| document.writeln("Found " + mySecondArray[0] + ". Next match starts at " + myRe.lastIndex) |
| </SCRIPT> |
| This script displays the following text: |
| Found abb. Next match starts at 3 |
| Found ab. Next match starts at 9 |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| String objects are created as in var myStr = new String("NPAC"); or more simply with var myStr = "NPAC"; |
| Actually, the latter is a string literal, but these are automatically converted as needed |
| String characters are indexed starting with 0 |
| The String object has one property: var n = myStr.length; |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
Core JavaScript String methods:
|
| Static method: String.fromCharCode(...) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Client-side JavaScript defines more than a dozen String methods (discussed later) |
Six new methods added in JavaScript 1.2:
|
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
Events are associated with
|
| JavaScript introduces event handlers to handle these events |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript 1.2 adds ten new event handlers |
| Three existing handlers (onClick, onMouseOut, and onMouseOver) have new properties |
| All these events are supported by IE4.0 except onDragDrop |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The onLoad event handler is triggered when a page is loaded or reloaded : <BODY onLoad="init()"> Similarly, the onUnload handler is called when a page is exited |
| Here's another example: |
| <FORM |
| onSubmit="return check(this)"> |
| ... |
| </FORM> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| An Event object (new in JavaScript 1.2) is passed to an event handler when an event occurs |
| There are 23 types of events, one for each handler: for example, a Click event is passed to the onClick handler when a link or form element is clicked |
| An Event object has up to 11 properties |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Properties of an Event object: |
| The Click object, for example, supports all but the data property (note: the *X and *Y properties are undefined for button clicks) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A fully-qualified reference: window.document.myForm.myButton.value |
| window (often suppressed) and document are pre-defined objects |
| myForm and myButton are user-defined object names |
| value is a property of the Button object (and most other form elements) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A Window object--the top-level JavaScript object--is the reflection of a <BODY> or <FRAMESET> tag |
| A browser window may be divided into subwindows called frames |
| A Frame object--the reflection of a <FRAME> tag--"inherits" all of its properties and methods from the Window object |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| window and self are synonyms for the current window |
| top refers to the highest-level window in a hierarchy of frames |
| parent refers to the previous window or frame in a hierarchy of frames |
| A window may have a name: myWin = window.open(URL); |
| Note: The opener property is not supported in NN2. |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| An analogy with the UNIX shell: |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A Frame object also has properties called window, self, and parent |
| The most important property of the Frame object is the frames[] array |
| Each <FRAME> tag automatically creates an entry in the frames[] array |
| Frames may also have names, as in <FRAME NAME="upperFrame"> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| <!-- File: index.html --> |
| <HTML> |
| <FRAMESET ROWS="90%,10%"> |
| <FRAME SRC="skeleton.html" |
| NAME="upperFrame"> |
| <FRAME SRC="navigate.html" |
| NAME="navigateFrame"> |
| </FRAMESET> |
| <NOFRAMES>...</NOFRAMES> |
| </HTML> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| <!-- File: skeleton.html --> <HTML> <FRAMESET ROWS="30%,70%"> <FRAME SRC="category.html" NAME="listFrame"> <FRAME SRC="titles.html" NAME="contentFrame"> </FRAMESET> </HTML> |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
Absolute references:
|
Relative references:
|
| In which documents are |
| these references valid? |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The <FRAMESET> and <BODY> tags are mutually exclusive |
| No closing tag for <FRAME> is needed |
| A frameset document may contain a <SCRIPT> in its <HEAD> |
| Use <NOFRAMES> inside <FRAMESET> for frames-impaired browsers |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Both Window and Frame objects have blur, focus, clearTimeout, and setTimeout methods |
| The Window object also has alert, close, confirm, open, and prompt methods. For example, var msg = "The alert() method\n"; msg += " is handy for debugging."; window.alert( msg ); |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| There is one History (and Location) object per window or frame |
| The History object is essentially an array of URLs (called history[]), which most browsers restrict access to |
| Two methods back() and forward() perform the same functions as the corresponding browser buttons |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The Location object corresponds to the URL of the current document |
| To load a new document into the current window, use: window.location.href = "foo.html"; or simply window.location = "foo.html"; |
| Location object properties: href, protocol, host, pathname, search |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| There is one Document object (called document) per window or frame |
| The Document object has numerous subobjects (Anchor, Applet, Embed, Area, Form, Image, Link, Layer) and property arrays (anchors[], applets[], embeds[], forms[], images[], links[], layers[]) |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| A Document object has the following color properties: alinkColor, linkColor, vlinkColor, bgColor, and fgColor |
| Other Document properties include lastModified and URL: with ( document ) { writeln('<TT>', URL, '</TT><BR>'); writeln('Updated: ', lastModified); } |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| To list the properties of document: for ( var prop in document ) { with ( document ) { write( prop + " = " ); writeln( eval(prop), "<BR>"); } } |
| Recall that the with statement qualifies all object references within its scope |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The write(...) and writeln(...) methods take a comma-separated list of string expressions |
| The open() and close() methods (not to be confused with window.open() and window.close()) open and close a document for writing, but these are seldom used explicitly |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Every Form object is the reflection of an HTML <FORM> tag |
| The forms[] array may be indexed by integer or name (i.e., forms[0] or forms['myForm'] ) |
| A Form object has many subobjects, each corresponding to an HTML form element. These are reflected in the elements[] array |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Form elements are reflected in the elements[] array. For example, document.forms[0].elements[1]; is the second element of the first form |
| Most Form properties (action, encoding, method, and target) are read/write variables, that is, these properties may be modified on-the-fly |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Invoking the submit() or reset() method on a Form object has the same effect as pressing the corresponding button |
| The event handlers onSubmit and onReset may be used to override the default submit and reset actions. |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Images may be pre-loaded (they should be cached in the <HEAD>, especially if they are to be used in the <BODY>): var images = new Array( num ); for ( var i = 0; i < num; i++ ) { images[i] = new Image(); images[i].src = "image"+ i +".gif"; } |
| This code loads files "image1.gif", "image2.gif", and so on |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Now suppose we have the tag <IMG NAME=img> in the <BODY>. The following recursive method animates the cached images: var n = 0; function animate() { document.img.src = images[n].src; n = (n + 1) % images.length; id = setTimeout("animate()", 250); } |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Think of a Layer object (new in JS 1.2) as a dynamic document within a document |
| Each <LAYER> tag generates a Layer object and a corresponding element in the layers[] array |
| Layers have many methods and properties (most of which may be modified on-the-fly) |
| Note: Layers are not supported in MSIE |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| JavaScript has numerous built-in arrays, each with its own length property: |
| Plus the history array--the only one whose name does not end in "s"! |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Plus the elements array, whose parent is the Form object |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Client-side JavaScript defines more than a dozen String methods, including: |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The Navigator object contains information about the browser |
| Two properties are appName and appVersion |
| Methods include javaEnabled and taintEnabled |
| All windows share the same Navigator object, which is truly global |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| The MimeType object is a subobject of the Navigator object |
| The mimeTypes[] array contains an entry for each MIME type supported by the browser |
| Properties of MimeType include description, type, and suffixes |
| The property enabledPlugin refers to a Plugin object |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Like MimeType, the Plugin object is a subobject of the Navigator object |
| The plugins[] array contains an entry for each installed plugin |
| Each Plugin object is an array of MimeType objects. For example, navigator.plugins[0][0].type is a MIME type supported by plugins[0] |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| We can use constructors described later but simplest way is: |
| newobject ={}; |
| newobject.car = "honda"; |
| newobject.wheels = 4; |
| newobject.color = "red"; |
| Or newobject={car:"honda",wheels:4,color:"red"}; |
| Or newobject = new Array(); |
| newobject["car"] = "honda"; // etc. |
| This allows an "associative array" |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Objects are defined with the function statement. The following Circle object, for example, has property r: function Circle( r ) { this.r = ( r > 0 ) ? r : 0; } |
| The this keyword permits this function to be used as a constructor: var c = new Circle( 2.0 ); var area = Math.PI * c.r * c.r; |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Methods are defined as Function objects: function Circle( r ) { this.r = ( r > 0 ) ? r : 0; this.getRadius = new Function( "return this.r" ); this.setRadius = new Function( "r", "this.r = r" ); } |
| Note: The last argument of the Function constructor is implicitly the method body |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Here's another example: function Car( make, model ) { this.make = make || ""; this.model = model || ""; this.color = null; this.setColor = new Function( "color", "this.color = color" ); } |
| Instantiate a Car object with new: myCar = new Car( "Ford", "Explorer" ); myCar.setColor( "red" ); |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Methods may be added after the fact: function Circle_area() { return Math.PI * this.r * this.r; } Circle.prototype.area = Circle_area; |
| Use the previous method as follows: var radius = 1/Math.sqrt( Math.PI ); var c = new Circle( radius ); var area = c.area(); |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| We can add methods to built-in objects, too: // Does an array contain element x ? function contains( x ) { for (var i=0; i<this.length; i++) { if (this[i] == x) return true; } return false; } |
| Now add the method to the Array object with the prototype property: Array.prototype.contains = contains; |
HTML version of Basic Foils prepared 3 March 99
Full HTML Index
| Define the parent object: function Ellipse( r1, r2 ) { this.r1 = ( r1 > 0 ) ? r1 : 0; this.r2 = ( r2 > 0 ) ? r2 : 0; this.area = new Function( "return Math.PI * this.r1 * this.r2" ); } |
| Define the child object: function Circle( r ) { this.r = ( r > 0 ) ? r : 0; this.parent = Ellipse; this.parent( r, r ); } Circle.prototype = new Ellipse; |