JavaScript：関数について

ページが読み込まれたら何か処理を行わせる場合、のようにbodyタグにonloadを記述してスクリプトを呼び出すことができました．こちらにその解説を載せています．JavaScriptのプログラム事例は以下のものです．（以下は，厳密には正しいHTMLではありませんが，実行可能な状態で簡略化したものです．）

<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>

ウェブサイトはこちら

しかし，HTMLファイル内にJavaScriptのコードが含まれるのはあまり好ましいこととは言えません．保守性の面からもHTMLファイルとJavaScriptファイルは分離した方が好都合です．では，bodyタグにonloadを書いた場合と同様の処理を，どのようにして行えば良いのでしょうか．

bodyタグのonloadと同じ処理を行う場合にはwindowオブジェクトのonloadイベントハンドラを設定します．

 window.onload = function(){
        実行する処理;
    }

例えば，


function func00(){

	処理

}

function func01(){

	処理

}

window.onload = function(){

	func00();

	setTimeout('func01()',1000); //1秒後にfunc01()を実行する

}

といった書き方をします．上の例のように（function(){ ～ }のように），functionの横に何の関数名も書かれていない場合は，一時的な関数（無名関数または匿名関数）として処理されます．
つまり，window.onload = function(){～}の部分は，windowオブジェクトのonloadプロパティに無名関数を代入していることになり，ブラウザがウィンドウを読み込んだときの１回だけ呼ばれる関数なので，関数名は特に必要ないことを示しています．名前が指定されていないので，複数ファイルを読み込んだ場合にも関数名の重複（衝突）による不具合を防ぐことができます．

window.onload内には，他のスクリプト（func())ばかりではなく，処理や関数を以下のように直接記述することも可能です．例えば，もともとbodyタグの中に含まれている以下のような要素，

<body onload="alert('JavaScript')">

があった時，これは以下のように書くことができます．

window.onload = function(){ alert('JavaScript') }

このように，既存の window.onloadイベントで始動させる処理命令や関数を全てこの1箇所にまとめて記述することができます．

実際のサンプルは，以下のようになります．

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

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

		function bye() {
		  say("交代");
		}

		function finalbye() {
		  say("ほんとに交代したの");
		}


		window.onload = function(){
			startUp();
			setTimeout('bye()',10000); //1秒後にbye()を実行する
		}

		onunload = finalbye;    //最後にfinalbyeをセット

	//]]>
	</script>

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

ウェブサイトはこちら

上のサイトを実行すると，「麻生太郎ですか？」→「鳩山由紀夫ですか？」のメッセージの後に，10秒後に「交代ですか？」のメッセージが出力されます．このサイトを閉じようとすると（このサイトから離れようとすると），「ほんとに交代したのですか？」のメッセージが出力されます．

HTMLファイルとJavaScriptが分離されていても，期待通りに動作させることができます．物理的に，以下の2つのファイルに分離して保存し，実行できます．

HTMLファイル

<html>
<head>
<title>Simple Function Test</title>
<script type="text/javascript" src="javascript_funcinst2.js"></script>
</head>
<body>
<h1>政権交代。</h1>
</body>
</html>

JavaScriptファイル（javascript_funcinst2.js）

		function say(message) {
		  alert(message + "ですか？");
		}

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

		function bye() {
		  say("交代");
		}

		function finalbye() {
		  say("ほんとに交代したの");
		}


		window.onload = function(){
			startUp();
			setTimeout('bye()',10000); //1秒後にbye()を実行する
		}

		onunload = finalbye;

ウェブサイトはこちら

演習課題

上のコードを実際に動かして，コード内容と動作を確認します．

JavaScript：関数について

ページが読み込まれたら処理を呼び出すonloadの書き方

演習課題