JavaScript コードは HTML コードのどこに配置する必要がありますか?

JavaScript コードは HTML コードのどこに配置する必要がありますか? _JavaScript スキル

WBOY

リリース： 2016-05-16 16:33:49

オリジナル

1204 人が閲覧しました

JavaScript コードをどこに配置しますか?

通常、JavaScript コードは HTML コードとともに使用され、JavaScript コードは HTML ドキュメント内のどこにでも配置できます。ただし、以下で詳しく説明するように、配置場所は JavaScript コードの通常の実行に一定の影響を与えます。

を

の間に配置

HTML ドキュメントのタグの間に JavaScript コードを配置するのが一般的です。 HTML ドキュメントはブラウザによって上から下にロードされるため、タグの間に JavaScript コードを配置すると、スクリプトが使用される前に確実にロードされます。

コードをコピーコードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">

…

JavaScript コード

…

....

をの間に配置

JavaScript コードがの間に配置される場合もあります。次の状況を想像してください。HTML 要素を操作する必要がある JavaScript コードがあります。ただし、HTML ドキュメントはブラウザによって上から下に順番に読み込まれるため、HTML 要素が読み込まれる前に JavaScript コードが HTML 要素を操作してエラー (オブジェクトが存在しない) を報告するのを防ぐために、このコードには後で HTML 要素に書き込む例は次のとおりです:

コードをコピーコードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">

document.getElementById("div1").innerHTML="テストテキスト";

しかし、通常、ページ要素に対する操作はイベントによって駆動されるため、上記の状況はまれです。また、の外に JavaScript コードを記述することはお勧めしません。

ヒント

HTML ドキュメントが XHTML として宣言されている場合、<script></script> タグを CDATA セクション内で宣言する必要があります。そうしないと、XHTML は <script></script> タグを解析します。内部の JavaScript コードは正しく実行されない可能性があります。したがって、厳密な XHTML で使用される JavaScript は、次の例のように宣言する必要があります:

コードをコピーコードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">

JavaScript コード

]]>

....

HTML ドキュメントに JavaScript コードを記述する上記の 2 つの方法は、どちらも HTML ドキュメント内で JavaScript コードを参照する方法です。内部基準に加えて、外部基準も使用できます。

外部参照 JavaScript コード

JavaScript コード (<script></script> タグを除く) を別のドキュメントに作成し、myscript.js などの js 接尾辞を付けた名前を付けて、HTML ドキュメント<script><に配置します。 /script> src 属性を使用してファイルを参照します: <p> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="69237" class="copybut" id="copybut69237" onclick="doCopy('code69237')">コードをコピー<u></u></a> コードは次のとおりです:</span></div> <div class="codebody" id="code69237"> <html><br> <頭><br> <script type="text/javascript" src="myscript.js"></script>

....

外部参照 JavaScript コードを使用すると、その利点は明らかです。
1. JavaScript コードで
の使用を避ける 2. 醜い CDATA
の使用を避ける 3. パブリック JavaScript コードは他の HTML ドキュメントで再利用できるため、JavaScript コードの統合メンテナンスも容易になります
4.HTML ドキュメントは小さいため、検索エンジンに含められやすくなります
5. 単一の JavaScript ファイルを圧縮および暗号化できます
6. ブラウザーは JavaScript ファイルをキャッシュして、帯域幅の使用量を削減できます (複数のページで JavaScript ファイルを同時に使用する場合、通常、ダウンロードは 1 回だけ必要です)
7. 複雑な HTML エンティティの使用を避ける。たとえば、document.write(2<1)

を記述せずに、document.write(2>1) を直接使用できます。

JavaScript コードを外部ファイルに形成すると、サーバーの HTTP リクエストの負荷も増加します。これは、同時リクエストが非常に多い環境では良い戦略ではありません。また、外部 js ファイルを参照する場合は、ファイルの正しいパスに注意する必要があります。