Hayes / Higgins Getting StartED with Dojo

1. ed
ISBN: 978-1-4302-2522-5
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 250 Seiten

Dojo has been described as the JavaScript toolkit for programmers that's easy enough for designers to pick up. This book will introduce the foundational concepts of using Dojo to increase efficiency when developing modern websites that utilize Document Object Model (DOM) manipulation, Ajax, animations, effects, and widgets. Dojo basics Animations and effects Widgets with Dijit

Kyle Hayes is a programmer and Web UI designer/developer for The Walt Disney Company, Disney Interactive Media Group.

Autoren/Hrsg.

Hayes, Kyle

Higgins, Peter

Hayes, Dennis

Inhaltsverzeichnis

1;Contents at a Glance;5
2;Table of contents;6
3;About the Author;12
4;About the Technical Reviewer;13
5;Acknowledgments;14
6;Introduction;15
7;Chapter 1 JavaScript Fundamentals;16
7.1;How does JavaScript fit in with HTML?;17
7.1.1;The DOM;18
7.1.2;The script tag;19
7.1.3;In the head;19
7.1.4;In the body;21
7.1.5;Inline in an element;22
7.1.6;Altering elements;22
7.2;How do you create variables and strings?;24
7.2.1;Declaring variables;25
7.2.1.1;Reserved JavaScript keywords;26
7.2.1.2;Assignment operator;28
7.2.1.3;Strings;28
7.2.1.4;Numbers;28
7.2.1.5;Booleans;29
7.2.2;String concatenation;29
7.3;How do you perform arithmetic?;30
7.4;How do you read a method signature?;32
7.5;How do you write a function?;33
7.5.1;Declaring functions;34
7.5.2;Passing data to functions;36
7.6;How do you control the flow?;37
7.7;What is an array, and why is it so important?;39
7.8;How do you create an array?;40
7.8.1;Adding elements to an array;40
7.9;How do you loop through arrayel ements?;41
7.9.1;For loops;41
7.10;Summary;42
8;Chapter 2 Digging Deeper;44
8.1;Manipulating the DOM;44
8.1.1; How do you get a reference to a node on the DOM?;45
8.1.1.1;By ID;46
8.1.1.2;By children nodes;47
8.1.1.3;By tag name;48
8.1.1.4;How do you change the style of a DOM element?;50
8.1.1.5;Using the className property;54
8.1.2;How do you change the HTML content of an element?;55
8.2;Events;59
8.2.1;What is a JavaScript event?;59
8.2.2;How do you attach an event listener?;60
8.3;Summary;62
9;Chapter 3 Enhancing with Dojo;63
9.1;What makes a good JavaScript toolkit?;63
9.1.1;What is a JavaScript toolkit?;63
9.1.2;What are some popular JavaScript toolkits?;64
9.1.3;What comprises a JavaScript toolkit?;64
9.1.3.1;CSS selector engine;65
9.1.3.2;DOM manipulation;66
9.1.3.3;Cross-browser compatibility;66
9.1.3.4;Ajax;67
9.1.3.5;Animations and effects;68
9.1.3.6;Attaching and listening to events;68
9.1.3.7;Which one?;69
9.2;What is Dojo?;69
9.2.1;Developing to a pattern;70
9.2.2;Keeping it simple;71
9.2.2.1;Base;72
9.2.2.2;Core;72
9.2.2.3;Dijit;72
9.2.2.4;DojoX;73
9.2.3;Why should I use Dojo over other libraries?;73
9.3;Installing and configuring Dojo;73
9.3.1;How do you install Dojo?;73
9.3.2;How do you configure Dojo for your website?;75
9.3.3;How do I write my first bit of Dojo?;76
9.4;Getting help;80
9.4.1;How do you debug Dojo and JavaScript?;80
9.4.1.1;Firebug;81
9.4.1.2;Starting Firebug;81
9.4.1.3;Inspecting HTML code;82
9.4.1.4;Altering the page in real time;84
9.4.1.5;Using the Firebug Console tab;86
9.4.1.6;JavaScript debugging with Firebug;90
9.4.1.7;Setting breakpoints;90
9.4.1.8;Stepping through code;94
9.4.1.9;Firebug Lite;98
9.4.2;If I get stuck, where can you find help?;98
9.5;Summary;99
10;Chapter 4 Dojo DOM Basics;100
10.1;How do you get an element by its ID?;100
10.1.1;Getting reference to a node;103
10.1.2;Checking whether a node exists;103
10.2;How do you get an element using a CSS selector?;103
10.2.1;CSS3 Selectors;104
10.2.2;NodeList;107
10.2.3;dojo.query();107
10.2.4;Chaining;112
10.3;How do you loop through a NodeList or an array?;112
10.3.1;dojo.forEach;113
10.3.1.1;Callback functions;114
10.4;How do you filter an array of elements?;115
10.4.1;The importance of a data model;115
10.4.2;dojo.filter();117
10.5;How do you create an element?;120
10.5.1;Positions;121
10.5.2;dojo.create();123
10.6;How do you move elements around in the DOM?;124
10.7;How do you set the attributes of an element?;125
10.8;How do you get and set the style of an element?;127
10.8.1;Computed style;127
10.8.2;Getting the style of an element;127
10.8.3;Setting the style of an element;128
10.8.4;Styling many elements;129
10.9;Summary;129
11;Chapter 5 Managing User Interaction with Dojo;131
11.1;How do you listen for an event with Dojo?;131
11.1.1;Connecting to DOM events;132
11.1.2;Listening for keyboard events;139
11.1.3;Listening to page events;142
11.1.4;Please stop listening to me!;144
11.2;What is the Dojo event object?;145
11.3;How do you listen for an event from multiple elements?;146
11.3.1;Taking it one step further;147
11.4;Topical Events;148
11.4.1;dojo.subscribe();149
11.4.2;dojo.publish();150
11.4.3;dojo.unsubscribe();151
11.5;Summary;152
12;Chapter 6 Make It Rich;153
12.1;What is a Dojo animation?;154
12.1.1;Using the dojo.Animation class;154
12.2;Built-in animations;156
12.2.1;Fading in and out;156
12.2.2;Sliding;159
12.2.3;Wipes;161
12.2.4;Adding Ease;163
12.2.4.1;dojo.fx.easing;164
12.3;How do you animate certain properties of an element?;167
12.4;How can I play more than one animation at a time?;171
12.4.1;dojo.fx.combine();172
12.5;How do I execute other functions during phases of an animation?;173
12.5.1;dojo.Animation callbacks;173
12.5.1.1;Registering a callback during creation;176
12.5.1.2;Registering a callback using dojo.connect;177
12.6;How do you create simple drag-and dropfunctionality?;177
12.6.1;What can you do with drag-and-drop functionality?;177
12.6.2;Setup;178
12.6.3;The simplest form of drag and drop;179
12.6.4;List reordering;180
12.7;Summary;182
13;Chapter 7 Dynamic Data;183
13.1;What is Ajax anyway?;183
13.1.1;Pros of Ajax;185
13.1.2;Cons of Ajax;185
13.2;How do you load external data?;186
13.2.1;Using dojo.xhrGet() to load external data;188
13.2.1.1;Load callback;191
13.2.1.2;Error callback;194
13.3;How do you submit a form using Ajax?;196
13.3.1;Using dojo.xhrPost() to submit a form;198
13.3.2;Making your code reusable;201
13.4;How do you stay search engine friendly?;201
13.4.1;What is progressive enhancement?;201
13.4.1.1;Content;202
13.4.1.2;Presentation;202
13.4.1.3;Client-side scripting;202
13.4.2;What about search engines?;203
13.5;Summary;203
14;Chapter 8 Widgets;204
14.1;How does Dijit promote code reusability?;204
14.1.1;Accessibility;205
14.1.2;International support;206
14.2;How do widgets get implemented?;206
14.2.1;Using HTML markup;207
14.2.1.1;The Dojo parser;208
14.2.2;Using JavaScript;210
14.2.3;Pros and cons;211
14.3;How do you create powerful forms?;211
14.3.1;Standard Dijit form controls;218
14.3.2;dijit.form.Form;219
14.3.2.1;Scoped script tags;220
14.3.3;Form validation;221
14.3.3.1;Single element validation;222
14.3.3.2;Full form validation;224
14.3.3.3;Validating with regex;224
14.4;What are widget themes?;227
14.4.1;Where do I find the theme assets?;227
14.4.2;Using themes;228
14.4.2.1;Import the theme CSS file;228
14.4.2.2;Apply the class name;228
14.4.3;Creating your own theme;229
14.5;How do you lay out widgets and other elements?;229
14.5.1;Using dijit.layout.TabContainer;230
14.5.2;Using dijit.layout.BorderContainer;234
14.5.2.1;Refactoring your layout;240
14.6;Summary;242
15;Chapter 9 Where to Go from Here;244
15.1;How do I optimize my JavaScript code?;244
15.1.1;JavaScript minification;245
15.1.2;Minifying a JavaScript file with ShrinkSafe;247
15.1.2.1;Online;247
15.1.2.2;Locally;247
15.1.3;Dojo build system;248
15.1.3.1;Profiles;248
15.1.3.2;Cross-domain support;249
15.2;Creating your own classes;250
15.2.1;Prototype-based programming;250
15.2.2;dojo.delcare;252
15.2.3;Extending Dijit widgets;253
15.3;DojoX;261
15.4;Adobe AIR;262
15.4.1;Getting started;263
15.4.2;Creating a desktop project;264
15.4.3;Example AIR + Dojo applications;267
15.4.3.1;Dojo Toolbox;267
15.4.3.2;Queued;268
15.5;Server-side frameworks;271
15.5.1;Zend PHP framework;271
15.5.2;Django Python framework;271
15.6;Third-Party Extensions;272
15.6.1;Plugd;272
15.6.2;Dair;273
15.6.3;Dojango;273
15.7;Summary;274
16;Appendix A Setting Up a Local Web Server;275
16.1;MAMP on Mac OS X;275
16.1.1;Installation;276
16.1.2;Starting the server;278
16.1.3;Serving pages and files;280
16.2;XAMPP on Windows;282
16.2.1;Installation;282
16.2.2;Starting the server;285
16.2.3;Serving pages and files;288
17;Appendix B Dojo Base Quick Reference;291
17.1;Document Life Cycle;291
17.2;DOM Manipulation;291
17.3;DOM Attributes;292
17.4;Language Helpers;292
17.5;Arrays;292
17.6;Event System;293
17.7;Nodelist Events;293
17.8;Effects;293
17.9;Package System;294
17.10;Objects OO (Object-oriented);294
17.11;Ajax;294
17.12;JSON;294
17.13;Styles;295
17.14;Colors;295
17.15;Sniffing;295
17.16;Advanced Scope;295
17.17;djConfig;296
17.18;Miscellaneous;296
17.19;Key Constants;296
18;Appendix C Plug-ins;298
18.1;What is a plug-in?;299
18.2;What is a NodeList?;300
18.2.1;NodeList as an array;301
18.2.2;Iterating with a NodeList;302
18.2.3;What else does NodeList provide?;303
18.2.3.1;Single-node equivalent functions;304
18.2.3.2;DOM-style functions;304
18.3;A brief history of this;306
18.3.1;Using dojo.hitch();307
18.3.2;Preserving this;307
18.3.3;The secret of chaining;309
18.4;What is a prototype?;311
18.5;Starting simple;313
18.6;What is a closure?;316
18.6.1;How does this apply to plug-ins?;318
18.7;Functions as plug-ins?;320
18.7.1;More adapter functions;323
19;Index;326