Scriptin’ with JavaScript and Ajax: A Designer’s Guide

Scriptin’ with JavaScript and Ajax: A Designer’s Guide

by Charles Wyke-Smith
Released August 2009
Publisher(s): New Riders
ISBN: None

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

JavaScript is the brains of your Web page—it enables you to modify a document’s structure, styling, and content in response to user actions without requesting new pages from the server. Scriptin' with JavaScript and Ajax teaches you how to master this powerful and elegant language so you can develop intuitive user interactions that take the user experience to new levels of sophistication and responsiveness.

Today’s application-like Web experiences (such as Salesforce.com and Google Maps) and Web 2.0 sites (such as Flickr.com and Twitter) are powered by JavaScript and Ajax. Using the techniques shown in this book, you will be able to start creating similar experiences in the sites you design.

Scriptin' with JavaScript and Ajax will teach you how to:

  • Start developing with JavaScript fast!

  • Write lightweight but powerful object-oriented code

  • Modify the Document Object Model

  • “Progressively enhance” your pages with JavaScript to provide the highest levels of accessibility to all users

  • Learn sophisticated techniques for making your pages respond to user actions

  • Use the downloadable Scriptin’ library of helper functions to speed development and ensure cross-browser compatibility

  • Use Ajax scripting techniques to update specific areas of the page with data from the server

  • Create powerful interface interactions, such as sliding panels and tree menus

  • Evaluate frameworks such as jQuery and Prototype to find the best one for your needs

  • Build an online application that looks and responds like a regular desktop application

  • Easily adapt the Scriptin’ code examples for use in your own projects—download them at www.scriptinwithajax.com

    •

    Table of contents

    1. Copyright
      1. Dedication
    2. Acknowledgments
    3. About the Author
    4. Contributors
    5. Introduction
      1. About This Book
      2. About JavaScript
        1. JavaScript’s W3C and Microsoft Implementation Models
        2. Accessibility
      3. Getting Ready to Use This Book
      4. Feedback Is Welcome
      5. Software-as-a-Service
    6. 1. JavaScript Comes of Age
      1. Accessibility and Progressive Enhancement
      2. Three Steps to Progressive Enhancement
        1. 1. Make It Functional
          1. HTML—Creating the DOM
          2. Form Markup
          3. Indenting Your Code
          4. Child Nodes
          5. Processing the Data
        2. 2. Make It Look Good
        3. 3. Enhance the Experience with JavaScript and Ajax
          1. A Powerful Coding Tool
          2. DOM Scripting Capable
          3. Ajax Capable
      3. Summary
    7. 2. JavaScript Basics
      1. Running the Code Examples
        1. Hello, JavaScript
      2. Scripts, Statements, and Comments
        1. Scripts
        2. Statements
          1. On Formatting JavaScript
        3. Comments
      3. Data and Ways to Store It
        1. Variables
          1. Naming Variables
          2. Declaring a Variable
        2. Strings
        3. Numbers
        4. Booleans
        5. Arrays
          1. Create an Array
          2. Indexed Arrays
          3. Reading an Element from an Array
          4. Adding an Element to an Array
          5. Sorting an Array
          6. Associative Arrays
      4. Code that Acts on Data
        1. Operators
          1. Math
          2. Comparison Operators
          3. The =, ==, and === Operators
          4. The ! (NOT) Operator
          5. The AND and OR Operators
          6. Using the OR Operator to Supply Default Values
          7. The + Operator—Addition and Concatenation
          8. The “Setness” Test
          9. The Switch Statement
        2. Loops and Iterating Over Data
          1. Counters and Exit Conditions
          2. The While Loop
          3. The do while Loop
          4. The for Loop
        3. Functions
          1. Functions Don’t Require Arguments
          2. Passing Anonymous Functions as Variables
          3. Calling a Function from a Link
      5. Summary
    8. 3. Objects and the DOM
      1. Objects
        1. Predefined JavaScript Objects
          1. The Window Object
          2. The Document Object
        2. User-created Objects
          1. Object Literals
        3. Objects and Instances
          1. Objects and Scope
      2. DOMinating the Document
        1. Getting Around the DOM
        2. Get, Set...DOM!
          1. Getting the Text from within an Element
          2. Getting an Element’s Attribute
          3. Getting the Text of a Child Element
          4. Setting the Text of an Element
          5. Creating a New Element and Adding Text and an Attribute to it
        3. Modifying Element Styles
          1. Adding a Style to an Element
          2. Adding a Class to an Element
        4. Zebra Tables
        5. Refactoring the Code
      3. Summary
    9. 4. Events
      1. Techniques to Handle Events
        1. JavaScript Pseudo Protocol
        2. Inline Event Handler
        3. Handler as Object Property
        4. Event Listeners
          1. W3C Event Model
          2. The Microsoft Event Model
          3. An Addevent Helper Function
      2. The First Event: load
        1. Adding Event Listeners on Page Load
      3. The Event Object
        1. The Event Object’s Type Property
        2. The Event Object in Microsoft Browsers
      4. The Secret Life of Events
        1. Capturing and Bubbling
        2. Event Delegation
      5. Striped Table with Rollovers
        1. Using an Element as a Debugging Tool
        2. Mouse Events
        3. Event Delegation
        4. Determining the Target Element
        5. Traversing the DOM
        6. Adding the Highlight
      6. The Up and Down Life of Keys
        1. Text Fields with Character Limits
        2. Setting Up the Message Display
        3. Monitoring the Character Count
        4. The Finished Code
      7. Summary
    10. 5. Ajax
      1. Understanding Ajax
        1. Ajax by the Letters
        2. Communication with the Server
          1. The GET Method
          2. The POST Method
          3. The Traditional Model
          4. The Ajax Model
        3. The XMLHttpRequest Object
        4. How to Use the XMLHttpRequest (XHR) Object
          1. 1. Create a New Instance of the XHR Object
          2. 2. Define a Function to Monitor the Request
          3. 3. Send the Request Via the XHR Instance
          4. 4. Check that the Request was Successful When the Server Responds
          5. 5. Pass the Data to the Assigned Callback Function So it Can Be Used
        5. Using the Ajax Function
        6. Using an Object Literal to Maintain State Through an Ajax Call
        7. Ajax and Data Formats
      2. Creating a Simple Catalog
        1. Using PHP Templates
          1. The PHP Code
          2. Including the HTML Fragment in the Page
          3. Generating the Links
          4. Making the Tabs Highlight
        2. An Ajax-ready Page
        3. Adding Ajax Functionality to the Catalog
          1. Adding Event Listeners
          2. Ajax and Canceling Clicks
          3. Getting the Requested File
          4. Highlighting the Tabs with JavaScript
        4. An Accessible Catalog
        5. Working with JSON
          1. Evaluating JSON
        6. The Guitar Catalog Using JSON
        7. Using XML
          1. The responseXML Property
          2. Overview of XML Parsing
      3. Using Sajax—the Simple Ajax Framework
        1. How to Use the Sajax Framework
      4. Summary
    11. 6. Frameworks
      1. About Frameworks
        1. Advantages of Frameworks
        2. Considerations When Using a Framework
          1. You Quickly Get Locked In
          2. It’s Another Language to Learn
      2. Namespacing
        1. Pseudo-global Variables
        2. Ajax Implementation in Four Frameworks
        3. jQuery Namespace
          1. Chaining
          2. jQuery and Ajax
        4. Prototype
        5. Yahoo! User Interface (YUI)
        6. Adobe Spry
      3. RIA Components
        1. Accordion with jQuery and Spry
          1. Accordion with jQuery
          2. Accordion with Spry
        2. Highlight with Prototype and Spry
          1. Highlight with Prototype
          2. Highlight with Spry
        3. Drag-and-drop with Prototype and jQuery
          1. Drag-and-Drop with Prototype
          2. Drag-and-Drop with jQuery
        4. Tabs with jQuery and Spry
          1. Tabs with jQuery
          2. Tabs with Spry
      4. Summary
    12. 7. Two Simple Web Applications
      1. About the Projects
        1. An Image Carousel
        2. A Location Finder with AutoComplete
      2. Building the Author Carousel
        1. Styling the Carousel
        2. Managing the Scrollbar
        3. The PHP Backend
          1. Reading the JSON Data
          2. Writing Out the HTML
          3. Responding to a Click
        4. Layering on the JavaScript
          1. Rounded Corners
        5. Implementing the Carousel Interactions
          1. Implementing the Scrolling Functionality
          2. Implementing the Mouse Wheel Functionality
          3. Implementing the Navigation Arrow Buttons
        6. Implementing the Overlay
          1. Associating the Overlay with a Mouse Click
        7. Parsing the JSON with JavaScript
      3. AutoComplete and Maps with the Yahoo! API
        1. The Location Data
        2. The Project Template—index.php
          1. The Locations Data—getlocations.php
        3. The Search Form Script—searchform.php
          1. The AutoComplete Form Markup
          2. Using the YUI Loader
          3. Initializing the AutoComplete Control
          4. Customizing the AutoComplete Control’s Default Behavior
          5. Displaying the Location Information—showlocation.php
        4. Implementing Search Without JavaScript—searchresults.php
      4. Summary
    13. A. Environment
      1. Window Object
        1. Window Object Methods
        2. Window Object Collections
        3. Window Object Properties
      2. History Object
        1. History Object Properties
          1. History Object Methods
      3. Location Object
        1. Location Object Properties
        2. Location Object Methods
      4. Navigator Object
        1. Navigator Object Collections
        2. Navigator Object Properties
        3. Navigator Object Methods
      5. JavaScript Function Reference
        1. Top-Level Functions
        2. Top-Level Properties
    14. B. Data
      1. Array Object
        1. Array Object Properties
        2. Array Object Methods
      2. Boolean Object
        1. Boolean Object Properties
        2. Boolean Object Methods
      3. Date Object
        1. Date Object Properties
        2. Date Object Methods
      4. Math Object
        1. Math Object Properties
        2. Math Object Methods
      5. RegExp Object
        1. RegExp Object Properties
        2. RegExp Object Methods
        3. String Object Methods that Supports Regular Expressions
        4. RegExp Modifiers
        5. RegExp Modifiers–Position Matching
        6. RegExp Modifier–Character Classes
        7. RegExp Modifier–Literals
        8. RegExp Modifiers–Repetition
        9. RegExp Modifiers–Grouping
        10. RegExp Modifiers–Back Reference
      6. String Object
        1. String Object Properties
        2. String Object Methods
      7. Number Object
        1. Number Object Properties
        2. Number Object Methods
    15. C. Document
      1. Document Object
        1. Document Object Collections
        2. Document Object Properties
      2. DOM Methods–Getters and Setters
        1. Getters for Document Elements
        2. Getters for Attributes and Text Nodes
        3. Getters for Adjacent Elements
        4. Setters–Creating, Inserting and Deleting Elements
    16. D. Interaction
      1. HTML ASCII Reference
        1. ASCII Printable Characters
      2. JavaScript Event Reference
        1. Event Handlers

    Product information

    • Title: Scriptin’ with JavaScript and Ajax: A Designer’s Guide
    • Author(s): Charles Wyke-Smith
    • Release date: August 2009
    • Publisher(s): New Riders
    • ISBN: None