DOM Scripting

Web Design with JavaScript and the Document Object Model

2nd Edition

By Jeremy Keith , Jeffrey Sambells

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.

Full Description

  • ISBN13: 978-1-4302-3389-3
  • 336 Pages
  • User Level: Intermediate to Advanced
  • Publication Date: December 28, 2010
  • Available eBook Formats: EPUB, MOBI, PDF
  • Print Book Price: $34.99
  • eBook Price: $24.99
Buy eBook Buy Print Book Add to Wishlist

Related Titles

Full Description

With this second edition of the popular DOM Scripting: Web Design with JavaScript and the Document Object Model comes a modern revision to update best practices and guidelines. It includes full coverage of HTML5 in a new, dedicated chapter, and details on JavaScript libraries and how they can help your scripting.

The book provides everything you'll need to start using JavaScript and the Document Object Model to enhance your web pages with client-side dynamic effects and user-controlled animation. It shows how JavaScript, HTML5, and Cascading Style Sheets (CSS) work together to create usable, standards-compliant web designs. We'll also cover cross-browser compatibility with DOM scripts and how to make sure they degrade gracefully when JavaScript isn't available.

DOM Scripting: Web Design with JavaScript and the Document Object Model focuses on JavaScript for adding dynamic effects and manipulating page structure on the fly using the Document Object Model. You'll start with a crash course in JavaScript and the DOM, then move on to several real-world examples that you'll build from scratch, including dynamic image galleries and dynamic menus. You'll also learn how to manipulate web page styles using the CSS DOM, and create markup on the fly.

If you want to create websites that are beautiful, dynamic, accessible, and standards-compliant, this is the book for you!

What you’ll learn

  • Apply dynamic behavior to your pages without inserting JavaScript in your markup
  • Write scripts that degrade gracefully when JavaScript isn’t available
  • Use web standards to ensure cross-browser compatibility
  • Harness the power of the DOM to create user-controlled animation
  • Also includes an introduction to Ajax

Who this book is for

This book is for web developers wanting to expand their knowledge of the DOM to add interactivity and functionality to their web pages.

Table of Contents

Table of Contents

  1. A Brief History of JavaScript
  2. JavaScript Syntax
  3. The Document Object Model
  4. A JavaScript Image Gallery
  5. Best Practices
  6. The Image Gallery Revisited
  7. Creating Markup on the Fly
  8. Enhancing Content
  9. CSS-DOM
  10. An Animated Slideshow
  11. HTML5
  12. Putting It All Together
  13. DOM Scripting Libraries
Source Code/Downloads

Downloads are available to accompany this book.

Your operating system can likely extract zipped downloads automatically, but you may require software such as WinZip for PC, or StuffIt on a Mac.

Errata

Please Login to submit errata.

On page 63:
example paragraphs 5,7,9 are missing their respective closing right parentheses on the popup function:


5 should be:
onclick="popUp('http://www.example.com')...

6 should be:
onclick="popUp(this.getAttribute('href'))...

9 should be:
onclick="popUp(this.href)...

On page 70:

On the first code snipe the character 's' is missing from the src attribute:

<script rc="script/function.js"></script>


On page 84:

if (whichpic.getAttribue("title"))

should be

if (whichpic.getAttribute("title"))

On page 116:

The instruction and the bottom of the page says to "create a response.txt file" and the subsequent code examples all use "example.txt"

On page 141:

Midway down the page the line of code is:
"var quoteElements = ..."

This is changed further down the page to:
"var = quoteChildren = ..."

The quoteChildren variable is from that point.

On page 142:
At the end of page 142:

Change

Here's the finished displayAbbreviations function:

To

Here's the finished displayCitations function:

On page 235:

Near the top of the page, the background-image url for "header nav" is:

url(../images/header navbar.gif);

but should be:

url(../images/navbar.gif);

On page 242:

The code at the top of the page is missing the final closing brace -- there should be four closing braces.

On page 246:

Near the top:
"Add the following lines to the prepareSlideshow function in home.js."

should be:
"... global.js."

On page 258:

A semicolon is missing after this line in the block of code at the bottom of the page. Should be:

rows[i].oldClassName = rows[i].className;