Step30・住所表示その3: JavaScript初心者入門講座

住所表示その3

前回（住所表示その2）の方法ではaddress.htmを開くだびに、データベースへの接続・切断を繰り返していました。

今回は「opener」を使ってcustomer.jsで接続したデータベースを、address.jsでも共有して使う方法を解説します。つまり1回だけデータベースに接続する方法です。システムの動きは住所表示その2と同じですが負荷は少ないです。

【1】以下のように database.js、address.js を更新します。他は「住所表示その2」と同じです。

★2007年6月12日以前に「住所表示その2」を試した方は修正がありましたので、customer.htmlとcustomer.jsは「住所表示その2」からもう一度更新してください。

database.js

var database;

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 addressRefer(townCd,_database) {
  //住所を表示する関数
  var mySql = "SELECT ('〒' & ZIP_CODE & ' ' & PREF_NAME & CITY_NAME & TOWN_NAME) AS address ";
  mySql = mySql + "FROM T03Town,T02City,T01Prefecture ";
  mySql = mySql + "WHERE T03Town.CITY_CD = T02City.CITY_CD ";
  mySql = mySql + "AND T02City.PREF_CD = T01Prefecture.PREF_CD ";
  mySql = mySql + "AND TOWN_CD = " + townCd;

  var recordSet = _database.Execute(mySql);
  var tempAddress = recordSet(0);

  //recordSet.Close();
  recordSet = null;

  return tempAddress;
}

address.js

var prefCd;
var cityCd;

onload = init;

function init() {
  prefDisplay();
}

function prefDisplay(obj) {
  //都道府県を表示する関数
  var mySql = "select * from T01Prefecture order by PREF_CD";
  var recordSet = opener.database.Execute(mySql);

  document.getElementById("prefDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectPref\" id=\"selectPref\">\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("prefDisplay").innerHTML = tempHtml;
  document.getElementById("selectPref").onchange = function (){prefChange(this);}

  recordSet.Close();
  recordSet = null;
}

function prefChange(obj) {
  //都道府県を選択した時の関数
  prefCd = Number(obj.value);
  cityDisplay();
  opener.document.getElementById("txtTownCd").value = "";
  opener.document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("townDisplay").innerHTML ="";
}

function cityDisplay() {
  //市町村を表示する関数
  var mySql = "select CITY_CD,CITY_NAME from T02City where PREF_CD = " + prefCd + " order by CITY_CD" ;
  var recordSet = opener.database.Execute(mySql);

  document.getElementById("cityDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectCity\" id=\"selectCity\">\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("cityDisplay").innerHTML = tempHtml;
  document.getElementById("selectCity").onchange = function (){cityChange(this);}

  recordSet.Close();
  recordSet = null;
}

function cityChange(obj) {
  //市町村を選択した時の関数
  cityCd = Number(obj.value);
  opener.document.getElementById("txtTownCd").value = "";
  opener.document.getElementById("addressDisplay").innerHTML = "";
  townDisplay();
}

function townDisplay() {
  //地域を表示する関数
  var mySql = "select TOWN_CD,TOWN_NAME from T03Town where CITY_CD = " + cityCd + " order by TOWN_CD" ;
  var recordSet = opener.database.Execute(mySql);

  document.getElementById("townDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectTown\" id=\"selectTown\">\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("townDisplay").innerHTML = tempHtml;
  document.getElementById("selectTown").onchange = function (){townChange(this);}

  recordSet.Close();
  recordSet = null;
}

function townChange(obj) {
  //地域を選択した時の関数
  opener.document.getElementById("txtTownCd").value = obj.value;
  opener.document.getElementById("addressDisplay").innerHTML = addressRefer(obj.value,opener.database);
}

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

【3】TOWN_CDをクリックして住所を入力してみてください。前回までと動きは変わらないことを確認します。

【解説】

(1)address.jsから以下の文を削除しました。
onunload = dbClose;
dbConnect();
これでaddress.jsからデータベースの接続・切断はできません。

(2)顧客マスターから住所を入力するとき、画面の移り変わりは、customer.html→address.htmですが、プログラムはcustomer.js→address.jsとなります。つまり最初に動くのはcustomer.jsで、customer.jsで接続したデータベース（変数database）をaddress.jsでも使いたいわけです。

前回少し説明しましたが、customer.jsで接続したデータベースをaddress.jsで使う場合は「opener」を使います。

・customer.jsで使う場合は普通に使えます。
var recordSet = database.Execute(mySql);

・address.jsで使う場合はopenerを付けます。
var recordSet = opener.database.Execute(mySql);

ここまでは大丈夫だと思います。

(3)問題は関数addressRefer()を呼び出す場合です。
前回までは関数addressRefer()の中は以下のようになっていたため、データベースを別々に接続しなければなりませんでした。「opener」が無いためaddress.jsからは使えないからです。
var recordSet = database.Execute(mySql);

そこで関数addressRefer()の呼び出し方を変えて、引数を増やし、データベースの参照も含める方法にしました。

・customer.jsから呼び出す場合
addressRefer(obj.value,database);

・address.jsから呼び出す場合
addressRefer(obj.value,opener.database);

function addressRefer(townCd,_database) {
省略
var recordSet = _database.Execute(mySql);
省略
}

_databaseに「_」アンダーバーが付いていることに気を付けてください。_databaseは変数なので、呼び出し元から渡された値により、databaseだったり、opener.databaseだったり自由に切り替えることができます。これで関数addressRefer()が共通に使えるようになりました。

スポンサードリンク

JavaScript初心者入門講座TOPへ

JavaScript初心者入門講座

住所表示 その3

住所表示その3