1
00:00:00,330 --> 00:00:05,310
これで最後の場所が1つあります。リセット機能はコードの冒頭にあります。

2
00:00:05,550 --> 00:00:11,000
 

3
00:00:11,010 --> 00:00:17,220
ページが初めて読み込まれるときには、ランダムな色を選択する必要があります。既に行っている新しいランダムな色から1つの色を選択する必要があります。

4
00:00:17,820 --> 00:00:24,570
そして、ページの各四角に色を割り当てる必要があります。そのため、基本的にはリセット機能を使用できます。

5
00:00:24,570 --> 00:00:26,290
 

6
00:00:26,490 --> 00:00:31,960
そして、実際にinitという非常に冒頭のところで関数を実行するだけで、物事をきれいにするつもりです。それは存在しません。

7
00:00:32,340 --> 00:00:33,430
 

8
00:00:33,600 --> 00:00:38,610
また、init関数の中では、ページが読み込まれたときに実行する必要があるすべてを配置します。

9
00:00:39,000 --> 00:00:41,490
そこで関数initを使用します。

10
00:00:41,790 --> 00:00:47,970
そして、私たちのネット関数の中で、最初にできることは、モードボタンのリスナーを追加することです。

11
00:00:47,970 --> 00:00:49,070
 

12
00:00:50,250 --> 00:00:52,200
そして、これは本当に物事をきれいにすることです。

13
00:00:52,230 --> 00:00:55,110
だからこそどこにも浮かんでいないだけです。

14
00:00:55,320 --> 00:00:56,850
したがって、これは適切にインデントされます。

15
00:00:57,000 --> 00:01:05,260
これは私たちのモードボタンのイベントリスナーです。ここでこのコードを取得します。

16
00:01:05,400 --> 00:01:10,420
そして、これは、私たちが取り除くことができる各正方形の色を変えることです。

17
00:01:10,560 --> 00:01:16,410
そのリセットを使用するので、私たちはもうこれを行う必要はありません。そして、クリックしたときにも、このロジックをすべてちょっと整理する必要があるように、各正方形にklickリスナーを追加します。

18
00:01:16,410 --> 00:01:21,780
 

19
00:01:22,620 --> 00:01:26,980
私たちはリセットボタンの色を変えてメッセージ表示を変更しています。

20
00:01:27,030 --> 00:01:33,780
ですから、これを私たちのinit関数にコピーするだけです。なぜなら、ページがうまく読み込まれ、これも適切に実行されたときに、最初から実行したいからです。

21
00:01:33,900 --> 00:01:38,560
 

22
00:01:38,820 --> 00:01:44,970
 

23
00:01:45,060 --> 00:01:52,080
 

24
00:01:52,080 --> 00:01:59,610
最後に、ここでボタンモードボタンと四角形のイベントハンドラを設定したら、リセット機能を実行することを意味する画面をリセットするだけです。リセットは実際に色を生成します色は未定義にすることも、空の配列を最初に設定することもできます。

25
00:01:59,610 --> 00:02:01,260
 

26
00:02:01,260 --> 00:02:02,230
私はそれから始めます。

27
00:02:02,280 --> 00:02:04,040
さて空の配列を最初に付けてみましょう。

28
00:02:04,350 --> 00:02:11,910
そして、私たちができることは、拾い上げられた色をただ価値のない変数にして保存し、物事を少しきれいにすることです。

29
00:02:11,910 --> 00:02:13,920
 

30
00:02:14,010 --> 00:02:19,980
ここではセレクタを下に移動して、上の方が3つの変数を選択するようにします。

31
00:02:19,980 --> 00:02:20,760
 

32
00:02:20,760 --> 00:02:25,620
そして、ページ上のさまざまな要素を選択する変数があります。

33
00:02:26,100 --> 00:02:26,620
OK。

34
00:02:26,790 --> 00:02:29,360
だから、やはり最初のことが起こります。

35
00:02:29,550 --> 00:02:34,600
このコードをここで実行するinit関数を実行します。

36
00:02:35,010 --> 00:02:42,160
 

37
00:02:42,600 --> 00:02:49,050
 

38
00:02:49,050 --> 00:02:50,980
そのコードはモードボタンのリスナーを設定し、正方形のリスナーを設定してからリセットを実行し、選択した色からランダムな色を選んだ色を選択し、テキストの内容とそのすべてを変更します。

39
00:02:51,150 --> 00:02:56,400
そして、リセットを呼び出すinit関数の内部でこれを行うので、この行を取り除くことができます。

40
00:02:56,520 --> 00:02:57,730
 

41
00:02:57,780 --> 00:03:01,720
だから私たちが上に移動する前にこれが動作することを確認しましょう。

42
00:03:02,610 --> 00:03:04,860
私たちは詐欺師を開く。 エラーはありません。

43
00:03:04,890 --> 00:03:05,860
そして、私はページをリフレッシュし、そのコードのすべてがそのinit関数で実行されていることがわかります。

44
00:03:06,180 --> 00:03:11,370
そこには、私たちが見ているすべてのものがリセットされています。

45
00:03:11,370 --> 00:03:15,270
だから私たちのリスナーは正しく設定されています。

46
00:03:15,270 --> 00:03:17,190
正しいメッセージが表示されます。

47
00:03:17,460 --> 00:03:19,140
もう一度遊びましょう。

48
00:03:19,140 --> 00:03:20,160
すべてがうまくいきます。

49
00:03:20,370 --> 00:03:21,890
簡単モードで遊ぼう。

50
00:03:22,170 --> 00:03:24,440
そこに行く。

51
00:03:25,680 --> 00:03:26,340
もう一度やり直しましょう。

52
00:03:26,340 --> 00:03:31,430
すばらしいです。

53
00:03:31,530 --> 00:03:32,000
だからうまくいく。

54
00:03:32,100 --> 00:03:35,880
 

55
00:03:35,910 --> 00:03:40,890
 

56
00:03:40,890 --> 00:03:45,750
私たちが作ることができるもう1つの変更があります。ここにこの機能があり、少し長めです。私が働いた人の中には、機能の長さに関する厳しいルールがあります。

57
00:03:45,750 --> 00:03:46,290
あなたのコードが10行以上であれば、それを自分の関数に分割する必要があると言う人もいます。

58
00:03:46,290 --> 00:03:51,900
だから、ここでそれをすることができました。

59
00:03:52,230 --> 00:03:53,500
 

60
00:03:53,700 --> 00:03:59,370
これはモードボタンリスナーを設定しているので、ここでそれを行うことができます。

61
00:03:59,370 --> 00:04:00,000
 

62
00:04:00,040 --> 00:04:09,690
また、モードボタンを書くだけでモードボタンを設定して、その機能をモードファンクションのモードボタンで宣言します。

63
00:04:09,690 --> 00:04:15,010
 

64
00:04:15,960 --> 00:04:24,900
ここでは、そのコードを貼り付けて、ちょうど最初にインデントを正しく実行します。

65
00:04:24,900 --> 00:04:25,470
モードボタンリスナーを設定しました。ここでも同じことができます。

66
00:04:25,470 --> 00:04:29,450
 

67
00:04:29,460 --> 00:04:38,100
このコードをコピーすれば、これを正方形のリスナーを設定する名前にするか、あるいはそのような四角形を設定して関数を設定します。

68
00:04:38,100 --> 00:04:45,120
そして、私はあなたがそこにいる資本を使わなかったことに気付いています。

69
00:04:45,120 --> 00:04:48,240
 

70
00:04:48,300 --> 00:04:55,740
だから私はここにその正方形を設定することに注意を払う必要があり、私たちのコードが同じように動作することを確認します。

71
00:04:55,740 --> 00:04:56,340
だから、私たちのinitは本当に素晴らしく清潔です。

72
00:04:56,340 --> 00:04:59,130
それは四角形を設定するモードボタンを設定し、私たちが見るすべてをリセットします。

73
00:04:59,250 --> 00:05:04,610
リフレッシュしようとしましょう。

74
00:05:04,680 --> 00:05:06,850
私たちのスクエアはまだうまく動作しているように見えます。

75
00:05:07,170 --> 00:05:10,970
もっとリフレッシュしても、モードボタンは正常に機能します。

76
00:05:11,100 --> 00:05:15,510
それはすべて素晴らしいですし、すべてがうまく動いているように見えます。

77
00:05:15,510 --> 00:05:19,040
それは今のところリファクタリングにかかる​​までです。

78
00:05:19,430 --> 00:05:21,600
しかし、今後のビデオで改善したいことをいくつか紹介します。

79
00:05:21,600 --> 00:05:26,360
JavaScriptについてもう少し学び、それに慣れたら、いくつかのデザインパターンについてお話しましょう。デザインパターンは基本的にコードを構造化してこのコードを作る方法です。

80
00:05:26,610 --> 00:05:31,020
 

81
00:05:31,020 --> 00:05:36,690
それは同じロジックを同じゲームにするのと同じ方法で動作し、10人の異なる人々が10種類の方法でそれを書くことができます。そして、私たちが乗っている機能や変数の名前だけではありません。

82
00:05:36,690 --> 00:05:42,030
 

83
00:05:42,030 --> 00:05:47,690
それは一般的に物事を構成する方法でもあり、もっとも一般的なもののうち最も簡単なものの1つまたは1つをモジュール設計パターンと呼びます。

84
00:05:47,820 --> 00:05:53,100
 

85
00:05:53,460 --> 00:05:55,650
 

86
00:05:55,890 --> 00:06:01,860
つまり、オブジェクトにたくさんのプロパティを追加することができます。そのため、オブジェクトの内部に浮かぶような変数はありません。

87
00:06:01,860 --> 00:06:05,460
私たちは、ウィンドウオブジェクト上でこのような独自の機能を持っていません。

88
00:06:05,550 --> 00:06:10,000
むしろ、私たち自身のオブジェクトにそれらを追加します。

89
00:06:10,080 --> 00:06:12,790
だから、あなたはゲームオブジェクトを持つことができるこのようなものに見えます。

90
00:06:12,870 --> 00:06:16,840
そしてゲームドットを書くかもしれないし、ちょうどその一部をやるつもりだ。

91
00:06:17,280 --> 00:06:21,840
Game

92
00:06:21,870 --> 00:06:30,690
dot initは関数であり、そこにこのコードをコピーするだけで、すべての単一のプロパティ変数ごとにこれを行い、最後にゲームを実行するだけです。

93
00:06:30,690 --> 00:06:36,590
そして、この背後にある理由は少し複雑です。

94
00:06:36,620 --> 00:06:41,130
短いバージョンは、物事を構造化し、整理しておくのに役立つということです。

95
00:06:41,130 --> 00:06:44,720
また、オブジェクト・ビデオの1つで前述した名前空間の衝突を避けるのにも役立ちます。

96
00:06:44,940 --> 00:06:50,290
だから私はこのリファクタ全体を通過しません。

97
00:06:50,460 --> 00:06:52,620
私たちが持っているものは十分です。

98
00:06:52,620 --> 00:06:53,730
それはうまく動作します。

99
00:06:53,730 --> 00:06:54,880
 

100
00:06:54,990 --> 00:06:59,100
 

101
00:06:59,100 --> 00:07:04,590
しかし、あなたが開発者として成長し続けると、一度あなたがもっと快適になるように注意を払うものの一つを学びます.JavaScriptのデザインパターンであり、これに書かれた本があります。

102
00:07:04,590 --> 00:07:05,010
 

103
00:07:05,010 --> 00:07:10,740
エッセイやブログ、たくさんの動画があり、実際にはJavaScriptを構造化するだけのコースが実際にオンラインになっています。

104
00:07:10,740 --> 00:07:11,670
だからそれは焦点ではない。

105
00:07:11,790 --> 00:07:12,940
 

106
00:07:12,970 --> 00:07:18,390
そして私はまだ本当にちょうどコンテンツに焦点を当てたいHTMLのJavaScriptはCのロジックを評価し、構造は後で来ることができます。

107
00:07:18,450 --> 00:07:20,910
しかし、私はあなたに、これを構造化する他の方法があることを知りたがっています

108
00:07:21,210 --> 00:07:24,260