Web開発 - JavaScript：ページにJavaScriptを追加する方法

初めに

　JavaScriptを追加する方法は２つあります。本記事はその２つの方法をまとめます。

Index

初めに
Index
JavaScriptの追加方法の概要
内部のJavaScript
外部のJavaScript
参考

JavaScriptの追加方法の概要

　JavaScriptを追加する方法は２つあります。

方法	説明
内部の（インライン）JavaScript	HTMLファイル内にJavaScriptコードを直接記述する方法
外部のJavaScript	JavaScriptコードを別のファイルに保存し、HTMLからそのファイルを参照する方法

内部のJavaScript

　HTMLファイル内にJavaScriptコードを直接記述する方法です。<script>タグを使用して、HTMLと一緒にJavaScriptを埋め込むことができます。

（HTMLファイル）

<!DOCTYPE html>
<html>
<head>
  <title>内部JavaScriptの例</title>
</head>
<body>

  <h1>内部JavaScriptの例</h1>

  <script>
    // JavaScriptコードを直接記述
    console.log('これは内部JavaScriptです');
    alert('Hello, world!');
  </script>

</body>
</html>

外部のJavaScript

　JavaScriptコードを別のファイルに保存し、HTMLからそのファイルを参照します。<script>タグのsrc属性を使って外部ファイルを読み込みます。

（HTMLファイル）

<!DOCTYPE html>
<html>
<head>
  <title>外部JavaScriptの例</title>
  <script src="external_script.js"></script> <!-- 外部JavaScriptファイルの読み込み -->
</head>
<body>

  <h1>外部JavaScriptの例</h1>

  <!-- 外部スクリプトの内容はexternal_script.jsに記述される -->

</body>
</html>

（JavaScriptファイル）

// external_script.js

// JavaScriptコードを記述
console.log('これは外部JavaScriptです');
alert('Hello, world!');

　外部JavaScriptファイルは.js拡張子を持ち、HTMLファイルから相対パスまたは絶対パスで指定します。

　外部JavaScriptは次のメリット・デメリットを持ちます。

メリット	複数のHTMLファイルで同じJavaScriptコードを共有できることや、コードがより整理され、メンテナンスしやすくなる
デメリット	外部JavaScriptを読み込む際にネットワークリクエストが発生するため、初期読み込み時間が長くなる可能性がある