【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="sqlDisplay"></div>
<textarea name="dataDisplay" id="dataDisplay" rows="20" cols="75"></textarea>
</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 (){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() {
//データを追加する関数
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>";
}
【3】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【4】テキストエリアにデータが表示されていることを確認してください。このほうが見やすいですね。
【解説】
html側は「div」でマークしていた部分をテキストエリアに変更しただけです。テキストエリアの大きさは rows で縦幅を、cols で横幅を指定します。
<div id="dataDisplay">ここにデータを表示</div>
↓
<textarea name="dataDisplay" id="dataDisplay" rows="20" cols="75"></textarea>
html側の変更に合わせてJavaScript側も変更しますが、データを表示する部分は関数にまとめていますので、今回はdataDisplay()内だけの変更で済みます。
まず変数名をtempHtmlからtempTextに変更しました。変数名は何でもいいのですが、変数に代入する内容を明確に表していたほうが後々プログラムが読みやすくなります。ただ変数の有効範囲が狭い場合はtmpとかstrという簡略した変数名でもかまいません。
次にデータを作成している部分を変更します。「div」の場合は innerHTML を使って、htmlを代入していました。改行はhtmlの改行タグである <br /> を書きました。
それに対しテキストエリアの場合は value を使って、テキストエリアの値として代入します。テキストエリア内の改行は \n です。
tempHtml = tempHtml + recordSet(0) + ":" + recordSet(1) + "<br />";
↓
tempText = tempText + recordSet(0) + ":" + recordSet(1) + "\n";
document.getElementById("dataDisplay").innerHTML = tempHtml;
↓
document.getElementById("dataDisplay").value = tempText;
本当はテキストエリアで選んだ値を、上の1行テキストに表示できると便利なのですが、プログラムが複雑になりますので、別の機会に解説します。
