外部js内の関数を、html内で実行する事には？

Question

jQuery(function($){
 function hoge(n){
  alert(n);
 }
});

この関数をhtmlから次のように呼びだそうとしたのですが
ReferenceError: hoge is not definedとなってalertが表示されませんでした。

<script>
 $(function(){
 	hoge(10);
	});
</script>

さらに「htmlから外部js内の関数呼び出し」みたいなキーワードで検索してみても
それらしいものがヒットしないのです
もしかして、htmlから外部js内の関数を呼び出すのは不可能（大変）な事なのでしょうか？

Answer 1

jQuery(function($){
    function hoge(n){
        alert(n);
    }
});

ここで定義されている hoge は、一つ外側の function の中にしか存在しないため、それ以外の場所では実行できません、不可能です。

例えば、次のように同じファイルであったとしても実行することはできません。

jQuery(function($){
    function hoge(n){
        alert(n);
    }
});
$(function(){
    hoge(10);
});

次のように、グローバルスコープ（function の中ではない一番外側）で定義すれば大丈夫です。

function hoge(n){
    alert(n);
}
$(function(){
    hoge(10);
});

ファイルが別でも可能です。もちろん script タグで関数が適宜されている js を読みこむ必要はあります。

<script src="hoge.js"></script>
<script>
$(function(){
    hoge(10);
});
</script>

Comments

[pandd8]

なるほど、そうだったんですね！
色々なパターンわかりやすかったです、
ありがとうございました。

Answer 2

別な関数の中で定義した関数は、その関数の外からアクセスすることはできません。

グローバルに定義すれば、別な場所からでも使えますが、方法としては大きく2つあります。

1. いちばん外側（jQuery(){…}より外）で関数を定義する
2. グローバル変数に代入する（window.hoge = hoge;）

Comments

[pandd8]

ありがとうございます
グローバル変数の方法も調べてみます！

Answer 3

こんにちわ。

htmlから外部js内の関数呼び出しという文言でgoogle先生に聞いてみました。
一番上のサイトがまさにこの件だと思うのですが、一度確認してみてください。

Comments

[pandd8]

ありがとうございます
そのページのパターンとこの場合の違い（失敗する理由）がわからなかったので途方にくれていたところでした。