Step44・販売伝票改良: JavaScript初心者入門講座

販売伝票改良

販売伝票は「伝票」と「明細」で構成されます。前回までに作ったのは伝票にあたる部分です。（販売伝票の上部）

次回から明細を作成しますが、その前に伝票に明細を組み込みやすくするため、画面とプログラムを改良します。

伝票と明細は似たようなプログラムで動くので、フォーム上の部品や関数名に、伝票には「Slip」、明細には「Details」と付けることで区別します。

【1】以下のように slip.htmlとslip.js を更新します。slip.css、base.css、database.js は前回までと同じです。

slip.html

slip.js

var txtSlipCd;
var txtSlipDate;
var selectCst;

onload = init;
onunload = dbClose;

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

  txtSlipCd.onfocus = function (){focus(this);}
  txtSlipCd.onblur = function (){blur(this);}
  txtSlipDate.onfocus = function (){focus(this);}
  txtSlipDate.onblur = function (){blur(this);}

  document.getElementById("btnInsertSlip").onclick = function (){dataInsertSlip();}
  document.getElementById("btnUpdateSlip").onclick = function (){dataUpdateSlip();}
  document.getElementById("btnDeleteSlip").onclick = function (){dataDeleteSlip();}
  document.getElementById("linkNewSlip").onclick = function (){return newSlip();}

  dbConnect();
  slipDisplay();
  cstDisplay();
}

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

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

function slipDisplay() {
  //伝票を表示する関数

  var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "<select name=\"selectSlip\" id=\"selectSlip\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("slipDisplay").innerHTML = tempHtml;
  document.getElementById("selectSlip").onchange = function (){slipChange(this);}

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearSlip();
    cstDisplay();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";
    mySql = mySql +"from T07Slip,T04Customer ";
    mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";
    mySql = mySql +"and SLIP_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    txtSlipCd.value = recordSet(0);
    txtSlipDate.value = dateFormat(recordSet(1));
    selectCst.selectedIndex = cstIndexSearch(recordSet(2));
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);

    recordSet.Close();
    recordSet = null;

    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function cstDisplay() {
  //顧客を表示する関数

  var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("customerDisplay").innerHTML = tempHtml;
  selectCst = document.getElementById("selectCst");
  selectCst.onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}

function cstChange(obj) {
  //顧客を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }else{
    var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);

    recordSet.Close();
    recordSet = null;

    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

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

function newSlip(){
  //伝票を新規作成する関数
  textClearSlip();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = maxCdSlip() + 1;
  txtSlipDate.focus();
  return false;
}

function maxCdSlip(){
  //SLIP_CDの最大値を取得する関数
  var mySql = "select max(SLIP_CD) from T07Slip";
  var recordSet = database.Execute(mySql);
  var maxCd = recordSet(0);
  return maxCd;
}

function textClearSlip() {
  //テキストボックスをクリアする関数
  txtSlipCd.value = "";
  txtSlipDate.value = "";
}

function dataInsertSlip() {
  //データを追加する関数
  try{
    if(dataCheckSlip(1)){
      var mySql = "insert into T07Slip values(" ;
      mySql = mySql + Number(txtSlipCd.value) + ", '";
      mySql = mySql + txtSlipDate.value + "', ";
      mySql = mySql + Number(selectCst.value);
      mySql = mySql +")";

      sqlDisplay(mySql);
      database.Execute(mySql);
      slipDisplay();
      alert("追加しました。");

    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}

function dataUpdateSlip() {
  //データを更新する関数
  if(dataCheckSlip(1)){
    var mySql = "update T07Slip set ";
    mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";
    mySql = mySql + "CST_CD = " + Number(selectCst.value);
    mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    slipDisplay();
    alert("更新しました。");
  }
}

function dataDeleteSlip() {
  //データを削除する関数
  if(!confirm("本当に削除しますか？")){
    return ;
  }

  if(dataCheckSlip(0)){
    var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearSlip();
    document.getElementById("addressDisplay").innerHTML = "";
    slipDisplay();
    cstDisplay();
    alert("削除しました。");
  }
}

function dataCheckSlip(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";

  if (txtSlipCd.value == "") {
    alert("SLIP_CD" + tempStr);
    return false;
  }
  if (txtSlipCd.value.match(/[^0-9]/)) {
    alert("SLIP_CDには半角数字を入力してください！");
    txtSlipCd.focus();
    return false;
  }
  if (flag == 1 && txtSlipDate.value == "") {
    alert("SLIP_DATE" + tempStr);
    return false;
  }
  if (flag == 1 && !txtSlipDate.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
    alert("SLIP_DATEは「yyyy/mm/dd」形式で入力してください！");
    return false;
  }
  if (flag == 1 && selectCst.value == 0) {
    alert("CST_CD" + "は必ず選択してください。");
    return false;
  }

  return true;
}

function cstIndexSearch(cstCd){
  //顧客選択ボックスのIndexを検索する関数
  var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)";
  var recordSet = database.Execute(mySql);
  var cstIndex = recordSet(0);
  return cstIndex;
}

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

【3】前回までと動きは変わらないことを確認してください。

＊「最大値」が「伝票新規」に変わりましたが働きは同じです。

【解説】

(1)大きな変更点はフォーム上の部品や関数名に「Slip」を付けたことです。
・html側
btnInsert　→　btnInsertSlip
btnUpdate　→　btnUpdateSlip
btnDelete　→　btnDeleteSlip
linkMaxCd　→　linkNewSlip

・JavaScript側
maxCd()　→　newSlip()とmaxCdSlip()に分離
textClear()　→　textClearSlip()
dataInsert()　→　textClearSlip()
dataUpdate()　→　dataUpdateSlip()
dataDelete()　→　dataDeleteSlip()
dataCheck()　→　dataCheckSlip()

(2)「最大値」を「伝票新規」に変えたことで関数も2つに分離しました。前回までの関数maxCd()はnewSlip()にあたり、この関数からmaxCdSlip()を呼び出して最大値を取得しています。分離したことでそれぞれの関数がシンプルになり、maxCdSlip()は他の用途にも使いやすくなりました。

function newSlip(){
省略
txtSlipCd.value = maxCdSlip() + 1;
省略
}

function maxCdSlip(){
省略
return maxCd;
}

(3)「div」を「span」に変更しました。<span> や <div> は特に意味を持たないタグです。タグで囲んだ部分にスタイルシートを適用したりするのに使われます。<span> はインライン要素で前後に改行は入りません。<div> はブロック要素で前後に改行が入ります。今回は配置するときに改行が邪魔だったので、<span> を使いました。

<div id="slipDisplay"></div>
↓
<span id="slipDisplay"></span>

<div id="customerDisplay"></div>
↓
<span id="customerDisplay"></span>

(4)sqlDisplayを下に配置しました。sqlDisplayはSQL文や選択ボックスの情報を表示するときに使っていますが、システムが完成して不要になったら、関数sqlDisplay()を呼び出している部分をコメントにすると表示されなくなります。

例
//sqlDisplay(mySql);
//sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);

【伝票のダウンロード】
今回までの改良を含むSlipです。
database.jsとbase.cssは他のマスターと共通です。
slip1.zip

データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。

スポンサードリンク

JavaScript初心者入門講座TOPへ

JavaScript初心者入門講座

販売伝票 改良

販売伝票改良