O'Reilly Media | JavaScript: The Definitive Guide

Content preview·Buy reprint rights for this chapter

JavaScript is a lightweight, interpreted programming language with object-oriented capabilities. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers and embellished for web programming with the addition of objects that represent the web browser window and its contents. This client-side version of JavaScript allows executable content to be included in web pages -- it means that a web page need no longer be static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.

Syntactically, the core JavaScript language resembles C, C++, and Java, with programming constructs such as the if statement, the while loop, and the && operator. The similarity ends with this syntactic resemblance, however. JavaScript is an untyped language, which means that variables do not need to have a type specified. Objects in JavaScript are more like Perl's associative arrays than they are like structures in C or objects in C++ or Java. The object-oriented inheritance mechanism of JavaScript is like those of the little-known languages Self and NewtonScript; it is quite different from inheritance in C++ and Java. Like Perl, JavaScript is an interpreted language, and it draws inspiration from Perl in a number of places, such as its regular expression and array-handling features.

This chapter provides a quick overview of JavaScript; it explains what JavaScript can and cannot do and exposes some myths about the language. It distinguishes the core JavaScript language from embedded and extended versions of the language, such as the client-side JavaScript that is embedded in web browsers and the server-side JavaScript that is embedded in Netscape's web servers. (This book documents core and client-side JavaScript.) This chapter also demonstrates real-world web programming with some client-side JavaScript examples.

JavaScript is the subject of a fair bit of misinformation and confusion. Before proceeding any further with our exploration of JavaScript, it is important that we debunk some common and persistent myths about the language.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

JavaScript is the subject of a fair bit of misinformation and confusion. Before proceeding any further with our exploration of JavaScript, it is important that we debunk some common and persistent myths about the language.

One of the most common misconceptions about JavaScript is that it is a simplified version of Java, the programming language from Sun Microsystems. Other than an incomplete syntactic resemblance and the fact that both Java and JavaScript can provide executable content in web browsers, the two languages are entirely unrelated. The similarity of names is purely a marketing ploy (the language was originally called LiveScript; its name was changed to JavaScript at the last minute).

JavaScript and Java do, however, make a good team. The two languages have different sets of capabilities. JavaScript can control browser behavior and content but cannot draw graphics or perform networking. Java has no control over the browser as a whole but can do graphics, networking, and multithreading. Client-side JavaScript can interact with and control Java applets embedded in a web page, and, in this sense, JavaScript really can script Java (see Chapter 22 for details).

JavaScript is touted as a scripting language instead of a programming language, the implication being that scripting languages are simpler, that they are programming languages for non-programmers. Indeed, JavaScript appears at first glance to be a fairly simple language, perhaps of the same complexity as BASIC. JavaScript does have a number of features designed to make it more forgiving and easier to use for new and unsophisticated programmers. Non-programmers can use JavaScript for limited, cookbook-style programming tasks.

Beneath its thin veneer of simplicity, however, JavaScript is a full-featured programming language, as complex as any and more complex than some. Programmers who attempt to use JavaScript for nontrivial tasks often find the process frustrating if they do not have a solid understanding of the language. This book documents JavaScript comprehensively, so you can develop a sophisticated understanding of the language.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

JavaScript has evolved over the years, and Netscape has released several versions of the language. Microsoft has released similar versions of the JavaScript language under the name "JScript." And ECMA (http://www.ecma.ch) has published three versions of the ECMA-262 standard that standardize the JavaScript language under the awkward name "ECMAScript."

Table 1-1 lists these various versions and explains their key features and how they are related to one another. In this book, I often use the name "JavaScript" to refer to any implementation of the language, including Microsoft's JScript. When I'm specifically referring to ECMAScript, I often use the terms "ECMA-262" or "ECMA."

Table 1-1: Versions of JavaScript
Version	Description
JavaScript 1.0	The original version of the language. It was buggy and is now essentially obsolete. Implemented by Netscape 2.
JavaScript 1.1	Introduced a true Array object; most serious bugs resolved. Implemented by Netscape 3.
JavaScript 1.2	Introduced the `switch` statement, regular expressions, and a number of other features. Almost compliant with ECMA v1, but has some incompatibilities. Implemented by Netscape 4.
JavaScript 1.3	Fixed incompatibilities of JavaScript 1.2. Compliant with ECMA v1. Implemented by Netscape 4.5.
JavaScript 1.4	Implemented only in Netscape server products.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

When a JavaScript interpreter is embedded in a web browser, the result is client-side JavaScript. This is by far the most common variant of JavaScript; when most people refer to JavaScript, they usually mean client-side JavaScript. This book documents client-side JavaScript, along with the core JavaScript language that client-side JavaScript incorporates.

We'll discuss client-side JavaScript and its capabilities in much more detail later in this chapter. In brief, though, client-side JavaScript combines the scripting ability of a JavaScript interpreter with the document object model (DOM) defined by a web browser. These two distinct technologies combine in a synergistic way, so the result is greater than the sum of its parts: client-side JavaScript enables executable content to be distributed over the Web and is at the heart of a new generation of Dynamic HTML (DHTML) documents.

Just as the ECMA-262 specification defined a standard version of the core JavaScript language, the World Wide Web Consortium (W3C) has published a DOM specification (or recommendation) that standardizes the features a browser must support in its DOM. We'll learn much more about this standard in Chapter 17, Chapter 18, and Chapter 19. Although the W3C DOM standard is not yet as well supported as it could be, it is supported well enough that web developers can start writing JavaScript code that relies on it.

Table 1-2 shows the core language version and DOM capabilities supported by various browser versions from Netscape and Microsoft. Note that the versions of Internet Explorer listed in the table refer to the Windows version of that browser. The capabilities of Macintosh versions of IE often vary (sometimes significantly) from the same-numbered versions for Windows. Also, bear in mind that IE allows the JScript interpreter to be upgraded independently of the browser itself, so it is possible to encounter an installation of IE that supports a version of the language greater than that shown here.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

JavaScript is a general-purpose programming language; its use is not restricted to web browsers. JavaScript was designed to be embedded within, and provide scripting capabilities for, any application. From the earliest days, in fact, Netscape's web servers included a JavaScript interpreter, so that server-side scripts could be written in JavaScript. Similarly, Microsoft uses its JScript interpreter in its IIS web server and in its Windows Scripting Host product, in addition to using it in Internet Explorer.

Both Netscape and Microsoft have made their JavaScript interpreters available to companies and programmers who want to embed them in their applications. Netscape's interpreter was released as open source and is now available through the Mozilla organization (see http://www.mozilla.org/js/). Mozilla actually provides two different versions of the JavaScript 1.5 interpreter. One is written in C and is called "SpiderMonkey." The other is written in Java and, in a flattering reference to this book, is called "Rhino."

We can expect to see more and more applications that use JavaScript as an embedded scripting language. If you are writing scripts for such an application, you'll find the first half of this book, documenting the core language, to be useful. The web-browser specific chapters, however, will probably not be applicable to your scripts.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

When a web browser is augmented with a JavaScript interpreter, it allows executable content to be distributed over the Internet in the form of JavaScript scripts. Example 1-1 shows a simple JavaScript program, or script, embedded in a web page.

Example 1-1. A simple JavaScript program

<html>
<body>
<head><title>Factorials</title></head>
<script language="JavaScript">
document.write("<h2>Table of Factorials</h2>");
for(i = 1, fact = 1; i < 10; i++, fact *= i) {
    document.write(i + "! = " + fact);
    document.write("<br>");
}
</script>
</body>
</html>

When loaded into a JavaScript-enabled browser, this script produces the output shown in Figure 1-1.

Figure 1-1: A web page generated with JavaScript

As you can see in this example, the <script> and </script> tags are used to embed JavaScript code within an HTML file. We'll learn more about the <script> tag in Chapter 12. The main feature of JavaScript demonstrated by this example is the use of the document.write( ) method. This method is used to dynamically output HTML text that is parsed and displayed by the web browser; we'll encounter it many more times in this book.

Besides allowing control over the content of web pages, JavaScript allows control over the browser and over the content of the HTML forms that appear in the browser. We'll learn about these capabilities of JavaScript in more detail later in this chapter and in much more detail later in this book.

JavaScript can control not only the content of HTML documents, but also the behavior of those documents. That is, a JavaScript program might respond in some way when you enter a value in an input field or click on an image in a document. JavaScript does this by defining event handlers for the document -- pieces of JavaScript code that are executed when a particular event occurs, such as when the user clicks on a button. Example 1-2 shows the definition of a simple HTML form that includes an event handler that is executed in response to a button click.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Another possible use of JavaScript is for writing programs to perform arbitrary computations. You can write simple scripts, for example, that compute Fibonacci numbers, or search for primes. In the context of the Web and web browsers, however, a more interesting application of the language might be a program that computed the sales tax on an online order, based on information supplied by the user in an HTML form. As mentioned earlier, the real power of JavaScript lies in the browser and document-based objects that the language supports. To give you an idea of JavaScript's potential, the following sections list and explain the important capabilities of client-side JavaScript and the objects it supports.

The JavaScript Document object, through its

write(
)

method, which we have already seen, allows you to write arbitrary HTML into a document as the document is being parsed by the browser. For example, you can include the current date and time in a document or display different content on different platforms.

You can also use the Document object to generate documents entirely from scratch. Properties of the Document object allow you to specify colors for the document background, the text, and the hypertext links within it. This amounts to the ability to generate dynamic and conditional HTML documents, a technique that works particularly well in multiframe documents. Indeed, in some cases dynamic generation of frame content allows a JavaScript program to replace a traditional server-side script entirely.

Internet Explorer 4 and Netscape 4 support proprietary techniques for producing Dynamic HTML effects that allow document content to be dynamically generated, moved, and altered. IE 4 also supports a complete DOM that gives JavaScript access to every single HTML element within a document. And IE 5.5 and Netscape 6 support the W3C DOM standard (or at least key portions of it), which defines a standard, portable way to access all of the elements and text within an HTML document and to position them and modify their appearance by manipulating their Cascading Style Sheets (CSS) style attributes. In these browsers, client-side JavaScript has complete power over document content, which opens an unlimited world of scripting possibilities.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Any time that programs (such as JavaScript scripts, Visual Basic programs, or Microsoft Word macros) are included within shared documents, particularly documents that are transmitted over the Internet or by email, there is a potential for viruses or other malicious programs. The designers of JavaScript were aware of these security issues and took care not to give JavaScript programs the power to perform damaging acts. As described previously, for example, client-side JavaScript programs cannot read local files or perform networking operations.

Because of the complexity of the web-browser environment, however, a number of security problems did arise in early browser versions. In Netscape 2, for example, it was possible to write JavaScript code that could automatically steal the email address of any visitor to a page containing the code and then automatically send email in the visitor's name, without the visitor's knowledge or approval. This, and a number of other security holes, have been fixed. Although there is no guarantee that other security holes will not be found, most knowledgeable users are comfortable letting modern browsers run the JavaScript code found in web pages. Chapter 21 contains a complete discussion of security in client-side JavaScript.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Example 1-3 is a listing of a complete, nontrivial JavaScript program. The program computes the monthly payment on a home mortgage or other loan, given the amount of the loan, the interest rate, and the repayment period. As you can see, the program consists of an HTML form made interactive with JavaScript code. Figure 1-3 shows what the HTML form looks like when displayed in a web browser. But the figure can only capture a static snapshot of the program. The addition of JavaScript code makes it dynamic: whenever the user changes the amount of the loan, the interest rate, or the number of payments, the JavaScript code recomputes the monthly payment, the total of all payments, and the total interest paid over the lifetime of the loan.

Figure 1-3: A JavaScript loan payment calculator

The first half of the example is an HTML form, nicely formatted using an HTML table. Note that several of the form elements define onchange or onclick event handlers. The web browser triggers these event handlers when the user changes the input or clicks on the Compute button displayed in the form. Note that in each case, the value of the event handler attribute is a string of JavaScript code:

calculate(
)

. When the event handler is triggered, it executes this code, which causes it to call the function calculate( ).

The calculate( ) function is defined in the second half of the example, inside <script> tags. The function reads the user's input from the form, does the math required to compute the loan payments, and displays the results of these calculations using the bottom three form elements.

Example 1-3 is simple, but it is worth taking the time to look at it carefully. You shouldn't expect to understand all the JavaScript code at this point, but studying this example should give you a good idea of what JavaScript programs look like, how event handlers work, and how JavaScript code can be integrated with HTML forms. Note that comments (in English) are included within HTML between

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The rest of this book is in five parts. Part I, which immediately follows this chapter, documents the core JavaScript language. Chapter 2 through Chapter 6 begin this section with some bland but necessary reading -- these chapters cover the basic information you need to understand when learning a new programming language:

Chapter 2 explains the basic structure of the language.
Chapter 3 documents the data types supported by JavaScript.
Chapter 4 covers variables, variable scope, and related topics.
Chapter 5 explains expressions in JavaScript and documents each of the operators supported by JavaScript. Because JavaScript syntax is modeled on Java, which is, in turn, modeled on C and C++, experienced C, C++, or Java programmers can skim much of this chapter.
Chapter 6 describes the syntax and usage of each of the JavaScript statements. Again, experienced C, C++, and Java programmers can skim some, but not all, of this chapter.

The next five chapters of this first section become more interesting. They still cover the core of the JavaScript language, but they document parts of the language that will not already be familiar to you even if you already know C or Java. These chapters must be studied carefully if you want to really understand JavaScript:

Chapter 7 documents how functions are defined, invoked, and manipulated in JavaScript.
Chapter 8 explains objects, the most important JavaScript data type. This chapter discusses object-oriented programming in JavaScript and explains how you can define your own classes of objects in JavaScript.
Chapter 9 describes the creation and use of arrays in JavaScript.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The way to really learn a new programming language is to write programs with it. As you read through this book, I encourage you to try out JavaScript features as you learn about them. There are a number of techniques that make it easy to experiment with JavaScript.

The most obvious way to explore JavaScript is to write simple scripts. One of the nice things about client-side JavaScript is that anyone with a web browser and a simple text editor has a complete development environment; there is no need to buy or download special-purpose software in order to begin writing JavaScript scripts. We saw an example that computed factorials at the beginning of this chapter. Suppose you wanted to modify it as follows to display Fibonacci numbers instead:

<script>
document.write("<h2>Table of Fibonacci Numbers</h2>");
for (i=0, j=1, k=0, fib =0; i<50; i++, fib=j+k, j=k, k=fib){
    document.write("Fibonacci ("  + i +  ") = " + fib);
    document.write("<br>");
}
</script>

This code may be convoluted (and don't worry if you don't yet understand it), but the point is that when you want to experiment with short programs like this, you can simply type them up and try them out in your web browser using a local file: URL. Note that the code uses the

document.write(
)

method to display its HTML output, so that you can see the results of its computations. This is an important technique for experimenting with JavaScript. As an alternative, you can also use the alert( ) method to display plain-text output in a dialog box:

alert("Fibonacci ("  + i +  ") = " + fib);

Note also that for simple JavaScript experiments like this, you can usually omit the <html>, <head>, and <body> tags in your HTML file.

For even simpler experiments with JavaScript, you can sometimes use the javascript: URL pseudoprotocol to evaluate a JavaScript expression and return the result. A JavaScript URL consists of the

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The lexical structure of a programming language is the set of elementary rules that specifies how you write programs in that language. It is the lowest-level syntax of a language; it specifies such things as what variable names look like, what characters are used for comments, and how one program statement is separated from the next. This short chapter documents the lexical structure of JavaScript.

JavaScript programs are written using the Unicode character set. Unlike the 7-bit ASCII encoding, which is useful only for English, and the 8-bit ISO Latin-1 encoding, which is useful only for English and major Western European languages, the 16-bit Unicode encoding can represent virtually every written language in common use on the planet. This is an important feature for internationalization and is particularly important for programmers who do not speak English.

American and other English-speaking programmers typically write programs using a text editor that supports only the ASCII or Latin-1 character encodings, and thus they don't have easy access to the full Unicode character set. This is not a problem, however, because both the ASCII and Latin-1 encodings are subsets of Unicode, so any JavaScript program written using those character sets is perfectly valid. Programmers who are used to thinking of characters as 8-bit quantities may be disconcerted to know that JavaScript represents each character using 2 bytes, but this fact is actually transparent to the programmer and can simply be ignored.

Although the ECMAScript v3 standard allows Unicode characters anywhere in a JavaScript program, Versions 1 and 2 of the standard allow Unicode characters only in comments and quoted string literals -- all other parts of an ECMAScript v1 program are restricted to the ASCII character set. Versions of JavaScript that predate ECMAScript standardization typically do not support Unicode at all.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

JavaScript programs are written using the Unicode character set. Unlike the 7-bit ASCII encoding, which is useful only for English, and the 8-bit ISO Latin-1 encoding, which is useful only for English and major Western European languages, the 16-bit Unicode encoding can represent virtually every written language in common use on the planet. This is an important feature for internationalization and is particularly important for programmers who do not speak English.

American and other English-speaking programmers typically write programs using a text editor that supports only the ASCII or Latin-1 character encodings, and thus they don't have easy access to the full Unicode character set. This is not a problem, however, because both the ASCII and Latin-1 encodings are subsets of Unicode, so any JavaScript program written using those character sets is perfectly valid. Programmers who are used to thinking of characters as 8-bit quantities may be disconcerted to know that JavaScript represents each character using 2 bytes, but this fact is actually transparent to the programmer and can simply be ignored.

Although the ECMAScript v3 standard allows Unicode characters anywhere in a JavaScript program, Versions 1 and 2 of the standard allow Unicode characters only in comments and quoted string literals -- all other parts of an ECMAScript v1 program are restricted to the ASCII character set. Versions of JavaScript that predate ECMAScript standardization typically do not support Unicode at all.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. The while keyword, for example, must be typed "while", not "While" or "WHILE". Similarly, online, Online, OnLine, and ONLINE are four distinct variable names.

Note, however, that HTML is not case-sensitive. Because of its close association with client-side JavaScript, this difference can be confusing. Many JavaScript objects and properties have the same names as the HTML tags and attributes they represent. While these tags and attribute names can be typed in any case in HTML, in JavaScript they typically must be all lowercase. For example, the HTML onclick event handler attribute is commonly specified as onClick in HTML, but it must be referred to as onclick in JavaScript code.

While core JavaScript is entirely and exclusively case-sensitive, exceptions to this rule are allowed in client-side JavaScript. In Internet Explorer 3, for example, all client-side objects and properties were case-insensitive. This caused problematic incompatibilities with Netscape, however, so in Internet Explorer 4 and later, client-side objects and properties are case-sensitive.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

JavaScript ignores spaces, tabs, and newlines that appear between tokens in programs, except those that are part of string or regular expression literals. A token is a keyword, variable name, number, function name, or some other entity in which you would obviously not want to insert a space or a line break. If you place a space, tab, or newline within a token, you break it up into two tokens -- thus, 123 is a single numeric token, but 12 3 is two separate tokens (and constitutes a syntax error, incidentally).

Because you can use spaces, tabs, and newlines freely in your programs (except in strings, regular expressions, and tokens), you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand. Note, however, that there is one minor restriction on the placement of line breaks; it is described in the following section.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Simple statements in JavaScript are generally followed by semicolons (;), just as they are in C, C++, and Java. The semicolon serves to separate statements from each other. In JavaScript, however, you may omit the semicolon if each of your statements is placed on a separate line. For example, the following code could be written without semicolons:

a = 3;
b = 4;

But when formatted as follows, the first semicolon is required:

a = 3; b = 4;

Omitting semicolons is not a good programming practice; you should get in the habit of using them.

Although JavaScript theoretically allows line breaks between any two tokens, the fact that JavaScript automatically inserts semicolons for you causes some exceptions to this rule. Loosely, if you break a line of code in such a way that the line before the break appears to be a complete statement, JavaScript may think you omitted the semicolon and insert one for you, altering your meaning. Some places you should look out for this are with the return , break, and continue statements (which are described in Chapter 6). For example, consider the following:

return
true;

JavaScript assumes you meant:

return;
true;

However, you probably meant:

return true;

This is something to watch out for -- this code does not cause a syntax error and will fail in a nonobvious way. A similar problem occurs if you write:

break
outerloop;

JavaScript inserts a semicolon after the break keyword, causing a syntax error when it tries to interpret the next line. For similar reasons, the ++ and -- postfix operators (see Chapter 5) must always appear on the same line as the expressions to which they are applied.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

JavaScript, like Java, supports both C++ and C-style comments. Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript. Any text between the characters /* and */ is also treated as a comment. These C-style comments may span multiple lines but may not be nested. The following lines of code are all legal JavaScript comments:

// This is a single-line comment.
/* This is also a comment */  // and here is another comment.
/*
 * This is yet another comment.
 * It has multiple lines.
 */

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

A literal is a data value that appears directly in a program. The following are all literals:

12               // The number twelve
1.2              // The number one point two
"hello world"    // A string of text
'Hi'             // Another string
true             // A boolean value
false            // The other boolean value
/javascript/gi   // A "regular expression" literal (for pattern matching)
null             // Absence of an object

In ECMAScript v3, expressions that serve as array and object literals are also supported. For example:

{ x:1, y:2 }    // An object initializer
[1,2,3,4,5]     // An array initializer

Note that these array and object literals have been supported since JavaScript 1.2 but were not standardized until ECMAScript v3.

Literals are an important part of any programming language, as it is impossible to write a program without them. The various JavaScript literals are described in detail in Chapter 3.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

An identifier is simply a name. In JavaScript, identifiers are used to name variables and functions and to provide labels for certain loops in JavaScript code. The rules for legal identifier names are the same in JavaScript as they are in Java and many other languages. The first character must be a letter, an underscore (_), or a dollar sign ($). Subsequent characters may be any letter or digit or an underscore or dollar sign. (Numbers are not allowed as the first character so that JavaScript can easily distinguish identifiers from numbers.) These are all legal identifiers:

i
my_variable_name
v13
_dummy
$str

In ECMAScript v3, identifiers can contain letters and digits from the complete Unicode character set. Prior to this version of the standard, JavaScript identifiers are restricted to the ASCII character set. ECMAScript v3 also allows Unicode escape sequences to appear in identifiers. A Unicode escape is the characters \u followed by 4 hexadecimal digits that specify a 16-bit character encoding. For example, the identifier π could also be written as \u03c0. Although this is an awkward syntax, it makes it possible to translate JavaScript programs that contain Unicode characters into a form that allows them to be manipulated with text editors and other tools that do not support the full Unicode character set.

Finally, identifiers cannot be the same as any of the keywords used for other purposes in JavaScript. The next section lists the special names that are reserved in JavaScript.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

There are a number of reserved words in JavaScript. These are words that you cannot use as identifiers (variable names, function names, and loop labels) in your JavaScript programs. Table 2-1 lists the keywords standardized by ECMAScript v3. These words have special meaning to JavaScript -- they are part of the language syntax itself.

Table 2-1: Reserved JavaScript keywords
`break`	`do`	`if`	`switch`	`typeof`
`case`	`else`	`in`	`this`	`var`
`catch`	`false`

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Computer programs work by manipulating values , such as the number 3.14 or the text "Hello World". The types of values that can be represented and manipulated in a programming language are known as data types, and one of the most fundamental characteristics of a programming language is the set of data types it supports. JavaScript allows you to work with three primitive data types: numbers, strings of text (known as "strings"), and boolean truth values (known as "booleans"). JavaScript also defines two trivial data types, null and undefined, each of which defines only a single value.

In addition to these primitive data types, JavaScript supports a composite data type known as object. An object (that is, a member of the data type object) represents a collection of values (either primitive values, like numbers and strings, or composite values, like other objects). Objects in JavaScript have a dual nature: an object can represent an unordered collection of named values or an ordered collection of numbered values. In the latter case, the object is called an array . Although objects and arrays are fundamentally the same data type in JavaScript, they behave quite differently and will usually be considered distinct types throughout this book.

JavaScript defines another special kind of object, known as a function . A function is an object that has executable code associated with it. A function may be invoked to perform some kind of operation. Like arrays, functions behave differently from other kinds of objects, and JavaScript defines special language syntax for working with them. Thus, we'll treat the function data type independently of the object and array types.

In addition to functions and arrays, core JavaScript defines a few other specialized kinds of objects. These objects do not represent new data types, just new classes of objects. The Date class defines objects that represent dates, the RegExp class defines objects that represent regular expressions (a powerful pattern-matching tool described in Chapter 10), and the Error class defines objects that represent syntax and runtime errors that can occur in a JavaScript program.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Numbers are the most basic data type; they require very little explanation. JavaScript differs from programming languages such as C and Java in that it does not make a distinction between integer values and floating-point values. All numbers in JavaScript are represented as floating-point values. JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard, which means it can represent numbers as large as ±1.7976931348623157 x 10³⁰⁸ and as small as ±5 x 10^-324.

When a number appears directly in a JavaScript program, we call it a numeric literal. JavaScript supports numeric literals in several formats, as described in the following sections. Note that any numeric literal can be preceded by a minus sign (-) to make the number negative. Technically, however, - is the unary negation operator (see Chapter 5), not part of the numeric literal syntax.

In a JavaScript program, a base-10 integer is written as a sequence of digits. For example:

0
3
10000000

The JavaScript number format allows you to exactly represent all integers between -9007199254740992 (-2⁵³) and 9007199254740992 (253), inclusive. If you use integer values larger than this, you may lose precision in the trailing digits. Note, however, that certain integer operations in JavaScript (in particular the bitwise operators described in Chapter 5) are performed on 32-bit integers, which range from -2147483648 (-2³¹) to 2147483647 (2³¹ -1).

In addition to base-10 integer literals, JavaScript recognizes hexadecimal (base-16) values. A hexadecimal literal begins with "0x" or "0X", followed by a string of hexadecimal digits. A hexadecimal digit is one of the digits 0 through 9 or the letters a (or A) through f (or F), which are used to represent values 10 through 15. Examples of hexadecimal integer literals are:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

A string is a sequence of Unicode letters, digits, punctuation characters, and so on -- it is the JavaScript data type for representing text. As you'll see shortly, you can include string literals in your programs by enclosing them in matching pairs of single or double quotation marks. Note that JavaScript does not have a character data type such as char, like C, C++, and Java do. To represent a single character, you simply use a string that has a length of 1.

A string is a sequence of zero or more Unicode characters enclosed within single or double quotes (' or "). Double-quote characters may be contained within strings delimited by single-quote characters, and single-quote characters may be contained within strings delimited by double quotes. String literals must be written on a single line; they may not be broken across two lines. If you need to include a newline character in a string literal, use the character sequence \n , which is documented in the next section. Examples of string literals are:

""  // The empty string: it has zero characters
'testing'
"3.14"
'name="myform"'
"Wouldn't you prefer O'Reilly's book?"
"This string\nhas two lines"
"pi is the ratio of a circle's circumference to its diameter"

As illustrated in the last example string shown, the ECMAScript v1 standard allows Unicode characters within string literals. Implementations prior to JavaScript 1.3, however, typically support only ASCII or Latin-1 characters in strings. As we'll see in the next section, you can also include Unicode characters in your string literals using special "escape sequences." This is useful if your text editor does not provide complete Unicode support.

Note that when you use single quotes to delimit your strings, you must be careful with English contractions and possessives like can't and O'Reilly's. Since the apostrophe is the same as the single-quote character, you must use the backslash character (

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The number and string data types have a large or infinite number of possible values. The boolean data type, on the other hand, has only two. The two legal boolean values are represented by the literals true and false. A boolean value represents a truth value -- it says whether something is true or not.

Boolean values are generally the result of comparisons you make in your JavaScript programs. For example:

a == 4

This code tests to see if the value of the variable a is equal to the number 4. If it is, the result of this comparison is the boolean value true. If a is not equal to 4, the result of the comparison is false.

Boolean values are typically used in JavaScript control structures. For example, the if/else statement in JavaScript performs one action if a boolean value is true and another action if the value is false. You usually combine a comparison that creates a boolean value directly with a statement that uses it. The result looks like this:

if (a == 4)
  b = b + 1;
else
  a = a + 1;

This code checks if a equals 4. If so, it adds 1 to b; otherwise, it adds 1 to a.

Instead of thinking of the two possible boolean values as true and false, it is sometimes convenient to think of them as on (true) and off (false) or yes (true) and no (false). Sometimes it is even useful to consider them equivalent to 1 (true) and 0 (false). (In fact, JavaScript does just this and converts true and false to 1 and 0 when necessary.)

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

A function is a piece of executable code that is defined by a JavaScript program or predefined by the JavaScript implementation. Although a function is defined only once, a JavaScript program can execute or invoke it any number of times. A function may be passed arguments, or parameters, specifying the value or values upon which it is to perform its computation, and it may also return a value that represents the results of that computation. JavaScript implementations provide many predefined functions, such as the Math.sin( ) function that computes the sine of an angle.

JavaScript programs may also define their own functions with code that looks like this:

function square(x)  // The function is named square. It expects one argument, x.
{                   // The body of the function begins here.
  return x*x;       // The function squares its argument and returns that value.
}                   // The function ends here.

Once a function is defined, you can invoke it by following the function's name with an optional comma-separated list of arguments within parentheses. The following lines are function invocations:

y = Math.sin(x);
y = square(x);
d = compute_distance(x1, y1, z1, x2, y2, z2);
move(  );

An important feature of JavaScript is that functions are values that can be manipulated by JavaScript code. In many languages, including Java, functions are only a syntactic feature of the language -- they can be defined and invoked, but they are not data types. The fact that functions are true values in JavaScript gives a lot of flexibility to the language. It means that functions can be stored in variables, arrays, and objects, and it means that functions can be passed as arguments to other functions. This can quite often be useful. We'll learn more about defining and invoking functions, and also about using them as data values, in Chapter 7.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

An object is a collection of named values. These named values are usually referred to as properties of the object. (Sometimes they are called fields of the object, but this usage can be confusing.) To refer to a property of an object, you refer to the object, followed by a period and the name of the property. For example, if an object named image has properties named width and height, we can refer to those properties like this:

image.width
image.height

Properties of objects are, in many ways, just like JavaScript variables; they can contain any type of data, including arrays, functions, and other objects. Thus, you might see JavaScript code like this:

document.myform.button

This code refers to the button property of an object that is itself stored in the myform property of an object named document.

As mentioned earlier, when a function value is stored in a property of an object, that function is often called a method, and the property name becomes the method name. To invoke a method of an object, use the . syntax to extract the function value from the object, and then use the ( ) syntax to invoke that function. For example, to invoke the write( ) method of the Document object, you can use code like this:

document.write("this is a test");

Objects in JavaScript have the ability to serve as associative arrays -- that is, they can associate arbitrary data values with arbitrary strings. When an object is used in this way, a different syntax is generally required to access the object's properties: a string containing the name of the desired property is enclosed within square brackets. Using this syntax, we could access the properties of the image object mentioned previously with code like this:

image["width"]
image["height"]

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

An array is a collection of data values, just as an object is. While each data value contained in an object has a name, each data value in an array has a number, or index . In JavaScript, you retrieve a value from an array by enclosing an index within square brackets after the array name. For example, if an array is named a, and i is a non-negative integer, a[i] is an element of the array. Array indexes begin with zero. Thus, a[2] refers to the third element of the array a.

Arrays may contain any type of JavaScript data, including references to other arrays or to objects or functions. For example:

document.images[1].width

This code refers to the width property of an object stored in the second element of an array stored in the images property of the document object.

Note that the arrays described here differ from the associative arrays described in Section 3.5. The regular arrays we are discussing here are indexed by non-negative integers. Associative arrays are indexed by strings. Also note that JavaScript does not support multidimensional arrays, except as arrays of arrays. Finally, because JavaScript is an untyped language, the elements of an array do not all need to be of the same type, as they do in typed languages like Java. We'll learn more about arrays in Chapter 9.

Arrays can be created with the

Array(
)

constructor function. Once created, any number of indexed elements can easily be assigned to the array:

var a = new Array(  );
a[0] = 1.2;
a[1] = "JavaScript";
a[2] = true;
a[3] = { x:1, y:3 };

Arrays can also be initialized by passing array elements to the Array( ) constructor. Thus, the previous array-creation and -initialization code could also be written:

var a = new Array(1.2, "JavaScript", true, { x:1, y:3 });

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The JavaScript keyword null is a special value that indicates no value. null is usually considered to be a special value of object type -- a value that represents no object. null is a unique value, distinct from all other values. When a variable holds the value null, you know that it does not contain a valid object, array, number, string, or boolean value.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Another special value used occasionally by JavaScript is the undefined value returned when you use either a variable that has been declared but never had a value assigned to it, or an object property that does not exist. Note that this special undefined value is not the same as null.

Although null and the undefined value are distinct, the == equality operator considers them to be equal to one another. Consider the following:

my.prop == null

This comparison is true either if the my.prop property does not exist or if it does exist but contains the value null. Since both null and the undefined value indicate an absence of value, this equality is often what we want. However, if you truly must distinguish between a null value and an undefined value, use the === identity operator or the typeof operator (see Chapter 5 for details).

Unlike null, undefined is not a reserved word in JavaScript. The ECMAScript v3 standard specifies that there is always a global variable named undefined whose initial value is the undefined value. Thus, in a conforming implementation, you can treat undefined as a keyword, as long as you don't assign a value to the variable.

If you are not sure that your implementation has the undefined variable, you can simply declare your own:

var undefined;

By declaring but not initializing the variable, you assure that it has the undefined value. The void operator (see Chapter 5) provides another way to obtain the undefined value.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·

Table of Contents