【1】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。
var database;
var txtPrefCd;
var txtPrefName;
onload = init;
onunload = dbClose;
function init() {
//初期設定をする関数
txtPrefCd = document.getElementById("txtPrefCd");
txtPrefName = document.getElementById("txtPrefName");
txtPrefCd.onblur = function (){blur(this);}
txtPrefCd.onfocus = function (){focus(this);}
txtPrefName.onblur = function (){blur(this);}
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 tempText = "";
document.getElementById("dataDisplay").value = "";
while (!recordSet.EOF){
tempText = tempText + recordSet(0) + ":" + recordSet(1) + "\n";
recordSet.MoveNext();
}
document.getElementById("dataDisplay").value = tempText;
recordSet.Close();
recordSet = null;
}
function dataInsert() {
//データを追加する関数
try{
if(dataCheck(txtPrefCd,"PREF_CD") && dataCheck(txtPrefName,"PREF_NAME")){
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("追加しました。");
}
}catch(error){
alert(error.number + "\n" + error.description);
}
}
function dataUpdate() {
//データを更新する関数
if(dataCheck(txtPrefCd,"PREF_CD") && dataCheck(txtPrefName,"PREF_NAME")){
var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("更新しました。");
}
}
function dataDelete() {
//データを削除する関数
if(dataCheck(txtPrefCd,"PREF_CD")){
var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("削除しました。");
}
}
function sqlDisplay(_mySql) {
//SQLを表示する関数
document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}
function dataCheck(obj,myStr){
//データをチェックする関数
if (obj.value == "") {
alert(myStr + "は必ず入力してください。");
return false;
}else{
return true;
}
}
【2】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【3】前回と同じようにわざとエラーを出してみましょう。PREF_CDに「あ」、PREF_NAMEに「ハワイ」と入力し、「追加」ボタンをクリックします。
【4】追加にはエラー処理を書いているのでブラウザの下にあるステータスバーに、警告アイコンは出ていません。変わりにエラー内容がアラートで表示されます。
【5】アラートを見ると、エラー番号とエラーの説明が表示されています。確認したら「OK」をクリックします。
【6】次はPREF_CDに「あ」、PREF_NAMEに「ハワイ」と入力したまま「更新」ボタンをクリックしましょう。更新でも同じようなエラーが起きるはずです。
【7】更新のプログラムではエラー処理を行っていませんので、ブラウザの下にあるステータスバーに、警告アイコンが表示されました。「警告アイコン」をダブルクリックします。
【8】エラー内容が表示されました。「ライン：」でどの辺りのプログラムでエラーが出たかわかります。確認したら「OK」をクリックします。
【解説】
今回は追加のプログラムだけエラー処理を書いてみました。エラー処理を書いた時と書かなかった時で動きが変わることを理解していただけたらと思います。
警告アイコンをダブルクリックすると表示される詳細では、エラーが起こったラインがわかるので、システム開発中は警告アイコンのほうが便利です。ただしエラーの原因はその前後のプログラムにある場合もありますので、1行だけでなくまわりもチェックしてください。開発終了後はユーザーがわかりやすいメッセージが出るようにしたほうがいいでしょう。警告アイコンではユーザーはとまどってしまいます。
エラー処理の書き方は以下のようになります。
try{
省略
}catch(error){
エラー処理
}
tryの{}カッコ内にエラーが起こる可能性があるプログラムを書きます。もしtry内でエラーが起こったら中断して、catchの{}カッコ内にあるエラー処理が実行されます。その後、catch{}の後にプログラムがある場合は、そこから継続して実行されます。
catchを詳しく見てみましょう。今回はアラートを表示しているだけです。エラーの内容はerrorに入っています。名前はeでも何でもかまいません。error.numberはエラー番号、\nは改行、error.descriptionはエラーの説明です。
alert(error.number + "\n" + error.description);
どこまでtryで囲むかはプログラムの内容によります。わからない場合はとりあえず全体を囲めばcatch（キャッチ）してくれます。またエラーの内容により処理を分けたい場合は、try catch を複数書くことができます。
