JavaScript and AJAX For Dummies E-Book

Andy Harris

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 477

Veröffentlichungsjahr: 2009

Beschreibung

Learn to use these powerful tools together and build Web sitesthat work If you want to build Web pages that offer real value to yoursite's visitors, JavaScript and AJAX are top tools for the job.Even if you're new to Web programming, this book helps you createsites any designer will admire. With easy-to-understand steps andan emphasis on free tools, you'll be able to jump right intobuilding a site using the same techniques as the pros. * Down to basics -- learn your way around JavaScript andchoose an editor and test browser * Manage complexity -- use functions, arrays, and objects tocreate more sophisticated programs * Page magic -- discover how to control what happens on yourpages, animate objects, and put pages in motion * Get beautiful -- Use the jQuery User Interface library toadd sliders, tabbed interfaces, and custom dialogs to a site * Come clean with AJAX -- build AJAX requests into yourprograms, use jQuery, and work with AJAX data Open the book and find: * How to choose a test browser * How to discuss string concatenation with a straight face * Tips for debugging your code * How to add useful information to a dropdown list * Why AJAX connections should be asynchronous * The exciting possibilities of the jQuery library * How to use the Aptana editor * Online resources for JavaScript programmers

Leseprobe

JavaScript®and AJAX For Dummies®

Table of Contents

Introduction

What You Will Need

How This Book Is Organized

Part I: Programming with JavaScript

Part II: Using JavaScript to Enhance Your Pages

Part III: Moving Up to AJAX

Part IV: The Part of Tens

It’s Even on the Internet!

Icons Used in This Book

Where to Go from Here

A Final Word

Part I: Programming with JavaScript

Chapter 1 : Taking the Web to the Next Level

Building Something Cool

Getting Started

Overview of the Core Technologies

Choosing your computer

Picking an Editor

Avoiding the problem tools

Using a WYSIWYG editor

Introducing programmer’s editors

Getting familiar with some important editors

Introducing Aptana

Creating Your Browser Collection

Setting the standard

Picking a browser or two

Turning Firefox into a Development Machine

Web Developer Toolbar

HTML Validator extension

Firebug

Chapter 2: Writing Your First Program

Becoming a Programmer

Choosing a JavaScript editor

Picking your test browser

Adding a script to your page

Embedding your JavaScript code

Creating comments

Using the alert() method for output

Adding the semicolon

Introducing Variables

Creating a variable for data storage

Asking the user for information

Responding to the user

Using Concatenation to Build Better Greetings

Comparing literals and variables

Including spaces in concatenated phrases

Understanding the string Object

Introducing object-oriented programming (and cows)

Investigating the length of a string

Using string methods to manipulate text

Understanding Variable Types

Adding numbers

Adding the user’s numbers

The trouble with dynamic data

The pesky plus sign

Changing Variables to the Desired Type

Using variable conversion tools

Fixing the addInput code

Chapter 3 : Changing Program Behavior with Conditions

Working with Random Numbers

Creating a die to die for

Rolling the dice

Using if to Control Flow

If and only if

Using conditions

Comparison operators

Do What I Say or Else

Using else-if for more complex interaction

The mystery of the unnecessary else

It’s Time to Switch Your Thinking

Creating an expression

Switching with style

Nesting if Statements

Building the nested conditions

Making sense of nested ifs

Chapter 4: Loops and Debugging

Building Counting Loops with for

Building a standard for loop

Making a backwards loop

Counting five at a time

Looping for a while

Creating a basic while loop

Avoiding loop mistakes

Introducing Some Bad Loops

Managing the reluctant loop

Managing the compulsive loop

Debugging Your Code

Letting Aptana help

Debugging JavaScript on IE

Finding errors in Firefox

Catching syntax errors with Firebug

Catching Logic Errors

Logging to the console with Firebug

Looking at console output

Using an Interactive Debugger

Adding a breakpoint

Running the debugger

Using the Debug perspective

Examining Debug mode with a paused program

Walking through your program

Viewing expression data

Using the Firebug debugger

Chapter 5: Functions, Arrays, and Objects

Breaking Code into Functions

Inviting ants to the picnic

Thinking about song (and program) structure

Building the antsFunction.html program

Passing Data into and out of Functions

Examining the main code

Looking at the chorus line

Handling the verses

Managing Scope

Introducing local and global variables

Examining variable scope

Building a Basic Array

Storing a list of data in an array

Accessing array data

Using arrays with for loops

Visiting the ants one more time

Working with Two-Dimensional Arrays

Setting up the arrays

Getting a city

Creating a main() function

Creating Your Own Objects

Building a basic object

Adding methods to an object

Building a re-usable object

Using your shiny new objects

Introducing JSON

Storing data in JSON format

Building a more complex JSON structure

Part II: Using JavaScript to Enhance Your Pages

Chapter 6: Talking to the Page

Understanding the Document Object Model

Navigating the DOM

Changing DOM properties with Firebug

Examining the document object

Harnessing the DOM through JavaScript

Getting the blues, JavaScript-style

Writing JavaScript code to change colors

Managing Button Events

Setting up the playground

Embedding quotes within quotes

Writing the changeColor function

Interacting with Text Input and Output

Introducing event-driven programming

Creating the XHTML form

Using getElementById() to get access to the page

Manipulating the text fields

Writing to the Document

Preparing the HTML framework

Writing the JavaScript

Finding your innerHTML

Working with Other Text Elements

Building the form

Writing the function

Understanding generated source code

Chapter 7: Getting Valid Input

Getting Input from a Drop-Down List

Building the form

Reading the list box

Managing Multiple Selections

Coding a multiple-selection select object

Writing the JavaScript code

Check, Please — Reading Check Boxes

Building the checkbox page

Responding to the check boxes

Working with Radio Buttons

Interpreting radio buttons

Working with Regular Expressions

Introducing regular expressions

Characters in regular expressions

Marking the beginning and end of the line

Working with Special Characters

Matching a character with the period

Using a character class

Specifying digits

Marking punctuation characters

Finding word boundaries

Repetition Operations

Finding one or more elements

Matching zero or more elements

Specifying the number of matches

Working with Pattern Memory

Recalling your memories

Using patterns stored in memory

Chapter 8: Moving and Grooving

Making Things Move

Looking over the HTML

Getting an overview of the JavaScript

Creating global variables

Initializing

Moving the sprite

Checking the boundaries

Reading Input from the Keyboard

Building the keyboard page

Looking over the keyboard.js script

Overwriting the init() function

Setting up an event handler

Responding to keystrokes

Deciphering the mystery of keycodes

Following the Mouse

Looking over the HTML

Setting up the HTML

Initializing the code

Building the mouse listener

Automatic Motion

Image-Swapping Animation

Preparing the images

Building the page

Building the global variables

Setting up the interval

Animating the sprite

Improving the animation with preloading

Working with Compound Images

Preparing the image

Setting up the HTML and CSS

Writing the JavaScript

Setting up global variables

Building an init() function

Animating the sprite

Movement and Swapping

Building the HTML framework

Building the code

Defining global variables

Initializing your data

Animating the image

Updating the image

Moving the sprite

Part III: Moving Up to AJAX

Chapter 9: AJAX Essentials

AJAX: Return to Troy

AJAX Spelled Out

A is for asynchronous

J is for JavaScript

A is for . . . and?

And X is for . . . data?

Making a Basic AJAX Connection

Building the HTML form

Creating an XMLHttpRequest object

Opening a connection to the server

Sending the request and parameters

Checking the status

All Together Now: Making the Connection Asynchronous

Setting up the program

Building the getAJAX() function

Reading the response

Chapter 10: Improving JavaScript and AJAX with jQuery

Introducing JavaScript Libraries

Getting to Know jQuery

Installing jQuery

Importing jQuery from Google

Using jQuery with Aptana

Writing Your First jQuery App

Setting up the page

Meet the jQuery node object

Creating an Initialization Function

Using $(document).ready()

Discovering alternatives to document.ready

Investigating the jQuery Object

Changing the style of an element

Selecting jQuery objects

Modifying the style

Adding Events to Objects

Adding a hover event

Changing classes on the fly

Making an AJAX Request with jQuery

Including a text file with AJAX

Building a poor man’s CMS with AJAX

Chapter 11: Animating jQuery

Getting Prepared for Animation

Writing the HTML and CSS foundation

Initializing the page

Working with callback functions

Hiding and Showing the Content

Toggling visibility

Sliding an element

Fading an element in and out

Changing an Element’s Position with jQuery

Creating the HTML framework

Setting up the events

Don’t go chaining . . .

Building the move() function with chaining

Building time-based animation with animate()

Move a little bit: Relative motion

Modifying Elements on the Fly

Building the basic page

Initializing the code

Adding text

Attack of the clones

It’s a wrap

Alternating styles

Resetting the page

More fun with selectors and filters

Chapter 12: Using the jQuery User Interface Toolkit

Looking Over the ThemeRoller

Visiting the Theme Park

Wanna Drag? Dragging and Dropping Elements

Downloading the Library

Resizing on a Theme

Examining the HTML and standard CSS

Importing files

Making a resizable element

Adding themes to your elements

Adding an icon

Dragging, Dropping, and Calling Back

Building the basic page

Initializing the page

Handling the drop

Dropping out can be fun

Cloning the elements

Chapter 13: Improving Usability with jQuery

Multi-Element Designs

Using the Accordion widget

Building a tabbed interface

Using tabs with AJAX

Improving Usability

The dating game

Picking numbers with the slider

Selectable elements

Building a sortable list

Creating a custom dialog box

Chapter 14: Working with AJAX Data

Getting an Overview of Server-Side Programming

Introducing PHP

Writing a form for PHP processing

Responding to the request

Sending Requests AJAX-Style

Sending the data

Responding to the results

Building a More Interactive Form

Creating an AJAX form

Writing the JavaScript code

Processing the result

Simplifying PHP for AJAX

Working with XML Data

Review of XML

Manipulating XML with jQuery

Creating the HTML

Retrieving the data

Processing the results

Printing out the pet name

Working with JSON Data

Understanding JSON

Reading JSON data with jQuery

Managing the framework

Retrieving the JSON data

Processing the results

Part IV: The Part of Tens

Chapter 15: Ten Amazing jQuery Plugins

Using the Plugins

ipwEditor

Adding a basic editor with editable

Incorporating more advanced editing with FCKedit

jQuery Cookies

flot

Tag Cloud

Tablesorter

Jquery-translate

Droppy

galleria

Jmp3

Chapter 16: Ten Great Resources

jQuery PHP library

JSAN — JavaScript Archive Network

W3Schools tutorials and examples

Google AJAX APIs

Aflax

MochiKit

Dojo

Ext JS

YUI

DZone

JavaScript® & AJAX For Dummies

by Andy Harris

JavaScript® & AJAX For Dummies®

Published byWiley Publishing, Inc.111 River St.Hoboken, NJ 07030-5774www.wiley.com

Copyright © 2010 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 permitted 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 Permissions 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 affiliates in the United States and other countries, and may not be used without written permission. 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 without 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 organization 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

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 computer 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 find a blog, forum, and links to other books at http://www.aharrisbooks.net.

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 first 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 vigilance. 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 project 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 finally 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.

Publisher’s Acknowledgments

We’re proud of this book; please send us your comments through our online registration form located at www.dummies.com/register/.

Some of the people who helped bring this book to market include the following:

Acquisitions, Editorial, and Media Development

Senior Project Editor: Mark Enochs

Executive Editor: Steve Hayes

Copy Editors: Barry Childs-Helton, Virginia Sanders, Rebecca Whitney

Technical Editor: Jeff Noble

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)

Composition Services

Project Coordinator: Kristie Rees

Layout and Graphics: Carl Byers, Melissa K. Jester, Christine Williams

Proofreader: John Greenough, Content Editorial Services

Indexer: Sharon Shock

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

Introduction

The World Wide Web officially celebrated its 20th birthday as I began writing this book. In one sense, it’s hard to believe that the technology has been around this long already. At another level, it’s amazing how much has happened in that short time. When I started teaching and writing about the Internet (long before the Web was practical), none of us had any idea what it was going to turn into one day.

If you’re reading this book, I don’t have to tell you that the Web is a big deal. It’s come a long way, and it’s doing very interesting things. What I want to show in this book is where the Web is going. Web technology is changing faster than ever, and people who don’t understand these changes are going to have a hard time staying on top of things.

In the early days of the Web, we talked about Web pages, as if the Internet were a set of ordinary documents connected by links. This was true (and still is largely), but I don’t think that’s the best way to think of the Web any more. Today’s Web is not about documents, but about applications. Users and developers expect their pages to do things, not just be glorified documents.

This book describes two critical and inter-related technologies: JavaScript and AJAX. JavaScript has been a part of the Web since the relatively early days. It is a simple but powerful programming language that was designed from the beginning to work within the context of a Web document. While JavaScript has been with us for a long time, it has recently seen a resurgence of interest in the form of AJAX. This new technology promises a lot of cool things, but it’s still rooted in the heritage of JavaScript and HTML.

The great thing about JavaScript and AJAX is the amount of power they give you. If you already know HTML or XHTML, you know how to create Web documents, but those documents are relatively lifeless and static.

JavaScript is a real programming language, and it allows you to add real programming capabilities to your pages. If you’ve never programmed before, this is a great place to start. JavaScript is a pleasant and relatively easy language for beginners. It uses the familiar Web page as a user interface, which makes it an easy way to develop forms and user interfaces. If you’re already a programmer, you’ll find that your previous knowledge extends easily to JavaScript, and you’ll be fluent in this skill in no time.

AJAX extends the capabilities of JavaScript in new ways that are still being explored. In one sense, the AJAX libraries assist in creating great user experiences with new interface elements like menus and sliders. In another sense, AJAX allows some very important features like the ability to perform client-side includes (a very handy tool for making your pages more efficient) and direct control of server-side scripts.

If you read this entire book, you’ll be able to do amazing things with your Web pages. You’ll be able to get input from users, test the validity of user input, animate your pages, and interact with Web servers.

What You Will Need

One of the great things about JavaScript is how easy it is to get into. You don’t need a whole lot to get started:

Any computer will do. If your computer is relatively recent (it can run Firefox or Safari, for example), you have enough horsepower for Web development. Netbooks are fine, too. Theoretically you could do Web development on a cell phone, but I wouldn’t want to do it for long.

Any operating system is fine. I wrote this book on a combination of Windows XP and Fedora Core Linux machines. Most of the programs I recommend have versions for Windows, Mac, and Linux.

All the best tools are free. Don’t bother purchasing any expensive software for Web development. All the tools you need are free. You don’t need a fancy editor like DreamWeaver or expressionWeb. While these tools have their place, they aren’t necessary. Everything I show in this book uses entirely free tools.

No programming experience is necessary. If you already know computer programming in some other language, you’ll have no trouble with JavaScript and AJAX. But if you have never programmed at all before, this is a great place to start. If you’re already a programmer, JavaScript is a pretty easy language to pick up. If not, it’s a great place to start. I’m expecting you have some familiarity with XHTML and CSS, and you know how to get your Web pages to a server. (See my book HTML, XHTML, and CSS All-in-One Desk Reference For Dummies if you want more information on these topics.) I’ve also added two bonus chapters to the Web site: one on HTML and XHTML, and another on CSS. See them at www.aharrisbooks.net/jad and www.dummies.com/go/javascriptandajaxfd if you need a refresher.

So what do you need? Imagination, perseverance, and a little bit of time.

How This Book Is Organized

I organized this book by renting time on a supercomputer and applying a multilinear Bayesian artificial intelligence algorithm. No, I didn’t. I don’t even know what that means. I really just sketched it out during a meeting when I was supposed to be paying attention. In any case, the book is organized into a number of sections that describe various aspects of Web development with JavaScript and AJAX.

Like the other books in the For Dummies series, you can use this reference in many ways, depending on what you already know and what you want to learn. Each chapter of this book describes a particular facet of JavaScript or AJAX programming. You can read the chapters in any order you wish, especially if you already have some knowledge and you’re looking for a particular skill. However, the chapters do build in complexity from beginning to end, so if you find you don’t understand something in a later chapter, you might want to review some earlier chapters. (I’ll point out exactly where you can find things you might need as we go.) If you’re just starting out, it’s probably easiest to go from beginning to end, but the main thing is to dig in and have some fun.

Part I: Programming with JavaScript

If you’ve never written a computer program before, consider this your boot camp. (But it’s kind of a fun boot camp, with a little more silliness than most — and no pushups in the rain.) Begin by building your toolkit of powerful but free tools and applications. Here you learn what programming is all about — with JavaScript as the language of choice. You’ll be introduced to new friends like variables, conditions, loops, arrays, and objects.

Part II: Using JavaScript to Enhance Your Pages

The main reason people use JavaScript is to trick out Web pages. In this section you learn how to write programs that talk to the Web page they live in. Your programs will be able to read user input, validate that input, and dance around on the screen. It’s pretty fun.

Part III: Moving Up to AJAX

If you’ve been hanging around with Web geeks, you’ve probably heard of AJAX. It’s kind of a big deal, and it has the potential to change the way Web development works. Learn what this thing is really about. Create some AJAX requests by hand, and then use the incredible jQuery library to do more powerful programming. Learn how jQuery introduces new ways to think about programming, and how to use the jQuery User Interface extension to build snappy user experiences. You’ll also learn how to work with various kinds of data, from PHP programs to XML and JSON. Yummy.

Part IV: The Part of Tens

No Dummies book would be complete without a Part of Tens. I’m really excited about these chapters. In one, you explore ten of my favorite jQuery plugins. These amazing tools make it easy to add amazing features to your sites. You’ll see plugins for automatically sorting tables, translating text into foreign languages, building graphs, showing image galleries, playing mp3 files, and much more. Another chapter points you toward some amazing resources on the Web to learn even more.

It’s Even on the Internet!

This book has a couple of companion Web sites that are critical to understanding the book. Web programming is about making Web pages do things, and you just won’t be able to see all of that in a book. As you’re going through this book, I strongly advise you to visit either www.dummies.com/go/javascriptandajaxfd or my Web site: www.aharrisbooks.net/jad. A running version of every program in the book is available on both of these sites. You’ll also be able to view the source code of each program in its natural habitat — running on the Web.

The www.aharrisbooks.net/jad site is also a great place to start when you’re collecting your tools and libraries. Every tool or library that I describe in this book is linked from the Web page, so you’ll definitely want to check it out. I also have a forum where I’m happy to answer your questions and share projects with you. I’m looking forward to seeing you there.

Icons Used in This Book

Every once in a while, a concept is important enough to warrant special attention. This book uses a few margin icons to point out certain special information.

These are tidbits of additional information you ought to think about or at least keep in mind.

Occasionally I feel the need to indulge my “self-important computer science instructor” nature, and I give some technical background on things. These things are interesting but not critical, so you can skip them if you want. You might want to memorize a couple of them before you go to your next computer science cocktail party. You’ll be the hit of the party.

Tips are suggestions to make things easier.

Be sure to read anything marked with this icon. Failure to do so might result in a plague of frogs, puffs of black smoke, or your program not working like you expect.

Where to Go from Here

Before you start banging out some code, let’s take stock of your needs. If you’ve never dealt with JavaScript or AJAX, you might want to start off in Part I. If you know JavaScript but not AJAX, skip ahead to Part IV. If you want to brush up on your JavaScript, go to Parts II and III.

Well, just dig in and have some fun!

Skim the book. Get an overview, look at the figures, and get a sense of the fun to be had.

Visit the Web sites. You can’t taste the recipes in a cookbook, and you can’t get a real sense of Web programs in a computing book. Go to either of the companion Web sites at www.aharrisbooks.net/jad or www.dummies.com/go/javascriptandajaxfd and play around with the sample programs. Note that you will also find two bonus chapters on HTML and CSS programming on these companion sites, as well as all the code from the programs used throughout the book.

Check out the Cheat Sheet. The Cheat Sheet at www.dummies.com/cheatsheet/javascriptandajax is a handy reference of common programming variables and coding miscellany.

Pick a spot and dig in. If you’re already comfortable with JavaScript programming, take a look at Part III on AJAX. If not, you might need to back up a little bit and find the more appropriate spot. If in doubt, you could always go from beginning to end (but what’s the fun in that?)

Have fun. Programming is a serious business. You can actually make a living doing this stuff. But it’s also a lot of fun. Have a good time, relax, and enjoy making your Web pages do things you never thought they could do.

A Final Word

Thank you for buying this book. I truly hope you find it fun and useful. I had a great time writing this book, and I think you’ll have a good time using it. I’m looking forward to hearing from you and seeing what you can do with the skills you pick up here. Drop me a line at [email protected] and let me know how it’s going!

Part I

Programming with JavaScript

In this part . . .

You enter the world of JavaScript programming. The kind of programming you learn in this part is suitable for any kind of language. You’ll be able to translate these ideas to any major language without difficulty. Of course, the examples and emphasis are in JavaScript.

Chapter 1 helps you gather your tools. Most of the tools you need for professional JavaScript program are completely free. Learn what you need in terms of editors, browsers, and plugins.

Chapter 2 gets you started in JavaScript. You’ll store data in variables, work with text data, and do some basic input and output.

Chapter 3 takes you into the wonderful world of decision making. You’ll learn how to generate random numbers and then use them to experiment with several decision-making mechanisms. Your programs will make decisions like the best of them.

Chapter 4 introduces the powerful idea of loops. Your programs will be able to repeat as many times as you want, and will stop on a dime. Loops can also cause difficult-to-spot logic problems, so this chapter also describes a number of debugging techniques.

Chapter 5 helps you build more powerful programs by combining elements. You can combine variables to make arrays, and you can combine statements to make functions. You also learn how to combine both instructions and data to make objects, including the powerful JSON object.

Chapter 1

Taking the Web to the Next Level

In This Chapter

Reviewing HTML, XHTML, and CSS

Examining the role of JavaScript and AJAX

Exploring what JavaScript and AJAX can add to Web pages

Choosing an editor

Building your browser toolkit

The Web is a pretty big deal. It’s a lot of fun to build Web pages, and just about every business needs them. As the Web has grown and changed, the expectations of what a Web page is and does have also changed. If you already know HTML or XHTML, you know how to create Web documents — if you need a refresher, check out Bonus Chapter 1 on either the companion Web site at www.dummies.com/go/javascriptandajaxfd or my own site at www.aharrisbooks.net/jad.

As the Web has evolved so have the tools that are used to create Web pages and documents. JavaScript and AJAX are two powerful tools for creating dynamic Web documents. This chapter gets you started with a look at some of the primary technologies out there for building Web pages.

Building Something Cool

This book is about adding features to Web pages that you cannot do with simple HTML and CSS.

Make no mistake; we’re talking about programming here — and programming is a little bit harder than plain old Web development. However, it’s really worth it, as the example page in Figure 1-1 illustrates.

To keep this example simple, I’m using some external libraries. They are explained in Part IV of this book, but for now just appreciate that something exciting is happening here.

Figure 1-1: This page has some interesting features that would not be possible in basic HTML.

This program requires you to have an active Internet connection to work correctly. Check Chapter 10 to see some alternatives for connecting to external libraries.

If you want to see this page in action (and you really should), please go to the companion Web sites for this book: www.aharrisbooks.net/jad or www.dummies.com/go/javascriptandajaxfd. This program and every other program and example in the book are available at that site.

At first, the Web page looks pretty simple, but when you open it in your own browser (as you should) and begin playing with it, you’ll soon discover that it packs a lot of surprises. This very simple page illustrates a lot of the reasons why you should learn JavaScript and AJAX.

The buttons do something. You might already have a handle on creating form elements (such as buttons and text fields) in plain HTML, but HTML can’t do anything with the buttons and text fields; that’s why you need a programming language.

If you want something interesting to happen, you need a programming language. Each of these buttons uses JavaScript to do some interesting work, but the fact that the page is now interactive is a huge change. With JavaScript, you can build applications, not just pages.

The Count button dynamically changes the page. When you click the Count button, new content is added to the page automatically. A program counts how many times the Count button is pressed and adds text to the “watch this space” section. As the user interacts with the page, the page has material that wasn’t originally on the server.

Of course, this example is simple, but you will be able to add any kind of text to any Web element dynamically. That’s a very powerful capability. Figure 1-2 shows how the page looks after I click the Count button a few times.

The Toggle Visibility button makes things appear and disappear. You can’t really modify whether things appear or go away in HTML. You can do so in CSS to some level, but JavaScript gives you a much more powerful set of tools for changing what parts of the page are visible to the user at any time. Look at Figure 1-3 to see the page with the output segment hidden.

Figure 1-2: The Count button changes the text in part of the page.

Figure 1-3: Click the Toggle Visibility button to make the panel with the output reappear.

The Toggle Style button instantly changes the appearance of part of the page. You can use JavaScript to change the contents of any part of the page (that is, the HTML) — but you can also use JavaScript to modify the appearance (the CSS) in real time. In this example, I’ve created a special CSS class called funky that is added to or removed from the output box every time the user clicks the button. This approach works with any CSS class. (Amazing, huh?) Figure 1-4 shows the page with the funky class applied.

If you need a refresher on CSS or XHTML, please look over the bonus chapters on the Web site: www.dummies.com/go/javascriptandajaxfd or www.aharrisbooks.net/jad.

I’ve added callouts to some of the figures in this chapter to describe what’s happening. The images in this book are not sufficient to understand what the page does. Find the program at www.dummies.com/go/javascriptandajaxfd or www.aharrisbooks.net/jad and look at it yourself.

The Animate button is even more fun. The Animate button makes a series of gradual changes to the output box, changing its size, shape, and appearance over time. (You’ve really got to try it; a screen shot won’t do it justice.)

Figure 1-4: You can dynamically change the appearance of any page element.

The Show Code button brings in text from an external file. This button uses a simple form of AJAX to load an external file into the page in real time. This is an easy way to build modular pages. In this case, I’m actually pulling in a copy of the JavaScript code so you can see how it works. Don’t worry if you don’t understand it yet. That’s what this book is for! Figure 1-5 shows this operation in action.

Letthe user drag the code. The user can pick up the code and move it wherever she wants. This is another kind of functionality unheard of in ordinary Web pages.

No, you wouldn’t normally display your code to users. I’m just illustrating that it’s pretty easy to pull in an arbitrary text file from a server. Since you are a programmer now, I chose to show you a preview of the code as the text file I brought in.

These capabilities are profound, and they’re just the beginning. Learning to program transforms your Web pages from static documents to living applications that can interact with your users in new and exciting ways.

Feel free to look over the code for this project. It’s actually in three files: demo.html, demo.css, and demo.js. All can be found in the Chapter 1 folder of the book’s companion Web site. Use View Source when the page is displayed in your browser to see the source code of the HTML file.

Figure 1-5: The Show Code button pulls code from another file and shows it on-screen.

I’ve added plenty of comments in the code to help you see what’s going on, but it’s okay if you don’t have all the intricacies nailed down yet. Think of this as a preview of things you’ll get to do in this book.

Getting Started

Making your pages do all this stuff looks like fun, and it is. There’s a lot to get under your belt, but don’t panic; I take you through everything. The first step is to review the core technologies that JavaScript and AJAX are based on, and see how they’re related to some other (more advanced) technologies you’ll eventually need.

Overview of the Core Technologies

Powerful as they are, JavaScript and AJAX do not stand on their own. They only have meaning in the context of Web pages, so they rely on various Web technologies. If you want to build a JavaScript application, you’ll need several other technologies, too:

HTML: HTML (HyperText Markup Language) is the basic markup language that describes Web pages. It’s a relatively simple technique for building Web sites that requires nothing but a plain text editor.

XHTML: XHTML is often considered the successor to HTML. Because it doesn’t allow certain kinds of tags, XHTML is actually a smaller language that’s a bit easier to use. Typically XHTML pages are more dependent on CSS than HTML, as many of the HTML tags are replaced with CSS tools.

CSS: CSS (Cascading Style Sheets) is a way to add specific style information to an HTML or XHTML page. HTML and XHTML provide the general framework, and CSS describes the color and layout.

JavaScript: JavaScript is a programming language embedded in all modern Web browsers. It’s specially designed to interact with Web pages; you can use it to extract information from parts of a page, and to manipulate the page in real time.

AJAX: (Asynchronous JavaScript And XML) is a technique that allows JavaScript to communicate more directly with the Web server. It creates an interesting new relationship between the Web browser and the Web server. About half of this book is dedicated to AJAX.

PHP: (PHP Hypertext Preprocessor) is one of several important languages for working on a Web server. Although it’s not a primary focus of this book, the PHP language can do things that JavaScript cannot do. AJAX is frequently used to connect JavaScript applications to PHP programs. You get a brief introduction to PHP in Chapter 14.

Java: Java is a language that’s entirely different from JavaScript (despite the similar names). Although Java is useful on both the client and server sides of the client-server relationship, it’s not a primary focus of this book.

When you’re looking for online help about JavaScript, be sure that you talk to JavaScript experts and not Java programmers. Although the languages have similar names, they’re entirely different languages. Java programmers love to act superior, and they’ll give you grief if you ask a JavaScript question in a Java forum. If in doubt, ask on my Web site (www.aharrisbooks.net). I can help you with either language, and I won’t mind (or bug you about it) if you’re a little confused.

Choosing your computer

Of course, you’ll need a computer. Fortunately, it doesn’t have to be anything special. Any computer you can use to view Web pages can also be used to create them. Any of the major operating systems (Windows, Mac, and Linux) is perfectly fine. I do most of my work on a combination of Linux (Fedora Core) and Windows XP, but all the programs in the book will work exactly the same on any reasonably modern computer.

At some point you’ll want your Web pages to be available on the Internet. Although you can install a server on your home computer, it’s usually better to use an online hosting service. You can often get very good online hosting very cheaply or even free. If you want to have a specific name attached to your Web site (such as www.mySite.com), then you’ll need to pay about $10 a year to register the domain. Hosting services frequently use Linux, but you’ll probably use an online interface that hides all the details from you.

The right tools make any job easier, but for Web development, many of the really great software tools are available entirely free of charge. Because these tools are open source (available with a license that encourages distribution), they are entirely legal to use without paying for them, unlike commercial programs obtained using illicit methods.

You can do basic Web development on any computer with a text editor and browser. As your Web-tweaking skills get more sophisticated, you might want more powerful tools. Read on to see some great tools that cost absolutely nothing.

Picking an Editor

Web pages, JavaScript, HTML, and CSS are all ultimately forms of text. You don’t really need any particular program to write them. Still, having exactly the right tool can make your life a lot easier. Since you’re going to spend a lot of time with your Web tools, you should be aware of your options.

Avoiding the problem tools

Using the wrong tool for the job can really make your life difficult. Here are a few tools that don’t really stand up to the job of Web development:

Microsoft Word: Word processors are great (I’m using one to write this book), but they aren’t really designed for creating Web pages. Word (and all other word processors) store lots of information in their files besides plain text. All the formatting stuff is great for non-Web documents, but HTML and CSS have their own ways of managing this data, and the other stuff gets in the way. Even the Save as HTML command is problematic. Although it stores the page in a form of HTML, Word’s formatting is extremely clunky and difficult to work with. The resulting pages will not be suitable for adapting to JavaScript.

Notepad: This is the classic tool built into most versions of Windows. It saves pages in plain text, so it’s better than Word for Web development, but Notepad is too simplistic for any sort of serious work. It lacks such basic features as line numbers — and it can’t handle multiple documents at once. You’ll quickly outgrow Notepad as a Web-development tool.

TextEdit: The default text editor on the Mac is a very powerful tool, but it’s more like a word processor than what I’d call a true text editor. When you save an HTML file in TextEdit, it’s usually not stored the way you need it to: Rather than seeing the results of the code, you’ll see the code itself. If you want to use TextEdit for HTML or JavaScript, make sure you choose Format⇒Make Plain Text before saving your file.

Graphics editors: Some high-end graphics editors like Adobe Photoshop, Adobe Fireworks, and Gimp also have the ability to export to HTML, but the code they produce is not easy to work with. It’s really better to use these programs to edit your graphics and use a dedicated text editor to handle your code.

Using a WYSIWYG editor

The promise of WYSIWYG (“what you see is what you get”) editing is very alluring. Word-processing programs have had this capability for years. As you edit a document on-screen, you can see in real time exactly how it will look on paper. A number of tools promise this kind of functionality for Web pages: Adobe Dreamweaver is the most popular, followed by Microsoft FrontPage and its replacement ExpressionWeb. Although these tools are popular for traditional Web development, they have some drawbacks when it comes to the kind of interactive work we do in this book:

WYSIWYG is a lie. The whole assumption of WYSIWYG works fine when the output is a paper document printed on a printer. You can predict how the output will work. Web pages are different, because the output shows up on a display that belongs to somebody else. You don’t know what size it will be, what colors it will support, or what fonts are installed. You also don’t know which browser the user will be viewing pages with, which can make a major difference in the output of the page.

The editor hides details you need. A visual editor tries to protect you from some of the details of Web development. That’s fine at first, but at some point you’ll need that level of control. Most professionals who use Dreamweaver spend most of their time in Code view, ignoring the advantages of a visual editor. Why pay for features you’re going to ignore?

Visual editors assume static documents. A visual editor is based on the idea that a Web page is an ordinary document. The kinds of pages we build in this book are much more than that. You will (for example) be writing code that creates and modifies Web documents on the fly. You need to know how to build Web documents by hand so you can write code that builds them and changes them dynamically.

Introducing programmer’s editors

A number of specialty editors have propped up which seek to fill the gap between plain-text editors and the WYSIWYG tools. These editors write in plain text, but they have additional features for programmers, including:

Awareness of languages: Programmer’s editors often know what language you’re writing in and can adapt, helping you whether you’re writing HTML, JavaScript, or CSS code. Most general-purpose programmer’s editors can handle all these languages natively, and often can help with many more languages.

Syntax highlighting: Various elements are colored in different ways so you can see what is in plain text, what is part of an HTML tag, and so on. This simple feature can make it much easier to find problems like missing quotes, and to see the general structure of your page quickly.

Syntax support: Programmer’s editors often provide some sort of help for remembering the syntax of your language. This boost can be in the form of buttons and macros for handling common code, pre-written templates for standard layouts and patterns, and syntax completion (which looks at what you’re typing and suggests completions based on the current language you’re using).

Multiple document support: Advanced Web applications often involve editing several different documents at once. You might have a dozen Web pages with a few CSS style sheets and an external JavaScript file or two. A programmer’s editor allows you to view and edit all these files simultaneously. Many also allow you to generate a projectfile so you can save all the related files automatically and load them in one batch.

Macro tools: Programming often requires repetitive typing tasks. Having a feature that records and plays back sequences of keystrokes as macros (short automated operations) can be incredibly helpful.

Debugging and preview support: Most programmer’s editors have a tool for previewing your code in a browser (or sometimes directly in the editor). The editors also often have tools for predicting certain errors, or responding to errors when they occur. At a minimum, you need the capability to jump directly to a particular line or section of your code.

Indentation support: Most programmers use indentation as a powerful tool to help them understand the structure of the Web documents they’re building. A good editor can assist you with this indentation and also help you recognize when you’ve made mistakes in the structure of your document.

Getting familiar with some important editors

A couple of multi-purpose programmer’s editors immediately come to mind. You should consider investigating one or more of these free programs:

vi and emacs: These are the granddaddies of all text editors. Both are very common on Unix/Linux environments. They are also available for Windows and Mac. Though extremely capable editors, vi and emacs were developed at a time when modern ideas about usability weren’t practical. If you already know how to use one of these tools, by all means investigate a modern variant. (Frankly, I still use emacs as my primary text editor, though I don’t know if I’d learn it today with all the easier options out there.) Figure 1-6 shows a Web page being edited with emacs.

Figure 1-6: Emacs isn’t pretty, but it’s very powerful. Use it for extra geek points.

notepad++: This is what Notepad for Windows should be. It starts with the speed and simplicity of Windows Notepad, but adds tons of features for programmers. I especially like the built-in support for page validation. This is one of the few programs to earn a permanent shortcut on my desktop. Unfortunately, it’s only for Windows. Figure 1-7 shows the same page being edited in notepad++.

Bluefish: The Bluefish text editor is rapidly becoming a favorite tool for Web developers. It’s quick and powerful, and it has plenty of great features for Web developers. One especially powerful tool is the CSS generator, which helps you develop style sheets with a menu system so you don’t have to memorize any syntax. It also has a great generator for default templates, which makes XHTML-strict Web pages much easier to build. Bluefish is available for all major platforms (for the Windows version, you’ll also need to install the free GTK library). You can see Bluefish running in Figure 1-8.

Figure 1-7: You’ll find notepad++ a very powerful alternative to Notepad.

Figure 1-8: Bluefish is a very nice editor for XHTML and JavaScript.

jEdit: This powerful editor is written in Java, so it is available on virtually every platform. It is a very powerful editor in its basic format, but its best feature is the extensive plugin library that allows you to customize it to your own needs. If you install the free XML library, jEdit has incredible support for HTML and XHTML. Figure 1-9 shows the sample program being edited in jEdit.

codetch: This editor is unique because rather than being a standalone editor, it is actually an extension for the popular Firefox browser. It has most of the same features as the other editors, with the convenience of being already a part of your browser. It is not quite as configurable as some of the other tools, but it’s still extremely handy. You can see codetch in action in Figure 1-10.

Figure 1-9: jEdit is a fast and capable editor written in Java.

Figure 1-10: The codetch plugin for Firefox is a complete Web editor.

Introducing Aptana

One particular programmer’s editor has really taken over the Web development world in recent years. Aptana is a full-featured programmer’s editor based on the powerful and popular Eclipse editor for Java programming. Aptana has a lot to recommend:

Extensive built-in support for Web languages: Aptana comes out of the box with support for HTML/XHTML, CSS, JavaScript, and AJAX.

Syntax highlighting: Most programmer’s editors have syntax highlighting, but Aptana is especially capable in this area. Sometimes you’ll have the same physical document with three or more different languages active, and Aptana can usually sense by context whether you’re writing CSS, XHTML, or JavaScript code.

Code completion: This is one of Aptana’s most impressive features. When you start writing a line of code, Aptana will pop up a menu of suggestions. This helps you avoid mistakes, so you don’t have to memorize all the various CSS attributes and JavaScript commands exactly.

Error detection: Aptana can look over your document as you create it and highlight some areas in real time. This feature can help you write better code, and can also help hone your skills at writing code.

AJAX support: AJAX is a relatively new technology, and most editors do not directly support it. Aptana has a number of features that help you with AJAX, including built-in support of all the major AJAX libraries.

Aptana is completely free. I’ve placed a link to Aptana (and indeed all the tools mentioned here) on the Web site for this book. You can see Aptana in action in Figure 1-11.

My personal setup varies from machine to machine, but generally I use Aptana for my heavy programming, with notepad++ as a quick editor on Windows, and emacs as my primary basic text editor on Linux or Mac machines. Of course, you’ll develop your own preferences as you go. All these editors are free and available at www.aharrisbooks.net/jad, so they’re worthy of some experimentation.

Figure 1-11: Aptana might be the best Web editor available at any price.

Creating Your Browser Collection

Web pages live within the context of Web browsers. Each browser interprets HTML and CSS a bit differently, and the differences are magnified when you start talking about JavaScript and AJAX. Subtle (and sometimes not-so-subtle) differences in the way browsers support your code can be very important.

Setting the standard

Every Web browser has its own particular way of displaying Web pages. Although those ways are pretty similar, the differences can sometimes be a problem. Worse, as you begin to write JavaScript code, you’ll find that each browser has its own interpretation of the code. That can be a real mess.

Fortunately, there’s been a big push toward standardization in recent years. The various browser developers have been getting together and agreeing to various standards set forth by a centralized team called the World Wide Web Consortium (W3C). When a browser implements JavaScript, it now agrees (theoretically, at least) to adhere to a set of standards for behavior. As long as your code follows the same standards, you can expect everything to work pretty well. (Most of the time, anyway.)

In this book, I adhere to accepted JavaScript standards as practiced by most developers. All the code in this book is tested on IE7 for Windows, Firefox 3 for Windows, and Firefox 3 for Linux. Any time the code is likely to cause particular browser problems, I try to point out the specific issues.

Picking a browser or two

Here are a few browsers you should be aware of:

Legacy browsers: You’ll find a lot of older browsers still being used on the Internet. Some people have continued to stick with whatever browser was on their machine when they got it, and haven’t upgraded in years. The browsers earlier than IE6 or Firefox are a particular problem, because support for Web standards and for JavaScript was very uneven in the early days of the Web. For the most part, this book assumes that your users will be using at least a somewhat modern browser.

AJAX in particular won’t work on really old browsers.

Microsoft Internet Explorer 6: This is a very common browser, still in popular use. At one point it was the dominant browser on the Internet, but it has fallen from favor in recent years, being replaced by newer offerings from Microsoft as well as competitors like Firefox and Opera. This browser is well-known for a number of “features” that don’t comply with community standards. Its use is declining, but as of this writing, you still have to consider supporting it; a lot of users still have it.

Firefox: The Firefox Web browser from Mozilla reopened the so-called “browser wars” by providing the first significant competition to Microsoft in many years. Firefox really opened eyes with its impressive features: tabbed browsing, improved security, and integrated searching. For developers, Firefox was among the first browsers to truly support Web standards in a serious way. Firefox is especially important to developers because of its extension architecture, which allows a programmer to turn Firefox into a high-powered development tool. Look at the next section of this chapter for suggestions on some great extensions to add to Firefox.

Microsoft Internet Explorer 7 and 8: IE7 could be considered a tribute to Firefox, as it incorporates many of the same features. While this book was being written, IE8 came out, and added a few more improvements. Although the support for standards is not as complete in IE7 and IE8 as it is in some of the other current fleet of browsers, they are much better than in any earlier versions of IE.

Opera: Opera is an important browser because it was one of the earliest browsers to actively support Web standards. It’s very popular in certain circles, but has never gained widespread popularity. Since it supports Web standards, it will typically run any code written for a standards-compliant browser.

Safari: