イベント処理

## DOM操作におけるイベント処理とは
DOM操作におけるイベントとは、ブラウザを利用する以下のような**ユーザーの行動**のことを指す。
* 「ボタンをクリックしたとき」
* 「（横線3本のアイコン）をクリックしたとき」
* 「画面をスクロールしたとき」など、
→　**ユーザーの行動に合わせて、あらかじめプログラムしていたDOM操作を行うのがイベント処理。**

## ボタンを押すとテキストが表示される処理
現状　「ポチッと！」のボタンがひとつだけ。
![スクリーンショット 2024-02-02 14.35.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/cc279650-ff8e-1605-b49c-6cb7837cec0e.png)
#### HTMLコードの追加
ボタンをもうひとつ作成。
![スクリーンショット 2024-02-02 14.43.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/8a001f4a-014e-47f5-d512-7c1f78e0e89b.png)

![スクリーンショット 2024-02-02 14.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/c94d1220-1062-42bc-70e2-b630364c823a.png)



#### `.js`ファイルでコードを記述

'もひとつポチッと！'ボタンを押したときの挙動は、
1. li要素を新しく作成する
1. 作成したli要素に「ThankYou!×2」というテキストを追加する
1. 作成したli要素をul要素の子要素として末尾に追加する

```javascript
// 'もひとつポチッと！'ボタンのadd-btnというidを取得し、定数に代入
const addBtn = document.getElementById('add-btn');
// parent-listというidを持つHTML要素を取得し、定数に代入する
const parentList = document.getElementById('parent-list');

// HTML要素がクリックされたときにイベント処理を実行する
addBtn.addEventListener('click', () => {
// li要素を新しく作成する
const childList = document.createElement('li');

//作成したli要素に「ThankYou!×2」というテキストを追加する
childList.textContent = 'ThankYou!×2';

// 作成したli要素をul要素の子要素として末尾に追加する
parentList.appendChild(childList);
});
```
#### 結果
`もひとつポチッと！`ボタン押下の前
![スクリーンショット 2024-02-02 14.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/ad22629c-f094-a65a-fdc4-d9c06faf59c3.png)
`もひとつポチッと！`ボタン押下のあと
![スクリーンショット 2024-02-02 14.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/845bf6ea-bba3-6571-ba94-9bb214bad8b2.png)
<li>が追加されている。

#### イベントの種類
`click`	クリックしたとき（マウスボタンを押して離したとき）
`mousedown`	マウスボタンを押したとき
`mouseup`	マウスボタンを離したとき
`mousemove`	マウスカーソルを移動したとき
`keydown`	キーボードのキーを押したとき
`keyup`	キーボードのキーを離したとき
`submit`	フォームを送信したとき
`focus`	HTML要素にフォーカスしたとき
`scroll`	画面をスクロールしたとき

#### 《まとめ》
```javascript
HTML要素.addEventListener('イベントの種類', () => {
  イベント処理 //<li>要素を追加してテキストを表示など
});
```

## 選択されたラジオボタンの値を取得できる処理
#### 先に完成形
血液型を選択して、`値を取得`ボタンを押下すると、値が表示される。
![スクリーンショット 2024-02-02 21.42.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/b487d8dd-1405-43f1-fbf2-17f2eccf2113.png)

#### HTMLファイルの記述
```html
#先ほどのHTMLファイルに下記を追加
  <form name="areaForm">
    <input type="radio" name="area" value="typeA" />A型
    <input type="radio" name="area" value="typeO" />O型
    <input type="radio" name="area" value="typeAB" />AB型
  </form>
  <button id="area-btn">値の取得</button>
  ```

  #### .jsファイルにコードを記述
  ```javascript
// os-btnというidを持つHTML要素を取得し、定数に代入する
const areBth = document.getElementById('area-btn');
// HTML要素がクリックされたときに
areBth.addEventListener('click' , () => {
// 選択されたラジオボタンの値を取得する
const area = document.forms.areaForm.area.value;
// 取得した値を出力する
console.log(area);
});
```

#### 補足
先に、`html要素.addEventlistener('click', )=> {}); `の、クリックされた時何を表示・取得させるかから考えて、書き出したらわかりやすいかも？

getElementById()を使っても良いが、formの場合はnameの値を使うことで簡単に取得できる。続けてinput typeの、nameの値を記述すれば、valueを取得できる。
注意点：HTMLのid名やclass名にハイフン-を使ってしまうと、JavaScriptでエラーが発生してしまうので気を付ける。

![スクリーンショット 2024-02-02 21.59.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/0373d8d9-954f-eb42-4b8c-d4cc2fc8bdda.png)
```javascript
// 選択されたラジオボタンの値を取得する
const area = document.forms.areaForm.area.value;
```
## チェックボックスの値を取得できる処理
チェックボックスがラジオボタンと異なる点は「複数の項目を選択できる」という点。なので、選択されたすべての値を出力するためにfor文とif文を組み合わせて使う。

#### おさらい
* for文
```javascript
for (カウンタ変数の初期値; 条件式; カウンタ変数の増減値) {
  カウンタ変数が決まった値になるまで繰り返す処理
}
```

* if文
```javascript
if (条件式) {
  条件が成り立つときの処理
}
```
* 使用するプロパティ
```javascript
#チェックが入るとtrueを返す
チェックボックス.checked

#チェックボックスの数だけ処理を繰り返すfor文に使う
.length
```

#### 先に完成形
![スクリーンショット 2024-02-03 8.23.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/d2aa4a66-d992-ce65-5c40-f30eec71f577.png)


#### HTMLファイルの記述
```HTML
<div>
  <form name="cityForm">
   行ったことのある街を選択してください<br/>
    <input type="checkbox" name="city" value="osaka" />大阪
    <input type="checkbox" name="city" value="koube" />神戸
    <input type="checkbox" name="city" value="kyouto" />京都
    <input type="checkbox" name="city" value="nara" />奈良
    <input type="checkbox" name="city" value="wakayama" />和歌山
   </form>
  </div>
  <button id="city-btn">値の取得</button>
  ```
  ####  javascriptの記述
  ```javascript
  const cityBtn = document.getElementById('city-btn');
// HTML要素がクリックされたときに
cityBtn.addEventListener('click' , () => {
// 全てのチェックボックスを配列風のデータで取得
 const items = document.forms.cityForm.city;
// 繰り返し処理でチェックボックスを1つずつ取り出し、もし選択されていれば値を出力する
for(let i =0; i < items.length; i++){
  if(items[i].checked ){
    console.log(items[i].value);
  }
}
});
```

## まとめ
1. formの場合はname属性の値を使うことで、簡単にHTML要素を取得できる。
1. フォームの値を取得するには`.value`プロパティを使う
1. 文字列の文字数を取得するには`.length`プロパティを使う
1. チェックボックスに対して`checked`プロパティを使うことで、選択されているかどうかを`true`または`false`で取得できる