【1】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。
var database;
onload = init;
onunload = dbClose;
function init() {
document.getElementById("txtPrefCd").onblur = function (){blur(this);}
document.getElementById("txtPrefCd").onfocus = function (){focus(this);}
document.getElementById("txtPrefName").onblur = function (){blur(this);}
document.getElementById("txtPrefName").onfocus = function (){focus(this);}
document.getElementById("btnInsert").onclick = function (){insert();}
document.getElementById("btnUpdate").onclick = function (){update();}
dbConnect();
dataDisp();
}
//データベースに接続
function dbConnect() {
database = new ActiveXObject("ADODB.Connection");
database.Open("Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\\SampleDB010.mdb;");
alert("データベースに接続しました。");
}
//データベースを切断
function dbClose() {
database.Close();
database = null;
alert("データベースを切断しました。");
}
function focus(obj){
obj.style.backgroundColor = "#ffff00";
}
function blur(obj){
obj.style.backgroundColor = "#ffffff";
}
//データ表示
function dataDisp() {
var mySql = "select * from T01Prefecture order by PREF_CD";
var recordSet = database.Execute(mySql);
var tempHtml="";
document.getElementById("disp").innerHTML = "";
while (!recordSet.EOF){
tempHtml = tempHtml + recordSet(0) + ":" + recordSet(1) + "<br />";
recordSet.MoveNext();
}
document.getElementById("disp").innerHTML = tempHtml;
recordSet.Close();
recordSet = null;
}
//データ追加
function insert() {
with (document.form1) {
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
}
document.getElementById("sql").innerHTML = "<p>" + mySql + "</p>";
database.Execute(mySql);
dataDisp();
alert("追加しました。");
}
//データ更新
function update() {
with (document.form1) {
var mySql = "UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value);
}
document.getElementById("sql").innerHTML = "<p>" + mySql + "</p>";
database.Execute(mySql);
dataDisp();
alert("更新しました。");
}
【2】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【3】データを更新する前に現在のレコードを確認しておきます。最後のレコードが「99:テスト」であることを確認してください。
【4】PREF_CDに半角で「99」、PREF_NAMEに「テスト2」と入力します。今回は更新ですのでPREF_CDは既に存在する番号にしてください。
【5】入力したら「更新」ボタンをクリックします。
【6】「更新しました。」というメッセージが表示されます。「OK」をクリックします。
【7】SQLが正しく表示されていることを確認してください。
【8】Webブラウザ上のデータが更新されているか確認してください。
【9】データベース「SampleDB010.mdb」のテーブル「T01Prefecture」を開き、データが更新されていることを確認してください。
【10】確認が済んだら「SampleDB010.mdb」は閉じます。
【11】今度はわざと間違ったデータを入力してみます。PREF_CDに半角で「99」、PREF_NAMEに「'テスト3」と入力します。シングルクォーテーションを入れているところがポイントです。
【12】エラーが出てプログラムは途中で止まりますが、SQL文は表示されています。そのためシングルクォーテーションが原因だということが見つけやすくなります。これがSQL文を表示しておくメリットです。
＊シングルクォーテーションはSQL文で特別な意味を持つ記号ですので、そのままデータとしては入力できません。
【解説】
init()の中には1行だけ追加しています。
document.getElementById("btnUpdate").onclick = function (){update();}
これは「更新」ボタンをクリックした時に、関数update()を呼び出すという意味です。
update()はデータを追加する関数として作成しました。SQL文以外はinsert()と同じですね。そのためSQL文についてのみ説明します。
var mySql = "UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value);
【SQL文の組み立て方】
最終的に組み立てたいSQL文です。
UPDATE T01Prefecture SET PREF_NAME ='テスト2' WHERE PREF_CD = 99
全体を「"」（ダブルクォーテーション）で囲みます。
"UPDATE T01Prefecture SET PREF_NAME ='テスト2' WHERE PREF_CD = 99"
値をコントロールや変数に置き換えます。
"UPDATE T01Prefecture SET PREF_NAME ='txtPrefName.value' WHERE PREF_CD = Number(txtPrefCd.value)"
コントロールや変数の前後に半角空白を入れ切り離します。
"UPDATE T01Prefecture SET PREF_NAME =' txtPrefName.value ' WHERE PREF_CD = Number(txtPrefCd.value) "
コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"UPDATE T01Prefecture SET PREF_NAME ='" txtPrefName.value "' WHERE PREF_CD = " Number(txtPrefCd.value)
コントロールや変数と文字列を「+」で結合します。
"UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value)
あとは変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けるだけです。
var mySql = "UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value);
どうですか？だんだん考え方が慣れてきましたか。
