HTML5を使用することで、WEBアプリケーションをHTML５＆javascriptのみで作成することができます。
そこで「スマートフォンのためのHTML5 アプリケーション開発ガイド」でサンプルスクリプトを勉強中、下記はローカルのブラウザ内にデータを持つTO-DOWEBアプリです。
ソシム
売り上げランキング: 1174
<!DOCTYPE html>
<html><head>
<meta charset=”utf-8″>
</head>
<body>
<!–新規ボックス追加 –>
<div id=”new_div”>
<input id=”new_txt” type=”text” value=”” style=”width:250px” size=”40″ />
<input id=”add_btn” type=”button” value=”追加” />
</div>
<!–追加項目–>
<div id=”items_div”></div>
<!–項目の操作パネル–>
<div id=”control_div”>
<input id=”done_btn” type=”button” value=”削除” /></div>
<script type=”text/javascript”>
//便利な関数の定義
function $(id) { return document.getElementById(id); }
// 変数の初期化
var todo_div = $(“todo_div”);
var db;
var cbItems = [];
// ドキュメント読み込み時のイベントを設定
window.onload = function() {
if (window.openDatabase == undefined) {
alert(“web DAtabaseに対応していません！”);
return;
}
// データベースを開く
db = window.openDatabase(“todo3.db”, “1.0”, “ToDo”, 1024 * 1024);
db.transaction(function(tr){
// テーブルがなければ作る
var query =
“CREATE TABLE IF NOT EXISTS todo_tbl(” +
” todo_id INTEGER PRIMARY KEY, ” +
” memo TEXT NOT NULL ” +
“)”;
tr.executeSql(query, [], loadItems);
});
};
// アイテムの読み込み実行
function loadItems(){
db.transaction(function(tr) {
var query = “SELECT * FROM todo_tbl”;
tr.executeSql(query, [], loadItems_onResult);
});
}
// アイテムが読み込まれたときのイベント
function loadItems_onResult(tr, rs) {
// すべての子ノードを削除
while(items_div.hasChildNodes()) {
items_div.removeChild(items_div.lastChild);
}
cbItems = [];
// チェックボックスを制作する
for (var i = 0; i < rs.rows.length; i++){
var row = rs.rows.item(i);
var todo_id = row.todo_id;
var memo = row.memo;
// チェックボックスを追加
var cb = document.createElement(“input”); // チェックを作成
cb.type = “checkbox”;
cb.value = todo_id;
cbItems.push(cb);
var label = document.createElement(“span”); // ラベル作成
label.innerHTML = memo;
var line = document.createElement(“div”); //1行作成
line.appendChild(cb); //チェックを追加
line.appendChild(label); // ラベルを追加
items_div.appendChild(line); // 項目一覧にlineを追加
}
}
// ｛追加｝ボタンを押したときのイベント
$(“add_btn”).onclick = function() {
var text = $(“new_txt”).value;
$(“new_txt”).value = “”;
db.transaction(function(tr){
var query = “INSERT INTO todo_tbl(memo)VALUES(?)”;
tr.executeSql(query,[text],loadItems);
});
};
// 削除ボタンを押したときのイベント
$(“done_btn”).onclick = function() {
db.transaction(function(tr) {
for (var i in cbItems) {
var cb = cbItems[i];
if (!cb.checked) continue;
var query = “DELETE FROM todo_tbl WHERE todo_id=?”;
tr.executeSql(query,[cb.value]);
}
}, function(){ alert(‘削除失敗’)}, loadItems);
};
</script>
</body></html>