1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminaari] [Javascript puitteissa: miksi ja miten?]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Harvardin yliopisto]

3
00:00:04,000 --> 00:00:06,960
[Tämä on CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hei, kaikki. Tervetuloa JavaScript Runkorakenteet seminaarissa.

5
00:00:10,630 --> 00:00:14,910
Nimeni on Kevin, ja tänään aion puhua JavaScript puitteet,

6
00:00:14,910 --> 00:00:20,400
ja tavoitteena seminaari ei saada sinut vaikkapa hallita erityisesti puitteet sinänsä

7
00:00:20,400 --> 00:00:23,810
mutta antaa sinulle laajan johdannon pari kehysten

8
00:00:23,810 --> 00:00:27,150
ja osoittaa, miksi emme koskaan halua käyttää kehyksen.

9
00:00:27,150 --> 00:00:31,060
>> Ennen minä, että minä antaa hieman taustatietoa JavaScript,

10
00:00:31,060 --> 00:00:33,750
ja sitten otamme sen sieltä.

11
00:00:33,750 --> 00:00:36,270
Aiomme aloittaa toteuttamalla tehtävälista.

12
00:00:36,270 --> 00:00:39,330
Tässä meidän tehtävälistan tänään.

13
00:00:39,330 --> 00:00:41,990
Se on tavallaan hauska. Meidän on pantava täytäntöön tehtävälista JavaScript.

14
00:00:41,990 --> 00:00:45,110
Tämä on mitä se tulee näyttämään, niin se on meidän ensimmäisen maalin.

15
00:00:45,110 --> 00:00:47,160
Emme aio käyttää puitteet tehdä.

16
00:00:47,160 --> 00:00:51,930
Aiomme koodin JavaScript ja saada tehtävälista töihin.

17
00:00:51,930 --> 00:00:54,370
Sitten aiomme parantaa suunnittelua ilman kehystä.

18
00:00:54,370 --> 00:00:57,190
Aiomme keskustella eri asioita voimme tehdä vain JavaScript yksin

19
00:00:57,190 --> 00:01:00,650
jotta meidän tehtävälista hieman hyvin suunniteltu.

20
00:01:00,650 --> 00:01:02,490
Sitten aiomme heittää noin jQuery,

21
00:01:02,490 --> 00:01:05,030
ja sitten olemme menossa katsomaan samaa tehtävälistan,

22
00:01:05,030 --> 00:01:07,170
vain toteutettu eri viitekehyksiä, ja kerromme mielellämme

23
00:01:07,170 --> 00:01:09,280
 plussat ja miinukset matkan varrella.

24
00:01:09,280 --> 00:01:12,040
>> Aloitetaan täytäntöön panemiseksi tehtävälista.

25
00:01:12,040 --> 00:01:14,270
Sanotaan meille annetaan tämän HTML.

26
00:01:14,270 --> 00:01:16,620
Aion tehdä tästä hieman pienempi.

27
00:01:16,620 --> 00:01:19,300
Kuten näette, minulla on pieni otsikko, joka kertoo Todo

28
00:01:19,300 --> 00:01:21,740
ja pieni laatikko, jossa voin kirjoittaa kuvauksen todo

29
00:01:21,740 --> 00:01:26,990
ja sitten uusi kohde-painiketta, niin yritetään syöttää uuden todo tähän luetteloon.

30
00:01:26,990 --> 00:01:31,000
Anna JavaScript puitteet seminaarin,

31
00:01:31,000 --> 00:01:33,090
ja olen lyödä uuden kohteen.

32
00:01:33,090 --> 00:01:35,730
Saan tämän JavaScript ilmoitus, joka kertoo toteuttaa minua.

33
00:01:35,730 --> 00:01:37,560
Meidän täytyy toteuttaa se.

34
00:01:37,560 --> 00:01:41,490
Katsotaan Tutustu koodi tähän, niin HTML ja JavaScript.

35
00:01:41,490 --> 00:01:43,260
Tässä on meidän HTML.

36
00:01:43,260 --> 00:01:45,500
Kuten näette täällä, tässä meidän pikku Todos otsikkoa.

37
00:01:45,500 --> 00:01:47,620
Se oli rohkea asia huipulla,

38
00:01:47,620 --> 00:01:50,690
ja sitten meillä on tulo laatikko paikanvaraajassa

39
00:01:50,690 --> 00:01:59,460
ja sitten on tietty ominaisuus tätä painiketta, joka kutsuu tätä toimintoa addTodo.

40
00:01:59,460 --> 00:02:05,460
Haluaako joku arvata mitä se on napsahdus merkitsee?

41
00:02:05,460 --> 00:02:07,390
[Student äänetön vastaus]

42
00:02:07,390 --> 00:02:09,289
Hyvä, on click on eräänlainen kuten tapahtuman

43
00:02:09,289 --> 00:02:12,120
kuten hiirellä on vain tapahtuma, ja mitä teemme

44
00:02:12,120 --> 00:02:16,890
on me sitominen tapauksessa klikkaamalla tätä painiketta suorittaa kyseistä tehtävää.

45
00:02:16,890 --> 00:02:21,700
AddTodo on tämän tapahtuman käsittelijä klikkaamalla tätä nappia.

46
00:02:21,700 --> 00:02:25,010
>> Kuten näette, kun napsautan uusi kohde-painiketta

47
00:02:25,010 --> 00:02:29,940
on napsautuksen saa potkut, ja tämä toiminto saa kutsutaan.

48
00:02:29,940 --> 00:02:33,170
Katsotaanpa toiminto.

49
00:02:33,170 --> 00:02:36,260
Kuten näette, tässä on minun JavaScript-koodia toistaiseksi.

50
00:02:36,260 --> 00:02:41,280
Mitä olen huipulla on globaali tietorakenne minun tehtävälista.

51
00:02:41,280 --> 00:02:44,060
Se näyttää array. Se on vain tyhjä joukko.

52
00:02:44,060 --> 00:02:47,100
Ja sitten minulla on addTodo toiminto että näimme aiemmin,

53
00:02:47,100 --> 00:02:50,740
ja vain rivi koodia on tämä hälytys.

54
00:02:50,740 --> 00:02:55,730
Se hälyttää toteuttaa minua, ja sitten minulla on 2 tehtäviä käsillä.

55
00:02:55,730 --> 00:02:58,790
Minun täytyy lisätä todo kuin globaali data rakenne,

56
00:02:58,790 --> 00:03:01,860
ja sitten haluan vetää pois tehtävälista.

57
00:03:01,860 --> 00:03:06,360
Ei mitään liian fancy ihan vielä, mutta JavaScript saatat olla tunne,

58
00:03:06,360 --> 00:03:12,370
joten aion mennä hitaasti ja tarkistaa perusteet JavaScript tällä tavalla.

59
00:03:12,370 --> 00:03:15,490
>> Annetaan tämän laukaus.

60
00:03:15,490 --> 00:03:21,130
Sanotaan käyttäjä kirjoittaa jotain tähän ruutuun.

61
00:03:21,130 --> 00:03:23,360
Olen juuri kirjoittanut jotain täällä, tekstiä.

62
00:03:23,360 --> 00:03:27,620
Miten lajitella tutustua tämän tekstin kautta JavaScript?

63
00:03:27,620 --> 00:03:32,500
Muista, että JavaScript, yksi sen peruspiirteitä on, että se antaa meille

64
00:03:32,500 --> 00:03:34,670
Tämän ohjelmallisen DOM.

65
00:03:34,670 --> 00:03:40,670
Se antaa meille mahdollisuuden käyttää elementtejä ja niiden ominaisuuksia tämän varsinainen HTML.

66
00:03:40,670 --> 00:03:43,430
Tapamme tehdä paljain luut JavaScript

67
00:03:43,430 --> 00:03:51,360
on voimme itse käyttää toimintoa JavaScript kutsutaan getElementByID.

68
00:03:51,360 --> 00:03:55,140
Haluan tallentaa tekstin, joka on kirjoitettu siellä joitakin muuttuja,

69
00:03:55,140 --> 00:03:58,350
joten aion sanoa uusi muuttuja nimeltä new_todo,

70
00:03:58,350 --> 00:04:01,980
ja aion saada, että elementti.

71
00:04:01,980 --> 00:04:06,330
Tämä on toiminto,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Ja nyt Saan elementin ID, joten minun täytyy ID kyseisen tekstikenttään

73
00:04:11,580 --> 00:04:15,860
joten olen antanut sen tunnus new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Niin aion saada elementti.

75
00:04:18,399 --> 00:04:23,880
Se on minun argumentti tätä toimintoa, määrittää, mitkä ID päästä.

76
00:04:23,880 --> 00:04:28,110
Ja niin se on osa HTML, ja sillä on ominaisuuksia.

77
00:04:28,110 --> 00:04:30,650
Olet nähnyt näitä. He ominaisuuksia.

78
00:04:30,650 --> 00:04:37,090
Ominaisuus tekstin elementti, joka tallentaa käyttäjän tulo on nimeltään arvoa.

79
00:04:37,090 --> 00:04:40,860
Säästin arvo, joka tekstikenttään nyt tässä muuttuja nimeltä new_todo.

80
00:04:40,860 --> 00:04:45,040
Nyt minulla on ohjelmallisen tämä muuttuja, joka on eräänlainen jäähtyä

81
00:04:45,040 --> 00:04:49,200
koska nyt, mitä voin tehdä, on voin lisätä sen minun tehtävälista.

82
00:04:49,200 --> 00:04:52,870
>> Tavalla voisimme tehdä tämän JavaScript-ja älä huolestu, jos et tunne tätä,

83
00:04:52,870 --> 00:04:57,010
mutta juuri menossa läpi se on todos.push

84
00:04:57,010 --> 00:05:00,130
koska se on nimi minun globaalin tietorakenteen tänne,

85
00:05:00,130 --> 00:05:04,450
ja aion työntää new_todo.

86
00:05:04,450 --> 00:05:09,120
Tämä on suuri, koska nyt olen lisännyt sen minun JavaScript

87
00:05:09,120 --> 00:05:11,280
edustus että tehtävälista.

88
00:05:11,280 --> 00:05:15,170
Mutta nyt miten saan sen takaisin HTML?

89
00:05:15,170 --> 00:05:18,560
Minun täytyy löytää tapa tavallaan työntää sen takaisin.

90
00:05:18,560 --> 00:05:21,830
Toisin sanoen, olen sellainen täytyy tehdä tämä.

91
00:05:21,830 --> 00:05:26,060
Mitä aiomme tehdä, on aiomme tehdä tehtävälista.

92
00:05:26,060 --> 00:05:29,270
Minun täytyy päivittää muita HTML sillä sivulla,

93
00:05:29,270 --> 00:05:32,040
ja kuten näette, olen jättänyt tämän pienen astian täällä,

94
00:05:32,040 --> 00:05:36,840
Tämän jakajan sivu, jonka tunnus on todos,

95
00:05:36,840 --> 00:05:40,870
ja aion laittaa tehtävälistan siellä.

96
00:05:40,870 --> 00:05:47,240
Ensinnäkin aion selvittää sitä, koska sanovat, oli vanha tehtävälista siellä.

97
00:05:47,240 --> 00:05:49,560
Saan, että elementin ID jälleen

98
00:05:49,560 --> 00:05:54,530
ja olen päästä sisäinen HTML kyseistä tekijää,

99
00:05:54,530 --> 00:05:58,010
ja aion selväksi, että.

100
00:05:58,010 --> 00:06:05,510
Jos jättäisimme tämän koodin on, näkisimme tyhjä mitään siellä,

101
00:06:05,510 --> 00:06:10,410
ja nyt haluan aloittaa tekee minun uusi tehtävälista.

102
00:06:10,410 --> 00:06:12,870
Olen periaatteessa aio tuhota minun tehtävälista.

103
00:06:12,870 --> 00:06:18,180
>> Nyt sisäinen HTML sisällä että todos div on täysin selvää,

104
00:06:18,180 --> 00:06:20,060
ja nyt minun täytyy aloittaa lisäämällä listallani.

105
00:06:20,060 --> 00:06:23,890
Ensimmäinen asia, jonka haluan lisätä takaisin on Järjestämätön lista tag,

106
00:06:23,890 --> 00:06:33,890
joka pohjimmiltaan tarkoittaa, että tämä on alku Järjestämätön lista.

107
00:06:33,890 --> 00:06:39,770
Nyt jokaisen osa minun todos array haluan tulostaa sen sisällä että HTML.

108
00:06:39,770 --> 00:06:43,710
Haluan liittää sen pohjaan tämän listan.

109
00:06:43,710 --> 00:06:49,040
Aivan kuten C, voin käyttää silmukan, ja aion aloittaa alusta listallani

110
00:06:49,040 --> 00:06:54,140
alkioon 0 ja aion mennä aina listan pituus.

111
00:06:54,140 --> 00:07:01,100
Voimme itse saada pituutta array JavaScript käyttäen pituus omaisuutta.

112
00:07:01,100 --> 00:07:03,420
Periaatteessa aion tehdä jotain hyvin samanlaista sisällä täällä

113
00:07:03,420 --> 00:07:05,600
tulostaa, että elementti.

114
00:07:05,600 --> 00:07:12,970
Voin taas käyttää todos div, sisäinen HTML omaisuutta, että

115
00:07:12,970 --> 00:07:17,560
ja aion lisätä tämän uuden luettelon kohtaan, ja että menee ympärilleen

116
00:07:17,560 --> 00:07:25,390
Tämän li tag, ja aion liität kanssa + operaattori,

117
00:07:25,390 --> 00:07:28,040
ja se on i: s osa minun todos array,

118
00:07:28,040 --> 00:07:32,380
ja sitten aion lähellä, että tag.

119
00:07:32,380 --> 00:07:36,240
Nyt jokaisen elementin me lisäämme uuden luettelon kohtaa.

120
00:07:36,240 --> 00:07:48,700
Ja sitten kaikki me todella tarvitsee vain sulkea pois, että tag.

121
00:07:48,700 --> 00:07:52,820
Minun täytyy vain sulkea pois, että Järjestämätön lista tag.

122
00:07:52,820 --> 00:07:55,490
>> Saatko tuntumaa miten se toimii?

123
00:07:55,490 --> 00:07:57,700
Tämä avaa koko lista.

124
00:07:57,700 --> 00:08:01,080
Tämä lisää yksittäisiä elementtejä todos luettelosta listalle

125
00:08:01,080 --> 00:08:05,470
ja sitten joka sulkee koko luettelon, ja tämä on minun addTodo toiminto.

126
00:08:05,470 --> 00:08:09,590
Olen periaatteessa aloittaa saamalla todo alkaen tekstikenttään.

127
00:08:09,590 --> 00:08:18,950
Lisään, että todos jono, ja sitten uudelleen tehdä tehtävälista.

128
00:08:18,950 --> 00:08:21,520
Nyt voin lisätä kohteita listallani.

129
00:08:21,520 --> 00:08:24,620
Tämä on tavallaan jännittävää, koska vain muutaman rivin koodia

130
00:08:24,620 --> 00:08:28,240
olemme pohjimmiltaan tehty tehtävälista, jossa voimme lisätä kohteita.

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

132
00:08:30,050 --> 00:08:34,480
Sellainen johdantona JavaScript.

133
00:08:34,480 --> 00:08:36,179
Älä murehdi liikaa syntaksin nyt

134
00:08:36,179 --> 00:08:38,130
mutta ajattele tätä käsitteellisesti.

135
00:08:38,130 --> 00:08:40,539
Meillä oli joitakin HTML.

136
00:08:40,539 --> 00:08:45,310
Meillä oli tekstikenttään sivulle että pohjimmiltaan käyttäjät saattoivat tulo-do lisättävä tieto.

137
00:08:45,310 --> 00:08:49,210
Ja sitten käytimme JavaScript noutaa tämän todo tästä tekstikenttään.

138
00:08:49,210 --> 00:08:52,830
Olemme tallennettu, että sisällä JavaScript array, joka on pohjimmiltaan kuin

139
00:08:52,830 --> 00:08:56,010
meidän ohjelmallinen edustus, että to-do lista,

140
00:08:56,010 --> 00:08:59,060
ja sitten tulostaa sen ulos.

141
00:08:59,060 --> 00:09:02,690
Tämä on todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Tämä on eräänlainen jäähtyä, mutta miten voimme ottaa tämän lisäksi?

143
00:09:07,620 --> 00:09:11,350
No, kuten näette, tämä ei ole kuin täydellinen tehtävälista.

144
00:09:11,350 --> 00:09:15,100
En esimerkiksi voi merkitä joku näistä epätäydellisenä

145
00:09:15,100 --> 00:09:19,920
kuten jos halusin reprioritize kohteita tai poistaa kohteita.

146
00:09:19,920 --> 00:09:23,150
Tämä on ihan ok, mutta voimme ottaa tämän pidemmälle.

147
00:09:23,150 --> 00:09:29,280
En aio puhua liikaa lisäämällä ylimääräisiä ominaisuuksia,

148
00:09:29,280 --> 00:09:32,800
mutta voisimme ottaa tämän pidemmälle.

149
00:09:32,800 --> 00:09:35,970
Puhutaanpa lisäämällä yksi ominaisuus tämän tehtävälistan,

150
00:09:35,970 --> 00:09:40,370
joka aiotaan pysty tarkistaa yksilön-do erä

151
00:09:40,370 --> 00:09:44,780
ja on se on yliviivattu, joten periaatteessa sanoen olen tehnyt tämän.

152
00:09:44,780 --> 00:09:50,240
Katsotaanpa joitakin koodi, joka voisi tehdä sen.

153
00:09:50,240 --> 00:09:52,740
Huomaa, mitä olen tehnyt yläosassa on Olen lisännyt

154
00:09:52,740 --> 00:09:57,620
uusi globaali array nimeltään täydellinen.

155
00:09:57,620 --> 00:10:02,890
Olen periaatteessa käyttää tätä tallettaa, onko kohteet tehtävälista

156
00:10:02,890 --> 00:10:06,560
valmiit tai eivät.

157
00:10:06,560 --> 00:10:08,470
Tämä on yksi tapa tehdä tämä.

158
00:10:08,470 --> 00:10:13,750
Jos katson täytäntöönpanoa, näyttö,

159
00:10:13,750 --> 00:10:21,120
Periaatteessa jos astun todo ja painan tätä Vaihtopainike

160
00:10:21,120 --> 00:10:25,040
se ylittää pois, niin jokaisen kohteen listalta on joko täydellinen

161
00:10:25,040 --> 00:10:31,050
tai puutteellinen valtion, ja käytän jotain toista array edustaa tätä.

162
00:10:31,050 --> 00:10:33,730
>> Periaatteessa jokaisen todo että todos array

163
00:10:33,730 --> 00:10:37,110
siellä kohteen täydellinen valikoima, joka pohjimmiltaan osoittaa

164
00:10:37,110 --> 00:10:39,060
onko tämä valmis vai ei.

165
00:10:39,060 --> 00:10:41,640
Olen joutunut tekemään melko minimaalinen muutoksia tämän koodin,

166
00:10:41,640 --> 00:10:44,470
joten tässä on meidän addTodo toiminto.

167
00:10:44,470 --> 00:10:48,530
Huomaa, että täällä olen työntämällä se kiinni array,

168
00:10:48,530 --> 00:10:51,300
ja sitten olen työntää 0 että täydellinen valikoima,

169
00:10:51,300 --> 00:10:57,090
periaatteessa samaan tapaan kuin uuden todo push sanoa

170
00:10:57,090 --> 00:11:00,430
Olen lisäämällä tämän kohteen, ja se yhdistettynä tämän arvon,

171
00:11:00,430 --> 00:11:02,810
mikä tarkoittaa, että se on puutteellinen.

172
00:11:02,810 --> 00:11:04,970
Ja sitten olen uudelleenvetämisestä tehtävälista.

173
00:11:04,970 --> 00:11:09,220
Nyt, huomaa Olen lisännyt tämän drawTodoList toimintoa.

174
00:11:09,220 --> 00:11:11,760
Tämä vie paljon koodia meillä oli ennen,

175
00:11:11,760 --> 00:11:15,320
pohjimmiltaan tyhjentää ulos laatikosta ja piirtää sitten uusi tehtävälista.

176
00:11:15,320 --> 00:11:19,620
Mutta huomaa, että sisällä tämän silmukan teemme hieman nyt.

177
00:11:19,620 --> 00:11:25,000
Olemme periaatteessa tarkistaa, onko tuote vastaa nteen todo täällä

178
00:11:25,000 --> 00:11:30,220
on valmis, ja olemme käyttäytyy eri tavalla nämä 2 olosuhteissa.

179
00:11:30,220 --> 00:11:32,790
Jos se on valmis, me lisäämällä tämä del tag,

180
00:11:32,790 --> 00:11:35,360
joka on pohjimmiltaan tapa voit saada, että lakko kautta vaikutus

181
00:11:35,360 --> 00:11:38,190
ylittäessään ulos tehtävälista, jos se on valmis,

182
00:11:38,190 --> 00:11:42,200
ja jos se ei ole, emme kuten se.

183
00:11:42,200 --> 00:11:45,030
Ja niin tuollainen huolehtii, että

184
00:11:45,030 --> 00:11:49,140
>> ja se on yksi tapa saavuttaa tämä.

185
00:11:49,140 --> 00:11:53,420
Ja sitten huomaa, kun käyttäjä napsauttaa yksi näistä

186
00:11:53,420 --> 00:11:56,780
me vaihtaa loppuun tila sitä.

187
00:11:56,780 --> 00:12:02,170
Kun käyttäjä napsauttaa, me kääntää onko se tehty vai ei,

188
00:12:02,170 --> 00:12:04,540
ja sitten me piirtää sen.

189
00:12:04,540 --> 00:12:06,190
Tällainen teoksia.

190
00:12:06,190 --> 00:12:09,860
Meillä on näitä toimintoja, jotka suorittavat omat tehtävänsä,

191
00:12:09,860 --> 00:12:11,730
ja tämä on kunnossa.

192
00:12:11,730 --> 00:12:14,110
Onko jotain voisimme tehdä paremmin tästä, vaikka?

193
00:12:14,110 --> 00:12:18,700
Huomaa meillä on nämä 2 maailmanlaajuista paneelit.

194
00:12:18,700 --> 00:12:23,550
Jos tämä oli C, ja meillä oli 2 paneelit sellainen edustettuina

195
00:12:23,550 --> 00:12:25,800
tiedot, jotka tavallaan liittyvät jollain tavalla

196
00:12:25,800 --> 00:12:30,140
mitä käytämme C yhdistää nämä 2 kenttää

197
00:12:30,140 --> 00:12:35,420
jotain, joka kattaa sekä paloja tiedot?

198
00:12:35,420 --> 00:12:37,600
Joku haluaa tehdä ehdotuksen?

199
00:12:37,600 --> 00:12:39,450
[Student äänetön vastaus]

200
00:12:39,450 --> 00:12:42,340
>> Täsmälleen, jotta voisimme käyttää jonkinlaista struct,

201
00:12:42,340 --> 00:12:44,960
ja jos muistelen vaikkapa PSET 3,

202
00:12:44,960 --> 00:12:47,350
Muistan meillä oli sanakirja, ja sitten meillä oli, onko sana

203
00:12:47,350 --> 00:12:50,230
oli sanakirja, ja kaikki tiedot on koonnut

204
00:12:50,230 --> 00:12:52,420
sisällä Joidenkin tietojen rakenteen.

205
00:12:52,420 --> 00:12:56,390
Yhden asian voin tehdä tämän koodin välttää nämä 2 eri paneelit

206
00:12:56,390 --> 00:13:01,760
vastaavia paloja tiedot on voin yhdistää ne JavaScript esine.

207
00:13:01,760 --> 00:13:07,150
Katsotaanpa katsomaan sitä.

208
00:13:07,150 --> 00:13:11,740
Huomaa Minulla on vain yksi joukko yläreunassa nyt

209
00:13:11,740 --> 00:13:17,650
ja mitä olen tehnyt on-ja tämä on vain JavaScript syntaksi eräänlainen

210
00:13:17,650 --> 00:13:21,350
luoda kirjaimellinen versio esineen,

211
00:13:21,350 --> 00:13:24,670
ja huomaa siellä on 2 kiinteistöä, joten meillä on todo,

212
00:13:24,670 --> 00:13:29,660
ja se pidetään yhdessä, onko se täydellinen tai epätäydellinen.

213
00:13:29,660 --> 00:13:31,000
Tämä on hyvin samanlaista koodi.

214
00:13:31,000 --> 00:13:35,310
Käytämme JavaScript esineitä.

215
00:13:35,310 --> 00:13:38,600
Tällainen paranee asioita.

216
00:13:38,600 --> 00:13:43,850
Kuten nyt, kaikki nämä alat liittyvät tiedot pidetään yhdessä.

217
00:13:43,850 --> 00:13:46,410
Kun menemme tulostaa sen, voimme käyttää kentät.

218
00:13:46,410 --> 00:13:49,060
>> Huomaa kuinka teemme todos [i]. Täydellinen

219
00:13:49,060 --> 00:13:52,880
sijaan tarkkailun täydellinen valikoima erikseen,

220
00:13:52,880 --> 00:13:56,560
ja huomaa, kun haluamme saada tehtävälistan string saamme to-do omaisuutta

221
00:13:56,560 --> 00:13:58,750
Tämän todo, joten tällainen on järkevää, koska

222
00:13:58,750 --> 00:14:01,660
jokainen erä on nämä luontaiset ominaisuudet siitä.

223
00:14:01,660 --> 00:14:05,650
Se on todo, ja se on, onko se valmis vai ei.

224
00:14:05,650 --> 00:14:11,540
Ei liikaa muutoksia on toiminnallisesti, vain lisäsin enemmän koodia.

225
00:14:11,540 --> 00:14:13,430
Tämä on parannus joitakin rintamalla, eikö?

226
00:14:13,430 --> 00:14:16,030
Tarkoitan, me pois laskusta suunnittelu hieman.

227
00:14:16,030 --> 00:14:20,350
Nyt meillä on vastustaa periaatteessa kiteyttää asian tietoja.

228
00:14:20,350 --> 00:14:27,130
Onko mitään voisimme tehdä täältä kannalta JavaScript?

229
00:14:27,130 --> 00:14:31,810
Kuten huomaa, että tämä koodi täällä

230
00:14:31,810 --> 00:14:34,760
saada sisäinen HTML div

231
00:14:34,760 --> 00:14:40,520
on pieni, luulisin, pitkä.

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

233
00:14:45,100 --> 00:14:48,400
Yksi asia voisimme tehdä, jotta tämä koodi näyttää hieman ystävällisempi

234
00:14:48,400 --> 00:14:51,450
joten en tarvitse pitää siirtymällä vasemmalle ja oikealle, edestakaisin,

235
00:14:51,450 --> 00:14:58,480
on voisin käyttää kirjaston kuten jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Katsotaan Tutustu Seminar 2,

237
00:15:02,710 --> 00:15:05,880
ja tämä on sama koodi, mutta se on tehty jQuery.

238
00:15:05,880 --> 00:15:08,790
Et voi olla liian tuttu jQuery,

239
00:15:08,790 --> 00:15:11,510
mutta vain tietää, että jQuery on eräänlainen kirjasto JavaScript

240
00:15:11,510 --> 00:15:15,910
että on helpompi tehdä asioita, kuten pääsy yksittäisiä osia DOM.

241
00:15:15,910 --> 00:15:21,280
Täällä sen sijaan sanoa document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Voin käyttää paljon puhtaampaa miten jQuery,

243
00:15:25,210 --> 00:15:28,490
joka on vain käyttää valitsimia.

244
00:15:28,490 --> 00:15:31,300
Kuten näette, tämä koodi ei saada hieman puhtaampi,

245
00:15:31,300 --> 00:15:35,770
hyvin samankaltainen toiminnallisesti, mutta se idea.

246
00:15:35,770 --> 00:15:37,980
Olemme nähneet pari asiaa niin pitkälle,

247
00:15:37,980 --> 00:15:42,010
Aloimme vain raaka JavaScript toteutuksesta.

248
00:15:42,010 --> 00:15:45,370
Lisäsimme uusia ominaisuuksia ja osoitti, kuinka voimme parantaa sitä

249
00:15:45,370 --> 00:15:49,090
mitä meillä on JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Ei kukaan näe mitään vaikeuksia tällä grafiikalla?

251
00:15:53,300 --> 00:16:01,090
Nimittäin, kai-tai ei välttämättä vaikeuksia, mutta sanotaanko

252
00:16:01,090 --> 00:16:04,830
emme olleet tekemässä tehtävälistan projekti, ja huomenna päätimme

253
00:16:04,830 --> 00:16:10,320
halusimme tehdä päivittäistavarakaupan luettelo tai ostoslistan projekti.

254
00:16:10,320 --> 00:16:14,150
Monet näistä ominaisuuksista ovat hyvin samankaltaisia.

255
00:16:14,150 --> 00:16:19,080
Paljon asioita haluamme päästä pois JavaScript ovat hyvin yleisiä,

256
00:16:19,080 --> 00:16:23,820
ja tämä korostaa tarvetta jonkinlainen tapa

257
00:16:23,820 --> 00:16:25,670
joten tämä helpompi tehdä.

258
00:16:25,670 --> 00:16:30,400
Jouduin rakentaa kaiken tämän HTML-yhteys, tämä kaikki DOM-yhteys,

259
00:16:30,400 --> 00:16:35,530
kuten aion edustaa tehtävälistan tätä mallia.

260
00:16:35,530 --> 00:16:39,130
Ja huomaa olen vastuussa, koska JavaScript kehittäjä

261
00:16:39,130 --> 00:16:42,890
pitää HTML-ja JavaScript, että minulla on synkassa.

262
00:16:42,890 --> 00:16:48,040
Mikään ei automaattisesti tehdä, että JavaScript edustus

263
00:16:48,040 --> 00:16:51,590
tai tehtävälista saada työnnetään ulos HTML.

264
00:16:51,590 --> 00:16:54,000
Mikään täytäntöön, että paitsi minä.

265
00:16:54,000 --> 00:16:56,880
Jouduin kirjoittamaan piirtää tehtävälista toiminto.

266
00:16:56,880 --> 00:17:01,650
Ja se ei voi olla-Tarkoitan, on järkevää tehdä,

267
00:17:01,650 --> 00:17:03,670
mutta se voi olla ikävä joskus.

268
00:17:03,670 --> 00:17:08,190
Jos sinulla on laajempaa hanketta, joka voisi olla vaikeaa.

269
00:17:08,190 --> 00:17:10,720
>> Viitekehyksiä, yksi tarkoitetaan kehysten

270
00:17:10,720 --> 00:17:14,060
on yksinkertaistaa tätä prosessia ja tavallaan tekijä ulos

271
00:17:14,060 --> 00:17:16,950
Näiden yhteisten-kai voisi sanoa-suunnittelumalleja

272
00:17:16,950 --> 00:17:20,700
että ihmiset yleensä on jonkinlainen tapa esittää tietoja,

273
00:17:20,700 --> 00:17:25,599
onko se kaverilista, onko se karttatietoja

274
00:17:25,599 --> 00:17:27,280
tai jotain tai tehtävälista.

275
00:17:27,280 --> 00:17:30,660
Jotkut ihmiset ovat yleensä tapa esittää tietoa,

276
00:17:30,660 --> 00:17:33,650
ja ne yleensä täytyy pitää, että tietojen tavallaan synkassa

277
00:17:33,650 --> 00:17:36,520
välillä, mitä käyttäjä näkee jonkinlainen näkymä,

278
00:17:36,520 --> 00:17:39,850
puhuu kannalta, kuten mallin View Controller että näit luento,

279
00:17:39,850 --> 00:17:45,400
ja sitten malli, joka tässä tapauksessa on tämä JavaScript array.

280
00:17:45,400 --> 00:17:49,020
Kehykset antavat meille tapa ratkaista tämä ongelma.

281
00:17:49,020 --> 00:17:53,080
Nyt katsomaan täytäntöönpanon tehtävälista

282
00:17:53,080 --> 00:18:02,360
in puitteissa kutsutaan angularjs.

283
00:18:02,360 --> 00:18:04,650
Tämä on se. Huomaa se mahtuu liukumäki.

284
00:18:04,650 --> 00:18:07,330
Minulla ei tarvitse siirtyä vasemmalle ja oikealle.

285
00:18:07,330 --> 00:18:10,460
Se luultavasti ei ole hyvä syy kannattaa käyttää kehyksen,

286
00:18:10,460 --> 00:18:20,120
mutta huomaa olen koskaan päästä yksittäisiä HTML-elementtejä täällä?

287
00:18:20,120 --> 00:18:22,400
Olenko koskaan menee DOM?

288
00:18:22,400 --> 00:18:26,120
Näetkö mitään document.getElementById tai jotain?

289
00:18:26,120 --> 00:18:29,870
Ei, se on mennyt.

290
00:18:29,870 --> 00:18:35,590
>> Kulmikas auttaa meitä pitämään DOM ja JavaScript-edustus jotain

291
00:18:35,590 --> 00:18:40,430
Tällainen synkassa, joten jos se ei ole js-tiedoston,

292
00:18:40,430 --> 00:18:46,790
jos ei ole mitään tapaa ohjelmallisesti saada kaikki HTML-sisältöä

293
00:18:46,790 --> 00:18:51,800
alkaen JavaScript miten me pitää tämä sync?

294
00:18:51,800 --> 00:18:58,160
Jos se ei ole. Js-tiedoston, se täytyy olla HTML, eikö?

295
00:18:58,160 --> 00:19:01,910
Tämä on uusi versio HTML-tiedoston,

296
00:19:01,910 --> 00:19:04,660
ja huomaat olemme lisänneet paljon täällä.

297
00:19:04,660 --> 00:19:11,110
Huomaa siellä on näitä uusia ominaisuuksia, jotka sanovat ng-click ja ng-toista.

298
00:19:11,110 --> 00:19:15,650
Kulmikas lähestymistapa ongelman ratkaisemiseen vaikeuksia suunnittelu

299
00:19:15,650 --> 00:19:19,130
on periaatteessa tehdä HTML paljon tehokkaampia.

300
00:19:19,130 --> 00:19:24,420
Kulmikas on tapa, jonka avulla voit tehdä HTML hieman ilmeikäs.

301
00:19:24,420 --> 00:19:30,520
Esimerkiksi voin sanoa, että aion sitoa tai sitoa tähän tekstikenttään

302
00:19:30,520 --> 00:19:35,080
muuttujaan sisällä Kulmikas JavaScript-koodia.

303
00:19:35,080 --> 00:19:37,030
Tämä ng-malli tekee juuri sen.

304
00:19:37,030 --> 00:19:41,550
Että pohjimmiltaan sanoo, että kohteen sisällä tämän tekstikenttään

305
00:19:41,550 --> 00:19:45,000
vain liittää että muuttujan new_todo_description

306
00:19:45,000 --> 00:19:47,870
sisällä JavaScript-koodia.

307
00:19:47,870 --> 00:19:51,600
Se on erittäin tehokas, koska minulla ei ole nimenomaisesti mennä

308
00:19:51,600 --> 00:19:53,310
DOM saada nämä tiedot.

309
00:19:53,310 --> 00:19:56,250
Minulla ei ole sanottavaa document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Minulla ei ole käyttää jQueries kuin DOM-yhteys.

311
00:19:58,750 --> 00:20:03,280
Voin yhdistää sen vaihteleva, ja sitten kun muutan, että muuttuja

312
00:20:03,280 --> 00:20:07,400
kuluessa JavaScript se pitää synkronoituna HTML,

313
00:20:07,400 --> 00:20:11,640
jotta yksinkertaistaa tarvitse mennä edestakaisin kahden.

314
00:20:11,640 --> 00:20:18,260
Onko järkeä?

315
00:20:18,260 --> 00:20:22,060
>> Ja huomaa ei ole HTML-koodin.

316
00:20:22,060 --> 00:20:27,760
Olemme juuri tehneet HTML tehokkaampia,

317
00:20:27,760 --> 00:20:32,070
ja nyt esimerkiksi, voimme tehdä asioita, kuten tämä,

318
00:20:32,070 --> 00:20:38,610
kuten silloin, kun klikkaat tätä, kutsuvat tätä toimintoa puitteissa todos.js,

319
00:20:38,610 --> 00:20:43,410
ja voisimme tehdä, että ennen, mutta on muitakin asioita, kuten tämä ng-malli,

320
00:20:43,410 --> 00:20:47,020
ja huomata tämän ng-toista.

321
00:20:47,020 --> 00:20:51,520
Mitä mieltä olet tästä tekee?

322
00:20:51,520 --> 00:20:54,390
Tässä meidän Järjestämätön lista entuudestaan.

323
00:20:54,390 --> 00:20:56,470
Meillä on ul tunnisteet,

324
00:20:56,470 --> 00:21:03,710
mutta olen koskaan tekee luetteloon sisällä JavaScript-koodin?

325
00:21:03,710 --> 00:21:09,280
En koskaan nimenomaisesti tekee luetteloon.

326
00:21:09,280 --> 00:21:11,580
Miten tämä toimii?

327
00:21:11,580 --> 00:21:16,410
No, miten Kulmikas tekee tämän on tätä kutsutaan toistin.

328
00:21:16,410 --> 00:21:22,760
Pohjimmiltaan tämä sanoo, että haluan tulostaa tämän HTML

329
00:21:22,760 --> 00:21:26,240
jokaista todo sisällä minun todos array.

330
00:21:26,240 --> 00:21:31,850
Sisällä todos.jr on todos array täällä,

331
00:21:31,850 --> 00:21:37,910
ja tämä kertoo Kulmikas käydä läpi että jono, ja jokaisen elementin näet

332
00:21:37,910 --> 00:21:41,390
Haluan tulostaa tämän HTML.

333
00:21:41,390 --> 00:21:44,620
Tämä on tavallaan mahtava, koska en voi vain tehdä tämän

334
00:21:44,620 --> 00:21:47,760
ilman kirjoittaa silmukka,

335
00:21:47,760 --> 00:21:52,250
joka on to-do lista, joka oli vain 30 riviä koodia

336
00:21:52,250 --> 00:21:54,700
ei voi olla eniten hyötyä asia,

337
00:21:54,700 --> 00:22:01,240
mutta jos sinulla on suuri projekti, tämä voisi saada erittäin kätevä.

338
00:22:01,240 --> 00:22:06,100
>> Tämä on yksi ratkaisu ongelmaan, jolloin HTML tehokkaampia,

339
00:22:06,100 --> 00:22:10,820
ja jonka avulla voimme säilyttää JavaScript ja HTML synkassa.

340
00:22:10,820 --> 00:22:13,220
On muitakin mahdollisia tapoja ratkaista tämä ongelma,

341
00:22:13,220 --> 00:22:15,320
eikä jokainen puitteissa tämä.

342
00:22:15,320 --> 00:22:17,720
Ei jokainen puitteissa toimii näiden linjojen.

343
00:22:17,720 --> 00:22:19,490
Jotkut puitteita on erilaisia ​​lähestymistapoja,

344
00:22:19,490 --> 00:22:23,310
ja saatat huomata, että nautit koodaus yhdessä puitteissa yli muiden.

345
00:22:23,310 --> 00:22:26,160
Katsotaanpa yksi.

346
00:22:26,160 --> 00:22:30,060
Tämä on tehtävälista koodattu ylös puitteissa kutsutaan selkäranka.

347
00:22:30,060 --> 00:22:33,250
Aion käydä tämä läpi nopeasti.

348
00:22:33,250 --> 00:22:38,300
Aloitan HTML ennen kuin menemme sinne.

349
00:22:38,300 --> 00:22:40,290
Yksi toinen.

350
00:22:40,290 --> 00:22:43,950
Alkaen HTML, kuten huomaat, meidän HTML on hyvin samankaltainen

351
00:22:43,950 --> 00:22:50,000
mitä se oli ennen, niin ei liikaa uutta tällä rintamalla.

352
00:22:50,000 --> 00:22:55,410
Mutta meidän js tiedosto on hieman erilainen.

353
00:22:55,410 --> 00:23:00,360
Selkäranka sellainen on tämä idea, tai perustuu ajatukseen

354
00:23:00,360 --> 00:23:04,750
että paljon siitä, mitä me teemme, sano, JavaScript-hankkeita

355
00:23:04,750 --> 00:23:09,110
on miettiä malleja ja kokoelmat näistä malleista.

356
00:23:09,110 --> 00:23:12,510
Tämä voisi olla esimerkiksi valokuva ja kokoelmien kuvia,

357
00:23:12,510 --> 00:23:16,230
tai ajatus ystävä ja kokoelmia ystäviä.

358
00:23:16,230 --> 00:23:20,700
Ja usein kun olemme ohjelmointi JavaScript sovelluksia

359
00:23:20,700 --> 00:23:25,340
me tavallaan edustaa ajatus ottaa kokoelma ystäviä

360
00:23:25,340 --> 00:23:29,500
jotenkin JavaScript, ja selkäranka antaa meille tämän kerroksen

361
00:23:29,500 --> 00:23:33,040
päälle JavaScript n nykyiset taulukot ja esineet

362
00:23:33,040 --> 00:23:38,300
tehdä tehokkaampia asioita, jotka helpommin.

363
00:23:38,300 --> 00:23:41,870
>> Täällä olen määritellyt to-do mallin

364
00:23:41,870 --> 00:23:44,630
ja sinun ei tarvitse huolehtia liikaa syntaksin,

365
00:23:44,630 --> 00:23:48,730
mutta huomaa, että mitä yksi ominaisuuksia tämän?

366
00:23:48,730 --> 00:23:53,190
Se on oletuksena kentän.

367
00:23:53,190 --> 00:23:56,640
Selkäranka avulla voin määrittää jo pois bat

368
00:23:56,640 --> 00:24:00,190
tahansa uuden tehtävän, että luon joutuu nämä oletukset.

369
00:24:00,190 --> 00:24:04,100
Nyt voin muokata tätä, mutta se voi määrittää oletusarvot

370
00:24:04,100 --> 00:24:07,220
on mukavaa, ja se on eräänlainen kätevä, koska tämä ei ole jotain, joka on kuin

371
00:24:07,220 --> 00:24:10,430
luonnostaan ​​JavaScript, ja nyt minulla ei ole nimenomaisesti

372
00:24:10,430 --> 00:24:12,430
sanoa, että todos ovat puutteellisia.

373
00:24:12,430 --> 00:24:19,190
Voin sanoa suoralta kädeltä, että todos aiotaan merkitä puutteellisia.

374
00:24:19,190 --> 00:24:21,300
Huomaa, niin mitä tämä on?

375
00:24:21,300 --> 00:24:25,520
Nyt minulla on to-do lista, ja se on kokoelma.

376
00:24:25,520 --> 00:24:30,960
Huomaa kentän liittyy joka kertoo mallin todo.

377
00:24:30,960 --> 00:24:33,390
Tämä on minun tapani kertoa Backbone, että

378
00:24:33,390 --> 00:24:37,350
Aion miettiä kokoelma näitä yksittäisiä todos.

379
00:24:37,350 --> 00:24:42,140
Tämä on periaatteessa mallin rakenne minun ohjelma.

380
00:24:42,140 --> 00:24:44,980
Täällä minulla on tämä ajatus kokoelma,

381
00:24:44,980 --> 00:24:48,960
ja periaatteessa erille, että kokoelma on kaikki olemaan näiden todos,

382
00:24:48,960 --> 00:24:51,910
ja se on hyvin luonnollista tässä mielessä

383
00:24:51,910 --> 00:24:59,890
koska minulla on todos, ja minulla on ne kokoelma.

384
00:24:59,890 --> 00:25:02,940
>> Katsotaanpa hieman tätä.

385
00:25:02,940 --> 00:25:05,900
Tässä on Backbone näkymä.

386
00:25:05,900 --> 00:25:08,890
Toinen asia, joka Backbone sanoo, että

387
00:25:08,890 --> 00:25:14,660
paljon malleja, jotka olet ajatellut tai edes kokoelmista

388
00:25:14,660 --> 00:25:19,150
menossa täytyy olla jokin keino näytössä.

389
00:25:19,150 --> 00:25:21,900
Meidän täytyy tehdä, että to-do lista,

390
00:25:21,900 --> 00:25:25,460
ja eikö olisi hienoa, jos voisimme tarjota kunkin mallin

391
00:25:25,460 --> 00:25:28,390
tai liittävät kunkin mallin mieltä

392
00:25:28,390 --> 00:25:34,020
jonka avulla voimme kai yhdistää kaksi yhdessä?

393
00:25:34,020 --> 00:25:38,320
Kun ennen meidän täytyi käyttää silmukka, joka kulkisi läpi

394
00:25:38,320 --> 00:25:41,130
joka todo listalta ja sitten tulostaa sen täältä

395
00:25:41,130 --> 00:25:44,650
Voimme periaatteessa liittää sen tämän mallin.

396
00:25:44,650 --> 00:25:47,550
Tämä on tehtävänäkymän.

397
00:25:47,550 --> 00:25:50,550
Tämä liittyy todo löysimme aikaisemmin.

398
00:25:50,550 --> 00:25:54,940
Nyt jokainen todo on näytettävissä tai renderable

399
00:25:54,940 --> 00:25:56,960
Tämän tehtävänäkymän.

400
00:25:56,960 --> 00:25:59,440
Huomaa joitakin kenttiä.

401
00:25:59,440 --> 00:26:05,880
Mitä luulette tämän tagname on, tagname: li?

402
00:26:05,880 --> 00:26:09,790
Muistan ennen kun halusimme tehdä todo

403
00:26:09,790 --> 00:26:16,700
meidän olisi nimenomaisesti yhdistää meidän todos tämän li tag.

404
00:26:16,700 --> 00:26:21,080
Nyt sanomme, että jos tämä todo aiomme elää

405
00:26:21,080 --> 00:26:25,250
tulee olemaan sisällä li tag.

406
00:26:25,250 --> 00:26:31,440
Ja nyt olemme myös liittämällä tapahtumia meidän todos.

407
00:26:31,440 --> 00:26:34,320
>> Jokainen todo on tämä yksi tapahtuma.

408
00:26:34,320 --> 00:26:38,480
Jos valitset melko paljon toggle, että mitä sanon siellä,

409
00:26:38,480 --> 00:26:43,080
Sitten periaatteessa merkitä todo vastakohdaksi, mitä se oli ennen

410
00:26:43,080 --> 00:26:45,890
ja sitten uudelleen, hakemus.

411
00:26:45,890 --> 00:26:47,810
Tämä on tavallaan samanlainen koodin ennen.

412
00:26:47,810 --> 00:26:50,730
Muistatko, kun vietimme sitä joko vastakkain tai-

413
00:26:50,730 --> 00:26:52,410
ja sitten uudelleen sulatettu sitä.

414
00:26:52,410 --> 00:26:57,750
Mutta huomaa nyt tämän tapahtuman käytetään olla jotain, joka oli HTML.

415
00:26:57,750 --> 00:26:59,640
Se istui siellä.

416
00:26:59,640 --> 00:27:01,410
Painike oli päällä napsautuksella.

417
00:27:01,410 --> 00:27:05,310
Kun klikkaat painiketta, se tavallaan tekee juttuja

418
00:27:05,310 --> 00:27:07,210
perustettu että todo olevan puutteellinen.

419
00:27:07,210 --> 00:27:11,180
Täällä olemme liittyy, että jos napsauttaa Vaihtopainike

420
00:27:11,180 --> 00:27:15,830
ja peruutettaessa onko se päälle tai pois päältä mieltä.

421
00:27:15,830 --> 00:27:20,480
>> Tämä on mukava tapa perustaa tämän tapahtuman niin, että se on hyvin tiukasti sidoksissa

422
00:27:20,480 --> 00:27:26,980
Tämän näkemyksen, ja niin huomaa tämä yksi.

423
00:27:26,980 --> 00:27:31,050
Minulla on se synnytä menetelmää, ja meidän ei tarvitse käydä läpi yksityiskohtia.

424
00:27:31,050 --> 00:27:33,650
Se on tavallaan samanlainen kuin mitä meillä oli ennen,

425
00:27:33,650 --> 00:27:36,070
mutta huomaa En silmukoiden läpi mitään.

426
00:27:36,070 --> 00:27:40,700
En tulostamista ul tunniste, joka on tavallaan sanonta aion tulostaa kaikki elementit.

427
00:27:40,700 --> 00:27:46,610
Olen tarjota toiminnallisuus tekee tämä yksi tehtävälistan kohde.

428
00:27:46,610 --> 00:27:49,400
Tämä on hyvin voimakas käsite, koska periaatteessa

429
00:27:49,400 --> 00:27:53,600
meidän to-do lista koostuu kaikista näistä todos, ja jos voimme periaatteessa määrittää

430
00:27:53,600 --> 00:27:56,890
tapa tehdä yksi niistä todos

431
00:27:56,890 --> 00:28:04,230
Sitten voimme olla meidän voimakas selkäranka sinänsä tehdä kaikki todos

432
00:28:04,230 --> 00:28:07,760
soittamalla renderöinti menetelmää yksittäisten todos.

433
00:28:07,760 --> 00:28:14,180
Tämä on käsite, joka on hyödyksi.

434
00:28:14,180 --> 00:28:18,160
Nyt hyvä kysymys on, miten tämä sovellus koottavaa?

435
00:28:18,160 --> 00:28:21,200
Koska meillä on kyky tehdä yhden todo,

436
00:28:21,200 --> 00:28:23,860
mutta miten saamme käsityksen useita todos?

437
00:28:23,860 --> 00:28:25,100
>> Katsotaanpa katsomaan sitä.

438
00:28:25,100 --> 00:28:27,100
Tämä on viimeinen osa.

439
00:28:27,100 --> 00:28:29,740
Huomaa meillä tehtävälistan näkymä täällä,

440
00:28:29,740 --> 00:28:34,440
ja huomaa se on myös näkymä.

441
00:28:34,440 --> 00:28:36,970
Ja mennä yli pari asiaa,

442
00:28:36,970 --> 00:28:45,280
Tämän alustaa menetelmää kutsutaan kun ensin luoda tämän tehtävälista.

443
00:28:45,280 --> 00:28:52,630
Kuten näette, se on kuin luoda tehtävälistan ja liittänyt sen tähän näkemykseen.

444
00:28:52,630 --> 00:28:57,860
Ja sitten lisäsin rakenteista joten periaatteessa kun lisäät kohde-

445
00:28:57,860 --> 00:29:01,440
tämä on samanlainen addItem menetelmän näimme ennen-

446
00:29:01,440 --> 00:29:07,430
Aion luoda uuden todo esine, ja huomaa Olen oikeastaan ​​soittamalla

447
00:29:07,430 --> 00:29:13,080
Tämän uuden todo menetelmä, joten tästä on selkäranka,

448
00:29:13,080 --> 00:29:16,010
ja voin kulkea minun ominaisuudet täällä.

449
00:29:16,010 --> 00:29:23,710
Ja nyt jokainen todo että luon käyttämällä tätä ja saada sen toiminnallisuutta, että näimme ennen.

450
00:29:23,710 --> 00:29:28,140
Huomaa Olen tyhjentämistä tekstikenttään ennen-pienen pieni yksityiskohta-

451
00:29:28,140 --> 00:29:32,900
ja sitten olen lisäämällä tämä kokoelma.

452
00:29:32,900 --> 00:29:37,630
>> Tämä melkein siltä outoa, koska ennen meillä oli vain tehdä todos.push,

453
00:29:37,630 --> 00:29:43,310
ja sitten me tehtiin, ja tämä saattaa tuntua monimutkaisempaa tähän hankkeeseen,

454
00:29:43,310 --> 00:29:46,980
ja saatat huomata, että selkäranka tai jopa Kulmikas tai muita puitteita

455
00:29:46,980 --> 00:29:50,790
ei sovi tiettyyn hankkeeseen, mutta mielestäni on tärkeää miettiä

456
00:29:50,790 --> 00:29:54,100
mitä tämä tarkoittaa laajemmassa mittakaavassa suurempia hankkeita

457
00:29:54,100 --> 00:29:56,610
koska jos meillä olisi laajempaa hanketta, jossa olimme edustavat

458
00:29:56,610 --> 00:30:00,860
joitakin todella monimutkainen kokoelma, jotain syvempää kuin vain tehtävälista,

459
00:30:00,860 --> 00:30:04,490
sanokaamme kaveriluetteloon tai jotain, tämä voisi olla hyötyä

460
00:30:04,490 --> 00:30:09,620
koska voisimme organisoida koodi todella kätevä tapa,

461
00:30:09,620 --> 00:30:12,550
tavalla, joka helpottaisi joku muu

462
00:30:12,550 --> 00:30:16,820
joka halusi poimia projekti rakentuu.

463
00:30:16,820 --> 00:30:21,450
Voit nähdä, että tämä tarjoaa paljon rakenne.

464
00:30:21,450 --> 00:30:26,580
Ja sitten soitan tehdä tästä addItem.

465
00:30:26,580 --> 00:30:31,050
Tehdä, kuten näette, ja sinun ei tarvitse ymmärtää tämän täysin syntaksin,

466
00:30:31,050 --> 00:30:37,790
mutta pohjimmiltaan kunkin mallin se tulee soittaa yksittäisiä renderöinti menetelmällä.

467
00:30:37,790 --> 00:30:41,500
Se on tavallaan, jos tästä tulee.

468
00:30:41,500 --> 00:30:44,140
Katsotaanpa vain määrittää miten tehdä yksittäisiä todos,

469
00:30:44,140 --> 00:30:47,310
ja sitten nyt liimaa ne yhteen koko.

470
00:30:47,310 --> 00:30:49,810
Mutta tämä tarjoaa tavan abstraktio,

471
00:30:49,810 --> 00:30:55,470
koska en voi mullistaa päätän tehdä yksittäisiä todos,

472
00:30:55,470 --> 00:30:57,940
enkä ole muuttanut tätä koodia.

473
00:30:57,940 --> 00:31:00,700
Se on aika siistiä.

474
00:31:00,700 --> 00:31:08,540
>> Onko kellään mitään kysyttävää JavaScript puitteet?

475
00:31:08,540 --> 00:31:14,310
[Student äänetön kysymys]

476
00:31:14,310 --> 00:31:16,050
Tietysti, se on hyvä kysymys.

477
00:31:16,050 --> 00:31:19,080
Kysymys oli, miten minä myös kehysten?

478
00:31:19,080 --> 00:31:22,970
Useimmat JavaScript puitteet ovat pohjimmiltaan vain js-tiedostojen

479
00:31:22,970 --> 00:31:25,740
että voit sisällyttää yläreunassa koodin.

480
00:31:25,740 --> 00:31:29,830
Ilmoituksen pääosan minun HTML minulla on kaikki nämä koodit,

481
00:31:29,830 --> 00:31:34,250
ja lopullinen komentosarjatunnus on koodi, että olemme kirjoittaneet.

482
00:31:34,250 --> 00:31:38,820
Ja sitten 3 puitteet koodit ovat vain myös koodit.

483
00:31:38,820 --> 00:31:42,110
Olen myös ne mitä kutsutaan CDN,

484
00:31:42,110 --> 00:31:46,200
jossa voin saada sen joku muu tässä vaiheessa

485
00:31:46,200 --> 00:31:57,930
mutta jokainen kehys on tämä-voit melko paljon löytää sisältöä

486
00:31:57,930 --> 00:32:03,540
Tietyn JavaScript-kirjaston käytettävissä joissakin CDN tai jotain,

487
00:32:03,540 --> 00:32:05,570
ja sitten voit sisällyttää nämä koodit.

488
00:32:05,570 --> 00:32:07,600
Onko järkeä?

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

490
00:32:09,500 --> 00:32:11,730
>> Ne ovat 2 eri lähestymistapoja.

491
00:32:11,730 --> 00:32:14,640
Nämä eivät ole vain lähestymistapoja ongelman ratkaisuun.

492
00:32:14,640 --> 00:32:17,080
On olemassa monia eri asioita, jotka

493
00:32:17,080 --> 00:32:19,490
joku voisi tehdä, ja on olemassa monia järjestelmiä siellä.

494
00:32:19,490 --> 00:32:23,300
Kulma-ja selkäranka eivät kerro koko totuutta.

495
00:32:23,300 --> 00:32:26,370
Onnea opinnäytetöissä, ja kiitos paljon.

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