JavaScriptとGoogle Maps APIの概要

JavaScriptはウェブページに動きを加えるための言語で，ページの中にプログラムを埋め込むかたちで記述します．簡単なJavaScriptのプログラムを以下に示します．（以下は，厳密には正しいHTMLではありませんが，実行可能な状態で簡略化したものです．）

<html>
<head>
	<script type="text/javascript">
	//<![CDATA[
		alert("東京駅で待ちます");
	//]]>
	</script>

	<title>Simple Java Script Test</title>
</head>
<body>
	<h1>待ち合わせ</h1>
</body>
</html>

ウェブサイトはこちら上から4行目にある <![CDATA[ と 6行目の ]]> という記号は，HTMLの中に直接JavaScriptを埋め込む際に必要となるコードです．このコードを記述することで，ブラウザにこのコードを読ませた時に， < や > のようなタグ要素をHTMLとして読ませないようにすることができます．但し， <![CDATA[ や ]]> に対応していないブラウザも存在するため，JavaScriptのコメント記号//でコメントアウトして，非対応のブラウザでもエラーにならないようにしています．
上から5行目のalartは，指定したメッセージ文字列を「OK」ボタンがついた注意のダイアログとして表示するための標準関数です．

Scriptタグは，HTMLのhead要素とbody要素の下ならばどこに書いても構いません．上から順番に（書いた順に）実行されます．また，src属性を指定すれば，HTML文書の中にプログラムを埋め込むのではなく，外部ファイルから読み込ませることも可能です．具体的には以下を実行して確認してみてください．

<html>
<head>
	<script type="text/javascript">
	//<![CDATA[
		alert("東京駅で待ちます");
	//]]>
	</script>

	<title>Simple Java Script Test</title>
</head>
<body>
	<h1>待ち合わせ</h1>
	<script type="text/javascript" src="external.js"
	 charset="utf-8">
	</script>
</body>
</html>

以下のサンプルコードは，上のサンプルコードから呼び出される側のコード（ファイル名：external.js）です．

alert("新橋駅だったかもしれない...");

ウェブサイトはこちら

外部から読み込む場合も含めて，文字コードはUTF-8を明示的に指定してください．指定しないと文字化けすることがあります．

以下は関数を利用するサンプルコードです．JavaScriptは上から下に（処理が書かれた順に）実行されますが，実際のアプリケーションでは，他の言語と同様に，処理をまとめて関数として記述しています．onloadという変数に，HTMLの読み込みが完了した時点で呼び出してほしい関数を設定しておきます．すると，そこから実行がスタートします．
このスタイルを利用することで，HTMLとJavaScriptを切り離して管理でき，HTMLからJavaScriptのファイル名を指定するだけでよくなります．また，JavaScriptを気にすることなくHTMLを記述できるようになります．

<html>
<head>
	<script type="text/javascript">
	//<![CDATA[
		function say(message) {
		  alert(message + "ですか？");
		}

		function startUp() {
		  say("麻生太郎");
		  say("鳩山由紀夫");
		}

		onload = startUp;  //最初に実行したい関数をセット
	//]]>
	</script>

	<title>Simple Function Test</title>
</head>
<body>
	<h1>政権交代。</h1>
</body>
</html>

ウェブサイトはこちら

onload関数の設定は，以下のようにHTMLのbodyタグの中に書いても構いません．この場合，上のサンプルコードにある， onload = startUp; の行は不要となります．

<html>
<head>
	<script type="text/javascript">
	//<![CDATA[
		function say(message) {
		  alert(message + "ですか？");
		}

		function startUp() {
		  say("麻生太郎");
		  say("鳩山由紀夫");
		}

	//]]>
	</script>

	<title>Simple Function Test</title>
</head>
<body onload="startUp()">
	<h1>政権交代。</h1>
</body>
</html>

ウェブサイトはこちら

また，最後に実行したい関数はonunloadという関数で処理します．ブラウザが閉じられる直前や，他のサイトに遷移する直前に実行されます．サンプルは以下のとおりです．

<html>
<head>
	<script type="text/javascript">
	//<![CDATA[
		function say(message) {
		  alert(message + "ですか？");
		}

		function startUp() {
		  say("麻生太郎");
		  say("鳩山由紀夫");
		}

		function bye() {
		  say("さようなら");
		} 

		onload = startUp;  //最初に実行したい関数をセット
		onunload = bye;    //最後に実行したい関数をセット

	//]]>
	</script>

	<title>Simple Function Test</title>
</head>
<body>
	<h1>政権交代。</h1>
</body>
</html>

ウェブサイトはこちら

Google Maps API を使う場合は，onunload関数GUnload関数という関数を設定することが推奨されています．通常は以下のように書いておくようにします．

	onunload = GUnload;

JavaScriptとGoogle Maps APIの概要

JavaScriptの実行

演習課題