dojoオブジェクトの基本（前編）

沖林正紀
2007-12-20 07:00:00
今回はdojoオブジェクトの基本として、dojoとWebブラウザのバージョンを知る方法などを紹介する。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

タグのIDから要素を参照

　JavaScriptのdocument.getElementById()はdojo.byId()で実現できる。リスト3のようなタグがあるとき、dojo.byId( 'ex1' ).innerHTMLでテキスト部分を参照できる。

リスト3

<!-- HTMLタグの例 -->
<div id="ex1">HTMLのIDで要素を参照</div>
// "HTMLのIDで要素を参照"と表示できる
document.write( dojo.byId( 'ex1' ).innerHTML );

別のスクリプトを読み込み

　dojoは豊富な機能を持っているが、それらは複数のスクリプトに分かれている。そのため、プログラムの内容によっては、別のスクリプトを読み込まなくてはならない。その時はdojo.require()を用いる。

　リスト4はボタンをクリックする回数を表示するものだが、この中でボタン(dijit.form.Button)のコンポーネントと、それを解釈するためのパーサー(dojo.parser)を読み込むためにdojo.require()を用いている。

　なお、リスト4はdojo独自の属性などを追加しているために、XHTMLには準拠していない。

図5 図5 リスト4の実行結果

リスト4 ボタンがクリックされた回数を表示（XHTML標準に準拠していない）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>dojoオブジェクトの基本(dojo)</title>
    <style type="text/css">/* <![CDATA[ */
      @import "js/dijit/themes/tundra/tundra.css";
      @import "js/dojo/resources/dojo.css";
    /* ]]> */</style>
    <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad : true"></script>
    <script type="text/javascript">// <![CDATA[
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      var count = 0;
      function clickButton()  {
        dojo.byId( 'ex1' ).innerHTML = ( ++count ) + '回クリックされた';
      }
    // ]]></script>
  </head>
  <body class="tundra">
    <h1>dojoオブジェクトの基本</h1>
    <button dojoType="dijit.form.Button"
            onclick="clickButton">ボタンを押して!!</button>
    <div id="ex1"></div>
  </body>
</html>

　次回も引き続きこのオブジェクトについて取り上げたい。

  • 新着記事
  • 特集
  • ブログ