コンテンツ，プレゼンテーション，ビヘイビアの分離

　しかし，ホームページに求める要求が大きくなればなるほど，HTMLコードがどんどん煩雑になり，保守性が大きく損なわれることになります。また検索エンジンのロボットにも大きな影響を与えてしまいます。そのため，コンテンツ，プレゼンテーション，ビヘイビアの分離の重要性が注目されるようになりました。

　コンテンツとはHTML内に記述されている情報そのものを表します。プレゼンテーションとは，見た目を表す部分を指します。具体的にはCSSがそれに相当します。ビヘイビアとは，JavaScriptに代表されるような動きを表します。

　これらのコンテンツ，プレゼンテーション，ビヘイビアが，HTMLの中にすべて混在していると，非常に煩雑になります。近年では，これらの概念を，ファイルとして完全に分離するコーディングスタイルが主流になってきました。

JavaScriptの完全分離

<div id="box">xxxx</div>

　ここでは，id属性に"box"がセットされたdiv要素をマウスでクリックしたら，"clicked!"と表示されたアラートウィンドウをポップアップさせるアプリケーションを想定します。

/* イベント・リスナのセット関数オブジェクトを定義 */
var addListener = function(elm, type, func) {
  if(! elm) { return false; }
  if(elm.addEventListener) { /* W3C準拠ブラウザ用 */
    elm.addEventListener(type, func, false);
  } else if(elm.attachEvent) { /* Internet Explorer用 */
    elm.attachEvent('on'+type, func);
  } else {
    return false;
  }
  return true;
};
　
/* HTMLがブラウザにロードされたときに実行する処理 */
var init = function() {
  var div = document.getElementById('box');
  var popup = function() { alert("clicked!"); };
  addListener(div, "click", popup);
};
　
/* windowオブジェクトにloadイベントが発生したらinit関数を実行 */
addListener(window, "load", init);

　このサンプルの最初にあるaddListenerは，前回紹介した，クロスブラウザ対策済みのイベントリスナセット用の関数オブジェクトです。

　次に，HTMLがブラウザにロードされたときに実行させたい処理を記述した関数オブジェクトを定義します。ここではinitという名前で関数オブジェクトを用意しました。この関数では，div要素がクリックされたら，"clicked!"と表示されたアラートウィンドウをポップアップさせる処理を，popupという名前の関数オブジェクトとして用意します。そして，スクリプトの冒頭で用意したaddListenerを使って，イベント・リスナをセットします。

　最後に，addListenerを使って，HTMLがブラウザにロードされたらinitを実行するよう，windowオブジェクトに対してloadイベントを補足するためのイベント・リスナをセットします。

　この枠組みを簡単に整理すると，次のようになります。

/* イベント・リスナのセット関数オブジェクトを定義 */
var addListener = function(elm, type, func) {...};
　
/* HTMLがブラウザにロードされたときに実行する処理 */
var init = function() {
  /* ここに，実際に実行させたいコードを記述します。
};
　
/* windowオブジェクトにloadイベントが発生したらinit関数を実行 */
addListener(window, "load", init);

　addListenerは汎用的に作ってありますので，とにかく無条件にスクリプトの最初に入れておいてください。次に，initという名前の関数オブジェクトを用意しますが，この中に，実際に実行させたいコードを記述します。最後に，windowオブジェクトに対してloadイベントが発生したらinitを実行するようaddListenerを実行させます。

　これで，これまでwindow.onloadを使って実現したことと同じことを，W3C DOMイベントモデルで実現することが可能となります。つまり，HTML内に一切のJavaScriptコードを入れることなく，jsファイルとして完全にコードを分離することができるようになります。

　今後，この枠組みを使っていきますので，しっかりと理解してください。