| |
| |
| Foreword | |
| |
| |
| About the Author | |
| |
| |
| About the Technical Reviewer | |
| |
| |
| About the Foreword Writer | |
| |
| |
| Acknowledgments | |
| |
| |
| Introduction | |
| |
| |
| |
| A Brief History of JavaScript | |
| |
| |
| The origins of JavaScript | |
| |
| |
| What is a Document Object Model? | |
| |
| |
| The browser wars | |
| |
| |
| The D word: DHTML | |
| |
| |
| Clash of the browsers | |
| |
| |
| Raising the standard | |
| |
| |
| Thinking outside the browser | |
| |
| |
| The end of the browser wars | |
| |
| |
| A new beginning | |
| |
| |
| What's next? | |
| |
| |
| |
| JavaScript Syntax | |
| |
| |
| What you'll need | |
| |
| |
| Syntax | |
| |
| |
| Statements | |
| |
| |
| Comments | |
| |
| |
| Variables | |
| |
| |
| Data types | |
| |
| |
| Strings | |
| |
| |
| Numbers | |
| |
| |
| Boolean values | |
| |
| |
| Arrays | |
| |
| |
| Associative arrays | |
| |
| |
| Operations | |
| |
| |
| Arithmetic operators | |
| |
| |
| Conditional statements | |
| |
| |
| Comparison operators | |
| |
| |
| Logical operators | |
| |
| |
| Looping statements | |
| |
| |
| while | |
| |
| |
| do...while | |
| |
| |
| for | |
| |
| |
| Functions | |
| |
| |
| Variable scope | |
| |
| |
| Objects | |
| |
| |
| Native objects | |
| |
| |
| Host objects | |
| |
| |
| What's next? | |
| |
| |
| |
| The Document Object Model | |
| |
| |
| D is for document | |
| |
| |
| Objects of desire | |
| |
| |
| Dial M for model | |
| |
| |
| Nodes | |
| |
| |
| element nodes | |
| |
| |
| text nodes | |
| |
| |
| attribute nodes | |
| |
| |
| Cascading Style Sheets | |
| |
| |
| getElementByld | |
| |
| |
| getElementsByTagName | |
| |
| |
| Taking stock | |
| |
| |
| getAttribute | |
| |
| |
| setAttribute | |
| |
| |
| What's next? | |
| |
| |
| |
| A JavaScript Image Gallery | |
| |
| |
| The markup | |
| |
| |
| The JavaScript | |
| |
| |
| A DOM diversion | |
| |
| |
| Finishing the function | |
| |
| |
| Applying the JavaScript | |
| |
| |
| Event handlers | |
| |
| |
| Expanding the function | |
| |
| |
| Introducing childNodes | |
| |
| |
| Introducing the nodeType property | |
| |
| |
| Adding a description in the markup | |
| |
| |
| Changing the description with JavaScript | |
| |
| |
| Introducing the nodeValue property | |
| |
| |
| Introducing firstChild and lastChild | |
| |
| |
| Using nodeValue to update the description | |
| |
| |
| What's next? | |
| |
| |
| |
| Best Practices | |
| |
| |
| Please don't let me be misunderstood | |
| |
| |
| Don't blame the messenger | |
| |
| |
| The Flash mob | |
| |
| |
| Question everything | |
| |
| |
| Graceful degradation | |
| |
| |
| The javascript: pseudo-protocol | |
| |
| |
| Inline event handlers | |
| |
| |
| Who cares? | |
| |
| |
| The lessons of CSS | |
| |
| |
| Progressive enhancement | |
| |
| |
| Unobtrusive JavaScript | |
| |
| |
| Backwards compatibility | |
| |
| |
| Browser sniffing | |
| |
| |
| What's next? | |
| |
| |
| |
| Image Gallery Revisited | |
| |
| |
| A quick recap | |
| |
| |
| Does it degrade gracefully? | |
| |
| |
| Is the JavaScript unobtrusive? | |
| |
| |
| Adding the event handler | |
| |
| |
| Checkpoints | |
| |
| |
| What's in a name? | |
| |
| |
| Looping the loop | |
| |
| |
| Changing behavior | |
| |
| |
| Closing it up | |
| |
| |
| Share the load | |
| |
| |
| Assuming too much | |
| |
| |
| Fine-tuning | |
| |
| |
| Keyboard access | |
| |
| |
| Beware of onkeypress | |
| |
| |
| Sharing hooks with CSS | |
| |
| |
| DOM Core and HTML-DOM | |
| |
| |
| What's next? | |
| |
| |
| |
| Creating Markup on the Fly | |
| |
| |
| Document.write | |
| |
| |
| InnerHTML | |
| |
| |
| Pros and cons | |
| |
| |
| DOM methods | |
| |
| |
| createElement | |
| |
| |
| appendChild | |
| |
| |
| createTextNode | |
| |
| |
| A more complex combination | |
| |
| |
| Revisiting the image gallery | |
| |
| |
| insertBefore | |
| |
| |
| Writing the insertAfter function | |
| |
| |
| Using the insertAfter function | |
| |
| |
| The finished image gallery | |
| |
| |
| Summary | |
| |
| |
| What's next? | |
| |
| |
| |
| Enhancing Content | |
| |
| |
| What not to do | |
| |
| |
| Making the invisible visible | |
| |
| |
| The content | |
| |
| |
| HTML or XHTML? | |
| |
| |
| The markup | |
| |
| |
| The CSS | |
| |
| |
| The JavaScript | |
| |
| |
| Displaying abbreviations | |
| |
| |
| Writing the displayAbbreviations function | |
| |
| |
| Creating the markup | |
| |
| |
| A browser bomb | |
| |
| |
| Displaying citations | |
| |
| |
| Writing the displayCitations function | |
| |
| |
| Displaying access keys | |
| |
| |
| The markup | |
| |
| |
| The JavaScript | |
| |
| |
| Summary | |
| |
| |
| What's next? | |
| |
| |
| |
| CSS-DOM | |
| |
| |
| Three sheets to the Web | |
| |
| |
| Structure | |
| |
| |
| Presentation | |
| |
| |
| Behavior | |
| |
| |
| Separation | |
| |
| |
| The style property | |
| |
| |
| Getting styles | |
| |
| |
| Inline only | |
| |
| |
| Setting styles | |
| |
| |
| Knowing when to use DOM styling | |
| |
| |
| Styling elements in the node tree | |
| |
| |
| Repetitive styling | |
| |
| |
| Responding to events | |
| |
| |
| className | |
| |
| |
| Abstracting a function | |
| |
| |
| What's next? | |
| |
| |
| |
| Animated Slideshow | |
| |
| |
| What is animation? | |
| |
| |
| Position | |
| |
| |
| Time | |
| |
| |
| setTimeout | |
| |
| |
| Increments | |
| |
| |
| Abstraction | |
| |
| |
| Practical animation | |
| |
| |
| The situation | |
| |
| |
| The solution | |
| |
| |
| CSS | |
| |
| |
| JavaScript | |
| |
| |
| A question of scope | |
| |
| |
| Refining the animation | |
| |
| |
| Final touches | |
| |
| |
| Generating markup | |
| |
| |
| What's next? | |
| |
| |
| |
| Putting It All Together | |
| |
| |
| The brief | |
| |
| |
| Raw materials | |
| |
| |
| Site structure | |
| |
| |
| Page structure | |
| |
| |
| Design | |
| |
| |
| CSS | |
| |
| |
| Color | |
| |
| |
| Layout | |
| |
| |
| Typography | |
| |
| |
| Markup | |
| |
| |
| JavaScript | |
| |
| |
| Page highlighting | |
| |
| |
| JavaScript slideshow | |
| |
| |
| Internal navigation | |
| |
| |
| JavaScript image gallery | |
| |
| |
| Table enhancements | |
| |
| |
| Form enhancements | |
| |
| |
| Labels | |
| |
| |
| Default values | |
| |
| |
| Form validation | |
| |
| |
| Summary | |
| |
| |
| What's next? | |
| |
| |
| |
| The Future of DOM Scripting | |
| |
| |
| The state of the Web | |
| |
| |
| Web browsers | |
| |
| |
| Crazy like a Firefox | |
| |
| |
| Web designers | |
| |
| |
| The three-legged stool | |
| |
| |
| The DOM Scripting Task Force | |
| |
| |
| Ajax | |
| |
| |
| The XMLHttpRequest object | |
| |
| |
| An explosion of Ajax | |
| |
| |
| Ajax challenges | |
| |
| |
| Progressive enhancement with Ajax | |
| |
| |
| Hijax | |
| |
| |
| The future of Ajax | |
| |
| |
| Applications on the Web | |
| |
| |
| What's next? | |
| |
| |
| Reference | |
| |
| |
| Methods | |
| |
| |
| Creating nodes | |
| |
| |
| createElement | |
| |
| |
| create TextNode | |
| |
| |
| Duplicating nodes | |
| |
| |
| cloneNode | |
| |
| |
| Inserting nodes | |
| |
| |
| appendChild | |
| |
| |
| insertBefore | |
| |
| |
| Removing nodes | |
| |
| |
| removeChild | |
| |
| |
| Replacing nodes | |
| |
| |
| replaceChild | |
| |
| |
| Manipulating nodes | |
| |
| |
| setAttribute | |
| |
| |
| Finding nodes | |
| |
| |
| getAttribute | |
| |
| |
| getElementByld | |
| |
| |
| getElementsByTagName | |
| |
| |
| hasChildNodes | |
| |
| |
| Properties | |
| |
| |
| Node properties | |
| |
| |
| nodeName | |
| |
| |
| nodeType | |
| |
| |
| nodeValue | |
| |
| |
| Traversing the node tree | |
| |
| |
| childNodes | |
| |
| |
| firstChild | |
| |
| |
| lastChild | |
| |
| |
| nextSibling | |
| |
| |
| parentNode | |
| |
| |
| previousSibling | |
| |
| |
| Index | |