LotusNotesな日々IBM社のLotusNotesに関係する何かを日々語ってるようなきがしないでもないブログです。 

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://mesosune.blog123.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | HOME | ↑ ページ先頭へ |

【JavaScript】Dojo Toolkit の基礎

   ↑  2013/02/02 (土)  カテゴリー: JavaScript/CSS
JavaScriptの基礎は十分にご理解いただいていますでしょうか。
無名関数をご理解いただけていれば十分理解できると思います。

※Xpagesのdojoのバージョンをお確かめのうえコーディングをおすすめください。
今回は基礎の書き方であることと、
バージョンはある程度下位互換があるため問題はないかとは思いますが^^;
(ver1.7で書いています)

では、はじめましょうか。

まず、require()というdojoの特徴的な書き方を説明します。

>>呼び出し方
require([モジュール],無名関数);

第一引数:
使用するモジュールを配列で指定します。モジュールの指定は大抵"dojo/xxx"の形式です。
引数を使用しない場合はモジュール名の最後に!をつけます。
複数指定する場合は、["dojo/xxx","dojo/xxx"]といった形になります。

第二引数:
無名関数を指定します。
モジュールを引数に代入して使用します。
配列順に変数名が適用されます。
記載方法は以下のとおりになります。
function(モジュール引数){処理})

※第一引数で指定されたモジュールを全て読み込んだ後、
第二引数の関数を呼び出すという形になります。
参考:http://dojotoolkit.org/reference-guide/1.7/dojo/require.html

ただし、
htmlで生成されるdom要素へアクセスしている場合、
そのdom要素が生成される前に関数が呼ばれてしまってはdom要素へのアクセスに失敗しますので、domReadyが必要となります。

関数の引数には、ロードしたモジュールが、第一引数の配列と同じ順序で渡されます。
domReadyは特殊なモジュールであり、引数で受け取って使うような機能はもたないので、
第一引数では配列の最後におき、第二引数の関数では、引数自体省略するのが通例です。
参考: http://dojotoolkit.org/reference-guide/1.7/dojo/domReady.html

次に、よく使用するオブジェクトの取得方法とメソッドの指定方法を説明します。

>>オブジェクトの取得方法
dojo/dom
dom.byId(id) とすると、id属性がidであるdom要素を取得します。
document.getElementById(id) と同じです。
参考:http://dojotoolkit.org/reference-guide/1.7/dojo/byId.html

require(["dojo/dom"],function(dom){
console.log(dom.byId('FieldID'));
});


>>イベントの拾い方(メソッド)
dojo/on
on(node,event,func) として呼ぶと、nodeのeventイベント発生時に、func が呼ばれるようになります。
他にもメソッドはありますが余り使う機会はないかもしれません。
参考:http://dojotoolkit.org/reference-guide/1.7/dojo/Evented.html

require(["dojo/on"], function(on){
on(target, "event", function(e){
// イベントを記載します
});
});


↓今回の話をまとめると以下のとおりになります。

require(["dojo/on", "dojo/dom", "dojo/domReady!"], function(on, dom) {
//elementsIDというidがついた要素を押すとメッセージが表示されます
on(dom.byId("elementsID"), "click", function() {
alert("ボタンを押したよ!");
});
});
スポンサーサイト

(記事編集) http://mesosune.blog123.fc2.com/blog-entry-399.html

2013/02/02 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ |

Comment

コメントを投稿する 記事: 【JavaScript】Dojo Toolkit の基礎

お気軽にコメントをぞうぞ。
非公開 (管理人のみ閲覧可能なコメント) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。