Dojo1.6.1 Dojoを使ってみる - 弱小PHPerの憂鬱

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/19 10:34 |

無敵のJavaScriptツール、Dojoツールキット。
http://dojotoolkit.org/
解説記事なんかはいくつか見つかるのですが、そもそもDojoって何なんだという疑問には何故か誰も答えてくれません。
http://journal.mycom.co.jp/special/2007/dojo1/index.html
http://codezine.jp/article/detail/3476
要するにjQueryとかYUILibraryの仲間ってことでいいのか？

まずダウンロード。
http://dojotoolkit.org/download/
uncompressedは中にコメントが書いてある閲覧用、compressedはコメントなどを削除した公開用、Dojo Toolkitは便利なサンプルが山ほど入った開発用のようです。
とりあえずDojo Toolkitをダウンロード、適当に解凍します。
dojo/dojo.jsがDojoの中心となるJavaScriptで、それ以外はサンプルライブラリです。

サンプルといっても用意されているのはサンプルのJavaScriptで、HTMLは無いので作らないといけません。
今回作ってみるのはマイコミジャーナルのこのサンプル。
http://journal.mycom.co.jp/special/2007/dojo1/001.html
クリックすると入力した内容を表示するというよくあるボタンです。
名前を入力:

ソース

	<html>
	<head>
		<script src="./dojo.js"></script>
		<script type="text/javascript">
			dojo.addOnLoad(function(){
				dojo.connect(dojo.byId("button"), "onclick", function() {
					alert("こんにちは、" + dojo.byId("name").value + "さん!");
				});
			});
		</script>
	</head>
	<body>
	  名前を入力:<input type="text" id="name">
	  <input type="button" id="button" value="クリック!">
	</body>
	</html>

マイコミジャーナルでは解説のためあえて長く書いてありますが、まとめるとこんなものです。

ちなみに同じものをjQueryで作成するとこう。

	<html>
	<head>
		<script src="./jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#button").click(function () {
					alert("こんにちは、" + $("#name").val() + "さん!");
				});
			});
		</script>
	</head>
	<body>
	  名前を入力:<input type="text" id="name">
	  <input type="button" id="button" value="クリック!">
	</body>
	</html>

あれ？全く一緒？

ハンドラの設定方法が多少違っていて、jQueryではセレクタで選択したオブジェクトにハンドラを連結するのに対し、Dojoではdojo.connectでオブジェクトとハンドラを結びつけるという形になっています。
それ以外はとりあえずほぼ同じです。

今回はほぼ同じですが、Dojoはalert()みたいな汎用メソッドまで捕捉できるみたいです。
http://journal.mycom.co.jp/special/2007/dojo1/005.html
jQueryではbindで特定のイベントを捕捉できますが、汎用メソッドではやり方がわかりませんでした。
http://semooh.jp/jquery/api/events/

2011/05/23 21:29 | Comments(0) | TrackBack() | JavaScript