1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [Kornizat JavaScript:? Pse dhe Si]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Universiteti i Harvardit]

3
00:00:04,000 --> 00:00:06,960
[Kjo është CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hi, të gjithë. Mirë se vini në seminarin Kornizat JavaScript.

5
00:00:10,630 --> 00:00:14,910
Emri im është Kevin, dhe sot unë jam duke shkuar për të folur për kornizat JavaScript,

6
00:00:14,910 --> 00:00:20,400
dhe qëllimi i këtij seminari nuk do të merrni ju në, të themi, të zotëruar një kuadri të veçantë në vetvete

7
00:00:20,400 --> 00:00:23,810
por për të ju jap një hyrje të gjerë për një çift të kornizave

8
00:00:23,810 --> 00:00:27,150
dhe të tregojnë pse ne do të ndonjëherë të dëshironi të përdorni një kornizë.

9
00:00:27,150 --> 00:00:31,060
>> Para se unë bëj këtë, unë do të sigurojë një sfond të vogël në JavaScript,

10
00:00:31,060 --> 00:00:33,750
dhe pastaj ne do të marrë atë nga atje.

11
00:00:33,750 --> 00:00:36,270
Ne jemi duke shkuar për të filluar duke zbatuar një listë për të-bërë.

12
00:00:36,270 --> 00:00:39,330
Këtu është lista jonë detyrë për sot.

13
00:00:39,330 --> 00:00:41,990
Kjo është lloj i funny. Ne duhet të zbatojë një listë për të-bërë në JavaScript.

14
00:00:41,990 --> 00:00:45,110
Kjo është ajo që ajo do të duken si, kështu që është qëllimi ynë i parë.

15
00:00:45,110 --> 00:00:47,160
Ne nuk jemi duke shkuar për të përdorur një kornizë për të bërë këtë.

16
00:00:47,160 --> 00:00:51,930
Ne jemi duke shkuar për kodit JavaScript dhe për të marrë për të bërë listë për të punuar.

17
00:00:51,930 --> 00:00:54,370
Pastaj ne jemi duke shkuar për të përmirësuar hartimin pa përdorur një kornizë.

18
00:00:54,370 --> 00:00:57,190
Ne jemi duke shkuar për të diskutuar gjëra të ndryshme që mund të bëjmë vetëm me JavaScript vetëm

19
00:00:57,190 --> 00:01:00,650
të bëjë tonë për të bërë listë pak më mirë të projektuar.

20
00:01:00,650 --> 00:01:02,490
Pastaj ne jemi duke shkuar për të hedhur në disa jQuery,

21
00:01:02,490 --> 00:01:05,030
dhe atëherë ne do të shikojmë në të njëjtën kohë të-bërë lista,

22
00:01:05,030 --> 00:01:07,170
zbatohet vetëm në kornizat e ndryshme, dhe ne do të diskutuar

23
00:01:07,170 --> 00:01:09,280
 mirat dhe të këqijat gjatë rrugës.

24
00:01:09,280 --> 00:01:12,040
>> Le të fillojë zbatimin që për-bërë lista.

25
00:01:12,040 --> 00:01:14,270
Le të thonë se ne jemi të dhënë këtë HTML.

26
00:01:14,270 --> 00:01:16,620
Unë jam duke shkuar për të bërë këtë një pak më të vogël.

27
00:01:16,620 --> 00:01:19,300
Siç mund ta shikoni, unë kam një kokë të vogël që thotë Todo

28
00:01:19,300 --> 00:01:21,740
dhe një kuti të vogël ku unë mund të jepni një përshkrim të një Todo

29
00:01:21,740 --> 00:01:26,990
dhe pastaj një buton i ri artikull, kështu që le të përpiqet për të hyrë në një todo të re në këtë listë.

30
00:01:26,990 --> 00:01:31,000
Dërgo një seminar kornizat JavaScript,

31
00:01:31,000 --> 00:01:33,090
dhe unë jam për të goditur artikull i ri.

32
00:01:33,090 --> 00:01:35,730
Unë marrë këtë alarm JavaScript që thotë zbatojë mua.

33
00:01:35,730 --> 00:01:37,560
Ne kemi marrë për ta zbatuar atë.

34
00:01:37,560 --> 00:01:41,490
Le të shikoni kodin për këtë, si HTML dhe JavaScript.

35
00:01:41,490 --> 00:01:43,260
Ja HTML tonë.

36
00:01:43,260 --> 00:01:45,500
Siç mund ta shikoni këtu, këtu është pak tonë todos header.

37
00:01:45,500 --> 00:01:47,620
Kjo ishte gjëja që guximshme në krye,

38
00:01:47,620 --> 00:01:50,690
dhe pastaj ne kemi kutinë e input me placeholder,

39
00:01:50,690 --> 00:01:59,460
dhe pastaj ka një atribut të caktuar të këtij butonin që quan këtë addTodo funksion.

40
00:01:59,460 --> 00:02:05,460
A ka dikush doni të me mend se çfarë on click është nënkuptuar?

41
00:02:05,460 --> 00:02:07,390
[Student përgjigje padëgjueshme]

42
00:02:07,390 --> 00:02:09,289
Të mira, klikoni në është lloj i si një ngjarje,

43
00:02:09,289 --> 00:02:12,120
si klikuar të miut është vetëm një ngjarje, dhe çfarë jemi duke bërë

44
00:02:12,120 --> 00:02:16,890
është që ne jemi të lidhur ngjarjen e klikuar këtë buton për të ekzekutuar atë funksion.

45
00:02:16,890 --> 00:02:21,700
AddTodo është kjo mbajtës ngjarje për të klikuar atë buton.

46
00:02:21,700 --> 00:02:25,010
>> Siç mund ta shikoni, kur klikoj butonin Temë e Re

47
00:02:25,010 --> 00:02:29,940
ngjarja klikoni mbi suspendohet, dhe ky funksion merr quajtur.

48
00:02:29,940 --> 00:02:33,170
Le të shikojmë në funksion.

49
00:02:33,170 --> 00:02:36,260
Siç mund ta shikoni, këtu është kodi im deri tani JavaScript.

50
00:02:36,260 --> 00:02:41,280
Ajo që unë kam në krye është një strukturë globale të dhënave për për-bërë listën time.

51
00:02:41,280 --> 00:02:44,060
Ajo duket si një rrjet. Kjo është vetëm një koleksion bosh.

52
00:02:44,060 --> 00:02:47,100
Dhe atëherë unë kam funksionin addTodo që pamë më herët,

53
00:02:47,100 --> 00:02:50,740
dhe linja e vetme e kodit në atje është kjo vigjilent.

54
00:02:50,740 --> 00:02:55,730
Ajo alarme zbatojë mua, dhe atëherë unë kam 2 detyra në dorë.

55
00:02:55,730 --> 00:02:58,790
Unë kam për të shtuar todo asaj globale strukturën e të dhënave,

56
00:02:58,790 --> 00:03:01,860
dhe pastaj unë dua për të nxjerrë jashtë listës për-bërë.

57
00:03:01,860 --> 00:03:06,360
Asgjë shumë të dashuroj vetëm ende, por JavaScript që ju mund të jenë të panjohura me,

58
00:03:06,360 --> 00:03:12,370
kështu që unë jam duke shkuar për të shkuar të ngadaltë dhe të rishikojë bazat e JavaScript në atë mënyrë.

59
00:03:12,370 --> 00:03:15,490
>> Le të jap këtë një e shtënë.

60
00:03:15,490 --> 00:03:21,130
Le të thonë se përdoruesi hyn diçka në këtë kuti.

61
00:03:21,130 --> 00:03:23,360
I shtypur thjesht diçka këtu, në tekst.

62
00:03:23,360 --> 00:03:27,620
Si mund unë lloj i qasjes se teksti përmes JavaScript?

63
00:03:27,620 --> 00:03:32,500
Mos harroni se JavaScript-in, një nga karakteristikat e tij themelore është se ai na jep

64
00:03:32,500 --> 00:03:34,670
kjo qasje programatike për DOM.

65
00:03:34,670 --> 00:03:40,670
Kjo na lejon për të hyrë në elementet dhe pronat e tyre të kësaj HTML aktuale.

66
00:03:40,670 --> 00:03:43,430
Mënyra që ne bëjmë me eshtra të zhveshur JavaScript

67
00:03:43,430 --> 00:03:51,360
është që ne mund të përdorni të vërtetë një funksion në JavaScript quajtur getElementByID.

68
00:03:51,360 --> 00:03:55,140
Unë dua të ruajtur tekstin që është shtypur atje në disa ndryshore,

69
00:03:55,140 --> 00:03:58,350
kështu që unë jam duke shkuar për të thonë se një variabël të re të quajtur new_todo,

70
00:03:58,350 --> 00:04:01,980
dhe unë jam duke shkuar për të marrë atë element.

71
00:04:01,980 --> 00:04:06,330
Ky është një funksion,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Dhe tani unë jam duke marrë një element me ID, kështu që kam nevojë ID e asaj kutinë e tekstit,

73
00:04:11,580 --> 00:04:15,860
kështu që unë kam dhënë atë new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
Kjo është se si unë jam duke shkuar për të marrë një element.

75
00:04:18,399 --> 00:04:23,880
Kjo është argumenti im në këtë funksion, të përcaktojë se cila ID për të marrë.

76
00:04:23,880 --> 00:04:28,110
Dhe kështu që është një element në HTML, dhe ajo ka veti.

77
00:04:28,110 --> 00:04:30,650
Ju keni parë këto. Ata janë atribute.

78
00:04:30,650 --> 00:04:37,090
Atribut i elementit tekstit që ruan kontributin e përdoruesit quhet vlerë.

79
00:04:37,090 --> 00:04:40,860
I shpëtuam vlerën e asaj kutinë e tekstit tani në këtë ndryshore të quajtur new_todo.

80
00:04:40,860 --> 00:04:45,040
Tani unë kam qasje programatike në këtë variabël, që është lloj i ftohtë

81
00:04:45,040 --> 00:04:49,200
sepse tani se çfarë unë mund të bëj është që unë mund të shtoni atë në për-bërë listën time.

82
00:04:49,200 --> 00:04:52,870
>> Mënyra se ne do të bëjmë këtë në JavaScript-dhe mos u shqetësoni nëse ju jeni të panjohur me këtë,

83
00:04:52,870 --> 00:04:57,010
por vetëm duke kaluar nëpër këtë është todos.push

84
00:04:57,010 --> 00:05:00,130
sepse kjo është emri i sime strukturën globale të dhënave deri këtu,

85
00:05:00,130 --> 00:05:04,450
dhe unë jam duke shkuar për të nxitur new_todo.

86
00:05:04,450 --> 00:05:09,120
Kjo është e madhe, sepse tani kam shtuar atë në JavaScript tim

87
00:05:09,120 --> 00:05:11,280
përfaqësimi i që për-bërë lista.

88
00:05:11,280 --> 00:05:15,170
Por tani si mund ta merrni atë përsëri në HTML?

89
00:05:15,170 --> 00:05:18,560
Unë duhet të gjejnë një mënyrë për të zgjidhur të shtyjë atë përsëri.

90
00:05:18,560 --> 00:05:21,830
Me fjalë të tjera, unë lloj i duhet të tërheqë këtë.

91
00:05:21,830 --> 00:05:26,060
Ajo që ne jemi duke shkuar për të bërë është që ne jemi duke shkuar për të nxjerrë në listë për-bërë.

92
00:05:26,060 --> 00:05:29,270
Unë kam nevojë për të rinovuar HTML tjera në këtë faqe,

93
00:05:29,270 --> 00:05:32,040
dhe si ju mund të shihni, unë kam lënë këtë enë të vogël këtu,

94
00:05:32,040 --> 00:05:36,840
kjo ndarës i faqes cilit ID është todos,

95
00:05:36,840 --> 00:05:40,870
dhe unë jam duke shkuar për të vënë në listë për-bërë atje.

96
00:05:40,870 --> 00:05:47,240
Së pari unë jam duke shkuar për të pastruar atë për shkak se, të themi, ka qenë një i vjetër për të bërë listë atje.

97
00:05:47,240 --> 00:05:49,560
Unë jam duke marrë atë element nga ID përsëri,

98
00:05:49,560 --> 00:05:54,530
dhe unë jam i qasjes në HTML brendshme të atij elementi,

99
00:05:54,530 --> 00:05:58,010
dhe unë jam duke shkuar për të pastruar atë.

100
00:05:58,010 --> 00:06:05,510
Nëse ne e kemi lënë këtë kod siç është, ne do të shohim një gjë bosh atje,

101
00:06:05,510 --> 00:06:10,410
dhe tani unë dua të fillojë dhënien listë të re time për-bërë.

102
00:06:10,410 --> 00:06:12,870
Unë jam në thelb do të fshijë për-bërë listën time.

103
00:06:12,870 --> 00:06:18,180
>> Tani brenda brendshme HTML e atij div todos është plotësisht e qartë,

104
00:06:18,180 --> 00:06:20,060
dhe tani kam nevojë për të filloni duke shtuar listën time.

105
00:06:20,060 --> 00:06:23,890
Gjëja e parë që unë dua të shtoj përsëri është tag listë të parenditur,

106
00:06:23,890 --> 00:06:33,890
e cila në thelb tregon se ky është fillimi i një listë të parenditur.

107
00:06:33,890 --> 00:06:39,770
Tani për çdo element në todos array tim unë dua të shtypura it out në brendësi të asaj HTML.

108
00:06:39,770 --> 00:06:43,710
Unë dua të append atë në fund të kësaj liste.

109
00:06:43,710 --> 00:06:49,040
Ashtu si në C, unë mund të përdorni një për lak, dhe unë jam duke shkuar për të filluar në fillim të listës sime

110
00:06:49,040 --> 00:06:54,140
element në 0, dhe unë jam duke shkuar për të shkuar gjatë gjithë rrugës për gjatësinë e listës.

111
00:06:54,140 --> 00:07:01,100
Ne fakt mund të merrni gjatësinë e një grup në JavaScript duke përdorur pronën gjatësi.

112
00:07:01,100 --> 00:07:03,420
Në thelb unë jam duke shkuar për të bërë diçka shumë të ngjashme brenda këtu

113
00:07:03,420 --> 00:07:05,600
për të printuar jashtë atë element.

114
00:07:05,600 --> 00:07:12,970
Unë mund të hyni përsëri div todos, pronën e brendshme HTML e se,

115
00:07:12,970 --> 00:07:17,560
dhe unë jam duke shkuar për të shtuar këtë artikull në listën e re, dhe se do të jenë të rrethuar nga

116
00:07:17,560 --> 00:07:25,390
ky tag li, dhe unë jam duke shkuar për të lidh me operatorin +,

117
00:07:25,390 --> 00:07:28,040
dhe kjo është elementi i ith todos array tim,

118
00:07:28,040 --> 00:07:32,380
dhe atëherë unë jam duke shkuar për të mbyllur atë etiketë.

119
00:07:32,380 --> 00:07:36,240
Tani për çdo element ne do të shtoni një hyrje të re listë.

120
00:07:36,240 --> 00:07:48,700
Dhe atëherë të gjithë ne me të vërtetë duhet të bëni është mbyllur jashtë atë etiketë.

121
00:07:48,700 --> 00:07:52,820
Unë vetëm nevojë për të mbyllur off se parenditur tag list.

122
00:07:52,820 --> 00:07:55,490
>> A ju merrni një të ndjehen për mënyrën se si që punon?

123
00:07:55,490 --> 00:07:57,700
Ky hap gjithë listën.

124
00:07:57,700 --> 00:08:01,080
Kjo shton elementet individuale nga lista todos në listë,

125
00:08:01,080 --> 00:08:05,470
dhe pastaj që mbyll të gjithë listën, dhe ky është funksioni im addTodo.

126
00:08:05,470 --> 00:08:09,590
Unë në thelb të fillojë me marrjen e todo nga kutinë e tekstit.

127
00:08:09,590 --> 00:08:18,950
Unë shtoj se të array todos, dhe pastaj ri-bëjnë listën e të-bërë.

128
00:08:18,950 --> 00:08:21,520
Tani unë mund të shtoni artikujt në listën time.

129
00:08:21,520 --> 00:08:24,620
Kjo është lloj i emocionuese, sepse në vetëm disa rreshta të kodit

130
00:08:24,620 --> 00:08:28,240
ne kemi bërë në thelb një listë për të-bërë, ku ne mund të shtoni artikujt.

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

132
00:08:30,050 --> 00:08:34,480
Kjo është lloj i një hyrje themelore për JavaScript.

133
00:08:34,480 --> 00:08:36,179
Mos u shqetësoni shumë për sintaksë për tani,

134
00:08:36,179 --> 00:08:38,130
por mendoj se për këtë konceptualisht.

135
00:08:38,130 --> 00:08:40,539
Ne kishim disa HTML.

136
00:08:40,539 --> 00:08:45,310
Ne patëm një kuti teksti në faqen që lejoi përdoruesit të input në thelb një artikull për-bërë të shtoni.

137
00:08:45,310 --> 00:08:49,210
Dhe pastaj ne kemi përdorur JavaScript për të shkoj të marr atë todo nga ajo kutinë e tekstit.

138
00:08:49,210 --> 00:08:52,830
Ne që ruhen brenda një array javascript, e cila është në thelb si

139
00:08:52,830 --> 00:08:56,010
Përfaqësimi ynë programatike që i për-bërë lista,

140
00:08:56,010 --> 00:08:59,060
dhe pastaj ne të shtypura it out.

141
00:08:59,060 --> 00:09:02,690
Kjo është todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Kjo është lloj i ftohtë, por si mund të marrim këtë më tej?

143
00:09:07,620 --> 00:09:11,350
E pra, si ju mund të shihni, kjo nuk është si një komplet të-bërë lista.

144
00:09:11,350 --> 00:09:15,100
Për shembull, unë nuk mund të shënojë ndonjë nga këto objekte si të paplotë,

145
00:09:15,100 --> 00:09:19,920
si në qoftë se unë të kërkuar për të reprioritize artikuj ose fshirë objekte.

146
00:09:19,920 --> 00:09:23,150
Kjo është në rregull, por ne mund të marrë këtë të mëtejshme.

147
00:09:23,150 --> 00:09:29,280
Unë nuk jam duke shkuar për të folur shumë rreth duke shtuar veçori shtesë,

148
00:09:29,280 --> 00:09:32,800
por ne mund të marrë atë më tej.

149
00:09:32,800 --> 00:09:35,970
Le të flasim për duke shtuar një tipar më shumë për këtë për-bërë lista,

150
00:09:35,970 --> 00:09:40,370
e cila do të jetë të qenit në gjendje për të kontrolluar një individ për të-bërë pika

151
00:09:40,370 --> 00:09:44,780
dhe e kanë atë të kalohet jashtë, kështu që në thelb duke thënë se unë e kam bërë këtë.

152
00:09:44,780 --> 00:09:50,240
Le të shikojmë në disa kodin që mund të përmbushur këtë.

153
00:09:50,240 --> 00:09:52,740
Vini re atë që unë kam bërë në krye është Unë kam shtuar

154
00:09:52,740 --> 00:09:57,620
një koleksion të ri të quajtur globale të plotë.

155
00:09:57,620 --> 00:10:02,890
Unë jam në thelb duke përdorur këtë për të ruajtur nëse sendet në listën e To-A

156
00:10:02,890 --> 00:10:06,560
janë të plota ose jo.

157
00:10:06,560 --> 00:10:08,470
Kjo është një mënyrë për të bërë këtë.

158
00:10:08,470 --> 00:10:13,750
Nëse unë shoh në zbatimin e kësaj, ekranit,

159
00:10:13,750 --> 00:10:21,120
në thelb në qoftë se unë të hyjë në një todo dhe unë shtypni këtë buton toggle

160
00:10:21,120 --> 00:10:25,040
ajo kalon jashtë, kështu që çdo send në këtë listë ka as një të plotë

161
00:10:25,040 --> 00:10:31,050
shtetërore apo të paplota, dhe unë jam duke përdorur një tjetër grup për të përfaqësuar atë.

162
00:10:31,050 --> 00:10:33,730
>> Në thelb për çdo Todo në atë rrjet todos

163
00:10:33,730 --> 00:10:37,110
ka një artikull në grup të plotë që në thelb tregon

164
00:10:37,110 --> 00:10:39,060
nëse kjo është e plotë apo jo.

165
00:10:39,060 --> 00:10:41,640
Unë kam pasur për të bërë ndryshime mjaft minimale këtij kodi,

166
00:10:41,640 --> 00:10:44,470
kështu që këtu është funksioni ynë addTodo.

167
00:10:44,470 --> 00:10:48,530
Vini re që këtu unë jam i shtyjnë atë mbi array,

168
00:10:48,530 --> 00:10:51,300
dhe atëherë unë jam shtyrë një 0 në atë grup të plotë,

169
00:10:51,300 --> 00:10:57,090
në thelb paralelisht me atë shtytje të re TODO për të thënë

170
00:10:57,090 --> 00:11:00,430
Unë jam duke shtuar këtë artikull, dhe kjo është shoqëruar me këtë vlerë,

171
00:11:00,430 --> 00:11:02,810
që do të thotë se është e paplotë.

172
00:11:02,810 --> 00:11:04,970
Dhe atëherë unë jam rivizatim listën e të-bërë.

173
00:11:04,970 --> 00:11:09,220
Tani, vini re unë kam shtuar këtë funksion drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Kjo merr një shumë të kodit kishim para,

175
00:11:11,760 --> 00:11:15,320
në thelb pastron nga kuti dhe pastaj tërheq të ri të-bërë lista.

176
00:11:15,320 --> 00:11:19,620
Por vini re se brenda kësaj për lak ne jemi duke bërë një pak më shumë tani.

177
00:11:19,620 --> 00:11:25,000
Ne jemi në thelb të kontrolluar nëse pika që korrespondon me Todo ith këtu

178
00:11:25,000 --> 00:11:30,220
është i plotë, dhe ne jemi të sillet ndryshe në këto rrethana 2.

179
00:11:30,220 --> 00:11:32,790
Nëse është e plotë, ne jemi duke shtuar këtë tag del,

180
00:11:32,790 --> 00:11:35,360
e cila në thelb është mënyra që ju mund të merrni atë grevë nëpërmjet efektit

181
00:11:35,360 --> 00:11:38,190
kalimit nga lista për-bërë, nëse është e plotë,

182
00:11:38,190 --> 00:11:42,200
dhe në qoftë se kjo nuk është, ne nuk jemi duke e përfshirë atë.

183
00:11:42,200 --> 00:11:45,030
Dhe kështu kjo lloj kujdeset që,

184
00:11:45,030 --> 00:11:49,140
>> dhe kjo është një mënyrë për të arritur këtë.

185
00:11:49,140 --> 00:11:53,420
Dhe pastaj vini re kur përdoruesi klikimeve një nga këto

186
00:11:53,420 --> 00:11:56,780
ne toggle statusin përfundimit të saj.

187
00:11:56,780 --> 00:12:02,170
Kur përdoruesi klikon, ne do të kundërt nëse ajo është përfunduar apo jo,

188
00:12:02,170 --> 00:12:04,540
dhe pastaj ne do të shlyen atë.

189
00:12:04,540 --> 00:12:06,190
Ky lloj i punimeve.

190
00:12:06,190 --> 00:12:09,860
Ne kemi këto funksione që kryejnë detyrat e tyre,

191
00:12:09,860 --> 00:12:11,730
dhe kjo është në rregull.

192
00:12:11,730 --> 00:12:14,110
A ka ndonjë gjë që ne mund të bëjmë më mirë në lidhje me këtë, pse?

193
00:12:14,110 --> 00:12:18,700
Vini re që ne kemi këto 2 vargjeve globale.

194
00:12:18,700 --> 00:12:23,550
Nëse kjo ishte e C, dhe ne kishim 2 vargjeve se lloj i përfaqësuar

195
00:12:23,550 --> 00:12:25,800
Të dhënat që ishte lloj i lidhur në një farë mënyre

196
00:12:25,800 --> 00:12:30,140
çfarë do që ne përdorim në C për të kombinuar këto 2 fusha

197
00:12:30,140 --> 00:12:35,420
në diçka që encapsulates dy pjesë të informacionit?

198
00:12:35,420 --> 00:12:37,600
Çdokush doni të bëni një sugjerim?

199
00:12:37,600 --> 00:12:39,450
[Student përgjigje padëgjueshme]

200
00:12:39,450 --> 00:12:42,340
>> Pikërisht, kështu që ne mund të përdorin disa lloj struct,

201
00:12:42,340 --> 00:12:44,960
dhe në qoftë se ju mendoni përsëri në, të themi, pset 3,

202
00:12:44,960 --> 00:12:47,350
mos harroni kishim fjalorin, dhe pastaj kemi pasur nëse fjala

203
00:12:47,350 --> 00:12:50,230
ishte në fjalor, dhe të gjitha që informacioni u vënë së bashku

204
00:12:50,230 --> 00:12:52,420
brenda disa strukturën e të dhënave.

205
00:12:52,420 --> 00:12:56,390
Një gjë unë mund të bëj me këtë kod, për të shmangur që këto 2 vargjeve të ndryshme

206
00:12:56,390 --> 00:13:01,760
për copa të ngjashme të informacionit është që unë mund të kombinohen ato në një objekt JavaScript.

207
00:13:01,760 --> 00:13:07,150
Le të hidhni një sy në këtë.

208
00:13:07,150 --> 00:13:11,740
Njoftim Kam vetëm një koleksion në krye tani

209
00:13:11,740 --> 00:13:17,650
dhe atë që unë kam bërë është-dhe kjo është vetëm sintaksa JavaScript për lloj

210
00:13:17,650 --> 00:13:21,350
duke krijuar një version literal të një objekti,

211
00:13:21,350 --> 00:13:24,670
njoftim dhe ka 2 prona, kështu që ne kemi todo,

212
00:13:24,670 --> 00:13:29,660
dhe ajo është mbajtur së bashku me nëse kjo është e plotë ose të paplota.

213
00:13:29,660 --> 00:13:31,000
Ky është kodi shumë të ngjashme.

214
00:13:31,000 --> 00:13:35,310
Ne jemi duke përdorur objekte JavaScript.

215
00:13:35,310 --> 00:13:38,600
Ky lloj i gjërave të përmirësohet.

216
00:13:38,600 --> 00:13:43,850
Ashtu si tani, të gjitha këto fusha të informacionit lidhur mbahen së bashku.

217
00:13:43,850 --> 00:13:46,410
Kur ne shkojmë për të shtypura it out, ne mund të hyni fushat.

218
00:13:46,410 --> 00:13:49,060
>> Vini re se si ne jemi duke bërë todos [I]. Plotë

219
00:13:49,060 --> 00:13:52,880
në vend të kontrolluar koleksion të plotë veç e veç,

220
00:13:52,880 --> 00:13:56,560
dhe vini re, kur ne duam të marrë string për të bërë-ne jemi duke marrë pasurinë e të-bërë

221
00:13:56,560 --> 00:13:58,750
e atij TODO, kështu që ky lloj i ka kuptim, sepse

222
00:13:58,750 --> 00:14:01,660
çdo send ka këto veti të perceptuar në lidhje me të.

223
00:14:01,660 --> 00:14:05,650
Ajo ka një todo, dhe ajo ka nëse kjo është e plotë apo jo.

224
00:14:05,650 --> 00:14:11,540
Jo shumë shumë ndryshime atje funksionalisht, vetëm shtuar disa më shumë për kodin.

225
00:14:11,540 --> 00:14:13,430
Ky është një përmirësim në disa fronte, e drejtë?

226
00:14:13,430 --> 00:14:16,030
Unë do të thotë, ne faktorizohen nga hartimin e një grimë.

227
00:14:16,030 --> 00:14:20,350
Tani ne kemi objekte të encapsulate thelb këto të dhëna.

228
00:14:20,350 --> 00:14:27,130
A ka ndonjë gjë më shumë ne mund të bëjmë nga këtu në drejtim të JavaScript?

229
00:14:27,130 --> 00:14:31,810
Ashtu si njoftim se ky kod të drejtë këtu

230
00:14:31,810 --> 00:14:34,760
për marrjen e HTML e brendshme e një div

231
00:14:34,760 --> 00:14:40,520
është pak, unë mendoj, të gjatë.

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

233
00:14:45,100 --> 00:14:48,400
Një gjë që ne mund të bëni për të bërë këtë kod duket pak miqësore

234
00:14:48,400 --> 00:14:51,450
kështu që unë nuk do të duhet të mbajë scrolling majtë dhe të djathtë, mbrapa dhe me radhë,

235
00:14:51,450 --> 00:14:58,480
është që unë mund të përdorni një bibliotekë si jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Le të shikoni Seminar 2,

237
00:15:02,710 --> 00:15:05,880
dhe ky është kodi i njëjtë, por ajo është bërë me jQuery.

238
00:15:05,880 --> 00:15:08,790
Ju mund të mos jetë shumë e njohur me jQuery,

239
00:15:08,790 --> 00:15:11,510
por vetëm e di se jQuery është lloj i një bibliotekë JavaScript për

240
00:15:11,510 --> 00:15:15,910
që e bën më të lehtë për të bërë gjëra të tilla si elemente të veçanta qasjen e DOM.

241
00:15:15,910 --> 00:15:21,280
Këtu në vend të thënë document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Unë mund të përdorin rrugën shumë më të pastra në jQuery,

243
00:15:25,210 --> 00:15:28,490
e cila është vetëm për të përdorur selectors.

244
00:15:28,490 --> 00:15:31,300
Siç mund ta shikoni, ky kod ka marrë një pastruese pak,

245
00:15:31,300 --> 00:15:35,770
shumë të ngjashme funksionalisht, por kjo është ideja.

246
00:15:35,770 --> 00:15:37,980
Ne kemi parë një çift të gjëra deri më tani,

247
00:15:37,980 --> 00:15:42,010
kështu që kemi filluar me implementimin e vetëm të papërpunuara JavaScript.

248
00:15:42,010 --> 00:15:45,370
Ne kemi shtuar karakteristika të reja dhe tregoi se si ne mund të përmirësojmë atë me

249
00:15:45,370 --> 00:15:49,090
vetëm atë që kemi në JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> A ka dikush të shoh ndonjë vështirësi me këtë dizajn?

251
00:15:53,300 --> 00:16:01,090
Gjegjësisht, unë mendoj apo jo-domosdoshmërisht vështirësi, por le të themi

252
00:16:01,090 --> 00:16:04,830
ne nuk ishin duke bërë një projekt për të bërë listë, dhe nesër ne kemi vendosur

253
00:16:04,830 --> 00:16:10,320
ne të kërkuar për të bërë një listë ushqimore ose një listë pazar projekt.

254
00:16:10,320 --> 00:16:14,150
Një shumë nga këto karakteristika janë shumë të ngjashme.

255
00:16:14,150 --> 00:16:19,080
Një shumë nga gjërat që ne duam të dalim nga JavaScript janë shumë të zakonshme,

256
00:16:19,080 --> 00:16:23,820
dhe kjo nënvizon nevojën për një lloj i mënyrës së

257
00:16:23,820 --> 00:16:25,670
duke e bërë këtë më të lehtë për të bërë.

258
00:16:25,670 --> 00:16:30,400
Unë kisha për të ndërtuar gjithë këtë qasje HTML, tërë këtë qasje DOM,

259
00:16:30,400 --> 00:16:35,530
si unë jam duke shkuar për të përfaqësuar në listë për-bëjnë me këtë model.

260
00:16:35,530 --> 00:16:39,130
Dhe vini re unë jam përgjegjës si zhvilluesi JavaScript

261
00:16:39,130 --> 00:16:42,890
për mbajtjen e HTML dhe JavaScript që kam në sync.

262
00:16:42,890 --> 00:16:48,040
Asgjë nuk bëhet automatikisht se përfaqësimi JavaScript

263
00:16:48,040 --> 00:16:51,590
ose për të bërë listë të merrni shtyrë në HTML.

264
00:16:51,590 --> 00:16:54,000
Asgjë nuk zbatohen se përveç për mua.

265
00:16:54,000 --> 00:16:56,880
Unë kisha për të shkruar barazim për të-bërë lista funksion.

266
00:16:56,880 --> 00:17:01,650
Dhe kjo nuk mund të jetë-Unë do të thotë, është e arsyeshme për të bërë këtë,

267
00:17:01,650 --> 00:17:03,670
por ajo mund të jetë i lodhshëm ndonjëherë.

268
00:17:03,670 --> 00:17:08,190
Nëse ju keni një projekti më të madh, që mund të jetë e vështirë.

269
00:17:08,190 --> 00:17:10,720
>> Kornizat, një nga qëllimet e kornizave

270
00:17:10,720 --> 00:17:14,060
është për të lehtësuar këtë proces dhe lloj të faktorit jashtë

271
00:17:14,060 --> 00:17:16,950
këto zakonshme-I guess ju mund të thonë-design modelet

272
00:17:16,950 --> 00:17:20,700
që njerëzit në përgjithësi kanë një lloj mënyrë për të përfaqësojnë të dhënat,

273
00:17:20,700 --> 00:17:25,599
nëse kjo është një listë e miq, nëse kjo është informacioni hartë

274
00:17:25,599 --> 00:17:27,280
apo diçka, ose një për-bërë lista.

275
00:17:27,280 --> 00:17:30,660
Disa njerëz kanë përgjithësisht një mënyrë për të përfaqësuar informacion,

276
00:17:30,660 --> 00:17:33,650
dhe ata në përgjithësi kanë nevojë për të mbajtur atë lloj informacioni të në sync

277
00:17:33,650 --> 00:17:36,520
midis asaj që sheh përdoruesi në një lloj të mendimit,

278
00:17:36,520 --> 00:17:39,850
duke folur në kushtet e si kontrollues view modelit që ju keni parë në leksion,

279
00:17:39,850 --> 00:17:45,400
dhe pastaj modeli, e cila në këtë rast është kjo array JavaScript.

280
00:17:45,400 --> 00:17:49,020
Kornizat na japin një mënyrë për të zgjidhur këtë problem.

281
00:17:49,020 --> 00:17:53,080
Tani le të marrin një vështrim në zbatimin e kësaj për-bërë listën

282
00:17:53,080 --> 00:18:02,360
në një kuadër të quajtur angularjs.

283
00:18:02,360 --> 00:18:04,650
Kjo është ajo. Vini re se kjo i përshtatet në një rrëshqitje.

284
00:18:04,650 --> 00:18:07,330
Unë nuk duhet të lëvizni në të majtë dhe të djathtë.

285
00:18:07,330 --> 00:18:10,460
Kjo ndoshta nuk është një arsye e madhe për të rekomandojë duke përdorur një kornizë,

286
00:18:10,460 --> 00:18:20,120
Njoftimi por jam unë ndonjëherë qasja elementet individuale HTML këtu?

287
00:18:20,120 --> 00:18:22,400
Unë jam duke shkuar kurrë në DOM?

288
00:18:22,400 --> 00:18:26,120
A shihni ndonjë document.getElementById ose diçka të tillë?

289
00:18:26,120 --> 00:18:29,870
Jo, kjo është e shkuar.

290
00:18:29,870 --> 00:18:35,590
>> Këndor na ndihmon të mbani DOM dhe JavaScript përfaqësimin tonë të diçkaje

291
00:18:35,590 --> 00:18:40,430
lloj në sync, kështu që nëse ajo nuk është në dosjen js,

292
00:18:40,430 --> 00:18:46,790
në qoftë se nuk ka asnjë mënyrë për të marrë programuar për të gjithë përmbajtjen që HTML

293
00:18:46,790 --> 00:18:51,800
nga JavaScript sesi jemi duke mbajtur këtë në sync?

294
00:18:51,800 --> 00:18:58,160
Nëse nuk është në dosje. Js, ai e mori të jetë në HTML, e drejtë?

295
00:18:58,160 --> 00:19:01,910
Ky është versioni i ri i skedar HTML,

296
00:19:01,910 --> 00:19:04,660
dhe vini re ne kemi shtuar një shumë këtu.

297
00:19:04,660 --> 00:19:11,110
Vini re ka këto atribute të reja që thonë se ng-click dhe ng-përsëritur.

298
00:19:11,110 --> 00:19:15,650
Qasja këndor për zgjidhjen e këtij problemi të vështirësive në hartimin

299
00:19:15,650 --> 00:19:19,130
është në thelb të bëjë shumë më të fuqishme HTML.

300
00:19:19,130 --> 00:19:24,420
Këndor është një mënyrë për të lejuar ju që të bëni HTML disi më ekspresive.

301
00:19:24,420 --> 00:19:30,520
Për shembull, unë mund të them se unë jam duke shkuar për të lidhë ose ta detyrojë këtë kutinë e tekstit

302
00:19:30,520 --> 00:19:35,080
në një variabël brenda kodit këndor tim JavaScript.

303
00:19:35,080 --> 00:19:37,030
Kjo ng-model e bën vetëm se.

304
00:19:37,030 --> 00:19:41,550
Kjo në thelb thotë se pika brenda këtij kutinë e tekstit,

305
00:19:41,550 --> 00:19:45,000
vetëm që e lidhin me new_todo_description ndryshueshme

306
00:19:45,000 --> 00:19:47,870
brenda kodit JavaScript.

307
00:19:47,870 --> 00:19:51,600
Kjo është shumë e fuqishme, sepse unë nuk kanë për të shkuar në mënyrë eksplicite

308
00:19:51,600 --> 00:19:53,310
DOM për të marrë këtë informacion.

309
00:19:53,310 --> 00:19:56,250
Unë nuk kam për të thënë document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Unë nuk kam për të përdorur jQueries si qasje DOM.

311
00:19:58,750 --> 00:20:03,280
Unë mund të shoqërojnë atë me një ndryshore, dhe pastaj kur unë të ndryshojë që të ndryshueshme

312
00:20:03,280 --> 00:20:07,400
brenda JavaScript ajo është mbajtur në sync me HTML,

313
00:20:07,400 --> 00:20:11,640
kështu që thjeshton procesin e të pasurit për të shkuar mbrapa dhe me radhë në mes të dy.

314
00:20:11,640 --> 00:20:18,260
A ka kuptim që e bëjnë?

315
00:20:18,260 --> 00:20:22,060
>> Dhe nuk ka asnjë njoftim Kodi HTML qasje.

316
00:20:22,060 --> 00:20:27,760
Ne kemi bërë vetëm HTML më të fuqishme,

317
00:20:27,760 --> 00:20:32,070
dhe tani, për shembull, ne mund të bëjmë gjëra të tilla si kjo,

318
00:20:32,070 --> 00:20:38,610
si kur ju klikoni mbi këtë, telefononi këtë funksion brenda fushëveprimit të todos.js,

319
00:20:38,610 --> 00:20:43,410
dhe ne mund ta bëjë këtë më parë, por ka gjëra të tjera, si ky modeli-shqip,

320
00:20:43,410 --> 00:20:47,020
dhe këtë njoftim ng-përsëritje.

321
00:20:47,020 --> 00:20:51,520
Çfarë mendoni se e bën këtë?

322
00:20:51,520 --> 00:20:54,390
Këtu është lista jonë e renditura nga më parë.

323
00:20:54,390 --> 00:20:56,470
Ne kemi tags UL,

324
00:20:56,470 --> 00:21:03,710
por unë jam bërë ndonjëherë atë listë brenda kodit JavaScript?

325
00:21:03,710 --> 00:21:09,280
Unë nuk jam kurrë në mënyrë eksplicite pasqyrim atë listë.

326
00:21:09,280 --> 00:21:11,580
Si e bën këtë punë?

327
00:21:11,580 --> 00:21:16,410
E pra, mënyra këndor realizon këtë është kjo quhet një përsëritës.

328
00:21:16,410 --> 00:21:22,760
Në thelb kjo thotë se unë dua të printuar këtë HTML

329
00:21:22,760 --> 00:21:26,240
për çdo Todo brendësi të todos array tim.

330
00:21:26,240 --> 00:21:31,850
Brenda todos.jr ka një koleksion të todos të drejtë këtu,

331
00:21:31,850 --> 00:21:37,910
dhe kjo do të tregojë këndor shkojnë nëpër atë grup, dhe për çdo element që ju shihni

332
00:21:37,910 --> 00:21:41,390
Unë dua që ju të shtypura këtë HTML.

333
00:21:41,390 --> 00:21:44,620
Kjo është lloj i tmerrshëm, sepse unë vetëm mund ta bëjë këtë

334
00:21:44,620 --> 00:21:47,760
pa pasur nevojë për të shkruar një për lak,

335
00:21:47,760 --> 00:21:52,250
e cila për një listë të-bërë që ishte vetëm 30 rreshta të kodit

336
00:21:52,250 --> 00:21:54,700
nuk mund të jetë gjëja më e dobishme,

337
00:21:54,700 --> 00:22:01,240
por në qoftë se ju keni një projekt të madh, kjo mund të merrni shumë i përshtatshëm.

338
00:22:01,240 --> 00:22:06,100
>> Kjo është një zgjidhje për këtë problem, duke e bërë më të fuqishme HTML,

339
00:22:06,100 --> 00:22:10,820
dhe që na lejon të mbani JavaScript dhe HTML në sync.

340
00:22:10,820 --> 00:22:13,220
Ka mënyra të tjera të mundshme për të zgjidhur këtë problem,

341
00:22:13,220 --> 00:22:15,320
dhe jo çdo kornizë e bën këtë.

342
00:22:15,320 --> 00:22:17,720
Jo çdo kuadri punon përgjatë këtyre linjave.

343
00:22:17,720 --> 00:22:19,490
Disa kornizat kanë qasje të ndryshme,

344
00:22:19,490 --> 00:22:23,310
dhe ju mund të gjeni se ju të gëzojnë kodim në një kuadër mbi tjetrin.

345
00:22:23,310 --> 00:22:26,160
Le të shikojmë në një më shumë.

346
00:22:26,160 --> 00:22:30,060
Kjo është për-bërë lista e koduar deri në një kuadër të quajtur Backbone.

347
00:22:30,060 --> 00:22:33,250
Unë jam duke shkuar për të shkuar nëpër këtë shpejt.

348
00:22:33,250 --> 00:22:38,300
Unë do të fillojë me HTML para se të shkojmë atje.

349
00:22:38,300 --> 00:22:40,290
Një sekondë.

350
00:22:40,290 --> 00:22:43,950
Duke filluar me HTML, si ju njoftim, HTML ynë është shumë i ngjashëm

351
00:22:43,950 --> 00:22:50,000
në atë që ishte më parë, kështu që nuk është shumë i ri në këtë front.

352
00:22:50,000 --> 00:22:55,410
Por fotografinë js ynë është pak më ndryshe.

353
00:22:55,410 --> 00:23:00,360
Lloj shtylla kurrizore e ka këtë ide, ose bazohet në idenë

354
00:23:00,360 --> 00:23:04,750
se një shumë të asaj që ne bëjmë me të, të themi, JavaScript tanë projekte

355
00:23:04,750 --> 00:23:09,110
po mendoj rreth modeleve dhe koleksione të këtyre modeleve.

356
00:23:09,110 --> 00:23:12,510
Kjo mund të jetë, për shembull, një foto dhe koleksione të fotografive,

357
00:23:12,510 --> 00:23:16,230
apo ideja e një mik dhe koleksionet e miqve.

358
00:23:16,230 --> 00:23:20,700
Dhe shumë herë kur ne jemi programimin e aplikimeve JavaScript

359
00:23:20,700 --> 00:23:25,340
ne do lloj të përfaqësojnë idenë e të paturit e një koleksion të miqve

360
00:23:25,340 --> 00:23:29,500
fare mënyre në JavaScript, dhe Backbone na jep këtë shtresë

361
00:23:29,500 --> 00:23:33,040
në krye të vargjeve ekzistuese JavaScript-së dhe objekteve të

362
00:23:33,040 --> 00:23:38,300
për të bërë gjëra më të fuqishme me atë më të lehtë.

363
00:23:38,300 --> 00:23:41,870
>> Këtu unë kam përcaktuar një model për-bërë,

364
00:23:41,870 --> 00:23:44,630
dhe ju nuk keni për t'u shqetësuar shumë rreth sintaksës,

365
00:23:44,630 --> 00:23:48,730
por vini re se ajo është një nga vetitë e kjo?

366
00:23:48,730 --> 00:23:53,190
Ajo ka një fushë default.

367
00:23:53,190 --> 00:23:56,640
Backbone lejon mua që të specifikojë tashmë off bat

368
00:23:56,640 --> 00:24:00,190
ndonjë të re për të-bërë që unë të krijojë do të ketë këto standarte.

369
00:24:00,190 --> 00:24:04,100
Tani unë mund të rregulloje këtë, por duke qenë në gjendje të përcaktojë standarte

370
00:24:04,100 --> 00:24:07,220
është e bukur, dhe kjo është lloj i përshtatshëm, sepse kjo nuk është diçka që është si

371
00:24:07,220 --> 00:24:10,430
qenësishme në JavaScript, dhe tani unë nuk kanë për të në mënyrë eksplicite

372
00:24:10,430 --> 00:24:12,430
thonë se todos janë të plota.

373
00:24:12,430 --> 00:24:19,190
Unë mund të them të drejtën off bat që todos do të të shënohet si i paplotë.

374
00:24:19,190 --> 00:24:21,300
Njoftim atëherë çfarë është kjo?

375
00:24:21,300 --> 00:24:25,520
Tani unë kam një listë të-bërë, dhe kjo është një koleksion.

376
00:24:25,520 --> 00:24:30,960
Njoftim fushën lidhur me që thotë se modeli todo.

377
00:24:30,960 --> 00:24:33,390
Kjo është rruga ime e thënë shtyllës kurrizore që

378
00:24:33,390 --> 00:24:37,350
Unë jam duke shkuar për të të menduarit në lidhje me një koleksion të këtyre todos individuale.

379
00:24:37,350 --> 00:24:42,140
Kjo është në thelb struktura model për programin tim.

380
00:24:42,140 --> 00:24:44,980
Këtu unë kam këtë idenë e një koleksion,

381
00:24:44,980 --> 00:24:48,960
dhe në thelb sende të përfshira në atë koleksion jemi të gjithë do të jenë këto todos,

382
00:24:48,960 --> 00:24:51,910
dhe se është shumë e natyrshme në këtë kuptim

383
00:24:51,910 --> 00:24:59,890
sepse unë nuk kanë todos, dhe unë kam ato në një koleksion.

384
00:24:59,890 --> 00:25:02,940
>> Le të shikojmë në një pak më shumë për këtë.

385
00:25:02,940 --> 00:25:05,900
Këtu është një pamje Backbone.

386
00:25:05,900 --> 00:25:08,890
Gjë tjetër që Backbone thotë është se

387
00:25:08,890 --> 00:25:14,660
një shumë prej modeleve që ju jeni duke menduar rreth saj ose edhe koleksionet

388
00:25:14,660 --> 00:25:19,150
do të duhet të ketë disa mënyra e duke u shfaqur.

389
00:25:19,150 --> 00:25:21,900
Ne duhet të bëjnë që për-bërë lista,

390
00:25:21,900 --> 00:25:25,460
dhe nuk do të jetë mirë nëse ne mund të sigurojë për çdo model

391
00:25:25,460 --> 00:25:28,390
ose shok me çdo model këtë pikëpamje

392
00:25:28,390 --> 00:25:34,020
që na lejon të mendoj lidhë dy së ​​bashku?

393
00:25:34,020 --> 00:25:38,320
Ndërsa para se të kishte për të përdorur një për lak që do të kandidojë përmes

394
00:25:38,320 --> 00:25:41,130
çdo todo në listën tonë dhe pastaj të shtypura it out këtu

395
00:25:41,130 --> 00:25:44,650
Ne thelb mund të lidheni atë me këtë model.

396
00:25:44,650 --> 00:25:47,550
Kjo është një për-bërë view.

397
00:25:47,550 --> 00:25:50,550
Kjo lidhet me Todo kemi gjetur më parë.

398
00:25:50,550 --> 00:25:54,940
Tani çdo todo është displayable ose renderable

399
00:25:54,940 --> 00:25:56,960
me këtë për-bërë pikëpamje.

400
00:25:56,960 --> 00:25:59,440
Vini re disa nga fushat.

401
00:25:59,440 --> 00:26:05,880
Çfarë mendoni se kjo tagName është, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Të ruaj të para, kur ne të kërkuar për të marrë një todo

403
00:26:09,790 --> 00:26:16,700
ne do të duhet të në mënyrë eksplicite palë todos tanë me këtë tag li.

404
00:26:16,700 --> 00:26:21,080
Tani ne jemi duke thënë se ku kjo todo është duke shkuar për të jetuar

405
00:26:21,080 --> 00:26:25,250
do të jetë në brendësi të një tag li.

406
00:26:25,250 --> 00:26:31,440
Dhe tani ne jemi edhe shoqërimin ngjarjet me todos tona.

407
00:26:31,440 --> 00:26:34,320
>> Çdo todo ka këtë ngjarje një.

408
00:26:34,320 --> 00:26:38,480
Nëse ju klikoni pretty much butonin toggle, kjo është ajo që unë jam duke thënë atje,

409
00:26:38,480 --> 00:26:43,080
atëherë në thelb të shënojë todo si e kundërta e asaj që ishte më parë

410
00:26:43,080 --> 00:26:45,890
dhe pastaj ri-bëjnë kërkesën.

411
00:26:45,890 --> 00:26:47,810
This është lloj i ngjashëm me kodin e para.

412
00:26:47,810 --> 00:26:50,730
Mos harroni kur kemi shënuar atë si as kundërta or-

413
00:26:50,730 --> 00:26:52,410
dhe pastaj kemi ri-dhënë atë.

414
00:26:52,410 --> 00:26:57,750
Por vini re tani këtë ngjarje përdorur të jetë diçka që ishte në HTML.

415
00:26:57,750 --> 00:26:59,640
Ai ishte ulur atje.

416
00:26:59,640 --> 00:27:01,410
Button kishte një klikoni mbi.

417
00:27:01,410 --> 00:27:05,310
Kur ju klikoni butonin, ajo lloj i bën sende për

418
00:27:05,310 --> 00:27:07,210
ngritur që todo të jenë të paplota.

419
00:27:07,210 --> 00:27:11,180
Këtu ne kemi lidhur atë ngjarje të klikuar butonin toggle

420
00:27:11,180 --> 00:27:15,830
dhe të përmbysur nëse kjo është në ose off me këtë pikëpamje.

421
00:27:15,830 --> 00:27:20,480
>> Kjo është një mënyrë e mirë për ngritjen e kësaj ngjarje në mënyrë që ajo është shumë e lidhur fort

422
00:27:20,480 --> 00:27:26,980
kësaj pikëpamjeje, dhe kështu me këtë njoftim një më shumë.

423
00:27:26,980 --> 00:27:31,050
Unë kam këtë metodë render, dhe ne nuk duhet të kalojnë nëpër detaje.

424
00:27:31,050 --> 00:27:33,650
Kjo është lloj i ngjashëm me atë që kishim para,

425
00:27:33,650 --> 00:27:36,070
por vini re unë nuk jam looping përmes asgjë.

426
00:27:36,070 --> 00:27:40,700
Unë nuk jam shtypjen që tag ul që është lloj i thënë se unë jam duke shkuar për të shtypur të gjitha elementet.

427
00:27:40,700 --> 00:27:46,610
Unë jam duke ofruar funksionalitet për dhënien këtë një për-bërë pika.

428
00:27:46,610 --> 00:27:49,400
Ky është një koncept shumë i fuqishëm, sepse në thelb

429
00:27:49,400 --> 00:27:53,600
Lista e të-bërë ynë përbëhet nga të gjitha këto todos, dhe në qoftë se ne në thelb mund të specifikojë

430
00:27:53,600 --> 00:27:56,890
mënyrë që të merr njërin prej atyre todos

431
00:27:56,890 --> 00:28:04,230
atëherë ne mund të kemi boshtin tonë të fuqishëm në vetvete merr të gjitha të todos

432
00:28:04,230 --> 00:28:07,760
duke telefonuar metodën e dhënë mbi todos individuale.

433
00:28:07,760 --> 00:28:14,180
Ky është një koncept që është e dobishme këtu.

434
00:28:14,180 --> 00:28:18,160
Tani një pyetje e mirë është për të pyetur se si është kjo kërkesë u vënë së bashku?

435
00:28:18,160 --> 00:28:21,200
Sepse ne kemi mundësinë që të merr një todo,

436
00:28:21,200 --> 00:28:23,860
por si nuk kemi marrë idenë e todos shumta?

437
00:28:23,860 --> 00:28:25,100
>> Le të hidhni një sy në këtë.

438
00:28:25,100 --> 00:28:27,100
Kjo është pjesa e fundit.

439
00:28:27,100 --> 00:28:29,740
Vini re ne kemi një pamje të-bërë lista këtu,

440
00:28:29,740 --> 00:28:34,440
dhe vini re kjo është gjithashtu një pikëpamje.

441
00:28:34,440 --> 00:28:36,970
Dhe për të shkuar mbi disa gjëra,

442
00:28:36,970 --> 00:28:45,280
kjo metodë nisja do të quhet kur ne së pari të krijojë këtë listë për të-bërë.

443
00:28:45,280 --> 00:28:52,630
Siç mund ta shikoni, kjo është si krijimin e listës për-bërë dhe shoqërimin atë me këtë pikëpamje.

444
00:28:52,630 --> 00:28:57,860
Dhe pastaj kam shtuar funksionet këtu kështu që në thelb, kur ju të shtoni një artikull-

445
00:28:57,860 --> 00:29:01,440
kjo është e ngjashme me metodën addItem pamë para-

446
00:29:01,440 --> 00:29:07,430
Unë jam duke shkuar për të krijuar një objekt të ri TODO, dhe vini re unë jam në të vërtetë duke bërë thirrje

447
00:29:07,430 --> 00:29:13,080
Ky i ri metodë todo, kështu që kjo është dhënë nga shtylla kurrizore,

448
00:29:13,080 --> 00:29:16,010
dhe unë mund të kalojë në pronat e mia këtu.

449
00:29:16,010 --> 00:29:23,710
Dhe tani çdo todo që unë krijoj përdorur këtë do të merrni atë funksionalitetin që pamë para.

450
00:29:23,710 --> 00:29:28,140
Njoftim unë jam pastrimin nga kutinë e tekstit para-pak më të vogël detaje

451
00:29:28,140 --> 00:29:32,900
dhe atëherë unë jam duke shtuar këtë koleksion.

452
00:29:32,900 --> 00:29:37,630
>> Kjo pothuajse duket i çuditshëm, sepse para se ne vetëm kishte për të bërë atë todos.push,

453
00:29:37,630 --> 00:29:43,310
dhe pastaj ne ishim bërë, dhe kjo mund të duket shumë e komplikuar për këtë projekt të veçantë,

454
00:29:43,310 --> 00:29:46,980
dhe ju mund të gjeni se shtylla kurrizore apo edhe këndor ose çfarëdo kornize tjera

455
00:29:46,980 --> 00:29:50,790
nuk i përshtaten projektit tuaj të veçantë, por unë mendoj se është e rëndësishme që të mendojnë për

456
00:29:50,790 --> 00:29:54,100
Çfarë kjo do të thotë në një shkallë më të madhe për projekte më të mëdha,

457
00:29:54,100 --> 00:29:56,610
sepse në qoftë se kemi pasur një projekt të madh ku ne ishim përfaqëson

458
00:29:56,610 --> 00:30:00,860
disa koleksion të vërtetë komplekse, diçka më e thellë se vetëm një listë të-bërë,

459
00:30:00,860 --> 00:30:04,490
le të themi një listë miqtë apo diçka të tillë, kjo mund të vijë në volitshëm

460
00:30:04,490 --> 00:30:09,620
sepse ne mund të organizojë kodin tonë në një mënyrë të vërtetë i përshtatshëm,

461
00:30:09,620 --> 00:30:12,550
në një mënyrë që do ta bënte më të lehtë për dikë tjetër

462
00:30:12,550 --> 00:30:16,820
që donte të marr një projekt për të ndërtuar mbi të.

463
00:30:16,820 --> 00:30:21,450
Ju mund të shihni se kjo siguron një shumë të strukturës.

464
00:30:21,450 --> 00:30:26,580
Dhe atëherë unë jam duke e quajtur bëjnë në këtë addItem.

465
00:30:26,580 --> 00:30:31,050
Render, si ju mund të shihni, dhe ju nuk keni për t'a përdorur këtë sintaksë të plotë,

466
00:30:31,050 --> 00:30:37,790
por në thelb për çdo model është duke shkuar për të thirrur metodën individuale render.

467
00:30:37,790 --> 00:30:41,500
Kjo është lloj i ku kjo vjen nga.

468
00:30:41,500 --> 00:30:44,140
Le të vetëm të specifikojë se sa që të merr todos individuale,

469
00:30:44,140 --> 00:30:47,310
dhe pastaj le të zam ata së bashku si një e tërë.

470
00:30:47,310 --> 00:30:49,810
Por kjo siguron një mënyrë të abstraksionit,

471
00:30:49,810 --> 00:30:55,470
sepse unë mund të ndryshojë mënyrën se si unë të vendosë që të merr todos individuale,

472
00:30:55,470 --> 00:30:57,940
dhe unë nuk do të duhet të ndryshojë ndonjë të këtij kodi.

473
00:30:57,940 --> 00:31:00,700
Kjo është lloj i ftohtë.

474
00:31:00,700 --> 00:31:08,540
>> A ka dikush ndonjë pyetje në lidhje me kornizat JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Pyetja Student padëgjueshme]

476
00:31:14,310 --> 00:31:16,050
Oh, i sigurt, kjo është një pyetje e madhe.

477
00:31:16,050 --> 00:31:19,080
Pyetja ishte si nuk kam përfshijnë kornizat?

478
00:31:19,080 --> 00:31:22,970
Kornizat Shumica JavaScript janë në thelb vetëm fotografi js

479
00:31:22,970 --> 00:31:25,740
që ju mund të përfshijë në krye të kodit tuaj.

480
00:31:25,740 --> 00:31:29,830
Vini re në pjesën e kreut të HTML tim unë kam të gjitha këto tags script,

481
00:31:29,830 --> 00:31:34,250
dhe tag përfundimtar dorëshkrim është kodi që ne kemi shkruar.

482
00:31:34,250 --> 00:31:38,820
Dhe pastaj 3 kodet kuadri janë vetëm edhe tags script.

483
00:31:38,820 --> 00:31:42,110
Unë jam i përfshirë ata nga ajo që quhet një CDN,

484
00:31:42,110 --> 00:31:46,200
e cila lejon mua për të marrë atë nga dikush tjetër në këtë pikë

485
00:31:46,200 --> 00:31:57,930
por çdo kuadri ka këtë, ju mund të pretty much gjeni përmbajtjen

486
00:31:57,930 --> 00:32:03,540
për një bibliotekë të veçantë JavaScript në dispozicion në disa CDN ose diçka si kjo,

487
00:32:03,540 --> 00:32:05,570
dhe pastaj ju mund të përfshijnë këto tags script.

488
00:32:05,570 --> 00:32:07,600
A ka kuptim që e bëjnë?

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

490
00:32:09,500 --> 00:32:11,730
>> Ata janë 2 qasjeve të ndryshme.

491
00:32:11,730 --> 00:32:14,640
Ata nuk janë qasjet e vetme për zgjidhjen e këtij problemi.

492
00:32:14,640 --> 00:32:17,080
Ka shumë gjëra të ndryshme që

493
00:32:17,080 --> 00:32:19,490
dikush mund të bëjë, dhe nuk janë kornizat shumë atje.

494
00:32:19,490 --> 00:32:23,300
Këndore dhe Backbone nuk tregojnë histori e tërë.

495
00:32:23,300 --> 00:32:26,370
Good luck me projektet tuaja formës së prerë, dhe thank you very much.

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