Beginning JavaScript with DOM Scripting and Ajax (eBook)

Christian Heilmann grew up in Germany and, after a year working with people with disabilities through the Red Cross, he spent a year as a radio producer. Beginning in 1997, he worked for several agencies in Munich as a web developer. In 2000, he moved to the U.S. to work for eToys and, after the dot-com crash, he moved to the U.K., where he currently works as a lead developer for Agilisys. He publishes an almost-daily blog at http://wait-till-i.com and runs an article repository at http://icant.co.uk. He is a member of the Web Standards Project's DOM Scripting Task Force.

Contents 6
Foreword 12
About the Author 13
About the Technical Reviewer 14
Acknowledgments 15
Introduction 16
Chapter 1 Getting Started with JavaScript 19
The Why of JavaScript 21
What Is JavaScript? 22
Problems and Merits of JavaScript 23
Why Use JavaScript If It Cannot Be Relied On? 24
JavaScript in a Web Page and Essential Syntax 25
JavaScript Syntax 26
Code Execution 27
An Aside About Functions 29
Objects 30
Simple JavaScript Example 31
Summary 34
Chapter 2 Data and Decisions 35
Data, Data Types, and Data Operators 36
The String Data Type 36
Operators 39
JavaScript Variables 41
Converting Different Types of Data 44
The Composite Data Types: Array and Object 48
Objects JavaScript Supplies You with: String, Date, and Math 48
Arrays 57
The Array Object’s Methods and Properties 60
Making Decisions in JavaScript 63
The Logical and Comparison Operators 63
Conditional Statements 67
Testing Multiple Values: the switch Statement 70
Repeating Things: Loops 72
Summary 77
Chapter 3 From DHTML to DOM Scripting 78
JavaScript As “the Behavior Layer” 80
Object Detection vs. Browser Dependence 82
Progressive Enhancement 85
JavaScript and Accessibility 86
Good Coding Practices 88
Naming Conventions 88
Code Layout 89
Commenting 91
Functions 93
Short Code via Ternary Operator 96
Sorting and Reuse of Functions 97
Variable and Function Scope 97
Keeping Scripts Safe with the Object Literal 98
Summary 100
Chapter 4 HTML and JavaScript 102
The Anatomy of an HTML Document 102
Providing Feedback in Web Pages via JavaScript: The Old School Ways 106
Using window Methods: prompt(), alert(), and confirm() 107
Accessing the Document via the DOM 113
Of Children, Parents, Siblings, and Values 116
From the Parents to the Children 117
From the Children to the Parents 119
Among Siblings 120
Changing Attributes of Elements 124
Creating, Removing, and Replacing Elements 126
Avoiding NOSCRIPT 130
Shortening Your Scripts via InnerHTML 132
DOM Summary: Your Cheat Sheet 133
DOMhelp: Our Own Helper Library 135
Summary 139
Chapter 5 Presentation and Behavior (CSS and Event Handling) 140
Changing the Presentation Layer via JavaScript 140
Helping the CSS Designer 148
Changing the Document’s Behavior via Event Handling 170
Events in the W3C-Compliant World 173
Fixing Events for the Non-W3C-Compliant World 182
Never Stop Optimizing 189
The Ugly Page Load Problem and Its Ugly Solutions 190
Reading and Filtering Keyboard Entries 191
The Dangers of Event Handling 196
Summary 197
Chapter 6 Common Uses of JavaScript: Images and Windows 199
Images and JavaScript 199
Basics of Image Scripting 200
Preloading Images 202
Rollover Effects 203
Slide Shows 212
Summary of Images and JavaScript 227
Windows and JavaScript 228
Window Properties 229
Window Methods 231
Summary: Windows and JavaScript 254
Summary 255
Chapter 7 JavaScript and User Interaction: Navigation and Forms 256
Navigation and JavaScript 256
The Fear of the Page Reload 257
Basics of Navigation and JavaScript 257
Browser Navigation 260
In-Page Navigation 261
Site Navigation 270
Pagination 278
Summary of Navigation with JavaScript 287
Forms and JavaScript 287
Basics of Forms with JavaScript 289
Form Elements 290
Interactive Forms: Hiding and Showing Dependent Elements 306
Custom Form Elements 312
Summary of Forms and JavaScript 312
Summary 312
Chapter 8 Back-End Interaction with Ajax 314
Household Cleaning Liquid, Football Club, or Flash Gordon’s Spacecraft: What Is Ajax? 315
Et Tu, Cache? 324
Putting the X Back into Ajax 324
Replacing XML with JSON 329
Using Server-Side Scripts to Reach Third-Party Content 331
XHR on Slow Connections 335
A Larger Ajax Example: Connected Select Boxes 338
Optional Dynamic Ajax Menus 346
Summary 355
Chapter 9 Data Validation Techniques 357
Pros and Cons of Client-Side JavaScript Validation 357
A Quick Reminder About Protecting Content with JavaScript 358
The One-Size-Fits-All Validation Myth 359
Basic JavaScript Validation with String and Numeric Methods 360
String Validation Methods 360
Numeric Validation Methods 366
Regular Expressions 371
Syntax and Attributes 371
Wildcard Searches, Constraining Scope, and Alternatives 372
Restricting the Number of Characters with Quantifiers 373
Word Boundaries, Whitespace, and Other Shortcuts 374
Methods Using Regular Expressions 375
The Power of Parenthesis Grouping 375
Regular Expression Resources 377
Summary of Validation Methods 377
Form Validation Techniques 378
Designating Mandatory Fields 378
The Hidden Field Method 378
The Indicator Element Method 379
The CSS Classes Method 380
The Custom Attribute Method 380
Failures of These Methods 381
Sharing Validation Rules 381
Giving Users Validation Feedback 383
Showing a List of Erroneous Fields 383
Replacing the Main Form with a Clickable Error Message 388
Instant Validation Feedback 393
Other Dynamic Validation Methods 395
Summary 399
Chapter 10 Modern JavaScript Case Study: A Dynamic Gallery 400
Basics of Thumbnail Galleries 400
What Is a Thumbnail Gallery and What Should It Do? 401
Static Thumbnail Galleries 401
Faking Dynamic Galleries with JavaScript 402
Displaying Captions 409
Dynamic Thumbnail Galleries 414
Creating an Image Badge from a Folder 419
Summary 427
Chapter 11 Using Third-Party JavaScript 428
What the Web Offers You 428
Code Snippets, RSS Feeds, APIs, and Libraries 429
RSS Feeds and REST APIs 430
Examples of REST APIs 431
Using a Library: Short, Shorter, jQuery 432
Dangers of jQuery and Other Libraries Using Their Own Syntax 439
Using an API: Adding a Map to Your Site with Google Maps 440
Full Service: The Yahoo Developer Network and User Interface Library 451
Bouncy Headlines Using YUI 452
Replacing Pop-Up Windows Using the YUI Connection Manager and Container Components 457
Yahoo User Interface Library Summary 462
Summary 463
APPENDIX Debugging JavaScript 464
Common JavaScript Mistakes 464
Misspellings and Case-Sensitivity Issues 464
Trying to Access Undefined Variables 465
Incorrect Number of Closing Braces and Parentheses 467
Concatenation Gone Wrong 469
Tracing Errors with alert() and“Console” Elements 471
Error Handling with try and catch() 472
Sequential Uncommenting 475
Error Reporting in Browsers 476
Microsoft Internet Explorer 6 476
Safari 477
Opera 8.5 479
Firefox 1.5.0.3 479
JSLint and JSUNIT 483
Summary 483
Index 484