2010-11-25 5 views
2

これは潜在的な問題を引き起こす可能性があります:Webページの一番下にスクリプトを置くことができますが、一番上から呼び出すことはできますか?

 
    <HTML> 
    <BODY> 
     ... 
     <INPUT name="xyz" onchange="myFunction();"> 
     ... 
    <SCRIPT> 
     function myFunction() 
     { 
      ... 
     } 
     </SCRIPT> 
    </BODY> 
    </HTML> 

ページの読み込みが遅く、フォームの下部にあるスクリプト部分が読み込まれる前にレンダリングされるとどうなりますか?ユーザーがテキストをINPUTボックスに入力すると、JavaScriptエラーが発生しますか?

+0

非常に簡単です - はい。とにかく、なぜこれをしたいのですか? –

+0

@Andrzej:JavaScriptのパフォーマンスに関するガイドラインの多くは、できるだけページ下部にスクリプトをロードするようアドバイスしています(例:[Yahoo performance rules](http://developer.yahoo.com/performance/rules.html))。それを行うインセンティブの –

+1

ちょうどこの小さなコードスニペットを見るだけで、体の終わりにスクリプトを読み込むよりも問題があります。 –

答えて

3

スクリプトを呼び出す前にロードする必要があります。なぜあなたはこのような何かにそれを変更しないでください:

<input name="xyz" id="myInput"> 
     ... 
    <script> 
     function myFunction 
     { 
      ... 
     } 

     window.onload = function() { 
      var myInput = document.getElementById('myInput'); 
      myInput.onchange = myFunction; 
     } 
     </script> 

このアプローチは、あなたのマークアップやスクリプトを分離し、一つの場所にあなたのjsのすべてを持つことができます。

1

これは動作しますが、HTMLをより多く読み込むとブラウザがJavaScriptを最後に解析するのに時間がかかります。その場合は、あなたの関数が定義されることはありませんし、あなたが得る...

MyFunctionを()が開いていると閉じ括弧を追加する必要が

注定義されていません(( & )myFunctionの後。

機能宣言は持ち上げられていますが、それらは含まれているスクリプトブロックにのみ吊り上げられます。

また、実際には小文字のタグを使用する必要があります。これは1998年ではありません。また、doctypeも役立ちます。最後に、インライン属性からイベントハンドラを削除してください。

0

スクリプトを実行する前にDOMでスクリプトを定義する必要があります。スクリプトが最下部にある場合は、使用する前にロードする必要があります。

1

JavaScriptの開発は長年にわたって変化しています。

あなたの元の質問は議論されているだけでなく、元の質問のテーマに戻ることができるだけでなく、方法論そのものです。

いくつかのJavaScriptのベストプラクティスでこの短い説明を読むことを強くお勧めします。 http://www.catswhocode.com/blog/best-practices-for-modern-javascript-development

関連する問題