HTMLにJavaScriptを埋め込む | 基本の書き方 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

HTMLにJavaScriptを埋め込むとは？

HTML文書の中にJavaScriptコードを埋め込むことで、Webページに動的な機能を追加できます。JavaScriptは、ユーザーの操作に応じて動作するインタラクティブなWebページを作るために使われます。これには、ボタンをクリックしたときに何かを表示したり、フォームの入力内容を検証したりする機能が含まれます。

HTMLにJavaScriptを埋め込む方法

HTMLにJavaScriptを埋め込む方法は主に2つあります。

  • 内部スクリプト: HTMLファイルの中に直接JavaScriptコードを書く方法。
  • 外部スクリプト: JavaScriptコードを外部のファイルに書いて、それをHTMLから読み込む方法。

「HTMLにJavaScriptを埋め込む」実行例

以下は、内部スクリプトを使ってJavaScriptを埋め込む例です。ボタンをクリックすると、「Hello, JavaScript!」というメッセージが表示されます。

プログラムの解説

HTMLコードの解説

<button onclick="showMessage()">「Hello, JavaScript!」を表示</button>
<div id="output"></div>
<script>
    function showMessage() {
        document.getElementById("output").innerHTML = "Hello, JavaScript!";
    }
</script>

このHTMLコードでは、<button>タグを使ってボタンを作成しています。onclickイベントが発生すると、showMessage()関数が実行され、メッセージが表示されます。また、<script>タグ内にJavaScriptコードを直接記述しています。これが「内部スクリプト」と呼ばれる方法です。

JavaScriptコードの解説

function showMessage() {
    document.getElementById("output").innerHTML = "Hello, JavaScript!";
}

JavaScriptコードでは、showMessage()という関数を定義しています。この関数は、ボタンがクリックされたときに実行され、document.getElementById("output")を使って、id="output"の要素に「Hello, JavaScript!」というテキストを表示します。

外部スクリプトとしてJavaScriptを埋め込む方法

内部スクリプトに対して、外部スクリプトを使うと、JavaScriptコードを別のファイルに記述し、それをHTMLにリンクさせることができます。以下は、その方法の例です。

外部スクリプトの例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部スクリプトの例</title>
</head>
<body>

    <button onclick="showMessage()">「Hello, JavaScript!」を表示</button>
    <div id="output"></div>

    <script src="script.js"></script>

</body>
</html>

上記の例では、HTMLファイルに<script src="script.js">と記述することで、外部のscript.jsファイルを読み込みます。このscript.jsファイル内にJavaScriptコードを書きます。

script.js の内容

function showMessage() {
    document.getElementById("output").innerHTML = "Hello, JavaScript!";
}

外部スクリプトのコードは内部スクリプトと同様に記述され、HTMLファイルとは別の場所に保存されます。この方法は、コードの分離や管理の効率化に役立ちます。

まとめ

HTMLにJavaScriptを埋め込む方法には、内部スクリプトと外部スクリプトがあります。内部スクリプトはシンプルで、HTMLファイル内に直接JavaScriptコードを記述しますが、外部スクリプトは、JavaScriptコードを別のファイルに分けることで、コードの管理がしやすくなります。どちらを使うかは、プロジェクトの規模や管理のしやすさによって選択します。

スポンサーリンク