UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#315 JavaScriptにおけるイベント処理について

記入日:2023-11-19 編集日:2023-11-19

JavaScriptにおけるイベント処理について解説してみようと思います。

この記事を読むと(約5分)
JavaScriptにおけるイベント処理についてイメージできます。

JavaScriptにおけるイベント処理

JavaScriptのイベント処理は、ユーザーの操作やページの状態の変化などに応じて特定の動作をトリガーするための仕組みです。 以下にいくつかの典型的なイベント処理の事例を紹介し、それぞれのケースでの基本的なコード例も示します。

1. ボタンクリックによるイベント処理

ユーザーがボタンをクリックしたときに、特定の処理を実行する例です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ボタンクリックのイベント処理</title>
</head>
<body>

<button id="myButton">クリックしてください</button>

<script>
  // ボタン要素を取得
  var myButton = document.getElementById("myButton");

  // ボタンがクリックされたときのイベントリスナーを追加
  myButton.addEventListener("click", function() {
      alert("ボタンがクリックされました!");
  });
</script>

</body>
</html>

この例では、addEventListenerメソッドを使用して、 ボタンがクリックされたときにアラートを表示するイベントリスナーを登録しています。

2. フォームの送信時のイベント処理

フォームが送信されたときに、入力されたデータを取得して処理する例です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォームの送信イベント処理</title>
</head>
<body>

<form id="myForm">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="送信">
</form>

<script>
  // フォーム要素を取得
  var myForm = document.getElementById("myForm");

  // フォームが送信されたときのイベントリスナーを追加
  myForm.addEventListener("submit", function(event) {
    event.preventDefault(); // ページのリロードを防ぐ

    var name = document.getElementById("name").value;
    alert("こんにちは、" + name + "さん!");
  });
</script>

</body>
</html>

この例では、submitイベントをリッスンしています。また、event.preventDefault()を使用して、 デフォルトのフォーム送信動作をキャンセルし、自分で処理を行っています。

これらの例は、JavaScriptでの基本的なイベント処理の考え方を示しています。 他にもマウスの移動やキーボードの入力など、さまざまなイベントがあり、それに対応するためにイベントリスナーを使用します。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。