1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminaras] [JavaScript Karkasai: Kodėl ir kaip?]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Harvardo universiteto]

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

4
00:00:06,960 --> 00:00:10,630
>> Sveiki, visi. Sveiki atvykę į "JavaScript" sistemas seminare.

5
00:00:10,630 --> 00:00:14,910
Mano vardas yra Kevin, ir šiandien aš ruošiuosi kalbėti apie "JavaScript" sistemas,

6
00:00:14,910 --> 00:00:20,400
ir šio seminaro tikslas yra ne jums, tarkim, išmokti tam tikrą pagrindą per se

7
00:00:20,400 --> 00:00:23,810
bet suteikti jums bendrą įvadą į sistemas pora

8
00:00:23,810 --> 00:00:27,150
ir parodyti, kodėl mes turėtume norėti naudotis sistema.

9
00:00:27,150 --> 00:00:31,060
>> Prieš tai, kad aš suteikti šiek tiek fone JavaScript

10
00:00:31,060 --> 00:00:33,750
ir tada mes jį iš ten.

11
00:00:33,750 --> 00:00:36,270
Mes ketiname pradėti įgyvendinti to-do list.

12
00:00:36,270 --> 00:00:39,330
Štai mūsų užduotis sąrašas šiandien.

13
00:00:39,330 --> 00:00:41,990
Tai tipo juokinga. Mes turime įgyvendinti iki padaryti sąrašą JavaScript.

14
00:00:41,990 --> 00:00:45,110
Tai, ką jis ketina atrodyti, kad tai pirmasis mūsų tikslas.

15
00:00:45,110 --> 00:00:47,160
Mes neketiname naudoti sistemą, kaip tai padaryti.

16
00:00:47,160 --> 00:00:51,930
Mes ketiname kodas JavaScript ir gauti darbų sąrašas dirbti.

17
00:00:51,930 --> 00:00:54,370
Tada mes ketiname pagerinti dizainą nenaudojant sistemą.

18
00:00:54,370 --> 00:00:57,190
Mes ketiname aptarti įvairių dalykų, mes galime padaryti tik su JavaScript vien

19
00:00:57,190 --> 00:01:00,650
Kad mūsų to-do sąrašą šiek tiek daugiau gerai suprojektuoti.

20
00:01:00,650 --> 00:01:02,490
Tada mes ketiname mesti kai JQuery,

21
00:01:02,490 --> 00:01:05,030
ir tada mes ketiname pažvelgti į tą patį to-do list,

22
00:01:05,030 --> 00:01:07,170
tiesiog įgyvendinama skirtingose ​​sistemose, ir mes aptarsime

23
00:01:07,170 --> 00:01:09,280
 privalumai ir trūkumai pakeliui.

24
00:01:09,280 --> 00:01:12,040
>> Pradėkime įgyvendinti, kad to-do list.

25
00:01:12,040 --> 00:01:14,270
Tarkime, mes skiriant šį HTML.

26
00:01:14,270 --> 00:01:16,620
Aš einu, kad tai šiek tiek mažesnis.

27
00:01:16,620 --> 00:01:19,300
Kaip matote, aš turiu šiek tiek antraštę, kuri sako TODO

28
00:01:19,300 --> 00:01:21,740
ir šiek tiek langas, kur galiu įvesti iš darbų sąraše aprašymas

29
00:01:21,740 --> 00:01:26,990
ir tada naujas punktas mygtukas, todėl pabandykime įvesti naują todo prie šio sąrašo.

30
00:01:26,990 --> 00:01:31,000
Padovanoti JavaScript sąrangas seminarą,

31
00:01:31,000 --> 00:01:33,090
ir aš, kad pasiektų naują elementą.

32
00:01:33,090 --> 00:01:35,730
Man tai "JavaScript" perspėjimo, kad sako įgyvendinti mane.

33
00:01:35,730 --> 00:01:37,560
Mes turime ją įgyvendinti.

34
00:01:37,560 --> 00:01:41,490
Leiskite patikrinti, kad šis kodeksas, tiek HTML ir "JavaScript".

35
00:01:41,490 --> 00:01:43,260
Štai mūsų HTML.

36
00:01:43,260 --> 00:01:45,500
Kaip matote čia, čia mūsų mažai Todos antraštė.

37
00:01:45,500 --> 00:01:47,620
Tai buvo, kad drąsus dalykas viršuje,

38
00:01:47,620 --> 00:01:50,690
ir tada mes turime įvedimo lauką su vietos rezervavimo ženklą,

39
00:01:50,690 --> 00:01:59,460
ir tada ten tikras atributas šį mygtuką, kad vadina šią funkciją addTodo.

40
00:01:59,460 --> 00:02:05,460
Ar kas nors nori atspėti, ką, kad paspaudimą reiškiantis?

41
00:02:05,460 --> 00:02:07,390
[Studentų nesigirdi atsakas]

42
00:02:07,390 --> 00:02:09,289
Geras, spustelėjus tarsi kaip įvykio,

43
00:02:09,289 --> 00:02:12,120
kaip paspaudę pele yra tik įvykis, ir ką mes darome

44
00:02:12,120 --> 00:02:16,890
yra mes susiejimas paspaudę šį mygtuką atlikti šią funkciją renginį.

45
00:02:16,890 --> 00:02:21,700
AddTodo yra šis renginys prižiūrėtojas už spustelėję mygtuką, kad.

46
00:02:21,700 --> 00:02:25,010
>> Kaip matote, kai aš spustelėkite naują elementą "

47
00:02:25,010 --> 00:02:29,940
Spustelėjus renginys bus atleistas, ir ši funkcija bus vadinamas.

48
00:02:29,940 --> 00:02:33,170
Pažvelkime funkcija.

49
00:02:33,170 --> 00:02:36,260
Kaip matote, čia mano kodas JavaScript šiol.

50
00:02:36,260 --> 00:02:41,280
Kas Turiu viršuje yra pasaulinė duomenų struktūra mano to-do list.

51
00:02:41,280 --> 00:02:44,060
Atrodo masyvo. Tai tik tuščias masyvo.

52
00:02:44,060 --> 00:02:47,100
Ir tada turiu addTodo funkciją, kuri mes matėme anksčiau,

53
00:02:47,100 --> 00:02:50,740
ir tik eilutėje kodas ten yra toks perspėjimas.

54
00:02:50,740 --> 00:02:55,730
Jis įspėja įgyvendinti mane, ir tada aš turiu 2 užduotis po ranka.

55
00:02:55,730 --> 00:02:58,790
Turiu pridėti todo to pasaulio duomenų struktūros,

56
00:02:58,790 --> 00:03:01,860
ir tada aš noriu atkreipti dėmesį į to-do list.

57
00:03:01,860 --> 00:03:06,360
Nieko pernelyg išgalvotas, tik dar, bet Javaskriptą, jums gali būti susipažinę su,

58
00:03:06,360 --> 00:03:12,370
todėl aš ruošiuosi eiti lėtai ir peržiūrėti JavaScript pagrindus tokiu būdu.

59
00:03:12,370 --> 00:03:15,490
>> Leiskite duoti tai kulka.

60
00:03:15,490 --> 00:03:21,130
Tarkime, kad vartotojas įveda kažką šį bloką.

61
00:03:21,130 --> 00:03:23,360
Aš ką tik įvedėte kažką čia, teksto.

62
00:03:23,360 --> 00:03:27,620
Kaip rūšiuoti susipažinti, kad teksto per JavaScript?

63
00:03:27,620 --> 00:03:32,500
Atminkite, kad "JavaScript", vienas iš jos pagrindinių funkcijų yra ta, kad ji suteikia mums

64
00:03:32,500 --> 00:03:34,670
tai programinis prieigą prie DOM.

65
00:03:34,670 --> 00:03:40,670
Jis leidžia mums pasiekti elementus ir jų savybes šio faktinio HTML.

66
00:03:40,670 --> 00:03:43,430
Kaip mes darome, kad su Bare Bones "JavaScript"

67
00:03:43,430 --> 00:03:51,360
tai mes iš tikrųjų galite naudoti "JavaScript" funkcija vadinama getElementById.

68
00:03:51,360 --> 00:03:55,140
Noriu išsaugoti tekstą, rašomąja ten kai kintamąjį,

69
00:03:55,140 --> 00:03:58,350
todėl aš ruošiuosi pasakyti kintamąjį vadinamą new_todo,

70
00:03:58,350 --> 00:04:01,980
ir aš ruošiuosi gauti, kad elementas.

71
00:04:01,980 --> 00:04:06,330
Tai funkcija,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
O dabar gaunu elementas pagal ID, todėl man reikia tos laukelį ID,

73
00:04:11,580 --> 00:04:15,860
todėl aš davė jai ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Štai kaip aš ruošiuosi gauti elementą.

75
00:04:18,399 --> 00:04:23,880
Tai mano argumentas šią funkciją, nurodyti, kurios ID gauti.

76
00:04:23,880 --> 00:04:28,110
Ir todėl, kad tai HTML elementas, ir jis turi savybes.

77
00:04:28,110 --> 00:04:30,650
Jūs matėte jų. Jie atributai.

78
00:04:30,650 --> 00:04:37,090
Iš teksto elementą, kuris saugo vartotojo įvesties atributas vadinamas vertė.

79
00:04:37,090 --> 00:04:40,860
Įrašiau tos laukelį vertę dabar į šį kintamąjį rodiklį vadinama new_todo.

80
00:04:40,860 --> 00:04:45,040
Dabar aš turiu programinį prieigą prie šio kintamojo, kuris yra tipo kietas

81
00:04:45,040 --> 00:04:49,200
nes dabar, ką aš galiu padaryti, tai galiu pridėti jį prie savo to-do list.

82
00:04:49,200 --> 00:04:52,870
>> Kaip mes būtų tai padaryti JavaScript ir nesijaudinkite, jei esate susipažinę su tuo,

83
00:04:52,870 --> 00:04:57,010
bet tiesiog išgyvena tai, todos.push

84
00:04:57,010 --> 00:05:00,130
nes tai mano pasaulio duomenų struktūros pavadinimas čia,

85
00:05:00,130 --> 00:05:04,450
ir aš ruošiuosi stumti new_todo.

86
00:05:04,450 --> 00:05:09,120
Tai puiku, nes dabar Aš pridėjo jį prie savo "JavaScript"

87
00:05:09,120 --> 00:05:11,280
atstovavimas, kad to-do sąrašą.

88
00:05:11,280 --> 00:05:15,170
Bet dabar kaip man gauti jį atgal į HTML?

89
00:05:15,170 --> 00:05:18,560
Turiu rasti būdą, tarsi stumti jį atgal.

90
00:05:18,560 --> 00:05:21,830
Kitaip tariant, aš tarsi turi atkreipti tai.

91
00:05:21,830 --> 00:05:26,060
Kas mes ketiname padaryti, tai mes ketiname daryti to-do sąrašą.

92
00:05:26,060 --> 00:05:29,270
Man reikia atnaujinti kitas HTML tame puslapyje,

93
00:05:29,270 --> 00:05:32,040
ir, kaip matote, aš paliko šį mažą konteinerį čia

94
00:05:32,040 --> 00:05:36,840
šis puslapis, kurio ID yra todos daliklis,

95
00:05:36,840 --> 00:05:40,870
ir aš ruošiuosi įdėti į darbų sąrašo ten.

96
00:05:40,870 --> 00:05:47,240
Pirmiausia aš ruošiuosi jį išvalyti, nes, tarkim, ten buvo senas darbų sąrašas yra.

97
00:05:47,240 --> 00:05:49,560
Gaunu šį elementą, ID vėl,

98
00:05:49,560 --> 00:05:54,530
ir aš patekti į vidinį HTML tos elemento,

99
00:05:54,530 --> 00:05:58,010
ir aš ruošiuosi aišku, kad.

100
00:05:58,010 --> 00:06:05,510
Jei mes palikome šį kodą kaip yra, mes norime matyti tuščią nieko nėra,

101
00:06:05,510 --> 00:06:10,410
o dabar aš noriu pradėti teikti savo naują darbų sąrašą.

102
00:06:10,410 --> 00:06:12,870
Aš iš esmės ketina sunaikinti savo pasirinkto darbų sąrašo.

103
00:06:12,870 --> 00:06:18,180
>> Dabar vidinis HTML viduje tos TODOS div yra visiškai aiškus,

104
00:06:18,180 --> 00:06:20,060
ir dabar man reikia pradėti pridedant savo sąrašą.

105
00:06:20,060 --> 00:06:23,890
Pirmas dalykas, kurį noriu pridėti atgal yra netvarkingai sąrašą tegus

106
00:06:23,890 --> 00:06:33,890
kuris iš esmės reiškia, kad tai yra netvarkingai sąrašą pradžia.

107
00:06:33,890 --> 00:06:39,770
Dabar už kiekvieną mano TODOS masyvo elemento Noriu atspausdinti jį viduje, kad HTML.

108
00:06:39,770 --> 00:06:43,710
Noriu pridėti ją prie šio sąrašo apačioje.

109
00:06:43,710 --> 00:06:49,040
Tiesiog kaip ir C, galiu naudoti už linijos, ir aš ruošiuosi pradėti ne mano sąrašo pradžioje

110
00:06:49,040 --> 00:06:54,140
bent elementas 0, ir aš ruošiuosi eiti visą kelią į sąrašo ilgį.

111
00:06:54,140 --> 00:07:01,100
Mes iš tikrųjų galite gauti, kad į JavaScript masyvo naudojant ilgis turtą ilgį.

112
00:07:01,100 --> 00:07:03,420
Iš esmės aš ruošiuosi padaryti kažką labai panašaus viduje čia

113
00:07:03,420 --> 00:07:05,600
spausdinti šį elementą.

114
00:07:05,600 --> 00:07:12,970
Aš vėl gali naudotis TODOS div, vidinis HTML nuosavybė, kad,

115
00:07:12,970 --> 00:07:17,560
ir aš norėčiau pridėti šią naują sąrašo elementą, ir tai bus apsuptas

116
00:07:17,560 --> 00:07:25,390
tai li tegus, ir aš ruošiuosi Jungiant su + operatorius,

117
00:07:25,390 --> 00:07:28,040
ir tai-osios elementas mano TODOS masyvas,

118
00:07:28,040 --> 00:07:32,380
ir tada aš ruošiuosi uždaryti šią žymę.

119
00:07:32,380 --> 00:07:36,240
Dabar už kiekvieną elementą, mes pridėti naują sąrašo įrašą.

120
00:07:36,240 --> 00:07:48,700
Ir tada mes tikrai reikia padaryti, tai užsidarymas, kad žyma.

121
00:07:48,700 --> 00:07:52,820
Aš tiesiog reikia uždaryti išjungti, kad netvarkingai sąrašą tegus.

122
00:07:52,820 --> 00:07:55,490
>> Ar gaunate už kaip tai veikia jaustis?

123
00:07:55,490 --> 00:07:57,700
Tai atveria visą sąrašą.

124
00:07:57,700 --> 00:08:01,080
Tai prideda atskirų elementų, iš TODOS sąrašo į sąrašą,

125
00:08:01,080 --> 00:08:05,470
ir tada, kad uždaro visą sąrašą, ir tai yra mano addTodo funkcija.

126
00:08:05,470 --> 00:08:09,590
Aš iš esmės pradėti gauti nuo teksto laukelyje todo.

127
00:08:09,590 --> 00:08:18,950
Aš pridurčiau, kad į Todos masyvą, ir tada aš vėl tampa to-do sąrašą.

128
00:08:18,950 --> 00:08:21,520
Dabar galiu pridėti elementus į savo sąrašą.

129
00:08:21,520 --> 00:08:24,620
Tai rūšies įdomus, nes tik keletą eilučių kodo

130
00:08:24,620 --> 00:08:28,240
mes iš esmės padarė į darbų sąrašą, kur mes galime pridėti naujus elementus.

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

132
00:08:30,050 --> 00:08:34,480
Tai savotiškas įvadą JavaScript.

133
00:08:34,480 --> 00:08:36,179
Negalima nerimauti per daug apie tai, dabar sintaksė,

134
00:08:36,179 --> 00:08:38,130
bet manau apie tai konceptualiai.

135
00:08:38,130 --> 00:08:40,539
Mes turėjome šiek tiek HTML.

136
00:08:40,539 --> 00:08:45,310
Mes turėjome teksto lauką puslapyje, kad iš esmės leidžia vartotojams įvestį formos elemento pridėti.

137
00:08:45,310 --> 00:08:49,210
Ir tada mes naudojome JavaScript, kad galėtumėte atnešti, kad todo iš šio teksto lauką.

138
00:08:49,210 --> 00:08:52,830
Mes saugomi, kad viduje JavaScript masyvas, kuris iš esmės yra kaip

139
00:08:52,830 --> 00:08:56,010
mūsų programinis atstovavimas, kad to-do list,

140
00:08:56,010 --> 00:08:59,060
ir tada mes atspausdintas jį.

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

142
00:09:02,690 --> 00:09:07,620
>> Tai tipo kietas, bet kaip mes galime pasinaudoti šia toliau?

143
00:09:07,620 --> 00:09:11,350
Na, kaip matote, tai nėra kaip visiškas to-do sąrašą.

144
00:09:11,350 --> 00:09:15,100
Pavyzdžiui, aš negaliu pažymėti bet kurį iš šių, kaip neišsami daiktų,

145
00:09:15,100 --> 00:09:19,920
pavyzdžiui, jei aš norėjau reprioritize elementus arba ištrinti elementus.

146
00:09:19,920 --> 00:09:23,150
Tai yra gerai, bet mes galime pasinaudoti šia toliau.

147
00:09:23,150 --> 00:09:29,280
Nesiruošiu kalbėti per daug apie pridedant papildomų funkcijų,

148
00:09:29,280 --> 00:09:32,800
bet mes galime imtis, kad toliau.

149
00:09:32,800 --> 00:09:35,970
Pakalbėkime apie pridedant dar vieną funkciją, tai to-do list,

150
00:09:35,970 --> 00:09:40,370
kuri bus kad galėtų patikrinti asmenį to-do elementą

151
00:09:40,370 --> 00:09:44,780
ir jis turi būti užbraukta, todėl iš esmės sakydamas aš padariau tai.

152
00:09:44,780 --> 00:09:50,240
Pažvelkime į tam tikrą kodą, kad galėtų pasiekti, kad.

153
00:09:50,240 --> 00:09:52,740
Pranešimas ką aš padariau viršuje yra aš pridėjo

154
00:09:52,740 --> 00:09:57,620
Nauja pasaulinė masyve baigtas.

155
00:09:57,620 --> 00:10:02,890
Aš iš esmės naudojant šią laikyti, ar dėl to-do list elementai

156
00:10:02,890 --> 00:10:06,560
yra išsami, ar ne.

157
00:10:06,560 --> 00:10:08,470
Tai vienas iš būdų tai padaryti.

158
00:10:08,470 --> 00:10:13,750
Jei aš pažvelgti į šios direktyvos įgyvendinimą, ekranas,

159
00:10:13,750 --> 00:10:21,120
Iš esmės, jei aš įvesti todo ir aš paspauskite šį perjungimo mygtuką

160
00:10:21,120 --> 00:10:25,040
jis kerta, ir todėl kiekvienas šio sąrašo elementas turi arba visiškai

161
00:10:25,040 --> 00:10:31,050
ar neišsamius valstybė, ir aš naudoju kitą masyvo patvirtinate, kad.

162
00:10:31,050 --> 00:10:33,730
>> Iš esmės kiekvienam toje TODOS masyvo darbų sąraše

163
00:10:33,730 --> 00:10:37,110
ten elementas visiškai matrica, iš esmės rodo

164
00:10:37,110 --> 00:10:39,060
ar tai yra išsami, ar ne.

165
00:10:39,060 --> 00:10:41,640
Turėjau padaryti gana nedidelius pokyčius šiuo kodeksu,

166
00:10:41,640 --> 00:10:44,470
todėl čia mūsų addTodo funkcija.

167
00:10:44,470 --> 00:10:48,530
Atkreipkite dėmesį, kad čia aš stumti jį į masyvą,

168
00:10:48,530 --> 00:10:51,300
ir tada aš stumti 0 to visiškai masyvas,

169
00:10:51,300 --> 00:10:57,090
iš esmės kartu su tos naujosios todo paspaudimu pasakyti

170
00:10:57,090 --> 00:11:00,430
Aš pridėti šį elementą, ir tai kartu su šiuo dydžiu,

171
00:11:00,430 --> 00:11:02,810
tai reiškia, kad jis yra neužbaigtas.

172
00:11:02,810 --> 00:11:04,970
Ir tada aš atvaizdavimo to-do list.

173
00:11:04,970 --> 00:11:09,220
Dabar, atkreipkite dėmesį, aš pridėjo šį drawTodoList funkciją.

174
00:11:09,220 --> 00:11:11,760
Tai užtrunka daug kodo mes turėjome prieš daug,

175
00:11:11,760 --> 00:11:15,320
iš esmės išvalo langelį ir tada atkreipia naują darbų sąrašą.

176
00:11:15,320 --> 00:11:19,620
Bet pastebėsite, kad viduje tai už linijos mes darome tiek daugiau dabar.

177
00:11:19,620 --> 00:11:25,000
Mes iš esmės patikrinti, ar prekės atitinka ajai TODO čia

178
00:11:25,000 --> 00:11:30,220
yra baigtas, ir mes elgiasi skirtingai šių 2 aplinkybėmis.

179
00:11:30,220 --> 00:11:32,790
Jei jis baigtas, mes įtraukiame šį del tegus

180
00:11:32,790 --> 00:11:35,360
kuris iš esmės yra būdas galite gauti, kad streiką per poveikio

181
00:11:35,360 --> 00:11:38,190
nubraukiant to-do sąrašą, jei jis baigtas,

182
00:11:38,190 --> 00:11:42,200
ir, jei taip nėra, mes ne įtraukiant jį.

183
00:11:42,200 --> 00:11:45,030
Ir todėl, kad šios rūšies rūpinasi, kad

184
00:11:45,030 --> 00:11:49,140
>> ir kad vienas iš būdų tam pasiekti.

185
00:11:49,140 --> 00:11:53,420
Ir tada pastebėsite, kai vartotojas paspaudžia vieną iš šių

186
00:11:53,420 --> 00:11:56,780
mes perjungti užbaigimo statusą jį.

187
00:11:56,780 --> 00:12:02,170
Kai vartotojas paspaudžia, mes pakeisti, ar jis buvo baigtas, ar ne,

188
00:12:02,170 --> 00:12:04,540
ir tada mes perbraižyti jį.

189
00:12:04,540 --> 00:12:06,190
Šis darbų natūra.

190
00:12:06,190 --> 00:12:09,860
Mes turime šias funkcijas, kad jie galėtų atlikti savo užduotis,

191
00:12:09,860 --> 00:12:11,730
ir tai yra gerai.

192
00:12:11,730 --> 00:12:14,110
Ar yra kas nors, mes galime padaryti geriau apie tai, nors?

193
00:12:14,110 --> 00:12:18,700
Pranešimas turime šiuos 2 pasaulinius masyvus.

194
00:12:18,700 --> 00:12:23,550
Jei tai buvo C, o mes turėjome 2 masyvus, kad šios rūšies atstovaujama

195
00:12:23,550 --> 00:12:25,800
duomenys, kurie buvo tarsi susiję tam tikru būdu

196
00:12:25,800 --> 00:12:30,140
ką mes naudojame C sujungti šiuos 2 laukus

197
00:12:30,140 --> 00:12:35,420
į kažką, apimantis tiek informacijos vienetų?

198
00:12:35,420 --> 00:12:37,600
Kiekvienas nori pateikti pasiūlymą?

199
00:12:37,600 --> 00:12:39,450
[Studentų nesigirdi atsakas]

200
00:12:39,450 --> 00:12:42,340
>> Būtent, kad galėtume naudotis kai struct natūra,

201
00:12:42,340 --> 00:12:44,960
ir jei manote, atgal į, tarkim, pset 3

202
00:12:44,960 --> 00:12:47,350
prisiminti mes turėjome žodyną, ir tada mes turėjo, ar žodis

203
00:12:47,350 --> 00:12:50,230
buvo žodyną, ir visa ši informacija buvo sudėti

204
00:12:50,230 --> 00:12:52,420
viduje kai duomenų struktūra.

205
00:12:52,420 --> 00:12:56,390
Vienas dalykas, aš galiu daryti su šiuo kodu, kad išvengti šių 2 skirtingus masyvus

206
00:12:56,390 --> 00:13:01,760
panašių gabalų informacijos galiu juos sujungti į JavaScript objektas.

207
00:13:01,760 --> 00:13:07,150
Leiskite pažvelgti, kad išvaizdą.

208
00:13:07,150 --> 00:13:11,740
Pranešimas turiu tik viena matrica viršuje dabar

209
00:13:11,740 --> 00:13:17,650
ir ką aš padariau, tai ir tai tik Javaskriptą sintaksė tarsi

210
00:13:17,650 --> 00:13:21,350
sukurti pažodžiui versiją objektas,

211
00:13:21,350 --> 00:13:24,670
ir duombazėje yra pateikti 2 savybės, todėl mes turime todo,

212
00:13:24,670 --> 00:13:29,660
ir ji laikomi kartu su tuo, ar tai sukomplektuota arba nesukomplektuota.

213
00:13:29,660 --> 00:13:31,000
Tai yra labai panašus kodas.

214
00:13:31,000 --> 00:13:35,310
Mes naudojant JavaScript objektus.

215
00:13:35,310 --> 00:13:38,600
Tai pagerina dalykų natūra.

216
00:13:38,600 --> 00:13:43,850
Kaip ir dabar, visos šios susijusios informacijos laukai yra laikomi kartu.

217
00:13:43,850 --> 00:13:46,410
Kai mes einame į jį atspausdinti, mes galime prieiti prie laukus.

218
00:13:46,410 --> 00:13:49,060
>> Atkreipkite dėmesį, kaip mes darome todos [i]. Pilnas

219
00:13:49,060 --> 00:13:52,880
vietoj patikrinti visą spektrą atskirai,

220
00:13:52,880 --> 00:13:56,560
ir pastebėsite, kai mes norime gauti to-do eilutę mes vis to-do turtą

221
00:13:56,560 --> 00:13:58,750
tos darbų sąraše, todėl šios rūšies prasmę, nes

222
00:13:58,750 --> 00:14:01,660
kiekvienas daiktas turi šias būdingas savybes apie tai.

223
00:14:01,660 --> 00:14:05,650
Ji turi todo, ir ji turi ar tai išsami, ar ne.

224
00:14:05,650 --> 00:14:11,540
Ne per daug pakeitimai yra funkciškai, ką tik įdėjote šiek tiek daugiau kodą.

225
00:14:11,540 --> 00:14:13,430
Tai kai kuriose srityse tobulinimas, tiesa?

226
00:14:13,430 --> 00:14:16,030
Aš turiu galvoje, mes sudauginti iš dizaino šiek tiek.

227
00:14:16,030 --> 00:14:20,350
Dabar mes turime objektai iš esmės apimti šiuos duomenis.

228
00:14:20,350 --> 00:14:27,130
Ar yra kas nors daugiau mes galime padaryti iš čia pagal JavaScript?

229
00:14:27,130 --> 00:14:31,810
Kaip pastebėsite, kad šis kodas čia

230
00:14:31,810 --> 00:14:34,760
gauti vidinį HTML iš div

231
00:14:34,760 --> 00:14:40,520
yra šiek tiek, manau, ilgai.

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

233
00:14:45,100 --> 00:14:48,400
Vienas dalykas, mes galime padaryti, kad šis kodas atrodo šiek tiek draugiškesni

234
00:14:48,400 --> 00:14:51,450
todėl norėčiau nereikės laikyti slinkimo į kairę ir į dešinę, pirmyn ir atgal,

235
00:14:51,450 --> 00:14:58,480
yra galėčiau naudoti kaip jQuery biblioteką.

236
00:14:58,480 --> 00:15:02,710
>> Leiskite patikrinti seminarą 2,

237
00:15:02,710 --> 00:15:05,880
ir tai yra tas pats kodas, bet tai daroma su JQuery.

238
00:15:05,880 --> 00:15:08,790
Jūs negali būti per daug susipažinę su JQuery,

239
00:15:08,790 --> 00:15:11,510
bet tiesiog žinau, kad JQuery yra tarsi palaikanti JavaScript biblioteką

240
00:15:11,510 --> 00:15:15,910
kad lengviau padaryti kažką panašaus prieigos atskirų elementų DOM.

241
00:15:15,910 --> 00:15:21,280
Čia vietoj sakydamas document.getElementById ("todos). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Aš galiu naudoti daug švaresnis kelią JQuery,

243
00:15:25,210 --> 00:15:28,490
kuris yra tiesiog naudoti selektorius.

244
00:15:28,490 --> 00:15:31,300
Kaip matote, šis kodas buvo gauti šiek tiek švaresnis,

245
00:15:31,300 --> 00:15:35,770
labai panaši funkcionaliai, bet tai idėja.

246
00:15:35,770 --> 00:15:37,980
Mes matėme keletą dalykų iki šiol,

247
00:15:37,980 --> 00:15:42,010
taip mes pradėjome tik žalio JavaScript įgyvendinimo.

248
00:15:42,010 --> 00:15:45,370
Mes pridėjome naujų funkcijų ir parodė, kaip mes galime jį patobulinti su

249
00:15:45,370 --> 00:15:49,090
ką mes turime JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Ar kas nors pamatyti, bet su šio projekto sunkumus?

251
00:15:53,300 --> 00:16:01,090
Būtent, manau, ar nebūtinai sunkumų, bet tarkim

252
00:16:01,090 --> 00:16:04,830
mes ne daro to-do list projektą, o rytoj mes nusprendėme

253
00:16:04,830 --> 00:16:10,320
mes norėjome padaryti bakalėjos sąrašą ar prekybos projektų sąrašą.

254
00:16:10,320 --> 00:16:14,150
Šių funkcijų daug yra labai panašūs.

255
00:16:14,150 --> 00:16:19,080
Iš dalykų, mes norime gauti iš JavaScript daug yra labai dažnas,

256
00:16:19,080 --> 00:16:23,820
o tai pabrėžia, kad reikia tam tikru būdu rūšies poreikį

257
00:16:23,820 --> 00:16:25,670
todėl tai lengviau padaryti.

258
00:16:25,670 --> 00:16:30,400
Aš turėjau sukurti visą šį HTML prieigą, visa tai DOM prieigą,

259
00:16:30,400 --> 00:16:35,530
kaip aš ruošiuosi atstovauti to-do list su šiuo modeliu.

260
00:16:35,530 --> 00:16:39,130
Ir pastebėsite, aš esu atsakingas kaip JavaScript kūrėjas

261
00:16:39,130 --> 00:16:42,890
išlaikyti HTML ir JavaScript, kad turiu sinchronizuoti.

262
00:16:42,890 --> 00:16:48,040
Nieko automatiškai, kad "JavaScript" atstovavimas

263
00:16:48,040 --> 00:16:51,590
ar to-do sąrašą gauti išstumtas į HTML.

264
00:16:51,590 --> 00:16:54,000
Nieko vykdomas, kad, išskyrus mane.

265
00:16:54,000 --> 00:16:56,880
Turėjau parašyti lygiosiomis to-do list funkciją.

266
00:16:56,880 --> 00:17:01,650
Ir tai gali būti ne-Aš turiu galvoje, tai protinga daryti, kad

267
00:17:01,650 --> 00:17:03,670
bet jis gali būti varginantis, kartais.

268
00:17:03,670 --> 00:17:08,190
Jei turite didesnį projektą, kurie gali būti sunku.

269
00:17:08,190 --> 00:17:10,720
>> Karkasai, viena iš sistemų tikslais

270
00:17:10,720 --> 00:17:14,060
yra supaprastinti šį procesą ir rūšiuoti faktorius iš

271
00:17:14,060 --> 00:17:16,950
Šie bendri-Manau, galima sakyti-dizaino modelius

272
00:17:16,950 --> 00:17:20,700
kad žmonės paprastai turi tam tikrą reprezentavimo būdus duomenis natūra,

273
00:17:20,700 --> 00:17:25,599
ar tai draugą sąrašas, ar tai Žemėlapis informacija

274
00:17:25,599 --> 00:17:27,280
arba ką nors ar to-do sąrašą.

275
00:17:27,280 --> 00:17:30,660
Kai kurie žmonės paprastai tai yra pateikiant informaciją taip,

276
00:17:30,660 --> 00:17:33,650
ir jie paprastai reikia laikyti, kad informacija tarsi sinchroniškai

277
00:17:33,650 --> 00:17:36,520
tarp to, ką mato vartotojas tam tikru požiūriu natūra

278
00:17:36,520 --> 00:17:39,850
kalbant požiūriu kaip modelio vaizdo valdiklio matėte paskaitos,

279
00:17:39,850 --> 00:17:45,400
ir tada modelis, kuris šiuo atveju yra tai Javaskriptą masyvo.

280
00:17:45,400 --> 00:17:49,020
Karkasai mums būdą, kaip išspręsti šią problemą.

281
00:17:49,020 --> 00:17:53,080
Dabar galime pažvelgti į šios direktyvos įgyvendinimą, to-do list

282
00:17:53,080 --> 00:18:02,360
į sistemą, vadinamą angularjs.

283
00:18:02,360 --> 00:18:04,650
Tai jis. Pastebėsite, kad jis telpa į skaidrę.

284
00:18:04,650 --> 00:18:07,330
Aš neturiu slinkti į kairę ir į dešinę.

285
00:18:07,330 --> 00:18:10,460
Tai tikriausiai nėra puiki priežastis rekomenduojame naudoti sistemą,

286
00:18:10,460 --> 00:18:20,120
bet atkreipkite esu aš kada nors pasiekti individual HTML elementų čia?

287
00:18:20,120 --> 00:18:22,400
Am aš kada nors eiti į DOM?

288
00:18:22,400 --> 00:18:26,120
Ar matote, bet document.getElementById ar kažkas panašaus?

289
00:18:26,120 --> 00:18:29,870
Ne, tai dingo.

290
00:18:29,870 --> 00:18:35,590
>> Kampinis padeda mums išlaikyti DOM ir JavaScript mūsų atstovavimą kažką

291
00:18:35,590 --> 00:18:40,430
rūšies sinchronizuoti, todėl, jei tai ne js failą,

292
00:18:40,430 --> 00:18:46,790
jei nėra jokių programiškai gauti visiems, kad HTML turinį būdas

293
00:18:46,790 --> 00:18:51,800
nuo JavaScript kaip mes išlaikyti šio sinchronizuoti?

294
00:18:51,800 --> 00:18:58,160
Jei tai ne. Js failą, tai turiu būti HTML, tiesa?

295
00:18:58,160 --> 00:19:01,910
Tai nauja versija HTML failą,

296
00:19:01,910 --> 00:19:04,660
ir pastebėsite, mes pridėjome daug čia.

297
00:19:04,660 --> 00:19:11,110
Šioje duombazėje yra šie nauji atributai, kurie sako ng paspaudimą ir ng pakartojimo.

298
00:19:11,110 --> 00:19:15,650
Kampinis požiūris sprendžiant šią sunkumus, dizaino problema

299
00:19:15,650 --> 00:19:19,130
yra iš esmės padaryti HTML daug galingesnė.

300
00:19:19,130 --> 00:19:24,420
Kampinis yra leisti jums padaryti HTML šiek tiek labiau išraiškingas būdas.

301
00:19:24,420 --> 00:19:30,520
Pavyzdžiui, aš galiu pasakyti, kad aš ruošiuosi susieti ar įpareigoti šį teksto laukelį

302
00:19:30,520 --> 00:19:35,080
jos viduje mano Kampinis JavaScript kintamąjį.

303
00:19:35,080 --> 00:19:37,030
Tai ng modelis daro tik tai.

304
00:19:37,030 --> 00:19:41,550
Tai iš esmės sako, kad elementas viduje šį laukelį,

305
00:19:41,550 --> 00:19:45,000
tiesiog susieti, kad su kintama new_todo_description

306
00:19:45,000 --> 00:19:47,870
per "JavaScript" kodą.

307
00:19:47,870 --> 00:19:51,600
Tai labai galingas, nes aš neturiu aiškiai eikite į

308
00:19:51,600 --> 00:19:53,310
DOM gauti šią informaciją.

309
00:19:53,310 --> 00:19:56,250
Aš neturiu pasakyti document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Aš neturiu naudoti jQueries kaip DOM prieigą.

311
00:19:58,750 --> 00:20:03,280
Galiu susieti jį su kintamojo, ir tada, kai aš pakeisti, kad kintamasis

312
00:20:03,280 --> 00:20:07,400
per JavaScript jis nuolat sinchronizuoti su HTML,

313
00:20:07,400 --> 00:20:11,640
taip, kad supaprastina turintys eiti pirmyn ir atgal tarp dviejų procesą.

314
00:20:11,640 --> 00:20:18,260
Ar tai prasminga?

315
00:20:18,260 --> 00:20:22,060
>> Ir pastebėsite, kad tai ne HTML prieigos kodas.

316
00:20:22,060 --> 00:20:27,760
Mes tiesiog padarė HTML galingesni,

317
00:20:27,760 --> 00:20:32,070
ir dabar, pavyzdžiui, mes galime padaryti kažką panašaus į tai,

318
00:20:32,070 --> 00:20:38,610
patinka, kai paspausite ant to, tai vadiname funkciją pagal todos.js taikymo sritį,

319
00:20:38,610 --> 00:20:43,410
ir mes galime padaryti, kad anksčiau, bet yra ir kitų dalykų, pavyzdžiui, šio ng-modelio

320
00:20:43,410 --> 00:20:47,020
ir nepastebėsite šios ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Ką jūs manote, kad tai daro?

322
00:20:51,520 --> 00:20:54,390
Štai mūsų netvarkingai sąrašas nuo anksčiau.

323
00:20:54,390 --> 00:20:56,470
Mes turime UL žymes

324
00:20:56,470 --> 00:21:03,710
bet esu aš kada nors padaryti, kad sąrašas viduje JavaScript kodo?

325
00:21:03,710 --> 00:21:09,280
Nesu niekada aiškiai teikti tą sąrašą.

326
00:21:09,280 --> 00:21:11,580
Kaip tai veikia?

327
00:21:11,580 --> 00:21:16,410
Na, kaip Kampinis įvykdo tai tai vadinama kartotuvas.

328
00:21:16,410 --> 00:21:22,760
Iš esmės tai sako, kad aš noriu spausdinti šį HTML

329
00:21:22,760 --> 00:21:26,240
už kiekvieną todo viduje mano TODOS masyvo.

330
00:21:26,240 --> 00:21:31,850
Viduje todos.jr yra todos masyvas čia,

331
00:21:31,850 --> 00:21:37,910
ir tai pasakys Kampinis eiti per tą masyvą, ir kiekvieno elemento matote

332
00:21:37,910 --> 00:21:41,390
Noriu, kad atsispausdinti šį HTML.

333
00:21:41,390 --> 00:21:44,620
Tai yra natūra nuostabus, nes aš galiu tik daryti

334
00:21:44,620 --> 00:21:47,760
nereikia rašyti už linijos,

335
00:21:47,760 --> 00:21:52,250
kuri yra to-do list, kad buvo tik 30 eilučių kodo

336
00:21:52,250 --> 00:21:54,700
gali būti labiausiai naudingas dalykas,

337
00:21:54,700 --> 00:22:01,240
tačiau jei jūs turite didelį projektą, tai gali gauti labai patogu.

338
00:22:01,240 --> 00:22:06,100
>> Tai yra vienas šios problemos sprendimas, todėl HTML galingesni,

339
00:22:06,100 --> 00:22:10,820
ir kuri leidžia mums išlaikyti "JavaScript" ir HTML sinchronizuoti.

340
00:22:10,820 --> 00:22:13,220
Yra ir kitų galimų būdų, kaip išspręsti šią problemą,

341
00:22:13,220 --> 00:22:15,320
ir ne kiekvienas sistema daro.

342
00:22:15,320 --> 00:22:17,720
Ne kiekvienas sistema veikia šia kryptimi.

343
00:22:17,720 --> 00:22:19,490
Kai sistemos turi skirtingus požiūrius,

344
00:22:19,490 --> 00:22:23,310
ir jums gali rasti, kad jums patinka kodavimo vieną sistemą per kitą.

345
00:22:23,310 --> 00:22:26,160
Pažvelkime į vieną.

346
00:22:26,160 --> 00:22:30,060
Tai darbų sąrašas koduojami gale į sistemą, vadinamą stuburą.

347
00:22:30,060 --> 00:22:33,250
Aš ruošiuosi eiti per tai greitai.

348
00:22:33,250 --> 00:22:38,300
Pradėsiu su HTML, kol mes ten.

349
00:22:38,300 --> 00:22:40,290
Vieną sekundę.

350
00:22:40,290 --> 00:22:43,950
Pradedant HTML, kaip pastebėjote, mūsų HTML yra labai panašūs

351
00:22:43,950 --> 00:22:50,000
kokia ji buvo anksčiau, todėl ne per daug naujo apie tą priekyje.

352
00:22:50,000 --> 00:22:55,410
Tačiau mūsų JS failas yra šiek tiek kitoks.

353
00:22:55,410 --> 00:23:00,360
Magistraliniai rūšies turi šią idėją, ar teiginys grindžiamas idėja,

354
00:23:00,360 --> 00:23:04,750
kad tai, ką mes darome su daug, tarkim, mūsų JavaScript projektai

355
00:23:04,750 --> 00:23:09,110
, tai galvoti apie modelių ir kolekcijų iš šių modelių.

356
00:23:09,110 --> 00:23:12,510
Tai galėtų būti, pavyzdžiui, nuotraukų ir kolekcijų nuotraukas,

357
00:23:12,510 --> 00:23:16,230
arba iš draugų ir kolekcijų draugų idėja.

358
00:23:16,230 --> 00:23:20,700
Ir dažnai, kai mes programavimo JavaScript programas

359
00:23:20,700 --> 00:23:25,340
mes rūšiuoti atstovauti turintys draugų rinkinio idėja

360
00:23:25,340 --> 00:23:29,500
kažkaip JavaScript ir stuburą suteikia mums šį sluoksnį

361
00:23:29,500 --> 00:23:33,040
ant Javascript esamų masyvų ir objektų

362
00:23:33,040 --> 00:23:38,300
padaryti daugiau galingas dalykus, kad lengviau.

363
00:23:38,300 --> 00:23:41,870
>> Čia aš apibrėžė to-do modelis,

364
00:23:41,870 --> 00:23:44,630
ir jūs neturite jaudintis per daug apie sintaksę,

365
00:23:44,630 --> 00:23:48,730
bet pastebėsite, kad kas vienas iš šios savybės?

366
00:23:48,730 --> 00:23:53,190
Ji turi numatytąjį lauką.

367
00:23:53,190 --> 00:23:56,640
Stuburas leidžia man nustatyti jau nuo šikšnosparnių

368
00:23:56,640 --> 00:24:00,190
bet kokia nauja to-do, kad aš sukurti ketina turėti šias reikšmes.

369
00:24:00,190 --> 00:24:04,100
Dabar galiu pritaikyti tai, bet kad galėtų nustatyti numatytuosius

370
00:24:04,100 --> 00:24:07,220
yra gražus, ir tai tipo patogu, nes tai nėra kažkas, kad, pavyzdžiui,

371
00:24:07,220 --> 00:24:10,430
būdingas JavaScript, ir dabar aš neturiu aiškiai

372
00:24:10,430 --> 00:24:12,430
pasakyti, kad todos yra neišsamūs.

373
00:24:12,430 --> 00:24:19,190
Galiu pasakyti Iškart kad todos ketinate būti pažymėtas kaip neišsami.

374
00:24:19,190 --> 00:24:21,300
Pranešimas tada kas tai yra?

375
00:24:21,300 --> 00:24:25,520
Dabar aš turiu į darbų sąrašą, ir tai kolekcija.

376
00:24:25,520 --> 00:24:30,960
Pranešimas lauką, susijusį su ta sako modelis todo.

377
00:24:30,960 --> 00:24:33,390
Tai mano būdas pasakyti pagrindinį tinklą, kad

378
00:24:33,390 --> 00:24:37,350
Aš einu galvoti apie šių atskirų Todos kolekciją.

379
00:24:37,350 --> 00:24:42,140
Tai iš esmės modelio struktūra mano programą.

380
00:24:42,140 --> 00:24:44,980
Čia aš turiu šią kolekciją idėją,

381
00:24:44,980 --> 00:24:48,960
ir iš esmės objektus, įrašytus į šį rinkinį visi bus šių todos,

382
00:24:48,960 --> 00:24:51,910
ir tai yra labai natūralu, šia prasme

383
00:24:51,910 --> 00:24:59,890
nes aš turiu todos, ir aš turiu juos rinkti.

384
00:24:59,890 --> 00:25:02,940
>> Pažvelkime šiek tiek daugiau apie tai.

385
00:25:02,940 --> 00:25:05,900
Čia yra stuburą vaizdas.

386
00:25:05,900 --> 00:25:08,890
Kitas dalykas, kad stuburą sako, kad

387
00:25:08,890 --> 00:25:14,660
iš daug modelių, kad jūs galvojate apie ar net kolekcijas

388
00:25:14,660 --> 00:25:19,150
ketinate reikia turėti tam tikrą rodymo būdą.

389
00:25:19,150 --> 00:25:21,900
Turime padaryti, kad to-do list,

390
00:25:21,900 --> 00:25:25,460
ir ar nebūtų malonu, jei mes galime suteikti kiekvienam modeliui

391
00:25:25,460 --> 00:25:28,390
arba susieti su kiekvienu modeliu, šį požiūrį

392
00:25:28,390 --> 00:25:34,020
, kuri leidžia mums manau sujungti du kartu?

393
00:25:34,020 --> 00:25:38,320
Kadangi, kol mes turėjo naudoti už linijos, kuri eina per

394
00:25:38,320 --> 00:25:41,130
kiekvienas mūsų sąraše todo ir tada atspausdinti jį čia

395
00:25:41,130 --> 00:25:44,650
mes iš esmės gali prijungti jį su šiuo modeliu.

396
00:25:44,650 --> 00:25:47,550
Tai to-do vaizdas.

397
00:25:47,550 --> 00:25:50,550
Tai susiję su darbų sąraše mes nustatėme anksčiau.

398
00:25:50,550 --> 00:25:54,940
Dabar kiekvienas todo yra Rodomos ar renderable

399
00:25:54,940 --> 00:25:56,960
pagal tai to-do vaizdą.

400
00:25:56,960 --> 00:25:59,440
Pastebėsite laukų.

401
00:25:59,440 --> 00:26:05,880
Ką jūs manote, kad tai tagName yra tagName: Li?

402
00:26:05,880 --> 00:26:09,790
Įsiminti iš anksčiau, kai mes norėjome padaryti yra todo

403
00:26:09,790 --> 00:26:16,700
mes turėtume aiškiai susieti mūsų todos su šia li žymės.

404
00:26:16,700 --> 00:26:21,080
Dabar mes sakydamas, kad jei tai todo ketina gyventi

405
00:26:21,080 --> 00:26:25,250
bus viduje yra li žymės.

406
00:26:25,250 --> 00:26:31,440
Ir dabar mes taip pat susieti įvykius su mūsų Todos.

407
00:26:31,440 --> 00:26:34,320
>> Kiekvienas TODO šį vieną renginį.

408
00:26:34,320 --> 00:26:38,480
Jei paspausite gana daug perjungimo mygtuką, kad tai, ką aš sakau yra,

409
00:26:38,480 --> 00:26:43,080
tada iš esmės pažymėti kaip tai, kas buvo anksčiau priešingą todo

410
00:26:43,080 --> 00:26:45,890
ir vėl teikti paraišką.

411
00:26:45,890 --> 00:26:47,810
Tai tipo panašus į kodą prieš.

412
00:26:47,810 --> 00:26:50,730
Prisiminkite, kai mes pažymėti kaip arba priešais ar-

413
00:26:50,730 --> 00:26:52,410
ir tada mes vėl priėmė.

414
00:26:52,410 --> 00:26:57,750
Tačiau pastebėti dabar šį įvykį naudojamas būti kažkas, kad buvo į HTML.

415
00:26:57,750 --> 00:26:59,640
Ji sėdėjo ten.

416
00:26:59,640 --> 00:27:01,410
Mygtukas turėjo įtakos spragtelėjimą.

417
00:27:01,410 --> 00:27:05,310
Kai paspausite mygtuką, kad tipo veikia stuff

418
00:27:05,310 --> 00:27:07,210
įsteigti, kad todo yra neišsami.

419
00:27:07,210 --> 00:27:11,180
Čia mes susiję, kad paspaudę šią perjungimo mygtuką renginį

420
00:27:11,180 --> 00:27:15,830
ir atbulinės eigos ar tai įjungti arba išjungti su šia nuomone.

421
00:27:15,830 --> 00:27:20,480
>> Tai puikus būdas sukurti šį įvykį, kad tai labai susaistyta

422
00:27:20,480 --> 00:27:26,980
šiuo požiūriu, ir todėl pastebėsite šį vieną daugiau.

423
00:27:26,980 --> 00:27:31,050
Turiu šį render metodą, ir mes neturime eiti per detales.

424
00:27:31,050 --> 00:27:33,650
Tai tipo panašus į ką mes turėjome anksčiau,

425
00:27:33,650 --> 00:27:36,070
bet pranešimas aš ne apsisukimo per nieko.

426
00:27:36,070 --> 00:27:40,700
Aš nespausdina, kad ul žyma, kad tarsi pasakyti, kad aš ruošiuosi spausdinti visus elementus.

427
00:27:40,700 --> 00:27:46,610
Aš teikti funkcionalumą padaryti šį vieną-do elementą.

428
00:27:46,610 --> 00:27:49,400
Tai labai galinga koncepcija, nes iš esmės

429
00:27:49,400 --> 00:27:53,600
mūsų to-do sąrašą sudaro visų šių Todos, ir jei mes iš esmės gali nurodyti

430
00:27:53,600 --> 00:27:56,890
būdas padaryti vieną iš šių Todos

431
00:27:56,890 --> 00:28:04,230
tada mes galime turėti mūsų galingas pagrindas per se teikia visą Todos

432
00:28:04,230 --> 00:28:07,760
paskambinę render metodą, atskirų Todos.

433
00:28:07,760 --> 00:28:14,180
Tai koncepcija, kuri yra naudinga čia.

434
00:28:14,180 --> 00:28:18,160
Dabar geras klausimas paklausti, kaip yra ši paraiška yra sujungti?

435
00:28:18,160 --> 00:28:21,200
Kadangi mes turime galimybę įpareigoti vieną todo,

436
00:28:21,200 --> 00:28:23,860
bet kaip mes gauti kelis Todos idėja?

437
00:28:23,860 --> 00:28:25,100
>> Leiskite pažvelgti, kad išvaizdą.

438
00:28:25,100 --> 00:28:27,100
Tai paskutinė dalis.

439
00:28:27,100 --> 00:28:29,740
Pranešimas turime to-do list nuomonę čia

440
00:28:29,740 --> 00:28:34,440
ir pastebėsite, kad jis taip pat vaizdas.

441
00:28:34,440 --> 00:28:36,970
Ir eiti per porą dalykų,

442
00:28:36,970 --> 00:28:45,280
tai inicijuoti metodas bus vadinamas kai mes pirmą kartą sukurti šį to-do list.

443
00:28:45,280 --> 00:28:52,630
Kaip matote, tai, kaip sukurti to-do sąrašą ir susieti jį su šia nuomone.

444
00:28:52,630 --> 00:28:57,860
Ir tada aš pridėjo funkcijas čia, kad iš esmės, kai jūs pridedate elementą-

445
00:28:57,860 --> 00:29:01,440
tai yra panašus į AddItem metodą mes matėme prieš-

446
00:29:01,440 --> 00:29:07,430
Aš ruošiuosi sukurti naują todo objektą, ir pastebėsite, aš iš tikrųjų raginama

447
00:29:07,430 --> 00:29:13,080
ši nauja todo metodas, taigi tai teikia stuburas,

448
00:29:13,080 --> 00:29:16,010
ir aš gali perduoti savo savybių čia.

449
00:29:16,010 --> 00:29:23,710
Ir dabar kiekvienas todo, kad galiu sukurti naudojant šią gausite tą funkciją, kad mes matėme anksčiau.

450
00:29:23,710 --> 00:29:28,140
Pranešimas aš kliringo iš teksto lauką prieš-mažas mažas detalė

451
00:29:28,140 --> 00:29:32,900
ir tada aš pridėti šį rinkinį.

452
00:29:32,900 --> 00:29:37,630
>> Tai beveik atrodo keista, nes kol mes tiesiog turėjo padaryti, kad todos.push,

453
00:29:37,630 --> 00:29:43,310
ir tada mes buvo padaryta, ir tai gali atrodyti sudėtingiau šio konkretaus projekto,

454
00:29:43,310 --> 00:29:46,980
ir jums gali rasti, kad pagrindinį tinklą ar net kampuotas ar kitą sistemą

455
00:29:46,980 --> 00:29:50,790
netinka jūsų konkretaus projekto, bet aš manau, kad tai svarbu galvoti apie

456
00:29:50,790 --> 00:29:54,100
ką tai reiškia platesniu mastu dėl didesnių projektų,

457
00:29:54,100 --> 00:29:56,610
nes jei mes turėjo didesnį projektą, kur mes buvome, atstovaujantis

458
00:29:56,610 --> 00:30:00,860
kai tikrai sudėtingas surinkimas, kažkas giliau nei tik to-do list,

459
00:30:00,860 --> 00:30:04,490
tarkim draugų sąrašą ar kažką panašaus, kad tai gali praversti

460
00:30:04,490 --> 00:30:09,620
nes galime organizuoti savo kodą tikrai patogus būdas,

461
00:30:09,620 --> 00:30:12,550
tokiu būdu, kad būtų lengviau kam nors kitam

462
00:30:12,550 --> 00:30:16,820
kurie norėjo pasiimti projektą statyti ant.

463
00:30:16,820 --> 00:30:21,450
Jūs galite pamatyti, kad tai suteikia sandarą.

464
00:30:21,450 --> 00:30:26,580
Ir tada aš raginama teikti šioje AddItem.

465
00:30:26,580 --> 00:30:31,050
Užkrauta, kaip matote, ir jūs neturite suprasti šį visą sintaksę,

466
00:30:31,050 --> 00:30:37,790
bet iš esmės kiekvienam modeliui jis ketina skambinti individualų render metodą.

467
00:30:37,790 --> 00:30:41,500
Tai tarsi, kur tai ateina iš.

468
00:30:41,500 --> 00:30:44,140
Tegul tik nurodyti, kaip teikti atskirus todos,

469
00:30:44,140 --> 00:30:47,310
ir tada tegul klijai juos kartu kaip visuma.

470
00:30:47,310 --> 00:30:49,810
Tačiau tai suteikia abstrakcijos būdu,

471
00:30:49,810 --> 00:30:55,470
nes galėjau pakeisti būdą, aš nuspręsti teikti atskirus todos,

472
00:30:55,470 --> 00:30:57,940
ir nebūčiau pakeisti bet kokį šio kodekso.

473
00:30:57,940 --> 00:31:00,700
Tai tipo kietas.

474
00:31:00,700 --> 00:31:08,540
>> Ar kas nors turite kokių JavaScript sistemas klausimų?

475
00:31:08,540 --> 00:31:14,310
[Studentų nesigirdi klausimas]

476
00:31:14,310 --> 00:31:16,050
O, tikrai, tai puikus klausimas.

477
00:31:16,050 --> 00:31:19,080
Klausimas buvo, kaip aš įtraukti sistemas?

478
00:31:19,080 --> 00:31:22,970
Dauguma JavaScript sistemos yra iš esmės tik js failai

479
00:31:22,970 --> 00:31:25,740
kad galite būti ne savo kodą viršuje.

480
00:31:25,740 --> 00:31:29,830
Pranešimas galvos dalį savo HTML Turiu visus šiuos scenarijus žymes

481
00:31:29,830 --> 00:31:34,250
ir galutinis scenarijus tegus yra kodas, kad mes raštu.

482
00:31:34,250 --> 00:31:38,820
Ir tada 3 pagrindų kodai yra tiesiog taip pat scenarijų žymės.

483
00:31:38,820 --> 00:31:42,110
Aš taip pat juos nuo to, kas vadinama CDN,

484
00:31:42,110 --> 00:31:46,200
kuris leidžia man jį gauti iš kažkas šiuo metu

485
00:31:46,200 --> 00:31:57,930
bet kiekvieną sistema turi tai-jūs galite labai daug rasti turinį

486
00:31:57,930 --> 00:32:03,540
tam tikros JavaScript biblioteką galima rasti kai CDN ar kažką panašaus, kad

487
00:32:03,540 --> 00:32:05,570
ir tada galite įtraukti šiuos scenarijus žymes.

488
00:32:05,570 --> 00:32:07,600
Ar tai prasminga?

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

490
00:32:09,500 --> 00:32:11,730
>> Tai yra 2 skirtingi požiūriai.

491
00:32:11,730 --> 00:32:14,640
Tai yra ne tik požiūris į šios problemos sprendimo.

492
00:32:14,640 --> 00:32:17,080
Yra daug įvairių dalykų, kad

493
00:32:17,080 --> 00:32:19,490
kas nors galėtų padaryti, ir yra daug sistemos ten.

494
00:32:19,490 --> 00:32:23,300
Kampuotas ir stuburą nepasako visą istoriją.

495
00:32:23,300 --> 00:32:26,370
Sėkmės su jūsų galutinis projektų, ir labai ačiū.

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