Thông tin tài liệu
ptg
ptg
Scriptin’ with JavaScript
and Ajax:
A Designer’s Guide
CHARLES WYKE-SMITH
ptg
Scriptin’ with JavaScript and Ajax: A Designer’s Guide
Charles Wyke-Smith
New Riders
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
Find us on the Web at www.newriders.com
To re po r t e rr or s , p l ea se se nd a n ot e t o e rr at a@ pe ac hp i t. c om
New Riders is an imprint of Peachpit, a division of Pearson Education
Copyright © 2010 Charles Wyke-Smith
Development Editor and Compositor: Beth Bast
Project Editor: Nancy Peterson
Te ch ni ca l E di to r : C h ri st ia n He il ma n n
Production Coordinator: Hilal Sala
Copy Editor and Proofreader: Anne Marie Walker
Marketing Manager: Glenn Bisignani
Indexer: Joy Dean Lee
Cover Design: Aren Howell
Cover Production: Hilal Sala
Interior Design: Mimi Heft
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic,
mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For infor-
mation on getting permission for reprints and excerpts, contact permissions@peachpit.com.
Notice of Liability
The information in this book is distributed on an “As Is” basis without warranty. While every precaution has been
taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity
with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained
in this book or by the computer software and hardware products described in it.
Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks.
Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations
appear as requested by the owner of the trademark. All other product names and services identified throughout this
book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of
the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation
with this book.
Te ch ni ca l No te : Th is bo ok wa s p ro du ce d u si ng Ad ob e I nD e si gn . C od e wa s d ev el op ed in Ad ob e D re am we av er.
Graphics were designed in Adobe Fireworks and Adobe Photoshop. Screenshots were taken with SnapzProX by
Ambrosia Software.
ISBN 13: 978-0-321-57260-8
ISBN 10: 0-321-57260-2
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
ptg
For Beth
ptg
SCRIPTIN’ WITH JAVASCRIPT AND AJAXiv
Acknowledgments
I want to first thank Nancy Ruenzell, Peachpit’s publisher, for the
opportunity to write another book on the New Rider’s imprint, and
Michael Nolan, Peachpit Acquisitions Editor, for encouraging me to
complete the …in’ trilogy.
Nancy Peterson, my Project Editor, has been a wise and gracious
advisor while keeping me focused on the time deadline, which I
have actually met. Our weekly conference calls have been a won-
derful source of guidance and encouragement, and have greatly
contributed to this book’s direction and focus. To you, Nancy, my
sincere thanks, and I hope we will meet in person sometime soon.
Thanks go to the editorial and production team at Peachpit: to
production editor Hilal Sala for her attention to the myriad details
getting the pages ready to go to press, to Anne Marie Walker for her
copyediting and proofing, and to Joy Dean Lee for the indexing.
Several programmers have worked with me on this book. Michael
Rosier assisted with the initial table of contents and some early code
examples. Mark Turansky has been a valuable source of advice and
ideas, and developed the framework examples in Chapter 6. Austin
Markus of Ithus in San Francisco, who was the technical editor on
my book Codin’ for the Web, wrote the PHP and much of the jQuery
for the Author Carousel example in Chapter 7.
My sincere thanks go to Chris Heilmann, International
Development Evangelist for the Yahoo! Development Network and
JavaScript genius. He has been invaluable as the technical editor
of this book, and I am grateful to him for his detailed and always
humorous feedback on the code. He also developed the YUI exam-
ple in Chapter 7. I am glad that he is such a night owl because I have
often been able to videoconference with him on Skype in the early
hours in London where he lives to get advice when working late
here in South Carolina. It has been a great experience working with
Chris, and I thank him for the time he has given to this project.
Special thanks goes to Scott Fegette, Technical Product Manager
for Dreamweaver at Adobe, for his ongoing support and
encouragement.
A quick shout-out goes to David Sarnoff, Sean Rose, and
Mike Harding, fellow musicians in my band Mental Note (www.
mentalnoteband.com). Guys, being able to get out and play from
ptg
v
time to time during the development of this book has helped keep
me sane, and I appreciate your friendship and the time we spend
making music.
Once again, a big hug and a kiss for my wife Beth, who has
expanded her role from my previous books to Development Editor
on this one, and who has advised me on every aspect of it. She has
edited the drafts of the chapters, corrected my grammar, reedited
my run-on sentences (yes, still doing that), and had me rework my
explanations until I produced something she could understand. She
has coordinated the deliveries of the numerous rounds of chapters
with the Peachpit team, developed the diagrams from my sketches,
and, not least, laid out the entire book in its final form in Adobe
InDesign. Thanks to you, sweetie, we did it again!
To my lov e ly da ug ht er s, Je mm a a n d Lu cy, we o nc e a g ai n h av e h ad
less time together while I have been writing, and now it’s time for
our vacation. I love you so much, appreciate your patience while I
have been shut in my office writing, and look forward to enjoying
the rest of the summer with you both.
Finally, I want to thank you, my readers, for buying my books and
for sharing your experiences using the techniques and ideas in
them. I’m delighted to have finally completed this JavaScript book in
response to all of you who have encouraged me to write it.
—Charles Wyke-Smith
Charleston, South Carolina, July 12, 2009
ACKNOWLEDGMENTS
ptg
SCRIPTIN’ WITH JAVASCRIPT AND AJAXvi
About the Author
Charles Wyke-Smith is the author of Stylin’ with CSS: A Designer’s
Guide and Codin’ for the Web: A Designer’s Guide to Developing
Dynamic Web Sites. Charles has been involved in print, multime-
dia and Web design for over twenty years. He founded PRINTZ
Electronic Design in San Francisco in the mid-eighties, an early all-
computerized design studio, and was a pioneer in interactive media
development.
He has been creating Web sites since 1994 and has provided Web
design and consulting service to companies including Wells-Fargo,
Benefitfocus, ESPN Video Games, and University of California, San
Francisco.
His work today focuses on online application development, with
an emphasis on user experience, information architecture, and
interface design.
An accomplished speaker and instructor, Charles has taught classes
in multimedia interface design and has presented at many industry
conference.
He lives with his wife, Beth, and two daughters in Charleston,
South Carolina.
ptg
vii
Contributors
Christian Heilmann is a geek and hacker by heart. He’s been a pro-
fessional Web developer for about eleven years and worked his way
through several agencies up to Yahoo!, where he delivered Yahoo!
Maps Europe and Yahoo! Answers.
He’s written two books and contributed to three others on
JavaScript, Web development, and accessibility. He managed teams
in the U.S., India, and the U.K. to release dozens of online articles
and hundreds of blog posts in the last few years.
He’s been nominated Standards Champion of the Year 2008 by .net
magazine in the UK. Currently he sports the job title International
Developer Evangelist, spending his time going from conference to
conference and university to university to train people on systems
provided by Yahoo! and other Web companies.
Austin Markus is a Web application developer and principal of
Ithus Digital in San Francisco.
He first got excited about computers and programming in the pre-
Internet days, running a BBS out of his bedroom and marveling
when people connected from around the country and the world.
His early work included developing ActionScript demonstration
applications for Macromedia and a Telex-to-Internet publishing
system for the San Francisco Chronicle.
To da y, he de ve lo ps ap pl ic at io ns f ro m e -c om me rc e s to re s, to c on te nt
management systems, to social networking applications.
Austin is a big believer in Open Source and has contributed modules
to Drupal and jQuery among others. He thinks the next big thing
will be pervasive computing and augmented reality. To this end,
he is presently working on an application for the Android mobile
platform to bridge the gap between the online and real world.
ABOUT THE AUTHOR & CONTRIBUTORS
ptg
SCRIPTIN’ WITH JAVASCRIPT AND AJAXviii
Contents
Introduction • xii
CHAPTER 1 : JAVASCRIPT COMES OF AGE • 2
Accessibility and Progressive Enhancement • 5
Three Steps to Progressive Enhancement • 7
1. Make It Functional • 8
2. Make It Look Good • 17
3. Enhance the Experience with JavaScript and Ajax • 21
Summary • 23
CHAPTER 2 : JAVASCRIPT BASICS • 24
Running the Code Examples • 26
Hello, JavaScript • 27
Scripts, Statements, and Comments • 28
Scripts • 28
Statements • 28
Comments • 29
Data and Ways to Store It • 30
Variables • 30
Strings • 32
Numbers • 34
Booleans • 34
Arrays • 34
Code that Acts on Data • 38
Operators • 38
Loops and Iterating Over Data • 46
Functions • 50
Summary • 55
CHAPTER 3 : OBJECTS AND THE DOM • 56
Objects • 58
Predefined JavaScript Objects • 59
ptg
ix
User-created Objects • 60
Objects and Instances • 63
DOMinating the Document • 68
Getting Around the DOM • 68
Get, Set DOM! • 70
Modifying Element Styles • 75
Zebra Tables • 78
Refactoring the Code • 85
Summary • 87
CHAPTER 4 : EVENTS • 88
Techniques to Handle Eve nts • 90
JavaScript Pseudo Protocol • 90
Inline Event Handler • 91
Handler as Object Property • 93
Event Listeners • 94
The First Event: load • 97
Adding Event Listeners on Page Load • 99
The Event Object • 103
The Event Object’s Type Property • 104
The Event Object in Microsoft Browsers • 105
The Secret Life of Events • 111
Capturing and Bubbling • 112
Event Delegation • 112
Striped Table with Rollovers • 113
Using an Element as a Debugging Tool • 113
Mouse Events • 114
Event Delegation • 114
Determining the Target Element • 116
Traversing the DOM • 118
Adding the Highlight • 120
The Up and Down Life of Keys • 122
Te xt Fi el ds wi th Ch ar ac te r L im it s • 1 23
Setting Up the Message Display • 124
Monitoring the Character Count • 127
CONTENTS
[...]... JavaScript, and a JavaScript- based programming technique called Ajax that dramatically improves communication between the user’s browser and the Web server The goal of this book is to teach you how to use JavaScript and Ajax to develop sophisticated and responsive user interfaces for today’s Web sites and online applications Ajax has given a new purpose to JavaScript, and virtually all of today’s successful... resources available that can provide you with that information, and I mention many of them in this book About JavaScript JavaScript is the only programming language that runs in the browser, and you cannot build a modern Web application without it Today’s users expect forms to be validated as they fill them out, on-demand content delivery without waiting for new pages, and a general application-like look and. .. class warning (the same class name can be used on multiple elements on the same page) div#email { } a div with the ID email p.warning { } a paragraph with the class warning div p { } a paragraph with a div ancestor div#email form input { } an input with a form ancestor that has a div ancestor with the ID email a[ title] { } a link with a title attribute* input[type=”submit”] { } an input that has a. .. if JavaScript is not available In this chapter, I’ll show you a simple form imple- JAVA S C R I P T C O M E S O F AG E mented with HTML and PHP, and later enhance it with Ajax, so it works with and without JavaScript You’ll have to decide if this “maximum accessibility” approach is one you want to take—I hope it is A lot of advice is available on the Web about this subject, and you can find it by searching... xvii CHAPTER 1 JavaScript Comes of Age SC RIPTIN’ WITH JAVASC RIPT AND AJAX MASTERIN G JAVA SC RI P T is an essential skill for every Web designer This wasn’t always true, but JavaScript has taken on a new and important role in modern Web sites For any interface designer or for any Web engineer who works with the presentation layer, it is now as important to know JavaScript as it is to know HTML and CSS... the hands of a talented and knowledgeable designer, these two interactions can transform a Web site into a Rich Interface Application (RIA) In an RIA, stylish and technically sophisticated interface components accept user input and then respond with new data seemingly instantly A simple example is when a user mouses over a headline in a list of headlines, and almost instantly the description of that... to master JavaScript In the rest of this chapter, you will learn how to plan the coding of your pages so they can be readily enhanced with Ajax, and thereby transform your site into a more application-like experience Accessibility and Progressive Enhancement Before I discuss JavaScript and Ajax, I’ll talk about accessibility—in all its meanings It is very easy when designing an RIA Web site to make... browser and is visible and modifi able by anyone Learn more about JavaScript secutiry issues on the DevArticles Web site at www.devarticles.com/c /a/ JavaScript/ JavaScript-Security 2 Make It Look Good Every browser has a built-in style sheet that makes headlines larger than paragraph text, makes links blue, and controls the default presentation of HTML By using a style sheet you can override any aspect... compatibility, and, in many cases, virtually a new language that runs on top of JavaScript Frameworks can dramatically reduce development time, and I’ll show examples of several frameworks and their capabilities in the later chapters AC C E S S I B I LIT Y For your Web site to reach the widest possible audience on the widest range of devices, JavaScript should be used only to enhance already functional... for Accessible Ajax or progressive enhancement The W3C has an interesting initiative called ARIA (nice acronym) to address accessible RIAs through special markup and techniques, and Yahoo’s YUI team, and the Dojo and jQuery framework developers are amongst those who are adopting its recommendations In his succinct and excellent book, Bulletproof Ajax (New Riders, 2007), Jeremy Keith offers this advice . Ajax Call • 146 Ajax and Data Formats • 149 Creating a Simple Catalog • 149 Using PHP Templates • 150 An Ajax-ready Page • 155 Adding Ajax Functionality to the Catalog • 156 An Accessible Catalog. use JavaScript and Ajax to develop sophisticated and responsive user interfaces for today’s Web sites and online applications. Ajax has given a new purpose to JavaScript, and virtually all. ptg ptg Scriptin’ with JavaScript and Ajax: A Designer’s Guide CHARLES WYKE-SMITH ptg Scriptin’ with JavaScript and Ajax: A Designer’s Guide Charles Wyke-Smith New Riders 1249 Eighth Street Berkeley, CA
Ngày đăng: 27/03/2014, 13:36
Xem thêm: new riders publishing scriptin' with javascript and ajax, a designer’s guide (2010), new riders publishing scriptin' with javascript and ajax, a designer’s guide (2010)