アラートを使う方法はこれまで何度か出てきましたので、今回はブラウザ上に表示する方法を学びます。アラートは表示結果をコピーできませんので、ブラウザ上に表示したほうがコピーできたりシステム開発中は何かと便利です。
【1】「sample010.html」を以下のように更新してください。コピーして貼り付けてもかまいません。
<html>
<head>
<script type="text/javascript" src="sample010.js"></script>
<title>sample010</title>
</head>
<body>
都道府県マスター
<form name="form1">
PREF_CD:<input type="text" name="txtPrefCd" id="txtPrefCd">
PREF_NAME:<input type="text" name="txtPrefName" id="txtPrefName">
<input type="button" name="btnInsert" id="btnInsert" value="追加">
<input type="button" name="btnUpdate" id="btnUpdate" value="更新">
<input type="button" name="btnDelete" id="btnDelete" value="削除">
</form>
<div id="sql"></div>
<div id="disp">ここにデータを表示</div>
</body>
</html>
【2】「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 + "')";
mySql = mySql + "<br />";
mySql = mySql + "insert into T01Prefecture values(Number(txtPrefCd.value),'txtPrefName.value')";
mySql = mySql + "<br /><br />";
}
document.getElementById("sql").innerHTML = mySql;
/*
alert(mySql);
database.Execute(mySql);
dataDisp();
alert("追加しました。");
*/
}
【3】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【4】PREF_CDに半角で「100」、PREF_NAMEに「テスト2」と入力します。
【5】入力したら「追加」ボタンをクリックします。
【6】変数mySqlの中身がWebブラウザ上に表示されました。
【解説】
sample010.html側の変更は１ヶ所だけで、SQL文を表示するための場所を作りました。
<div id="sql"></div>
sample010.js側で変更したのはSQL文を作り、ブラウザに表示する部分です。今回は比較のため正しいSQL文と間違ったSQL文を書いてみました。
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
正しいSQL文です。
mySql = mySql + "<br />";
見やすいようにhtmlの改行を加えました。
mySql = mySql + "insert into T01Prefecture values(Number(txtPrefCd.value),'txtPrefName.value')";
間違ったSQL文です。（正しいSQL文と改行の後に追加）
mySql = mySql + "<br /><br />";
これも改行を加えているところです。
document.getElementById("sql").innerHTML = mySql;
作成したmySqlをhtmlの<div id="sql"></div>部分に表示しています。
今回はSQL文を表示することだけが目的でしたので、データを実際に追加する部分はコメントにして、プログラムを実行しませんでした。広い範囲をコメントにするには、/* */ で囲みます。
/*
alert(mySql);
database.Execute(mySql);
dataDisp();
alert("追加しました。");
*/
コメントはこう書いても同じです。
//alert(mySql);
//database.Execute(mySql);
//dataDisp();
//alert("追加しました。");
★今回出力した２つのSQL文を次回の解説に使います。
