JSON練習

JSON

ここを参考にこんな感じで作ってみた。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>sample</title>
<style type="text/css">
div#menuarea { border: solid 1px #dcdcdc; }
</style>
<script type="text/javascript">
//JSONデータから、リンクメニューを作成させてみる
var myJSON = {
	"linkList" : [
		{ "text": "ばなな", "description": "ばななは黄色", "url": "./fruits/banana.html" },
		{ "text": "りんご", "description": "りんごは赤色", "url": "./fruits/apple.html" },
		{ "text": "みかん", "description": "みかんは橙色", "url": "./fruits/orange.html" }
	]
};
window.onload = function() {
	var ma = document.getElementById('menuarea');
	//ul要素を作成
	var elmUL = document.createElement('UL');
	for (var i = 0; i < myJSON.linkList.length; i++) {
		//li要素を作成
		var elmLI = document.createElement('LI');
		//a要素を作成
		var elmA  = document.createElement('A');
		//テキストノードを作成
		var tn    = document.createTextNode(myJSON.linkList[i].text);
		//a要素にtitle属性とhref属性を追加
		elmA.setAttribute('title', myJSON.linkList[i].description);
		elmA.setAttribute('href', myJSON.linkList[i].url);
		//a要素にテキストノードを追加
		elmA.appendChild(tn);
		//li要素にa要素を追加
		elmLI.appendChild(elmA);
		//ul要素にli要素を追加
		elmUL.appendChild(elmLI);
	}
	//#menuareaにul要素を追加
	ma.appendChild(elmUL);
}	
</script>
</head>
<body>
<div id="menuarea">
</div>
</body>
</html>

DOMツリーを確認

感想

構造体なソースの記述がイメージし易くて良い。
今までに作ったイントラのコンテンツの幾つかを、早速JSON化してみよう。