JavaScriptの実用例(5)

ドキュメントの内容を変化させるようなJavaScriptは、ページの最後の方で実行させたほうがよいという話までしました。

ですが、管理上、JavaScriptはすべてページの冒頭に記しておきたいという要求もあるはずです。JavaScriptをHTML文書のそこらへんにバラバラと書いてあると、あとで困ることも多くなりがちですから。とはいえ、ページの冒頭で、まだ表示もされていない要素のinnerHTMLを操作しようとしてもうまくいかないわけですから、どうしたらよいでしょう。

こういうときは、スクリプトが実行されるタイミングを指定しておけばよいです。具体的には、ページがすべてロードされ終わったら、その時点ではじめて一連の命令を実行してくれるように予約しておけばいいというわけです。

下のような書き方をします。

<script>
function do_something() {
  var a = document.getElementById('add1');
  a.innerHTML = '<table border="1"><tr><td bgcolor="yellow">AD here!</td></tr></table>';
}
window.onload = do_something;
</script>

functionは、一連の命令を「関数」という名前のものに仕立てて、あとでまとめて実行できる形にするためのものです。このfunction文そのものを実行(実行っていう言葉はここでは不正確なんですけど)している時点では、何も起こりません。あとで do_something っていう関数を別に呼び出したときに、はじめてこの関数の内容が実行されます。

window.onloadは、ページを全部ロードし終わったときに何かをさせたいときの書き方です。ここでは、「(今は何もしないけど)ページを全部ロードし終わったときにはdo_something関数を実行してね、ということを表現しています。

こういう書き方のスクリプトなら、ページの冒頭に書いておいても大丈夫です。

(実際のサンプル)

window.onloadのような仕組みを使って、「何かが起こった時に、何かをする」という動作をさせることを、「イベント駆動」といいます。今のサンプルのようなのは、ページのロードが終わったというイベントに反応して何かをした、と言い直せます。他にもWebブラウザ上で起こるイベントはいろいろあって、マウスボタンが押されたとき、要素の上にマウスカーソルが乗った時、キーボードが押されたとき、単に時間がたった時、と、様々なタイミングで「イベント」が起こっていて、それに反応するプログラムを書けるようになっています。

このwindow.onloadという書き方は、それなりに実用的に使えますが、ひとつ弱点があり、人によっては他の方法を好んで使うかもしれません。弱点というのは、window.onloadには関数をひとつしかセットできないとう点です。つまり、下のような書き方をしたときに問題になります。

<script>
window.onload = do_something;
window.onload = do_another_something;
</script>

このままだと、do_another_somethingだけが実行対象となり、その前に書いたdo_something関数は実行予約からは外れてしまいます。自分ひとりがJavaScriptを書くのなら、このふたつの仕事をさらに別の関数としてまとめてしまってそれを指定すればいいですし、別に大きな問題にはなりません。例えば下の通り。

<script>
function big_handler() {
  do_something();
  do_another_something();
}
window.onload = big_handler;
</script>

ですが、すでに誰かが書いたJavaScriptをそのページでは使用済で、さらに別の動作を付け足そうとしているときは、すでにどんなイベントに仕事が割り当て済みなものか、簡単に把握ができません。window.onloadイベントを気ままに書き換えてしまうと、すでに実現していたある機能が消えてしまうこともあるでしょう。

window.onloadを使うのは、実は少し旧式のやりかたなのです。addEventListenerというものを使えば上のような問題も起こさずにさらにスマートな書き方ができるのですが、某IEとの互換性について少し余計なことを考慮しなければなりませんし、この場ではこれ以上書きません。

ということで、JavaScriptを実用的に使うひとつの例として、ページ内容の一部をHTML直書きでなくJavaScriptに任せることについて、何回かに分けてざっと書きました。

広告を非表示にする