Javascript-placement
JavaScript-HTMLファイルでの配置
HTMLドキュメントのどこにでもJavaScriptコードを含めることができる柔軟性があります。 ただし、HTMLファイルにJavaScriptを含める最も好ましい方法は次のとおりです-
- <head> … </head>セクションのスクリプト。
- <body> … </body>セクションのスクリプト。
- <body> … </body>および<head> … </head>セクションのスクリプト。 *外部ファイルにスクリプトを作成し、<head> … </head>セクションに含めます。
次のセクションでは、さまざまな方法でJavaScriptをHTMLファイルに配置する方法を説明します。
<head> … </head>セクションのJavaScript
ユーザーがどこかをクリックしたときなど、何らかのイベントでスクリプトを実行したい場合は、次のように頭にそのスクリプトを配置します-
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello"/>
</body>
</html>このコードは、次の結果を生成します-
<body> … </body>セクションのJavaScript
スクリプトがページのコンテンツを生成するように、ページの読み込み時に実行するスクリプトが必要な場合、スクリプトはドキュメントの<body>部分に配置されます。 この場合、JavaScriptを使用して定義された関数はありません。 次のコードを見てください。
<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>このコードは、次の結果を生成します-
<body>および<head>セクションのJavaScript
次のようにJavaScriptコードを<head>セクションと<body>セクションにまとめて配置できます-
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello"/>
</body>
</html>このコードは、次の結果を生成します-
外部ファイルのJavaScript
JavaScriptをより広範囲に使用し始めると、サイトの複数のページで同一のJavaScriptコードを再利用する場合があることに気付くでしょう。
複数のHTMLファイルで同一のコードを維持することに制限されません。* script *タグは、外部ファイルにJavaScriptを保存し、それをHTMLファイルに含めることができるメカニズムを提供します。
*script* タグと *src* 属性を使用して、HTMLコードに外部JavaScriptファイルを含める方法を示す例を次に示します。<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>外部ファイルソースからJavaScriptを使用するには、すべてのJavaScriptソースコードを拡張子「.js」の単純なテキストファイルに記述し、上記のようにそのファイルを含める必要があります。
たとえば、 filename.js ファイルに次のコンテンツを保持し、filename.jsファイルを含めた後、HTMLファイルで sayHello 関数を使用できます。
function sayHello() {
alert("Hello World")
}