JavaScript Tutorial

Introduction to JavaScript

This document is Copyright (c) Information Technology Group,
www.itgroup.ro, Alin Avasilcutei, Cornel Paslariu, Virgil Mager.

Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.2
with no Invariant Sections, no Front-Cover Texts, no Back-Cover Texts.

This document is an introduction to some of the most frequently used components of the JavaScript programming language. The various language characteristics and elements are gradually introduced, attempting to create a document structure such that each new element being presented to rely as little as possible on elements that are introduced at a later time (this is not always possible, as some language features are intr-related in a "circular" way).

The reader of this document is assumed familiar with the basic structure of a simple HTML document, as well as with the C programming language.

for an introduction to the structure of an HTML document see Introduction to HTML
for an introduction to the C programming language see The C programming language

What is JavaScript

JavaScript is a scripting language, designed for being embedded in HTML documents, and exectuted directly in an HTML browser. The following diagram illustrates how a JavaScript program interacts with the display objects described in an HTML document, and thus (indirectly) with the user (reader) of the document.

HTML Browser <---------------------------------------\
| |
|interprets |can request the browser to perform
V |certain actions, such as to
HTML Document |re-display the document, to send
| |some data (e.g. enetered by the user
|contains |into an HTML form) to a server,
V contain |to clear the browser window, to
HTML elements ----------------------> Script elements |open a new browser window containing
^ | |another HTML document, etc
|reflect |contain |
| interact with V |
Browser objects <----------------------> JavaScript ------/
^ Programs
|user-interface for
|
Display objects
^
|interacts with
|
USER (reader)

Note: the terminology used in the diagram above (e.g. 'HTML elements', 'browser objects', etc) is introduced in Introduction to HTML, the 'Terminology' section.

The following example illustrates the structure of a JavaScript/HTML document that contains an HTML button, such that a random number will be displayed in a pop-up window every time when the button is pressed. Such a structure essentially consists of:

the overall framework of the HTML document (which contains, among other elements, a button)
the definition of a function which, when invoked, prints a random number in a pop-up window
some HTML code that associates the event of clicking on the button with calling the function that prints the random number

 <html>                                      <!-- the start of the HTML document -->
    <head>                                   <!-- the document header element -->
       <script>                              /* the script element that contains the function */
       function printRandomNumber() {        // the function definition
          alert(Math.random());              // display a message box with a random number
       }                                     // (Math.random() generates a random number [0...1) in JavaScript)
       </script>
    </head>

    <body>                                    <!-- the document body -->
       <input type="button"                   /* the button element */
              value="print random number"     /* the text displayed on the button */
              onClick="printRandomNumber()"   /* capture the user clicks on the 'button' display object */
       />
    </body>
 </html>

When the document outlined above will be loaded in an HTML browser, the following succession of events will occur:

first, the HTML browser will first parse the entire HTML document; this includes:
- identifying all the elements in the document, their containment hierarchy, etc
- creating an internal browser object for each element that was identified
  - the definition of the 'printRandomNumber()' function (as described inside the 'script' element) will be part of the 'script' browser object
- establishing the interactions between the HTML browser objects and the JavaScript functions, as described by the corresponding HTML elements
  - the fact that the execution of the 'printRandomNumber()' function is triggered when the button is clicked is specified by the 'onClick' event association inside the HTML code of the 'button' element
next, the HTML browser will render the document, i.e. it will render a display object for each graphical object that is identified in the document (i.e. the 'button' browser object will be rendered into a corresponding display object on the browser window)
finally, the HTML browser will wait for any event to occur.

After the above sequence has been completed, the browser window will show a page containing a a button, and every time the button will be clicked (i.e. "pressed"), a new random number will be displayed in a pop-up message box.

Code block

A JavaScript Code Block is similar to the C code block, and is the basic container for JavaScript sequential code; it may contain any or all of the following:

local variable declarations/definitions
- IMPORTANT: unlike in C, the scope of local variables declared in a JavaScritp code block is not restricted to the code block where they were declared; instead, a variable declared in a code block survives after the program execution flow exists the codeblock; this behavior is detailed in the 'Variables' chapter below.
a sequence of JavaScript statements and expresions (similar to the C sequence of statements and expresions in a C code block)
other Code Blocks (similar to the way a C code block can contain other C code blocks)

  { // the Code Block begins with '{'
    variable declarations/definitions
    statements, expressions, and/or other code blocks (wich in turn may contain other code blocks, etc)
  } // the Code Block ends with '}'

(the following sections detail the above categories)

Data model overview

Types
The data types in JavaScript can be classified in two major groups: scalar types and compound types.
- the JavaScript scalar types are:
  - number (no distinction is made between reals, doubles, integers, etc)
  - string
  - boolean
  - object pointer
- the compound types are conceptually similar to C structures in the sense that they are a way to describe the structure of an aggregate of distinct elements.
  - a predefined compound type called 'Object' represents a generic "empty" structure with no elements
  - a number of specialized types such as 'Math', 'Date', etc, are are inbult in the language
  - a mechanism that allows the creation of user-defined compound types is also provided
Objects
A JavaScript object is an instance of a compound data type.
- an object can be either an instance of a predefined type, e.g. 'Date', 'Math', etc, or an instance of a user-defined compound type.
- the only way to instantiate a new object is via the dedicated 'new ObjectTypeName' operator, which returns a pointer to the newly created object instance. There is no other way to have access to a newly created object except via the pointer to it that is returned by 'new' upon creation.

Variables

Rules for variable names :
- Variable names are case-sensitive (like in C)
- They must begin with a letter or the underscore character
Unlike C and C++, a JavaScript variable can only hold a scalar value, including an object pointer value, but never an actual object data structure, i.e. all operations with objects are always poiner-based operations

Declaring a variable:

declaration without initialization, using the 'var' declarator:
var varName;
declaration with initialization
var varName = value;
initialization without explicit declaration
varName = value;

initializing with an object
as it was previously mentioned, there is no way to assign a variable with an object, but a variable can be assigned with a pointer to an object that is created with the dedicated 'new ObjectTypeName' operator. All operations that will transfer the value of the variable will actually transfer the pointer to the object, and not a copy of the object itself.

var myObject = new Object;     // 'myObject' is a pointer to a
                               // new instance of the predefined type 'Object'
var anotherObject = myObject;  // the pointer value "held" by 'myObject'
                               // is copied to the 'anotherObject' variable

In JavaScript, unlike in C, variables can hold different data types during their lifetime

when declaring a variable without initialization, the type of the variable is undefined

each time a variable is assigned a value, the type of the variable becomes the type of the assigned value:

var myVariable = "string_value"; // the variable now holds a string value
var myVariable = integer_value;  // the variable now holds an integer value

a language, such as JavaScript, that allows to freely reassign a variable with different types of data values is referred to as a dynamically typed language

JavaScript does not specify whether redeclaring a variable without also re-initializing it preserves the old value or not:

var myVariable = 'something';
var myVariable;  // myVariable may, or may not, retain the value 'something'

Checking if a variable has been defined can be done by testing if the variable has a type

  // somewhere in a code block:
  if (typeof(variableToCheck) != 'undefined') }
          alert("variableToCheck is Defined");
  } else {
          alert("variableToCheck is NOT defined");
  }

Note: the 'typeof()' function itself is presented in more detail in 'the typeof() function' paragraph later in this tutorial

Variables can be:

global variables:
global variables are declared and/or defined outside the definition of any Code Block or Object type (i.e. at the "level zero" of a program, just like in C/C++ or Java).

  var globalVariableName = value;

Important remark about JavaScript global variables: a JavaScript program always runs "inside a top-level context object" in the sense that, in fact, the "global variables" are nothing more than properties of the top-level object "inside which" the JavaScript program runs (more details about a JavaScript program's environment are given in the JavaScript runtime environment paragraph later in this document). For example, in the most common scenario in which a JavaScript program runs inside a browser window, the top-level object (i.e. the "context" in which the JavaScript program runs) is specified as being a special 'window' object provided by the browser and accessible from JavaScript, and any global variable declaration that the JavaScript program makes actually translates in adding a new "custom property" to the "top-level" 'window' object:

  var globalVariableName = 255;  // a global variable
  alert(globalVariable);         // this will print:  255
  alert(window.globalVariable);  // this will also print:  255

Note: the fact that the global variables of a JavaScript program running inside a 'window' object can be accessed as properties of the 'window' object allows not only the value of a variable to be a computed value (as opposed to a "statically defined" value), but also the global variables' names can also be computed values; this is detailed in the 'Dynamically-named global variables' chapter later in this tutorial.

local variables:
in JavaScript the local variables are fundamentally different from those found in C/C++ (and most other programming languages): although they can be declared directly inside a function body's "main code block" (functions are discussed in a following chapter) or inside a code block which is (directly or indirectly) contained "inside" a function's main code block (i.e. just like in C/C++), they are visible inside the entire function body where they were declared, from the moment they are declared, and no matter if they were declared directly in the function body or inside a code block contained by the function body.

function f() {
  ...some code
  // open a new code block inside the function body:
  {
    var insideVariable = 1; // a local variable declared in a code block
  }
  alert(insideVariable);    // prints 1, i.e. the local variable persists
                            // after the program exists the code block
}

because a local variable persists inside a function body after its declaration, it cannot "conflict" with a higher-level code block variable; instead, redeclaring a variable anywhere inside the function body (including a code "sub-block") simply reassigns the variable with a new value

function f() {
  var localVariable = 1;   // a local variable declared directly in the function body
  {
    var localVariable = 2; // simply reassigns the higher-level variable
  }
  alert(localVariable);    // prints 2: 'localVariable' persists outside the code block
}

if a local variable name conflicts with a global variable name, then the local variable "hides" the global variable from the moment it is declared and until the end of the function body where it was declared.

var myVariable = 1;      // a global variable

function f() {           // function in which the global variable is hidden
  var myVariable = 2;    // conflicting local variable: it hides the global variable
  {
     var myVariable = 3; // code block inside the function: reassigns the local variable
  }
  alert(myVariable);     // prints 3, i.e. the last value assigned to the local variable
}

function g() {           // function in which the global variable not is hidden
  f();                   // uses the name 'myVariable', but does not change the global variable
  alert(myVariable);     // prints 1, i.e. the value of the global variable
}

CAUTION: if a variable is accessed inside a function body without being explicitly declared as being a local variable (via the 'var' keyword), then said variable is assumed to be a global variable. This has the couter-intuitive implication that if an undeclared variable is first assigned inside a function during a JavaScript program execution, then said variable is automatically declared as being a global variable, and its assigned value will persist when the function execution ends:

 // a function that assigns an un-declared variable, which is thus implicitly global
 function runMeFirst() {
   myVar = 123.456;
 }

 // JavaScript program
 runMeFirst(); // the function will declare, and assign, the global variable 'myVar'
 alert(myVar); // this will print: 123.456, i.e. the value of the global variable 'myVar

Expressions and Operators

The expressions and operators in JavaScript are very similar to C expressions and operators. An expression is a succession of JavaScript keywords and/or tokens that a JavaScript interpreter can evaluate to produce a value.

Operator List
The JavaScript operators, their precedence, their order of evaluation, and the various other rules that govern an expression evaluation (e.g. the fact that in a chained OR expression the first '||' operator that evaluates to 'true' stops the evaluation of the rest of the expression, etc) are the same as in C.

The following table lists the JavaScript operators in decreasing order of precedence:

Associativity	Operator	Operand type(s)	Operation performed
L	( )	function, arguments	Function call
R	++	lvalue	Pre- or post-increment (unary)
R	--	lvalue	Pre- or post-decrement (unary)
R	-	number	Unary minus (negation)
R	+	number	Unary plus (no-op)
R	~	integer	Bitwise complement (unary)
R	!	boolean	Logical complement (unary)
R	typeof	any	Return data type (unary)
R	void	any	Return undefined value (unary)
L	*, /, %	numbers	Multiplication, division, modulo
L	+, -	numbers	Addition, subtraction
L	+	strings	String concatenation
L	<<	integers	Left shift
L	>>	integers	Right shift with sign-extension
L	>>>	integers	Right shift with zero extension
L	< , <=	numbers or strings	Less than, less than or equal
L	>, >=	numbers or strings	Greater than, greater than or equal
L	==	any	Test for equality
L	!=	any	Test for inequality
L	===	any	Test for identity( checks whether its two operands are "identical" using a strict definition of sameness)
L	!==	any	Test for non-identity
L	&	integers	Bitwise AND
L	^	integers	Bitwise XOR
L	\|	integers	Bitwise OR
L	&&	booleans	Logical AND
L	\|\|	booleans	Logical OR
R	?:	boolean, any, any	( exp1 ? exp2 : exp3 ) If exp1 is 'true', the exp2 is evaluated, otherwise exp3 is evaluated.
R	=	lvalue, any	Assignment
R	*=, /=, %=, +=, -=, <<=, >>=, >>>=, &=, ^=, \|=	lvalue	Assignment with operation
L	,	any	Multiple evaluation

Note: other operators specific for manipulating objects are described in the Manipulating objects section

Boolean expressions: comparisons in JavaScript
The way two expressions are compared in JavaScript depends on the types of expressions involved in the comparison, and on the type of comparison that is being performed:
- when comparing for equality (i.e. '==', '!='), if the two expressions are not of the same type, then they will go through a type conversion process in an attempt to make them compatible:
  - if the types of the two expressions are different, then attempt to convert them to a scalar type: string, number, or boolean.
    - numbers can be converted to boolean values: 0 converts to false, and non-zero numbers convert to true
    - as a general rule, strings cannot be converted to other types, and they are only equal to themselved, with all other comparisons returing 'flase'.
      - two notable exceptions to this rule are that the empty string can be converted to boolean 'false' (but a non-emty string can NOT be converted, i.e. is NOT equal, to 'true'), and that the negation operator '!' and the 'if', 'while', and 'for' statements (discussed in the 'statements' section below) interpret a non-empty string as 'true' and an empty string as 'false'.
    - boolean values cannot be converted to other types.
  - NaN is not equal to anything including itself ('NaN' is the Not-a-Number value; it is introduced by the 'Number' Object discussed later in this document).
  - negative zero equals positive zero.
  - null equals null and undefined, but does not equal false, 0, or the empty string.
    - a notable exception to this rule is that the negation operator '!' and the 'if', 'while', and 'for' statements (discussed in the 'statements' section below) interpret a 'null' as 'false'.
  In the end, the expressions are considered equal if their string, numerical, or boolean values are equal, or if they represent the same instance of an Object. Every other comparison is considered unequal.
- when comparing for order (e.g. <, >=) then the operands must both be either strings or numbers. If the two operands are different, then the number is converted to string and a string comparison is performed.
- when comparing for identity (i.e. '===', '!=='), no type conversions are performed, and the two expressions must evaluate as they are without any type conversion to equal strings, equal numbers, equal boolean values, or they must represent the same object instance.

Functions

JavaScript functions are similar to C functions, with the main difference that they do not use data types for neither their return value (if any), nor for their arguments (if any). Following is an outline of the most important characteristics of JavaScript functions:

Function declaration/definition:

using the keyword 'function'
JS functions have no type
- may or may not return a value (same as the C functions)
- various branches of the code inside the function may return different data type values, or nothing at all
can have any number of parameters (including none)
must be defined before they can be used (unlike C that allows declaring a function prior to defining it)

The body of function contains exactly one code block (like in C):

 function myFunc(paramVariable1, paramVariable2, ... paramVariableN)
        Code Block

 // example:
 function computeSquare(i) {
        return (i*i);
 }

note: apart from using the 'function' keyword, a function can also be defined as a JavaScript Object; this will be detailed in the 'Function Object' paragraph later in this tutorial.

Calling a function:

Function arguments are always passed by value in JavaScript: when a caller function invokes another function, each of the called function's arguments will receive a copy of the calling argument and not the argument itself, i.e. a called function cannot change the value of a variable from its caller.

 // example:
 function calledFunc(param) {
    alert(param);    // will print: 1
    param = 2;
    alert(param);    // will print: 2
 }

 function callerFunc() {
    x = 1;
    calledFunc(x);  //  calledFunc receives a copy of the variable 'x'
                    // but cannot change the variable 'x' declared in this function:
    alert(x);       // still prints: 1  (i.e. 'x' has not been changed by 'calledFunc()'
 }

Note on Object arguments (JavaScript objects are presented in detail in following sections):
Because object-type variables are always pointers to objects (and not the object data structures themselves), passing an object-type variable (i.e. a pointer to the object) as an argument to a function will allow the called function to effectively access and change the object by using the pointer that it received; thus, the value of an object-type variable as seen inside a function can be changed by another function that it calls:

 // example (as above, but using objects):
 function calledFunc(param) {
    alert(param.color);  // will print: red
    param.color="blue"   // effectively change an element of the received object
    alert(param.color);  // will print: blue
 }

 function callerFunc() {
    x = myColoredObject; // an user-defined object that contains a 'color' property
    x.color="red";
    alert(x.color); // will print: red
    calledFunc(x);  // calledFunc receives a copy of the pointer to myFirstObject
                    // and changes the color of variable 'x' declared in this function:
    alert(x.color); // will print: blue
 }

JavaScript allows a variable number of arguments to be sent to a function when it is invoked.
The following situations can occur:

in the trivial case, when the number of caller arguments is the same as the number of function parameters, each parameter is assigned with it's corresponding caller argument (like in C)
when the number of caller arguments is greater than the number of function parameters, the extra caller arguments are ignored. For example, when sending three arguments, and there are only two parameters defined within the function, the third argument is ignored

when the number of caller arguments is less than the number of function parameters, the extra parameters in the function are undefined. For example, when sending three arguments, and there are four parameters waiting within the function, then the fourth parameter is undefined.

  // check to see if 'parameter2 ' has been passed to the function:
  myFunction(parameter1, parameter2) {
          [...]
          if (typeof(parameter2) != 'undefined') {
                  [code to deal with parameter2] // code that will ony be executed if
                                                 // 'parameter2' has been passed to the function
          }
          [...]
  }

JavaScript supports recursion (same as C)

Inbuilt Functions:
JavaScript implements a number of specialized functions (e.g. nathural logarithm, string search, etc) as methods of several dedicated inbuilt objects, e.g the 'Math' object contains a collection of mathematical functions and constants, the 'String' object contains string manipulation functions, etc. A detailed description of these functions is presented later in this document, together with the various inbuilt objects that implemet them as their methods in the 'inbuilt objects' chapter.

Apart from these methods, a number of functions are available directly to a JavaScript program; the following list presents the most common of these functions:
- escape(char_string) :
  encodes all special characters except '*' '@' '-' '_' '+' '.' '/' (i.e. it does encode the <space> and <tab> characters)
- encodeURI(char_string) :
  This function is intended for encoding URLs; it is similar to 'escape()', but omits a larger set of characters from encoding, namely ',' '.' '/' '?' ':' '@' '&' '=' '+' '$' '#' '-' '_'
- encodeURIComponent(char_string) :
  similar to 'encodeURI()', but encodes all special characters except '.'
- unescape(encoded_string) :
  decodes a character string encoded with 'escape()'
- decodeURI(encoded_string) :
  decodes a character string encoded with 'encodeURI()'
- decodeURIComponent(encoded_string) :
  decodes a character string encoded with 'encodeURIComponent()'

Statements

The JavaScript statements are similar with C/C++ statements.
Note: the FOR - IN and WITH statements, which are specialized in manipulating objects, are discussed in Manipulating Objects chapter.

Conditionals

IF
if (boolean_expression){ statements }

IF/ELSE

  if (boolean_expression){ statements }
  else { statements }

SWITCH

  switch(expression) {
  case value:
    statements
    break;
  case value:
    statements
    break;
  [...]
  default:
    code to be executed if expression != all constant_values
  }

Note: unlike in C/C++, the argument of the 'case' statements contained in a JavaScript 'switch' block can be either a constant or a defined variable.

Loops

WHILE

  while (boolean_expression) { statements }

DO-WHILE

  do { statements } while (boolean_expression)

FOR

  for (initialization_expression; boolean_expression; end_of_loop_expression)
  { loop_body_statements }

Note 1 : the above is equivalent to (like in C):

  initialization_expression;
  while ( boolean_expression) {
    loop_body_statements
    end_of_loop_expression;
  }

Note 2: if boolean_expression condition is missing, it evaluates to 'true' (like in C)

  for (i=0;;i++) {
    PrintNumber(i*i);
    if (i == 100) break; // exit the loop when 'i' reaches 100
  }

Example 1:

  for (i=0; i<10; i++) {
    printNumber(i*i);
  }

Example 2:

  for (myString=""; !stringContains(myString, " stop"); appendToString(myString, readACharacter())) {
    printString(myString);
  }

Break/Continue statements

BREAK

  for (...) {
    statements
    if (boolean_expression) break; // exits the loop: jumps at the first instruction after the loop's closing '}'
    statements
  }

CONTINUE

  for (...) {
    statements
    if (boolean_expression) continue;  // continues the loop: jumps at the beginning of the loop,
                                       // i.e. at the first intruction after the loop's starting '{'
    statements
  }

Exceptions

A JavaScript operation can run into an "exceptional state", which is a situation where the normal flow of the program can nolonger continue (e.g. attempting a division by zero, or calling an undefined fumction, etc). These situations can be "caught" by the dedicated 'try-catch' syntactical contruct, which is very similar to the 'try-catch construct on C++ or Java.

'try-catch' syntax:

 try {
    // this code block is called the 'try' block.
    // if an exceptional situation occurs at any moment during the
    // execution of this code block, then execution is abandoned
    // and the program "jumps" to the 'catch' block below.
    [code block where an exceptional state might occur]
 } catch (exception) {
    // this code block is called the 'catch' block.
    // 'exception' is an object variable that is automatically initialized
    // with a description of the exception that occured in the 'try' block.
    // the 'exception' variable can be used to identify the type of exception:
    // - exception.name: a string containing the type of exception, e.g. TypeError
    // - exception.message: a string containing a verbouse description on the error
    [code that will be executed only if an illegal situation occured]
}

example:

try {
   a[2]="this won't work!";
} catch (err) {
   alert("[an exception occured: "+err.name+", "+err.message+"]");
}

This example will pop up an alert box displaying:
[an exception occured: ReferenceError, a is not defined]

Apart from the inbuilt situations that may cause exceptions, a user-defined function (or any other user code block) can itself force the generation of an exception via the 'throw' statement. In this case, the execution of the code is immediately abandoned (after the execution of the 'throw' statement), and an attempt is made to find an "enclosing 'try' statement" (a 'try' code block that "wraps" the point where 'throw' was executed). If such a 'try' block is found, then execution is resumed at the 'catch' block that corresponds to that 'try' block; else, JavaScript execution is terminated with an irrecoverable exception condition.

'throw' syntax:
function someFunction() {
[some start code]
if (someSituation) throw new Error("custom error message");
[some more code]
}
The exception name generated by the use of the 'Error' contructor (i.e. the 'new Error(..)' syntax above) is always 'Error', and the custom error message is the string specified in the constructor

example:

// a function that simply throws an exception
function myFunction() {
   alert("Click 'OK' to throw a custom exception");
   throw new Error("this is my custom error message");
}

// some code to demo the 'throw' from 'myFunction()'
[some initial code]
try {
   alert("Click 'OK' to start the execution of 'myFunction()'");
   myFunction();   // 'myFunction()' will throw an exception
} catch (err) {
   alert("[an exception occured: "+err.name+", "+err.message+"]");
}
[some more code]

This example will pop up an alert box displaying:
[an exception occured: Error, this is my custom error message]

Objects overview

JavaScript 'objects' are data structures that group together a number of elements, with said elements being referred to as the object properties.
The only way to create an object in JavaScript is using the dedicated 'new ObjectTypeName' operator which creates a new object of type 'ObjectTypeName', and returns a pointer to it such that the object can later be handled within a program. There is no other way to have access to a newly created object except via the pointer to it that is returned by 'new' upon creation.

A special predefined JavaScript type is 'Object' which represents an "empty" data structure, i.e. a data structure with no properties. Based on the 'Object' type name one can create new instances of "empty objects" using the syntax 'new Object':

 var myObject = new Object;  // the variable 'myObject' now holds a pointer (a reference)
                             // to the object that was created by the 'new' operator
 var isObject = (typeof(myObject) == 'object'); // isObject will be set to boolean 'true'

A variable that "holds" a pointer to an object is referred to as an object variable.

Object properties
Once an object variable has been creted using the 'new Object' syntax, it initially has no properties (it's an "empty" object); however, new properties can be added to any existing object at any time during program execution.
In JavaScript, the very name of a property can be a static identifier (that appears ad-literam in the JavaScript source code, just like a C structure's members), or it may be a string that is dynamically created during program execution:

Statically named properties
A property with a statically defined named can be added to an object during program execution by simply assigning it a value using a C-like syntax:

 // declare and initialize statically named properties for 'myObject'
 myObject.firstProperty = 1234;
 myObject.secondProperty = "a string";

Dynamically created property names
A property with a dinamically created name can be added to an object during program execution using an array-indexing-like syntax, where the value of the index can be a string constant or variabe:

 // declare and initialize properties with dynamically created names
 var propertyName = "city";            // create a string variable initialized with 'city'
 myObject[propertyName] = "Honolulu";  // create a new property of myObject called 'city'
                                       // and set the value of myObject.city to 'Honolulu'
 myObject["expiry date"]="01/01/2000"; // create a new property of 'myObject' called
                                       // 'expiry date' and set its value to '01/01/2000'
                                      
 // Notes for the code above:
 // - because of the space character in the property name 'expiry date'
 //   (or any other character that is illegal within an identifier), 
 //   one cannot represent this property using the '.' notaton,
 //   i.e. the syntax 'myObject.expiry date' is not syntactically valid!
 // - because the property name 'city' does not contain any characters 
 //   that are illegal for an identifier, the notations 'myObject.city' 
 //   and 'myObject["city"]' are both legal, and they represent the same
 //   property named 'city' of 'myObject'

Once a property has been attached to an object, it can be accessed both for reading its value, and for re-writing it. Just like the JavaScrpt variables, properties do not have a fixed type, thus the reassignment with a new type of data is legal

 var v = myObject.firstProperty;  // read the 'firstProperty' of 'MyObject; 'v' becomes '1234'
 myObject.secondProperty = 0;     // re-write the 'secondProperty' of 'myObject'; it becomes a numerical value

A property of an object variable can "hold" another object:

 var mySecondObject = new Object;         // declare a new object,
 mySecondObject.property = 0;             // and define a property for it

 myObject.thirdProperty = mySecondObject; // define a new property for 'myObject', and make it "hold" an object
 myObject.thirdProperty.property=1.2;     // assign a value to the property of an object which is itself a property

Object methods
A property of an object variable can be assigned with a function name, or with an anonymous function; after such an assignment, said property will be called a method of the object, i.e. once a property of an object is assigned with a function, the property is referred to as an object method:

Making a function become a method of an object:

 function myFunction(argument) {
    return argument*argument;
 }

 myObject.firstMethod  = myFunction; // becuase 'firstMethod' is assigned a function name,
                                     // it "becomes" a method; from now on, 'myFunction'
                                     // will be invoked as a method of 'myObject'

 var v = myObject.firstMethod(10);   // 'myObject' invokes 'myFunction' as a method; 
                                     // 'v' is set to 100;

The assignment 'myObject.firstMethod = myFunction' is referred to as: 'myFunction is being attached to the method firstMethod of myObject'.
The syntactical construct 'myObject.firstMethod(10)' is referred to as: 'myObject invokes its method firstMethod with the argument 10'.
- The function call of 'firstMethod' itself is referred to as: 'firstMethod is invoked by myObject'.
The fact that 'myFunction' has been actually called when 'firstMethod' was invoked by 'myObject' is referred to as: 'myFunction was invoked as a method by myObject, via firstMethod'.

Defining an anonymous function as a method of an object:

 // note the use of the 'function' keyword below:
 myObject.firstMethod = function(argument) {
    return 2*argument;        // from now on, the code defined in this anonymous function body
 }                            // will be invoked as the 'firstMethod' method of 'myObject'

 var v = myObject.firstMethod(10);   // 'myObject' invokes the un-named function defined above:
                                     // 'v' is set to 20;

Removing properties (and/or methods)
A property (or method) of an object can be deleted at any time during program execution by using the 'delete' operator.

 // add a property to an object, assign it a value, and then delete it using the 'delete' operator
 // note: the object (variable, function, constant) that was assigned to the property is not deleted
 var tempObject = new Object;
 tempObject.text = "Hello world!";

 myObject.propertyToDelete = tempObject;
 alert(myObject.propertyToDelete.text);  // this will print: "Hello world!"
 delete myObject.propertyToDelete;
 alert(myObject.propertyToDelete.text);  // this will now print:  undefined
                                         // this happens becuase 'propertyToDelete'
                                         // is nolonger a property of 'myObject'.

 // the 'tempObject' itself has not been deleted
 alert(tempObject.text);                 // this will print: "Hello world!"

Checking if an object property or method is defined
Similar to a variable, a property's existence can be chacked via 'typeof(object_property)':

  // somewhere in a code block:
  if (typeof(myObject.propertyToCheck) != 'undefined') }
          alert("myObject.propertyToCheck is DEFINED");
  } else {
          alert("myObject.propertyToCheck is NOT defined");
  }

The 'this' keyword
The 'this' keyword can be used only inside a function that is designed to be attached to a method of an object.
Let us assume the function 'myFunction' is attached to 'myObject.objMethod'; in this case, when 'myObject' will (indirectly) invoke 'myFunction' via 'myObject.objMethod(arguments)', the 'this' keyword inside 'myFunction' will represent 'myObject'.

 // this function will later be attached to the method 'secondMethod' of 'myObject' (see code below);
 function functionToBeUsedAsMethod(argument) {
    this.firstProperty = argument;   // every time this function will be invoked as a method via
                                     // 'myObject.secondMethod', the keyword 'this' will refer to 'myObject'
                                     // thus, this function actually sets the property 'firstProperty'
                                     // of the object 'myObject' that will invoke it.
 }

 // attach 'functionToBeUsedAsMethod' to the method 'secondMethod' of 'myObject';
 // the property 'secondMethod' of 'myObject' becomes a method because it is assigned with a function name
 myObject.secondMethod = functionToBeUsedAsMethod;

 // now 'myObject' will invoke 'functionToBeUsedAsMethod'  (indirectly, via 'myObject.secondMethod'):
 myObject.secondMethod(6789); // the line  'this.firstProperty = argument'  from 'functionToBeUsedAsMethod'
                              // actually translates into  'myObject.firstProperty = 6789'  when it's executed

Object constructors
As described above, the syntax 'var myObject = new Object' allows generating new objects that initially have no attached properties and/or methods. JavaScript also provides an alternative way of building new objects which are not necessarily empty objects, using the constructor mechanism (i.e. the constructor mechanism allows generating objects that start by having a number of "attached" properties and/or methods right after they are generated).
The constructor mechanism uses the folowing syntax: 'myObject = new constructor_function(constructor_arguments)'.
The constructor function is similar to a "normal" JavaScript function, but it is meant to be only invoked via the 'new' operator. Additionally, a constructor function can use the keyword 'this' inside its body to represent the object that it creates when it's invoked via the 'new' operator.

Creating empty objects using the constructor mechanism

 // this is a constructor function to build an "empty" object
 function constructorForEmptyObject() {
 }

 // this statement is equivalent to 'var emptyObject = new Object'
 var emptyObject = new constructorForEmptyObject(); // this generates an "empty" object, i.e.
                                                    // 'emptyObject' has no attached properties and/or methods

Creating objects with initialized properties using the contructor mechanism

 // this constructor function builds an object with a property 'objProperty'
 // 'objProperty' is initialized via the constructor argument when the object is generated
 function constructorWithProperty(propertyInitializer) {
        this.objProperty = propertyInitializer;
 }

 // create a new object that has its 'objProperty initialized with '100'
 var myObject = new constructorWithProperty(100);

 // read and set the 'myObject' property
 var initialPropertyValue = myObject.objProperty; // 'initialPropertyValue' becomes '100'
 myObject.objProperty = "a string";               // 'objProperty' of 'myObject' is re-assigned with a string
 var finalPropertyValue = myObject.objProperty;   // 'finalPropertyValue' becomes "a string"

Creating objects with initialized properties and methods using the contructor mechanism - this can be accomplished in two ways:

if a constructor assigns one of its arguments to a property of the object it creates, and then the constructor is invoked for creating a new object with that argument being a function name, then the respective property of the object implicitly becomes a method of the object:

 // this constructor function builds an object with a property 'objProperty' and a method 'objMethod'
 function constructorWithPropertiesAndMethods(argument1, argument2) {
        this.objProperty = argument1;
        this.objMethod = argument2;   // it is the responsability of the JavaScript code that generates
                                      // a new object to invoke the constructor with a function name
                                      // passed to the constructor as 'argument2';
                                      // if 'argument2' will not be a function name, then 'objMethod'
                                      // will be a simple object property (and not a method)
 }

 // define a function that will be used as method when invoking 'constructorWithPropertiesAndMethods'
 function myFunctionToBeUsedAsMethod(argument) {
        this.objProperty = argument;   // 'this' represents the object that will invoke this function
                                       // as a method (after this function has been attached as a method)
 }

 // create an object 'myObject' using the 'constructorWithPropertiesAndMethods':
 // 'myObject' will be created with an attached property 'objProperty' initially set to '100', and
 // a method 'objMethod' to which 'myFunctionToBeUsedAsMethod' is attached  (i.e. every time when
 // 'objMethod' is invoked by 'myObject', the function 'myFunctionToBeUsedAsMethod' will actually be called)
 var myObject = constructorWithPropertiesAndMethods(100, myFunctionToBeUsedAsMethod);

 // now 'myObject' has an attached property 'objProperty' set to '100', and an attached method 'objMethod';
 // thus, every time 'myObject' will invoke its 'objMethod', 'myFunctionToBeUsedAsMethod' will be called
 myObject.objMethod(50);       // this invokes 'myFunctionToBeUsedAsMethod' via 'objMethod', with
                               // parameter 50; thus, the value of 'myObject.objProperty' is set to '50'
 var p = myObject.objProperty; // the variable 'p' becomes '50'

the methods of an object can be defined inside the object constrcutor, in which case no "external" function will be required for defining the object's methods:

// object constructor that initializes its 'data' property and "embeds" the code of its 'print' method:
function myObjectConstructor(propertyInitializer) {
  this.data = propertyInitializer;        // initialize the 'data' property with the constructor's argument
  this.print = function(methodArgument) { // 'function' is the keyword that specifies a method's JavaScript code
    alert(this.data+" , "+printArgument); // this method takes one argument and it displays a message box
                                          // containing the object's 'data' property followed by the argument
                                          // passed to the method when the method is invoked
}

// 'myObjectConstructor' above takes a single argument which it uses to initialize the 'data' object property,
// but it also defines an internal method 'print' which is a function that takes one argument when it is invoked.
// Given the above, the creation of a new object will only require a data initializer (because the method code
// is "embedded" inside the constructor), and then the object's method can be invoked with the required argument:
var MyObj=new myObjectConstructor("a string"); // create a new object and assign "a string" to 'data'; from now on
                                               // the object's method can be invoked (with the required argument)
MyObj.print(1234.5);                           // this line will invoke MyObj's 'print' method with the argument
                                               // 1234.5, and as a result an alert box will be displayed
                                               // containing the text:  a string , 1234.5

note: the above method of declaring an Object constructor is the closest to the object oriented programming paradigm, as it completely hides both the internal properties and the internal methods of the Object from the rest of the program.

The contructor mechanism does not define a "unique type of objects": the objects created by the constructor will not necesarily have the same set of properties and methods.

 // this constructor function builds 'Person' objects that may or many not have
 // a property 'children', depending on the parameters that are passed to it.
 function Person(firstName, lastName, dateOfBirth, children) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.dateOfBirth = dateOfBirth;
        if (typeof(children) != 'undefined') {
                this.children = children;   // the property 'children' will only be created for
                                            // the object depending on the constructor arguments
        }
 }


 // create a person for which the property children does not initially exist when it is created
 john = new Person("John", "Smith", "10-10-2000");
 // try to find john's children:
 johnsChildren = john.children;   // this will result in an error at execution time
 // however, the children list can be added for john at any time in the program:
 john.children = "Mary, Carl";    // this creates and initializes a 'children' property for john

 // now create a person for which the property children eixists from the moment when it is created
 mark = new Person("Mark", "Deen", "05-05-1970", "Carla, Drew");
 // read mark's children:
 marksChildren = mark.children;   // marksChildren gets assigned with the string "Carla, Drew"

The object contructors mechanism (where the constructor is a user-defined function) provides the most flexible way to create user-defined object types in JavaScript.

For example, the programmer can define a 'GenericPerson' constructor function that will build objects containing the 'firstName' and 'lastName' properties, and a method 'changeLastName(newLastName)'. In this case, a variable 'aSpecificPerson' created using the 'GenericPerson' constructor will provide the programmer with access to its properties via 'aSpecificPerson.firstName' and 'aSpecificPerson.lastName', as well as to its dedicated method for changing the last name via 'aSpecificPerson.changeLastName(newName)'.

Object initializers
Apart from using object constructors for instantiating an Object with initialized properties and/or methods, the following alternative is provided by JavaScript:

var myObject = {
   "property-name 1": Value1,
   "property_name_2": Value2,
   "method-name 1": function(argument1, argument2) {
      < body of 'method name 1' >
    },
   "method_name_2": function(argument1, argument2) {
      < body of 'method_name_2' >
    }
};

// Notes for the code above:
// - because of the illegal identifier-characters contained in their names,
//   the property 'property-name 1' and the method 'method-name 1' can only
//   be accessed via the [] syntax, e.g. myVariable=myObject['property-name 1']
// - the property 'property_name_2' and the method 'method_name_2' can also
//   be accessed via the '.' syntax, e.g. myVariable=myObject.property_name_2
// - the properties' and methods' names can be represented by defined variables
// - only the value of properties can be initialized by defined variables,
     while methods can only be "initialized" with plain-text JavaScript code

Example:

var userDefinedField = "my field"
var anUtensil = {
   'type': 'knife',
   'status': 'unused',
   'changeStatus': function (newStatus) {
       this.status = newStatus;
   },
   userDefinedField: "not assigned"
}

// Notes:
// - the method 'changeStatus()' uses the 'this.status' syntax for
//   accessing the 'status' property of the object it's attached to
// - the line:  userDefinedField:"not assigned"  creates a property
//   named "my field" and initializes it with "not assigned", i.e.
//   it is equivalent to the line:  "my field":"not assigned"

Prototypes
An object's prototype is the collection of properties and methods that are always associated with the type of that object, independently from what peoperties and/or methods have been changed for any specific instances of that type of object, i.e. at any given time, an object of a given type will have all the properties and methods associated with the prototype of that object's type. If the prototype of an object changes dynamicaly during program execution, the changes are instantly reflected in all the existing object instances of that type.
The prototype for a type of object is accessible via the syntax 'ObjectTypeName.prototype', and the syntax for adding and/or removing properties and/or methods to/from an object's prototype is identical to the syntax for adding and/or removing proetries and/or methods to/from an object instance:

adding a new property to a type:
- ObjectTypeName.prototype.new_property_name=someValue;
- ObjectTypeName.prototype[new_property_name_string]=someValue;
Like in the case of object instances, the second form of adding a property allows the property name to be a variable.
- syntax examples:
  String.prototype.new_prop=newValue;
  String.prototype["new_prop"]=newValue;
deleting a property from a type:
- delete(ObjectTypeName.prototype.property_name);
- delete(ObjectTypeName.prototype[property_name_string]);
Like in the case of object instances, the second form of deleting a property allows the property name to be a variable.
- syntax examples:
  delete(String.prototype.new_prop);
  delete(String.prototype["new_prop"]);

example:

// add a new property to the type String
function addPropToString(propName, defaultValue) {
   String.prototype[propName]=defaultValue; // add the property to the String prototype
}

// delete a property from the type String
function delPropFromString(propName) {
   delete(String.prototype[propName]); // remove the property from the String prototype
}

// test showing the effect of calling 'addPropToString()' and 'delPropFromString()':
// ALL THE EXISTING 'String' OBJECTS ARE CHANGED WHEN THE 'String' PROTOTYPE IS CHANGED
function testNewString() {
   var myOriginalString = new String("original");
   alert(myOriginalString.new_prop); // this will display: undefined

   // add 'new_prop' to the String data type and then create a new String object
   addPropToString("new_prop", 123.456);
   var myModifiedString = new String("modified");

   // now display the 'new_prop' for both the original and the modified String types
   // BOTH THE ORIGINAL String AND THE MODIFIED String now "contain" the 'new_prop'
   alert(myOriginalString.new_prop); // this will display: 123.456
   alert(myModifiedString.new_prop); // this will display: 123.456

   // now delete the newly added property from the String prototype
   delPropFromString("new_prop");

   // the 'new_prop' no longer exists in NEITHER THE ORIGINAL NOR THE MODIFIED Strings
   alert(myOriginalString.new_prop); // this will display: undefined
   alert(myModifiedString.new_prop); // this will display: undefined
}

Dynamically-named global variables
As it has been mentioned in the 'variables' chapter, all global variables in JavaScript are in fact properties of a global object inside of which the script is running, and in the specific case of having a JavaScript running inside a browser window the global object is a predefined variable named 'window' (i.e. a global variable 'myVariable' inside a JavaScript that runs in a web browser is the same as 'window.myVariable'); thus, by using the array index-style syntax one can define variables whose names are themselves variables:

 // declare and initialize a dynamically-named variable
 myVariableNAME = "my"+"Variable"; // calculate the name of a new variable that is to be defined
 window[myVariableNAME] = "value"; // this declares and initializes a variable named 'myVariable'
 alert(myVariable);                // this will print the value of 'myVariable': "value"

Inbuilt Objects

JavaScript provides in-built objects that deal with date and time, math, strings, regular expressions, numbers, and other useful entities.

The 'Object' object:
As it was described in the 'objects overview' chapter above, the JavaScript 'Object' type is an "empty" object, normally having no associated properties or methods: instantiating a new Object will result in a new instance of an object that contains no propertie and no methods.

The 'Object' type is a special type in JavaScript: from an OOP perspective, the 'Object' type is the "base type" for all the other JavaScript object types, may they be inbuilt types or user-defined types, such that a change in the 'Object' prototype will be reflected in the prototypes of all the other JavaScript object types. Apart from being "derived" from 'Object', there is no other inherent "inheritance" relationship between any JavaScript types, may they be inbuilt types or user-defined types.

Example 1: a change in the prototype of 'Object' is reflected in the prototype of the JavaScript inbuilt type 'String'

// change 'Object' prototype
function addToObject(newProp, defaultVal) {
   Object.prototype[newProp]=defaultVal;
}

// a change to the 'Object' prototype affects all the inbuilt types, e.g. 'String'
function testObjProtoChange() {
   var myString=new String("abc");
   alert(myString.my_prop);  // the inbuilt 'String' does not have a property
                             // 'my_prop', so this alert box will display: undefined
   // add 'my_prop' property to the 'Object' type
   addToObject("my_prop","added property");

   // 'my_prop' in 'Object' prototype is reflected in the 'String' prototype
   alert(myString.my_prop);  // this will display: added property
}

Example 2: a change in the prototype of 'Object' is reflected in the prototype of the user-defined type 'MyObject'

// change 'Object' prototype
function addToObject(newProp, defaultVal) {
   Object.prototype[newProp]=defaultVal;
}

// constructor for a user-defined type 'MyObject'
function MyObject(val) {
   this.value=val;
}

// a change to the 'Object' prototype affects all the user-defined types, e.g. 'MyObject'
function testObjProtoChange() {
   var myInstance=new MyObject("myInstance of MyObject");
   alert(myInstance.value);    // this will display: myInstance of MyObject
   alert(myInstance.my_prop);  // the inbuilt 'MyObject' does not have a property
                               // 'my_prop', so this alert box will display: undefined
   // add 'my_prop' property to the 'Object' type
   addToObject("my_prop","added property");

   // 'my_prop' in 'Object' prototype is reflected in the 'myInstance' instance of MyObject
   // the instance-based property 'value' of myInstance remains unchanged
   alert(myInstance.value);    // this will display: myInstance of MyObject
   alert(myInstance.my_prop);  // this will display: added property
}

Array object
An array is a JavaScript Object that stores an ordered collection of elements, with each element being always indexed by an integer value. Because JavaScript is an untyped language, an element of an array may be of any type, and different elements of the same array may be of different types. Array elements may even contain other arrays, which allows to create data structures that are arrays of arrays.

Creating an Array
An array can be declared to "start as an empty object", or its declaration can also contain an initialization:

  // array declaration without initialization:
  // arrayLength is optional: if not present the array starts with zero legth
  var arrayObject = new Array(arrayLength);  // pre-dimension the array
  var arrayObject = new Array();             // initial dimension zero

  // array declaration with initialization:
  // the array starts with the legth determined by the number of initializers
  var arrayObject = new Array(element0, element1, ..., elementN);

Caution: one cannot use the 'new Array(intNumber)' command for creating an initialized array containing only one integer number, because that syntax is reserved for declaring the array dimension:

  var arrayObject1 = new Array("a string");  // this declares and initializes a 1-element array
  var arrayObject2 = new Array(2);  // this declaration creates a 2-ELEMENT ARRAY

Array initializer expression
A variable initialized (or "re-initialized") with an array initialization expression becomes an Array variable:

  // array (re)initialization:
  // the (re)initialized array legth is determined by the number of initializers
  var arrayObject = [element0, element1, ..., elementN];

Array elements
The syntax for accessing an element of an array is similar to the one used for accessing a property of an Object, i.e. myArray[indexValue], with the essential difference that indexValue must always be an integer value.

  // when an array is initalized with specified values as its elements, the
  // array's 'length' property is automatically set to the number of elements.
  arrayObject = new Array(element0, element1, ..., elementN);

IMPORTANT: because the same syntax is used for accessing an element of an array and a property of a generic object, an Array object ceases to be an array the moment when one creates an alphanumeric property name for it. Consequently, (most of) the Array properties and methods will no longer return the expected result the moment when an Array gets transformed into a generic JavaScript Object.
Example:

// create an Array object
var myObject = new Array(10); // create 10-element array myObject
alert(myObject.length);       // this will display: 10

// now transform is into a generic Object by inseting a string-valued property name
myObject["prop-name"] = 123;  // from now on myObject is no longer an Array
alert(myObject.length);       // this will still display 10, like if myObject's length has not been modified

Multi-dimensional arrays
A multi-dimensional array consists of a uni-dimensionaly array whose elements are themselves arrays. JavaScript does not provide a dedicated inbuilt MultiDimensionalArray Object, but does allow single-expression initializers for multi-dimensional arrays by nesting array initializer expressions.

  var row0 = new Array(row0_col0, row0_col1, row0_col2);
  var row1 = new Array(row1_col0, row1_col1, row1_col2);
  var matrix = new Array(row0, row1); // matrix is a multidimensional array

  // the statements above are equivalent with the following single-expression initialization:
  var matrix = [[row0_col0, row0_col1, row0_col2],
                [row1_col0, row1_col1, row1_col2]];

  // to access an element from a multidimensional array:
  value = matrix[1][2]; // value will get row1_col2

Properties

Property	Description	Syntax
length	Sets or returns the number of elements in an array. Note: Unlike arrays declared in C, JavaScript allows the size of an array to change dynamically at any time. It is possible to write directly to a position that was not even declared using the [ ] operator. The length of the array can also be changed by altering the length attribute of the Array object: if the length of the array is set to a smaller value that its actual length, then the elements "in excess" are deleted.	myArray.length = resizeLength; arrayLength = myArray.length;

Methods

Method	Description	Syntax
concat()	Concatenates one or more arrays to the end of the array that called the method and returns the result. The array that called the method is not changed by the method.	resultArray = myArrayObject.concat(array1,array2,..)
join()	Puts all the elements of an array into a string. The elements are separated by a specified separator	stringObject = myArrayObject.join([separator])
reverse()	Reverses the order of the elements in an array.	myArrayObject = myArrayObject.reverse()
slice()	Returns a new array that contains the elements of the original array starting at index position start and ending at the element position before end. If no end position is specified, the new array will contain the elements of the original array, starting at the position start through the end of the array.	resultArray = myArrayObject.slice(start [,end])
sort()	Rearranges the elements of the array based on a sorting order. If the method has no parameters,JS attempts to convert all the elements of the array to strings and then sort them alphabetically.If the array should be sorted some other way, a function must be provided to handle the new sorting algorithm.	myArrayObject = myArrayObject.sort([sortby])
splice()	Removes or adds new elements to an array; index - Specify where to add/remove elements; N - Required, it's an integer type. Specify how many elements should be removed. 'N=0' specifies that optional elements will be added; elem1-elemX - Elements to add to the array	myArrayObject = myArrayObject.splice(index,N,elem1,...elemX)

Other methods :

pop()
push()
shift()
unshift()
toString()

Date object
The Date object and its methods provide a way to work with dates and times in javascript applications.

Creating a Date object

 // dateObject object will automatically hold the current date and time as its initial value!
 var dateObject = new Date();

 // if hours, minutes, or seconds are missing,the values will be set to zero.
 var dateObject = new Date(yyyy, mm, dd, hh, mm, ss);
 var dateObject = new Date("September 11, 2001 13:30:00");

Methods for handling dates and times categories :
- "set" methods, for setting date and time values in Date objects.
- "get" methods, for getting date and time values from Date objects.
- "to" methods, for returning string values from Date objects.

All of these methods deal with time in the client computer's local time zone.

Get Methods	Set Methods	Parameters Value	Description	Syntax
getTime( )	setTime(val)	0-...	Returns/Sets the equivalence of the Date object in milliseconds. The milliseconds are expressed as an integer representing the number of milliseconds between midnight January 1, 1970 (GMT) to the date and time specified in the Date object.	dateObject.getTime()
getSeconds( )	setSeconds(val)	0-59	Returns/Sets the seconds portion of the Date object expressed as an integer from 0 to 59.	dateObject.getSeconds()
getMinutes( )	setMinutes(val)	0-59	Returns/Sets the minutes portion of the Date object expressed as an integer from 0 to 59.	dateObject.getMinutes()
getHours( )	setHours(val)	0-23	Returns/Sets the hour portion of the date expressed as an integer from 0 (12:00 a.m. midnight) to 23 (11:00 p.m.)	dateObject.getHours()
getDay( )	setDay(val)	0-6	Returns/Sets the day of the week expressed as an integer from 0 (Sunday), 1 (Monday) to 6 (Saturday).	dateObject.getDay()
getDate( )	setDate(val)	1-31	Returns/Sets the day of the month expressed as an integer from 1 to 31	dateObject.getDate()
getMonth( )	setMonth(val)	0-11	Returns/Sets the month portion of the Date object expressed as an integer from 0 (January) to 11 (December).	dateObject.getMonth()
getFullYear( )	setFullYear(val)	1970- ...	Returns/Sets the year in local time as a full four-digit number.	dateObject.getFullYear()
toGMTString()	-	-	Returns a string representation of the Date object in GMT format, e.g.: "Tue, 11 Sep 2001 13:30:00 XXX" (XXX is GMT on firefox, UTC on IE6)	dateObject.toGMTString()
getTimezoneOffset()	-	0- ...	Returns the getTimezoneOffset() method returns the difference between the time zones of local time and Greenwich Mean Time (GMT). This difference is returned as an integer representing the number of minutes between the time zone of the local time and GMT.	dateObject.getTimezoneOffset()

Math object
Unlike other objects, it doesn't need to create an instance of the Math object with 'new' keyword. The Math object has properties and methods for mathematical constants and functions. The Math object always starts with an uppercase M.

Properties( and mathematical constants)

Property	Description	Syntax
E	Returns Euler's constant (approx. 2.718)	Math.E
LN2	Returns the natural logarithm of 2 (approx. 0.693)	Math.LN2
LN10	Returns the natural logarithm of 10 (approx. 2.302)	Math.LN10
LOG2E	Returns the base-2 logarithm of E (approx. 1.442)	Math.LOG2E
LOG10E	Returns the base-10 logarithm of E (approx. 0.434)	Math.LOG10E
PI	Returns PI (approx. 3.14159)	Math.PI
SQRT1_2	Returns the square root of 1/2 (approx. 0.707)	Math.SQRT1_2
SQRT2	Returns the square root of 2 (approx. 1.414)	Math.SQRT2

Methods( standard mathematical functions)

Method	Description	Syntax
abs(x)	Returns the absolute value of a number	Math.abs(x)
ceil(x)	Returns the value of a number rounded upwards to the nearest integer	Math.ceil(x)
cos(x)	Returns the cosine of a number	Math.cos(x)
exp(x)	Returns the value of E^x	Math.exp(x)
floor(x)	Returns the value of a number rounded downwards to the nearest integer	Math.floor(x)
log(x)	Returns the natural logarithm (base E) of a number	Math.log(x)
max(x,y)	Returns the number with the highest value of x and y	Math.max(x,y)
min(x,y)	Returns the number with the lowest value of x and y	Math.min(x,y)
pow(x,y)	Returns the value of x to the power of y	Math.pow(x,y)
random()	Returns a random number between 0 and 1	Math.random()
round(x)	Rounds a number to the nearest integer	Math.round(x)
sin(x)	Returns the sine of a number	Math.sin(x)
sqrt(x)	Returns the square root of a number	Math.sqrt(x)
tan(x)	Returns the tangent of an angle	Math.tan(x)

Other methods :

asin(x)
acos(x)
atan(x)
atan(y,x)

String object
A JavaScript string object can "hold" a sequence of text characters (it is in many ways similar with C++ string object).

Creating a String object
A string object can be created starting from a string literal, or from a scalar variable of type 'string':

 var stringScalar = 'a string';
 var stringObject1 = new String(stringScalar);
 var stringObject2 = new String("JavaScript tutorial");

IMPORTANT: a string object and a string scalar are different data types:

 var stringScalar = 'a string';
 var stringObject = new String('another string');
 var type1 = typeof(stringScalar); // type1 is the string: 'string'
 var type2 = typeof(stringObject); // type2 is the string: 'object'

Properties

Property	Description	Syntax
length	Returns the number of elements in a string.	stringLength = myString.length;

Methods
IMPORTANT: All the String methods that return a string value (including a single-character string) always return a new string that contains the result of the respective method, and they do not modify the method's string parameter(s). Additionally, the strings that are returned by the string mehods are not String Objects, but rather simple strings, i.e. their data type as returned by the 'typeof()' function is "string" and not "object".

Method	Description	Syntax & Examples
concat()	Concatenates string arguments to the string on which the method was invoked.	resultString = myStringObject.concat(string1,string2,...,stringX)
charAt()	Returns the character at a specified position (this case index position)	char = myStringObject.charAt(index)
charCodeAt()	Returns the code of a character specified by its position in a string	char_code = my_string.charCodeAt(char_position)
indexOf()	Returns the position of the first occurrence of a specified string value in a string or '-1' if the 'searchValue' is not found. The 'searchValue' can be a character or a substring. searchValue - Required. Specifies a string value to search for fromIndex - Optional. Specifies where to start the search	integerValue = myStringObject.indexOf(searchValue,[fromIndex])
lastIndexOf()	Returns the position of the last occurrence of a specified string value, searching backwards from the specified position in a string. searchValue - Required. Specifies a string value to search for fromIndex - Optional. Specifies where to start the search. Starting backwards in the string	integerValue = myStringObject.lastIndexOf(searchValue,[fromIndex])
replace()	Replace the first occurence of 'findString' substring of myStringObject with 'newString' and return the modified 'myStringObject' on whitch the methods was invoked. If the 'findString' is not a substring, the returned result is the original 'myStringObject'. The 'replace()' method also works with regular expressions: see the RegExp Object paragraph below	resultString = myStringObject.replace(findString, newString) Example: "12345".replace("234","abc") = "1abc5"
split()	The method splits myStringObject into a series of substrings depending on delimiterString and max_substrings parameters. The method returns an array of the resulting substrings. The 'delimiterString' parameter is a substring that is used to determine where to split the string, and 'max_substrings' is an integer value that specifies the maximum number of resulting substrings. The 'split()' method also works with regular expressions: see the RegExp Object paragraph below	resultString = myStringObject.split(delimiterString, [max_substrings]) Example: myString = "1:John"; var result1=myString.split(""); result1: ["1", ":", "J", "o", "h", "n"] var result2=myString.split("o",1); result2: ["1:J"] var result3=myString.split("oh",5); result3: ["1:J", "n"]
substr()	Extracts a specified number of characters in a string, from a start index. If the length parameter is omitted, then extract to the end of the string. See also 'substring()'	resultString = myStringObject.substr(start,[length]) Example: "12345".substr(1,3)= "234" "12345".substr(1) = "2345"
substring()	Extracts a substring specified by first and last character position. If the last character position is omitted, then extract to the end of the string. See also 'substr()'	resultString = myStringObject.substring(start, end) Note: the resultString's first charater is myStringObject(start), the last character is myStringObject(end-1) Examples: "12345".substring(1,4) = "234" "12345".substring(1) = "2345"
toLowerCase()	Returns a string based on 'myStringObject' in lowercase letters	lowerCaseString = myStringObject.toLowerCase()
toUpperCase()	Returns a string based on 'myStringObject' in uppercase letters	upperCaseString = myStringObject.toUpperCase()
String.fromCharCode()	Returns a string consisting of one character with a specified code	my_char = String.fromCharCode(my_char_code)

Other methods :

slice()
substring()

RegExp object
The RegExp Object is the JavaScript representation for regular expressions, and it can be used both in conjunction with some of the String Object methods, as well as through its own set of inbuilt methods.

Creating a RegExp Object
var regexpObject = new RegExp("pattern", "modifiers");
- the "pattern" string represents the regular expression pattern string
- the "modifiers" string can contain 'g' signifying "global" (as opposed to first occurrence only) when performing string-replacement operations, and/or 'i' signifying "ignore case" when performing various string search/replace operations
RegExp literals
The RegExp literals are a shorthand syntax for regular expressions that is mostly be used in conjunction with the String Object methods in order to avoid having to create a separate RegExp Object:
var regExp = /pattern/modifiers

examples:
"abcABCabc".replace(/a/, "x") will return "xbcABCabc"
"abcABCabc".replace(/a/gi, "x") will return "xbcxBCxbc"

String Methods that can use RegExp arguments

Method	Description	Syntax & Examples
match()	Returns an Array with the occurrence(s) of a RegExp inside a string. If no substring can be extracted then return null: if the RegExp object has been created with the "g" modifier, then the result Array will contain all the occurrences, else, the result Array will have only one element containing the first RegExp occurrence.	r = new RegExp("a.c","i"); s = "1ABC2abc".match(r) result: s will be ["ABC"] r = new RegExp("a.c","gi"); s = "1ABC2abc".match(r) result: s will be ["ABC"], ["abc"]
search()	Return the index of the first occurrence of a RegExp inside a string, or -1 if not found. Caution: while the 'search()' method is similar to the String's 'indexOf()' method, 'search()' only works with regular expressions, while the 'indexOf()' method does not accept a RegExp argument!	index = "1aBc2".search(/A.C/i) result: index = 1 index = "1aBc2".search("a.c") result: index = 1
replace()	This is the String object's 'replace()' method, and it accepts a RegExp as parameter.	r="aBcAbC".replace(/a/,"x") result: r="xBcAbC" r="aBcAbC".replace(/A/,"x") result: r="aBcxbc" r="aBcAbC".replace(/a/gi,"x") result: r="xBcxbC"
split()	This is the String object's 'split()' method, and it accepts a RegExp as parameter. Note: the original string will be split at each RegExp match, irrespective of whether the RegExp has been created as global (i.e. with the 'g' parameter) or not; however, the ignore case parameter 'i' will still be interpreted in the normal way	r = "just/threeXwords".split(/[\/x]/i) result: r=["just","three","words"]

Boolean object
The Boolean object is a wrapper object that holds a primitive boolean value, as well as provides a method for converting the value to a string. A primitive boolean can have only one of two states: true or false. Internally, JavaScript uses the number 1 to represent true and 0 to represent false, but provides the toString() method to return the strings "true" and "false".

Creating a Boolean object

 var booleanObject = new Boolean();

Note: If the Boolean object has no initial value or if it is 0, -0, null, "", false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string "false")

Example :

  var b1=new Boolean(0);        // 0 is boolean false
  var b2=new Boolean(1);        // 1 is boolean true
  var b3=new Boolean("");       // An empty string is boolean false
  var b4=new Boolean(null);     // null is boolean false
  var b5=new Boolean(NaN);      // NaN is boolean false
  var b6=new Boolean("false");  // The string 'false' is boolean true

IMPORTANT: a boolean object and a boolean scalar are different data types:

 var booleanScalar = true;
 var booleanObject = new Boolean(false);
 var type1 = typeof(booleanScalar);  // type1 is the string: 'boolean'
 var type2 = typeof(booleanObject);  // type2 is the string: 'object'

Number object
A Number object can "hold" numeric value types. One can create a Number object by specifying a value in the parameter for the number constructor. This object has properties for numerical constants, such as maximum value, not-a-number(NaN), and infinity.

Creating a Number object
var numberObject = new Number(value);

IMPORTANT: a number object and a number scalar are different data types:

 var numberScalar = 123;
 var numberObject = new Number(456);
 var type1 = typeof(numberScalar);  // type1 is the string: 'number'
 var type2 = typeof(numberObject);  // type2 is the string: 'object'

Properties

Properties (Constants)	Description
MAX_VALUE	The largest representable number
MIN_VALUE	The smallest representable number
NaN	Representing invalid numeric values ('not a number')
NEGATIVE_INFINITY	Special positive infinite value; returned on overflow(it is returned when a calculation returns a negative number greater than the largest negative number in JavaScript)
POSITIVE_INFINITY	Special negative infinite value; returned on overflow(It is returned when a calculation returns a positive number greater than the largest number in JavaScript)

Example 1 :

 var month = 13;
 if (month < 1 || month > 12) {
    month = Number.NaN;    // month will be set as "not a number"
    month = month - 3;     // no effect on month
    document.write(month); // the output is NaN
 }

 // Note:
 // to test whether a numeric value is NaN or a good numeric value, use the isNaN() function

Exemple 2 :

 // If the result is less than or equal to MAX_VALUE,
 // the func1() function is called; otherwise, the func2() function is called.
 if (num1 * num2 <= Number.MAX_VALUE)
         function1();
 else
         function2();

Methods

Method	Description	Syntax
toExponential()	A string representation of number, in exponential notation, with one digit before the decimal place and aNumber digits after the decimal place	myNumber.toExponential(aNumber) Example: var n = 12345.6789; n.toExponential(5);// Returns 1.23457e+4
toFixed()	A string representation of number that does not use exponential notation and has exactly aNumber digits after the decimal place.	myNumber.toFixed(aNumber) Example: var n = 12345.6789; n.toFixed(1);// Returns 12345.7: note rounding
toPrecision()	A string representation of number that contains aNumber significant digits	myNumber.toPrecision(aNumber) Example var n = 12345.6789; n.toPrecision(5);// Returns 12346: note rounding
toString()	A string representation of the number. - base : between 2 and 36, represent the base in which the number should be represented. If omitted, base 10 is used	myNumber.toString(base)

Function object
The built-in Function object specifies a string of JavaScript code to be compiled as a function. Function objects are evaluated each time they are used, and the strings involved in the function constructor deefinition can be both constants or variables:

Creating a Function Object

 functionObjectName = new Function ([arg1, arg2, ... argn], functionBody);
 arg1, arg2, ... argn : are strings representing the names of the function arguments
functionBody : is a string specifying the JavaScript code to be compiled as function.

Example1: define a function that prints the value of its argument in an alert box, using constant strings

// the following line defines the function: myFuncObject(argument) { alert(argument) }
var myFuncObject = new Function("argument", "alert(argument)");
 // the following line invokes myFuncObject and will display an alert box with the text: ABC 123
myFuncObject("ABC 123");

Example2: re-write of 'Example1' above (that defines a function that prints the value of its argument in an alert box), this time using string variables for both the function argument name and the function's JavaScript body

var funcArgumentName = "argument";
var funcBody = "alert(argument)";
var myFuncObject = new Function(funcArgumentName, funcBody);
myFuncObject("ABC 123"); // this will display an alert box with the text: ABC 123

note: the Function Object essentially allows the execution of dynamic code, i.e. code that is not known when the program execution starts (e.g. the user may be prompted to enter a JavaScript program, and by using the Function Object said code can be executed).

Manipulating Objects

Operators

Associativity	Operator	Operand type(s)	Operation performed
L	+	String object only	String concatenation
L	==	object, object	Test for equality
L	!=	object, object	Test for inequality
L	===	object, object	Test for identity
L	!==	object, object	Test for non-identity
R	?:	object, any, any	Conditional operator applied to an object: selection depends on whether the object exists or is true, vs it does not exist, or is false, or is empty String object
R	=	object, object	Assignement
L	.	object, identifier	Property access
L	[ ]	array, integer	Array index
L	[ ]	object, string	String index
R	new	constructor call	Creates new object
R	delete	lvalue	Undefine a property (unary)
R	typeof	object	Return the object data type as a string value
L	instanceof	object, objectType	Check object type
L	in	string, object	Returns true if a property name string is a property of a specified object

Details

the instanceof operator
The instanceof operator expects a lefthand operand that is an object and a righthand operand that is the name of a class of objects. The operator evaluates to true if the lefthand object is an instance of the righthand class and evaluates to false otherwise.

 var d = new Date();   // Create a new object with the Date(  ) constructor
 d instanceof Date;    // Evaluates to true; d was created with Date(  )
 d instanceof Object;  // Evaluates to true; all objects are instances of Object
 d instanceof Number;  // Evaluates to false; d is not a Number object

the typeof operator
The typeof operator returns "number", "string", or "boolean" if its operand is a number, string, or boolean value, and "object" for all the inbuilt JavaScript objects (including Arrays).

 //Example 1 :
  var vString = "some string";
  if (typeof vString == "string") { alert("is a string");}
  else { alert("is not a string");}

 // The output will be:  is a string

 // Example 2 :
  var obj = {x:1, y:2};  // Define a variable; initialize it to an object
  alert(typeof obj.x); // Property exists; returns "number"
  alert(typeof obj.z); // Property does not exist; returns "undefined"

the delete operator
The delete operator is a unary operator that attempts to delete an object, object property, array element, or variable specified as its operand. The built-in objects' properties and user-defined variables declared with 'var' keyword cannot be deleted (see also the Objects sections below). If the 'delete' operator succeeds in deleting its target it returns 'tue', else it returns 'false'.

 var myObject = {x: 1, y: 2};
 delete myObject.x; // delete one of the object properties; returns true
 delete myObject;   // cannot delete a declared variable; returns false

 z = 1;             // declare a variable without var keyword
 delete z;          // Can delete this kind of variable; returns true

Statements

The 'for ... in' statement
The 'for (iterationVariable in objectToIterate) codeBlock' statement provides a way to loop through the properties of an object (including an Array object). The codeBock body of the for/in loop is executed once for each property of object, and each time before the body of the loop is executed the name of one of the successive object's properties is assigned to iterationVariable as a string:

Syntax and Example

 // Syntax :
 for (iterator_variable in object){
   statements
 }

 // Example: 
 // assume 'personObject' is an Object whose properties contain various data about a given person, then:
 for (property in personObject) {
   alert("property name: " + property + ";property value: " + personObject[property]);
 }
 // the above loop will successively display pop-up message boxes that will display something like this:
 //    property name: name; property value: John
 //    property name: age; property value: 20
 //    [etc]

The 'with' statement
The 'with (object) codeBlock' statement provides a simple way of accesing properties and methods of an object in the codeBlock body of the 'with' statement, without having to use the 'objectName.' prefix when accessing the object methods and/or properties.

Syntax and example

  //Syntax:
  with (object) {
    statements; // properties and methods used without the 'objectName.' prefix
  }

  //Example:
  var myObject = new Object();
  with (myObject) {
    property1 = value1;
    property2 = value2;
  }

  //Instead of :
  myObject.property1 = value1;
  myObject.property2 = value2;

Note: the 'with(object)' syntax has performace penalties because it essentially introduces all the property and method names of 'object' in the current namespace, and thus it makes the process of finding identifiers by the JavaScript interpreter more resource-hugry. In conclusion, the 'with(object)' construct should only be used outside loops, or in loops that are executed a relatively small number of iterations as compared to rest of the program code.

Timer functions

Apart from the "traditional" in-order execution of statements, JavaScript provides several dedicated functions for executing a specified function periodically, or at a designated time (specified as a delay). These functions are not part of the "core" JavaScript language, but rather they are implemented by the browser in which a JavaScript program is running. The details on these functions are presented in the 'HTML Integration' chapter, the 'Timer methods' paragraph later in this document.

HTML Integration

JavaScript by itself is no more then a programming language; in order to make use of it for creating dynamic web pages (i.e. pages in which the content changes depeding on the user interaction), a number of mechanisms are provided for integrating JavaScript programs with the contents of an HTML document. The main "integration directions" are the following:

allow a JavaScript program to read and/or change various properties of the display objects associated with the HTML elements in a document (e.g. read which item is selected in a drop-down list, read and/or change the text in a 'textarea' input box, etc)
intercept user actions and perform specific functions depending on what action the user has performed (e.g. if a user clicks on an image the displayed image can change to a new image, if the user clicks a specific button an alter pop-up window can be displayed, etc)

The following sections present how a JavaScript program is embedded inside an HTML document, how a JavaScript program can read the properties, and change the appearence, of the display objects associated with the HTML elements in a document, and how an event that occurs in conjunction with a specific display object (e.g. the user pressing a specific button) can be "intercepted" and "treated" by a JavaScript function.

Embedding JavaScript in HTML
JavaScript code is typically embedded into an HTML document using the SCRIPT tag. A JS code embedded can contain variable declarations, JS statements and JS functions.
The ways to embed JavaScript in HTML are described below :

Using <SCRIPT> tag

Scripts in the HEAD section :
The JavaScript code contained between HEAD tags is loaded before the BODY content into the browser. The variables and functions defined inside HEAD JavaScript code are globals. Variables and functions are visible anywhere in HEAD JavaScript code and BODY JavaScript code
From HEAD JavaScript code, the JavaScript 'standalone' statements can not have access to any BODY element because the BODY content wasn't loaded yet. The 'standalone' statements are executed before an HTML document loads into the browser, and the only one operation possible with 'standalone' statements is writting into HTML document. Only via functions from HEAD JavaScript code, the BODY elements accessing/manipulating is possible when the functions are called as 'event handler functions'.

 <html>
 <head>
   <script>
   ... // javascript code
   </script>
 </head>
 <body>
  ... // HTML document content
 </body>
 </html>

Scripts in the body section :
The browser parses and renders the HTML BODY content before meet a BODY JavaScript code. After the BODY JavaScript code is treated, the browser continue to parse and render the HTML BODY content positioned after the script section. The 'standalone' statements from BODY JavaScript code can access/manipulate only HTML elements between <BODY> tag and script section. The HTML elements between the end of script section and </BODY> tag can be accessed/manipulated only via JS functions from script section when they are called as 'event handler functions'. All the content of the script code is visible inside the script code functions and in other scripts positioned after in the HTML BODY.

 <html>
 <head> </head>
 <body>
  ... // HTML document content
   <script>
   ... // javascript code
   </script>
  ... // HTML document content
 </body>
 </html>

Using <SCRIPT> 's SRC attribute for External JavaScript :
Used for sharing functions to many different pages. External JavaScript files cannot contain any HTML tags; they must contain only JavaScript statements and function definitions. Embedding an external JS file inside the HEAD section have the same effect with writting the content of the external JS file between script tags from HEAD section.
- Note: do not use any statements between starting and ending 'SCRIPT' tags that embeds an external JS file. The call of a function from an external JS file must happening after embedding the file and between 'SCRIPT' tags, others whose embedded the JS file.
<head>
<script src="javascriptFileName.js"></script>
</head>

Scripts within HTML tags:

Using 'href' attribute :
The JavaScript code attached to the 'href' attribute is executed as the browser behavior for the 'href' attribute of the current anchor element.

 <head>
 <script>
 function myFunction() {
   ... // javascript code
 }
 </script>
 <head>
 <body>
   <a href="javascript:myFunction()">Click on link</a>

Scripts assigned to the event handler :
The JavaScript code attached to an event handler is executed when the event appear.

 // Example 1:
 <input type="button" onClick="myFunction()">

 //Example 2:
 <input type="button" onClick="var rand = Math.random();document.write('the random number is: '+rand);">

JavaScript Runtime Environment
As it was described in the 'What is JavaScript' introductory section, a JavaScript program is usually part of an HTML document, which is itself displayed inside a browser window.

the 'window' object:
A JavaScript-accesible 'window' object is made available as a reference-type object that represents the window in which the script runs, and thus allows a JavaScript program to manipulate it's "container window" in certain ways by means of the 'window' object's properties and methods.
- The contents of the window, as well as various properties it has, are accessible via specific properties and/or methods of the 'window' object. For example, the syntax 'window.screen' represents a read-only property containing information about the computer screen on which the window is displayed, and 'window.screen.height' represents the height in pixels of the screen; the 'window' object's properties and methods are extensively described in the Introduction to the HTML DOM document, the 'Window Object' chapter.
- All the user-defined global variables that are used in a JavaScript program that runs inside a browser window are in fact properties of the 'window' object; thus, any reference made from a JavaScript program that runs inside a browser window to a global variable e.g. 'myGlobalVariable' is equivalent to the syntax 'window.myGlobalVariable' (this has been previously mentioned in the 'Global variables' and 'Dynamically-named global variables' chapters)
the 'document' object:
A JavaScript-accessible 'document' object is made available as a reference-type object that represents the contents of the HTML document that embeds the JavaScript code, and thus allows the JavaScript porgram to access the contents of the document.
- The 'document' object is available in JavaScript as a property of the 'window' object, i.e. the way to access the 'document' object from JavaScript is: window.document
- The contents of the document, as well as various properties it has, are accessible via specific properties and/or methods of the 'document' object. For example, the syntax 'window.document.clientHeight' specifies a read-only document property representing the height in pixels of the document area inside the browser window (i.e. without taking into account the browser toolbars, scrollbars, etc); the 'document' object's properties and methods are extensively described in the Introduction to the HTML DOM document, the 'Document Object' chapter.

Accessing Display Objects
There are two ways in which a JavaScript program can interact with the display objects represented (by HTML elements) in an HTML document: a legacy JavaScript/HTML way, and a modern JavaScript/DOM way.

Legacy JavaScript/HTML:
The legacy JavaScript/HTML form of interaction is based on several predefined HTML interface objects that are accessible to the JavaScript code that is embedded inside the HTML document.

the 'forms' object:
The 'forms' object represents the collection of all the forms inside the document in which the JavaScript program is embedded, and it allows JavaScript-based processing of the interactive elements contained inside an HTML document.
Important: in order to be able to access the interactive elements from an HTML document using the 'forms' object-based method presented herein, said interactive elements must be placed inside forms. Although an interactive element may be placed outside a form conatainer, it will not be accessible form JavaScript using the method presented herein.

The 'forms' object is made available to JavaScript as a property of the 'document' object, i.e. the way to access the 'forms' object is: window.document.forms
Each of the individual forms inside an HTML document is accessible via the form's name:
- Given a form named 'FormName' (i.e. with the attached attribute: name='FormName'), the following syntax represents a reference to the form named 'FormName': window.document.forms["FormName"]
- Note: if a form does not have an associated name then it cannot be accessed using the method described herein.
A reference to the collection of all the objects contained inside a form can be obtained via the 'elements' property of the 'form' object. The complete syntax to access the collection of elemnts inside a form named 'FormName' is: window.document.forms["FormName"].elements
- Given a form named 'FormName' (i.e. with the attached attribute: name=FormName), and a form element named 'ElementName', the following syntax represents a reference to the form element 'ElementName': window.document.forms["FormName"].elements["ElementName"]
- Note: if a form element does not have an associated name then it cannot be accessed using the method described herein.

Once an object contained inside a form has been accessed from JavaScript (using the syntax described above, i.e.: window.document.forms["FormName"].elements["ElementName"]), then the properties of that object can be read (and in many cases they can also be changed) from JavaScript using the syntax: window.document.forms["FormName"].elements["ElementName"].PropertyName

Example: reading, displaying, and reseting the selection of a drop-down list

 <html>
    <head>
       <script>
       // function is launched when the 'OK' button is clicked
       function JSOperation() {
          // display the selected value
          switch(window.document.forms['FRM'].elements['SEL'].value) {
          case '1':
             alert('first value was selected');
             break;
          case '2':
             alert('second value was selected');
             break;
          case '3':
             alert('third value was selected');
             break;
          }
          // reset the selector
          window.document.forms['FRM'].elements['SEL'].value = '1'
       }
       </script>
    </head>

    <body>
       <form name='FRM'>
          <select name='SEL'>
             <option value='1' selected>first value</option>
             <option value='2'>second value</option>
             <option value='3'>third value</option>
          </select>
          <input type='button' value='ok' onClick='JSOperation()'/>
       </form>
    </body>
 </html>

Note: the syntax: <input type='button' onClick='JSOperation()'> is used to trigger the execution of the function 'JSOperation()' when the button is clicked; details on this topic are presented later in this document, in the 'events' section.

the 'images' object:
The 'images' object represents the collection of all the iamges inside the document in which the JavaScript program is embedded, and it allows some basic changes to be made to the appearence of the images using JavaScript. Specifically, the defining image attribute "src" (i.e. what image is displayed) can be changed from JavaScript.

The 'images' object is made available to JavaScript as a property of the 'document' object, i.e. the way to access the 'images' object is: window.document.images
Each of the individual images inside an HTML document is accessible via the image's name:
- Given an image named 'ImageName' (i.e. with the attached attribute: name='ImageName'), the following syntax represents a reference to the image named 'ImageName': window.document.images["ImageName"]
- Note: if an image does not have an associated name then it cannot be accessed using the method described herein.

Once an image has been accessed from JavaScript (using the syntax described above, i.e.: window.document.images["ImageName"]), then some of the properties of that image (e.g. the image 'src' attribute, the 'title' attribute, etc) can be read and changed from JavaScript using the syntax: window.document.images["ImageName"].PropertyName

Example: changing an image from JavaScript

 <html>
    <head>
       <script>
       function changeImage(name) {
          switch (name) {
          case "google":
             window.document.images["my_icon"].src="http://www.google.com/favicon.ico";
             break;
          case "yahoo":
             window.document.images["my_icon"].src="http://www.yahoo.com/favicon.ico";
             break;
          }
       }
       </script>
    </head>

    <body>
       <img src='http://www.mozilla.org/favicon.ico' name='my_icon'>
       <input type='button' value='google' onClick='changeImage("google")'/>
       <input type='button' value='yahoo' onClick='changeImage("yahoo")'/>
    </body>
 </html>

Note: the syntax: <input type='button' onClick='changeImage(arg)'> is used to trigger the execution of the function 'changeImage()' when the button is clicked; details on this topic are presented later in this document, in the 'events' section.

Modern JavaScript/DOM:
The JavaScript/DOM form of interaction is a complete re-writing of the legacy JavaScript/HTML interaction, with the aim of offering very fine grain access to all the display objects and their properties (e.g. the background color of text paragraphs, the border width of tables, etc) from JavaScript. This form of interaction is presented in the Introduction to the HTML DOM document.

Simple User Interface functions
Several simple, text-based user interface pop-up windows can be activated, and used, from JavaScript using the methods of the 'window' object described below. Each of these methods halt the program execution until the pop-up window gets closed.

window.alert(string_value_to_display):
displays text in a pop-up window. The pop-up window contains an 'OK' button that closes the pop-up, and the method does not return any value.

 window.alert ("This is a message that is displayed in a pop-up window");
 var myText = "This is a string";
 var myNumber = 123.456;
 window.alert (myText);   // displays a pop-up window containing: This is a string
 window.alert(myNumber);  // displays a pop-up window containing: 123.456

window.confirm (string_value_to_display):
displays a text in a pop-up window that contains a 'OK' and a "Cancel' button, and returns 'true' if the 'OK' button was pressed, or 'false' if the 'Cancel' button was pressed:

 var confirmation = window.confirm (message);
 if (confirmation == true) { code_for_user_pressing_OK }
 else { code_for_user_pressing_Cancel };

window.prompt(string_value_to_display, optional_initial_string_in_the_entry_field):
displays a text in a pop-up window featured with a 'OK' button, a 'Cancel' button, and a text-entry field. An initial text my be optionally placed in the entry field. The user can enter (or modify) the text entry field. If the user presses 'OK' then the function returns the string enetered in the text-entry field (as a string value); if 'Cancel' is pressed the function returns 'null'

 var userInput = window.prompt("Input some text here", "this is an initial text displayed in the entry field");
 if (userInput == null) { code_for_user_pressing_Cancel }
 else  { code_for_user_pressing_OK }  // the 'userInput' variable holds the text entered by the user

Note: a JavaScript runtime environemnt (e.g. a console interpreter) may, or may not, provide these functions, depending on wether or not it implements a "virtual" 'window' object, which in turn is the object that must ultimately provide these methods. However, if a JavaScript program runs as part of an HTML document inside a browser window, then the 'window' object will always be available (and it will represent the browser window itself) and these methods will be available.

Events
An event is an action that occurs usually as a result of somthing the user/browser does. For example, clicking a button in a webpage, moving the mouse over a hyperlink, are events.
Actions that produce events can be of two categories:

user-generated actions : are those caused by mouse and keyboard activity
system-generated actions : when something significant occurs in the browser, such as the document completing its loading into the browser

Event handlers
If an event applies to an HTML tag (e.g. the mouse pointer is braught over an 'image' element, or the text contained inside a 'paragraph' element is clicked, or a button is clicked, etc), then an event handler code (a.k.a. event handler) can be defined for "capturing the event". The event handler code is a sequence of one or more JavaScript instructions, possibly including function calls, that receives control every time the corresponding event occurs.

The name of an event handler is the name of the event, preceded by "on" (e.g. the event handler name for the click event is 'onClick'). The list of possible events (e.g. 'click', 'mouseover', etc) is subject to a standardization process at the time of writing this document, and thus the event list contains some differences among various browser implementation (e.g. MSIE events and Firefox events are generally very similar, but differences do exist between the two browsers).

Attaching an event handler for a specific event to an HTML element:

  Syntax :
  <TAG [attributes] eventHandlerName="JavaScript Code"> // where TAG is an HTML tag

  Example: attaching an 'onClick' event handler to an 'image' element
  <html>
  <head>
  <script>
    function myFunction() {
      ... javascript code
    }
  </script>
  </head>
  <body>
  // attach a call to 'myFunction()' as event handler function to click event
    <img src="my_image.gif" onClick="myFunction();">
    ... HTML code

After attaching an event handler to an HTML element, the execution of the JavaScript event handler code will be triggered evey time the specified event occurs in conjunction with the corresponding HTML element.

Note: an event can trigger the execution of more than one event handler via the mechanism of "event bubbling" if multiple event handlers are defined for elements that are contained in one another (in the HTML containment hierarchy). Details on how multiple event handlers may capture an event are discussed in the 'event bubbling' section later in this document.

The 'this' keyword
As it was described in the Introduction to HTML, the 'browser objects' section, for each HTML element present in an HTML document the browser creates an internal repesentation (known as a 'browser object') that is accessible as an object from JavaScript, and the various attributes of the respective HTML element get "reflected" in the corresponding object as object properties. If an event handler uses the keyword 'this', then this keyword will represent the browser object associated with the HTML element where the event has occured.

  //Example 1:
  <html>
  <head>
  <script>
    function myFunction(originator) {
      alert(originator.src);  // the 'src' property of 'originator' is the
                              // "reflection" of the 'src' attribute
                              // corresponding to the HTML element that
                              // invoked the function with 'this'
                              // thus, the alert box will print: an_image.gif
    }
  </script>
  </head>
  <body>
  // attach myFunction(originator) as event handler function to click event
    <img src="an_image.gif" onClick="myFunction(this)">
    ... HTML code


  //Example 2: same functionality as above, but written in a simplified way
  <html>
  <body>
    <img src="an_image.gif" onClick="alert(this.src)">
    ... HTML code

Event handlers return value
As mentioned above, an event handler contains a succession of JavaScript instructions. The execution of an event handler may terminate via an explicit 'return true/false' statement, or without an explicit 'return' statement in which case it is considered to return 'true'. The return value of an event handler is important for defining how the browser reacts to the event if the element that generated the event defines some default behavior for that event, e.g. a 'link' element (<a href="myURL">) defines a default behavior for the 'onClick' event such that it opens the URL specified in the 'href' property when a click on the link occurs.

if an event handler returns 'false' then the default browser behavior is inhibited, and only the event handler itself determines the action performed by the browser in response to the event.

  // Example: 
  // the browser will execute myFunction, but will NOT open the link when it is clicked
  <html>
  <head>
  <script>
    function myFunction() {
       alert('Event handler executed');
    }
  </script>
  </head>
  <body>
  // attach myFunction() as event handler and INHIBIT the default behavior for click
    <a href="page2.html" onClick="myFunction(); return false">page2</a>
    ... HTML code

if an event handler returns 'true' then the browser first executes all of the actions specified by the event handler code, and then it also executes the default action (if any) that is associated with the event

  // Example:
  // the browser WILL open the link when it is clicked, AFTER executing myFunction
  <html>
  <head>
  <script>
    function myFunction() {
       alert('Event handler executed');
    }
  </script>
  </head>
  <body>
  // attach myFunction() as event handler and ALLOW the default behavior for click
    <a href="page2.html" onClick="myFunction(); return true">page2</a>
    ... HTML code

Note: the occurence of an event can trigger the execution of more than one event handler via the mechanism of "event bubbling", in which case all the event handlers are executed first, and the default browser action is preformed last. Details on how multiple event handlers may capture an event, and on the way in which the individual return values influence the default browser behavior, are discussed in the 'event bubbling' section later in this document.

The following event handlers support a return 'false' value to prevent the default action (note that for a given event name 'event', the event handler name 'onEvent' can also be written as 'onevent', i.e. without capitalization):

onClick, onKeydown, onKeypress,
onMousedown, onMouseup,
onSubmit, onReset

Event handler list
The following table presents the list of DOM's event handlers, and for each event handler the list of the browser object types for which the event handler is applicable.
The way to add an event handler (i.e. the JavaScript code) to a certain browser object is to add the event handler as an attribute to the corresponding HTML element.

Syntax:

 <TAG [attributes] eventHandlerName="JavaScript Code">

Example: display an alert pop-up message when an image is double-clicked

 <img src="myIcon.gif" onDoubleclick="javascript:alert('The image myIcon.gif has been double-clicked');" />

Event handler	Applies to (Browser object types)	Occurs when
onAbort	image	Occurs when the loading of an image process is aborted(for example when the user clicks on a link or on the 'Stop' button).
onFocus	body, frameset, anchor, area, input, select, textarea, button	Occurs when an display object receives focus. It may be used with the same browser objects as onBlur event handler.
onBlur	body, frameset, anchor, area, input, select, textarea, button	Occurs when the focus to the one of display object listed before is removed.
onResize	Most of the elements that have a specifieble size (i.e. for which 'height' and 'width' can be defined)	Occurs when a resizable element changes its size.
onClick	the most of browser object types	Occurs when the mouse device button is clicked over an display object.
onChange	body, input, select, textarea	Occurs when a display object of 'form control' type loses the focus and its value has been modified since gaining focus.
onDblclick	the most of browser object types	Occurs when the mouse device button is double-clicked over an display object.
onKeydown	the most of browser object types	Occurs when a keyboard key is pressed down over an display object.
onKeypress	the most of browser object types	Occurs when a keyboard key is pressed and released over an display object.
onKeyup	the most of browser object types	Occurs when a keyboard key is released over an display object.
onLoad	body, frameset, image	Occurs when the browser finishes loading an image, an HTML document, or all the frames within a frameset.
onUnload	body, frameset	Occurs when the browser removes an HTML document view or frame from a browser window.
onMouseout	the most of browser object types	Occurs when the mouse device is moved away from an display object.
onMouseover	the most of browser object types	Occurs when the mouse device is moved over an display object.
onMousedown	the most of browser object types	Occurs when the mouse device button is pressed over an display object.
onMouseup	the most of browser object types	Occurs when the mouse device button is released over an display object.
onMousemove	the most of browser object types	Occurs when the mouse device is moved while it is over an display object.
onReset	only to the form object	Occurs when a form display object is reseted(when the user clicks the 'Reset' button).
onScroll	any scrollable container e.g. window, iframe Note: by using CSS one can create other scrollable containers apart from iframes	Occurs when the documentin a container element is scrolled. Note: this event cannot be attached directly in HTML to a window/frame; instead, a javascript function must explicitly attach it via e.g.: window.onScroll=scrollHandlerFunctionName();
onSelect	input-text, input-password, textarea	Occurs when the user selects some text in a text field display object.
onSubmit	only to the form object	Occurs when a form display object is submitted(when the user clicks the 'Submit' button).

Some of the events described above (e.g. onFocus, onBlur, onResize) can also be attached to a 'window' or 'frame' object:

 <script>
     // eventHandlerFunction is a reference to the function that treats the event occurrence
     windowObjectReference.eventHandlerName = "eventHandlerCode";
 </script>

Event Object
An Event object is created automatically by JavaScript on the occurrence of an event. The Event object has various properties that provide information about the event such as event type, the position of the cursor at the time the event occurred , etc.
The Event object model is implemented differently in IE and NS/Firefox :

Event object implementation in Mozilla Firefox
In Firefox/Netscape the event object is accessed by passing an event parameter(using the predefined event object parameter) into the event handler function.

  <head>
  <script>
    var bodyParameter = "At document loading occurs ";
    function showEvent(e, param) {
      alert(param + e.type + " type event");
    }
  </script>
  </head>
  <body onLoad = "showEvent(event, bodyParameter);">
    ... HTML code

  // the output will be an alert box with the follow text :
  //   At document loading occurs load type event

Event object implementation in Internet Explorer IE4 - IE6
The event model supported by Internet Explorer 4, 5, 5.5, and 6 is an intermediate model, halfway between the original Level 0 model and the standard DOM Level 2 model. Instead of being passed to event handler functions, the 'event' object is made available as a property of the 'window' object: 'window.event'.

  // Display mouse coordinates as it moves in the browser status bar

  // for Internet Explorer browser
  <script>
  function displayCoordinateIE() {
    window.status=event.clientX+" : "+event.clientY;
  }
  </script>

  // for Firefox browser
  <script>
  function displayCoordinateFF(e){
    window.status=e.clientX+" : "+e.clientY;
  }
  </script>

Event object properties

NS/Firefox Property	Description	IE Equivalent
altKey, ctrlKey, shiftKey	Boolean properties that indicate whether the Alt, Ctrl, Meta, and Shift keys were pressed at time of the event.	Same
button	An integer indicating which mouse button was pressed or released, 0 = left, 2 = right, 1 = middle.	Same, but mouse events only work for left button.
clientX, clientY	Returns the mouse coordinates at the time of the event relative to upper-left corner of the window.	Same
screenX, screenY	Returns the coordinates of the mouse relative to the screen when the event fired.	Same
type	A string indicating the type of event, such as "mouseover", "click", etc.	Same
target	Returns a reference to the browser object that invoked the event.	srcElement
which	Property indicating the Unicode for the key pressed, including the modifier keys (e.g. 'shift')	keyCode

Event bubbling
If an event occurs in conjunction with an HTML element that is contained inside another element (in the HTML containment hierarchy), then that event will trigger all the event handlers that are set for both the HTML element where the event occured, and also for all the HTML elements that contain the element that triggered the event: this process is referred to as the bubbling stage of the event. The order in which the event handlers are trigered is staring from HTML element on which the event occured, and incrementally continues up on the containment hierarchy. The 'event' object is always generated by the element which generated the event, while the 'this' pointer (passed from HTML) references the object to which each event handler is associated.

The following two examples illustrate how an event "bubbles" up the containment hierarchy, and what the 'event' object and the 'this' pointer are in such scenarios:

Note: the examples below follow the standard event model as implemented by Firefox but not by MSIE: the 'event' object is directly available to the event handler code (instead of being a property of 'window' as in MSIE's implementation), and the object that triggered the event is available through the 'event.target' property (instead of the MSIE 'srcElement' property); thus, the code below will not work as-is on MSIE (however, the required modifications are related only to the way in which the 'event' object is implemented in MSIE)

Example 1: two HTML elements with one contained in the other, and each having its own event handler

<html>
<head>
   <script>
      function details(e,x) {
         alert("event originator is: "+e.target.id);
         alert("the 'this' pointer passed from HTML is: "+x.id);
      }
   </script>
</head>

<body>
   <p id="paragraph" onClick="details(event,this)">
      [ container paragraph
         <img id ="image" src="img.gif" onClick="details(event,this)"/>
      ]
   </p>
</body>
</html>

if clicking on the image:
- the event will be generated by the 'image' element, and it will thus be captured by the 'image' element's event handler first, and then, because of the "event bubbling", by the 'paragraph' element's event handler:
- the 'event' object will be generated by the 'image' element, and thus the first alert message (i.e. the first 'alert' statement in the 'details()' function) will display: event originator is: image
  - in this case the 'this' pointer will represent the image element, such that the next alert message (i.e. the second 'alert' statement in the 'details()' function) will display: the 'this' pointer passed from HTML is: image
- next the event will be caught be the paragraph event handler (because of the "event bubbling"), but it's still the same 'event' object; thus, the next alert message (i.e. the first 'alert' statement in the 'details()' function) will display: event originator is: image
  - now that the event has been caught be the 'paragraph' element's event handler, the 'this' pointer will represent the paragraph element, such that the next alert message (i.e. the second 'alert' statement in the 'details()' function) will display: the 'this' pointer passed from HTML is: paragraph
if clicking on the paragraph text:
- the event will be generated by the 'paragraph' element, and it will thus be captured only by the 'paragraph' element's event handler:
- the 'event' object will be generated by the 'paragraph' element, and thus the first alert message (i.e. the first 'alert' statement in the 'details()' function) will display: event originator is: paragraph
  - in this case the 'this' pointer will represent the paragraph element, such that the next alert message (i.e. the second 'alert' statement in the 'details()' function) will display: the 'this' pointer passed from HTML is: paragraph

Example 2: two HTML elements with one contained in the other, but only the container element has an associated event handler

<html>
<head>
   <script>
      function details(e,x) {
         alert("event originator is: "+e.target.id);
         alert("the 'this' pointer passed from HTML is: "+x.id);
      }
   </script>
</head>

<body>
   <p id="paragraph" onClick="details(event,this)">
      [ container paragraph
         <img id ="image" src="img.gif"/>
      ]
   </p>
</body>
</html>

if clicking on the image:
- the event will be generated by the 'image' element, but will be captured by the container 'paragraph' element's event handler:
- the 'event' object will be generated by the 'image' element, and thus the first alert message (i.e. the first 'alert' statement in the 'details()' function) will display: event originator is: image
  - because the event is caught be the 'paragraph' element's event handler, the 'this' pointer will represent the paragraph element, such that the next alert message (i.e. the second 'alert' statement in the 'details()' function) will display: the 'this' pointer passed from HTML is: paragraph
if clicking on the paragraph text:
- the event will be generated by the 'paragraph' element, and it will be captured by the 'paragraph' element's event handler:
- the 'event' object will be generated by the 'paragraph' element, and thus the first alert message (i.e. the first 'alert' statement in the 'details()' function) will display: event originator is: paragraph
  - the 'this' pointer will represent the paragraph element, such that the next alert message (i.e. the second 'alert' statement in the 'details()' function) will display: the 'this' pointer passed from HTML is: paragraph

The effect of event handlers' return value in the event bubbling scenario
In the situation of multiple event handlers that are invoked in the bubbling phase of an event, the return value of the event individual handlers is interpreted as follows:

if the return value of the event handler attached to the event that triggered the event is 'false' then no default browser action is performed at the end of the event bubbling sequence.
if the return value of the event handler attached to the event that triggered the event is 'true' then:
- if exactly one of the elements through which the event "bubbles" has an associated default browser action, that that action is executed after all the event handlers have been executed
- if more than one of the elements through which the event "bubbles" have an associated default browser action, that the browser behavior at the end of processing all the evnt handlers is undefined.

Example with a paragraph of text that has an associated event handler, and a hyperlink contained inside the text paragrah that also has its own associated event handler (the code bwlow will run as-is only on standards-complian browser e.g. Firefox; it needs modification for MSIE to take into account the IE event model):

<html>
<head>
   <script>
      function details(x) {
         alert("executing event handler of element: "+x.id);
      }
   </script>
</head>

<body>
   <p id="paragraph"
      onClick="details(this);return TrueOrFalse">
      [ container paragraph
         <a id ="hyperlink"
            href="http://www.google.com"
            onClick="details(this); return returnValue">embedded hyperlink</a>
      ]
   </a>
</body>
</html>

In the example above the 'TrueOrFalse' variable can be any of 'true' or 'false', and:

if 'returnValue' is 'false' then a click on either the paragraph text or the embedded hyperlink will result in no default browser action at the end of the event processing sequence.
if 'returnValue' is 'true' then:
- a click on the embedded hyperlink will result the browser loading the google home page at the end of the event processing sequence.
- a click on the paragraph text will result in no default browser action at the end of the event processing sequence.

Timer methods
The 'window' object inside which a JavaScript program runs has a "hidden clock" object that can be used to schedule the execution of a JavaScript code sequence based on time intervals or delays. The scheduling mechanism relies on the following window object's methods:

window.setInterval( ) : Calls a function or expession repeatedly, with a fixed time delay between each call to that function/expressions; returns a string value. Note that other statements execution does not halt while the delay is in effect.

 // Syntax :

 intervalID = window.setInterval(functionRef, msecDelay [, "functionArg1,..., functionArgN");
 intervalID = window.setInterval("expr", msecDelay);

 // Returned value and parameters details :

intervalID : a unique interval ID can be passed to clearInterval( );
functionRef : the function name to be called repeatedly;
msecDelay : the time interval between two consecutive 'functionRef' calls;
functionArgX : an effective parameter for the 'functionRef' function;
expr : a string of code to be executed.

 // Example :

 function myFunction(myStringArgument, myDateArgument) { ... }
 intervalID = window.setInterval(myFunction, 1000, "a string", new Date());

window.clearInterval( ) : Stops the repeated execution of a function as it was programmed by setInterval(). The 'intervalID' is the ID of the specific interval to clear returned by a call to the setInterval( ) method.
// Syntax :

window.clearInterval(intervalID);

window.setTimeout( ) : Calls/evaluates a function/ or expression exactly one time, after the specified delay; returns a string value. The 'setTimeout()' method schedules the execution of some specified code, but it does not halt the "current" script execution, i.e. given a setTimeout( ) method somewhere inside a script, the succeeding statements in the script are executed immediately, and the expression/function in the setTimeout( ) method will be executed after the delay time. The setTimeout( ) parameters have same meaning as setInterval( ) parameters.

 // Syntax :

 timeoutID = window.setTimeout(functionRef, msecDelay [, "functionArg1,..., functionArgN");
 timeoutID = window.setTimeout("expr", msecDelay);

window.clearTimeout( ) : If a function/expression was programmed for execution/evaluation by setTimeout() but it was did not yet executed, this method cancels the programmed execution/evaluation of that function/expression. The 'timeoutID' is the ID of the timeout to clear returned by setTimeout( ).
// Syntax :

window.clearTimeout(timeoutID);

The 'this' reference in scheduled code execution:
It is important to understand that a piece of code that is scheduled for execution via one of the timer methods will run in the "global context", i.e. directly inside the 'window' object in which the JavaScript code is executed, and not in the "local context" where it has been scheduled. In particular, if a method of an object is scheduled for execution via a timer function, the scheduled method will not have access to the 'this' pointer of that object when it will be effectively executed.
This problem is illustrated in the example below, where a scheduled method of an object fails to access that object's 'flag' property using the 'this' reference (because the 'this' reference does not point to that object when the method is effectively run):

<html>
<head>
<script>

// an object constructor
function MyObjectType() {
   this.flag=0;
   
   // this method is scheduled for execution via 'setTimeout()' (see 'onClick' below)
   // the messages it displays will prove that it cannot access the object's 'this'
   this.scheduledMethod = function(param) {
      alert("executing the 'scheduledMethod()'");
      alert("the received parameter is correct: "+param);
      alert("the 'this' reference is wrong! the value of 'this.flag' is: "+this.flag);
   }
}
// an instance of myObjectType
var myObject=new MyObjectType();

</script>
</head>

<body>
   Click the "Schedule the method" button below and wait for one second<br/>
   <input type="button"
          value="Schedule the method"
          onClick="setTimeout(myObject.scheduledMethod, 1000, 123.456);"/><br/>
</body>

</html>

In the code example above, the following three consecutive alert messages will be displayed after one second from clicking the 'Schedule the method" button:

first message: executing the 'scheduledMethod()'
second message: the received parameter is correct: 1000
third message: the 'this' reference is wrong! the value of 'this.flag' is: undefined

Simple JavaScript code debugging

The simplest way to debug a JavaScript program when no specialized development environment is available is to place a combination of "breakpoints" and "tracing messages" throughout the code:

breakpoints:
for "breakpoints" one can use a 'confirm' window and force an uncaught exception if the 'cancel' button is pressed (e.g. by calling an undefined function), while for pausing program execution and displaying a message one can use the 'alert' window (the 'confirm' and 'alert' windows were presented in the 'simple user interface' section above).
tracing messages:
JavaScript does not provide a standardized way to print messages to the console; moreover, some operating systems, e.g. Windows, don't not even attempt to properly implement an application-launcher console. However, most browsers do implement some basic ways of displaying a message without interrupting the program execution.
- Mozilla Firefox browsers:
  a function that can be used with the Firefox browser for tracing the program flow without pausing the code execution is the 'Components.utils.reportError(string_value_to_display)' method which displays the message string in the JavaScript Error Console whithout pausing program execution.
  - Note: the Firefox 2.0 Error console can be displayed via the 'Tools -> Error console' menu entry
  Components.utils.reportError ("Message in the JavaScript error console");
- Internet Explorer browsers:
  TODO:::