ほうしう北京へおでかけ
＞ 趣味のホームページ ＞ JavaScript

body onload と window.onload

テンプレートなどを使って共通のページを作成した場合、<body onload="～">が変更になった際には、すべてのページをアップロードしなおさないといけない。

それを防ぐためのトピック！

body onload:ページが読み込まれたら処理

ページが読み込まれたら何か処理を行わせる場合、<body onload="～">のようにbodyタグにonloadを記述してスクリプトを呼び出すことは多い。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
</head>
<body onload="alert('会いたくても会えないときはどうすれば？')">
<p>ページが読み込まれるとメッセージを表示します</p>
</body>
</html>

しかし保守性の面から考えるとHTMLファイルとJavaScriptファイルは分離した方が簡単。

そうしないと関連するすべてのファイルをアップロードするはめになる。

こういうことが プロとして恥ずかしくないJavaScriptの大原則 に繋がっていくのだと思う。

bodyタグのonloadと同じ処理を行う場合には.jsファイルを作成し、windowオブジェクトのonloadイベントハンドラ（window.onload）を設定する。

<body onload="alert('会いたくても会えないときはどうすれば？')">
は
window.onload = function(){ alert('会いたくても会えないときはどうすれば？') }
と書く。

■HTMLファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>ページが読み込まれるとメッセージを表示します</p>
</body>
</html>

■スクリプトファイル (message.js)

window.onload = function() {
alert("会いたくても会えないときはどうすれば？");
}

Javascript サンプルはここから