・手順(7) イベントを記述しよう
JavaScriptのライブラリjQueryを使っていますので、イベントの記述は、jQueryの流儀で定義します。jQueryでは、初期化イベントを記述する際には、下記のように記述します。
<script type="text/javascript"><!--
$(function(){
// ここに初期化処理
};
--></script>
上記の初期化関数の中に、ボタンのイベント設定処理を記述します。jQueryでクリックしたときのイベントを設定するには、下記のように記述します。
$("名前").click( クリックした時の処理 );
電卓では、ボタンの数が多いので、ボタン1つずつにイベントを設定するのが面倒なので、ここでは、イベントを生成する関数 newButtonEvent()を定義していおいて、数字ボタンや演算子ボタンの各キーを連続で指定しています。
$(function(){
// ボタンごとにイベントの設定
// 数字キー
for (var i = 0; i <= 9; i++) {
$("#btn" + i).click(newButtonEvent(i));
}
// 演算キー
var btns = ["dot","rev","ce","div","jpy","mul","cny",
"minus","mod","plus","minus","eq"];
for (var i = 0; i < btns.length; i++) {
var s = btns[i];
var btn = $("#" + s + "_btn");
btn.click(newButtonEvent(btn.val()));
}
// 関数オブジェクトを生成する関数
function newButtonEvent(n) {
return function(){ pushButton(n); };
}
}