http://q.hatena.ne.jp/1224819924
で質問したのですが、回答なしなので自分でつくりはじめています。それで下記のスクリプトなんですが、head の中では動かず、下のほうにおくと動きます。仕様なのでしょうか? 知らないのでどじを踏んでいる可能性が高いのです。head 内でも動く方法教えてください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="5">prototype のテストです。</title>
<script src="prototype-1.6.0.2.js"></script>
<script>
function linkCheck(e) {
alert('yahoo link clicked');
}
t = document.getElementsByTagName('a')[0];
Event.observe($(t),'click',linkCheck);
</script>
</head>
<body>
<div id="test">
<h1>test</h1>
</div>
<a href="http://www.yahoo.co.jp"> yahoo </a>
<br />
ここにスクリプトがあると動く
</body>
</html>
HTML と JavaScript は最初から順に読み込みながら評価されます。
今のままだと
t = document.getElementsByTagName('a')[0]; Event.observe($(t),'click',linkCheck);
この部分が評価されたときにはまだ a要素が評価されていないので t は空になります。
onload = function() { t = document.getElementsByTagName('a')[0] ; Event.observe($(t),'click',linkCheck) ; }
のようにすると HTML を読み終わってから文を実行することができます。
書く場所で動いたり動かなかったりするのは、
scriptが即座に実行されるため。
head部に置いてdocument.getElementById~とか実行しても、その対象がまだ読み込まれていないのでエラーになります。
window.onload=function(){ ・・・ }
みたいな書き方にすればhead部に書いてもページのロード完了イベントを契機に実行されるので、一応は解決します。
(例では手抜きしましたが、addEventListenerやattachEventを使った方がスマートです。)
ただし、onloadが起こる前にも画面のレンダリングは開始しているので読み込みにもたついていると、Event.observeの前にリンクをクリックされちゃう事もあり得ます。重たいページ/サーバではイマイチな方法です。
私的にはこの手の仕組みはページ最下部に置くのが常套化しています。
※Mozila系だけを動作対象にするなら、DOMContentLoadedというイベントで実行すればonloadより早くて確実なタイミングで実行できます。
jQueryならDOMContentLoadedに加えてIEやsafari向けにも色々やって、同等のタイミングで実行させる事ができるようです。
http://www.mikage.to/jquery/jquery_basic.html
「HTMLとコードの分離」の部分。
ありがとうございます。下においたほうがいいということですね。