1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminár] [Javascript kostry: Prečo a ako]

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

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

4
00:00:06,960 --> 00:00:10,630
>> Ahoj, všetci. Vitajte na rozhraní JavaScript semináre.

5
00:00:10,630 --> 00:00:14,910
Volám sa Kevin, a dnes budem hovoriť o frameworks JavaScript,

6
00:00:14,910 --> 00:00:20,400
a cieľom tohto seminára je, aby vám na, povedzme, zvládnuť konkrétny rámec samo o sebe

7
00:00:20,400 --> 00:00:23,810
ale aby vám širokú úvod do niekoľkých rámcov

8
00:00:23,810 --> 00:00:27,150
a ukázať, prečo by sme chceli použiť rámec.

9
00:00:27,150 --> 00:00:31,060
>> Ako to urobím, budem poskytnúť trochu pozadia v JavaScripte,

10
00:00:31,060 --> 00:00:33,750
a potom budeme to tam.

11
00:00:33,750 --> 00:00:36,270
Chystáme sa začať tým, že vykonávanie to-do zoznamu.

12
00:00:36,270 --> 00:00:39,330
Tu je náš zoznam úloh, pre dnešok.

13
00:00:39,330 --> 00:00:41,990
Je to celkom smiešne. Musíme zaviesť do zoznamu úloh v JavaScripte.

14
00:00:41,990 --> 00:00:45,110
To je to, čo to bude vyzerať, tak to je náš prvý cieľ.

15
00:00:45,110 --> 00:00:47,160
Nebudeme používať rámec na to, že.

16
00:00:47,160 --> 00:00:51,930
Ideme do kódu JavaScriptu a získať zoznam úloh do práce.

17
00:00:51,930 --> 00:00:54,370
Potom budeme zlepšovať dizajn bez použitia rámca.

18
00:00:54,370 --> 00:00:57,190
Budeme diskutovať rôzne veci môžeme robiť len s JavaScriptu sám

19
00:00:57,190 --> 00:01:00,650
aby sa náš zoznam úloh trochu viac dobre navrhnuté.

20
00:01:00,650 --> 00:01:02,490
Potom budeme hádzať v niektorých jQuery,

21
00:01:02,490 --> 00:01:05,030
a potom sa budeme pozerať na ten istý zoznam úloh,

22
00:01:05,030 --> 00:01:07,170
práve sa vykonávajú v rôznych rámcoch, a budeme diskutovať

23
00:01:07,170 --> 00:01:09,280
 klady a zápory pozdĺž cesty.

24
00:01:09,280 --> 00:01:12,040
>> Začnime vykonávania, ktoré to-do zoznamu.

25
00:01:12,040 --> 00:01:14,270
Povedzme, že máme dostať túto HTML.

26
00:01:14,270 --> 00:01:16,620
Budem robiť to o niečo menšie.

27
00:01:16,620 --> 00:01:19,300
Ako vidíte, mám malú hlavičku, ktorá hovorí, že todo

28
00:01:19,300 --> 00:01:21,740
a malá krabička, kde by som mohol zadať popis a todo

29
00:01:21,740 --> 00:01:26,990
a potom nová položka tlačidlo, tak sa poďme skúsiť zadať nové todo do tohto zoznamu.

30
00:01:26,990 --> 00:01:31,000
Dajte JavaScript rámcov seminár,

31
00:01:31,000 --> 00:01:33,090
a ja som sa trafiť novú položku.

32
00:01:33,090 --> 00:01:35,730
Mám túto výstrahu JavaScript, ktorý hovorí, implementovať ma.

33
00:01:35,730 --> 00:01:37,560
Máme na jeho vykonanie.

34
00:01:37,560 --> 00:01:41,490
Poďme sa pozrieť na kód pre toto, ako HTML a JavaScript.

35
00:01:41,490 --> 00:01:43,260
Tu je náš HTML.

36
00:01:43,260 --> 00:01:45,500
Ako môžete vidieť tu, tu je náš malý Todos hlavičky.

37
00:01:45,500 --> 00:01:47,620
To bolo odvážne, čo hore,

38
00:01:47,620 --> 00:01:50,690
a potom máme vstupné pole s zástupný symbol,

39
00:01:50,690 --> 00:01:59,460
a potom je tu určitá vlastnosť tohto tlačidla volanie tejto funkcie addTodo.

40
00:01:59,460 --> 00:02:05,460
Chce niekto hádať, čo to je pri kliknutí znamenať?

41
00:02:05,460 --> 00:02:07,390
[Študent počuť odpoveď]

42
00:02:07,390 --> 00:02:09,289
Dobrý je na kliknutie je niečo ako udalosti,

43
00:02:09,289 --> 00:02:12,120
ako kliknutie myšou je proste udalosť, a čo robíme

44
00:02:12,120 --> 00:02:16,890
sa budeme viazanie udalosť kliknutí na toto tlačidlo na vykonanie tejto funkcie.

45
00:02:16,890 --> 00:02:21,700
AddTodo to je udalosťou pre kliknutí na toto tlačidlo.

46
00:02:21,700 --> 00:02:25,010
>> Ako môžete vidieť, keď som kliknite na tlačidlo nové položky

47
00:02:25,010 --> 00:02:29,940
Pri kliknutí udalosť dostane padáka, a táto funkcia volaná.

48
00:02:29,940 --> 00:02:33,170
Pozrime sa na funkcie.

49
00:02:33,170 --> 00:02:36,260
Ako vidíte, tu je môj kód v jazyku JavaScript doteraz.

50
00:02:36,260 --> 00:02:41,280
Čo mám na vrchole je globálna dátová štruktúra pre mojej to-do zoznamu.

51
00:02:41,280 --> 00:02:44,060
Vyzerá to, že pole. Je to len prázdne pole.

52
00:02:44,060 --> 00:02:47,100
A potom mám addTodo funkciu, ktorá sme videli skôr,

53
00:02:47,100 --> 00:02:50,740
a jediný riadok kódu je tu upozornenie.

54
00:02:50,740 --> 00:02:55,730
Upozorňuje implementovať ma, a potom mám dve úlohy na ruky.

55
00:02:55,730 --> 00:02:58,790
Musím sa pridať todo do tejto globálnej dátovej štruktúry,

56
00:02:58,790 --> 00:03:01,860
a potom chcem upozorniť na to-do zoznamu.

57
00:03:01,860 --> 00:03:06,360
Nič moc chuť ešte nie, ale JavaScript môžete byť oboznámení s,

58
00:03:06,360 --> 00:03:12,370
tak som ísť pomaly a preskúmať základy JavaScriptu týmto spôsobom.

59
00:03:12,370 --> 00:03:15,490
>> Dajme to výstrel.

60
00:03:15,490 --> 00:03:21,130
Povedzme, že používateľ zadá niečo do tohto boxu.

61
00:03:21,130 --> 00:03:23,360
Len som napísal niečo tu, textu.

62
00:03:23,360 --> 00:03:27,620
Ako triediť prístup tohto textu pomocou JavaScriptu?

63
00:03:27,620 --> 00:03:32,500
Nezabudnite, že JavaScript je jedným z jej základných čŕt je, že nám dáva

64
00:03:32,500 --> 00:03:34,670
Tento programový prístup k DOM.

65
00:03:34,670 --> 00:03:40,670
To nám umožňuje prístup k prvkom a ich vlastnosti tohto skutočného HTML.

66
00:03:40,670 --> 00:03:43,430
Spôsob, akým to robíme sa holé kosti JavaScript

67
00:03:43,430 --> 00:03:51,360
je, že môžete skutočne použiť funkciu v JavaScriptu s názvom getElementByID.

68
00:03:51,360 --> 00:03:55,140
Chcem ukladať text, ktorý je napísaný, že v nejakej premennej,

69
00:03:55,140 --> 00:03:58,350
tak som chcel povedať, novú premennú s názvom new_todo,

70
00:03:58,350 --> 00:04:01,980
a budem sa dostať, že prvok.

71
00:04:01,980 --> 00:04:06,330
Jedná sa o funkciu,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
A teraz začínam prvok podľa ID, takže musím ID tohto textového poľa,

73
00:04:11,580 --> 00:04:15,860
tak som mu poskytla ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Takto budem mať prvok.

75
00:04:18,399 --> 00:04:23,880
To je môj argument tejto funkcie, určiť, ktoré číslo sa dostať.

76
00:04:23,880 --> 00:04:28,110
A tak to je prvok v HTML, a to má vlastnosti.

77
00:04:28,110 --> 00:04:30,650
Videl si ty. Sú to atribúty.

78
00:04:30,650 --> 00:04:37,090
Atribútom textového prvku, ktorý ukladá vstup užívateľa sa nazýva hodnota.

79
00:04:37,090 --> 00:04:40,860
Zachránil som hodnotu tohto textového poľa sa do tejto premennej s názvom new_todo.

80
00:04:40,860 --> 00:04:45,040
Teraz mám programový prístup k tejto premennej, čo je celkom fajn

81
00:04:45,040 --> 00:04:49,200
pretože teraz, čo môžem urobiť je, že som ho pridať do svojho to-do zoznamu.

82
00:04:49,200 --> 00:04:52,870
>> Spôsob, akým sa to v JavaScripte a nebojte sa, ak ste oboznámení s tým,

83
00:04:52,870 --> 00:04:57,010
ale len tak cez to je todos.push

84
00:04:57,010 --> 00:05:00,130
pretože to je meno môjho globálne dátové štruktúry tu,

85
00:05:00,130 --> 00:05:04,450
a budem tlačiť new_todo.

86
00:05:04,450 --> 00:05:09,120
To je skvelé, pretože teraz som sa pridal k môjmu JavaScript

87
00:05:09,120 --> 00:05:11,280
zastúpenie, ktoré to-do zoznamu.

88
00:05:11,280 --> 00:05:15,170
Ale teraz, ako sa dostanem späť do HTML?

89
00:05:15,170 --> 00:05:18,560
Musím nájsť spôsob, ako triediť push späť.

90
00:05:18,560 --> 00:05:21,830
Inými slovami, nejako som sa k tomu toto.

91
00:05:21,830 --> 00:05:26,060
Čo budeme robiť, je budeme čerpať zoznamu úloh.

92
00:05:26,060 --> 00:05:29,270
Musím aktualizovať ostatným HTML na tejto stránke,

93
00:05:29,270 --> 00:05:32,040
a ako môžete vidieť, nechal som túto malú nádobu tu

94
00:05:32,040 --> 00:05:36,840
Tento delič na stránky, ktorej ID je todos,

95
00:05:36,840 --> 00:05:40,870
a ja idem dať zoznamu úloh tam.

96
00:05:40,870 --> 00:05:47,240
Najprv idem vyčistiť to, pretože hovoria, že bol starý zoznam úloh tam.

97
00:05:47,240 --> 00:05:49,560
Začínam tento prvok podľa ID znova,

98
00:05:49,560 --> 00:05:54,530
a ja som prístup k vnútornej HTML tohto prvku,

99
00:05:54,530 --> 00:05:58,010
a budem jasne najavo, že.

100
00:05:58,010 --> 00:06:05,510
Keď sme opustili tento kód ako je, mali by sme vidieť prázdnu Nič tam nie je,

101
00:06:05,510 --> 00:06:10,410
a teraz chcem začať vykresľovanie môj nový zoznamu úloh.

102
00:06:10,410 --> 00:06:12,870
Ja som v podstate chystá zničiť mojej zoznamu úloh.

103
00:06:12,870 --> 00:06:18,180
>> Teraz vnútorné HTML vnútri tohto Todos div je úplne jasné,

104
00:06:18,180 --> 00:06:20,060
a teraz musím začať pridávať môjho zoznamu.

105
00:06:20,060 --> 00:06:23,890
Prvá vec, ktorú chcem pridať späť je neusporiadané zoznam tag,

106
00:06:23,890 --> 00:06:33,890
čo v podstate znamená, že sa jedná o začiatok výpočtu.

107
00:06:33,890 --> 00:06:39,770
Teraz pre každý prvok v mojom Todos poli chcem ju vytlačiť v tej HTML.

108
00:06:39,770 --> 00:06:43,710
Chcem sa pripojiť ju na konci tohto zoznamu.

109
00:06:43,710 --> 00:06:49,040
Rovnako ako v C, môžem použiť pre sláčiky, a ja idem začať na začiatku môjho zoznamu

110
00:06:49,040 --> 00:06:54,140
na prvok 0, a ja idem celú cestu k dĺžke zoznamu.

111
00:06:54,140 --> 00:07:01,100
Môžeme skutočne získať dĺžku poľa v JavaScripte pomocou vlastnosť length.

112
00:07:01,100 --> 00:07:03,420
V podstate budem robiť niečo veľmi podobného vnútri tu

113
00:07:03,420 --> 00:07:05,600
vytlačiť tento prvok.

114
00:07:05,600 --> 00:07:12,970
Môžem znovu otvoriť todos div, vnútorné HTML vlastnosť, že,

115
00:07:12,970 --> 00:07:17,560
a ja idem pridať na túto novú položku zoznamu, a že sa to byť obklopený

116
00:07:17,560 --> 00:07:25,390
Tento tag chcete, a budem ak zřetězit s operátor +

117
00:07:25,390 --> 00:07:28,040
a to je i-ty prvok môjho Todos poľa,

118
00:07:28,040 --> 00:07:32,380
a potom budem uzavrieť túto značku.

119
00:07:32,380 --> 00:07:36,240
Teraz pre každý prvok pridáme novú položku zoznamu.

120
00:07:36,240 --> 00:07:48,700
A potom všetko, čo naozaj potrebujete urobiť, je uzavrieť túto značku.

121
00:07:48,700 --> 00:07:52,820
Potrebujem len uzavrieť, že neusporiadané zoznam tag.

122
00:07:52,820 --> 00:07:55,490
>> Myslíte si, získať pocit, pre ako to funguje?

123
00:07:55,490 --> 00:07:57,700
Tým sa otvorí celý zoznam.

124
00:07:57,700 --> 00:08:01,080
To pridáva jednotlivé prvky zo zoznamu Úlohy na zozname,

125
00:08:01,080 --> 00:08:05,470
a potom to zavrie celý zoznam, a toto je moja addTodo funkcie.

126
00:08:05,470 --> 00:08:09,590
Ja v podstate začína tým, že sa todo od textového poľa.

127
00:08:09,590 --> 00:08:18,950
Dodávam, že do Todos poľa, a potom som sa znova vykreslenie zoznamu úloh.

128
00:08:18,950 --> 00:08:21,520
Teraz môžem pridávať položky do zoznamu.

129
00:08:21,520 --> 00:08:24,620
To je celkom vzrušujúce, pretože v niekoľkých málo riadkov kódu

130
00:08:24,620 --> 00:08:28,240
sme v podstate urobili to-do zoznamu, kde môžeme pridať položky.

131
00:08:28,240 --> 00:08:30,050
Výborne.

132
00:08:30,050 --> 00:08:34,480
Je to niečo ako základný úvod do JavaScriptu.

133
00:08:34,480 --> 00:08:36,179
Nebojte sa príliš veľa o syntaxi pre túto chvíľu,

134
00:08:36,179 --> 00:08:38,130
ale o tom premýšľať koncepčne.

135
00:08:38,130 --> 00:08:40,539
Mali sme nejaké HTML.

136
00:08:40,539 --> 00:08:45,310
Mali sme textové pole na stránke, ktorá v podstate umožnil používateľom vstupu to-do položky a pridajte.

137
00:08:45,310 --> 00:08:49,210
A potom sme si JavaScript, aby priniesla, že todo od tohto textového poľa.

138
00:08:49,210 --> 00:08:52,830
Sme, že uložené vnútri poľa JavaScript, ktorý je v podstate podobný

139
00:08:52,830 --> 00:08:56,010
naše programové zastúpenie, ktoré to-do zoznamu,

140
00:08:56,010 --> 00:08:59,060
a potom sme vytlačili.

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

142
00:09:02,690 --> 00:09:07,620
>> To je celkom v pohode, ale ako môžeme vziať ďalší?

143
00:09:07,620 --> 00:09:11,350
No, ako vidíte, nie je to ako úplný zoznam úloh.

144
00:09:11,350 --> 00:09:15,100
Napríklad, nemôžem označiť niektorú z týchto položiek sú neúplné,

145
00:09:15,100 --> 00:09:19,920
ako keď som chcel reprioritize položky alebo odstrániť položky.

146
00:09:19,920 --> 00:09:23,150
To je v poriadku, ale teraz môžeme zobrať ďalšie.

147
00:09:23,150 --> 00:09:29,280
Nebudem hovoriť príliš o pridanie ďalších funkcií,

148
00:09:29,280 --> 00:09:32,800
ale mohli by sme zobrať ďalšie.

149
00:09:32,800 --> 00:09:35,970
Poďme sa baviť o pridanie ďalšieho funkciu to-do zoznamu,

150
00:09:35,970 --> 00:09:40,370
ktorý bude schopný zistiť individuálne úlohy položky

151
00:09:40,370 --> 00:09:44,780
a mať to škrtnúť, takže v podstate som, že som to urobil.

152
00:09:44,780 --> 00:09:50,240
Poďme sa pozrieť na nejaký kód, ktorý môže dosiahnuť.

153
00:09:50,240 --> 00:09:52,740
Všimnite si, čo som urobil v hornej časti je, že som pridal

154
00:09:52,740 --> 00:09:57,620
nové globálne pole s názvom kompletný.

155
00:09:57,620 --> 00:10:02,890
Ja som v podstate pomocou tohto ukladať, či položky na zozname úloh

156
00:10:02,890 --> 00:10:06,560
sú úplné, alebo nie.

157
00:10:06,560 --> 00:10:08,470
To je jeden spôsob, ako to urobiť.

158
00:10:08,470 --> 00:10:13,750
Keď sa pozriem na vykonávanie tohto nariadenia, displej,

159
00:10:13,750 --> 00:10:21,120
v podstate, ak zadám todo a ja stlačte toto prepínacie tlačidlo

160
00:10:21,120 --> 00:10:25,040
to prechádza von, tak každá položka v tomto zozname je buď kompletný

161
00:10:25,040 --> 00:10:31,050
alebo neúplné stáť, a ja som s použitím iného poľa reprezentovať to.

162
00:10:31,050 --> 00:10:33,730
>> V podstate pre každý todo Úlohy v tomto poli

163
00:10:33,730 --> 00:10:37,110
tam je položka v kompletnej škále, ktorá v podstate ukazuje,

164
00:10:37,110 --> 00:10:39,060
či sa nejedná o kompletné.

165
00:10:39,060 --> 00:10:41,640
Som musel urobiť dosť minimálne zmeny tohto kódu,

166
00:10:41,640 --> 00:10:44,470
takže tu je naša addTodo funkcie.

167
00:10:44,470 --> 00:10:48,530
Všimnite si, že tu tlačím ho na pole,

168
00:10:48,530 --> 00:10:51,300
a potom som tlačí 0 tomuto kompletné pole,

169
00:10:51,300 --> 00:10:57,090
v podstate súbežne s tým nové podnety todo povedať

170
00:10:57,090 --> 00:11:00,430
Pridám túto položku, a to v spojení s touto hodnotou,

171
00:11:00,430 --> 00:11:02,810
čo znamená, že je to neúplné.

172
00:11:02,810 --> 00:11:04,970
A potom som prekresľovanie zoznamu úloh.

173
00:11:04,970 --> 00:11:09,220
Teraz si všimnite, som pridal tento drawTodoList funkciu.

174
00:11:09,220 --> 00:11:11,760
To si vyžaduje veľa kódu, ktorý sme mali predtým,

175
00:11:11,760 --> 00:11:15,320
v podstate vyčistí políčko a potom vypracuje nový zoznam úloh.

176
00:11:15,320 --> 00:11:19,620
Ale zistíte, že vo vnútri to pre slučky robíme trochu viac teraz.

177
00:11:19,620 --> 00:11:25,000
Sme v podstate kontrolovať, či je položka, ktorá zodpovedá tej todo tu

178
00:11:25,000 --> 00:11:30,220
je kompletný a my chová inak v týchto 2 prípadoch.

179
00:11:30,220 --> 00:11:32,790
Ak je to kompletné, my pridávame túto značku del,

180
00:11:32,790 --> 00:11:35,360
čo je v podstate spôsob, ako sa môžete dostať, že prečiarknutie účinku

181
00:11:35,360 --> 00:11:38,190
škrtnutím to-do zoznamu, ak je to kompletné,

182
00:11:38,190 --> 00:11:42,200
a ak tomu tak nie je, nie sme jeho zaradenie.

183
00:11:42,200 --> 00:11:45,030
A tak, že druh sa stará o to,

184
00:11:45,030 --> 00:11:49,140
>> a to je jeden spôsob, ako to dosiahnuť.

185
00:11:49,140 --> 00:11:53,420
A potom sa pozná, že používateľ klikne na jednu z týchto

186
00:11:53,420 --> 00:11:56,780
sme prepínať stav dokončenia to.

187
00:11:56,780 --> 00:12:02,170
Keď používateľ klikne, budeme zvrátiť, či to bolo dokončené, alebo nie,

188
00:12:02,170 --> 00:12:04,540
a potom sa to prekreslí.

189
00:12:04,540 --> 00:12:06,190
Tento druh prác.

190
00:12:06,190 --> 00:12:09,860
Máme tieto funkcie, ktoré vykonávajú svoje úlohy,

191
00:12:09,860 --> 00:12:11,730
a je to v poriadku.

192
00:12:11,730 --> 00:12:14,110
Je niečo, čo by sme mohli robiť lepšie o tom, aj keď?

193
00:12:14,110 --> 00:12:18,700
Všimnite si, máme tieto dva globálne poľa.

194
00:12:18,700 --> 00:12:23,550
Ak to bolo C, a mali sme dve polia, ktorá druh predstavovali

195
00:12:23,550 --> 00:12:25,800
dáta, ktorá bola akýmsi nejakým spôsobom súvisí

196
00:12:25,800 --> 00:12:30,140
Čo by sme použiť v C kombinovať tieto dve polia

197
00:12:30,140 --> 00:12:35,420
do niečoho, čo zapuzdruje oba kusy informácií?

198
00:12:35,420 --> 00:12:37,600
Chce niekto niečo navrhnúť?

199
00:12:37,600 --> 00:12:39,450
[Študent počuť odpoveď]

200
00:12:39,450 --> 00:12:42,340
>> Presne tak, takže sme mohli použiť nejaký struct,

201
00:12:42,340 --> 00:12:44,960
a keď si spomeniem, povedzme, pset 3,

202
00:12:44,960 --> 00:12:47,350
zapamätať sme mali slovník, a potom sme museli či slovo

203
00:12:47,350 --> 00:12:50,230
bol v slovníku a všetky boli tieto informácie dať dohromady

204
00:12:50,230 --> 00:12:52,420
v niektorých dátové štruktúry.

205
00:12:52,420 --> 00:12:56,390
Jedna vec, ktorú môžem urobiť s týmto kódom, aby sme sa vyhli týmto dve rôzne polia

206
00:12:56,390 --> 00:13:01,760
pre podobné kúsky informácií je môžem skombinovať do objektu JavaScript.

207
00:13:01,760 --> 00:13:07,150
Poďme sa na to pozrieť.

208
00:13:07,150 --> 00:13:11,740
Všimnite si, že len jeden rad na vrchole teraz

209
00:13:11,740 --> 00:13:17,650
a to, čo som urobil, je a to je len JavaScript syntaxe pre druh

210
00:13:17,650 --> 00:13:21,350
vytvára doslovnú verziu objektu,

211
00:13:21,350 --> 00:13:24,670
a všimnite si, tam sú dve vlastnosti, takže máme todo,

212
00:13:24,670 --> 00:13:29,660
a to drží pohromade s tým, či je to kompletné alebo nekompletné.

213
00:13:29,660 --> 00:13:31,000
To je veľmi podobný kód.

214
00:13:31,000 --> 00:13:35,310
Sme pomocou jazyka JavaScript.

215
00:13:35,310 --> 00:13:38,600
Tento druh vecí zlepší.

216
00:13:38,600 --> 00:13:43,850
Rovnako ako teraz, sú všetky tieto odbory súvisiace informácie pohromade.

217
00:13:43,850 --> 00:13:46,410
Keď ideme ju vytlačiť, môžeme pristupovať poľa.

218
00:13:46,410 --> 00:13:49,060
>> Všimnite si, ako si vedieme Todos [i]. Kompletné

219
00:13:49,060 --> 00:13:52,880
miesto označenie kompletné pole samostatne,

220
00:13:52,880 --> 00:13:56,560
a všimnite si, keď chceme dostať k tomu reťazec Dostávame sa k tomu majetku

221
00:13:56,560 --> 00:13:58,750
tohto todo, takže tento druh dáva zmysel, pretože

222
00:13:58,750 --> 00:14:01,660
každá položka má tieto vnútorné vlastnosti o tom.

223
00:14:01,660 --> 00:14:05,650
Má todo, a to, či je to má úplné, alebo nie.

224
00:14:05,650 --> 00:14:11,540
Nie príliš veľa zmien tam funkčne, práve pridali nejaké ďalšie kódu.

225
00:14:11,540 --> 00:14:13,430
Jedná sa o zlepšenie na niektorých frontoch, nie?

226
00:14:13,430 --> 00:14:16,030
Myslím, že sme počítaná dizajnu trochu.

227
00:14:16,030 --> 00:14:20,350
Teraz máme objekty, ktoré v podstate zapouzdřit tieto dáta.

228
00:14:20,350 --> 00:14:27,130
Je ešte niečo, čo by sme mohli urobiť, tu ide o JavaScript?

229
00:14:27,130 --> 00:14:31,810
Ako upozornenie, že tento kód tu

230
00:14:31,810 --> 00:14:34,760
pre získanie vnútornej kód HTML div

231
00:14:34,760 --> 00:14:40,520
je trochu, myslím, dlho.

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

233
00:14:45,100 --> 00:14:48,400
Jedna vec, ktorú môžeme urobiť, aby sa tento kód vyzerať trochu priateľskejší

234
00:14:48,400 --> 00:14:51,450
takže by som mať na posúvanie vľavo a vpravo, dopredu a dozadu,

235
00:14:51,450 --> 00:14:58,480
je, že som mohol použiť knižnicu jQuery ako.

236
00:14:58,480 --> 00:15:02,710
>> Poďme sa pozrieť na seminár 2,

237
00:15:02,710 --> 00:15:05,880
a to je rovnaký kód, ale to je hotové s jQuery.

238
00:15:05,880 --> 00:15:08,790
Tie nemusia byť príliš oboznámení s jQuery,

239
00:15:08,790 --> 00:15:11,510
ale len viem, že jQuery je akýsi knižnice JavaScriptu

240
00:15:11,510 --> 00:15:15,910
, Ktorý umožňuje ľahšie robiť veci, ako je prístup k jednotlivým prvkom v DOM.

241
00:15:15,910 --> 00:15:21,280
Tu namiesto toho povedal document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Môžem použiť oveľa čistejšie spôsob jQuery,

243
00:15:25,210 --> 00:15:28,490
ktorý je len pre použitie selektorov.

244
00:15:28,490 --> 00:15:31,300
Ako vidíte, tento kód sa dostať trochu čistejšie,

245
00:15:31,300 --> 00:15:35,770
funkčne veľmi podobné, ale to je nápad.

246
00:15:35,770 --> 00:15:37,980
Videli sme pár vecí tak ďaleko,

247
00:15:37,980 --> 00:15:42,010
tak sme začali len s surového implementáciu JavaScriptu.

248
00:15:42,010 --> 00:15:45,370
Pridali sme nové funkcie a ukázal, ako môžeme vylepšiť ju

249
00:15:45,370 --> 00:15:49,090
len to, čo máme v JavaScripte.

250
00:15:49,090 --> 00:15:53,300
>> Má niekto vidieť žiadne problémy s týmto dizajnom?

251
00:15:53,300 --> 00:16:01,090
Konkrétne, myslím, alebo nemusí byť nutne ťažkosti, ale povedzme, že

252
00:16:01,090 --> 00:16:04,830
sme nerobí to-do list projektu a zajtra sme sa rozhodli

253
00:16:04,830 --> 00:16:10,320
chceli sme zoznam potravín, alebo nákupný zoznam projektu.

254
00:16:10,320 --> 00:16:14,150
Mnoho z týchto funkcií sú veľmi podobné.

255
00:16:14,150 --> 00:16:19,080
Veľa vecí, ktoré sa chcú dostať z JavaScriptu sú veľmi časté,

256
00:16:19,080 --> 00:16:23,820
a to zdôrazňuje potrebu nejakého spôsobu

257
00:16:23,820 --> 00:16:25,670
takže to ľahšie.

258
00:16:25,670 --> 00:16:30,400
Musel som vytvoriť všetky tieto HTML prístup, všetko prístup DOM,

259
00:16:30,400 --> 00:16:35,530
ako budem reprezentovať To-Do List s týmto modelom.

260
00:16:35,530 --> 00:16:39,130
A všimnite si, že som zodpovedný ako tvorca JavaScriptu

261
00:16:39,130 --> 00:16:42,890
pre udržanie HTML a JavaScript, ktoré som v synchronizácii.

262
00:16:42,890 --> 00:16:48,040
Nič vykoná automaticky, že JavaScript zastúpenie

263
00:16:48,040 --> 00:16:51,590
alebo to-do zoznamu dostať vytlačení do HTML.

264
00:16:51,590 --> 00:16:54,000
Nič vymáhané, že okrem mňa.

265
00:16:54,000 --> 00:16:56,880
Musel som napísať žrebovanie To-Do List funkciu.

266
00:16:56,880 --> 00:17:01,650
A to nemusí byť, myslím, že je rozumné to urobiť,

267
00:17:01,650 --> 00:17:03,670
ale to môže byť únavné občas.

268
00:17:03,670 --> 00:17:08,190
Ak máte väčší projekt, ktorý by mohol byť ťažké.

269
00:17:08,190 --> 00:17:10,720
>> Rámcov, jeden z účelov rámcov

270
00:17:10,720 --> 00:17:14,060
je zjednodušiť tento proces a triediť faktora sa

271
00:17:14,060 --> 00:17:16,950
Tieto spoločné-myslím, že by sa dalo povedať, návrhové vzory

272
00:17:16,950 --> 00:17:20,700
že ľudia všeobecne majú nejaký spôsob, ako reprezentovať dáta

273
00:17:20,700 --> 00:17:25,599
či už je to zoznam priateľov, či už je to mapové podklady

274
00:17:25,599 --> 00:17:27,280
alebo niečo, alebo to-do zoznamu.

275
00:17:27,280 --> 00:17:30,660
Niektorí ľudia majú všeobecne spôsob reprezentácie informácií,

276
00:17:30,660 --> 00:17:33,650
a všeobecne je potrebné, aby tieto informácie nejako v synchronizácii

277
00:17:33,650 --> 00:17:36,520
medzi tým, čo používateľ vidí v nejakom pohľade,

278
00:17:36,520 --> 00:17:39,850
rozprávanie v zmysle, ako regulátora modelu názor, že ste videli v prednáške,

279
00:17:39,850 --> 00:17:45,400
a potom model, ktorý je v tomto prípade je toto pole JavaScript.

280
00:17:45,400 --> 00:17:49,020
Rámce nám spôsob, ako vyriešiť tento problém.

281
00:17:49,020 --> 00:17:53,080
Teraz sa poďme pozrieť na vykonávanie to-do zoznamu

282
00:17:53,080 --> 00:18:02,360
v rámci tzv angularjs.

283
00:18:02,360 --> 00:18:04,650
To je ono. Všimnite si, že sa zmestí na snímke.

284
00:18:04,650 --> 00:18:07,330
Nemám posúvať doľava a doprava.

285
00:18:07,330 --> 00:18:10,460
To asi nie je veľký dôvod odporúčame používať rámca,

286
00:18:10,460 --> 00:18:20,120
ale uvedomte si, som vôbec prístup jednotlivých prvkov HTML tu?

287
00:18:20,120 --> 00:18:22,400
Mám niekedy ísť do DOM?

288
00:18:22,400 --> 00:18:26,120
Vidíte nejakú document.getElementById alebo niečo také?

289
00:18:26,120 --> 00:18:29,870
Nie, to je preč.

290
00:18:29,870 --> 00:18:35,590
>> Uhlová nám pomáha udržať DOM a JavaScript naše zastúpenie niečoho

291
00:18:35,590 --> 00:18:40,430
druh v synchronizáciu, takže ak to nie je v súbore JS,

292
00:18:40,430 --> 00:18:46,790
ak neexistuje žiadny spôsob, ako programovo všetkým, že obsah HTML

293
00:18:46,790 --> 00:18:51,800
od JavaScriptu, ako sme to udržať v synchronizáciu?

294
00:18:51,800 --> 00:18:58,160
Ak to nie je v. Js súbor, musí to byť v HTML, nie?

295
00:18:58,160 --> 00:19:01,910
Toto je nová verzia HTML súboru,

296
00:19:01,910 --> 00:19:04,660
a všimnite si, pridali sme veľa tu.

297
00:19:04,660 --> 00:19:11,110
Všimnite si, že je tieto nové atribúty, ktoré hovoria ng tlačidlom myši a NG-repeat.

298
00:19:11,110 --> 00:19:15,650
Uhlová prístup k riešeniu tohto problému ťažkosti pri návrhu

299
00:19:15,650 --> 00:19:19,130
je v podstate robiť HTML oveľa silnejší.

300
00:19:19,130 --> 00:19:24,420
Uhlová je spôsob, ktorý umožňuje, aby HTML trochu výraznejšie.

301
00:19:24,420 --> 00:19:30,520
Napríklad, môžem povedať, že budem zviazať alebo viazať tohto textového poľa

302
00:19:30,520 --> 00:19:35,080
premenné v mojom uhlovej kóde JavaScript.

303
00:19:35,080 --> 00:19:37,030
Tento NG-model, robí len to.

304
00:19:37,030 --> 00:19:41,550
To v podstate hovorí, že bod vnútri tohto textového poľa,

305
00:19:41,550 --> 00:19:45,000
len spojiť, že s premennou new_todo_description

306
00:19:45,000 --> 00:19:47,870
v kóde JavaScript.

307
00:19:47,870 --> 00:19:51,600
To je veľmi silný, pretože nemám explicitne ísť

308
00:19:51,600 --> 00:19:53,310
DOM túto informáciu získať.

309
00:19:53,310 --> 00:19:56,250
Nemám povedať document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Nemám použiť jQueries ako prístup DOM.

311
00:19:58,750 --> 00:20:03,280
Môžem spojiť s premennou, a potom, keď som sa to zmeniť premennú

312
00:20:03,280 --> 00:20:07,400
v JavaScripte je to stále v synchronizáciu s HTML,

313
00:20:07,400 --> 00:20:11,640
takže zjednodušuje proces museli ísť tam a späť medzi dvoma.

314
00:20:11,640 --> 00:20:18,260
Dáva to zmysel?

315
00:20:18,260 --> 00:20:22,060
>> A zistíte, že to nie je HTML prístupový kód.

316
00:20:22,060 --> 00:20:27,760
Sme práve urobil HTML silnejší,

317
00:20:27,760 --> 00:20:32,070
a teraz, napríklad, môžeme robiť veci, ako je tento,

318
00:20:32,070 --> 00:20:38,610
ako keď kliknete na to, volať túto funkciu v rámci todos.js,

319
00:20:38,610 --> 00:20:43,410
a mohli by sme to robiť skôr, ale existujú aj iné veci, ako je tento ng-model,

320
00:20:43,410 --> 00:20:47,020
a všimnite si tento NG-opakovanie.

321
00:20:47,020 --> 00:20:51,520
Čo si myslíte, že to robí?

322
00:20:51,520 --> 00:20:54,390
Tu je náš neusporiadané zoznam pred rokom.

323
00:20:54,390 --> 00:20:56,470
Máme ul značiek

324
00:20:56,470 --> 00:21:03,710
ale som stále robí tento zoznam vnútri kód JavaScript?

325
00:21:03,710 --> 00:21:09,280
Nebudem nikdy výslovne vykresľovanie tohto zoznamu.

326
00:21:09,280 --> 00:21:11,580
Ako to funguje?

327
00:21:11,580 --> 00:21:16,410
No, ako Uhlová Dosahuje to je to sa nazýva zosilňovač.

328
00:21:16,410 --> 00:21:22,760
V podstate to hovorí, že chcem vytlačiť HTML

329
00:21:22,760 --> 00:21:26,240
pre každú vnútornú todo môjho Todos poľa.

330
00:21:26,240 --> 00:21:31,850
Vnútri todos.jr je todos pole tu,

331
00:21:31,850 --> 00:21:37,910
a to vám povie uhlové tým prejsť polia a pre každý prvok sa zobrazí

332
00:21:37,910 --> 00:21:41,390
Chcem vytlačiť tento HTML.

333
00:21:41,390 --> 00:21:44,620
To je docela úžasné, pretože som si len urobiť

334
00:21:44,620 --> 00:21:47,760
bez toho aby ste museli písať na slučke,

335
00:21:47,760 --> 00:21:52,250
ktoré pre to-do zoznamu, ktorý bol len 30 riadkov kódu

336
00:21:52,250 --> 00:21:54,700
nemusí byť najvýhodnejší vec,

337
00:21:54,700 --> 00:22:01,240
ale ak máte veľký projekt, mohlo by to mať veľmi pohodlné.

338
00:22:01,240 --> 00:22:06,100
>> To je jedným z riešení tohto problému, takže HTML silnejší,

339
00:22:06,100 --> 00:22:10,820
a to nám umožňuje udržať JavaScript a HTML v synchronizácii.

340
00:22:10,820 --> 00:22:13,220
Existujú aj iné možnosti, ako vyriešiť tento problém,

341
00:22:13,220 --> 00:22:15,320
a nie každý rámec robí.

342
00:22:15,320 --> 00:22:17,720
Nie každý rámec funguje pozdĺž týchto liniek.

343
00:22:17,720 --> 00:22:19,490
Niektoré rámce majú rôzne prístupy,

344
00:22:19,490 --> 00:22:23,310
a možno zistíte, že vás baví kódovanie do jedného rámca nad druhou.

345
00:22:23,310 --> 00:22:26,160
Poďme sa pozrieť na jeden.

346
00:22:26,160 --> 00:22:30,060
Toto je zoznam úloh kódované v rámci tzv chrbticu.

347
00:22:30,060 --> 00:22:33,250
Chystám sa ísť cez to rýchlo.

348
00:22:33,250 --> 00:22:38,300
Začnem s HTML, než pôjdeme tam.

349
00:22:38,300 --> 00:22:40,290
Jedna sekunda.

350
00:22:40,290 --> 00:22:43,950
Počnúc HTML, ako ste si všimli, náš HTML je veľmi podobný

351
00:22:43,950 --> 00:22:50,000
na to, čo bolo predtým, takže nič moc nové na tomto poli.

352
00:22:50,000 --> 00:22:55,410
Ale naša JS súbor je trochu iný.

353
00:22:55,410 --> 00:23:00,360
Chrbticovej druh má túto myšlienku, alebo postavený na myšlienke,

354
00:23:00,360 --> 00:23:04,750
že veľa z toho, čo robíme, povedzme, naše JavaScript projekty

355
00:23:04,750 --> 00:23:09,110
je premýšľať o tom, modely a zbierky týchto modelov.

356
00:23:09,110 --> 00:23:12,510
To by mohlo byť, napríklad fotografie a zbierky fotografií,

357
00:23:12,510 --> 00:23:16,230
alebo myšlienka priateľa a zbierok priateľov.

358
00:23:16,230 --> 00:23:20,700
A často, keď sme programovanie aplikácií JavaScript

359
00:23:20,700 --> 00:23:25,340
budeme nejako reprezentovať myšlienku mať zbierku priateľov

360
00:23:25,340 --> 00:23:29,500
nejako v JavaScripte a chrbticu nám dáva túto vrstvu

361
00:23:29,500 --> 00:23:33,040
v hornej časti existujúcich polí Javascript je a objektov

362
00:23:33,040 --> 00:23:38,300
robiť silnejší veci s tým ľahšie.

363
00:23:38,300 --> 00:23:41,870
>> Tu som definovala-do modelu,

364
00:23:41,870 --> 00:23:44,630
a nemusíte príliš starať o syntax,

365
00:23:44,630 --> 00:23:48,730
ale zistíte, že to, čo je jedna z vlastností tohto?

366
00:23:48,730 --> 00:23:53,190
Má predvolené polia.

367
00:23:53,190 --> 00:23:56,640
Chrbticovej mi umožňuje špecifikovať už bat

368
00:23:56,640 --> 00:24:00,190
každý nový úlohu, ktorý som vytvoriť bude mať tieto nastavenia.

369
00:24:00,190 --> 00:24:04,100
Teraz môžem prispôsobiť, ale musí mať možnosť stanoviť východiskovú

370
00:24:04,100 --> 00:24:07,220
je pekné, a je to celkom pohodlné, pretože to nie je niečo, čo je ako

371
00:24:07,220 --> 00:24:10,430
vlastný JavaScript, a teraz nemám explicitne

372
00:24:10,430 --> 00:24:12,430
hovoria, že todos sú neúplné.

373
00:24:12,430 --> 00:24:19,190
Môžem povedať hneď bat, že todos sa bude označený ako nekompletná.

374
00:24:19,190 --> 00:24:21,300
Všimnite si, potom to, čo je to?

375
00:24:21,300 --> 00:24:25,520
Teraz mám to-do zoznamu, a to je kolekcia.

376
00:24:25,520 --> 00:24:30,960
Všimnite si, že pole spojené s modelom, ktorý hovorí, todo.

377
00:24:30,960 --> 00:24:33,390
To je môj spôsob, ako povedať, že chrbtica

378
00:24:33,390 --> 00:24:37,350
Budem myslieť na kolekciu týchto jednotlivých todos.

379
00:24:37,350 --> 00:24:42,140
To je v podstate štruktúra modelu pre môj program.

380
00:24:42,140 --> 00:24:44,980
Tu mám túto myšlienku o zbierky,

381
00:24:44,980 --> 00:24:48,960
av podstate položky v ňom obsiahnuté sú kolekcie bude táto todos,

382
00:24:48,960 --> 00:24:51,910
a to je veľmi prirodzený v tomto zmysle

383
00:24:51,910 --> 00:24:59,890
pretože mám Todos, a mám ich v zbierke.

384
00:24:59,890 --> 00:25:02,940
>> Poďme sa pozrieť na trochu viac o tom.

385
00:25:02,940 --> 00:25:05,900
Tu je chrbticovej pohľad.

386
00:25:05,900 --> 00:25:08,890
Ďalšia vec, ktorá hovorí, že chrbtica

387
00:25:08,890 --> 00:25:14,660
veľa modelov, ktoré ste premýšľali o tom, alebo dokonca zbierky

388
00:25:14,660 --> 00:25:19,150
budú musieť mať nejaký spôsob, ako sú zobrazené.

389
00:25:19,150 --> 00:25:21,900
Musíme k tomu, že to-do zoznamu,

390
00:25:21,900 --> 00:25:25,460
a nebolo by pekné, keby sme mohli poskytnúť pre každý model

391
00:25:25,460 --> 00:25:28,390
alebo spájať s každým modelom tento názor

392
00:25:28,390 --> 00:25:34,020
ktorý nám umožňuje Myslím, že pripojiť dvaja spolu?

393
00:25:34,020 --> 00:25:38,320
Kým predtým sme museli použiť pre slučku, ktorá by preteká

394
00:25:38,320 --> 00:25:41,130
každý todo v našom zozname a potom vytlačiť tu

395
00:25:41,130 --> 00:25:44,650
možno v podstate pripojiť s týmto modelom.

396
00:25:44,650 --> 00:25:47,550
To je to-do view.

397
00:25:47,550 --> 00:25:50,550
Toto je spojené s todo sme našli skôr.

398
00:25:50,550 --> 00:25:54,940
Teraz každý todo je zobraziteľný alebo renderable

399
00:25:54,940 --> 00:25:56,960
týmto zobrazenie úloh.

400
00:25:56,960 --> 00:25:59,440
Všimnite si niektoré z oblastí.

401
00:25:59,440 --> 00:26:05,880
Čo si myslíte, že to je tagName, tagName: Li?

402
00:26:05,880 --> 00:26:09,790
Nezabudnite pred rokom, keď sme chceli vydať todo

403
00:26:09,790 --> 00:26:16,700
budeme musieť explicitne spárovať naše Todos s týmto tagom chcete.

404
00:26:16,700 --> 00:26:21,080
Teraz hovoríme, že ak to todo bude žiť

405
00:26:21,080 --> 00:26:25,250
bude vnútri tagu chcete.

406
00:26:25,250 --> 00:26:31,440
A teraz sme tiež združujúca udalosti s našimi todos.

407
00:26:31,440 --> 00:26:34,320
>> Každý todo má túto jednu udalosť.

408
00:26:34,320 --> 00:26:38,480
Pokiaľ kliknete skoro prepínacie tlačidlo, to je to, čo hovorím tam,

409
00:26:38,480 --> 00:26:43,080
potom v podstate označiť the todo ako opak toho, čo bolo predtým, než

410
00:26:43,080 --> 00:26:45,890
a potom znovu spracovala danú aplikáciu.

411
00:26:45,890 --> 00:26:47,810
To je tak trochu podobný kódu pred.

412
00:26:47,810 --> 00:26:50,730
Pamätáš, ako sme ju označil buď ako opak or-

413
00:26:50,730 --> 00:26:52,410
a potom sme sa znova urobila z nej.

414
00:26:52,410 --> 00:26:57,750
Všimnime si ale teraz túto udalosť býval niečo, čo bolo v HTML.

415
00:26:57,750 --> 00:26:59,640
Je tam sedel.

416
00:26:59,640 --> 00:27:01,410
Tlačidlo mal na kliknutie.

417
00:27:01,410 --> 00:27:05,310
Po kliknutí na tlačidlo, celkom to robí veci, aby

418
00:27:05,310 --> 00:27:07,210
nastaviť, že todo byť neúplné.

419
00:27:07,210 --> 00:27:11,180
Tu sme spojené, že udalosť kliknutia, že prepínacie tlačidlo

420
00:27:11,180 --> 00:27:15,830
a cúvanie či už je to zapnúť alebo vypnúť s týmto názorom.

421
00:27:15,830 --> 00:27:20,480
>> To je pekný spôsob zriadenia túto udalosť tak, že je to veľmi pevne viazané

422
00:27:20,480 --> 00:27:26,980
Z tohto pohľadu, a tak zistíte tohle viac.

423
00:27:26,980 --> 00:27:31,050
Mám metódu Render, a my nemusíme prechádzať detaily.

424
00:27:31,050 --> 00:27:33,650
Je to trochu podobné tomu, čo sme mali predtým,

425
00:27:33,650 --> 00:27:36,070
nevšimnúť Nie som priechodná čokoľvek.

426
00:27:36,070 --> 00:27:40,700
Nie som tlače, že ul tag, ktorý je akýmsi hovoriť budem tlačiť všetky prvky.

427
00:27:40,700 --> 00:27:46,610
Ja poskytuje funkcie pre vykresľovanie toto to-do položky.

428
00:27:46,610 --> 00:27:49,400
Jedná sa o veľmi silný pojem, pretože v podstate

429
00:27:49,400 --> 00:27:53,600
náš zoznam úloh sa skladá zo všetkých týchto todos, a ak je možné v podstate určiť,

430
00:27:53,600 --> 00:27:56,890
spôsob, ako k tomu, aby jeden z týchto todos

431
00:27:56,890 --> 00:28:04,230
potom môžeme mať našu silnú chrbticu per sa robia všetky todos

432
00:28:04,230 --> 00:28:07,760
volaním metódy render o jednotlivých todos.

433
00:28:07,760 --> 00:28:14,180
To je pojem, ktorý je tu veľmi užitočná.

434
00:28:14,180 --> 00:28:18,160
Teraz je dobrá otázka sa opýtať, ako je táto aplikácia sú dohromady?

435
00:28:18,160 --> 00:28:21,200
Pretože máme schopnosť vyjadriť jednu todo,

436
00:28:21,200 --> 00:28:23,860
ale ako sme sa získať predstavu o viac todos?

437
00:28:23,860 --> 00:28:25,100
>> Poďme sa na to pozrieť.

438
00:28:25,100 --> 00:28:27,100
Toto je posledný diel.

439
00:28:27,100 --> 00:28:29,740
Všimnite si, že máme to-do zoznamu názor tu

440
00:28:29,740 --> 00:28:34,440
a všimnite si, že je to tiež názor.

441
00:28:34,440 --> 00:28:36,970
A ísť na pár vecí,

442
00:28:36,970 --> 00:28:45,280
Metóda initialize to bude volaná, keď sme sa prvýkrát vytvoriť tento zoznam úloh.

443
00:28:45,280 --> 00:28:52,630
Ako vidíte, je to ako vytváranie zoznamu úloh a asociovať to s týmto názorom.

444
00:28:52,630 --> 00:28:57,860
A potom som pridal funkciu, takže tu v podstate, keď pridáte položku,

445
00:28:57,860 --> 00:29:01,440
je to podobné ako metódu Addit sme videli pred-

446
00:29:01,440 --> 00:29:07,430
Chystám sa vytvoriť nový objekt todo, a všimnite si, som vlastne volanie

447
00:29:07,430 --> 00:29:13,080
Táto nová metóda todo, takže je zaistená chrbticovej,

448
00:29:13,080 --> 00:29:16,010
a môžem odovzdať svoje vlastnosti tu.

449
00:29:16,010 --> 00:29:23,710
A teraz každý todo, že som vytvoríte pomocou to bude mať, že funkcie, ktoré sme videli predtým.

450
00:29:23,710 --> 00:29:28,140
Všimnite si, že som vyklízet textové pole pred-malý malý detail-

451
00:29:28,140 --> 00:29:32,900
a potom som dodal tejto kolekcie.

452
00:29:32,900 --> 00:29:37,630
>> To skoro vyzerá trochu divné, pretože predtým sme jednoducho museli urobiť, že todos.push,

453
00:29:37,630 --> 00:29:43,310
a potom sme skončili, a to môže zdať zložitejšie pre tento konkrétny projekt,

454
00:29:43,310 --> 00:29:46,980
a môžete zistiť, že chrbtica alebo dokonca uhlové alebo akýkoľvek iný rámec

455
00:29:46,980 --> 00:29:50,790
nebude vyhovovať vášmu konkrétny projekt, ale myslím, že je dôležité premýšľať o tom,

456
00:29:50,790 --> 00:29:54,100
čo to znamená vo väčšom meradle pre väčšie projekty,

457
00:29:54,100 --> 00:29:56,610
pretože ak by sme mali väčší projekt, kde sme boli predstavujúce

458
00:29:56,610 --> 00:30:00,860
niektoré naozaj komplexný zber, niečo hlbšieho než len to-do zoznamu,

459
00:30:00,860 --> 00:30:04,490
povedzme zoznamu priateľov alebo niečo podobné, že by to mohlo prísť vhod

460
00:30:04,490 --> 00:30:09,620
pretože by sme mohli zorganizovať náš kód do naozaj pohodlnej,

461
00:30:09,620 --> 00:30:12,550
takým spôsobom, ktorý by bolo jednoduchšie pre niekoho iného

462
00:30:12,550 --> 00:30:16,820
kto chcel vyzdvihnúť projekt stavať.

463
00:30:16,820 --> 00:30:21,450
Môžete vidieť, že to poskytuje veľa štruktúry.

464
00:30:21,450 --> 00:30:26,580
A potom volám činí na tomto Addit.

465
00:30:26,580 --> 00:30:31,050
Render, ako vidíte, a vy nemusíte chápať túto plnú syntax,

466
00:30:31,050 --> 00:30:37,790
ale v podstate pre každý model to bude volať jednotlivé metódy render.

467
00:30:37,790 --> 00:30:41,500
Je to druh, kde to prichádza.

468
00:30:41,500 --> 00:30:44,140
Povedzme, určiť, ako k tomu, aby jednotlivé Todos,

469
00:30:44,140 --> 00:30:47,310
a potom poďme lepidlo je dohromady ako celok.

470
00:30:47,310 --> 00:30:49,810
Ale to poskytuje spôsob, abstrakcie,

471
00:30:49,810 --> 00:30:55,470
pretože som mohol zmeniť spôsob, akým som sa rozhodol k tomu, aby jednotlivé Todos,

472
00:30:55,470 --> 00:30:57,940
a ja by som nemal zmeniť ľubovoľné tohto kódu.

473
00:30:57,940 --> 00:31:00,700
To je celkom v pohode.

474
00:31:00,700 --> 00:31:08,540
>> Má niekto nejaké otázky ohľadne rámcov JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Študent nepočuteľný otázka]

476
00:31:14,310 --> 00:31:16,050
Iste, to je veľká otázka.

477
00:31:16,050 --> 00:31:19,080
Otázkou bolo, ako som obsahovať rámcov?

478
00:31:19,080 --> 00:31:22,970
Väčšina JavaScript rámce sú v podstate len js

479
00:31:22,970 --> 00:31:25,740
že môžete zahrnúť na začiatok kódu.

480
00:31:25,740 --> 00:31:29,830
Všimnite si, v hlavovej časti môjho HTML mám všetky tieto tagy skriptu,

481
00:31:29,830 --> 00:31:34,250
a konečný skript tag je kód, ktorý sme napísal.

482
00:31:34,250 --> 00:31:38,820
A potom 3 rámcovej kódy sú len tiež značky skriptu.

483
00:31:38,820 --> 00:31:42,110
Som vrátane im, čo sa nazýva CDN,

484
00:31:42,110 --> 00:31:46,200
, Ktorý mi umožňuje dostať od niekoho iného v tomto bode

485
00:31:46,200 --> 00:31:57,930
ale každý rámec má to, môžete do veľkej miery nájsť obsah

486
00:31:57,930 --> 00:32:03,540
pre konkrétnu knižnicu JavaScriptu k dispozícii u niektorých CDN alebo niečo také,

487
00:32:03,540 --> 00:32:05,570
a potom môžete zahrnúť tieto tagy skriptu.

488
00:32:05,570 --> 00:32:07,600
Dáva to zmysel?

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

490
00:32:09,500 --> 00:32:11,730
>> To sú dva rôzne prístupy.

491
00:32:11,730 --> 00:32:14,640
Tí, ktorí nie sú jedinými prístupy k riešeniu tohto problému.

492
00:32:14,640 --> 00:32:17,080
Existuje mnoho rôznych vecí, ktoré

493
00:32:17,080 --> 00:32:19,490
niekto môže urobiť, a tam je veľa rámcov vonku.

494
00:32:19,490 --> 00:32:23,300
Uhlové a chrbtica nehovoria celú pravdu.

495
00:32:23,300 --> 00:32:26,370
Veľa šťastia s vaším záverečných prác, a moc ďakujem.

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