DMX Zone - DHTML AJAX (2006).pdf - Ajax - darekisap

Bring your website to

live with

AJAX and DHTML

reproduced or transmitted in any form or by

any means, electronic or mechanical, including

photocopying, recording or by any information

storage and retrieval system, without prior written

permission in writing from the publisher, except in

the case of brief quotations embodied in critical

articles or review.

The authors and publisher have made every effort in

the preparation of this book to ensure the accuracy of

the information. However, the information contained

in this book is sold without warranty, either express

or implied. Neither the authors, DMXzone, nor its

dealers or distributors will be held liable for any

damages caused or alleged to be caused either

directly or indirectly by this book.

by Tom Dell’Aringa

Published by DMXzone.com

Dynamic Zones International

Hengelosestraat 705

7521 PA Enschede

The Netherlands

Trademark Acknowledgements

DMXzone has endeavoured to provide trademark

information about all the companies and products

mentioned in this book by the appropriate use of

capitals. However, DMXzone cannot guarantee the

accuracy of this information.

Flash, Dreamweaver, Director, Ultradev, ColdFusion

and Fireworks are trademarks of Macromedia.

Photoshop is a trademark of Adobe.

132

Introduction 3

About Tom Dell’Aringa 3

Bring your website to live with AJAX and DHTML

Getting started with DHTML 7

DHTML: Introduction to scripting the DOM 7

DHTML: Dynamic Client Side Table Sorting 16

DHTML: Dynamic Class Switching 26

Introduction to Regular Expressions 34

Dynamic “Hide and Show” Content using the

DOM 42

Real-world DHTML 52

Popup Windows: Doing Them Right

A Simple DHTML Flyout Menu

Formatting User Form Data 73

More controlling form fields 83

“Alertless” Client Side Error Messages 95

The new and improved Date Picker! 103

Spicing up Data Tables with Highlighting Rows

116

An Abstract “Add Row” Class for Dynamic Table

Rows (like Yahoo!) 125

Take control with AJAX 134

Introduction to AJAX

REAL-WORLD

DHTML

TAKE CONTROL

WITH AJAX

• DHTML: Introduction To

Scripting The Dom

• DHTML: Dynamic Client

Side Table Sorting

• DHTML: Dynamic Class

Switching

• Introduction To Regular

Expressions

• Dynamic “Hide and Show”

• Popup Windows: Doing Them Right

• A Simple DHTML Flyout Menu

• Formatting User Form Data

• More Controlling Fields

• ”Alertless” Client Side Error Messages

• The New And Improved Date Picker

• Spicing Up Data Tables With

Highlighting Rows

• An Abstract “Add Row” Class For

Dynamic Table Rows (Like YAHOO!)

• Introduction To AJAX

• The AJAX Filmstrip

• AJAX: Ready States, PHP

and Arrays

• Google Maps And AJAX:

Web 2.0 On Your Web

The Ajax Filmstrip 142

Ajax: Ready States, PHP and Arrays 153

Google Maps and AJAX: Web 2.0 on Your Web Site

164

About DMXzone 171

Content Using The DOM

Table of Contents

Getting started with

DHTML

134

Introduction

About Tom Dell’Aringa

This e-book will teach you how to use DHTML

and AJAX to create amazing new applications

and interactive features for your website. Tom

Dell'Aringa shows you how to create Popup

Windows, Fly out menus, Filmstrips, advanced

form features and much more!

Tom is our programming guru; he wants to teach

you how to correctly use DHTML and AJAX by

teaching the basics first, then covering some

simple, commonly used scripting next. After

that he will move on to building real world

applications while making sure that the code is

efficient and that the user experience is good.

Ajax enables you to write interactive

applications while reducing the amount of data

interchanged between the web browser and

web server. This results in shorter processing

times so you can give your user the ultimate

web experience.DHTML allows you to create

amazing effects and allows you to enhance the

interactivity of your webpage without using

any Plug-ins. DHTML files are also smaller then

HTML files thus speeding up your website even

further.

During the early 1990's, Tom ( http://www.

pixelmech.com/ ) spent his days as a graphic

designer for a small publishing house. His boss

threw a World Wide Web book at him one day,

“encouraging” him to research it. Tom fell in

love and quickly made the transition from print

to web technologies, teaching himself along the

way. During the wild ride of the dot.com era,

Tom worked for a start up, web integrator Scient

and a failed small design firm that bounced

his paychecks. Forever fascinated by Peanuts

comic strips, animation and history, he recently

completed his first mini 3d film . He holds a B.A.

in Fine Art from Columbia College, Chicago.

What this book does, and who it’s for.

This book is for anyone with an interest in

developing their DHTML and AJAX skills. The

writer uses very clear examples that will enable

you to master the programming languages. It’s

also a useful reference for developers.

Bring your website to live with AJAX

and DHTML

Pleasebearinmindthataswebsitesarebynature

populated with ever changing content, and are

also often transient and quickly redesigned,

many screenshots may not exactly match those

seen if the link to the site is followed.

Tom shows you how to use DHTML by starting

with the basics first. After that he will move

on with some real world applications. In the

final part of this e-book tom shows you how

to take control with AJAX to create amazing

applications and features on your website.

Getting started with DHTML

The user doesn’t always need to be aware of

the change either. For example, I wrote about

a script I wrote that took a search results table

and shaded the rows with alternating colors.

This produced the dual benefit of both looking

nicer and making the table easier to read. This

particular script ran using the onload event,

and of course happens so fast the user is never

aware the table rows were unstyled.

This chapter explains the meaning and the

power of DHTML and the DOM. Furthermore it

demonstrates some of the features in step by

step tutorials.

DHTML: Introduction To Scripting The

DOM

Tom starts off by showing the meaning of the

DOM and what you can do with it. Simply put,

the DOM allows you to dynamically change the

page all on the client side. We’re not talking

simple text color changes here, either. Want

to add a whole table to your page? Go ahead

and create one. Want to re-style every DIV on

the page? Go ahead and do it. It will all happen

at the click of a button, and it will all happen

without sending the page back to the server.

One seamless and smooth action that puts the

punch in dHTML.

Introduction To Regular Expressions

It’s time to get into regular expressions!

Regular expressions can be very difficult

to build, use and understand. Like anything

else regular expressions are a tool (in this

case, a very powerful one) that can be used

to your advantage. Even if you never become

adept at building the expressions themselves,

you should at least be able to look at one,

understand what is basically going on and

make use of it in your scripts.

om shows you a powerful

feature of the DOM; how to manipulate the data

the client (user) has already received without

making a round trip to the server.

Dynamic “Hide and Show” Content Using

The DOM

Tom demonstrates the flexibility that the

flexibility that the

DOM and CSS have brought to developers.

Websites no longer have to be static, page by

page linear trudges through information. And

we no longer have to rely solely on the server

to dynamically change page content.

One way we can use this behavior to our

advantage is to tie more functionality to a

page than is initially visible.

DHTML: Dynamic Class Switching

Being able to change the look and feel of a

page not only allows you to enhance the look

of a page, but can produce benefits in usability

as well.

DHTML: Dynamic Client Side Table Sorting

In this chapter Tom shows you a powerful

DMX Zone - DHTML AJAX (2006).pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: