Table of Contents

Contents at a glance

PART ONE DOM SCRIPTING IN DETAIL

Chapter 1 Do It Right with Best Practices
Chapter 2 Creating Your Own Reusable Objects
Chapter 3 Understanding the DOM2 Core and DOM2 HTML
Chapter 4 Responding to User Actions and Events
Chapter 5 Dynamically Modifying Style and Cascading Style Sheets
Chapter 6 Case Study: A Photo Cropping and Resizing Tool

PART TWO COMMUNICATING OUTSIDE THE BROWSER

Chapter 7 Adding Ajax to the Mix
Chapter 8 Case Study: Enabling Asynchronous File Uploads with Progress Indicators

PART THREE SOME GREAT SOURCE

Chapter 9 Using Libraries to Increase Productivity
Chapter 10 Adding Effects to Enhance User Experience
Chapter 11 Mashups Galore! Using APIs to Add Maps, Searching, and Much More
Chapter 12 Case Study: Style Your select with the DOM

Index

Contents

PART ONE DOM SCRIPTING IN DETAIL

Chapter 1 Do It Right with Best Practices
Unobtrusive and progressive enhancement
Putting JavaScript to work
  • Separating your behavior from your structure
    • How to include JavaScript the right way
    • That javascript: prefix
  • Don’t version check!
    • Use capability detection
    • When browser version sniffing is OK
  • Degrade gracefully for guaranteed accessibility
    • Don’t require JavaScript for content—period
  • Plan for reuse with namespaces
  • Simplify things with reusable objects
    • Beginning the ADS library
    • The ADS.isCompatible() method
    • The ADS.$() method
    • The ADS.addEvent() and ADS.removeEvent() methods
    • The ADS.getElementsByClassName() method
    • The ADS.toggleDisplay() method
    • The ADS.insertAfter() method
    • The ADS.removeChildren() and ADS.prependChild() methods
  • Get your hands dirty
Common gotchas in the JavaScript syntax
  • Case sensitivity
  • Single vs. double quotes
  • Breaking lines
  • Optional semicolons and parentheses
  • Overloading (not really)
  • Anonymous functions
  • Scope resolution and closures
  • Iterating over objects
  • Referencing vs. calling a function (missing parentheses)
A practical example: WYSIWYG JavaScript rollover redux
Summary
Chapter 2 Creating Your Own Reusable Objects
What’s in an object?
  • Inheritance
  • Understanding object members
  • Everything’s in the window object
  • Making it all possible with scope and closure
Creating your own objects
  • One becomes many: creating the constructor
  • Adding static methods
  • Adding public methods to the prototype
    • Controlling access with private and privileged members
  • Do public, private, privileged, and static really matter?
  • The object literal
What is this?
  • Redefining your context with call() and apply()
try { }, catch { }, and exceptions
A practical example: your own debugging log
  • Why use a JavaScript logging object?
  • The myLogger() object
    • The myLogger.createWindow() method
    • The myLogger.writeRaw() method
    • The myLogger.write() and myLogger.header() methods
Summary
Chapter 3 Understanding the DOM2 Core and DOM2 HTML
The DOM, not JavaScript, is your document
  • Objects and interfaces
Levels of the DOM
  • DOM Level 0
  • DOM Level 1
  • Level 2
  • Level 3
  • Which level is correct for you?
Creating a sample document
  • Creating the DOM file
  • Choosing a browser
The DOM Core
  • The importance of inheritance in the DOM
  • The Core Node object
    • Node names, values, and types
    • Node parents, children, and siblings
    • Node attributes
    • The node ownerDocument property
    • Checking for children and attributes
    • Manipulating your DOM node tree
    • Duplicating and moving a node
  • The Core Element object
    • Manipulating Element attributes
    • Locating Element objects within Element objects
  • The Core Document object
    • The document.documentElement property
    • Creating nodes with document methods
    • Locating Elements with Document methods
  • Traversing and iterating the DOM tree
DOM HTML
  • The DOM2 HTML HTMLDocument object
  • The HTML HTMLElement object
A practical example: converting hand-coded HTML to DOM code
  • The DOM generation tool HTML file
  • Testing with an example HTML fragment
  • Adding to the ADS library
  • The generateDOM object framework
    • The encode() method
    • The checkForVariable() method
    • The generate() method
    • The processNode() and processAttribute() methods
Summary
Chapter 4 Responding to User Actions and Events
DOM2 Events
Types of events
  • Object events
    • The load and unload events
    • The abort and error events
    • The resize event
    • The scroll event
  • Mouse movement events
  • Mouse click events
  • Keyboard events
  • Form-related events
    • Form submit and reset events
    • Blur and focus events
    • The change event
    • W3C DOM-specific events
  • Custom events
Controlling event flow and registering event listeners
  • Event flow
    • Order of events
    • Two phases and three models
    • Popping the bubble
    • Cancelling the default action
  • Registering events
    • Inline registration model
    • The ADS.addEvent() method revisited
    • The traditional event model
    • Microsoft-specific event model
    • W3C DOM2 Events model
    • The problem with the load event
  • Accessing the event object from the event listener
    • Syntactical shortcuts
    • The ADS.getEventObject() method
  • Cross-browser event properties and methods
    • The DOM2 Events object
    • The DOM2 MouseEvent object
    • Browser incompatibilities galore
    • Accessing keyboard commands
Summary
Chapter 5 Dynamically Modifying Style and Cascading Style Sheets
The W3C DOM2 Style specification
  • CSSStyleSheet objects
  • CSSStyleRule objects
  • CSSStyleDeclaration
  • A lack of support
When DOM scripting and style collide
  • Modifying markup for style
    • Removing the extra markup
Keeping style out of your DOM script
  • The style property
  • Switching styles based on a className
    • Using common classes with className switching
    • Drawbacks of using className switching
    • Why not use setAttribute for class names?
  • Switching the style sheet
    • Using alternative style sheets
    • Switching the body className
    • Dynamically loading and removing style sheets
  • Modifying CSS rules
    • AdvancED image replacement revisited
Accessing the computed style
The Microsoft filter property
Practical example: a simple transition effect
Summary
Chapter 6 Case Study: A Photo Cropping and Resizing Tool
The test files
The editor objects
  • Invoking the imageEditor tool
  • The imageEditor load event
  • Creating the editor markup and objects
  • Adding the event listeners to the editor objects
  • Resizing the image
  • Cropping the Image
  • The incomplete image editor
Summary

PART TWO COMMUNICATING OUTSIDE THE BROWSER

Chapter 7 Adding Ajax to the Mix
Merging technology
  • Semantic XHTML and the DOM
  • JavaScript and the XMLHttpRequest object
    • Making a new request
    • Acting on the response
    • Identifying Ajax requests on the server
    • Beyond GET and POST
  • XML
    • Plain text
    • HTML
    • JavaScript code
    • JSON
  • A reusable object
  • Is Ajax right for you?
Why Ajax may break your site and how to fix it
  • JavaScript required for content
  • Bypassing cross-site restrictions with <script> tags
  • Back buttons and bookmarks
    • A not so simple fix
    • Browser sniffing for product features
    • Tracking location changes
  • A race to finish the request
    • Latency picks the winner
    • Dealing with asynchronous requests
  • Increased resources
  • Problems solved?
Practical example: an Ajax-enhanced photo album
  • Ajaxify the photo browser
Summary
Chapter 8 Case Study: Enabling Asynchronous File Uploads with Progress Indicators
A little life in the loading message
  • Processing uploads on the server
    • The magic word
The starting point
Putting it all together: an upload progress indicator
  • The addProgressBar() framework
  • The load event
  • The addProgressBar() object
    • Modifying the file inputs
    • Redirecting the form
    • And the magic word is
    • The progress bar
    • Tracking progress
Summary

PART THREE SOME GREAT SOURCE

Chapter 9 Using Libraries to Increase Productivity
Choosing the library that’s right for you
  • The libraries
    • DOMAssistant
    • jQuery
    • Mochikit
    • Prototype
    • Yahoo User Interface library
Enhancing the DOM
  • Chaining syntax
    • Advanced selection with expressions
    • jQuery with XPath
  • Filtering with a callback
  • Manipulating the DOM document
    • Using DOMAssistant to create elements
    • Using jQuery to move nodes
    • Using MochiKit to create elements
    • Using Prototype to clean up your document
    • Using YUI to check for intersecting elements
    • Iterating over results
Handling events
  • Registering events
    • The DOMAssistant way
    • The jQuery way
  • Custom events
Accessing and manipulating style
Communication
  • Prototype Ajax object
  • jQuery keeps Ajax simple
Summary
Chapter 10 Adding Effects to Enhance User Experience
Do it yourself
  • Show me the content!
  • Providing feedback
    • The Yellow Fade Technique
    • Avoiding shifting content
A few visual effects libraries
  • Moo.fx
  • Script.aculo.us
Some visual bling
  • Mootastic CSS property modification
    • One property at a time
    • A mix of properties all at once
    • Reusing the effect
    • Multiple effects on multiple objects
    • Sliding with Moo.fx
    • Form feedback made pretty
  • Visual effects with Script.aculo.us
    • Parallel effects
  • Realistic motion using Moo.fx
    • Customer form revisited
  • Rounding corners
  • The rest of the libraries
Behavioral enhancements
  • Drag and drop with Script.aculo.us
    • Drag anywhere
    • Dropping on a target: the droppable
    • Building a drag-and-drop shopping cart with Script.aculo.us
    • Interacting with draggables through an observer
    • More drag and drop fun
Summary
Chapter 11 Mashups Galore! Using APIs to Add Maps, Searching, and Much More
API keys
Client-side APIs: some JavaScript required
  • Maps put mashups on the map
    • Retrieving latitude and longitude
    • Maintaining accessibility using microformats
  • Ajax search requests
    • Search results for your site only
    • Related links
  • Mashing Search with Maps
Server-side APIs: some proxy required
  • An integrated to-do list with Basecamp
    • Your Basecamp account information
    • Building the Basecamp proxy
    • The Basecamp DOM script
  • Buddy icons with Flickr
    • The Flickr API key
    • Building the Flickr proxy
    • The DOM script
Summary
Chapter 12 Case Study: Style Your select with the DOM
That classic feeling
Building a better select
Strategy? We don’t need no stinkin’ strategy
  • The files
  • The FauxSelect objects
  • Getting the faux select going
  • Locating the select elements
    • A little housekeeping
  • Building the DOM elements
    • Creating a faux value
    • Creating faux options
Generating life and other memorable events
  • Opening, closing, and clicking the select
    • Selecting a faux option
Bling-bling for da form t’ing
Behavioral modifications
  • Closing the faux select
  • Z index to the rescue!
  • Keyboard controls and other niceties
    • Selecting options
    • Maintaining focus
    • Closing the faux select
  • Is select too big for its britches?
Knock, knock . . . housekeeping!
Further adventures in select replacement
Summary

Index

© Copyright 2007 Jeffrey Sambells.