JavaScriptコードをどこに配置しますか?
通常、JavaScriptコードはHTMLコードで使用され、JavaScriptコードはHTMLドキュメントのどこにでも配置できます。ただし、以下に説明するように、配置されている場所はJavaScriptコードの通常の実行に特定の影響を与えます。
<head> </head>の間に配置されます
htmlドキュメントに<head> </head>タグの間にJavaScriptコードを配置するのが一般的です。 HTMLドキュメントはブラウザによって上から下までロードされるため、<head> </head>タグの間にJavaScriptコードを配置すると、スクリプトを使用する必要がある前にロードされたことが保証されます。
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
...
JavaScriptコード
...
</script>
</head>
...
<body> </body>の間に配置されます
javaScriptコードが<body> </body>の間に配置される場合もあります。次の状況を想像してください。HTML要素を操作する必要があるJavaScriptコードがあります。ただし、HTML要素がロードされておらず、HTML要素を操作するときにJavaScriptコードによってエラー(オブジェクトが存在しない)を回避するために、HTMLドキュメントはブラウザによって上部から下までロードされるためです。したがって、このコードはHTML要素の背後に記述する必要があります。例は次のとおりです。
コードコピーは次のとおりです。
<html>
<head>
</head>
<body>
</body>
<div id = "div1"> </div>
<script type = "text/javascript">
document.getElementById( "div1")。innerhtml = "test text";
</script>
</html>
しかし、通常、ページ要素の操作は通常イベントによって駆動されるため、この状況はまれです。さらに、<html> </html>の外にJavaScriptコードを書くことはお勧めしません。
ヒント
HTMLドキュメントがXHTMLとして宣言されている場合、<スクリプト> </script>タグをCDATAセクション内で宣言する必要があります。そうしないと、XHTMLは<script> </script>タグを別のXMLタグに解析し、内部内のJavaScriptコードは正常に実行されない場合があります。したがって、厳格なXHTMLでJavaScriptを使用することは、次の例のように宣言する必要があります。
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
<![cdata [
JavaScriptコード
]]>
</script>
</head>
...
JavaScriptコードをHTMLドキュメントに書き込む上記の2つの方法は、HTMLドキュメント内のJavaScriptコードを参照する方法の両方です。内部参照に加えて、外部参照も使用できます。
JavaScriptコードへの外部参照
JavaScriptコード(<script> </script>タグを除く)をMyScript.jsなどのJSサフィックスと呼ばれる個別のドキュメントにし、HTMLドキュメント<script> </script>タグでSRC属性を使用してファイルを参照します。
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript" src = "myscript.js"> </script>
</head>
...
外部参照JavaScriptコードを使用した後、利点は明らかです。
1。JavaScriptコードで<! - ... //->を使用しないでください
2。醜いCDATAの使用は避けてください
3.パブリックJavaScriptコードは、他のHTMLドキュメントで再現できます。これは、JavaScriptコードの統一されたメンテナンスも助長します。
4.HTMLドキュメントは小さく、エンジンコレクションを検索するのに役立ちます
5。単一のJavaScriptファイルを圧縮して暗号化できます
6.ブラウザはJavaScriptファイルをキャッシュしてブロードバンドの使用を削減できます(複数のページがJavaScriptファイルを同時に使用する場合、通常は1回だけダウンロードする必要があります)
7. document.write(2> 1)などの複雑なHTMLエンティティの使用を避けてください。ドキュメントを作成せずに直接使用できます。
JavaScriptコードを外部ファイルに形成すると、サーバー上のHTTP要求の負担が増加します。非常に高い同時リクエストの環境では、これは良い戦略ではありません。さらに、外部JSファイルを参照する場合、ファイルの正しいパスに注意を払う必要があります。