Nicholas C. Zakas
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.
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
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-10: 0-7645-7908-8 Printed in the United States of America 10 9 8 7 6 5 4 3 2 1
About the Author
Nicholas C. Zakas is a user interface designer for Web applications, specializing in client-side technolo-
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
16 The typeof operator
27 The Number class
26 The Boolean class
25 The Object class
24 Reference Types
23 Type Casting
22 Converting to a number
20 Conversions 21 Converting to a string
18 The String type
18 The Number type
18 The Boolean type
17 The Null type
16 The Undefined type
15 Primitive Types
Acknowledgments vii Introduction xxi
15 Primitive and Reference Values
15 Reserved Words
9 Chapter 2: ECMAScript Basics
6 The Browser Object Model (BOM)
3 The Document Object Model (DOM)
1 A Short History
27 x Contents
The String class
68 Working with Objects
62 The Function class
66 Chapter 3: Object Basics
67 Object-Oriented Terminology
67 Requirements of object-oriented languages
68 Composition of an object
68 Declaration and instantiation
59 No overloading
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
61 The arguments object
29 The instanceof operator
49 Equality operators
33 Unary operators
33 Bitwise operators
37 Boolean operators
43 Multiplicative operators
46 Additive operators
47 Relational operators
50 Conditional operator
58 The switch statement
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
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
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
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 xi xii Contents
DOM HTML Features 178
Regular Expression Support 193
Chapter 7: Regular Expressions 193
Detecting DOM Conformance 189 DOM Level 3 191 Summary 191
NodeIterator 182 TreeWalker 187
DOM Traversal 182
Attributes as properties 178 Table methods 179
Accessing relative nodes 167 Checking the node type 169 Dealing with attributes 169 Accessing specific nodes 171 Creating and manipulating nodes 173
Basic SVG 133 The <script/> tag in SVG 134 Tag placement in SVG 135
DOM Support 167 Using the DOM 167
Introduction to XML 159 An API for XML 162 Hierarchy of nodes 163 Language-Specific DOMs 166
What Is the DOM? 159
Chapter 6: DOM Basics 159
The window object 136 The document object 149 The location object 153 The navigator object 155 The screen object 156
The Browser Object Model 136
Using a RegExp object 194 Extended string methods 195 xiii Contents
Simple Patterns 197
Methodology 234 First Steps 234 Detecting Opera 237
The Browser Detection Script 234
230 Mozilla 230 Opera 232 Safari 233 Epilogue 233
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
Object/feature detection 226 User-agent string detection 226
225 Methods of Browser Detection 226
Validating dates 216 Validating credit cards 218 Validating e-mail addresses 222
Metacharacters 197 Using special characters 197 Character classes 199 Quantifiers 201
Common Patterns 216
Instance properties 213 Static properties 214
Understanding the RegExp Object 212
Alternation 207 Non-capturing groups 209 Lookaheads 210 Boundaries 210 Multiline mode 212
Grouping 205 Backreferences 206
Complex Patterns 205
A (Not So) Brief History of the User-Agent String 227
The Platform/Operating System Detection Script 244
Locating 270 Properties/methods 271
The EventUtil object 292 Adding/removing event handlers 292 Formatting the event object 294 Getting the event object 299 Example 300
Cross-Browser Events 292
Mouse events 280 Keyboard events 284 HTML events 286 Mutation events 291
Types of Events 279
Similarities 274 Differences 276
Detecting Konqueror/Safari 239 Detecting Internet Explorer 241 Detecting Mozilla 242 Detecting Netscape Communicator 4.x 243
Internet Explorer 267 DOM 268
Event Handlers/Listeners 266
Event bubbling 262 Event capturing 264 DOM event flow 265
261 Event Flow 262
261 Events Today
The Full Script 249 Example: A Login Page 252 Summary 259
Methodology 244 First steps 245 Detecting Windows operating systems 245 Detecting Macintosh operating systems 247 Detecting Unix operating systems 248
The Event Object 270 xv Contents
Chapter 10: Advanced DOM Techniques 303Scripting 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
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 xvi Contents
Moving Options 361 Reordering options 361
The comparison function generator 374 Modifying the sortTable() function 375 Sorting in descending order 376 Sorting with different data types 377 Advanced sorting 381
Creating a draggable element 406 Creating a drop target 406 Events 406 Example 408
The code 400 Creating drop targets 403 Advantages and disadvantages 405 zDragDrop 405
Simulated Drag and Drop 399
388 The dataTransfer object 393 The dragDrop() method 397 Advantages and disadvantages 399
387 Drag-and-drop events
387 System Drag and Drop
Sorting a Multicolumn Table 373
Creating an Autosuggest Text Box 362
The comparison function 371 The sortTable() function 371
Sorting a One-Column Table 369
The reverse() method 369
The Starting Point — Arrays 367
Chapter 12: Sorting Tables 367
Matching 362 The guts 363
Summary 409 xvii Contents
Chapter 14: Error Handling 411
XML DOM Support in Browsers 445
XSLT support in Mozilla 477
XSLT support in IE 473
XSLT Support in Browsers 471
XPath support in Mozilla 467
XPath support in IE 467
Introduction to XPath 466
XPath Support in Browsers 465
XML DOM support in Mozilla 450 Making interfaces play together 455
XML DOM support in IE 445
The Importance of Error Handling 411 Errors versus Exceptions 412 Error Reporting 413
432 Venkman – Mozilla’s debugger 435
Debuggers 432Microsoft Script Debugger
Debugging Techniques 428
The onerror event handler 419 The try...catch statement 423
Handling Errors 419
Internet Explorer (Windows) 413 Internet Explorer (MacOS) 415 Mozilla (all platforms) 416 Safari (MacOS X) 417 Opera 7 (all platforms) 418
Summary 479 xviii Contents
Chapter 16: Client-Server Communication 481Cookies 481
Chapter 17: Web Services 509
The WebService object 525 The Temperature Service 527 Using the TemperatureService object 529
A Cross-Browser Approach 525
Enhanced privileges 517 Using the SOAP methods 518 Using WSDL proxies 522
Web Services in Mozilla 516
Using the WebService component 513 WebService component example 515
Web Services in Internet Explorer 513
What is a Web service? 509 WSDL 510
A Quick Web Service Primer 509
Practical Uses 506 Summary 507
The get() method 502 The post() method 505
Intelligent HTTP Requests 502
Performing a GET request 498 Performing a POST request 500
LiveConnect Requests 498
Using headers 495 Copycat implementations 496 Performing a GET request 496 Performing a POST request 497
HTTP Requests 493
Using iframes 491
Hidden Frames 490
Summary 530 xix Contents
Chapter 18: Interacting with Plugins 531
ActiveX Controls 558
Internationalization Concerns 568
The Same Origin Policy 563 Window object issues 564 Mozilla-specific issues 566 Resource limitations 568
Chapter 19: Deployment Issues 563
Why Use Plugins? 531 Popular Plugins 532 MIME Types 533 Embedding Plugins 533
Flash Movies 551
Java Applets 543
Detecting Netscape-style plugins 535 Detecting ActiveX plugins 540 Cross-browser detection 542
Detecting Plugins 535
Including parameters 534 Netscape 4.x 534
Download time 573 Execution time 578 Contents Intellectual Property Issues
593 Microsoft Script Encoder (IE only) 594
597 Netscape’s proposal
598 Implementations 604 ECMAScript for XML
605 The for each..in Loop 607 New classes 607 Implementations 616
Summary 616 Index 617 xx
What Does This Book Cover?
Who Is This Book For?
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
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 http://www.wrox.com/ .
How Is This Book Structured? 1.
2. ECMAScript Basics
The various methods of achieving inheritance are discussed, and these methods are compared and contrasted with inheritance in Java.
6. DOM Basics
7. Regular Expressions
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 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.
11. Forms and Data Integrity
This chapter discusses the importance of data validation when using forms. As I introduce tech- niques for handling validation, I apply concepts introduced earlier, such as regular expressions, events, and DOM manipulation.
12. Sorting Tables
The concept of system drag and drop versus simulated drag and drop is discussed, ending with the creation of a standard drag-and-drop interface that can be used across browsers.
14. Error Handling
16. Client-Server Communication
17. Web Services
18. Interacting with Plugins
19. Deployment Issues
ECMAScript 4 and XML for ECMAScript are discussed.
To help you get the most from the text and keep track of what’s happening, I’ve used a number of con- ventions throughout the book.
Boxes like this one hold important, not-to-be forgotten information that is directly relevant to the surrounding text.
Tips, hints, tricks, and asides to the current discussion are offset and placed in italics like this.
As for styles in the text: We highlight important words when we introduce them
❑ We show keyboard strokes like this: Ctrl+A
❑ We show file names, URLs, and code within the text like so:
We present code in two different ways: ❑ In code examples we highlight new and important code with a gray background.
The gray highlighting is not used for code that’s less important in the present context or has been shown before.
As you work through the examples in this book, you may choose either to type in all the code manually or to use the source code files that accompany the book. All the source code used in this book is available for download at http://www.wrox.com . Once at the site, simply locate the book’s title (either by using the Search box or by using one of the title lists) and click the Download Code link on the book’s detail page to obtain all the source code for the book.
Because many books have similar titles, you may find it easiest to search by ISBN; for this book the ISBN is 0-7645-7908-8.
After you download the code, just decompress it with your favorite compression tool. Alternately, you can go to the main Wrox code download page at http://www.wrox.com/dynamic/books/download. aspx to see the code available for this book and all other Wrox books.
We make every effort to ensure that there are no errors in the text or in the code. However, no one is per- fect, and mistakes do occur. If you find an error in one of our books, like a spelling mistake or faulty piece of code, we would be very grateful for your feedback. By sending in errata you may save another reader hours of frustration and, at the same time, you will be helping us provide even higher quality information.
To find the errata page for this book, go to http://www.wrox.com and locate the title using the Search box or one of the title lists. Then, on the book details page, click the Book Errata link. On this page you can view all errata that has been submitted for this book and posted by Wrox editors. A complete book list including links to each book’s errata is also available at www.wrox.com/misc-pages/booklist.shtml .
If you don’t spot “your” error on the Book Errata page, go to www.wrox.com/contact/techsupport. shtml and complete the form there to send us the error you have found. We’ll check the information and, if appropriate, post a message to the book’s errata page and fix the problem in subsequent editions of the book.
For author and peer discussion, join the P2P forums at p2p.wrox.com . The forums are a Web-based sys- tem for you to post messages relating to Wrox books and related technologies and to interact with other readers and technology users. The forums offer a subscription feature to e-mail you topics of interest of your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts, and your fellow readers are present on these forums. At http://p2p.wrox.com you will find a number of different forums that will help you, not only as you read this book, but also as you develop your own applications. To join the forums, just follow these steps: 1.
Go to p2p.wrox.com and click the Register link.
3. Complete the required information to join as well as any optional information you wish to pro- vide and click Submit.
4. You will receive an e-mail with information describing how to verify your account and com- plete the joining process.
You can read messages in the forums without joining P2P, but in order to post your own messages, youmust join.
After you join, you can post new messages and respond to messages other users post. You can read mes- sages at any time on the Web. If you would like to have new messages from a particular forum e-mailed to you, click the Subscribe to This Forum icon by the forum name in the forum listing. For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to ques- tions about how the forum software works as well as to see many common questions specific to P2P and Wrox books. To read the FAQs, click the FAQ link on any P2P page.
A Shor t Histor y
❑ The Core (ECMAScript) ❑ The Document Object Model (DOM) ❑ The Browser Object Model (BOM)
ECMAScript doesn’t have ties to any browser in particular and, actually, has no methods for user input
or output to speak of. (It is not unlike languages such as C, which rely on external libraries to accomplish such tasks.) So what is ECMAScript? ECMA-262 (p. 2) describes it like this:
“ECMAScript can provide core scripting capabilities for a variety of host environments, and thereforethe core scripting language is specified...apart from any particular host environment.”
A Web browser is considered a host environment for ECMAScript, but it is not the only host environment. Indeed, numerous other environments (such as Nombas’s ScriptEase and Macromedia’s ActionScript, used in both Flash and Director MX) can host ECMAScript implementations. So what does ECMAScript specify outside of a browser? To put it simply, ECMAScript describes the following:
❑ Syntax ❑ Types ❑ Statements ❑ Keywords ❑ Reserved Words ❑ Operators ❑ Objects
Each browser has its own implementation of the ECMAScript interface, which is then extended to con- tain the DOM and BOM (discussed in the following sections). There are other languages that also imple- ment and extend ECMAScript such as Windows Scripting Host (WSH), ActionScript in Macromedia Flash and Director, and Nombas ScriptEase.
The second edition of ECMA-262 was largely editorial in nature. The standard was updated in order to get into strict agreement with ISO/IEC-16262 and didn’t feature any additions, changes, or omissions. ECMAScript implementations typically don’t use the second edition as a measure of conformance. The third edition of ECMA-262 was the first real update to the standard. It provides updates to string handling, the definition of errors, and numeric outputs. It also adds support for regular expressions, new control statements, try...catch exception handling, and small changes to better prepare the standard for internationalization. To many, this marked the arrival of ECMAScript as a true programming language.
What does ECMAScript conformance mean?
In ECMA-262, the definition of ECMAScript conformance is laid out. A scripting language must sub- scribe to four basic tenets: A conforming implementation must support all “types, values, objects, properties, functions,
❑ and program syntax and semantics” (ECMA-262, p. 1) as they are described in ECMA-262.
A conforming implementation must support the Unicode Character Standard. ❑
A conforming implementation may add “additional types, values, objects, properties, and func- ❑ tions” that are not specified in ECMA-262. ECMA-262 describes these additions as primarily new objects or new properties of objects not given in the specification.
A conforming implementation may support “program and regular expression syntax” that are ❑ not defined in ECMA-262 (meaning that the built-in regular expression support is allowed to be altered and extended).
All implementations of ECMAScript must be in agreement with these criteria.
ECMAScript support in Web browsers