Step22・プログラムを分離する: JavaScript初心者入門講座

プログラムを分離する

今回はいよいよ都道府県マスターの仕上げです。これから先は性別マスター、顧客マスター、商品マスター等どんどんプログラムが増えていきます。「sample」ではわかりにくいのできちんとした名前をつけて整理しました。

またデータベースへの接続、切断といった関数や変数は、今後作る他のプログラムでも共通して使いますので、「database.js」として分離しました。

最終的に都道府県マスターは以下の4つのファイルから構成されることになりました。

【1】「prefecture.html」

<html>
  <head>
    <script type="text/javascript" src="database.js"></script>
    <script type="text/javascript" src="prefecture.js"></script>
    <link href="design.css" rel="stylesheet" type="text/css">
    <title>prefecture</title>
  </head>
  <body>
    都道府県マスター
    <form name="form1">
      PREF_CD:<input type="text" name="txtPrefCd" id="txtPrefCd">
      <a href="" name="linkMaxCd" id="linkMaxCd">最大値</a>　
      PREF_NAME:<input type="text" name="txtPrefName" id="txtPrefName">　
      <input type="button" name="btnInsert" id="btnInsert" value="追加">
      <input type="button" name="btnUpdate" id="btnUpdate" value="更新">
      <input type="button" name="btnDelete" id="btnDelete" value="削除">
    </form>
    <div id="sqlDisplay"></div>
    <div id="dataDisplay"></div>
  </body>
</html>

【2】「design.css」

/* デザイン用CSS */

body {
background-color: #ccff99;
}

#selectPref {
width: 300px;
}

【3】「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("データベースを切断しました。");
}

【4】「prefecture.js」

var txtPrefCd;
var txtPrefName;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  txtPrefCd = document.getElementById("txtPrefCd");
  txtPrefName = document.getElementById("txtPrefName");

  txtPrefCd.onblur = function (){blur(this);}
  txtPrefCd.onfocus = function (){focus(this);}
  txtPrefName.onblur = function (){blur(this);}
  txtPrefName.onfocus = function (){focus(this);}
  document.getElementById("btnInsert").onclick = function (){dataInsert();}
  document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
  document.getElementById("btnDelete").onclick = function (){dataDelete();}
  document.getElementById("linkMaxCd").onclick = function (){return maxCd();}

  dbConnect();
  dataDisplay();
}

function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}

function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}

function dataDisplay() {
  //データを表示する関数
  var mySql = "select * from T01Prefecture order by PREF_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "<select size=\"25\" 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("dataDisplay").innerHTML = tempHtml;
  document.getElementById("selectPref").onchange = function (){prefChange(this);}
  recordSet.Close();
  recordSet = null;
}

function dataInsert() {
  //データを追加する関数
  try{
    if(dataCheck(1)){
      var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
      sqlDisplay(mySql);
      database.Execute(mySql);
      dataDisplay();
      alert("追加しました。");
    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}

function dataUpdate() {
  //データを更新する関数
  if(dataCheck(1)){
    var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    dataDisplay();
    alert("更新しました。");
  }
}

function dataDelete() {
  //データを削除する関数
  if(dataCheck(0)){
    var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    dataDisplay();
    alert("削除しました。");
  }
}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}

function dataCheck(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";
  if (txtPrefCd.value == "") {
    alert("PREF_CD" + tempStr);
    return false;
  }
  if (txtPrefCd.value.match(/[^0-9]/)) {
    alert("PREF_CDには半角数字を入力してください！");
    txtPrefCd.focus();
    return false;
  }
  if (flag == 1 && txtPrefName.value == "") {
    alert("PREF_NAME" + tempStr);
    return false;
  }
  return true;
}

function maxCd(){
  //最大値を取得する関数
  var mySql = "select max(PREF_CD) from T01Prefecture";
  var recordSet = database.Execute(mySql);
  txtPrefCd.value = recordSet(0) + 1;
  txtPrefName.value = "";
  txtPrefName.focus();
  return false;
}

function prefChange(obj) {
  txtPrefCd.value = obj.value;
  txtPrefName.value = obj.options[obj.selectedIndex].text;
  document.getElementById("sqlDisplay").innerHTML = "<p>selectedIndex:" + obj.selectedIndex + "　value:" + obj.value + "</p>";
}

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

【6】これまでと動きが変わらないことを確認してください。

【解説】

JavaScriptやCSSは複数に分けて設定することができます。html側のheadタグ部分で指定すればOKです。

<script type="text/javascript" src="database.js"></script>
<script type="text/javascript" src="prefecture.js"></script>
<link href="design.css" rel="stylesheet" type="text/css">

今回のように各プログラムで共通して使う関数や変数は分離して、各htmlで読み込めば同じ処理を何度も書く必要がなくなります。

スポンサードリンク

JavaScript初心者入門講座TOPへ