the book of javascript 2nd edition phần 1 pptx

1 Chapter 2: Using Variables and Built-in Functions to Update Your Web Pages Automatically.... 67 Chapter 6: Writing Your Own JavaScript Functions.... 331 Chapter 18: Debugging JavaScrip

Trang 2

THE BOOK of™JAVASCRIPT

Trang 3

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; info@nostarch.com; www.nostarch.com

Librar y of Congress Cataloging-in-Publication Data

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

Trang 4

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.”

Trang 6

B R I E F C O N T E N T S

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

Trang 7

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

Trang 8

C O N T E N T S I N D E T A I L

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

Trang 9

More About Functions 21

alert() 22

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

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

Trang 10

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

Using More Than One Parameter 90

Getting Information from Functions 91

Dealing with Y2K 93

Defining Variables Properly 94

Summary 96

Assignment 97

Trang 11

PROVIDING AND RECEIVING INFORMATION

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

Creating Your Own Arrays 134

How the Book of JavaScript Tip Box Works 136

Checking for Blank Statements 137

Checking the Last Element in the Array 137

Trang 12

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

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

Repeating Timed Actions 150

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

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

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

Trang 13

Frame Busting 179

Using Frames to Store Information 181

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

String Handling 196

Breaking Strings Apart 196

Matching String Patterns with Regular Expressions 203

How Dictionary.com’s Form Validators Work 207

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

Trang 14

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

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

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

Trang 15

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

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

Trang 16

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

Trang 17

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

Trang 18

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

Trang 19

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

Trang 20

F O R E W O R D

The first JavaScript I remember writing was a routine

to change two frames at the same time I was the duction specialist for HotWired, and it was shortly after

pro-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

Trang 21

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

Trang 22

F O R E W O R D T O T H E

F I R S T E D I T I O N

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

Trang 24

A C K N O W L E D G M E N T S

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

Định dạng
Số trang	50
Dung lượng	768,79 KB