スポンサードリンク

変数の中身をブラウザに表示

JavaScriptでは変数の中身を確認するのに少し工夫が必要です。VBの統合開発環境のようにプログラムを1行ずつ実行したり、変数の中身を確認する機能が無いからです。

アラートを使う方法はこれまで何度か出てきましたので、今回はブラウザ上に表示する方法を学びます。アラートは表示結果をコピーできませんので、ブラウザ上に表示したほうがコピーできたりシステム開発中は何かと便利です。

【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」と入力します。

javascript-33.gif


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

javascript-34.gif


【6】変数mySqlの中身がWebブラウザ上に表示されました。

javascript-35.gif


【解説】
sample010.html側の変更は1ヶ所だけで、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("追加しました。");


★今回出力した2つのSQL文を次回の解説に使います。


スポンサードリンク






JavaScript初心者入門講座TOPへ