| |
| |
Foreword | |
| |
| |
About the Author | |
| |
| |
About the Technical Reviewer | |
| |
| |
Acknowledgments | |
| |
| |
Introduction | |
| |
| |
| |
Getting Started with JavaScript | |
| |
| |
The Why of JavaScript | |
| |
| |
What Is JavaScript? | |
| |
| |
Problems and Merits of JavaScript | |
| |
| |
Why Use JavaScript If It Cannot Be Relied On? | |
| |
| |
JavaScript in a Web Page and Essential Syntax | |
| |
| |
JavaScript Syntax | |
| |
| |
Code Execution | |
| |
| |
An Aside About Functions | |
| |
| |
Objects | |
| |
| |
Simple JavaScript Example | |
| |
| |
Summary | |
| |
| |
| |
Data and Decisions | |
| |
| |
Data, Data Types, and Data Operators | |
| |
| |
The String Data Type | |
| |
| |
Operators | |
| |
| |
JavaScript Variables | |
| |
| |
Converting Different Types of Data | |
| |
| |
The Composite Data Types: Array and Object | |
| |
| |
Objects JavaScript Supplies You with: String, Date, | |
| |
| |
and Math | |
| |
| |
Arrays | |
| |
| |
The Array Object's Methods and Properties | |
| |
| |
Making Decisions in JavaScript | |
| |
| |
The Logical and Comparison Operators | |
| |
| |
Conditional Statements | |
| |
| |
Testing Multiple Values: the switch Statement | |
| |
| |
Repeating Things: Loops | |
| |
| |
Summary | |
| |
| |
| |
From DHTML to DOM Scripting | |
| |
| |
JavaScript As "the Behavior Layer" | |
| |
| |
Object Detection vs. Browser Dependence | |
| |
| |
Progressive Enhancement | |
| |
| |
JavaScript and Accessibility | |
| |
| |
Good Coding Practices | |
| |
| |
Naming Conventions | |
| |
| |
Code Layout | |
| |
| |
Commenting | |
| |
| |
Functions | |
| |
| |
Short Code via Ternary Operator | |
| |
| |
Sorting and Reuse of Functions | |
| |
| |
Variable and Function Scope | |
| |
| |
Keeping Scripts Safe with the Object Literal | |
| |
| |
Summary | |
| |
| |
| |
HTML and JavaScript | |
| |
| |
The Anatomy of an HTML Document | |
| |
| |
Providing Feedback in Web Pages via JavaScript: | |
| |
| |
The Old School Ways | |
| |
| |
Using window Methods: prompt(), alert(), | |
| |
| |
and confirm() | |
| |
| |
Accessing the Document via the DOM | |
| |
| |
Of Children, Parents, Siblings, and Values | |
| |
| |
From the Parents to the Children | |
| |
| |
From the Children to the Parents | |
| |
| |
Among Siblings | |
| |
| |
Changing Attributes of Elements | |
| |
| |
Creating, Removing, and Replacing Elements | |
| |
| |
Avoiding NOSCRIPT | |
| |
| |
Shortening Your Scripts via InnerHTML | |
| |
| |
DOM Summary: Your Cheat Sheet | |
| |
| |
DOMhelp: Our Own Helper Library | |
| |
| |
Summary | |
| |
| |
| |
Presentation and Behavior (CSS and Event Handling) . . 123 | |
| |
| |
Changing the Presentation Layer via JavaScript | |
| |
| |
Helping the CSS Designer | |
| |
| |
Changing the Document's Behavior via Event Handling | |
| |
| |
Events in the W3C-Compliant World | |
| |
| |
Fixing Events for the Non-W3C-Compliant World | |
| |
| |
Never Stop Optimizing | |
| |
| |
The Ugly Page Load Problem and Its Ugly Solutions | |
| |
| |
Reading and Filtering Keyboard Entries | |
| |
| |
The Dangers of Event Handling | |
| |
| |
Summary | |
| |
| |
| |
Common Uses of JavaScript: Images and Windows | |
| |
| |
Images and JavaScript | |
| |
| |
Basics of Image Scripting | |
| |
| |
Preloading Images | |
| |
| |
Rollover Effects | |
| |
| |
Slide Shows | |
| |
| |
Summary of Images and JavaScript | |
| |
| |
Windows and JavaScript | |
| |
| |
Window Properties | |
| |
| |
Window Methods | |
| |
| |
Summary: Windows and JavaScript | |
| |
| |
Summary | |
| |
| |
| |
JavaScript and User Interaction: Navigation and Forms | |
| |
| |
Navigation and JavaScript | |
| |
| |
The Fear of the Page Reload | |
| |
| |
Basics of Navigation and JavaScript | |
| |
| |
Browser Navigation | |
| |
| |
In-Page Navigation | |
| |
| |
Site Navigation | |
| |
| |
Pagination | |
| |
| |
Summary of Navigation with JavaScript | |
| |
| |
Forms and JavaScript | |
| |
| |
Basics of Forms with JavaScript | |
| |
| |
Form Elements | |
| |
| |
Interactive Forms: Hiding and Showing Dependent Elements | |
| |
| |
Custom Form Elements | |
| |
| |
Summary of Forms and JavaScript | |
| |
| |
Summary | |
| |
| |
| |
Back-End Interaction with Ajax | |
| |
| |
Household Cleaning Liquid, Football Club, or Flash Gordon's | |
| |
| |
Spacecraft: What Is Ajax? | |
| |
| |
Et Tu, Cache? | |
| |
| |
Putting the X Back into Ajax | |
| |
| |
Replacing XML with JSON | |
| |
| |
Using Server-Side Scripts to Reach Third-Party Content | |
| |
| |
XHR on Slow Connections | |
| |
| |
A Larger Ajax Example: Connected Select Boxes | |
| |
| |
Optional Dynamic Ajax Menus | |
| |
| |
Summary | |
| |
| |
| |
Data Validation Techniques | |
| |
| |
Pros and Cons of Client-Side JavaScript Validation | |
| |
| |
A Quick Reminder About Protecting Content with JavaScript | |
| |
| |
The One-Size-Fits-All Validation Myth | |
| |
| |
Basic JavaScript Validation with String and Numeric Methods | |
| |
| |
String Validation Methods | |
| |
| |
Numeric Validation Methods | |
| |
| |
Regular Expressions | |
| |
| |
Syntax and Attributes | |
| |
| |
Wildcard Searches, Constraining Scope, and Alternatives | |
| |
| |
Restricting the Number of Characters with Quantifiers | |
| |
| |
Word Boundaries, Whitespace, and Other Shortcuts | |
| |
| |
Methods Using Regular Expressions | |
| |
| |
The Power of Parenthesis Grouping | |
| |
| |
Regular Expression Resources | |
| |
| |
Summary of Validation Methods | |
| |
| |
Form Validation Techniques | |
| |
| |
Designating Mandatory Fields | |
| |
| |
The Hidden Field Method | |
| |
| |
The Indicator Element Method | |
| |
| |
The CSS Classes Method | |
| |
| |
The Custom Attribute Method | |
| |
| |
Failures of These Methods | |
| |
| |
Sharing Validation Rules | |
| |
| |
Giving Users Validation Feedback | |
| |
| |
Showing a List of Erroneous Fields | |
| |
| |
Replacing the Main Form with a Clickable Error Message | |
| |
| |
Highlighting Erroneous Fields Individually | |
| |
| |
Instant Validation Feedback | |
| |
| |
Other Dynamic Validation Methods | |
| |
| |
Summary | |
| |
| |
| |
Modern JavaScript Case Study: A Dynamic Gallery | |
| |
| |
Basics of Thumbnail Galleries | |
| |
| |
What Is a Thumbnail Gallery and What Should It Do? | |
| |
| |
Static Thumbnail Galleries | |
| |
| |
Faking Dynamic Galleries with JavaScript | |
| |
| |
Displaying Captions | |
| |
| |
Dynamic Thumbnail Galleries | |
| |
| |
Creating an Image Badge from a Folder | |
| |
| |
Summary | |
| |
| |
| |
Using Third-Party JavaScript | |
| |
| |
What the Web Offers You | |
| |
| |
Code Snippets, RSS Feeds, APIs, and Libraries | |
| |
| |
RSS Feeds and REST APIs | |
| |
| |
Examples of REST APIs | |
| |
| |
Using a Library: Short, Shorter, jQuery | |
| |
| |
Dangers of jQuery and Other Libraries Using Their | |
| |
| |
Own Syntax | |
| |
| |
Using an API: Adding a Map to Your Site with Google Maps | |
| |
| |
Full Service: The Yahoo Developer Network and User | |
| |
| |
Interface Library | |
| |
| |
Bouncy Headlines Using YUI | |
| |
| |
Replacing Pop-Up Windows Using the YUI Connection | |
| |
| |
Manager and Container Components | |
| |
| |
Yahoo User Interface Library Summary | |
| |
| |
Summary | |
| |
| |
Appendix | |
| |
| |
Debugging JavaScript | |
| |
| |
Common JavaScript Mistakes | |
| |
| |
Misspellings and Case-Sensitivity Issues | |
| |
| |
Trying to Access Undefined Variables | |
| |
| |
Incorrect Number of Closing Braces and Parentheses | |
| |
| |
Concatenation Gone Wrong | |
| |
| |
Assigning Instead of Testing the Value of a Variable | |
| |
| |
Tracing Errors with alert() and "Console" Elements | |
| |
| |
Error Handling with try and catch() | |
| |
| |
Sequential Uncommenting | |
| |
| |
Error Reporting in Browsers | |
| |
| |
Microsoft Internet Explorer 6 | |
| |
| |
Safari | |
| |
| |
Opera 8.5 | |
| |
| |
Firefox 1.5.0.3 | |
| |
| |
JSLint and JSUNIT | |
| |
| |
Summary | |
| |
| |
Index | |