第4回：JavaScriptライブラリの作成 (2/2)

TOP＞システム開発＞ onloadイベント記法の推移

JSライブラリ・ラボ - これで君もライブラリ開発者だ！

第４回：JavaScriptライブラリの作成
著者：川崎有亮 2007/4/4

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）。

図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ライブラリを利用

JSライブラリ・ラボ - これで君もライブラリ開発者だ！
第1回	Prototypeライブラリの内部
第2回	jQueryライブラリの内部とonloadイベント記法
第3回	YUIライブラリと外部JSの呼び出し手法
第4回	JavaScriptライブラリの作成
第5回	グローバル変数の制御と更新履歴ファイル
第6回	自作ライブラリの公開とJavaScriptライブラリの今後

タイプ

連載

特集

新着記事

人気記事トップ10

企画広告も役立つ情報バッチリ！ Sponsored