スポンサードリンク

データを更新

今回は既に入力されているレコードをJavaScriptを使って更新してみます。

【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();}
  document.getElementById("btnUpdate").onclick = function (){update();}

  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 + "')";
  }
  document.getElementById("sql").innerHTML = "<p>" + mySql + "</p>";
  database.Execute(mySql);
  dataDisp();
  alert("追加しました。");
}

//データ更新
function update() {
  with (document.form1) {
    var mySql = "UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value);
  }
  document.getElementById("sql").innerHTML = "<p>" + mySql + "</p>";
  database.Execute(mySql);
  dataDisp();
  alert("更新しました。");
}



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


【3】データを更新する前に現在のレコードを確認しておきます。最後のレコードが「99:テスト」であることを確認してください。

javascript-36.gif


【4】PREF_CDに半角で「99」、PREF_NAMEに「テスト2」と入力します。今回は更新ですのでPREF_CDは既に存在する番号にしてください。

javascript-37.gif


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

javascript-38.gif


【6】「更新しました。」というメッセージが表示されます。「OK」をクリックします。

javascript-39.gif


【7】SQLが正しく表示されていることを確認してください。

javascript-40.gif


【8】Webブラウザ上のデータが更新されているか確認してください。

javascript-41.gif


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

javascript-44.gif


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


【11】今度はわざと間違ったデータを入力してみます。PREF_CDに半角で「99」、PREF_NAMEに「'テスト3」と入力します。シングルクォーテーションを入れているところがポイントです。

javascript-42.gif


【12】エラーが出てプログラムは途中で止まりますが、SQL文は表示されています。そのためシングルクォーテーションが原因だということが見つけやすくなります。これがSQL文を表示しておくメリットです。

javascript-43.gif

*シングルクォーテーションはSQL文で特別な意味を持つ記号ですので、そのままデータとしては入力できません。


【解説】

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


update()はデータを追加する関数として作成しました。SQL文以外はinsert()と同じですね。そのためSQL文についてのみ説明します。

var mySql = "UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value);


【SQL文の組み立て方】

最終的に組み立てたいSQL文です。
UPDATE T01Prefecture SET PREF_NAME ='テスト2' WHERE PREF_CD = 99

全体を「"」(ダブルクォーテーション)で囲みます。
"UPDATE T01Prefecture SET PREF_NAME ='テスト2' WHERE PREF_CD = 99"

値をコントロールや変数に置き換えます。
"UPDATE T01Prefecture SET PREF_NAME ='txtPrefName.value' WHERE PREF_CD = Number(txtPrefCd.value)"

コントロールや変数の前後に半角空白を入れ切り離します。
"UPDATE T01Prefecture SET PREF_NAME =' txtPrefName.value ' WHERE PREF_CD = Number(txtPrefCd.value) "

コントロールや変数以外の文字列部分を「"」(ダブルクォーテーション)で囲みます。
"UPDATE T01Prefecture SET PREF_NAME ='" txtPrefName.value "' WHERE PREF_CD = " Number(txtPrefCd.value)

コントロールや変数と文字列を「+」で結合します。
"UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value)

あとは変数mySqlに代入して1行のプログラムの終わりをあらわす「;」(セミコロン)を付けるだけです。
var mySql = "UPDATE T01Prefecture SET PREF_NAME ='" + txtPrefName.value + "' WHERE PREF_CD = " + Number(txtPrefCd.value);

どうですか?だんだん考え方が慣れてきましたか。


スポンサードリンク






JavaScript初心者入門講座TOPへ