return を使った改善 その2

「return」は関数が値を返す時に使いますが、もう一つ重要な役割があります。それは「プログラムを途中で止める」という働きです。returnの後のプログラムは実行されません。

returnの2つの役割を上手く使って、関数dataCheck()をもっとシンプルに呼び出せるように改善してみましょう。今回はJavaScript側だけの更新です。

【1】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。


var database;
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 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 dataDisplay() {
  //データを表示する関数
  var mySql = "select * from T01Prefecture order by PREF_CD";
  var recordSet = database.Execute(mySql);

  var tempText = "";
  document.getElementById("dataDisplay").value = "";

  while (!recordSet.EOF){
    tempText = tempText + recordSet(0) + ":" + recordSet(1) + "\n";
    recordSet.MoveNext();
  }

  document.getElementById("dataDisplay").value = tempText;
  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 (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.focus();
  return false;
}



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


【3】前回までと動作が同じだということを確認してください。


【解説】

まず関数dataCheck()の呼び出し方を変更します。前は「テキストボックスの参照」と「文字列」の2つを引数としていましたが、今回は「0か1」の数値だけを引数とするようにしました。0はオフ、1はオンと考えてください。これでかなりシンプルになりましたね。

function dataUpdate() {
  省略
  if(dataCheck(txtPrefCd,"PREF_CD") && dataCheck(txtPrefName,"PREF_NAME")){
  省略
  }
}



function dataUpdate() {
  省略
  if(dataCheck(1)){
  省略
  }
}


次に関数dataCheck()を変更します。呼び出し元から渡された0か1の値はflagに格納されます。

関数の中ではテキストボックスごとにif文を作り、もしテキストボックスの値が空なら、アラートを表示し、returnでfalseを返しています。ここで重要な点はreturnしたあとのプログラムは実行されないで終了することです。

つまり最初のif文でreturnされると次のif文は判定されません。PREF_CDのデータが空ならPREF_NAMEまでは判定しないということです。

空でなかった場合は何もしないで次のif文に移ります。すべてのif文を通過するとやっとreturnでtrueが返ります。

function dataCheck(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";
  if (txtPrefCd.value == "") {
    alert("PREF_CD" + tempStr);
    return false;
  }
  if (flag == 1 && txtPrefName.value == "") {
    alert("PREF_NAME" + tempStr);
    return false;
  }
  return true;
}

trueが返ると呼び出し元ではif(dataCheck(1)){省略}の条件式がtrueとなりますので、更新処理が実行されます。追加、削除でもプログラムの流れは一緒です。

もう一つ重要な点があります。追加、更新ではPREF_CDとPREF_NAMEの両方のデータが入力されている必要がありますが、削除はPREF_CDのチェックだけでかまいません。そこで処理を分けるためPREF_NAMEのif文ではflagが1(オン)の場合のみテキストボックスが空かどうかチェックしています。

if (flag == 1 && txtPrefName.value == "") {省略}

削除の場合は flag == 1 の条件式が 0 == 1 で falseとなるため、後ろの txtPrefName.value == "" は判定されません。

他にもいろいろ方法があり、PREF_CDとPREF_NAMEの両方をチェックしたあとに、まとめてメッセージを表示することもできます。

スポンサードリンク

スポンサードリンク






JavaScript初心者入門講座TOPへ