JavaScriptとUnityでゲームが作れる。

JavaScript入門 — Sat, 07 Jan 2017 13:21:19 +0900

JavaScriptで本格的なゲームを作ることができます。

しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応したゲームが作れます。

例えば、
・AndroidやiPhoneなどのスマートフォン用
・WindowsやmacOS、Linuxなどのパソコン用
・ウェブブラウザ用
・PlayStationやXbox、Wiiなどのゲーム機用
他にも多種多様です。

また最近注目されているVR(バーチャルリアリティー)やAR(拡張現実)に対応したアプリも開発できます。

何故JavaScriptで作れるのか？
その仕組みを説明しましょうｗ

なぜならゲームエンジンで有名なUnityでは、
プログラミング言語として、JavaScriptが使えるからです。

開発するプログラミング言語を選び、

実際にはVisual Studioでプログラムを書きます。

ゲームエンジンとは、ゲーム開発でよく使われる機能(物理計算、照明、影、メニュー遷移など)を、誰でも簡単に使えるようにした開発環境です。

Unityはゲーム作りの統合開発環境とも言えます。

普通、JavaScriptのイメージというと、
Webブラウザ上で動作するプログラミング言語として使われていることですよね。

JavaScriptはAjaxの中核技術でもあり、
HTML5と組み合わせると、Webブラウザ上で動作するアプリケーションソフト、またはゲームが作れます。

しかしUnityを使うことで、JavaScriptの可能性と言うか、展開が一気に広がるわけです。

一度作ってしまえば、Unityが各プラットフォームに対応したファイルを自動的に書き出してくれるからです。

こんな感じで、選択するだけでビルドできてしまいます。

だから開発者であるプログラマーは、ゲームを動作させるプラットフォームのことを考える必要はありません。

アイデアやプログラミングに集中することができます。

最近はAndroidやiPhoneなどのスマートフォン向けのアプリ、ゲームの開発が流行っていますよね。

それが同じプログラムで、しかも使い慣れたJavaScriptでもプログラミングできるのですから嬉しいのです。

これまでに学んだJavaScriptの知識を活用できる範囲が、とても広がったわけですね。

創作意欲が湧いてきます。

]]>

JavaScriptで出来ることとは？まとめました。

JavaScript入門 — Thu, 07 Jan 2016 11:46:17 +0900

JavaScriptで何ができるのか？まとめてみました。

プログラミング言語のJavaScriptは、意外といろんな事ができるんです。

・Webブラウザ上で動作する
JavaScriptは、Webブラウザ上で実行できるプログラミング言語です。

ほとんどのWebブラウザが対応しています。

JavaScriptを使うことで、HTMLだけで作るより、とても便利な画面になります。

プログラミング言語ですから、計算などの処理をして表示することはもちろん、

デザインを操作したり、動きを加えたり、様々なことが可能になります。

上記が最も一般的な使われ方でしょう。

・Ajaxの中核技術
今ではほとんどのWebアプリケーション画面でAjaxが活用されています。

JavaScriptは、まさにAjaxの中核技術です。

HTML、CSSとともに欠かせない技術となっています。

プログラミング言語のJavaScriptだけでも様々な処理が可能ですが、

さらにjQueryなどのフレームワークを利用することで、
Webブラウザごとの差異を吸収したり、プログラムを簡単に書くことができます。

複雑な処理でも、簡潔にプログラミングできるのが最大のメリットです。

と、ここまでは一般的によく知られている使われ方です。

ここからが本番ｗ

・データベースに接続できる
実はJavaScriptは、データベースに接続できるんです。

この入門講座でも、その使い方をメインで取り上げています。

IE(インターネットエクスプローラー)のActiveXObjectとWindowsのODBCデータソースを使うことで、

Microsoft社のAccess(アクセス)やOracle(オラクル)などのリレーショナルデータベースにも接続することが出来ます。

もちろん、データベースに対して、追加、修正、削除などの処理が実行可能です。

Webブラウザからデータベースを操作できると、

活用範囲がグッと広がるのでとても便利です。

]]>

JavaScriptは、いろんな可能性を秘めているプログラミング言語です。

JavaScript入門 — Sat, 13 Dec 2014 23:29:14 +0900

JavaScript言語には、まだまだ凄い可能性があります。

JavaScriptと言えば、Webアプリケーションの画面で、

操作が便利になるように、補助的な機能を加えることに使われるイメージがあります。

またはAjaxの中核技術というイメージでしょうか。

どちらかと言うと、脇役のプログラミング言語という感じでした。

本当はすごいんですけどねｗ

このJavaScript入門講座では、テーマとして、

あえて伝票管理という業務システムを取り上げています。

それは何故か？

普通にJavaScriptの入門講座を作ったのでは、

ありきたりな使われ方しか学べないからです。

それはJavaScriptの一面、可能性の一部でしかありません。

私は、「もっとJavaScriptは凄いんだ！」という可能性を知って欲しいのです。

JavaScriptは、この講座で紹介しているような主役的な使い方もできます。

また、意外と簡単にデータベースに接続することもできるので、

アイデア次第で、可能性は無限に広がります。

JavaScriptは、Webブラウザ上で動作するプログラミング言語なので、

使う時はインターネットがつながっているはずです。

ということは、ネット上の情報に簡単にアクセスできます。

その情報をデータベースに蓄積したり、加工できれば・・・

どうですか？

いろんな使い方ができそうですよね。

とはいっても初心者向けの入門講座ですから、

JavaScriptの基本からしっかり教えています。

業務システムをWebブラウザで作ることで、

JavaScriptの基本から応用まで、広く学べるように工夫しています。

]]>

販売伝票プログラムの解説

JavaScript入門 — Sat, 23 Jun 2007 18:23:44 +0900

伝票と明細は別々に作ってきたので、それぞれのプログラムは独立しています。そこでプログラムを別々に読み込み、全体として上手く動くように調整することで、最小限の変更で済むようにしました。

【slip.html】

(1)slip.htmlとdetails.htmlを1つにまとめ、「slip.html」にしました。重複する部分は1つにしてあります。

(2)伝票と明細は水平線で区切りました。

(3)伝票の部品は「form1」の上、明細の部品は「form2」の上に配置しました。

(4)head部分でdatabase.js、slip.js、details.js、base.css、slip.cssを指定しています。

return ;
}

(5)関数slipChange()を統合しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。

(6)関数newSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。

function newSlip(){
  //伝票を新規作成する関数

  //伝票側の処理
  textClearSlip();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = maxCdSlip() + 1;
  txtSlipDate.focus();

  //明細側の処理
  textClearDetails();
  goodsDisplay();
  document.getElementById("detailsDisplay").innerHTML = "";
  document.getElementById("totalDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";

  return false;
}

(7)関数dataDeleteSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。

【details.js】

(1)変数selectSlipをslip.js側へ移動しました。

(2)onload、onunloadは削除しました。slip.js側で呼び出すためです。

(3)関数init()をinitDetails()に名前を変更しました。

(4)関数focus()、blur()、slipDisplay()はslip.jsと重複しているので削除しました。

(5)slipChange()はslip.js側に統合しました。

(6)selectSlip.valueで値を取得していた部分をtxtSlipCd.valueに変更しました。これは必ずしも伝票選択ボックスが選択されているとは限らないからです。

(7)更新時にも確認メッセージを表示するようにしました。
if(!confirm("本当に更新しますか？")){
  return ;
}

(8)明細を選択しないで更新、削除しようとするとメッセージを表示するようにしました。
if(selectDetails.value==""){
  alert("明細が選択されていません。");
  return ;
}

【まとめ】

一番大きな変更はslip.js側の関数slipChange()、newSlip()、dataDeleteSlip()です。これらの変更は伝票側の操作が明細へ影響することがあり、調整が必要だからです。

関数dataDeleteSlip()では伝票側の処理をわざわざ分けていますが、テキストボックスのクリアが明細に影響するので、先に明細の処理を行っています。

あとは全体の動きを確認しながら、プログラムの順番を入れ替えたり微調整しています。

【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip

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

]]>

販売伝票動作確認

JavaScript入門 — Sat, 23 Jun 2007 16:46:21 +0900

伝票と明細を結合したシステムが上手く動くか動作を確認してみましょう。

【1】slip.html をダブルクリックしてWebブラウザで開きます。

★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。

【2】販売伝票が表示されました。伝票と明細が1つの画面に表示されています。水平線の上が伝票で下が明細です。

【3】伝票選択ボックスで、伝票番号「10」を選択します。

【4】伝票番号「10」のデータが表示されました。

【5】次は伝票選択ボックスで、伝票番号「23」を選択します。

【6】伝票番号「23」のデータが表示されました。

【7】「伝票新規」をクリックします。

【8】SLIP_CDに最大値にプラス1した値が自動で入力されます。

【9】SLIP_DATEに日付を入力します。

【10】顧客を選択します。

【11】住所が自動で表示されました。

【12】「伝票追加」ボタンをクリックします。

【13】伝票が追加されました。

【14】SLIP_DATEとCST_CDを変更します。

【15】「伝票更新」ボタンをクリックします。

【16】確認のメッセージが表示されるので、「OK」をクリックします。

【17】伝票が更新されました。

【18】「明細新規」をクリックします。

【19】商品選択ボックスにフォーカスが移動しました。

【20】商品を選択します。

【21】AMOUNTとMEMOを入力します。

【22】「明細追加」ボタンをクリックします。

【23】明細が追加されました。

【24】そのまま「明細更新」ボタンをクリックします。

【25】明細を選択しないで更新しようとしたので、メッセージが表示されました。

【26】今度は明細を選択します。明細のデータが上に反映します。

【27】GOODS_CD、AMOUNT、MEMOを変更して、「明細更新」ボタンをクリックします。

【28】確認のメッセージが表示されるので、「OK」をクリックします。

【29】明細が更新されました。

【30】明細にレコードを3件以上追加してください。

【31】明細の一番下のレコードを選択します。

【32】「明細削除」ボタンをクリックします。

【33】確認のメッセージが表示されるので、「OK」をクリックします。

【34】明細が削除されました。

【35】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、新しく作成した伝票に対応する明細が表示されています。

これから伝票を削除すると対応する明細も全て削除されることを確認します。

【36】「伝票削除」ボタンをクリックします。

【37】確認のメッセージが表示されるので、「OK」をクリックします。

【38】伝票が削除されました。

【39】明細の表示も消えています。

【40】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、伝票に対応していた明細が全て削除されていることがわかります。

【ポイント】

(1)伝票にあるSLIP_CDは「伝票新規の時にだけ変更」できます。いったん伝票を作成したらそれ以降は表示されている値を変更しないでください。伝票の更新・削除や明細の追加はこの伝票番号を使っているので、変更すると不具合が出ます。

(2)明細の更新、削除は明細を選択してからでないと行えません。

(3)伝票を削除すると、対応している明細も削除するようにプログラムしています。

【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip

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

]]>

販売伝票結合

JavaScript入門 — Fri, 22 Jun 2007 22:24:48 +0900

いよいよ販売伝票の仕上げです。これまで別々に作ってきた伝票（slip）と明細（Details）を一つにまとめます。結構本格的なシステムになってきましたね。

完成図

【1】以下のように slip.html、slip.js、details.js を更新します。他は前回までと同じです。slipDetails.zipからダウンロードすることもできます。

slip.html

    slip


    販売伝票




    伝票新規

    明細新規

slip.css

#selectDetails {
width: 600px;
}

slip.js

var txtSlipCd;
var txtSlipDate;
var selectSlip;
var selectCst;

onload = function (){initSlip();initDetails();}
onunload = dbClose;

function initSlip() {
  //初期設定をする関数
  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 = "";

  //alert(tempHtml);
  document.getElementById("slipDisplay").innerHTML = tempHtml;
  selectSlip = document.getElementById("selectSlip");
  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 = "";

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").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;

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    detailsDisplay();

    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 = "";

  //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 = "

" + _mySql + "

";
}

function newSlip(){
  //伝票を新規作成する関数

  //伝票側の処理
  textClearSlip();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = maxCdSlip() + 1;
  txtSlipDate.focus();

  //明細側の処理
  textClearDetails();
  goodsDisplay();
  document.getElementById("detailsDisplay").innerHTML = "";
  document.getElementById("totalDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";

  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(!confirm("本当に更新しますか？")){
    return ;
  }
  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);
    document.getElementById("addressDisplay").innerHTML = "";
    slipDisplay();
    cstDisplay();

    //明細側の処理
    var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";

    //伝票側の処理
    textClearSlip();

    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;
}

details.js

var txtAmount;
var txtMemo;
var selectGoods;

function initDetails() {
  //初期設定をする関数
  txtAmount = document.getElementById("txtAmount");
  txtMemo = document.getElementById("txtMemo");

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + txtSlipCd.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;

  totalDisplay();
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "

" + _mySql + "

";
}

function newDetails(){
  //明細を新規作成する関数
  textClearDetails();
  document.getElementById("sqlDisplay").innerHTML = "";
  goodsDisplay();
  detailsDisplay();
  selectGoods.focus();
  return false;
}

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

function dataInsertDetails() {
  //データを追加する関数

  try{
    if(dataCheckDetails(1)){
      var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";
      mySql = mySql + "values(";
      mySql = mySql + Number(txtSlipCd.value) + ",";
      mySql = mySql + Number(selectGoods.value) + ",";
      mySql = mySql + Number(txtAmount.value) + ", '";
      mySql = mySql + txtMemo.value + "'";
      mySql = mySql +")";

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

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

function dataUpdateDetails() {
  //データを更新する関数
  if(selectDetails.value==""){
    alert("明細が選択されていません。");
    return ;
  }
  if(!confirm("本当に更新しますか？")){
    return ;
  }
  if(dataCheckDetails(1)){
    var mySql = "update T08Details set ";
    mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);
    mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);
    mySql = mySql + ",MEMO = '" + txtMemo.value + "'";
    mySql = mySql + " where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    alert("更新しました。");
  }
}

function dataDeleteDetails() {
  //データを削除する関数
  if(selectDetails.value==""){
    alert("明細が選択されていません。");
    return ;
  }
  if(!confirm("本当に削除しますか？")){
    return ;
  }
  if(dataCheckDetails(0)){
    var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    alert("削除しました。");
  }
}

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

  if (flag == 1 && selectGoods.value == 0) {
    alert("GOODS_CD" + "は必ず選択してください。");
    return false;
  }
  if (flag == 1 && txtAmount.value == "") {
    alert("AMOUNT" + tempStr);
    return false;
  }
  if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {
    alert("AMOUNTには半角数字を入力してください！");
    txtAmount.focus();
    return false;
  }
  if (flag == 1 && txtMemo.value == "") {
    alert("Memo" + tempStr);
    return false;
  }

  return true;
}

function goodsIndexSearch(goodsCd){
  //商品選択ボックスのIndexを検索する関数
  var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD <= " + goodsCd + " order by GOODS_CD)";
  var recordSet = database.Execute(mySql);
  var goodsIndex = recordSet(0);
  return goodsIndex;
}

function totalDisplay(){
  //明細のtotalを計算する関数
  var mySql = "select sum(PRICE * AMOUNT) ";
  mySql += "from T08Details,T06Goods ";
  mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql += "and SLIP_CD = " + txtSlipCd.value;
  var recordSet = database.Execute(mySql);
  var tempHtml = "TOTAL:" + recordSet(0) + "円";
  document.getElementById("totalDisplay").innerHTML = tempHtml;

  recordSet.Close();
  recordSet = null;
}

【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。

★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。

【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip

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

]]>

明細単価×数量の表示

JavaScript入門 — Fri, 22 Jun 2007 20:40:47 +0900

これまで明細には「単価×数量」がありませんでした。そのままだと商品ごとの購入金額がわからないので、以下のように表示する方法を試してみましょう。

明細の表示を変えるには関数detailsDisplay()の中のSQL文と、表示方法を変更するだけです。

【1】以下のように details.js を更新します。他は前回までと同じです。

details.html

var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;

onload = init;
onunload = dbClose;

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

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

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 = "";

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

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + selectSlip.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;

  totalDisplay();
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "

" + _mySql + "

";
}

function newDetails(){
  //明細を新規作成する関数
  textClearDetails();
  document.getElementById("sqlDisplay").innerHTML = "";
  goodsDisplay();
  detailsDisplay();
  selectGoods.focus();
  return false;
}

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

function dataInsertDetails() {
  //データを追加する関数

  try{
    if(dataCheckDetails(1)){
      var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";
      mySql = mySql + "values(";
      mySql = mySql + Number(selectSlip.value) + ",";
      mySql = mySql + Number(selectGoods.value) + ",";
      mySql = mySql + Number(txtAmount.value) + ", '";
      mySql = mySql + txtMemo.value + "'";
      mySql = mySql +")";

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

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

function dataUpdateDetails() {
  //データを更新する関数
  if(dataCheckDetails(1)){
    var mySql = "update T08Details set ";
    mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);
    mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);
    mySql = mySql + ",MEMO = '" + txtMemo.value + "'";
    mySql = mySql + " where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    detailsDisplay();
    alert("更新しました。");
  }
}

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

  if(dataCheckDetails(0)){
    var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    detailsDisplay();
    goodsDisplay();
    alert("削除しました。");
  }
}

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

  if (flag == 1 && selectGoods.value == 0) {
    alert("GOODS_CD" + "は必ず選択してください。");
    return false;
  }
  if (flag == 1 && txtAmount.value == "") {
    alert("AMOUNT" + tempStr);
    return false;
  }
  if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {
    alert("AMOUNTには半角数字を入力してください！");
    txtAmount.focus();
    return false;
  }
  if (flag == 1 && txtMemo.value == "") {
    alert("Memo" + tempStr);
    return false;
  }

  return true;
}

function goodsIndexSearch(goodsCd){
  //商品選択ボックスのIndexを検索する関数
  var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD <= " + goodsCd + " order by GOODS_CD)";
  var recordSet = database.Execute(mySql);
  var goodsIndex = recordSet(0);
  return goodsIndex;
}

function totalDisplay(){
  //明細のtotalを計算する関数
  var mySql = "select sum(PRICE * AMOUNT) ";
  mySql += "from T08Details,T06Goods ";
  mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql += "and SLIP_CD = " + selectSlip.value;
  var recordSet = database.Execute(mySql);
  var tempHtml = "TOTAL:" + recordSet(0) + "円";
  document.getElementById("totalDisplay").innerHTML = tempHtml;

  recordSet.Close();
  recordSet = null;
}

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

実行結果

【明細のダウンロード】
今回までの改良を含むDetailsです。
details2.zip

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

]]>

TOTALを表示するSQL文の考え方

JavaScript入門 — Fri, 22 Jun 2007 18:19:20 +0900

今回は明細のTOTAL（合計金額）を表示するためのSQL文の考え方を解説します。順番よく考えると簡単にわかります。合計金額の計算には単価と数量が必要です。

【1】まずテーブルT08Detailsを確認します。このテーブルにはGOODS_CDとAMOUNT（数量）はありますが、PRICEがありません。PRICEはテーブルT06Goodsを参照する必要があります。

【2】テーブルT08DetailsとT06Goodsを使い、計算に必要な最低限のフィールドだけを選択するSQL文は以下のようになります。

select SLIP_CD,PRICE,AMOUNT
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD

実行結果

【3】次は「単価×数量」の計算をして、計算結果の列名を「calc」とするSQL文です。

select SLIP_CD,PRICE,AMOUNT,(PRICE * AMOUNT) as calc
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD

実行結果

【4】TOTALを表示するのは伝票ごとですから、SLIP_CDを抽出条件にレコードを絞りこんでみましょう。

select SLIP_CD,PRICE,AMOUNT,(PRICE * AMOUNT) as calc
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD
and SLIP_CD = 23

実行結果

【5】最終的に必要なのは「単価×数量」の合計です。合計は「sum」を使います。ちなみに今回は別名を付けていません。別名を付けないとシステムが勝手に名前を付けます。

select sum(PRICE * AMOUNT)
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD
and SLIP_CD = 23

実行結果

このように1行1列のデータになります。この値はプログラムの中でrecordSet(0)で簡単に取得できます。0は1列目を表しています。

【6】あとはSQL文をプログラムに組み込みます。

最終的に組み立てたいSQL文です。
select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23

全体を「"」（ダブルクォーテーション）で囲みます。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23"

値をコントロールや変数に置き換えます。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = selectSlip.value"

コントロールや変数の前後に半角空白を入れ切り離します。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = selectSlip.value"

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" selectSlip.value

コントロールや変数と文字列を「+」で結合します。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" + selectSlip.value

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = ""select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" + selectSlip.value;

上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。今回は文字列の結合を「+=」で表してみました。

var mySql = "select sum(PRICE * AMOUNT) ";
mySql += "from T08Details,T06Goods ";
mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
mySql += "and SLIP_CD = " + selectSlip.value;

]]>

明細合計金額を表示

JavaScript入門 — Fri, 22 Jun 2007 16:55:42 +0900

今回は明細に表示されているレコードのTOTAL（合計金額）を表示する方法を解説します。合計するSQL文がわかればプログラムはそれほど難しくありません。今まで学んだ範囲でできます。

【1】以下のように details.htmlとdetails.js を更新します。他は前回までと同じです。

details.html

    details


    伝票


    明細新規

details.js

var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;

onload = init;
onunload = dbClose;

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

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

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 = "";

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

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + selectSlip.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;

  totalDisplay();
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "

" + _mySql + "

";
}

function newDetails(){
  //明細を新規作成する関数
  textClearDetails();
  document.getElementById("sqlDisplay").innerHTML = "";
  goodsDisplay();
  detailsDisplay();
  selectGoods.focus();
  return false;
}

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

function dataInsertDetails() {
  //データを追加する関数

  try{
    if(dataCheckDetails(1)){
      var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";
      mySql = mySql + "values(";
      mySql = mySql + Number(selectSlip.value) + ",";
      mySql = mySql + Number(selectGoods.value) + ",";
      mySql = mySql + Number(txtAmount.value) + ", '";
      mySql = mySql + txtMemo.value + "'";
      mySql = mySql +")";

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

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

function dataUpdateDetails() {
  //データを更新する関数
  if(dataCheckDetails(1)){
    var mySql = "update T08Details set ";
    mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);
    mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);
    mySql = mySql + ",MEMO = '" + txtMemo.value + "'";
    mySql = mySql + " where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    detailsDisplay();
    alert("更新しました。");
  }
}

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

  if(dataCheckDetails(0)){
    var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    detailsDisplay();
    goodsDisplay();
    alert("削除しました。");
  }
}

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

  if (flag == 1 && selectGoods.value == 0) {
    alert("GOODS_CD" + "は必ず選択してください。");
    return false;
  }
  if (flag == 1 && txtAmount.value == "") {
    alert("AMOUNT" + tempStr);
    return false;
  }
  if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {
    alert("AMOUNTには半角数字を入力してください！");
    txtAmount.focus();
    return false;
  }
  if (flag == 1 && txtMemo.value == "") {
    alert("Memo" + tempStr);
    return false;
  }

  return true;
}

function goodsIndexSearch(goodsCd){
  //商品選択ボックスのIndexを検索する関数
  var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD <= " + goodsCd + " order by GOODS_CD)";
  var recordSet = database.Execute(mySql);
  var goodsIndex = recordSet(0);
  return goodsIndex;
}

function totalDisplay(){
  //明細のtotalを計算する関数
  var mySql = "select sum(PRICE * AMOUNT) ";
  mySql += "from T08Details,T06Goods ";
  mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql += "and SLIP_CD = " + selectSlip.value;
  var recordSet = database.Execute(mySql);
  var tempHtml = "TOTAL:" + recordSet(0) + "円";
  document.getElementById("totalDisplay").innerHTML = tempHtml;

  recordSet.Close();
  recordSet = null;
}

(2)TOTALを表示するために関数totalDisplay()を作りました。このSQL文については次回詳しく解説します。

(3)TOTALの再計算が必要なのは、伝票を切り替えた時や追加・更新・削除で明細に変化があった時です。変化があったときは必ず明細が再表示されます。そのため関数totalDisplay()を呼び出す場所は、関数detailsDisplay()の中にしました。

function detailsDisplay() {
省略
totalDisplay();
}

(4)TOTALをクリアしていたほうがよい場所です。

function slipChange(obj) {
if(obj.selectedIndex==0){
省略
document.getElementById("totalDisplay").innerHTML = "";
省略
}else{
省略
}

(5)追加の場合は問題ないのですが、更新、削除は明細選択ボックスで選択したレコードが操作対象となります。明細選択ボックスは、伝票を切り替えた時や追加・更新・削除するたびに再作成されるので、更新、削除する前に必ず明細をクリックする必要があります。

]]>

明細削除

JavaScript入門 — Fri, 22 Jun 2007 14:27:11 +0900

明細の削除は関数dataDeleteDetails()で行います。データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。削除はSQL文も簡単なのでもうひといきです。

【1】以下のように details.js を更新します。他は前回までと同じです。

details.js

var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;

onload = init;
onunload = dbClose;

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

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

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 = "";

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

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + selectSlip.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

}

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "

" + _mySql + "

";
}

function newDetails(){
  //明細を新規作成する関数
  textClearDetails();
  document.getElementById("sqlDisplay").innerHTML = "";
  goodsDisplay();
  detailsDisplay();
  selectGoods.focus();
  return false;
}

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

function dataInsertDetails() {
  //データを追加する関数

  try{
    if(dataCheckDetails(1)){
      var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";
      mySql = mySql + "values(";
      mySql = mySql + Number(selectSlip.value) + ",";
      mySql = mySql + Number(selectGoods.value) + ",";
      mySql = mySql + Number(txtAmount.value) + ", '";
      mySql = mySql + txtMemo.value + "'";
      mySql = mySql +")";

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

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

function dataUpdateDetails() {
  //データを更新する関数
  if(dataCheckDetails(1)){
    var mySql = "update T08Details set ";
    mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);
    mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);
    mySql = mySql + ",MEMO = '" + txtMemo.value + "'";
    mySql = mySql + " where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    detailsDisplay();
    alert("更新しました。");
  }
}

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

  if(dataCheckDetails(0)){
    var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    detailsDisplay();
    goodsDisplay();
    alert("削除しました。");
  }
}

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

  if (flag == 1 && selectGoods.value == 0) {
    alert("GOODS_CD" + "は必ず選択してください。");
    return false;
  }
  if (flag == 1 && txtAmount.value == "") {
    alert("AMOUNT" + tempStr);
    return false;
  }
  if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {
    alert("AMOUNTには半角数字を入力してください！");
    txtAmount.focus();
    return false;
  }
  if (flag == 1 && txtMemo.value == "") {
    alert("Memo" + tempStr);
    return false;
  }

  return true;
}

function goodsIndexSearch(goodsCd){
  //商品選択ボックスのIndexを検索する関数
  var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD <= " + goodsCd + " order by GOODS_CD)";
  var recordSet = database.Execute(mySql);
  var goodsIndex = recordSet(0);
  return goodsIndex;
}

明細更新

JavaScript入門 — Fri, 22 Jun 2007 13:35:48 +0900

明細の更新は関数dataUpdateDetails()で行います。入力データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。

【1】以下のように details.js を更新します。他は前回までと同じです。

details.js

var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;

onload = init;
onunload = dbClose;

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

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

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 = "";

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

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + selectSlip.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

}

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "

" + _mySql + "

【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。

★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。

★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。

【3】明細が表示されました。

【4】伝票選択ボックスから伝票番号「23」を選んでください。

【5】追加のときに練習で入力したレコードがあることを確認してください。なければどのレコードでもかまいません。

【6】DETAILS_CD「63」をクリックすると、上の選択ボックスやテキストボックスにデータが反映されます。

【7】商品選択ボックスで「USBメモリ」を選択、AMOUNT（数量）に「2」、MEMO（メモ）に「テスト2」と入力します。

【8】「明細更新」ボタンをクリックします。

【9】更新しましたというメッセージが表示されました。

【10】明細に更新したレコードが表示されました。DETAILS_CDとSLIP_CDは変わらないことを確認してください。

【11】更新のSQL文が正しく作成されていることを確認してください。

【12】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが更新されていることを確認します。

【解説】

（1）関数dataUpdateDetails()では更新のSQL文を作成し、データを更新しています。

更新の時はDETAILS_CDとSLIP_CDは変わりません。更新はDETAILS_CDがwhereの抽出条件となるので変わるとまずいですし、SLIP_CDが変わると明細が他の伝票に移動してしまいます。

よって更新ではGOODS_CD、AMOUNT、MEMOが対象となります。

【SQL文の組み立て方】

最終的に組み立てたいSQL文です。
update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63

全体を「"」（ダブルクォーテーション）で囲みます。
"update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63"

値をコントロールや変数に置き換えます。
"update T08Details set GOODS_CD = Number(selectGoods.value),AMOUNT = Number(txtAmount.value),MEMO = 'txtMemo.value' where Details_CD = Number(selectDetails.value)"

コントロールや変数の前後に半角空白を入れ切り離します。
"update T08Details set GOODS_CD = Number(selectGoods.value) ,AMOUNT = Number(txtAmount.value ) ,MEMO = ' txtMemo.value ' where Details_CD = Number(selectDetails.value )"

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"update T08Details set GOODS_CD =" Number(selectGoods.value) ",AMOUNT =" Number(txtAmount.value ) ",MEMO = '" txtMemo.value "' where Details_CD =" Number(selectDetails.value )

コントロールや変数と文字列を「+」で結合します。
"update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value )

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value );

上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。

var mySql = "update T08Details set ";
mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);
mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);
mySql = mySql + ",MEMO = '" + txtMemo.value + "'";
mySql = mySql + " where Details_CD = " + Number(selectDetails.value);

変数内では単純に改行できないので、
mySql ="この中では改行できない"

mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。
mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。

]]>

明細追加

JavaScript入門 — Thu, 21 Jun 2007 22:25:22 +0900

今回は明細にデータを追加してみましょう。2つの関数dataInsertDetails()、dataCheckDetails()を組み込むだけでできます。

明細は伝票と密接な関係があるので、まず選択ボックスで伝票を選択し、SLIP_CDで伝票に関連付けて明細を追加します。

【1】以下のように details.js を更新します。他は前回までと同じです。

details.js

var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;

onload = init;
onunload = dbClose;

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

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

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 = "";

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

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + selectSlip.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

}

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "

" + _mySql + "

【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。

★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。

★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。

【3】明細が表示されました。

【4】伝票選択ボックスから伝票番号「23」を選んでください。

【5】すでに2件の明細があることを確認してください。

【6】「明細新規」をクリックします。

【7】商品選択ボックスにフォーカスが移りました。

【8】「デジタルカメラ」を選択してください。

【9】AMOUNT（数量）に「1」を入力します。

【10】MEMO（メモ）に「テスト」と入力します。

【11】「明細追加」ボタンをクリックします。

【12】追加されましたというメッセージが表示されました。

【13】明細に追加したレコードが表示されました。

DETAILS_CDはオートナンバーなので自動で入力されます。SLIP_CDは伝票選択ボックスの値です。GOODS_NAME（商品名）、PRICE（単価）はテーブルT06Goodsを参照しています。

ということでユーザーが画面から入力する必要があるのは、GOODS_CD、AMOUNT、MEMOです。

【14】追加のSQL文が正しく作成されていることを確認してください。

【15】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが追加されていることを確認します。

【解説】

（1）テーブルT08Detailsをデザインビューで見ると、DETAILS_CDのデータ型が「オートナンバー」になっています。オートナンバーはデータが追加される時、自動で連番が入力されるので、insertでDETAILS_CDを指定する必要はありません。

＊実はテーブルT07SlipのSLIP_CDもオートナンバーに設定していますが、伝票番号はユーザーが任意の番号でも入力できるようにしていました。

（2）テーブルT08Detailsをデータシートビューで見ると、追加の時入力が必要なのは、
SLIP_CD、GOODS_CD、AMOUNT、MEMOの4つです。

この中で重要なのはSLIP_CDです。明細は必ずある伝票に関連付けられて追加されますから、明細が表示されるときには伝票選択ボックスにSLIP_CDが入っていますのでその値を使います。ユーザーが入力する必要はありません。

またテーブルT08DetailsにはGOODS_CDさえ保存していたら、テーブルT06Goodsを参照してGOODS_NAME（商品名）、PRICE（単価）がわかります。

（3）関数dataInsertDetails()では追加のSQL文を作成し、データ追加しています。

今回、DETAILS_CDは入力しないので、このような時はテーブル名の後ろに追加するフィールド名をすべて書く必要があります。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO)

SLIP_CDは伝票選択ボックスから値を取得します。
selectSlip.value

（4）関数dataCheckDetails()では入力データをチェックしています。

本来明細ではMEMOは未入力でもよいのですが、すべてのフィールドを入力するようにしておいたほうが初心者のうちはSQL文やデータを表示するときのプログラムが簡単になります。

もし未入力を許可する場合は「null」という特別な値に対する処理が必要になります。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, null)

【SQL文の組み立て方】

最終的に組み立てたいSQL文です。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')

全体を「"」（ダブルクォーテーション）で囲みます。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')"

値をコントロールや変数に置き換えます。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(selectSlip.value,selectGoods.value,txtAmount.value, 'txtMemo.value')"

コントロールや変数の前後に半角空白を入れ切り離します。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values( selectSlip.value , selectGoods.value , txtAmount.value , ' txtMemo.value ')"

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" selectSlip.value "," selectGoods.value "," txtAmount.value ", '" txtMemo.value "')"

コントロールや変数と文字列を「+」で結合します。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')"

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')";

上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。

mySql = mySql + "values(";
mySql = mySql + Number(selectSlip.value) + ",";
mySql = mySql + Number(selectGoods.value) + ",";
mySql = mySql + Number(txtAmount.value) + ", '";
mySql = mySql + txtMemo.value + "'";
mySql = mySql +")";

変数内では単純に改行できないので、
mySql ="この中では改行できない"

mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。
mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。

]]>

明細表示

JavaScript入門 — Wed, 20 Jun 2007 17:44:57 +0900

明細（details）は伝票（slip）のプログラムとほとんど同じ要領で作れます。この2つは見かけは違いますが、よく見るとプログラムの流れは同じです。

今回は伝票選択ボックスを選択すると、明細一覧が表示されるようになっています。テーブルT08Detailsのデータを一覧で表示していますが仕組みは伝票と同じです。商品選択ボックスも顧客選択ボックスの流用です。

伝票のプログラムが読めれば明細のプログラムはほとんど解説なしに読めるようになっていると思います。

まずは明細を表示するところまで作ってみましょう。

【1】以下のように details.html、details.css、details.js を作成します。base.css、database.js はこれまでと共通です。

details.html

    details


    伝票


    明細新規

details.css

特にありませんので、必要があれば好みでCSSをデザインしてください。

details.js

var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;

onload = init;
onunload = dbClose;

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

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

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 = "";

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

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + selectSlip.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

}

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "";

  //alert(tempHtml);
  document.getElementById("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "

" + _mySql + "

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

【3】明細が表示されました。

【4】伝票選択ボックスと商品選択ボックスはプログラムで表示しています。

【5】伝票選択ボックスから伝票番号「10」を選択します。

【6】明細が表示されました。

＊ゴチャゴチャして見難いかもしれませんが、DETAILS_CDとSLIP_CDの変化をつかんでほしいためです。これらは最終的に表示しないようにします。

【7】伝票番号「10」の明細だけが表示されているところが重要です。伝票選択ボックスで選択した伝票番号と同じだということを確認してください。

【8】明細のレコードを選択すると、そのデータが上の選択ボックスやテキストボックスに反映されます。

【9】「明細新規」をクリックします。

【10】テキストボックスはクリアされ、商品選択ボックスにフォーカスが移りました。

【11】商品選択ボックスで商品を選べます。

【12】伝票選択ボックスや明細をいろいろ切り替えて動作を確認してください。

【解説】

(1)関数slipDisplay()は伝票の時とまったく同じです。

(2)関数slipChange()は伝票選択ボックスをチェンジした時に、関数detailsDisplay()を呼び出しています。

(3)関数detailsDisplay()は明細を表示しています。テーブルT08DetailsにはGOODS_CDしかなく、商品に関する情報GOODS_NAME、PRICE、MEMOがわからないので、テーブルT06Goodsも一緒に使います。

var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
mySql = mySql + "from T08Details,T06Goods ";
mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
mySql = mySql + "and SLIP_CD = " + selectSlip.value;
mySql = mySql + " order by DETAILS_CD";

＊SLIP_CDの抽出条件にselectSlip.valueを使うことで、目的の伝票の明細だけが取り出せる仕組みです。

またこの関数ではイベントハンドラの設定も行っています。
document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

(4)関数detailsChange()は明細をクリックした時に、商品選択ボックスやテキストボックスに1レコード分のデータを表示しています。

var mySql = "select GOODS_CD,AMOUNT,MEMO ";
mySql = mySql +"from T08Details ";
mySql = mySql +"where Details_CD = " + obj.value ;

関数goodsIndexSearch()で商品選択ボックスを切り替えています。
selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));

(5)関数goodsDisplay()は商品選択ボックスの表示と、イベントハンドラの設定を行っています。

(6)関数goodsChange()は商品選択ボックスがチェンジしたときに呼び出されます。

(7)関数newDetails()は「明細新規」をクリックした時に呼び出されます。

(8)関数textClearDetails()は明細のテキストボックスをクリアします。

(9)関数goodsIndexSearch()はGOODS_CDから何番目の商品を選択状態にするかIndexを返します。伝票の顧客の時と同じ仕組みです。

]]>

データベースの修正

JavaScript入門 — Wed, 20 Jun 2007 15:47:00 +0900

テーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、「MEMO」に修正が必要です。

またフィールド名を変更したことで、Accessのフォームも修正しましたので、SampleDB010.zipをダウンロードし直してください。

すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。

【解説】
Accessでフィールド名に「NOTE」を使う場合は、SQL文の中で[]カッコで囲まないとエラーになります。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,[NOTE]) values(23,10,1, 'テスト')

「MEMO」だとそのまま使えます。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')

]]>

販売伝票改良

JavaScript入門 — Tue, 19 Jun 2007 15:47:07 +0900

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

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

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

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

slip.html

    slip


    販売伝票
    伝票新規

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 = "";

  //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 = "";

  //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 = "

" + _mySql + "

";
}

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」に変更しました。や

は特に意味を持たないタグです。タグで囲んだ部分にスタイルシートを適用したりするのに使われます。はインライン要素で前後に改行は入りません。

はブロック要素で前後に改行が入ります。今回は配置するときに改行が邪魔だったので、を使いました。

↓

↓

(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初心者入門講座

JavaScriptとUnityでゲームが作れる。

JavaScriptで出来ることとは？まとめました。

JavaScriptは、いろんな可能性を秘めているプログラミング言語です。

販売伝票 プログラムの解説

販売伝票 動作確認

販売伝票 結合

明細 単価×数量の表示

TOTALを表示するSQL文の考え方

明細 合計金額を表示

明細 削除

明細 更新

明細 追加

明細 表示

データベースの修正

販売伝票 改良

販売伝票プログラムの解説

販売伝票動作確認

販売伝票結合

明細単価×数量の表示

明細合計金額を表示

明細削除

明細更新

明細追加

明細表示

販売伝票改良