JavaScript(3)

JSON

JSON

JSON (JavaScript Object Notation) http://www.JSON.org/ は、データ交換用のフォーマットである。 値は、オブジェクト、配列、文字列、数値、真偽値,null の６種類。 ホワイトスペース(SPACE, TAB, CR、NL)は全ての値の前後に挿入することができて、 人間にとって読みやすくできる。 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>