初めてのJavaScript第二版　13章の例題をじっくりやってみる。（前半）

初めてのJavaScript第二版　P283　13.3　オブジェクトのカプセル化
この例題を考える。

オフィシャルのサポートページだと13-5がカプセル化とあるが13-4が正しい。
例13-4 オブジェクト検出を用いた不透明度の設定：http://www.marlin-arms.com/support/ljs2/index13.php
（13-5は「コンストラクタチューンとapplyメソッドによる継承」が正しく、以降1つずつズレている。）

この例題の動作

・div1,div2にそれぞれ画像があり、初期値として片方は透明で、他方は不透明とする。
・画像をクリックする度に、透明だった画像は徐々に不透明に、不透明だった画像は徐々に透明にする。

※透明度の設定について

IEの透明度：
style="filter: alpha(opacity=0)"（透明）
style="filter: alpha(opacity=100)"（不透明）

mozilla,safari：		//IE8もこちらということだが試してない。
style="opacity=0"（透明）
style="opacity=1.0"（不透明）

この例題の目的

・メソッドを直接実装せず外部関数に実装する。（透明度を保持し、セットする関数DivObj）
・ブラウザ間の相違について、対応を別関数で作る。（関数getOpacity）
・上記を利用して、getElementByTagNameをした後にブラウザに関わる処理はラップ（覆い隠す）する。

では、以下の順番でやってみる。

1.初期化：画面を開いたときに透明度を0と1にする。
2.getとsetを書く。
3.getのブラウザ緩衝関数を書く。
4.setのブラウザ緩衝関数を書く。
5.メインの関数を作る。
6.足りないところを追加する。
7.動かなかった場合は修正する。

1.初期化：画面を開いたときに透明度を0と1にする。

<body onload="setup()">
<div id="div1" style="opacity: 1.0; filter: alpha(opacity=100)"><img 略 /></div>
<div id="div2" style="opacity: 0.0; filter: alpha(opacity=0)"><img 略 /></div>
として、

function setup(){
	theElements = document.getElementByTagName("div");
	for (i = 0; i < theElements.length; i++){	//良く使う形
		var obj = theElements[i];
		if(obj.id){
			theobjs[obj.id] = new DivObj(obj);	//対象オブジェクトを受け取りget/setするオブジェクトは別divObj(obj)にする。
		}
	
	}


};

2.getとsetを書く。

function DivObj(obj){
	this.obj = obj;
	this.objGetOpacity = getOpacity;	//getするにもブラウザ間の相違を緩衝しなければならないので、それをカプセル化
	this.objSetOpacity(value) = setOpacity(value);	//getと同じ意味で。※本書ではifで分岐させてるけど私はsetOpacity側で分岐させてみる。
};

3.getのブラウザ緩衝関数を書く。

function getOpacity(){
	if(this.obj.style.filter){
		var filterString = this.obj.style.filter;
		var derivedVad = filterString.substring(filterString.indexOf(':')+1, filterString.indexOf( ')' ));
		return derivedVal / 100;
	}else{
		return this.obj.style.opacity;	
	}
};

4.setのブラウザ緩衝関数を書く。

function setOpacity(value){
	if(this.obj.style.filter){
		var opacity = value *100;
		value.style.filter = "alpha(opacity:" + opacity + ")";  //　alpha(opacity:90)　などが入る。
	}else{
		value.style.opacity = value;	
	}
};

5.メインの関数を作る。

時間が無いのでここまで。

あとはメソッドとして
objSetOpacity(value)
objGetOpacity()
を持たせて終わりだと思うのだが、どうも今の時点で動かない気がしてきたのでここからは次回。
ここまで書いて見て、DivObjでsetを分岐させた方が素直な気がしてきた。

後半に続く。

南極の図書館

ペンギンが寝ていた…。