カテゴリー: JavaScript

これは大きい順や小さい順に並び替えるのではなく単純に順番を逆にする方法です。

JavaScriptで、大きい順や小さい順に並び替えたいとき（ソート）には
sort関数を使いますが、今回は触れません。

テーブル（表）の順序を逆にする関数

var swap=function(id){
	var elem=document.getElementById(id);
	if(!elem){return;}

	var tr_elems=elem.getElementsByTagName('tr');
	var min=0,max=tr_elems.length-1;

	while(min<max){
		var td_min=tr_elems[min].getElementsByTagName('td');
		var td_max=tr_elems[max].getElementsByTagName('td');
		var tmp1=td_min[0].innerHTML;
		var tmp2=td_min[1].innerHTML;
		td_min[0].innerHTML=td_max[0].innerHTML;
		td_min[1].innerHTML=td_max[1].innerHTML;
		td_max[0].innerHTML=tmp1;
		td_max[1].innerHTML=tmp2;
		min++;
		max--;
	}
}

“JavaScriptで表の並び替え” の続きを読む

addEventListener と attachEvent はオブジェクトにイベントを追加する関数です。

この２つは起動時に、window.onload と併用しても使えます。

window.onload は、複数書くと上書きされて消えてしまうため最後の１個だけが作動しますが、この関数を使うことで起動時の関数を複数動作させられます。

addEventListener

addEventListener は Internet Explorer 以外で使えます。

attachEvent

attachEvent は Internet Explorer と Opera で使える関数で addEventListener と同等の働きをします。

Internet Explorer とそれ以外のブラウザの両方に対応させるには

function ev(elem, event, func, useCapture){
	if(elem.addEventListener){
		elem.addEventListener(event, func, useCapture);
	}else if(elem.attachEvent){
		elem.attachEvent('on'+event, func);
	}
}

または

function ev(elem, event, func, useCapture){
	try{
		elem.addEventListener(event, func, useCapture);
	}catch(e){
		elem.attachEvent('on'+event, func);
	}
}

という形で関数を作って、次のように使います。

ev(window, 'load', function(){alert();}, false);

window.addEventListener と window.attachEvent は、window.onload と一緒に使うことも出来ます。

その場合は、window.onload の後に、この関数でイベントを追加する形になります。
ですから、呼び出される順番は、window.onload で定義した関数より後になります。

起動時に、window.onload と併用する例

<script type="text/javascript">

window.onload=function(){
	/* 既に window.onload で起動スクリプトが指定されているとする */
}

/* 起動時のアクションを追加 */

function ev(event , func, useCapture){
	if(window.addEventListener){ 
		window.addEventListener(event, func, useCapture);
	}else if(window.attachEvent){ 
		window.attachEvent('on'+event, func);
	}
}

function addAction(){
	/* 起動時に実行したい処理 */
}

/* このように関数を別に定義して、関数名を入れても動作する */
ev('load', addAction, false);

</script>

Internet ExplorerのDOM操作で下のように、styleタグやscriptタグにtextNodeを
appendChildしようとするとエラーになります。そういう時の対処法です。

var css=document.createElement('style');
css.setAttribute('type','text/css');

var str=document.createTextNode('div.entryInfo{clear:both}');
css.appendChild(str);
var head=document.getElementsByTagName('head');
head[0].appendChild(css);

“DOMでIEのstyleタグやscriptタグに書込む法” の続きを読む

オブジェクト – 猫のスライドショーを作る４のつづき。

前回、関数もオブジェクトである。と軽く触れましたが、関数の初期化と使い方について、書きます。

“関数 – 猫のスライドショーを作る５” の続きを読む