@blog.justoneplanet.info

この記事のソースは自由にご利用ください。またサンプルソースに全角のダブルクォーテーションが含まれていますが半角に直してご利用ください。（仕様上の為、ご了承ください）

■サンプル

下記のリンクをクリックすると選択数値に応じた面積などがアラートされます。

底辺の長さ：	1 2 3 4 5 6 7 8 9
高さ：	1 2 3 4 5 6 7 8 9

三角形	面積	公式
四角形	面積	公式

■サンプルスクリプト

function figure(NAME){
	this.name = NAME;
	this.alert = function(){
		alert(this.name);
	}
}
function triangle(){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2 / 2);
	}
}
function square(){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2);
	}
}
triangle.prototype = new figure("底辺×高さ÷2");
/*この記述によりfigureクラスのメソッドがtriangleクラスのインスタンスでも使用可能になる*/
square.prototype = new figure("縦×横");
/*この記述によりfigureクラスのメソッドがsquareクラスのインスタンスでも使用可能になる*/
var tri = new triangle();
var sqr = new square();

■サンプルHTML

<form action="#" name="area">
底辺の長さ
<select name="num1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
高さ
<select name="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
<table>
<tr>
<th>三角形</th>
<td><a href="javascript:alert(tri.getArea());">面積</a></td>
<td><a href="javascript:tri.alert();">形</a></td>
</tr>
<tr>
<th>四角形</th>
<td><a href="javascript:alert(sqr.getArea());">面積</a></td>
<td><a href="javascript:sqr.alert();">形</a></td>
</tr>
</table>

■解説

人にもよるがcallを使うよりも直感的にスクリプトが書ける

■ソース

以下のコードをHTMLのスクリプトの一番最初に記述する（読み込む）

function addListen(elm, type, func){
    if(!elm){
        return false;
    }
    if(elm.addEventListener){
        elm.addEventListener(type, func, false);
    }
    else if(elm.attachEvent){
        elm.attachEvent('on' + type, func);
    }
    else{
        return false;
    }
    return true;
}

でも、もっと素敵なコードは以下のようになる。ブラウザ判定は1回あれば十分なのでロード時に実装に合わせた関数が定義される。

var addListen = (function(){
	if(window.addEventListener){
		return function(elm, type, func){
			elm.addEventListener(type, func, false);
		}
	}
	else if(window.attachEvent){
		return function(elm, type, func){
			elm.attachEvent('on' + type, func);
		}
	}
	else{
		return new Function();
	}
})();

■解説

• addListenの引数のelmには要素（windowやdocument.getElementById(‘id_name’)）を、typeにはイベントの種類（loadやclickなど、イベントハンドラからonをはずしたもの）を文字列として、funcにはイベント発生時の処理する関数を渡す
• addEventListener()はIEには実装されていないので、IEは実装されているattachEvent()を使う必要があり、条件分岐している
• addEventListener(type, func, false)の第三引数には「true」もしくは「false」が入り、どのフェーズでイベントが実行されるかを指定する
• IE用の記述、attachEvent(‘on’ + type, func)の第一引数はイベントハンドラと同じスペルの文字列で指定する。なおIEには後述するキャプチャー・フェーズが存在しない

■例

以下のようにすると、ロード時にアラートが実行される。

<script type="text/javascript">
function addListen(elm, type, func){
    if(!elm){
        return false;
    }
    if(elm.addEventListener){
        elm.addEventListener(type, func, false);
    }
    else if(elm.attachEvent){
        elm.attachEvent('on' + type, func);
    }
    else{
        return false;
    }
    return true;
}
addListen(
    window,
    "load",
    function(){
        alert('test');
    }
);
</script>

■では特定の要素にイベントリスナを使うには…

以下のようにしたいが、このままヘッド内に記述するとエラーが起こる。

addListen(
    document.getElementById('test'),
    "click",
    function(){
        alert('test');
    }
);

実行される時点ではドキュメントオブジェクトは存在しないためである。これを解決するためには…

addListen(window, "load", init);
function init(){
    addListen(
        document.getElementById('test'),
        "click",
        function(){
            alert('test');
        }
    );
}

とするか、グローバル空間を節約したいなら、以下のように書いてみるのもイイかもしれない。

addListen(
    window,
    "load",
    function(){
        addListen(
            document.getElementById('test'),
            'click',
            function(){
                alert('test');
            }
        );
    }
);

但し、最後のコードはIEでメモリリークが起こるらしい。

■メリット

• イベントハンドラでは同要素に対する特定の指定は1回しか記述できないが、イベントリスナを使った場合は何回でも可能である。これはライブラリやフレームワークを使ったり、分業してスクリプトを書いている場合に非常に有用である
• HTML内の<body onload=”alert(‘test’)”>とwindow.onloadが衝突したりする事が無い

■おまけ（フェーズについて）

W3C DOMイベントモデルにおいてイベントは外側のBOXから指定の要素に伝わって行き（この段階がキャプチャーフェーズ）、ターゲットに届いたら、一番外側のBOXに戻る（この段階がバブリング・フェーズ）

■Internet Explorer Developer Toolbar

言語：

英語

料金：

無料

機能：

・ドキュメントオブジェクトモデル（DOM）を探して、修正できる（修正については未検証）

・ウェブページの上で特定の要素をレンダリングビュー上で選べる

・HTMLに、クラス名やIDをはじめ、様々な属性を追加できる

・要素のアウトライン（枠線）を表示できる（制作時のコーディング補助として有用）

・バリデートできる（HTML、CSSなど）

・ブラウザ上にイメージの様々な情報（サイズなど）を表示できる

・キャッシュやクッキーをコントロールできる

・カラーピッカーが使える

■IE WebDeveloper

言語：

英語

料金：

有料（トライアル15日、無料）

機能（未検証）：

・JavaScriptコンソールがついているらしい

・HTTP通信がモニターできるらしい（但しこれは別のフリーツールがある）

・おおまかに言ってしまうとJavaScriptコンソールが使える分だけ、こちらが上手なようだ

■コメント

前回、IEでのデバッグに困ると書きましたが、一応はこのようにデバッグツールもあるみたい

しかし、Internet Explorer Developer Toolbarでは非同期通信のデバッグなどJavaScriptのデバッグは出来ないようなので、やはりFirebug（Firefox）の方が一歩も二歩も開発しやすい気はする。

IE WebDeveloperは有料という非常に高いハードルがネックではあるが使ってはみたいとおもう。

■要点

プリントアウトしないと理解できないような資料は作ってはいけない

■理由

• 出力しないと理解できない＝分かりづらい資料
• 時間の無駄＝この手の資料は自己満足が多い（パワポのアニメーションとか）
• 紙の無駄＝資源は大切にしよう