スポンサードリンク

Step4・データを表示

いよいよデータベースAccessのテーブルにあるデータを、JavaScriptでブラウザに表示してみましょう。今回はsample010.htmlの変更はありません。前回作成したsample010.jsにプログラムを少し追加するだけです。

【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】以下の図のように都道府県が表示されたら成功です。

javascript-20.gif


【解説】

今回はデータベースにあるデータを表示するため、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;
使い終わったレコードセットを閉じて後始末しています。

スポンサードリンク






JavaScript初心者入門講座TOPへ