前回までに作成したJavaScriptのプログラムでも重複して書かれている部分があります。追加、更新、削除のたびに以下のコードを呼び出していましたね。この部分を関数にしてみましょう。
document.getElementById("sqlDisplay").innerHTML = "<p>" + mySql + "</p>";
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 (){dataInsert();}
document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
document.getElementById("btnDelete").onclick = function (){dataDelete();}
dbConnect();
dataDisplay();
}
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 dataDisplay() {
//データを表示する関数
var mySql = "select * from T01Prefecture order by PREF_CD";
var recordSet = database.Execute(mySql);
var tempHtml="";
document.getElementById("dataDisplay").innerHTML = "";
while (!recordSet.EOF){
tempHtml = tempHtml + recordSet(0) + ":" + recordSet(1) + "<br />";
recordSet.MoveNext();
}
document.getElementById("dataDisplay").innerHTML = tempHtml;
recordSet.Close();
recordSet = null;
}
function dataInsert() {
//データを追加する関数
with (document.form1) {
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
}
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("追加しました。");
}
function dataUpdate() {
//データを更新する関数
with (document.form1) {
var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
}
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("更新しました。");
}
function dataDelete() {
//データを削除する関数
with (document.form1) {
var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
}
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("削除しました。");
}
function sqlDisplay(_mySql) {
document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}
【解説】
まず新たにsqlDisplay()という関数を作りました。SQL文を画面に表示するだけの関数です。
function sqlDisplay(_mySql) {
document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}
あとは何度か出てくる以下の部分を
document.getElementById("sqlDisplay").innerHTML = "<p>" + mySql + "</p>";
sqlDisplay(mySql);に置き換えるだけです。
関数を呼び出す時に引数として変数mySqlを指定しています。mySqlにはSQL文が文字列として入っていますので、SQL文を渡していることになります。
呼び出された関数 sqlDisplay(_mySql){省略} は「_mySql」で値を受け取っています。「mySql」の値が「_mySql」に渡されたと考えてください。変数名は両方とも「mySql」にすることも違う名前にすることもできます。今回はわざと「_」（アンダーバー）を付けて区別しました。
変数にはもともと有効範囲があります。変数mySqlは呼び出し元の関数内でしか有効ではありませんので、呼び出し先の関数では改めて変数を定義する必要があります。だから同じ名前でも違う名前でもかまわないのです。
・mySqlは dataInsert() {省略} 内で有効
・_mySqlは sqlDisplay(_mySql){省略} 内で有効
今回の場合は1行のプログラムですので、関数にしたメリットをあまり感じないかもしれません。しかし例えば100行のプログラムを1行の関数名だけで呼び出せるとしたらどうでしょう？プログラムが簡単になることが想像できると思います。
もう一つ関数にするメリットがあります。修正があった時に一箇所だけの変更で済むということです。
実はこれまでも自分で作った関数を使っていました。データを表示する時 dataDisplay() という関数を呼び出していましたね。もし関数にしていなかったら、追加、更新、削除のたびに同じプログラムを書かなければならなかったのです。
