Beginning JavaScript with DOM Scripting and Ajax - From Novice to Professional

Contents

Foreword

About the Author

About the Technical Reviewer

Acknowledgments

Introduction

Chapter 1 Getting Started with JavaScript

The Why of JavaScript

What Is JavaScript?

Problems and Merits of JavaScript

Why Use JavaScript If It Cannot Be Relied On?

JavaScript in a Web Page and Essential Syntax

JavaScript Syntax

Code Execution

An Aside About Functions

Objects

Simple JavaScript Example

Summary

Chapter 2 Data and Decisions

Data, Data Types, and Data Operators

The String Data Type

Operators

JavaScript Variables

Converting Different Types of Data

The Composite Data Types: Array and Object

Objects JavaScript Supplies You with: String, Date, and Math

Arrays

The Array Object’s Methods and Properties

Making Decisions in JavaScript

The Logical and Comparison Operators

Conditional Statements

Testing Multiple Values: the switch Statement

Repeating Things: Loops

Summary

Chapter 3 From DHTML to DOM Scripting

JavaScript As “the Behavior Layer”

Object Detection vs. Browser Dependence

Progressive Enhancement

JavaScript and Accessibility

Good Coding Practices

Naming Conventions

Code Layout

Commenting

Functions

Short Code via Ternary Operator

Sorting and Reuse of Functions

Variable and Function Scope

Keeping Scripts Safe with the Object Literal

Summary

Chapter 4 HTML and JavaScript

The Anatomy of an HTML Document

Providing Feedback in Web Pages via JavaScript: The Old School Ways

Using window Methods: prompt(), alert(), and confirm()

Accessing the Document via the DOM

Of Children, Parents, Siblings, and Values

From the Parents to the Children

From the Children to the Parents

Among Siblings

Changing Attributes of Elements

Creating, Removing, and Replacing Elements

Avoiding NOSCRIPT

Shortening Your Scripts via InnerHTML

DOM Summary: Your Cheat Sheet

DOMhelp: Our Own Helper Library

Summary

Chapter 5 Presentation and Behavior (CSS and Event Handling)

Changing the Presentation Layer via JavaScript

Helping the CSS Designer

Changing the Document’s Behavior via Event Handling

Events in the W3C-Compliant World

Fixing Events for the Non-W3C-Compliant World

Never Stop Optimizing

The Ugly Page Load Problem and Its Ugly Solutions

Reading and Filtering Keyboard Entries

The Dangers of Event Handling

Summary

Chapter 6 Common Uses of JavaScript: Images and Windows

Images and JavaScript

Basics of Image Scripting

Preloading Images

Rollover Effects

Slide Shows

Summary of Images and JavaScript

Windows and JavaScript

Window Properties

Window Methods

Summary: Windows and JavaScript

Summary

Chapter 7 JavaScript and User Interaction: Navigation and Forms

Navigation and JavaScript

The Fear of the Page Reload

Basics of Navigation and JavaScript

Browser Navigation

In-Page Navigation

Site Navigation

Pagination

Summary of Navigation with JavaScript

Forms and JavaScript

Basics of Forms with JavaScript

Form Elements

Interactive Forms: Hiding and Showing Dependent Elements

Custom Form Elements

Summary of Forms and JavaScript

Summary

Chapter 8 Back-End Interaction with Ajax

Household Cleaning Liquid, Football Club, or Flash Gordon’s Spacecraft: What Is Ajax?

Et Tu, Cache?

Putting the X Back into Ajax

Replacing XML with JSON

Using Server-Side Scripts to Reach Third-Party Content

XHR on Slow Connections

A Larger Ajax Example: Connected Select Boxes

Optional Dynamic Ajax Menus

Summary

Chapter 9 Data Validation Techniques

Pros and Cons of Client-Side JavaScript Validation

A Quick Reminder About Protecting Content with JavaScript

The One-Size-Fits-All Validation Myth

Basic JavaScript Validation with String and Numeric Methods

String Validation Methods

Numeric Validation Methods

Regular Expressions

Syntax and Attributes

Wildcard Searches, Constraining Scope, and Alternatives

Restricting the Number of Characters with Quantifiers

Word Boundaries, Whitespace, and Other Shortcuts

Methods Using Regular Expressions

The Power of Parenthesis Grouping

Regular Expression Resources

Summary of Validation Methods

Form Validation Techniques

Designating Mandatory Fields

The Hidden Field Method

The Indicator Element Method

The CSS Classes Method

The Custom Attribute Method

Failures of These Methods

Sharing Validation Rules

Giving Users Validation Feedback

Showing a List of Erroneous Fields

Replacing the Main Form with a Clickable Error Message

Instant Validation Feedback

Other Dynamic Validation Methods

Summary

Chapter 10 Modern JavaScript Case Study: A Dynamic Gallery

Basics of Thumbnail Galleries

What Is a Thumbnail Gallery and What Should It Do?

Static Thumbnail Galleries

Faking Dynamic Galleries with JavaScript

Displaying Captions

Dynamic Thumbnail Galleries

Creating an Image Badge from a Folder

Summary

Chapter 11 Using Third-Party JavaScript

What the Web Offers You

Code Snippets, RSS Feeds, APIs, and Libraries

RSS Feeds and REST APIs

Examples of REST APIs

Using a Library: Short, Shorter, jQuery

Dangers of jQuery and Other Libraries Using Their Own Syntax

Using an API: Adding a Map to Your Site with Google Maps

Full Service: The Yahoo Developer Network and User Interface Library

Bouncy Headlines Using YUI

Replacing Pop-Up Windows Using the YUI Connection Manager and Container Components

Yahoo User Interface Library Summary

Summary

APPENDIX Debugging JavaScript

Common JavaScript Mistakes

Misspellings and Case-Sensitivity Issues

Trying to Access Undefined Variables

Incorrect Number of Closing Braces and Parentheses

Concatenation Gone Wrong

Tracing Errors with alert() and“Console” Elements

Error Handling with try and catch()

Sequential Uncommenting

Error Reporting in Browsers

Microsoft Internet Explorer 6

Safari

Opera 8.5

Firefox 1.5.0.3

JSLint and JSUNIT

Summary

Index