AdvancED DOM Scripting (eBook)

Jeffrey Sambells?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 daughter, Addison, and their little dog, Milo.

CONTENTS AT A GLANCE 5
CONTENTS 7
ABOUT THE AUTHORS 16
ABOUT THE TECHNICAL REVIEWERS 17
ABOUT THE COVER IMAGE DESIGNER 18
ACKNOWLEDGMENTS 19
INTRODUCTION 20
Who this book is for 20
How this book is structured 21
Conventions 21
Prerequisites 23
Downloading the code 23
Contacting the authors 23
DOM SCRIPTING IN DETAIL 24
DO IT RIGHT WITH BEST PRACTICES 26
Unobtrusive and progressive enhancement 27
Putting JavaScript to work 28
Common gotchas in the JavaScript syntax 53
A practical example: WYSIWYG JavaScript rollover redux 63
Summary 71
CREATING YOUR OWN REUSABLE OBJECTS 74
What’s in an object? 75
Creating your own objects 83
What is this? 94
try { }, catch { }, and exceptions 99
A practical example: your own debugging log 101
Summary 110
UNDERSTANDING THE DOM2 CORE AND DOM2 HTML 112
The DOM, not JavaScript, is your document 113
Levels of the DOM 114
Creating a sample document 119
The DOM Core 123
DOM HTML 148
A practical example: converting hand- coded HTML to DOM code 150
Summary 169
RESPONDING TO USER ACTIONS AND EVENTS 172
DOM2 Events 173
Types of events 174
Controlling event flow and registering event listeners 189
Summary 224
DYNAMICALLY MODIFYING STYLE AND CASCADING STYLE SHEETS 226
The W3C DOM2 Style specification 226
When DOM scripting and style collide 229
Keeping style out of your DOM script 236
Accessing the computed style 260
The Microsoft filter property 262
Practical example: a simple transition effect 267
Summary 270
CASE STUDY: A PHOTO CROPPING AND RESIZING TOOL 272
The test files 273
The editor objects 277
Summary 304
COMMUNICATING OUTSIDE THE BROWSER 305
ADDING AJAX TO THE MIX 307
Merging technology 308
Why Ajax may break your site and how to fix it 327
Practical example: an Ajax- enhanced photo album 356
Summary 365
CASE STUDY: ENABLING ASYNCHRONOUS FILE UPLOADS WITH PROGRESS INDICATORS 367
A little life in the loading message 369
The starting point 373
Putting it all together: an upload progress indicator 374
Summary 394
SOME GREAT SOURCE 395
USING LIBRARIES TO INCREASE PRODUCTIVITY 397
Choosing the library that’s right for you 398
Enhancing the DOM 402
Handling events 413
Accessing and manipulating style 418
Communication 419
Summary 424
ADDING EFFECTS TO ENHANCE USER EXPERIENCE 426
Do it yourself 427
A few visual effects libraries 435
Some visual bling 436
Behavioral enhancements 458
Summary 473
MASHUPS GALORE! USING APIS TO ADD MAPS, SEARCHING, AND MUCH MORE 475
API keys 477
Client- side APIs: some JavaScript required 477
Server- side APIs: some proxy required 504
Summary 524
CASE STUDY: STYLE YOUR SELECT WITH THE DOM 526
That classic feeling 527
Building a better select 528
Strategy? We don’t need no stinkin’ strategy . . . 529
Generating life and other memorable events 541
Bling- bling for da form t’ing 546
Behavioral modifications 557
Knock, knock . . . housekeeping! 570
Further adventures in select replacement 571
Summary 572
INDEX 574