main.js
関数毎に説明していきます。
登録関連の関数
writeData関数
// Taffy DBにデータを書き込み
1: function writeData() {
2:
3: // 入力チェック
4: var checkFlag = inputValueCheck();
5:
6: if (checkFlag) {
7: return;
8: }
9:
10: if (!window.confirm("Regist OK?")) {
11: return;
12: }
13:
14: // Taffy DBへの書き込み（1行書き込み）
15: insertTaffyFromInput();
16:
17: // ファイルに書き込み
18: writeData2File();
19:
20: window.alert("It completion. ");
21:
22: // フィールドクリア
23: document.getElementById("nameField").value = "";
24: document.getElementById("zipField").value = "";
25: document.getElementById("addressField1").value = "";
26: document.getElementById("addressField2").value = "";
27: document.getElementById("telField").value = "";
28: document.getElementById("faxField").value = "";
39: document.getElementById("mailField").value = "";
30: }
ソース内にコメントが記述されていますので、どの関数が何の処理を
行っているか分かると思います。
実際にTaffy DBを使用しているのは15行目のinsertTaffyFromInput関数です。
18行目のwriteData2File関数は入力内容をファイルに出力する関数です。
各関数は後ほど説明いたします。
試行錯誤で作成していたため、登録する毎にファイル出力を行うような
ロジックとなっていますが、メニューに「ファイル出力」を追加し、
その機能でファイル出力を行った方が良かったのかも知れません。
inputValueCheck関数
必須入力や入力値のチェックを行う関数となります。
特殊な文法等は使用していないため省略します。
insertTaffyFromInput関数
// 入力値からtaffyDBへinsertする。
1: function insertTaffyFromInput() {
2: window.top.dataset.insert(
3: {
4: name:document.getElementById("nameField").value,
5: zipcode:document.getElementById("zipField").value,
6: address1:document.getElementById("addressField1").value,
7: address2:document.getElementById("addressField2").value,
8: tel:document.getElementById("telField").value,
9: fax:document.getElementById("faxField").value,
10: mail:document.getElementById("mailField").value
11: }
12: );
13: }
2行目のwindow.topを使用することで、index.htmlのdataset変数を
使用することができます。
4～10行目にて画面で入力された値を取得し、insert関数の引数として
渡しています。
insert関数の仕様はScript入門2を確認してください。
writeData2File関数
// 入力されたデータをファイルに書き込む
1: function writeData2File(){
2:
3: // ファイルシステムオブジェクトの作成
4: var objFileSys =
new ActiveXObject("Scripting.FileSystemObject");
5:
6: // テキストファイルを書き込み（ただし追記モード）でオープン
7: var objOutFile =
objFileSys.OpenTextFile(filePath, ForAppending, true);
8:
9: // テキストファイルへの書き込み（1行書き込み）
10: objOutFile.WriteLine(
11: document.getElementById("nameField").value + "," +
12: document.getElementById("zipField").value + "," +
13: document.getElementById("addressField1").value + "," +
14: document.getElementById("addressField2").value + "," +
15: document.getElementById("telField").value + "," +
16: document.getElementById("faxField").value + "," +
17: document.getElementById("mailField").value
18: );
19:
20: // テキストファイルのクローズ
21: objOutFile.Close();
22:
23: // オブジェクト破棄
24: objFileSys = null;
25: objOutFile = null;
26: }
4～7行目でファイル操作に必要なオブジェクトを生成します。
10～18行目で、カンマ区切りのデータをファイルに書き込みます。
検索関連の関数
onInit関数
// 検索画面の初期表示処理
1: function onInit() {
2:
3: var cnt = 0;
4: window.top.searchInfo.forEach(function(f,n) {cnt++;});
5:
6: // searchInfoにデータが存在しなければ
7: // 検索は行わない。
8: if (cnt == 0) {
9: return;
10: }
11:
12: var dataArray = window.top.searchInfo.get(parseInt(0));
13:
14: // 初期値設定
15: document.getElementById("nameField").value =
dataArray[0].name;
16: document.getElementById("zipField").value =
dataArray[0].zipcode;
17: document.getElementById("addressField").value =
dataArray[0].address;
18: document.getElementById("telField").value =
dataArray[0].tel;
19: document.getElementById("faxField").value =
dataArray[0].fax;
20: searchData();
21: }
編集画面からreturnボタンで検索画面に遷移した場合、
保持している検索条件を使用し、画面表示時に検索結果を表示させます。
4～10行目にて検索条件の有無を判断し、検索条件が存在する場合、
12行目にて検索条件を取得、15～19行目で初期値設定を行い、
20行目にて検索を行います。
searchData関数
// dataファイル内のデータを読み込み、taffyDBにinsert後、検索する。
1: function searchData() {
2: dataFileRead();
3:
4: var result = window.top.dataset.find(
5: {
6: name:{like:document.getElementById("nameField").value},
7: zipcode:{like:document.getElementById("zipField").value},
8: address1:{like:document.getElementById("addressField").value},
9: tel:{like:document.getElementById("telField").value},
10: fax:{like:document.getElementById("faxField").value}
11: }
12: );
13:
14: // 検索条件は一件しか保持しないため、削除
15: window.top.searchInfo.remove(0);
16:
17: var headerStr =
18: "<div align=center> " +
19: "<table border=1 bordercolor=#000000 bgcolor=#DCDCDC> " +
20: " <tr> " +
21: " <th bgcolor=#0066ff> " +
22: " Name " +
38: " </th> " +
39: " <th bgcolor=#0066ff> " +
40: " Edit " +
41: " </th> " +
42: " <th bgcolor=#0066ff> " +
43: " Delete " +
44: " </th> " +
45: " </tr> ";
46:
47: var mainStr = "";
48:
49: window.top.dataset.forEach(function(f,n)
50: {
51: mainStr +=
52: " <tr> " +
53: " <td bgcolor=#ffffff> " +
54: f.name + " " +
70: " </td> " +
71: " <td bgcolor=#ffffff> " +
72: "<input type=button value=edit
onclick='goEdit(" + n + ")'>" +
73: " </td> " +
74: " <td bgcolor=#ffffff> " +
75: "<input type=button value=delete
onclick='deleteData(" + n + ")'>" +
76: " </td> " +
77: " </tr> ";
78: },
79: result
80: );
81:
82: var footerStr = "</table></div>";
83:
84: document.getElementById("result").innerHTML =
headerStr + mainStr + footerStr;
85: }
2行目のdataFileRead関数にて、ファイルからデータを読み込み、
Taffy DBへinsertを行います。
4～12行目にてinsertを行ったTaffy DBより検索を行い、
検索結果を取得します。
17～45行目は検索結果表示のテーブルヘッダー部分です。
49～80行目にて検索結果のデータを一覧表示するためにHTMLタグによる
整形を行っています。また、72,75行目では、編集ボタンと削除ボタンを
表示するようinputタグを埋め込んでいます。
ボタン押下時のイベントとしてgoEdit関数、deleteData関数を実行します。
dataFileRead関数
// dataファイルを読み込みtaffyDBにinsertする。
1: function dataFileRead() {
2:
3: var objFileSys;
4: var objInFile;
5: var strRecord;
6:
7: window.top.dataset = new TAFFY([]);
8:
9: // ファイルシステムオブジェクトの作成
10: var objFileSys =
11: new ActiveXObject("Scripting.FileSystemObject");
12:
13: try {
14: // ファイルのオープン(読み込みで開く)
15: objInFile =
16: objFileSys.OpenTextFile(filePath, ForReading);
17:
18: // ファイルのオープンが成功(ファイル有り)のときに実行
19: // ファイルの内容を全部読み終えるまでループ
20: do {
21: // ファイルの内容を1行ずつ読み込む
22: strRecord = objInFile.ReadLine();
23:
24: var strSplit = strRecord.split(",");
25:
26: insertTaffyFromFile(strSplit);
27:
28: } while(objInFile.AtEndOfStream==false);
29:
30: // ファイルのクローズ
31: objInFile.Close();
32:
33: // ファイルのオープンが失敗(ファイル無し)のとき
34: } catch(e) {
35: window.alert("ファイルがありませんでした。");
36: }
37:
38: // オブジェクトの破棄
39: objFileSys = null;
40: objInFile = null;
41: }
7行目でTaffy DBの初期化を行い、22行目でファイルから一行読み込み
24行目でカンマを区切り文字とし配列で1レコード分のデータを取得します。
26行目にてTaffy DBにファイル内容を反映します。
insertTaffyFromFile関数
// ファイルから読み込んだ際にtaffyDBへinsertする。
1: function insertTaffyFromFile(strSplit) {
2: window.top.dataset.insert(
3: {
4: name:strSplit[0],
5: zipcode:strSplit[1],
6: address1:strSplit[2],
7: address2:strSplit[3],
8: tel:strSplit[4],
9: fax:strSplit[5],
10: mail:strSplit[6]
11: }
12: );
13: }
insert関数を使用し、引数で渡された1レコード分のデータを登録します。
更新関連の関数
goEdit関数
// 編集画面へ遷移する。
1: function goEdit(index) {
2:
3: // 検索条件の保持
4: window.top.searchInfo.insert(
5: {
6: name:document.getElementById("nameField").value,
7: zipcode:document.getElementById("zipField").value,
8: address:document.getElementById("addressField").value,
9: tel:document.getElementById("telField").value,
10: fax:document.getElementById("faxField").value
11: }
12: );
13:
14: // 編集データのインデックスを保持
15: window.top.editIndex = index;
16:
17: var form = document.getElementById("editForm");
18: form.action = "edit.html";
19: form.submit();
20: }
4～12行目で検索条件の保持(insert)を行います。
保持した内容は検索画面のonInit関数にて使用します。
index.htmlのeditIndex変数に引数のindex値を設定します。
19行目にて更新画面へ遷移します。
editOnInit関数
// 編集画面での初期処理
1: function editOnInit() {
2:
3: var index = window.top.editIndex;
4:
5: // dataファイルから読み込み
6: dataFileRead();
7:
8: var dataArray = window.top.dataset.get(parseInt(index));
9:
10: // 初期値設定
11: document.getElementById("nameField").value =
dataArray[0].name;
12: document.getElementById("zipField").value =
dataArray[0].zipcode;
13: document.getElementById("addressField1").value =
dataArray[0].address1;
14: document.getElementById("addressField2").value =
dataArray[0].address2;
15: document.getElementById("telField").value =
dataArray[0].tel;
16: document.getElementById("faxField").value =
dataArray[0].fax;
17: document.getElementById("mailField").value =
dataArray[0].mail;
18: document.getElementById("index").value = index;
19: }
6行目のdataFileRead関数にて、ファイルからデータを読み込み、
8行目にて指定されたIndexのデータをTaffy DBより取得します。
更新画面表示時の初期値として取得したデータを設定します。
editData関数
// アドレスデータの編集
1: function editData() {
2:
3: // 入力チェック
4: var checkFlag = inputValueCheck();
5:
6: if (checkFlag) {
7: return;
8: }
9:
10: if (!window.confirm("Edit OK?")) {
11: return;
12: }
13:
14: var index = document.getElementById("index").value;
15: updateTaffyFromInput(index);
16:
17: // ファイルに書き込み
18: writeDataForAll();
19:
20: window.alert("It completion. ");
21: }
4行目で入力チェックを行います。
14行目でhidden項目に設定していたindex値を取得し、15行目で取得した
index番目のデータ更新を行っています。
18行目でファイル出力を行っています。
updateTaffyFromInput関数
// 入力値からtaffyDBへupdateする。
1: function updateTaffyFromInput(index) {
2: window.top.dataset.update(
3: {
4: name:document.getElementById("nameField").value,
5: zipcode:document.getElementById("zipField").value,
6: address1:document.getElementById("addressField1").value,
7: address2:document.getElementById("addressField2").value,
8: tel:document.getElementById("telField").value,
9: fax:document.getElementById("faxField").value,
10: mail:document.getElementById("mailField").value
11: },
12: parseInt(index)
13: );
14: }
画面で入力された値に更新します。update関数の第二引数として、
引数で渡されたindexを数値型にキャストして指定します。
writeDataForAll関数
// 入力されたデータをファイルに書き込む
1: function writeDataForAll(){
2:
3: // ファイルシステムオブジェクトの作成
4: var objFileSys =
5: new ActiveXObject("Scripting.FileSystemObject");
6:
7: // データファイルをいったん削除
8: objFileSys.DeleteFile(filePath);
9:
10: // テキストファイルを書き込み（ただし追記モード）でオープン
11: var objOutFile =
12: objFileSys.OpenTextFile(filePath, ForAppending, true);
13:
14: window.top.dataset.forEach(function(f,n)
15: {
16: // テキストファイルへの書き込み（1行書き込み）
17: objOutFile.WriteLine(
18: f.name + "," +
19: f.zipcode + "," +
20: f.address1 + "," +
21: f.address2 + "," +
22: f.tel + "," +
23: f.fax + "," +
24: f.mail
25: );
26: }
27: );
28:
29: // テキストファイルのクローズ
30: objOutFile.Close();
31:
32: // オブジェクト破棄
33: objFileSys = null;
34: objOutFile = null;
35: }
writeData2File関数とほぼ同じとなっています。
違う箇所としては、14行目にてTaffy DBに登録されているデータを
全部ファイルに出力するというロジックが追加されていることです。
returnSearch関数
// 検索画面にもどる
1: function returnSearch() {
2: document.getElementById("form").action = "search.html";
3: document.getElementById("form").submit();
4: }
検索画面へ戻るためのaction設定とsubmitを行います。
以上で、main.jsの説明は終了です。
ダウンロードしたソースを変更し、色々試してみてください。
・ソート機能の追加
・ファイル出力の改善
・他モジュール(Ajaxなど)との連携 など・・・
|
