Javascript & Ajax for dummies

434 Pages·2010·9.49 MB·English

by  Andy Harris

spine=.864”
Programming Languages/JavaScript
Making Everything Easier!™
Learn to use these powerful
tools together and build
Web sites that work J
Open the book and find:
Iyfo yuoru s iwtea’sn vt itsoit boursi,l dJa WvaeSbc rpipagt eans dth AaJtA oXff earr ere taolp v taoluoels t foo r (cid:127) How to choose a test browser ava J a va S c ri p t ® & A JA X
the job. Even if you’re new to Web programming, this book (cid:127) How to discuss string
concatenation with a straight face S
helps you create sites any designer will admire. With easy-
c
to-understand steps and an emphasis on free tools, you’ll (cid:127) T ips for debugging your code
r
be able to jump right into building a site using the same
(cid:127) How to add useful information to a i
techniques as the pros.
dropdown list p
(cid:127) Down to basics — learn your way around JavaScript and choose (cid:127) W hy AJAX connections should be t
an editor and test browser asynchronous ®

&
(cid:127) Manage complexity — use functions, arrays, and objects to (cid:127) The exciting possibilities of the
create more sophisticated programs jQuery library
A
(cid:127) Page magic — discover how to control what happens on your (cid:127) How to use the Aptana editor
pages, animate objects, and put pages in motion
J
(cid:127) Online resources for JavaScript
(cid:127) Get beautiful — Use the jQuery User Interface library to add A
programmers
sliders, tabbed interfaces, and custom dialogs to a site
X
(cid:127) Come clean with AJAX — build AJAX requests into your
programs, use jQuery, and work with AJAX data
Learn to:
(cid:127) Master basic JavaScript as a Web design
Visit the companion Web site at www.dummies.com/go/
and application development tool
Go to Dummies.com
javascriptandajaxfd to find two additional chapters and all ®
the programming code used in the book for videos, step-by-step examples, (cid:127) Write your own programs
how-to articles, or to shop!
(cid:127) Use JavaScript with AJAX, XML, and
JSON
(cid:127) Design an interface, animate images,
program menus, and manage cookies
$29.99 US / $35.99 CN / £21.99 UK
Andy Harris is a lecturer in computer science at Indiana University/ ISBN 978-0-470-41799-7
Purdue University at Indianapolis. He was instrumental in developing
the university’s certificate program in applied computer science and has
Andy Harris
taught courses in Web development as well as several programming
Author of HTML, XHTML, and CSS
languages.
Harris All-in-One For Dummies
JavaScript® & AJAX
FOR
DUMmIES
‰
by Andy Harris
0011__441177999977--ffffiirrss..iinndddd ii 1100//2266//0099 99::5533 PPMM
JavaScript® & AJAX For Dummies®
Published by
Wiley Publishing, Inc.
111 River Street
Hoboken, NJ 07030-5774
www.wiley.com
Copyright © 2010 by Wiley Publishing, Inc., Indianapolis, Indiana
Published by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or
by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permit-
ted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written
permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the
Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, [phone], fax [phone].
Requests to the Publisher for permission should be addressed to the Permission Department, John Wiley
& Sons, Inc., 111 River Street, Hoboken, NJ 07030, [phone], fax [phone], or online at http://
www.wiley.com/go/permissions.
Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the
Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything
Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/
or its affi liates in the United States and other countries, and may not be used without written permission.
JavaScript is a registered trademark of Sun Microsystems, Inc. All other trademarks are the property of
their respective owners. Wiley Publishing, Inc. is not associated with any product or vendor mentioned in
this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO
REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF
THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITH-
OUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE
CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES
CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE
UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR
OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF
A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE
AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZA-
TION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE
OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES
THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT
MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS
WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND
WHEN IT IS READ.
For general information on our other products and services, please contact our Customer Care
Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax [phone].
For technical support, please visit www.wiley.com/techsupport.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may
not be available in electronic books.
Library of Congress Control Number: 2009939782
ISBN: 978-0-470-41799-7
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
http://avaxhome.ws/blogs/igor_lv
0011__441177999977--ffffiirrss..iinndddd iiii 1100//2266//0099 99::5533 PPMM
About the Author
Andy Harris began his teaching life as a special education teacher. As he was
teaching young adults with severe disabilities, he taught himself enough com-
puter programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives,
and some computers began communicating with each other over an arcane
mechanism some were calling the Internet.
All this time Andy was teaching computer science part time. He joined the
faculty of the Indiana University-Purdue University Indianapolis Computer
Science department in 1995. He serves as a Senior Lecturer, teaching the
introductory course to freshmen as well as numerous courses on Web
development, general programming, and game programming. As manager
of the Streaming Media Laboratory, he developed a number of online video-
based courses, and worked on a number of international distance education
projects including helping to start a computer science program in Tetevo,
Macedonia FYR.
Andy is the author of several other computing books including HTML,
XHTML, and CSS All-in-One Desktop Reference For Dummies, Flash Game
Programming For Dummies, and Game Programming: the L Line. He invites
your comments and questions at [email protected], You can visit
his main site and fi nd a blog, forum, and links to other books at http://
www.aharrisbooks.net.
0011__441177999977--ffffiirrss..iinndddd iiiiii 1100//2266//0099 99::5533 PPMM
Dedication
I dedicate this book to Jesus Christ, my personal savior, and to Heather, the
joy in my life. I also dedicate this project to Elizabeth, Matthew, Jacob, and
Benjamin. I love each of you.
Author’s Acknowledgments
Thank you fi rst to Heather. Even though I type all the words, this book is a
real partnership, like the rest of our life. Thanks for being my best friend and
companion. Thanks also for doing all the work it takes for us to sustain a
family when I’m in writing mode.
Thank you to Mark Enochs. It’s great to have an editor who gets me, and
who’s willing to get excited about a project. I really enjoy working with you.
Thanks a lot to Steve Hayes. It’s been a lot of fun to dream up this idea with
you, and to see it evolve from something a little messy to a project we can all
be proud of. I’m looking forward to working with you more.
Thank you to the copy editors: Barry Childs-Helton, Virginia Sanders, and
Rebecca Whitney. I appreciate your efforts to make my geeky mush turn into
something readable. Thanks for improving my writing.
A special thanks to Jeff Noble for his technical editing. I appreciate your vigi-
lance. You have helped to make this book as technically accurate as possible.
Thank you to the many people at Wiley who contribute to a project like this.
The author only gets to meet a few people, but so many more are involved in
the process. Thank you very much for all you’ve done to help make this proj-
ect a reality.
A big thank you to the open source community which has created so many
incredible tools and made them available to all. I’d especially like to thank
the creators of Firefox, Firebug, Aptana, HTML Validator, the Web Developer
toolbar, Notepad++, PHP, Apache, jQuery, and the various jQuery plugins.
This is an amazing and generous community effort.
I’d fi nally like to thank the IUPUI computer science family for years of support
on various projects. Thank you especially to all my students, current and
past. I’ve learned far more from you than the small amount I’ve taught. Thank
you for letting me be a part of your education.
0011__441177999977--ffffiirrss..iinndddd iivv 1100//2266//0099 99::5533 PPMM
Publisher’s Acknowledgments
We’re proud of this book; please send us your comments through our online registration form located
at http://dummies.custhelp.com. For other comments, please contact our Customer Care
Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax [phone].
Some of the people who helped bring this book to market include the following:
Acquisitions, Editorial, and Composition Services
Media Development
Project Coordinator: Kristie Rees
Senior Project Editor: Mark Enochs
Layout and Graphics: Carl Byers,
Executive Editor: Steve Hayes Melissa K. Jester, Christine Williams
Copy Editors: Barry Childs-Helton, Proofreaders: John Greenough,
Virginia Sanders, Rebecca Whitney Content Editorial Services
Technical Editor: Jeff Noble Indexer: Sharon Shock
Editorial Manager: Leah Cameron
Media Development Project Manager:
Laura Moss-Hollister
Media Development Assistant Project
Manager: Jenny Swisher
Media Development Assistant Producers:
Josh Frank, Shawn Patrick
Editorial Assistant: Amanda Graham
Sr. Editorial Assistant: Cherie Case
Cartoons: Rich Tennant
(www.the5thwave.com)
Publishing and Editorial for Technology Dummies
Richard Swadley, Vice President and Executive Group Publisher
Andy Cummings, Vice President and Publisher
Mary Bednarek, Executive Acquisitions Director
Mary C. Corder, Editorial Director
Publishing for Consumer Dummies
Diane Graves Steele, Vice President and Publisher
Composition Services
Debbie Stailey, Director of Composition Services
http://avaxhome.ws/blogs/igor_lv
0011__441177999977--ffffiirrss..iinndddd vv 1100//2266//0099 99::5533 PPMM
Contents at a Glance
Introduction ................................................................ 1
Part I: Programming with JavaScript ............................. 7
Chapter 1: Taking the Web to the Next Level.................................................................9
Chapter 2: Writing Your First Program .........................................................................31
Chapter 3: Changing Program Behavior with Conditions ...........................................55
Chapter 4: Loops and Debugging ...................................................................................71
Chapter 5: Functions, Arrays, and Objects ...................................................................97
Part II: Using JavaScript to Enhance Your Pages ........ 129
Chapter 6: Talking to the Page .....................................................................................131
Chapter 7: Getting Valid Input ......................................................................................157
Chapter 8: Moving and Grooving .................................................................................181
Part III: Moving Up to AJAX ..................................... 221
Chapter 9: AJAX Essentials ...........................................................................................223
Chapter 10: Improving JavaScript and AJAX with jQuery ........................................239
Chapter 11: Animating jQuery ......................................................................................265
Chapter 12: Using the jQuery User Interface Toolkit ................................................293
Chapter 13: Improving Usability with jQuery ............................................................317
Chapter 14: Working with AJAX Data ..........................................................................339
Part IV: The Part of Tens .......................................... 367
Chapter 15: Ten Amazing jQuery Plugins ...................................................................369
Chapter 16: Ten Great Resources ................................................................................397
Index ...................................................................... 401
0022__441177999977--ffttoocc..iinndddd vvii 1100//2266//0099 99::5544 PPMM
Table of Contents
Introduction ................................................................. 1
What You Will Need ........................................................................................2
How This Book Is Organized ..........................................................................3
Part I: Programming with JavaScript ...................................................3
Part II: Using JavaScript to Enhance Your Pages ...............................3
Part III: Moving Up to AJAX ..................................................................4
Part IV: The Part of Tens .......................................................................4
It’s Even on the Internet! .................................................................................4
Icons Used in This Book .................................................................................5
Where to Go from Here ...................................................................................5
A Final Word .....................................................................................................6
Part I: Programming with JavaScript ............................. 7
Chapter 1: Taking the Web to the Next Level . . . . . . . . . . . . . . . . . . . . . .9
Building Something Cool ................................................................................9
Getting Started ...............................................................................................14
Overview of the Core Technologies ..................................................14
Choosing your computer ....................................................................15
Picking an Editor ............................................................................................16
Avoiding the problem tools ................................................................16
Using a WYSIWYG editor ....................................................................17
Introducing programmer’s editors ....................................................18
Getting familiar with some important editors ..................................19
Introducing Aptana ..............................................................................23
Creating Your Browser Collection ...............................................................24
Setting the standard ............................................................................24
Picking a browser or two ....................................................................25
Turning Firefox into a Development Machine ...........................................26
Web Developer Toolbar .....................................................................27
HTML Validator extension ..................................................................27
Firebug ..................................................................................................28
Chapter 2: Writing Your First Program. . . . . . . . . . . . . . . . . . . . . . . . . . .31
Becoming a Programmer ..............................................................................31
Choosing a JavaScript editor ..............................................................32
Picking your test browser ...................................................................33
Adding a script to your page ..............................................................34
0022__441177999977--ffttoocc..iinndddd vviiii 1100//2266//0099 99::5544 PPMM
viii
JavaScript & AJAX For Dummies
Embedding your JavaScript code ......................................................35
Creating comments ..............................................................................36
Using the alert() method for output ..................................................36
Adding the semicolon..........................................................................37
Introducing Variables ....................................................................................37
Creating a variable for data storage ..................................................38
Asking the user for information .........................................................39
Responding to the user .......................................................................39
Using Concatenation to Build Better Greetings .........................................40
Comparing literals and variables .......................................................41
Including spaces in concatenated phrases ......................................41
Understanding the string Object .................................................................42
Introducing object-oriented programming (and cows) ..................42
Investigating the length of a string ....................................................43
Using string methods to manipulate text .........................................44
Understanding Variable Types ....................................................................47
Adding numbers ...................................................................................47
Adding the user’s numbers ................................................................48
The trouble with dynamic data ..........................................................49
The pesky plus sign .............................................................................50
Changing Variables to the Desired Type ....................................................51
Using variable conversion tools ........................................................51
Fixing the addInput code ....................................................................52
Chapter 3: Changing Program Behavior with Conditions. . . . . . . . . . .55
Working with Random Numbers .................................................................55
Creating a die to die for.......................................................................56
Rolling the dice ....................................................................................56
Using if to Control Flow ................................................................................58
If and only if ..........................................................................................59
Using conditions ..................................................................................60
Comparison operators ........................................................................60
Do What I Say or Else ....................................................................................61
Using else-if for more complex interaction ......................................62
The mystery of the unnecessary else................................................64
It’s Time to Switch Your Thinking ...............................................................64
Creating an expression........................................................................65
Switching with style .............................................................................67
Nesting if Statements ....................................................................................67
Building the nested conditions ..........................................................69
Making sense of nested ifs ..................................................................69
Chapter 4: Loops and Debugging. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
Building Counting Loops with for ................................................................71
Building a standard for loop ...............................................................72
Making a backwards loop ...................................................................73
Counting fi ve at a time ........................................................................74
0022__441177999977--ffttoocc..iinndddd vviiiiii 1100//2266//0099 99::5544 PPMM
ix
Table of Contents
Looping for a while ........................................................................................75
Creating a basic while loop ................................................................75
Avoiding loop mistakes .......................................................................77
Introducing Some Bad Loops .......................................................................77
Managing the reluctant loop ..............................................................77
Managing the compulsive loop ..........................................................78
Debugging Your Code ...................................................................................79
Letting Aptana help .............................................................................79
Debugging JavaScript on IE ................................................................81
Finding errors in Firefox .....................................................................82
Catching syntax errors with Firebug .................................................82
Catching Logic Errors ...................................................................................84
Logging to the console with Firebug .................................................84
Looking at console output ..................................................................86
Using an Interactive Debugger .....................................................................86
Adding a breakpoint ............................................................................88
Running the debugger .........................................................................88
Using the Debug perspective .............................................................89
Examining Debug mode with a paused program .............................91
Walking through your program .........................................................92
Viewing expression data .....................................................................93
Using the Firebug debugger................................................................94
Chapter 5: Functions, Arrays, and Objects. . . . . . . . . . . . . . . . . . . . . . . .97
Breaking Code into Functions ......................................................................97
Inviting ants to the picnic ...................................................................98
Thinking about song (and program) structure ................................98
Building the antsFunction.html program..........................................99
Passing Data into and out of Functions ....................................................100
Examining the main code ..................................................................102
Looking at the chorus line ................................................................102
Handling the verses ...........................................................................103
Managing Scope ...........................................................................................105
Introducing local and global variables ............................................106
Examining variable scope .................................................................106
Building a Basic Array .................................................................................109
Storing a list of data in an array .......................................................109
Accessing array data .........................................................................110
Using arrays with for loops ..............................................................111
Visiting the ants one more time .......................................................112
Working with Two-Dimensional Arrays ....................................................114
Setting up the arrays .........................................................................115
Getting a city ......................................................................................116
Creating a main() function ................................................................117
0022__441177999977--ffttoocc..iinndddd iixx 1100//2266//0099 99::5544 PPMM