TOPシステム開発> onloadイベント記法の推移
まるごとJavaScript&Ajax!
JSライブラリ・ラボ - これで君もライブラリ開発者だ!

第4回:JavaScriptライブラリの作成
著者:川崎 有亮   2007/4/4
前のページ  1  2
HTMLファイルからJavaScriptライブラリを利用

   最後に、JavaScriptライブラリを利用するHTMLファイルを作成します。リスト7のように、今回のCalcライブラリは内部でjQueryライブラリを利用していますから、HTMLでjquery.jsとcalc.jsの両方を読み込んでおく必要があります。
リスト7:calc.htmlサンプルHTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> リモート計算機</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="calc.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
   var rcalc = new Calc(); // Calc インスタンスを生成する
   rcalc.result = '#result'; // 格納先要素のid を指定する
   rcalc.status = '#status';
   function calcit (f) {
      rcalc.expr(f.q.value); // 計算処理を行う
   }

//--></script>
<body>
<form onSubmit="calcit(this);return false;">
計算式:<input type="text" id="q" name="q" value="2 * 2">
<input type="submit" value=" 計算"><br>
計算結果:<span id="result"></span><br>
ステータス:<span id="status"></span><br>
</form>
</body>
</html>

   まずnewでCalcオブジェクトのインスタンスrcalcを作成しておき、submitボタンが押されたときに呼び出されるcalcit()関数を経由してexpr()メソッドを実行します。

   CGIから受け取った計算処理結果は、「id="result"」と「id="status"」のspan要素内に表示されます(図6)。

calc.htmlの実行結果例
図6:calc.htmlの実行結果例

   今回のサンプルで作成したのは単なる計算機能だけですが、これでもCGI側は「リモート計算機Webサービス」と言えますし、JSONデータを返却するREST APIの仕組みを採用していますから拡張性も高いです。このサンプルコードを元にサーバーCGI側処理を変更して、ブラウザー側のインターフェイスを改良すれば、より高度な機能を実現することもできるでしょう。


次回は

   次回は、グローバル変数の汚染を防ぐ方法について解説していきます。

前のページ  1  2

川崎 有亮
著者プロフィール
川崎 有亮
1977年東京生まれ。AjaxなどWeb技術のアーキテクト。株式会社かっぺを経て、現在は株式会社リクルート事業開発室に所属。技術評論社「Ajax/実装のための基礎テクニック」(共著)など書籍・雑誌記事の執筆も多数。

Kawa.net xp:http://www.kawa.net/


INDEX
第4回:JavaScriptライブラリの作成
  オリジナルのWebサービス+JavaScriptライブラリを作成
HTMLファイルからJavaScriptライブラリを利用