Perl/CGI研究室 'PERL-LABO'

自動的にonclickを追加するJavaScriptの研究

研究内容

リンクタグに、自動的にonclickを追加しちゃう研究です。

詳細

したいこと

リンククリックをカウントするには、次のようにリンクタグに onclick を追加する必要がありました。

全てのリンクタグにこれを追加するというのは、大変な作業です。 これを、自動化しちゃうことはできないでしょうか？

できます！

答えは、自動化できます。自分でonclickを追加しなくても、 JavaScriptによって、onclickを自動的に追加することができるのです。 ぶっちゃけ、答えは次のようなJavaScriptです。

<script type="text/javascript">
var all = document.all;
var n = all.length;
for (i = 0; i < n; ++i) {
	var el = all(i);
	var tag = el.tagName;
	if (tag == "A") {
		el.onclick = gocount;
	}
}
</script>

これをページのHTMLの最後にいれておくだけで、全てのリンクタグのonclickが自動的に設定されます。

最初の var all = document.all; は、ウェブページの中の全ての要素（リンクタグだけでなく、 H1タグとかTABLEタグとか、とにかく全て）を変数 all に入れるというものです。 要素全部を１つの変数に入れるとは、これまた目玉が飛び出しそうな内容ですが、 これをオブジェクト指向プログラムといいまして、すごく便利なものなのです。 そういうことができるんだ、と思ってください。

次の var n = all.length; は、要素の数を n に入れています。ここはなんとなく分かりますね。

次の for ループは、Perlでも良く出てきます。ここでは、全ての要素について順々に処理するという意味ですね。 Perlなら foreach と書きたいところですが、JavaScriptにはそれは無いのでforを使います。

forの中では、タグ名を取得し、Aタグなら（リンクタグなら）、onclickに、gocountという関数を設定しています。

スクリプトを別ファイルにして、読み込む

上記のスクリプトの最初の行と最後の行（scriptタグ）を除いたもの、 それに、肝心のクリックカウント用のJavaScript関数を次のようにして、 gocount.js というファイル名でファイルに保存しましょう。

var all = document.all;
var n = all.length;
for (i = 0; i < n; ++i) {
	var el = all(i);
	var tag = el.tagName;
	if (tag == "A") {
		el.onclick = gocount;
	}
}

function wget(url)
{
	// 準備
	var http = null;
	if (window.XMLHttpRequest) {	// Safari, Firefox など
		http = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {	// IE
		try { http = new ActiveXObject("Msxml2.XMLHTTP"); }	// IE6
		catch (e) {
			try { http = new ActiveXObject("Microsoft.XMLHTTP"); }	// IE5
			catch (e) { return null; }	// Error
		}
	}

	// 同期通信
	http.open("GET", url, false);
	http.send(null);
	return http.responseText;
}

function gocount()
{
	var el = document.activeElement;
	var url = el.href;
	wget("./gocount.cgi?" + url);
}

すると、HTMLの最後で、次のようにしてこのファイルを読み込むだけで、 リンクのクリック回数がカウントされるようになります！！簡単です。 この１行だけで。まさに魔法じゃありませんか？

<script type="text/javascript" src="gocount.js"></script>

テストしましょう

上記のようなスクリプトファイル読み込み用のタグを１行、このページの最後に入れてあります。 （onclick を設定するスクリプトは、ページの最後に置く必要があります。 ページの途中に置くと、そこから下のリンクのクリック回数がカウントされません。） それ以外には、特になにもしていません。 それでは、次のリンクをクリックしてみてください。（このリンクにはonclickは書いていません。 ごく普通のリンクです。）

ちゃんと、カウントされているかな…？

カウントされました。 今回作成した 「onclick自動追加スクリプト」によって、このページにあるリンク全てにonclickが自動設定されますので、 お気付きのように「ジャンプした回数はこちら」などのリンクがクリックされた回数も カウントされちゃっています。 （何度もクリックするとカウントされないことがありますが、それはキャッシュの関係でウェブアクセスが されていないのだと思われます。）

ここまでで作ったプログラムは、PerlとJavaScript合わせても、それほど長いものではありませんでした。 最終的には、たった１行、HTMLに追加するだけでリンククリック数がカウントされるようになりました。 スバラシイですね、プログラミングって。