課題 性別マスター

前回出題した性別マスターの解答を掲載します。

できるだけ解答を見ずに、都道府県マスターのどこを変えれば性別マスターとして動作するようになるか、自分で考えてみることが大事です。

頭で考えているだけではなく手を動かしてプログラムを入力し、試行錯誤する過程が理解を深めます。

今回学んでほしいことは、都道府県マスターを少し修正するだけで、似たようなマスターが作れるようになることと、共通して使える design.css と database.js のようなファイルを作ることでプログラムの重複をなくし楽になるということです。

また真似ているうちに「こうしたほうがもっといいんじゃないか」というアイデアが出てくるようになります。そのアイデアをプログラミングに反映させ、上手く動いたときには最高ですよ。ぜひ試してみてください。

【sex.js】

var txtSexCd;
var txtSex;

onload = init;
onunload = dbClose;


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

  txtSexCd.onblur = function (){blur(this);}
  txtSexCd.onfocus = function (){focus(this);}
  txtSex.onblur = function (){blur(this);}
  txtSex.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 T05Sex order by SEX_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "<select size=\"25\" name=\"selectSex\" id=\"selectSex\">\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("selectSex").onchange = function (){sexChange(this);}
  recordSet.Close();
  recordSet = null;
}


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


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


function dataDelete() {
  //データを削除する関数
  if(dataCheck(0)){
    var mySql = "delete from T05Sex where SEX_CD = " + Number(txtSexCd.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 (txtSexCd.value == "") {
    alert("SEX_CD" + tempStr);
    return false;
  }
  if (txtSexCd.value.match(/[^0-9]/)) {
    alert("SEX_CDには半角数字を入力してください！");
    txtSexCd.focus();
    return false;
  }
  if (flag == 1 && txtSex.value == "") {
    alert("SEX" + tempStr);
    return false;
  }
  return true;
}


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


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