Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Copyright
About the Authors
About the Technical Reviewers
About the Cover Image Designer
Acknowledgments
Introduction
Who this book is for
How this book is structured
Conventions
Prerequisites
Downloading the code
Contacting the authors
1. DOM Scripting in Detail
1. Do It Right With Best Practices
1.1. Unobtrusive and progressive enhancement
1.2. Putting JavaScript to work
1.2.1. Separating your behavior from your structure
1.2.1.1. How to include JavaScript the right way
1.2.1.2. That javascript: prefix
1.2.2. Don't version check!
1.2.2.1. Use capability detection
1.2.2.2. When browser version sniffing is OK
1.2.3. Degrade gracefully for guaranteed accessibility
1.2.3.1. Don't require JavaScript for content—period.
1.2.4. Plan for reuse with namespaces
1.2.5. Simplify things with reusable objects
1.2.5.1. Beginning the ADS library
1.2.5.2. The ADS.isCompatible() method
1.2.5.3. The ADS.$() method
1.2.5.4. The ADS.addEvent() and ADS.removeEvent() methods
1.2.5.5. The ADS.getElementsByClassName() method
1.2.5.6. The ADS.toggleDisplay() method
1.2.5.7. The ADS.insertAfter() method
1.2.5.8. The ADS.removeChildren() and ADS.prependChild() methods
1.2.6. Get your hands dirty
1.3. Common gotchas in the JavaScript syntax
1.3.1. Case sensitivity
1.3.2. Single vs. double quotes
1.3.3. Breaking lines
1.3.4. Optional semicolons and parentheses
1.3.5. Overloading (not really)
1.3.6. Anonymous functions
1.3.7. Scope resolution and closures
1.3.8. Iterating over objects
1.3.9. Referencing vs. calling a function (missing parentheses)
1.4. A practical example: WYSIWYG JavaScript rollover redux
1.5. Summary
2. Creating Your Own Reusable Objects
2.1. What's in an object?
2.1.1. Inheritance
2.1.2. Understanding object members
2.1.3. Everything's in the window object
2.1.4. Making it all possible with scope and closure
2.2. Creating your own objects
2.2.1. One becomes many: creating the constructor
2.2.2. Adding static methods
2.2.3. Adding public methods to the prototype
2.2.3.1. Controlling access with private and privileged members
2.2.4. Do public, private, privileged, and static really matter?
2.2.5. The object literal
2.3. What is this?
2.3.1. Redefining your context with call() and apply()
2.4. try { }, catch { }, and exceptions
2.5. A practical example: your own debugging log
2.5.1. Why use a JavaScript logging object?
2.5.2. The myLogger() object
2.5.2.1. The myLogger.createWindow() method
2.5.2.2. The myLogger.writeRaw() method
2.5.2.3. The myLogger.write() and myLogger.header() methods
2.6. Summary
3. Understanding the DOM2 Core and DOM2 HTML
3.1. The DOM, not JavaScript, is your document
3.1.1. Objects and interfaces
3.2. Levels of the DOM
3.2.1. DOM Level 0
3.2.2. DOM Level 1
3.2.3. Level 2
3.2.4. Level 3
3.2.5. Which level is correct for you?
3.3. Creating a sample document
3.3.1. Creating the DOM file
3.3.2. Choosing a browser
3.4. The DOM Core
3.4.1. The importance of inheritance in the DOM
3.4.2. The Core Node object
3.4.2.1. Node names, values, and types
3.4.2.2. Node parents, children, and siblings
3.4.2.3. Node attributes
3.4.2.4. The node ownerDocument property
3.4.2.5. Checking for children and attributes
3.4.2.6. Manipulating your DOM node tree
3.4.2.7. Duplicating and moving a node
3.4.3. The Core Element object
3.4.3.1. Manipulating Element attributes
3.4.3.2. Locating Element objects within Element objects
3.4.4. The Core Document object
3.4.4.1. The document.documentElement property
3.4.4.2. Creating nodes with document methods
3.4.4.3. Locating Elements with Document methods
3.4.5. Traversing and iterating the DOM tree
3.5. DOM HTML
3.5.1. The DOM2 HTML HTMLDocument object
3.5.2. The HTML HTMLElement object
3.6. A practical example: converting hand-coded HTML to DOM code
3.6.1. The DOM generation tool HTML file
3.6.2. Testing with an example HTML fragment
3.6.3. Adding to the ADS library
3.6.4. The generateDOM object framework
3.6.4.1. The encode() method
3.6.4.2. The checkForVariable() method
3.6.4.3. The generate() method
3.6.4.4. The processNode() and processAttribute() methods
3.7. Summary
4. Responding to User Actions and Events
4.1. DOM2 Events
4.2. Types of events
4.2.1. Object events
4.2.1.1. The load and unload events
4.2.1.2. The abort and error events
4.2.1.3. The resize event
4.2.1.4. The scroll event
4.2.2. Mouse movement events
4.2.3. Mouse click events
4.2.4. Keyboard events
4.2.5. Form-related events
4.2.5.1. Form submit and reset events
4.2.5.2. Blur and focus events
4.2.5.3. The change event
4.2.6. W3C DOM-specific events
4.2.7. Custom events
4.3. Controlling event flow and registering event listeners
4.3.1. Event flow
4.3.1.1. Order of events
4.3.1.2. Two phases and three models
4.3.1.3. Popping the bubble
4.3.1.4. Cancelling the default action
4.3.2. Registering events
4.3.2.1. Inline registration model
4.3.2.2. The ADS.addEvent() method revisited
4.3.2.3. The traditional event model
4.3.2.4. Microsoft-specific event model
4.3.2.5. W3C DOM2 Events model
4.3.2.6. The problem with the load event
4.3.3. Accessing the event object from the event listener
4.3.3.1. Syntactical shortcuts
4.3.3.2. The ADS.getEventObject() method
4.3.4. Cross-browser event properties and methods
4.3.4.1. The DOM2 Events object
4.3.4.2. The DOM2 MouseEvent object
4.3.4.2.1. altKey, ctrlKey, and shiftKey
4.3.4.2.2. button
4.3.4.2.3. clientX and clientY
4.3.4.2.4. screenX and screenY
4.3.4.2.5. MouseEvent
4.3.4.3. Browser incompatibilities galore
4.3.4.3.1. Accessing the event's target element
4.3.4.3.2. Determining which mouse button was clicked
4.3.4.3.3. Dealing with the mouse position
4.3.4.4. Accessing keyboard commands
4.4. Summary
5. Dynamically Modifying Style and Cascading Style Sheets
5.1. The W3C DOM2 Style specification
5.1.1. CSSStyleSheet objects
5.1.2. CSSStyleRule objects
5.1.3. CSSStyleDeclaration
5.1.4. A lack of support
5.2. When DOM scripting and style collide
5.2.1. Modifying markup for style
5.2.1.1. Removing the extra markup
5.3. Keeping style out of your DOM script
5.3.1. The style property
5.3.2. Switching styles based on a className
5.3.2.1. Using common classes with className switching
5.3.2.2. Drawbacks of using className switching
5.3.2.3. Why not use setAttribute for class names?
5.3.3. Switching the style sheet
5.3.3.1. Using alternative style sheets
5.3.3.2. Switching the body className
5.3.3.3. Dynamically loading and removing style sheets
5.3.4. Modifying CSS rules
5.3.4.1. AdvancED image replacement revisited
5.4. Accessing the computed style
5.5. The Microsoft filter property
5.6. Practical example: a simple transition effect
5.7. Summary
6. Case Study: A Photo Cropping and Resizing Tool
6.1. The test files
6.2. The editor objects
6.2.1. Invoking the imageEditor tool
6.2.2. The imageEditor load event
6.2.3. Creating the editor markup and objects
6.2.4. Adding the event listeners to the editor objects
6.2.5. Resizing the image
6.2.6. Cropping the Image
6.2.7. The incomplete image editor
6.3. Summary
2. Communicating Outside the Browser
7. Adding Ajax to the Mix
7.1. Merging technology
7.1.1. Semantic XHTML and the DOM
7.1.2. JavaScript and the XMLHttpRequest object
7.1.2.1. Making a new request
7.1.2.2. Acting on the response
7.1.2.3. Identifying Ajax requests on the server
7.1.2.4. Beyond GET and POST
7.1.3. XML
7.1.3.1. Plain text
7.1.3.2. HTML
7.1.3.3. JavaScript code
7.1.3.4. JSON
7.1.4. A reusable object
7.1.5. Is Ajax right for you?
7.2. Why Ajax may break your site and how to fix it
7.2.1. JavaScript required for content
7.2.2. Bypassing cross-site restrictions with <script> tags
7.2.3. Back buttons and bookmarks
7.2.3.1. A not so simple fix
7.2.3.2. Browser sniffing for product features
7.2.3.3. Tracking location changes
7.2.4. A race to finish the request
7.2.4.1. Latency picks the winner
7.2.4.2. Dealing with asynchronous requests
7.2.4.2.1. Ignoring the problem
7.2.4.2.2. Turning off asynchronous behavior
7.2.4.2.3. Queuing the requests client side
7.2.4.2.4. Making the request asynchronous but disabling conflicting features
7.2.4.2.5. Rolling your own solution
7.2.5. Increased resources
7.2.6. Problems solved?
7.3. Practical example: an Ajax-enhanced photo album
7.3.1.
7.3.1.1. Ajaxify the photo browser
7.4. Summary
8. Case Study: Enabling Asynchronous File Uploads with Progress Indicators
8.1. A little life in the loading message
8.1.1. Processing uploads on the server
8.1.1.1. The magic word
8.2. The starting point
8.3. Putting it all together: an upload progress indicator
8.3.1. The addProgressBar() framework
8.3.2. The load event
8.3.3. The addProgressBar() object
8.3.3.1. Modifying the file inputs
8.3.3.2. Redirecting the form
8.3.3.3. And the magic word is . . .
8.3.3.4. The progress bar
8.3.3.5. Tracking progress
8.4. Summary
3. Some Great Source
9. Using Libraries to Increase Productivity
9.1. Choosing the library that's right for you
9.1.1. The libraries
9.1.1.1. DOMAssistant
9.1.1.2. jQuery
9.1.1.3. Mochikit
9.1.1.4. Prototype
9.1.1.5. Yahoo User Interface library
9.2. Enhancing the DOM
9.2.1. Chaining syntax
9.2.1.1. Advanced selection with expressions
9.2.1.2. jQuery with XPath
9.2.2. Filtering with a callback
9.2.3. Manipulating the DOM document
9.2.3.1. Using DOMAssistant to create elements
9.2.3.2. Using jQuery to move nodes
9.2.3.3. Using MochiKit to create elements
9.2.3.4. Using Prototype to clean up your document
9.2.3.5. Using YUI to check for intersecting elements
9.2.3.6. Iterating over results
9.3. Handling events
9.3.1. Registering events
9.3.1.1. The DOMAssistant way
9.3.1.2. The jQuery way
9.3.2. Custom events
9.4. Accessing and manipulating style
9.5. Communication
9.5.1.
9.5.1.1. Prototype Ajax object
9.5.1.2. jQuery keeps Ajax simple
9.6. Summary
10. Adding Effects to Enhance User Experience
10.1. Do it yourself
10.1.1. Show me the content!
10.1.2. Providing feedback
10.1.2.1. The Yellow Fade Technique
10.1.2.2. Avoiding shifting content
10.2. A few visual effects libraries
10.2.1.
10.2.1.1. Moo.fx
10.2.1.2. Script.aculo.us
10.3. Some visual bling
10.3.1. Mootastic CSS property modification
10.3.1.1. One property at a time
10.3.1.2. A mix of properties all at once
10.3.1.3. Reusing the effect
10.3.1.4. Multiple effects on multiple objects
10.3.1.5. Sliding with Moo.fx
10.3.1.6. Form feedback made pretty
10.3.2. Visual effects with Script.aculo.us
10.3.2.1. Parallel effects
10.3.3. Realistic motion using Moo.fx
10.3.3.1. Customer form revisited
10.3.4. Rounding corners
10.3.5. The rest of the libraries
10.4. Behavioral enhancements
10.4.1. Drag and drop with Script.aculo.us
10.4.1.1. Drag anywhere
10.4.1.2. Dropping on a target: the droppable
10.4.1.3. Building a drag-and-drop shopping cart with Script.aculo.us
10.4.1.4. Interacting with draggables through an observer
10.4.1.5. More drag and drop fun
10.5. Summary
11. Mashups Galore! Using APIs to Add Maps, Searching, and Much More
11.1. API keys
11.2. Client-side APIs: some JavaScript required
11.2.1. Maps put mashups on the map
11.2.1.1. Retrieving latitude and longitude
11.2.1.2. Maintaining accessibility using microformats
11.2.2. Ajax search requests
11.2.2.1. Search results for your site only
11.2.2.2. Related links
11.2.3. Mashing Search with Maps
11.3. Server-side APIs: some proxy required
11.3.1. An integrated to-do list with Basecamp
11.3.1.1. Your Basecamp account information
11.3.1.2. Building the Basecamp proxy
11.3.1.3. The Basecamp DOM script
11.3.2. Buddy icons with Flickr
11.3.2.1. The Flickr API key
11.3.2.2. Building the Flickr proxy
11.3.2.3. The DOM script
11.4. Summary
12. Case Study: Style Your select with the DOM
12.1. That classic feeling
12.2. Building a better select
12.3. Strategy? We don't need no stinkin' strategy . . .
12.3.1. The files
12.3.2. The FauxSelect objects
12.3.3. Getting the faux select going
12.3.4. Locating the select elements
12.3.4.1. A little housekeeping
12.3.5. Building the DOM elements
12.3.5.1. Creating a faux value
12.3.5.2. Creating faux options
12.4. Generating life and other memorable events
12.4.1. Opening, closing, and clicking the select
12.4.1.1. Selecting a faux option
12.5. Bling-bling for da form t'ing
12.6. Behavioral modifications
12.6.1.
12.6.1.1. Closing the faux select
12.6.2. Z index to the rescue!
12.6.3. Keyboard controls and other niceties
12.6.3.1. Selecting options
12.6.3.2. Maintaining focus
12.6.3.3. Closing the faux select
12.6.4. Is select too big for its britches?
12.7. Knock, knock . . . housekeeping!
12.8. Further adventures in select replacement
12.9. Summary
← Prev
Back
Next →
← Prev
Back
Next →