有限会社 ウィス
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
簡単な3つのステップで完了です。
1.ダウンロード
http://www.dojotoolkit.org/downloadsよりダウンロードします。
2.ファイルの配置
展開したファイルを、公開するサーバー、もしくはテストするドキュメントフォルダに「/js/dojoroot」などのディレクトリで配置します。
基本的に、dojo, dijit, dojox, util すべてのフォルダを配置します。
3.動作の確認
http://yoursite.com/js/dojoroot/dijit/themes/themeTester.html にアクセスして下のような表示ができれば設置完了です。
core. まずは簡単なサンプルを作ってみたいと思います。
headタグでスクリプトをロードします。
<script type="text/javascript" src="/js/dojoroot/dojo/dojo.js"></script>実際、このブログでは、headタグはテンプレートによって書出され、変更することができませんので、ブログの記事内で定義しています。
<input type="button" value="GET" onclick="getFunc()"/> <script> function getFunc() { dojo.xhrGet({ url: '/readme.txt', load: function(response) { dojo.byId("box").innerHTML = response; } }); } </script> <div id="box" style="border:1px solid gray"></div>今回使用したDojoの機能は、非同期でのデータ取得:dojo.xhrGet、IDセレクタのオブジェクト取得:dojo.byId です。
core. RSS2.0のフィード(XML)を非同期で取得して表示します。
<input type="button" value="GET" onclick="getFunc()"/> <script> function getFunc() { dojo.xhrGet({ url: '/rss.xml', handleAs: 'xml', error: function(response, ioArgs){ console.error("HTTP status code:",ioArgs.xhr.status); return response; }, load: function(response) { var html = "<ul>"; var items = dojo.query("item",response); for(i=0; i<items.length; i++) html += "<li>"+ dojo.query("title",items[i])[0].firstChild.nodeValue+"</li>"; dojo.byId("box").innerHTML = html+"</ul>"; } }); } </script> <div id="box" style="border:1px solid gray"></div>error, load のハンドラの最終行(return response;)は入れておいた方が良いようです。dojo.query で xml.getElementsById と同じ事が簡単にできます。
core. Dojoにはデバッグ環境が用意されています。
最も簡単なデバッグ方法は、FireFox とアドオンである FireBug を使う方法です。この方法ですと明示的にデバッグモードを指示しなくてもよく、またユーザー関数のコンソール出力も可能です。
<input type="button" value="ERROR" onclick=" console.error('ERRORです')" /> <input type="button" value="WARN" onclick=" console.warn('WARNです')" /> <input type="button" value="INFO" onclick=" console.info('INFOです')" /><br/> <input type="button" value="DEBUG" onclick=" console.debug('DEBUGです')" /> <input type="button" value="LOG" onclick=" console.log('LOGです')" />サンプル: