Step3・データベースに接続

データベースの接続はJavaScriptを使って行います。接続以外にも切断、テキストボックスの色の変化などもJavaScriptの働きです。

【1】テキストエディタで以下のように入力し、ファイル名は「sample010.js」で前回のsample010.htmlと同じ場所に保存してください。コピーして貼り付けてもかまいません。

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();
}

//データベースに接続
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";
}

【2】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。


【3】JavaScriptが上手く動いたら、「データベースに接続しました。」というメッセージが表示されます。




【4】テキストボックスに出たり入ったりすると色が変わります。




【5】他のページへ移動すると、「データベースを切断しました。」というメッセージが表示されます。




【解説】
var database;
変数の宣言です。databaseは数ヶ所の関数で使っているので、関数の外で宣言する必要があります。関数内で宣言した変数はその関数の中でしか使えません。


onload = init;
ページを読み込んだあと最初に実行される関数を設定しています。

onunload = dbClose;
他のページへ移動するとき実行される関数を設定しています。ブラウザを閉じるだけでは実行されません。


init()
コントロールにイベントハンドラを設定しています。また dbConnect() という他の関数を呼び出しています。


dbConnect()
この関数でデータベースに接続しています。


dbClose()
この関数でデータベースから切断しています。


focus()
コントロールに入った時の背景色を変化させています。

blur()
コントロールから出た時の背景色を変化させています。