JavaScriptでイベントリスナーを理解しよう
この記事では、JavaScriptを使ってブラウザ上でイベントを処理する方法について解説します。特に、イベントリスナーの概念と使い方を中心に進めていきます。
はじめに
ブラウザは常にユーザーの操作（例えばクリックやマウスの動き）を監視しており、その情報をJavaScriptで利用することができます。これにより、インタラクティブなウェブアプリケーションを作成することが可能です。
[ユーザー操作] → [ブラウザ監視] → [JavaScriptで処理]
イベントリスナーとは
イベントリスナーとは、特定の操作（例えばクリックやマウスオーバー）が発生したときに指定された関数を実行する仕組みです。JavaScriptではaddEventListenerメソッドを使ってイベントリスナーを追加することができます。
クリックイベントの例
まずは、ボタンをクリックしたときに「こんにちは」と表示する例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>イベントリスナーの例</title>
</head>
<body>
<button id="btn">ボタン</button>
<script>
// ボタン要素を取得して変数に入れる
const button = document.getElementById('btn');
// ボタンにクリックイベントリスナーを追加
button.addEventListener('click', function() {
alert('こんにちは');
});
</script>
</body>
</html>
上記のコードでは、ボタンをクリックしたときにアラートで「こんにちは」と表示されます。
要素を取得してイベントリスナーを追加する手順
- 要素を取得:
document.getElementById('btn')でボタン要素を取得します。 - イベントリスナーの追加:
addEventListener('click', function() { ... })でクリックイベントが発生したときの処理を指定します。
[要素の取得]
↓
[イベントリスナーを追加]
↓
[クリック時の処理]
他のイベントタイプ
イベントリスナーはクリック以外にも様々な操作に対応できます。例えば、マウスオーバーやダブルクリックなどです。以下にいくつかの例を挙げます：
click: クリックdblclick: ダブルクリックmouseover: マウスオーバー（マウスカーソルが要素の上に乗った時）mouseout: マウスアウト（マウスカーソルが要素から離れた時）
インタラクティブなフォームの作成
次に、入力フォームから取得した値を表示する簡単なインタラクティブなインターフェースを作成してみましょう。以下のステップで進めていきます。
HTML構造
最初に、HTMLでフォームとボタン、出力を表示するための要素を用意します。
<!DOCTYPE html>
<html>
<head>
<title>フォームイベントの例</title>
</head>
<body>
<h1>お名前を入力してください</h1>
<input type="text" id="name" placeholder="お名前">
<button id="btn">入力完了</button>
<div id="output"></div>
<script>
// . . .
</script>
</body>
</html>
JavaScriptで入力値を取得して表示
次に、入力された値を取得し、ボタンをクリックしたときに表示するJavaScriptのコードを書きます。
<script>
// ボタン要素を取得して変数に入れる
const button = document.getElementById('btn');
// ボタンにクリックイベントリスナーを追加
button.addEventListener('click', function() {
// 入力された値を取得
const name = document.getElementById('name').value;
// 取得した値をdiv要素に表示
const outputDiv = document.getElementById('output');
outputDiv.innerText = name;
});
</script>
このスクリプトは、ボタンがクリックされたときに入力フィールドから名前を取得し、outputというIDのdivにその名前を表示します。
実行結果
入力フィールドに「山田太郎」と入力し、ボタンをクリックすると、下部にその名前が表示されます。
[お名前を入力してください]
[______________] (← 入力フィールド)
[入力完了] ← (ボタン)
山田太郎 ← (ここに表示される)
まとめ
JavaScriptを使ったイベントリスナーの基本的な使い方を紹介しました。これにより、ユーザーの操作に応じて動作するインタラクティブなウェブページを作成することができます。
最初は小さなステップから始め、徐々に複雑な操作やインターフェースを実装できるようになると良いでしょう。ぜひご自身の応用として、様々なイベントリスナーを試してみてください。
タイムスタンプ
1 00:00:01,310 --> 00:00:09,969 [音楽]
2 00:00:10,539 --> 00:00:13,539 レッド
3 00:00:14,779 --> 00:00:23,240 ブラウザは常にですね員等発生させている
4 00:00:18,890 --> 00:00:24,839 皆さんが逃げなくブラウザ使っているかもしれないですけれども
5 00:00:23,239 --> 00:00:27,619 あの
6 00:00:24,839 --> 00:00:28,990 クリックした後か例えばね
7 00:00:27,620 --> 00:00:31,609 グリップした
8 00:00:28,989 --> 00:00:38,560 あとはマウスを動かしたとか
9 00:00:31,609 --> 00:00:38,560 裏ね実は高度が動いてイベントがそういう情報が常に書き出され
10 00:00:38,740 --> 00:00:42,760 ってスクロールしたとこっ
11 00:00:40,490 --> 00:00:47,469 これでも
12 00:00:42,759 --> 00:00:53,719 javascript ではこれらの情報吐き出されたい弁当で
13 00:00:47,469 --> 00:00:57,090 えっと取得することができて利用することができるのです
14 00:00:53,719 --> 00:01:00,070 それはアドイベントリスナー
15 00:00:57,090 --> 00:01:03,030 っていうこのメソッドを使う
16 00:01:00,070 --> 00:01:05,400 でアドイベントレイズナークリックね
17 00:01:03,030 --> 00:01:07,219 クリックしたときに
18 00:01:05,400 --> 00:01:11,480 実行したい処理ん
19 00:01:07,219 --> 00:01:14,950 クリックしたときに何かしたい時はこういう風な描き方水
20 00:01:11,480 --> 00:01:14,950 ボタンをクリックしたときに
21 00:01:14,980 --> 00:01:18,240 ってことでそれ中身
22 00:01:20,469 --> 00:01:32,009 イベントを追加したい要素をまず一番最初に入れまして
23 00:01:26,359 --> 00:01:37,049 でイベントの種類を入れる例えばダブルクリックであるとか
24 00:01:32,010 --> 00:01:39,210 いろいろできるんですよダブルクリックしたときとかマウスオーバー音万惣羽根マウス
25 00:01:37,049 --> 00:01:41,519 カーソルが乗っかった時とか
26 00:01:39,209 --> 00:01:47,819 on mouse over
27 00:01:41,519 --> 00:01:51,859 いろんな子8イベントの種類がですね選べますのでイベントハンドラ一覧で検索すると
28 00:01:47,819 --> 00:01:51,859 出てくるかなと思います
29 00:01:52,400 --> 00:01:59,040 8ボタンをクリックしたときにまあ今日はと例えば
30 00:01:56,120 --> 00:02:00,609 表示させるというプログラムを書いてみると
31 00:01:59,040 --> 00:02:03,820 すると
32 00:02:00,609 --> 00:02:07,219 まずはボタンたんね
33 00:02:03,819 --> 00:02:09,629 ボタンタグで後ボタンって書いてあげて
34 00:02:07,219 --> 00:02:16,159 てまず
35 00:02:09,629 --> 00:02:19,979 これねそのボタンを取得して変数に入れる必要があるんですよ
36 00:02:16,159 --> 00:02:23,930 ボタンを取得して変数見る
37 00:02:19,979 --> 00:02:26,929 でボタン要素にリスナーを仕掛けますね
38 00:02:23,930 --> 00:02:32,209 さっき定義したこの変数でしょ
39 00:02:26,930 --> 00:02:35,590 この変数にボタン.アドリストこれは java スクリプトの書き方なんで
40 00:02:32,209 --> 00:02:40,439 8よく覚えておくといいかもしれないですね
41 00:02:35,590 --> 00:02:40,439 でボタン.アドレスなぁクリック function
42 00:02:41,370 --> 00:02:53,299 てクリックしたとき中身実行者中身はこの中に各園で今回はアラートのこんにちは
43 00:02:49,650 --> 00:02:53,299 ということになります
44 00:02:57,580 --> 00:03:04,120 ではちょっとでもね行ってみましょうか8 java スクリプトを書いてみますね
45 00:03:02,020 --> 00:03:10,610 そのイベントのですね
46 00:03:04,120 --> 00:03:17,710 ではまずはこれ保存して event . html という名前で保存します
47 00:03:10,610 --> 00:03:19,800 で1 tml タブでこの中にですねまずはボタンを設定しましょうかちょっと
48 00:03:17,710 --> 00:03:20,719 会議をして
49 00:03:19,800 --> 00:03:24,130 ですね
50 00:03:20,719 --> 00:03:24,129 パッカーパボターン
51 00:03:24,310 --> 00:03:31,750 の
52 00:03:25,370 --> 00:03:37,420 id でておきましょう id が btn でボタンという文字を挟みます
53 00:03:31,750 --> 00:03:38,780 まずここまででできているかどうかをちょっとブラウザで確認してみましょうか
54 00:03:37,419 --> 00:03:43,919 ねっ
55 00:03:38,780 --> 00:03:48,318 あのイベント.1もありましたボタンが出てますね
56 00:03:43,919 --> 00:03:54,449 でボタンを押しをこれ何も起こりませんクリッククリッククリック
57 00:03:48,318 --> 00:04:00,219 じゃあここからスクリプトを書いてこのボタンをクリックしたときに
58 00:03:54,449 --> 00:04:01,889 えっと今日はと出るようにねじゃあハロと出るようにしてみましょうか
59 00:04:00,219 --> 00:04:03,568 芸者
60 00:04:01,889 --> 00:04:11,848 ずっと行きますね
61 00:04:03,568 --> 00:04:15,799 まずこのボタンを押した時っていうこのリスナーを仕掛けたい理由なので何かしたいの
62 00:04:11,848 --> 00:04:19,379 でここは変数に入れる必要がありますね
63 00:04:15,800 --> 00:04:20,889 まずボタンという変数をつくってここに
64 00:04:19,379 --> 00:04:22,620 この要素
65 00:04:20,889 --> 00:04:31,009 入れたいんですね
66 00:04:22,620 --> 00:04:31,009 そういう時はどう9面と.下都営冷麺と
67 00:04:31,329 --> 00:04:33,389 はい
68 00:04:32,110 --> 00:04:34,720 id
69 00:04:33,389 --> 00:04:36,039 いうこと
70 00:04:34,720 --> 00:04:42,760 で
71 00:04:36,040 --> 00:04:46,060 bta ね方すると個々の要素を取ってきてくれますここね
72 00:04:42,759 --> 00:04:47,349 id の名前からこの要素と的な採用
73 00:04:46,060 --> 00:04:55,019 はい
74 00:04:47,350 --> 00:04:57,259 そしてここの作ったボタンに対して at イベントビス
75 00:04:55,019 --> 00:04:58,128 あを加えます
76 00:04:57,259 --> 00:05:02,569 で
77 00:04:58,129 --> 00:05:07,999 一つ目にはクリックここイベントハンドラーと言いますけど
78 00:05:02,569 --> 00:05:10,098 クリックとまず書いておいてですねファンクションをクリックした時にこの
79 00:05:07,999 --> 00:05:13,480 ファンクションを実行しなさい
80 00:05:10,098 --> 00:05:15,480 ファンクショーでじゃあアラートの
81 00:05:13,480 --> 00:05:18,950 はい
82 00:05:15,480 --> 00:05:24,080 と書きましたではどうでしょうか
83 00:05:18,949 --> 00:05:27,408 でリロードしてボタンをクリックすると入っていてましたね
84 00:05:24,079 --> 00:05:28,399 ここの中がしっかり効いているようですねボタン
85 00:05:27,408 --> 00:05:32,029 ok
86 00:05:28,399 --> 00:05:37,038 じゃあ色々とですねこれイベントハンドラ6
87 00:05:32,029 --> 00:05:37,849 このブラウザって言うのはこのイベントリスナを仕掛けることによってそのイベントー
88 00:05:37,038 --> 00:05:41,800 ですね
89 00:05:37,850 --> 00:05:48,430 javascript にこう教えることができると
90 00:05:41,800 --> 00:05:51,340 いうわけですね例えばマウスオーバーにしてみるとどうなるでしょうか
91 00:05:48,430 --> 00:05:55,209 イベントハンドラクリックからまあ相場にしてみる
92 00:05:51,339 --> 00:05:57,609 てデーロードするとマウスをかざしただけでこうね
93 00:05:55,209 --> 00:06:00,029 アナと出てきます
94 00:05:57,610 --> 00:06:03,050 まずはここでかざすと出てきちゃう
95 00:06:00,029 --> 00:06:03,049 クリックしてないですねー
96 00:06:03,439 --> 00:06:13,360 はいイベントリスナーでですねあの
97 00:06:08,589 --> 00:06:17,549 イベントハンドラんですねこの部分いろいろありますのでイベントハンドラーと検索し
98 00:06:13,360 --> 00:06:17,550 て色々みなさん試してみてください
99 00:06:18,009 --> 00:06:21,509 入力フォームの値を取り出す
100 00:06:22,899 --> 00:06:30,049 入力してボタンを押すと名前が下に表示される
101 00:06:26,560 --> 00:06:33,189 こういう本格的なちょっとインターフェースをですね
102 00:06:30,050 --> 00:06:38,168 作ってみたいなと
103 00:06:33,189 --> 00:06:40,040 思います html 部分っていうのはまあ普通にこう
104 00:06:38,168 --> 00:06:47,539 ここが
105 00:06:40,040 --> 00:06:52,580 h 版で書かれていてで9豊富ですねフォームがインプットで書かれててでぇぇぇぇぇ
106 00:06:47,540 --> 00:06:55,710 二ボタンがこのボタンタグで書かれてますよと
107 00:06:52,579 --> 00:06:59,819 ここにですね何もないところ
108 00:06:55,709 --> 00:07:02,109 ただ名前 id で名前がついていて実装ネームで書かれてますけど
109 00:06:59,819 --> 00:07:07,180 この中身は何もありません
110 00:07:02,110 --> 00:07:11,910 まあここにですねあの javascript で何か書き出すというような処理の
111 00:07:07,180 --> 00:07:11,910 ための何もない箱を用意しています
112 00:07:14,939 --> 00:07:22,370 で8この場合のですね
113 00:07:18,310 --> 00:07:27,978 コードはこんな感じになります
114 00:07:22,370 --> 00:07:29,959 まずはボタンねこれは変数に入れる必要がありますドキュメントのゲットエレメント
115 00:07:27,978 --> 00:07:34,009 by id 9
116 00:07:29,959 --> 00:07:35,339 id でえっボタンとついているところを
117 00:07:34,009 --> 00:07:40,740 ここですね
118 00:07:35,339 --> 00:07:46,839 ボタンとついているところを取り出して変数に入れます
119 00:07:40,740 --> 00:07:54,819 ボタン部分がねまぁここの部分かなここの部分が変数に入れられました
120 00:07:46,839 --> 00:07:59,199 でここが常にあの監視状態に置かれる理由っていうのはこれで各アボターンとと
121 00:07:54,819 --> 00:08:00,790 アドレスなっているとここいつも聴いている状態ね
122 00:07:59,199 --> 00:08:02,490 になります
123 00:08:00,790 --> 00:08:07,870 で
124 00:08:02,490 --> 00:08:12,360 越冬もしこのボタンがクリックされたときは
125 00:08:07,870 --> 00:08:14,750 この中身が実行されるわけねー
126 00:08:12,360 --> 00:08:16,740 クリックされたときは
127 00:08:14,750 --> 00:08:20,579 この中にここ
128 00:08:16,740 --> 00:08:23,420 中身が自己されるんだけれども
129 00:08:20,579 --> 00:08:27,128 ということが起こるかというと
130 00:08:23,420 --> 00:08:31,838 のまずドキュメントの name
131 00:08:27,129 --> 00:08:36,509 え id id ネーム探すと id ネームここはありましたね
132 00:08:31,838 --> 00:08:36,509 input type のこの部分
133 00:08:36,789 --> 00:08:44,360 ネームの中のばるー
134 00:08:39,099 --> 00:08:48,800 入力された文字を.針で取り出せる
135 00:08:44,360 --> 00:08:50,169 でそれを変数バーン変数ネームに
136 00:08:48,799 --> 00:08:55,569 入れますよと
137 00:08:50,169 --> 00:08:57,528 まあここに入力された内容をこの変数バーネームに入れる
138 00:08:55,570 --> 00:08:59,699 っていう描き方ね
139 00:08:57,528 --> 00:09:01,159 かこれになります
140 00:08:59,698 --> 00:09:03,609 で
141 00:09:01,159 --> 00:09:03,610 その
142 00:09:03,809 --> 00:09:12,759 ここに入った変数バーネーブルを今度は a 8ここドキュメント消えてる女と場合
143 00:09:10,139 --> 00:09:17,169 ディスプネームっていうところね
144 00:09:12,759 --> 00:09:19,659 ディスプネームっていうのはさっきちょっと今見えないですけど下の方に彼らの
145 00:09:17,169 --> 00:09:24,620 html があったじゃないですか
146 00:09:19,659 --> 00:09:27,000 そこの中インナー.いいしてみるに
147 00:09:24,620 --> 00:09:31,200 第二夫するよと
148 00:09:27,000 --> 00:09:37,299 上で取得した入力された名前ですよね
149 00:09:31,200 --> 00:09:41,370 名前を底の部分に台にするよっていうことになります
150 00:09:37,299 --> 00:09:41,370 じゃあこれちょっと書いてやってみましょうかね
151 00:09:45,539 --> 00:09:49,809 さあ
152 00:09:46,350 --> 00:09:56,350 じゃあねえとデモンストレーション行ってみましょうか
153 00:09:49,809 --> 00:09:58,859 では新規ファイルを作りましょうえっとどこか適当にフォルダを作ってですねその中に
154 00:09:56,350 --> 00:10:02,980 ファイルを作ります
155 00:09:58,860 --> 00:10:06,459 名前は者4目. htm にしておきましょうか
156 00:10:02,980 --> 00:10:09,720 ね hdml を書きまして
157 00:10:06,458 --> 00:10:11,389 この中に h 1で
158 00:10:09,720 --> 00:10:14,509 お名前を
159 00:10:11,389 --> 00:10:16,919 気にしてください
160 00:10:14,509 --> 00:10:22,889 ステープ打差
161 00:10:16,919 --> 00:10:26,229 と書いてですねでその下には8 input 誰ですね input
162 00:10:22,889 --> 00:10:28,960 ペンぷっとタイプの
163 00:10:26,230 --> 00:10:32,680 =テキスト
164 00:10:28,960 --> 00:10:36,370 ここには id で name
165 00:10:32,679 --> 00:10:40,289 id ネームという id を付けて下さい
166 00:10:36,370 --> 00:10:43,190 ここまででどうなってるかちょっと見てみましょうかね
167 00:10:40,289 --> 00:10:43,189 8 p ブラウザ
168 00:10:46,208 --> 00:10:48,989 えっとですね
169 00:10:49,820 --> 00:10:56,180 すくうトップの javascript の home .いしてみる
170 00:10:53,820 --> 00:10:56,180 はいっ
171 00:10:57,669 --> 00:11:08,909 これでできましたうんねーなんかインプットできてるじゃないですか
172 00:11:03,159 --> 00:11:08,909 でですねちょっと版ファンにしといて見てみますねー
173 00:11:08,940 --> 00:11:11,330 a 所
174 00:11:11,990 --> 00:11:20,659 はいそしたら今度ボタンを作ります
175 00:11:16,250 --> 00:11:25,639 8貼っボタンたくてナンですね pot ボタン id コール
176 00:11:20,659 --> 00:11:28,649 btn にしておきましょうかで入力完了
177 00:11:25,639 --> 00:11:33,119 力館力
178 00:11:28,649 --> 00:11:36,039 でスラッシュボタンと入れますで更新ボタンを押すと
179 00:11:33,119 --> 00:11:39,899 を見る完了へ
180 00:11:36,039 --> 00:11:47,009 見抜かれるよまあ変わらないですけどね三旅館呂
181 00:11:39,899 --> 00:11:53,189 まぁこんなふうにできているわけです今度は8まぁこれで入力部分は完成したので今回
182 00:11:47,009 --> 00:11:54,659 どんなアプリをまぢやば助けるとでどんなものを作ろうかと言うかというとここに入力
183 00:11:53,190 --> 00:11:59,889 した文字がですね
184 00:11:54,659 --> 00:12:01,620 下の部分に出てくるってやつを作りたいですねなので下に出てくる
185 00:11:59,889 --> 00:12:04,889 箇所を
186 00:12:01,620 --> 00:12:07,919 箱として幼児てあげる必要があります
187 00:12:04,889 --> 00:12:15,519 それはまあからの give タグ
188 00:12:07,919 --> 00:12:20,559 ねでいいと思うんですよねちょっとまた id はなくてからダディ2ぐこの中
189 00:12:15,519 --> 00:12:21,909 に表示されるようにしますでここの部分を javascript 特定しなきゃいけ
190 00:12:20,559 --> 00:12:23,899 ないので
191 00:12:21,909 --> 00:12:29,328 この id が必要な理由
192 00:12:23,899 --> 00:12:37,669 でここにはへディスプレイディスプレイねっうっ
193 00:12:29,328 --> 00:12:38,899 ここに名前を表示しなさいとねここに名前を記入してそれがここに表示されるように今
194 00:12:37,669 --> 00:12:45,029 なりました
195 00:12:38,899 --> 00:12:46,730 更新してはまあ頑張んないですけどねここに彼らず箱があると思ってください
196 00:12:45,029 --> 00:12:48,079 では
197 00:12:46,730 --> 00:12:53,860 いよいよ
198 00:12:48,080 --> 00:12:53,860 javascript をね帰ってきますねスクリプトでスクリプト
199 00:12:54,089 --> 00:13:02,050 このな蟹座は助けると書いてきます
200 00:12:57,600 --> 00:13:05,870 ではまずはえーっ変数ですね
201 00:13:02,049 --> 00:13:08,439 変数を設定しますボタン
202 00:13:05,870 --> 00:13:10,799 ぼたーーーー変数には
203 00:13:08,440 --> 00:13:16,830 はここを入れないと
204 00:13:10,799 --> 00:13:21,809 いけないわけですねここここをクリックしたときに何か色々ありますので
205 00:13:16,830 --> 00:13:26,450 まずここを変数に入れてあげるでここを変数に入れるには
206 00:13:21,809 --> 00:13:32,439 またやってとってくるかというとですねドキュメント
207 00:13:26,450 --> 00:13:37,800 document . get a 冷麺と
208 00:13:32,440 --> 00:13:39,650 と場合 id と所々大文字になっている
209 00:13:37,799 --> 00:13:42,949 気をつけてくださいね
210 00:13:39,649 --> 00:13:46,439 で格好の bgn そう
211 00:13:42,950 --> 00:13:52,200 ドキュメントゲットエレベート by d
212 00:13:46,440 --> 00:13:53,550 ボタボタンっていう id をドキュメントの中から撮って来なさい心スペルが違い
213 00:13:52,200 --> 00:13:57,059 ますねドキュメント
214 00:13:53,549 --> 00:14:00,469 音色が違うとちょっとおかしいなってわかるん
215 00:13:57,058 --> 00:14:07,250 document .ゲット会イベント場合 ite ボタン
216 00:14:00,470 --> 00:14:13,399 でこの中ドキュメントのボタンて id を探してこのエレベーターとエレメントと
217 00:14:07,250 --> 00:14:17,049 やっぱボタンの国家ここまでのことエレベートと言いますけれどもここを取ってきて
218 00:14:13,399 --> 00:14:20,240 で変数ボタンに a なさい
219 00:14:17,049 --> 00:14:22,589 ねここまできましたじゃあ次
220 00:14:20,240 --> 00:14:30,360 この変数
221 00:14:22,590 --> 00:14:33,870 ボタンに対して at イベントリスナーというのをつけます
222 00:14:30,360 --> 00:14:35,860 リっすなあリスてぇなぁ
223 00:14:33,870 --> 00:14:40,720 スペなってますかね
224 00:14:35,860 --> 00:14:43,039 これボタンをいつもで監視してますよっていうようなメソッドもね
225 00:14:40,720 --> 00:14:45,089 で格好
226 00:14:43,039 --> 00:14:47,019 そしたらエ
227 00:14:45,089 --> 00:14:51,130 エットっ
228 00:14:47,019 --> 00:14:54,179 8ですねクリックしたとき神ふる郷テーションの
229 00:14:51,129 --> 00:14:57,528 クリックしたときに
230 00:14:54,179 --> 00:14:57,528 パーンくしょん
231 00:14:57,970 --> 00:15:04,110 カッコ加工中カッコな過去がいっぱい出てきますけれども
232 00:15:04,278 --> 00:15:11,980 こんな感じである
233 00:15:05,860 --> 00:15:13,459 クリックした時にこの中の中括弧の中が実行されますよ
234 00:15:11,980 --> 00:15:17,329 っていう描き方ね
235 00:15:13,458 --> 00:15:22,219 ここはわかりやすいを開業しておくといっ
236 00:15:17,328 --> 00:15:23,299 そうするとこの格好と格好の間に書いていきますので
237 00:15:22,220 --> 00:15:25,860 そう
238 00:15:23,299 --> 00:15:29,549 こうやってね書いていきます
239 00:15:25,860 --> 00:15:31,449 その中にはクリックしたときにまた
240 00:15:29,549 --> 00:15:35,758 えっと
241 00:15:31,448 --> 00:15:35,758 クリックしたときに何するかというと
242 00:15:35,960 --> 00:15:44,769 この中の値ね
243 00:15:37,870 --> 00:15:46,970 未だにするかというとここじゃあ吉田って入力した場合これクリックしたとき
244 00:15:44,769 --> 00:15:49,058 んこの中が
245 00:15:46,970 --> 00:15:49,879 実行されるわけね
246 00:15:49,058 --> 00:15:52,559 そうです
247 00:15:49,879 --> 00:15:54,088 ここをクリックしたとき
248 00:15:52,559 --> 00:15:58,729 ここの中
249 00:15:54,089 --> 00:16:04,430 が実行されるんですけれどもで8
250 00:15:58,730 --> 00:16:07,539 その時にしたいことはこの文字をここ入力された文字を取ってください
251 00:16:04,429 --> 00:16:09,888 っていうことをやってあげたい
252 00:16:07,539 --> 00:16:13,399 じゃあちょっと書いてみますね
253 00:16:09,889 --> 00:16:18,000 俺はドキュメント document .
254 00:16:13,399 --> 00:16:20,059 ゲットエレメント場合愛で行っ介入すると出てきますね
255 00:16:18,000 --> 00:16:27,620 comment by d の
256 00:16:20,059 --> 00:16:36,789 今度は8どこかというとこれが入力のフォームになりますね
257 00:16:27,620 --> 00:16:36,789 98 id はネイルになるのでゲット会イベント by id ここね
258 00:16:37,169 --> 00:16:46,929 この id 名でこの要素をとってくるってことね
259 00:16:40,860 --> 00:16:48,129 げっ底面と場合 id の中の.針
260 00:16:46,929 --> 00:16:52,439 で
261 00:16:48,129 --> 00:16:53,919 ここに書いた内容を取ってくることができます
262 00:16:52,440 --> 00:16:59,010 そうなんです
263 00:16:53,919 --> 00:16:59,009 これをですねこのままでは使えませんので
264 00:16:59,328 --> 00:17:04,658 1回
265 00:17:00,799 --> 00:17:07,019 変数に入れますバワーネームって com
266 00:17:04,659 --> 00:17:14,110 ちょっと横を伸ばしましょうか
267 00:17:07,019 --> 00:17:17,740 押し上げるとえっとここ入力したねここに入力したものが
268 00:17:14,109 --> 00:17:23,719 このキットヴェイベント場合ネームで取り出されて
269 00:17:17,740 --> 00:17:27,140 ネームで変数に入ってます要はこの吉田っていう文字は
270 00:17:23,720 --> 00:17:30,200 年って変数に入っています
271 00:17:27,140 --> 00:17:33,100 じゃあ次今度はここ
272 00:17:30,200 --> 00:17:39,100 ないですけれどもここには
273 00:17:33,099 --> 00:17:42,919 ディスプネームんっていうね空の箱がありますのでそこに出力するようにしてみる
274 00:17:39,099 --> 00:17:46,279 その入ってんですねドキュメントの
275 00:17:42,920 --> 00:17:50,490 ちょっとゲットエレメント by id
276 00:17:46,279 --> 00:17:51,549 たくさん使えますねでディスプ name
277 00:17:50,490 --> 00:17:54,789 ここ
278 00:17:51,549 --> 00:17:56,619 この部分を今限定イベントしました
279 00:17:54,789 --> 00:18:01,269 でその
280 00:17:56,619 --> 00:18:04,929 なんか in ラードウィンナー1 tb
281 00:18:01,269 --> 00:18:08,720 そこの中身この部分インナー1てみるって言うのは
282 00:18:04,930 --> 00:18:15,759 個々の要素をねさっきゲットイベント場合で行
283 00:18:08,720 --> 00:18:18,278 ここまでとってましたけどドットインなど html と言うとさらにこの中のと
284 00:18:15,759 --> 00:18:19,940 のことをいいます
285 00:18:18,278 --> 00:18:24,759 そこにですねー
286 00:18:19,940 --> 00:18:28,558 さっき撮ってきたこのネーム変数まあここのバリューですよね
287 00:18:24,759 --> 00:18:30,888 入力したものを代入してあげる
288 00:18:28,558 --> 00:18:30,888 ねぇ
289 00:18:31,109 --> 00:18:36,498 こうするとですね
290 00:18:32,808 --> 00:18:38,428 完成しているはずなんですでちょっと見てみましょうか
291 00:18:36,499 --> 00:18:43,759 保存して
292 00:18:38,429 --> 00:18:45,929 リロードします1回練り入ろうとしてじゃあ吉田
293 00:18:43,759 --> 00:18:47,420 ニュッを
294 00:18:45,929 --> 00:18:48,610 でましたねー
295 00:18:47,420 --> 00:18:52,200 いいですね
296 00:18:48,609 --> 00:18:53,889 でここ83つ
297 00:18:52,200 --> 00:18:59,110 魅力
298 00:18:53,890 --> 00:19:05,610 を着てるじゃないですかねっこれでうまくいきました
299 00:18:59,109 --> 00:19:08,939 でたったこれだけのコードでうまくいってまぁ良かったんじゃないかなと思いますね
300 00:19:05,609 --> 00:19:14,269 そうまあいろいろ書きましたけど要素
301 00:19:08,940 --> 00:19:17,719 9ポイントはねゲットエレメント by id でいろんな要素をとってきてそれで
302 00:19:14,269 --> 00:19:21,149 その中のバリューであるとかいろんな値をですね
303 00:19:17,719 --> 00:19:26,099 受け渡してこれを実現していると
304 00:19:21,148 --> 00:19:31,258 まあまああのエンターアクティブなインタラクティブっていうのは8ここ入力して何か
305 00:19:26,098 --> 00:19:35,730 情報を替えるときねこれ javascript ってやっぱよく使うんですよ
306 00:19:31,259 --> 00:19:41,970 例えば不動産屋を検索しているときにここで何かいっ
307 00:19:35,730 --> 00:19:47,789 部屋数とかね何かを入れたときに絞られて新しいフォームが出るのかね
308 00:19:41,970 --> 00:19:49,620 あると思うんですけれどもまあそんなようなニューユーザーが入力したものに対して
309 00:19:47,789 --> 00:19:52,920 何か反応してね
310 00:19:49,619 --> 00:19:55,609 作ってくれるインタラクティブなものを作ってくれるって言うのは
311 00:19:52,920 --> 00:19:56,759 javascript の得意なところですね
312 00:19:55,609 --> 00:20:00,979 はい
313 00:19:56,759 --> 00:20:00,980 ではえーでもそれ昭和0しましょう