A Concise Introduction to JavaScript
Part I: The Core Language

Copyright ©2002, ©2007 by David Matuszek

JavaScript is a language used in HTML (Web) pages, and understood by most Web browsers, to add interactivity to Web pages.

JavaScript has been largely standardized by ECMA (the European Computer Manufacturers Association) as a language formally named ECMAScript v3, usually known as JavaScript 1.5 (or ActionScript, JScript, QtScript, JScript .NET, DMDScript, or InScript). All modern browsers implement EMCAScript v3 reasonably well, with possibly some omissions and errors, and most browers add features of their own. In this paper I attempt to discuss primarily platform-independent features, but make no attempt to keep track of what doesn't work in various browsers.

Because JavaScript is used almost exclusively in Web pages, it cannot access files and has very limited networking capabilities. The only graphics capability it has is the ability to create HTML programmatically.

My main resource in writing this paper is the excellent book, JavaScript: The Definitive Guide, by David Flanigan, published by O'Reilly.

Quick Links
Data types	Operators	Objects
Identifiers	Expressions	Arrays
Comments	Statements	Strings
Variable declarations	Functions	Regular expressions
Part II: Client-Side JavaScript

Data types

JavaScript has three primitive types: number, string, and boolean, and two special values, null and undefined. Everything else is an object. An array is a type of object.

A number may be written as an integer or as a real number; however written, numbers are stored as floating-point. Special predefined numbers include Infinity, NaN ("not a number"), Number.NaN (same as NaN), Number.MIN_VALUE, Number.MAX_VALUE, Number.NEGATIVE_INFINITY, and Number.POSITIVE_INFINITY (same as Infinity). A hexadecimal literal begins with 0x or 0X. A nonzero number should never be written with a leading zero (e.g. 0123), because some implementations will treat this as an octal number and others won't.

A string is a sequence of zero or more characters enclosed in either single quotes ('hello') or double quotes ("hello"). There is no "character" data type. Special characters are:

A boolean has one of two values: true or false. When other values are converted into boolean (typically, for use as a test), the values 0, "0", the empty string, undefined, null, and NaN are converted to false, and other values are converted to true.

An object is a collection of named values, called its properties. If the name of a property is known to the programmer, it can be referenced by the syntax object.property_name, for example, image.width. If the name can be computed, it can be referenced by the syntax object[expression], for example, image["width"].

The special value null is an object with no properties. A similar value, undefined, means that the variable has never been assigned a value or that the requested property does not exist.

Functions, arrays, regular expressions, errors, and dates are all special types of object. In addition, there are "wrapper" types Number, String, and Boolean, to allow object-like operations on primitive values; but JavaScript automatically converts between primitives and wrappers as needed, so the programmer almost never sees these wrapper types.

Identifiers

Identifiers consist of letters (as defined by Unicode), digits, underscores, and/or dollar signs; the first character may not be a digit. Case is significant in JavaScript but not in HTML; since JavaScript names are frequently used in HTML, this can lead to some strange errors if you are not careful about case. By convention, the names of variables, properties, functions, and methods should begin with a lowercase letter; names of constructors should begin with a capital letter. Names may be any length.

The following are keywords in JavaScript, and may not be used as names. Italicized keywords are not currently in use, but are reserved for possible future extensions to the language.

abstract	debugger	final	instanceof	public	transient
boolean	default	finally	int	return	true
break	delete	float	interface	short	try
byte	do	for	long	static	typeof
case	double	function	native	super	var
catch	else	goto	new	switch	void
char	enum	if	null	synchronized	volatile
class	export	implements	package	this	while
const	extends	import	private	throw	with
continue	false	in	protected	throws

Comments

// introduces a comment that extends to the end of the line. Multi-line comments start with /* and end with */. Inside a comment, // and /* have no special meaning (so you cannot "nest" comments). Inside a quoted string or regular expression, // and /* do not start a comment.

Variable declarations

JavaScript variables are untyped: any variable can hold any type of value.

Variables are declared with the keyword var, along with an optional initial value; for example, var x or var x = 5. Alternatively, a variable may be declared simply by assigning it a value, for example, x = 5. It is not an error to declare the same variable more than once.

If a variable has been declared but not assigned a value, it has the special value undefined; it is not necessarily an error to use this value. If a variable has never been declared, it is an error to try to use its value.

A variable that is declared by var within a function is local to that function, and can be used anywhere within the function (even above the point of declaration). A variable that is declared outside any function, or is declared by assignment only (without using the keyword var), is global and can be referenced from anywhere in the HTML document. The formal parameters to a function are treated as local variables. If a local variable has the same name as a global variable, the name refers to the local variable.

Where declared	How declared	Scope
Within a function	As a formal parameter	Local to the function
	With var	Local to the function
	By assignment	Global
Not within a function	With var	Global
	By assignment	Global

The only scopes in JavaScript are global and local to the function. A variable may be declared in a for statement, that is, for (var variable ...) ..., but its scope is still either global or local to the function.

Functions may be nested, that is, a function may be defined within (and local to) another function. A variable declared within nested functions is local to the immediately enclosing function.

Variables are actually properties of an object. Global variables are properties of the global object. Function variables are properties of a short-lived call object.

Operators

Notes:

There is no such thing as an "integer divide" operation. 5/2 gives 2.5.

When used as a prefix, ++ adds one to its operand before using the value of the operand in an expression. When used as a suffix, ++ uses the original value of the operand in the enclosing expression, and adds one to the operand afterwards. Similar remarks hold for the -- operator.

The boolean operators && and || are short-circuit operators; if the first operand of && is false, or the first operand of || is true, the second operand will never be evaluated. For example, in if(i < size && a[i] == 0)..., where size is the size of the array, the array will not be accessed if i is too large.

JavaScript automatically converts values to an appropriate type. For example, when a string is "added" to a number, the number is converted to a string and the two values are concatenated. When a string is multiplied by a number, JavaScript first tries to convert the string to a number. When a string or number is used as a test, it is automatically converted to a boolean. And so on.

JavaScript does not provide a coercion (casting) operator to explicitly convert a value to a given type.

Any value can be converted to its equivalent boolean value by preceding it with !!.

If the operands of == or != are of different types, JavaScript first tries to convert them to the same type. If the operands of === or !== are of different types, they are considered to be unequal.

The comparisons <, <=, ==, ===, !=, >=, > can also be used with strings.

The various assignment operators are operators; that is, they have a value and may be embedded in a larger expression.

new constructor(arguments) creates a new object and calls a constructor function to initialize it. For new only (that is, not for any other kind of function call), if there are no arguments, the parentheses may be omitted.

delete attempts to remove the specified object property, variable, or array element, and returns true if successful. Variables declared with var cannot be deleted.

typeof gets the type of its operand and returns one of the following strings: "number", "string", "boolean", "object", "function", or "undefined".

void ignores its operand and returns undefined.

object instanceof constructor returns true if its lefthand operator is an object of the type created by its righthand operator (which must be the name of a constructor).

name in object returns true if the given object (which may be an array) has a property with the given name.

object . property returns the value of the property for the given object, or undefined if the object does not have that property. The property must be given as a simple identifier.

Expressions

An expression is any JavaScript code that results in a value. Expressions may be as simple as a single constant or single variable.

Operators with higher precedence (indicated by larger numbers) are performed before those with lower precedence. For example, in the expression 2*3+4*5, the multiplications are done before the addition, because multiplication has higher precedence than addition.

When operators have equal precedence, the associativity ("left to right," or "right to left") determines which operations are done first. For example, substraction has left to right associativity, so 10-5-3 means (10-5)-3 rather than 10-(5-3). Assignment has right to left associativity, so a=b=c+5 means a=(b=c+5) rather than (a=b)=c+5. Most common operators, other than the assignment operators, associate left to right.

Parentheses can be used to override the above rules and specify an explicit order of evaluation. Parentheses are also used to show the order of evaluation when it might not be obvious.

Statements

Statements are terminated by a semicolon or by the end of the line. Semicolons are required only to separate two or more statements on the same line. If a statement needs to extend over two lines, take care to separate it in place where the first line cannot be understood as a complete statement.

Good:

w = a + b +     c + d

Bad:

w = a + b   + c + d

Statement	Meaning
var name1, name2= value, name3;	Declares a comma-separated list of variables, each of which may be given an initial value; the default value is undefined.
expression;	Any expression may be used as a statement; however, unless the expression has a side effect, the computed value is simply discarded. Example expressions that have side effects:   a = b + c;   i++;   printf ("r = %d\n", r);
{ statements }	The "compound" statement, used to group several statements into one.
if (expression)   statement;	Executes the one controlled statement if and only if the expression results in a value that is considered to be true. In order to control multiple statements, use braces to group the controlled statements into a compound statement.
if (expression)   statement1; else   statement2;	Evaluates the expression and executes the first statement if the result is true, or executes the second statement if the result is false. In order to control multiple statements, use braces to group the controlled statements into a compound statement.
while (expression)   statement;	Evaluates the expression and executes the statement if the result is true, then starts over. In order to control multiple statements, use braces to group the controlled statements into a compound statement.
for (var in object)   statement;	Executes the loop body once for each user-defined property of the object, and some but not all properties of predefined JavaScript objects.
do   statement while (expression);	Executes the statement, then evaluates the expression. Starts over if the expression results in a true value. In order to control multiple statements, use braces to group the controlled statements into a compound statement. In Netscape 4, the continue statement does not work correctly in this kind of loop.
for (expr1; expr2; expr3)   statement;	Evaluates the first expression just once, at the beginning. Thereafter, it: Evaluates the second expression. If the result is false, "falls through" to whatever follows the for statement. Executes the statement. Evaluates the third expression (which typically has a side effect that could modify the value of the second expression). Returns to step 1. In order to control multiple statements, use braces to group the controlled statements into a compound statement. The statement and all expressions are optional; semicolons may not be omitted. If all expressions are omitted, the for statement behaves as an infinite loop.
switch (expression) {   case value1 :     statements1;   case value2 :     statements2;   ...   default :     statementsN; }	Each case in the switch statement can consist of multiple statements; braces may improve readability but are not necessary. Whichever group of statements is selected by the switch statement, the computer will execute those statements and all remaining statements in the switch; this is not what the programmer usually wants. A strongly recommended style is to use break as the last statement in each group of statements, including the last group, and to include a comment whenever the break is deliberately (as opposed to accidentally) omitted. The default case of a switch statement is optional. If omitted, and no other case matches, the switch statement does nothing.
label: statement ;	Any statement may be labeled, but it really only makes sense to label loop statements and switch statements. Labels are used in conjunction with the break and continue statements.
break;	Exit the innermost enclosing loop or switch statement. Cannot be used outside a loop or switch statement.
break label;	Exit the enclosing loop or switch statement with the given label. Cannot be used outside the labeled loop or switch statement.
continue;	Return to the top of the innermost enclosing loop. Cannot be used except in a loop.
continue label;	Return to the top of the enclosing loop with the given label. Cannot be used outside the labeled loop.
throw expression;	Signals an error or exception. The expression may be of any type.
try {   statements1 } catch (argument) {   statements2 }	Executes the first block of statements; if an exception occurs at any point during the execution, control immediately transfers to the catch block. There may be multiple catch blocks; the format of each catch block (except possibly the last) is catch (argument if expression) {...}, where the block is executed if the expression is true. Only the first successful catch block will be executed. All braces are required,even for single statements.
try {   statements1 } catch (argument) {   statements2 } finally {   statements3 }	As above. In addition, the finally clause will be executed, regardless of what happens in the try or catch part. For example, if the try part contains a return statement, the return action will be delayed until after the finally clause has executed.
with object   statement;	Use the object as the default prefix for variables in the statement. In order to control multiple statements, use braces to group the controlled statements into a compound statement.
function name (args) {    // body }	Defines a function.
return i;	Evaluate the expression and return it as the value of the function.
return;	Return from a function.
;	The empty statement does nothing. Occasionally useful as the body of a loop.
label : any_statement	Any statement can be given a label (name). However, labels are only useful on loops and switch statements (where they can be referenced by break or continue statements).

Functions

A function is a block of code that can be "invoked" (called). Functions in HTML should normally be defined in the <head> element, to ensure that they will be defined before they are needed. Functions may be recursive. Functions may be nested within other functions.

function average(x, y) {  // x and y are formal parameters
  var sum;         // this declares sum as a local variable
  g = x;           // this declares g as a global variable
  sum = g + y;
  return sum / 2;
} 

Example call:

avg = average(5, 10);

Defining functions

The function square may be defined in any of these ways:

1. function square(x) { return x * x; }
2. var square = new Function("x", "return x * x;");
3. var square = function(x) { return x * x; };
4. var square = function sqr(x) { return x * x; };

(1) is a function statement. Function statements may be placed as top-level code in an HTML document, or as a top-level statement within another function. Function statements may not be enclosed in other kinds of statements, such as compound statements or loops. The word var is not used (except possibly in the function body).

(2) uses the Function() constructor. This constructor takes any number of string arguments; the last argument is the body of the function, and the preceding arguments are the formal parameters. Since the function body is given as a string, it is possible to use string methods to construct the function body.

(3) uses a function literal. Functions are first-class objects. That is, a function is a data value, and can be used like any other piece of data: assigned to variables, passed as parameters, etc. function(x) { return x * x; }; is an anonymous function literal, which in this example we assign to the variable square.

(4) is the same as (3), but with a temporary function name, sqr. Temporary function names are available only within the function body, where they can be used to invoke the function recursively; but the final result is still an anonymous function.

Functions may be defined within other functions, and are local to the enclosing function:

function hypotenuse(x, y) {
    function square(x) { return x * x; }
    return Math.sqrt(square(x) + square(y));
}

Functions are data

Functions may be assigned to variables:

var square2 = square;
result = square2(25);
 
myArray[10] = square;
result = myArray[10](25); 

Functions may be assigned to properties. A function assigned to a property is called a method. Within a method, this refers to the call object, that is to the object that holds the property.

  myRect = { width: 8,
             height: 9,
             area: function() { return this.height * this.width; }
           }
  document.write(myRect.area());

Functions may be passed as parameters:

myArray.sort(function(a,b) { return a - b; });

Functions can have properties:

myFunction.callCount = 0;
function myFunction() { myFunction.callCount++; ...whatever...; }

Miscellaneous facts about functions

Primitive values (number, string, boolean) are passed to a function by value; objects are passed by reference. As a result, changing the value of a parameter within a function does not change the value outside the function, but changing the properties of an object passed as a parameter does change their values outside the function.

Within a function body, arguments is a special object that holds the actual parameters that were passed to the function. While arguments is not really an array, you can use arguments.length to find out how many arguments the function was actually called with, and arguments[i] to access the i^th argument. Using the elements of arguments has exactly the same effect as using the corresponding named arguments (if any). You can use arguments to write functions that take a variable number of arguments. In addition, arguments.callee refers to the function itself; this can be used to create anonymous recursive functions:

function(n) { return n <= 1 ? 1 : n * arguments.callee(n - 1); }

Both myFunction.call(myObject, arg0, ..., argN) and myFunction.apply(myObject, arg0, ..., argN) call myFunction as if it were a method of myObject; that is, this is set to myObject prior to execution.

Objects

Properties

Object have properties; properties have values. A property is basically a variable that is attached to an object. Properties may be added to or deleted from an object at any time.

If you know the name of a property, you can refer to it with dot notation: myObject.myProperty, owner.name, myCar.make. If you do not know the name of a property, but you can get it from a variable or expression, you can refer to it with bracket notation: teacher[course], teacher["CIT" + number].

Creating objects

You can create a new, "blank" object with:
     var myCar = new Object();

You can add fields to this object (or any other object) with:
     myCar.make = "Pontiac"; myCar.year = 1996;

You can create an object with an "object literal":
     var myCar = { make: "Pontiac", year: 1996 };

You can create an object with a constructor that you write:
     var myCar = Car("Pontiac", 1996);
where:
     function Car(m, y) { this.make = m; this.year = y; }

You should write a constructor if you want to define a number of similar objects. Within the constructor, the keyword this (which is required, not assumed) refers to the new object. By default, the constructor returns the newly created object this, but you can explicitly return some other object. When an object is created by calling a constructor, the test object instanceof constructor (for example, myCar instanceof Car) will return true. It is conventional to capitalize the names of constructors.

Object prototypes

Each JavaScript object belongs to a class, and each class has a prototype. The properties of an object belong to that object alone. If you want a property or function shared across all instances of a class, you need to attach them to the class prototype. Prototype properties are similar to static values and methods in Java.

For example, to ensure that every Car has four wheels, you might write:
     Car.prototype.wheelCount = 4;

You can attach a method to a single object like this:
     myCar.age = function() { return this.year - 2005; }

You can attach a method to all instances of a class like this:
     Car.prototype.age = function() { return this.year - 2005; }

You can attach a method to a class like this:
     Car.fuel = function() { return "gasoline"; }

The keyword this should not be used in a method that belongs to a class.

To read (get the value of) a property, say myObj.myProp, JavaScript first checks to see if the particular object myObj has the property, and if so, returns its value; otherwise, it checks to see if the object's prototype has the property. However, to write (set the value of) a property, JavaScript only examines the object itself; it does not use the object's prototype. To set the value of a property inherited from a prototype, you must refer to it explicitly, as for instance myObj.prototype.myProp.

Built-in classes, such as String and Date, also have prototypes, and you can assign new properties to them.

Every object inherits a toString() method from its prototype, to convert the object into a string, but the result usually isn't very useful. You can override toString() with a more useful version.

Arrays

An array is an object with some special features.

You can create an array (say, a) as follows:

• var a = new Array();     // an array with no elements (initially)
• var a = new Array(10);   // an array with 10 undefined elements
• var a = new Array("red", 0xFFFF00, "green"); // three elements, as given
• var a = ["red", 0xFFFF00, "green"];          //using an array literal

Arrays are zero-based; a[0] is the first element, a[a.length - 1] is the last. All arrays have a length property, which is always one larger than the index of the last occupied location in the array. length is automatically kept up to date. You can set length to a different value: If you make it smaller, array elements are discarded, while if you make it larger, the new elements have the value undefined.

You can add elements to the array simply by assigning to them, for example, a[5000]=1;. Arrays are sparse: that is, array locations that are undefined do not take up space in the computer. Array indices must be in the range 0 to 232-1. You can delete elements from an array with the delete operator. Deleting elements does not change the length of the array, or change the locations of the remaining elements.

Array methods

join()

Converts all the elements of the array to strings and concatenates them, with a comma separator.

join(string)

Converts all the elements of the array to strings and concatenates them, using the given string as a separator.

reverse()

Reverses the elements of the array in place, that is, no new array is created.

sort()

Sorts the array in place, in alphabetical order.

sort(function)

Sorts the array in place. The function takes two arguments, and returns a negative number if the first element is judged "less than" the second, zero if the two elements are "equal," and a positive number if the first element should be considered "larger."

concat(arg1, ..., argN) or concat([arg1, ..., argN])

Creates and returns a new array with all the elements of the old array, and also the elements arg1, ..., argN.

slice(start, end)

Returns a new array consisting of elements start through end - 1 of the original array.

splice(start)

Removes all elements from index location start to the end of the array, and returns them in a new array.

 

splice(start, count)

Removes count elements from the array, starting at index location start, and returns them in a new array.

splice(start, count, value1, ..., valueN)

Removes count elements from the array, starting at index location start, and replaces them with new elements value1, ..., valueN. The removed elements are returned in a new array.

 

push(value1, ..., valueN)

Adds value1, ..., valueN to the end of the array; the return value is the new length of the array.

pop()

Removes and returns the last value in the array, and decrements the length of the array.


unshift(value1, ..., valueN)

Adds value1, ..., valueN to the beginning of the array; the return value is the new length of the array.

shift()

Removes and returns the first value in the array. Remaining elements are all shifted down one place.

toString()

Creates and returns a comma-separated list of the string representations of each element in the array.

Strings

A string is a primitive value consisting of a sequence of zero or more characters. A String (capitalized) is a wrapper object for a string. The methods in this section are actually String methods, but JavaScript converts between the primitive and the wrapper as needed.

Strings have a length property, which is the number of characters in the string.

Strings can be concatenated (producing a new string) with the + operator.

String methods

Here are some of the more important methods on strings.

charAt(n)

Returns the n^th character of a string.

charCodeAt(n)

Returns the numeric Unicode value of the n^th character of a string.

concat(string1, ..., stringN)

Concatenates the string arguments to the given string.

fromCharCode(c1, ..., cN)

Creates a string from the given numeric Unicode values.

indexOf(substring)

Returns the position of the first character of substring in the given string, or -1 if not found.

indexOf(substring, start)

Returns the position of the first character of substring in the given string that begins at or after position start, or -1 if not found.

lastIndexOf(substring)
lastIndexOf(substring, start)

Like indexOf, but searching starts from the end of the given string.

localeCompare(string)

Returns a negative, zero, or positive number according to whether string is less than, equal to, or greater than the given string, according to locale-specific ordering.

match(regexp)

Returns an array containing the results of the match, or null if no match is found. On a successful match:

• If g (global) is set, the array contains the matched substrings.
• If g is not set, array location 0 contains the matched text, and remaining locations contain text matched by any parenthesized subexpressions. The array index property gives the position of the first character of the match.
  

replace(regexp, replacement)

Returns an new string that has the matched substring replaced with the replacement.

search(regexp)

Returns the position of the first matched substring in the given string, or -1 if not found.

Regular expressions

Characters inside a regular expression are classified as follows:

• Literals are characters that stand for themselves. Examples include letters, digits, and whitespace characters.
• Metacharacters are characters that have special meaning in a regular expression. The metacharacters are: \ | ( ) [ { ^ $ * + . ?
• Escaped characters are characters that are preceded by a backslash in order to use them as literals rather than as metacharacters, or because they are difficult to represent otherwise: \\  \|  \(  \)  \[  \{  \^  \$  \*  \+  \.  \?    and also:
  •  \0 The NUL character, \u0000
  •  [\b]  Backspace, \u0008 (special syntax)
  •  \t  Tab, \u0009
  •  \n  Newline, \u000A
  •  \v  Vertical tab, \u000B
  •  \f  Form feed, \u000C
  •  \r  Carriage return, \u000D
  •  \xHH  The character specified by the hex number HH
  •  \uHHHH  The character specified by the hex number HHHH
  •  \cX  The control character ^X
• Character classes are escaped characters that represent any one of a set of characters:
  •  \w  A word character; same as [a-zA-Z0-9_]
  •  \W  A nonword character; same as [^a-zA-Z0-9_]
  •  \s  A whitespace character
  •  \S  A non-whitespace character
  •  \d  A digit; same as [0-9]
  •  \D  A nondigit; same as [^0-9]
  •  .  (Not escaped) Any character except a line terminator

The following table lists the meanings of metacharacters:

Do not include extra spaces in regular expressions! A space is a literal character, and a space in a regular expression requires a space in the string being searched.

Regular expression methods

string.search(pattern)

Returns the position of the start of the first substring in string that matches the pattern, or -1 if the pattern is not found. If the global modifier g is present, it is ignored.

string.replace(pattern, replacement)

Searches string for the pattern and, if found, replaces it with the replacement. If the global modifier g is present, the method replaces all occurrences of the pattern with the replacement. If the pattern contains parenthesized groups, then the replacement may use $1 to represent the first group matched, $2 to represent the second group matched, and so on.

string.match(pattern)

match always returns an array. If the g flag is set, match returns an array of matched substrings.If the g flag is not set, match returns an array whose first element is the matched substring and whose n^th element is the portion matched by the n^th parenthesized group. The array has a length property, an index property (which holds the starting position), and an input propery (which holds string).

string1.split(string2_or_pattern)

Returns an array of substrings of string1, where each occurence of string2_or_pattern separates the substrings in string1.

pattern.exec(string)

exec returns an array whose first element is the matched substring and whose n^th element is the portion matched by the n^th parenthesized group. If no match is found, exec returns null. If the g flag is set, exec also modifies the lastIndex property of pattern to the character position just after the match (or to 0 if no match was found), so that if the pattern is used again, the search will resume from the point that it left off.

pattern.test(string)

Returns true if the match succeeds, and null otherwise. The g flag is handled the same way that it is for exec.