script要素をまたいだ関数定義と実行

最近、javasriptを勉強しています。
わからない挙動があったので質問させてください。

htmlファイル内に、

<script type="text/javascript">

f();

function f(){
alert("hoge");
}

</script>

↑これが動いて、

<script type="text/javascript">

f();

</script>

<script type="text/javascript">

function f(){
alert("hoge");
}

</script>

↑これが動かないのはどうしてなのでしょう？

htmlの解析順序？の関係だと思うのですが、
詳しく解説しているページなどがあれば教えてください。

No.3 回答者： think49 回答日時： 2010/12/07 06:50

関数定義 (FunctionDeclaration) は実行コンテキストに入るときに実体化するので順序に依存しません。

http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma26 …

<script type="text/javascript">
f(); // 実行される
hoge(); // TypeError: undefined is not a function

function f () { alert('hoge'); };
var hoge = function () { alert('hoge'); };
</script>

異なるscript要素間の挙動については ECMAScript の範囲を超えているので、HTML 4.01, HTML5 あたりを読む必要があると思います。

HTML 4.01 Specification (ja)
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
HTML5 (including next generation additions still in development)
http://www.whatwg.org/specs/web-apps/current-wor …

No.2 回答者： yambejp 回答日時： 2010/12/03 16:56

前から順に評価されるからじゃない？

<script type="text/javascript">
window.onload=function(){
f();
}
</script>

<script type="text/javascript">
function f(){
alert("hoge");
}
</script>

こうすれば分かれててもいけると思います

この回答への補足

言葉足らずでした。。
補足させていただきます。

JavaScriptは先頭から順に評価されていくものと思います。
だとすると、

<script type="text/javascript">

f();

function f(){
alert("hoge");
}

</script>

このコードが動く理由がわかりません。
定義よりも前に実行しているのにも関わらず
関数が実行できてしまっています。

そして、なぜこれが動くのに、
下記のコードが動かないのかがわかりません。
f()は not definedになってしまいます。


<script type="text/javascript">

f();

</script>

<script type="text/javascript">

function f(){
alert("hoge");
}

</script>

さしあたってコードが動かなくて困っているというわけではなく、
なぜこれだと動かないのかが知りたくて質問させて頂きました。
このあたりについて、詳しい方、もしくは詳しく解説しているページ
をご存知でしたら教えてください。

よろしくお願いします。

補足日時：2010/12/06 17:27

この回答へのお礼

回答ありがとうございます。
onloadはページ読み込み完了後に実行されるので、
動くのは理屈として納得できます。

前から順に評価されていくというのも理解できます。
ただ、その場合、

<script type="text/javascript">

f();

function f(){
alert("hoge");
}

</script>

これがどうして動くのかわからなくなってしまいます。
関数を定義する前に実行しているのに問題なく動いてしまいます。
そして、これが動くのに、どうして<script>要素をまたぐと実行できないのかなぁ。。と思った次第です。

お礼日時：2010/12/06 17:26

No.1 回答者： metametamu 回答日時： 2010/12/03 15:50

http://journal.mycom.co.jp/news/2008/07/25/006/i …

ブラウザによるようですが、複数のスクリプトを同時に読み込まない仕様になっているようです。

この回答へのお礼

回答ありがとうございました。

お礼日時：2010/12/06 17:28