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

関数定義 (FunctionDeclaration) は実行コンテキストに入るときに実体化するので順序に依存しません。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/10_Execution_Contexts.html#section-10.1.3

<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-html401j/cover.html
HTML5 (including next generation additions still in development)
http://www.whatwg.org/specs/web-apps/current-work/multipage/

回答No.2

yambejp

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

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

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

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

お礼

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

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

<script type="text/javascript">

f();

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

</script>

これがどうして動くのかわからなくなってしまいます。
関数を定義する前に実行しているのに問題なく動いてしまいます。
そして、これが動くのに、どうして<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>

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

よろしくお願いします。

回答No.1

metametamu

http://journal.mycom.co.jp/news/2008/07/25/006/index.html

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

お礼

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