THE BOOK OF JAVASCRIPT, 2ND EDITION phần 1 pps

THE BOOK of
™
JAVASCRIPT
2ND EDITION
A PRACTICAL GUIDE TO INTERACTIVE
WEB PAGES
by thau!
San Francisco
®
THE BOOK OF JAVASCRIPT, 2ND EDITION. Copyright © 2007 by Dave Thau.
First edition © 2000 by Dave Thau.
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or
mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior
written permission of the copyright owner and the publisher.
10 09 08 07 06 1 2 3 4 5 6 7 8 9
ISBN-10: 1-59327-106-9
ISBN-13: 978-1-59327-106-0
Publisher: William Pollock
Associate Production Editor: Christina Samuell
Cover and Interior Design: Octopod Studios
Developmental Editors: Jim Compton, William Pollock, and Riley Hoffman
Technical Reviewer: Luke Knowland
Copyeditor: Publication Services, Inc.
Compositors: Riley Hoffman and Megan Dunchak
Proofreader: Stephanie Provines
Indexer: Nancy Guenther
For information on book distributors or translations, please contact No Starch Press, Inc. directly:
No Starch Press, Inc.
555 De Haro Street, Suite 250, San Francisco, CA 94107
phone: 415.863.9900; fax: 415.863.9950; ; www.nostarch.com

Library of Congress Cataloging-in-Publication Data
Thau.
The book of JavaScript : a practical guide to interactive Web pages / Thau!. 2nd ed.
p. cm.
Includes index.
ISBN-13: 978-1-59327-106-0
ISBN-10: 1-59327-106-9
1. JavaScript (Computer program language) I. Title.
QA76.73.J39T37 2006
005.13'3 dc22
2006011786
No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and
company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark
symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the
benefit of the trademark owner, with no intention of infringement of the trademark.
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been
taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any
person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the
information contained in it.
Printed on recycled paper in the United States of America
I dedicate this revised edition of The Book of JavaScript to my wonderful
wife Kirsten Menger-Anderson, who never failed to keep a straight
face when I said, “It’s almost done.”

BRIEF CONTENTS
Foreword by Luke Knowland xxi
Foreword to the First Edition by Nadav Savio xxiii
Acknowledgments xxv
Introduction xxvii
Chapter 1: Welcome to JavaScript! 1

Chapter 2: Using Variables and Built-in Functions to
Update Your Web Pages Automatically 15
Chapter 3: Giving the Browsers What They Want 33
Chapter 4: Working with Rollovers 51
Chapter 5: Opening and Manipulating Windows 67
Chapter 6: Writing Your Own JavaScript Functions 83
Chapter 7: Providing and Receiving Information with Forms 99
Chapter 8: Keeping Track of Information with Arrays and Loops 123
Chapter 9: Timing Events 147
Chapter 10: Using Frames and Image Maps 169
Chapter 11: Validating Forms, Massaging Strings, and
Working with Server-Side Programs 191
Chapter 12: Saving Visitor Information with Cookies 215
viii Brief Contents
Chapter 13: Dynamic HTML 233
Chapter 14: Ajax Basics 261
Chapter 15: XML in JavaScript and Ajax 279
Chapter 16: Server-Side Ajax 299
Chapter 17: Putting It All Together in a Shared To Do List 331
Chapter 18: Debugging JavaScript and Ajax 363
Appendix A: Answers to Assignments 381
Appendix B: Resources 405
Appendix C: Reference to JavaScript Objects and Functions 411
Appendix D: Chapter 15’s Italian Translator and Chapter 17’s To Do List Application 455
Index 469
CONTENTS IN DETAIL
FOREWORD by Luke Knowland xxi
FOREWORD TO THE FIRST EDITION by Nadav Savio xxiii
ACKNOWLEDGMENTS xxv
INTRODUCTION xxvii

How This Book Is Organized xxvii
Companion Website xxx
1
WELCOME TO JAVASCRIPT! 1
Is JavaScript for You? 1
Is This Book for You? 2
The Goals of This Book 2
What Can JavaScript Do? 3
What Are the Alternatives to JavaScript? 5
CGI Scripting 5
VBScript 7
Java 7
Flash 7
JavaScript’s Limitations 7
JavaScript Can’t Talk to Servers 7
JavaScript Can’t Create Graphics 8
JavaScript Works Differently in Different Browsers 8
Getting Started 8
Where JavaScript Goes on Your Web Pages 9
Dealing with Older Browsers 10
Your First JavaScript 12
Summary 12
Assignment 13
2
USING VARIABLES AND BUILT-IN FUNCTIONS TO
UPDATE YOUR WEB PAGES AUTOMATICALLY 15
Variables Store Information 16
Syntax of Variables 16
Naming Variables 17
Arithmetic with Variables 18

Write Here Right Now: Displaying Results 19
Line-by-Line Analysis of Figure 2-4 20
Strings 20
Line-by-Line Analysis of Figure 2-6 21
x Contents in Detail
More About Functions 21
alert() 22
Line-by-Line Analysis of Figure 2-9 23
prompt() 24
Parameters 25
Writing the Date to Your Web Page 26
Built-in Date Functions 26
Date and Time Methods 26
Code for Writing the Date and Time 27
Line-by-Line Analysis of Figure 2-12 29
How the European Space Agency Writes the Date to Its Page 30
Summary 31
Assignment 31
3
GIVING THE BROWSERS WHAT THEY WANT 33
A Real-World Example of Browser Detection 34
Browser Detection Methods 35
Quick-but-Rough Browser Detection 35
More Accurate Browser Detection 36
Redirecting Visitors to Other Pages 37
if-then Statements 38
Boolean Expressions 38
Nesting 40
if-then-else Statements 40
if-then-else-if Statements 41

When and Where to Place Curly Brackets 41
OR and AND 42
OR 43
AND 44
Putting It All Together 45
A Few More Details About Boolean Expressions 47
How Netscape Provides Browser-Specific Content 48
Summary 50
Assignment 50
4
WORKING WITH ROLLOVERS 51
A Real-World Example of Rollovers 52
Triggering Events 53
Event Types 53
Quotes in JavaScript 55
Clicking the Link to Nowhere 56
More Interesting Actions 57
Swapping Images 58
Working with Multiple Images 59
Contents in Detail xi
What’s with All the Dots? 60
The document Object 60
Object Properties 61
Finally, Rollovers! 62
Image Preloading 62
How the Tin House Rollovers Work 64
Summary 65
Assignment 65
5
OPENING AND MANIPULATING WINDOWS 67

Real-World Examples of Opening Windows to Further Information 68
Working with Windows as Objects 69
Opening Windows 69
Manipulating the Appearance of New Windows 70
Some Browsers and Computers Open Windows Differently 72
Closing Windows 72
Using the Right Name: How Windows See Themselves and Each Other 73
Moving Windows to the Front or Back of the Screen 74
Window Properties 74
The status Property 74
The opener Property 75
More Window Methods 77
Resizing Windows 77
Moving Windows 77
Summary 80
Assignment 80
6
WRITING YOUR OWN JAVASCRIPT FUNCTIONS 83
Functions as Shortcuts 84
Basic Structure of JavaScript Functions 84
Naming Your Functions 85
Parentheses and Curly Brackets 85
An Example of a Simple Function 85
Writing Flexible Functions 86
Using Parameters 87
Line-by-Line Analysis of Figure 6-4 88
Using More Than One Parameter 90
Getting Information from Functions 91
Line-by-Line Analysis of Figure 6-9 92
Dealing with Y2K 93

Line-by-Line Analysis of Figure 6-12 94
Defining Variables Properly 94
Summary 96
Assignment 97
xii Contents in Detail
7
PROVIDING AND RECEIVING INFORMATION
WITH FORMS 99
Real-World Examples of Forms 100
Form Basics 101
Text Fields 102
Buttons, Checkboxes, and Radio Buttons 102
Select Elements 104
Textareas 106
Final Form Comments 106
Forms and JavaScript 107
Naming Form Elements 107
Naming Radio Buttons 108
Naming Options 108
Reading and Setting Form Elements 109
Reading Information from Text Fields 109
Setting the Value of a Text Field 110
Textareas 111
Checkboxes 112
Radio Buttons 114
Pull-Down Menus and Scrollable Lists 115
Handling Events Using Form Elements 116
Make this a Shortcut 117
Using Pull-Down Menus as Navigational Tools 118
One Last Forms Shortcut 119

How the Doctors Without Borders Pull-Down Navigation Tool Works 120
Summary 120
Assignment 121
8
KEEPING TRACK OF INFORMATION WITH
ARRAYS AND LOOPS 123
Real-World Examples of Arrays 123
JavaScript’s Built-In Arrays 124
Figuring Out How Many Items an Array Contains 126
Going Through Arrays 126
while Loops 128
while Loops and Arrays 129
Going Off the Deep End 130
Using array.length in Your Loop 131
An Incremental Shortcut 131
Beware of Infinite Loops 131
for Loops 132
How AntWeb Checks Off All the Checkboxes 133
Line-by-Line Analysis of Figure 8-11 133
Creating Your Own Arrays 134
Line-by-Line Analysis of Figure 8-12 135
How the Book of JavaScript Tip Box Works 136
Checking for Blank Statements 137
Checking the Last Element in the Array 137
Contents in Detail xiii
Testing the Limits of Arrays 137
The startScroll() Function 138
A Streamlined Version 139
Loops Can Nest 140
Creating Arrays As You Go Along 140

Associative Arrays 142
Line-by-Line Analysis of Figure 8-18 144
Summary 144
Assignment 145
9
TIMING EVENTS 147
Real-World Examples of Timing Events 147
Setting an Alarm with setTimeout() 148
Canceling an Alarm with clearTimeout() 149
Line-by-Line Analysis of Figure 9-3 150
Repeating Timed Actions 150
Line-by-Line Analysis of Figure 9-5 152
Using parseInt() with Form Elements 152
Clearing Out a Time-Out Before You Set a New One 153
Declaring Variables That Hold Time-Outs Outside Functions 153
Building a Clock with Timing Loops 154
Line-by-Line Analysis of Figure 9-7 155
How the Book of JavaScript Website’s Timer Works 155
How Space.com’s Countdown Script Works 157
Calculating Times 160
Global Variables and Constants 160
A Timed Slide Show 161
Line-by-Line Analysis of Figure 9-11 162
A Safer Version of rotateImage() 163
Why Declaring a Variable Outside a Function Is Unsafe 163
Why You Can’t Put var Inside a Timing Loop 163
The Solution 164
The Hitch 165
The Solution to the Hitch 165
Why image_array Is Declared Outside the rotateImage() Function 166

Summary 167
Assignment 167
10
USING FRAMES AND IMAGE MAPS 169
A Real-World Example of Frames and Image Maps 170
Frames 170
Frame Basics 170
Frames and JavaScript 172
Frames and Image Swaps 174
Changing the Contents of Two Frames at Once 176
Frames Inside Frames 177
JavaScript and Frames Inside Frames 179
xiv Contents in Detail
Frame Busting 179
Using Frames to Store Information 181
Line-by-Line Analysis of Figure 10-15 183
Image Maps 184
Image Map Basics 185
Image Maps and JavaScript 186
How Salon’s Bug-Eating Script Works 186
Salon’s Nested Frames 188
Salon’s Image Map 188
The changeMe() Function 188
Summary 189
Assignment 190
11
VALIDATING FORMS, MASSAGING STRINGS,
AND WORKING WITH SERVER-SIDE PROGRAMS 191
A Real-World Example of Form Validation 192
Making Sure a Visitor Has Filled Out a Form Element 192

Line-by-Line Analysis of Figure 11-2 194
String Handling 196
Breaking Strings Apart 196
Matching String Patterns with Regular Expressions 203
How Dictionary.com’s Form Validators Work 207
Line-by-Line Analysis of Figure 11-11 210
Summary 213
Assignment 214
12
SAVING VISITOR INFORMATION WITH COOKIES 215
A Real-World Example of Cookies 216
What Are Cookies? 216
What Cookies Can and Can’t Do 217
Working with Cookies 218
Setting Cookies 218
Reading Cookies 218
Resetting Cookies 219
Setting More Than One Piece of Information 220
Setting the Duration of a Cookie 222
Who Can Read the Cookie? 224
The Whole Cookie 224
Setting Multiple Cookies 225
Cookie Libraries 225
A Cookie-Based Shopping Cart 226
Adding an Item to the Cart 227
The Checkout Page 229
The readTheCookie() Function 230
The checkOut() Function 231
Summary 232
Assignment 232

Contents in Detail xv
13
DYNAMIC HTML 233
Real-World Examples of DHTML 234
CSS Basics 234
The <div> Tag 235
Positioning a div with CSS 235
Hiding a div 237
Layering divs 237
JavaScript and DHTML 238
Making divs Move 239
Using setTimeout() and clearTimeout() to Animate a Page 239
Line-by-Line Analysis of Figure 13-10 240
Changing the Contents of a div 241
spans and getElementsByTagName() 242
Advanced DOM Techniques 244
W3C DOM Overview 245
Creating and Adding Elements Using the W3C DOM 245
Adding Text to an Element 246
Adding Elements in the Middle of a Page and Removing Elements 247
Additional DOM Details 248
Manipulating a Page Using the DOM 250
Fancy Event Handling 250
The event Object 250
Adding Event Handlers Using JavaScript 254
Drop-Down Menus 257
Line-by-Line Analysis of Figure 13-23 259
The Borders 259
Summary 259
Assignment 260

14
AJAX BASICS 261
A Real-World Example of Ajax 262
Introduction to Ajax 263
Asynchronicity—The A in Ajax 264
XML—The X in Ajax 265
JavaScript—The J in Ajax 265
Creating and Sending Requests 265
Creating a Request Object 265
Telling the Object Where to Send the Request 266
What to Do When the Request Is Answered 266
Writing JavaScript That Is Called After the Request Has Been Answered 268
Sending the Request 268
Putting Everything Together 269
Getting the Results 270
Demonstrating Asynchronicity 271
Line-by-Line Analysis of Figure 14-6 273
xvi Contents in Detail
Ajax and Usability 274
The Back Button 274
URLs and Bookmarking 274
Poor Design 274
To Ajax, or Not to Ajax 275
Bad: Just Because You Can 275
Bad: It’s the Hot New Thing 275
Bad: Replacing Something That Works with
Something New and Confusing 275
Good: In-Context Data Manipulation 276
Good: Interactive Widgets 276
Good: Saving State 276

Summary 276
Assignment 277
15
XML IN JAVASCRIPT AND AJAX 279
A Real-World Example of Ajax and XML 280
Google Suggest 281
XML—the Extensible Markup Language 282
The Rules of XML 283
The XML Header 283
XML Elements 284
XML Attributes 284
Illegal XML Characters 284
XML Documents Have a Single Root Element 285
Final Comments About the XML Format 285
Processing XML 285
Line-by-Line Analysis of Figure 15-6 287
Internet Explorer, responseXML, and Client-Side Ajax 291
Problems with White Space in XML 291
Creating a Suggest Application for Translation 292
Finding the Translations 294
Displaying the Results 295
Summary 296
Assignment 297
16
SERVER-SIDE AJAX 299
Real-World Examples of Server-Side Ajax 300
The Power of Webservers 301
A Server-Side Programming Language 303
PHP Basics 304
Sending Simple Input to PHP with a GET Request 305

Passing Input in a URL 305
Using PHP to Read the Inputs of a GET Request 306
Contents in Detail xvii
Creating a Google Suggest Application with an Ajax GET Request 308
Contacting Third-Party Webservers with Ajax and PHP 308
The JavaScript for the Homemade Google Suggest Application 309
Using PHP to Contact Other Webservers 313
Ajax and the POST Method 314
An Ajax-Friendly Form 316
POSTing with Ajax 316
Sending XML Information from the Browser to a Webserver 318
HEAD Requests: Getting Information About a Server-Side File 318
Adding Headers to Your Responses 319
Headers and XML 320
The Caching Problem 320
File Handling in PHP 321
Creating and Adding Contents to a Text File with PHP 321
Reading Files in PHP 322
When Communication Breaks Down 323
Automatically Updating a Web Page When a Server-Side File Changes 325
readFileDoFunction() 327
callReadFile() 327
callUpdateIfChanged() 328
stopTimer() 328
Recap and Breathe 328
The Server-Side PHP Code 328
Summary 329
Assignment 330
17
PUTTING IT ALL TOGETHER IN A SHARED TO DO LIST 331

Features of the To Do List Application 332
To Do List Data Files 334
userInfo.xml 334
To Do List File 335
To Do List Server Side 336
The To Do List Client Side, Part 1: The HTML 337
The To Do List Client Side, Part 2: The JavaScript 338
The Function Road Map 339
Logging In and Out 340
Functions Related to Logging In 341
Helper Functions 343
Displaying Available Lists 346
Displaying a Specific List 349
Processing Changes to a List 352
Limitations on Manipulating XML Documents 356
Adding a New Item 357
A Few Closing Notes 359
Client-Side or Server-Side Code? 359
Security Issues 359
Summary 361
Assignment 361
xviii Contents in Detail
18
DEBUGGING JAVASCRIPT AND AJAX 363
Good Coding Practices 364
Starting with Comments 364
Filling In the Code 365
Avoiding Common Mistakes 365
Use a Consistent Naming Convention 365
Avoid Reserved Words 366

Remember to Use Two Equal Signs in Logical Tests 366
Use Quotation Marks Correctly 366
Finding Bugs 367
Printing Variables with alert() Statements 367
Debugging Beyond Alerts 369
Using Your Browser’s Bug Detector 370
Using JavaScript Debuggers 370
Debugging Ajax in Firefox 1.5 and 2.0 374
Other Debugging Resources 376
Fixing Bugs 376
Back Up Your Program 377
Fix One Bug at a Time 377
Avoid Voodoo Coding 377
Look for Similar Bugs 378
Clear Your Head 378
Ask for Help 378
Summary 379
A
ANSWERS TO ASSIGNMENTS 381
Chapter 2 381
Chapter 3 383
Chapter 4 383
Chapter 5 384
index.html 384
image_page.html 384
Chapter 6 385
Chapter 7 385
Chapter 8 387
Chapter 9 389
Chapter 10 390

index.html 390
assignment-nav.html 390
blank.html 391
Chapter 11 391
index.html 391
assignment-nav.html 392
blank.html 394
Chapter 12 394
Chapter 13 395
Contents in Detail xix
Chapter 14 397
addressBook.xml 397
index.html 397
Chapter 17 399
Join Functions 400
Giving a User Access to Your To Do List 402
B
RESOURCES 405
Tutorials 405
HTML Tutorials 406
Cascading Style Sheets Tutorials 406
Advanced Topics in JavaScript 406
Ajax Tutorials 407
Example JavaScript and Ajax Code 407
Good Ajax Websites 407
Ajax Frameworks 408
JavaScript 408
PHP 409
Java 409
.NET 410

Ruby 410
C
REFERENCE TO JAVASCRIPT OBJECTS AND FUNCTIONS 411
alert() 413
Anchor 413
Applet 413
Area 414
Array 414
Button (Including Submit and Reset Buttons) 416
Checkbox 417
clearInterval() 417
clearTimeout() 417
confirm() 418
Date 418
Document 421
elements[] 423
escape() 423
eval() 423
Event 423
FileUpload 424
Form 424
Hidden 426
History 426
HTMLElement 427
Image 429
xx Contents in Detail
isNaN() 430
Link 431
Location 431
Math 432

Navigator 433
Number 434
Option 435
parseInt() 436
parseFloat() 436
Password 436
prompt() 438
Radio 438
Reset 439
Screen 439
Select 439
setInterval() 440
setTimeout() 441
String 441
Style 445
Submit 446
Text 446
Textarea 447
this 448
unescape() 448
var 448
window 448
XMLHttpRequest and ActiveXObject("Microsoft.XMLHTTP") 454
D
CHAPTER 15’S ITALIAN TRANSLATOR
AND CHAPTER 17’S TO DO LIST APPLICATION 455
Chapter 15’s Italian Translator 455
Chapter 17’s To Do List Application 457
todo.html 457
readXMLFile.php 467

saveXMLFile.php 467
INDEX 469
FOREWORD
The first JavaScript I remember writing was a routine
to change two frames at the same time. I was the pro-
duction specialist for HotWired, and it was shortly after
frames and JavaScript debuted, well before there was documentation for
either. Fortunately, it was also well before Internet Explorer 3.0 appeared on
the scene, so I only had to make sure my JavaScript worked for Netscape 2.0.
Even so, without a reference book to point out where possible pitfalls could be
or answer simple questions such as how to set variables that JavaScript would
like or how to make different windows talk to each other, it was one hell of a
challenge. And it was deeply satisfying when I got it to work correctly.
When Dave asked me to do the technical review of the second edition
of The Book of JavaScript, I couldn’t have been more pleased or honored. The
deep satisfaction I felt when I wrote those first JavaScripts and they worked
correctly, and the deeper satisfaction I felt as more and more browsers were
released and I figured out how to write cross-browser and cross-platform
JavaScript, are the same feelings I got when I read Dave’s explanations and
examples. He describes what a piece of code is going to do and how to think
about it, then lays out an example of code that makes sense—whether you’re
a seasoned programmer or entirely new to JavaScript. On top of all that, he
takes a practical approach to programming, he’s able to explain complex
xxii Foreword
problems in a way that doesn’t make them sound daunting, and when you’re
done covering each topic, you feel like you’ve earned the knowledge. That’s
rare, and it’s really, really refreshing.
Since the first edition of this book was published, there have been a few
advancements in JavaScript, most notably the advent of Ajax. Ajax is a concept
that makes even a few professional programmers’ heads spin, but (not surpris-

ingly) Dave manages to break down what Ajax is and what it isn’t, explains
when it makes sense to use it, and shows you how to do it.
If you’re new to JavaScript, you win—you couldn’t ask for a better person
to teach you how to program. If you’re an old hat at JavaScript and you’re
looking for a refresher course or wondering how to take advantage of Ajax,
you win too.
Happy coding!
Luke Knowland
Interaction Designer, Six Apart
San Francisco
FOREWORD TO THE
FIRST EDITION
I learned JavaScript completely on my own. There was
no one to tell me about “event handlers” or how to set
cookies. No one even explained what a variable is, let
alone the best ways to name them. Of course I had reference books, but
they were intimidating tomes, full of cryptic lists and tables, written by
programmers for programmers.
David Thau is a remarkable combination of natural teacher and seasoned
programmer. As a result, The Book of JavaScript not only teaches JavaScript
thoroughly and enjoyably in a friendly, unintimidating tone, but it teaches
programming as elegantly as any book I’ve seen. In fact, I’ve always thought
of this as Thau’s ulterior motive—he pretends he’s just showing you how to
make a rollover or validate the text in an HTML form, but before you know
it you’ve learned how to code!
Perhaps the most telling thing I can say is that, reading this book, I can’t
help but wish I was learning JavaScript for the first time. If you are, then con-
sider yourself lucky to have Thau as a teacher. You couldn’t do better.
Happy JavaScripting!
Nadav Savio

Principal, Giant Ant Design
San Francisco

ACKNOWLEDGMENTS
This second edition of The Book of JavaScript took me much longer to complete
than I could have imagined. I’d like to thank the entire No Starch Press staff
for putting up with all the delays and surprise extra bits. I would especially like
to thank Christina Samuell for moving the process along, William Pollock,
Riley Hoffman, Jerome Colburn, and Stephanie Provines for extensive edits,
and Luke Knowland for making sure all the code works and offering many
excellent suggestions. I’d also like to thank my neighbor, Laurentino Padilla,
for sweeping our sidewalk on Thursdays. Without him, this book would have
taken even longer to finish.