ページ表示時、読み込み時に JavaScriptを実行するコードと実行結果
ページ読み込み時に JavaScriptを実行するコードと実行結果を紹介します。
概要
ページ読み込み時にJavaScriptを実行するには、大きく分けると以下の2つの方法があります。
- JavaScriptのイベントに設定する方法
- JavaScriptを記述するscriptタグ内に関数化せずにJavaScriptのコードを記述する方法
scriptタグ内に関数化せずにJavaScriptのコードを記述する方法は、ページのDOM構築前に実行されるため、DOM要素が取得できないなどのタイミングの問題があるため、
この記事では、イベントを利用する方法とコードを紹介します。直接記述した場合の動作の詳細はページ末尾の補足のセクションを参照してください。
ページ読み込み時に発生するイベントを設定する方法として、以下の方法があります。
- bodyタグのonloadに記述する方法
- windowオブジェクトのonloadイベント(window.onload)を設定する方法
- window.addEventListener メソッドを利用する方法
この記事では3つの方法それぞれのコードを紹介します。
方法1: bodyタグのonloadに記述する方法
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function proc() {
elem = document.getElementById("output");
elem.innerText = "JavaScriptが実行されました。";
}
</script>
</head>
<body onload="proc();">
<div id="output"></div>
</body>
</html>
解説
bodyタグのonload属性に proc() を記述することで、ページ表示時にproc()関数を呼び出す動作となります。proc() 関数内でメッセージをid="output"のタグ内に表示しています。
方法2: JavaScriptでwindow.onload イベントにイベントハンドラを割り当てる
記述方法 a: 関数をイベントに設定する
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = onLoad;
function onLoad() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
関数化されていないため、ページ読み込み時に下記のコードが実行されます。windowオブジェクトのonloadイベントにonLoad関数を設定しています。
window.onload = onLoad;
ページ読み込み後に、onLoad関数が実行されメッセージが画面に表示されます。
function onLoad() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
記述方法 b: onloadイベントに直接関数を記述する
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = function onLoad() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
先のwindow.onload にイベントを設定する方式と動作は同じです。違いは、先のコードでは関数を別途定義し、onloadイベントに設定していますが、このコードでは、onloadイベントに設定する部分でonLoad関数も定義しています。
記述方法 c: 無名関数を利用する方法
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = function () {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
先のwindow.onload にイベントを設定する方式と動作は同じです。先の例では関数を別途定義し、onloadイベントに設定していますが、このコードでは、onloadイベントに設定する部分で関数を定義しています。関数は無名関数になっており関数名は設定されていません。
方法3: window.addEventListener メソッドを利用する方法
記述方法 a: 関数をaddEventListenerメソッドに与える方法
windows.addEventListener() メソッドを利用してload イベントに関数を登録するとページ読み込み時にJavaScriptを実行できます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.addEventListener("load", execFunction);
function execFunction() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
window.addEventListener("load", execFunction) の呼び出しでloadイベントにaddEventListenerの第二引数の関数(上記コードではexecFunction()関数)を割り当てます。
ページが読み込まれると、loadイベントに設定した関数(execFunction)が実行されます。
記述方法 b: 無名関数を利用してaddEventListenerを呼び出す方法
先ほどのwindow.addEventListener メソッドを利用するコードと同じ処理ですが、第二引数が関数名ではなく、匿名関数を与えています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.addEventListener("load", function () {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
window.addEventListener("load", /* 中略 */) の呼び出しでloadイベントにaddEventListenerの第二引数の関数を割り当てます。
上記のコードでは匿名関数が第二引数に与えられているため、ページが読み込まれると、引数に与えた匿名関数のコードが実行されます。
実行結果
上記の4つとも、HTMLファイルを表示すると、下図の画面が表示され、同じ実行結果となります。
補足: Scriptタグ内に関数化せずにJavaScriptのコードを記述した場合の動作について
下記のコードのように、scriptタグ内で関数化せずに、JavaScriptのコードを記述し、
さらにwindowオブジェクトのonloadイベントを用いずに記述した場合、scriptタグ内はページ読み込み時に実行されます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
しかし、javascript実行時には、ページ全体の読み込みが終わってることが保証されていないため、下記のコード部分で id="output"のタグが見つからない可能性があります。
target = document.getElementById("output");
この場合、target=nullとなるため、次行のでnullオブジェクトに対する操作エラーとなります。正しく実行させるためには、先の例のようにwindowオブジェクトのonloadイベントに設定する必要があります。
target.innerHTML = "JavaScriptが実行されました。";
または、下記のコードのように、outputタグより後ろにjavascriptのコードを設置し、javascript実行時には、id="output"のタグが読み込まれている状態にする必要があります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
</script>
</body>
</html>
A.W.S (Another World Story)
昼下がりの情報処理教室。
磨き込まれた床に春の陽が反射し、窓際の机まで淡くゆれていた。
チャイムから十分ほど経った休み時間、二年生のユイはノート PC を広げ、まだ蒸気の立つ紙コップのココアをそっと置いた。
キーボードをたたく指先には微かなチョコレートの香り。隣ではケンが椅子を半回転させ、スケッチブックの端でリズムを取りながら覗き込んでいる。
「ページを開いた瞬間に背景色を変えてみたいんだよね」
ユイが囁くように言って、コードを一行ずつ読み上げた。
window.addEventListener('load', ()=>{ document.body.style.backgroundColor='lemonchiffon'; });
ケンが目を細める。
「onload じゃなくて addEventListener にしたんだ。DOM が全部そろうまで待てるし、複数登録できるし」
「昨日の記事で見たの」
ユイは口角を上げた。
「それと比較のために読み込み途中で動くやつも試したい」
そう言って、もう一つテキストエディタに貼り付ける。
document.addEventListener('DOMContentLoaded', ()=>{ console.log('DOM Ready'); });
Enter キーを押した瞬間、PC のファンが小さく唸り、ブラウザーが開く。
真っ白なページがぱっとレモンシフォンに染まり、開発者ツールには
DOM Ready の文字列が並んだ。
「おお、ちゃんと二段構えで動くじゃん」
ケンが感嘆の声を上げると、背後の窓をかすめる風がカーテンをふわりと持ち上げた。遠くのグラウンドから歓声が聞こえ、春の匂いが漂い込む。
ユイは満足げに頷きながらも、すぐに眉をしかめる。
「でもさ、ユーザーに気付いてもらうには色が地味かな」
ケンはスケッチブックにさらさらとペンを走らせた。
「じゃあページ読み込み時にランダムで色を替える関数を書いてみる？」
ページに虹がかかるイメージを描いて見せるケン。ユイは笑いながら、画面に新しい行を挿入する。
const colors=['peachpuff','lavender','mintcream'];
colors[Math.floor(Math.random()*colors.length)]
プレビューを更新した途端、背景は薄い桃色へ。二人は顔を見合わせて「おいしそう」と同時に呟き、弾けるように笑った。
そのとき、後ろの席のリナが振り向き、スマホを掲げた。「ねえ、それ私の宿題ページにも仕込んでいい？」
「もちろん」とユイが即答する。
数分後。リナのスマホには淡いミントグリーンのレポートページ。だが提出用ポータルにアップした瞬間、背景色が濃い紫に変わり、教師用モニターにもその色が反映された。
教壇の端から「あれっ、表示バグか？」という声。生徒たちがざわめくなか、リナは青ざめ、ユイとケンは顔を見合わせる。
「ランダムカラーにこんな濃い色、入れてた？」
「入れてない…けど ‘rebeccapurple’ は可愛いと思って」
騒ぎを聞きつけた教務主任が駆け寄る。
「誰だ、提出画面をハロウィーン仕様にしたのは！」
教室が静まり返る。ユイがそっと手を挙げかけた瞬間、主任の後ろでプロジェクターのスクリーンがパステルイエローに切り替わり、
続けて淡い空色、ローズピンク――まるで万華鏡のように変わり続けた。リナが追加のロジックを実装したに違いない。
ざわっ――
主任が振り向き、映る文字を読む。
console.log('DOM Ready');
ケンが小声で呟く。「先生、JavaScript の実行結果もご覧のとおりで…」
次の瞬間、主任の肩が震えた。
「お前たち、せっかくなら学校説明会の日にやれ。保護者受けする色を用意しておけよ」
唖然とする三人を尻目に、主任は笑顔で立ち去る。背中越しに「リリースは慎重に！」とひとこと残して。
ユイは深く息を吐き、ココアを一口。
「まさかの OK？」
ケンは椅子を回し、ハイタッチを掲げる。
「仕様変更、仕様確定！」
リナも苦笑いで手を重ねた。窓の外では、午後のチャイムが鳴り始めている。
背景色はまた淡いレモンシフォンに落ち着き、教室に柔らかな光が戻った。
このページのキーワード
- ページ表示時、読み込み時に JSを実行するコードと実行結果
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
