HTMLとJavaScriptの連携：基本的な方法

HTMLとJavaScriptを連携させることで、ダイナミックでインタラクティブなホームページを作成することができます。この記事では、HTMLで始めるホームページ作成の基礎として、基本的なHTMLとJavaScriptの連携方法について解説します。

1. JavaScriptの基本的な挿入方法

JavaScriptをHTMLに挿入するには、<script>タグを使用します。次の例では、簡単なアラートボックスを表示するJavaScriptコードを挿入しています。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptの基本</title>
</head>
<body>
    <script>
        alert('Hello, World!');
    </script>
</body>
</html>

2. 外部ファイルの利用

さらに、JavaScriptコードを外部ファイルに分けることで、コードの管理がしやすくなります。外部ファイルを読み込むには、<script>タグのsrc属性を使用します。

<!DOCTYPE html>
<html>
<head>
    <title>外部ファイルの利用</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

3. DOM操作

また、JavaScriptを使用してHTMLの要素を操作することができます。例として、ボタンをクリックしたときにテキストを変更するコードを以下に示します。

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作</title>
</head>
<body>
    <h1 id="myHeading">こんにちは</h1>
    <button onclick="changeText()">テキストを変更</button>
    
    <script>
        function changeText() {
            document.getElementById('myHeading').innerText = 'こんにちは、世界！';
        }
    </script>
</body>
</html>

4. イベントリスナーの活用

さらに、イベントリスナーを活用することで、より柔軟なイベントハンドリングが可能になります。以下は、addEventListenerメソッドを使用して同じ目的を達成する例です。

<!DOCTYPE html>
<html>
<head>
    <title>イベントリスナーの活用</title>
</head>
<body>
    <h1 id="myHeading">こんにちは</h1>
    <button id="myButton">テキストを変更</button>
    
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            document.getElementById('myHeading').innerText = 'こんにちは、世界！';
        });
    </script>
</body>
</html>

まとめ

以上のように、HTMLとJavaScriptを連携させる方法にはいくつかの基本的な手段があります。これらの方法を活用して、インタラクティブなホームページを作成してみましょう。詳細な参考情報や追加のチュートリアルについては、次のリンクをご覧ください。

HTMLとJavaScriptの連携：基本的な方法 – HTMLで始めるホームページ作成