2.2 クライアントコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Google Cloud SQL Journal Entry</title>
<style><!-- .num {text-align: right; } --></style>
<script type="text/javascript" src="../jslib/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
if (localStorage){
$("#stat").text("このブラウザはlocalStorage使用可能です。");
}else{
$("#stat").text("このブラウザはlocalStorage使用できません。");
}
$("#check_no").focus();
var date = new Date();
var stime = 0;
var etime = 0;
$("#check_date").val(date.getFullYear()+"-"+(date.getMonth() + 1)+"-"+date.getDate());
$("#items").keyup(function(e){ //（1）
var eid = e.target.id; //（2）
var dc = eid.split("_")[0]; //（3）
var con = eid.split("_")[1]; //（4）
if(con=="code"){
var dc_code = $("#"+dc+"_code").val(); //（5）
if(dc_code.length != 6) return; //（6）
stime = etime = 0;
var storage = $("input[name='storage']:checked").val(); //（7）
if (storage=="local"){ //（8）
stime = new Date();
var val1 = localStorage.getItem(dc_code);
$("#"+dc+"_acct").val(val1); //（9）
etime = new Date();
$("#stat").text((etime - stime)+"ms");
$("#"+dc+"_amt").focus();
} else if(storage=="cloud"){ //（9）
stime = new Date();
var query = {};
query["mode"] = "get_acct";
query["acct_code"] = dc_code;
$.get("/acctsvlt", query, function(res){ //（10）
var r = $.parseJSON(res);
if(r.stat.substr(0,2) == "NO"){
$("#stat").text(r.stat.substr(3));
}else{
$("#"+dc+"_acct").val(r.acct_name); //（11）
etime = new Date();
$("#stat").text((etime-stime)+"ms");
$("#"+dc+"_amt").focus();
}
});
}
}else if ((eid=="credit_amt" || eid=="remark") && e.keyCode==18){ //（12）
stime = new Date();
var query = {};
query["mode"] = "addJournal";
query["check_no"] = $("#check_no").val();
query["debit_code"] = $("#debit_code").val();
query["debit_acct"] = $("#debit_acct").val();
query["debit_amt"] = $("#debit_amt").val();
query["credit_code"] = $("#credit_code").val();
query["credit_acct"] = $("#credit_acct").val();
query["credit_amt"] = $("#credit_amt").val();
query["remark"] = $("#remark").val();
$.post("/acctsvlt", query, function(res){ //（13）
var r = $.parseJSON(res);
$("#stat").text(r.stat);
etime = new Date();
$("#stat").text((etime-stime)+"ms"); //（14）
$("#check_no").focus();
});
} else if (con=="amt"){
var dc_amt = $("#"+dc+"_amt").val();
$("#"+dc+"_total").val(dc_amt);
}
});
$("#check_no").keyup(function(){
if($("#check_no").val().length != 5) return;
$("#debit_code").focus();
});
});
</script>
</head>
<body>
<h4>Google Cloud SQL 仕訳データ登録
<span>
勘定科目参照
<input type="radio" name="storage" value="local" checked/>localStorage
<input type="radio" name="storage" value="cloud"/>クラウドストレージ
</span>
</h4>
<table width="280" border="0" cellspacing="2" cellpadding="0">
<tr bgcolor="#ccffcc">
<th align="center">伝票番号</th>
<th align="center">日付</th>
<th align="center">会計区分</th>
</tr>
<tr>
<td ><input type="text" size="10" id="check_no" /></td>
<td ><input type="text" size="10" id="check_date" /></td>
<td ><input type="text" size="25" value="収益事業等会計" /></td>
</tr>
</table>
<table width="700" border="0" cellspacing="2" cellpadding="0">
<tr bgcolor="#ccffcc">
<th>借方コード</th>
<th>勘定科目名</th>
<th>借方金額</th>
<th>貸方コード</th>
<th>勘定科目名</th>
<th>貸方金額</th>
<th>摘要</th>
</tr>
<tr id="items">
<td><input id="debit_code" type="text" size="7" /></td>
<td><input id="debit_acct" type="text" size="11" /></td>
<td><input id="debit_amt" type="text" size="9" class="num" /></td>
<td><input id="credit_code" type="text" size="7" /></td>
<td><input id="credit_acct" type="text" size="11" /></td>
<td><input id="credit_amt" type="text" size="9" class="num" /></td>
<td><input id="remark" type="text" size="15" /></td>
</tr>
</table>
<table width="700" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="500" id="stat"><td>
<th width="100" align="center" bgcolor="#ccffcc">借方合計</th>
<td width="100"><input type="text" id="debit_total" size="14" /></td>
</tr>
<tr>
<td><td>
<th align="center" bgcolor="#ccffcc">貸方合計</th>
<td><input type="text" id="credit_total" size="14" /></td>
</tr>
</table>
</body>
</html>
リスト3は仕訳データ登録のJavaScriptですが、仕訳データ入力項目のどのフィールドでキー入力があった場合も（1）の匿名関数が呼び出されます。これはイベント伝搬機能を利用して入力フィールドの上位ノード（<tr>タグ、id="items"）でキー入力を検知することによって行われています。従って（1）の匿名関数ではキー入力がどのフィールドで行われたかを識別する必要があり、これはイベントオブジェクトeを使用した（2）のe.target.idで取得されるイベント発生ノードのID値（eid）を使用して行っています。
ここで、リスト3の各仕訳入力フィールドのID値を見ると一定の規則性で設定されています。つまり、借方項目では'_'の前がすべて「debit」で貸方項目の場合はすべて「credit」になっており、'_'の後は借方、貸方ともに入力項目に合わせてcode（勘定コード）、acct（勘定科目）、amt（仕訳金額）の順に並んでいます。この規則性を利用するため、（3）と（4）でそれぞれ'_'の前後の値を変数の「dc」と「con」にセットし、この後の処理記述の短縮化を行っています。
上記の準備によって、最初のif判定後、（6）の$("#"+dc+"_code").val() はキー入力されている勘定コードになり、この値がセットされた変数dc_codeの長さが6の場合は、勘定コードの入力完了を意味しており、その後の処理が継続されます（6）。
（7）では勘定科目参照がlocalStorageかクラウドストレージかを確認し、localStorageの場合は（8）からの処理で勘定科目名を対応する勘定名フィールドにセットし（9）、クラウドストレージの場合は（9）からの処理で、（10）のクラウドサーバにアクセスして得られた勘定科目名を（11）で借方または貸方の対応する勘定名フィールドにセットして処理時間をステータス表示し、その後カーソルを対応する仕訳金額フィールドに移動しています
以上の処理後、貸方金額または摘要フィールドまで入力が進んでいる状態でALTキー（キーコード＝18）が押されると（12）、$.postメソッドで入力された勘定データを連想配列（query）にセットして、登録データとしてサーバに送信します（13）。サーバ側では受信した仕訳データのデータベース登録処理が行われ、サーバでの登録完了後、以上の処理に要した時間がステータス表示されます（14）。
