professional javascript for web developers

01_579088 ffirs.qxd 3/28/05 11:33 AM Page ii
Professional JavaScript
™
for Web Developers
01_579088 ffirs.qxd 3/28/05 11:33 AM Page i
01_579088 ffirs.qxd 3/28/05 11:33 AM Page ii
Professional JavaScript
™
for Web Developers
Nicholas C. Zakas
01_579088 ffirs.qxd 3/28/05 11:33 AM Page iii
Professional JavaScript
™
for Web Developers
Copyright © 2005 by Wiley Publishing Inc. All rights reserved.
Published by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form
or by any means, electronic, mechanical, photocopying, recording, scanning, or otherwise, except as
permitted under Section 107 or 108 of the 1976 United States Copyright Act, without either the prior
written permission of the Publisher, or authorization through payment of the appropriate per-copy fee
to the Copyright Clearance Center, Inc., 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax
(978) 646-8700. Requests to the Publisher for permission should be addressed to the Legal Department,
Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317)
572-4355, or online at www.wiley.com/go/permissions.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR
MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR
COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL
WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTIC-
ULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMO-

TIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE
SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT
THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PRO-
FESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A
COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOT
THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN
ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A
POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR
THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY
PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE
THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED
BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services please contact our Customer Care Depart-
ment within the United States at (800) 762-2974, outside the United States at (317) 572-3993 or fax (317)
572-4002.
Trademarks: Wiley, the Wiley Publishing logo, Wrox, the Wrox logo, and Programmer to Programmer
are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates. JavaScript is a
trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks are
the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or
vendor mentioned in this book.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print
may not be available in electronic books.
Library of Congress Cataloging-in-Publication Data is available from the publisher.
ISBN-13: 978-0-7645-7908-0
ISBN-10: 0-7645-7908-8
Printed in the United States of America
10 9 8 7 6 5 4 3 2 1
01_579088 ffirs.qxd 3/28/05 11:33 AM Page iv
About the Author
Nicholas C. Zakas is a user interface designer for Web applications, specializing in client-side technolo-

gies such as JavaScript, HTML, and CSS. Nicholas currently works as Senior Software Engineer, Design
Engineering, at MatrixOne, Inc. located in Westford, Massachusetts, USA.
Nicholas has a B.S. in Computer Science from Merrimack College, where he learned traditional pro-
gramming in C and C++. During college, he began investigating the World Wide Web and HTML in his
spare time, eventually teaching himself enough to be hired as Webmaster of a small software company
named Radnet, Inc. in Wakefield, Massachusetts, USA. It was there that Nicholas began learning
JavaScript and working on Web applications.
Nicholas can be reached through his Web site,
/>01_579088 ffirs.qxd 3/28/05 11:33 AM Page v
Credits
Vice President and Executive Group Publisher:
Richard Swadley
Vice President and Publisher:
Joseph B. Wikert
Acquisitions Editor:
Jim Minatel
Editorial Manager:
Mary Beth Wakefield
Development Editor:
Sharon Nash
Senior Production Editor:
Angela Smith
Technical Editor:
Jean-Luc David, Wiley-Dreamtech India Pvt Ltd
Text Design & Composition:
Wiley Composition Services
01_579088 ffirs.qxd 3/28/05 11:33 AM Page vi
vii
Acknowledgments
It takes more than just one person to write a book of this nature, despite the single name on the front

cover. Without the help of numerous individuals, this book would not have been possible.
First are foremost, thanks to everyone at Wiley Publishing, especially Jim Minatel and Sharon Nash, for
providing all the guidance and support that a new author needs.
Thanks to all those who offered their ideas on what a good JavaScript book should include: Keith
Ciociola, Ken Fearnley, John Rajan, and Douglas Swatski.
A special thanks to everyone who reviewed the subject matter ahead of time: Erik Arvidsson, Bradley
Baumann, Guilherme Blanco, Douglas Crockford, Jean-Luc David, Emil A. Eklund, Brett Fielder, Jeremy
McPeak, and Micha Schopman. All your input was excellent and made for a much better book.
Thanks to Drs. Ed and Frances Bernard for keeping me in tip-top health during the writing of this book
and the past few years.
Last, but certainly not least, thanks to my family, mom, dad, and Greg, and my extremely understanding
girlfriend, Emily. Your love and support helped take me from the proposal to the final published copy.
01_579088 ffirs.qxd 3/28/05 11:33 AM Page vii
01_579088 ffirs.qxd 3/28/05 11:33 AM Page viii
ix
Contents
Acknowledgments vii
Introduction xxi
Chapter 1: What Is JavaScript? 1
A Short History 1
JavaScript Implementations 3
ECMAScript 3
The Document Object Model (DOM) 6
The Browser Object Model (BOM) 9
Summary 9
Chapter 2: ECMAScript Basics 11
Syntax 11
Variables 12
Keywords 15
Reserved Words 15

Primitive and Reference Values 15
Primitive Types 16
The typeof operator 16
The Undefined type 17
The Null type 18
The Boolean type 18
The Number type 18
The String type 20
Conversions 21
Converting to a string 22
Converting to a number 23
Type Casting 24
Reference Types 25
The Object class 26
The Boolean class 27
The Number class 27
02_579088 ftoc.qxd 3/28/05 11:33 AM Page ix
x
Contents
The String class 29
The instanceof operator 32
Operators 33
Unary operators 33
Bitwise operators 37
Boolean operators 43
Multiplicative operators 46
Additive operators 47
Relational operators 49
Equality operators 50
Conditional operator 52

Assignment operators 52
Comma operator 53
Statements 53
The if statement 53
Iterative statements 54
Labeled statements 56
The break and continue statements 56
The with statement 58
The switch statement 58
Functions 59
No overloading 61
The arguments object 62
The Function class 63
Closures 65
Summary 66
Chapter 3: Object Basics 67
Object-Oriented Terminology 67
Requirements of object-oriented languages 68
Composition of an object 68
Working with Objects 68
Declaration and instantiation 68
Object references 69
Dereferencing objects 69
Early versus late binding 69
Types of Objects 70
Native objects 70
Built-in objects 81
Host objects 87
02_579088 ftoc.qxd 3/28/05 11:33 AM Page x
xi

Contents
Scope 88
Public, protected, and private 88
Static is not static 88
The this keyword 89
Defining Classes and Objects 90
Factory paradigm 90
Constructor paradigm 92
Prototype paradigm 93
Hybrid constructor/prototype paradigm 94
Dynamic prototype method 95
Hybrid factory paradigm 96
Which one to use? 97
A practical example 97
Modifying Objects 99
Creating a new method 99
Redefining an existing method 100
Very late binding 101
Summary 102
Chapter 4: Inheritance 103
Inheritance in Action 103
Implementing Inheritance 104
Methods of inheritance 105
A more practical example 111
Alternative Inheritance Paradigms 115
zInherit 116
xbObjects 120
Summary 124
Chapter 5: JavaScript in the Browser 125
JavaScript in HTML 125

The <script/> tag 125
External file format 126
Inline code versus external files 127
Tag placement 128
To hide or not to hide 129
The <noscript/> tag 130
Changes in XHTML 131
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xi
xii
Contents
JavaScript in SVG 133
Basic SVG 133
The <script/> tag in SVG 134
Tag placement in SVG 135
The Browser Object Model 136
The window object 136
The document object 149
The location object 153
The navigator object 155
The screen object 156
Summary 157
Chapter 6: DOM Basics 159
What Is the DOM? 159
Introduction to XML 159
An API for XML 162
Hierarchy of nodes 163
Language-Specific DOMs 166
DOM Support 167
Using the DOM 167
Accessing relative nodes 167

Checking the node type 169
Dealing with attributes 169
Accessing specific nodes 171
Creating and manipulating nodes 173
DOM HTML Features 178
Attributes as properties 178
Table methods 179
DOM Traversal 182
NodeIterator 182
TreeWalker 187
Detecting DOM Conformance 189
DOM Level 3 191
Summary 191
Chapter 7: Regular Expressions 193
Regular Expression Support 193
Using a RegExp object 194
Extended string methods 195
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xii
xiii
Contents
Simple Patterns 197
Metacharacters 197
Using special characters 197
Character classes 199
Quantifiers 201
Complex Patterns 205
Grouping 205
Backreferences 206
Alternation 207
Non-capturing groups 209

Lookaheads 210
Boundaries 210
Multiline mode 212
Understanding the RegExp Object 212
Instance properties 213
Static properties 214
Common Patterns 216
Validating dates 216
Validating credit cards 218
Validating e-mail addresses 222
Summary 223
Chapter 8: Browser and Operating System Detection 225
The Navigator Object 225
Methods of Browser Detection 226
Object/feature detection 226
User-agent string detection 226
A (Not So) Brief History of the User-Agent String 227
Netscape Navigator 3.0 and Internet Explorer 3.0 227
Netscape Communicator 4.0 and Internet Explorer 4.0 229
Internet Explorer 5.0 and higher 230
Mozilla 230
Opera 232
Safari 233
Epilogue 233
The Browser Detection Script 234
Methodology 234
First Steps 234
Detecting Opera 237
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xiii
xiv

Contents
Detecting Konqueror/Safari 239
Detecting Internet Explorer 241
Detecting Mozilla 242
Detecting Netscape Communicator 4.x 243
The Platform/Operating System Detection Script 244
Methodology 244
First steps 245
Detecting Windows operating systems 245
Detecting Macintosh operating systems 247
Detecting Unix operating systems 248
The Full Script 249
Example: A Login Page 252
Summary 259
Chapter 9: All about Events 261
Events Today 261
Event Flow 262
Event bubbling 262
Event capturing 264
DOM event flow 265
Event Handlers/Listeners 266
Internet Explorer 267
DOM 268
The Event Object 270
Locating 270
Properties/methods 271
Similarities 274
Differences 276
Types of Events 279
Mouse events 280

Keyboard events 284
HTML events 286
Mutation events 291
Cross-Browser Events 292
The EventUtil object 292
Adding/removing event handlers 292
Formatting the event object 294
Getting the event object 299
Example 300
Summary 301
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xiv
xv
Contents
Chapter 10: Advanced DOM Techniques 303
Scripting Styles 303
DOM style methods 305
Custom tooltips 307
Collapsible sections 308
Accessing style sheets 309
Computed styles 312
innerText and innerHTML 314
outerText and outerHTML 315
Ranges 317
Ranges in the DOM 317
Ranges in Internet Explorer 329
How practical are ranges? 333
Summary 333
Chapter 11: Forms and Data Integrity 335
Form Basics 335
Scripting the <form/> Element 337

Getting form references 337
Accessing form fields 338
Form field commonalities 338
Focus on the first field 339
Submitting forms 340
Submit only once 341
Resetting forms 342
Text boxes 342
Retrieving/changing a text box value 343
Selecting text 344
Text box events 345
Select text automatically 345
Tab forward automatically 346
Limit textarea characters 347
Allowing/blocking characters in text boxes 349
Numeric text boxes with the up/down arrow keys 354
List Boxes and Combo Boxes 356
Accessing options 357
Retrieving/changing the selected option(s) 357
Adding options 359
Removing options 360
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xv
xvi
Contents
Moving Options 361
Reordering options 361
Creating an Autosuggest Text Box 362
Matching 362
The guts 363
Summary 365

Chapter 12: Sorting Tables 367
The Starting Point — Arrays 367
The reverse() method 369
Sorting a One-Column Table 369
The comparison function 371
The sortTable() function 371
Sorting a Multicolumn Table 373
The comparison function generator 374
Modifying the sortTable() function 375
Sorting in descending order 376
Sorting with different data types 377
Advanced sorting 381
Summary 385
Chapter 13: Drag and Drop 387
System Drag and Drop 387
Drag-and-drop events 388
The dataTransfer object 393
The dragDrop() method 397
Advantages and disadvantages 399
Simulated Drag and Drop 399
The code 400
Creating drop targets 403
Advantages and disadvantages 405
zDragDrop 405
Creating a draggable element 406
Creating a drop target 406
Events 406
Example 408
Summary 409
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xvi

xvii
Contents
Chapter 14: Error Handling 411
The Importance of Error Handling 411
Errors versus Exceptions 412
Error Reporting 413
Internet Explorer (Windows) 413
Internet Explorer (MacOS) 415
Mozilla (all platforms) 416
Safari (MacOS X) 417
Opera 7 (all platforms) 418
Handling Errors 419
The onerror event handler 419
The try catch statement 423
Debugging Techniques 428
Using alerts 428
Using the Java console 429
Posting messages to the JavaScript console (Opera 7+ only) 430
Throwing your own errors 431
The JavaScript Verifier 432
Debuggers 432
Microsoft Script Debugger 432
Venkman – Mozilla’s debugger 435
Summary 443
Chapter 15: XML in JavaScript 445
XML DOM Support in Browsers 445
XML DOM support in IE 445
XML DOM support in Mozilla 450
Making interfaces play together 455
XPath Support in Browsers 465

Introduction to XPath 466
XPath support in IE 467
XPath support in Mozilla 467
XSLT Support in Browsers 471
XSLT support in IE 473
XSLT support in Mozilla 477
Summary 479
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xvii
xviii
Contents
Chapter 16: Client-Server Communication 481
Cookies 481
Cookie ingredients 482
Other security restrictions 482
Cookies in JavaScript 483
Cookies on the server 485
Passing cookies between client and server 488
Hidden Frames 490
Using iframes 491
HTTP Requests 493
Using headers 495
Copycat implementations 496
Performing a GET request 496
Performing a POST request 497
LiveConnect Requests 498
Performing a GET request 498
Performing a POST request 500
Intelligent HTTP Requests 502
The get() method 502
The post() method 505

Practical Uses 506
Summary 507
Chapter 17: Web Services 509
A Quick Web Service Primer 509
What is a Web service? 509
WSDL 510
Web Services in Internet Explorer 513
Using the WebService component 513
WebService component example 515
Web Services in Mozilla 516
Enhanced privileges 517
Using the SOAP methods 518
Using WSDL proxies 522
A Cross-Browser Approach 525
The WebService object 525
The Temperature Service 527
Using the TemperatureService object 529
Summary 530
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xviii
xix
Contents
Chapter 18: Interacting with Plugins 531
Why Use Plugins? 531
Popular Plugins 532
MIME Types 533
Embedding Plugins 533
Including parameters 534
Netscape 4.x 534
Detecting Plugins 535
Detecting Netscape-style plugins 535

Detecting ActiveX plugins 540
Cross-browser detection 542
Java Applets 543
Embedding applets 543
Referencing applets in JavaScript 544
Writing applets 545
JavaScript-to-Java communication 546
Java-to-JavaScript communication 548
Flash Movies 551
Embedding Flash movies 552
Referencing Flash movies 552
JavaScript-to-Flash communication 553
Flash-to-JavaScript communication 555
ActiveX Controls 558
Summary 561
Chapter 19: Deployment Issues 563
Security 563
The Same Origin Policy 563
Window object issues 564
Mozilla-specific issues 566
Resource limitations 568
Internationalization Concerns 568
Detecting language using JavaScript 569
Strategies 569
String considerations 570
Optimizing JavaScript 573
Download time 573
Execution time 578
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xix
xx

Contents
Intellectual Property Issues 593
Obfuscating 593
Microsoft Script Encoder (IE only) 594
Summary 595
Chapter 20: The Evolution of JavaScript 597
ECMAScript 4 597
Netscape’s proposal 598
Implementations 604
ECMAScript for XML 605
Approach 605
The for each in Loop 607
New classes 607
Implementations 616
Summary 616
Index 617
02_579088 ftoc.qxd 3/28/05 11:33 AM Page xx
xxi
Introduction
Although once supported by Netscape Enterprise Server and Active Server Pages (ASP) on the server,
JavaScript is primarily a client-side scripting language for use in Web browsers. Its main focus today is
to help developers interact with Web pages and the Web browser window itself.
JavaScript is very loosely based on Java, an object-oriented programming language popularized for use
on the Web by way of embedded applets. Although JavaScript has a similar syntax and programming
methodology, it is not a “light” version of Java. Instead, JavaScript is its own language, finding its home
in Web browsers around the world and enabling enhanced user interaction on Web sites and Web appli-
cations alike.
In this book, JavaScript is covered from its very beginning in the earliest Netscape browsers to the
present-day incarnations flush with support for XML and Web Services. You learn how to extend the
language to suit specific needs and how to create seamless client-server communication without inter-

mediaries such as Java or hidden frames. In short, you learn how to apply JavaScript solutions to
business problems faced by Web developers everywhere.
What Does This Book Cover?
Professional JavaScript for Web Developers provides a developer-level introduction along with the more
advanced and useful features of JavaScript.
Starting at the beginning, the book explores how JavaScript originated and evolved into what it is today.
A detailed discussion of the components that make up a JavaScript implementation follows, with spe-
cific focus on standards such as ECMAScript and the Document Object Model (DOM). The differences in
JavaScript implementations used in different popular Web browsers are also discussed.
Building on that base, the book moves on to cover basic concepts of JavaScript including its version of
object-oriented programming, inheritance, and its use in various markup languages such as HTML. An
in-depth examination of events and event handling is followed by an exploration of browser detection
techniques and a guide to using regular expressions in JavaScript. The book then takes all this knowl-
edge and applies it to creating dynamic user interfaces.
The last part of the book is focused on issues related to the deployment of JavaScript solutions in Web
applications. These topics include error handling, debugging, security, optimization/obfuscation, XML,
and Web Services.
03_579088 flast.qxd 3/28/05 11:34 AM Page xxi
xxii
Introduction
Who Is This Book For?
This book is aimed at three groups of readers:
❑ Experienced developers familiar with object-oriented programming who are looking to learn
JavaScript as it relates to traditional OO languages such as Java and C++.
❑ Web application developers attempting to enhance the usability of their Web sites and Web
applications.
❑ Novice JavaScript developers aiming to better understand the language.
In addition, familiarity with the following related technologies is a strong indicator that this book is
for you:
❑ XML

❑ XSLT
❑ Java
❑ Web Services
❑ HTML
❑ CSS
This book is not aimed at beginners lacking a basic computer science background or those looking to
add some simple user interactions to Web sites. These readers should instead refer to Wrox’s Beginning
JavaScript, Second Edition (Wiley Publishing, Inc., ISBN 0-7645-5587-1).
What You Need to Use This Book
To run the samples in the book, you need the following:
❑ Windows 2000, Windows Server 2003, Windows XP, or Mac OS X
❑ Internet Explorer 5.5 or higher (Windows), Mozilla 1.0 or higher (all platforms), Opera 7.5 or
higher (all platforms), or Safari 1.2 or higher (Mac OS X).
The complete source code for the samples is available for download from the Web site at

How Is This Book Structured?
1. What Is JavaScript?
This chapter explains the origins of JavaScript: where it came from, how it evolved, and what it
is today. Concepts introduced include the relationship between JavaScript and ECMAScript, the
Document Object Model (DOM), and the Browser Object Model (BOM). A discussion of the rele-
vant standards from the European Computer Manufacturer’s Association (ECMA) and the
World Wide Web Consortium (W3C) is also included.
03_579088 flast.qxd 3/28/05 11:34 AM Page xxii
xxiii
Introduction
2. ECMAScript Basics
This chapter examines the core technology upon which JavaScript is built, ECMAScript. This
chapter describes the basic syntax and concepts necessary to write JavaScript code, from declar-
ing variables and functions to using and understanding primitive and reference values.
3. Object Basics

This chapter focuses on the foundations of object-oriented programming (OOP) in JavaScript.
Topics covered include defining custom objects using a variety of different methods, creating
object instances, and understanding the similarities and differences to OOP in JavaScript and Java.
4. Inheritance
This chapter continues the exploration of OOP in JavaScript, describing how inheritance works.
The various methods of achieving inheritance are discussed, and these methods are compared
and contrasted with inheritance in Java.
5. JavaScript in the Browser
This chapter explains how to include JavaScript in Web pages made with a variety of languages,
including Hyper Text Markup Language (HTML), Scalable Vector Graphics (SVG), and XML
User Interface Language (XUL). This chapter also introduces the Browser Object Model (BOM)
and its various objects and interfaces.
6. DOM Basics
This chapter introduces the DOM as implemented in JavaScript. It includes an introduction to
DOM concepts of specific value to Web developers. These concepts are applied later in exam-
ples using HTML, SVG, and XUL.
7. Regular Expressions
This chapter focuses on the JavaScript implementation of regular expressions, which are a pow-
erful tool for data validation and string manipulation. The origins of regular expressions are
explored, as well as its syntax and usage across a variety of programming languages. The chap-
ter ends with an explanation of the similarities and differences in JavaScript’s implementation.
8. Browser and Operating System Detection
This chapter explains the importance of writing JavaScript to run on a variety of Web browsers.
The two methods of browser detection, object/feature detection and user-agent string detection,
are discussed; the advantages and disadvantages of each approach are listed.
9. All about Events
This chapter discusses one of the most important concepts in JavaScript: events. Events are the
main way to tie JavaScript to a Web-user interface regardless of the markup language being
used. This chapter describes the various methods of handling events and the concept of event
flow (including bubbling and capturing).

10. Advanced DOM Techniques
This chapter introduces some of the more advanced features of the DOM, including ranges and
style-sheet manipulation. I give examples of when and how to use these technologies, and I also
discuss how to achieve cross-browser support given the differences in implementations.
03_579088 flast.qxd 3/28/05 11:34 AM Page xxiii