O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

JavaScript® and AJAX for Dummies®

JavaScript® and AJAX for Dummies®

by Andy Harris
Publisher: For Dummies
Release Date: December 2009
ISBN: 9780470417997
View table of contents
Start reading

Book Description

Learn to use these powerful tools together and build Web sites that work

If you want to build Web pages that offer real value to your site's visitors, JavaScript and AJAX are top tools for the job. Even if you're new to Web programming, this book helps you create sites any designer will admire. With easy-to-understand steps and an emphasis on free tools, you'll be able to jump right into building a site using the same techniques as the pros.

  • Down to basics — learn your way around JavaScript and choose an editor and test browser

  • Manage complexity — use functions, arrays, and objects to create more sophisticated programs

  • Page magic — discover how to control what happens on your pages, animate objects, and put pages in motion

  • Get beautiful — Use the jQuery User Interface library to add sliders, tabbed interfaces, and custom dialogs to a site

  • Come clean with AJAX — build AJAX requests into your programs, 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

Table of Contents

  1. Copyright
  2. About the Author
  3. Author's Acknowledgments
  4. Publisher's Acknowledgments
  5. Introduction
    1. What You Will Need
    2. How This Book Is Organized
      1. Part I: Programming with JavaScript
      2. Part II: Using JavaScript to Enhance Your Pages
      3. Part III: Moving Up to AJAX
      4. Part IV: The Part of Tens
    3. It's Even on the Internet!
    4. Icons Used in This Book
    5. Where to Go from Here
    6. A Final Word
  6. I. Programming with JavaScript
    1. 1. Taking the Web to the Next Level
      1. 1.1. Building Something Cool
      2. 1.2. Getting Started
        1. 1.2.1. Overview of the Core Technologies
        2. 1.2.2. Choosing your computer
      3. 1.3. Picking an Editor
        1. 1.3.1. Avoiding the problem tools
        2. 1.3.2. Using a WYSIWYG editor
        3. 1.3.3. Introducing programmer's editors
        4. 1.3.4. Getting familiar with some important editors
        5. 1.3.5. Introducing Aptana
      4. 1.4. Creating Your Browser Collection
        1. 1.4.1. Setting the standard
        2. 1.4.2. Picking a browser or two
      5. 1.5. Turning Firefox into a Development Machine
        1. 1.5.1. Web Developer Toolbar
        2. 1.5.2. HTML Validator extension
        3. 1.5.3. Firebug
    2. 2. Writing Your First Program
      1. 2.1. Becoming a Programmer
        1. 2.1.1. Choosing a JavaScript editor
        2. 2.1.2. Picking your test browser
        3. 2.1.3. Adding a script to your page
        4. 2.1.4. Embedding your JavaScript code
        5. 2.1.5. Creating comments
        6. 2.1.6. Using the alert() method for output
        7. 2.1.7. Adding the semicolon
      2. 2.2. Introducing Variables
        1. 2.2.1. Creating a variable for data storage
        2. 2.2.2. Asking the user for information
        3. 2.2.3. Responding to the user
      3. 2.3. Using Concatenation to Build Better Greetings
        1. 2.3.1. Comparing literals and variables
        2. 2.3.2. Including spaces in concatenated phrases
      4. 2.4. Understanding the string Object
        1. 2.4.1. Introducing object-oriented programming (and cows)
        2. 2.4.2. Investigating the length of a string
        3. 2.4.3. Using string methods to manipulate text
      5. 2.5. Understanding Variable Types
        1. 2.5.1. Adding numbers
        2. 2.5.2. Adding the user's numbers
        3. 2.5.3. The trouble with dynamic data
        4. 2.5.4. The pesky plus sign
      6. 2.6. Changing Variables to the Desired Type
        1. 2.6.1. Using variable conversion tools
        2. 2.6.2. Fixing the addInput code
    3. 3. Changing Program Behavior with Conditions
      1. 3.1. Working with Random Numbers
        1. 3.1.1. Creating a die to die for
        2. 3.1.2. Rolling the dice
      2. 3.2. Using if to Control Flow
        1. 3.2.1. If and only if
        2. 3.2.2. Using conditions
        3. 3.2.3. Comparison operators
      3. 3.3. Do What I Say or Else
        1. 3.3.1. Using else-if for more complex interaction
        2. 3.3.2. The mystery of the unnecessary else
      4. 3.4. It's Time to Switch Your Thinking
        1. 3.4.1. Creating an expression
        2. 3.4.2. Switching with style
      5. 3.5. Nesting if Statements
        1. 3.5.1. Building the nested conditions
        2. 3.5.2. Making sense of nested ifs
    4. 4. Loops and Debugging
      1. 4.1. Building Counting Loops with for
        1. 4.1.1. Building a standard for loop
        2. 4.1.2. Making a backwards loop
        3. 4.1.3. Counting five at a time
      2. 4.2. Looping for a while
        1. 4.2.1. Creating a basic while loop
        2. 4.2.2. Avoiding loop mistakes
      3. 4.3. Introducing Some Bad Loops
        1. 4.3.1. Managing the reluctant loop
        2. 4.3.2. Managing the compulsive loop
      4. 4.4. Debugging Your Code
        1. 4.4.1. Letting Aptana help
        2. 4.4.2. Debugging JavaScript on IE
        3. 4.4.3. Finding errors in Firefox
        4. 4.4.4. Catching syntax errors with Firebug
      5. 4.5. Catching Logic Errors
        1. 4.5.1. Logging to the console with Firebug
        2. 4.5.2. Looking at console output
      6. 4.6. Using an Interactive Debugger
        1. 4.6.1. Adding a breakpoint
        2. 4.6.2. Running the debugger
        3. 4.6.3. Using the Debug perspective
        4. 4.6.4. Examining Debug mode with a paused program
        5. 4.6.5. Walking through your program
        6. 4.6.6. Viewing expression data
        7. 4.6.7. Using the Firebug debugger
    5. 5. Functions, Arrays, and Objects
      1. 5.1. Breaking Code into Functions
        1. 5.1.1. Inviting ants to the picnic
        2. 5.1.2. Thinking about song (and program) structure
        3. 5.1.3. Building the antsFunction.html program
      2. 5.2. Passing Data into and out of Functions
        1. 5.2.1. Examining the main code
        2. 5.2.2. Looking at the chorus line
        3. 5.2.3. Handling the verses
          1. 5.2.3.1. Passing data to the verse() function
          2. 5.2.3.2. Determining the distraction
          3. 5.2.3.3. Creating the text
      3. 5.3. Managing Scope
        1. 5.3.1. Introducing local and global variables
        2. 5.3.2. Examining variable scope
      4. 5.4. Building a Basic Array
        1. 5.4.1. Storing a list of data in an array
        2. 5.4.2. Accessing array data
        3. 5.4.3. Using arrays with for loops
        4. 5.4.4. Visiting the ants one more time
      5. 5.5. Working with Two-Dimensional Arrays
        1. 5.5.1. Setting up the arrays
        2. 5.5.2. Getting a city
        3. 5.5.3. Creating a main() function
      6. 5.6. Creating Your Own Objects
        1. 5.6.1. Building a basic object
        2. 5.6.2. Adding methods to an object
        3. 5.6.3. Building a re-usable object
        4. 5.6.4. Using your shiny new objects
      7. 5.7. Introducing JSON
        1. 5.7.1. Storing data in JSON format
        2. 5.7.2. Building a more complex JSON structure
  7. II. Using JavaScript to Enhance Your Pages
    1. 6. Talking to the Page
      1. 6.1. Understanding the Document Object Model
        1. 6.1.1. Navigating the DOM
        2. 6.1.2. Changing DOM properties with Firebug
        3. 6.1.3. Examining the document object
      2. 6.2. Harnessing the DOM through JavaScript
        1. 6.2.1. Getting the blues, JavaScript-style
        2. 6.2.2. Writing JavaScript code to change colors
      3. 6.3. Managing Button Events
        1. 6.3.1. Setting up the playground
        2. 6.3.2. Embedding quotes within quotes
        3. 6.3.3. Writing the changeColor function
      4. 6.4. Interacting with Text Input and Output
        1. 6.4.1. Introducing event-driven programming
        2. 6.4.2. Creating the XHTML form
        3. 6.4.3. Using getElementById() to get access to the page
        4. 6.4.4. Manipulating the text fields
      5. 6.5. Writing to the Document
        1. 6.5.1. Preparing the HTML framework
        2. 6.5.2. Writing the JavaScript
        3. 6.5.3. Finding your innerHTML
      6. 6.6. Working with Other Text Elements
        1. 6.6.1. Building the form
        2. 6.6.2. Writing the function
        3. 6.6.3. Understanding generated source code
    2. 7. Getting Valid Input
      1. 7.1. Getting Input from a Drop-Down List
        1. 7.1.1. Building the form
        2. 7.1.2. Reading the list box
      2. 7.2. Managing Multiple Selections
        1. 7.2.1. Coding a multiple-selection select object
        2. 7.2.2. Writing the JavaScript code
      3. 7.3. Check, Please — Reading Check Boxes
        1. 7.3.1. Building the checkbox page
        2. 7.3.2. Responding to the check boxes
      4. 7.4. Working with Radio Buttons
        1. 7.4.1. Interpreting radio buttons
      5. 7.5. Working with Regular Expressions
        1. 7.5.1. Introducing regular expressions
        2. 7.5.2. Characters in regular expressions
        3. 7.5.3. Marking the beginning and end of the line
      6. 7.6. Working with Special Characters
        1. 7.6.1. Matching a character with the period
        2. 7.6.2. Using a character class
        3. 7.6.3. Specifying digits
        4. 7.6.4. Marking punctuation characters
        5. 7.6.5. Finding word boundaries
      7. 7.7. Repetition Operations
        1. 7.7.1. Finding one or more elements
        2. 7.7.2. Matching zero or more elements
        3. 7.7.3. Specifying the number of matches
      8. 7.8. Working with Pattern Memory
        1. 7.8.1. Recalling your memories
        2. 7.8.2. Using patterns stored in memory
    3. 8. Moving and Grooving
      1. 8.1. Making Things Move
        1. 8.1.1. Looking over the HTML
        2. 8.1.2. Getting an overview of the JavaScript
        3. 8.1.3. Creating global variables
        4. 8.1.4. Initializing
        5. 8.1.5. Moving the sprite
        6. 8.1.6. Checking the boundaries
      2. 8.2. Reading Input from the Keyboard
        1. 8.2.1. Building the keyboard page
        2. 8.2.2. Looking over the keyboard.js script
        3. 8.2.3. Overwriting the init() function
        4. 8.2.4. Setting up an event handler
        5. 8.2.5. Responding to keystrokes
        6. 8.2.6. Deciphering the mystery of keycodes
      3. 8.3. Following the Mouse
        1. 8.3.1. Looking over the HTML
        2. 8.3.2. Setting up the HTML
        3. 8.3.3. Initializing the code
        4. 8.3.4. Building the mouse listener
      4. 8.4. Automatic Motion
      5. 8.5. Image-Swapping Animation
        1. 8.5.1. Preparing the images
        2. 8.5.2. Building the page
        3. 8.5.3. Building the global variables
        4. 8.5.4. Setting up the interval
        5. 8.5.5. Animating the sprite
        6. 8.5.6. Improving the animation with preloading
      6. 8.6. Working with Compound Images
        1. 8.6.1. Preparing the image
        2. 8.6.2. Setting up the HTML and CSS
        3. 8.6.3. Writing the JavaScript
        4. 8.6.4. Setting up global variables
        5. 8.6.5. Building an init() function
        6. 8.6.6. Animating the sprite
      7. 8.7. Movement and Swapping
        1. 8.7.1. Building the HTML framework
        2. 8.7.2. Building the code
        3. 8.7.3. Defining global variables
        4. 8.7.4. Initializing your data
        5. 8.7.5. Animating the image
        6. 8.7.6. Updating the image
        7. 8.7.7. Moving the sprite
  8. III. Moving Up to AJAX
    1. 9. AJAX Essentials
      1. 9.1. AJAX: Return to Troy
      2. 9.2. AJAX Spelled Out
        1. 9.2.1. A is for asynchronous
        2. 9.2.2. J is for JavaScript
        3. 9.2.3. A is for ... and?
        4. 9.2.4. And X is for ... data?
      3. 9.3. Making a Basic AJAX Connection
        1. 9.3.1. Building the HTML form
        2. 9.3.2. Creating an XMLHttpRequest object
        3. 9.3.3. Opening a connection to the server
        4. 9.3.4. Sending the request and parameters
        5. 9.3.5. Checking the status
      4. 9.4. All Together Now: Making the Connection Asynchronous
        1. 9.4.1. Setting up the program
        2. 9.4.2. Building the getAJAX() function
        3. 9.4.3. Reading the response
    2. 10. Improving JavaScript and AJAX with jQuery
      1. 10.1. Introducing JavaScript Libraries
      2. 10.2. Getting to Know jQuery
        1. 10.2.1. Installing jQuery
        2. 10.2.2. Importing jQuery from Google
        3. 10.2.3. Using jQuery with Aptana
      3. 10.3. Writing Your First jQuery App
        1. 10.3.1. Setting up the page
        2. 10.3.2. Meet the jQuery node object
      4. 10.4. Creating an Initialization Function
        1. 10.4.1. Using $(document).ready()
        2. 10.4.2. Discovering alternatives to document.ready
      5. 10.5. Investigating the jQuery Object
        1. 10.5.1. Changing the style of an element
        2. 10.5.2. Selecting jQuery objects
        3. 10.5.3. Modifying the style
      6. 10.6. Adding Events to Objects
        1. 10.6.1. Adding a hover event
        2. 10.6.2. Changing classes on the fly
      7. 10.7. Making an AJAX Request with jQuery
        1. 10.7.1. Including a text file with AJAX
        2. 10.7.2. Building a poor man's CMS with AJAX
    3. 11. Animating jQuery
      1. 11.1. Getting Prepared for Animation
        1. 11.1.1. Writing the HTML and CSS foundation
        2. 11.1.2. Initializing the page
        3. 11.1.3. Working with callback functions
      2. 11.2. Hiding and Showing the Content
        1. 11.2.1. Toggling visibility
        2. 11.2.2. Sliding an element
        3. 11.2.3. Fading an element in and out
      3. 11.3. Changing an Element's Position with jQuery
        1. 11.3.1. Creating the HTML framework
        2. 11.3.2. Setting up the events
        3. 11.3.3. Don't go chaining...
        4. 11.3.4. Building the move() function with chaining
        5. 11.3.5. Building time-based animation with animate()
        6. 11.3.6. Move a little bit: Relative motion
      4. 11.4. Modifying Elements on the Fly
        1. 11.4.1. Building the basic page
        2. 11.4.2. Initializing the code
        3. 11.4.3. Adding text
        4. 11.4.4. Attack of the clones
        5. 11.4.5. It's a wrap
        6. 11.4.6. Alternating styles
        7. 11.4.7. Resetting the page
        8. 11.4.8. More fun with selectors and filters
    4. 12. Using the jQuery User Interface Toolkit
      1. 12.1. Looking Over the ThemeRoller
      2. 12.2. Visiting the Theme Park
      3. 12.3. Wanna Drag? Dragging and Dropping Elements
      4. 12.4. Downloading the Library
      5. 12.5. Resizing on a Theme
        1. 12.5.1. Examining the HTML and standard CSS
        2. 12.5.2. Importing files
        3. 12.5.3. Making a resizable element
        4. 12.5.4. Adding themes to your elements
        5. 12.5.5. Adding an icon
      6. 12.6. Dragging, Dropping, and Calling Back
        1. 12.6.1. Building the basic page
        2. 12.6.2. Initializing the page
        3. 12.6.3. Handling the drop
        4. 12.6.4. Dropping out can be fun
        5. 12.6.5. Cloning the elements
    5. 13. Improving Usability with jQuery
      1. 13.1. Multi-Element Designs
        1. 13.1.1. Using the Accordion widget
        2. 13.1.2. Building a tabbed interface
        3. 13.1.3. Using tabs with AJAX
      2. 13.2. Improving Usability
        1. 13.2.1. The dating game
        2. 13.2.2. Picking numbers with the slider
        3. 13.2.3. Selectable elements
        4. 13.2.4. Building a sortable list
        5. 13.2.5. Creating a custom dialog box
    6. 14. Working with AJAX Data
      1. 14.1. Getting an Overview of Server-Side Programming
        1. 14.1.1. Introducing PHP
        2. 14.1.2. Writing a form for PHP processing
        3. 14.1.3. Responding to the request
      2. 14.2. Sending Requests AJAX-Style
        1. 14.2.1. Sending the data
        2. 14.2.2. Responding to the results
      3. 14.3. Building a More Interactive Form
        1. 14.3.1. Creating an AJAX form
        2. 14.3.2. Writing the JavaScript code
        3. 14.3.3. Processing the result
        4. 14.3.4. Simplifying PHP for AJAX
      4. 14.4. Working with XML Data
        1. 14.4.1. Review of XML
        2. 14.4.2. Manipulating XML with jQuery
        3. 14.4.3. Creating the HTML
        4. 14.4.4. Retrieving the data
        5. 14.4.5. Processing the results
        6. 14.4.6. Printing out the pet name
      5. 14.5. Working with JSON Data
        1. 14.5.1. Understanding JSON
        2. 14.5.2. Reading JSON data with jQuery
        3. 14.5.3. Managing the framework
        4. 14.5.4. Retrieving the JSON data
        5. 14.5.5. Processing the results
  9. IV. The Part of Tens
    1. 15. Ten Amazing jQuery Plugins
      1. 15.1. Using the Plugins
      2. 15.2. ipwEditor
        1. 15.2.1. Adding a basic editor with editable
        2. 15.2.2. Incorporating more advanced editing with FCKedit
      3. 15.3. jQuery Cookies
      4. 15.4. flot
      5. 15.5. Tag Cloud
      6. 15.6. Tablesorter
      7. 15.7. Jquery-translate
      8. 15.8. Droppy
      9. 15.9. galleria
      10. 15.10. Jmp3
    2. 16. Ten Great Resources
      1. 16.1. jQuery PHP library
      2. 16.2. JSAN — JavaScript Archive Network
      3. 16.3. W3Schools tutorials and examples
      4. 16.4. Google AJAX APIs
      5. 16.5. Aflax
      6. 16.6. MochiKit
      7. 16.7. Dojo
      8. 16.8. Ext JS
      9. 16.9. YUI
      10. 16.10. DZone
  10. BC1. XHTML Foundations
    1. BC1.1. HTML and XHTML
      1. BC1.1.1. Deciding between HTML and XHTML
      2. BC1.1.2. Setting up a basic HTML page
      3. BC1.1.3. Creating an XHTML page
    2. BC1.2. Fleshing Out Your Page
      1. BC1.2.1. Adding images
      2. BC1.2.2. Including links
      3. BC1.2.3. Building lists and tables
      4. BC1.2.4. Making tables
    3. BC1.3. Creating a Form
      1. BC1.3.1. Form structure tags
      2. BC1.3.2. Building text input
      3. BC1.3.3. Creating password fields
      4. BC1.3.4. Building a multi-line text box
      5. BC1.3.5. Forming drop-down lists
      6. BC1.3.6. Making check boxes
      7. BC1.3.7. Adding radio buttons
      8. BC1.3.8. Adding action buttons
    4. BC1.4. Validating Your Pages
  11. BC2. Formatting with CSS
    1. BC2.1. Introduction to CSS
      1. BC2.1.1. Overview of CSS
      2. BC2.1.2. Working with colors
      3. BC2.1.3. Using ids and classes
      4. BC2.1.4. Managing levels of CSS
    2. BC2.2. Managing the Appearance of Your Page
      1. BC2.2.1. Understanding hex colors
      2. BC2.2.2. Modifying text
      3. BC2.2.3. Joining the Border Patrol
      4. BC2.2.4. Adding background images
    3. BC2.3. Using Float Positioning
      1. BC2.3.1. Understanding the display types
      2. BC2.3.2. Having a block party
      3. BC2.3.3. Floating to a two-column look
      4. BC2.3.4. Cleaning up the form
      5. BC2.3.5. Using absolute positioning