JavaScript 記述場所
目次
<script>タグ
HTMLでは、JavaScriptコードは<script>タグと</script>タグの間に挿入されます。
以下の例では、idが”demo”のHTML要素を見つけて、その要素の内容（innerHTML）を”My First JavaScript”に変更します。
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
古いJavaScriptの例では、type属性を使用することがあります：<script type="text/javascript">。
type属性は必須ではありません。JavaScriptはHTMLのデフォルトのスクリプト言語です。
JavaScriptの関数とイベント
JavaScriptの関数はJavaScriptコードのブロックであり、”呼び出される”と実行されることがあります。
たとえば、ユーザーがボタンをクリックしたときなどのイベントが発生したときに関数が呼び出されることがあります。
関数とイベントについては後の章で詳しく学びます。
<head>または<body>内のJavaScript
HTML文書には任意の数のスクリプトを配置できます。
スクリプトはHTMLページの<body>内、または<head>セクション内、あるいは両方に配置できます。
<head>内のJavaScript
この例では、JavaScript関数がHTMLページの<head>セクションに配置されています。
この関数はボタンがクリックされたときに呼び出されます：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>ヘッド内のJavaScriptデモ</h2>
<p id="demo">段落</p>
<button type="button" onclick="myFunction()">試してみる</button>
</body>
</html>
<body>内のJavaScript
この例では、JavaScript関数がHTMLページの<body>セクションに配置されています。
この関数はボタンがクリックされたときに呼び出されます：
<!DOCTYPE html>
<html>
<body>
<h2>ボディ内のJavaScriptデモ</h2>
<p id="demo">段落</p>
<button type="button" onclick="myFunction()">試してみる</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
<body>要素の最下部にスクリプトを配置すると、表示速度が向上します。スクリプトの解釈が表示を遅くするためです。
外部JavaScript
スクリプトは外部ファイルにも配置できます：
外部ファイル：myScript.js
<script src="myScript.js"></script>
同じコードを多くの異なるWebページで使用する場合、外部スクリプトは実用的です。
JavaScriptファイルの拡張子は.jsです。
外部スクリプトを使用するには、<script>タグのsrc（ソース）属性にスクリプトファイルの名前を記述します。
外部JavaScriptの利点
スクリプトを外部ファイルに配置することにはいくつかの利点があります：
- HTMLとコードを分離できること
- HTMLとJavaScriptを読みやすく保つことができること
- キャッシュされたJavaScriptファイルがページの読み込みを高速化できること
1つのページに複数のスクリプトファイルを追加するには、複数の<script>タグを使用します：
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部参照
外部スクリプトは3つの異なる方法で参照できます：
完全なURL（完全なWebアドレス）を使用して
ファイルパス（例：/js/）を使用して
パスを使用しない
この例では、myScript.jsへのリンクに完全なURLを使用しています：
<script src="https://www.w3schools.com/js/myScript.js"></script>
この例では、myScript.jsへのリンクにファイルパスを使用しています：
<script src="/js/myScript.js"></script>
この例では、myScript.jsへのリンクにパスを使用していません：
<script src="myScript.js"></script>