【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();}
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 + "')";
}
alert(mySql);
database.Execute(mySql);
dataDisp();
alert("追加しました。");
}
【2】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【3】データを追加する前に現在のレコードを確認しておきます。最後のレコードが「47:沖縄県」であることを確認してください。
【4】PREF_CDに半角で「99」、PREF_NAMEに「テスト」と入力します。
【5】入力したら「追加」ボタンをクリックします。
【6】最初にSql文がアラートで表示されます。「OK」をクリックします。
Sql文は正しく作成されていますか？このSqlが間違っているとデータベースにデータが追加されません。
【7】次に「追加しました。」というメッセージが表示されます。「OK」をクリックします。
【8】沖縄県の下にデータが追加されているか確認してください。
【9】データベース「SampleDB010.mdb」のテーブル「T01Prefecture」を開き、データが追加されていることを確認してください。
【10】確認が済んだら「SampleDB010.mdb」を閉じます。
【解説】
init()の中には1行だけ追加しています。
document.getElementById("btnInsert").onclick = function (){insert();}
これは「追加」ボタンをクリックした時に、関数insert()を呼び出すという意味です。
insert()はデータを追加する関数として作成しました。
with (document.form1) {省略}
withを使うとコントロールを省略して短く書くことができます。
本来の書き方 document.form1.txtPrefCd.value
withを使った省略形 txtPrefCd.value
withの中を見てみましょう。ちょっと長いですが実際には1行で書きます。
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
左辺のmySqlという変数に、右辺で作成したSQL文を文字列として代入しています。
＊何故プログラムの中でSQL文をこのように書かなければならないのかについては、重要なので別記事として詳しく説明します。この考え方がつかめれば一気に上達しますよ。
Number(txtPrefCd.value)
テキストボックスに入力された値は文字ですので、念のため文字列を数値に変換しています。JavaScriptでは文字列を数値に変換する関数として parseInt()、parseFloat()、Number() などがあらかじめ用意されています。
alert(mySql);
このアラートはSQL文が正しく作成されたか確認するためのもので、変数mySqlの中身を表示しています。プログラムが正常に動く場合はコメントにしてもかまいません。
コメントにする方法。プログラムとして実行されなくなります。
//alert(mySql);
database.Execute(mySql);
変数mySqlを引数にSQL文を実行しています。dataDisp()の時との違いは、実行結果をレコードセットとして受け取る必要が無いことです。
dataDisp()の時はこう書きましたね。
var recordSet = database.Execute(mySql);
dataDisp();
追加したことによりデータベースのデータが変わったので、Webブラウザのデータを再表示しています。
alert("追加しました。");
最後にメッセージを表示して終了です。
