##1. はじめに
本記事では、【JavaScript】イベント・イベントハンドラの「演習」について記載する。
##2. 演習の内容
###内容
内容としては、以下の通り。
テキストボックスに文字列を入力して、ボタンを押したら文字列をリストに追加していくプログラムの開発を行う。
イベントの登録には、addEventListenerを利用する。
addEventListenerするには、DOMContentLoaderイベント※発生時とする。
※HTMLドキュメントの読み込みと解析が完了したときに発生
###JavaScriptの記述にあたっての留意点 本件は、テキストボックスに入力された文字列をリストに追加していく関数を使って演習を仕上げていく。 ※構文内に注釈を入れてあるので、構文の意味は以下の通り。
イベントハンドラを使った解説
function appendElement() {
// ↑リストに追加していく関数
let result = document.getElementById('result');
// ↑テキストボックスの要素を取得
let li = document.createElement('li');
// ↑liタグの要素を生成
let text = document.createTextNode(result.value);
// ↑テキストノードを生成
li.appendChild(text);
// ↑liタグの要素に、テキストノード「text」を追加
lists.appendChild(li);
// ↑idがlistのulタグに「li」を追加。具体的には「<li>入力した文字列</li>」が追加される。
}
##3. 完成品のイメージ
イメージとしては、以下GIFを参照。
テキストボックスに文字を入力し「追加」ボタンをクリックしたら、ブラウザ上に入力した文字が表示される。
かつ、
要素上にli要素が追加される。
##4. 実践
###マークアップ
まずはじめに、HTMLの作成から取り掛かる。
作成にあたり、用意しないといけない要素は以下の3つ。
id属性を持たせた空のul要素
id属性を持たせたテキストボックス
id属性を持たせたボタン(ボタンの表記は「追加」)
3つの条件を含んで作成したHTMLファイルは以下の通り。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="lists"></ul>
<input id="result" type="text" />
<input id="btn" type="button" value="追加" />
<script src="js/index.js"></script>
</body>
</html>
###JavaScriptの記述 次にJavaScriptの記述を行う。 ####イベントの仕込み #####構文の記述
index.js
let b = document.getElementById('btn');
// ↑変数bを定義し、HTML内で作成した追加ボタンのidに紐付け
b.addEventListener('click',function () {
// ↑変数b(ボタン)に、クリックした際のイベントを仕込む
appendElement();
// ↑テキストボックスに追加する際の関数を呼び出し
}, false);
// ↑イベント伝播形式
この構文で何がしたいかと言うと、
ボタンをクリックされた際のイベントを仕込む
ということ。
当然ながら、addEventListenerだけでは演習の条件をクリアできない。
#####実際に間違った記述で検証してみた
addEventListenerだけでブラウザを用いて検証してみる。
エラーが発生してしまった。エラー内容は以下の通り。
_Uncaught ReferenceError: appendElement is not defined at HTMLInputElement.<anonymous>_
意味としては、
appendElementが定義されていません
とのこと。
実際にテキストボックス内へ文字列をを入力してブラウザ上に表示させる働きは留意点で挙げた構文が担っている。
すべてを記述すると下記の通り。
JavaScript構文の全体記述
let b = document.getElementById('btn');
b.addEventListener('click',function () {
appendElement();
}, false);
function appendElement() {
let result = document.getElementById('result');
let li = document.createElement('li');
let text = document.createTextNode(result.value);
li.appendChild(text);
lists.appendChild(li);
}
ボタンイベントはlet b =〜以降が担っており、
テキストボックスに文字列を入力しブラウザ上に表示する役割はfunction appendElement()〜以降が担っている。
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。 ####ブラウザ上の文字列  ####li要素の追加チェック  検証の結果、
ブラウザ上に文字列が追加され、li要素が追加されていることを確認できた。
##5. おわりに
本項をもってJavaScriptの基本に関しての執筆を終了とする。
また学びがあれば続きを記載していきたいと思う。