Scriptin’ With JavaScript and Ajax · A Designer’s Guide by Wyke-Smith, Charles -- Read -- Imperial Library of Trantor

Index

Dedication

Acknowledgments About the Author Contributors Introduction

About This Book About JavaScript

JavaScript’s W3C and Microsoft Implementation Models Accessibility

Getting Ready to Use This Book Feedback Is Welcome Software-as-a-Service

1. JavaScript Comes of Age

Accessibility and Progressive Enhancement Three Steps to Progressive Enhancement

1. Make It Functional

HTML—Creating the DOM Form Markup Indenting Your Code Child Nodes Processing the Data

2. Make It Look Good 3. Enhance the Experience with JavaScript and Ajax

A Powerful Coding Tool DOM Scripting Capable Ajax Capable

Summary

2. JavaScript Basics

Running the Code Examples

Hello, JavaScript

Scripts, Statements, and Comments

Scripts Statements

On Formatting JavaScript

Comments

Data and Ways to Store It

Variables

Naming Variables Declaring a Variable

Strings Numbers Booleans Arrays

Create an Array Indexed Arrays Reading an Element from an Array Adding an Element to an Array Sorting an Array Associative Arrays

Code that Acts on Data

Operators

Math Comparison Operators The =, ==, and === Operators The ! (NOT) Operator The AND and OR Operators Using the OR Operator to Supply Default Values The + Operator—Addition and Concatenation The “Setness” Test The Switch Statement

Loops and Iterating Over Data

Counters and Exit Conditions The While Loop The do while Loop The for Loop

Functions

Functions Don’t Require Arguments Passing Anonymous Functions as Variables Calling a Function from a Link

Summary

3. Objects and the DOM

Objects

Predefined JavaScript Objects

The Window Object The Document Object

User-created Objects

Object Literals

Objects and Instances

Objects and Scope

DOMinating the Document

Getting Around the DOM Get, Set...DOM!

Getting the Text from within an Element Getting an Element’s Attribute Getting the Text of a Child Element Setting the Text of an Element Creating a New Element and Adding Text and an Attribute to it

Modifying Element Styles

Adding a Style to an Element Adding a Class to an Element

Zebra Tables Refactoring the Code

Summary

4. Events

Techniques to Handle Events

JavaScript Pseudo Protocol Inline Event Handler Handler as Object Property Event Listeners

W3C Event Model The Microsoft Event Model An Addevent Helper Function

The First Event: load

Adding Event Listeners on Page Load

The Event Object

The Event Object’s Type Property The Event Object in Microsoft Browsers

The Secret Life of Events

Capturing and Bubbling Event Delegation

Striped Table with Rollovers

Using an Element as a Debugging Tool Mouse Events Event Delegation Determining the Target Element Traversing the DOM Adding the Highlight

The Up and Down Life of Keys

Text Fields with Character Limits Setting Up the Message Display Monitoring the Character Count The Finished Code

Summary

5. Ajax

Understanding Ajax

Ajax by the Letters Communication with the Server

The GET Method The POST Method The Traditional Model The Ajax Model

The XMLHttpRequest Object How to Use the XMLHttpRequest (XHR) Object

1. Create a New Instance of the XHR Object 2. Define a Function to Monitor the Request 3. Send the Request Via the XHR Instance 4. Check that the Request was Successful When the Server Responds 5. Pass the Data to the Assigned Callback Function So it Can Be Used

Using the Ajax Function Using an Object Literal to Maintain State Through an Ajax Call Ajax and Data Formats

Creating a Simple Catalog

Using PHP Templates

The PHP Code Including the HTML Fragment in the Page Generating the Links Making the Tabs Highlight

An Ajax-ready Page Adding Ajax Functionality to the Catalog

Adding Event Listeners Ajax and Canceling Clicks Getting the Requested File Highlighting the Tabs with JavaScript

An Accessible Catalog Working with JSON

Evaluating JSON

The Guitar Catalog Using JSON Using XML

The responseXML Property Overview of XML Parsing

Using Sajax—the Simple Ajax Framework

How to Use the Sajax Framework

Summary

6. Frameworks

About Frameworks

Advantages of Frameworks Considerations When Using a Framework

You Quickly Get Locked In It’s Another Language to Learn

Namespacing

Pseudo-global Variables Ajax Implementation in Four Frameworks jQuery Namespace

Chaining jQuery and Ajax

Prototype Yahoo! User Interface (YUI) Adobe Spry

RIA Components

Accordion with jQuery and Spry

Accordion with jQuery Accordion with Spry

Highlight with Prototype and Spry

Highlight with Prototype Highlight with Spry

Drag-and-drop with Prototype and jQuery

Drag-and-Drop with Prototype Drag-and-Drop with jQuery

Tabs with jQuery and Spry

Tabs with jQuery Tabs with Spry

Summary

7. Two Simple Web Applications

About the Projects

An Image Carousel A Location Finder with AutoComplete

Building the Author Carousel

Styling the Carousel Managing the Scrollbar The PHP Backend

Reading the JSON Data Writing Out the HTML Responding to a Click

Layering on the JavaScript

Rounded Corners

Implementing the Carousel Interactions

Implementing the Scrolling Functionality Implementing the Mouse Wheel Functionality Implementing the Navigation Arrow Buttons

Implementing the Overlay

Associating the Overlay with a Mouse Click

Parsing the JSON with JavaScript

AutoComplete and Maps with the Yahoo! API

The Location Data The Project Template—index.php

The Locations Data—getlocations.php

The Search Form Script—searchform.php

The AutoComplete Form Markup Using the YUI Loader Initializing the AutoComplete Control Customizing the AutoComplete Control’s Default Behavior Displaying the Location Information—showlocation.php

Implementing Search Without JavaScript—searchresults.php

Summary

A. Environment

Window Object

Window Object Methods Window Object Collections Window Object Properties

History Object

History Object Properties

History Object Methods

Location Object

Location Object Properties Location Object Methods

Navigator Object

Navigator Object Collections Navigator Object Properties Navigator Object Methods

JavaScript Function Reference

Top-Level Functions Top-Level Properties

B. Data

Array Object

Array Object Properties Array Object Methods

Boolean Object

Boolean Object Properties Boolean Object Methods

Date Object

Date Object Properties Date Object Methods

Math Object

Math Object Properties Math Object Methods

RegExp Object

RegExp Object Properties RegExp Object Methods String Object Methods that Supports Regular Expressions RegExp Modifiers RegExp Modifiers–Position Matching RegExp Modifier–Character Classes RegExp Modifier–Literals RegExp Modifiers–Repetition RegExp Modifiers–Grouping RegExp Modifiers–Back Reference

String Object

String Object Properties String Object Methods

Number Object

Number Object Properties Number Object Methods

C. Document

Document Object

Document Object Collections Document Object Properties

DOM Methods–Getters and Setters

Getters for Document Elements Getters for Attributes and Text Nodes Getters for Adjacent Elements Setters–Creating, Inserting and Deleting Elements

D. Interaction

HTML ASCII Reference

ASCII Printable Characters

JavaScript Event Reference

Event Handlers

← Prev
Back
Next →

← Prev
Back
Next →