Getting StartED with Dojo

Contents at a Glance

Table of contents

About the Author

About the Technical Reviewer

Acknowledgments

Introduction

Chapter 1 JavaScript Fundamentals

How does JavaScript fit in with HTML?

The DOM

The script tag

In the head

In the body

Inline in an element

Altering elements

How do you create variables and strings?

Declaring variables

Reserved JavaScript keywords

Assignment operator

Strings

Numbers

Booleans

String concatenation

How do you perform arithmetic?

How do you read a method signature?

How do you write a function?

Declaring functions

Passing data to functions

How do you control the flow?

What is an array, and why is it so important?

How do you create an array?

Adding elements to an array

How do you loop through arrayel ements?

For loops

Summary

Chapter 2 Digging Deeper

Manipulating the DOM

How do you get a reference to a node on the DOM?

By ID

By children nodes

By tag name

How do you change the style of a DOM element?

Using the className property

How do you change the HTML content of an element?

Events

What is a JavaScript event?

How do you attach an event listener?

Summary

Chapter 3 Enhancing with Dojo

What makes a good JavaScript toolkit?

What is a JavaScript toolkit?

What are some popular JavaScript toolkits?

What comprises a JavaScript toolkit?

CSS selector engine

DOM manipulation

Cross-browser compatibility

Ajax

Animations and effects

Attaching and listening to events

Which one?

What is Dojo?

Developing to a pattern

Keeping it simple

Base

Core

Dijit

DojoX

Why should I use Dojo over other libraries?

Installing and configuring Dojo

How do you install Dojo?

How do you configure Dojo for your website?

How do I write my first bit of Dojo?

Getting help

How do you debug Dojo and JavaScript?

Firebug

Starting Firebug

Inspecting HTML code

Altering the page in real time

Using the Firebug Console tab

JavaScript debugging with Firebug

Setting breakpoints

Stepping through code

Firebug Lite

If I get stuck, where can you find help?

Summary

Chapter 4 Dojo DOM Basics

How do you get an element by its ID?

Getting reference to a node

Checking whether a node exists

How do you get an element using a CSS selector?

CSS3 Selectors

NodeList

dojo.query()

Chaining

How do you loop through a NodeList or an array?

dojo.forEach

Callback functions

How do you filter an array of elements?

The importance of a data model

dojo.filter()

How do you create an element?

Positions

dojo.create()

How do you move elements around in the DOM?

How do you set the attributes of an element?

How do you get and set the style of an element?

Computed style

Getting the style of an element

Setting the style of an element

Styling many elements

Summary

Chapter 5 Managing User Interaction with Dojo

How do you listen for an event with Dojo?

Connecting to DOM events

Listening for keyboard events

Listening to page events

Please stop listening to me!

What is the Dojo event object?

How do you listen for an event from multiple elements?

Taking it one step further

Topical Events

dojo.subscribe()

dojo.publish()

dojo.unsubscribe()

Summary

Chapter 6 Make It Rich

What is a Dojo animation?

Using the dojo.Animation class

Built-in animations

Fading in and out

Sliding

Wipes

Adding Ease

dojo.fx.easing

How do you animate certain properties of an element?

How can I play more than one animation at a time?

dojo.fx.combine()

How do I execute other functions during phases of an animation?

dojo.Animation callbacks

Registering a callback during creation

Registering a callback using dojo.connect

How do you create simple drag-and dropfunctionality?

What can you do with drag-and-drop functionality?

Setup

The simplest form of drag and drop

List reordering

Summary

Chapter 7 Dynamic Data

What is Ajax anyway?

Pros of Ajax

Cons of Ajax

How do you load external data?

Using dojo.xhrGet() to load external data

Load callback

Error callback

How do you submit a form using Ajax?

Using dojo.xhrPost() to submit a form

Making your code reusable

How do you stay search engine friendly?

What is progressive enhancement?

Content

Presentation

Client-side scripting

What about search engines?

Summary

Chapter 8 Widgets

How does Dijit promote code reusability?

Accessibility

International support

How do widgets get implemented?

Using HTML markup

The Dojo parser

Using JavaScript

Pros and cons

How do you create powerful forms?

Standard Dijit form controls

dijit.form.Form

Scoped script tags

Form validation

Single element validation

Full form validation

Validating with regex

What are widget themes?

Where do I find the theme assets?

Using themes

Import the theme CSS file

Apply the class name

Creating your own theme

How do you lay out widgets and other elements?

Using dijit.layout.TabContainer

Using dijit.layout.BorderContainer

Refactoring your layout

Summary

Chapter 9 Where to Go from Here

How do I optimize my JavaScript code?

JavaScript minification

Minifying a JavaScript file with ShrinkSafe

Online

Locally

Dojo build system

Profiles

Cross-domain support

Creating your own classes

Prototype-based programming

dojo.delcare

Extending Dijit widgets

DojoX

Adobe AIR

Getting started

Creating a desktop project

Example AIR + Dojo applications

Dojo Toolbox

Queued

Server-side frameworks

Zend PHP framework

Django Python framework

Third-Party Extensions

Plugd

Dair

Dojango

Summary

Appendix A Setting Up a Local Web Server

MAMP on Mac OS X

Installation

Starting the server

Serving pages and files

XAMPP on Windows

Installation

Starting the server

Serving pages and files

Appendix B Dojo Base Quick Reference

Document Life Cycle

DOM Manipulation

DOM Attributes

Language Helpers

Arrays

Event System

Nodelist Events

Effects

Package System

Objects OO (Object-oriented)

Ajax

JSON

Styles

Colors

Sniffing

Advanced Scope

djConfig

Miscellaneous

Key Constants

Appendix C Plug-ins

What is a plug-in?

What is a NodeList?

NodeList as an array

Iterating with a NodeList

What else does NodeList provide?

Single-node equivalent functions

DOM-style functions

A brief history of this

Using dojo.hitch()

Preserving this

The secret of chaining

What is a prototype?

Starting simple

What is a closure?

How does this apply to plug-ins?

Functions as plug-ins?

More adapter functions

Index