スポンサードリンク

Step5・データを追加

今回はJavaScriptを使ってデータベースにデータを追加してみます。プログラムの中でSQL文がどう作られるのかをつかんでください。

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


var database;

onload = init;
onunload = dbClose;

function init() {
  document.getElementById("txtPrefCd").onblur = function (){blur(this);}
  document.getElementById("txtPrefCd").onfocus = function (){focus(this);}
  document.getElementById("txtPrefName").onblur = function (){blur(this);}
  document.getElementById("txtPrefName").onfocus = function (){focus(this);}
  document.getElementById("btnInsert").onclick = function (){insert();}

  dbConnect();
  dataDisp();
}

//データベースに接続
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 dataDisp() {
    var mySql = "select * from T01Prefecture order by PREF_CD";
    var recordSet = database.Execute(mySql);

    var tempHtml="";
    document.getElementById("disp").innerHTML = "";
    while (!recordSet.EOF){
      tempHtml = tempHtml + recordSet(0) + ":" + recordSet(1) + "<br />";
      recordSet.MoveNext();
    }
    document.getElementById("disp").innerHTML = tempHtml;
    recordSet.Close();
    recordSet = null;
}

//データ追加
function insert() {
  with (document.form1) {
    var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
  }
  alert(mySql);
  database.Execute(mySql);
  dataDisp();
  alert("追加しました。");
}



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


【3】データを追加する前に現在のレコードを確認しておきます。最後のレコードが「47:沖縄県」であることを確認してください。

javascript-21.gif


【4】PREF_CDに半角で「99」、PREF_NAMEに「テスト」と入力します。

javascript-22.gif


【5】入力したら「追加」ボタンをクリックします。

javascript-23.gif


【6】最初にSql文がアラートで表示されます。「OK」をクリックします。

javascript-24.gif

Sql文は正しく作成されていますか?このSqlが間違っているとデータベースにデータが追加されません。


【7】次に「追加しました。」というメッセージが表示されます。「OK」をクリックします。

javascript-25.gif


【8】沖縄県の下にデータが追加されているか確認してください。

javascript-26.gif


【9】データベース「SampleDB010.mdb」のテーブル「T01Prefecture」を開き、データが追加されていることを確認してください。

javascript-27.gif


【10】確認が済んだら「SampleDB010.mdb」を閉じます。


【解説】

init()の中には1行だけ追加しています。
document.getElementById("btnInsert").onclick = function (){insert();}
これは「追加」ボタンをクリックした時に、関数insert()を呼び出すという意味です。


insert()はデータを追加する関数として作成しました。


with (document.form1) {省略}
withを使うとコントロールを省略して短く書くことができます。

本来の書き方 document.form1.txtPrefCd.value
withを使った省略形 txtPrefCd.value

withの中を見てみましょう。ちょっと長いですが実際には1行で書きます。
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
左辺のmySqlという変数に、右辺で作成したSQL文を文字列として代入しています。

*何故プログラムの中でSQL文をこのように書かなければならないのかについては、重要なので別記事として詳しく説明します。この考え方がつかめれば一気に上達しますよ。

Number(txtPrefCd.value)
テキストボックスに入力された値は文字ですので、念のため文字列を数値に変換しています。JavaScriptでは文字列を数値に変換する関数として parseInt()、parseFloat()、Number() などがあらかじめ用意されています。


alert(mySql);
このアラートはSQL文が正しく作成されたか確認するためのもので、変数mySqlの中身を表示しています。プログラムが正常に動く場合はコメントにしてもかまいません。

コメントにする方法。プログラムとして実行されなくなります。
//alert(mySql);


database.Execute(mySql);
変数mySqlを引数にSQL文を実行しています。dataDisp()の時との違いは、実行結果をレコードセットとして受け取る必要が無いことです。

dataDisp()の時はこう書きましたね。
var recordSet = database.Execute(mySql);


dataDisp();
追加したことによりデータベースのデータが変わったので、Webブラウザのデータを再表示しています。


alert("追加しました。");
最後にメッセージを表示して終了です。


スポンサードリンク






JavaScript初心者入門講座TOPへ