感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

【プログラミング 133時間目】JavaScriptでGoogleMapsを使うサンプルと、テーブルの色付けのサンプル

<スポンサーリンク>

知りたい知識がたくさん載っているため、見つけた瞬間に購入した。
このブログを見ると大量に本を購入しているのがわかるかもしれないが、本の購入はだいたい30秒〜1分程度で決断する。
本を買う前に、自分がどういう知識を身に付けたいのかはいつも考えている。

欲しい知識はハッキリしているので、本の中を見て、知りたいと思うことが1つでもあったら迷わず買う。
いくつか迷う場合は、わかりやすい方を選ぶ。サンプルの豊富な方を選ぶ。

この本は、自分が身につけたい知識がいくつもあって、しかも解説が丁寧だったので1秒も迷わずに購入した。

■マウスがある領域に入ったときに、アクションを起こす。
・テーブルを作って、テーブルのマウスを置いた行の背景の色を変えるJavaScriptサンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>マウスの移動でテーブルに色つけ</title>
<style type="text/css">
table {
	border:1px solid #000000;
}

td {
	padding:0 0.5em 0 0.5em;
	border:1px solid #000000;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th>身長</th>
</tr>
<tr onMouseOver="puton(1)" onMouseOut="putoff(1)">
<td>桑野</td>
<td>哲司</td>
<td>178</td>
</tr>
<tr onMouseOver="puton(2)" onMouseOut="putoff(2)">
<td>大辻</td>
<td>智彦</td>
<td>175</td>
</tr>
<tr onMouseOver="puton(3)" onMouseOut="putoff(3)">
<td>小平</td>
<td>大輔</td>
<td>176</td>
</tr>
</table>

<script langage="JavaScript">

function puton(x) {
	document.getElementsByTagName("tr")[x].style.backgroundColor = "#cccccc";
	document.getElementsByTagName("tr")[x].style.fontWeight = 800;
}

function putoff(x) {
	document.getElementsByTagName("tr")[x].style.backgroundColor = "#ffffff";
	document.getElementsByTagName("tr")[x].style.fontweight = 100;
}
</script>


</body>
</html>

JavaScriptgoogle Mapを使ってみる
インターネット上で公開するページでGoogle Maps APIを利用する場合は、APIキーを取得する必要がある。
Google MapsAPIキーの取得はこちら。
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja#api_key

・GoogleMaps APIを使って、札幌の地図をブラウザに表示するサンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Google Map APIを使ってみる</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
 type="text/javascript"></script>
 <script type="text/javascript">
 function initialize() {
 	if (GBrowserIsCompatible()) {
 		var map = new GMap2(document.getElementById("canvas"));
 		map.setCenter(new GLatLng( 43.055248,141.345505), 13);
 	}
 }
 </script>
<body onload="initialize()" onunload="GUnload()">
<div id="canvas" style="width: 500px; height: 300px"></div>
</body>
</html>