JavaScriptどこへ
<script>タグ
HTMLでは、JavaScriptコードはタグ<script>と</script>タグの間に挿入されます。
例
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
古いJavaScriptの例では、type属性<script type = "text / javascript">を使用する場合があります。
type属性は必要ありません。JavaScriptは、HTMLのデフォルトのスクリプト言語です。
JavaScriptの関数とイベント
JavaScriptfunctionはJavaScriptコードのブロックであり、「呼び出された」ときに実行できます。
たとえば、ユーザーがボタンをクリックしたときなど、イベントが発生したときに関数を呼び出すことができます。
関数とイベントについては、後の章で詳しく説明します。
<head>または<body>のJavaScript
HTMLドキュメントには任意の数のスクリプトを配置できます。
スクリプトは、、またはHTMLページ<body>のセクション、あるいはその両方に配置できます。<head>
<head>のJavaScript
この例では、JavaScriptがHTMLページfunctionのセクションに配置されています。<head>
ボタンがクリックされると、関数が呼び出されます（呼び出されます）。
例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
<body>のJavaScript
この例では、JavaScriptがHTMLページfunctionのセクションに配置されています。<body>
ボタンがクリックされると、関数が呼び出されます（呼び出されます）。
例
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
<body>要素の下部にスクリプトを配置すると、スクリプトの解釈によって表示が遅くなるため、表示速度が向上します。
外部JavaScript
スクリプトは外部ファイルに配置することもできます。
外部ファイル：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
同じコードが多くの異なるWebページで使用されている場合、外部スクリプトは実用的です。
JavaScriptファイルのファイル拡張子は.jsです。
外部スクリプトを使用するには、スクリプトファイルの名前をタグのsrc（ソース）属性に入れます。<script>
例
<script src="myScript.js"></script>
外部スクリプト参照を、<head>または<body>好きなように配置できます。
スクリプトは、<script>タグが配置されている場所に正確に配置されているかのように動作します。
外部スクリプトに<script>タグを含めることはできません。
外部JavaScriptの利点
スクリプトを外部ファイルに配置することには、いくつかの利点があります。
- HTMLとコードを分離します
- HTMLとJavaScriptを読みやすく維持しやすくします
- キャッシュされたJavaScriptファイルはページの読み込みを高速化できます
1つのページに複数のスクリプトファイルを追加するには、いくつかのスクリプトタグを使用します。
例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部参照
外部スクリプトは、次の3つの方法で参照できます。
- 完全なURL（完全なWebアドレス）
- ファイルパス（/ js /など）
- パスなし
この例では、完全なURLを使用してmyScript.jsにリンクしています。
例
<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>
ファイルパスの詳細については、「 HTMLファイルパス」の章を参照してください。