HTML内でJavaScriptを使用する方法


<html>
<head>
  <title>JavaScriptの使用方法</title>
</head>
<body>
  <script>
    // ここにJavaScriptコードを記述します
    console.log("Hello, World!");
  </script>
</body>
</html>

上記の例では、<script>タグ内にJavaScriptコードを記述しています。このコードはHTMLファイルが読み込まれると実行されます。

  • 外部ファイルを読み込む方法: 大規模なJavaScriptコードを記述する場合や、再利用性を高めるためにコードを別のファイルに分割したい場合、外部のJavaScriptファイルを読み込む方法があります。以下は例です。

    <html>
    <head>
      <title>JavaScriptの使用方法</title>
      <script src="script.js"></script>
    </head>
    <body>
      <!-- ここにHTMLコンテンツがあります -->
    </body>
    </html>

    上記の例では、<script>タグ内のsrc属性を使用して外部ファイルを読み込んでいます。script.jsはJavaScriptコードが含まれているファイルのパスです。

  • イベントハンドラを使用する方法: JavaScriptを使用して、特定のイベントが発生した時にコードを実行することもできます。以下は例です。

    <html>
    <head>
      <title>JavaScriptの使用方法</title>
      <script>
        function handleClick() {
          console.log("ボタンがクリックされました");
        }
      </script>
    </head>
    <body>
      <button onclick="handleClick()">クリック</button>
    </body>
    </html>

    上記の例では、onclick属性を使用してボタンのクリックイベントを処理するJavaScript関数を定義しています。

  • これらはいくつかの基本的な方法ですが、JavaScriptをHTML内で使用するためのより高度なテクニックやライブラリもあります。ウェブ開発の学習を進めると、さらに多くの方法やベストプラクティスを学ぶことができます。

    この記事はHTMLとJavaScriptの基本的な統合方法を紹介することを目的としており、ウェブ開発初心者に役立つことでしょう。