| |
| |
| Preface | |
| |
| |
| Who Should Read this Book? | |
| |
| |
| What's Covered in this Book? | |
| |
| |
| The Book's Web Site | |
| |
| |
| The Code Archive | |
| |
| |
| Updates and Errata | |
| |
| |
| The SitePoint Forums | |
| |
| |
| The SitePoint Newsletters | |
| |
| |
| Your Feedback | |
| |
| |
| Acknowledgments | |
| |
| |
| Kevin Yank | |
| |
| |
| Cameron Adams | |
| |
| |
| Conventions Used in this Book | |
| |
| |
| Code Samples | |
| |
| |
| Tips, Notes, and Warnings | |
| |
| |
| |
| The Three Layers of the Web | |
| |
| |
| Keep 'em Separated | |
| |
| |
| Three Layers | |
| |
| |
| HTML for Content | |
| |
| |
| CSS for Presentation | |
| |
| |
| JavaScript for Behavior | |
| |
| |
| The Right Way | |
| |
| |
| JavaScript Libraries | |
| |
| |
| Let's Get Started! | |
| |
| |
| |
| Programming with JavaScript | |
| |
| |
| Running a JavaScript Program | |
| |
| |
| Statements: Bite-sized Chunks for your Browser | |
| |
| |
| Comments: Bite-sized Chunks Just for You | |
| |
| |
| Variables: Storing Data for your Program | |
| |
| |
| Variable Types: Different Types for Different Data | |
| |
| |
| Conditions and Loops: Controlling Program Flow | |
| |
| |
| Conditions: Making Decisions | |
| |
| |
| Loops: Minimizing Repetition | |
| |
| |
| Functions: Writing Code for Later | |
| |
| |
| Arguments: Passing Data to a Function | |
| |
| |
| Return Statements: Outputting Data from a Function | |
| |
| |
| Scope: Keeping your Variables Separate | |
| |
| |
| Objects | |
| |
| |
| Unobtrusive Scripting in the Real World | |
| |
| |
| Summary | |
| |
| |
| |
| Document Access | |
| |
| |
| The Document Object Model: Mapping your HTML | |
| |
| |
| Text Nodes | |
| |
| |
| Attribute Nodes | |
| |
| |
| Accessing the Nodes you Want | |
| |
| |
| Finding an Element by ID | |
| |
| |
| Finding Elements by Tag Name | |
| |
| |
| Finding Elements by Class Name | |
| |
| |
| Navigating the DOM Tree | |
| |
| |
| Interacting with Attributes | |
| |
| |
| Changing Styles | |
| |
| |
| Changing Styles with Class | |
| |
| |
| Example: Making Stripy Tables | |
| |
| |
| Finding All Tables with Class dataTable | |
| |
| |
| Getting the Table Rows for Each Table | |
| |
| |
| Adding the Class alt to Every Second Row | |
| |
| |
| Putting it All Together | |
| |
| |
| Exploring Libraries | |
| |
| |
| Prototype | |
| |
| |
| jQuery | |
| |
| |
| Dojo | |
| |
| |
| Summary | |
| |
| |
| |
| Events | |
| |
| |
| An Eventful History | |
| |
| |
| Event Handlers | |
| |
| |
| Default Actions | |
| |
| |
| The this Keyword | |
| |
| |
| The Problem with Event Handlers | |
| |
| |
| Event Listeners | |
| |
| |
| Default Actions | |
| |
| |
| Event Propagation | |
| |
| |
| The this Keyword | |
| |
| |
| The Internet Explorer Memory Leak | |
| |
| |
| Putting it All Together | |
| |
| |
| Example: Rich Tooltips | |
| |
| |
| The Static Page | |
| |
| |
| Making Things Happen | |
| |
| |
| The Workhorse Methods | |
| |
| |
| The Dynamic Styles | |
| |
| |
| Putting it All Together | |
| |
| |
| Example: Accordion | |
| |
| |
| The Static Page | |
| |
| |
| The Workhorse Methods | |
| |
| |
| The Dynamic Styles | |
| |
| |
| Putting it All Together | |
| |
| |
| Exploring Libraries | |
| |
| |
| Summary | |
| |
| |
| |
| Animation | |
| |
| |
| The Principles of Animation | |
| |
| |
| Controlling Time with JavaScript | |
| |
| |
| Using Variables with setTimeout | |
| |
| |
| Stopping the Timer | |
| |
| |
| Creating a Repeating Timer | |
| |
| |
| Stopping setInterval | |
| |
| |
| Revisiting Rich Tooltips | |
| |
| |
| Old-school Animation in a New-school Style | |
| |
| |
| Path-based Motion | |
| |
| |
| Animating in Two Dimensions | |
| |
| |
| Creating Realistic Movement | |
| |
| |
| Moving Ahead | |
| |
| |
| Revisiting the Accordion Control | |
| |
| |
| Making the Accordion Look Like it's Animated | |
| |
| |
| Changing the Code | |
| |
| |
| Exploring Libraries | |
| |
| |
| script.aculo.us | |
| |
| |
| Summary | |
| |
| |
| |
| Form Enhancements | |
| |
| |
| HTML DOM Extensions | |
| |
| |
| Example: Dependent Fields | |
| |
| |
| Example: Cascading Menus | |
| |
| |
| Form Validation | |
| |
| |
| Intercepting Form Submissions | |
| |
| |
| Regular Expressions | |
| |
| |
| Example: Reusable Validation Script | |
| |
| |
| Custom Form Controls | |
| |
| |
| Example: Slider | |
| |
| |
| Exploring Libraries | |
| |
| |
| Form Validation | |
| |
| |
| Custom Controls | |
| |
| |
| Summary | |
| |
| |
| |
| Errors and Debugging | |
| |
| |
| Nothing Happened! | |
| |
| |
| Common Errors | |
| |
| |
| Syntax Errors | |
| |
| |
| Runtime Errors | |
| |
| |
| Logic Errors | |
| |
| |
| Debugging with Firebug | |
| |
| |
| Summary | |
| |
| |
| |
| Ajax | |
| |
| |
| XMLHttpRequest: Chewing Bite-sized Chunks of Content | |
| |
| |
| Creating an XMLHttpRequest Object | |
| |
| |
| Calling a Server | |
| |
| |
| Dealing with Data | |
| |
| |
| A Word on Screen Readers | |
| |
| |
| Putting Ajax into Action | |
| |
| |
| Seamless Form Submission with Ajax | |
| |
| |
| Exploring Libraries | |
| |
| |
| Prototype | |
| |
| |
| Dojo | |
| |
| |
| jQuery | |
| |
| |
| YUI | |
| |
| |
| MooTools | |
| |
| |
| Summary | |
| |
| |
| |
| Looking Forward | |
| |
| |
| Bringing Richness to the Web | |
| |
| |
| Easy Exploration | |
| |
| |
| Easy Visualization | |
| |
| |
| Unique Interaction | |
| |
| |
| Rich Internet Applications | |
| |
| |
| Widgets | |
| |
| |
| JavaScript Off the Web | |
| |
| |
| Exploring Libraries | |
| |
| |
| Dojo | |
| |
| |
| Google Web Toolkit | |
| |
| |
| Summary | |
| |
| |
| |
| The Core JavaScript Library | |
| |
| |
| The Object | |
| |
| |
| Event Listener Methods | |
| |
| |
| Script Bootstrapping | |
| |
| |
| CSS Class Management Methods | |
| |
| |
| Retrieving Computed Styles | |
| |
| |
| The Complete Library | |
| |
| |
| Index | |