1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [JavaScript Framework:? Bakit at Paano]

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

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

4
00:00:06,960 --> 00:00:10,630
>> Hi, lahat ng tao. Maligayang pagdating sa seminar Framework JavaScript.

5
00:00:10,630 --> 00:00:14,910
Ang pangalan ko ay Kevin, at ngayon pupuntahan ko ay pakikipag-usap tungkol sa JavaScript Framework,

6
00:00:14,910 --> 00:00:20,400
at ang layunin ng seminar na ito ay hindi upang makakuha ng sa iyo sa, sabihin nating, master isang partikular na balangkas per se

7
00:00:20,400 --> 00:00:23,810
ngunit upang bigyan ka ng malawak na panimula sa isang pares ng mga Framework

8
00:00:23,810 --> 00:00:27,150
at ipakita kung bakit nais namin kailanman nais na gumamit ng isang framework.

9
00:00:27,150 --> 00:00:31,060
>> Bago mo gawin ko na, makikita ko magbigay ng isang maliit na background sa JavaScript,

10
00:00:31,060 --> 00:00:33,750
at pagkatapos ay gagamitin namin dalhin ito mula doon.

11
00:00:33,750 --> 00:00:36,270
Kami ay pagpunta sa magsimula sa pamamagitan ng pagpapatupad ng isang sa-do list.

12
00:00:36,270 --> 00:00:39,330
Narito ang aming listahan ng gawain para sa araw na ito.

13
00:00:39,330 --> 00:00:41,990
Ito ay uri ng nakakatawa. Mayroon kaming upang ipatupad ang to-do list sa JavaScript.

14
00:00:41,990 --> 00:00:45,110
Ito ay kung ano ang pagpunta sa hitsura, sa gayon na ang aming unang layunin.

15
00:00:45,110 --> 00:00:47,160
Hindi namin pagpunta sa gumamit ng isang framework upang gawin iyon.

16
00:00:47,160 --> 00:00:51,930
Kami ay pagpunta sa code ng JavaScript at makuha ang to-do list upang gumana.

17
00:00:51,930 --> 00:00:54,370
Pagkatapos kami ay pagpunta upang mapabuti ang disenyo nang hindi gumagamit ng framework.

18
00:00:54,370 --> 00:00:57,190
Kami ay pagpunta upang talakayin ang iba't-ibang mga bagay na maaari naming gawin sa pamamagitan lamang ng JavaScript mag-isa

19
00:00:57,190 --> 00:01:00,650
upang gumawa ng aming to-do ilista ang kaunti pa rin dinisenyo.

20
00:01:00,650 --> 00:01:02,490
Pagkatapos kami ay pagpunta upang ihagis sa ilang mga jQuery,

21
00:01:02,490 --> 00:01:05,030
at pagkatapos ay kami ay pagpunta upang tumingin sa parehong sa-do list,

22
00:01:05,030 --> 00:01:07,170
lamang ipinapatupad sa magkakaibang Framework, at kami ay talakayin

23
00:01:07,170 --> 00:01:09,280
 mga kalamangan at kahinaan sa kahabaan ng paraan.

24
00:01:09,280 --> 00:01:12,040
>> Natin simulan ang pagpapatupad ng na to-do list.

25
00:01:12,040 --> 00:01:14,270
Sabihin nating kami naibigay na HTML na ito.

26
00:01:14,270 --> 00:01:16,620
Pupunta ako sa gumawa ito ng kaunti mas maliit.

27
00:01:16,620 --> 00:01:19,300
Tulad ng iyong nakikita, mayroon akong isang maliit na header na nagsasabing TODO

28
00:01:19,300 --> 00:01:21,740
at isang maliit na kahon kung saan maaari kong ipasok ang isang paglalarawan ng isang todo

29
00:01:21,740 --> 00:01:26,990
at pagkatapos ng isang bagong pindutan na item, kaya natin subukang magpasok ng isang bagong todo sa listahang ito.

30
00:01:26,990 --> 00:01:31,000
Magbigay ng isang seminar JavaScript Framework,

31
00:01:31,000 --> 00:01:33,090
at ako ay upang pindutin ang bagong item.

32
00:01:33,090 --> 00:01:35,730
Nakukuha ko ito JavaScript alerto na nagsasabing ipatupad sa akin.

33
00:01:35,730 --> 00:01:37,560
Mayroon kaming upang ipatupad ito.

34
00:01:37,560 --> 00:01:41,490
Ating tingnan ang code para sa mga ito, ang parehong HTML at mga JavaScript.

35
00:01:41,490 --> 00:01:43,260
Narito ang aming HTML.

36
00:01:43,260 --> 00:01:45,500
Tulad ng iyong nakikita dito, narito ang aming maliit Todos header.

37
00:01:45,500 --> 00:01:47,620
Iyon ay matapang na bagay sa itaas,

38
00:01:47,620 --> 00:01:50,690
at pagkatapos kami ay may sa input na kahon na may placeholder,

39
00:01:50,690 --> 00:01:59,460
at pagkatapos ay mayroong isang tiyak na katangian ng pindutang ito na tawag sa function na ito addTodo.

40
00:01:59,460 --> 00:02:05,460
Kahit sino ba ang nais na hulaan kung ano ang na-click sa ay signifying?

41
00:02:05,460 --> 00:02:07,390
[Mag-aaral hindi marinig tugon]

42
00:02:07,390 --> 00:02:09,289
Magandang, ang sa click ay uri ng tulad ng isang kaganapan,

43
00:02:09,289 --> 00:02:12,120
tulad ng pag-click sa mouse lamang ang isang kaganapan, at kung ano ang ginagawa namin

44
00:02:12,120 --> 00:02:16,890
ay kami ay tinali ang kaganapan ng pag-click ang pindutang ito upang isakatuparan na function.

45
00:02:16,890 --> 00:02:21,700
AddTodo ay ang kaganapang ito handler para sa pag-click na pindutan.

46
00:02:21,700 --> 00:02:25,010
>> Tulad ng iyong nakikita, kapag ako ay i-click ang pindutan ng bagong item

47
00:02:25,010 --> 00:02:29,940
mga kaganapan sa pag-click ay makakakuha ng fired, at pag-andar na ito ay makakakuha ng tinatawag na.

48
00:02:29,940 --> 00:02:33,170
Tignan natin ang function.

49
00:02:33,170 --> 00:02:36,260
Tulad ng iyong nakikita, narito ang aking code ng JavaScript sa ngayon.

50
00:02:36,260 --> 00:02:41,280
Ano Mayroon akong sa tuktok ay isang pandaigdigang kaayusan ng data para sa aking to-do list.

51
00:02:41,280 --> 00:02:44,060
Mukhang isang array. Ito ay lamang ng isang walang laman na array.

52
00:02:44,060 --> 00:02:47,100
At pagkatapos ay mayroon akong mga addTodo function na nakita natin mas maaga,

53
00:02:47,100 --> 00:02:50,740
at ang tanging linya ng code sa doon ay ang alertong ito.

54
00:02:50,740 --> 00:02:55,730
Ito inaalertuhan ipatupad sa akin, at pagkatapos Mayroon akong 2 mga gawain sa kamay.

55
00:02:55,730 --> 00:02:58,790
Mayroon akong upang magdagdag ng todo sa global na istraktura ng data,

56
00:02:58,790 --> 00:03:01,860
at pagkatapos ay gusto kong maglabas ang sa listahan ng gagawin.

57
00:03:01,860 --> 00:03:06,360
Wala masyadong Fancy pa lang, ngunit JavaScript maaari kang maging pamilyar sa,

58
00:03:06,360 --> 00:03:12,370
kaya pupuntahan ko pumunta mabagal at suriin ang mga batayan ng JavaScript sa na paraan.

59
00:03:12,370 --> 00:03:15,490
>> Sabihin bigyan ito ng isang shot.

60
00:03:15,490 --> 00:03:21,130
Ipagpalagay natin na ang gumagamit ay nagpasok ng isang bagay sa kahon na ito.

61
00:03:21,130 --> 00:03:23,360
Ko lang ang nai-type ng isang bagay in dito, teksto.

62
00:03:23,360 --> 00:03:27,620
Paano ko-uri-uriin ng pag-access na teksto sa pamamagitan ng JavaScript?

63
00:03:27,620 --> 00:03:32,500
Tandaan na ang JavaScript, isa sa mga pangunahing tampok ay na ito ay nagbibigay sa amin

64
00:03:32,500 --> 00:03:34,670
ito program access sa DOM.

65
00:03:34,670 --> 00:03:40,670
Ito ay nagbibigay-daan sa amin upang ma-access ang mga elemento at ang kanilang mga katangian na ito ng aktwal na HTML.

66
00:03:40,670 --> 00:03:43,430
Ang paraang ginagawa namin na may hubad buto JavaScript

67
00:03:43,430 --> 00:03:51,360
ay maaari naming talagang gamitin ang isang pagpapaandar na JavaScript sa tinatawag getElementByID.

68
00:03:51,360 --> 00:03:55,140
Gusto kong mag-imbak ang teksto na nai-type doon sa ilang mga variable,

69
00:03:55,140 --> 00:03:58,350
kaya ako pagpunta sa sabihin ng isang bagong variable na tinatawag na new_todo,

70
00:03:58,350 --> 00:04:01,980
at ako pagpunta upang makakuha ng na elemento.

71
00:04:01,980 --> 00:04:06,330
Ito ay isang function,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
At ngayon ako nakakakuha ng isang elemento sa pamamagitan ng ID, kaya kailangan ko ang mga ID ng na kahon ng teksto,

73
00:04:11,580 --> 00:04:15,860
kaya Ibinigay ko ito ang ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Iyon ay kung paano ako pupunta upang makakuha ng isang elemento.

75
00:04:18,399 --> 00:04:23,880
Iyan ang aking argumento sa function na ito, upang tukuyin kung aling mga ID upang makakuha ng.

76
00:04:23,880 --> 00:04:28,110
At kaya na ang isang elemento sa HTML, at ito ay may katangian.

77
00:04:28,110 --> 00:04:30,650
Nakita mo ang mga ito. Ang mga ito ay mga katangian.

78
00:04:30,650 --> 00:04:37,090
Ang mga katangian ng mga elemento ng teksto na nag-iimbak ng pag-input ng user ay tinatawag na halaga.

79
00:04:37,090 --> 00:04:40,860
I-save ang halaga ng na text box sa ngayon ito na variable na tinatawag na new_todo.

80
00:04:40,860 --> 00:04:45,040
Ngayon Mayroon akong program access sa variable na ito, na kung saan ay uri ng cool na

81
00:04:45,040 --> 00:04:49,200
dahil ngayon kung ano ang maaari kong gawin ay maaari kong idagdag ito sa aking to-do list.

82
00:04:49,200 --> 00:04:52,870
>> Ang paraan nais naming gawin ito sa JavaScript-at huwag mag-alala kung hindi ka pamilyar sa ito,

83
00:04:52,870 --> 00:04:57,010
ngunit lamang ng pagpunta sa pamamagitan nito ay todos.push

84
00:04:57,010 --> 00:05:00,130
dahil iyon ang pangalan ng aking global data istraktura up dito,

85
00:05:00,130 --> 00:05:04,450
at ako pagpunta sa itulak new_todo.

86
00:05:04,450 --> 00:05:09,120
Ito ay mahalaga dahil ngayon ko idinagdag ito sa aking JavaScript

87
00:05:09,120 --> 00:05:11,280
representasyon ng na upang listahan ng gagawin.

88
00:05:11,280 --> 00:05:15,170
Ngunit ngayon kung paano ako makakakuha ng ito pabalik sa HTML?

89
00:05:15,170 --> 00:05:18,560
Mayroon akong upang makahanap ng isang paraan upang ayusin ng itulak ito pabalik.

90
00:05:18,560 --> 00:05:21,830
Sa ibang salita, ako uri ng mayroon upang gumuhit ito.

91
00:05:21,830 --> 00:05:26,060
Ano kami ay pagpunta sa gawin ay kami ay pagpunta sa gumuhit ang to-do list.

92
00:05:26,060 --> 00:05:29,270
Kailangan kong i-update ang iba pang mga HTML sa pahinang iyon,

93
00:05:29,270 --> 00:05:32,040
at bilang maaari mong makita, ko na umalis sa maliit na lalagyan dito,

94
00:05:32,040 --> 00:05:36,840
ito divider ng pahina kung saan ang ID ay todos,

95
00:05:36,840 --> 00:05:40,870
at ako pagpunta sa ilagay ang to-do list doon.

96
00:05:40,870 --> 00:05:47,240
Unang pupuntahan ko i-clear out ito dahil, sabihin nating, nagkaroon ng lumang to-listahan ng gagawin doon.

97
00:05:47,240 --> 00:05:49,560
Nakakakuha ako ng that elemento sa pamamagitan ng ID muli,

98
00:05:49,560 --> 00:05:54,530
at ako sa pag-access ng panloob na HTML na iyon elemento,

99
00:05:54,530 --> 00:05:58,010
at pupuntahan ko i-clear iyon.

100
00:05:58,010 --> 00:06:05,510
Kung iniwanan namin ang code na ito bilang ay, gusto namin makita ang isang blangko wala doon,

101
00:06:05,510 --> 00:06:10,410
at ngayon ay nais ko upang simulan ang pag-render ng aking bagong to-do list.

102
00:06:10,410 --> 00:06:12,870
Isa lamang ako ng pagpunta sa lipulin ang aking to-do list.

103
00:06:12,870 --> 00:06:18,180
>> Ngayon ang panloob na HTML sa loob ng naturang div todos ay lubos na malinaw,

104
00:06:18,180 --> 00:06:20,060
at ngayon ay kailangan ko upang magsimulang magdagdag ng aking listahan.

105
00:06:20,060 --> 00:06:23,890
Ang unang bagay na gusto kong idagdag pabalik ay ang unordered tag listahan,

106
00:06:23,890 --> 00:06:33,890
kung saan talaga Nagpapahiwatig na ito ay ang simula ng isang unordered listahan.

107
00:06:33,890 --> 00:06:39,770
Ngayon para sa bawat elemento sa aking todos array gusto kong i-print ito sa loob ng naturang HTML.

108
00:06:39,770 --> 00:06:43,710
Gusto kong isama ito sa ibaba ng listahang ito.

109
00:06:43,710 --> 00:06:49,040
Tulad ng sa C, ang maaari kong gamitin para sa isang loop, at ako pagpunta sa magsimula sa simula ng aking listahan

110
00:06:49,040 --> 00:06:54,140
elemento sa 0, at ako pagpunta sa pumunta sa lahat ng mga paraan upang ang haba ng listahan.

111
00:06:54,140 --> 00:07:01,100
Maaari naming talagang makakuha ang haba ng isang array sa JavaScript gamit ang haba ng ari-arian.

112
00:07:01,100 --> 00:07:03,420
Isa lamang ako ng pagpunta sa gawin ang isang bagay na halos kapareho sa loob ng dito

113
00:07:03,420 --> 00:07:05,600
upang i-print out that elemento.

114
00:07:05,600 --> 00:07:12,970
Maaari ko bang i-access muli ang todos div, ang panloob na HTML ari-arian ng iyon,

115
00:07:12,970 --> 00:07:17,560
at pupuntahan ko idagdag ito sa mga bagong item sa listahan, at na pupuntahan ay napapalibutan ng

116
00:07:17,560 --> 00:07:25,390
ito li tag, at ako pagpunta sa may pagdugtungin ang + operator,

117
00:07:25,390 --> 00:07:28,040
at iyon ang ith elemento ng aking todos array,

118
00:07:28,040 --> 00:07:32,380
at pagkatapos ay ako pagpunta upang isara ang tag na iyon.

119
00:07:32,380 --> 00:07:36,240
Ngayon para sa bawat elemento magdaragdag kami ng bagong entry listahan.

120
00:07:36,240 --> 00:07:48,700
At pagkatapos ay ang lahat ng namin talagang kailangan lang gawin ay isara off sa tag na iyon.

121
00:07:48,700 --> 00:07:52,820
Ko lang ang kailangan upang isara off na unordered listahan tag.

122
00:07:52,820 --> 00:07:55,490
>> Huwag kang makakuha ng isang pakiramdam para sa kung paano na gumagana?

123
00:07:55,490 --> 00:07:57,700
Binubuksan nito ang buong listahan.

124
00:07:57,700 --> 00:08:01,080
Ito ay nagdadagdag ng mga indibidwal na mga elemento mula sa todos listahan sa listahan,

125
00:08:01,080 --> 00:08:05,470
at pagkatapos that isinasara ang buong listahan, at ito ay ang aking addTodo function.

126
00:08:05,470 --> 00:08:09,590
Ko talaga magsimula sa pamamagitan ng pagkuha ng todo mula sa kahon ng teksto.

127
00:08:09,590 --> 00:08:18,950
Idagdag ko na sa array todos, at pagkatapos kong muling i-render ang to-do list.

128
00:08:18,950 --> 00:08:21,520
Ngayon ay maaari ba akong magdagdag ng mga item sa aking listahan.

129
00:08:21,520 --> 00:08:24,620
Ito ay uri ng kapana-panabik dahil sa loob lamang ng ilang linya ng code

130
00:08:24,620 --> 00:08:28,240
talaga gumawa kami ng isang to-do list kung saan maaari kaming magdagdag ng mga item.

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

132
00:08:30,050 --> 00:08:34,480
Iyon uri ng isang pangunahing panimula sa JavaScript.

133
00:08:34,480 --> 00:08:36,179
Huwag mag-alala masyadong maraming tungkol sa syntax para sa ngayon,

134
00:08:36,179 --> 00:08:38,130
ngunit isipin ang tungkol ito conceptually.

135
00:08:38,130 --> 00:08:40,539
Nagkaroon kami ng ilang mga HTML.

136
00:08:40,539 --> 00:08:45,310
Nagkaroon kami ng isang kahon ng teksto sa pahina na talaga pinapayagan ang mga user sa input ng isang to-do item upang idagdag.

137
00:08:45,310 --> 00:08:49,210
At pagkatapos ay aming ginamit ang JavaScript upang makuha that todo mula sa kahon ng teksto.

138
00:08:49,210 --> 00:08:52,830
Kami that nakaimbak sa loob ng isang array JavaScript, na kung saan ay isa lamang tulad ng

139
00:08:52,830 --> 00:08:56,010
ang aming program na representasyon ng naturang to-listahan ng gagawin,

140
00:08:56,010 --> 00:08:59,060
at pagkatapos namin ang naka-print na ito.

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

142
00:09:02,690 --> 00:09:07,620
>> Ito ay uri ng cool na, ngunit kung paano namin maaaring tumagal ito nang higit pa?

143
00:09:07,620 --> 00:09:11,350
Well, bilang maaari mong makita, ito ay hindi tulad ng isang kumpletong i-do list.

144
00:09:11,350 --> 00:09:15,100
Halimbawa, hindi ko maaaring magmarka ng anumang ng mga item na ito bilang hindi kumpleto,

145
00:09:15,100 --> 00:09:19,920
kung gusto Nais kong reprioritize ang mga item o magtanggal ng mga item.

146
00:09:19,920 --> 00:09:23,150
Ito ay okay, ngunit maaari naming tumagal ito nang higit pa.

147
00:09:23,150 --> 00:09:29,280
Hindi ako pagpunta sa makipag-usap ng masyadong maraming tungkol sa pagdaragdag ng dagdag na mga tampok,

148
00:09:29,280 --> 00:09:32,800
ngunit maaari kaming magsagawa ng karagdagang that.

149
00:09:32,800 --> 00:09:35,970
Tayo'y makipag-usap tungkol sa pagdagdag ng isa pang tampok na ito upang i-do list,

150
00:09:35,970 --> 00:09:40,370
na kung saan ay pagpunta sa ma-ma-check sa isang indibidwal na gawin item

151
00:09:40,370 --> 00:09:44,780
at ito ay tumawid out, kaya talaga sinasabi ko nagawa mo na ito.

152
00:09:44,780 --> 00:09:50,240
Tingnan natin ang ilang mga code na maaaring tuparin iyon.

153
00:09:50,240 --> 00:09:52,740
Pansinin kung ano ko na tapos sa tuktok ay Idinagdag ko na

154
00:09:52,740 --> 00:09:57,620
isang bagong pandaigdigang array na tinatawag na kumpleto.

155
00:09:57,620 --> 00:10:02,890
Talaga gumagamit ako ng ito upang mag-imbak kung ang mga item sa sa-do list

156
00:10:02,890 --> 00:10:06,560
ay kumpleto o hindi.

157
00:10:06,560 --> 00:10:08,470
Ito ay isang paraan upang gawin ito.

158
00:10:08,470 --> 00:10:13,750
Kung tumingin ako sa pagpapatupad ng mga ito, ang display,

159
00:10:13,750 --> 00:10:21,120
talaga kung ipasok ko ng todo at pindutin ko ito toggle pindutan

160
00:10:21,120 --> 00:10:25,040
ito tumatawid out, nang sa gayon ang bawat item sa listahan na ito ay alinman sa isang kumpletong

161
00:10:25,040 --> 00:10:31,050
o hindi kumpletong estado, at gumagamit ako ng isa pang array na kumakatawan na.

162
00:10:31,050 --> 00:10:33,730
>> Talaga para sa bawat todo sa ganoong array todos

163
00:10:33,730 --> 00:10:37,110
mayroong isang item sa kumpletong array that talaga ay nagpapahiwatig

164
00:10:37,110 --> 00:10:39,060
kung iyon ay kumpleto o hindi.

165
00:10:39,060 --> 00:10:41,640
Nagkaroon na ako gumawa medyo minimal na mga pagbabago sa code na ito,

166
00:10:41,640 --> 00:10:44,470
kaya narito ang aming addTodo function.

167
00:10:44,470 --> 00:10:48,530
Pansinin na dito ako itulak ito papunta sa array,

168
00:10:48,530 --> 00:10:51,300
at pagkatapos ay ako itulak ang isang 0 na iyon kumpletong array,

169
00:10:51,300 --> 00:10:57,090
talaga sa may parallel na ang mga bagong push todo na sabihing

170
00:10:57,090 --> 00:11:00,430
Ako pagdaragdag ng item na ito, at ito ay isinama sa mga halagang ito,

171
00:11:00,430 --> 00:11:02,810
na nangangahulugan na ito ay hindi kumpleto.

172
00:11:02,810 --> 00:11:04,970
At pagkatapos ay ako ang redrawing sa-do list.

173
00:11:04,970 --> 00:11:09,220
Ngayon, mapapansin Idinagdag ko na ito drawTodoList function.

174
00:11:09,220 --> 00:11:11,760
Ito ay tumatagal ng maraming mga code nagkaroon kami dati,

175
00:11:11,760 --> 00:11:15,320
talaga nililimas ang mga kahon at pagkatapos ay humahatak sa bagong to-do list.

176
00:11:15,320 --> 00:11:19,620
Ngunit mapapansin na nasa loob ng mga ito para sa loop ang ginagawa namin ng kaunti pa sa ngayon.

177
00:11:19,620 --> 00:11:25,000
Talaga namin ang pagsuri kung ang item naaayon sa ith todo dito

178
00:11:25,000 --> 00:11:30,220
Kumpleto na, at kami ay kumikilos naiiba sa mga pangyayari 2.

179
00:11:30,220 --> 00:11:32,790
Kung ito ay kumpleto, kami ay idinadagdag ang del tag,

180
00:11:32,790 --> 00:11:35,360
na kung saan ay isa lamang sa mga paraan na maaari mong makuha na strike sa pamamagitan ng epekto

181
00:11:35,360 --> 00:11:38,190
tumatawid out ang to-do list kung ito ay kumpleto,

182
00:11:38,190 --> 00:11:42,200
at kung hindi, hindi kami kasama nito.

183
00:11:42,200 --> 00:11:45,030
At upang ang uri ng tumatagal ng pag-aalaga ng mga iyon,

184
00:11:45,030 --> 00:11:49,140
>> at iyan ay isang paraan upang makamit ito.

185
00:11:49,140 --> 00:11:53,420
At pagkatapos ay mapapansin kapag ang gumagamit-click ang isa sa mga

186
00:11:53,420 --> 00:11:56,780
magpalipat-lipat namin ang pagkumpleto ng katayuan nito.

187
00:11:56,780 --> 00:12:02,170
Kapag nag-click ang gumagamit, kami baligtarin kung ito ay nakumpleto o hindi,

188
00:12:02,170 --> 00:12:04,540
at pagkatapos ay gagamitin namin redraw ito.

189
00:12:04,540 --> 00:12:06,190
Ang ganitong uri ng mga gawa.

190
00:12:06,190 --> 00:12:09,860
Mayroon kaming mga function na isakatuparan ang kanilang sariling mga gawain,

191
00:12:09,860 --> 00:12:11,730
at ito ay okay.

192
00:12:11,730 --> 00:12:14,110
Mayroon bang anumang bagay na maaari naming gawin mas mahusay na tungkol dito, bagaman?

193
00:12:14,110 --> 00:12:18,700
Pansinin mayroon kaming mga 2 global array.

194
00:12:18,700 --> 00:12:23,550
Kung ito ay C, at nagkaroon kami 2 array na uri ng kinatawan

195
00:12:23,550 --> 00:12:25,800
data na na uri ng mga may kaugnayan sa ilang mga paraan

196
00:12:25,800 --> 00:12:30,140
kung ano ang gusto naming gamitin sa C upang pagsamahin ang mga patlang 2

197
00:12:30,140 --> 00:12:35,420
sa isang bagay na pinapalooban ang parehong piraso ng impormasyon?

198
00:12:35,420 --> 00:12:37,600
Kahit Sino gustong gumawa ng suhestiyon?

199
00:12:37,600 --> 00:12:39,450
[Mag-aaral hindi marinig tugon]

200
00:12:39,450 --> 00:12:42,340
>> Mismong, kaya maaari kaming gumamit ng ilang mga uri ng struct,

201
00:12:42,340 --> 00:12:44,960
at kung sa tingin mo pabalik sa, sabihin nating, pset 3,

202
00:12:44,960 --> 00:12:47,350
matandaan nagkaroon kami ng diksyunaryo, at pagkatapos ay nagkaroon kami kung ang mga salita

203
00:12:47,350 --> 00:12:50,230
noon ay sa diksyunaryo, at lahat ng impormasyon na magkasama

204
00:12:50,230 --> 00:12:52,420
sa loob ng ilang mga istraktura ng data.

205
00:12:52,420 --> 00:12:56,390
Ang isang bagay na maaari kong gawin sa ang code na ito upang maiwasan ang pagkakaroon ng mga 2 magkaibang array

206
00:12:56,390 --> 00:13:01,760
para sa mga katulad na piraso ng impormasyon ay maaari kong pagsamahin ang mga ito sa isang bagay na JavaScript.

207
00:13:01,760 --> 00:13:07,150
Magpahinga ng pagtingin sa na.

208
00:13:07,150 --> 00:13:11,740
Pansinin ko lamang magkaroon ng isang array sa tuktok ngayon

209
00:13:11,740 --> 00:13:17,650
at kung ano ako ay tapos-at ito lamang ang JavaScript syntax para sa uri ng

210
00:13:17,650 --> 00:13:21,350
paglikha ng isang literal na bersyon ng isang bagay na,

211
00:13:21,350 --> 00:13:24,670
at mapansin may 2 ari-arian, kaya kami ay may mga todo,

212
00:13:24,670 --> 00:13:29,660
at ito ay iningatan kasama ng mga ito man kumpleto o hindi kumpleto.

213
00:13:29,660 --> 00:13:31,000
Ito ay halos katulad na code.

214
00:13:31,000 --> 00:13:35,310
Ginagamit namin ang mga bagay JavaScript.

215
00:13:35,310 --> 00:13:38,600
Ang ganitong uri ng bagay na nagpapabuti.

216
00:13:38,600 --> 00:13:43,850
Tulad ngayon, ang lahat ng mga patlang na ito ng mga kaugnay na impormasyon ay pinananatiling magkasama.

217
00:13:43,850 --> 00:13:46,410
Kapag pumunta kami upang i-print ito, maaari naming ma-access ang mga patlang.

218
00:13:46,410 --> 00:13:49,060
>> Pansinin kung paano ang ginagawa namin todos [i]. Kumpletong

219
00:13:49,060 --> 00:13:52,880
sa halip na pagtingin sa kumpletong array nang hiwalay,

220
00:13:52,880 --> 00:13:56,560
at mapansin kapag gusto naming makuha ang to-do string namin nakukuha ang to-do-arian

221
00:13:56,560 --> 00:13:58,750
na ng todo, kaya ang ganitong uri ng saysay dahil

222
00:13:58,750 --> 00:14:01,660
bawat item ay may mga katangian ng tunay tungkol dito.

223
00:14:01,660 --> 00:14:05,650
Mayroon itong todo, at mayroon itong mga ito man kumpleto o hindi.

224
00:14:05,650 --> 00:14:11,540
Hindi masyadong maraming mga pagbabago doon pagtakbo, idinagdag lamang ng ilang higit sa code.

225
00:14:11,540 --> 00:14:13,430
Ito ay isang pagpapabuti sa ilang mga fronts, tama?

226
00:14:13,430 --> 00:14:16,030
Ibig kong sabihin, isinasali namin ang disenyo ng kaunti.

227
00:14:16,030 --> 00:14:20,350
Ngayon kami ay may mga bagay na talaga encapsulate ang data na ito.

228
00:14:20,350 --> 00:14:27,130
Mayroon bang anumang mas maaari naming gawin mula dito sa mga tuntunin ng JavaScript?

229
00:14:27,130 --> 00:14:31,810
I notice na ang code na ito dito mismo

230
00:14:31,810 --> 00:14:34,760
para sa pagkuha ng mga panloob na HTML ng isang div

231
00:14:34,760 --> 00:14:40,520
ay isang maliit, hulaan ko, ang haba.

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

233
00:14:45,100 --> 00:14:48,400
Ang isang bagay na maaari naming gawin upang gumawa ng code na ito hitsura ng kaunti friendlier

234
00:14:48,400 --> 00:14:51,450
kaya hindi ako ay magkakaroon upang mapanatili ang pag-scroll pakaliwa at pakanan, papunta at pabalik,

235
00:14:51,450 --> 00:14:58,480
ay kaya kong gumamit ng isang library tulad ng jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Ating tingnan ang Seminar 2,

237
00:15:02,710 --> 00:15:05,880
at ito ang parehong code, ngunit ito ay tapos na may jQuery.

238
00:15:05,880 --> 00:15:08,790
Hindi ka maaaring masyadong pamilyar sa jQuery,

239
00:15:08,790 --> 00:15:11,510
ngunit lamang malaman na ang jQuery ay isang uri ng isang library para sa JavaScript

240
00:15:11,510 --> 00:15:15,910
na ginagawang mas madali upang gumawa ng mga bagay tulad ng mga elemento ng mga indibidwal na pag-access ng DOM.

241
00:15:15,910 --> 00:15:21,280
Narito sa halip na sinasabi document.getElementByID ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Maaari ko bang gamitin ang magkano ang mas malinis na paraan sa jQuery,

243
00:15:25,210 --> 00:15:28,490
na kung saan ay lamang na gamitin ang tagapili.

244
00:15:28,490 --> 00:15:31,300
Tulad ng iyong nakikita, ang code na ito ay makakuha ng isang maliit na mas malinis,

245
00:15:31,300 --> 00:15:35,770
halos katulad na pagtakbo, ngunit iyon ang ideya.

246
00:15:35,770 --> 00:15:37,980
Nakakita kami ng dalawang mga bagay na sa ngayon,

247
00:15:37,980 --> 00:15:42,010
kaya namin magsimula sa pamamagitan lamang ng raw JavaScript pagpapatupad.

248
00:15:42,010 --> 00:15:45,370
Nagdagdag kami ng mga bagong tampok at nagpakita kung paano namin mapapabuti ito sa

249
00:15:45,370 --> 00:15:49,090
lamang kung ano ang mayroon kami sa JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Kahit sino ba nakakakita ng anumang kahirapan sa disenyo na ito?

251
00:15:53,300 --> 00:16:01,090
Lalo, hulaan-o ko hindi kinakailangang paghihirap ngunit sabihin nating

252
00:16:01,090 --> 00:16:04,830
hindi namin ay paggawa ng isang to-do list proyekto, at bukas kami nagpasya

253
00:16:04,830 --> 00:16:10,320
gusto naming gumawa ng isang listahan ng grocery o ng isang shopping listahan proyekto.

254
00:16:10,320 --> 00:16:14,150
Ang isang pulutong ng mga tampok na ito ay halos katulad na.

255
00:16:14,150 --> 00:16:19,080
Ang isang pulutong ng mga bagay na gusto naming upang makakuha ng out ng JavaScript ay laganap,

256
00:16:19,080 --> 00:16:23,820
at ito underscore ang pangangailangan para sa ilang mga uri ng paraan ng

257
00:16:23,820 --> 00:16:25,670
paggawa ng mas madali ito gawin.

258
00:16:25,670 --> 00:16:30,400
Ako ay nagkaroon na bumuo ng up ang lahat ng ito HTML access, ang lahat ng mga ito DOM access,

259
00:16:30,400 --> 00:16:35,530
tulad ng pupuntahan ko ay kumakatawan sa sa-do list sa modelong ito.

260
00:16:35,530 --> 00:16:39,130
At mapansin ako responsable bilang mga developer ng JavaScript

261
00:16:39,130 --> 00:16:42,890
para sa pagpapanatili ng HTML at JavaScript na mayroon akong sa pag-sync.

262
00:16:42,890 --> 00:16:48,040
Wala awtomatikong ginawa na JavaScript na representasyon

263
00:16:48,040 --> 00:16:51,590
o ang to-do list makapag hunhon out sa HTML.

264
00:16:51,590 --> 00:16:54,000
Wala ipinapatupad na maliban sa akin.

265
00:16:54,000 --> 00:16:56,880
Mayroon akong upang isulat ang mabubunot to-do list function.

266
00:16:56,880 --> 00:17:01,650
At na maaaring hindi-ko ibig sabihin, ito ay makatwirang upang gawin iyon,

267
00:17:01,650 --> 00:17:03,670
ngunit maaari itong maging nakakapagod minsan.

268
00:17:03,670 --> 00:17:08,190
Kung mayroon kang isang mas malaking proyekto, na maaaring maging mahirap.

269
00:17:08,190 --> 00:17:10,720
>> Framework, ang isa sa mga layunin ng Framework

270
00:17:10,720 --> 00:17:14,060
ay upang gawing simple na proseso at uri ng mga kadahilanan out

271
00:17:14,060 --> 00:17:16,950
ang mga karaniwang-ako hulaan maaari mong sabihin-disenyo pattern

272
00:17:16,950 --> 00:17:20,700
na ang mga tao sa pangkalahatan ay may ilang mga uri ng paraan ng kumakatawan sa data,

273
00:17:20,700 --> 00:17:25,599
kung iyon ang isang listahan ng mga kaibigan, kung iyon ang mapa impormasyon

274
00:17:25,599 --> 00:17:27,280
o isang bagay o sa isang listahan ng gagawin.

275
00:17:27,280 --> 00:17:30,660
Ang ilang mga tao ay may isang pangkalahatang paraan ng kumakatawan sa impormasyon,

276
00:17:30,660 --> 00:17:33,650
at sila sa pangkalahatan ay kailangan upang mapanatili ang impormasyon na uri ng mga naka-sync

277
00:17:33,650 --> 00:17:36,520
sa pagitan ng kung ano ang nakikita ng gumagamit sa ilang mga uri ng view,

278
00:17:36,520 --> 00:17:39,850
makipag-usap sa mga tuntunin ng tulad ng controller view ng modelo na iyong nakita sa lecture,

279
00:17:39,850 --> 00:17:45,400
at pagkatapos ay ang modelo, na sa kasong ito ay ito JavaScript array.

280
00:17:45,400 --> 00:17:49,020
Framework bigyan kami ng isang paraan upang malutas na ang problema.

281
00:17:49,020 --> 00:17:53,080
Ngayon sabihin tumingin sa ang pagpapatupad ng ito to-do list

282
00:17:53,080 --> 00:18:02,360
sa isang framework na tinatawag angularjs.

283
00:18:02,360 --> 00:18:04,650
Ito ay ito. Pansinin ito umaangkop sa isang slide.

284
00:18:04,650 --> 00:18:07,330
Hindi ko kailangang mag-scroll sa kaliwa at kanan.

285
00:18:07,330 --> 00:18:10,460
Iyon ay marahil hindi isang magandang dahilan upang inirerekomenda ang paggamit ng isang framework,

286
00:18:10,460 --> 00:18:20,120
pero notice ako kailanman-access indibidwal na mga elemento ng HTML dito?

287
00:18:20,120 --> 00:18:22,400
Ba ako kailanman pagpunta sa DOM?

288
00:18:22,400 --> 00:18:26,120
Nakikita mo ba ang anumang document.getElementByID o isang bagay tulad na?

289
00:18:26,120 --> 00:18:29,870
Hindi, iyan ay nawala.

290
00:18:29,870 --> 00:18:35,590
>> Anggular ay tumutulong sa amin panatilihin ang DOM at ang aming JavaScript na representasyon ng isang bagay

291
00:18:35,590 --> 00:18:40,430
uri ng in-sync, kaya kung ito ay hindi sa file js,

292
00:18:40,430 --> 00:18:46,790
kung walang paraan ng pagkuha ng programming sa lahat na HTML nilalaman

293
00:18:46,790 --> 00:18:51,800
mula sa JavaScript ay kung paano namin ang pagpapanatiling ito sa pag-sync?

294
00:18:51,800 --> 00:18:58,160
Kung ito ay wala sa. Js file, ito ay nakuha na maging sa HTML, tama?

295
00:18:58,160 --> 00:19:01,910
Ito ay ang bagong bersyon ng file na HTML,

296
00:19:01,910 --> 00:19:04,660
at mapansin nagdagdag kami ng maraming dito.

297
00:19:04,660 --> 00:19:11,110
Pansinin mayroong mga bagong katangian na sinasabi Ng-click at Ng-umuulit.

298
00:19:11,110 --> 00:19:15,650
Anggular diskarte sa paglutas sa problemang ito ng paghihirap sa disenyo

299
00:19:15,650 --> 00:19:19,130
ay ang isa lamang gumawa HTML magkano ang mas malakas.

300
00:19:19,130 --> 00:19:24,420
Anggular ay isang paraan ng nagpapahintulot sa iyo na gumawa ng HTML medyo mas makahulugan.

301
00:19:24,420 --> 00:19:30,520
Halimbawa, maaari kong sabihin na pupuntahan ko itali o isailalim ang text box

302
00:19:30,520 --> 00:19:35,080
sa isang variable sa loob ng aking angular JavaScript code.

303
00:19:35,080 --> 00:19:37,030
Ito Ng-modelo ginagawa lamang na.

304
00:19:37,030 --> 00:19:41,550
Iyon talaga sabi na ang item sa loob ng text box na ito,

305
00:19:41,550 --> 00:19:45,000
lamang iugnay na may mga variable new_todo_description

306
00:19:45,000 --> 00:19:47,870
sa loob ng code ng JavaScript.

307
00:19:47,870 --> 00:19:51,600
Iyon ay lubhang makapangyarihan dahil hindi ko na kailangang tahasang pumunta sa

308
00:19:51,600 --> 00:19:53,310
ang DOM upang makakuha ng impormasyon na iyon.

309
00:19:53,310 --> 00:19:56,250
Hindi ko na kailangang sabihin document.getElementByID.

310
00:19:56,250 --> 00:19:58,750
Hindi ko na kailangang gumamit ng jQueries tulad ng DOM access.

311
00:19:58,750 --> 00:20:03,280
Maaari ko bang iugnay ito sa isang variable, at pagkatapos ay kapag ko babaguhin na variable

312
00:20:03,280 --> 00:20:07,400
sa loob ng JavaScript na ito ay pinananatiling sa sync kasama ang HTML,

313
00:20:07,400 --> 00:20:11,640
kaya na pinapasimple ang proseso ng pagkakaroon upang bumalik-balik sa pagitan ng dalawang.

314
00:20:11,640 --> 00:20:18,260
Ba na magkaroon ng kahulugan?

315
00:20:18,260 --> 00:20:22,060
>> At mapansin walang HTML code access.

316
00:20:22,060 --> 00:20:27,760
Lamang Nagsagawa kami ng HTML mas malakas,

317
00:20:27,760 --> 00:20:32,070
at ngayon, halimbawa, maaari naming gawin ang mga bagay na tulad nito,

318
00:20:32,070 --> 00:20:38,610
gusto kapag nag-click sa ito, tinatawag ito ng pag-andar sa loob ng saklaw ng todos.js,

319
00:20:38,610 --> 00:20:43,410
at maaari naming gawin na bago, ngunit may mga iba pang mga bagay, tulad ng ito Ng-modelo,

320
00:20:43,410 --> 00:20:47,020
at mapapansin ang ganitong Ng-umuulit.

321
00:20:47,020 --> 00:20:51,520
Ano sa tingin ninyo ito ginagawa?

322
00:20:51,520 --> 00:20:54,390
Narito ang aming unordered listahan mula sa bago.

323
00:20:54,390 --> 00:20:56,470
Mayroon kaming mga ul tag,

324
00:20:56,470 --> 00:21:03,710
ngunit ako kailanman nagre-render na listahan sa loob ng code ng JavaScript?

325
00:21:03,710 --> 00:21:09,280
Hindi ako kailanman tahasang pag-render na listahan.

326
00:21:09,280 --> 00:21:11,580
Paano ito gumagana?

327
00:21:11,580 --> 00:21:16,410
Well, ang paraan ng anggular accomplishes ito ay ito ay tinatawag na isang repeater.

328
00:21:16,410 --> 00:21:22,760
Talaga ito sabi na gusto kong i-print ang HTML

329
00:21:22,760 --> 00:21:26,240
para sa bawat todo sa loob ng aking todos array.

330
00:21:26,240 --> 00:21:31,850
Sa Loob ng todos.jr mayroong isang todos array dito mismo,

331
00:21:31,850 --> 00:21:37,910
at ito ay magsasabi sa anggular go through na array, at para sa bawat elemento makita mo

332
00:21:37,910 --> 00:21:41,390
Gusto ko mong i-print ang HTML.

333
00:21:41,390 --> 00:21:44,620
Ito ay uri ng kahanga-hangang dahil lamang ko maaaring gawin ito

334
00:21:44,620 --> 00:21:47,760
nang hindi na kinakailangang upang magsulat ng isang para sa loop,

335
00:21:47,760 --> 00:21:52,250
na para sa isang to-do list na noon ay lamang ng 30 mga linya ng code

336
00:21:52,250 --> 00:21:54,700
ay maaaring hindi ang pinaka-kapaki-pakinabang na bagay,

337
00:21:54,700 --> 00:22:01,240
ngunit kung mayroon kang isang malaking proyekto ito, maaaring makakuha ng napaka-maginhawang.

338
00:22:01,240 --> 00:22:06,100
>> Ito ay isang solusyon sa problemang ito, sa paggawa ng HTML mas malakas,

339
00:22:06,100 --> 00:22:10,820
at na nagbibigay-daan sa amin upang panatilihin ang JavaScript at HTML sa pag-sync.

340
00:22:10,820 --> 00:22:13,220
May mga iba pang posibleng paraan upang malutas ang problemang ito,

341
00:22:13,220 --> 00:22:15,320
at hindi framework tuwing ginagawa ito.

342
00:22:15,320 --> 00:22:17,720
Hindi framework bawat gumagana kasama ang mga linyang ito.

343
00:22:17,720 --> 00:22:19,490
Ang ilang mga Framework ay may iba't ibang approach na ito,

344
00:22:19,490 --> 00:22:23,310
at maaari mong makita na masiyahan ka sa coding sa isang balangkas sa ibabaw ng iba pang mga.

345
00:22:23,310 --> 00:22:26,160
Tingnan natin ang isa pa.

346
00:22:26,160 --> 00:22:30,060
Ito ang to-do list ma-code up sa isang framework na tinatawag gulugod.

347
00:22:30,060 --> 00:22:33,250
Pupunta ako upang pumunta sa pamamagitan ng ito mabilis.

348
00:22:33,250 --> 00:22:38,300
Kukunin ko magsimula sa HTML bago kami pumunta doon.

349
00:22:38,300 --> 00:22:40,290
Isang segundo.

350
00:22:40,290 --> 00:22:43,950
Simula sa HTML, pati na mapansin mo, ang aming HTML ay katulad na katulad

351
00:22:43,950 --> 00:22:50,000
sa kung ano ito ay bago, kaya hindi masyadong maraming bagong na sa harap.

352
00:22:50,000 --> 00:22:55,410
Ngunit ang aming js file ay isang maliit na naiiba.

353
00:22:55,410 --> 00:23:00,360
Gulugod uri ng may ideyang ito, o nagbubuo mula sa ideya

354
00:23:00,360 --> 00:23:04,750
na ng maraming kung ano ang ginagawa namin sa, sabihin nating, ang aming JavaScript proyekto

355
00:23:04,750 --> 00:23:09,110
ay isipin ang tungkol sa modelo at mga koleksyon ng mga modelo na ito.

356
00:23:09,110 --> 00:23:12,510
Ito ay maaaring, halimbawa, isang larawan at mga koleksyon ng mga larawan,

357
00:23:12,510 --> 00:23:16,230
o ang ideya ng isang kaibigan at mga koleksyon ng mga kaibigan.

358
00:23:16,230 --> 00:23:20,700
At malimit kapag kami ay mga programa application ng JavaScript

359
00:23:20,700 --> 00:23:25,340
magpapadala kami ng uri-uriin ay kumakatawan sa mga ideya ng pagkakaroon ng isang koleksyon ng mga kaibigan

360
00:23:25,340 --> 00:23:29,500
sa paanuman sa JavaScript, at gulugod ay nagbibigay sa amin ang layer na ito

361
00:23:29,500 --> 00:23:33,040
sa tuktok ng JavaScript sa mga umiiral na array at object

362
00:23:33,040 --> 00:23:38,300
upang gawin mas malakas na mga bagay na may mas madali.

363
00:23:38,300 --> 00:23:41,870
>> Dito ko na ang isang tinukoy na-do modelo,

364
00:23:41,870 --> 00:23:44,630
at hindi mo na kailangang mag-alala masyadong maraming tungkol sa syntax,

365
00:23:44,630 --> 00:23:48,730
ngunit mapapansin na kung ano ang isa sa mga katangian ng mga ito?

366
00:23:48,730 --> 00:23:53,190
Ito ay may isang default na patlang.

367
00:23:53,190 --> 00:23:56,640
Gulugod ay nagbibigay-daan sa akin upang tukuyin ang naka-off ang bat

368
00:23:56,640 --> 00:24:00,190
anumang bagong mga to-do na lumikha ako ay pagpunta sa may mga default.

369
00:24:00,190 --> 00:24:04,100
Ngayon ay maaari ko bang i-customize ito, ngunit nagagawang tukuyin ang mga default

370
00:24:04,100 --> 00:24:07,220
maganda, at ito ay uri ng maginhawang dahil ito ay hindi isang bagay na tulad ng

371
00:24:07,220 --> 00:24:10,430
likas na taglay ng JavaScript, at ngayon hindi ko na kailangang tahasan

372
00:24:10,430 --> 00:24:12,430
sabihin na ang todos ay hindi kumpleto.

373
00:24:12,430 --> 00:24:19,190
Maaari ko bang sabihin karapatan off ang bat na todos ay pagpunta sa markahan bilang hindi kumpleto.

374
00:24:19,190 --> 00:24:21,300
Pansinin pagkatapos ay kung ano ito?

375
00:24:21,300 --> 00:24:25,520
Ngayon Mayroon akong to-do list, at iyan ay isang koleksyon.

376
00:24:25,520 --> 00:24:30,960
Pansinin ang patlang na nauugnay sa na nagsasabing modelo todo.

377
00:24:30,960 --> 00:24:33,390
Ito ang aking paraan ng pagsasabi sa katigasan ng loob na

378
00:24:33,390 --> 00:24:37,350
Pupunta ako sa maisip ng mga isang koleksyon ng mga indibidwal na todos.

379
00:24:37,350 --> 00:24:42,140
Ito ay isa lamang sa modelo istraktura para sa aking programa.

380
00:24:42,140 --> 00:24:44,980
Narito Mayroon akong na ito ideya ng isang koleksyon,

381
00:24:44,980 --> 00:24:48,960
at isa lamang ang mga item na nilalaman sa na koleksyon ay lahat ng pagpunta sa maging ang mga todos,

382
00:24:48,960 --> 00:24:51,910
at iyon ay napaka-natural sa puntong ito

383
00:24:51,910 --> 00:24:59,890
dahil gawin ba akong magkaroon todos, at mayroon akong mga ito sa isang koleksyon.

384
00:24:59,890 --> 00:25:02,940
>> Tingnan natin ang isang kaunti pa ng ito.

385
00:25:02,940 --> 00:25:05,900
Narito ang isang gulugod view.

386
00:25:05,900 --> 00:25:08,890
Ang iba pang mga bagay na gulugod sabi ay na

387
00:25:08,890 --> 00:25:14,660
ng maraming mga modelo na iyong iniisip tungkol sa o kahit na mga koleksyon

388
00:25:14,660 --> 00:25:19,150
ay pagpunta sa kailangan upang magkaroon ng ilang mga paraan ng na ipinapakita.

389
00:25:19,150 --> 00:25:21,900
Kailangan naming i-render na to-do list,

390
00:25:21,900 --> 00:25:25,460
at hindi magiging maganda kung kami maaaring magbigay ng para sa bawat modelo

391
00:25:25,460 --> 00:25:28,390
o iugnay sa bawat modelo sa pagtingin na ito

392
00:25:28,390 --> 00:25:34,020
na nagbibigay-daan sa amin upang hulaan ko ikonekta ang dalawang magkasama?

393
00:25:34,020 --> 00:25:38,320
Sapagkat bago nagkaroon kami upang gamitin para sa isang loop na tumakbo sa pamamagitan ng

394
00:25:38,320 --> 00:25:41,130
bawat todo sa aming listahan at pagkatapos ay i-print ito dito

395
00:25:41,130 --> 00:25:44,650
maaari naming ikonekta talaga ito sa modelong ito.

396
00:25:44,650 --> 00:25:47,550
Ito ay isang na-do view.

397
00:25:47,550 --> 00:25:50,550
Ito ay kaugnay ng todo natagpuan namin nang mas maaga.

398
00:25:50,550 --> 00:25:54,940
Ngayon todo bawat ay displayable o renderable

399
00:25:54,940 --> 00:25:56,960
sa pamamagitan ng ito upang gawin-view.

400
00:25:56,960 --> 00:25:59,440
Pansinin ang ilan sa mga patlang.

401
00:25:59,440 --> 00:26:05,880
Ano sa tingin ninyo tagName ito, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Tandaan mula sa bago kapag gusto naming mag-render ng todo

403
00:26:09,790 --> 00:26:16,700
Gusto naming magkaroon upang tahasang ipares ang aming todos na may ganitong tag li.

404
00:26:16,700 --> 00:26:21,080
Ngayon kami ay nagsasabi na kung saan ito ay todo pagpunta sa mabuhay

405
00:26:21,080 --> 00:26:25,250
ay pagpunta sa maging sa loob ng isang li tag.

406
00:26:25,250 --> 00:26:31,440
At ngayon din kami uugnay ng mga kaganapan sa aming todos.

407
00:26:31,440 --> 00:26:34,320
>> Todo ang bawat isang ito ng kaganapan.

408
00:26:34,320 --> 00:26:38,480
Kung nag-click ka medyo magkano ang toggle pindutan, na kung ano ang ako sinasabi doon,

409
00:26:38,480 --> 00:26:43,080
pagkatapos ay isa lamang markahan ang todo bilang ng kabaligtaran ng kung ano ito ay bago

410
00:26:43,080 --> 00:26:45,890
at pagkatapos ay muling i-render ang application.

411
00:26:45,890 --> 00:26:47,810
Ito ay uri ng katulad sa code bago.

412
00:26:47,810 --> 00:26:50,730
Tandaan kapag kami minarkahan mo ito bilang alinman sa tapat o-

413
00:26:50,730 --> 00:26:52,410
at pagkatapos naming muli render na ito.

414
00:26:52,410 --> 00:26:57,750
Ngunit ngayon mapansin ang kaganapang ito na ginamit upang maging isang bagay na noon ay sa HTML.

415
00:26:57,750 --> 00:26:59,640
Ito ay pag-upo doon.

416
00:26:59,640 --> 00:27:01,410
Ang pindutan ay nagkaroon ng on-click.

417
00:27:01,410 --> 00:27:05,310
Kapag nag-click ang pindutan, ito uri ng gumagana ang mga bagay sa

418
00:27:05,310 --> 00:27:07,210
set up na todo sa hindi kumpleto.

419
00:27:07,210 --> 00:27:11,180
Narito kami nauugnay na kaganapan ng pag-click na toggle pindutan

420
00:27:11,180 --> 00:27:15,830
at pagtaliwas ito man on o off sa view na ito.

421
00:27:15,830 --> 00:27:20,480
>> Ito ay isang magaling na paraan ng pagse-set up ang kaganapang ito nang sa gayon ay masyadong matatag na itinali

422
00:27:20,480 --> 00:27:26,980
sa view na ito, at kaya mapapansin ang isang ito nang higit pa.

423
00:27:26,980 --> 00:27:31,050
Mayroon akong na ito render pamamaraan, at hindi namin na kailangang pumunta sa pamamagitan ng mga detalye.

424
00:27:31,050 --> 00:27:33,650
Ito ay uri ng katulad ng kung ano nagkaroon kami dati,

425
00:27:33,650 --> 00:27:36,070
ngunit napansin hindi ako looping sa pamamagitan ng kahit ano.

426
00:27:36,070 --> 00:27:40,700
Hindi ako nagpi-print na ul tag na uri ng mga sinasabi ng mga pupuntahan ko i-print ang lahat ng mga elemento.

427
00:27:40,700 --> 00:27:46,610
Ako ay nagbibigay ng pag-andar para sa pag-render ng isang ito to-do item.

428
00:27:46,610 --> 00:27:49,400
Ito ay isang napaka-malakas na konsepto dahil talaga

429
00:27:49,400 --> 00:27:53,600
ang aming to-do list ay binubuo ng lahat ng mga todos, at kung maaari naming tukuyin talaga

430
00:27:53,600 --> 00:27:56,890
ang mga paraan upang i-render ang isa sa mga todos

431
00:27:56,890 --> 00:28:04,230
pagkatapos ay maaari naming magkaroon ang aming makapangyarihang gulugod per se-render ang lahat ng mga todos

432
00:28:04,230 --> 00:28:07,760
pamamagitan ng pagtawag ng render pamamaraan sa indibidwal na todos.

433
00:28:07,760 --> 00:28:14,180
Ito ay isang konsepto na ay kapaki-pakinabang dito.

434
00:28:14,180 --> 00:28:18,160
Ngayon ay isang magandang tanong na magtanong ay kung paano ang application na ito na magkasama?

435
00:28:18,160 --> 00:28:21,200
Dahil kami ay may mga kakayahan upang i-render ang isa todo,

436
00:28:21,200 --> 00:28:23,860
ngunit paano namin makuha ang ideya ng maramihang todos?

437
00:28:23,860 --> 00:28:25,100
>> Magpahinga ng pagtingin sa na.

438
00:28:25,100 --> 00:28:27,100
Ito ang huling bahagi.

439
00:28:27,100 --> 00:28:29,740
Pansinin mayroon kaming upang gawin-view ng listahan dito,

440
00:28:29,740 --> 00:28:34,440
at napansin ito ay din ng isang view.

441
00:28:34,440 --> 00:28:36,970
At upang pumunta sa paglipas ng ilang mga bagay,

442
00:28:36,970 --> 00:28:45,280
ito initialize pamamaraan ay tinatawag na kapag una naming lumikha ng ito sa listahan ng gagawin.

443
00:28:45,280 --> 00:28:52,630
Tulad ng iyong nakikita, ito ay tulad ng paglikha ng mga to-do list at uugnay ito sa view na ito.

444
00:28:52,630 --> 00:28:57,860
At pagkatapos ay ako ay nagdagdag ng mga function dito kaya talaga kapag nagdagdag ka ng isang item-

445
00:28:57,860 --> 00:29:01,440
ito ay katulad sa paraan addItem nakita natin bago-

446
00:29:01,440 --> 00:29:07,430
Pupunta ako sa lumikha ng isang bagong bagay todo, at mapapansin talaga ako sa pagtawag

447
00:29:07,430 --> 00:29:13,080
ang bagong paraan ng todo, kaya ito ay ibinigay sa pamamagitan ng katigasan ng loob,

448
00:29:13,080 --> 00:29:16,010
at ang maaari kong pumasa sa aking mga katangiang dito.

449
00:29:16,010 --> 00:29:23,710
At ngayon bawat todo na aking nilikha mo gamit na ito ay makakakuha ng na-andar na nakita natin dati.

450
00:29:23,710 --> 00:29:28,140
Pansinin ako ng pag-clear ang mga kahon ng teksto bago-isang maliit na maliit na detalye-

451
00:29:28,140 --> 00:29:32,900
at pagkatapos ay ako pagdaragdag ng koleksyon na ito.

452
00:29:32,900 --> 00:29:37,630
>> Ito halos tila kakaiba dahil bago pa lang namin ay nagkaroon na gawin na todos.push,

453
00:29:37,630 --> 00:29:43,310
at pagkatapos kami ay tapos na, at ito ay maaaring mukhang mas komplikado para sa partikular na proyekto,

454
00:29:43,310 --> 00:29:46,980
at maaari mong makita na gulugod o kahit na angular o anumang iba pang mga balangkas

455
00:29:46,980 --> 00:29:50,790
ay hindi angkop sa iyong partikular na proyekto, ngunit sa tingin ko mahalagang isipin ang tungkol

456
00:29:50,790 --> 00:29:54,100
kung ano ang ibig sabihin nito sa isang mas malaking sukat para sa mas malaking proyekto,

457
00:29:54,100 --> 00:29:56,610
dahil kung kami ay may isang mas malaking proyekto kung saan tayo ay kumakatawan

458
00:29:56,610 --> 00:30:00,860
ang ilang mga talagang complex koleksyon, isang bagay na mas malalim pa sa isang to-do list,

459
00:30:00,860 --> 00:30:04,490
sabihin nating ang isang listahan ng mga kaibigan o isang bagay tulad na ito, maaaring dumating sa madaling-magamit na

460
00:30:04,490 --> 00:30:09,620
dahil maaari naming ayusin ang aming code sa isang tunay na maginhawang paraan,

461
00:30:09,620 --> 00:30:12,550
sa isang paraan na gagawing mas madali para sa ibang tao

462
00:30:12,550 --> 00:30:16,820
sino ang gusto upang kunin ang isang proyekto upang bumuo sa.

463
00:30:16,820 --> 00:30:21,450
Maaari mong makita na ito ay nagbibigay ng maraming mga istraktura.

464
00:30:21,450 --> 00:30:26,580
At pagkatapos ay ako sa pagtawag sa render ito addItem.

465
00:30:26,580 --> 00:30:31,050
I-render, bilang maaari mong makita, at hindi mo na kailangang mag-hawakang mahigpit na ito buong syntax,

466
00:30:31,050 --> 00:30:37,790
ngunit isa lamang para sa bawat modelo ito ng pagpunta sa tumawag sa indibidwal na mga pamamaraan sa pag-render.

467
00:30:37,790 --> 00:30:41,500
Iyon uri ng kung saan ito ay nagmumula sa.

468
00:30:41,500 --> 00:30:44,140
Sabihin lamang tukuyin kung paano mag-render ang mga indibidwal na todos,

469
00:30:44,140 --> 00:30:47,310
at pagkatapos ay sabihin kola iyon nang magkakasama bilang isang buo.

470
00:30:47,310 --> 00:30:49,810
Ngunit ito ay nagbibigay ng isang paraan ng abstraction,

471
00:30:49,810 --> 00:30:55,470
dahil maaari kong baguhin ang paraan magpasya ko upang i-render ang mga indibidwal na todos,

472
00:30:55,470 --> 00:30:57,940
at hindi ko kailangang baguhin ang anuman sa ang code na ito.

473
00:30:57,940 --> 00:31:00,700
Iyan ay uri ng cool.

474
00:31:00,700 --> 00:31:08,540
>> Ba ang sinuman may anumang mga katanungan tungkol sa JavaScript Framework?

475
00:31:08,540 --> 00:31:14,310
[Mag-aaral hindi marinig tanong]

476
00:31:14,310 --> 00:31:16,050
Oh, ba, na isang mahusay na tanong.

477
00:31:16,050 --> 00:31:19,080
Ang tanong ay kung paano isinama ko ang Framework?

478
00:31:19,080 --> 00:31:22,970
Karamihan sa JavaScript Framework ay talaga lamang js file

479
00:31:22,970 --> 00:31:25,740
na maaari mong isama sa tuktok ng iyong code.

480
00:31:25,740 --> 00:31:29,830
Pansinin sa head bahagi ng aking HTML Mayroon akong lahat ng mga script tag,

481
00:31:29,830 --> 00:31:34,250
at ang pangwakas na tag na script ay ang code na namin ang nakasulat.

482
00:31:34,250 --> 00:31:38,820
At pagkatapos ay ang framework 3 mga code lang din ang script tag.

483
00:31:38,820 --> 00:31:42,110
Ako kasama ang mga ito mula sa kung ano ang tinatawag na isang CDN,

484
00:31:42,110 --> 00:31:46,200
na nagbibigay-daan sa akin upang makakuha ng mga ito mula sa ibang tao sa puntong ito

485
00:31:46,200 --> 00:31:57,930
ngunit framework bawat ay may ito-maaari kang medyo magkano mahanap ang nilalaman

486
00:31:57,930 --> 00:32:03,540
para sa isang partikular na library JavaScript magagamit sa ilang mga CDN o isang bagay tulad na,

487
00:32:03,540 --> 00:32:05,570
at pagkatapos ay maaari mong isama ang mga script tag.

488
00:32:05,570 --> 00:32:07,600
Ba na magkaroon ng kahulugan?

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

490
00:32:09,500 --> 00:32:11,730
>> Iyon ang 2 magkaibang approach.

491
00:32:11,730 --> 00:32:14,640
Iyon ang mga hindi lamang ang approach sa paglutas ng problemang ito.

492
00:32:14,640 --> 00:32:17,080
Mayroong maraming iba't ibang mga bagay na

493
00:32:17,080 --> 00:32:19,490
isang tao ay maaaring gawin, at mayroong maraming Framework out doon.

494
00:32:19,490 --> 00:32:23,300
Anggular at gulugod huwag sabihin ang buong kuwento.

495
00:32:23,300 --> 00:32:26,370
Good luck sa iyong huling proyekto, at salamat sa inyo.

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