1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [Javascript ramma: Hvers vegna og hvernig]

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

3
00:00:04,000 --> 00:00:06,960
[Þetta er CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hæ, allir. Velkomin á Javascript ramma málstofu.

5
00:00:10,630 --> 00:00:14,910
Mitt nafn er Kevin, og í dag ætla ég að vera að tala um JavaScript ramma,

6
00:00:14,910 --> 00:00:20,400
og markmið þessarar ráðstefnu er ekki að fá þig til að segja, herra ákveðna ramma í sjálfu

7
00:00:20,400 --> 00:00:23,810
en til að gefa þér víðtæka kynningu á nokkra ramma

8
00:00:23,810 --> 00:00:27,150
og sýna hvers vegna við mundum alltaf vilja til að nota ramma.

9
00:00:27,150 --> 00:00:31,060
>> Áður en ég gera það, ég gefa smá bakgrunn í JavaScript,

10
00:00:31,060 --> 00:00:33,750
og þá munum við taka það þaðan.

11
00:00:33,750 --> 00:00:36,270
Við ætlum að byrja á því að innleiða til að gera lista.

12
00:00:36,270 --> 00:00:39,330
Hér er verkefni listi okkar í dag.

13
00:00:39,330 --> 00:00:41,990
Það er svolítið fyndið. Við verðum að innleiða til að gera lista í JavaScript.

14
00:00:41,990 --> 00:00:45,110
Þetta er það sem það er að fara að líta út, svo það er fyrsta markmið okkar.

15
00:00:45,110 --> 00:00:47,160
Við erum ekki að fara að nota ramma til að gera það.

16
00:00:47,160 --> 00:00:51,930
Við erum að fara að kóða JavaScript og fá til að gera lista til að vinna.

17
00:00:51,930 --> 00:00:54,370
Þá ætlum við að bæta hönnun án þess að nota ramma.

18
00:00:54,370 --> 00:00:57,190
Við ætlum að ræða ýmislegt sem við getum gert með bara JavaScript sér

19
00:00:57,190 --> 00:01:00,650
að gera okkar til að gera lista svolítið vel hönnuð.

20
00:01:00,650 --> 00:01:02,490
Þá erum við að fara að kasta í sumum jQuery,

21
00:01:02,490 --> 00:01:05,030
og þá erum við að fara að horfa á það sama til að gera lista,

22
00:01:05,030 --> 00:01:07,170
bara til framkvæmda í mismunandi ramma, og við munum ræða

23
00:01:07,170 --> 00:01:09,280
 kostir og gallar á leiðinni.

24
00:01:09,280 --> 00:01:12,040
>> Við skulum byrja að innleiða það til að gera lista.

25
00:01:12,040 --> 00:01:14,270
Segjum að við erum gefið þetta HTML.

26
00:01:14,270 --> 00:01:16,620
Ég ætla að gera þetta aðeins minni.

27
00:01:16,620 --> 00:01:19,300
Eins og þú geta sjá, ég er með smá haus sem segir todo

28
00:01:19,300 --> 00:01:21,740
og er lítill kassi sem ég get inn lýsingu á todo

29
00:01:21,740 --> 00:01:26,990
og þá ný atriði hnappinn, þannig að við skulum reyna að slá nýja TODO á þennan lista.

30
00:01:26,990 --> 00:01:31,000
Gefðu JavaScript ramma málstofa,

31
00:01:31,000 --> 00:01:33,090
og ég er að lemja nýr liður.

32
00:01:33,090 --> 00:01:35,730
Ég fæ þessa JavaScript aðvaranir sem segir innleiða mig.

33
00:01:35,730 --> 00:01:37,560
Við verðum að framkvæma það.

34
00:01:37,560 --> 00:01:41,490
Skulum kíkja kóðann fyrir þetta, bæði HTML og JavaScript.

35
00:01:41,490 --> 00:01:43,260
Hér er HTML okkar.

36
00:01:43,260 --> 00:01:45,500
Eins og þú geta sjá hér, hér er lítið Todos haus okkar.

37
00:01:45,500 --> 00:01:47,620
Það var að djörf hlutur efst,

38
00:01:47,620 --> 00:01:50,690
og þá höfum við inntak kassi með tákn,

39
00:01:50,690 --> 00:01:59,460
og þá er það ákveðin eiginleiki þennan hnapp sem kallar þetta virka addTodo.

40
00:01:59,460 --> 00:02:05,460
Hefur einhver vilja til að giska á hvað það á smell er merkja?

41
00:02:05,460 --> 00:02:07,390
[Námsmaður inaudible svar]

42
00:02:07,390 --> 00:02:09,289
Góð, á smell er tegund af eins og atburði,

43
00:02:09,289 --> 00:02:12,120
eins og að smella með músinni er bara atburður, og hvað við erum að gera

44
00:02:12,120 --> 00:02:16,890
er að við erum að binda ef að smella á þennan hnapp til að framkvæma að virka.

45
00:02:16,890 --> 00:02:21,700
AddTodo er þessi atburður dýraþjálfari fyrir að smella þessi hnappur.

46
00:02:21,700 --> 00:02:25,010
>> Eins og þú geta sjá, þegar ég smelli á nýjum lið hnappinn

47
00:02:25,010 --> 00:02:29,940
Um smella atburður fær rekinn, og þessi aðgerð verður kallað.

48
00:02:29,940 --> 00:02:33,170
Við skulum líta á virkni.

49
00:02:33,170 --> 00:02:36,260
Eins og þú geta sjá, hér er JavaScript kóða mitt svo langt.

50
00:02:36,260 --> 00:02:41,280
Það sem ég hef efst er alþjóðlegt gögn uppbygging fyrir til-gera listanum mínum.

51
00:02:41,280 --> 00:02:44,060
Það lítur út eins og fylki. Það er bara tómt array.

52
00:02:44,060 --> 00:02:47,100
Og þá hef ég addTodo aðgerð sem við sáum áðan,

53
00:02:47,100 --> 00:02:50,740
og eina línu af kóða í það er þetta viðvörun.

54
00:02:50,740 --> 00:02:55,730
Það tónar innleiða mig, og þá hef ég 2 verkefni á hendi.

55
00:02:55,730 --> 00:02:58,790
Ég verð að bæta TODO til að alþjóðlegu gögn uppbygging,

56
00:02:58,790 --> 00:03:01,860
og þá vil ég draga út til að gera lista.

57
00:03:01,860 --> 00:03:06,360
Ekkert ímynda sér of bara enn, en JavaScript þú getur verið ókunnugur,

58
00:03:06,360 --> 00:03:12,370
þannig að ég ætla að fara hægt og endurskoða grundvallaratriði JavaScript í þá áttina.

59
00:03:12,370 --> 00:03:15,490
>> Við skulum gefa þessu skot.

60
00:03:15,490 --> 00:03:21,130
Segjum að notandi slær eitthvað í þessum reit.

61
00:03:21,130 --> 00:03:23,360
Ég gafst bara eitthvað hér, texta.

62
00:03:23,360 --> 00:03:27,620
Hvernig tegund ég aðgang að texta með JavaScript?

63
00:03:27,620 --> 00:03:32,500
Mundu að JavaScript, einn af grundvallar eiginleikum hennar er að hún gefur okkur

64
00:03:32,500 --> 00:03:34,670
þetta forritanlegur aðgang að DOM.

65
00:03:34,670 --> 00:03:40,670
Það gerir okkur kleift að nálgast þætti og eiginleika þeirra af raunverulegum HTML.

66
00:03:40,670 --> 00:03:43,430
Leiðin sem við gerum það með Bare Bones JavaScript

67
00:03:43,430 --> 00:03:51,360
er að við getum raunverulega nota virka í JavaScript kallast getElementByID.

68
00:03:51,360 --> 00:03:55,140
Ég vil geyma texta sem er slegið þar í einhverju breytu,

69
00:03:55,140 --> 00:03:58,350
þannig að ég ætla að segja nýja breytu sem heitir new_todo,

70
00:03:58,350 --> 00:04:01,980
og ég ætla að fá þessi þáttur.

71
00:04:01,980 --> 00:04:06,330
Þetta er fall,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Og nú er ég að fá stak eftir auðkenni, þannig að ég þarf að kenni þess textareitinn,

73
00:04:11,580 --> 00:04:15,860
svo ég hef gefið það ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Það er hvernig ég ætla að fá stak.

75
00:04:18,399 --> 00:04:23,880
Það er rök mín til þessa aðgerð, að tilgreina hvaða ID til að fá.

76
00:04:23,880 --> 00:04:28,110
Og svo er það liður í HTML, og það hefur eiginleika.

77
00:04:28,110 --> 00:04:30,650
Þú hefur séð þetta. Þeir eru eiginleika.

78
00:04:30,650 --> 00:04:37,090
The eiginleiki af textanum þáttur sem geymir inntak notandans er kallað gildi.

79
00:04:37,090 --> 00:04:40,860
Ég spara verðmæti þess textareitinn nú í þessari breytu sem heitir new_todo.

80
00:04:40,860 --> 00:04:45,040
Nú hef ég forritanlegur aðgang að þessari breytu, sem er góður af kaldur

81
00:04:45,040 --> 00:04:49,200
því nú hvað ég get gert er ég get bætt því við að-gera listanum mínum.

82
00:04:49,200 --> 00:04:52,870
>> Leiðin sem við myndum gera þetta í JavaScript-og ekki hafa áhyggjur ef þú ert ókunnur með þetta,

83
00:04:52,870 --> 00:04:57,010
en bara að fara í gegnum það er todos.push

84
00:04:57,010 --> 00:05:00,130
því það er nafn á heimsvísu gögn uppbygging mína upp hér,

85
00:05:00,130 --> 00:05:04,450
og ég ætla að ýta new_todo.

86
00:05:04,450 --> 00:05:09,120
Þetta er frábært því nú hef ég bætt það til JavaScript minn

87
00:05:09,120 --> 00:05:11,280
framsetning sem til-gera listanum.

88
00:05:11,280 --> 00:05:15,170
En nú hvernig fæ ég það aftur til HTML?

89
00:05:15,170 --> 00:05:18,560
Ég verð að finna leið til að raða á ýta því til baka.

90
00:05:18,560 --> 00:05:21,830
Með öðrum orðum, hef ég eins konar að teikna þetta.

91
00:05:21,830 --> 00:05:26,060
Það sem við erum að fara að gera er að við erum að fara að draga til-gera listanum.

92
00:05:26,060 --> 00:05:29,270
Ég þarf að uppfæra önnur HTML á síðunni,

93
00:05:29,270 --> 00:05:32,040
og eins og þú geta sjá, ég hef skilið þetta litla ílát hér,

94
00:05:32,040 --> 00:05:36,840
þetta Divider á síðunni sem ID er Todos,

95
00:05:36,840 --> 00:05:40,870
og ég ætla að setja til að gera lista þar.

96
00:05:40,870 --> 00:05:47,240
Fyrst ætla ég að hreinsa það út af því, segja, að það var gamall til að gera lista þar.

97
00:05:47,240 --> 00:05:49,560
Ég fæ þessi þáttur með ID aftur,

98
00:05:49,560 --> 00:05:54,530
og ég er að fá aðgang að innri HTML þeirrar frumefni,

99
00:05:54,530 --> 00:05:58,010
og ég ætla að hreinsa það.

100
00:05:58,010 --> 00:06:05,510
Ef við fórum þennan kóða sem er, viljum við sjá auða ekkert þar,

101
00:06:05,510 --> 00:06:10,410
og nú vil ég að byrja flutningur New to-do listanum mínum.

102
00:06:10,410 --> 00:06:12,870
Ég ætla í rauninni að fara að þurrka út til að gera lista mínum.

103
00:06:12,870 --> 00:06:18,180
>> Nú er innri HTML inni þess Todos div alveg ljóst,

104
00:06:18,180 --> 00:06:20,060
og nú þarf ég að byrja að bæta listann minn.

105
00:06:20,060 --> 00:06:23,890
The fyrstur hlutur sem ég vil bæta aftur er óraðaða lista tag,

106
00:06:23,890 --> 00:06:33,890
sem táknar í rauninni að þetta er upphaf óraðaðan lista.

107
00:06:33,890 --> 00:06:39,770
Nú fyrir hvert frumefni í Todos array ég vil prenta það út inni að HTML.

108
00:06:39,770 --> 00:06:43,710
Ég vil auka það til the botn af þessum lista.

109
00:06:43,710 --> 00:06:49,040
Rétt eins og í C, get ég notað fyrir lykkju, og ég ætla að byrja á byrjun á listanum mínum

110
00:06:49,040 --> 00:06:54,140
á frumefni 0, og ég ætla að fara alla leið til lengd listanum.

111
00:06:54,140 --> 00:07:01,100
Við getum raunverulega fá lengd fylki í JavaScript með lengd eign.

112
00:07:01,100 --> 00:07:03,420
Í grundvallaratriðum er ég að fara að gera eitthvað mjög svipað inni hér

113
00:07:03,420 --> 00:07:05,600
að prenta út þessi þáttur.

114
00:07:05,600 --> 00:07:12,970
Ég get aftur aðgang að Todos DIV, innri HTML eign þess,

115
00:07:12,970 --> 00:07:17,560
og ég ætla að bæta við á þennan nýja lista atriði, og það er að fara að vera umkringdur

116
00:07:17,560 --> 00:07:25,390
þetta lí tag, og ég ætla að concatenate með + rekstraraðila,

117
00:07:25,390 --> 00:07:28,040
og það er ith þáttur Todos fylking minn,

118
00:07:28,040 --> 00:07:32,380
og þá ætla ég að loka tag.

119
00:07:32,380 --> 00:07:36,240
Nú fyrir hvert frumefni munum bæta við nýjum lista færslu.

120
00:07:36,240 --> 00:07:48,700
Og þá er allt sem við þurfum virkilega að gera loka á þessi merki.

121
00:07:48,700 --> 00:07:52,820
Ég þarf bara að loka á að óraðaða lista tag.

122
00:07:52,820 --> 00:07:55,490
>> Ert þú fá tilfinningu fyrir hvernig það virkar?

123
00:07:55,490 --> 00:07:57,700
Þetta opnar allan listann.

124
00:07:57,700 --> 00:08:01,080
Þetta bætir einstaka þætti frá Todos lista á listann,

125
00:08:01,080 --> 00:08:05,470
og þá lokar það á allan listann, og þetta er addTodo virka minn.

126
00:08:05,470 --> 00:08:09,590
Ég byrja í grundvallaratriðum með því að fá TODO frá textareitinn.

127
00:08:09,590 --> 00:08:18,950
Ég bæta því við Todos fylking, og þá er ég aftur láta til-gera listanum.

128
00:08:18,950 --> 00:08:21,520
Nú get ég bætt þeim við listann minn.

129
00:08:21,520 --> 00:08:24,620
Þetta er góður af spennandi vegna þess að í nokkrum línum af kóða

130
00:08:24,620 --> 00:08:28,240
við höfum í rauninni gert til að gera lista þar sem við getum bætt atriði.

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

132
00:08:30,050 --> 00:08:34,480
Það er góður af a undirstöðu kynning á JavaScript.

133
00:08:34,480 --> 00:08:36,179
Ekki hafa áhyggjur of mikill óður í setningafræði fyrir nú,

134
00:08:36,179 --> 00:08:38,130
en hugsaðu um þetta eðli.

135
00:08:38,130 --> 00:08:40,539
Við fengum HTML.

136
00:08:40,539 --> 00:08:45,310
Við höfðum textabox á síðu sem í grundvallaratriðum leyfa notendum að slá inn til að gera sem þú vilt bæta.

137
00:08:45,310 --> 00:08:49,210
Og þá erum við að nota JavaScript til að ná að TODO frá því textareitinn.

138
00:08:49,210 --> 00:08:52,830
Við geymd að inni í JavaScript fylki, sem er í grundvallaratriðum eins og

139
00:08:52,830 --> 00:08:56,010
forritanlegur framsetning okkar að til að gera lista,

140
00:08:56,010 --> 00:08:59,060
og þá erum við prenta það út.

141
00:08:59,060 --> 00:09:02,690
Þetta er todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Þetta er góður af kaldur, en hvernig getum við tekið þetta lengra?

143
00:09:07,620 --> 00:09:11,350
Jæja, eins og þú geta sjá, þetta er ekki eins heill til-gera listanum.

144
00:09:11,350 --> 00:09:15,100
Til dæmis get ég ekki merkja eitthvað af þessum atriðum sem ófullnægjandi,

145
00:09:15,100 --> 00:09:19,920
eins og ef ég vildi reprioritize atriði eða eyða hlutum.

146
00:09:19,920 --> 00:09:23,150
Þetta er allt í lagi, en við getum tekið þetta lengra.

147
00:09:23,150 --> 00:09:29,280
Ég ætla ekki að tala of mikið um að bæta auka lögun,

148
00:09:29,280 --> 00:09:32,800
en við gætum tekið að frekari.

149
00:09:32,800 --> 00:09:35,970
Við skulum tala um að bæta við einum möguleika til þessa að gera lista,

150
00:09:35,970 --> 00:09:40,370
sem er að fara að vera fær um að stöðva einstakling til að gera hlut

151
00:09:40,370 --> 00:09:44,780
og hafa verið yfir það út, svo í rauninni að segja að ég hef gert þetta.

152
00:09:44,780 --> 00:09:50,240
Við skulum líta á nokkur númer sem gæti náð því.

153
00:09:50,240 --> 00:09:52,740
Taka eftir hvað ég hef gert efst er ég hef bætt

154
00:09:52,740 --> 00:09:57,620
nýtt alþjóðlegt array kallað lokið.

155
00:09:57,620 --> 00:10:02,890
Ég er í grundvallaratriðum að nota þetta til að geyma hvort atriði um að gera lista

156
00:10:02,890 --> 00:10:06,560
eru heill eða ekki.

157
00:10:06,560 --> 00:10:08,470
Þetta er ein leið til að gera þetta.

158
00:10:08,470 --> 00:10:13,750
Ef ég lít á framkvæmd þessa, sýna,

159
00:10:13,750 --> 00:10:21,120
í rauninni ef ég inn TODO og ég stutt þessa hnapp

160
00:10:21,120 --> 00:10:25,040
það fer út, svo hefur hvert atriði á þessum lista annað hvort heill

161
00:10:25,040 --> 00:10:31,050
eða ófullnægjandi ástand, og ég nota annað array til að tákna það.

162
00:10:31,050 --> 00:10:33,730
>> Grundvallaratriðum fyrir hvert Todo í þeirri Todos array

163
00:10:33,730 --> 00:10:37,110
það er atriði í the heill array sem í grundvallaratriðum sýnir

164
00:10:37,110 --> 00:10:39,060
hvort sem er lokið eða ekki.

165
00:10:39,060 --> 00:10:41,640
Ég hef þurft að gera frekar lítil breytingar á þessum kóða,

166
00:10:41,640 --> 00:10:44,470
svo hér addTodo virka okkar.

167
00:10:44,470 --> 00:10:48,530
Takið eftir að hér er ég að ýta henni inn á fjölda,

168
00:10:48,530 --> 00:10:51,300
og þá er ég að ýta á 0 til að ljúka fylking,

169
00:10:51,300 --> 00:10:57,090
grundvallaratriðum samhliða þeirri nýju ToDo ýta að segja

170
00:10:57,090 --> 00:11:00,430
Ég er að bæta þetta atriði, og það er par með þetta gildi,

171
00:11:00,430 --> 00:11:02,810
sem þýðir að það er ófullnægjandi.

172
00:11:02,810 --> 00:11:04,970
Og þá er ég redrawing til-gera listanum.

173
00:11:04,970 --> 00:11:09,220
Nú, eftir ég hef bætt þennan drawTodoList virka.

174
00:11:09,220 --> 00:11:11,760
Þetta tekur mikið af kóða sem við höfðum áður,

175
00:11:11,760 --> 00:11:15,320
grundvallaratriðum hreinsar út í reitinn og þá teiknar nýja til-gera listanum.

176
00:11:15,320 --> 00:11:19,620
En eftir því að inni í þessu fyrir lykkju við erum að gera svolítið meira núna.

177
00:11:19,620 --> 00:11:25,000
Við erum í grundvallaratriðum að athuga hvort hluturinn svarar til ith todo hér

178
00:11:25,000 --> 00:11:30,220
er lokið, og við erum að haga öðruvísi í þessum 2 tilvikum.

179
00:11:30,220 --> 00:11:32,790
Ef það er heill, við erum að bæta þessari del tag,

180
00:11:32,790 --> 00:11:35,360
sem er sú leið sem þú getur fengið að slá gegnum áhrif

181
00:11:35,360 --> 00:11:38,190
ferð út til að gera lista ef það er heill,

182
00:11:38,190 --> 00:11:42,200
og ef það er ekki, erum við ekki að setja það.

183
00:11:42,200 --> 00:11:45,030
Og svo tekur svona vel með það,

184
00:11:45,030 --> 00:11:49,140
>> og það er ein leið til að ná þessu.

185
00:11:49,140 --> 00:11:53,420
Og svo eftir því þegar notandi smellir einn af þessum

186
00:11:53,420 --> 00:11:56,780
við víxlað lokið stöðu hennar.

187
00:11:56,780 --> 00:12:02,170
Þegar notandi smellir, við munum snúa hvort það hefur verið lokið eða ekki,

188
00:12:02,170 --> 00:12:04,540
og þá munum við uppkast það.

189
00:12:04,540 --> 00:12:06,190
Af þessu tagi verka.

190
00:12:06,190 --> 00:12:09,860
Við höfum þessar aðgerðir sem framkvæma eigin verkefnum sínum,

191
00:12:09,860 --> 00:12:11,730
og þetta er allt í lagi.

192
00:12:11,730 --> 00:12:14,110
Er það eitthvað sem við gætum gert betur um þetta, þó?

193
00:12:14,110 --> 00:12:18,700
Takið við höfum þessar 2 alþjóðlegum fylki.

194
00:12:18,700 --> 00:12:23,550
Ef þetta var C, og við höfðum 2 fylki þannig táknuð

195
00:12:23,550 --> 00:12:25,800
gögn sem var eins konar tengdar á einhvern hátt

196
00:12:25,800 --> 00:12:30,140
hvað myndum við nota í C til að sameina þessar 2 reiti

197
00:12:30,140 --> 00:12:35,420
í eitthvað sem encapsulates bæði stykki af upplýsingum?

198
00:12:35,420 --> 00:12:37,600
Einhver vilja til að gera uppástungu?

199
00:12:37,600 --> 00:12:39,450
[Námsmaður inaudible svar]

200
00:12:39,450 --> 00:12:42,340
>> Einmitt, svo við gætum notað einhvers konar strúktúr,

201
00:12:42,340 --> 00:12:44,960
og ef þú heldur aftur til, segjum, pset 3,

202
00:12:44,960 --> 00:12:47,350
muna við höfðum orðabók, og þá höfðum við hvort orðið

203
00:12:47,350 --> 00:12:50,230
var í orðabókinni, og allt sem upplýsingar voru sett saman

204
00:12:50,230 --> 00:12:52,420
inni sumra gögn uppbygging.

205
00:12:52,420 --> 00:12:56,390
Eitt sem ég get gert við þennan kóða til að forðast að hafa þessar 2 mismunandi fylki

206
00:12:56,390 --> 00:13:01,760
fyrir svipuðum stykki af upplýsingar er ég get sameinað þær í JavaScript hlut.

207
00:13:01,760 --> 00:13:07,150
Skulum taka a líta á það.

208
00:13:07,150 --> 00:13:11,740
Tilkynning Ég hef bara eina fylking efst nú

209
00:13:11,740 --> 00:13:17,650
og það sem ég hef gert er og þetta er bara JavaScript setningafræði fyrir um tegund

210
00:13:17,650 --> 00:13:21,350
skapa bókstaflega útgáfu af hlut,

211
00:13:21,350 --> 00:13:24,670
og taka það eru 2 eignir, þannig að við höfum TODO,

212
00:13:24,670 --> 00:13:29,660
og það er haldið saman með hvort það er heill eða ófullnægjandi.

213
00:13:29,660 --> 00:13:31,000
Þetta er mjög svipað númer.

214
00:13:31,000 --> 00:13:35,310
Við erum að nota JavaScript hlutum.

215
00:13:35,310 --> 00:13:38,600
Af þessu tagi bætir hlutum.

216
00:13:38,600 --> 00:13:43,850
Eins og nú, eru öll þessi svið tengjast upplýsingum haldið saman.

217
00:13:43,850 --> 00:13:46,410
Þegar við förum að prenta það út, getum við aðgang reitina.

218
00:13:46,410 --> 00:13:49,060
>> Taka eftir því hvernig við erum að gera Todos [i]. Heill

219
00:13:49,060 --> 00:13:52,880
í stað þess að stöðva alla array sig,

220
00:13:52,880 --> 00:13:56,560
og taka eftir þegar við viljum fá til að gera band sem við erum að fá á til-gera eign

221
00:13:56,560 --> 00:13:58,750
þess ToDo, svo gerir svona skynsamlegt vegna

222
00:13:58,750 --> 00:14:01,660
hvert atriði hefur þessi innri eiginleika um það.

223
00:14:01,660 --> 00:14:05,650
Það hefur TODO, og það hefur hvort sem það er lokið eða ekki.

224
00:14:05,650 --> 00:14:11,540
Ekki of margar breytingar þar virkni, bara bætti smá meira til kóðann.

225
00:14:11,540 --> 00:14:13,430
Þetta er framför á sumum sviðum, ekki satt?

226
00:14:13,430 --> 00:14:16,030
Ég meina, við reiknað út hönnun svolítið.

227
00:14:16,030 --> 00:14:20,350
Nú höfum við hluti til að grundvallaratriðum þjappa þessum gögnum.

228
00:14:20,350 --> 00:14:27,130
Er eitthvað meira sem við gætum gert héðan í skilmálar af JavaScript?

229
00:14:27,130 --> 00:14:31,810
Eins og tilkynnt að þetta númer hérna

230
00:14:31,810 --> 00:14:34,760
til að fá innri HTML á div

231
00:14:34,760 --> 00:14:40,520
er lítið, ég held, lengi.

232
00:14:40,520 --> 00:14:45,100
Það er document.getElementById ("Todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Eitt sem við gætum gert til að gera þetta númer líta svolítið vinalegri

234
00:14:48,400 --> 00:14:51,450
svo ég þyrfti ekki að halda rolla vinstri og hægri, fram og til baka,

235
00:14:51,450 --> 00:14:58,480
er ég gæti notað bókasafn eins jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Skulum kíkja Málstofa 2,

237
00:15:02,710 --> 00:15:05,880
og þetta er það sama kóða, en það er gert með jQuery.

238
00:15:05,880 --> 00:15:08,790
Þú getur ekki vera of kunnuglegt við jQuery,

239
00:15:08,790 --> 00:15:11,510
en bara veit að jQuery er tegund af bókasafni fyrir JavaScript

240
00:15:11,510 --> 00:15:15,910
sem gerir það auðveldara að gera hlutina eins og aðgang einstakra þátta í DOM.

241
00:15:15,910 --> 00:15:21,280
Hér í stað þess að segja document.getElementById ("Todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Ég get notað mikið hreinni leið í jQuery,

243
00:15:25,210 --> 00:15:28,490
sem er bara að nota selectors.

244
00:15:28,490 --> 00:15:31,300
Eins og þú geta sjá, þetta númer var að fá smá hreinna,

245
00:15:31,300 --> 00:15:35,770
mjög virka svipað, en það er hugmynd.

246
00:15:35,770 --> 00:15:37,980
Við höfum séð nokkra hluti svo langt,

247
00:15:37,980 --> 00:15:42,010
svo byrjuðum við bara hrár JavaScript framkvæmd.

248
00:15:42,010 --> 00:15:45,370
Við bætt nýjum eiginleikum og sýndi hvernig við getum bætt það með

249
00:15:45,370 --> 00:15:49,090
bara það sem við höfum í JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Hefur einhver séð í einhverjum vandræðum með þessa hönnun?

251
00:15:53,300 --> 00:16:01,090
Nefnilega, held-eða ég ekki endilega erfiðleika en við skulum segja

252
00:16:01,090 --> 00:16:04,830
við vorum ekki að gera til að gera lista verkefni, og á morgun ákváðum

253
00:16:04,830 --> 00:16:10,320
við vildum að gera matvöruverslun lista eða lista versla verkefni.

254
00:16:10,320 --> 00:16:14,150
A einhver fjöldi af þessir eiginleikar eru mjög svipuð.

255
00:16:14,150 --> 00:16:19,080
A einhver fjöldi af því sem við viljum fá út af JavaScript eru mjög algeng,

256
00:16:19,080 --> 00:16:23,820
og þetta undirstrikar þörfina fyrir einhvers konar hátt af

257
00:16:23,820 --> 00:16:25,670
gerir þetta auðveldara að gera.

258
00:16:25,670 --> 00:16:30,400
Ég þurfti að byggja upp alla þessa HTML aðgang, allt þetta DOM aðgang,

259
00:16:30,400 --> 00:16:35,530
eins og ég ætla að tákna að gera lista með þessu líkani.

260
00:16:35,530 --> 00:16:39,130
Og eftir ég er ábyrgur og á Javascript verktaki

261
00:16:39,130 --> 00:16:42,890
til að halda HTML og JavaScript sem ég hef í sync.

262
00:16:42,890 --> 00:16:48,040
Ekkert sjálfkrafa gert að JavaScript framsetning

263
00:16:48,040 --> 00:16:51,590
eða til-gera listanum fá ýtt út til HTML.

264
00:16:51,590 --> 00:16:54,000
Ekkert framfylgt að nema fyrir mig.

265
00:16:54,000 --> 00:16:56,880
Ég þurfti að skrifa jafntefli til að gera lista virka.

266
00:16:56,880 --> 00:17:01,650
Og það má ekki vera-ég meina, það er sanngjarnt að gera það,

267
00:17:01,650 --> 00:17:03,670
en það kann að vera leiðinlegur stundum.

268
00:17:03,670 --> 00:17:08,190
Ef þú hafa a stór verkefni, sem gæti verið erfitt.

269
00:17:08,190 --> 00:17:10,720
>> Ramma, einn af þeim tilgangi að ramma

270
00:17:10,720 --> 00:17:14,060
er að einfalda það ferli og tegund af þáttur út

271
00:17:14,060 --> 00:17:16,950
Þessi sameiginlega-Ég held að þú gætir sagt-hönnun mynstur

272
00:17:16,950 --> 00:17:20,700
að fólk hefur almennt einhvers konar leið fulltrúi gögn,

273
00:17:20,700 --> 00:17:25,599
hvort það er vinalistinn, hvort sem er kortaupplýsingum

274
00:17:25,599 --> 00:17:27,280
eða eitthvað eða að-gera listanum.

275
00:17:27,280 --> 00:17:30,660
Sumir hafa yfirleitt leið fulltrúi upplýsingar,

276
00:17:30,660 --> 00:17:33,650
og þeir þurfa yfirleitt að halda að upplýsingar svoleiðis í sync

277
00:17:33,650 --> 00:17:36,520
milli þess sem notandinn sér í einhvers konar skoðun,

278
00:17:36,520 --> 00:17:39,850
tala í skilmálar af eins skoða líkan stjórnandi sem þú sást í fyrirlestri,

279
00:17:39,850 --> 00:17:45,400
og þá fyrirmynd, sem í þessu tilfelli er þetta JavaScript array.

280
00:17:45,400 --> 00:17:49,020
Ramma gefa okkur leið til að leysa þessi vandamál.

281
00:17:49,020 --> 00:17:53,080
Nú skulum taka a líta á framkvæmd þessa til að gera lista

282
00:17:53,080 --> 00:18:02,360
í ramma sem heitir angularjs.

283
00:18:02,360 --> 00:18:04,650
Þetta er það. Taka það passar á hana.

284
00:18:04,650 --> 00:18:07,330
Ég þarf ekki að fletta til vinstri og hægri.

285
00:18:07,330 --> 00:18:10,460
Það er sennilega ekki góð ástæða til að mæla með því að nota ramma,

286
00:18:10,460 --> 00:18:20,120
en tilkynning er ég aðgang alltaf einstök HTML þætti hér?

287
00:18:20,120 --> 00:18:22,400
Er ég að fara alltaf í DOM?

288
00:18:22,400 --> 00:18:26,120
Sérðu hvaða document.getElementById eða eitthvað svoleiðis?

289
00:18:26,120 --> 00:18:29,870
Nei, það er farið.

290
00:18:29,870 --> 00:18:35,590
>> Hyrndur hjálpar okkur að halda DOM og JavaScript framsetning okkar eitthvað

291
00:18:35,590 --> 00:18:40,430
konar í sync, þannig að ef það er ekki í JS skrá,

292
00:18:40,430 --> 00:18:46,790
ef það er engin leið til að kerfisbundið komast að allur þessi HTML efni

293
00:18:46,790 --> 00:18:51,800
frá JavaScript hvernig eigum við að halda þetta í sync?

294
00:18:51,800 --> 00:18:58,160
Ef það er ekki í. JS skrá, það fékk að vera í HTML, ekki satt?

295
00:18:58,160 --> 00:19:01,910
Þetta er ný útgáfa af HTML skrá,

296
00:19:01,910 --> 00:19:04,660
og taka við höfum bætt mikið hér.

297
00:19:04,660 --> 00:19:11,110
Eftir því að það er þessi nýja eiginleika sem segja ng-smell og ng-endurtaka.

298
00:19:11,110 --> 00:19:15,650
Stækkun er aðferð til að leysa þetta vandamál af erfiðleikum í hönnun

299
00:19:15,650 --> 00:19:19,130
er að í grundvallaratriðum að gera HTML miklu öflugri.

300
00:19:19,130 --> 00:19:24,420
Stækkun er leið til að leyfa þér að gera HTML nokkuð svipmikill.

301
00:19:24,420 --> 00:19:30,520
Til dæmis get ég sagt að ég ætla að binda eða binda þennan textareitinn

302
00:19:30,520 --> 00:19:35,080
til a breyta innan Stækkun JavaScript kóða mína.

303
00:19:35,080 --> 00:19:37,030
Þetta ng-líkan er bara þessi.

304
00:19:37,030 --> 00:19:41,550
Sem í grundvallaratriðum segir að hluturinn inni þessa textareitinn,

305
00:19:41,550 --> 00:19:45,000
bara tengja það við breytilegum new_todo_description

306
00:19:45,000 --> 00:19:47,870
innan JavaScript kóða.

307
00:19:47,870 --> 00:19:51,600
Það er mjög öflug vegna þess að ég þarf ekki að beinlínis að fara til

308
00:19:51,600 --> 00:19:53,310
DOM til að fá þær upplýsingar.

309
00:19:53,310 --> 00:19:56,250
Ég þarf ekki að segja document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Ég þarf ekki að nota jQueries eins DOM aðgang.

311
00:19:58,750 --> 00:20:03,280
Ég get tengt það með breytu, og svo þegar ég breytt því breyta

312
00:20:03,280 --> 00:20:07,400
innan JavaScript það er haldið í sync með HTML,

313
00:20:07,400 --> 00:20:11,640
svo einfaldar að ferlið að þurfa að fara fram og til baka á milli.

314
00:20:11,640 --> 00:20:18,260
Er að skynsamleg?

315
00:20:18,260 --> 00:20:22,060
>> Og eftir því að það er engin HTML aðgangur merkjamál.

316
00:20:22,060 --> 00:20:27,760
Við höfum bara gert HTML öflugri,

317
00:20:27,760 --> 00:20:32,070
og nú, til dæmis, við getum gert hlutina eins og þetta,

318
00:20:32,070 --> 00:20:38,610
eins og þegar þú smellir á þetta, kalla þessa aðgerð undir todos.js,

319
00:20:38,610 --> 00:20:43,410
og við gátum gert það áður, en það eru aðrir hlutir, eins og þetta ng-líkani,

320
00:20:43,410 --> 00:20:47,020
og taka þetta ng-endurtaka.

321
00:20:47,020 --> 00:20:51,520
Hvað finnst þér þetta er?

322
00:20:51,520 --> 00:20:54,390
Hér er óraðaða lista okkar frá áður.

323
00:20:54,390 --> 00:20:56,470
Við höfum ul tags,

324
00:20:56,470 --> 00:21:03,710
en ég flutningur alltaf þessi listi inni JavaScript kóða?

325
00:21:03,710 --> 00:21:09,280
Ég er ekki alltaf sérstaklega flutningur þessi listi.

326
00:21:09,280 --> 00:21:11,580
Hvernig virkar þetta?

327
00:21:11,580 --> 00:21:16,410
Jæja, hvernig Stækkun leikinn þetta er þetta er kallað hríðskotabyssa.

328
00:21:16,410 --> 00:21:22,760
Grundvallaratriðum segir þetta sem ég vil prenta þessa HTML

329
00:21:22,760 --> 00:21:26,240
fyrir hvert ToDo innan Todos fylking minn.

330
00:21:26,240 --> 00:21:31,850
Inni todos.jr er Todos array hérna,

331
00:21:31,850 --> 00:21:37,910
og þetta mun segja Stækkun fara í gegnum þessi fylking, og fyrir hvert frumefni sem þú sérð

332
00:21:37,910 --> 00:21:41,390
Ég vil að þú prenta þennan HTML kóða.

333
00:21:41,390 --> 00:21:44,620
Þetta er góður af ógnvekjandi vegna þess að ég get bara gert þetta

334
00:21:44,620 --> 00:21:47,760
án þess að þurfa að skrifa á fyrir lykkja,

335
00:21:47,760 --> 00:21:52,250
sem fyrir til-gera listanum sem var aðeins 30 línur af kóða

336
00:21:52,250 --> 00:21:54,700
mega ekki vera the raunverulegur hlutur,

337
00:21:54,700 --> 00:22:01,240
en ef þú hafa a stór verkefni, það gæti fengið mjög þægilegt.

338
00:22:01,240 --> 00:22:06,100
>> Þetta er ein lausn á þessu vandamáli, sem gerir HTML öflugri,

339
00:22:06,100 --> 00:22:10,820
og að leyfa okkur að halda JavaScript og HTML í sync.

340
00:22:10,820 --> 00:22:13,220
Það eru aðrar mögulegar leiðir til að leysa þetta vandamál,

341
00:22:13,220 --> 00:22:15,320
og ekki á hverjum ramma er þetta.

342
00:22:15,320 --> 00:22:17,720
Ekki á hverjum ramma virkar eftir þessum línum.

343
00:22:17,720 --> 00:22:19,490
Sumir ramma hafa mismunandi aðferðir,

344
00:22:19,490 --> 00:22:23,310
og þú getur fundið það sem þú njótir kóðun í einum ramma yfir öðrum.

345
00:22:23,310 --> 00:22:26,160
Við skulum líta á eitt.

346
00:22:26,160 --> 00:22:30,060
Þetta er til að gera lista dulmáli upp í ramma sem heitir burðarás.

347
00:22:30,060 --> 00:22:33,250
Ég ætla að fara í gegnum þetta fljótt.

348
00:22:33,250 --> 00:22:38,300
Ég ætla að byrja á HTML áður en við förum þangað.

349
00:22:38,300 --> 00:22:40,290
Eitt annað.

350
00:22:40,290 --> 00:22:43,950
Byrjar með HTML, og þú tekur eftir, HTML okkar er mjög svipuð

351
00:22:43,950 --> 00:22:50,000
hvað það var áður, svo ekki of mikið að frétta framan.

352
00:22:50,000 --> 00:22:55,410
En JS skrá okkar er svolítið öðruvísi.

353
00:22:55,410 --> 00:23:00,360
Burðarás konar hefur þessa hugmynd, eða byggir á þeirri hugmynd

354
00:23:00,360 --> 00:23:04,750
að mikið af því sem við gerum við, segja, JavaScript verkefni okkar

355
00:23:04,750 --> 00:23:09,110
er að hugsa um líkan og söfn þessara líkana.

356
00:23:09,110 --> 00:23:12,510
Þetta gæti verið, til dæmis, mynd og söfn af myndum,

357
00:23:12,510 --> 00:23:16,230
eða hugmyndin um vin og söfn af vinum.

358
00:23:16,230 --> 00:23:20,700
Og oftsinnis þegar við erum forritun JavaScript forrit

359
00:23:20,700 --> 00:23:25,340
við munum raða á tákna hugmynd af having a safn af vinum

360
00:23:25,340 --> 00:23:29,500
einhvern veginn í JavaScript, og burðarás gefur okkur þetta lag

361
00:23:29,500 --> 00:23:33,040
ofan á núverandi fylki Javascript og hlutir

362
00:23:33,040 --> 00:23:38,300
að gera öflugri hluti með að fleiri auðveldlega.

363
00:23:38,300 --> 00:23:41,870
>> Hér ég hef skilgreint til að gera líkan,

364
00:23:41,870 --> 00:23:44,630
og þú þarft ekki að hafa áhyggjur of mikill óður í setningafræði,

365
00:23:44,630 --> 00:23:48,730
en eftir því að það er einn af þeim eiginleikum þetta?

366
00:23:48,730 --> 00:23:53,190
Það hefur sjálfgefið sviði.

367
00:23:53,190 --> 00:23:56,640
Burðarás leyfa mér að tilgreina þegar the kylfa

368
00:23:56,640 --> 00:24:00,190
allar nýjar að-gera að ég búið til er að fara að hafa þessar vanskil.

369
00:24:00,190 --> 00:24:04,100
Nú get ég sérsniðið þetta, en tilvera fær til tilgreina vanskil

370
00:24:04,100 --> 00:24:07,220
er ágætur, og það er góður af þægilegt því þetta er ekki eitthvað sem er eins og

371
00:24:07,220 --> 00:24:10,430
felst í JavaScript, og nú er ég ekki að skýrt

372
00:24:10,430 --> 00:24:12,430
segja að Todos eru ófullnægjandi.

373
00:24:12,430 --> 00:24:19,190
Ég get sagt strax the kylfa sem Todos eru að fara að vera merkt sem ófullnægjandi.

374
00:24:19,190 --> 00:24:21,300
Tilkynning þá hvað er þetta?

375
00:24:21,300 --> 00:24:25,520
Nú hef ég að gera lista, og það er safn.

376
00:24:25,520 --> 00:24:30,960
Tilkynning á sviði sem tengist sem segir líkan TODO.

377
00:24:30,960 --> 00:24:33,390
Þetta er mín leið til að segja hryggur sem

378
00:24:33,390 --> 00:24:37,350
Ég ætla að vera að hugsa um söfnun þessara einstaklinga Todos.

379
00:24:37,350 --> 00:24:42,140
Þetta er í grundvallaratriðum fyrirmynd uppbygging fyrir áætlun mína.

380
00:24:42,140 --> 00:24:44,980
Hér hef ég þessa hugmynd um söfnun,

381
00:24:44,980 --> 00:24:48,960
og í rauninni þau atriði sem felast í því safni eru allir að fara að vera þessi Todos,

382
00:24:48,960 --> 00:24:51,910
og það er mjög eðlilegt í þessum skilningi

383
00:24:51,910 --> 00:24:59,890
því ég hef Todos, og ég hef þá í safn.

384
00:24:59,890 --> 00:25:02,940
>> Við skulum líta á aðeins meira af þessu.

385
00:25:02,940 --> 00:25:05,900
Hér er burðarás útsýni.

386
00:25:05,900 --> 00:25:08,890
The annar hlutur sem burðarás segir er að

387
00:25:08,890 --> 00:25:14,660
a einhver fjöldi af the líkan sem þú ert að hugsa um eða jafnvel söfn

388
00:25:14,660 --> 00:25:19,150
eru að fara að þurfa að hafa einhverja leið til að sýna.

389
00:25:19,150 --> 00:25:21,900
Við þurfum að gera það til að gera lista,

390
00:25:21,900 --> 00:25:25,460
og væri það ekki gott ef við gætum veitt fyrir hverja gerð

391
00:25:25,460 --> 00:25:28,390
eða tengja við hverja gerð þessa skoðun

392
00:25:28,390 --> 00:25:34,020
sem gerir okkur kleift að ég giska tengja tvö saman?

393
00:25:34,020 --> 00:25:38,320
En áður en við þurftum að nota fyrir lykkju sem myndi hlaupa í gegnum

394
00:25:38,320 --> 00:25:41,130
hvert TODO á listanum okkar og þá prenta það út hér

395
00:25:41,130 --> 00:25:44,650
við getum í rauninni tengja það við þessa tegund.

396
00:25:44,650 --> 00:25:47,550
Þetta er til að gera sýn.

397
00:25:47,550 --> 00:25:50,550
Þetta er í tengslum við todo við fundum fyrr.

398
00:25:50,550 --> 00:25:54,940
Nú hvert TODO er displayable eða renderable

399
00:25:54,940 --> 00:25:56,960
með þessu til að gera mynd.

400
00:25:56,960 --> 00:25:59,440
Tilkynning sumir sviðum.

401
00:25:59,440 --> 00:26:05,880
Hvað finnst þér þetta tagName er tagName: lí?

402
00:26:05,880 --> 00:26:09,790
Muna frá áður þegar við vildum að inna af TODO

403
00:26:09,790 --> 00:26:16,700
yrðum við að skýrt para Todos okkar með þessum li tag.

404
00:26:16,700 --> 00:26:21,080
Nú erum við að segja að þar sem þetta TODO er að fara að lifa

405
00:26:21,080 --> 00:26:25,250
er að fara að vera inni af li merkinu.

406
00:26:25,250 --> 00:26:31,440
Og nú erum við einnig tengja atburðum með Todos okkar.

407
00:26:31,440 --> 00:26:34,320
>> Sérhver TODO hefur þetta einn atburð.

408
00:26:34,320 --> 00:26:38,480
Ef þú smellir nokkurn veginn skipta hnappur, það er það sem ég er að segja það,

409
00:26:38,480 --> 00:26:43,080
þá í rauninni merkja TODO sem andstæða þess sem það var áður

410
00:26:43,080 --> 00:26:45,890
og svo aftur láta forritið.

411
00:26:45,890 --> 00:26:47,810
Þetta er góður af líkur til kóðann áður.

412
00:26:47,810 --> 00:26:50,730
Manstu þegar við merkt það sem annaðhvort hið gagnstæða eða-

413
00:26:50,730 --> 00:26:52,410
og þá erum við aftur veitt það.

414
00:26:52,410 --> 00:26:57,750
En taka nú þennan atburð notað til að vera eitthvað sem var í HTML.

415
00:26:57,750 --> 00:26:59,640
Það sat þarna.

416
00:26:59,640 --> 00:27:01,410
Hnappinn hafði á smell.

417
00:27:01,410 --> 00:27:05,310
Þegar þú smellir á hnappinn, er það góður af efni til

418
00:27:05,310 --> 00:27:07,210
sett upp sem TODO að vera ófullnægjandi.

419
00:27:07,210 --> 00:27:11,180
Hér höfum við tengt þeim atburði að smella þessi hnapp

420
00:27:11,180 --> 00:27:15,830
og snúa hvort sem það er kveikt eða slökkt með þessari skoðun.

421
00:27:15,830 --> 00:27:20,480
>> Þetta er ágætur vegur að setja upp þennan atburð þannig að það er mjög vel bundin

422
00:27:20,480 --> 00:27:26,980
þessari skoðun, og svo taka þetta einn meira.

423
00:27:26,980 --> 00:27:31,050
Ég hef þetta Render aðferð, og við þurfum ekki að fara í gegnum upplýsingar.

424
00:27:31,050 --> 00:27:33,650
Það er góður af líkur til það sem við áttum áður,

425
00:27:33,650 --> 00:27:36,070
en eftir ég ætla ekki lykkja í gegnum neitt.

426
00:27:36,070 --> 00:27:40,700
Ég ætla ekki að prenta þær ul merki sem er tegund af að segja að ég ætla að prenta alla þá þætti.

427
00:27:40,700 --> 00:27:46,610
Ég ætla að veita virkni til bræðslu þennan eina til að gera hlut.

428
00:27:46,610 --> 00:27:49,400
Þetta er mjög öflug hugtak því í grundvallaratriðum

429
00:27:49,400 --> 00:27:53,600
til að gera lista okkar samanstendur af öllum þessum Todos, og ef við getum í rauninni skilgreina

430
00:27:53,600 --> 00:27:56,890
leið til að láta einn af þeim Todos

431
00:27:56,890 --> 00:28:04,230
þá getum við hafa öflugt burðarás okkar í sjálfu veita öllum Todos

432
00:28:04,230 --> 00:28:07,760
með því að hringja Render aðferð á einstökum Todos.

433
00:28:07,760 --> 00:28:14,180
Þetta er hugtak sem er gagnlegt hér.

434
00:28:14,180 --> 00:28:18,160
Nú er góð spurning til að spyrja hvernig er þetta forrit að setja saman?

435
00:28:18,160 --> 00:28:21,200
Þar sem við höfum getu til að inna af hendi eitt TODO,

436
00:28:21,200 --> 00:28:23,860
en hvernig fáum við þá hugmynd margra Todos?

437
00:28:23,860 --> 00:28:25,100
>> Skulum taka a líta á það.

438
00:28:25,100 --> 00:28:27,100
Þetta er síðasta hluti.

439
00:28:27,100 --> 00:28:29,740
Takið við höfum til-gera listi skjáinn hér,

440
00:28:29,740 --> 00:28:34,440
og eftir það er líka útsýni.

441
00:28:34,440 --> 00:28:36,970
Og til að fara yfir nokkra hluti,

442
00:28:36,970 --> 00:28:45,280
þetta frumstilla aðferð verður kallað þegar við búum fyrst þetta til að gera lista.

443
00:28:45,280 --> 00:28:52,630
Eins og þú geta sjá, það er eins og að búa til til að gera lista og tengja hana við þessa skoðun.

444
00:28:52,630 --> 00:28:57,860
Og svo ég bætt aðgerðir hér svo í rauninni þegar þú bæta hlut-

445
00:28:57,860 --> 00:29:01,440
þetta er svipað og addItem aðferð við sáum áður-

446
00:29:01,440 --> 00:29:07,430
Ég ætla að búa til nýja TODO hlut, og eftir ég ætla í raun að hringja

447
00:29:07,430 --> 00:29:13,080
þetta nýja TODO aðferð, þannig að þetta er veitt af burðarás,

448
00:29:13,080 --> 00:29:16,010
og ég get fara í eignir mínar hér.

449
00:29:16,010 --> 00:29:23,710
Og nú hvert TODO sem ég bý til að nota þetta mun fá þessi virkni sem við sáum áður.

450
00:29:23,710 --> 00:29:28,140
Tilkynning Ég er að hreinsa út í textareitinn áður-lítið smáatriði-

451
00:29:28,140 --> 00:29:32,900
og þá er ég að bæta þetta safn.

452
00:29:32,900 --> 00:29:37,630
>> Þetta nánast virðist skrýtið því áður en við þurftum bara að gera það todos.push,

453
00:29:37,630 --> 00:29:43,310
og þá vorum við búin, og þetta kann að virðast flóknari með þessu verkefni,

454
00:29:43,310 --> 00:29:46,980
og þú getur fundið það burðarás eða jafnvel Stækkun eða aðra umgjörð

455
00:29:46,980 --> 00:29:50,790
er ekki sú tiltekna verkefni, en ég held að það er mikilvægt að hugsa um

456
00:29:50,790 --> 00:29:54,100
hvað þýðir þetta á stærri skala fyrir stærri verkefni,

457
00:29:54,100 --> 00:29:56,610
því ef við hefðum stærra verkefni þar sem við vorum hönd

458
00:29:56,610 --> 00:30:00,860
sumir virkilega flókið safn, eitthvað dýpra en bara til að gera lista,

459
00:30:00,860 --> 00:30:04,490
skulum segja vinum lista eða eitthvað svoleiðis, þetta gæti komið sér vel

460
00:30:04,490 --> 00:30:09,620
vegna þess að við gætum skipuleggja kóðann okkar á mjög þægilegan hátt,

461
00:30:09,620 --> 00:30:12,550
á þann hátt sem myndi gera það auðveldara fyrir einhvern annan

462
00:30:12,550 --> 00:30:16,820
sem vildu taka upp verkefni að byggja á.

463
00:30:16,820 --> 00:30:21,450
Þú getur séð að þetta gefur mikla uppbyggingu.

464
00:30:21,450 --> 00:30:26,580
Og þá er ég að kalla bakið á þessari addItem.

465
00:30:26,580 --> 00:30:31,050
Láta, eins og þú sérð, og þú þarft ekki að grípa þetta fullur setningafræði,

466
00:30:31,050 --> 00:30:37,790
en í grundvallaratriðum fyrir hverja gerð það er að fara að hringja í einstaka Render aðferð.

467
00:30:37,790 --> 00:30:41,500
Það er tegund af hvar þetta kemur frá.

468
00:30:41,500 --> 00:30:44,140
Við skulum bara tilgreina hvernig á að gera einstaka Todos,

469
00:30:44,140 --> 00:30:47,310
og þá skulum límið þá saman sem heild.

470
00:30:47,310 --> 00:30:49,810
En þetta veitir möguleika á abstrakt,

471
00:30:49,810 --> 00:30:55,470
vegna þess að ég gæti breytt því hvernig ég ákveð að láta einstaka Todos,

472
00:30:55,470 --> 00:30:57,940
og ég þyrfti ekki að breyta einhverju af þessu númeri.

473
00:30:57,940 --> 00:31:00,700
Það er góður af kaldur.

474
00:31:00,700 --> 00:31:08,540
>> Hefur einhver hefur einhverjar spurningar um JavaScript ramma?

475
00:31:08,540 --> 00:31:14,310
[Námsmaður inaudible spurning]

476
00:31:14,310 --> 00:31:16,050
Jæja, það er frábær spurning.

477
00:31:16,050 --> 00:31:19,080
Spurningin var hvernig var ég að innihalda ramma?

478
00:31:19,080 --> 00:31:22,970
Flest Javascript ramma eru í rauninni bara JS skrár

479
00:31:22,970 --> 00:31:25,740
að þú getur að minnsta the toppur af kóðanum þínum.

480
00:31:25,740 --> 00:31:29,830
Tilkynning í höfuðið hluta HTML ég hef öll þessi handrit tags,

481
00:31:29,830 --> 00:31:34,250
og endanleg handrit tag er númer sem við höfum skrifað.

482
00:31:34,250 --> 00:31:38,820
Og þá 3 ramma númerin eru bara líka handrit tags.

483
00:31:38,820 --> 00:31:42,110
Ég er þar þá frá því sem er kallað CDN,

484
00:31:42,110 --> 00:31:46,200
sem gerir mig að fá það frá einhverjum öðrum á þessum tímapunkti

485
00:31:46,200 --> 00:31:57,930
en sérhver rammi hefur þetta, þú getur nokkurn veginn að finna efni

486
00:31:57,930 --> 00:32:03,540
fyrir tiltekinn JavaScript bókasafn í boði á sumum CDN eða eitthvað svoleiðis,

487
00:32:03,540 --> 00:32:05,570
og þá er hægt að fela þetta handrit tags.

488
00:32:05,570 --> 00:32:07,600
Er að skynsamleg?

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

490
00:32:09,500 --> 00:32:11,730
>> Þeir eru 2 mismunandi aðferðir.

491
00:32:11,730 --> 00:32:14,640
Þeir eru ekki aðeins leiðir til að leysa þetta vandamál.

492
00:32:14,640 --> 00:32:17,080
Það eru til margar mismunandi hlutir sem

493
00:32:17,080 --> 00:32:19,490
einhver gæti gert, og það eru margir ramma þarna úti.

494
00:32:19,490 --> 00:32:23,300
Hyrndur og burðarás segja ekki alla söguna.

495
00:32:23,300 --> 00:32:26,370
Gangi þér vel með lokaverkefnið þitt og þakka þér kærlega.

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