DOM Scripting: Web Design with JavaScript and the Document Object Model, Second Edition

DOM Scripting: Web Design with JavaScript and the Document Object Model, Second Edition

Released December 2010
Publisher(s): friends of ED
ISBN: 9781430233893

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

There are three main technologies married together to create usable, standards-compliant web designs: XHTML for data structure, Cascading Style Sheets for styling your data, and JavaScript for adding dynamic effects and manipulating structure on the fly using the Document Object Model. This book is about the latter of the three.

DOM Scripting: Web Design with JavaScript and the Document Object Model gives you everything you need to start using JavaScript and the Document Object Model to enhance your web pages with client-side dynamic effects. We start off by giving you a basic crash course in JavaScript and the DOM, then move on to provide you with several real world examples built up from scratch including dynamic image galleries and dynamic menus, and show you how to manipulate web page styles using the CSS DOM, and create markup on the fly.

New material for this edition includes a run through of the most popular JavaScript libraries and their use.

Table of contents

  1. Copyright
  2. About the Authors
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
  6. 1. A Brief History of JavaScript
    1. 1.1. The origins of JavaScript
    2. 1.2. The Document Object Model
    3. 1.3. The browser wars
      1. 1.3.1. The D word: DHTML
      2. 1.3.2. Clash of the browsers
    4. 1.4. Raising the standard
      1. 1.4.1. Thinking outside the browser
      2. 1.4.2. The end of the browser wars
      3. 1.4.3. A new beginning
    5. 1.5. What's next?
  7. 2. JavaScript Syntax
    1. 2.1. What you'll need
    2. 2.2. Syntax
      1. 2.2.1. Statements
      2. 2.2.2. Comments
      3. 2.2.3. Variables
      4. 2.2.4. Data types
        1. 2.2.4.1. Strings
        2. 2.2.4.2. Numbers
        3. 2.2.4.3. Boolean values
      5. 2.2.5. Arrays
        1. 2.2.5.1. Associative arrays
      6. 2.2.6. Objects
    3. 2.3. Operations
      1. 2.3.1. Arithmetic operators
    4. 2.4. Conditional statements
      1. 2.4.1. Comparison operators
      2. 2.4.2. Logical operators
    5. 2.5. Looping statements
      1. 2.5.1. The while loop
        1. 2.5.1.1. The do...while loop
      2. 2.5.2. The for loop
    6. 2.6. Functions
      1. 2.6.1.1.
        1. 2.6.1.1. Variable scope
    7. 2.7. Objects
      1. 2.7.1. Native objects
      2. 2.7.2. Host objects
    8. 2.8. What's next?
  8. 3. The Document Object Model
    1. 3.1. D is for document
    2. 3.2. Objects of desire
    3. 3.3. Dial M for model
    4. 3.4. Nodes
      1. 3.4.1. Element nodes
      2. 3.4.2. Text nodes
      3. 3.4.3. Attribute nodes
      4. 3.4.4. Cascading Style Sheets
        1. 3.4.4.1. The class attribute
        2. 3.4.4.2. The id attribute
      5. 3.4.5. Getting Elements
        1. 3.4.5.1. getElementById
        2. 3.4.5.2. getElementsByTagName
        3. 3.4.5.3. getElementsByClassName
      6. 3.4.6. Taking stock
    5. 3.5. Getting and Setting Attributes
      1. 3.5.1. getAttribute
      2. 3.5.2. setAttribute
    6. 3.6. What's next?
  9. 4. A JavaScript Image Gallery
    1. 4.1. The markup
    2. 4.2. The JavaScript
      1. 4.2.1. A DOM diversion
      2. 4.2.2. Finishing the function
    3. 4.3. Applying the JavaScript
      1. 4.3.1. Event handlers
    4. 4.4. Expanding the function
      1. 4.4.1. Introducing childNodes
      2. 4.4.2. Introducing the nodeType property
      3. 4.4.3. Adding a description in the markup
      4. 4.4.4. Changing the description with JavaScript
      5. 4.4.5. Introducing the nodeValue property
      6. 4.4.6. Introducing firstChild and lastChild
      7. 4.4.7. Using nodeValue to update the description
    5. 4.5. What's next?
  10. 5. Best Practices
    1. 5.1. Mistakes of the past
      1. 5.1.1. Don't blame the messenger
      2. 5.1.2. The Flash mob
      3. 5.1.3. Question everything
    2. 5.2. Graceful degradation
      1. 5.2.1. The javascript: pseudo-protocol
      2. 5.2.2. Inline event handlers
      3. 5.2.3. Who cares?
    3. 5.3. The lessons of CSS
      1. 5.3.1. Separation of structure and style
      2. 5.3.2. Progressive enhancement
    4. 5.4. Unobtrusive JavaScript
    5. 5.5. Backward compatibility
      1. 5.5.1. Object detection
      2. 5.5.2. Browser sniffing
    6. 5.6. Performance considerations
      1. 5.6.1. Minimizing DOM access and markup
      2. 5.6.2. Assembling and placing scripts
      3. 5.6.3. Minification
    7. 5.7. What's next?
  11. 6. The Image Gallery Revisited
    1. 6.1. A quick recap
    2. 6.2. Does it degrade gracefully?
    3. 6.3. Is the JavaScript unobtrusive?
      1. 6.3.1. Adding the event handler
        1. 6.3.1.1. Checkpoints
        2. 6.3.1.2. What's in a name?
        3. 6.3.1.3. Looping the loop
        4. 6.3.1.4. Changing behavior
        5. 6.3.1.5. Closing it up
      2. 6.3.2. Share the load
    4. 6.4. Assuming too much
    5. 6.5. Fine-tuning
    6. 6.6. Keyboard access
      1. 6.6.1. Beware of onkeypress
    7. 6.7. Sharing hooks with CSS
    8. 6.8. DOM Core and HTML-DOM
    9. 6.9. What's next?
  12. 7. Creating Markup on the Fly
    1. 7.1. Some old-school methods
      1. 7.1.1. document.write
      2. 7.1.2. innerHTML
    2. 7.2. DOM methods
      1. 7.2.1. createElement
      2. 7.2.2. appendChild
      3. 7.2.3. createTextNode
      4. 7.2.4. A more complex combination
    3. 7.3. Revisiting the image gallery
      1. 7.3.1. Inserting a new element before an existing one
      2. 7.3.2. Inserting a new element after an existing one
        1. 7.3.2.1. Writing the insertAfter function
        2. 7.3.2.2. Using the insertAfter function
      3. 7.3.3. The finished image gallery
    4. 7.4. Ajax
      1. 7.4.1. The XMLHttpRequest object
      2. 7.4.2. Progressive enhancement with Ajax
      3. 7.4.3. Hijax
    5. 7.5. What's next?
  13. 8. Enhancing Content
    1. 8.1. What not to do
    2. 8.2. Making the invisible visible
    3. 8.3. The content
      1. 8.3.1. The markup: HTML, XHTML, or HTML5
      2. 8.3.2. The CSS
      3. 8.3.3. The JavaScript
    4. 8.4. Displaying abbreviations
      1. 8.4.1. Writing the displayAbbreviations function
      2. 8.4.2. Creating the markup
        1. 8.4.2.1. Inserting the definition list
        2. 8.4.2.2. Checking for compatibility
        3. 8.4.2.3. The final markup
      3. 8.4.3. A browser bomb
    5. 8.5. Displaying citations
      1. 8.5.1. Writing the displayCitations function
        1. 8.5.1.1. Finding your element
        2. 8.5.1.2. Creating the link
        3. 8.5.1.3. Inserting the link
        4. 8.5.1.4. Improving the script
        5. 8.5.1.5. The final markup
    6. 8.6. Displaying access keys
    7. 8.7. Retrieving and attaching information
    8. 8.8. What's next?
  14. 9. CSS-DOM
    1. 9.1. Three sheets to the Web
      1. 9.1.1. Structure
      2. 9.1.2. Presentation
      3. 9.1.3. Behavior
      4. 9.1.4. Separation
    2. 9.2. The style property
      1. 9.2.1. Getting styles
        1. 9.2.1.1. Inline only
      2. 9.2.2. Setting styles
    3. 9.3. Knowing when to use DOM styling
      1. 9.3.1. Styling elements in the node tree
      2. 9.3.2. Repetitive styling
      3. 9.3.3. Responding to events
    4. 9.4. className
      1. 9.4.1. Abstracting a function
    5. 9.5. What's next?
  15. 10. An Animated Slideshow
    1. 10.1. Animation basics
      1. 10.1.1. Position
      2. 10.1.2. Time
      3. 10.1.3. Incremental movement
      4. 10.1.4. Abstraction
        1. 10.1.4.1. Creating the moveElement function
        2. 10.1.4.2. Using the moveElement function
    2. 10.2. Practical animation
      1. 10.2.1. The situation
      2. 10.2.2. The solution
      3. 10.2.3. CSS
      4. 10.2.4. JavaScript
      5. 10.2.5. A question of scope
      6. 10.2.6. Refining the animation
      7. 10.2.7. Adding a safety check
      8. 10.2.8. Generating markup
    3. 10.3. What's next?
  16. 11. HTML5
    1. 11.1. What is HTML5?
    2. 11.2. A little help from a friend
    3. 11.3. A few examples
      1. 11.3.1. Canvas
      2. 11.3.2. Audio/Video
        1. 11.3.2.1. The Return of Tag Soup
        2. 11.3.2.2. Customizing Controls
      3. 11.3.3. Forms
    4. 11.4. Is there anything else?
    5. 11.5. What's Next
  17. 12. Putting It All Together
    1. 12.1. The brief
      1. 12.1.1. Raw materials
      2. 12.1.2. Site structure
      3. 12.1.3. Page structure
    2. 12.2. Design
    3. 12.3. CSS
      1. 12.3.1. Color
      2. 12.3.2. Layout
      3. 12.3.3. Typography
    4. 12.4. Markup
    5. 12.5. JavaScript
      1. 12.5.1. Page highlighting
      2. 12.5.2. JavaScript slideshow
      3. 12.5.3. Internal navigation
      4. 12.5.4. JavaScript image gallery
      5. 12.5.5. Table enhancements
      6. 12.5.6. Form enhancements
        1. 12.5.6.1. Labels
        2. 12.5.6.2. Placeholder values
        3. 12.5.6.3. Form validation
        4. 12.5.6.4. Form submission
      7. 12.5.7. Minification
    6. 12.6. What's next?
  18. A. DOM Scripting Libraries
    1. A.1. Choosing a library
      1. A.1.1. A few libraries
      2. A.1.2. Content delivery networks
    2. A.2. Syntax
    3. A.3. Selecting elements
      1. A.3.1. CSS selectors
      2. A.3.2. Library-specific selectors
      3. A.3.3. Filtering with a callback
    4. A.4. Manipulating the DOM document
      1. A.4.1. Creating content
      2. A.4.2. Manipulating content
    5. A.5. Handling events
      1. A.5.1. Load events
      2. A.5.2. Other events
    6. A.6. Ajax
      1. A.6.1. Ajax with Prototype
      2. A.6.2. Ajax with jQuery
    7. A.7. Animation and effects
      1. A.7.1. CSS property-based animations
      2. A.7.2. Packaged animations
      3. A.7.3. Remember accessibility
    8. A.8. Summary

Product information

  • Title: DOM Scripting: Web Design with JavaScript and the Document Object Model, Second Edition
  • Author(s):
  • Release date: December 2010
  • Publisher(s): friends of ED
  • ISBN: 9781430233893