1
00:00:00,210 --> 00:00:02,150
さて、戻ってきます。

2
00:00:02,400 --> 00:00:07,620
戻るJavaScriptの紹介では、JavaScriptを学ぶ重要な理由の1つは、ページをインタラクティブにするために使うことができるということです。

3
00:00:07,680 --> 00:00:10,520
 

4
00:00:10,680 --> 00:00:16,590
ユーザーがボタンをクリックしたり、何かを入力したり、矢印キーを押したり、何かをしたりしたときにコードを実行する方法です。

5
00:00:16,590 --> 00:00:17,920
 

6
00:00:18,090 --> 00:00:23,310
特定の時点で実行される、対応するコードをページの先頭で実行するだけでなく、実行することもできます。

7
00:00:23,310 --> 00:00:24,880
 

8
00:00:25,410 --> 00:00:28,290
だから我々はDomイベントについて話をする必要があります。

9
00:00:28,320 --> 00:00:31,250
このビデオはDomイベントの紹介です。

10
00:00:31,260 --> 00:00:36,300
概念的には、それらを設定するためのプロセス、次に構文も含まれます。

11
00:00:36,300 --> 00:00:38,660
だから私が言及したように、イベントはどこにでもあります。

12
00:00:38,670 --> 00:00:43,170
ウェブページとやりとりしたときに、リンク上にマウスを置いてポップアップすることができるボタンのようなものをクリックすることができます。

13
00:00:43,170 --> 00:00:47,330
 

14
00:00:47,370 --> 00:00:50,320
特定のページに要素をドラッグアンドドロップすることができます。

15
00:00:50,550 --> 00:00:55,440
ユーザーのダブルクリックから実行するコードを使用したり、実際にこのWebページにいくつかの例があります。

16
00:00:55,440 --> 00:00:56,650
 

17
00:00:56,670 --> 00:01:03,550
このスライドドットコムはWebサイトです。左右の矢印キーを押してスライドを変更しています。

18
00:01:03,690 --> 00:01:09,300
そこで、左矢印キーまたは右矢印キーを押すか、ここをクリックするとコードが実行されます。

19
00:01:09,300 --> 00:01:10,050
 

20
00:01:10,590 --> 00:01:15,780
これもイベントであり、現在のスライドを変更しているコードを実行している何かをしている。

21
00:01:16,950 --> 00:01:20,930
だからこそ、イベントはあらゆる場所にあり、彼らは本当にエキサイティングです。

22
00:01:20,920 --> 00:01:26,070
 

23
00:01:26,070 --> 00:01:31,230
 

24
00:01:31,230 --> 00:01:35,070
インタラクティブにウェブページをインタラクティブにすることができるようになりました。テキストの変化する色を変えることについて学んだ操作材料を取り上げて、実際に何かが起こったときに実際に行うことができるからです。

25
00:01:35,070 --> 00:01:38,340
だから、これは実際に寮を操作する可能性を広げます。

26
00:01:38,370 --> 00:01:43,170
 

27
00:01:43,170 --> 00:01:49,050
ゲームを作る方法は、フォームバリデーターを作る方法です。本当にクールなカラーピッカーゲームを作り、そのすべてがこれらのイベントに由来しています。

28
00:01:49,050 --> 00:01:55,890
 

29
00:01:55,890 --> 00:02:04,440
 

30
00:02:04,440 --> 00:02:07,590
したがって、これらのイベントの仕組みは実際に特定の要素にアタッチして、最初のボタンや2番目のH-1などの要素を選択するか、タイプがテキストと等しい入力を選択してからイベントリスナーをアタッチします選択された要素。

31
00:02:07,920 --> 00:02:15,540
例として、ボタンのクリックを聞いているかもしれませんが、H1上のホバーイベントを聞くかもしれません。テキスト入力でキープレスイベントを聞くかもしれません。そして、それらのイベントの違いについてもっと話します。

32
00:02:15,540 --> 00:02:20,880
 

33
00:02:20,880 --> 00:02:21,990
 

34
00:02:21,990 --> 00:02:26,490
JavaScriptにはさまざまな種類のイベントがありますが、重要なことは、特定の要素で聴いているイベントを持たなければならないということです。

35
00:02:26,490 --> 00:02:30,170
 

36
00:02:30,180 --> 00:02:34,890
だから前と同じように、私が選択して話をしてから、それを操作してもなお適用されます。

37
00:02:34,920 --> 00:02:41,190
私たちは何かを選択する必要があります。そして操作は、私たちが選択したものにイベントリスナーを追加することです。

38
00:02:41,190 --> 00:02:43,740
 

39
00:02:43,740 --> 00:02:48,930
特に、イベントリスナーの追加と呼ばれる、常に使用する方法があります。

40
00:02:49,650 --> 00:02:56,200
だから、イベントリスナーでは、最初のボタンや入力タイプのような要素をパスワードで選択した後、何かを選択してイベントリスナーを追加し、2つの引数を渡すと、使用するものです。

41
00:02:56,200 --> 00:03:02,160
 

42
00:03:02,160 --> 00:03:03,070
 

43
00:03:03,330 --> 00:03:06,950
最初のものは、私たちが聴きたいイベントのタイプです。

44
00:03:07,350 --> 00:03:12,790
2番目の引数は、そのイベントが発生したときに実行したいコードです。

45
00:03:13,260 --> 00:03:14,330
ここに例があります。

46
00:03:14,400 --> 00:03:19,590
私はページ上の最初のボタンを選択していますが、ボタンの位置や見た目など、実際のボタンとは関係ありません。

47
00:03:19,590 --> 00:03:22,060
 

48
00:03:22,350 --> 00:03:29,430
そして、私はevent listener clickでボタンを呼び出しています。そして、2番目の引数は、ここまで来ている関数です。

49
00:03:29,430 --> 00:03:30,540
 

50
00:03:30,750 --> 00:03:33,690
そして、このコードはすぐに実行されません。

51
00:03:33,690 --> 00:03:35,910
これはコールバックと呼ばれます。

52
00:03:35,910 --> 00:03:38,140
このコードはすぐには実行されません。

53
00:03:38,430 --> 00:03:42,000
このイベントが発生したときにのみ実行されます。

54
00:03:42,000 --> 00:03:46,390
だから一度ボタンをクリックするとjavascriptが呼び出されてコールバックされます。

55
00:03:46,440 --> 00:03:51,630
この機能は、光るあなたの瞬間だと言います。

56
00:03:51,630 --> 00:03:56,040
そして、そのコードが実行され、私たちは相談して、誰かがボタンをクリックするのをログしないようにします。

57
00:03:56,250 --> 00:04:02,130
そのため、この機能は、クリックされた特定のボタンでボタンがすぐに実行されるたびに実行されます。

58
00:04:02,130 --> 00:04:05,290
 

59
00:04:05,910 --> 00:04:07,540
ここに別の例があります。

60
00:04:07,830 --> 00:04:15,060
 

61
00:04:15,750 --> 00:04:21,630
 

62
00:04:21,630 --> 00:04:26,910
このケースでは、ここにボタンと段落をマークして、両方をKeryセレクタで選択して変数に保存した後、クリックリスナを追加してイベントリスナをクリックしてから2番目の引数はそのコールバック関数です。

63
00:04:26,910 --> 00:04:32,610
 

64
00:04:32,610 --> 00:04:39,660
そのボタンがクリックされたときに何をするかは、誰かがボタンをクリックすると段落のテキストコンテンツが変更され、そのボタンをクリックすると誰も私がクリックされずに誰かがボタンをクリックしたことがわかります。

65
00:04:39,660 --> 00:04:42,260
 

66
00:04:42,930 --> 00:04:50,180
だからここで私たちのDomデモページを使って簡単にデモンストレーションをしようと思います。ここでこのH-1を作成しましょう。

67
00:04:50,180 --> 00:04:50,790
 

68
00:04:50,810 --> 00:04:53,700
ユーザーがクリックすると色が変わります。

69
00:04:53,780 --> 00:04:58,310
そうするためには、H-1を選択することによって常に始める必要があります。

70
00:04:58,810 --> 00:05:00,510
だから私たちにはたくさんのオプションがあります。

71
00:05:00,530 --> 00:05:09,070
クエリーセレクターH-1が持っていることを確認するクエリーセレクター文書を使用します。

72
00:05:09,310 --> 00:05:10,460
大丈夫。

73
00:05:10,460 --> 00:05:14,920
次に、イベントリスナを追加するH-1を記述します。

74
00:05:15,010 --> 00:05:16,790
覚えておいてください。

75
00:05:16,940 --> 00:05:19,910
最初のものは、私たちが聞いているイベントです。

76
00:05:20,060 --> 00:05:24,050
そして、私たちは、さまざまなオプションについてさまざまなイベントについて話しています。

77
00:05:24,050 --> 00:05:30,050
今のところクリックをしているだけで、もう1つはユーザーがクリックしたときに実行するコードです。

78
00:05:30,310 --> 00:05:37,060
だから機能とちょうど本当に簡単に開始し、ユーザーがクリックしたときに警告をしてください。

79
00:05:37,160 --> 00:05:44,330
だから、私たちはそれぞれがこのようにクリックされたという警告を出します。

80
00:05:44,750 --> 00:05:46,990
そして、エンターを押しましょう。

81
00:05:47,120 --> 00:05:48,700
すぐには何も変わらない。

82
00:05:49,190 --> 00:05:52,910
しかし、今私は1つをクリックするので、私はこれを閉じます。

83
00:05:52,910 --> 00:05:54,570
私がページのどこかをクリックすると。

84
00:05:54,590 --> 00:05:56,400
H-1以外に何も起こらない。

85
00:05:56,620 --> 00:06:01,150
私がH-1をクリックするとすぐに、H-1が正しいことがわかります。

86
00:06:01,430 --> 00:06:02,510
それは重要です。

87
00:06:02,500 --> 00:06:09,730
それはH-1にしか当てはまりませんが、私がここを調べてクリックすることができるということは、H-1が画面全体にわたっているかどうかを調べれば覚えているからです。

88
00:06:09,740 --> 00:06:10,130
 

89
00:06:12,980 --> 00:06:15,290
 

90
00:06:15,500 --> 00:06:20,720
 

91
00:06:20,720 --> 00:06:25,680
 

92
00:06:25,700 --> 00:06:30,190
だからこそ、このケースではうまくいくと思いますが、時には物事がちょっと違うところでポップアップして、あなたが望むかもしれないものとは異なる場合があります。また、CSSAを使用してステージ1を短くするか、とにかくリスナー。

93
00:06:30,640 --> 00:06:35,130
ただ単に警告するのではなく、何か他のことをやろうとしましょう。

94
00:06:35,330 --> 00:06:42,140
 

95
00:06:42,130 --> 00:06:54,260
上向きの矢印をクリックしてイベントリスナーのクリックを追加すると、ここでコードが変更され、スタイルの背景が等しく、オレンジ色のオレンジ色の背景を作り、H-1のようなことをします。

96
00:06:54,250 --> 00:07:01,870
再び何も変わりませんが、何が起こったのかを注意を払ってクリックすると、最初にH-1がクリックされたという警告が表示されます。

97
00:07:01,880 --> 00:07:06,030
 

98
00:07:06,170 --> 00:07:10,360
そしてそれを閉じるとオレンジ色に変わります。

99
00:07:10,730 --> 00:07:14,840
したがって、ここで道徳的なのは、特定の要素に複数のリスナーを持つことができることです。

100
00:07:14,840 --> 00:07:22,090
そのH-1をクリックすると、追加した最初のリスナーがクリックをリッスンしてアラートを実行した後、リスナーを追加してクリックを聞いたが、背景色が変わった。

101
00:07:22,610 --> 00:07:28,280
 

102
00:07:28,270 --> 00:07:28,890
 

103
00:07:28,910 --> 00:07:31,200
だから両方をクリックすると実行されます。

104
00:07:31,390 --> 00:07:37,190
そして、それは、私が再びクリックすると、今はいつも起きるでしょう。私はアラートを取得し、オレンジ色に変更しました。それは、まだオレンジ色だったので、あなたはそれを見ませんが、あなたは私を信頼しなければなりません。

105
00:07:37,320 --> 00:07:42,190
 

106
00:07:42,290 --> 00:07:45,000
それは、それをオレンジ色に何度も変え続ける。

107
00:07:45,670 --> 00:07:48,560
私はリフレッシュしてそのすべてを取り除くつもりです。

108
00:07:48,590 --> 00:07:52,720
また、リスナーをULに追加して簡単なデモンストレーションをしたいと思っています。

109
00:07:52,880 --> 00:08:03,320
だからドキュメントダンプのクエリセレクタULを行い、ulが1つではなく3つの味方を持つことを思い出してください。

110
00:08:04,490 --> 00:08:08,500
だから私はそれを親要素に設定するときに何が起こるかを見せてくれるでしょう。

111
00:08:08,510 --> 00:08:11,850
まあ、私はここでこれを行うつもりの変数を使用するつもりはありません。

112
00:08:12,130 --> 00:08:14,640
アダマントリスナー。

113
00:08:15,250 --> 00:08:16,140
クリック。

114
00:08:16,550 --> 00:08:17,930
それが最初の議論です。

115
00:08:17,930 --> 00:08:20,330
2つ目は、このように実行したい機能です。

116
00:08:24,610 --> 00:08:25,560
 

117
00:08:25,880 --> 00:08:27,410
そして、私は始めるつもりです。

118
00:08:27,680 --> 00:08:35,720
ちょうどよいログがクリックであり、あなたが何を知っているのかを見てみましょう。

119
00:08:35,810 --> 00:08:37,210
それは受身の声です。

120
00:08:37,250 --> 00:08:38,050
悪いアイデア。

121
00:08:38,300 --> 00:08:39,270
やろう。

122
00:08:39,460 --> 00:08:43,550
はるかに良いULをクリックしました。

123
00:08:43,880 --> 00:08:44,520
OK。

124
00:08:44,720 --> 00:08:48,430
では、コンソールを開いたままにして、ULをクリックしましょう。

125
00:08:48,980 --> 00:08:50,420
しかし、どうやってオイルをクリックしますか？

126
00:08:50,450 --> 00:08:53,090
井戸の中に3人の味方がいるから。

127
00:08:53,120 --> 00:08:55,290
ULはここの全体のことです。

128
00:08:55,320 --> 00:09:00,890
だから早急にどんな味方でも、私がどこの井戸にいるかは問題ではありません。

129
00:09:01,040 --> 00:09:02,820
ここで数字が増えています。

130
00:09:02,930 --> 00:09:07,150
井戸をすばやく操作すると、このコンソールのドットログが実行されます。

131
00:09:08,120 --> 00:09:14,290
ですからもう一度リフレッシュしましょう。今回は、味方自身を変えたいとしましょう。

132
00:09:14,300 --> 00:09:17,540
個人の同盟国をクリックすると何か起こりたい。

133
00:09:17,960 --> 00:09:19,400
これを行うにはいくつかの方法があります。

134
00:09:19,420 --> 00:09:25,840
そして、我々はヘッドアップとして各味方に1人のリスナーを付けている最も単純なものから始めようとしています。

135
00:09:25,850 --> 00:09:26,360
 

136
00:09:26,360 --> 00:09:32,880
最終的には、1つのリスナをULに接続し、次にそのリスナの内部に接続します。

137
00:09:32,990 --> 00:09:39,250
私たちは、特にUL内のどの嘘が1人のLessnerでクリックされたのかを検出します。

138
00:09:39,250 --> 00:09:44,230
 

139
00:09:44,240 --> 00:09:55,570
今のところはすべての嘘に別のリスナーを追加するつもりですので、同盟国を選択することから始める必要があります。そのため、同盟国は文書ドット・クエリー・セレクターと等しくなります。

140
00:09:55,570 --> 00:09:59,040
さて、私たちはforループを行う必要があります。

141
00:09:59,210 --> 00:10:02,190
だからvar Iはゼロに等しい。

142
00:10:02,410 --> 00:10:04,880
私はいつもこれをやっていると言いました。

143
00:10:04,880 --> 00:10:09,670
だから、私は長さが私の同盟者よりも少なく、プラスちょうどそれに似ています。

144
00:10:13,730 --> 00:10:14,740
 

145
00:10:15,050 --> 00:10:20,600
そして、ここで私たちは実際に、それぞれの味方にリスナーを追加しようとしています。

146
00:10:20,840 --> 00:10:21,940
それはこのように見える。

147
00:10:21,960 --> 00:10:27,350
 

148
00:10:30,080 --> 00:10:39,220
エリーゼ私はそれをちょうどそのような特定の味方とイベントリスナーのクリック機能を与え、これを少し行いました。

149
00:10:39,770 --> 00:10:41,920
そして、私たちが実行したいコード。

150
00:10:42,320 --> 00:10:49,250
クリックした味方の色を変更して、紫色に変更しましょう。

151
00:10:49,250 --> 00:10:51,250
だから私たちはいくつかのオプションがあります。

152
00:10:51,290 --> 00:10:54,600
私がする必要があるのは、クリックされた同盟国を指しています。

153
00:10:54,800 --> 00:11:00,980
だから私はこの味方をすることができましたが、それは実際には素晴らしい解決策ではありません。なぜなら、このキーワードを使用するより簡単な方法があるからです。

154
00:11:01,000 --> 00:11:05,320
 

155
00:11:05,680 --> 00:11:12,410
 

156
00:11:12,410 --> 00:11:18,250
 

157
00:11:18,430 --> 00:11:23,100
したがって、リスナーの内部では、これがクリックされたアイテムまたはホバリングされたアイテムを参照するキーワード、またはatイベントの直前にあるエレメントがどこで選択されたものであってもキープレスが発生したアイテムを指す。

158
00:11:23,140 --> 00:11:30,640
だから私は色が紫色に等しいこのドットスタイルを書くことができます。

159
00:11:31,000 --> 00:11:33,140
実際、それはもっと明白なことです。

160
00:11:33,230 --> 00:11:34,150
それは小さなフォントです。

161
00:11:34,150 --> 00:11:36,670
ですから、ピンク色でやってみましょう。

162
00:11:37,040 --> 00:11:38,500
私はエンターを押した。

163
00:11:38,500 --> 00:11:46,020
すぐには何も起こりませんが、私が同盟国をクリックすると、それがピンクに変わることがわかります。

164
00:11:47,410 --> 00:11:53,960
そして、私がクリックをピンクに変え続けると、あなたは告げることができません。

165
00:11:54,080 --> 00:12:00,110
だから、このパターンは、個々にループしてイベントリスナーをそれぞれに追加するという、実際には本当に一般的なものです。

166
00:12:00,110 --> 00:12:03,670
 

167
00:12:03,710 --> 00:12:11,170
私たちは次のいくつかのプロジェクトでいつもそれを見るつもりです。

168
00:12:11,270 --> 00:12:16,640
最後に私がここで言及するのは、括弧付きの関数を書いたところでここでやったような無名関数を使う必要はないということです。

169
00:12:16,630 --> 00:12:20,830
 

170
00:12:20,990 --> 00:12:22,330
あなたはそれをする必要はありません。

171
00:12:22,370 --> 00:12:25,790
私がここで行ったのとは別に、名前付き関数を宣言することができます。

172
00:12:26,090 --> 00:12:31,200
関数のテキストを変更してから、イベントリスナーを追加するボタンをクリックするか、クリックしてテキストを変更します。

173
00:12:31,420 --> 00:12:33,890
 

174
00:12:34,070 --> 00:12:38,830
私が望むものではない関数を直ちに実行するので、後に括弧がないことに注意してください。

175
00:12:38,840 --> 00:12:39,890
 

176
00:12:40,180 --> 00:12:46,880
この関数の値を渡すだけで、コンテンツを基本的にこのクイックリスナーに渡して、ユーザーがこのボタンをクリックしたときに実行する関数をここに指定します。

177
00:12:47,170 --> 00:12:51,100
 

178
00:12:51,190 --> 00:12:52,810
しかし、まだそれを実行しないでください。

179
00:12:52,820 --> 00:12:55,350
したがって、これらの2つはまったく同じように動作します。

180
00:12:55,370 --> 00:12:57,030
それは好みの問題です。

181
00:12:57,190 --> 00:13:00,830
ほとんどの場合、後で遭遇するかもしれないいくつかの違いがあります。

182
00:13:00,880 --> 00:13:02,980
私はこれを使うのが好きです。

183
00:13:03,230 --> 00:13:08,240
私が匿名関数を使用しない唯一の時間は、クロックリスナーの外のどこかで再びそのコードを使用する必要がある場合です。

184
00:13:08,240 --> 00:13:10,160
 

185
00:13:10,150 --> 00:13:15,100
 

186
00:13:15,530 --> 00:13:21,260
 

187
00:13:21,260 --> 00:13:22,600
だから私はそれを個別に実行したいのであれば、この関数を複製するのではなく、別のクイックリスナーの代わりにそれを実行したいのですが、名前を付けて、それを2回使用する名前を複製します。

188
00:13:23,060 --> 00:13:28,660
OKだから、次は、Wisnerの素早い使い方と、最後のいくつかのビデオで学んだことのいくつかを使って、簡単なエクササイズをする機会を得るでしょう。

189
00:13:28,660 --> 00:13:30,650