1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [Rangka Kerja JavaScript: Mengapa dan Bagaimana]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Universiti Harvard]

3
00:00:04,000 --> 00:00:06,960
[Ini adalah CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hi, semua orang. Selamat datang ke seminar Rangka Kerja JavaScript.

5
00:00:10,630 --> 00:00:14,910
Nama saya Kevin, dan hari ini saya akan bercakap tentang rangka kerja JavaScript,

6
00:00:14,910 --> 00:00:20,400
dan matlamat seminar ini bukan untuk anda, katakan, menguasai kerangka tertentu per se

7
00:00:20,400 --> 00:00:23,810
tetapi untuk memberikan pengenalan yang luas kepada beberapa rangka kerja

8
00:00:23,810 --> 00:00:27,150
dan menunjukkan mengapa kita pernah mahu menggunakan rangka kerja.

9
00:00:27,150 --> 00:00:31,060
>> Sebelum saya berbuat demikian, saya akan memberikan sedikit latar belakang dalam JavaScript,

10
00:00:31,060 --> 00:00:33,750
dan kemudian kami akan mengambil dari sana.

11
00:00:33,750 --> 00:00:36,270
Kami akan bermula dengan melaksanakan senarai to-do.

12
00:00:36,270 --> 00:00:39,330
Berikut adalah senarai tugas kita untuk hari ini.

13
00:00:39,330 --> 00:00:41,990
Ia adalah jenis lucu. Kami perlu melaksanakannya senarai tugasan dalam JavaScript.

14
00:00:41,990 --> 00:00:45,110
Ini adalah apa yang ia akan kelihatan seperti, jadi itulah matlamat pertama kami.

15
00:00:45,110 --> 00:00:47,160
Kami tidak akan menggunakan rangka kerja untuk berbuat demikian.

16
00:00:47,160 --> 00:00:51,930
Kami akan kod JavaScript dan mendapatkan senarai tugasan untuk bekerja.

17
00:00:51,930 --> 00:00:54,370
Kemudian kita akan memperbaiki reka bentuk tanpa menggunakan rangka kerja.

18
00:00:54,370 --> 00:00:57,190
Kami akan membincangkan pelbagai perkara yang kita boleh lakukan dengan hanya JavaScript sahaja

19
00:00:57,190 --> 00:01:00,650
membuat kami untuk tugasan menyenaraikan sedikit direka lebih baik.

20
00:01:00,650 --> 00:01:02,490
Kemudian kita akan membuang dalam beberapa jQuery,

21
00:01:02,490 --> 00:01:05,030
dan kemudian kita akan melihat pada masa yang sama untuk senarai tugasan,

22
00:01:05,030 --> 00:01:07,170
hanya dilaksanakan dalam rangka kerja yang berbeza, dan kita akan membincangkan

23
00:01:07,170 --> 00:01:09,280
 kebaikan dan keburukan di sepanjang jalan.

24
00:01:09,280 --> 00:01:12,040
>> Mari kita mula melaksanakan bahawa senarai tugasan.

25
00:01:12,040 --> 00:01:14,270
Katakan kita diberikan HTML ini.

26
00:01:14,270 --> 00:01:16,620
Saya akan membuat ini lebih kecil sedikit.

27
00:01:16,620 --> 00:01:19,300
Seperti yang anda lihat, saya mempunyai tajuk kecil yang mengatakan Todo

28
00:01:19,300 --> 00:01:21,740
dan kotak kecil di mana saya boleh memasukkan penerangan mengenai todo

29
00:01:21,740 --> 00:01:26,990
dan kemudian butang item baru, jadi mari kita cuba untuk memasukkan todo baru kepada senarai ini.

30
00:01:26,990 --> 00:01:31,000
Beri seminar rangka kerja JavaScript,

31
00:01:31,000 --> 00:01:33,090
dan saya untuk memukul item baru.

32
00:01:33,090 --> 00:01:35,730
Saya mendapat amaran JavaScript ini yang mengatakan melaksanakan saya.

33
00:01:35,730 --> 00:01:37,560
Kami telah mendapat untuk melaksanakannya.

34
00:01:37,560 --> 00:01:41,490
Mari kita lihat kod untuk ini, kedua-dua HTML dan JavaScript.

35
00:01:41,490 --> 00:01:43,260
Berikut adalah HTML kami.

36
00:01:43,260 --> 00:01:45,500
Seperti yang anda boleh lihat di sini, di sini Todos tajuk kecil kita.

37
00:01:45,500 --> 00:01:47,620
Itu adalah perkara yang berani di atas,

38
00:01:47,620 --> 00:01:50,690
dan kemudian kita mempunyai kotak input dengan ruang letak,

39
00:01:50,690 --> 00:01:59,460
dan kemudian ada satu sifat yang tertentu butang ini yang menyeru ini addTodo berfungsi.

40
00:01:59,460 --> 00:02:05,460
Adakah sesiapa mahu rasa apa yang di klik ini menandakan?

41
00:02:05,460 --> 00:02:07,390
[Pelajar balas didengar]

42
00:02:07,390 --> 00:02:09,289
Baik, klik di atas adalah jenis seperti acara,

43
00:02:09,289 --> 00:02:12,120
seperti klik tetikus hanya satu acara dan apa yang kami lakukan

44
00:02:12,120 --> 00:02:16,890
adalah kita mengikat sekiranya klik butang ini untuk melaksanakan fungsi itu.

45
00:02:16,890 --> 00:02:21,700
AddTodo ialah pengendali peristiwa untuk menekan butang itu.

46
00:02:21,700 --> 00:02:25,010
>> Seperti yang anda boleh lihat, apabila saya klik butang item baru

47
00:02:25,010 --> 00:02:29,940
Sekiranya klik pada mendapat dipecat, dan fungsi ini mendapat dipanggil.

48
00:02:29,940 --> 00:02:33,170
Mari kita lihat fungsi.

49
00:02:33,170 --> 00:02:36,260
Seperti yang anda lihat, di sini kod JavaScript saya setakat ini.

50
00:02:36,260 --> 00:02:41,280
Apa yang saya ada di atas adalah satu struktur data global untuk senarai tugasan saya.

51
00:02:41,280 --> 00:02:44,060
Ia kelihatan seperti array. Ia hanya pelbagai kosong.

52
00:02:44,060 --> 00:02:47,100
Dan kemudian saya mempunyai fungsi addTodo yang kita lihat sebelum ini,

53
00:02:47,100 --> 00:02:50,740
dan satu-satunya baris kod di sana adalah amaran ini.

54
00:02:50,740 --> 00:02:55,730
Ia melaksanakan amaran saya, dan kemudian saya mempunyai 2 tugas di tangan.

55
00:02:55,730 --> 00:02:58,790
Saya perlu menambah todo untuk bahawa struktur data global,

56
00:02:58,790 --> 00:03:01,860
dan kemudian saya ingin menarik keluar senarai to-do.

57
00:03:01,860 --> 00:03:06,360
Tiada apa-apa terlalu suka sahaja lagi, tetapi JavaScript anda mungkin tidak biasa dengan,

58
00:03:06,360 --> 00:03:12,370
jadi saya akan pergi perlahan dan mengkaji asas-asas JavaScript dengan cara itu.

59
00:03:12,370 --> 00:03:15,490
>> Mari kita memberikan ini pukulan.

60
00:03:15,490 --> 00:03:21,130
Katakan pengguna memasukkan sesuatu di dalam kotak ini.

61
00:03:21,130 --> 00:03:23,360
Saya hanya menaip sesuatu di sini, teks.

62
00:03:23,360 --> 00:03:27,620
Bagaimana saya menyusun akses bahawa teks melalui JavaScript?

63
00:03:27,620 --> 00:03:32,500
Ingatlah bahawa JavaScript, salah satu ciri-ciri asas adalah bahawa ia memberikan kita

64
00:03:32,500 --> 00:03:34,670
ini akses kepada perancangan DOM.

65
00:03:34,670 --> 00:03:40,670
Ia membolehkan kita untuk mengakses unsur-unsur dan sifat-sifat mereka HTML ini yang sebenar.

66
00:03:40,670 --> 00:03:43,430
Cara kita melakukannya dengan kosong tulang JavaScript

67
00:03:43,430 --> 00:03:51,360
ialah kita sebenarnya boleh menggunakan fungsi dalam JavaScript dipanggil getElementByID.

68
00:03:51,360 --> 00:03:55,140
Saya mahu menyimpan teks yang ditaip yang terdapat dalam beberapa berubah-ubah,

69
00:03:55,140 --> 00:03:58,350
jadi saya akan mengatakan yang berubah-ubah baru yang dipanggil new_todo,

70
00:03:58,350 --> 00:04:01,980
dan saya akan mendapat elemen itu.

71
00:04:01,980 --> 00:04:06,330
Ini adalah fungsi,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Dan kini saya mendapat satu elemen dengan ID, jadi saya memerlukan ID kotak teks,

73
00:04:11,580 --> 00:04:15,860
jadi saya telah diberikan new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
Itulah bagaimana saya akan mendapatkan unsur.

75
00:04:18,399 --> 00:04:23,880
Itulah hujah saya untuk fungsi ini, untuk menentukan yang ID untuk mendapatkan.

76
00:04:23,880 --> 00:04:28,110
Dan supaya satu elemen dalam HTML, dan ia mempunyai ciri-ciri.

77
00:04:28,110 --> 00:04:30,650
Anda telah melihat ini. Mereka sifat.

78
00:04:30,650 --> 00:04:37,090
Sifat elemen teks yang menyimpan input pengguna dipanggil nilai.

79
00:04:37,090 --> 00:04:40,860
Saya disimpan nilai yang kotak teks kini dalam pembolehubah ini dipanggil new_todo.

80
00:04:40,860 --> 00:04:45,040
Sekarang saya mempunyai akses perancangan untuk berubah-ubah ini, yang jenis sejuk

81
00:04:45,040 --> 00:04:49,200
kerana sekarang apa yang boleh saya lakukan ialah saya boleh menambah ke senarai tugasan saya.

82
00:04:49,200 --> 00:04:52,870
>> Cara kami akan melakukan ini dalam JavaScript dan jangan bimbang jika anda tidak biasa dengan ini,

83
00:04:52,870 --> 00:04:57,010
tetapi hanya akan melaluinya adalah todos.push

84
00:04:57,010 --> 00:05:00,130
kerana itulah nama struktur data global saya di sini,

85
00:05:00,130 --> 00:05:04,450
dan saya akan menolak new_todo.

86
00:05:04,450 --> 00:05:09,120
Ini bagus kerana sekarang saya telah menambah kepada saya JavaScript

87
00:05:09,120 --> 00:05:11,280
perwakilan bahawa senarai tugasan.

88
00:05:11,280 --> 00:05:15,170
Tetapi sekarang bagaimana saya boleh mendapatkan kembali ke HTML?

89
00:05:15,170 --> 00:05:18,560
Saya perlu mencari jalan untuk menyelesaikan daripada menolak kembali.

90
00:05:18,560 --> 00:05:21,830
Dalam erti kata lain, saya jenis perlu menarik ini.

91
00:05:21,830 --> 00:05:26,060
Apa yang kita akan lakukan ialah kita akan membuat senarai tugasan.

92
00:05:26,060 --> 00:05:29,270
Saya perlu mengemaskinikan HTML yang lain pada laman tersebut,

93
00:05:29,270 --> 00:05:32,040
dan seperti yang anda boleh lihat, saya telah meninggalkan bekas kecil di sini,

94
00:05:32,040 --> 00:05:36,840
pembahagi ini halaman yang ID todos,

95
00:05:36,840 --> 00:05:40,870
dan saya akan meletakkan senarai tugasan di sana.

96
00:05:40,870 --> 00:05:47,240
Pertama saya akan jelas ia keluar kerana, berkata, terdapat lama senarai tugasan di sana.

97
00:05:47,240 --> 00:05:49,560
Saya mendapat bahawa dengan elemen ID lagi,

98
00:05:49,560 --> 00:05:54,530
dan saya mengakses HTML dalaman elemen itu,

99
00:05:54,530 --> 00:05:58,010
dan saya akan menjelaskan bahawa.

100
00:05:58,010 --> 00:06:05,510
Jika kita meninggalkan kod ini, kita akan melihat apa-apa yang kosong di sana,

101
00:06:05,510 --> 00:06:10,410
dan sekarang saya ingin memulakan senarai baru menjadikan tugasan saya.

102
00:06:10,410 --> 00:06:12,870
Saya pada dasarnya akan menghapuskan senarai tugasan saya.

103
00:06:12,870 --> 00:06:18,180
>> Kini di dalam dalaman HTML itu div todos benar-benar jelas,

104
00:06:18,180 --> 00:06:20,060
dan sekarang saya perlu mula menambah senarai saya.

105
00:06:20,060 --> 00:06:23,890
Perkara pertama yang saya ingin menambah kembali adalah tidak tertib senarai tag,

106
00:06:23,890 --> 00:06:33,890
yang pada asasnya menunjukkan bahawa ini adalah permulaan senarai tidak tertib.

107
00:06:33,890 --> 00:06:39,770
Sekarang untuk setiap elemen dalam array todos saya, saya ingin mencetak dalam HTML itu.

108
00:06:39,770 --> 00:06:43,710
Saya mahu menambah ia ke bawah senarai ini.

109
00:06:43,710 --> 00:06:49,040
Sama seperti dalam C, saya boleh menggunakan untuk gelung, dan saya akan bermula pada awal senarai saya

110
00:06:49,040 --> 00:06:54,140
elemen di 0, dan saya akan pergi sepanjang jalan dengan panjang senarai.

111
00:06:54,140 --> 00:07:01,100
Kami benar-benar boleh mendapatkan panjang pelbagai dalam JavaScript menggunakan harta panjang.

112
00:07:01,100 --> 00:07:03,420
Pada asasnya saya akan melakukan sesuatu yang hampir sama dalam sini

113
00:07:03,420 --> 00:07:05,600
untuk mencetak unsur itu.

114
00:07:05,600 --> 00:07:12,970
Saya sekali lagi boleh mengakses div todos, harta HTML dalaman itu,

115
00:07:12,970 --> 00:07:17,560
dan saya akan menambah pada item senarai baru ini, dan itu akan dikelilingi oleh

116
00:07:17,560 --> 00:07:25,390
ini tag li, dan saya akan concatenate dengan operator + yang,

117
00:07:25,390 --> 00:07:28,040
dan itulah unsur-i daripada pelbagai todos saya,

118
00:07:28,040 --> 00:07:32,380
dan kemudian saya akan menutup tag itu.

119
00:07:32,380 --> 00:07:36,240
Sekarang untuk setiap elemen yang kita akan menambah kemasukan senarai baru.

120
00:07:36,240 --> 00:07:48,700
Dan kemudian semua yang kita benar-benar perlu lakukan ialah menutup tag itu.

121
00:07:48,700 --> 00:07:52,820
Saya hanya perlu untuk menutup bahawa tidak tertib senarai tag.

122
00:07:52,820 --> 00:07:55,490
>> Adakah anda mendapatkan rasa untuk bagaimana bahawa kerja-kerja?

123
00:07:55,490 --> 00:07:57,700
Ini membuka senarai keseluruhan.

124
00:07:57,700 --> 00:08:01,080
Ini menambah unsur-unsur individu dari senarai todos untuk senarai,

125
00:08:01,080 --> 00:08:05,470
dan kemudian yang menutup seluruh senarai, dan ini adalah fungsi addTodo saya.

126
00:08:05,470 --> 00:08:09,590
Saya pada dasarnya bermula dengan mendapat todo dari kotak teks.

127
00:08:09,590 --> 00:08:18,950
Saya menambah bahawa untuk pelbagai todos, dan kemudian I-menyebabkan semula senarai tugasan.

128
00:08:18,950 --> 00:08:21,520
Sekarang saya boleh menambah item ke senarai saya.

129
00:08:21,520 --> 00:08:24,620
Ini adalah jenis yang menarik kerana dalam hanya beberapa baris kod

130
00:08:24,620 --> 00:08:28,240
kita pada dasarnya membuat senarai tugasan di mana kita boleh menambah item.

131
00:08:28,240 --> 00:08:30,050
Besar.

132
00:08:30,050 --> 00:08:34,480
Itulah jenis pengenalan asas kepada JavaScript.

133
00:08:34,480 --> 00:08:36,179
Jangan bimbang terlalu banyak tentang sintaks untuk sekarang,

134
00:08:36,179 --> 00:08:38,130
tetapi berfikir tentang konsep ini.

135
00:08:38,130 --> 00:08:40,539
Kami mempunyai beberapa HTML.

136
00:08:40,539 --> 00:08:45,310
Kami mempunyai kotak teks pada halaman yang pada dasarnya membolehkan pengguna untuk input item tugasan untuk menambah.

137
00:08:45,310 --> 00:08:49,210
Dan kemudian kita digunakan JavaScript untuk mengambil todo bahawa dari kotak teks.

138
00:08:49,210 --> 00:08:52,830
Kami yang disimpan di dalam pelbagai JavaScript, yang pada asasnya seperti

139
00:08:52,830 --> 00:08:56,010
perwakilan perancangan kami bahawa untuk senarai tugasan,

140
00:08:56,010 --> 00:08:59,060
dan kemudian kita dicetak keluar.

141
00:08:59,060 --> 00:09:02,690
Ini adalah todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Ini adalah jenis sejuk, tetapi bagaimana kita boleh mengambil ini dengan lebih lanjut?

143
00:09:07,620 --> 00:09:11,350
Well, seperti yang anda boleh lihat, ini tidak seperti senarai tugasan yang lengkap.

144
00:09:11,350 --> 00:09:15,100
Sebagai contoh, saya tidak boleh menyekat mana-mana barang-barang ini sebagai tidak lengkap,

145
00:09:15,100 --> 00:09:19,920
suka jika saya mahu menyusun keutamaan barang-barang atau memadam item.

146
00:09:19,920 --> 00:09:23,150
Ini adalah baik-baik saja, tetapi kita boleh mengambil ini dengan lebih lanjut.

147
00:09:23,150 --> 00:09:29,280
Saya tidak akan bercakap terlalu banyak tentang menambah ciri-ciri tambahan,

148
00:09:29,280 --> 00:09:32,800
tetapi kita boleh mengambil yang jauh.

149
00:09:32,800 --> 00:09:35,970
Mari kita bercakap tentang menambah satu lagi ciri ini untuk senarai tugasan,

150
00:09:35,970 --> 00:09:40,370
yang akan dapat untuk memeriksa individu untuk melakukan perkara

151
00:09:40,370 --> 00:09:44,780
dan ia menyeberang keluar, jadi pada dasarnya mengatakan yang saya lakukan ini.

152
00:09:44,780 --> 00:09:50,240
Mari kita lihat beberapa kod yang boleh mencapai itu.

153
00:09:50,240 --> 00:09:52,740
Perhatikan apa yang saya lakukan di atas adalah saya telah menambah

154
00:09:52,740 --> 00:09:57,620
pelbagai global baru yang dikenali sebagai lengkap.

155
00:09:57,620 --> 00:10:02,890
Saya pada dasarnya menggunakan ini untuk menyimpan sama ada perkara-perkara yang pada senarai untuk-do

156
00:10:02,890 --> 00:10:06,560
lengkap atau tidak.

157
00:10:06,560 --> 00:10:08,470
Ini adalah satu cara untuk melakukan ini.

158
00:10:08,470 --> 00:10:13,750
Jika saya melihat pelaksanaan ini, paparan,

159
00:10:13,750 --> 00:10:21,120
pada dasarnya jika saya memasuki todo dan saya tekan butang ini toggle

160
00:10:21,120 --> 00:10:25,040
ia melintasi keluar, jadi setiap item di dalam senarai ini mempunyai sama ada lengkap

161
00:10:25,040 --> 00:10:31,050
atau keadaan yang tidak lengkap, dan saya menggunakan pelbagai lain untuk mewakili.

162
00:10:31,050 --> 00:10:33,730
>> Pada asasnya bagi setiap todo kerana pelbagai todos

163
00:10:33,730 --> 00:10:37,110
ada satu perkara di dalam pelbagai lengkap yang pada asasnya menunjukkan

164
00:10:37,110 --> 00:10:39,060
sama ada lengkap atau tidak.

165
00:10:39,060 --> 00:10:41,640
Saya mempunyai untuk membuat perubahan yang agak minimum kepada kod ini,

166
00:10:41,640 --> 00:10:44,470
jadi di sini adalah fungsi addTodo kami.

167
00:10:44,470 --> 00:10:48,530
Perhatikan bahawa di sini saya menolak ia ke pelbagai,

168
00:10:48,530 --> 00:10:51,300
dan kemudian saya menolak 0 a dengan pelbagai lengkap,

169
00:10:51,300 --> 00:10:57,090
asasnya selari dengan yang menolak todo baru untuk mengatakan

170
00:10:57,090 --> 00:11:00,430
Saya menambah perkara ini, dan ia ditambah pula dengan nilai ini,

171
00:11:00,430 --> 00:11:02,810
yang bermaksud bahawa ia adalah tidak lengkap.

172
00:11:02,810 --> 00:11:04,970
Dan kemudian saya persempadanan semula senarai untuk-do.

173
00:11:04,970 --> 00:11:09,220
Sekarang, melihat saya telah menambah fungsi ini drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Ini mengambil banyak kod yang kami sebelum ini,

175
00:11:11,760 --> 00:11:15,320
pada dasarnya hilang keluar kotak dan kemudian menarik baru untuk senarai tugasan.

176
00:11:15,320 --> 00:11:19,620
Tetapi melihat bahawa di dalam ini untuk gelung yang kita lakukan lebih sedikit sekarang.

177
00:11:19,620 --> 00:11:25,000
Kami pada dasarnya memeriksa sama ada perkara yang sama untuk todo ke-i di sini

178
00:11:25,000 --> 00:11:30,220
selesai, dan kami berkelakuan berbeza dalam 2 keadaan.

179
00:11:30,220 --> 00:11:32,790
Jika ia lengkap, kami menambah tag del ini,

180
00:11:32,790 --> 00:11:35,360
yang pada asasnya cara yang anda boleh mendapatkan mogok yang melalui kesan

181
00:11:35,360 --> 00:11:38,190
melintas keluar senarai tugasan jika ia lengkap,

182
00:11:38,190 --> 00:11:42,200
dan jika tidak, kita tidak termasuk ia.

183
00:11:42,200 --> 00:11:45,030
Dan sebagainya yang jenis menjaga itu,

184
00:11:45,030 --> 00:11:49,140
>> dan itulah salah satu cara untuk mencapai ini.

185
00:11:49,140 --> 00:11:53,420
Dan kemudian notis apabila pengguna klik salah satu daripada

186
00:11:53,420 --> 00:11:56,780
kita bertukar-tukar status siap itu.

187
00:11:56,780 --> 00:12:02,170
Apabila pengguna klik, kami akan mengubah sama ada ia telah selesai atau tidak,

188
00:12:02,170 --> 00:12:04,540
dan kemudian kita akan melukis itu.

189
00:12:04,540 --> 00:12:06,190
Ini jenis kerja-kerja.

190
00:12:06,190 --> 00:12:09,860
Kami mempunyai fungsi-fungsi yang menjalankan tugas-tugas mereka sendiri,

191
00:12:09,860 --> 00:12:11,730
dan ini adalah okay.

192
00:12:11,730 --> 00:12:14,110
Adakah apa-apa yang kita boleh lakukan yang lebih baik tentang perkara ini, walaupun?

193
00:12:14,110 --> 00:12:18,700
Notis ini kita mempunyai 2 barisan global.

194
00:12:18,700 --> 00:12:23,550
Jika ini adalah C, dan kami mempunyai 2 barisan yang jenis diwakili

195
00:12:23,550 --> 00:12:25,800
data yang telah jenis yang berkaitan dalam beberapa cara

196
00:12:25,800 --> 00:12:30,140
apa yang kita akan gunakan dalam C untuk menggabungkan ini 2 bidang

197
00:12:30,140 --> 00:12:35,420
menjadi sesuatu yang merangkumi kedua-dua keping maklumat?

198
00:12:35,420 --> 00:12:37,600
Sesiapa yang ingin membuat cadangan?

199
00:12:37,600 --> 00:12:39,450
[Pelajar balas didengar]

200
00:12:39,450 --> 00:12:42,340
>> Tepat sekali, jadi kita boleh menggunakan beberapa jenis struct,

201
00:12:42,340 --> 00:12:44,960
dan jika anda berfikir kembali, katakan, pset 3,

202
00:12:44,960 --> 00:12:47,350
ingat kita mempunyai kamus, dan kemudian kita mempunyai sama ada perkataan

203
00:12:47,350 --> 00:12:50,230
adalah di dalam kamus, dan semua maklumat yang telah meletakkan bersama-sama

204
00:12:50,230 --> 00:12:52,420
dalam struktur data tertentu.

205
00:12:52,420 --> 00:12:56,390
Satu perkara yang boleh saya lakukan dengan kod ini untuk mengelakkan ini 2 array berbeza

206
00:12:56,390 --> 00:13:01,760
untuk buah yang sama maklumat adalah saya boleh menggabungkan mereka ke dalam objek JavaScript.

207
00:13:01,760 --> 00:13:07,150
Mari kita lihat pada itu.

208
00:13:07,150 --> 00:13:11,740
Notis saya hanya mempunyai satu array di atas kini

209
00:13:11,740 --> 00:13:17,650
dan apa yang saya lakukan adalah-dan ini hanya sintaks JavaScript untuk jenis

210
00:13:17,650 --> 00:13:21,350
mewujudkan versi literal objek,

211
00:13:21,350 --> 00:13:24,670
dan notis terdapat 2 sifat, jadi kita perlu todo itu,

212
00:13:24,670 --> 00:13:29,660
dan ia disimpan bersama-sama dengan sama ada lengkap atau tidak lengkap.

213
00:13:29,660 --> 00:13:31,000
Ini adalah kod yang sama.

214
00:13:31,000 --> 00:13:35,310
Kami menggunakan objek JavaScript.

215
00:13:35,310 --> 00:13:38,600
Ini jenis perkara yang ditambah baik.

216
00:13:38,600 --> 00:13:43,850
Seperti sekarang, semua bidang yang berkaitan maklumat yang disimpan bersama-sama.

217
00:13:43,850 --> 00:13:46,410
Apabila kita pergi ke mencetak, kita boleh mengakses bidang.

218
00:13:46,410 --> 00:13:49,060
>> Perhatikan bagaimana kami lakukan todos [i]. Lengkap

219
00:13:49,060 --> 00:13:52,880
bukannya menyemak pelbagai lengkap secara berasingan,

220
00:13:52,880 --> 00:13:56,560
dan notis apabila kita mahu mendapatkan tali untuk tugasan kami mendapat harta tugasan

221
00:13:56,560 --> 00:13:58,750
itu todo, jadi seperti ini masuk akal kerana

222
00:13:58,750 --> 00:14:01,660
setiap item mempunyai sifat-sifat intrinsik mengenainya.

223
00:14:01,660 --> 00:14:05,650
Ia mempunyai todo, dan ia mempunyai sama ada lengkap atau tidak.

224
00:14:05,650 --> 00:14:11,540
Tidak terlalu banyak perubahan ada fungsi, hanya menambah beberapa lebih kepada kod.

225
00:14:11,540 --> 00:14:13,430
Ini adalah satu peningkatan di beberapa bidang, betul?

226
00:14:13,430 --> 00:14:16,030
Maksud saya, kami mengambil kira daripada reka bentuk sedikit.

227
00:14:16,030 --> 00:14:20,350
Sekarang kita mempunyai objek pada dasarnya merangkumi data ini.

228
00:14:20,350 --> 00:14:27,130
Adakah terdapat apa-apa lagi yang boleh kita lakukan daripada sini dari segi JavaScript?

229
00:14:27,130 --> 00:14:31,810
Seperti notis bahawa kod ini di sini

230
00:14:31,810 --> 00:14:34,760
untuk mendapatkan HTML dalaman div a

231
00:14:34,760 --> 00:14:40,520
adalah sedikit, saya rasa, panjang.

232
00:14:40,520 --> 00:14:45,100
Ada document.getElementByID ("todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Satu perkara yang kita boleh lakukan untuk membuat kod ini kelihatan sedikit mesra

234
00:14:48,400 --> 00:14:51,450
jadi saya tidak perlu menyimpan menatal ke kiri dan kanan, belakang dan sebagainya,

235
00:14:51,450 --> 00:14:58,480
adalah saya boleh menggunakan perpustakaan seperti jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Mari kita lihat Seminar 2,

237
00:15:02,710 --> 00:15:05,880
dan ini adalah kod yang sama, tetapi ia dilakukan dengan jQuery.

238
00:15:05,880 --> 00:15:08,790
Anda mungkin tidak terlalu biasa dengan jQuery,

239
00:15:08,790 --> 00:15:11,510
tetapi hanya tahu bahawa jQuery adalah jenis perpustakaan untuk JavaScript

240
00:15:11,510 --> 00:15:15,910
yang menjadikan ia lebih mudah untuk melakukan perkara-perkara seperti unsur-unsur individu akses yang DOM.

241
00:15:15,910 --> 00:15:21,280
Di sini bukannya mengatakan document.getElementByID ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Saya boleh menggunakan cara yang lebih bersih dalam jQuery,

243
00:15:25,210 --> 00:15:28,490
yang hanya untuk menggunakan pemilih.

244
00:15:28,490 --> 00:15:31,300
Seperti yang anda boleh lihat, kod ini tidak mendapatkan yang lebih bersih kecil,

245
00:15:31,300 --> 00:15:35,770
hampir sama fungsi, tetapi itu idea.

246
00:15:35,770 --> 00:15:37,980
Kami telah melihat beberapa perkara yang setakat ini,

247
00:15:37,980 --> 00:15:42,010
jadi kita bermula dengan pelaksanaan JavaScript hanya mentah.

248
00:15:42,010 --> 00:15:45,370
Kami telah menambah ciri-ciri baru dan menunjukkan bagaimana kita boleh meningkatkan dengan

249
00:15:45,370 --> 00:15:49,090
hanya apa yang kita ada dalam JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Adakah sesiapa nampak apa-apa masalah dengan reka bentuk ini?

251
00:15:53,300 --> 00:16:01,090
Iaitu, saya rasa-atau tidak semestinya masalah tetapi katakan

252
00:16:01,090 --> 00:16:04,830
kami tidak melakukan projek senarai tugasan, dan esok kami memutuskan

253
00:16:04,830 --> 00:16:10,320
kita mahu membuat senarai kedai runcit atau senarai projek membeli-belah.

254
00:16:10,320 --> 00:16:14,150
Banyak ciri-ciri ini adalah sama.

255
00:16:14,150 --> 00:16:19,080
Banyak perkara yang kita mahu keluar JavaScript yang sangat biasa,

256
00:16:19,080 --> 00:16:23,820
dan ini menekankan keperluan untuk beberapa jenis cara

257
00:16:23,820 --> 00:16:25,670
membuat ini lebih mudah untuk dilakukan.

258
00:16:25,670 --> 00:16:30,400
Saya terpaksa untuk membina semua akses HTML ini, semua akses DOM ini,

259
00:16:30,400 --> 00:16:35,530
seperti saya akan mewakili senarai to-do dengan model ini.

260
00:16:35,530 --> 00:16:39,130
Dan sedar saya bertanggungjawab sebagai pemaju JavaScript

261
00:16:39,130 --> 00:16:42,890
untuk menjaga HTML dan JavaScript yang saya perlu selari.

262
00:16:42,890 --> 00:16:48,040
Tiada apa-apa yang dibuat secara automatik bahawa perwakilan JavaScript

263
00:16:48,040 --> 00:16:51,590
atau senarai tugasan mendapatkan ditolak keluar ke HTML.

264
00:16:51,590 --> 00:16:54,000
Tiada apa-apa yang dikuatkuasakan kecuali bagi saya.

265
00:16:54,000 --> 00:16:56,880
Saya terpaksa menulis seri tugasan fungsi senarai.

266
00:16:56,880 --> 00:17:01,650
Dan itu tidak mungkin-saya maksudkan, ia adalah munasabah untuk berbuat demikian,

267
00:17:01,650 --> 00:17:03,670
tetapi ia mungkin membosankan kadang-kadang.

268
00:17:03,670 --> 00:17:08,190
Jika anda mempunyai projek yang lebih besar, yang boleh menjadi sukar.

269
00:17:08,190 --> 00:17:10,720
>> Rangka kerja, salah satu tujuan rangka kerja

270
00:17:10,720 --> 00:17:14,060
adalah untuk memudahkan proses dan jenis daripada faktor

271
00:17:14,060 --> 00:17:16,950
ini biasa-Saya rasa anda boleh mengatakan corak reka bentuk

272
00:17:16,950 --> 00:17:20,700
bahawa rakyat umumnya mempunyai beberapa jenis cara yang mewakili data,

273
00:17:20,700 --> 00:17:25,599
sama ada yang adalah senarai rakan-rakan, sama ada itu maklumat peta

274
00:17:25,599 --> 00:17:27,280
atau sesuatu atau senarai tugasan.

275
00:17:27,280 --> 00:17:30,660
Sesetengah orang mempunyai umumnya cara yang mewakili maklumat,

276
00:17:30,660 --> 00:17:33,650
dan mereka biasanya perlu untuk memastikan bahawa jenis maklumat selari

277
00:17:33,650 --> 00:17:36,520
antara apa yang pengguna melihat dalam beberapa jenis pandangan,

278
00:17:36,520 --> 00:17:39,850
bercakap dari segi seperti pengawal pandangan model yang anda lihat dalam kuliah,

279
00:17:39,850 --> 00:17:45,400
dan kemudian model, yang dalam kes ini adalah pelbagai JavaScript ini.

280
00:17:45,400 --> 00:17:49,020
Rangka Kerja memberikan kita satu cara untuk menyelesaikan masalah itu.

281
00:17:49,020 --> 00:17:53,080
Sekarang mari kita lihat pelaksanaan ini senarai tugasan

282
00:17:53,080 --> 00:18:02,360
dalam rangka kerja yang dipanggil angularjs.

283
00:18:02,360 --> 00:18:04,650
Ini adalah ia. Notis ia sesuai pada slaid.

284
00:18:04,650 --> 00:18:07,330
Saya tidak mempunyai untuk menatal ke kiri dan kanan.

285
00:18:07,330 --> 00:18:10,460
Ini mungkin bukan alasan yang baik untuk mengesyorkan menggunakan rangka kerja,

286
00:18:10,460 --> 00:18:20,120
tetapi notis saya pernah mengakses elemen HTML individu di sini?

287
00:18:20,120 --> 00:18:22,400
Saya pernah pergi ke DOM?

288
00:18:22,400 --> 00:18:26,120
Adakah anda melihat apa-apa document.getElementByID atau sesuatu seperti itu?

289
00:18:26,120 --> 00:18:29,870
Tidak, itu hilang.

290
00:18:29,870 --> 00:18:35,590
>> Sudut membantu kita menyimpan DOM dan perwakilan JavaScript kami sesuatu

291
00:18:35,590 --> 00:18:40,430
jenis selari, jadi jika ia tidak dalam fail js itu,

292
00:18:40,430 --> 00:18:46,790
jika tidak ada cara programatik mendapat kepada semua bahawa kandungan HTML

293
00:18:46,790 --> 00:18:51,800
daripada JavaScript bagaimana kita menjaga ini selari?

294
00:18:51,800 --> 00:18:58,160
Jika ia bukan dalam fail js., Ia mendapat menjadi dalam HTML, bukan?

295
00:18:58,160 --> 00:19:01,910
Ini adalah versi baru fail HTML,

296
00:19:01,910 --> 00:19:04,660
dan notis kami telah menambah banyak di sini.

297
00:19:04,660 --> 00:19:11,110
Notis ada sifat-sifat baru yang mengatakan ng-klik dan ng-ulang.

298
00:19:11,110 --> 00:19:15,650
Pendekatan sudut untuk menyelesaikan masalah ini kesukaran dalam reka bentuk

299
00:19:15,650 --> 00:19:19,130
adalah pada dasarnya membuat HTML lebih kuat.

300
00:19:19,130 --> 00:19:24,420
Sudut adalah satu cara yang membolehkan anda untuk membuat HTML agak lebih ekspresif.

301
00:19:24,420 --> 00:19:30,520
Sebagai contoh, saya boleh mengatakan bahawa saya akan mengikat atau mengikat kotak teks ini

302
00:19:30,520 --> 00:19:35,080
untuk berubah-ubah dalam kod JavaScript sudut saya.

303
00:19:35,080 --> 00:19:37,030
Ini ng-model tidak hanya itu.

304
00:19:37,030 --> 00:19:41,550
Yang pada dasarnya mengatakan bahawa perkara itu di dalam kotak teks ini,

305
00:19:41,550 --> 00:19:45,000
hanya mengaitkan dengan new_todo_description berubah-ubah

306
00:19:45,000 --> 00:19:47,870
dalam kod JavaScript.

307
00:19:47,870 --> 00:19:51,600
Itulah yang sangat kuat kerana saya tidak perlu jelas pergi ke

308
00:19:51,600 --> 00:19:53,310
DOM untuk mendapatkan maklumat tersebut.

309
00:19:53,310 --> 00:19:56,250
Saya tidak perlu mengatakan document.getElementByID.

310
00:19:56,250 --> 00:19:58,750
Saya tidak perlu menggunakan jQueries seperti akses DOM.

311
00:19:58,750 --> 00:20:03,280
Saya boleh mengaitkannya dengan berubah-ubah, dan kemudian apabila saya menukar yang berubah-ubah

312
00:20:03,280 --> 00:20:07,400
dalam JavaScript ia disimpan dalam selari dengan HTML,

313
00:20:07,400 --> 00:20:11,640
supaya memudahkan proses perlu pergi berulang-alik antara kedua-dua.

314
00:20:11,640 --> 00:20:18,260
Adakah ini masuk akal?

315
00:20:18,260 --> 00:20:22,060
>> Dan notis tidak ada kod akses HTML.

316
00:20:22,060 --> 00:20:27,760
Kami hanya membuat HTML yang lebih kuat,

317
00:20:27,760 --> 00:20:32,070
dan kini, sebagai contoh, kita boleh melakukan perkara-perkara seperti ini,

318
00:20:32,070 --> 00:20:38,610
seperti apabila anda klik pada ini, memanggil fungsi ini dalam skop todos.js,

319
00:20:38,610 --> 00:20:43,410
dan kita boleh berbuat demikian sebelum ini, tetapi ada perkara-perkara lain, seperti ini ng-model,

320
00:20:43,410 --> 00:20:47,020
dan notis ini ng-ulang.

321
00:20:47,020 --> 00:20:51,520
Apa yang anda fikir ini tidak?

322
00:20:51,520 --> 00:20:54,390
Berikut adalah senarai tidak tertib dari sebelum ini.

323
00:20:54,390 --> 00:20:56,470
Kami mempunyai tag ul,

324
00:20:56,470 --> 00:21:03,710
tetapi saya pernah memberikan senarai itu dalam kod JavaScript?

325
00:21:03,710 --> 00:21:09,280
Saya tidak pernah jelas memberikan senarai itu.

326
00:21:09,280 --> 00:21:11,580
Bagaimanakah ini berfungsi?

327
00:21:11,580 --> 00:21:16,410
Nah, sudut cara melakukan ini adalah ini dipanggil pengulang.

328
00:21:16,410 --> 00:21:22,760
Pada asasnya ini mengatakan bahawa saya ingin mencetak HTML ini

329
00:21:22,760 --> 00:21:26,240
bagi tiap-tiap dalam todo array todos saya.

330
00:21:26,240 --> 00:21:31,850
Di dalam todos.jr terdapat pelbagai todos di sini,

331
00:21:31,850 --> 00:21:37,910
dan ini akan memberitahu pergi melalui pelbagai sudut itu, dan bagi setiap elemen yang anda lihat

332
00:21:37,910 --> 00:21:41,390
Saya mahu anda untuk mencetak HTML ini.

333
00:21:41,390 --> 00:21:44,620
Ini adalah jenis hebat kerana saya hanya boleh melakukan ini

334
00:21:44,620 --> 00:21:47,760
tanpa perlu menulis untuk gelung,

335
00:21:47,760 --> 00:21:52,250
yang untuk senarai tugasan yang hanya 30 baris kod

336
00:21:52,250 --> 00:21:54,700
tidak mungkin perkara yang paling bermanfaat,

337
00:21:54,700 --> 00:22:01,240
tetapi jika anda mempunyai satu projek yang besar, ini boleh menjadi sangat mudah.

338
00:22:01,240 --> 00:22:06,100
>> Ini adalah salah satu penyelesaian kepada masalah ini, membuat HTML yang lebih kuat,

339
00:22:06,100 --> 00:22:10,820
dan yang membolehkan kita untuk menjaga JavaScript dan HTML selari.

340
00:22:10,820 --> 00:22:13,220
Terdapat cara lain yang mungkin untuk menyelesaikan masalah ini,

341
00:22:13,220 --> 00:22:15,320
dan bukan setiap rangka melakukan ini.

342
00:22:15,320 --> 00:22:17,720
Bukan semua rangka kerja-kerja bersama-sama ayat-ayat ini.

343
00:22:17,720 --> 00:22:19,490
Beberapa rangka kerja mempunyai pendekatan yang berbeza,

344
00:22:19,490 --> 00:22:23,310
dan anda mungkin mendapati bahawa anda menikmati kod dalam satu rangka kerja berbanding dengan yang lain.

345
00:22:23,310 --> 00:22:26,160
Mari kita lihat satu lagi.

346
00:22:26,160 --> 00:22:30,060
Ini adalah senarai tugasan dikodkan dalam rangka kerja yang dipanggil Tulang Belakang.

347
00:22:30,060 --> 00:22:33,250
Saya akan pergi melalui ini dengan cepat.

348
00:22:33,250 --> 00:22:38,300
Saya akan mulakan dengan HTML sebelum kita pergi ke sana.

349
00:22:38,300 --> 00:22:40,290
Yang kedua.

350
00:22:40,290 --> 00:22:43,950
Bermula dengan HTML, seperti yang anda notis, HTML kami adalah amat serupa

351
00:22:43,950 --> 00:22:50,000
kepada apa yang ia sebelum ini, jadi tidak terlalu banyak baru di hadapan itu.

352
00:22:50,000 --> 00:22:55,410
Tetapi fail js kami adalah sedikit berbeza.

353
00:22:55,410 --> 00:23:00,360
Jenis tulang belakang mempunyai idea ini, atau membina idea

354
00:23:00,360 --> 00:23:04,750
bahawa banyak daripada apa yang kita lakukan dengan, berkata, projek-projek JavaScript kami

355
00:23:04,750 --> 00:23:09,110
sedang berfikir tentang model dan koleksi model ini.

356
00:23:09,110 --> 00:23:12,510
Ini boleh menjadi, contohnya, gambar dan koleksi gambar,

357
00:23:12,510 --> 00:23:16,230
atau idea rakan dan koleksi rakan-rakan.

358
00:23:16,230 --> 00:23:20,700
Dan acap kali apabila kita pengaturcaraan aplikasi JavaScript

359
00:23:20,700 --> 00:23:25,340
kami akan menyusun daripada mewakili idea yang mempunyai koleksi kawan-kawan

360
00:23:25,340 --> 00:23:29,500
entah bagaimana dalam JavaScript, Tulang Belakang dan memberikan kita lapisan ini

361
00:23:29,500 --> 00:23:33,040
di atas barisan yang sedia ada dan objek JavaScript ini

362
00:23:33,040 --> 00:23:38,300
melakukan perkara-perkara yang lebih kuat dengan lebih mudah.

363
00:23:38,300 --> 00:23:41,870
>> Di sini saya telah ditakrifkan model untuk-do,

364
00:23:41,870 --> 00:23:44,630
dan anda tidak perlu bimbang terlalu banyak tentang sintaks,

365
00:23:44,630 --> 00:23:48,730
tetapi notis bahawa apa yang salah satu daripada ciri-ciri ini?

366
00:23:48,730 --> 00:23:53,190
Ia mempunyai bidang lalai.

367
00:23:53,190 --> 00:23:56,640
Tulang belakang membolehkan saya nyatakan sudah off kelawar

368
00:23:56,640 --> 00:24:00,190
apa-apa yang baru untuk tugasan yang saya buat akan mempunyai ini mungkir.

369
00:24:00,190 --> 00:24:04,100
Sekarang saya boleh menyesuaikan ini, tetapi dapat menentukan mungkir

370
00:24:04,100 --> 00:24:07,220
adalah baik, dan ia adalah jenis yang mudah kerana ini bukan sesuatu yang seperti

371
00:24:07,220 --> 00:24:10,430
wujud dalam JavaScript, dan sekarang saya tidak perlu jelas

372
00:24:10,430 --> 00:24:12,430
mengatakan bahawa todos tidak lengkap.

373
00:24:12,430 --> 00:24:19,190
Saya boleh katakan hak off kelawar yang todos akan ditandakan sebagai tidak lengkap.

374
00:24:19,190 --> 00:24:21,300
Notis maka apakah ini?

375
00:24:21,300 --> 00:24:25,520
Sekarang saya mempunyai senarai tugasan, dan itulah koleksi.

376
00:24:25,520 --> 00:24:30,960
Notis bidang yang berkaitan dengan yang mengatakan model todo.

377
00:24:30,960 --> 00:24:33,390
Ini adalah cara saya memberitahu bahawa Tulang Belakang

378
00:24:33,390 --> 00:24:37,350
Saya akan berfikir tentang koleksi ini todos individu.

379
00:24:37,350 --> 00:24:42,140
Ini adalah pada asasnya struktur model bagi program saya.

380
00:24:42,140 --> 00:24:44,980
Di sini saya mempunyai idea ini koleksi,

381
00:24:44,980 --> 00:24:48,960
dan pada dasarnya perkara yang terkandung dalam koleksi yang semuanya akan menjadi ini todos,

382
00:24:48,960 --> 00:24:51,910
dan yang sangat semula jadi dalam hal ini

383
00:24:51,910 --> 00:24:59,890
kerana saya mempunyai todos, dan saya mempunyai mereka dalam koleksi.

384
00:24:59,890 --> 00:25:02,940
>> Mari kita lihat sedikit lebih daripada ini.

385
00:25:02,940 --> 00:25:05,900
Berikut adalah pandangan Tulang Belakang.

386
00:25:05,900 --> 00:25:08,890
Perkara lain yang Tulang Belakang mengatakan adalah bahawa

387
00:25:08,890 --> 00:25:14,660
banyak model yang anda berfikir tentang atau koleksi

388
00:25:14,660 --> 00:25:19,150
akan perlu mempunyai beberapa cara yang dipaparkan.

389
00:25:19,150 --> 00:25:21,900
Kita perlu menjadikan bahawa senarai tugasan,

390
00:25:21,900 --> 00:25:25,460
dan ia tidak akan lebih baik jika kita boleh mengadakan peruntukan bagi setiap model

391
00:25:25,460 --> 00:25:28,390
atau bersekutu dengan setiap model pandangan ini

392
00:25:28,390 --> 00:25:34,020
yang membolehkan kita untuk menyambung saya rasa kedua-dua bersama-sama?

393
00:25:34,020 --> 00:25:38,320
Sedangkan sebelum kita terpaksa menggunakan untuk gelung yang akan dijalankan melalui

394
00:25:38,320 --> 00:25:41,130
setiap todo dalam senarai kami dan kemudian mencetak di sini

395
00:25:41,130 --> 00:25:44,650
kita pada dasarnya boleh menyambung dengan model ini.

396
00:25:44,650 --> 00:25:47,550
Ini adalah satu pandangan tugasan.

397
00:25:47,550 --> 00:25:50,550
Ini dikaitkan dengan todo kami mendapati lebih awal.

398
00:25:50,550 --> 00:25:54,940
Sekarang setiap todo adalah dapat dipaparkan atau renderable

399
00:25:54,940 --> 00:25:56,960
oleh tugasan ini pandangan.

400
00:25:56,960 --> 00:25:59,440
Notis beberapa bidang.

401
00:25:59,440 --> 00:26:05,880
Apa yang anda fikir tagName ini, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Ingat dari sebelum ini apabila kita mahu untuk memberi a todo

403
00:26:09,790 --> 00:26:16,700
kita perlu jelas berpasangan todos kami dengan ini tag li.

404
00:26:16,700 --> 00:26:21,080
Sekarang kita katakan bahawa jika todo ini akan hidup

405
00:26:21,080 --> 00:26:25,250
akan berada di dalam sebuah tag li.

406
00:26:25,250 --> 00:26:31,440
Dan sekarang kita juga sedang mengaitkan peristiwa dengan todos kami.

407
00:26:31,440 --> 00:26:34,320
>> Setiap todo mempunyai acara yang satu ini.

408
00:26:34,320 --> 00:26:38,480
Jika anda klik cukup banyak butang togol, itulah yang saya katakan di sana,

409
00:26:38,480 --> 00:26:43,080
maka pada dasarnya menandakan todo sebagai bertentangan dengan apa yang ia adalah sebelum

410
00:26:43,080 --> 00:26:45,890
dan kemudian semula menyebabkan permohonan.

411
00:26:45,890 --> 00:26:47,810
Ini adalah jenis yang sama dengan kod sebelum ini.

412
00:26:47,810 --> 00:26:50,730
Ingatlah apabila kita ditandakan sebagai sama ada bertentangan atau-

413
00:26:50,730 --> 00:26:52,410
dan kemudian kita-diberikan semula.

414
00:26:52,410 --> 00:26:57,750
Tetapi notis kini acara ini digunakan untuk menjadi sesuatu yang berada di dalam HTML.

415
00:26:57,750 --> 00:26:59,640
Ia duduk di sana.

416
00:26:59,640 --> 00:27:01,410
Butang mempunyai klik pada.

417
00:27:01,410 --> 00:27:05,310
Apabila anda klik butang, ia jenis tidak barangan untuk

418
00:27:05,310 --> 00:27:07,210
ditubuhkan yang todo tidak lengkap.

419
00:27:07,210 --> 00:27:11,180
Di sini kita telah dikaitkan peristiwa yang mengklik butang yang toggle

420
00:27:11,180 --> 00:27:15,830
dan menterbalikkan sama ada pada atau di luar dengan pandangan ini.

421
00:27:15,830 --> 00:27:20,480
>> Ini adalah cara yang baik untuk menubuhkan peristiwa ini supaya ia sangat ketat terikat

422
00:27:20,480 --> 00:27:26,980
pandangan ini, dan notis yang satu ini lagi.

423
00:27:26,980 --> 00:27:31,050
Saya mempunyai kaedah render ini, dan kita tidak perlu untuk pergi melalui butir-butir.

424
00:27:31,050 --> 00:27:33,650
Ia adalah jenis yang sama dengan apa yang kita ada sebelum ini,

425
00:27:33,650 --> 00:27:36,070
tetapi notis Saya tidak gelung melalui apa-apa.

426
00:27:36,070 --> 00:27:40,700
Saya tidak mencetak bahawa tag ul itulah jenis mengatakan saya akan mencetak semua unsur-unsur.

427
00:27:40,700 --> 00:27:46,610
Saya memberikan fungsi untuk memberikan satu tugasan ini item.

428
00:27:46,610 --> 00:27:49,400
Ini adalah satu konsep yang sangat kuat kerana pada dasarnya

429
00:27:49,400 --> 00:27:53,600
kami senarai tugasan terdiri daripada semua todos, dan jika kita pada dasarnya boleh menentukan

430
00:27:53,600 --> 00:27:56,890
cara untuk menyebabkan salah seorang daripada mereka todos

431
00:27:56,890 --> 00:28:04,230
maka kita boleh mempunyai tulang belakang yang kuat kami per se menyebabkan semua todos

432
00:28:04,230 --> 00:28:07,760
dengan memanggil kaedah render pada todos individu.

433
00:28:07,760 --> 00:28:14,180
Ini adalah satu konsep yang berguna di sini.

434
00:28:14,180 --> 00:28:18,160
Sekarang soalan yang baik untuk ditanya ialah bagaimana permohonan ini diletakkan bersama-sama?

435
00:28:18,160 --> 00:28:21,200
Kerana kita mempunyai keupayaan untuk menyebabkan satu todo,

436
00:28:21,200 --> 00:28:23,860
tetapi bagaimana kita mendapat idea pelbagai todos?

437
00:28:23,860 --> 00:28:25,100
>> Mari kita lihat pada itu.

438
00:28:25,100 --> 00:28:27,100
Ini adalah bahagian yang lalu.

439
00:28:27,100 --> 00:28:29,740
Notis kita mempunyai pandangan senarai tugasan di sini,

440
00:28:29,740 --> 00:28:34,440
dan notis ia juga pandangan.

441
00:28:34,440 --> 00:28:36,970
Dan untuk pergi ke atas beberapa perkara,

442
00:28:36,970 --> 00:28:45,280
memulakan kaedah ini akan dipanggil apabila kita mula-mula membuat senarai to-do ini.

443
00:28:45,280 --> 00:28:52,630
Seperti yang anda lihat, ia seperti mewujudkan senarai tugasan dan mengaitkannya dengan pandangan ini.

444
00:28:52,630 --> 00:28:57,860
Dan kemudian saya menambah fungsi di sini, supaya pada asasnya apabila anda menambah item-

445
00:28:57,860 --> 00:29:01,440
ini adalah sama dengan kaedah yang addItem kita lihat sebelum-

446
00:29:01,440 --> 00:29:07,430
Saya akan membuat objek todo baru, dan notis Saya sebenarnya memanggil

447
00:29:07,430 --> 00:29:13,080
kaedah ini todo baru, jadi ini disediakan oleh Tulang Belakang,

448
00:29:13,080 --> 00:29:16,010
dan saya boleh lulus dalam hartanah saya di sini.

449
00:29:16,010 --> 00:29:23,710
Dan kini setiap todo yang saya cipta dengan menggunakan ini akan mendapat bahawa fungsi yang kita lihat sebelum ini.

450
00:29:23,710 --> 00:29:28,140
Notis saya penjelasan daripada kotak teks detail-sebelum-sedikit kecil

451
00:29:28,140 --> 00:29:32,900
dan kemudian saya menambah koleksi ini.

452
00:29:32,900 --> 00:29:37,630
>> Ini hampir seolah-olah pelik kerana sebelum kita terpaksa melakukan todos.push itu,

453
00:29:37,630 --> 00:29:43,310
dan kemudian kami telah dilakukan, dan ini mungkin kelihatan lebih rumit untuk projek ini khususnya,

454
00:29:43,310 --> 00:29:46,980
dan anda mungkin mendapati bahawa Tulang Belakang atau sudut atau mana-mana rangka kerja lain

455
00:29:46,980 --> 00:29:50,790
tidak sesuai dengan projek tertentu anda, tetapi saya fikir ia adalah penting untuk berfikir tentang

456
00:29:50,790 --> 00:29:54,100
apa ini bermakna pada skala yang lebih besar untuk projek-projek yang lebih besar,

457
00:29:54,100 --> 00:29:56,610
kerana jika kita mempunyai projek yang lebih besar di mana kita telah mewakili

458
00:29:56,610 --> 00:30:00,860
beberapa koleksi benar-benar kompleks, sesuatu yang lebih mendalam daripada hanya satu senarai tugasan,

459
00:30:00,860 --> 00:30:04,490
katakan senarai rakan-rakan atau sesuatu seperti itu, ini boleh datang dalam berguna

460
00:30:04,490 --> 00:30:09,620
kerana kita boleh menganjurkan kod kami dengan cara yang benar-benar mudah,

461
00:30:09,620 --> 00:30:12,550
dengan cara yang akan membuat ia lebih mudah untuk orang lain

462
00:30:12,550 --> 00:30:16,820
yang mahu mengambil satu projek untuk membina.

463
00:30:16,820 --> 00:30:21,450
Anda boleh melihat bahawa ini memberikan banyak struktur.

464
00:30:21,450 --> 00:30:26,580
Dan kemudian saya menyeru menyebabkan pada addItem ini.

465
00:30:26,580 --> 00:30:31,050
Menyebabkan, seperti yang anda lihat, dan anda tidak perlu memahami sintaks ini penuh,

466
00:30:31,050 --> 00:30:37,790
tetapi pada dasarnya untuk setiap model ia akan memanggil kaedah render individu.

467
00:30:37,790 --> 00:30:41,500
Itulah jenis di mana ini datang dari.

468
00:30:41,500 --> 00:30:44,140
Mari kita menentukan bagaimana untuk menyebabkan todos individu,

469
00:30:44,140 --> 00:30:47,310
dan kemudian mari kita gam mereka bersama-sama secara keseluruhan.

470
00:30:47,310 --> 00:30:49,810
Tetapi ini menyediakan satu cara pengambilan,

471
00:30:49,810 --> 00:30:55,470
kerana saya dapat mengubah cara saya membuat keputusan untuk menjadikan todos individu,

472
00:30:55,470 --> 00:30:57,940
dan saya tidak akan mempunyai untuk menukar mana-mana kod ini.

473
00:30:57,940 --> 00:31:00,700
Itulah jenis sejuk.

474
00:31:00,700 --> 00:31:08,540
>> Adakah sesiapa mempunyai apa-apa soalan mengenai rangka kerja JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Pelajar soalan didengar]

476
00:31:14,310 --> 00:31:16,050
Oh, pasti, itu adalah satu soalan yang besar.

477
00:31:16,050 --> 00:31:19,080
Persoalannya ialah bagaimana saya termasuk rangka kerja?

478
00:31:19,080 --> 00:31:22,970
Rangka kerja JavaScript yang pada dasarnya hanya fail js

479
00:31:22,970 --> 00:31:25,740
yang boleh anda termasuk di bahagian atas kod anda.

480
00:31:25,740 --> 00:31:29,830
Notis di bahagian kepala HTML saya, saya mempunyai semua tag skrip,

481
00:31:29,830 --> 00:31:34,250
dan tag skrip akhir adalah kod yang kita tulis.

482
00:31:34,250 --> 00:31:38,820
Dan kemudian 3 kod rangka kerja hanya juga tag skrip.

483
00:31:38,820 --> 00:31:42,110
Saya termasuk mereka daripada apa yang dipanggil CDN a,

484
00:31:42,110 --> 00:31:46,200
yang membolehkan saya untuk mendapatkannya dari orang lain pada ketika ini

485
00:31:46,200 --> 00:31:57,930
tetapi setiap mempunyai rangka kerja ini-anda cukup banyak boleh mencari kandungan yang

486
00:31:57,930 --> 00:32:03,540
untuk perpustakaan JavaScript tertentu boleh didapati di beberapa CDN atau sesuatu seperti itu,

487
00:32:03,540 --> 00:32:05,570
dan kemudian anda boleh memasukkan tag skrip.

488
00:32:05,570 --> 00:32:07,600
Adakah ini masuk akal?

489
00:32:07,600 --> 00:32:09,500
Sejuk.

490
00:32:09,500 --> 00:32:11,730
>> Mereka adalah 2 pendekatan yang berbeza.

491
00:32:11,730 --> 00:32:14,640
Mereka bukan sahaja pendekatan untuk menyelesaikan masalah ini.

492
00:32:14,640 --> 00:32:17,080
Terdapat banyak perkara yang berbeza yang

493
00:32:17,080 --> 00:32:19,490
seseorang boleh lakukan, dan terdapat banyak rangka kerja di luar sana.

494
00:32:19,490 --> 00:32:23,300
Sudut dan tulang belakang tidak memberitahu seluruh kisah.

495
00:32:23,300 --> 00:32:26,370
Nasib baik dengan projek-projek akhir anda, dan terima kasih sangat.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]