HTML イベント属性のマスター

はじめに

HTML イベント属性は、HTML 要素に機能を追加するために使用されます。ユーザーがボタンをクリックしたり、フォームを送信したりするなど、特定のイベントが発生したときに、JavaScript コードを実行することができます。この実験では、HTML イベント属性を使用して Web ページに対話性を追加する方法を学びます。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_valid("Form Validation") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70754{{"HTML イベント属性"}} html/head_elems -.-> lab-70754{{"HTML イベント属性"}} html/doc_flow -.-> lab-70754{{"HTML イベント属性"}} html/embed_media -.-> lab-70754{{"HTML イベント属性"}} html/forms -.-> lab-70754{{"HTML イベント属性"}} html/form_valid -.-> lab-70754{{"HTML イベント属性"}} html/form_access -.-> lab-70754{{"HTML イベント属性"}} html/inter_elems -.-> lab-70754{{"HTML イベント属性"}} html/custom_attr -.-> lab-70754{{"HTML イベント属性"}} end

HTML ドキュメントの作成

index.html という名前の新しいファイルを作成し、基本的な HTML 構造を追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Event Attributes Lab</title>
  </head>
  <body></body>
</html>

ボタンの追加

HTML ドキュメントの body に button 要素を追加します。表示するテキストを与え、JavaScript コードで参照できるように id 属性を付けます。

<button id="myButton">Click Here</button>

イベント属性の追加

button 要素に onclick 属性を追加します。この属性で、ボタンがクリックされたときに実行する JavaScript コードを指定します。

<button id="myButton" onclick="alert('Hello, World!')">Click Here</button>

さらに機能を追加する

HTML ドキュメントの body に div 要素を追加します。この要素は、ボタンがクリックされたときにテキストを表示するために使用されます。

<div id="myDiv"></div>

次に、ボタンがクリックされたときに div 要素のテキストを更新する JavaScript コードを追加します。

<button
  id="myButton"
  onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
  Click Here
</button>
<div id="myDiv"></div>

フォーム送信の処理

HTML ドキュメントの body に HTML フォームを追加します。また、フォームに onsubmit 属性を追加して、フォームが送信されたときに実行する JavaScript コードを指定します。

<form onsubmit="alert('Form Submitted!')">
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

イベントリスナーの使用

HTML 内で直接イベント属性を使用する代わりに、JavaScript を使って HTML 要素にイベントリスナーを追加することもできます。

まず、HTML 要素から onclick および onsubmit 属性を削除します。

<button id="myButton">Click Here</button>
<div id="myDiv"></div>

<form>
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

次に、ボタンがクリックされたときに呼び出される JavaScript 関数を作成します。この関数は div 要素のテキストを更新する必要があります。

<script>
  function handleButtonClick() {
    document.getElementById("myDiv").innerHTML = "Hello, World!";
  }
</script>

最後に、JavaScript を使ってボタンにイベントリスナーを追加します。

<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
  document
    .getElementById("myButton")
    .addEventListener("click", handleButtonClick);
</script>

イベントリスナーの削除

JavaScript を使ってイベントリスナーを削除することもできます。

HTML ドキュメントに新しいボタンを追加します。このボタンは、最初のボタンからクリックイベントリスナーを削除します。

<button id="removeButton">Remove Click Event Listener</button>

次に、最初のボタンからクリックイベントリスナーを削除する新しい JavaScript 関数を作成します。

<script>
  function removeClickListener() {
    document
      .getElementById("myButton")
      .removeEventListener("click", handleButtonClick);
  }
</script>

最後に、新しいボタンにクリックされたときに removeClickListener() 関数を呼び出すイベントリスナーを追加します。

<button id="removeButton">Remove Click Event Listener</button>
<script>
  document
    .getElementById("removeButton")
    .addEventListener("click", removeClickListener);
</script>

まとめ

この実験では、HTML イベント属性を使って Web ページに対話性を追加する方法を学びました。また、JavaScript を使って HTML 要素にイベントリスナーを追加および削除する方法も学びました。これらのツールを使えば、ユーザー入力に応答する動的な Web ページを作成できます。