contents at a glance - professional of...internet explorer 4’s dhtml object model ... dynamic...

CompRef_2010 / JavaScript: The Complete Reference, 3rd Edition /Powell / 007174 120-8

Contents at a Glance

Part I Introduction

1 Introduction to JavaScript 3

2 Overview of JavaScript Core Language Features 37

Part II Core Language

3 Data Types and Variables 81

4 Operators, Expressions, and Statements 119

5 Functions 159

6 Objects 181

7 Array, Date, Math, and Type-Related Objects 217

8 Regular Expressions 267

9 JavaScript Object Models 297

10 The Standard Document Object Model 327

11 Event Handling 415

Part III Applied JavaScript

12 Windows, Frames, and Overlays 475

13 Form Handling 549

14 User Interface Elements 611

15 Ajax and Remote JavaScript 647

16 Browser Management 715

17 Media Management 771

18 Trends and Practices 855

Appendix JavaScript Reserved Words 913

Index 919

v

120-8FM.indd 0v120-8FM.indd 0v 6/29/12 10:42 AM6/29/12 10:42 AM


vii

Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

Part I Introduction

Chapter 1 Introduction to JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Hello JavaScript World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Hello Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Adding JavaScript to XHTML Documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

The <script> Element. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Event Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Linked Scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

JavaScript Pseudo-URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

JavaScript Usage Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Script Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

The <noscript> Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Language Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Cross-Browser Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Living with Other Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

JavaScript: A Real Programming Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

History of JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Common Uses of JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

The Rise of JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

The Future of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Chapter 2 Overview of JavaScript Core Language Features . . . . . . . . . . . . . . . . . . . . . . . . 37 Basic Defi nitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Execution Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Case Sensitivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

HTML and Case Sensitivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Whitespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Semicolons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Basic Data Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Weak Typing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Type Conversion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Contents

120-8FM.indd 0vii120-8FM.indd 0vii 6/29/12 10:42 AM6/29/12 10:42 AM


viii JavaScript: The Complete Reference

Composite Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Functions as Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Regular Expression Literals and Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Expressions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Arithmetic Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Assignment Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Logical Operators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Conditional Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Type Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Comma Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Relational Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Operator Precedence and Associativity . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Flow Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Loop Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Input and Output in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Scoping Rules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

ECMAScript 5 Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

“use strict”; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Native JSON Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Function.prototype.bind( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

ISO Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Native Array Additions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

String.prototype.trim( ). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Object/Property Additions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Emerging Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Part II Core Language

Chapter 3 Data Types and Variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Key Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Weak Typing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

JavaScript’s Primitive Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Booleans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Undefi ned and Null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Composite Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

The typeof Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Type Conversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Conversion Rules for Primitive Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

120-8FM.indd 0viii120-8FM.indd 0viii 6/29/12 10:42 AM6/29/12 10:42 AM


Contents ix

Promotion of Primitive Data to Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Explicit Type Conversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Identifi ers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Variable Declaration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Implicit Variable Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Variable Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Constants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Chapter 4 Operators, Expressions, and Statements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Statement Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Whitespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Termination: Semicolons and Returns . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Assignment Operator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Arithmetic Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Bitwise Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Bitwise Shift Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Combining Arithmetic and Bitwise Operations with Assignment. . . . . . . 129

Increment and Decrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Comparison Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Logical Operators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

? Operator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Comma Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

void Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

typeof. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Object Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Operator Precedence and Associativity . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Core JavaScript Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

if Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

switch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

while Loops. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

do-while Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

for Loops. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Loop Control with continue and break . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Object-Related Statements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Other Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Chapter 5 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Function Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Parameter Passing Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Return Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Parameter Passing: In and Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Global and Local Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Variable Naming for Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Inner Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Functions as Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Function Literals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

120-8FM.indd 0ix120-8FM.indd 0ix 6/29/12 10:42 AM6/29/12 10:42 AM


x JavaScript: The Complete Reference

Static Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Advanced Parameter Passing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Advanced Function Properties and Methods . . . . . . . . . . . . . . . . . . . . . . . 175

Recursive Functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Chapter 6 Objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Objects in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Object Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Object Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Object Destruction and Garbage Collection . . . . . . . . . . . . . . . . . . . . . . . 185

Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Objects Are Reference Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

Common Properties and Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

Prototype-Based Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Class Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Inheritance via the Prototype Chain. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Overriding Default Methods and Properties . . . . . . . . . . . . . . . . . . . . . . . 210

ECMAScript 5 Object-Related Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

JavaScript’s Object-Oriented Reality. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Chapter 7 Array, Date, Math, and Type-Related Objects . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Accessing Array Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Adding and Changing Array Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Removing Array Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

The length Property. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Arrays as Stacks and Queues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Manipulating Arrays. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Multidimensional Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Extending Arrays with Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

ECMAScript 5 Array Additions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Creating Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Manipulating Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

ECMAScript 5 Date Additions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

Global . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

Random Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Examining Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Manipulating Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Marking Up Strings as Traditional HTML . . . . . . . . . . . . . . . . . . . . . . . . . 262

ECMAScript 5 String Changes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

120-8FM.indd 0x120-8FM.indd 0x 6/29/12 10:42 AM6/29/12 10:42 AM


Contents xi

Chapter 8 Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 The Need for Regular Expressions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Introduction to JavaScript Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . 268

Creating Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

RegExp Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

test( ). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Subexpressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

compile( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

exec( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

RegExp Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

String Methods for Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

search( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

split( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

replace( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

match( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Advanced Regular Expressions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Multiline Matching. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Noncapturing Parentheses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Lookahead . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Greedy Matching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Limitations of Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Chapter 9 JavaScript Object Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Object Model Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

The Initial JavaScript Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

The Document Object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

Accessing Document Elements by Position . . . . . . . . . . . . . . . . . . . . . . . . 306

Accessing Document Elements by Name . . . . . . . . . . . . . . . . . . . . . . . . . . 307

Simple Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312

Setting Event Handlers Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312

Direct Assignment of Event Handlers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

Setting Event Listeners. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

Invoking Event Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

JavaScript + DOM + Selection + Events = Program . . . . . . . . . . . . . . . . . . . . . . . 316

The Evolution of the JavaScript Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . 319

The Early Evolution of Browser Object Models . . . . . . . . . . . . . . . . . . . . . 319

DHTML-Oriented Object Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Internet Explorer 4’s DHTML Object Model. . . . . . . . . . . . . . . . . . . . . . . 322

Beyond the DHTML Object Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Chapter 10 The Standard Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 DOM Flavors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

What Browsers Say Is Implemented . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Document Trees. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

Basic Element Access: getElementById( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Tree Traversal Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

Other Element Access Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

getElementsByName( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Common JavaScript Collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

120-8FM.indd 0xi120-8FM.indd 0xi 6/29/12 10:42 AM6/29/12 10:42 AM


xii JavaScript: The Complete Reference

getElementsByTagName( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

Common Tree Traversal Starting Points . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

document.getElementsByClassName( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

querySelector( ) and querySelectorAll( ). . . . . . . . . . . . . . . . . . . . . . . . . . 353

Creating Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Appending and Inserting Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

Text Nodes and normalize( ) Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

insertBefore( ) method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Other Insertion Methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Dynamic Markup Insertion Realities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

innerHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

outerHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

innerText and outerText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

insertAdjacentHTML( ) and insertAdjacentText( ) . . . . . . . . . . . . . . . . . 367

document.write( ) and document.writeln( ) . . . . . . . . . . . . . . . . . . . . . . . 368

Copying Nodes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

Deleting and Replacing Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

Modifying Text Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

Manipulating Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Attribute Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376

Other Node Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

Namespaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

The DOM and HTML Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384

HTML Element Mappings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388

DOM Table Manipulation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394

The DOM and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

Inline Style Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Dynamic Style Using Classes and Collections. . . . . . . . . . . . . . . . . . . . . . . 403

Computed Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Accessing Complex Style Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

DOM Traversal API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

DOM Range Selections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Continued DOM Evolution. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

Chapter 11 Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 Overview of Events and Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

The Traditional Event Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Event Binding with HTML Attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Binding Event Handler Attributes with JavaScript. . . . . . . . . . . . . . . . . . . 425

Event Handler Scope Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Return Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

Firing Events Manually. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

Overview of Modern Event Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432

Internet Explorer’s Proprietary Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434

attachEvent( ) and detachEvent( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434

Event Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Event Bubbling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Simulating Event Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

Event Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

120-8FM.indd 0xii120-8FM.indd 0xii 6/29/12 10:42 AM6/29/12 10:42 AM


Contents xiii

DOM Event Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

Traditional Binding Changes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

addEventListener( ) and removeEventListener( ). . . . . . . . . . . . . . . . . . . 444

Event Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446

Preventing Default Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448

Controlling Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Event Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Event Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

Mouse Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

UI Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458

Focus Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

Keyboard Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460

Text Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Mutation Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Nonstandard Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465

Browser State and Loading Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468

Event Model Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

Part III Applied JavaScript

Chapter 12 Windows, Frames, and Overlays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 Introduction to the Window Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475

Dialogs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480

alert( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480

confi rm( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481

prompt( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

Emerging and Proprietary Dialog Methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

showModalDialog( ). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

showModelessDialog( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485

createPopup( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485

Opening and Closing Generic Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487

Window Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490

Detecting and Controlling Window Chrome. . . . . . . . . . . . . . . . . . . . . . . . . . . . 497

Practicalities of Spawned Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498

Building Window Contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

Overlays Instead of Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505

Controlling Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

focus( ) and blur( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

stop( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

print( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

fi nd( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Moving Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511

Resizing Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511

Scrolling Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512

Accessing and Setting a Window’s Location. . . . . . . . . . . . . . . . . . . . . . . . 516

Hash Values in URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520

Manipulating a Window’s History. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522

pushstate( ) and replacestate( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523

Trying to Control the Window’s Status Bar . . . . . . . . . . . . . . . . . . . . . . . . 525

120-8FM.indd 0xiii120-8FM.indd 0xiii 6/29/12 10:42 AM6/29/12 10:42 AM


xiv JavaScript: The Complete Reference

Setting Window Timeouts and Intervals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527

Window Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530

Interwindow Communication Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534

Interwindow Message Passing with postMessage( ) . . . . . . . . . . . . . . . . . . 536

Frames: A Special Case of Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538

Inline Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543

Applied Frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548

Chapter 13 Form Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 The Need for JavaScript Form Checking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549

Form Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550

Accessing Forms and Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552

Form Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554

Common Input Element Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555

Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557

Traditional Text Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560

HTML5 Semantic Text Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563

Text Areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565

Checkboxes and Radio Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567

Select Menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570

Date Pickers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574

Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576

Sliders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577

File Upload Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578

Hidden Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582

Other Form Features: Label, Fieldset, Output, and Legend. . . . . . . . . . . 583

Form Usability and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

First Field Focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584

Labels and Field Selection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584

Advisory and Status Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585

Data Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587

Disabled and Read-Only Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587

Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589

Abstracting Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591

Error Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599

onchange Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602

Keyboard Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603

HTML5 Validation Improvements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

Validation Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

Validation Properties and Methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606

novalidate Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

Miscellaneous HTML5 Form Changes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

Internationalization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610

Chapter 14 User Interface Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611 Adding JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611

Exploring Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616

Graceful Degradation Approaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621

120-8FM.indd 0xiv120-8FM.indd 0xiv 6/29/12 10:42 AM6/29/12 10:42 AM


Contents xv

HTML5 Support for Rich Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623

Menus and Context Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623

Drag-and-Drop Functionality. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631

Content Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639

Revealing Content on Demand. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644

User Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646

Chapter 15 Ajax and Remote JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647 Ajax Defi ned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647

Hello Ajax World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649

XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654

XHR Instantiation and Cross-Browser Concerns. . . . . . . . . . . . . . . . . . . . . . . . . 657

ActiveX XHR Fallback Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658

A Cross-Browser XHR Wrapper. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

XHR Request Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660

Synchronous Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661

Asynchronous Requests. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 662

Sending Data via GET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664

Sending Data via Post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665

Using Other HTTP Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666

Setting Request Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 667

Response Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668

readyState Explored . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668

status and statusText. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670

responseText. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671

responseXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671

response and responseType. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674

JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676

Script Responses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681

Response Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682

Controlling Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683

Authentication with XHRs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684

Propriety and Emerging XHR Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686

Managing MIME Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686

Multipart Responses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687

onload, onloadstart, and onloadend. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687

onprogress and Partial Responses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689

onerror . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690

Form Serialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690

File Uploads with iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691

Cross-Domain Ajax Requests. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692

Internet Explorer’s XDRs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695

Non-XHR Communication Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698

Image Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698

Script Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701

Comet and Sockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702

Polling: Fast or Long . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705

The Long Slow Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707

WebSockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709

120-8FM.indd 0xv120-8FM.indd 0xv 6/29/12 10:42 AM6/29/12 10:42 AM


xvi JavaScript: The Complete Reference

Ajax Implications and Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 713

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714

Chapter 16 Browser Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715 Browser Detection Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715

The Navigator Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716

What to Detect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719

Technology Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720

Visual Detection: Screen Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725

User Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 734

Network State and Performance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738

Simple Page Load Metrics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739

window.performance.timing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740

Browser Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742

Simulating Browser Button Presses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743

State Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749

Cookies in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749

Using Cookies for User State Management . . . . . . . . . . . . . . . . . . . . . . . . 754

Cookie Limitations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 758

Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 758

IndexedDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760

AppCache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763

Script Execution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765

Web Workers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 770

Chapter 17 Media Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 771 Image Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 771

Applied Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775

DHTML, DOMEffects, and Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782

Client-Side Bitmap Graphics with <canvas>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788

Drawing and Styling Lines and Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 792

Drawing Arcs and Curves. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 793

Scaling, Rotating, and Translating Drawings . . . . . . . . . . . . . . . . . . . . . . . 802

Using Bitmaps in Drawings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 806

Text Support for <canvas> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 808

Compositing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 812

Saving State. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814

<canvas> Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814

Client-Side Vector Graphics with SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 822

Including SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 822

Drawing with SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 823

SVG Interaction and Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 823

HTML5 Media Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 825

<video> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 825

<audio> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 830

Media Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 831

Plug-Ins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 832

Embedding Content for Plug-Ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 833

MIME Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 833

120-8FM.indd 0xvi120-8FM.indd 0xvi 6/29/12 10:42 AM6/29/12 10:42 AM


Contents xvii

Detecting Specifi c Plug-Ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 837

Interacting with Plug-Ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 839

ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845

Including ActiveX Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845

Interacting with ActiveX Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 847

Java Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 849

Including Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 849

Java Detection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 850

Accessing Applets in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 850

Accessing JavaScript with Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 853

The Uncertain Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 853

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 854

Chapter 18 Trends and Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 855 Writing Quality JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 855

Coding Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 856

Comments and Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 858

Understanding Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861

Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 869

Defensive Programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 873

Utilizing Frameworks and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 879

Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 883

JavaScript Protection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 884

JavaScript’s Security Policy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 886

Same-Origin Policy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 886

Trusted External Scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 888

Cross-Site Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 891

Cross-Site Request Forgery (CSRF). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 893

Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 895

Performance Measurements and Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . 895

Page-Load Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 897

Runtime Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 902

Trends. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 908

JavaScript Everywhere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 908

“Fixing” and Hiding JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 909

Accepting JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 911

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 911

Appendix JavaScript Reserved Words . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 913 Reserved Quirks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 919

120-8FM.indd 0xvii120-8FM.indd 0xvii 6/29/12 10:42 AM6/29/12 10:42 AM