English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本章では、JavaScriptをウェブページに統合する方法を学びます。
通常、ウェブページにJavaScriptを追加する方法は3種類あります：
で<script>およびスクリプトは本文部分の最後に配置されるべきであり、/script>タグ間にJavaScriptコードを挿入します。
を使用してイベント属性（例えばonclick、onkeypressなど）JavaScriptコードをHTMLタグ内に直接配置します。
外部JavaScriptファイルを作成し、<script>タグのsrc属性を使用してページにロードします。
HTMLでは、必ず<script>およびスクリプトは本文部分の最後に配置されるべきであり、/script>タグ間にJavaScriptコードを挿入します。
<script>
document.write("Hello World");
スクリプトは本文部分の最後に配置されるべきであり、/script>テストを見て‹/›注意：古いJavaScriptの例ではtype属性を使用する場合があります：<script type="text/javascript">。HTML5以降、type属性は必要ありません。JavaScriptはHTML5のデフォルトのスクリプト言語です。
HTMLドキュメントに任意の数のスクリプトを配置できます。
脚本可以放置在HTML页面的<head>スクリプトはHTMLページの
body>内のJavaScript<head>この例では、JavaScript関数がHTMLページの
部分に。
ボタンをクリックすると、この関数が呼び出されます：
<!DOCTYPE html>
<head>
<script>
<p id="output">これはパラグラフです<
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
スクリプトは本文部分の最後に配置されるべきであり、/script>
スクリプトは本文部分の最後に配置されるべきであり、/<head>内のJavaScript
<html>2head>/>JavaScript in Body<2h
>/<button type="button" onclick="myFunc()">Click<
>JavaScript in Head</p>
スクリプトは本文部分の最後に配置されるべきであり、/}テストを見て‹/›<p id="output">これはパラグラフです<<script>それぞれ
body>内のJavaScriptこの例では、JavaScript関数がHTMLページの
部分に。
ボタンをクリックすると、この関数が呼び出されます：
<!DOCTYPE html>
<html>2<h/>JavaScript in Body<2h
>/<button type="button" onclick="myFunc()">Click<
button>/p>
<script>
<p id="output">これはパラグラフです<
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
スクリプトは本文部分の最後に配置されるべきであり、/script>
スクリプトは本文部分の最後に配置されるべきであり、/}テストを見て‹/›html>スクリプトは本文部分の最後に配置されるべきであり、/<body>
内連（inline）でJavaScriptコードを配置することもできますイベント属性（例えばonclick、onkeypressなどのイベント属性（
<p onclick="this.innerHTML='Hello World';">This is First Paragraph (Click me)</p>テストを見て‹/›
しかし、大量のJavaScriptコードをインラインにすることは避けた方が良いです。なぜなら、JavaScriptはHTMLを混乱させ、JavaScriptコードのメンテナンスを難しくするからです。
JavaScriptコードを.jsエクステンションを持つ独立したファイルに配置し、以下で呼び出すことができます：<script>タグのsrc属性を使用してページに読み込んでください。
以下の例は外部のJavaScriptファイルを指しています：
<script src="myscript.js"></script>テストを見て‹/›
ページに複数のスクリプトファイルを追加するには、複数のスクリプトタグを使用してください：
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
必要に応じて、<head>または<body>外部スクリプト参照を配置します。
このスクリプトの動作は、まるでそれがその場所に正確に配置されているかのように見えます。<script>タグが配置されている場所と同じです。
注意：外部スクリプトファイルには含められません<script>タグ。
外部ファイルにスクリプトを配置することにはいくつかの利点があります：
JavaScriptとHTMLを分離します
HTMLとJavaScriptの読みやすさと保守性を高めます
キャッシュされたJavaScriptファイルはページの読み込み速度を向上させます
同一のスクリプトが複数のドキュメントで使用できます
ヒント：通常、外部JavaScriptファイルが初めてダウンロードされたとき、それはブラウザのキャッシュに保存されます（画像やスタイルシートと同じように）、そのため、Webページを作成するWebサーバーからこのファイルを複数回ダウンロードする必要はありません。読み込みが速くなります。
完全なURLまたは現在のウェブページに対する相対パスを使用して外部スクリプトを参照できます。
このサンプルでは、スクリプトに完全なURLをリンクしています：
<script src="https://ja.oldtoolbag.com/run/js/myscript.js"></script>テストを見て‹/›
このサンプルでは、現在のウェブサイト上の指定されたフォルダに配置されているスクリプトを使用しています：
<script src="/run/js/myscript.js"></script>テストを見て‹/›
「 HTML ファイルパス ”の章でファイルパスに関する詳細な情報を学びます。