ページが読み込まれたら処理を行う

説明

旧来ページが読み込まれた場合の処理は<body>タグにonLoadイベントを記述していました。例えば<body onLoad="alert(1)">とするとページが読み込まれた後にアラートダイアログが表示されます。しかし、この方法ではHTML文書とプログラムが分離されていないため分業が難しくなります。そこで、プログラム側でページ読み込み時のイベントハンドラを指定するようにします。ページが読み込まれた場合に処理を行うにはwindow.onloadに実行する処理を記述します。イベント発生時に読み出す関数を指定するのが通例です。サンプルのように無名関数／匿名関数を指定することもできます。
window.onloadは単純にonloadと書いても同じように動作します。これはJavaScriptではwindowオブジェクトの表記を省略することができるためです。DOMが扱えるブラウザでは、このような表記ではなくaddEventListener()を使ってイベントを設定する方がよいでしょう。これはライブラリなどでwindow.onloadが定義されていれば、その処理を上書きしてしまうためです。また、Intenet Explorerの場合はaddEventListener()をサポートしていませんが、代わりにattachEvent()を使ってイベント処理を設定することができます。

JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>ページが読み込まれたら処理を行う</h1>
<div id="info">今日の一枚<br></div>
</body>
</html>
window.onload = function(){
var imageURL = ["images/DSC0001.jpg","images/DSC0002.jpg","images/DSC0003.jpg"];
var imgTag = document.createElement("img");
var n = Math.floor(Math.random()*imageURL.length);
imgTag.src = imageURL[n];
document.getElementById("info").appendChild(imgTag);
}