1. HTML に Javascript を埋め込む方法は、<script> と </script> のタグペアの間に Javascript コードを直接配置します。<script /> タグの src 属性を使用して外部 js ファイルを作成し、配置します。イベント ハンドラー（例: <p onclick="alert('I am the Javascript running by the onclickevent')">Click me</p>
この URL は URL の本文として、次のような特別な JavaScript: プロトコルを使用します。<a href="javascript:alert('I am a javascript running by the javascript: protocol')">クリックしてください</a>
新しい JavaScript コードを作成するには、JavaScript 自体の document.write() メソッドを使用します。Ajax を使用して JavaScript コードを非同期に取得し、
3 番目と 4 番目のメソッドを実行します。特別に設定されている場合、ページはロードされません。
2. ページ上の Javascript の実行順序 ページ上の Javascript コードは HTML ドキュメントの一部であるため、ページが読み込まれるときに Javascript が実行される順序は、導入タグ <script /> が表示される順序になります。 <script /> タグ内または src 経由 インポートされた外部 JS は、そのステートメントが出現する順序で実行され、実行プロセスはドキュメントの読み込みの一部です。
各スクリプトで定義されたグローバル変数や関数は、後で実行されるスクリプトから呼び出すことができます。
変数呼び出しは事前に宣言されている必要があります。宣言されていない場合、取得される変数値は未定義になります。
<script type="text/javscrpt">//<![CDATA[
alert(tmp); //出力は未定義です
var tmp = 1;
アラート(tmp); //出力1
//]]></script>
同じスクリプト内で、関数定義を関数呼び出しの後に指定することはできますが、それが 2 つのコードにあり、関数呼び出しが最初のコードにある場合は、未定義関数エラーが報告されます。
<script type="text/javscrpt">//<![CDATA[
aa(); //ブラウザエラー
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //出力1
関数 aa(){alert(1);}
//]]></script>
document.write() は、スクリプト ドキュメントの場所に出力を書き込みます。ブラウザは、documemt.write() が配置されているドキュメントのコンテンツを解析した後、document.write() によって出力されたコンテンツの解析を続けます。その後、HTML ドキュメントの解析を続けます。
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("私は" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
アラート(3);
//]]></script>
test.js の内容は次のとおりです。
var tmpStr = 1;
アラート(tmpStr);
Firefox と Opera のポップアップ値の順序は次のとおりです: 1、2、私は 1、3
IE のポップアップ値の順序は 2、1、3 です。同時に、ブラウザは次のエラーを報告します: tmpStr が未定義です。その理由は、IE が SRC の Javascript コードの実行を待機していない可能性があります。したがって、document.write のときに次の行を実行する前に 2 が表示され、document.write('document.write("I am" + tmpStr)') が実行されて tmpStr が呼び出されるとき、tmpStr は定義されていません。 、エラーが発生します。
この問題を解決するには、HTML 解析の原則を使用して 1 つの HTML タグを解析し、次のタグを実行し、コードを分割してこれを実現します。
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("私は" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
アラート(3);
//]]></script>
このようにして、IE および他のブラウザーでの出力値の順序は一貫しています: 1、2、私は 1、3。
3. onloadを使用してページ上のJavaScriptの実行順序を変更する方法
<script type="text/javascript">//<![CDATA[
window.onload = f;
関数 f(){アラート(1);}
アラート(2);
//]]></script>
出力値の順序は2、1です。
複数の winodws.onload がある場合、解決策は次のようになります。
window.onload = function(){f();f1();f2();.... 。 }
レベル 2 DOM イベント タイプの使用
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}それ以外{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
defer は IE で使用できます。defer の機能はコードをロードし、ドキュメントがロードされた後に実行されます。ただし、window の制限はありません。 .onload は繰り返し使用できますが、IE でのみ有効なので、上記の例は次のように変更できます。
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("私は" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
アラート(3);
//]]></script>
このようにして、IE はエラーを報告せず、出力値の順序は 1、3、2、私は 1 になります。HTML
パーサーがスクリプトに遭遇すると、通常どおりドキュメントの解析を終了する必要があります。スクリプトが実行されるまで待ちます。この問題を解決するために、HTML4 標準では defer が定義されています。 defer を使用すると、ブラウザーに HTML ドキュメントの解析を続行し、スクリプトの実行を遅らせるように求められます。この遅延は、スクリプトが外部ファイルからロードされる場合に非常に役立ちます。そのため、ブラウザは実行を続行する前にすべての外部ファイルがロードされるのを待つ必要がなくなり、パフォーマンスが効果的に向上します。現在 IE は defer 属性をサポートする唯一のブラウザですが、遅延されたスクリプトは次の遅延されていないスクリプトまで遅延されるだけでなく、常にドキュメントの終わりまで遅延されるため、IE は defer 属性を正しく実装しません。これは、IE での遅延スクリプトの実行順序が非常にわかりにくく、後続の非遅延スクリプトで必要のない関数や変数を定義できないことを意味します。 IE でのすべての遅延スクリプトの実行時間は、HTML ドキュメント ツリーが確立された後、window.onload 前である必要があります。
Ajaxを活用しましょう。
xmlhttpRequest は外部ドキュメントの読み込みステータスを判断できるため、コードの読み込み順序を変更することができます。