AdvancED DOM Scripting: Dynamic Web Design Techniques

AdvancED DOM Scripting: Dynamic Web Design Techniques

by Jeffrey Sambells, Aaron Gustafson
Released August 2007
Publisher(s): Apress
ISBN: 9781590598566

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

As a web designer or developer, you know how powerful DOM scripting is for enhancing web pages and applications, adding dynamic functionality and improving the user experience. You've got a reasonable understanding of JavaScript and the DOM, but now you want to take your skills further. This book is all you need—it shows you how to add essential functionality to your web pages, such as on the fly layout and style changes, interface personalization, maps and search using APIs, visual effects using JavaScript libraries, and much more.

  • Includes a quick recap of the basics, for reference purposes

  • Packed with real world JavaScript solutions from beginning to end

  • Written by Beginning Google Maps author Jeffrey Sambells, and includes a case study by JavaScript guru Aaron Gustafson

Table of contents

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

Product information

  • Title: AdvancED DOM Scripting: Dynamic Web Design Techniques
  • Author(s): Jeffrey Sambells, Aaron Gustafson
  • Release date: August 2007
  • Publisher(s): Apress
  • ISBN: 9781590598566