1
00:00:00,180 --> 00:00:02,530
だから私たちは今焦点を合わせることができる2つの異なるものを持っています。

2
00:00:02,610 --> 00:00:09,540
最初のものは勝利選手の緑色になるようにここを上げています。

3
00:00:09,540 --> 00:00:10,110
 

4
00:00:10,140 --> 00:00:14,670
もう1つはリセット・ボタンが働いてリセットして再生できるようにすることです。

5
00:00:14,850 --> 00:00:20,530
色の変更から始めて、CSSAファイルにクラスを定義することでこれを行うつもりです。

6
00:00:20,580 --> 00:00:25,420
だから私はC Sファイルを作る必要があり、私はそのスコアキーパーに電話するつもりです。

7
00:00:25,590 --> 00:00:35,790
私のHDMIファイルスコアキーパーDotsie SSの代わりにそれにリンクして保存します。

8
00:00:35,790 --> 00:00:43,080
それから私はCSSAファイルに行き、クラスを定義するつもりです。私はそれを冬と呼ぶでしょうし、色は緑で、それだけで私たちが必要とするすべてのものを保存します。

9
00:00:43,080 --> 00:00:47,090
 

10
00:00:47,190 --> 00:00:49,620
そして、それが私がそれを望む方法を見ていることを確認するだけです。

11
00:00:49,620 --> 00:00:57,270
スパンにクラスを追加しましょう。そうすれば、クラスは等しくなります。そして、私たちはgetから行くプレーヤー1のディスプレイのための勝者のクラスを与えます。

12
00:00:57,270 --> 00:00:59,540
 

13
00:00:59,610 --> 00:01:03,090
私がリフレッシュすると、緑色の0が表示されます。

14
00:01:03,090 --> 00:01:05,700
それはまさに私たちが増分として望むものです。

15
00:01:05,730 --> 00:01:09,260
もちろん、それは黒として始まり、クラスを追加するだけです。

16
00:01:09,360 --> 00:01:14,320
ゲームが終わったら、私たちはJavaScriptに戻り、これを取り除く必要があります。

17
00:01:14,520 --> 00:01:17,030
それで、それは黒に戻ります。

18
00:01:17,310 --> 00:01:18,910
私たちのjavascriptに今すぐ移動します。

19
00:01:19,530 --> 00:01:24,840
だから、プレイヤー1を開始するだけで、プレイヤー1の得点が勝ちの得点に等しいかどうかを確認する必要があります。

20
00:01:24,870 --> 00:01:26,640
それは、プレーヤー1が勝ったことを意味します。

21
00:01:26,760 --> 00:01:33,360
ここでは、プレーヤー1のディスプレイクラスリストを追加します。

22
00:01:33,360 --> 00:01:37,570
クラス受賞者を追加する予定です。それだけでいいのです。

23
00:01:37,830 --> 00:01:44,500
プレイヤー1の得点を増やして5になると、リフレッシュすると表示されます。

24
00:01:44,520 --> 00:01:46,580
そのクラスが追加されました。

25
00:01:46,830 --> 00:01:49,390
だから私たちがここを見れば、私はそれを調べます。

26
00:01:49,410 --> 00:01:54,090
クラスがなく、5になるまで増分を続けます。

27
00:01:54,090 --> 00:01:59,640
ここで注意を払うと、クラスが5つになると、勝者が追加されます。

28
00:01:59,910 --> 00:02:02,900
だから、プレイヤー2でも同じことをやります。

29
00:02:03,150 --> 00:02:07,230
したがって、プレーヤー2の得点が表示されるようにプレーヤーを変えます。

30
00:02:07,710 --> 00:02:10,480
これを5に増やしてみましょう。

31
00:02:10,650 --> 00:02:12,060
すばらしいです。

32
00:02:13,110 --> 00:02:15,030
すべてがうまくいっているようです。

33
00:02:15,450 --> 00:02:19,260
次の部分はリセットボタンがすぐに動作するようにしています。

34
00:02:19,350 --> 00:02:22,490
ゲームを終えると、それは常に真実に設定されます。

35
00:02:22,500 --> 00:02:24,990
ゲームを変える方法はありません。

36
00:02:24,990 --> 00:02:28,830
したがって、リセットボタンをクリックすると、いくつかの異なる行のコードがトリガされる必要があります。

37
00:02:28,860 --> 00:02:30,540
あなたが変更したい最初のもの。

38
00:02:30,540 --> 00:02:33,390
プレイヤー1はスコアを獲得し、プレイヤーはスコアをゼロに戻します。

39
00:02:33,420 --> 00:02:38,820
プレイヤー1ディスプレイに表示されている値を0に変更し、プレイヤーが表示されている値を変更したい場合、この緑色のクラスを削除する必要があります。

40
00:02:38,820 --> 00:02:43,860
 

41
00:02:44,130 --> 00:02:49,170
そして最後に、ゲームオーバーが偽に戻って、コードとここで再び実行できるようにする必要があります。

42
00:02:49,170 --> 00:02:51,180
 

43
00:02:51,240 --> 00:02:57,200
最初にボタンを選択する必要があります。

44
00:02:57,390 --> 00:03:00,170
だから私たちはここに行き、ちょうどそれを選択する必要があります。

45
00:03:00,330 --> 00:03:02,590
だから私はこれまでの他のボタンと一緒にやっていきます。

46
00:03:02,640 --> 00:03:11,880
リセットボタンはドキュメントのドットと等しく、私たちはIDで別のget要素を行い、今回IDがリセットされて保存され、次に動作することを確認するだけです。

47
00:03:13,050 --> 00:03:16,400
 

48
00:03:16,580 --> 00:03:17,820
一定のログを行います。

49
00:03:18,060 --> 00:03:22,900
リセットボタンをリセットし、リフレッシュします。

50
00:03:22,900 --> 00:03:26,050
コンソールを見ると正しいボタンが表示されます。

51
00:03:26,070 --> 00:03:27,960
キャンセルされ、ログに記録されました。

52
00:03:28,390 --> 00:03:35,220
 

53
00:03:35,610 --> 00:03:45,510
 

54
00:03:45,510 --> 00:03:53,490
OKボタンをクリックしてイベントリスナーを追加することで開始する必要があります。イベントリスナーは、コールバック関数でクリックしてリセットします。再起動するには、そのログリセットをキャンセルするだけですそこにリセットボタンがクリックされました。

55
00:03:54,360 --> 00:03:57,780
だから私たちが議論したように、論理を設定する必要があります。

56
00:03:57,780 --> 00:04:00,330
プレイヤー1はスコアを獲得し、プレイヤーはスコアを0に戻す。

57
00:04:00,450 --> 00:04:02,440
そう簡単に十分です。

58
00:04:02,460 --> 00:04:05,890
プレーヤー1のスコア0のスコアプレーヤーはゼロです。

59
00:04:06,330 --> 00:04:12,210
しかし、私がこれを今実行した場合、プレイヤー1のスコアを0に変更して増分するだけで、プレイヤー1が勝ち、リセットされます。

60
00:04:12,330 --> 00:04:14,790
 

61
00:04:14,850 --> 00:04:20,050
何も起こりそうにないと私たちはJavaScriptのスコアを変更するだけです。

62
00:04:20,100 --> 00:04:26,400
ページのスコアを更新することはありません。そのため、更新する必要があるP1およびP2表示変数です。

63
00:04:26,400 --> 00:04:27,050
 

64
00:04:27,300 --> 00:04:34,020
したがって、1つの表示テキストコンテンツを作成し、それをゼロに設定するだけです。

65
00:04:34,020 --> 00:04:37,180
1スコアに設定することもできます。

66
00:04:37,320 --> 00:04:38,690
両方ともゼロでなければなりません。

67
00:04:39,090 --> 00:04:42,700
Peteがテキストコンテンツを表示するのと同じことはゼロです。

68
00:04:42,930 --> 00:04:46,060
今リフレッシュすれば5になる。

69
00:04:47,280 --> 00:04:48,410
彼らは両方ともゼロに戻ります。

70
00:04:48,450 --> 00:04:50,750
だから近づくゲームをしよう。

71
00:04:52,360 --> 00:04:55,120
クリックリセットは両方ともゼロに戻ります。

72
00:04:55,500 --> 00:04:58,030
次に勝者節を削除しましょう。

73
00:04:58,090 --> 00:05:01,430
両方から勝者クラスを削除することで、これは簡単な方法ですか？

74
00:05:01,540 --> 00:05:03,650
だから私たちはどちらがそれを持っているかを調べることさえしません。

75
00:05:03,730 --> 00:05:05,260
両方から削除するだけです。

76
00:05:05,300 --> 00:05:07,620
これは1つのディスプレイの問題です。

77
00:05:07,780 --> 00:05:12,070
クラスリストは勝者を削除します。

78
00:05:12,310 --> 00:05:16,440
そうすれば、その節を取り除き、それを表示することもできます。

79
00:05:16,480 --> 00:05:20,830
だからそれを持っていてもどちらでも問題はありません。

80
00:05:21,940 --> 00:05:25,160
だから今ゲームをすると勝者が得られます。

81
00:05:25,600 --> 00:05:26,850
私はリセットをクリックします。

82
00:05:26,920 --> 00:05:30,560
彼らはどちらも空白の平文に戻ります。

83
00:05:31,140 --> 00:05:33,700
しかし、あなたが見ることができるように私は5になる。

84
00:05:33,790 --> 00:05:36,340
私はリセットボタンをクリックしてもまだ動作しません。

85
00:05:36,610 --> 00:05:39,930
ゲームオーバはまだ真実だからです。

86
00:05:40,110 --> 00:05:42,900
したがって、これらのイベントの代わりに私たちのコードは実行されません。

87
00:05:43,090 --> 00:05:45,000
したがって、最後に行う必要があります。

88
00:05:45,100 --> 00:05:50,340
ゲームを虚偽に戻して、それが私たちのプレーを続けることを可能にするはずです。

89
00:05:50,820 --> 00:05:53,350
だから私はインクリメンタルをリフレッシュします。

90
00:05:53,520 --> 00:05:55,530
ゲームを終わらせましょう。

91
00:05:55,540 --> 00:05:55,990
そこに行く。

92
00:05:55,990 --> 00:05:57,240
私はもうプレイできません。

93
00:05:57,250 --> 00:06:04,610
私はリセットをクリックし、それ以上のゲームは偽に戻って、私は再びプレイして、次に続けることができます。

94
00:06:04,840 --> 00:06:07,220
それがここの中核機能です。

95
00:06:07,320 --> 00:06:13,660
私たちはほとんどすべてのことをやっています。最後のことは、演技を数字にすること、勝ち点を変数にすることです。

96
00:06:13,870 --> 00:06:14,650
 

97
00:06:14,640 --> 00:06:16,520
だから、必ずしも5つだけではありません。

98
00:06:16,930 --> 00:06:22,750
だから私たちはこの情報を持っていますので、私はこれを7に変更すると7になると言っています。私たちの最大得点は5ではなく7です。

99
00:06:22,750 --> 00:06:27,710
 

100
00:06:27,970 --> 00:06:29,750
だから我々はそこに着くためのいくつかのステップがあります。

101
00:06:29,760 --> 00:06:35,260
最初に行う必要があるのは、入力タイプが数字に等しいことがわかるように、この入力を選択することです。

102
00:06:35,740 --> 00:06:37,330
それはページ上の唯一の入力です。

103
00:06:37,360 --> 00:06:40,410
だから必ずIDや何かを与える必要はありません。

104
00:06:40,420 --> 00:06:46,790
だから私はここに行き、他のセレクタでそれを選択するだけです。

105
00:06:47,050 --> 00:06:55,360
入力なしのドキュメントと呼びましょう。クエリーセレクタ入力をドキュメント化する方法はたくさんあります。

106
00:06:55,360 --> 00:06:58,030
 

107
00:06:58,020 --> 00:07:01,400
私たちはまたどこだけ指定することができます。

108
00:07:01,420 --> 00:07:06,540
タイプは他の入力がある可能性があるため、numberと等しくなります。

109
00:07:06,730 --> 00:07:08,070
私たちの場合、私はそれを簡単に保ちます。

110
00:07:08,080 --> 00:07:09,330
入力は1つだけです。

111
00:07:09,460 --> 00:07:11,190
だからこれはうまくいくでしょう。

112
00:07:11,810 --> 00:07:12,120
OK。

113
00:07:12,120 --> 00:07:14,420
だから私たちはその入力を選択しました。

114
00:07:14,440 --> 00:07:16,390
イベントを追加しましょう。

115
00:07:16,420 --> 00:07:22,540
だから私たちは何が起こるかは、これが値を変更したり、その数値が変化したりすると、これを更新したいと思うので、勝利スコア変数も更新したいと思っています。

116
00:07:22,530 --> 00:07:26,920
 

117
00:07:26,950 --> 00:07:29,200
だから私たちがする必要があるのは、イベントを追加することです。

118
00:07:29,280 --> 00:07:40,190
だから私たちは麻痺して、ドットを入れましょうイベントLessnerはちょうどここでこのようにしてください。

119
00:07:41,050 --> 00:07:44,750
機能とすべての警告を行います。

120
00:07:45,300 --> 00:07:54,150
入力をクリックしたところ、実際にはクリックリスナーがこの仕事に最適なツールではないことがわかります。

121
00:07:54,150 --> 00:07:54,720
 

122
00:07:54,920 --> 00:07:58,880
はい、私はちょうどそこに行ったようにクリックで値を変更することができます。

123
00:07:59,470 --> 00:08:06,910
しかし、私はまた削除を打つことができますし、自分自身の数字を入力し、私はクリックする必要がなかったため、イベントが発生しませんでした。

124
00:08:07,360 --> 00:08:11,110
だから私はここで小さなボタンを使用すると、迅速なイベントが発生します。

125
00:08:11,110 --> 00:08:14,670
それ以外の場合は、キーボードを使用するだけで簡単なイベントはありません。

126
00:08:14,680 --> 00:08:19,680
だから、変更と呼ばれるこのケースではるかに優れた別のタイプのイベントがあります。

127
00:08:19,770 --> 00:08:25,240
したがって、変更イベントは値が変更されるたびに実行され、その値がどのように変更されたかは関係ありません。

128
00:08:25,240 --> 00:08:27,840
削除キーをクリックしたか、またはヒットしたからです。

129
00:08:27,850 --> 00:08:35,000
ここで実際にアラートを変更して入力を変更し、次に更新してみましょう。

130
00:08:35,320 --> 00:08:39,900
ここをクリックして変更すると、入力を変更したことがわかります。

131
00:08:40,090 --> 00:08:45,900
しかし、私が削除し、それをクリックすることを伴わない数字を入力すると、入力が変更されていることがわかります。

132
00:08:45,900 --> 00:08:47,960
 

133
00:08:47,980 --> 00:08:52,740
 

134
00:08:52,750 --> 00:08:59,430
これは、ここでこの数値を更新したいときにいつでも変更イベントを使用するイベントです。また、勝利スコアを更新して、新しい勝利スコアに達するまでゲームが継続するようにしたいと思っています。

135
00:08:59,430 --> 00:09:00,650
 

136
00:09:00,700 --> 00:09:02,700
うまくいけば、これは我々の実際の勝利得点ではない。

137
00:09:02,740 --> 00:09:04,850
ロックペーパーはさみの間違いなく長いゲームです。

138
00:09:05,080 --> 00:09:08,530
最初のことはここでこの値を更新することです。

139
00:09:08,860 --> 00:09:13,020
だから私がそれを選択する前に、それは段落です。

140
00:09:13,060 --> 00:09:20,440
だから私は段落を選択する必要があり、私はVAR段落をクエリセレクタタグと同じ文書にします。

141
00:09:21,690 --> 00:09:22,590
 

142
00:09:23,290 --> 00:09:30,330
このクイックイベントでは、テキストコンテンツを変更するだけで、クリックしたと言ったり、値を変更したりするように変更することから始めます。

143
00:09:30,340 --> 00:09:35,070
 

144
00:09:36,640 --> 00:09:39,310
ちょうどそのようにリフレッシュしてください。

145
00:09:39,310 --> 00:09:45,470
今私は値が変更されたという段落の変更が変更されたが、これは私たちが以前にH-1で遭遇した同じ問題であるという値を変更すると段落全体を変更したくない。

146
00:09:45,460 --> 00:09:49,730
 

147
00:09:49,810 --> 00:09:52,390
我々はこの小さな部分を変更したいだけです。

148
00:09:52,390 --> 00:09:55,000
だから我々が使いたいものは、実際には別のスパンです。

149
00:09:55,300 --> 00:09:58,950
だから私たちは元に戻って、数字の周りにスパンを追加します。

150
00:09:59,380 --> 00:10:04,300
これは、全体の要素ではなく、要素のほんの一部をターゲットにするためにも使用できます。

151
00:10:04,300 --> 00:10:06,400
 

152
00:10:06,820 --> 00:10:11,380
そして、私は実際には、今度はそれを選択する別の方法を示すためにアイデアを与えるつもりはありません。

153
00:10:11,710 --> 00:10:14,780
それで段落ではなくスパンであることを覚えておいてください。

154
00:10:14,920 --> 00:10:17,010
私たちのページにはそれだけのものがあります。

155
00:10:17,110 --> 00:10:18,060
だから私たちは戻ってきます。

156
00:10:18,310 --> 00:10:26,470
したがって、段落を選択するのではなく、新しい変数を作成して、得点表示と呼び、それをドキュメントクエリセレクタにします。

157
00:10:27,010 --> 00:10:30,170
 

158
00:10:30,970 --> 00:10:38,740
しかし、ページに他のスパンがあるので段落だけでなく、段落の内側にスパンを選択する必要があります。

159
00:10:38,740 --> 00:10:39,520
 

160
00:10:39,550 --> 00:10:40,690
だからこそ、私たちは書かなければなりません。

161
00:10:40,810 --> 00:10:41,930
P空間。

162
00:10:41,930 --> 00:10:42,710
スパン。

163
00:10:43,240 --> 00:10:44,490
そして私たちは救います。

164
00:10:44,980 --> 00:10:49,970
そして、ここで段落の代わりにここに表示される勝利スコアを更新しましょう。

165
00:10:49,990 --> 00:10:53,710
こうして勝利の表示はこのようになります。

166
00:10:54,010 --> 00:10:56,020
それでもまだ完璧ではないでしょう。

167
00:10:56,080 --> 00:11:02,080
毎回値が更新されるだけですが、少なくとも段落全体を更新しているわけではありません。

168
00:11:02,950 --> 00:11:08,680
次のステップでは、値を入力内に表示して値を同期させるように更新します。

169
00:11:08,680 --> 00:11:10,840
 

170
00:11:10,880 --> 00:11:13,920
したがって、入力からデータを取得する方法は実際にはわかりません。

171
00:11:13,960 --> 00:11:15,940
現在の値をどうやって取得するのですか？

172
00:11:15,940 --> 00:11:18,100
ここでは入力を選択して説明します。

173
00:11:18,250 --> 00:11:24,940
クエリセレクタをドキュメントし、コンソール入力でそれを行うつもりです。変数に保存するつもりだから、var input

174
00:11:24,940 --> 00:11:30,790
document taqueriaと入力して入力値を指定します。

175
00:11:31,630 --> 00:11:32,750
 

176
00:11:33,040 --> 00:11:39,040
その値は、値が何であれ、この入力に含まれるものの文字列になります。

177
00:11:39,040 --> 00:11:43,800
したがって、これを7に変更してコードを再実行すると、7が得られます。

178
00:11:44,120 --> 00:11:50,800
私はそれを膨大な数にして今回はもう一度やりますが、この入力の中に何らかの価値があることを反映しています。

179
00:11:50,800 --> 00:11:51,520
 

180
00:11:51,520 --> 00:11:56,950
だから、変更した文字列値の代わりにこれを変更することで、これを利用する予定です。

181
00:11:56,950 --> 00:12:10,030
私たちはそれをNahm入力ドット値に変更し、ここから値を取り、勝利スコアを変更してテキストの内容を表示します。

182
00:12:10,030 --> 00:12:12,710
 

183
00:12:13,370 --> 00:12:18,690
そこで私たちはリフレッシュし、これを更新して、あなたは今一緒に同期することができます。

184
00:12:19,030 --> 00:12:26,020
だから私は1から3にこれを更新すると、私のプレイや獲得スコア表示も1から3に更新されます。

185
00:12:26,020 --> 00:12:26,900
 

186
00:12:27,340 --> 00:12:30,580
だからもちろん、私たちは123に遊びません。

187
00:12:30,580 --> 00:12:32,350
私たちはまだ5つまでプレーしています。

188
00:12:32,740 --> 00:12:38,590
そして、それは、私たちのロジックがこの新しい入力値を反映していないからです。反映されているのは、当初の5という勝利スコアです。

189
00:12:38,870 --> 00:12:40,280
 

190
00:12:40,480 --> 00:12:51,430
だから私たちはまた、入力値を麻痺させて保存するのと同じスコアを獲得することをここに変更したいと思います。

191
00:12:51,430 --> 00:12:57,700
そして今、これを変更して3つまでプレーしてみましょう。クリックすると、奇妙な振る舞いに気付くでしょう。

192
00:12:57,700 --> 00:12:58,790
 

193
00:12:58,840 --> 00:13:00,940
それで、5時にも止まらなかった。

194
00:13:00,970 --> 00:13:02,370
それは永遠に続く。

195
00:13:02,650 --> 00:13:08,200
だからこれは面白いバグで、データ型や数値の種類が違っていて、それらを2倍と3倍に比べて比較する必要があります。

196
00:13:08,240 --> 00:13:10,300
 

197
00:13:10,300 --> 00:13:14,200
だから、それの底に到達するために、いくつかの短所をしよう。 ロギング。

198
00:13:14,200 --> 00:13:21,220
だから、このすべての要点は、ここのラインか、ここでは、プレーヤーのスコアが勝者のスコアと等しいかどうかを調べているラインです。

199
00:13:21,220 --> 00:13:24,700
 

200
00:13:24,820 --> 00:13:26,790
それがゲームを真実にする時です。

201
00:13:27,130 --> 00:13:29,610
ゲームオーバーのため、今は起こっていません。

202
00:13:29,620 --> 00:13:31,460
スコアを変更した場合

203
00:13:31,450 --> 00:13:33,730
ゲームオーバーは決して変化しません。

204
00:13:33,820 --> 00:13:35,460
それは常に偽です。

205
00:13:35,710 --> 00:13:37,660
だから何かがこの線で間違っている。

206
00:13:37,780 --> 00:13:41,860
だから、取り消しログを作って、2つのことをやろうとしましょう。

207
00:13:41,870 --> 00:13:46,900
選手1の得点をプリントアウトして勝利点を印刷し、カンマで分けて同じ行に印刷します。

208
00:13:46,900 --> 00:13:49,700
 

209
00:13:49,720 --> 00:13:54,640
Comstockログを使用した簡単なメモは、今すぐデバッグする方法ですが、後でさらに高度なデバッグ方法について説明します。

210
00:13:54,820 --> 00:13:56,820
 

211
00:13:57,010 --> 00:14:04,010
だから私はリフレッシュし、開始すると、プレイヤー1の得点が上がったことを見て、3点を得て、5点目と比較しています。

212
00:14:04,810 --> 00:14:07,470
 

213
00:14:07,540 --> 00:14:10,670
プレイヤー1スコアは3つの勝利スコアは5です。

214
00:14:10,900 --> 00:14:15,250
しかし、私がこれを変更してすぐに7と言いましょう。そして今すぐクリックします。

215
00:14:15,250 --> 00:14:22,330
プレイヤー1は、現在、数字4のプレイヤー1スコアをストリング7である勝利スコアと比較しています。

216
00:14:22,390 --> 00:14:23,160
 

217
00:14:23,440 --> 00:14:27,090
私がちょうど5で始めるなら、再びリフレッシュしてください。

218
00:14:27,110 --> 00:14:28,420
それはうまく動作します。

219
00:14:28,780 --> 00:14:34,490
しかし、私がこれを変えて、それを数字と文字列と比較すると、私たちはここでトリプルイコールをしているので、それはうまくいかないでしょう。

220
00:14:34,480 --> 00:14:36,680
 

221
00:14:36,790 --> 00:14:40,590
だから私達は二重の等価をすることができますが、あなたは私がそれのファンではないことを知っています。

222
00:14:40,610 --> 00:14:45,790
だから私たちが代わりにやることは、ここに落ちてこれを取ってその価値を入れて文字列にすることです。

223
00:14:45,790 --> 00:14:46,670
 

224
00:14:46,780 --> 00:14:54,730
その数字と同じように、その大文字と数字を入力して渡して、それを文字列に変換し、それを勝ち抜くように設定します。

225
00:14:54,730 --> 00:14:57,130
 

226
00:14:57,220 --> 00:14:58,020
だから我々は新鮮だった。

227
00:14:58,020 --> 00:15:02,210
今これはうまく動作します。

228
00:15:02,760 --> 00:15:11,120
我々は5になるが、我々もそれを私たちのゲームに変えれば2で終わる。

229
00:15:11,230 --> 00:15:15,790
私たちが始めたことである5つのゲームをプレイしている場合、それに焦点を当てる必要がある小さな問題が1つあります。

230
00:15:15,790 --> 00:15:17,000
 

231
00:15:17,170 --> 00:15:22,310
それを途中で決めると、最高得点で勝利スコアを変更したいと思っています。

232
00:15:22,390 --> 00:15:27,160
今私たちのコードはこれをうまく処理しません。なぜなら私がこれを変更すれば、私たちは3つしか演奏しないからです。

233
00:15:27,160 --> 00:15:28,920
 

234
00:15:28,960 --> 00:15:30,630
これを処理する方法は2つあります。

235
00:15:30,640 --> 00:15:34,610
最初のものは、スコアとすべてを0に戻しています。

236
00:15:34,880 --> 00:15:37,790
もう1人は5人までプレーし続けています。

237
00:15:38,120 --> 00:15:43,010
しかし、実際に起こっているのは、私たちが3つまでプレーしているということですが、すでに3つを超えています。

238
00:15:43,300 --> 00:15:48,160
だから私たちはすでにそれを渡しているので、私たちが嘘をついているので、私たちのコードは実際にはもう機能しません。

239
00:15:48,160 --> 00:15:51,390
 

240
00:15:51,400 --> 00:15:53,790
勝つスコアよりも大きいかどうかはチェックしていません。

241
00:15:54,040 --> 00:15:55,170
もし私たちがそれを変えることができたら。

242
00:15:55,180 --> 00:16:00,830
だから、もしそれが勝ち点を上回るなら、試合は終わっていて、それはいいです。

243
00:16:00,970 --> 00:16:08,920
 

244
00:16:08,920 --> 00:16:12,970
 

245
00:16:12,970 --> 00:16:18,520
しかし、もっと良い解決策は、ゲームの途中で最大のスコアを決して変更したことがないので、最大のスコアを変更するたびにゼロにリセットすることだと思います。私たちはゲームをやり直したいと思っています。短いリファクタのための良いユースケースですか？

246
00:16:18,880 --> 00:16:22,410
だからここで得点を変えると勝ちです。

247
00:16:22,610 --> 00:16:27,370
ここで実行しているのと同じロジックのゲームをリセットしたい。

248
00:16:27,430 --> 00:16:34,720
ですから、このコードをコピーしてresetという新しい関数を作成するだけです。

249
00:16:34,720 --> 00:16:41,780
関数のリセットはこのコードをすべてそこに置き、数値入力が変わるとリセットを実行するだけです。

250
00:16:41,770 --> 00:16:44,780
 

251
00:16:44,890 --> 00:16:48,920
だから、ここで私は5に遊んでリセットを参照してください。

252
00:16:48,940 --> 00:16:49,960
これは正常に動作します。

253
00:16:49,960 --> 00:16:50,950
私たちは5つになる。

254
00:16:51,100 --> 00:16:58,240
私はリセットをクリックし、このイベントリスナーの内部でリセット関数を呼び出さなかったので、リセット関数呼び出しを追加する必要があります。

255
00:16:58,240 --> 00:16:59,840
 

256
00:16:59,950 --> 00:17:02,370
そして今私達がリフレッシュすれば私達は5になる。

257
00:17:02,770 --> 00:17:03,980
私はリセットをクリックします。

258
00:17:04,030 --> 00:17:04,970
それはすべて良いです。

259
00:17:05,140 --> 00:17:11,840
そして今私が試合途中でスコアを変更しても、それがリセットされ、今度は1になる。

260
00:17:11,890 --> 00:17:12,800
そして、それは動作します。

261
00:17:13,100 --> 00:17:14,220
または私が変更した場合。

262
00:17:14,230 --> 00:17:17,710
だから私たちは現在7歳になっている。

263
00:17:17,800 --> 00:17:19,730
私たちはゼロに戻します。

264
00:17:20,020 --> 00:17:27,190
だから私はあなたが実際には2になるゲームであることを知っていると判断した場合、代わりに仕様をゼロに変更します。

265
00:17:27,280 --> 00:17:29,910
そして、私たちはそれをどう扱うか心配する必要はありません。

266
00:17:29,920 --> 00:17:31,380
途中で変更した場合。

267
00:17:31,510 --> 00:17:37,510
だから私たちがやっていることは、コードをここで、そしてここで複製するのではなく、コードを乾かすための別の機能をリセットすることだけです。

268
00:17:37,510 --> 00:17:40,900
 

269
00:17:40,960 --> 00:17:41,940
それは今のところそれです。

270
00:17:41,950 --> 00:17:43,510
それだけでいいのです。

271
00:17:43,630 --> 00:17:48,610
あなたの中には、このコードが実際にこれを行う可能性のある最良の方法であるかどうか疑問に思うかもしれません。

272
00:17:48,620 --> 00:17:49,590
答えはいいえだ。

273
00:17:49,850 --> 00:17:54,500
あなたがよく見ると、それは非常に似ていることがわかります。

274
00:17:54,490 --> 00:18:00,150
それは基本的には同じですが、ここではここで、P2はここでやっています。

275
00:18:00,160 --> 00:18:01,930
しかし、他のすべての言葉は同じです。

276
00:18:02,470 --> 00:18:06,390
したがって、これを少し良くするという、より高度なリファクタリング方法があります。

277
00:18:06,490 --> 00:18:12,490
しかし、ここでは私が焦点を当てたいのは、概念的には、JavaScriptイベントリスナーセレクターの支配的な関係とインタラクティブなHD

278
00:18:12,550 --> 00:18:18,020
IMOをどのように取り入れることができるのかということです。

279
00:18:18,380 --> 00:18:23,800
しかし、ちょうどこのようなコードを少し短めにするほうが良い方法を見ていることを知っておいてください。

280
00:18:23,800 --> 00:18:25,010
 

281
00:18:25,030 --> 00:18:29,860
私たちがここで行うことができ、それをイベントリスナーに置くことができることが1つあります。

282
00:18:30,050 --> 00:18:37,150
私たちはちょうどこれをマイナーチェンジであるという言葉で置き換えてもよいが、それを行うことができ、ちょっとコードを少しだけ短くすることができる。

283
00:18:37,150 --> 00:18:38,620
 

284
00:18:38,740 --> 00:18:41,650
だから私がこれを変えれば、私たちは今3つに遊んでいる。

285
00:18:41,650 --> 00:18:43,870
すべてがまったく同じように機能します。

286
00:18:43,880 --> 00:18:50,480
私はちょうどイベントが何を入力したのか聞いていたものを指しているこのキーワードを使用しました。

287
00:18:50,990 --> 00:18:52,650
さて、このレッスンではそれだけです。

288
00:18:52,780 --> 00:18:57,280
私が次のプロジェクトで言及したように、我々はより実質的なものを作り上げようとしています。そして、これよりももっと良く見えると約束します。

289
00:18:57,280 --> 00:18:59,010