JSON形式のデータを扱う

JSON (JavaScript Object Notation)は，最近よく利用されるようになってきた軽量のデータ交換フォーマットです．人間にとって読み書きが容易で，マシンにとっても簡単にパースや生成を行なえる形式です．JavaScriptプログラミング言語（ECMA-262標準第3版，1999年12月）の一部をベースに作られていますが，言語から独立したテキスト形式のデータ記述方式として利用されています．
以下は，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="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<script type="text/javascript">
	function samplej() {
		var data = {
			"name" : "せんとくん",
			"address" : "奈良県奈良市"
		};
	alert("名前は" + data.name + "です．住まいは" + data.address + "です．");
	}
</script>
</head>
<body onLoad="samplej()">
<h3>ゆるキャラ（ゆるいマスコットキャラクター）</h3>

</body>
</html>

ウェブサイトはこちら

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="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<script type="text/javascript">
  function samplej_m() {
    var data = {
      "name" : ["せんとくん","まんとくん","なーむくん"]
    };
    alert("兄弟の名前は，" + data.name[0] + "，" + data.name[1] + "です");
 }
</script>
</head>
<body onLoad="samplej_m()">
<h3>ゆるキャラ（ゆるいマスコットキャラクター）</h3>

</body>
</html>

ウェブサイトはこちら


<!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="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<script type="text/javascript">
  function samplej_m2() {
    var data = {
      "name" : ["せんとくん","ひこにゃん","蓮花ちゃん"],
      "address" : ["奈良市","彦根市","葛城市"]
    };
    alert("僕の名前は，" + data.name[0] + "，住まいは" + data.address[0] + "です");
    alert("友達の名前は，" + data.name[1] + "，住まいは" + data.address[1] + "です");
    alert("彼女の名前は，" + data.name[2] + "，住まいは" + data.address[2] + "です");
 }
</script>
</head>
<body onLoad="samplej_m2()">
<h3>ゆるキャラ（ゆるいマスコットキャラクター）</h3>

</body>
</html>

ウェブサイトはこちら

ボタンを押下することでスクリプトを実行できるようにすることができます．



<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<script type="text/javascript">
  function samplej_m4() {
    var data = {
      "name" : ["せんとくん","ひこにゃん","蓮花ちゃん"],
      "address" : ["奈良市","彦根市","葛城市"]
    };
    alert("僕の名前は，" + data.name[0] + "，住まいは" + data.address[0] + "です");
    alert("友達の名前は，" + data.name[1] + "，住まいは" + data.address[1] + "です");
    alert("彼女の名前は，" + data.name[2] + "，住まいは" + data.address[2] + "です");
 }
</script>
</head>
<body>
<h3>ゆるキャラ（ゆるいマスコットキャラクター）</h3>
<input type="button" value="ゆるキャラについて" onclick="samplej_m4();" />

</body>
</html>

ウェブサイトはこちら

コールバック関数を利用して以下のように記述することができます．


<!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="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<script type="text/javascript">

  /**
   * コールバック関数を用意
   */
  function alertback(data) {
    alert("僕の名前は，" + data.name[0] + "，住まいは" + data.address[0] + "です");
    alert("友達の名前は，" + data.name[1] + "，住まいは" + data.address[1] + "です");
    alert("彼女の名前は，" + data.name[2] + "，住まいは" + data.address[2] + "です");
  }
  
   /**
   * ボタンを押下されたらalertback()にJSON形式のデータを引数として渡して実行する
   */

  function samplej_m5() {
    alertback({
      "name" : ["せんとくん","ひこにゃん","蓮花ちゃん"],
      "address" : ["奈良市","彦根市","葛城市"]
    });
  };
</script>
</head>
<body>
<h3>ゆるキャラ（ゆるいマスコットキャラクター）</h3>
<input type="button" value="ゆるキャラについて" onclick="samplej_m5();" />

</body>
</html>

ウェブサイトはこちら

JSON形式のデータを扱う

JSON形式のデータの取扱い

演習課題