JavaScript and Ajax for the Web: Visual QuickStart Guide

545 Pages·9.485 MB·English

by  Negrino, Tom;Smith, Dori

VISUAL QUICKSTART GUIDE
J S
AVA CRIPT
A
AND JAX
FOR THE WEB
Seventh Edition
Tom Negrino
Dori Smith
Peachpit Press
Visual QuickStart Guide
JavaScript and Ajax for the Web, Seventh Edition
Tom Negrino and Dori Smith
Peachpit Press
1249 Eighth Street
Berkeley, CA 94710
[phone]
[phone] (fax)
Find us on the Web at www.peachpit.com
To report errors, send a note to [e-mail]
Peachpit Press is a division of Pearson Education
Copyright © 2009 by Tom Negrino and Dori Smith
Editor: Nancy Davis
Production Editor: Tracey Croom
Proofreader: Soledad DeCosta
Compositor: Danielle Foster
Indexer: Emily Glossbrenner
Cover design: Peachpit Press
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
information on getting permission for reprints and excerpts, contact [e-mail]
Notice of liability
Th e 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 authors nor Peachpit Press, 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
Visual QuickStart Guide is a registered trademark of Peachpit Press, a division of Pearson Education.
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 Press was aware of a trademark
claim, the designations appear as requested by the owner of the trademark. All other product names
and services identifi ed throughout this book are used in editorial fashion only and for the benefi t 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 affi liation with this book.
ISBN 13: 978-0-321-56408-5
ISBN 10: 0-321-56408-1
0 9 8 7 6 5 4 3 2 1
Printed in the United States of America
Dedication:
To the memory of Bill Horwitz and
Dorothy Negrino, because they loved
learning.
Special Thanks to:
Big thanks to our editor Nancy Davis; her
expert touch, warm compassion, and fi erce
dedication always make our work better.
Th anks to Tracey Croom for her excellent
production work.
Our heartfelt thanks to Danielle Foster, the
book’s compositor, who laid out the book
under incredible time pressure and pulled off
the job with grace and aplomb.
We’re grateful to Peachpit’s Nancy Ruenzel
for her support.
We’d like to express our special thanks to
all of the high school, college, and university
instructors who chose to use the previous
editions of this book as a textbook for
their classes.
Dori would like to thank the wonderful
ladies in the W&S group for their loving
kindness and virtual hugs. And thanks are
also due to the Wise-Women’s Web Design
community (http://www.wise-women.org)
for their patience, support, and inspiration
as role models.
Contents at a Glance
Introduction xiii
Chapter 1 Getting Acquainted with JavaScript 1
Chapter 2 Start Me Up! 21
Chapter 3 Your First Web App 49
C
Chapter 4 Working with Images 81 To
an
bt
Chapter 5 Frames, Frames, and More Frames 115 le
en
ot
Chapter 6 Working with Windows 139 fs
C a
Chapter 7 Form Handling 157 ont a
t G
Chapter 8 Forms and Regular Expressions 197 enla
tn
Chapter 9 Handling Events 221 sc
e
Chapter 10 JavaScript and Cookies 245
Chapter 11 Objects and the DOM 267
Chapter 12 Making Your Pages Dynamic 291
Chapter 13 Introducing Ajax 315
Chapter 14 Ajax Toolkits 353
Chapter 15 Applied JavaScript 383
Chapter 16 Designing With Ajax 423
Chapter 17 Bookmarklets 443
Appendix A JavaScript Genealogy and Reference 471
Appendix B JavaScript Reserved Words 495
Appendix C Cascading Style Sheets Reference 499
Appendix D Where to Learn More 507
Index 515
v
This page intentionally left blank
Table of Contents
Introduction xiii
Chapter 1 Getting Acquainted with JavaScript 1
What JavaScript Is . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
JavaScript Isn’t Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Where JavaScript Came From . . . . . . . . . . . . . . . . . . . . 5
What JavaScript Can Do . . . . . . . . . . . . . . . . . . . . . . . . . 6
T
What JavaScript Can’t Do . . . . . . . . . . . . . . . . . . . . . . . . 7 a
b
What Is Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 l
e
Th e Snap-Together Language . . . . . . . . . . . . . . . . . . . 11 o
Handling Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 f
C
Values and Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 o
n
Writing JavaScript-Friendly HTML . . . . . . . . . . . . . . 17 t
e
What Tools to Use? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 n
t
Chapter 2 Start Me Up! 21 s
Where to Put Your Scripts . . . . . . . . . . . . . . . . . . . . . . . 23
About Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Using External Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Putting Comments in Scripts . . . . . . . . . . . . . . . . . . . . 29
Alerting the User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Confi rming a User’s Choice. . . . . . . . . . . . . . . . . . . . . . 33
Prompting the User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Redirecting the User with a Link . . . . . . . . . . . . . . . . 37
Using JavaScript to Enhance Links . . . . . . . . . . . . . . 39
Using Multi-level Conditionals . . . . . . . . . . . . . . . . . . 44
Handling Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Chapter 3 Your First Web App 49
Around and Around with Loops . . . . . . . . . . . . . . . . . 50
Passing a Value to a Function . . . . . . . . . . . . . . . . . . . 55
Detecting Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Working with Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Working with Functions Th at Return Values . . . . . 61
Updating Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Using Do/While Loops . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Calling Scripts Multiple Ways . . . . . . . . . . . . . . . . . . . 66
vii
Table of Contents
Combining JavaScript and CSS . . . . . . . . . . . . . . . . . . 68
Checking State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Working with String Arrays . . . . . . . . . . . . . . . . . . . . . 77
Chapter 4 Working with Images 81
Creating Rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Creating More Eff ective Rollovers . . . . . . . . . . . . . . . 85
Building Th ree-State Rollovers . . . . . . . . . . . . . . . . . . 93
Triggering Rollovers from a Link . . . . . . . . . . . . . . . . 95
Making Multiple Links Change a
Single Rollover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Working with Multiple Rollovers . . . . . . . . . . . . . . .100
Creating Cycling Banners . . . . . . . . . . . . . . . . . . . . . .104
Adding Links to Cycling Banners . . . . . . . . . . . . . . .106
Building Wraparound Slideshows . . . . . . . . . . . . . .108
Displaying a Random Image . . . . . . . . . . . . . . . . . . .111
s Cycling Images with a Random Start . . . . . . . . . . .113
t
n
e Chapter 5 Frames, Frames, and More Frames 115
t
n
o Keeping a Page out of a Frame . . . . . . . . . . . . . . . . . .117
C Forcing a Page into a Frame . . . . . . . . . . . . . . . . . . . .119
f
o Forcing a Site into a Frame . . . . . . . . . . . . . . . . . . . . .120
e Setting a Target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125
l
b Creating and Loading a Dynamic Frame . . . . . . . .126
a
T Sharing Functions between Frames . . . . . . . . . . . .129
Loading Multiple Frames at Once . . . . . . . . . . . . . .133
Working with Iframes . . . . . . . . . . . . . . . . . . . . . . . . . .135
Loading Iframes with JavaScript . . . . . . . . . . . . . . . .138
Chapter 6 Working with Windows 139
Opening a New Window . . . . . . . . . . . . . . . . . . . . . . .140
Loading Diff erent Contents into a Window . . . . .144
Opening Multiple Windows . . . . . . . . . . . . . . . . . . . .146
Updating One Window from Another . . . . . . . . . .148
Closing a Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Putting Windows in Th eir Place . . . . . . . . . . . . . . . .154
Chapter 7 Form Handling 157
Select-and-Go Navigation . . . . . . . . . . . . . . . . . . . . . .159
Changing Menus Dynamically . . . . . . . . . . . . . . . . .164
Making Fields Required . . . . . . . . . . . . . . . . . . . . . . . .167
Checking Fields against Each Other . . . . . . . . . . . .172
Identifying Problem Fields . . . . . . . . . . . . . . . . . . . . .174
Putting Form Validation into Action . . . . . . . . . . . .177
Working with Radio Buttons . . . . . . . . . . . . . . . . . . .181
Setting One Field with Another . . . . . . . . . . . . . . . . .184
viii
Table of Contents
Validating Zip Codes . . . . . . . . . . . . . . . . . . . . . . . . . . .187
Validating Email Addresses . . . . . . . . . . . . . . . . . . . .191
Chapter 8 Forms and Regular Expressions 197
Validating an Email Address with
Regular Expressions . . . . . . . . . . . . . . . . . . . . . . .199
Validating a File Name . . . . . . . . . . . . . . . . . . . . . . . . .204
Extracting Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206
Formatting Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209
Formatting and Sorting Strings . . . . . . . . . . . . . . . . .213
Formatting and Validating Strings . . . . . . . . . . . . . .215
Replacing Elements using
Regular Expressions . . . . . . . . . . . . . . . . . . . . . . .218
Chapter 9 Handling Events 221
Handling Window Events . . . . . . . . . . . . . . . . . . . . . .222
Mouse Event Handling . . . . . . . . . . . . . . . . . . . . . . . . .230 T
a
Form Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . .238 b
l
Key Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . .242 e
o
Chapter 10 JavaScript and Cookies 245 f
C
Baking Your First Cookie . . . . . . . . . . . . . . . . . . . . . . .247 o
n
Reading a Cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251 t
e
Showing Your Cookies . . . . . . . . . . . . . . . . . . . . . . . . .252 n
t
Using Cookies as Counters . . . . . . . . . . . . . . . . . . . . .254 s
Deleting Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257
Handling Multiple Cookies . . . . . . . . . . . . . . . . . . . . .259
Displaying “New to You” Messages . . . . . . . . . . . . .261
Chapter 11 Objects and the DOM 267
About Node Manipulation . . . . . . . . . . . . . . . . . . . . .268
Adding Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Deleting Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272
Deleting Specifi c Nodes . . . . . . . . . . . . . . . . . . . . . . . .274
Inserting Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278
Replacing Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281
Writing Code with Object Literals . . . . . . . . . . . . . .285
Chapter 12 Making Your Pages Dynamic 291
Putting the Current Date into a
Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292
Working with Days. . . . . . . . . . . . . . . . . . . . . . . . . . . . .294
Customizing a Message for the
Time of Day . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295
Displaying Dates by Time Zone . . . . . . . . . . . . . . . .296
Converting 24-Hour to 12-Hour Time . . . . . . . . . .302
Creating a Countdown . . . . . . . . . . . . . . . . . . . . . . . . .304
ix