【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);}
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;
/**/
}
【2】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください
【3】以下の図のように都道府県が表示されたら成功です。
【解説】
今回はデータベースにあるデータを表示するため、dataDisp()という関数を追加しました。dataDisp()はinit()の中でdbConnect()の後に呼び出しています。つまりデータベースに接続した後にデータを表示しています。
var mySql = "select * from T01Prefecture order by PREF_CD";
mySqlという変数にSQL文を代入しています。mySqlは次の行で関数の引数に使います。
var recordSet = database.Execute(mySql);
Executeの戻り値がrecordSet（レコードセット）に代入されます。recordSetには都道府県のテーブルが入ったとイメージしてください。（表のようなイメージ）
var tempHtml="";
データベースから取り出したデータを一時的に保存しておくための変数です。
document.getElementById("disp").innerHTML = "";
htmlに書いた<div id="disp">ここにデータを表示</div>内のhtmlを空にします。「ここにデータを表示」という文字が消えます。
while (!recordSet.EOF){省略｝
whileは条件式が満たされる間、処理が繰り返されます。この場合の条件式はrecordSetが
End Of File（終端）に達するまで繰り返します。簡単に言うとレコードがある間繰り返すということです。
次はwhileの内側を見てみましょう。
tempHtml = tempHtml + recordSet(0) + ":" + recordSet(1) + "<br />";
あらかじめ用意しておいたtempHtmlにレコードからデータを取り出し、文字列として結合しています。recordSet(0)は1列目なのでPREF_CD、recordSet(1)は2列目なのでPREF_NAMEです。1レコード目の最後に<br />でhtmlとして改行しています。
tempHtml = tempHtml + 省略
とはwhileで繰り返している間、前に取り出したレコードの後に新しいレコードをどんどん文字列として結合しています。tempHtml = tempHtmlを忘れると最後に取り出したレコードしか表示されません。
recordSet.MoveNext();
次のレコードに進めています。
document.getElementById("disp").innerHTML = tempHtml;
htmlに書いた<div id="disp"></div>内のhtmlにtempHtmlの値を代入しています。この部分によりhtmlにデータが表示されているわけです。
recordSet.Close();
recordSet = null;
使い終わったレコードセットを閉じて後始末しています。
