libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Web SQL Database APIによるデータベース・アクセス (3/6)

作成:2010-07-17 17:07
更新:2010-07-17 17:08

■簡単メモ書きデータベースを設計する

では、ごく単純なデータベースとして、１行だけのメモを保管するデータベースを作ってみましょう。Webストレージで似たようなものを作りましたが、こちらはデータベースです。正直、こっちのほうがけっこう難しいので、なるべくシンプルなデータベースにしておくことにします。

下にHTMLページのソースコードをあげておきましょう。ここでは、名前とメモの入力フィールドと、データ保存のためのボタンが用意されてます。また、その下には、<table>の枠組みだけが用意してあります。データを取得したら、この<table>内に表示させよう、というわけです。

ボタンには、onclick="saveData();"というようにして、クリックしたらsaveData関数を呼び出すようにしてあります。ここに保存の処理をよういしておけばいいわけです。

また、<body>タグには、onload="init();"というようにロード時の処理を用意してあります。ここで必要な下準備をし、全データを取得して<table>に表示するようにしておけばよいでしょう。

では、続いてスクリプトの作成に進みましょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html> 
<html lang="ja">
	<head> 
		<meta charset="UTF-8">
		<title>HTML5</title>
		<script type="text/javascript" src="script.js"
			charset="UTF-8"></script>
	</head>
	<body onload="init();">
		<h1>Web Strage Sample</h1>
		<table>
		<tr><td>NAME:</td><td><input type="text" id="name"></td></tr>
		<tr><td>MEMO:</td><td><input type="text" id="memo"></td></tr>
		<tr><td></td><td><input type="button" value="保存"
				onclick="saveData();"></td></tr>
		</table>
		<hr>
		<table id="datatable" border="1"></table>
		<p id="msg"></p>
	</body>
</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る