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

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

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

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

We know from the success of titles such as Web Standards Solutions, Cascading Style Sheets: Separating Content from Presentation, and the Web Designer's Reference that web designers are increasingly concerned with making sites that don't just look pretty, but are also built using current best practices.

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. Jeremy starts 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 style using the CSS DOM, and create markup on the fly.

Jeremy is a web developer living and working in Brighton, England. Working with the web consultancy firm Clearleft ( www.clearleft.com ), he enjoys building accessible, elegant websites using the troika of web standards: XHTML, CSS, and the DOM. His online home is www.adactio.com. Jeremy is also a member of the www.webstandards.org where he serves as joint leader of the DOM Scripting Task Force.

When he’s not building websites, Jeremy plays bouzouki in the alt.country band Salter Cane ( www.saltercane.com ). He is also the creator and curator of one of the web’s largest online communities dedicated to Irish traditional music, www.thesession.org

Jeffery is a graphic designer and self-taught web applications developer best known for his unique ability to merge the visual world of graphics with the mental realm of code. With a Bachelor of Technology degree in Graphic Communications Management along with a minor in Multimedia, Jeffrey was originally trained for the traditional paper-and-ink printing industry, but he soon realized the world of pixels and code was where his ideas would prosper. In late 1999, he cofounded We-Create, Inc., an Internet software company based in Waterloo, Ontario, which began many long nights of challenging and creative innovation.

Currently, as Director of Research and Development for We-Create, Jeffrey is responsible for investigating new and emerging Internet technologies and integrating them using web standards-compliant methods. In late 2005, he also became a Zend Certified Engineer.

When not playing at the office, Jeffrey enjoys a variety of hobbies from photography to woodworking. When the opportunity arises, he also enjoys floating in a canoe on the lakes of Algonquin Provincial Park or going on an adventurous, map-free, drive with his wife. Jeffrey also maintains a personal website at JeffreySambells.com, where he shares thoughts, ideas, and opinions about web technologies, photography, design, and more. He lives in Ontario, Canada, eh, with his wife, Stephanie, his newborn daughter, Addison, and their little dog, Milo.