下記の様なフォルダ構成でサンプルを作成していきます。
├sample │└
sample.htm └
dojo は、Ajaxを簡単に利用するためのオープンソースJavaScriptライブラリです。下記のページから入手することができます。Academic Free License v2.1 と BSD License のどちらかのライセンスで利用することができます。Internet Explorer、Firefox、Safari、Konquerror、Opera（コアAPIのみ）などのブラウザの仕様の差異をあまり考慮することなくプログラミングすることが可能になります。
下記の様なフォルダ構成でサンプルを作成していきます。
├
<html>
<head>
<title>Dojo: Test</title>
<script src="../dojo/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
</head>
<body>
<script>
function test() {
var o = dojo.byId("abc");
dojo.style(o, "color", "red");
}
</script>
<button onClick="test()">Click</button>
<div id="abc">Hello!!</div>
</body>
</html>
<html>
<head>
<title>Dojo: Hello World!</title>
<script src="../dojo/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dijit.form.Button");
</script>
<style>
@import "../dojo/dijit/themes/tundra/tundra.css";
@import "../dojo/dojo/resources/dojo.css";
</style>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" id="helloButton">
Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
</button>
</body>
</html>
baseUrl debugAtAllCosts debugContainerId extraLocale isDebug locale modulePaths
■要素・属性・クラス・スタイルシート dojo.body() dojo.byId(id, doc) dojo.attr(node, name, value) dojo.style(node, style, value) dojo.addClass(node, class) dojo.hasClass(node, class) dojo.removeAttr(node, name) dojo.removeClass(node, classStr) dojo.place(node, refNode, position) dojo.clone(node) dojo.isDescendant(node, ancestor) ■イベント dojo.connect(obj, event, context, method, dontFix) dojo.disconnect(handle) dojo.addOnLoad(function) dojo.addOnUnload(function) ■モジュール dojo.require(moduleName, omitModuleCheck) ■配列 dojo.indexOf(array, value, fromIndex, findLast) dojo.lastIndexOf(array, value, fromIndex) dojo.forEach(arr, callback, thisObject) dojo.every(arr, callback, thisObject) dojo.some(arr, callback, thisObject) dojo.map(arr, callback, thisObject) dojo.filter(arr, callback, thisObject) ■カラー dojo.blendColors(start, end, weight, obj) dojo.colorFromArray(a, obj) dojo.colorFromHex(color, obj) dojo.colorFromRgb(color, obj) dojo.colorFromString(str, obj) dojo.colors.makeGrey(g, a) ■エフェクト・アニメーション dojo.fadeIn(args) dojo.fadeOut(args) dojo.anim(node, properties, duration, easing, onEnd, delay) dojo.fx.Toggler(args) dojo.fx.chain(animations) dojo.fx.combine(animations) dojo.fx.slideTo(args) dojo.fx.wipeIn(args) dojo.fx.wipeOut(args) ■判定 dojo.isAlien(it) dojo.isArray(it) dojo.isArrayLike(it) dojo.isFunction(it) dojo.isObject(it) dojo.isString(it) dojo.isAIR dojo.isBrowser dojo.isFF dojo.isGears dojo.isIE dojo.isKhtml dojo.isMozilla dojo.isOpera dojo.isQuirks dojo.isRhino dojo.isSafari dojo.isSpidermonkey ■データ変換 dojo.formToJson(formNode, prettyPrint) dojo.formToObject(formNode) dojo.formToQuery(formNode) dojo.fromJson(json) dojo.toJson(it, prettyPrint, _indentStr) ■通貨記号 dojo.currency.format(value, options) dojo.currency.parse(expression, options) dojo.currency.regexp(options) ■通信 dojo.xhrGet(args) dojo.xhrPost(args) dojo.xhrDelete(args) dojo.xhrPut(args) dojo.xhr(method, args, hasBody) dojo.rawXhrPost(args) dojo.rawXhrPut(args) ■クッキー dojo.cookie(name, value, props) ■ヒストリ dojo.back.init() dojo.back.addToHistory(args) dojo.back.setInitialState(args) dojo.back.getHash dojo.back.goBack dojo.back.goForward dojo.back.setHash ■ビヘイビア dojo.behavior.add(behaviorObj) dojo.behavior.apply() ■国際化 dojo.cldr.monetary.getData(code) dojo.cldr.supplemental.getFirstDayOfWeek(locale) dojo.cldr.supplemental.getWeekend(locale) dojo.cldr.nls dojo.i18n.getLocalization(packageName, bundleName, locale) dojo.i18n.normalizeLocale(locale) ■データ dojo.data.api.Identity() dojo.data.api.Notification() dojo.data.api.Read() dojo.data.api.Request() dojo.data.api.Write() dojo.data.util.filter.patternToRegExp(pattern, ignoreCase) dojo.data.util.simpleFetch.fetch(request) dojo.data.util.sorter.basicComparator(a, b) dojo.data.util.sorter.createSortFunction(sortSpec, store) dojo.data.ItemFileReadStore(keywordParameters) dojo.data.ItemFileWriteStore(keywordParameters) ■日付 dojo.date.add(date, interval, amount) dojo.date.compare(date1, date2, portion) dojo.date.difference(date1, date2, interval) dojo.date.getDaysInMonth(dateObject) dojo.date.getTimezoneName(dateObject) dojo.date.isLeapYear(dateObject) dojo.date.locale.addCustomFormats(packageName, bundleName) dojo.date.locale.format(dateObject, options) dojo.date.locale.getNames(item, type, use, locale) dojo.date.locale.isWeekend(dateObject, locale) dojo.date.locale.parse(value, options) dojo.date.locale.regexp(options) dojo.date.stamp.fromISOString(formattedString, defaultTime) ojo.date.stamp.toISOString(dateObject, options) ■ドラッグアンドドロップ dojo.dnd.Avatar(manager) dojo.dnd.Container(node, params) dojo.dnd.Manager() dojo.dnd.Moveable(node, params) dojo.dnd.Mover(node, e, host) dojo.dnd.Selector(node, params) dojo.dnd.Source(node, params) dojo.dnd.Target(node, params) dojo.dnd.TimedMoveable(node, params) dojo.dnd.autoScroll(e) dojo.dnd.autoScrollNodes(e) dojo.dnd.getCopyKeyState(e) dojo.dnd.getUniqueId() dojo.dnd.getViewport() dojo.dnd.isFormElement(e) dojo.dnd.manager() dojo.dnd.autoscroll dojo.dnd.boxConstrainedMover dojo.dnd.common dojo.dnd.constrainedMover dojo.dnd.H_AUTOSCROLL_VALUE dojo.dnd.H_TRIGGER_AUTOSCROLL dojo.dnd.parentConstrainedMover dojo.dnd.V_AUTOSCROLL_VALUE dojo.dnd.V_TRIGGER_AUTOSCROLL dojo.dnd.move.boxConstrainedMoveable(node, params) dojo.dnd.move.constrainedMoveable(node, params) dojo.dnd.move.constrainedMover(fun, within) dojo.dnd.move.parentConstrainedMoveable(node, params) dojo.dnd.move.boxConstrainedMover(box, within) dojo.dnd.move.parentConstrainedMover(area, within) ■I/O dojo.io.iframe.create(fname, onloadstr, uri) dojo.io.iframe.setSrc(iframe, src, replace) dojo.io.iframe.doc dojo.io.script.attach(id, url, frameDocument) dojo.io.script.get(args) dojo.io.script.remove(id) ■数字 dojo.number.format(value, options) dojo.number.parse(expression, options) dojo.number.regexp(options) dojo.number.round(value, places, multiple) ■パーサー dojo.parser.instantiate(nodes) dojo.parser.parse(rootNode) ■正規表現 dojo.regexp.buildGroupRE(arr, re, nonCapture) dojo.regexp.escapeString(str, except) dojo.regexp.group(expression, nonCapture) ■RPC dojo.rpc.JsonpService(args, requiredArgs) dojo.rpc.JsonService(args) dojo.rpc.RpcService(args) ■文字列 dojo.trim(str) dojo.string.trim(str) dojo.string.pad(str, n, ch, end) dojo.string.substitute(template, map, transform, thisObject) ■未整理 dojo.AdapterRegistry(returnWrappers) dojo.animateProperty(args) dojo.Color(color) dojo.Deferred(canceller) dojo.DeferredList(list, fireOnOneCallback, fireOnOneErrback, consumeErrors, canceller) dojo.loaded() dojo.NodeList() dojo.connectPublisher(topic, obj, event) dojo.contentBox(node, box) dojo.coords(node, includeScroll) dojo.declare(className, superclass, props) dojo.delegate(obj, props) dojo.deprecated(behaviour, extra, removal) dojo.eval(scriptFragment) dojo.exists(name, obj) dojo.exit(exitcode) dojo.experimental(moduleName, extra) dojo.extend(constructor, props...) dojo.fixEvent(evt, sender) dojo.getComputedStyle(node) dojo.getObject(name, create, context) dojo.hasAttr(node, name) dojo.hitch(scope, method...) dojo.marginBox(node, box) dojo.mixin(obj, props...) dojo.moduleUrl(module, url) dojo.objectToQuery(map) dojo.partial(method...) dojo.platformRequire(modMap) dojo.provide(resourceName) dojo.publish(topic, args) dojo.query(query, root) dojo.queryToObject(str) dojo.registerModulePath(module, prefix) dojo.requireIf(condition, resourceName) dojo.requireLocalization(moduleName, bundleName, locale, availableFlatLocales) dojo.setContext(globalObject, globalDocument) dojo.setObject(name, value, context) dojo.setSelectable(node, selectable) dojo.stopEvent(evt) dojo.subscribe(topic, context, method) dojo.toggleClass(node, classStr, condition) dojo.unloaded() dojo.unsubscribe(handle) dojo.withDoc(documentObject, callback, thisObject, cbArguments) dojo.withGlobal(globalObject, callback, thisObject, cbArguments) dojo.xdRequireLocalization(moduleName, bundleName, locale, availableFlatLocales) dojo._loadUri() dojo.baseUrl dojo.boxModel dojo.config dojo.doc dojo.dojo dojo.global dojo.jaxer dojo.keys dojo.locale dojo.nls dojo.NodeList-fx dojo.nonDebugProvide dojo.OpenAjax dojo.requireAfterIf dojo.resources dojo.tests dojo.toJsonIndentStr dojo.version console.debug()
id で指定したIDを持つ要素を取得します。
<div id="abc">AAA</div>
<script>
var obj = dojo.byId("abc");
alert(obj.innerHTML);
</script>
</div>
ボディ要素を取得します。
var obj = dojo.body();
要素の属性を取得・設定します。node には dojo.byId() などで取得したノードや、要素の id 属性で指定した ID を指定します。引数が 2個の場合は属性の値を読み出します。
alert(dojo.attr("img2", "src"));
dojo.attr("img2", "src", "sample.gif");
要素のスタイルシートを取得・設定します。node には dojo.byId() などで取得したノードや、要素の id 属性で指定した ID を指定します。引数が 2個の場合はスタイルシートの値を読み出します。
var obj = dojo.byId("abc");
alert(dojo.style(obj, "color"));
dojo.style("abc", "color", "red");
要素にクラスを追加して割り当てます。
<style type="text/css">
.red { color: red; }
.bold { font-weight: bold; }
</style>
<script>
function test() {
dojo.addClass("a", "red");
dojo.addClass("a", "bold");
}
</script>
<div id="a">AAA</div>
<button onClick="test()">Click</button>
要素が指定したクラスを持っているか調べます。
if (dojo.hasClass("msg2", "red")) { ... }
必要なモジュールを読み込みます。例えば、dojo.string.xxxx() を利用するにはあらかじめ、下記のように dojo.string モジュールを読み込んでおく必要があります。
dojo.require("dojo.string");
ブラウザが IE（Internet Explorer）かどうか調べます。IE でなければ 0 を、IE であれば、6、7 などの IE のメジャーバージョン番号を返します。
if (dojo.isIE >= 7) { ... }
ページが読み込まれたときや別のページに移る際に実行するハンドラを指定します。
dojo.addOnLoad(function() { alert("Hello!"); });
dojo.addOnUnload(function() { alert("bye!"); });
要素 obj に対して event で指定したイベントが発生した際に、method で指定したハンドラを呼び出します。obj に null を指定すると window オブジェクトがターゲットとなります。context には、ハンドラ実行中の this オブジェクトを指定します。
<body onload="init()">
<script>
function init() {
var btn = dojo.byId("btn2");
dojo.connect(btn, "onclick", function (ev) {
alert(ev.target.innerHTML);
});
}
</script>
<button id="btn2">Click</button>
</body>
dojo.connect() で指定したハンドラを解除します。
var handle = dojo.connect(obj, "onclick", function (ev) { });
dojo.disconnect(handle);
要素をフェードアウト・フェードインします。
<div id="msg1">Hello World!!</div>
<button onClick="fade_out()">FadeOut</button>
<button onClick="fade_in()">FadeIn</button>
<script>
function fade_out() {
dojo.fadeOut({node : "msg1", duration : 1000}).play();
}
function fade_in() {
dojo.fadeIn({node : "msg1", duration : 1000}).play();
}
</script>
文字列の前後の空白文字を取り除きます。
alert("[" + dojo.trim(" ABC ") + "]");
dojo.require("dojo.string");
alert("[" + dojo.string.trim(" ABC ") + "]");
文字列 str が n 文字になるように、文字列の前に文字 ch をパディングします。end に true を指定すると文字列の後ろにパディングします。
dojo.require("dojo.string");
alert("[" + dojo.string.pad("1234", 4, "0") + "]");
url で指定したコンテンツを非同期に取得します。load には取得が完了した際に呼び出されるハンドラを指定します。
<script>
function hello() {
dojo.xhrGet({
url: "test.txt",
load: function(response, ioArgs) {
dojo.byId("div1").innerHTML = response;
}
});
}
</script>
<button onClick="hello()">Click Me</button>
<div id="div1"></div>
obj で指定したオブジェクトをマウスでドラッグ＆ドロップ可能にします。
<script>
dojo.require("dojo.dnd.Moveable");
dojo.addOnLoad(function () {
new dojo.dnd.Moveable(dojo.byId("img1"));
});
</script>
<img id="img1" src="sample.gif">