You are previewing Ajax Programming for the Absolute Beginner.
O'Reilly logo
Ajax Programming for the Absolute Beginner

Book Description

Learn Ajax the easy way! If you are new to programming with Ajax and are looking for a solid introduction, this is the book for you. Developed by computer science instructors, books in the "for the absolute beginner" series teach the principles of programming through simple game creation. You will acquire the skills that you need for more practical programming applications and will learn how these skills can be put to use in real-world scenarios. Best of all, by the time you finish the book you will be able to apply the basic principles you've learned to the next programming language you tackle.

Table of Contents

  1. Copyright
    1. Dedication
  2. Acknowledgments
  3. About the Author
  4. Introduction
    1. Why Ajax?
    2. Who Should Read This Book?
    3. What You Need to Begin
      1. Working with Different Web Browsers
      2. What You Need to Know
    4. How This Book Is Organized
    5. Conventions Used in This Book
  5. I. Introducing Ajax
    1. 1. An Ajax Overview
      1. Project Preview: The Joke of the Day Application
      2. Introducing Ajax
        1. Ajax Technologies
        2. Traditional Web Development Versus Ajax Development
      3. Examples of Real World Ajax Applications and Websites
        1. Search Engine Makeovers
          1. A9.com
          2. Ask.com
        2. Suggest Styled Applications
          1. Google Suggest
          2. Amazon Zuggest
          3. Online Ajax Dictionaries
        3. Google Maps
        4. Netflix
        5. Virtual Desktop Applications
        6. Photo Management Using Flickr
        7. Ajax Instant Message Applications
        8. Online Calendars
      4. Back to the Joke of the Day Application
        1. Designing the Application
          1. Step 1: Writing the Application’s HTML
          2. Step 2: Creating the Application’s Text File
          3. Step 3: Uploading and Testing the HTML Version of the Application
          4. Step 4: Turning the HTML Application into an Ajax Application
          5. Step 5: Executing Your New Ajax Application
        2. The Final Result
      5. Summary
  6. II. Learning JavaScript and the DOM
    1. 2. An Introduction to JavaScript
      1. Project Preview: The Number Guessing Game
      2. JavaScript—Ajax’s Programming Language
        1. A Little JavaScript Background Information
        2. Browser Compatibility Issues
      3. Working with JavaScript
        1. Creating a Simple JavaScript
        2. Executing Your JavaScript
      4. Four Ways of Working with JavaScript
        1. Embedding JavaScripts in the HEAD Section
        2. Embedding JavaScripts in the BODY Section
        3. Placing JavaScripts in External Files
        4. Embedding JavaScripts in HTML Tags
        5. Understanding JavaScript Statement Syntax
        6. Dealing with Browsers That Do Not Support JavaScript
        7. Documenting Your Scripts Using Comments
      5. Working with Different Types of Values
        1. Creating Javascript Variables
        2. Assigning Variable Names
        3. Understanding Variable Scope
          1. Working with Global Variables
        4. Working with Local Variables
        5. Doing a Little Math
        6. Assigning and Modifying Variable Values
          1. Comparing Different Values
      6. Applying Conditional Logic
        1. Introducing the if Statement
        2. Multi-line if Statements
        3. Providing for Alternative Conditions
        4. Nesting if Statements
        5. Working with the switch Statement
      7. Working Efficiently with Loops
        1. Working with the for Statement
        2. Working with the while Statement
        3. Working with the do...while Statement
        4. Altering Loop Execution
        5. Skipping Loop Iterations
      8. Back to the Number Guessing Game
        1. Designing the Application
          1. Step 1: Writing the Application’s HTML
          2. Step 2: Beginning the Application’s Script
          3. Step 3: Adding the Application’s Controlling Logic
          4. Step 4: Testing Your New Application
      9. Summary
    2. 3. A Deeper Dive into JavaScript
      1. Project Preview: The Rock, Paper, Scissors Game
      2. Improving JavaScript Organization with Functions
        1. Organizing Code Statements into Functions
        2. Controlling Function Execution
      3. Developing Applications That Respond to Events
        1. Developing Event-Driven Scripts
        2. Working with Different JavaScript Events
          1. Reacting to Window Events
          2. Processing Mouse Events
        3. Processing Forms
      4. Div and Span Tags
        1. Working with the <DIV> </DIV> Tags
        2. Working with the <SPAN> </SPAN> Tags
        3. Programmatically Replacing Text without Screen Refresh
      5. Managing Collections of Data
        1. Accessing Individual Array Elements
        2. Using Loops to Process Arrays
        3. Sorting the Contents of Arrays
      6. Back to the Rock, Paper, Scissors Application
        1. Designing the Application
          1. Step 1: Writing the Application’s HTML
          2. Step 2: Creating a Form
          3. Step 3: Creating a Template for Displaying Output
          4. Step 4: Developing the Game’s Controlling Logic
          5. Step 5: Executing Your New Game
      7. Summary
    3. 4. Understanding the Document Object Model
      1. Project Preview: The Ajax Story of the Day Application
      2. An Introduction to the Document Object Model
      3. The DOM Tree
      4. Walking the DOM Tree
        1. Accessing DOM Elements by ID
        2. Accessing DOM Elements Using DOM Properties
        3. A Mixed Navigation Approach
      5. Dynamically Updating Web Page Content
      6. Back to the Ajax Story of the Day Application
        1. Designing the Application
          1. Step 1: Writing the Application’s HTML
          2. Step 2: Creating the Application’s Form
          3. Step 3: Adding a Paragraph Element for the Display of Text
          4. Step 4: Beginning the Development of the Game’s Script
          5. Step 5: Creating an XMLHttpRequest Object
          6. Step 6: Retrieving Story Text
          7. Step 7: Updating the DOM Tree
          8. Step 8: Modifying Button State
          9. Step 9: Creating the Application’s Text Files
          10. Step 10: Executing Your New Game
      7. Summary
  7. III. Building Ajax Applications
    1. 5. Ajax Basics
      1. Project Preview: The Ajax Typing Challenge
      2. Connecting Your Applications to Web Servers
        1. XMLHttpRequest Methods
        2. XMLHttpRequest Properties
      3. Working with the XMLHttpRequest Object
        1. Instantiating the XMLHttpRequest Object
        2. Opening a New Connection
          1. Executing the open() method
          2. Using Absolute and Relative Paths
        3. Waiting for the Web Server’s Response
        4. Handling the Web Server Response
        5. Wrapping Things Up
        6. Putting All the Pieces Together to Create a Working Ajax Application
      4. Managing Concurrent XMLHttpRequests
      5. Using Ajax to Set Up Mouseovers
      6. Leveraging Ajax Frameworks
        1. Popular Ajax Frameworks
        2. Framework Demo—Using the CBA Framework
      7. Back to the Ajax Typing Challenge Application
        1. Designing the Application
          1. Step 1: Writing the Application’s HTML
          2. Step 2: Creating the Application’s Server-Side Text Files
          3. Step 3: Beginning Work on the Application’s JavaScript
          4. Step 4: Instantiating the XMLHttpRequest Object
          5. Step 5: Retrieving and Displaying Challenge Sentences
          6. Step 6: Grading the Results of the Ajax Typing Challenge
        2. The Final Result
      8. Summary
    2. 6. Digging Deeper into Ajax
      1. Project Preview: The Ajax Google Suggest Application
      2. Using Ajax to Manipulate Graphics
      3. Sending Data to Web Servers
        1. A Quick Example of How to Work with PHP
        2. Sending Data to Web Servers for Processing
          1. Using the Get Method to Send Data to a PHP Script
          2. Using the POST Method to Send Data to a PHP Script
      4. Executing Server-Supplied JavaScript
      5. Back to the Ajax Google Suggest Application
        1. Designing the Application
          1. Step 1: Writing the Application’s HTML
          2. Step 2: Using CSS to Control Search Results
          3. Step 3: Creating the Application’s JavaScript and Instantiating the XMLHttpRequest Object
          4. Step 4: Capturing and Passing Along User Keystrokes
          5. Step 5: Processing the List of Terms Provided by Google Suggest
          6. Step 6: Submitting the Search Term or Phrase Selected by the User
          7. Step 7: Creating the Application’s PHP Script
        2. The Final Result
      6. Summary
  8. IV. Data Management and Presentation
    1. 7. Working with XML
      1. Project Preview: The Who Am I? Application
      2. An Introduction to XML
        1. Rules for Formulating XML Tags
        2. XML Element Syntax
        3. Including the XML Declaration Instruction
        4. Commenting Your XML Files
        5. Working with Elements with No Content
        6. Understanding the Types of Elements in Use
      3. Verifying That Your XML Files Are Well-Formed
      4. Understanding XML Trees
        1. A Depiction of a Small XML File
        2. JavaScript Properties That Work with XML Trees
      5. Navigating XML Files
        1. Eliminating White Space
        2. Processing XML Element Attributes
      6. JSON: JavaScript Object Notation—An Alternative to XML
      7. Back to the Who Am I? Application
        1. Designing the Application
          1. Step 1: Creating the Application’s XML Files
          2. Step 2: Writing the Application’s HTML
          3. Step 3: Getting Started on the Application’s JavaScript
          4. Step 4: Instantiating the XMLHttpRequest Object
          5. Step 5: Creating the getXML() Function
          6. Step 6: Creating the ClearOutWhiteSpace() Function
          7. Step 7: Creating the checkAnswer() Function
        2. The Final Result
      8. Summary
    2. 8. Working with Cascading Style Sheets
      1. Project Preview: The Fortune Telling Game
      2. An Introduction to CSS
        1. CSS Syntax
      3. Using CSS to Specify Style, Color, and Presentation
        1. Controlling Font Presentation
        2. Managing the Display of Text
        3. Controlling Color and Background
        4. Exercising Control over Content Location
      4. Adding CSS to Your HTML Pages
        1. Using Inline Styles
        2. Defining Embedded Style Elements
        3. Working with External Style Sheets
      5. Back to the Fortune Telling Game
        1. Designing the Application
          1. Step 1: Creating the Application’s External Style Sheet
          2. Step 2: Creating the Application’s Server Files
          3. Step 3: Writing the Application’s HTML
          4. Step 4: Starting the Application’s JavaScript
          5. Step 5: Creating the ProcessEvent() Function
          6. Step 6: Creating the getMouseData() Function
          7. Step 7: Creating the populateMenus() Function
          8. Step 8: Creating the RemoveMenus() Function
          9. Step 9: Creating the DisplayMenu() Function
          10. Step 10: Creating the ExecuteCommand() Function
          11. Step 11: Creating the StartPlay() Function
          12. Step 12: Creating the AnswerQuestion() Function
          13. Step 13: Creating the ResetScreen() Function
        2. The Final Result
      6. Summary
    3. 9. Working with Ajax and PHP
      1. Project Preview: Scramble—The Word Guessing Game
      2. Introduction to PHP
      3. The Basics of Working with PHP
        1. Embedding PHP into Your HTML Pages
        2. Writing Standalone PHP Scripts
      4. PHP Coding
        1. Returning Data Back to Your Ajax Application
        2. Commenting Your PHP Code
        3. Storing Data in Variables
        4. Managing Collections of Data Using Arrays
        5. Data Assignments
        6. Performing Mathematic Calculations
        7. Comparing Values
        8. Performing Conditional Logic
          1. The if Statement
          2. The else Statement
          3. The else-if Statement
          4. The switch Statement
          5. The Ternary Operator
        9. Working with Loops
          1. The for Loop
          2. The foreach Loop
          3. The while Loop
          4. The do...while Loop
          5. Continuing Loop Execution
      5. Working with Functions
        1. Creating and Executing Custom Functions
        2. Taking Advantage of Built-in PHP Functions
      6. Processing Application Input
        1. Retrieving Arguments Passed Using the GET Option
        2. Retrieving Arguments Passed Using the Post Option
      7. Storing and Accessing Data
        1. Creating and Accessing Files
        2. Writing to Files
        3. Reading from Files
        4. A Few Words About Working with Databases
      8. Back to Scramble—The Word Guessing Game
        1. Designing the Application
          1. Step 1: Writing the Application’s HTML
          2. Step 2: Beginning the Application’s JavaScript
          3. Step 3: Creating the GetWord() Function
          4. Step 4: Creating the StartGame() Function
          5. Step 5: Creating the scramble.php Script
        2. The Final Result
      9. Summary
    4. 10. Important Ajax Design Issues
      1. Programming Hurdles That All Ajax Developers Face
        1. Recognize That Not All Browsers Support JavaScript
        2. Do Not Let Ajax Alienate Your Users
        3. Ajax Applications Disable the Browser’s Back and Forward Buttons
        4. Don’t Make Unexpected Changes
        5. Ajax Applications Are Not Easily Bookmarked
        6. Ajax Applications Pose Problems for Search Engines
        7. Dynamic Updates Are Not Always Easily Noticed
        8. Data Exchange Behind the Scenes May Make Users Uncomfortable
        9. Ajax Applications Do Not Run on a Single Platform
        10. Don’t Build Slow Ajax Applications
        11. Ajax Applications May Create New Security Concerns
      2. Don’t Overuse Ajax
      3. Follow Good Development Practices
      4. Summary
  9. A. What’s on the Companion Website?
    1. Downloading the Book’s Source Code
  10. B. What Next?
    1. HTML Resources
      1. Wikipedia’s HTML Page
      2. W3C’s HTML 4.01 Specification Page
      3. HTML.net’s Free HTML Tutorial
    2. The HTML Document Object Model
      1. Wikipedia’s Document Object Model Page
      2. W3C’s Document Object Model (DOM) Page
      3. HTML DOM Tutorial
    3. XMLHttpRequest Resources
      1. Wikipedia’s XMLHttpRequest Page
      2. W3C’s XMLHttpRequest Object Page
      3. XMLHttpRequest Tutorial
    4. Resources for Cascading Style Sheets
      1. Wikipedia’s Cascading Style Sheets Page
      2. W3C’s Cascading Style Sheets Page
      3. CSS Tutorial Page
    5. JavaScript Resources
      1. Wikipedia’s JavaScript Page
      2. JavaScript.com
      3. JavaScript Tutorial
    6. XML Resources
      1. Wikipedia’s XML Page
      2. W3C’s Extensible Markup Language (XML) Page
      3. XML Tutorial
    7. Locating Ajax Resources Online
      1. Wikipedia’s Ajax Page
      2. Jesse James Garrett’s Ground-Breaking Article
      3. Keeping an Eye on Ajax Blogs