1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [Cadrele JavaScript: De ce și cum]

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

3
00:00:04,000 --> 00:00:06,960
[Aceasta este CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hi, toata lumea. Bine ați venit la seminar cadre JavaScript.

5
00:00:10,630 --> 00:00:14,910
Numele meu este Kevin, și astăzi am de gând să fie vorba despre cadrele JavaScript,

6
00:00:14,910 --> 00:00:20,400
și scopul acestui seminar nu este de a ajunge la, să zicem, comandantul unui cadru special pe sine

7
00:00:20,400 --> 00:00:23,810
dar pentru a vă oferi o introducere largă pentru un cuplu de cadre

8
00:00:23,810 --> 00:00:27,150
și arată de ce ne-ar dori vreodată să utilizați un cadru.

9
00:00:27,150 --> 00:00:31,060
>> Înainte de a face acest lucru, voi oferi un pic de fond de JavaScript,

10
00:00:31,060 --> 00:00:33,750
și apoi vom lua de acolo.

11
00:00:33,750 --> 00:00:36,270
Vom începe prin punerea în aplicare a unei liste a-do.

12
00:00:36,270 --> 00:00:39,330
Iată lista noastră de sarcini pentru ziua de azi.

13
00:00:39,330 --> 00:00:41,990
E un fel de amuzant. Trebuie să pună în aplicare o lista de-a face în JavaScript.

14
00:00:41,990 --> 00:00:45,110
Aceasta este ceea ce se va arăta, așa că e primul nostru obiectiv.

15
00:00:45,110 --> 00:00:47,160
Noi nu suntem de gând să utilizeze un cadru pentru a face acest lucru.

16
00:00:47,160 --> 00:00:51,930
Vom cod JavaScript și pentru a obține lista de probleme de la locul de muncă.

17
00:00:51,930 --> 00:00:54,370
Apoi, vom îmbunătăți designul fără a utiliza un cadru.

18
00:00:54,370 --> 00:00:57,190
Vom discuta despre diverse lucruri pe care le putem face doar cu JavaScript singur

19
00:00:57,190 --> 00:01:00,650
pentru a face noastre de a-do list un pic mai bine concepute.

20
00:01:00,650 --> 00:01:02,490
Apoi, vom arunca în unele jQuery,

21
00:01:02,490 --> 00:01:05,030
si apoi ne vom uita la acelasi să-do list,

22
00:01:05,030 --> 00:01:07,170
doar implementate în cadre diferite, și vom discuta

23
00:01:07,170 --> 00:01:09,280
 argumente pro și contra de-a lungul drum.

24
00:01:09,280 --> 00:01:12,040
>> Să începem de punere în aplicare care să-do list.

25
00:01:12,040 --> 00:01:14,270
Să presupunem că suntem dat acest cod HTML.

26
00:01:14,270 --> 00:01:16,620
Am de gând să facă acest lucru un pic mai mic.

27
00:01:16,620 --> 00:01:19,300
După cum puteți vedea, am un antet mic care spune Todo

28
00:01:19,300 --> 00:01:21,740
și o cutie mica unde pot introduce o descriere a unei todo

29
00:01:21,740 --> 00:01:26,990
și apoi un buton nou element, astfel încât să încercați să introduceți un nou todo la această listă.

30
00:01:26,990 --> 00:01:31,000
Oferă un seminar cadre JavaScript,

31
00:01:31,000 --> 00:01:33,090
și eu sunt la lovit element nou.

32
00:01:33,090 --> 00:01:35,730
I a lua această alertă JavaScript care spune aplicare mine.

33
00:01:35,730 --> 00:01:37,560
Trebuie să-l pună în aplicare.

34
00:01:37,560 --> 00:01:41,490
Să verificăm codul pentru aceasta, atât HTML și JavaScript.

35
00:01:41,490 --> 00:01:43,260
Iată HTML nostru.

36
00:01:43,260 --> 00:01:45,500
După cum puteți vedea aici, aici e antet micul nostru Todos.

37
00:01:45,500 --> 00:01:47,620
Asta a fost chestia aia îndrăzneț în partea de sus,

38
00:01:47,620 --> 00:01:50,690
și apoi ne-am caseta de intrare cu substituent,

39
00:01:50,690 --> 00:01:59,460
și apoi există un anumit atribut al acestui buton care solicită această funcție addTodo.

40
00:01:59,460 --> 00:02:05,460
Vrea cineva să ghicească ceea ce pe clic este ceea ce înseamnă?

41
00:02:05,460 --> 00:02:07,390
[Student răspuns inaudibil]

42
00:02:07,390 --> 00:02:09,289
Bine, pe clic este ca un fel de eveniment,

43
00:02:09,289 --> 00:02:12,120
ca făcând clic pe mouse-ul este doar un eveniment, și ceea ce facem noi

44
00:02:12,120 --> 00:02:16,890
este ne leagă cazul clic pe acest buton pentru a executa această funcție.

45
00:02:16,890 --> 00:02:21,700
AddTodo este acest handler eveniment pentru a face clic pe acel buton.

46
00:02:21,700 --> 00:02:25,010
>> După cum puteți vedea, atunci când faceți clic pe butonul element nou

47
00:02:25,010 --> 00:02:29,940
evenimentul click pe e concediat, iar această funcție se numește.

48
00:02:29,940 --> 00:02:33,170
Să ne uităm la funcția.

49
00:02:33,170 --> 00:02:36,260
După cum puteți vedea, aici e codul meu JavaScript pana acum.

50
00:02:36,260 --> 00:02:41,280
Ce am în partea de sus este o structură de date la nivel mondial pentru lista mea de a-face.

51
00:02:41,280 --> 00:02:44,060
Se pare ca o matrice. Este doar un array gol.

52
00:02:44,060 --> 00:02:47,100
Și apoi am funcția addTodo că am văzut mai devreme,

53
00:02:47,100 --> 00:02:50,740
și singura linie de cod în există această alertă.

54
00:02:50,740 --> 00:02:55,730
Acesta avertizează aplicare mine, iar apoi am 2 sarcini la îndemână.

55
00:02:55,730 --> 00:02:58,790
Trebuie să adăugați Todo la care structura de date la nivel mondial,

56
00:02:58,790 --> 00:03:01,860
și apoi Vreau să atrag pe lista de To-Do.

57
00:03:01,860 --> 00:03:06,360
Nimic prea fantezist doar încă, dar de activarea JavaScript-ați putea fi familiarizat cu,

58
00:03:06,360 --> 00:03:12,370
așa că am de gând să merg încet și să revizuiască fundamentele de activarea JavaScript-în acest mod.

59
00:03:12,370 --> 00:03:15,490
>> Să-i dăm o șansă.

60
00:03:15,490 --> 00:03:21,130
Să presupunem că utilizatorul introduce ceva în această casetă.

61
00:03:21,130 --> 00:03:23,360
Am scris ceva aici, text.

62
00:03:23,360 --> 00:03:27,620
Cum pot rezolva de acces care textului prin intermediul JavaScript?

63
00:03:27,620 --> 00:03:32,500
Amintiți-vă că JavaScript, una din caracteristicile sale fundamentale este că ne dă

64
00:03:32,500 --> 00:03:34,670
acest acces programatic la DOM.

65
00:03:34,670 --> 00:03:40,670
Ea ne permite să acceseze elemente și proprietățile lor de acest cod HTML reale.

66
00:03:40,670 --> 00:03:43,430
Modul în care facem asta cu oasele goale JavaScript

67
00:03:43,430 --> 00:03:51,360
Este putem folosi de fapt, o funcție în JavaScript numit getElementById.

68
00:03:51,360 --> 00:03:55,140
Vreau pentru a stoca textul care este introdus acolo în unele variabile,

69
00:03:55,140 --> 00:03:58,350
așa că am de gând să spun o nouă variabilă numită new_todo,

70
00:03:58,350 --> 00:04:01,980
și am de gând pentru a obține acel element.

71
00:04:01,980 --> 00:04:06,330
Aceasta este o funcție,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
Și acum Primesc un element de identitate, asa ca am nevoie de ID-ul de care casetă de text,

73
00:04:11,580 --> 00:04:15,860
asa ca am dat new_todo_description ID-ul.

74
00:04:15,860 --> 00:04:18,399
Asta e modul în care am de gând pentru a obține un element.

75
00:04:18,399 --> 00:04:23,880
Asta e argumentul meu la această funcție, pentru a specifica ID-ul pentru a obține.

76
00:04:23,880 --> 00:04:28,110
Si pentru ca este un element de HTML, si are proprietati.

77
00:04:28,110 --> 00:04:30,650
Ai văzut astea. Sunt atribute.

78
00:04:30,650 --> 00:04:37,090
Atributul de element de text care stochează intrarea utilizatorului se numește valoare.

79
00:04:37,090 --> 00:04:40,860
Am salvat valoarea care caseta de text acum în această variabilă numită new_todo.

80
00:04:40,860 --> 00:04:45,040
Acum am acces programatic la această variabilă, care este un fel de rece

81
00:04:45,040 --> 00:04:49,200
pentru că acum ceea ce pot face este să pot adauga la lista mea de-a face.

82
00:04:49,200 --> 00:04:52,870
>> Felul în care ne-ar face acest lucru în JavaScript și nu vă faceți griji dacă nu sunteți familiarizat cu acest lucru,

83
00:04:52,870 --> 00:04:57,010
ci doar trece prin ea este todos.push

84
00:04:57,010 --> 00:05:00,130
pentru că e numele structura mea de date la nivel mondial aici,

85
00:05:00,130 --> 00:05:04,450
și am de gând pentru a împinge new_todo.

86
00:05:04,450 --> 00:05:09,120
Acest lucru este mare, deoarece acum eu l-am adăugat la JavaScript meu

87
00:05:09,120 --> 00:05:11,280
reprezentare de care să-do list.

88
00:05:11,280 --> 00:05:15,170
Dar acum nu stiu cum l înapoi la HTML?

89
00:05:15,170 --> 00:05:18,560
Trebuie să găsesc o cale de a sorta de împingeți-o înapoi.

90
00:05:18,560 --> 00:05:21,830
Cu alte cuvinte, am un fel de trebuie să elaboreze acest lucru.

91
00:05:21,830 --> 00:05:26,060
Ceea ce am de gând să faceți este să mergem să atragă pe lista de rezolvat.

92
00:05:26,060 --> 00:05:29,270
Am nevoie pentru a actualiza alte HTML pe acea pagină,

93
00:05:29,270 --> 00:05:32,040
și după cum puteți vedea, am lăsat acest recipient mic aici,

94
00:05:32,040 --> 00:05:36,840
acest divizor de pagini ale cărei identitate este Todos,

95
00:05:36,840 --> 00:05:40,870
și am de gând să pună pe lista de rezolvat acolo.

96
00:05:40,870 --> 00:05:47,240
În primul rând am de gând să-l clar, deoarece, spune, a existat un vechi de a-do list acolo.

97
00:05:47,240 --> 00:05:49,560
Primesc acest element de identitate din nou,

98
00:05:49,560 --> 00:05:54,530
și eu sunt accesarea HTML interioară a acestui element,

99
00:05:54,530 --> 00:05:58,010
și am de gând să clar că.

100
00:05:58,010 --> 00:06:05,510
Dacă am lăsat acest cod cum este, am vedea un nimic gol acolo,

101
00:06:05,510 --> 00:06:10,410
și acum vreau să încep redarea noua mea listă a-face.

102
00:06:10,410 --> 00:06:12,870
Eu practic de gând să șteargă lista mea de a-face.

103
00:06:12,870 --> 00:06:18,180
>> Acum interior HTML interiorul că todos div este complet clară,

104
00:06:18,180 --> 00:06:20,060
și acum am nevoie pentru a începe adăugarea lista mea.

105
00:06:20,060 --> 00:06:23,890
Primul lucru pe care vreau să adăugați înapoi este neordonate tag-ul lista,

106
00:06:23,890 --> 00:06:33,890
care, practic, denotă că acesta este începutul unei liste neordonate.

107
00:06:33,890 --> 00:06:39,770
Acum, pentru fiecare element în meu tablou todos vreau să-l imprimați interiorul că HTML.

108
00:06:39,770 --> 00:06:43,710
Vreau să-l adăugați pe la partea de jos a acestei liste.

109
00:06:43,710 --> 00:06:49,040
La fel ca în C, pot folosi o pentru buclă, și am de gând să înceapă de la începutul lista mea

110
00:06:49,040 --> 00:06:54,140
la elementul 0, și am de gând să merg tot drumul la lungimea listei.

111
00:06:54,140 --> 00:07:01,100
Putem obține de fapt, durata de o serie de activarea JavaScript folosind proprietatea lungime.

112
00:07:01,100 --> 00:07:03,420
Practic am de gând să fac ceva foarte asemănător în interiorul de aici

113
00:07:03,420 --> 00:07:05,600
pentru a imprima acel element.

114
00:07:05,600 --> 00:07:12,970
Eu pot accesa din nou div Todos, proprietatea interioară HTML de care,

115
00:07:12,970 --> 00:07:17,560
și am de gând să adăugați la acest nou element din listă, și care va fi înconjurat de

116
00:07:17,560 --> 00:07:25,390
această etichetă Li, și am de gând să înlănțui cu operatorul +,

117
00:07:25,390 --> 00:07:28,040
și că este elementul-lea al meu matrice Todos,

118
00:07:28,040 --> 00:07:32,380
și apoi am de gând să închidă acea etichetă.

119
00:07:32,380 --> 00:07:36,240
Acum, pentru fiecare element, vom adăuga o nouă înregistrare în lista.

120
00:07:36,240 --> 00:07:48,700
Și apoi tot avem cu adevărat nevoie să faceți este să închidă acea etichetă.

121
00:07:48,700 --> 00:07:52,820
Am nevoie doar pentru a inchide care neordonate tag-ul lista.

122
00:07:52,820 --> 00:07:55,490
>> Nu veți obține o simt pentru modul în care funcționează?

123
00:07:55,490 --> 00:07:57,700
Acest lucru deschide întreaga listă.

124
00:07:57,700 --> 00:08:01,080
Aceasta adaugă elemente individuale din lista de Todos la lista,

125
00:08:01,080 --> 00:08:05,470
și apoi că închide întreaga listă, iar acest lucru este funcția mea addTodo.

126
00:08:05,470 --> 00:08:09,590
Eu practic începe prin obtinerea de probleme de rezolvat din caseta de text.

127
00:08:09,590 --> 00:08:18,950
Am adăuga că la matrice Todos, iar apoi am re-face lista pentru a-face.

128
00:08:18,950 --> 00:08:21,520
Acum pot adăuga elemente la lista mea.

129
00:08:21,520 --> 00:08:24,620
Aceasta este un fel de interesanta, deoarece în doar câteva linii de cod

130
00:08:24,620 --> 00:08:28,240
ne-am făcut de fapt o listă de-a face în cazul în care putem adăuga elemente.

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

132
00:08:30,050 --> 00:08:34,480
Asta e un fel de introducere de bază pentru JavaScript.

133
00:08:34,480 --> 00:08:36,179
Nu vă faceți griji prea mult despre sintaxa de acum,

134
00:08:36,179 --> 00:08:38,130
dar cred că despre acest punct de vedere conceptual.

135
00:08:38,130 --> 00:08:40,539
Am avut unele HTML.

136
00:08:40,539 --> 00:08:45,310
Am avut o casetă de text pe pagina care de fapt a permis utilizatorilor sa intrare un element de a-face pentru a adăuga.

137
00:08:45,310 --> 00:08:49,210
Și apoi am folosit JavaScript pentru a aduce acel Todo din acea casetă de text.

138
00:08:49,210 --> 00:08:52,830
Am depozitat ca într-un tablou JavaScript, care este de fapt ca

139
00:08:52,830 --> 00:08:56,010
reprezentarea noastră programatic de care să-do list,

140
00:08:56,010 --> 00:08:59,060
și apoi l-am imprimat.

141
00:08:59,060 --> 00:09:02,690
Aceasta este todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Aceasta este un fel de misto, dar cum putem lua acest lucru mai departe?

143
00:09:07,620 --> 00:09:11,350
Ei bine, după cum puteți vedea, acest lucru nu este ca un complet de a-do list.

144
00:09:11,350 --> 00:09:15,100
De exemplu, eu nu pot marca oricare dintre aceste elemente fi incomplete,

145
00:09:15,100 --> 00:09:19,920
cum ar fi dacă am vrut să reprioritize elementele sau șterge elemente.

146
00:09:19,920 --> 00:09:23,150
Acest lucru este în regulă, dar putem lua acest lucru în continuare.

147
00:09:23,150 --> 00:09:29,280
Eu nu am de gând să vorbesc prea mult despre adăugarea de caracteristici suplimentare,

148
00:09:29,280 --> 00:09:32,800
dar am putea lua ca departe.

149
00:09:32,800 --> 00:09:35,970
Să vorbim despre adăugarea o caracteristică mai mult la acest lucru pentru a-do list,

150
00:09:35,970 --> 00:09:40,370
care va fi posibilitatea de a verifica un individ de a-do element

151
00:09:40,370 --> 00:09:44,780
și l-au barează, astfel încât, practic spui că am făcut asta.

152
00:09:44,780 --> 00:09:50,240
Să ne uităm la unele cod care ar putea realiza acest lucru.

153
00:09:50,240 --> 00:09:52,740
Observați ce am făcut în partea de sus e că am adăugat

154
00:09:52,740 --> 00:09:57,620
un nou tablou global numit complet.

155
00:09:57,620 --> 00:10:02,890
Sunt practic folosind acest pentru a stoca dacă elementele de pe listă pentru a-do

156
00:10:02,890 --> 00:10:06,560
sunt complete sau nu.

157
00:10:06,560 --> 00:10:08,470
Aceasta este o modalitate de a face acest lucru.

158
00:10:08,470 --> 00:10:13,750
Dacă mă uit la punerea în aplicare a acestei, pe ecran,

159
00:10:13,750 --> 00:10:21,120
practic, dacă am introduce un memento și apăsați acest buton de comutare

160
00:10:21,120 --> 00:10:25,040
se trece afară, astfel încât fiecare punct de pe această listă are nici o complet

161
00:10:25,040 --> 00:10:31,050
sau de stat incomplete, și eu sunt, folosind o matrice a reprezenta.

162
00:10:31,050 --> 00:10:33,730
>> Practic pentru fiecare todo în care matrice todos

163
00:10:33,730 --> 00:10:37,110
există un element în matrice complet, care de fapt indică

164
00:10:37,110 --> 00:10:39,060
dacă acesta este complet sau nu.

165
00:10:39,060 --> 00:10:41,640
Am avut de a face schimbari destul de minime la acest cod,

166
00:10:41,640 --> 00:10:44,470
Deci, aici este funcția noastră addTodo.

167
00:10:44,470 --> 00:10:48,530
Observați că aici eu sunt împingându-l pe matrice,

168
00:10:48,530 --> 00:10:51,300
și apoi mă împinge un 0 pentru care gama completa,

169
00:10:51,300 --> 00:10:57,090
practic, în paralel cu acest nou impuls todo să spun

170
00:10:57,090 --> 00:11:00,430
Sunt adăugarea acestui element, și este cuplat cu această valoare,

171
00:11:00,430 --> 00:11:02,810
ceea ce înseamnă că este incomplet.

172
00:11:02,810 --> 00:11:04,970
Și apoi am redesenarea lista a-do.

173
00:11:04,970 --> 00:11:09,220
Acum, observa am adăugat această funcție drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Acest lucru are o mulțime de cod am avut-o înainte,

175
00:11:11,760 --> 00:11:15,320
practic șterge din cutie și apoi atrage noi să-do list.

176
00:11:15,320 --> 00:11:19,620
Dar observa că în interiorul de acest lucru pentru bucla facem un pic mai mult acum.

177
00:11:19,620 --> 00:11:25,000
Suntem practic verifica dacă elementul corespunzător Todo lea aici

178
00:11:25,000 --> 00:11:30,220
este completă, iar noi te comporți diferit în aceste două condiții.

179
00:11:30,220 --> 00:11:32,790
Dacă e complet, vom adăuga această etichetă del,

180
00:11:32,790 --> 00:11:35,360
care este de fapt modul în care se poate obține ca greva prin efect

181
00:11:35,360 --> 00:11:38,190
trecere în lista de-a face în cazul în care este complet,

182
00:11:38,190 --> 00:11:42,200
și dacă nu e, nu suntem o include.

183
00:11:42,200 --> 00:11:45,030
Și astfel acest tip de are grijă de faptul că,

184
00:11:45,030 --> 00:11:49,140
>> și că este o modalitate de a realiza acest lucru.

185
00:11:49,140 --> 00:11:53,420
Și apoi observați atunci când utilizatorul face clic pe unul dintre acestea

186
00:11:53,420 --> 00:11:56,780
am comuta starea de completare a acestuia.

187
00:11:56,780 --> 00:12:02,170
Când utilizatorul face clic, vom inversa dacă acesta a fost încheiat sau nu,

188
00:12:02,170 --> 00:12:04,540
și apoi vom redesenare.

189
00:12:04,540 --> 00:12:06,190
Acest tip de lucrări.

190
00:12:06,190 --> 00:12:09,860
Avem aceste funcții care desfășoară propriile sarcini,

191
00:12:09,860 --> 00:12:11,730
și acest lucru este în regulă.

192
00:12:11,730 --> 00:12:14,110
Este ceva ce am putea face mai bine cu privire la acest lucru, deși?

193
00:12:14,110 --> 00:12:18,700
Observați avem aceste două tablouri la nivel mondial.

194
00:12:18,700 --> 00:12:23,550
În cazul în care acest lucru a fost C, și am avut două tablouri care fel de reprezentate

195
00:12:23,550 --> 00:12:25,800
date care a fost un fel de legătură într-un fel

196
00:12:25,800 --> 00:12:30,140
ceea ce ne-ar folosi în C pentru a combina aceste 2 domenii

197
00:12:30,140 --> 00:12:35,420
în ceva care incapsuleaza ambele bucăți de informații?

198
00:12:35,420 --> 00:12:37,600
Vrea cineva să facă o sugestie?

199
00:12:37,600 --> 00:12:39,450
[Student răspuns inaudibil]

200
00:12:39,450 --> 00:12:42,340
>> Exact, așa că am putea folosi un fel de struct,

201
00:12:42,340 --> 00:12:44,960
și dacă te gândești înapoi la, să zicem, PSET 3,

202
00:12:44,960 --> 00:12:47,350
amintesc că am avut dicționar, iar apoi am avut dacă cuvântul

203
00:12:47,350 --> 00:12:50,230
a fost în dicționar, și toate că informațiile au fost puse împreună

204
00:12:50,230 --> 00:12:52,420
în interiorul unor structuri de date.

205
00:12:52,420 --> 00:12:56,390
Un lucru pot face cu acest cod pentru a evita aceste două tablouri diferite

206
00:12:56,390 --> 00:13:01,760
pentru piese similare de informații sunt eu pot să le combine într-un obiect JavaScript.

207
00:13:01,760 --> 00:13:07,150
Să aruncăm o privire la asta.

208
00:13:07,150 --> 00:13:11,740
Observați Am doar un singur element în partea de sus acum

209
00:13:11,740 --> 00:13:17,650
și ceea ce am făcut este, și acest lucru este doar sintaxa JavaScript pentru fel de

210
00:13:17,650 --> 00:13:21,350
creând o versiune literală a unui obiect,

211
00:13:21,350 --> 00:13:24,670
și observați există două proprietăți, așa că avem probleme de rezolvat,

212
00:13:24,670 --> 00:13:29,660
și este ținut, împreună cu, dacă este complet sau incomplet.

213
00:13:29,660 --> 00:13:31,000
Acest lucru este foarte asemănătoare cod.

214
00:13:31,000 --> 00:13:35,310
Suntem folosind obiecte JavaScript.

215
00:13:35,310 --> 00:13:38,600
Acest tip de lucruri se imbunatateste.

216
00:13:38,600 --> 00:13:43,850
La fel ca acum, toate aceste domenii de informații legate sunt ținute împreună.

217
00:13:43,850 --> 00:13:46,410
Când mergem să-l imprimați, putem accesa câmpurile.

218
00:13:46,410 --> 00:13:49,060
>> Observați cum facem todos [i]. Complet

219
00:13:49,060 --> 00:13:52,880
în loc de a verifica matrice complet separat,

220
00:13:52,880 --> 00:13:56,560
si observa atunci când doriți să obțineți șir de-a face primim proprietatea de a-do

221
00:13:56,560 --> 00:13:58,750
de care Todo, astfel încât acest tip de sens, deoarece

222
00:13:58,750 --> 00:14:01,660
fiecare element are aceste proprietăți intrinseci despre asta.

223
00:14:01,660 --> 00:14:05,650
Ea are un memento, și are dacă este complet sau nu.

224
00:14:05,650 --> 00:14:11,540
Nu prea multe schimbări acolo funcțional, a adăugat doar ceva mai mult la codul.

225
00:14:11,540 --> 00:14:13,430
Aceasta este o imbunatatire pe unele fronturi, nu?

226
00:14:13,430 --> 00:14:16,030
Adică, am luat în design un pic.

227
00:14:16,030 --> 00:14:20,350
Acum avem de obiecte pentru a ingloba practic aceste date.

228
00:14:20,350 --> 00:14:27,130
Este ceva mai mult am putea face de aici, din punct de vedere JavaScript?

229
00:14:27,130 --> 00:14:31,810
Plăcea că acest cod aici

230
00:14:31,810 --> 00:14:34,760
pentru obtinerea de HTML interioară a unui div

231
00:14:34,760 --> 00:14:40,520
este un pic, cred, mult timp.

232
00:14:40,520 --> 00:14:45,100
Există document.getElementById ("Todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Un lucru pe care am putea face pentru a face acest cod arata un pic mai prietenos

234
00:14:48,400 --> 00:14:51,450
așa că nu ar trebui să țină defilare la stânga și la dreapta, înainte și înapoi,

235
00:14:51,450 --> 00:14:58,480
Este aș putea folosi o bibliotecă ca jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Să verifica afară Seminar 2,

237
00:15:02,710 --> 00:15:05,880
iar acest lucru este acelasi cod, dar sa terminat cu jQuery.

238
00:15:05,880 --> 00:15:08,790
Este posibil să nu fi prea familiarizat cu jQuery,

239
00:15:08,790 --> 00:15:11,510
dar știu doar că jQuery este un fel de bibliotecă pentru JavaScript

240
00:15:11,510 --> 00:15:15,910
care face mai ușor de a face lucruri, cum ar fi elemente individuale de acces ale DOM.

241
00:15:15,910 --> 00:15:21,280
Aici, în loc de a spune document.getElementById ("Todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Eu pot folosi modul mult mai curat în jQuery,

243
00:15:25,210 --> 00:15:28,490
care este doar de a folosi selectorii.

244
00:15:28,490 --> 00:15:31,300
După cum puteți vedea, acest cod a obține un pic mai curat,

245
00:15:31,300 --> 00:15:35,770
foarte similare funcțional, dar asta e ideea.

246
00:15:35,770 --> 00:15:37,980
Am văzut o serie de lucruri până acum,

247
00:15:37,980 --> 00:15:42,010
așa că am început cu implementarea doar crud JavaScript.

248
00:15:42,010 --> 00:15:45,370
Am adăugat caracteristici noi și a arătat cum o putem îmbunătăți cu

249
00:15:45,370 --> 00:15:49,090
doar ceea ce avem în JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Are cineva vedea orice probleme cu acest design?

251
00:15:53,300 --> 00:16:01,090
Și anume, cred, sau nu neapărat dificultăți, dar să spunem

252
00:16:01,090 --> 00:16:04,830
nu am fost a face un proiect de listă a-face, și mâine ne-am decis

253
00:16:04,830 --> 00:16:10,320
am vrut sa facem o lista de cumparaturi sau a unui proiect de listă de cumpărături.

254
00:16:10,320 --> 00:16:14,150
O mulțime de aceste caracteristici sunt foarte asemănătoare.

255
00:16:14,150 --> 00:16:19,080
O mulțime de lucrurile pe care vrem să ieșim din JavaScript sunt foarte frecvente,

256
00:16:19,080 --> 00:16:23,820
iar acest lucru subliniaza nevoia de un fel de cale de

257
00:16:23,820 --> 00:16:25,670
face acest lucru mai ușor să faci.

258
00:16:25,670 --> 00:16:30,400
Am avut de a construi toate din acest acces HTML, tot acest acces DOM,

259
00:16:30,400 --> 00:16:35,530
ca am de gând să reprezinte pe lista de-a face cu acest model.

260
00:16:35,530 --> 00:16:39,130
Și observa eu ​​sunt responsabil ca dezvoltator JavaScript

261
00:16:39,130 --> 00:16:42,890
pentru păstrarea HTML și JavaScript că am în sincronizare.

262
00:16:42,890 --> 00:16:48,040
Nimic nu a făcut în mod automat că reprezentarea JavaScript

263
00:16:48,040 --> 00:16:51,590
sau lista pentru a-face împinși afară de HTML.

264
00:16:51,590 --> 00:16:54,000
Nimic aplicate că în afară de mine.

265
00:16:54,000 --> 00:16:56,880
Am avut de a scrie trage de-a face funcția de lista.

266
00:16:56,880 --> 00:17:01,650
Și că nu poate fi, vreau să spun, e rezonabil să faci asta,

267
00:17:01,650 --> 00:17:03,670
dar poate fi plictisitor uneori.

268
00:17:03,670 --> 00:17:08,190
Dacă aveți un proiect mai mare, care ar putea fi dificil.

269
00:17:08,190 --> 00:17:10,720
>> Cadre, unul dintre scopurile de cadre

270
00:17:10,720 --> 00:17:14,060
este de a simplifica acest proces și fel de factor de

271
00:17:14,060 --> 00:17:16,950
aceste comune-Cred ca ai putea modele spune-proiectare

272
00:17:16,950 --> 00:17:20,700
că oamenii au, în general, un fel de mod de reprezentare de date,

273
00:17:20,700 --> 00:17:25,599
fie că este o listă de prieteni, indiferent dacă este vorba harta informații

274
00:17:25,599 --> 00:17:27,280
sau ceva sau o listă a-face.

275
00:17:27,280 --> 00:17:30,660
Unii oameni au, în general, o modalitate de a reprezenta informații,

276
00:17:30,660 --> 00:17:33,650
și, în general, au nevoie de a păstra ca un fel de informații în sincronizare

277
00:17:33,650 --> 00:17:36,520
între ceea ce utilizatorul vede într-un fel de vedere,

278
00:17:36,520 --> 00:17:39,850
vorbind din punct de vedere, cum ar fi modelul de vedere controller care ai văzut în curs,

279
00:17:39,850 --> 00:17:45,400
și apoi modelul, care în acest caz este această matrice JavaScript.

280
00:17:45,400 --> 00:17:49,020
Cadrele ne da o cale de a rezolva această problemă.

281
00:17:49,020 --> 00:17:53,080
Acum, haideți să aruncăm o privire la punerea în aplicare a acestei to-do list

282
00:17:53,080 --> 00:18:02,360
într-un cadru numit angularjs.

283
00:18:02,360 --> 00:18:04,650
Asta este. Observați că se potrivește pe un diapozitiv.

284
00:18:04,650 --> 00:18:07,330
Nu trebuie pentru a defila la stânga și la dreapta.

285
00:18:07,330 --> 00:18:10,460
Care, probabil, nu este un motiv de mare pentru a recomanda utilizarea unui cadru,

286
00:18:10,460 --> 00:18:20,120
dar notificare am accesați vreodată elemente HTML individuale de aici?

287
00:18:20,120 --> 00:18:22,400
Am vreodată în DOM?

288
00:18:22,400 --> 00:18:26,120
Nu vedeți orice document.getElementById sau ceva de genul asta?

289
00:18:26,120 --> 00:18:29,870
Nu, e plecat.

290
00:18:29,870 --> 00:18:35,590
>> Unghiular ne ajuta sa tinem DOM și reprezentarea noastra JavaScript de ceva

291
00:18:35,590 --> 00:18:40,430
un fel de în sincronizare, deci, dacă nu este în js,

292
00:18:40,430 --> 00:18:46,790
Dacă nu există nici o modalitate de a obține în mod programatic la tot ce conținut HTML

293
00:18:46,790 --> 00:18:51,800
de JavaScript cum vom păstrarea în sincronizare?

294
00:18:51,800 --> 00:18:58,160
Dacă nu este în js., N-are să fie în HTML, corect?

295
00:18:58,160 --> 00:19:01,910
Aceasta este noua versiune a fișierului HTML,

296
00:19:01,910 --> 00:19:04,660
si observa am adăugat o mulțime aici.

297
00:19:04,660 --> 00:19:11,110
Observați există aceste atribute noi, care spun ng-clic și ng-repeat.

298
00:19:11,110 --> 00:19:15,650
Abordarea unghiular de la rezolvarea acestei probleme de dificultăți în proiectare

299
00:19:15,650 --> 00:19:19,130
este de a face de fapt HTML mult mai puternic.

300
00:19:19,130 --> 00:19:24,420
Unghiular este o modalitate de a permițându-vă pentru a face HTML ceva mai expresiv.

301
00:19:24,420 --> 00:19:30,520
De exemplu, eu pot să spun că am de gând să-și lege sau lega această casetă de text

302
00:19:30,520 --> 00:19:35,080
la o variabilă în codul meu JavaScript unghiular.

303
00:19:35,080 --> 00:19:37,030
Acest ng model nu doar asta.

304
00:19:37,030 --> 00:19:41,550
Care practic spune că în interiorul acestei casete un articol de text,

305
00:19:41,550 --> 00:19:45,000
doar asociat care cu new_todo_description variable

306
00:19:45,000 --> 00:19:47,870
în codul JavaScript.

307
00:19:47,870 --> 00:19:51,600
Asta e foarte puternic, pentru că nu trebuie să merg în mod explicit la

308
00:19:51,600 --> 00:19:53,310
DOM pentru a obține aceste informații.

309
00:19:53,310 --> 00:19:56,250
Nu am să spun document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Nu trebuie să utilizeze jQueries cum ar fi accesul DOM.

311
00:19:58,750 --> 00:20:03,280
Pot să-l asocia cu o variabilă, și apoi când am schimba acea variabila

312
00:20:03,280 --> 00:20:07,400
în activarea JavaScript este ținut în sincronizare cu HTML,

313
00:20:07,400 --> 00:20:11,640
astfel încât simplifică procesul de a avea pentru a merge înainte și înapoi între cele două.

314
00:20:11,640 --> 00:20:18,260
Are vreun sens?

315
00:20:18,260 --> 00:20:22,060
>> Și observa nu exista nici un cod de acces HTML.

316
00:20:22,060 --> 00:20:27,760
Ne-am făcut doar HTML mult mai puternic,

317
00:20:27,760 --> 00:20:32,070
și acum, de exemplu, putem face lucruri de genul asta,

318
00:20:32,070 --> 00:20:38,610
ca atunci când faceți clic pe aceasta, numesc această funcție în domeniul de aplicare al todos.js,

319
00:20:38,610 --> 00:20:43,410
și am putea face asta înainte, dar există alte lucruri, cum ar fi acest ng-model,

320
00:20:43,410 --> 00:20:47,020
si observa acest ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Ce crezi că face?

322
00:20:51,520 --> 00:20:54,390
Iată lista noastră de neordonate de înainte.

323
00:20:54,390 --> 00:20:56,470
Avem etichetele ul,

324
00:20:56,470 --> 00:21:03,710
dar am redare vreodată că lista interiorul codului JavaScript?

325
00:21:03,710 --> 00:21:09,280
Eu nu sunt niciodată făcând în mod explicit această listă.

326
00:21:09,280 --> 00:21:11,580
Cum face acest lucru?

327
00:21:11,580 --> 00:21:16,410
Ei bine, modul în care unghiulară realizeaza acest lucru este aceasta se numește un repetor.

328
00:21:16,410 --> 00:21:22,760
Practic aceasta spune că vreau să imprimați acest HTML

329
00:21:22,760 --> 00:21:26,240
pentru fiecare in Todo a mea matrice Todos.

330
00:21:26,240 --> 00:21:31,850
In interiorul todos.jr există o gamă Todos chiar aici,

331
00:21:31,850 --> 00:21:37,910
și acest lucru va spune du-te unghiular prin care matrice, și pentru fiecare element pe care îl vedeți

332
00:21:37,910 --> 00:21:41,390
Vreau să imprimați acest cod HTML.

333
00:21:41,390 --> 00:21:44,620
Aceasta este un fel de minunat pentru că eu pot face doar acest lucru

334
00:21:44,620 --> 00:21:47,760
fără a fi nevoie să scrie o pentru buclă,

335
00:21:47,760 --> 00:21:52,250
care, pentru o listă a-face că a fost doar 30 de linii de cod

336
00:21:52,250 --> 00:21:54,700
nu poate fi cel mai benefic,

337
00:21:54,700 --> 00:22:01,240
dar dacă aveți un proiect mare, acest lucru ar putea ajunge foarte comod.

338
00:22:01,240 --> 00:22:06,100
>> Aceasta este o soluție pentru această problemă, făcând HTML mai puternic,

339
00:22:06,100 --> 00:22:10,820
și care ne permite să păstreze JavaScript și HTML în sincronizare.

340
00:22:10,820 --> 00:22:13,220
Există și alte modalități posibile de a rezolva această problemă,

341
00:22:13,220 --> 00:22:15,320
și nu fiecare cadru face acest lucru.

342
00:22:15,320 --> 00:22:17,720
Nu orice cadru de lucrări de-a lungul acestor linii.

343
00:22:17,720 --> 00:22:19,490
Unele cadre au abordări diferite,

344
00:22:19,490 --> 00:22:23,310
și ați putea găsi că vă bucurați de codificare într-un cadru pe de altă parte.

345
00:22:23,310 --> 00:22:26,160
Să ne uităm la unul mai mult.

346
00:22:26,160 --> 00:22:30,060
Aceasta este lista de-a face codificate într-un cadru numit coloana vertebrală.

347
00:22:30,060 --> 00:22:33,250
Am de gând să treacă prin această repede.

348
00:22:33,250 --> 00:22:38,300
Voi începe cu HTML înainte de a merge acolo.

349
00:22:38,300 --> 00:22:40,290
O secundă.

350
00:22:40,290 --> 00:22:43,950
Începând cu HTML, cum observați, HTML noastra este foarte asemănător

351
00:22:43,950 --> 00:22:50,000
a ceea ce a fost înainte, așa că nu prea mult noi pe acest front.

352
00:22:50,000 --> 00:22:55,410
Dar dosarul nostru JS este un pic diferit.

353
00:22:55,410 --> 00:23:00,360
Tip coloana vertebrală a are această idee, sau se bazează pe ideea

354
00:23:00,360 --> 00:23:04,750
că o mulțime de ceea ce facem cu, să zicem, proiectele noastre JavaScript

355
00:23:04,750 --> 00:23:09,110
se gândească modele si colectii ale acestor modele.

356
00:23:09,110 --> 00:23:12,510
Acest lucru ar putea fi, de exemplu, o fotografie și colecții de fotografii,

357
00:23:12,510 --> 00:23:16,230
sau ideea de un prieten și colecții de prieteni.

358
00:23:16,230 --> 00:23:20,700
Și de multe ori când suntem programare aplicatii JavaScript

359
00:23:20,700 --> 00:23:25,340
vom rezolva din reprezintă ideea de a avea o colecție de prieteni

360
00:23:25,340 --> 00:23:29,500
într-un fel în JavaScript, și coloana vertebrală ne dă acest strat

361
00:23:29,500 --> 00:23:33,040
pe partea de sus de tablouri și obiecte existente Javascript

362
00:23:33,040 --> 00:23:38,300
pentru a face lucrurile mai puternice cu care mai ușor.

363
00:23:38,300 --> 00:23:41,870
>> Aici am definit un model pentru a-do,

364
00:23:41,870 --> 00:23:44,630
și nu trebuie să vă faceți griji prea mult despre sintaxa,

365
00:23:44,630 --> 00:23:48,730
dar observați că ceea ce este una dintre proprietățile de acest lucru?

366
00:23:48,730 --> 00:23:53,190
Ea are un câmp implicit.

367
00:23:53,190 --> 00:23:56,640
Coloana vertebrală îmi permite să specificați deja pe bat

368
00:23:56,640 --> 00:24:00,190
orice nou de-a face, care pot crea va avea aceste valori implicite.

369
00:24:00,190 --> 00:24:04,100
Acum pot personaliza acest lucru, dar fiind capabil de a specifica valorile implicite

370
00:24:04,100 --> 00:24:07,220
este frumos, și este un fel de convenabil, deoarece acest lucru nu este ceva care e ca

371
00:24:07,220 --> 00:24:10,430
inerente în JavaScript, iar acum nu am în mod explicit

372
00:24:10,430 --> 00:24:12,430
spune că todos sunt incomplete.

373
00:24:12,430 --> 00:24:19,190
Pot să spun right off BAT, care todos vor fi marcate ca fiind incompletă.

374
00:24:19,190 --> 00:24:21,300
Observați atunci ce este asta?

375
00:24:21,300 --> 00:24:25,520
Acum am o lista de-a face, și că este o colecție.

376
00:24:25,520 --> 00:24:30,960
Observați domeniul asociate cu care spune că modelul de todo.

377
00:24:30,960 --> 00:24:33,390
Acesta este felul meu de a spune că Backbone

378
00:24:33,390 --> 00:24:37,350
Am de gând să se gândească la o colecție de aceste todos individuale.

379
00:24:37,350 --> 00:24:42,140
Aceasta este, în principiu structura model pentru programul meu.

380
00:24:42,140 --> 00:24:44,980
Aici am această idee de-o colecție,

381
00:24:44,980 --> 00:24:48,960
și practic elementele cuprinse în această colecție sunt toate vor fi aceste Todos,

382
00:24:48,960 --> 00:24:51,910
și că este foarte natural în acest sens

383
00:24:51,910 --> 00:24:59,890
pentru că eu nu am Todos, și le-am într-o colecție.

384
00:24:59,890 --> 00:25:02,940
>> Să ne uităm la un pic mai mult de acest lucru.

385
00:25:02,940 --> 00:25:05,900
Aici este o vedere Backbone.

386
00:25:05,900 --> 00:25:08,890
Un alt lucru pe care coloana vertebrală spune este că

387
00:25:08,890 --> 00:25:14,660
o mulțime de modele care te gandesti sau chiar colecții

388
00:25:14,660 --> 00:25:19,150
sunt de gând să trebuie să aibă un mod de a fi afișate.

389
00:25:19,150 --> 00:25:21,900
Avem nevoie de a face că, pentru a-do list,

390
00:25:21,900 --> 00:25:25,460
și nu ar fi frumos dacă am putea oferi pentru fiecare model

391
00:25:25,460 --> 00:25:28,390
sau asociat cu fiecare model de acest punct de vedere

392
00:25:28,390 --> 00:25:34,020
care ne permite să Cred conecta cele două împreună?

393
00:25:34,020 --> 00:25:38,320
În timp ce înainte am avut de a folosi o buclă care ar fi, prin

394
00:25:38,320 --> 00:25:41,130
fiecare todo în lista noastră și apoi imprima aici

395
00:25:41,130 --> 00:25:44,650
putem conecta practic cu acest model.

396
00:25:44,650 --> 00:25:47,550
Aceasta este o vedere de a-face.

397
00:25:47,550 --> 00:25:50,550
Aceasta este asociat cu probleme de rezolvat am găsit mai devreme.

398
00:25:50,550 --> 00:25:54,940
Acum, fiecare todo se fi afișat sau renderable

399
00:25:54,940 --> 00:25:56,960
prin aceasta să-rezolvat.

400
00:25:56,960 --> 00:25:59,440
Observați unele câmpuri.

401
00:25:59,440 --> 00:26:05,880
Ce crezi că tagName este, tagName: Li?

402
00:26:05,880 --> 00:26:09,790
Amintiți-vă din urmă, când ne-am dorit pentru a face un todo

403
00:26:09,790 --> 00:26:16,700
ne-ar trebui pentru a asocia în mod explicit todos noastre cu această etichetă Li.

404
00:26:16,700 --> 00:26:21,080
Acum ne spune că în cazul în care acest lucru todo se întâmplă să trăiască

405
00:26:21,080 --> 00:26:25,250
va fi in interiorul unui tag Li.

406
00:26:25,250 --> 00:26:31,440
Și acum suntem asociind, de asemenea, evenimente cu todos noastre.

407
00:26:31,440 --> 00:26:34,320
>> Fiecare todo are acest eveniment.

408
00:26:34,320 --> 00:26:38,480
Dacă faceți clic destul de mult butonul de comutare, asta e ceea ce vreau să spun aici,

409
00:26:38,480 --> 00:26:43,080
apoi marchează practic Todo ca opusul a ceea ce a fost înainte

410
00:26:43,080 --> 00:26:45,890
și apoi re-face aplicație.

411
00:26:45,890 --> 00:26:47,810
Aceasta este un fel de similar codului înainte.

412
00:26:47,810 --> 00:26:50,730
Amintiți-vă atunci când am marcat, fie ca opusul sau,

413
00:26:50,730 --> 00:26:52,410
și apoi l-am re-prestate.

414
00:26:52,410 --> 00:26:57,750
Dar observa acum acest eveniment folosit pentru a fi ceva care a fost în HTML.

415
00:26:57,750 --> 00:26:59,640
Ea stătea acolo.

416
00:26:59,640 --> 00:27:01,410
Butonul a avut o pe clic.

417
00:27:01,410 --> 00:27:05,310
Când faceți clic pe butonul, este un fel de face lucruri pentru a

418
00:27:05,310 --> 00:27:07,210
stabilit că Todo a fi incomplete.

419
00:27:07,210 --> 00:27:11,180
Aici ne-am asociat acestui eveniment de clic, care buton de comutare

420
00:27:11,180 --> 00:27:15,830
și de mers înapoi dacă este pornit sau oprit cu acest punct de vedere.

421
00:27:15,830 --> 00:27:20,480
>> Acesta este un mod frumos de a înființa acest eveniment, astfel că este foarte strâns legat

422
00:27:20,480 --> 00:27:26,980
la acest punct de vedere, și așa observa asta mai mult.

423
00:27:26,980 --> 00:27:31,050
Eu am aceasta metoda Render, iar noi nu trebuie să treacă prin detalii.

424
00:27:31,050 --> 00:27:33,650
Este un fel de similar cu ceea ce am avut înainte,

425
00:27:33,650 --> 00:27:36,070
dar observa Nu looping prin nimic.

426
00:27:36,070 --> 00:27:40,700
Eu nu sunt de a imprima eticheta ul asta e un fel de a spune am de gând să imprima toate elementele.

427
00:27:40,700 --> 00:27:46,610
Sunt oferind funcționalitatea pentru a face acest o să-do element.

428
00:27:46,610 --> 00:27:49,400
Acesta este un concept foarte puternic, deoarece, practic

429
00:27:49,400 --> 00:27:53,600
Lista noastră de-a face cuprinde toate aceste Todos, și dacă putem specifica practic

430
00:27:53,600 --> 00:27:56,890
modalitate de a face una dintre cele todos

431
00:27:56,890 --> 00:28:04,230
atunci putem avea coloana vertebrala nostru puternic în sine face toate todos

432
00:28:04,230 --> 00:28:07,760
apelând metoda de randare pe todos individuale.

433
00:28:07,760 --> 00:28:14,180
Acesta este un concept care este util aici.

434
00:28:14,180 --> 00:28:18,160
Acum, o întrebare bună care se pune este cum este aceasta cerere de a fi puse împreună?

435
00:28:18,160 --> 00:28:21,200
Pentru ca avem capacitatea de a face o Todo,

436
00:28:21,200 --> 00:28:23,860
dar cum ajungem la ideea de mai multe todos?

437
00:28:23,860 --> 00:28:25,100
>> Să aruncăm o privire la asta.

438
00:28:25,100 --> 00:28:27,100
Aceasta este ultima parte.

439
00:28:27,100 --> 00:28:29,740
Observați avem o vedere lista de-a face aici,

440
00:28:29,740 --> 00:28:34,440
și observați este, de asemenea, un punct de vedere.

441
00:28:34,440 --> 00:28:36,970
Și pentru a trece peste o serie de lucruri,

442
00:28:36,970 --> 00:28:45,280
această metodă Initialize va fi numit atunci când vom crea mai întâi această listă pentru a-do.

443
00:28:45,280 --> 00:28:52,630
După cum puteți vedea, e ca si cum crearea listei de rezolvat și asocierea acesteia cu acest punct de vedere.

444
00:28:52,630 --> 00:28:57,860
Și apoi am adăugat funcțiile aici Deci, practic, atunci când adăugați un element-

445
00:28:57,860 --> 00:29:01,440
acest lucru este similar cu metoda addItem am văzut înainte-

446
00:29:01,440 --> 00:29:07,430
Am de gând să creeze un nou obiect Todo, și observați eu sunt de fapt sun

447
00:29:07,430 --> 00:29:13,080
această nouă metodă Todo, deci acest lucru este prevăzut de coloana vertebrală,

448
00:29:13,080 --> 00:29:16,010
și eu pot trece în proprietățile mele aici.

449
00:29:16,010 --> 00:29:23,710
Și acum fiecare todo care am creat-o folosind acest lucru va primi ca funcționalitatea pe care am văzut înainte.

450
00:29:23,710 --> 00:29:28,140
Observați Sunt de compensare în caseta de text înainte de-un mic mic detaliu-

451
00:29:28,140 --> 00:29:32,900
și apoi adaug această colecție.

452
00:29:32,900 --> 00:29:37,630
>> Acest lucru pare aproape ciudat pentru că înainte am avut doar de a face acest lucru todos.push,

453
00:29:37,630 --> 00:29:43,310
și apoi ne-au făcut, iar acest lucru poate părea mai complicat pentru acest proiect special,

454
00:29:43,310 --> 00:29:46,980
și ați putea găsi că coloana vertebrală sau chiar unghiulare sau orice alt cadru

455
00:29:46,980 --> 00:29:50,790
nu se potrivi cu proiectul dvs. special, dar cred că este important să ne gândim

456
00:29:50,790 --> 00:29:54,100
ce înseamnă acest lucru pe o scară mai largă pentru proiecte mai mari,

457
00:29:54,100 --> 00:29:56,610
pentru că dacă am avut un proiect mai mare care ne-au reprezentat

458
00:29:56,610 --> 00:30:00,860
unele de colectare într-adevăr complex, ceva mai mult decât o listă de-a face,

459
00:30:00,860 --> 00:30:04,490
Să spunem că un lista de prieteni sau ceva de genul asta, acest lucru ar putea veni la îndemână

460
00:30:04,490 --> 00:30:09,620
pentru că am putea organiza codul nostru într-un mod foarte convenabil,

461
00:30:09,620 --> 00:30:12,550
într-un mod care ar face mai usor pentru altcineva

462
00:30:12,550 --> 00:30:16,820
care a vrut să ridice un proiect pentru a construi pe.

463
00:30:16,820 --> 00:30:21,450
Puteti vedea că acest lucru oferă o mulțime de structuri.

464
00:30:21,450 --> 00:30:26,580
Și apoi am sunat face pe acest addItem.

465
00:30:26,580 --> 00:30:31,050
Face, după cum puteți vedea, și nu trebuie să profite de această sintaxă complet,

466
00:30:31,050 --> 00:30:37,790
dar în principiu pentru fiecare model se va apela metoda Render individuale.

467
00:30:37,790 --> 00:30:41,500
Asta e un fel de unde vine asta.

468
00:30:41,500 --> 00:30:44,140
Să specifica doar cum să facă de Todos individuale,

469
00:30:44,140 --> 00:30:47,310
și apoi să le lipiți ca un întreg.

470
00:30:47,310 --> 00:30:49,810
Dar acest lucru oferă un mod de abstractizare,

471
00:30:49,810 --> 00:30:55,470
pentru că am putea schimba modul în care am decide ca Todos individuale,

472
00:30:55,470 --> 00:30:57,940
și nu ar trebui să schimbe orice din acest cod.

473
00:30:57,940 --> 00:31:00,700
Asta e un fel de misto.

474
00:31:00,700 --> 00:31:08,540
>> Are cineva are întrebări cu privire la cadrele JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Student întrebare inaudibil]

476
00:31:14,310 --> 00:31:16,050
Oh, sigur, că este o întrebare mare.

477
00:31:16,050 --> 00:31:19,080
Întrebarea era cum am includ cadre?

478
00:31:19,080 --> 00:31:22,970
Cele mai multe cadre JavaScript sunt de fapt doar js

479
00:31:22,970 --> 00:31:25,740
pe care le pot include în partea de sus a codului.

480
00:31:25,740 --> 00:31:29,830
Observați în partea șefului HTML meu am toate aceste tag-uri script-ul,

481
00:31:29,830 --> 00:31:34,250
și tag-ul script-ul final este codul pe care l-am scris.

482
00:31:34,250 --> 00:31:38,820
Si apoi cele 3 coduri cadru sunt doar, de asemenea, tag-uri script.

483
00:31:38,820 --> 00:31:42,110
Eu le-inclusiv la ceea ce se numește un CDN,

484
00:31:42,110 --> 00:31:46,200
care-mi permite să-l lua de la altcineva în acest moment

485
00:31:46,200 --> 00:31:57,930
dar fiecare cadru are acest lucru, puteți găsi destul de mult conținut

486
00:31:57,930 --> 00:32:03,540
pentru o anumită bibliotecă JavaScript disponibil pe unele CDN sau ceva de genul asta,

487
00:32:03,540 --> 00:32:05,570
și apoi puteți include aceste tag-uri script.

488
00:32:05,570 --> 00:32:07,600
Are vreun sens?

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

490
00:32:09,500 --> 00:32:11,730
>> Acestea sunt două abordări diferite.

491
00:32:11,730 --> 00:32:14,640
Cei care nu sunt singurele abordări la rezolvarea acestei probleme.

492
00:32:14,640 --> 00:32:17,080
Există multe lucruri diferite pe care

493
00:32:17,080 --> 00:32:19,490
cineva ar putea face, și există multe cadre acolo.

494
00:32:19,490 --> 00:32:23,300
Unghiulare și coloana vertebrală nu spun întreaga poveste.

495
00:32:23,300 --> 00:32:26,370
Mult noroc cu proiectele finale, și vă mulțumesc foarte mult.

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