この記事では、JavaScriptの挿入方法と場所について説明します。 基本的な内容のこの記事はW3Schools JavaScript Where To ドキュメントを参考にまとめたものです。
태그
HTMLでは、JavaScriptコードは와 タグ間に挿入されます。
<script>
document.getElementById("demo").innerHTML = "나의 첫 번째 JavaScript";
</script>古いJavaScriptの例では、タイプ属性を使用できます。
しかし、type属性は必要ありません。 JavaScriptはHTMLのデフォルトのスクリプト言語です。
JavaScript関数とイベント
JavaScript 関数 (JavaScript function) は、JavaScript コードブロックに「呼び出し」されると実行されます。
たとえば、ユーザーがボタンをクリックしたときなど、イベントが発生したときに関数を呼び出すことができます。
またはにジャスクリプトを挿入
数に関係なく、HTML文書にスクリプトを配置できます。
スクリプトはHTMLページのまたはセクションまたはその両方に挿入できます。
にJavaScriptを挿入する
次の例では、JavaScript関数はHTMLですセクションに挿入されます。
ボタンをクリックすると関数が呼び出されます。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "단락 바뀜.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">단락</p>
<button type="button" onclick="myFunction()">시도하기</button>
</body>
</html>例：
にJavaScriptを挿入する
次の例では、JavaScript関数はHTMLですセクションに配置されます。
ボタンをクリックすると関数が呼び出されます。
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">문단</p>
<button type="button" onclick="myFunction()">시도하기</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "문단이 바뀜.";
}
</script>
</body>
</html>例：
スクリプトの解釈により表示速度が遅くなる可能性があるため、スクリプトを要素の下部に配置すると表示速度が向上します。
外部JavaScript
スクリプトを外部ファイルに配置することもできます。
外部ファイル：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}同じコードを複数のWebページで使用する場合、外部スクリプトは実用的です。
JavaScriptファイルの拡張子は.jsです。
外部スクリプトを使用するには 태그의 src(source) 속성에 스크립트 파일명을 입력합니다.
例：
<script src="myScript.js"></script>外部スクリプトリファレンスまたはに置くことができます。
そのスクリプトは 태그가 위치한 곳에 있는 것처럼 작동합니다.
外部スクリプトは 태그를 포함할 수 없습니다.
外部JavaScriptの利点
スクリプトを外部ファイルに配置することにはいくつかの利点があります。
- HTMLとコードを分離します。
- HTMLとJavaScriptを読みやすく保守しやすくなります。
- キャッシュされたJavaScriptファイルはページの読み込み速度を向上させることができます。
複数のスクリプトファイルを XNUMX ページに追加するには、複数のスクリプトタグを使用します。
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>外部参照
外部スクリプトは3つの方法で参照できます。
- 完全なURLへ（フルWebアドレス）
- ファイルパス（例：/ js /）
- パスなし
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>