JavaScript(3)
JSON
JSON
JSON (JavaScript Object Notation) http://www.JSON.org/ は、データ交換用のフォーマットである。 値は、オブジェクト、配列、文字列、数値、真偽値,null の６種類。 ホワイトスペース(SPACE, TAB, CR、NL)は全ての値の前後に挿入することができて、 人間にとって読みやすくできる。
- オブジェクト --- 複数のプロパティを含むコンテナで、 プロパティは名前と値のペアで構成される。 プロパティ名には任意の文字列が利用でき、空文字も利用可能である。 プロパティ名の文字列の前後につけるクオート("")は 予約語と重ならなければ省力可能である。 プロパティの値にはJSONの全ての値(ただしundefinedを除く)が利用できる。 JSONオブジェクトは何層でも入れ子にできる。プロパティの順序は関係ない。 プロパティの区切りにはカンマ(,)を利用する。
- 配列 --- 順序を保持した、連続した値。 それぞれの値には任意のJSONの値を利用することができる。
- 文字列 ---- ダブルクォートによって囲まれる。エスケープ文字は '\'。
- 数値 --- 数値の前に0をつけることは許可されない。
- 真偽値 --- true, false
- null
- undefined --- (これを値に含めない考え方もある。)
JSONをJavaScriptのデータ構造にするには、
var myData = eval('(' + myJSONText + ')');
でもできるが危険性があるので https://github.com/douglascrockford/JSON-js/blob/master/json2.js にある JSON.parse() を使うべき。
var empty_object = {};
var flight = {
"Airline": "JAL",
number: 1669,
departure: {
IATA: "HND",
time: "2014-09-20 14:30",
city: "Tokyo"
},
arrival: {
IATA: "OKA",
time: "2014-09-20 16:10",
city: "Naha"
}
};
値へのアクセス 文字列式を[]で囲んで指定することで、オブジェクトから値を取り出すことができる。
flight["number"] // 1669
flight.departure.IATA // "HND"
HTML 要素へのアクセス
HTML文書中のHTML要素にタグでidプロパティを指定しておく。 JavaScriptから、HTML要素にアクセスするには、 document.getElementById()メソッドを使う。
同一文書内に、同じidを持つHTML要素があってはならない。
scriptタグのsrcプロパティを指定すると、 JavaScriptのプログラムを他のファイルから読み込むことができる。 JavaScriptのファイルには拡張子として .js を用いる。
JavaScript の例1
| js_sample01.html |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script language="JavaScript" type="text/javascript">
//<![CDATA
function main() {
var img = document.getElementById("js_image");
var count = 0;
while (true) {
alert("change image");
if (++count % 2 == 1) img.src = "tsuda02.jpg";
else img.src = "tsuda01.jpg";
}
}
//]]>
</script>
</head>
<body onload="main()">
<img id="js_image" src="tsuda01.jpg" />
</body>
</html>
|
JavaScript の例2
| js_sample02.html |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script language="JavaScript" type="text/javascript">
//<![CDATA
var img;
var count;
var timer;
function main() {
img = document.getElementById("js_image");
count = 0;
timer = setInterval(chgImage, 1000);
}
function chgImage() {
if (++count % 2 == 1) img.src = "tsuda02.jpg";
else img.src = "tsuda01.jpg";
if (count > 5) clearInterval(timer);
}
//]]>
</script>
</head>
<body onload="main()">
<img id="js_image" src="tsuda01.jpg" />
</body>
</html>
|
JavaScript の例3
| js_sample03.html |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script language="JavaScript" type="text/javascript">
//<![CDATA
var img;
var count;
function main() {
img = document.getElementById("js_image");
count = 0;
}
function chgImage() {
if (++count % 2 == 1) img.src = "tsuda02.jpg";
else img.src = "tsuda01.jpg";
}
//]]>
</script>
</head>
<body onload="main()">
<img id="js_image" src="tsuda01.jpg" />
<form action="javascript:void%200" onsubmit="chgImage(); return false;">
<button type="submit">change</button>
</form>
</body>
</html>
|
