javascript andamp; dhtml cookbook, 2nd edition

www.it-ebooks.info

JavaScript & DHTML Cookbook ™

www.it-ebooks.info

Other resources from O’Reilly

Related titles Adding Ajax

CSS Cookbook™

CSS: The Definitive Guide

Dynamic HTML: The Defini￾tive Reference

HTML & XHTML: The

Definitive Guide

JavaScript: The Definitive

Guide

Learning JavaScript

oreilly.com oreilly.com is more than a complete catalog of O’Reilly books.

You’ll also find links to news, events, articles, weblogs, sample

chapters, and code examples.

oreillynet.com is the essential portal for developers interested in

open and emerging technologies, including new platforms, pro￾gramming languages, and operating systems.

Conferences O’Reilly brings diverse innovators together to nurture the

ideas that spark revolutionary industries. We specialize in

documenting the latest tools and systems, translating the in￾novator’s knowledge into useful skills for those in the

trenches. Visit conferences.oreilly.com for our upcoming

events.

Safari Bookshelf (safari.oreilly.com) is the premier online refer￾ence library for programmers and IT professionals. Conduct

searches across more than 1,000 books. Subscribers can zero in

on answers to time-critical questions in a matter of seconds.

Read the books on your Bookshelf from cover to cover or sim￾ply flip to the page you need. Try it today for free.

www.it-ebooks.info

JavaScript & DHTML Cookbook™

SECOND EDITION

Danny Goodman

Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo

www.it-ebooks.info

JavaScript and DHTML Cookbook™, Second Edition

by Danny Goodman

Copyright © 2007, 2003 Danny Goodman. All rights reserved.

Printed in the United States of America.

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions

are also available for most titles (safari.oreilly.com). For more information, contact our

corporate/institutional sales department: (800) 998-9938 or [email protected].

Editor: Tatiana Apandi

Production Editor: Laurel R.T. Ruma

Proofreader: Audrey Doyle

Indexer: Ellen Troutman Zaig

Cover Designer: Karen Montgomery

Interior Designer: David Futato

Illustrators: Robert Romano and Jessamyn Read

Printing History:

April 2003: First Edition.

August 2007: Second Edition.

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of

O’Reilly Media, Inc. The Cookbook series designations, JavaScript and DHTML Cookbook, the image of

a howler monkey, and related trade dress are trademarks of O’Reilly Media, Inc.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as

trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a

trademark claim, the designations have been printed in caps or initial caps.

While every precaution has been taken in the preparation of this book, the publisher and author assume

no responsibility for errors or omissions, or for damages resulting from the use of the information

contained herein.

This book uses RepKover™

, a durable and flexible lay-flat binding.

ISBN-10: 0-596-51408-5

ISBN-13: 978-0-596-51408-2

[M]

www.it-ebooks.info

v

Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

1. Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 Concatenating (Joining) Strings 4

1.2 Improving String Handling Performance 6

1.3 Accessing Substrings 7

1.4 Changing String Case 8

1.5 Testing Equality of Two Strings 9

1.6 Testing String Containment Without Regular Expressions 11

1.7 Testing String Containment with Regular Expressions 13

1.8 Searching and Replacing Substrings 14

1.9 Using Special and Escaped Characters 15

1.10 Reading and Writing Strings for Cookies 17

1.11 Converting Between Unicode Values and String Characters 20

1.12 Encoding and Decoding URL Strings 21

1.13 Encoding and Decoding Base64 Strings 23

2. Numbers and Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.1 Converting Between Numbers and Strings 31

2.2 Testing a Number’s Validity 33

2.3 Testing Numeric Equality 34

2.4 Rounding Floating-Point Numbers 35

2.5 Formatting Numbers for Text Display 36

2.6 Converting Between Decimal and Hexadecimal Numbers 39

2.7 Generating Pseudorandom Numbers 41

2.8 Calculating Trigonometric Functions 41

2.9 Creating a Date Object 42

www.it-ebooks.info

vi | Table of Contents

2.10 Calculating a Previous or Future Date 43

2.11 Calculating the Number of Days Between Two Dates 45

2.12 Validating a Date 47

3. Arrays and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.1 Creating a Simple Array 54

3.2 Creating a Multidimensional Array 56

3.3 Converting Between Arrays and Strings 57

3.4 Doing Something with the Items in an Array 59

3.5 Sorting a Simple Array 61

3.6 Combining Arrays 63

3.7 Dividing Arrays 64

3.8 Creating a Custom Object 65

3.9 Simulating a Hash Table for Fast Array Lookup 69

3.10 Doing Something with a Property of an Object 71

3.11 Sorting an Array of Objects 72

3.12 Customizing an Object’s Prototype 74

3.13 Converting Arrays and Custom Objects to Strings 79

3.14 Using Objects to Reduce Naming Conflicts 82

4. Variables, Functions, and Flow Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

4.1 Creating a JavaScript Variable 85

4.2 Creating a Named Function 89

4.3 Nesting Named Functions 92

4.4 Creating an Anonymous Function 93

4.5 Delaying a Function Call 94

4.6 Branching Execution Based on Conditions 97

4.7 Handling Script Errors Gracefully 101

4.8 Improving Script Performance 103

5. Browser Feature Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

5.1 Detecting the Browser Brand 113

5.2 Detecting an Early Browser Version 113

5.3 Detecting the Internet Explorer Version 115

5.4 Detecting the Mozilla Version 116

5.5 Detecting the Safari Version 118

5.6 Detecting the Opera Version 119

5.7 Detecting the Client Operating System 120

5.8 Detecting Object Support 121

www.it-ebooks.info

Table of Contents | vii

5.9 Detecting Object Property and Method Support 124

5.10 Detecting W3C DOM Standard Support 126

5.11 Detecting the Browser Written Language 127

5.12 Detecting Cookie Availability 128

5.13 Defining Browser- or Feature-Specific Links 129

5.14 Testing on Multiple Browser Versions 130

6. Managing Browser Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

6.1 Living with Browser Window Control Limitations 135

6.2 Setting the Main Window’s Size 136

6.3 Positioning the Main Window 137

6.4 Maximizing the Main Window 138

6.5 Creating a New Window 139

6.6 Bringing a Window to the Front 143

6.7 Communicating with a New Window 144

6.8 Communicating Back to the Main Window 147

6.9 Using Internet Explorer Modal/Modeless Windows 148

6.10 Simulating a Cross-Browser Modal Dialog Window 151

6.11 Simulating a Window with Layers 158

7. Managing Multiple Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

7.1 Creating a Blank Frame in a New Frameset 178

7.2 Changing the Content of One Frame from Another 179

7.3 Changing the Content of Multiple Frames at Once 181

7.4 Replacing a Frameset with a Single Page 182

7.5 Avoiding Being “Framed” by Another Site 183

7.6 Ensuring a Page Loads in Its Frameset 184

7.7 Reading a Frame’s Dimensions 187

7.8 Resizing Frames 188

7.9 Setting Frameset Specifications Dynamically 192

8. Dynamic Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

8.1 Auto-Focusing the First Text Field 197

8.2 Performing Common Text Field Validations 198

8.3 Preventing Form Submission upon Validation Failure 204

8.4 Auto-Focusing an Invalid Text Field Entry 207

8.5 Using a Custom Validation Object 208

8.6 Changing a Form’s Action 213

8.7 Blocking Submissions from the Enter Key 214

www.it-ebooks.info

viii | Table of Contents

8.8 Advancing Text Field Focus with the Enter Key 215

8.9 Submitting a Form by an Enter Key Press in Any Text Box 216

8.10 Disabling Form Controls 217

8.11 Hiding and Showing Form Controls 219

8.12 Allowing Only Numbers (or Letters) in a Text Box 221

8.13 Auto-Tabbing for Fixed-Length Text Boxes 223

8.14 Changing select Element Content 224

8.15 Copying Form Data Between Pages 227

9. Managing Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

9.1 Equalizing the IE and W3C Event Models 236

9.2 Initiating a Process After the Page Loads 240

9.3 Appending Multiple Load Event Handlers 242

9.4 Determining the Coordinates of a Click Event 244

9.5 Preventing an Event from Performing Its Default Behavior 248

9.6 Blocking Duplicate Clicks 251

9.7 Determining Which Element Received an Event 252

9.8 Determining Which Mouse Button Was Pressed 254

9.9 Reading Which Character Key Was Typed 256

9.10 Reading Which Noncharacter Key Was Pressed 257

9.11 Determining Which Modifier Keys Were Pressed During an Event 260

9.12 Determining the Element the Cursor Rolled From/To 262

9.13 Synchronizing Sounds to Events 266

10. Page Navigation Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

10.1 Loading a New Page or Anchor 271

10.2 Keeping a Page Out of the Browser History 273

10.3 Using a select Element for Navigation 274

10.4 Passing Data Between Pages via Cookies 276

10.5 Passing Data Between Pages via Frames 278

10.6 Passing Data Between Pages via URLs 280

10.7 Creating a Contextual (Right-Click) Menu 283

10.8 Creating Drop-Down Navigation Menus 291

10.9 Providing Navigation Trail Menus 305

10.10 Creating Expandable Menus 308

10.11 Creating Collapsible XML Menus 320

www.it-ebooks.info

Table of Contents | ix

11. Managing Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

11.1 Assigning Style Sheet Rules to an Element Globally 333

11.2 Assigning Style Sheet Rules to a Subgroup of Elements 334

11.3 Assigning Style Sheet Rules to an Individual Element 336

11.4 Importing External Style Sheets 337

11.5 Importing Browser- or Operating System-Specific Style Sheets 338

11.6 Changing Imported Style Sheets After Loading 340

11.7 Enabling/Disabling Style Sheets 341

11.8 Toggling Between Style Sheets for an Element 342

11.9 Overriding a Style Sheet Rule 343

11.10 Turning Arbitrary Content into a Styled Element 344

11.11 Creating Center-Aligned Body Elements 345

11.12 Reading Effective Style Sheet Property Values 346

11.13 Forcing Recent Browsers into Standards-Compatibility Mode 348

12. Visual Effects for Stationary Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351

12.1 Precaching Images 354

12.2 Swapping Images (Rollovers) 356

12.3 Reducing Rollover Image Downloads with JavaScript 358

12.4 Reducing Rollover Image Downloads with CSS 362

12.5 Dynamically Changing Image Sizes 366

12.6 Changing Text Style Properties 367

12.7 Offering Body Text Size Choices to Users 370

12.8 Creating Custom Link Styles 374

12.9 Changing Page Background Colors and Images 375

12.10 Hiding and Showing Elements 378

12.11 Adjusting Element Transparency 379

12.12 Creating Transition Visual Effects 381

12.13 Drawing Charts in the Canvas Element 385

13. Positioning HTML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

13.1 Making an Element Positionable in the Document Space 397

13.2 Connecting a Positioned Element to a Body Element 398

13.3 Controlling Positioning via a DHTML JavaScript Library 400

13.4 Deciding Between div and span Containers 407

13.5 Adjusting Positioned Element Stacking Order (Z-order) 409

13.6 Centering an Element on Top of Another Element 410

13.7 Centering an Element in a Window or Frame 412

www.it-ebooks.info

x | Table of Contents

13.8 Determining the Location of a Nonpositioned Element 414

13.9 Animating Straight-Line Element Paths 415

13.10 Animating Circular Element Paths 419

13.11 Creating a Draggable Element 421

13.12 Scrolling div Content 426

13.13 Creating a Custom Scrollbar 432

13.14 Creating a Slider Control 445

14. Creating Dynamic Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452

14.1 Writing Dynamic Content During Page Loading 453

14.2 Creating New Page Content Dynamically 454

14.3 Including External HTML Content 456

14.4 Embedding XML Data 458

14.5 Embedding Data As JavaScript Objects 460

14.6 Transforming XML Data into HTML Tables 463

14.7 Transforming JavaScript Objects into HTML Tables 466

14.8 Converting an XML Node Tree to JavaScript Objects 469

14.9 Creating a New HTML Element 470

14.10 Creating Text Content for a New Element 473

14.11 Creating Mixed Element and Text Nodes 474

14.12 Inserting and Populating an iframe Element 476

14.13 Getting a Reference to an HTML Element Object 478

14.14 Referencing All Elements of the Same Class 480

14.15 Replacing Portions of Body Content 482

14.16 Removing Body Content 483

14.17 Using XMLHttpRequest for a REST Request 485

14.18 Using XMLHttpRequest for a SOAP Call 488

14.19 Sorting Dynamic Tables 491

14.20 Walking the Document Node Tree 494

14.21 Capturing Document Content 498

15. Dynamic Content Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500

15.1 Displaying a Random Aphorism 501

15.2 Converting a User Selection into an Arbitrary Element 504

15.3 Automating the Search-and-Replace of Body Content 506

15.4 Designing a User-Editable Content Page 512

15.5 Creating a Slide Show 515

15.6 Auto-Scrolling the Page 523

15.7 Greeting Users with Their Time of Day 524

www.it-ebooks.info

Table of Contents | xi

15.8 Displaying the Number of Days Before Christmas 525

15.9 Displaying a Countdown Timer 527

15.10 Creating a Calendar Date Picker 534

15.11 Displaying an Animated Progress Bar 542

A. Keyboard Event Character Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548

B. Keyboard Key Code Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550

C. ECMAScript Reserved Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553

www.it-ebooks.info

www.it-ebooks.info

xiii

Preface1

It may be difficult to imagine that a technology born as recently as 1995 would have

had enough of a life cycle to experience a rise and fall in popularity, followed now by

an amazing renaissance. Client-side scripting, begun initially with JavaScript embed￾ded in Netscape Navigator 2, has experienced such a roller coaster ride. A number of

early incompatibilities among major browsers caused many a content author’s head

to ache. But we learned to live with it, as a long period of stability in one platform—

Internet Explorer 6, in particular—meant that we could use our well-worn compati￾bility workarounds without cause for concern. Another stabilizing factor was the

W3C DOM Level 2 specification, which remained a major target for browser makers

not following Microsoft’s proprietary ways. Mozilla, Safari, and Opera used the

W3C DOM as the model to implement, even if Microsoft didn’t seem to be in a

hurry to follow suit in all cases.

Two factors have contributed to the rebirth of interest in JavaScript and Dynamic

HTML. The first is the wide proliferation of broadband connections. Implementing

large client-side applications in JavaScript can take a bunch of code, all of which

must be downloaded to the browser. At dial-up speeds, piling a 50–75 kilobyte script

onto a page could seriously degrade perceived performance; at broadband speeds,

nobody notices the difference.

But without a doubt, the major attraction these days is the now widespread availabil￾ity in all mainstream browsers of a technology first implemented by Microsoft: the

XMLHttpRequest object. It’s a mouthful (leading some to refer to it as, simply, XHR),

but it allows background communication between the browser and server so that a

script can request incremental data from the server and update only a portion of a

page. It is far more efficient than downloading a bunch of data with the page and less

visually disruptive than the old submit-and-wait-for-a-new-page process. To help put

a label on the type of applications one can build with this technology, the term Asyn￾chronous JavaScript and XML (Ajax) was coined. In truth, Ajax is simply a catchy

handle for an existing technology.

www.it-ebooks.info

xiv | Preface

Ajax has opened the floodgates for web developers. Perhaps the most popular first

implementation was Google Maps, whereby you could drag your way around a map,

while scripts and the XMLHttpRequest object in the background downloaded adjacent

blocks of the map in anticipation of your dragging your way over there. It was

smooth, fast, and a real joy to use. And now, more powerful applications—word

processors, spreadsheets, email clients—are being built with JavaScript and

DHTML.

JavaScript in the browser was originally designed for small scripts to work on small

client-side tasks. It is still used that way quite a bit around the Web. Not every appli￾cation is a mega DHTML app. Therefore, this collection of recipes still has plenty of

small tasks in mind. At the same time, however, many recipes from the first edition

have been revised with scripting practices that will serve both the beginner and the

more advanced scripter well. Examples prepare you for the eventuality that your

scripting skills will grow, perhaps leading to a mega DHTML app in the future. Even

so, there are plenty of times when you need an answer to that age-old programming

question: “How do I...?”

About You

Client-side scripting and DHTML are such broad and deep subjects that virtually

every reader coming to this book will have different experience levels, expectations,

and perhaps, fears. No book could hope to anticipate every possible question from

someone wishing to use these technologies in his web pages. Therefore, this book

makes some assumptions about readers at various stages of their experience:

• You have at least rudimentary knowledge of client-side JavaScript concepts. You

know how to put scripts into a web page—where <script> tags go, as well as

how to link an external .js file into the current page. You also know what vari￾ables, strings, numbers, Booleans, arrays, and objects are—even if you don’t

necessarily remember the precise way they’re used with the JavaScript language.

This book is not a tutorial, but you can learn a lot from reading the introduc￾tions to each chapter and the discussions following each solution.

• You may be a casual scripter, who wants to put a bit of intelligence into a web

page for some project or other. You don’t use the language or object model every

day, so you need a refresher about even some simple things, such as the correct

syntax for creating an array or preloading images for fast image rollover effects.

• While surfing the Web, you may have encountered some scripted DHTML effect

that you’d like to implement or adapt for your own pages, but either you can’t

decipher the code you see or you want to “roll your own” version to avoid copy￾right problems with the code’s original owner. If the effect or technique you’ve

seen is fairly popular, this cookbook probably has a recipe for it. You can use these

recipes as they are or modify them to fit your designs. There are no royalties or

www.it-ebooks.info