JavaScript syntax is modeled on Java syntax; Java syntax, in turn, is modeled on C and C++ syntax. Therefore, C, C++, and Java programmers should find that JavaScript syntax is comfortably familiar.
JavaScript is a case-sensitive language. All keywords are in lowercase. All variables, function names, and other identifiers must be typed with a consistent capitalization.
JavaScript ignores whitespace between tokens. You may use spaces, tabs, and newlines to format and indent your code in a readable fashion.
JavaScript statements are terminated by semicolons. When a statement is followed by a newline, however, the terminating semicolon may be omitted. Note that this places a restriction on where you may legally break lines in your JavaScript programs: you may not break a statement across two lines if the first line can be a complete legal statement on its own.
JavaScript supports both C and C++ comments. Any amount of text, on one or more lines, between /* and */ is a comment, and is ignored by JavaScript. Also, any text between // and the end of the current line is a comment, and is ignored. Examples:
// This is a single-line, C++-style comment. /* * This is a multi-line, C-style comment. * Here is the second line. */ /* Another comment. */ // This too.
Variable, function, and label names are JavaScript identifiers. Identifiers are composed of any number of letters and digits, and _ and $ characters. The first character of an identifier must not be a digit, however. The following are legal identifiers:
i my_variable_name v13 $str
The following keywords are part of the JavaScript language, and have special meaning to the JavaScript interpreter. Therefore, they may not be used as identifiers.
break |
do |
if |
switch |
typeof |
case |
else |
in |
this |
var |
catch |
false |
instanceof |
throw |
void |
continue |
finally |
new |
true |
while |
default |
for |
null |
try |
with |
delete |
function |
return |
JavaScript also reserves the following words for possible future extensions. You may not use any of these words as identifiers either.
abstract |
enum |
int |
short |
boolean |
export |
interface |
static |
byte |
extends |
long |
super |
char |
final |
native |
synchronized |
class |
float |
package |
throws |
const |
goto |
private |
transient |
debugger |
implements |
protected |
volatile |
double |
import |
public |
In addition, you should avoid creating variables that have the same name as global properties and methods: see the Global, Object, and Window reference pages. Within functions, do not use the identifier arguments as an argument name or local variable name.
Variables are declared and initialized with the var statement:
var i = 1+2+3; var x = 3, message = 'hello world';
Variable declarations in top-level JavaScript code may be omitted, but they are required to declare local variables within the body of a function.
JavaScript variables are untyped: they can contain values of any data type.
Global variables in JavaScript are implemented as properties of a special Global object. Local variables within functions are implemented as properties of the Argument object for that function. Global variables are visible throughout a JavaScript program. Variables declared within a function are only visible within that function. Unlike C, C++, and Java, JavaScript does not have block-level scope: variables declared within the curly braces of a compound statement are not restricted to that block and are visible outside of it.
JavaScript supports three primitive data types: numbers, booleans, and strings; and two compound data types: object and arrays. In addition, it defines specialized types of objects that represent functions, regular expressions, and dates.
Numbers in JavaScript are represented in 64-bit floating-point format. JavaScript makes no distinction between integers and floating-point numbers. Numeric literals appear in JavaScript programs using the usual syntax: a sequence of digits, with an optional decimal point and an optional exponent. For example:
1 3.14 0001 6.02e23
Integers may also appear in hexadecimal notation. A hexadecimal literal begins with 0x:
0xFF // The number 255 in hexadecimal
When a numeric operation overflows, it returns a special value that represents positive or negative infinity. When an operation underflows, it returns zero. When an operation such as taking the square root of a negative number yields an error or meaningless result, it returns the special value NaN, which represents a value that is not-a-number. Use the global function isNaN( ) to test for this value.
The Number object defines useful numeric constants. The Math object defines various mathematical functions such as Math.sin( ), Math.pow( ), and Math.random( ).
The boolean type has two possible values, represented by the JavaScript keywords true and false. These values represent truth or falsehood, on or off, yes or no, or anything else that can be represented with one bit of information.
A JavaScript string is a sequence of arbitrary letters, digits, and other characters from the 16-bit Unicode character set.
String literals appear in JavaScript programs between single or double quotes. One style of quotes may be nested within the other:
'testing' "3.14" 'name="myform"' "Wouldn't you prefer O'Reilly's book?"
When the backslash character (\) appears within a string literal, it changes, or escapes, the meaning of the character that follows it. The following table lists these special escape sequences:
Escape |
Represents |
---|---|
\b |
Backspace |
\f |
Form feed |
\n |
Newline |
\r |
Carriage return |
\t |
Tab |
\' |
Apostrophe or single quote that does not terminate the string |
\" |
Double-quote that does not terminate the string |
\ |
Single backslash character |
\xdd |
Character with Latin-1 encoding specified by two hexadecimal digits dd |
\udddd |
Character with Unicode encoding specified by four hexadecimal digits dddd |
The String class defines many methods that you can use to operate on strings. It also defines the length property, which specifies the number of characters in a string.
The addition (+) operator concatenates strings. The equality (==) operator compares two strings to see if they contain exactly the same sequences of characters. (This is compare-by-value, not compare-by-reference, as C, C++, or Java programmers might expect.) The inequality operator (!=) does the reverse. The relational operators(<, <=, >, and >=) compare strings using alphabetical order.
JavaScript strings are immutable, which means that there is no way to change the contents of a string. Methods that operate on strings typically return a modified copy of the string.
An object is a compound data type that contains any number of properties. Each property has a name and a value. The . operator is used to access a named property of an object. For example, you can read and write property values of an object o as follows:
o.x = 1; o.y = 2; o.total = o.x + o.y;
Object properties are not defined in advance as they are in C, C++, or Java; any object can be assigned any property. JavaScript objects are associative arrays: they associate arbitrary data values with arbitrary names. Because of this fact, object properties can also be accessed using array notation:
o["x"] = 1; o["y"] = 2;
Objects are created with the new operator. You can create a new object with no properties as follows:
var o = new Object( );
Typically, however, you use predefined constructors to create objects that are members of a class of objects and have suitable properties and methods automatically defined. For example, you can create a Date object that represents the current time with:
var now = new Date( );
You can also define your own object classes and corresponding constructors; doing this is documented later in this section.
In JavaScript 1.2 and later, you can use object literal syntax to include objects literally in a program. An object literal is a comma-separated list of name/value pairs, contained within curly braces. For example:
var o = {x:1, y:2, total:3};
An array is a type of object that contains numbered values rather than named values. The [ ] operator is used to access the numbered values of an array:
a[0] = 1; a[1] = a[0] + a[0];
The first element of a JavaScript array is element 0. Every array has a length property that specifies the number of elements in the array. The last element of an array is element length-1. Array elements can hold any type of value, including objects and other arrays, and the elements of an array need not all contain values of the same type.
You create an array with the Array( ) constructor:
var a = new Array( ); // Empty array var b = new Array(10); // 10 elements var c = new Array(1,2,3); // Elements 1,2,3
As of JavaScript 1.2, you can use array literal syntax to include arrays directly in a program. An array literal is a comma-separated list of values enclosed within square brackets. For example:
var a = [1,2,3]; var b = [1, true, [1,2], {x:1, y:2}, "Hello"];
See Array in the reference section for a number of useful array manipulation methods.
A function is a piece of JavaScript code that is defined once and can be executed multiple times by a program. A function definition looks like this:
function sum(x, y) { return x + y; }
Functions are invoked using the ( ) operator and passing a list of argument values:
var total = sum(1,2); // Total is now 3
In JavaScript 1.1, you can create functions using the Function( ) constructor:
var sum = new Function("x", "y", "return x+y;");
In JavaScript 1.2 and later, you can define functions using function literal syntax, which makes the Function( ) constructor obsolete:
var sum = function(x,y) { return x+y; }
When a function is assigned to a property of an object, it is called a method of that object. Within the body of a method, the keyword this refers to the object for which the function is a property.
Within the body of a function, the arguments[ ] array contains the complete set of arguments passed to the function. See Function and Arguments in the reference section.
There are two JavaScript values that are not of any of the types described above. The JavaScript keyword null is a special value that indicates "no value". If a variable contains null, you know that it does not contain a valid value of any other type. The other special value in JavaScript is the undefined value. This is the value of uninitialized variables and the value returned when you query object properties that do not exist. In JavaScript 1.5, there is a pre-defined global variable named undefined that holds this special undefined value. null and undefined serve similar purposes and the == operator considers them equal; if you need to distinguish between them, use the === operator.
JavaScript expressions are formed by combining values (which may be literals, variables, object properties, array elements, or function invocations) using JavaScript operators. Parentheses can be used in an expression to group subexpressions and alter the default order of evaluation of the expression. Some examples:
1+2 total/n sum(o.x, a[3])++
JavaScript defines a complete set of operators, most of which should be familiar to C, C++, and Java programmers. They are listed in the table below, and a brief explanation of the nonstandard operators follows. The P column specifies operator precedence and the A column specifies operator associativity: L means left-to-right associativity, and R means right-to-left associativity.
P |
A |
Operator |
Operation performed |
---|---|---|---|
15 |
L |
. |
Access an object property |
L |
[ ] |
Access an array element |
|
L |
( ) |
Invoke a function |
|
R |
new |
Create new object |
|
14 |
R |
++ |
Pre-or-post increment (unary) |
R |
-- |
Pre-or-post decrement (unary) |
|
R |
- |
Unary minus (negation) |
|
R |
+ |
Unary plus (no-op) |
|
R |
~ |
Bitwise complement (unary) |
|
R |
! |
Logical complement (unary) |
|
R |
delete |
Undefine a property (unary) (JS 1.2) |
|
R |
typeof |
Return data type (unary) (JS 1.1) |
|
R |
void |
Return undefined value (unary) (JS 1.1) |
|
13 |
L |
*, /, % |
Multiplication, division, remainder |
12 |
L |
+, - |
Add, subtract |
L |
+ |
Concatenate strings |
|
11 |
L |
<< |
Integer shift left |
L |
>> |
Shift right, sign-extension |
|
L |
>>> |
Shift right, zero extension |
|
10 |
L |
<, <= |
Less than, less than or equal |
L |
>, >= |
Greater than, greater than or equal |
|
L |
instanceof |
Check object type (JS 1.5) |
|
L |
in |
Check whether property exists (JS 1.5) |
|
9 |
L |
== |
Test for equality |
L |
!= |
Test for inequality |
|
L |
=== |
Test for identity (JS 1.3) |
|
L |
!== |
Test for non-identity (JS 1.3) |
|
8 |
L |
& |
Integer bitwise AND |
7 |
L |
^ |
Integer bitwise XOR |
6 |
L |
| |
Integer bitwise OR |
5 |
L |
&& |
Logical AND |
4 |
L |
|| |
Logical OR |
3 |
R |
?: |
Conditional operator (3 operands) |
2 |
R |
= |
Assignment |
R |
*=, +=, -=, etc. |
Assignment with operation |
|
1 |
L |
, |
Multiple evaluation |
JavaScript operators that are not familiar from C, C++, and Java are the following:
A JavaScript program is a sequence of JavaScript statements. Most JavaScript statements have the same syntax as the corresponding C, C++, and Java statements.
Every JavaScript expression can stand alone as a statement. Assignments, method calls, increments, and decrements are expression statements. For example:
s = "hello world"; x = Math.sqrt(4); x++;
When a sequence of JavaScript statements is enclosed within curly braces, it counts as a single compound statement. For example, the body of a while loop consists of a single statement. If you want the loop to execute more than one statement, use a compound statement. This is a common technique with if, for, and other statements described later.
The empty statement is simply a semicolon by itself. It does nothing, and is occasionally useful for coding empty loop bodies.
As of JavaScript 1.2, any statement can be labeled with a name. Labeled loops can then be used with the labeled versions of the break and continue statements:
label : statement
The following paragraphs document all JavaScript statements, in alphabetical order.
break ; break label ;
case constant-expression : statements [ break ; ]
Because of the nature of the switch statement, a group of statements labeled by case should usually end with a break statement.
continue ; continue label ;
default: statements [ break ; ]
do statement while ( expression ) ;
This statement was introduced in JavaScript 1.2. In Netscape 4, the continue statement does not work correctly within do/while loops.
for (initialize ; test ; update ) statement
The for loop repeatedly executes statement as long as the test expression is true. It evaluates the initialize expression once before starting the loop and evaluates the update expression at the end of each iteration.
for (variable in object) statement
The for/in loop executes a statement once for each property of an object. Each time through the loop, it assigns the name of the current property to the specified variable. Some properties of pre-defined JavaScript objects are not enumerated by the for/in loop. User-defined properties are always enumerated.
function funcname ( args ) { statements }
This statement defines a function named funcname, with a body that consists of the specified statement, and arguments as specified by args. args is a comma-separated list of zero or more argument names. These arguments can be used in the body of the function to refer to the parameter values passed to the function.
if ( expression ) statement
When an else clause is added, the statement executes a different statement if the expression is false:
if ( expression ) statement else statement2
Any else clause may be combined with a nested if/else statement to produce an else if statement:
if ( expression ) statement else if ( expression2 ) statement2 else statement3
return ; return expression ;
switch ( expression ) { case constant-expression: statements [ case constant-expression: statements ] [ . . . ] default: statements }
Each set of statements within a switch statement is usually terminated with a break or return so that execution does not fall through from one case to the next one.
throw expression ;
The expression may evaluate to any type. (See Error in the reference section.)
try { statements } catch ( argument ) { statements } finally { statements }
The try clause of this statement defines a block of code for which exceptions and errors are to be handled. If a program error occurs, or an exception is thrown within the try block, control jumps to the exception-handling statements in the catch clause. This clause includes a single argument or local variable; the value that was thrown by the exception is assigned to this local variable so that it can be referred to by the statements of the catch clause. The finally clause contains statements that are executed after the try or catch clauses, whether or not an exception is thrown. The catch and finally clauses are optional, but you cannot omit both of them.
var name [ = value ] [ , name2 [ = value2 ] . . . ] ;
JavaScript objects are associative arrays that associate values with named properties. JavaScript provides a simple inheritance mechanism, and it is possible to define new classes of objects for use in your own programs. To define a new class, start by writing a constructor function. A constructor is like any other function, except it is invoked with the new operator and it uses the this keyword to refer to and initialize the newly created object. For example, here is a constructor to create objects of a new class named Point.
function Point(x,y) { // Constructor for Point this.x = x; // Initialize X coordinate this.y = y; // Initialize Y coordinate }
Every JavaScript function used as a constructor has a property named prototype. This property refers to a special prototype object for the class of objects created by the constructor. Any properties you define on this prototype object are inherited by all objects created with the constructor function. The prototype object is commonly used to make methods available to all instances of a class. Defining a method named toString allows instances of your class to be converted to strings. For example:
// Define function literals and assign them // to properties of the prototype object. Point.prototype.distanceTo = function(that) { var dx = this.x - that.x; var dy = this.y - that.y; return Math.sqrt(dx*dx + dy*dy); } Point.prototype.toString = function () { return '(' + this.x + ',' + this.y + ')'; }
If you want to define static (or class) methods or properties, you can assign them directly to the constructor function, rather than to the prototype object. For example:
// Define a commonly used Point constant Point.ORIGIN = new Point(0,0);
The preceding code fragments define a simple Point class that we can use with code like this:
// Call constructor to create a new Point object var p = new Point(3,4); // Invoke a method of the object, using a static // property as the argument. var d = p.distanceTo(Point.ORIGIN); // Adding the object to a string implicitly // invokes toString(). var msg = "Distance to " + p + " is " + d;
JavaScript supports regular expressions for pattern matching with the same syntax as the Perl programming language. JavaScript 1.2 supports Perl 4 regular expressions, and JavaScript 1.5 adds supports for some of the additional features of Perl 5 regular expressions. A regular expression is specified literally in a JavaScript program as a sequence of characters within slash (/) characters, optionally followed by one or more of the modifier characters g (global search), i (case-insensitive search), and m (multi-line mode; a JavaScript 1.5 feature). In addition to this literal syntax, RegExp objects can be created with the RegExp( ) constructor, which accepts the pattern and modifier characters as string arguments, without the slash characters.
A full explanation of regular expression syntax is beyond the scope of this chapter, but the tables in the following subsections offer brief syntax summaries.
Letters, numbers, and most other characters are literals in a regular expression: they simply match themselves. As we'll see in the sections that follow, however, there are a number of punctuation characters and escape sequences (beginning with \) that have special meanings. The simplest of these escape sequences provide alternative ways of representing literal characters.
Character |
Meaning |
---|---|
\n, \r, \t |
Match literal newline, carriage return, tab |
\, \/, \*, \+, \?, etc. |
Match a punctuation character literally, ignoring or escaping its special meaning |
\xnn |
The character with hexadecimal encoding nn |
\uxxxx |
The Unicode character with hexadecimal encoding xxxx |
Regular expression syntax uses square brackets to represent character sets or classes in a pattern. In addition, escape sequences define certain commonly-used character classes, as shown in the following table.
Character |
Meaning |
---|---|
[...] |
Match any one character between brackets |
[^...] |
Match any one character not between brackets |
. |
Match any character other than newline |
\w, \W |
Match any word/non-word character |
\s, \S |
Match any whitespace/non-whitespace |
\d, \D |
Match any digit/non-digit |
The following table shows regular expression syntax that controls the number of times that a match may be repeated.
Character |
Meaning |
---|---|
? |
Optional term; match zero or one time |
+ |
Match previous term one or more times |
* |
Match previous term zero or more times |
{n} |
Match previous term exactly n times |
{n,} |
Match previous term n or more times |
{n,m} |
Match at least n but no more than m times |
In JavaScript 1.5, any of the repetition characters may be followed by a question mark to make them non-greedy, which means they match as few repetitions as possible while still allowing the complete pattern to match.
Regular expressions use parentheses to group subexpressions, just as mathematical expressions do. Parentheses are useful, for example, to allow a repetition character to be applied to an entire subexpression. They are also useful with the | character, which is used to separate alternatives. Parenthesized groups have a special behavior: when a pattern match is found, the text that matches each group is saved and can be referred to by group number. The following table summarizes this syntax.
Character |
Meaning |
---|---|
a | b |
Match either a or b |
(sub) |
Group subexpression sub into a single term, and remember the text that it matched |
(?:sub) |
Group subexpression sub but do not number the group or remember the text it matches (JS 1.5) |
\n |
Match exactly the same characters that were matched by group number n |
$n |
In replacement strings, substitute the text that matched the nth subexpression |
An anchor in a regular expression matches a position in a string (such as the beginning or the end of the string) without matching any of the characters of a string. It can be used to anchor a match to a position.
Character |
Meaning |
---|---|
^, $ |
Require match at beginning/end of a string, or in multiline mode, beginning/end of a line |
\b, \B |
Require match at a word boundary/non-boundary |
(?=p) |
Look-ahead assertion: require that the following characters match the pattern p, but do not include them in the match (JS 1.5) |
(?!p) |
Negative look-ahead assertion: require that the following characters do not match the pattern p (JS 1.5) |
Netscape has defined numerous versions of JavaScript. Microsoft has released more-or-less compatible versions under the name "JScript," and the ECMA standards body has released three versions of a JavaScript standard named "ECMAScript". The following paragraphs describe these various versions, and explain how they relate to each other. Each entry in the reference section contains availability information that documents the version of JavaScript in which a feature was introduced.
Copyright © 2003 O'Reilly & Associates. All rights reserved.