1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Săptămâna 9, Continuare]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Universitatea Harvard]

3
00:00:05,160 --> 00:00:07,020
[Acest lucru este CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Acest lucru este CS50. Acesta este sfârșitul săptămânii 9. Mulțumesc mult.

5
00:00:13,340 --> 00:00:15,310
În cele din urmă. Săptămâna 9. M-am prins.

6
00:00:15,310 --> 00:00:18,590
Astăzi vom continua conversația noastră despre programare web

7
00:00:18,590 --> 00:00:21,660
cu un ochi spre final al proiectului, nu, pentru că trebuie să faci ceva de web-based

8
00:00:21,660 --> 00:00:25,610
pentru proiectele finale, ci pentru că, fie pentru proiecte finale sau după CS50

9
00:00:25,610 --> 00:00:29,000
aceasta este cu siguranță direcția în care software-ul modern, se întâmplă.

10
00:00:29,000 --> 00:00:31,770
Și totuși, nu e de fapt un lucru ușor.

11
00:00:31,770 --> 00:00:35,040
De fapt, unul dintre cele mai dificile lucruri de făcut este aspectul de proiectare.

12
00:00:35,040 --> 00:00:38,600
>> De exemplu, prin design-ne referim la obtinerea de fapt, interfața cu utilizatorul

13
00:00:38,600 --> 00:00:40,420
sau experiența utilizatorului dreapta.

14
00:00:40,420 --> 00:00:43,200
Îndrăznesc să spun - și știm de la un set de probleme recente

15
00:00:43,200 --> 00:00:45,960
atunci când o parte din tine difuzate nemulțumiri dvs. despre unele bucată de software

16
00:00:45,960 --> 00:00:49,000
sau hardware pe care le înfurie, fie în campus sau în afara -

17
00:00:49,000 --> 00:00:51,930
există o mulțime de site-uri acolo, există o mulțime de hardware acolo,

18
00:00:51,930 --> 00:00:53,900
acest tip de rahat.

19
00:00:53,900 --> 00:00:58,730
Dar realitatea este că a face lucrurile care sunt ușor de folosit, încă sunt totuși puternic

20
00:00:58,730 --> 00:01:00,550
este o provocare foarte dificil.

21
00:01:00,550 --> 00:01:03,680
Deci, pentru ziua de azi l-am întrebat Iosif și Tommy să mi se alăture aici

22
00:01:03,680 --> 00:01:06,680
astfel încât să putem avea o conversație, atât despre design

23
00:01:06,680 --> 00:01:09,090
și ce tipuri de procese de gândire ar trebui să înceapă trece prin cap

24
00:01:09,090 --> 00:01:12,040
Atunci când proiectați proiectele dvs. finale, eforturile tale de viitor.

25
00:01:12,040 --> 00:01:15,040
Și apoi cu ajutorul lui Tommy ne vom uita la unele dintre detaliile de implementare.

26
00:01:15,040 --> 00:01:18,440
Cum poti avea o viziune pe hârtie sau în mintea ta

27
00:01:18,440 --> 00:01:20,760
pe care le poate executa apoi prin programare

28
00:01:20,760 --> 00:01:24,030
prin utilizarea unor tehnologii și tehnici tocmai am început să vorbim despre,

29
00:01:24,030 --> 00:01:29,080
și anume JavaScript și ceva chiar mai nou, și anume AJAX, JavaScript asincron.

30
00:01:29,080 --> 00:01:32,950
Care vă permite să creați tot mai dinamic de o interfață de utilizator

31
00:01:32,950 --> 00:01:35,780
prin preluarea mai multe date și mai mult progresiv de la un server.

32
00:01:35,780 --> 00:01:38,560
Deci, vom vedea unele dintre aceste fragmente, precum și de astăzi.

33
00:01:38,560 --> 00:01:41,800
Ca o paranteza, dacă sunteți interesat de concentrare în informatică

34
00:01:41,800 --> 00:01:45,010
sau minoring în informatică, știu că această vineri la prânz

35
00:01:45,010 --> 00:01:48,750
în Maxwell Dworkin 221 va fi un eveniment de pizza

36
00:01:48,750 --> 00:01:50,780
în cazul în care puteți învăța un pic mai mult despre informatică.

37
00:01:50,780 --> 00:01:54,860
Pe cale de ieșire ușa de astăzi vei fi capabil de a ridica un ghid neoficial la CS la Harvard.

38
00:01:54,860 --> 00:01:57,290
Ne vom pune pe cutiile de gunoi din afara la înălțimea taliei

39
00:01:57,290 --> 00:01:59,750
astfel că, dacă doriți să apuca si de a invata aceasta un pic mai mult despre CS,

40
00:01:59,750 --> 00:02:02,480
că va fi acolo pentru tine, ca a fost în săptămâna 0.

41
00:02:02,480 --> 00:02:06,500
De asemenea, dacă doriți să ni se alăture pentru masa de prânz CS50 aceasta vineri la 1:15 pm,

42
00:02:06,500 --> 00:02:09,800
cap la cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Fără alte introduceri, vă dau colegii de predare Iosif Ong.

44
00:02:13,260 --> 00:02:19,190
Hi. [Aplauze]

45
00:02:19,190 --> 00:02:20,770
Multumesc.

46
00:02:20,770 --> 00:02:24,780
Prima dată când am aflat despre design a fost într-o clasă numită aici CS179.

47
00:02:24,780 --> 00:02:28,040
>> Profesor la momentul ne-a spus povestea despre un alt profesor

48
00:02:28,040 --> 00:02:31,640
care au dus la un hotel si a folosit robinete.

49
00:02:31,640 --> 00:02:35,630
Poate cineva sa-mi spui ce cele 2 butoane de pe stânga și dreapta nu?

50
00:02:35,630 --> 00:02:39,080
[Elev] caldă și rece. >> Caldă și rece. Bine.

51
00:02:39,080 --> 00:02:41,430
Ceea ce în mod normal, așteptați, nu?

52
00:02:41,430 --> 00:02:46,960
Acest profesor după utilizarea robinetul vrea să ia un duș, și el continuă să folosească acest lucru.

53
00:02:46,960 --> 00:02:51,310
El crede că stânga și în dreapta sunt pentru caldă și rece, nu?

54
00:02:51,310 --> 00:02:55,470
Dar poate cineva spune-mi ce aceștia fac, de fapt?

55
00:02:55,470 --> 00:02:58,060
Orice mâini?

56
00:02:58,060 --> 00:03:01,740
[Răspuns studentul nu pot fi auzite] >> O sugestie este?

57
00:03:01,740 --> 00:03:05,860
[Răspuns studentul nu pot fi auzite] Temperatura >>?

58
00:03:05,860 --> 00:03:10,460
Deci, una dintre ele controleaza temperatura și alte controale? >> [Elev] Presiunea apei.

59
00:03:10,460 --> 00:03:12,350
De apă sub presiune. Bine.

60
00:03:12,350 --> 00:03:15,100
Acest profesor merge în acest lucru și, crezând că sunt controlul la cald și rece,

61
00:03:15,100 --> 00:03:21,470
transformă un drept, care crede că este pentru fierbinte, tot drumul până

62
00:03:21,470 --> 00:03:23,560
pentru că vrea să ia un duș cald.

63
00:03:23,560 --> 00:03:28,100
Ei bine, acestea nu se potrivesc cu adevărat în sus, așa că primește această experiență nu foarte distractiv

64
00:03:28,100 --> 00:03:31,110
de a fi într-un duș rece, și știm cu toții ce simte.

65
00:03:31,110 --> 00:03:33,620
Acesta este un exemplu de un defect de proiectare.

66
00:03:33,620 --> 00:03:37,040
Ce vreau să spun cu asta este așteptarea lui de la robinet

67
00:03:37,040 --> 00:03:39,420
nu corespunde cu ceea ce a iesit de la dus,

68
00:03:39,420 --> 00:03:41,780
care este un fel de nefericit pentru el.

69
00:03:41,780 --> 00:03:44,990
Deci, acesta este un exemplu de un defect de design care se întâmplă în viața reală.

70
00:03:44,990 --> 00:03:48,020
Dar noi vedem tot felul de celelalte, precum și.

71
00:03:48,020 --> 00:03:50,390
Suntem, probabil, nu fani ai sistemului MBTA.

72
00:03:50,390 --> 00:03:55,560
Acesta este un sistem de metrou, de fapt, în Londra, care spune, "Acest buton nu este în uz."

73
00:03:55,560 --> 00:04:00,220
De ce este chiar pe acolo? De ce nu ne pasă, chiar?

74
00:04:00,220 --> 00:04:02,810
Când am fost un copil, fiind o tehnologie savvy în casă,

75
00:04:02,810 --> 00:04:05,050
ori de câte ori computerul-ar fi prăbușit, mama mea ar veni la mine,

76
00:04:05,050 --> 00:04:07,060
mi-ai aratat acest ecran și să mă întrebi ce sa întâmplat.

77
00:04:07,060 --> 00:04:09,210
>> Chiar nu știu ce înseamnă asta.

78
00:04:11,890 --> 00:04:14,700
[Râsete] Ce?

79
00:04:16,950 --> 00:04:18,019
[Râsete]

80
00:04:18,720 --> 00:04:23,050
Uneori simtim ca dezvoltatorii de software sunt doar trolling noi.

81
00:04:23,050 --> 00:04:28,460
Deoarece utilizatorii suntem ca, "Ce se întâmplă pe Cineva ne spune.?"

82
00:04:28,460 --> 00:04:32,140
Această totul se reduce la o chestiune de design.

83
00:04:32,140 --> 00:04:34,650
De design, așa cum se poate vedea, nu este pur estetica despre,

84
00:04:34,650 --> 00:04:37,230
nu e vorba de cum arata lucrurile.

85
00:04:37,230 --> 00:04:41,720
Vedem aici că această mică pop-up pe aici, de fapt arată destul de frumos.

86
00:04:41,720 --> 00:04:45,290
Ea are o umbră picătură în fundal, acesta are raze de frontieră întâmplă.

87
00:04:45,290 --> 00:04:47,550
E un fel de drăguță.

88
00:04:47,550 --> 00:04:51,480
Nu e foarte bine conceput, pentru că nu este foarte ușor de utilizat.

89
00:04:51,480 --> 00:04:54,920
Această mică pop-up care apare nu da ma orice informații

90
00:04:54,920 --> 00:04:58,450
despre ceea ce se întâmplă, nu-mi spune nimic ca utilizator

91
00:04:58,450 --> 00:05:01,400
despre cum a recupera de la această eroare.

92
00:05:01,400 --> 00:05:05,190
Dorim să ne gândim la lucruri care designul nu este.

93
00:05:05,190 --> 00:05:06,670
În primul rând, nu e estetica.

94
00:05:06,670 --> 00:05:10,800
Este, de asemenea, nu umplutura aplicația dvs. cu tone de funcționalitate inutile.

95
00:05:10,800 --> 00:05:14,890
Dacă sunteți un restaurant thailandez, probabil că nu vreau să fiu un medic dentist, în același timp.

96
00:05:14,890 --> 00:05:17,720
Întrebări și cu Facebook, nu că mulți oameni îl utilizează

97
00:05:17,720 --> 00:05:21,130
și nu a fost cu adevărat la miezul a ceea ce au fost construirea.

98
00:05:21,130 --> 00:05:24,200
Și așa e frumos să cred că nu atât de mult despre cantitatea de lucruri

99
00:05:24,200 --> 00:05:26,390
pe care le pui la cererea dumneavoastră, dar de calitate

100
00:05:26,390 --> 00:05:28,910
si cum faci ca experiență de utilizator mai bună

101
00:05:28,910 --> 00:05:32,540
de fapt, îmbunătățirea pe ceea ce ai deja.

102
00:05:32,540 --> 00:05:37,040
>> Într-un cuvânt, de design ne spune ce ar trebui să ne construim.

103
00:05:37,040 --> 00:05:41,950
De exemplu, dacă suntem construi ceva care să ne caute lucrurile,

104
00:05:41,950 --> 00:05:45,970
cum ar fi Google, de exemplu, ar trebui să facem lucrurile într-o manieră

105
00:05:45,970 --> 00:05:48,950
care necesită ca utilizatorul să ia o mulțime de clicuri pentru a ajunge la ceea ce doresc,

106
00:05:48,950 --> 00:05:52,580
sau ar trebui să o facem într-un fel, de exemplu, cu Google Instant sau completarea automată

107
00:05:52,580 --> 00:05:54,970
care ne permite să ajungem la rezultatele noastre mai repede?

108
00:05:54,970 --> 00:05:58,740
Inginerie implică, la fel ca Tommy vă va arăta, de fapt construirea.

109
00:05:58,740 --> 00:06:01,890
Există o mulțime de tipuri de design.

110
00:06:01,890 --> 00:06:06,070
De exemplu, dacă sunteți construirea ceva pentru a implementa ceva

111
00:06:06,070 --> 00:06:09,770
într-o țară din lumea a treia în cazul în care nu există electricitate mult sau că tehnologia de mult,

112
00:06:09,770 --> 00:06:11,440
va trebui să proiecteze ceea ce veți construi

113
00:06:11,440 --> 00:06:14,210
într-un mod care oferă cu ușurință accesul la oamenii de acolo.

114
00:06:14,210 --> 00:06:18,290
Dar ce fel de decizii de proiectare alte ar putea fi acolo

115
00:06:18,290 --> 00:06:21,850
sau ar putea fi implicat în ceva de genul asta?

116
00:06:23,690 --> 00:06:25,660
Da. Văd o mână.

117
00:06:25,660 --> 00:06:37,200
[Răspuns studentul nu pot fi auzite] Corect >>. Exact. Accesibilitatea este un lucru.

118
00:06:37,200 --> 00:06:40,870
O mulțime de oameni nu se gândesc, "Ce-i cu utilizatorii mei?"

119
00:06:40,870 --> 00:06:43,160
ca extremele spectrului, fie de.

120
00:06:43,160 --> 00:06:47,770
Am utilizatorii care ar putea avea dizabilități că nu mă gândesc

121
00:06:47,770 --> 00:06:50,590
și mă gândesc doar despre proiectarea pentru utilizatorul general.

122
00:06:50,590 --> 00:06:52,630
Internetul este accesibil de către toată lumea în zilele noastre,

123
00:06:52,630 --> 00:06:54,870
și eu ar trebui să fie de proiectare pentru acei oameni, de asemenea.

124
00:06:54,870 --> 00:06:58,620
Ce tipuri de decizii de proiectare alte s-ar putea face?

125
00:06:58,620 --> 00:07:00,690
Da. >> [Elev] cost.

126
00:07:00,690 --> 00:07:02,680
Cost. Foarte bine.

127
00:07:02,680 --> 00:07:08,060
Un alt lucru pe care am putea întemeia deciziile noastre de design pe costuri sunt.

128
00:07:08,060 --> 00:07:13,130
Dacă suntem o afacere, pe care doriți să construiască ceva care nu ia cost mult pentru a produce

129
00:07:13,130 --> 00:07:17,720
dar poate vinde la un cost deosebit de ridicat sau poate iau ceva profit.

130
00:07:17,720 --> 00:07:21,540
>> Acestea sunt toate diferite tipuri de design, dar atunci când suntem construi ceva pe Internet

131
00:07:21,540 --> 00:07:25,120
sau atunci când suntem construi ceva care, probabil, nu costa atat de mult pentru a construi acum,

132
00:07:25,120 --> 00:07:28,630
cum ar fi aplicații de Internet - nu trebuie să arunce capitalul de mult în ea

133
00:07:28,630 --> 00:07:30,900
, în scopul de a face ceva care chiar funcționează -

134
00:07:30,900 --> 00:07:33,490
ceea ce suntem mai îngrijorat este experiența utilizatorului.

135
00:07:33,490 --> 00:07:36,390
Noi numim acest design centrat pe utilizator.

136
00:07:36,390 --> 00:07:41,550
În esență, ceea ce implică proiectarea de utilizare centrat pe voi înșivă este punerea în pantofi de utilizatori.

137
00:07:41,550 --> 00:07:44,870
Dacă cineva semne pentru ceea ce eu sunt construirea,

138
00:07:44,870 --> 00:07:48,250
au venit în mod evident la cererea mea special, cu un scop în minte,

139
00:07:48,250 --> 00:07:50,280
cu o sarcină care doriți să o finalizați.

140
00:07:50,280 --> 00:07:53,650
Și munca ta este nu numai de a le ajuta să completeze această sarcină

141
00:07:53,650 --> 00:07:57,930
dar pentru a le ajuta să completeze această sarcină într-o manieră care să fie eficientă, intuitiv,

142
00:07:57,930 --> 00:08:01,900
și, după cum a spus o persoană acolo, accesibil.

143
00:08:01,900 --> 00:08:03,750
Ce înseamnă eficiența înseamnă?

144
00:08:03,750 --> 00:08:08,050
Eficiență înseamnă cât de repede se ghidul meu complet sarcina dat interfața meu.

145
00:08:08,050 --> 00:08:11,650
Durează o mulțime de clicuri pentru ei pentru a obține de la un loc la altul?

146
00:08:11,650 --> 00:08:14,630
Este plictisitor? Nu ei trebuie să îndeplinească o mulțime de sarcini repetitive?

147
00:08:14,630 --> 00:08:17,140
Vrem să facem acest proces cât mai eficient posibil,

148
00:08:17,140 --> 00:08:20,070
astfel încât acestea nu trebuie să facă acele felul de lucruri.

149
00:08:20,070 --> 00:08:24,230
În ceea ce privește intuitivitatea, care este, de exemplu, dacă un utilizator se uită în sus interfata mea,

150
00:08:24,230 --> 00:08:27,240
este ușor pentru ei pentru a obține de la un loc la altul?

151
00:08:27,240 --> 00:08:30,390
Este mai ușor pentru ei să dau seama ce trebuie să faceți clic în interfața mea

152
00:08:30,390 --> 00:08:33,770
în scopul de a atinge obiectivul sau activitatea pe care doresc să realizeze?

153
00:08:33,770 --> 00:08:37,520
>> Și, în cele din urmă, așa cum o persoană a zis acolo, accesibilitatea este foarte important.

154
00:08:37,520 --> 00:08:39,640
[Vorbitor de sex masculin] Se ajunge la accesibilitatea pentru lucruri cum ar fi viziune,

155
00:08:39,640 --> 00:08:42,740
place cum am proiecta, de fapt ceva pentru cineva care este orb?

156
00:08:42,740 --> 00:08:46,460
Oh. Pentru cei care nu pot vedea deloc, avem ceva numit cititoarele de ecran.

157
00:08:46,460 --> 00:08:49,070
Ce trebuie să faceți este să vă ar trebui să construiască site-ul dvs. într-un mod

158
00:08:49,070 --> 00:08:52,020
faptul că, de exemplu, tehnologii speciale ce noi numim -

159
00:08:52,020 --> 00:08:53,590
Există o mulțime de lucruri acum.

160
00:08:53,590 --> 00:08:55,660
Cred că sunt cititori de ecran JAWS numite.

161
00:08:55,660 --> 00:08:58,410
O mulțime de aceste lucruri se bazeaza pe ceea ce noi numim normele zonei

162
00:08:58,410 --> 00:09:02,010
în scopul de a citi la ghidul de ceea ce este prezent pe pagina.

163
00:09:02,010 --> 00:09:05,480
Pentru acei oameni care nu pot vedea, va trebui să vă asigurați că aceste cititori de ecran

164
00:09:05,480 --> 00:09:09,130
poate ridica de fapt, conținutul de pe pagină și poate arăta de fapt, utilizatorii dvs.,

165
00:09:09,130 --> 00:09:13,630
în cazul în care nu puteți vedea, cel puțin puteți înțelege încă conținutul de pe pagina.

166
00:09:13,630 --> 00:09:16,190
Da. Bine.

167
00:09:16,190 --> 00:09:23,410
Gata cu vorba despre design bun. Hai sa vorbim despre design rău.

168
00:09:23,410 --> 00:09:25,220
Acestea sunt lucruri pe care nu ar trebui să facă.

169
00:09:25,220 --> 00:09:27,890
Poate cineva sa-mi spui despre experiențele lor cu Craigslist

170
00:09:27,890 --> 00:09:32,190
și ceea ce ei cred că nu este atât de mare despre acest design?

171
00:09:33,690 --> 00:09:36,430
Da. >> [Elev] Cred că e prea multe cuvinte într-o zonă.

172
00:09:36,430 --> 00:09:39,350
Prea multe cuvinte, nu? Complet copleșitoare.

173
00:09:39,350 --> 00:09:42,400
Ai venit la această pagină și sunteți întâmpinați cu o grămadă de lucruri aici

174
00:09:42,400 --> 00:09:43,860
care ar putea să nu mai contează pentru tine.

175
00:09:43,860 --> 00:09:47,010
De exemplu, tu trăiești într-un stat care nu începe cu această literă.

176
00:09:47,010 --> 00:09:48,690
Să spunem că locuiți în Texas sau ceva de genul.

177
00:09:48,690 --> 00:09:53,790
>> Trebuie să defilați tot drumul în jos pentru a ajunge la pagina de locația vă aflați.

178
00:09:53,790 --> 00:10:00,320
Sunt din Boston, asa ca lasa-mă să mă uit în Massachusetts. În cazul în care este Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, e chiar aici. Oh, e din Boston. Bine.

180
00:10:03,270 --> 00:10:09,070
Să ne uităm la Boston. [Râsete]

181
00:10:09,070 --> 00:10:12,250
Destul de copleșitoare, nu?

182
00:10:12,250 --> 00:10:16,400
Lucruri incomode acolo. [Râsete]

183
00:10:17,320 --> 00:10:19,470
Să spunem că eu sunt în căutarea unui loc de a trăi.

184
00:10:19,470 --> 00:10:24,130
Câți oameni au fost utilizate efectiv Craigslist? Tone de tine.

185
00:10:24,130 --> 00:10:30,960
Există mai multe moduri destul de rele să se uite la acest lucru, dar să ne uităm la asta.

186
00:10:35,130 --> 00:10:38,970
Care este diferența dintre img pic și? Poate cineva sa-mi spui?

187
00:10:41,350 --> 00:10:42,830
Nu există de fapt nici o diferență.

188
00:10:42,830 --> 00:10:47,710
Ele înseamnă exact același lucru, dar au etichete diferite pentru ei pentru un motiv oarecare.

189
00:10:48,980 --> 00:10:53,560
Dacă aș click pe imagine Are, nu se întâmplă nimic pe pagina.

190
00:10:53,560 --> 00:10:57,490
Am fapt trebuie să faceți clic pe Căutare din nou să se întâmple ceva.

191
00:10:57,490 --> 00:11:02,430
Ceea ce ar putea fi o decizie de design mai bun, care ar putea fi făcut acolo?

192
00:11:03,820 --> 00:11:08,030
Dacă am faceți clic pe acel filtru, probabil că doriți să filtrați prin faptul că anumită acțiune

193
00:11:08,030 --> 00:11:09,970
sau faptul că anumite categorii.

194
00:11:09,970 --> 00:11:14,450
Deci, în loc de a trebui să apăsați Search din nou, aș putea doar să facă în mod automat de filtrare

195
00:11:14,450 --> 00:11:17,060
un fel de stil de Google pe care o fac instantaneu.

196
00:11:17,060 --> 00:11:20,440
[Malan] Dar nu face așa cum le-am văzut până acum trebuie să fie transmise fizic

197
00:11:20,440 --> 00:11:23,170
prin apăsarea Enter sau cel puțin un click pe un buton?

198
00:11:23,170 --> 00:11:26,830
Așa cum le-ai vazut pana acum, de fapt trebuie să faceți clic pe Submit pentru a face aceste lucruri.

199
00:11:26,830 --> 00:11:30,090
>> Dar, așa cum Tommy vă va arăta într-o secundă, sunt de fapt modalități pentru tine

200
00:11:30,090 --> 00:11:33,010
astfel încât atunci când faceți clic pe chestia aia poate trimite în mod automat

201
00:11:33,010 --> 00:11:38,840
ceea ce noi numim o cerere AJAX și obțineți date înapoi și filtra rezultatele instantaneu.

202
00:11:38,840 --> 00:11:41,340
Nu sunt de tone de lucruri care sunt în neregulă cu această interfață.

203
00:11:41,340 --> 00:11:43,530
[Malan] Poți căuta Cambridge?

204
00:11:43,530 --> 00:11:47,030
E ceva anormal ușor aici, unde vă pasă de Cambridge

205
00:11:47,030 --> 00:11:54,790
și totuși ești obtinerea Westford, Spring Hill, West Newton și cum ar fi.

206
00:11:54,790 --> 00:11:57,930
Probabil nu este ideal. Probabil că nu >> ideală.

207
00:11:57,930 --> 00:12:03,900
Cum aș putea fi capabil de a face experiența utilizatorului mai bine pe această pagină special?

208
00:12:03,900 --> 00:12:07,340
Da. >> [Elev] manual.

209
00:12:07,340 --> 00:12:09,500
Bine. Instrucțiuni în ce fel de sens?

210
00:12:09,500 --> 00:12:14,630
[Elev] De exemplu, un lucru pentru utilizatorii prima dată, care nu știu nici măcar ce este Craigslist

211
00:12:14,630 --> 00:12:17,320
sau nu stii ce ar trebui să fac.

212
00:12:17,320 --> 00:12:20,150
Corect. Deci, explicând ce Craigslist este de pe aceasta pagina este important.

213
00:12:20,150 --> 00:12:23,490
Putem spune de fapt, utilizatorii ce este de fapt această pagină pentru.

214
00:12:23,490 --> 00:12:27,090
Dacă am în vizită la asta, văd o grămadă de locuri. Eu nici măcar nu știu ce înseamnă.

215
00:12:27,090 --> 00:12:29,730
Dar, mai important, doar se uită la acest interfață,

216
00:12:29,730 --> 00:12:35,530
aduc aminte ca am avut pentru a defila în jos o grămadă de lucruri pentru a găsi o anumită comunitate

217
00:12:35,530 --> 00:12:37,560
că de fapt am pasa pe asta.

218
00:12:37,560 --> 00:12:39,820
Ce e un mod mai rapid am putea face asta? Da.

219
00:12:39,820 --> 00:12:43,290
[Elev] împărțiți-le în sus, în est, vest regiuni. Bine >>.

220
00:12:43,290 --> 00:12:47,460
Eu le-ar putea împărți în mai multe categorii, care ar putea ajuta la mine mai repede determinarea

221
00:12:47,460 --> 00:12:49,820
cum să ajungi la acea locație specială.

222
00:12:49,820 --> 00:12:54,510
[Elev] Pune o lista drop-down. Corect >>. Bine.

223
00:12:54,510 --> 00:12:58,240
Am putea folosi un meniu drop-down pentru ca avem un set fix de lucruri

224
00:12:58,240 --> 00:13:00,100
și le-am putea arăta într-un meniu drop-down.

225
00:13:00,100 --> 00:13:02,240
În acest fel nu se ocupă atât de mult spațiu pe ecran.

226
00:13:02,240 --> 00:13:05,630
Dar, chiar mai mult decât atât, ce putem face?

227
00:13:05,630 --> 00:13:09,220
Da. >> [Răspunsul elevului neauzit] >> Poți să spui asta din nou? >> [Elev] caseta de căutare.

228
00:13:09,220 --> 00:13:11,260
Da, o casetă de căutare. Asta-i grozav.

229
00:13:11,260 --> 00:13:16,430
Ce putem face este de fapt, dacă ne uităm înapoi la caseta de căutare diapozitive,.

230
00:13:16,430 --> 00:13:21,520
Completarea automată. Mod foarte simplu de a căuta prin rezultatele pe care le cunoașteți sunt într-un set.

231
00:13:21,520 --> 00:13:25,980
Dacă aș începe să tastați BO, doar arata-mi toate rezultatele care au in interiorul lor BO.

232
00:13:25,980 --> 00:13:29,030
Că modul în care am putea foarte ușor afla unul special, vreau să merg la

233
00:13:29,030 --> 00:13:32,390
în loc de a avea pentru a defila prin această listă foarte mare.

234
00:13:32,390 --> 00:13:37,450
>> Acestea sunt tot felul de foarte joasă agățat de fructe ca cineva care este de punere în aplicare Craigslist

235
00:13:37,450 --> 00:13:42,500
poate face de fapt, pentru a face experiența pe site-ul mult mai bine pentru utilizatorul lor special.

236
00:13:42,500 --> 00:13:46,370
Bine. Destul vorbim despre site-uri proaste.

237
00:13:46,370 --> 00:13:49,410
Să vorbim despre Facebook.

238
00:13:50,880 --> 00:13:54,390
Cand Facebook a ieșit, și în special fotografii pe Facebook,

239
00:13:54,390 --> 00:13:57,870
au existat o mulțime de alte servicii, la timpul pe care ar putea face exact aceleași lucruri.

240
00:13:57,870 --> 00:14:00,740
Ele ar putea organiza fotografiile în albume.

241
00:14:00,740 --> 00:14:03,360
Ce ai putea face este ca le-ar putea organiza în seturi, de asemenea.

242
00:14:03,360 --> 00:14:06,070
Ai putea să le organizați cu data. Ai putea face toate aceste lucruri particulare.

243
00:14:06,070 --> 00:14:11,710
Dar nimeni nu știe ce a făcut fotografii pe Facebook exploda în momentul în care a fost eliberat?

244
00:14:11,710 --> 00:14:15,080
Da. >> [Studențești] Tags. Tag-uri >>. Exact.

245
00:14:15,080 --> 00:14:21,300
Avem aici Milo, care este mascota noastră caine cu bandană CS50.

246
00:14:21,300 --> 00:14:24,810
Puteți vedea că avem această caracteristică tagging în mijloc.

247
00:14:24,810 --> 00:14:28,240
Și ceea ce a făcut fotografiile pe Facebook atât de interesant din punct de vedere uzabilitate

248
00:14:28,240 --> 00:14:34,130
este că, de fapt a permis oamenilor prin aceasta să implice prietenii lor în fotografiile lor.

249
00:14:34,130 --> 00:14:37,680
Pentru Facebook, deoarece site-ul lor este deosebit de sociale,

250
00:14:37,680 --> 00:14:40,750
este vorba despre construirea acestui tip de atmosferă socială.

251
00:14:40,750 --> 00:14:42,620
Că a îmbunătățit experiența de fotografii mult mai mult

252
00:14:42,620 --> 00:14:46,390
deoarece acestea ar putea începe de fapt spune, "Acestea sunt conexiuni între oameni,

253
00:14:46,390 --> 00:14:49,220
și acestea sunt fotografii despre persoanele dragi de fapt, despre. "

254
00:14:49,220 --> 00:14:52,200
O parte din ea este, de asemenea, un fel narcisism.

255
00:14:52,200 --> 00:14:54,980
Oamenilor le place să fie etichetat în fotografii și lucruri de genul asta.

256
00:14:54,980 --> 00:14:58,510
În timp ce faptul că nu este neapărat o trăsătură umană bună,

257
00:14:58,510 --> 00:15:01,910
în același timp, este bazat pe decizii de proiectare bune

258
00:15:01,910 --> 00:15:04,860
pentru că oamenii de fapt pasă de astfel de lucruri.

259
00:15:04,860 --> 00:15:07,190
Așa că e fotografii pe Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Dar hai sa vorbim pe Facebook, în general, mai mult.

261
00:15:09,800 --> 00:15:13,400
Sunt sigur că o mulțime de oameni de aici au opinii despre Facebook,

262
00:15:13,400 --> 00:15:16,430
ambele decizii bune de proiectare și de proiectare decizii proaste.

263
00:15:16,430 --> 00:15:20,270
Deci, hai sa ventileze sau să fie fericit.

264
00:15:23,480 --> 00:15:26,450
Haide. Știu că toți folosesc Facebook.

265
00:15:26,450 --> 00:15:30,970
Cineva trebuie să aibă ceva rău de spus sau ceva bun de spus despre asta. Da.

266
00:15:30,970 --> 00:15:35,060
[Elev] În news feed există o mulțime de lucruri pe care nu le pasa cu adevarat despre.

267
00:15:35,060 --> 00:15:37,740
News Feed nu arată o mulțime de lucruri pe care nu s-ar putea pasa.

268
00:15:37,740 --> 00:15:41,660
Ai prieteni pe Facebook, care nu v-ați întâlnit timp de 2 sau 3 ani

269
00:15:41,660 --> 00:15:43,860
și veți vedea rezultatele lor de știri popping sus în hrana știri

270
00:15:43,860 --> 00:15:45,870
și nu-mi pasă cu adevărat despre el.

271
00:15:45,870 --> 00:15:48,700
Facebook a facut, de fapt un efort de a face acest lucru mai bine,

272
00:15:48,700 --> 00:15:53,150
si de fapt, le-am încercat să împingă rezultate relevante pentru partea de sus a fluxului de știri de la sfârșitul anului

273
00:15:53,150 --> 00:15:58,300
astfel încât veți vedea de fapt, lucrurile de prietenii care sunt relevante pentru tine sau prietenii tai apropiati.

274
00:15:58,300 --> 00:16:01,110
Altceva? Da.

275
00:16:01,110 --> 00:16:06,400
[Răspuns studentul nu pot fi auzite] >> Poți să spui asta din nou?

276
00:16:06,400 --> 00:16:10,140
[Elev] Anunțurile sunt relativ discret. >> În ce sens?

277
00:16:10,140 --> 00:16:16,370
[Răspuns studentul nu pot fi auzite] Ei nu au lumina de pe ecran, cum ar fi banner.

278
00:16:16,370 --> 00:16:17,760
Bine. Asta e bine.

279
00:16:17,760 --> 00:16:25,030
Dacă vă amintiți de Internet din anii '90 - >> [Malan] Am fost acolo. El a fost acolo >>. [Râsete]

280
00:16:25,030 --> 00:16:29,210
S-ar putea aminti medii intermitente, GIF-uri stralucitoare lucruri,

281
00:16:29,210 --> 00:16:31,570
GeoCities fel de stil de lucruri.

282
00:16:31,570 --> 00:16:34,080
Asta nu e chiar un exemplu de bun design

283
00:16:34,080 --> 00:16:36,690
pentru că este într-adevăr distrage atenția de la conținut.

284
00:16:36,690 --> 00:16:39,590
Arta Yale site-ul utilizat pentru a avea GIF-uri animate ca fundal lor

285
00:16:39,590 --> 00:16:41,800
și nu putea citi nimic pe pagina,

286
00:16:41,800 --> 00:16:44,870
dar cred că cineva de fapt, a vorbit cu ei și acum e un pic diferit.

287
00:16:44,870 --> 00:16:48,940
[Malan] E mult mai bine acum. >> E mult mai bine acum, după cum puteți vedea. >> [Malan] Oh, da.

288
00:16:48,940 --> 00:16:56,020
Doar o mare, doar - Da. Bine.

289
00:16:56,020 --> 00:17:00,560
>> O parte din ea este, de asemenea, face pagina, eventual, foarte minimalist și foarte ușor de înțeles

290
00:17:00,560 --> 00:17:05,690
deci lucrurile pe fluxul de pagină într-un mod care este foarte logică și nu primesc în mod reciproc.

291
00:17:05,690 --> 00:17:11,849
Felul de alte lucruri ce sunt bune sau rele despre Facebook despre Facebook?

292
00:17:11,849 --> 00:17:15,730
Hai să aibă doar o conversație de design aici.

293
00:17:19,470 --> 00:17:21,339
Oh. În cazul în care? Da.

294
00:17:21,339 --> 00:17:25,640
[Elev] Sistemul Cronologie noi vă permite să căutați profilul persoanei despre trecutul lor.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Cronologie este un lucru mare, pentru că vă permite să tulpină prietenii tăi

297
00:17:30,280 --> 00:17:33,300
înapoi, atunci când erau în liceu.

298
00:17:35,160 --> 00:17:38,060
Cronologie este bun, deoarece vă permite să filtrați prin continutul mult mai repede,

299
00:17:38,060 --> 00:17:41,500
aceasta vă permite să găsiți lucruri care altfel ar fi luat un timp foarte lung pentru a găsi

300
00:17:41,500 --> 00:17:45,840
doar derulând în sus și în jos, sus, sus, sus, sus, sus, la fel ca merge înapoi în timp.

301
00:17:45,840 --> 00:17:48,910
Dar, apoi, există, de asemenea, un fel de dezavantaj pentru că, în ceea ce privește experiența utilizatorului.

302
00:17:48,910 --> 00:17:51,190
Ce ar putea fi asta?

303
00:17:51,190 --> 00:17:56,780
Cuvânt mare care începe cu P-R. >> [Elev] confidentialitate. >> De confidențialitate, nu?

304
00:17:56,780 --> 00:17:59,970
Intimitatea este o mare experiență de utilizare problemă.

305
00:17:59,970 --> 00:18:07,190
Acesta este unul dintre lucrurile pe care le-am urăsc cel mai despre Facebook acum. [Râsete]

306
00:18:07,190 --> 00:18:09,000
[Malan] cum fac eu acum.

307
00:18:09,000 --> 00:18:11,380
David nu a realiza acest lucru sa întâmplat de fapt pana ieri.

308
00:18:11,380 --> 00:18:14,560
Deci, acum el știe că de fiecare dată când l-am discuție știu că a fost mă ignoră.

309
00:18:14,560 --> 00:18:16,880
[Malan] partea ciudată a fost am fost de fapt el ignorând,

310
00:18:16,880 --> 00:18:21,040
și nu am știut că știa că-l ignoră. [Râsete]

311
00:18:21,040 --> 00:18:24,030
Intimitatea este o problemă uriașă.

312
00:18:24,030 --> 00:18:28,670
Poate cineva de aici spune-mi ce s-ar putea să fie rău despre Facebook de confidențialitate

313
00:18:28,670 --> 00:18:32,270
în afară de faptul că fac lucruri de genul asta?

314
00:18:32,270 --> 00:18:37,240
Ce este deosebit de greu de a face cu privire la viața privată Facebook?

315
00:18:37,240 --> 00:18:40,340
Acest tip de lider este o întrebare.

316
00:18:41,680 --> 00:18:43,930
Da. >> [Elev] Ascunde-vă fotografiile de la anumite persoane.

317
00:18:43,930 --> 00:18:46,170
Corect. Exact, pentru a ascunde fotografiile de la anumite persoane.

318
00:18:46,170 --> 00:18:51,290
Ei au acest buton mic, mic, în dreapta sus care vă permite să comutați intimitatea unei fotografii.

319
00:18:51,290 --> 00:18:56,360
Opțiunile de confidențialitate ale acestora sunt foarte variate între diferite tipuri de meniuri.

320
00:18:56,360 --> 00:18:59,510
>> Ei au devenit mult mai bună despre el recent, dar este folosit pentru a fi cazul

321
00:18:59,510 --> 00:19:04,870
că ori de câte ori ai vrut pentru a preveni prietenii tăi din fotografii văd,

322
00:19:04,870 --> 00:19:08,280
va trebui să treacă printr-un foarte complicat 5-pas procesul de a fi ca,

323
00:19:08,280 --> 00:19:11,150
lasă-mă să faceți clic pe acest link, acum să-mi faceți clic din nou, permiteți-mi să faceți clic din nou,

324
00:19:11,150 --> 00:19:13,420
permiteți-mi să specificați pe care oamenii nu pot vedea fotografiile mele.

325
00:19:13,420 --> 00:19:17,250
Asta nu este deosebit de bun din partea Facebook

326
00:19:17,250 --> 00:19:20,530
pentru că atât de mult despre experiența de utilizare este, de fapt, oferindu-le libertatea

327
00:19:20,530 --> 00:19:22,460
pentru a controla ceea ce oamenii pot vedea.

328
00:19:22,460 --> 00:19:25,550
Noi numim acest control utilizator și libertate.

329
00:19:25,550 --> 00:19:31,090
Dacă nu sunteți permitandu-le utilizatorilor dvs. de a face asta într-un mod care este eficient și intuitiv,

330
00:19:31,090 --> 00:19:34,570
apoi experiența dvs. de utilizator nu este chiar atat de mare, la toate.

331
00:19:34,570 --> 00:19:38,200
 Ar voi dori să spun ceva despre Facebook?

332
00:19:38,700 --> 00:19:41,420
Cum pot transforma asta?

333
00:19:41,420 --> 00:19:46,290
[Ong] Nu puteți transforma acest off, și că este un defect utilizare imens pe partea de Facebook.

334
00:19:46,290 --> 00:19:49,410
Această caracteristică - de fapt am uitat în ea ieri -

335
00:19:49,410 --> 00:19:53,940
este fie că nu poți face sau e îngropat undeva foarte, foarte profund

336
00:19:53,940 --> 00:19:58,050
în adâncul Facebook pentru că eu nu pot da seama cum de a dezactiva această opțiune, la toate.

337
00:19:58,050 --> 00:20:00,400
[Malan] Dar, uneori, aceste decizii nu sunt evidente

338
00:20:00,400 --> 00:20:03,890
deoarece voi ne-au dat o mulțime de feedback util cu privire la diferite aplicații CS50

339
00:20:03,890 --> 00:20:05,710
și site-uri care utilizează cursul.

340
00:20:05,710 --> 00:20:10,260
Nu am pus în aplicare toate aceste solicitări și sugestii.

341
00:20:10,260 --> 00:20:14,550
>> O parte din faptul că este pentru a obține atât de multe cereri ca este o funcție de timp,

342
00:20:14,550 --> 00:20:17,070
dar, uneori, facem doar o decizie conștientă ca,

343
00:20:17,070 --> 00:20:19,830
"Va multumesc pentru sugestie, dar nu suntem de acord."

344
00:20:19,830 --> 00:20:24,350
Deci, cum a face tu de fapt, decideți ce trebuie să faceți în cazul în care utilizatorii dvs. că ar trebui să faci ceva

345
00:20:24,350 --> 00:20:28,110
chiar dacă nu neapărat?

346
00:20:28,110 --> 00:20:32,360
E un echilibru fin între a asculta de fapt, ceea ce utilizatorii dvs. spun

347
00:20:32,360 --> 00:20:35,840
și având de fapt, un fel de linie pe care ai spus,

348
00:20:35,840 --> 00:20:37,750
"Noi nu vom face ceea ce spun acești utilizatori."

349
00:20:37,750 --> 00:20:42,520
Și, în special, cred că a fost un citat din Henry Ford, care rezumă asta destul de bine.

350
00:20:42,520 --> 00:20:47,130
"Dacă aș fi întrebat oamenii ce au vrut, ar fi spus că vrea cai mai rapide."

351
00:20:47,130 --> 00:20:51,840
Poate cineva să sortați a tachineze pe langa ceea ce înseamnă cu adevărat acest citat?

352
00:20:51,840 --> 00:20:56,060
Nu e doar faptul că utilizatorii știu ce vor,

353
00:20:56,060 --> 00:20:59,180
dar e mai mult de -

354
00:20:59,180 --> 00:21:02,720
[Elev] Ei nu stiu ceea ce este posibil.

355
00:21:02,720 --> 00:21:06,140
În parte ei nu știu ce este posibil.

356
00:21:07,880 --> 00:21:11,440
Șicana că, pe lângă un pic mai mult. Ce vrei să spui cu asta?

357
00:21:11,440 --> 00:21:21,340
[Răspuns studentul neauzit]

358
00:21:21,340 --> 00:21:25,770
Asta e bine. Ceea ce cred eu incercam sa spun aici este că oamenii știu ce vor.

359
00:21:25,770 --> 00:21:28,050
Ei vor cai mai rapide.

360
00:21:28,050 --> 00:21:29,840
Ceea ce ei doresc cu adevărat este abilitatea de a se misca mai repede,

361
00:21:29,840 --> 00:21:32,310
dar ei nu știu cu adevărat mediu prin care să realizeze acest lucru.

362
00:21:32,310 --> 00:21:36,330
Când vin la utilizatorii dvs. și utilizatorii dvs. să vă spun ceva

363
00:21:36,330 --> 00:21:39,700
și ei vă spun, "Vrem ca aceste caracteristici și aceste caracteristici și aceste caracteristici,"

364
00:21:39,700 --> 00:21:42,650
nu vreau sa ma gandesc neaparat despre, "Lasă-mă să merg mai departe

365
00:21:42,650 --> 00:21:44,720
"Și punerea în aplicare ceea ce spun în mod explicit,"

366
00:21:44,720 --> 00:21:48,610
dar ce vrei să ne gândim este, "Ce fel de idei pot obține de la asta?"

367
00:21:48,610 --> 00:21:50,450
Ce vor de fapt?

368
00:21:50,450 --> 00:21:55,560
>> Și de acolo ce se poate face este proiecta ceva care satisface aceste cereri

369
00:21:55,560 --> 00:22:00,340
dar nu neapărat în modul în care utilizatorul se așteaptă ca aceasta să fie îndeplinite.

370
00:22:00,340 --> 00:22:03,830
Deci, pentru ceva de genul proiecte finale, în termeni foarte reale,

371
00:22:03,830 --> 00:22:07,900
ceea ce e un euristic util atunci când vine vorba de a face ceva mai bun,

372
00:22:07,900 --> 00:22:10,630
mai ales dacă proiectantul are această aroganță despre el

373
00:22:10,630 --> 00:22:14,360
, prin care un fel de Știi ce e cel mai bine, s-ar putea lua de intrare de la utilizatori,

374
00:22:14,360 --> 00:22:16,580
dar cum te duci de fapt, despre obtinerea feedback-ul asta?

375
00:22:16,580 --> 00:22:21,610
În proiectele finale, foarte concret, ceea ce produce rezultate optime aici?

376
00:22:21,610 --> 00:22:25,030
Ce produce rezultate optime - și voi trece peste aceasta într-o secundă -

377
00:22:25,030 --> 00:22:29,190
este acest proces de dezvoltare și apoi de testare și apoi iterarea.

378
00:22:29,190 --> 00:22:32,020
Ce vreau să spun prin testare este, de obicei, atunci când proiectați ceva

379
00:22:32,020 --> 00:22:36,970
Crezi că e destul de bun, cum ar fi, "Sunt un astfel de designer de mare. Toată lumea este de gând să iubesc acest lucru."

380
00:22:36,970 --> 00:22:41,600
Și apoi l-ai pus acolo si oamenii nu prea-l place pentru un motiv oarecare.

381
00:22:41,600 --> 00:22:46,820
Ceea ce trebuie să faceți este să vă trebui să ia părți din lucrurile pe care le fac oamenii ca

382
00:22:46,820 --> 00:22:49,180
și restructura lucrurile pe care oamenii nu le place.

383
00:22:49,180 --> 00:22:53,080
Se pare ca un proces foarte evident, dar acest proces de continuă iterarea

384
00:22:53,080 --> 00:22:55,980
pe partea de sus a ceea ce ați construit deja este un proces care vă ajută să

385
00:22:55,980 --> 00:22:59,730
nu numai rafina abilitățile dumneavoastră proprii de proiectare, dar, de asemenea, vă ajută să vă îmbunătățiți de proiectare

386
00:22:59,730 --> 00:23:03,790
astfel ca oamenii apreciaza de fapt produsul dvs., chiar mai mult decât au făcut-o înainte.

387
00:23:03,790 --> 00:23:07,390
>> Voi trece peste mai multe exemple concrete de ceea ce s-ar putea face de fapt.

388
00:23:07,390 --> 00:23:11,390
Ca un fel de ultim exemplu al unui produs, să ne uităm la caiac.

389
00:23:11,390 --> 00:23:14,970
KAYAK atunci când a ieșit a fost foarte, foarte popular.

390
00:23:14,970 --> 00:23:18,760
Poate cineva ghici de ce?

391
00:23:18,760 --> 00:23:20,950
Care sunt felul de lucruri care iti plac despre acest lucru, dacă l-ați folosit

392
00:23:20,950 --> 00:23:23,990
sau care sunt felul de lucruri care nu vă plac?

393
00:23:23,990 --> 00:23:31,590
Da. >> [Elevului răspunsul neauzit] >> Ok.

394
00:23:31,590 --> 00:23:34,730
Asta e parte din el se lasa utilizator, au o interogare, care este mult mai expansiv

395
00:23:34,730 --> 00:23:38,150
decat una foarte restrictive, de tipul, "Trebuie să alegeți data de începere

396
00:23:38,150 --> 00:23:39,810
"Și va trebui să alegeți data de terminare."

397
00:23:39,810 --> 00:23:44,910
De fapt, aceasta vă permite să fie flexibil cu privire la aceasta și vă oferă toate zborurile din acel interval.

398
00:23:44,910 --> 00:23:46,730
Altceva?

399
00:23:46,730 --> 00:23:50,530
[Elev] Acestea includ taxele în prețul.

400
00:23:50,530 --> 00:23:53,330
Acestea nu includ taxele în prețul.

401
00:23:53,330 --> 00:23:56,720
Impozitele și lucrurile merg de fapt, direct în acest preț, în stânga sus

402
00:23:56,720 --> 00:24:00,710
deci nu te păcălit de gândire în care sunteți de fapt, plata pentru un zbor de 240 dolari

403
00:24:00,710 --> 00:24:03,280
atunci când este într-adevăr $ 330.

404
00:24:03,280 --> 00:24:06,200
Altceva? Da.

405
00:24:06,200 --> 00:24:10,140
[Răspuns studentul neauzit]

406
00:24:10,140 --> 00:24:14,610
Nu sunt sigur dacă au lăsat de fapt să faci asta.

407
00:24:14,610 --> 00:24:18,310
S-ar putea fi greșit.

408
00:24:18,310 --> 00:24:23,360
Asta ar putea fi un lucru interesant, dacă vrei să pui în greutate mai mult pe filtre speciale

409
00:24:23,360 --> 00:24:27,000
astfel încât acestea să împingă rezultatele referitoare la faptul că filtrul de la început.

410
00:24:27,000 --> 00:24:31,920
Dar poate cineva sa-mi spui ce este atât de special despre acest stanga?

411
00:24:31,920 --> 00:24:39,540
Cum te-ai uitat în mod tradițional un zbor pe un serviciu de Internet înainte de asta?

412
00:24:41,600 --> 00:24:44,650
>> Da. >> [Elevului răspunsul neauzit] >> Poți să spui că -

413
00:24:44,650 --> 00:24:47,530
[Elev] Fiecare companie aeriană. Da >>. Fiecare companie aeriană are site-ul propriu.

414
00:24:47,530 --> 00:24:50,110
Acest lucru consolidează lucruri. Și?

415
00:24:50,110 --> 00:24:52,190
[Elev] Știi exact la ce oră pleci.

416
00:24:52,190 --> 00:24:54,460
Știi exact la ce oră pleci,

417
00:24:54,460 --> 00:24:59,380
dar legate de filtrele în special.

418
00:25:00,710 --> 00:25:03,540
Lasă-mă să trageți în sus caiac.

419
00:25:11,490 --> 00:25:14,020
O, Doamne, pop-up-uri. Experiența utilizatorului Bad.

420
00:25:14,020 --> 00:25:17,230
Ce se întâmplă când mutați cursorul asta?

421
00:25:17,230 --> 00:25:21,010
[] Studențești actualizări automate. >> [Ong] actualizări automate.

422
00:25:21,010 --> 00:25:23,440
Asta e ceva ce e foarte important.

423
00:25:23,440 --> 00:25:25,380
Înainte de aceasta, ori de câte ori ai vrut să te uiți în sus un zbor,

424
00:25:25,380 --> 00:25:28,410
ai avut de a pune în locația dvs. de intrare, locația dvs. de ieșire, apăsați pe Căutare,

425
00:25:28,410 --> 00:25:31,190
s-ar procesa si arata ca rezultatele.

426
00:25:31,190 --> 00:25:34,120
Dacă ați fi dorit să schimbați interogare, va trebui să apăsați de două ori înapoi,

427
00:25:34,120 --> 00:25:39,770
introduceți într-o interogare nouă de la zero, iar apoi o fac de peste si peste din nou.

428
00:25:39,770 --> 00:25:43,910
Cel mai frumos lucru despre ceva de genul asta este ca foloseste un foarte [neinteligibil] lucru în mijloc.

429
00:25:43,910 --> 00:25:46,230
Ori de câte ori faci ceva de genul asta, se impusca pe o cerere

430
00:25:46,230 --> 00:25:48,420
și returnează toate rezultatele imediat.

431
00:25:48,420 --> 00:25:51,680
Acest tip de feedback-ul imediat este ceva care a făcut extrem de popular KAYAK

432
00:25:51,680 --> 00:25:55,910
pentru că este foarte ușor pentru mine să se schimbe doar interogarea mea

433
00:25:55,910 --> 00:25:58,890
și să dau seama de lucrurile care sunt în jurul valorii de un anumit interval

434
00:25:58,890 --> 00:26:01,950
fără a fi nevoie pentru a merge inainte si inapoi, inainte si inapoi, inainte si inapoi.

435
00:26:01,950 --> 00:26:05,200
Deci, acestea sunt tot felul de lucruri pe care doriți să se gândească atunci când sunteți proiectarea site-ul dvs..

436
00:26:05,200 --> 00:26:08,930
Cum pot face foarte eficient pentru utilizatorii mei să treacă prin tot ceea ce lucrați

437
00:26:08,930 --> 00:26:13,010
și pentru a ajunge la scopul lor final cât mai repede posibil?

438
00:26:13,010 --> 00:26:16,430
[Malan] Si la punctul lui Iosif mai devreme despre utilizatori nu neapărat să știe ceea ce doresc,

439
00:26:16,430 --> 00:26:18,640
bazează pe ceea ce voi stiu acum despre HTML

440
00:26:18,640 --> 00:26:22,780
și aveți casetele, butoane radio, meniuri selectați, câmpuri de intrare și similare,

441
00:26:22,780 --> 00:26:26,140
cum ați pune în aplicare ideea de a alege un timp de pornire pentru un zbor?

442
00:26:26,140 --> 00:26:30,030
>> Care dintre aceste mecanisme diferite UI ai folosi?

443
00:26:30,030 --> 00:26:34,100
Dacă știți doar cantitatea de HTML care a fost învățat înainte de

444
00:26:34,100 --> 00:26:39,070
și știți intrarile sunt butoanele radio, casetele de validare, drop-coborâșuri, și caseta de intrare,

445
00:26:39,070 --> 00:26:43,320
ce s-ar aleasã naturală au fost pentru cules datele?

446
00:26:43,320 --> 00:26:48,670
[Elev] de intrare. >> De intrare. Sau poate chiar un drop-down, cu toate datele, nu?

447
00:26:48,670 --> 00:26:53,170
Deci, cu mecanisme mai complexe, cum ar fi acest UI de pe partea stanga pe care le puteți pune în aplicare,

448
00:26:53,170 --> 00:26:55,500
puteți face acest proces mult mai intuitiv, cu un cursor

449
00:26:55,500 --> 00:27:01,020
pentru că timpul este continuu, iar oamenii, de obicei, nu cred că de ea în termeni de bucăți discrete.

450
00:27:01,020 --> 00:27:04,950
Bine. Ultima lucru.

451
00:27:04,950 --> 00:27:07,370
Zece uzabilitate euristice.

452
00:27:07,370 --> 00:27:10,820
Toate lucrurile despre care am vorbit, probabil, se încadrează în una dintre aceste categorii.

453
00:27:10,820 --> 00:27:14,420
Dacă te duci la acest link, site-urile care vor fi postate on-line,

454
00:27:14,420 --> 00:27:18,900
vei fi de fapt posibilitatea de a, în timp ce proiectați site-ul dvs., păstrați în minte aceste euristici

455
00:27:18,900 --> 00:27:21,330
și aceste reguli de degetul mare.

456
00:27:21,330 --> 00:27:26,610
Pentru proiectele tale, ceea ce îți sugerez să faci pentru a proiecta mai bine aplicația

457
00:27:26,610 --> 00:27:28,850
este de a face prototipuri de hârtie prima.

458
00:27:28,850 --> 00:27:32,150
Când te gândești despre cererea dumneavoastră, foarte repede schița ceea ce vrei tu să arate ca

459
00:27:32,150 --> 00:27:36,230
și asigurați-vă că toate casetele sunt aranjate într-un mod care este foarte intuitiv pentru utilizator de a utiliza

460
00:27:36,230 --> 00:27:39,820
și arată chiar aceste prototipuri de hârtie pentru a-ți prietenii și începe focus-grupuri.

461
00:27:39,820 --> 00:27:44,230
Obține doar 2 sau 3 persoane împreună și să le cereți să apăsați doar pe aceste prototipuri de hârtie,

462
00:27:44,230 --> 00:27:47,650
și arată-le ecrane noi pentru a vedea dacă au înțeles de fapt ceea ce se întâmplă.

463
00:27:47,650 --> 00:27:50,680
>> Ce vrei să faci este să le dea o sarcină, de a motiva această sarcină,

464
00:27:50,680 --> 00:27:53,270
și dă-le doar aplicația și lăsați-le-l folosească.

465
00:27:53,270 --> 00:27:56,530
Nu le da instrucțiuni dincolo de asta.

466
00:27:56,530 --> 00:28:00,920
Doriți să lăsați de fapt, să interacționeze cu aplicația dvs. într-un mod care vă permite să vedeți

467
00:28:00,920 --> 00:28:03,870
cum s-ar folosi, dacă nu au fost în picioare lângă ele.

468
00:28:03,870 --> 00:28:05,250
Și asta e foarte important.

469
00:28:05,250 --> 00:28:08,780
Asta va va da o mulțime de perspective cu privire la obtinerea sunt oameni în jurul valorii de anumite lucruri

470
00:28:08,780 --> 00:28:10,560
într-un mod care nu le-am intenția de a?

471
00:28:10,560 --> 00:28:14,680
Sunt folosind mecanisme specifice UI pe ecran

472
00:28:14,680 --> 00:28:17,490
într-un mod care este un fel de hacky?

473
00:28:17,490 --> 00:28:22,020
Nu am intenția să facă pentru ei în felul acesta.

474
00:28:22,020 --> 00:28:23,940
Și odată ce ai terminat cu asta, ce vrei să faci?

475
00:28:23,940 --> 00:28:26,010
Roci dvs. de design, nu?

476
00:28:26,010 --> 00:28:29,600
Ce vrei să faci este să dezvolte pe care doriți și de a face apoi că procesul de peste tot din nou.

477
00:28:29,600 --> 00:28:32,110
Deci, arată-o prietenilor odată ce l-ați dezvoltat, testați-l,

478
00:28:32,110 --> 00:28:36,630
dezvolta, testa, a dezvolta, testa, itera, pe și de pe și mai departe.

479
00:28:36,630 --> 00:28:39,720
Design-ul este un proces iterativ foarte în acest sens.

480
00:28:39,720 --> 00:28:43,280
De fapt trebuie să construiască ceva și apoi realiza lucruri despre ea

481
00:28:43,280 --> 00:28:46,520
pe care nu le-am dat seama înainte și du-te înapoi și de a îmbunătăți de la asta.

482
00:28:46,520 --> 00:28:50,890
Acum, ca și pentru partea de dezvoltare, asta e ceea ce Tommy este de gând să-ți arăt, după pauză

483
00:28:50,890 --> 00:28:53,220
și modul în care ar putea fi în măsură să pună în aplicare ceva de genul completarea automată

484
00:28:53,220 --> 00:28:56,610
într-un mod care este destul de simplu.

485
00:28:57,440 --> 00:28:59,550
[Malan] Ca Tommy stabilește aici, o întrebare atunci.

486
00:28:59,550 --> 00:29:03,780
O mulțime de site-uri mai vechi - și când Iosif a spus site-ul anilor 1990 în stil,

487
00:29:03,780 --> 00:29:07,640
în cazul în care a fost implementari, dacă ai vrut să selectați un timp de pornire și un timp de final,

488
00:29:07,640 --> 00:29:10,380
sincer, înapoi în zi și chiar pe unele site-uri de astăzi,

489
00:29:10,380 --> 00:29:13,220
modul în care face acest lucru este să alegeți o oră de la un drop-down,

490
00:29:13,220 --> 00:29:15,910
alegeți minute de la un drop-down, poate să alegeți AM, PM,

491
00:29:15,910 --> 00:29:17,440
și apoi puteți realiza acest lucru de 3 ori mai mult.

492
00:29:17,440 --> 00:29:19,920
Și astfel, cu 6 clicuri și poate unele de defilare

493
00:29:19,920 --> 00:29:24,000
dvs. de utilizator poate oferi de fapt, un fel de dată și / sau intervalul de timp în acest sens.

494
00:29:24,000 --> 00:29:27,920
>> Deci, cu siguranta suboptimal și totuși până acum am văzut nici capacitățile expresive

495
00:29:27,920 --> 00:29:30,330
în oricare dintre limbile pe care le-am uitat la a face ceva mai sexy

496
00:29:30,330 --> 00:29:32,620
ca acest indicator de ora de începere și ora de terminare.

497
00:29:32,620 --> 00:29:36,290
Dar, dacă credeți înapoi la săptămâna 0 atunci când am vorbit despre Scratch,

498
00:29:36,290 --> 00:29:39,080
acolo nu erau widget-uri care au făcut doar anumite lucruri.

499
00:29:39,080 --> 00:29:42,700
Chiar avut doar aceste fundamente, cum ar fi bucle precum și condițiile și similare.

500
00:29:42,700 --> 00:29:46,910
Deci, un fel de doar gândire foarte abstract acum, independent de datele de HTML,

501
00:29:46,910 --> 00:29:51,260
ceea ce se întâmplă cu adevărat cu ceva de genul asta timp de început și ora de sfârșit indicatorul?

502
00:29:51,260 --> 00:29:54,960
Când m-am muta mouse-ul meu și am faceți clic pe simbolul pe care morcov pic pe partea stângă

503
00:29:54,960 --> 00:29:59,220
și începeți să trageți, programatic, ceea ce este pe care doriți să fie în măsură să pună în aplicare

504
00:29:59,220 --> 00:30:01,000
pentru a face să se întâmple asta?

505
00:30:01,000 --> 00:30:04,920
Ce întrebări, ce expresii booleene vrei să fie în măsură să întrebi?

506
00:30:04,920 --> 00:30:06,930
Ce se întâmplă de fapt? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Elev] Unde e poziția cursorului? Bine >>. În cazul în care este poziția cursorului?

508
00:30:10,080 --> 00:30:11,970
Acest lucru a fost ceva ce am nevoie să-și exprime din nou în Scratch,

509
00:30:11,970 --> 00:30:14,690
dacă a fost bazat pe locatie sau chiar de culoare sau similar.

510
00:30:14,690 --> 00:30:18,410
S-ar putea aminti vreodată atât de scurt, luni, au existat toate aceste lucruri numite evenimente

511
00:30:18,410 --> 00:30:22,370
în lumea de web, și deci nu e lucruri, cum ar fi onclick și onkeypress

512
00:30:22,370 --> 00:30:25,960
și onkeyup și onmouseover și onmouseout.

513
00:30:25,960 --> 00:30:29,130
Deci dau seama că chiar și aceste lucruri le-am luat pentru a acordat pe Web

514
00:30:29,130 --> 00:30:32,190
cu site-uri ca Facebook si Gmail, chiar dacă nu au nici o idee

515
00:30:32,190 --> 00:30:34,890
cum v-ar pune în aplicare, eventual, asta pentru ca nu e nimic chiar ca-l în curs

516
00:30:34,890 --> 00:30:38,570
Problema sau Set 7, realizăm că aceste fundamente cu exact aceleași,

517
00:30:38,570 --> 00:30:41,090
cu HTTP și parametrii și GET si POST,

518
00:30:41,090 --> 00:30:44,010
cu intrări de bază HTML pe care le-am uitat la până acum

519
00:30:44,010 --> 00:30:47,690
și într-un moment cu mecanismele programatice care Tommy cale de a introduce

520
00:30:47,690 --> 00:30:51,300
puteți începe să te exprimi așa cum ai făcut-o în săptămâna 0

521
00:30:51,300 --> 00:30:53,800
de foarte intuitiv glisare și fixare.

522
00:30:53,800 --> 00:30:58,950
>> Deci, cu care a spus, Tommy MacWilliam și unele piese de puzzle noi pentru noi pentru Web.

523
00:30:58,950 --> 00:31:03,450
Bine. Numele meu este Tommy și am de gând să fie vorba despre JavaScript.

524
00:31:03,450 --> 00:31:07,150
Doar un avertisment: Eu sunt de părere că JavaScript este limbajul cel mai bun de programare

525
00:31:07,150 --> 00:31:09,010
în întreaga lume intreaga.

526
00:31:09,010 --> 00:31:11,940
Există o mulțime de oameni care nu sunt de acord cu mine, dar e pur și simplu uimitor.

527
00:31:11,940 --> 00:31:16,330
Odată ce te duci înapoi la C, în cazul în care va trebui să scrie C pentru o altă clasă sau a unor alte limbi,

528
00:31:16,330 --> 00:31:19,780
e doar foarte frustrant în toate detaliile de nivel scăzut pe care trebuie să se împotmolească inch

529
00:31:19,780 --> 00:31:23,050
Deci, dacă te simți vreodată trist despre cum este C enervant de a scrie,

530
00:31:23,050 --> 00:31:25,130
doar du-te inapoi, scrie unele JavaScript. E nirvana.

531
00:31:25,130 --> 00:31:27,980
Te vei simti mult mai bine cu privire la o zi proasta.

532
00:31:27,980 --> 00:31:31,900
O mulțime de magia JavaScript vine de la capacitatea sa de a manipula lucruri

533
00:31:31,900 --> 00:31:33,730
care sunt deja pe pagina.

534
00:31:33,730 --> 00:31:38,520
Când am scris scenarii noastre PHP, acestea au fost executate pe server,

535
00:31:38,520 --> 00:31:42,270
și în cele din urmă că script PHP transmite, probabil, unele HTML.

536
00:31:42,270 --> 00:31:45,860
Această HTML a fost trimis la client, apoi asta a fost.

537
00:31:45,860 --> 00:31:50,180
Dacă PHP vrut să adăugați un buton la o pagină, de exemplu, nu se poate face într-adevăr acest lucru.

538
00:31:50,180 --> 00:31:54,350
Aceasta ar trebui să facă un fișier nou HTML și trimit la browser-ul.

539
00:31:54,350 --> 00:31:57,840
Cu JavaScript știm că putem actualiza lucruri în timp ce acestea sunt deja pe pagina,

540
00:31:57,840 --> 00:32:00,840
si din aceasta cauza putem oferi feedback-ul mult mai mult instantaneu,

541
00:32:00,840 --> 00:32:06,150
care va îmbunătăți cu adevărat experiența de utilizare pe site-ul nostru.

542
00:32:06,150 --> 00:32:09,330
Doar o recapitulare rapidă a selectoare JavaScript.

543
00:32:09,330 --> 00:32:11,590
Știm că atunci când am descărca o pagină HTML,

544
00:32:11,590 --> 00:32:13,890
care va fi reprezentat în DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM amintesc este doar acest copac mare în cazul în care elementele sunt legate în această ierarhie de mare.

546
00:32:19,340 --> 00:32:21,810
Când am lucrat cu baze de date în PSET 7,

547
00:32:21,810 --> 00:32:26,280
unul din primele lucruri pe care le necesare pentru a ști cum să facă a fost interoga baza de date.

548
00:32:26,280 --> 00:32:29,060
Avem această mare masă de utilizatori, și, uneori, vrem doar să spun,

549
00:32:29,060 --> 00:32:33,260
"Vreau doar o parte din acești utilizatori care se potrivesc cu anumite conditii."

550
00:32:33,260 --> 00:32:36,020
În mod similar, atunci când avem DOM avem nevoie de un mod de a-l interogare.

551
00:32:36,020 --> 00:32:39,490
Avem nevoie de un fel de a spune, "Vreau toate butoanele care arata ca acest

552
00:32:39,490 --> 00:32:41,860
"Sau toate imaginile de pe pagina."

553
00:32:41,860 --> 00:32:44,330
Și aceste selectoare ne permit să facem asta.

554
00:32:44,330 --> 00:32:45,690
Deci, doar o recapitulare rapidă.

555
00:32:45,690 --> 00:32:50,770
Aceasta primul aici, aceasta prezintă #, ceea ce este faptul că de gând să selectați? Are cineva aminte?

556
00:32:50,770 --> 00:32:54,880
[Răspuns studentul nu pot fi auzite] >> Da, exact.

557
00:32:54,880 --> 00:32:59,510
Acest lucru se întâmplă pentru a selecta un element de pe pagina care are un ID de prezenta.

558
00:32:59,510 --> 00:33:03,470
Si pentru ca tag-ul hash spune ca acest selector este de gând să lucreze cu acte de identitate.

559
00:33:03,470 --> 00:33:07,630
Ce zici de o secundă, acest centrat,. Ce se va selecta asta?

560
00:33:11,360 --> 00:33:15,180
Da. >> [Elev] Clasa. Exact >>. Acest lucru se întâmplă acum pentru a selecta de clasa.

561
00:33:15,180 --> 00:33:18,840
Diferența dintre ID-ul și clasa de aici este, în general, ID-ul trebuie să fie unic

562
00:33:18,840 --> 00:33:20,820
în orice spațiu pe care o căutați peste.

563
00:33:20,820 --> 00:33:23,080
Deci, dacă ați fost căutați peste o intreaga pagina web,

564
00:33:23,080 --> 00:33:27,740
într-adevăr ar trebui să aibă doar 1 element cu acel ID de anumite, în acest caz de prezenta.

565
00:33:27,740 --> 00:33:31,330
Cu clase, pe de altă parte, putem avea mai mult de 1 element de pe aceeași pagină

566
00:33:31,330 --> 00:33:33,130
cu aceeași clasă.

567
00:33:33,130 --> 00:33:36,580
Acest lucru ar putea fi util pentru că vreau să selectați tot ce centrat pe pagină

568
00:33:36,580 --> 00:33:38,450
, mai degrabă decât doar 1 lucru.

569
00:33:38,450 --> 00:33:40,310
>> Și, în cele din urmă, aceasta ultima aici este un pic mai complicat,

570
00:33:40,310 --> 00:33:43,890
dar ce se întâmplă acest pentru a selecta din DOM?

571
00:33:46,650 --> 00:33:48,810
[Răspuns studentul nu pot fi auzite] >> Ce e asta?

572
00:33:48,810 --> 00:33:53,250
[Elev] Orice lucru care este un tag. Avem >> 2 părți aici.

573
00:33:53,250 --> 00:33:58,070
Partea a doua este de gând să spun că am dori să selectați aceste tag-uri, cu o etichetă de intrare,

574
00:33:58,070 --> 00:34:00,730
astfel încât orice element care este o etichetă de intrare.

575
00:34:00,730 --> 00:34:03,080
Dar eu nu vreau să selectați doar toate intrările

576
00:34:03,080 --> 00:34:05,170
pentru ca ceva ca un buton submit ar putea fi o intrare

577
00:34:05,170 --> 00:34:08,409
și ceva ca o casetă text ar putea fi un factor.

578
00:34:08,409 --> 00:34:11,909
Deci, cu aceste paranteze drepte spun Vreau doar să selecteze acele elemente

579
00:34:11,909 --> 00:34:14,110
care sunt de tip text.

580
00:34:14,110 --> 00:34:17,400
Undeva în tag-ul HTML mea am un atribut numit de tip,

581
00:34:17,400 --> 00:34:19,750
și valoarea de atribut care trebuie să fie de text.

582
00:34:19,750 --> 00:34:21,340
Deci, ce zici de asta prima parte aici?

583
00:34:21,340 --> 00:34:25,489
Primul cuvânt al acestui selector este forma, atunci am avea un spațiu și apoi această parte de intrare.

584
00:34:25,489 --> 00:34:29,620
Ce face asta, punerea forma în fața lui?

585
00:34:33,409 --> 00:34:35,860
Acest lucru se întâmplă pentru a limita practic interogarea noastră.

586
00:34:35,860 --> 00:34:38,510
Acesta ar putea fi cazul în care avem câteva intrări pe pagina

587
00:34:38,510 --> 00:34:41,080
care nu sunt descendenți ai unui formular.

588
00:34:41,080 --> 00:34:46,150
Ceea ce va face este acest lucru va spune Vreau doar etichetele de intrare, care au undeva deasupra lor

589
00:34:46,150 --> 00:34:49,030
un element-mamă a unui formular.

590
00:34:49,030 --> 00:34:52,100
Și în acest fel putem face aceste interogări mai ierarhice

591
00:34:52,100 --> 00:34:55,000
deci nu avem doar pentru a selecta tot ce se potrivesc unui selector dat.

592
00:34:55,000 --> 00:35:00,760
Putem fel de limită domeniul de aplicare al interogării la altceva.

593
00:35:00,760 --> 00:35:04,000
Deci, acum că știm cum să selectați elemente de pe pagina,

594
00:35:04,000 --> 00:35:06,780
hai sa vorbim un pic despre AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX este un acronim încă foarte la modă, care vine de la Asynchronous JavaScript și XML.

596
00:35:12,270 --> 00:35:15,640
Pur și simplu așa se întâmplă că XML este doar o modalitate de a reprezenta datele.

597
00:35:15,640 --> 00:35:20,920
>> Acest tip de popularitate pierdut recent, astfel încât X în AJAX nu este folosit tot timpul.

598
00:35:20,920 --> 00:35:26,220
Practic, ceea ce ne permite AJAX pentru a face este de a face cereri HTTP

599
00:35:26,220 --> 00:35:28,620
din contextul JavaScript.

600
00:35:28,620 --> 00:35:32,310
Atunci când suntem în browser-ul nostru si noi te navigarea în jurul valorii de pagini și am faceți clic pe un link,

601
00:35:32,310 --> 00:35:37,790
ceea ce browser-ul nostru este de gând să faceți este să facă o cerere HTTP pentru orice legătură facem clic.

602
00:35:37,790 --> 00:35:41,670
Dar asta nu e întotdeauna ideale, deoarece în cazul în care este cazul, atunci cum spunea David,

603
00:35:41,670 --> 00:35:45,220
întotdeauna trebuie să facă utilizatorii clic pe un buton depună sau să faceți clic pe un link

604
00:35:45,220 --> 00:35:50,380
, în scopul de a face să se întâmple nimic, care va implica o cerere HTTP.

605
00:35:50,380 --> 00:35:54,160
Deci, cu AJAX, putem face aceste solicitări, în numele JavaScript.

606
00:35:54,160 --> 00:35:57,020
Asta înseamnă că ori de câte ori utilizatorul interacționează cu pagina sau se întâmplă ceva,

607
00:35:57,020 --> 00:36:01,780
putem face de fapt o cerere programatic la unele fișier PHP altele, site-ul nostru

608
00:36:01,780 --> 00:36:06,280
sau orice altceva și a regăsi datele pe care acel fișier scuipa.

609
00:36:06,280 --> 00:36:09,860
Să aruncăm o privire la un exemplu de AJAX.

610
00:36:09,860 --> 00:36:16,140
Aceasta este pagina noastră de Finante CS50, cu care sperăm că unii dintre noi sunt familiari.

611
00:36:16,140 --> 00:36:21,790
Dacă ne uităm la codul HTML al paginii, vom vedea aici că am adăugat câteva lucruri,

612
00:36:21,790 --> 00:36:23,820
dintre care unul mi-am dat acest formular un act de identitate.

613
00:36:23,820 --> 00:36:26,480
Am spus id = "forma-citat".

614
00:36:26,480 --> 00:36:31,910
Am făcut acest lucru doar pentru că este de gând să facă acest bit un pic mai ușor pentru a selecta din DOM

615
00:36:31,910 --> 00:36:35,090
din moment ce pot face doar o interogare foarte simplu.

616
00:36:35,090 --> 00:36:38,960
Ceea ce vreau să fac aici este că vreau să stabilească unele probleme cu CS50 Finanțe.

617
00:36:38,960 --> 00:36:41,550
Deci, dacă mergem la finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
de fiecare dată când doriți să obțineți un citat, trebuie să faceți clic pe acest buton Citat obține,

619
00:36:45,700 --> 00:36:48,960
Înscrieți-vă și că butonul cotatia apoi ma duce la o altă pagină întreagă.

620
00:36:48,960 --> 00:36:52,400
Și dacă vreau un alt citat, trebuie să apăsați pe butonul Înapoi și apoi l-am tastați în,

621
00:36:52,400 --> 00:36:54,480
I a lua un citat, și m-am lovit butonul Înapoi.

622
00:36:54,480 --> 00:36:56,840
Acest lucru chiar nu este cea mai bună experiență de utilizator.

623
00:36:56,840 --> 00:37:01,570
Cine s-ar folosi într-adevăr site-ul în cazul în care e lent pentru a obține prețurile de stoc?

624
00:37:01,570 --> 00:37:05,630
Deci, ceea ce vrem să facem cu AJAX este faptul că eliminarea pas de a merge la o pagină separată

625
00:37:05,630 --> 00:37:08,410
pentru a vizualiza rezultatele.

626
00:37:08,410 --> 00:37:11,240
>> Ceea ce ne cer într-adevăr numai pentru că prețul este foarte mic,

627
00:37:11,240 --> 00:37:14,240
și că e doar o cantitate foarte mică de date.

628
00:37:14,240 --> 00:37:17,400
Deci, nu e nevoie de mine să merg altă pagină întreagă HTML,

629
00:37:17,400 --> 00:37:20,670
descărca un lot cu totul nou de HTML, descarca imagini poate ceva mai mult,

630
00:37:20,670 --> 00:37:24,410
alte fișiere CSS doar pentru mine să răspund la această întrebare foarte simplă

631
00:37:24,410 --> 00:37:27,810
de cât de mult costă acest stoc.

632
00:37:27,810 --> 00:37:31,000
Cu AJAX, putem face acest lucru mult mai ușor o.

633
00:37:31,000 --> 00:37:36,400
Vedem aici că mă leagă într-un fișier numit quote.js JavaScript.

634
00:37:36,400 --> 00:37:40,140
Să deschidem de fapt, până acel fișier. Nu acolo.

635
00:37:42,610 --> 00:37:45,860
Toate fișierele mele JavaScript vor fi amplasate în HTML

636
00:37:45,860 --> 00:37:47,630
astfel încât browser-ul web poate fi accesat.

637
00:37:47,630 --> 00:37:50,330
Apoi, avem un director separat aici pentru JavaScript,

638
00:37:50,330 --> 00:37:54,340
iar acum aici este quote.js.

639
00:37:54,340 --> 00:38:00,930
În partea de sus a acestui fișier aceasta spune aici că vreau să aștept pentru întreaga pagină să fie încărcate

640
00:38:00,930 --> 00:38:04,830
înainte de a încerca să mă fac nimic. De ce este necesar?

641
00:38:04,830 --> 00:38:08,650
Se pare că următorul lucru pe care am de gând să fac aici este de a începe căutarea unui element

642
00:38:08,650 --> 00:38:10,810
care se potrivește cu unele selectorul.

643
00:38:10,810 --> 00:38:15,600
Dacă această JavaScript este executat vreodată înainte de acest element este încărcată pe pagină,

644
00:38:15,600 --> 00:38:17,820
atunci tot ceea ce încerc să fac, nu este de gând să lucreze

645
00:38:17,820 --> 00:38:20,580
pentru că am de gând să încercați să selectați ceva care nu este încă acolo.

646
00:38:20,580 --> 00:38:23,780
Deci, această linie până sus spune că vreau să aștepți până când totul este încărcat

647
00:38:23,780 --> 00:38:28,030
deci suntem garantat că toate elementele care le caut sunt de fapt pe pagina.

648
00:38:29,730 --> 00:38:34,310
Acest semn dolar aici, înseamnă că sunt, folosind biblioteca jQuery numit.

649
00:38:34,310 --> 00:38:38,570
Această bibliotecă jQuery ne permite să folosească aceste selectoare pe care tocmai l-am uitat la.

650
00:38:38,570 --> 00:38:44,010
Prin a spune $, apoi trece într-un argument ca acest formular #-citat,

651
00:38:44,010 --> 00:38:47,910
Sunt selectarea acum că forma pe care am luat doar o privire la.

652
00:38:47,910 --> 00:38:52,290
Acum am o reprezentare de care se formeaza in memoria cumva.

653
00:38:52,290 --> 00:38:56,760
>> Pe acest obiect acum, această reprezentare a formularului,

654
00:38:56,760 --> 00:38:58,890
Sunt folosind acum o funcție numită pe.

655
00:38:58,890 --> 00:39:02,710
Ce face această funcție este că va atașa o tratare a evenimentului.

656
00:39:02,710 --> 00:39:06,310
Cazul în care vom asculta este evenimentul submit.

657
00:39:06,310 --> 00:39:08,890
Deci, atunci când utilizatorul face clic pe butonul Submit care sau prese Enter,

658
00:39:08,890 --> 00:39:11,730
acest eveniment este de gând să tragă.

659
00:39:11,730 --> 00:39:16,390
Prin prindere în acest, eu pot trece peste acum comportamentul implicit al formularului.

660
00:39:16,390 --> 00:39:19,770
Fără această JavaScript, formularul va prezenta la orice fișier PHP

661
00:39:19,770 --> 00:39:22,110
am folosit în acest atribut acțiune.

662
00:39:22,110 --> 00:39:25,440
Dar, în loc, eu spun acum, așteaptă, așteaptă, așteaptă, nu vreau să faci asta, de fapt.

663
00:39:25,440 --> 00:39:31,140
Vreau ca acest lucru să se întâmple înainte de a merge și să încerce să prezinte un fisier PHP.

664
00:39:31,140 --> 00:39:32,870
Acum, ceea ce vreau să fac?

665
00:39:32,870 --> 00:39:39,270
În acest moment vreau să folosesc AJAX cumva pentru a încărca în ceea ce prețul de stoc este.

666
00:39:39,270 --> 00:39:44,170
Primul lucru pe care am nevoie să știu este ceea ce stocul de utilizator este în căutarea în sus.

667
00:39:44,170 --> 00:39:46,760
Pentru a face că am de gând să folosiți un alt selector.

668
00:39:46,760 --> 00:39:49,020
Aceasta este selectorul treia ne-am uitat la fața.

669
00:39:49,020 --> 00:39:54,460
Aceasta spune că vreau să încep acest element formular cu un ID de forma-citat.

670
00:39:54,460 --> 00:39:58,440
Apoi, undeva în interiorul acestui formular trebuie să existe un element de intrare

671
00:39:58,440 --> 00:40:01,270
care are un nume de simbol.

672
00:40:01,270 --> 00:40:05,460
Dacă ne uităm înapoi la HTML noastră, am văzut că am avut o intrare [nume = simbolul].

673
00:40:05,460 --> 00:40:12,380
Asta înseamnă că acest lucru se întâmplă pentru a selecta caseta de text care utilizatorul este tastarea in.

674
00:40:12,380 --> 00:40:13,870
Asta e frumos. Avem caseta de text.

675
00:40:13,870 --> 00:40:17,360
Acum, avem nevoie doar să știu ce e în interiorul acestuia.

676
00:40:17,360 --> 00:40:20,290
Pentru a face acest lucru putem apela această metodă aici, acest val.,

677
00:40:20,290 --> 00:40:23,240
și acest lucru spune că știu ce caseta de text aveti.

678
00:40:23,240 --> 00:40:28,160
Vreau să-mi spui ce este tastat de utilizator în această casetă de text.

679
00:40:28,160 --> 00:40:34,440
Acum avem un șir numit simbol, care este egală cu oricare utilizator tastat inch

680
00:40:34,440 --> 00:40:39,820
Asta e frumos. Putem folosi ca șir acum pentru a face cererea noastră.

681
00:40:39,820 --> 00:40:42,450
Aceasta este o funcție nou aici, acest $,

682
00:40:42,450 --> 00:40:44,900
cu excepția nu mai suntem de gând să fie selectarea elementelor,

683
00:40:44,900 --> 00:40:48,910
vom fi de asteptare o funcție diferită care este oferit pentru a ne jQuery.

684
00:40:48,910 --> 00:40:54,810
Această funcție AJAX este ceea ce se întâmplă de fapt să facă această solicitare HTTP.

685
00:40:54,810 --> 00:40:57,000
Așa că trebuie să spun că câteva lucruri.

686
00:40:57,000 --> 00:41:01,410
Primul lucru pe care trebuie să-i spun aceasta functie este locul unde vreau să merg cererea.

687
00:41:01,410 --> 00:41:08,910
Undeva în proiectul meu am acest fișier în interiorul directorul numit HTML quote.php.

688
00:41:08,910 --> 00:41:15,150
Eu pot accesa acest fișier, am văzut, la fel ca asta, dacă mă duc la localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Vreau JavaScript mea de a face o cerere în acest pagină.

690
00:41:20,450 --> 00:41:22,920
Ce tip de cerere acum?

691
00:41:22,920 --> 00:41:27,210
Am văzut că înainte de a forma are ca metodă = "post" atribut,

692
00:41:27,210 --> 00:41:29,270
și asta înseamnă că va face o cerere POST,

693
00:41:29,270 --> 00:41:32,630
așa că nu se va pune nimic în URL-ul, mai degrabă decât o cerere GET,

694
00:41:32,630 --> 00:41:36,860
care ar fi concediat doar dacă am accesat doar pagina cu browser-ul web, de exemplu.

695
00:41:36,860 --> 00:41:41,260
Acum, ne-am spus că vreau să fac o cerere HTTP POST

696
00:41:41,260 --> 00:41:44,840
la o pagină situat la quote.php.

697
00:41:44,840 --> 00:41:51,490
Când ne-am trimite formularul, am putea aminti accesa elementele de intrare în interiorul acelei forme

698
00:41:51,490 --> 00:41:54,430
cu faptul că variabila $ _POST.

699
00:41:54,430 --> 00:41:58,710
Până în prezent, în povestea nu am de fapt, de-a lungul a trimis niciun fel de date încă.

700
00:41:58,710 --> 00:42:00,640
Am spus doar că facem o cerere AJAX

701
00:42:00,640 --> 00:42:03,200
și aici e tipul cererii facem.

702
00:42:03,200 --> 00:42:07,090
Acum, avem nevoie pentru a trimite, de fapt unele date la pagina.

703
00:42:07,090 --> 00:42:10,930
Pentru a face pe care le puteți folosi această proprietate numita de date.

704
00:42:10,930 --> 00:42:14,950
Valoarea acestei proprietăți este de fapt un tablou asociativ.

705
00:42:14,950 --> 00:42:19,390
Motivul pentru aceasta este că ne permite să trimiteți mai mult decât doar 1 bucată de date.

706
00:42:19,390 --> 00:42:24,750
De aceea avem aceste acolade aici imbricată în interiorul acestor acolade alte buclat.

707
00:42:24,750 --> 00:42:29,680
Cheile în aceste tablouri asociative vor fi același lucru

708
00:42:29,680 --> 00:42:32,630
ca și cele în nume atribuie elemente de formular noastre.

709
00:42:32,630 --> 00:42:35,740
Asta înseamnă că, dacă am trimite o cheie de-a lungul de simbol,

710
00:42:35,740 --> 00:42:41,870
înseamnă că pagina mea PHP pot accesa aceste date cu $ _POST [simbol]

711
00:42:41,870 --> 00:42:44,640
la fel cum am făcut-o atunci când am fost înainte de a depune un formular.

712
00:42:44,640 --> 00:42:47,090
Și acum datele efective dorim să trimită

713
00:42:47,090 --> 00:42:50,790
va fi în interiorul valoarea acestui tablou asociativ.

714
00:42:50,790 --> 00:42:54,070
>> Am păstrat acest text într-un simbol variabilă numită,

715
00:42:54,070 --> 00:42:57,380
și astfel vom trimite de-a lungul acum o cheie de simbol

716
00:42:57,380 --> 00:43:01,380
și o valoare de orice utilizator tastat inch

717
00:43:01,380 --> 00:43:06,270
Acum am făcut această cerere HTTP, PHP fișierul nostru a executat,

718
00:43:06,270 --> 00:43:11,480
și-l va trimite unele date înapoi acum pentru a clientului care a făcut doar această cerere.

719
00:43:11,480 --> 00:43:15,220
Acum, avem nevoie pentru a răspunde la orice serverul a spus la noi.

720
00:43:15,220 --> 00:43:20,180
Pentru a face acest lucru avem această proprietate ultimul aici, numit de succes.

721
00:43:20,180 --> 00:43:24,240
Valoarea acestui cheia succesului este, de fapt va fi o funcție,

722
00:43:24,240 --> 00:43:26,910
și acesta este unul dintre lucrurile cu adevarat interesante pe care le puteți face cu JavaScript.

723
00:43:26,910 --> 00:43:31,720
Nu numai că puteți avea Ints sau rețele ca o valoare în interiorul unui tablou asociativ,

724
00:43:31,720 --> 00:43:34,170
putem avea, de asemenea, o funcție.

725
00:43:34,170 --> 00:43:36,380
Deci, prin spunând succes, aceasta este cheia mea.

726
00:43:36,380 --> 00:43:38,830
Un colon spune aici vine valoarea,

727
00:43:38,830 --> 00:43:41,810
iar acum valoarea aceasta este de fapt o funcție.

728
00:43:41,810 --> 00:43:44,460
Așa că nu trebuie să dea această funcție un nume în sine.

729
00:43:44,460 --> 00:43:48,820
Noi putem spune doar acest lucru este mergi la a fi o funcție. O să iau un argument.

730
00:43:48,820 --> 00:43:51,190
Argumentul acestei functii va fi

731
00:43:51,190 --> 00:43:54,460
indiferent de serverul ne-a trimis înapoi de la solicitare.

732
00:43:54,460 --> 00:43:57,750
La fel ca atunci când browser-ul nostru face o cerere, serverul trimite ceva înapoi

733
00:43:57,750 --> 00:43:59,060
și browser-ul afișează,

734
00:43:59,060 --> 00:44:03,030
în contextul AJAX am făcut doar o cerere, serverul a trimis ceva înapoi,

735
00:44:03,030 --> 00:44:07,110
si acum ca ne-am reprezentat ca un șir.

736
00:44:07,110 --> 00:44:11,280
Cu acel sir aș dori doar pentru a afișa ca pe pagina.

737
00:44:11,280 --> 00:44:14,040
Pentru a face că am de gând să aibă un singur selector ultima.

738
00:44:14,040 --> 00:44:17,570
Vreau să selectați elementul cu prețul ID-ul.

739
00:44:17,570 --> 00:44:20,710
Acesta este doar un div gol pe care l-am creat pe pagina,

740
00:44:20,710 --> 00:44:26,640
și vreau să stabilească conținutul care div pentru a fi indiferent serverul ne-a trimis înapoi.

741
00:44:26,640 --> 00:44:30,280
Am de fapt, modificat quote.php un pic.

742
00:44:30,280 --> 00:44:33,460
>> , Mai degrabă decât de asteptare de randare și de a face unele pagini,

743
00:44:33,460 --> 00:44:38,100
quote.php acum este pur și simplu de gând să imprima valoarea stocului ca un șir de caractere.

744
00:44:38,100 --> 00:44:41,880
Deci, dacă ar fi să vizitați pagina de fapt, te-ar vedea doar că șirul mic

745
00:44:41,880 --> 00:44:45,030
indiferent de pretul actiunilor este.

746
00:44:45,030 --> 00:44:50,170
Un ultim lucru trebuie să facem aici este asigurați-vă doar această funcție returnează false.

747
00:44:50,170 --> 00:44:53,560
Ce spune aceasta este că, dacă eu sunt în interiorul unui tratare a evenimentului

748
00:44:53,560 --> 00:44:57,300
și că, de tratare a evenimentului returneaza false în loc de a se întoarce adevărat,

749
00:44:57,300 --> 00:45:01,510
asta înseamnă că nu vreau evenimentului original la foc.

750
00:45:01,510 --> 00:45:05,270
În acest caz, dacă nu am avea nici JavaScript și am depus un formular,

751
00:45:05,270 --> 00:45:08,280
Browser-ul nostru web este de gând să spun, "am de gând să trimită aceste date de-a lungul,"

752
00:45:08,280 --> 00:45:10,130
și ei de gând să te trimit la altă pagină.

753
00:45:10,130 --> 00:45:14,360
Pentru că suntem folosind AJAX acum, nu este nevoie pentru a trimite utilizatorul la o altă pagină.

754
00:45:14,360 --> 00:45:17,920
Suntem doar de gând pentru a afișa rezultatele dinamic pe această pagină aceeași.

755
00:45:17,920 --> 00:45:21,460
Noi chiar nu vreau ca ei să meargă oriunde, și vreau să rămână pe aceeași pagină.

756
00:45:21,460 --> 00:45:27,060
Deci, prin returnarea falsă, ne asigurăm că formularul nu face asta pentru noi.

757
00:45:27,060 --> 00:45:31,170
Să aruncăm o privire la ceea ce de fapt arata ca acest.

758
00:45:31,170 --> 00:45:34,180
Pagina noastră citat arată la fel.

759
00:45:34,180 --> 00:45:37,240
Lasă-mă să trageți în sus inspectorul aici astfel încât să putem vedea ce se întâmplă.

760
00:45:37,240 --> 00:45:40,270
Face un pic mai puțin mare.

761
00:45:40,270 --> 00:45:44,590
Amintiți-vă, dacă ne deschidem fila Network, acest lucru este în cazul în care putem vedea toate cererile HTTP

762
00:45:44,590 --> 00:45:47,570
care se intampla pe pagina.

763
00:45:47,570 --> 00:45:52,890
>> Pentru un simbol permiteți-mi să tastați în AAPL și faceți clic pe cotatia.

764
00:45:52,890 --> 00:45:56,720
Acum am văzut că o parte a Apple costa un numar de dolari

765
00:45:56,720 --> 00:46:00,410
Tocmai a apărut pe pagina, dar URL-ul nu sa schimbat deloc.

766
00:46:00,410 --> 00:46:04,570
De fapt, aici este cererea HTTP pe care tocmai l-am făcut.

767
00:46:04,570 --> 00:46:09,980
Am făcut o cerere POST pentru a quote.php. Asta are sens.

768
00:46:09,980 --> 00:46:12,800
Aceasta este ceea ce ne-a trimis înapoi serverul.

769
00:46:12,800 --> 00:46:16,320
Nu e nici mai mult, acest document de gigantic HTML cu imagini și lucruri de genul asta,

770
00:46:16,320 --> 00:46:20,920
e doar o linie de text, iar apoi am afișat doar linia de text.

771
00:46:20,920 --> 00:46:26,290
Dacă ne întoarcem la anteturile și să vedem ce avem de fapt trimis in interiorul acestei cereri HTTP,

772
00:46:26,290 --> 00:46:33,950
putem vedea aici că am trimis de-a lungul o cheie de simbol si o valoare de AAPL,

773
00:46:33,950 --> 00:46:36,430
care este ceea ce utilizatorul tastat inch

774
00:46:36,430 --> 00:46:39,230
Acest lucru este frumos, dar este încă un pic enervant.

775
00:46:39,230 --> 00:46:42,490
Am încă mai trebuie să faceți clic pe acest buton pentru a obține oferta de stoc.

776
00:46:42,490 --> 00:46:45,880
Suntem oameni ocupati si nu avem timp să faceți clic pe butoanele.

777
00:46:45,880 --> 00:46:49,910
Google a realizat acest mic ceva vreme în urmă, când au pus în aplicare Google Instant.

778
00:46:49,910 --> 00:46:53,590
Ce face Google Instant este ca tu să tastați doar începe afișarea rezultatelor pentru tine

779
00:46:53,590 --> 00:46:56,520
astfel încât să nu trebuie să vă faceți griji cu privire la clic chiar Căutare.

780
00:46:56,520 --> 00:46:58,730
De fapt, o poveste distractiv legat de asta.

781
00:46:58,730 --> 00:47:01,100
După ce Google Instant a ieșit, oamenii erau ca, "Whoa, asta este super uimitor."

782
00:47:01,100 --> 00:47:02,540
"Acest lucru este atât de rece."

783
00:47:02,540 --> 00:47:05,950
Și un student la Stanford jos, care a fost 19 la momentul

784
00:47:05,950 --> 00:47:09,000
a făcut acest site numit YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Toate Instant YouTube nu este sa cauti eficient pe YouTube instantaneu.

786
00:47:13,170 --> 00:47:17,020
Deci, mai degrabă decât a fi nevoie să meargă la YouTube.com și a lovit de căutare,

787
00:47:17,020 --> 00:47:21,650
când am începeți să tastați în ceva asemănător YouTube Instant CS50,

788
00:47:21,650 --> 00:47:25,320
am putea vedea aici că se încearcă să o conexiune la Internet lentă

789
00:47:25,320 --> 00:47:28,500
popula aceste rezultate trăiesc.

790
00:47:28,500 --> 00:47:35,590
Pentru a face pe care le poate face de fapt, o modificare foarte simplu pentru a ne quote.js fișier.

791
00:47:35,590 --> 00:47:40,900
Chiar acum suntem atașați acest eveniment atunci când formularul este depus.

792
00:47:40,900 --> 00:47:43,760
Noi nu vrem cu adevărat să facă utilizatorul susțin că forma mai,

793
00:47:43,760 --> 00:47:48,570
deci haideți să pornim în loc acest eveniment de fiecare dată când utilizatorul apasă o cheie.

794
00:47:48,570 --> 00:47:53,200
Pentru a face acest lucru, primul hai schimba evenimentul de la prezenta la KeyUp.

795
00:47:53,200 --> 00:47:55,740
Asta înseamnă că, mai degrabă decât de așteptare pentru a depune formularul,

796
00:47:55,740 --> 00:47:58,490
de fiecare dată când este apăsată tasta, ceva se va întâmpla.

797
00:47:58,490 --> 00:48:02,030
Ea nu mai are sens să se atașeze acest eveniment KeyUp pentru a forma întregul.

798
00:48:02,030 --> 00:48:05,080
Noi într-adevăr pasă doar că caseta de căutare.

799
00:48:05,080 --> 00:48:09,320
>> Pentru a selecta pe care acum, putem schimba acest lucru să fie, mai degrabă decât forma-citat,

800
00:48:09,320 --> 00:48:14,220
forma-citat și vom avea o intrare (tip = text) sau am putea spune (nume = simbol) -

801
00:48:14,220 --> 00:48:16,420
ce vrem noi.

802
00:48:16,420 --> 00:48:18,650
Acum nu mai e un singur lucru ce trebuie să facem.

803
00:48:18,650 --> 00:48:21,190
Amintiți-vă aici când am spus retur fals

804
00:48:21,190 --> 00:48:24,370
am spus că nu vreau ca evenimentul implicit la foc.

805
00:48:24,370 --> 00:48:26,390
Dar ea doar se întâmplă, astfel că, dacă vom dezactiva că acum,

806
00:48:26,390 --> 00:48:29,660
tot ce ne tastați nu este de gând să apară în browser-ul mai

807
00:48:29,660 --> 00:48:33,000
pentru că ar fi comportamentul implicit al tastarea într-o casetă de text.

808
00:48:33,000 --> 00:48:38,660
Noi nu mai vrea să suprascrie această, asa ca hai sa distruga acest retur fals.

809
00:48:38,660 --> 00:48:44,800
Dacă vom salva ca și să reîncărcați pagina, acum, când am început să tastați AAPL

810
00:48:44,800 --> 00:48:50,160
veți vedea că prețul stoc la partea de jos aici este completarea în mod automat.

811
00:48:50,160 --> 00:48:53,150
Deci, aici este CS50 Instant Finante.

812
00:48:53,150 --> 00:48:55,860
De fapt, o poveste despre distracție Instant YouTube

813
00:48:55,860 --> 00:48:59,420
este faptul că elevul doar un fel de a scris-o ca un proiect 1-noapte,

814
00:48:59,420 --> 00:49:03,800
iar a doua zi i sa oferit un loc de muncă de către CEO-ul YouTube.

815
00:49:03,800 --> 00:49:10,610
Deci, la fel de simplu ca asta, CS50 elevii, proiectele finale pot face rost de un loc de muncă la YouTube.

816
00:49:10,610 --> 00:49:14,720
Ceva de genul că este o idee foarte misto pentru un proiect final, nu?

817
00:49:14,720 --> 00:49:18,170
Am avut unele funcționalități existente, care ne-am dorit să se integreze cu.

818
00:49:18,170 --> 00:49:20,330
Ne imbunatatim experienta utilizatorului un pic,

819
00:49:20,330 --> 00:49:24,340
și dintr-o dată ceva căutarea pe YouTube Instant ar putea fi o mai ușor mult

820
00:49:24,340 --> 00:49:27,290
decât să-l căutați pe YouTube regulat.

821
00:49:27,290 --> 00:49:30,790
Deci, asta e AJAX într-o coajă de nucă.

822
00:49:30,790 --> 00:49:34,860
>> În exemplele care arată Iosif a fost, am văzut o mulțime de autocompletes,

823
00:49:34,860 --> 00:49:39,250
și aceste autocompletes sunt foarte, foarte util pentru că nu trebuie să ne amintim -

824
00:49:39,250 --> 00:49:41,770
De exemplu, în cazul în care nu vă amintiți prețul de stoc pentru Apple

825
00:49:41,770 --> 00:49:45,110
și ne-am știu că e ceva aa, mai degrabă decât doar să-mi spui,

826
00:49:45,110 --> 00:49:48,740
"O parte din acest lucru costă această bani,"

827
00:49:48,740 --> 00:49:52,540
Aș fel de vrea să știu ce stocurile începe cu AA.

828
00:49:52,540 --> 00:49:58,340
Putem face asta într-adevăr frumos cu biblioteca Bootstrap care este deja inclus

829
00:49:58,340 --> 00:50:01,380
interiorul CS50 Finanțe.

830
00:50:01,380 --> 00:50:09,390
Dacă ați venit aici să tag-ul JavaScript și defilați în jos la Typeahead,

831
00:50:09,390 --> 00:50:13,730
aceasta este doar un plugin frumos ca cineva deja a scris pentru noi,

832
00:50:13,730 --> 00:50:16,980
si putem folosi cu ușurință funcționalitatea acestuia ca asta.

833
00:50:16,980 --> 00:50:21,410
Am scris intr-un A și aici este o listă a unor state care încep cu A.

834
00:50:21,410 --> 00:50:25,360
Să spunem că eu cred că acest lucru este foarte cool si e timpul pentru mine să includă asta pe pagina mea.

835
00:50:25,360 --> 00:50:28,300
Se pare că acest lucru este foarte, foarte simplu.

836
00:50:28,300 --> 00:50:32,810
Să sari peste aici pentru a quote3.js.

837
00:50:34,890 --> 00:50:37,380
Dosarul meu pare un pic diferit.

838
00:50:37,380 --> 00:50:39,700
Aici toate lucrurile mele AJAX este aceeași.

839
00:50:39,700 --> 00:50:43,170
Vreau să încărcați datele în stoc, fără a fi nevoie să meargă la altă pagină.

840
00:50:43,170 --> 00:50:46,220
Dar acum vreau să folosesc acest plugin.

841
00:50:46,220 --> 00:50:51,020
Documentația Bootstrap are exemple de mari exact cum pot face asta.

842
00:50:51,020 --> 00:50:54,350
Vreau să spun, "Iată de intrare pe care vreau să autocomplete", a

843
00:50:54,350 --> 00:50:56,640
și am de gând pentru a apela această funcție numită typeahead,

844
00:50:56,640 --> 00:50:59,730
și că o să se ocupe de toate lucrurile Typeahead pentru noi.

845
00:50:59,730 --> 00:51:02,090
Acesta va inițializa listă, se va face tot de filtrare noastre.

846
00:51:02,090 --> 00:51:06,680
Singurul lucru de care are nevoie să știe este ceea ce suntem de date autocompleting pe.

847
00:51:06,680 --> 00:51:10,480
Asa ca am aflat această cheie doar citind documentația și se uită la exemple.

848
00:51:10,480 --> 00:51:14,150
Dacă eu dau o cheie de sursă, valoarea acestei chei

849
00:51:14,150 --> 00:51:17,770
este doar o serie de lucruri pe care vreau să completarea automată pe.

850
00:51:17,770 --> 00:51:20,180
Această variabilă a venit de la acest alt fișier.

851
00:51:20,180 --> 00:51:23,400
Am deschid symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Aceasta este doar symbols.js această matrice într-adevăr, foarte mare conținut de siruri de caractere

853
00:51:27,980 --> 00:51:32,080
de toate aceste simboluri bursiere din NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Dacă vreau să sar înapoi în HTML, astfel jharvard, vhosts, globalhost, html, template-uri,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Din moment ce se numește acum quote3.js, permiteți-mi să modificați fișierul JavaScript eu aici, inclusiv.

857
00:51:50,910 --> 00:51:55,110
Acum am quote3.js, așa că am de gând să încarce în fișierul JavaScript separat,

858
00:51:55,110 --> 00:51:57,910
una care are ca Bootstrap completarea automată.

859
00:51:57,910 --> 00:52:04,430
Acum, când am sări înapoi la browser-ul, reîncărcați pagina, si am începeți să tastați AA,

860
00:52:04,430 --> 00:52:06,880
e completarea automată mea. Și a fost într-adevăr la fel de simplu ca asta.

861
00:52:06,880 --> 00:52:11,400
Am avut o linie de cod care tocmai am spus, "Aici sunt lucrurile pe care vreau să le Completare automată", a

862
00:52:11,400 --> 00:52:16,590
și dintr-o dată am această funcționalitate foarte, foarte frumos, cu care nu o mulțime de efort, la toate.

863
00:52:16,590 --> 00:52:19,810
Așa cum ești în curs de dezvoltare site-uri web și, în special partea frontală a lucrurilor,

864
00:52:19,810 --> 00:52:21,840
ai de gând să găsească acest caz, este mult.

865
00:52:21,840 --> 00:52:25,700
Există o mulțime, multe, multe biblioteci foarte cool gratuite acolo

866
00:52:25,700 --> 00:52:30,190
care fac foarte ușor să faci lucruri de genul asta.

867
00:52:30,190 --> 00:52:37,230
Poate cineva gândi la orice neajunsuri ale pur și simplu autocompleting pe această listă mare de simboluri?

868
00:52:37,230 --> 00:52:41,580
Ce ar putea fi ceva ce nu e cel mai bun cu această abordare?

869
00:52:42,790 --> 00:52:45,960
Da. >> [Elev] Ora, dacă aveți o mulțime de [neauzit]

870
00:52:45,960 --> 00:52:50,420
Da. Chiar acum suntem descărca acest fișier JavaScript imens și există o mulțime de simboluri.

871
00:52:50,420 --> 00:52:54,360
Și astfel, dacă avem o grămadă de lucruri, acest tip ar putea crește de latență de căutare nu numai

872
00:52:54,360 --> 00:52:56,600
dar, de asemenea, descărcarea fișierului real.

873
00:52:56,600 --> 00:52:58,670
Mare. Altceva?

874
00:53:01,950 --> 00:53:05,280
Chiar acum nu e nici un sens real al relevanței.

875
00:53:05,280 --> 00:53:08,190
Dacă am introduce un A, companiile care apar aici

876
00:53:08,190 --> 00:53:11,220
ar putea să nu fie cele mai populare companii care încep cu A.

877
00:53:11,220 --> 00:53:17,130
>> Înainte de a ajunge la Apple, ar putea dura mai multe caractere pentru a găsi ceva ce caut.

878
00:53:17,130 --> 00:53:20,420
Acest completarea automată nu are acest sens de relevanță.

879
00:53:20,420 --> 00:53:24,400
E doar de gând să spun, "Orice lucru care se potrivește am de gând pentru a afișa."

880
00:53:24,400 --> 00:53:30,510
În loc de asta, aș vrea să se integreze într-un fel oarecare relevanță în căutările mele.

881
00:53:30,510 --> 00:53:36,440
Dacă mă duc aici la Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Dacă am încerca să introduceți un simbol pe pagina Yahoo! Finanțelor

883
00:53:42,100 --> 00:53:52,310
și am început să tastați goog, am această listă frumos de lucruri.

884
00:53:52,310 --> 00:53:57,100
În mod evident, se pare ca Yahoo! Finance este de a face ceva mai inteligent aici.

885
00:53:57,100 --> 00:53:59,790
Ei au o anumită relevanță și au, de asemenea, informații suplimentare

886
00:53:59,790 --> 00:54:01,430
cum ar fi numele de stoc.

887
00:54:01,430 --> 00:54:05,850
Asta e ceva ce eu nu pot obține într-adevăr doar cu lista de stoc a mea de simboluri.

888
00:54:05,850 --> 00:54:09,520
Vreau ca acest lucru și așa am de gând să-l ia.

889
00:54:09,520 --> 00:54:11,790
Pentru a face acest lucru haideți să facem câteva lucruri.

890
00:54:11,790 --> 00:54:15,580
Să deschidem întâi inspectorul de pe aceasta pagina

891
00:54:15,580 --> 00:54:18,100
pentru că am văzut că această pagină nu este reîncărcarea la toate,

892
00:54:18,100 --> 00:54:21,960
așa că folosește probabil AJAX cumva să fie încărcarea datelor sale.

893
00:54:21,960 --> 00:54:23,920
Putem afla ce date se încarcă.

894
00:54:23,920 --> 00:54:28,390
Dacă aș faceți clic pe această filă de rețea, acestea vor fi toate cererile care încep să fie concediat.

895
00:54:28,390 --> 00:54:34,020
Acum, dacă tip I în goo, putem vedea că tocmai am primit o cerere HTTP nou.

896
00:54:34,020 --> 00:54:37,490
Acest lucru este, probabil, în cazul în care datele sunt provin din.

897
00:54:37,490 --> 00:54:41,990
Destul de sigur, dacă mă uit la acest URL, care este un pic ciudat pe nume,

898
00:54:41,990 --> 00:54:46,930
putem vedea că acest lucru este exact în cazul în care Yahoo este de a trimite pe datele de la.

899
00:54:46,930 --> 00:54:53,400
>> Am creat un fișier separat numit suggest.php că e foarte similare în spirit funcția de căutare.

900
00:54:53,400 --> 00:54:57,730
Este practic va face o interogare la adresa URL Yahoo, mă întorc unele date,

901
00:54:57,730 --> 00:54:59,750
și trimite-l la mine.

902
00:54:59,750 --> 00:55:02,570
Acum, mai degrabă decât folosind această listă mare, foarte mare de simboluri,

903
00:55:02,570 --> 00:55:05,280
Eu pot folosi Yahoo lucruri frumoase de relevanță,

904
00:55:05,280 --> 00:55:08,150
și nu trebuie să descărcați fișierul care masive JavaScript.

905
00:55:08,150 --> 00:55:12,040
Sunt doar de gând să trage în jos simbolurile de fapt relevante în stoc.

906
00:55:12,040 --> 00:55:13,960
Să sari în asta.

907
00:55:13,960 --> 00:55:17,360
Deci html, js. Suntem acum în quote4.

908
00:55:17,360 --> 00:55:22,120
Acum nu mai suntem folosind faptul că lista mare de fișiere JavaScript.

909
00:55:22,120 --> 00:55:24,430
Dar există un fel de problemă de design mic aici.

910
00:55:24,430 --> 00:55:28,200
Am spus că, în O AJAX este asincron.

911
00:55:28,200 --> 00:55:31,000
Ce înseamnă asta este că atunci când am face o cerere AJAX,

912
00:55:31,000 --> 00:55:36,490
asa de bine aici, pe linia 8, în cazul în care acest lucru este mea AJAX cerere este, de fapt concediat.

913
00:55:36,490 --> 00:55:40,370
Să spunem acum am unele cod care se aici că va face unele lucruri

914
00:55:40,370 --> 00:55:43,930
Vrei alerteze utilizatorul sau ceva schimbări pe pagina.

915
00:55:43,930 --> 00:55:49,830
Ce nu se va întâmpla este browser-ul nu este de gând să aștepte această cerere să continue

916
00:55:49,830 --> 00:55:53,480
înainte de a veni în jos și lovind această linie.

917
00:55:53,480 --> 00:55:55,900
Asta e partea asincron.

918
00:55:55,900 --> 00:55:58,400
Se va face această cerere și spune, "Ori de câte ori ați terminat,

919
00:55:58,400 --> 00:56:03,080
"Întoarce și sună ca functia pe care ți-am spus să sun în interiorul de succes."

920
00:56:03,080 --> 00:56:07,300
Asta înseamnă că nu putem pur și simplu descărca toate stocurile în prealabil.

921
00:56:07,300 --> 00:56:10,300
Avem nevoie pentru a face cererea și așteptați pentru ceva să se întoarcă.

922
00:56:10,300 --> 00:56:13,330
Asta înseamnă că, înainte, am putea spune pur și simplu Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Aici e lista cu lucruri pe care doriți să o completare automată pe."

924
00:56:15,580 --> 00:56:18,950
Noi nu mai putem face asta mai pentru că nu știm

925
00:56:18,950 --> 00:56:21,780
ceea ce ne dorim de fapt să completarea automată pe.

926
00:56:21,780 --> 00:56:25,190
Din fericire, Bootstrap gândit acest lucru, deoarece acestea sunt băieții deștepți de acolo,

927
00:56:25,190 --> 00:56:30,160
si ei de fapt ne-a dat un alt mod de a încărca acest plugin Typeahead.

928
00:56:30,160 --> 00:56:35,630
Înainte, valoarea acestei proprietăți sursă a fost doar această gamă mare de lucruri pentru a completarea automată pe.

929
00:56:35,630 --> 00:56:39,580
>> Acum proprietatea sursa este de fapt o funcție,

930
00:56:39,580 --> 00:56:44,580
și scopul acestei funcții este să dau seama ce lucruri la completarea automată pe sunt.

931
00:56:44,580 --> 00:56:48,730
Modul în care aceasta va seama de asta este ca va cere Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
ceea ce în cele mai bune lucruri la completarea automată sunt.

933
00:56:51,750 --> 00:56:54,500
Pentru a face că am de gând să fac o cerere foarte asemănătoare AJAX.

934
00:56:54,500 --> 00:56:59,010
Am de gând să solicite această pagină la suggest.php.

935
00:56:59,010 --> 00:57:01,360
Vreau sa trimit de-a lungul simbolurile încă.

936
00:57:01,360 --> 00:57:05,570
Și acum succesul meu, mi-a spus documentația Bootstrap

937
00:57:05,570 --> 00:57:09,130
că, pentru a popula această listă de lucruri,

938
00:57:09,130 --> 00:57:14,370
tot ce trebuie să faceți este să treci în această matrice acum la funcția de apel invers.

939
00:57:14,370 --> 00:57:15,660
Dar stai un minut.

940
00:57:15,660 --> 00:57:20,240
Dacă acest lucru se presupune a fi un tablou si AJAX mă trimite înapoi de text,

941
00:57:20,240 --> 00:57:22,720
cum este posibil acest lucru?

942
00:57:22,720 --> 00:57:27,910
Aceasta introduce un nou mod de schimb de date numite JSON.

943
00:57:27,910 --> 00:57:33,000
În acest caz, nu suntem doar trimiterea unui șir de text simplu.

944
00:57:33,000 --> 00:57:37,670
Acum avem de-a face cu această listă mult mai complex de simboluri bursiere.

945
00:57:37,670 --> 00:57:41,730
Aceste simboluri stocurilor poate include, de asemenea lucruri, cum ar fi numele companiei sau a prețurilor curente.

946
00:57:41,730 --> 00:57:47,550
Folosind doar un șir lung de mare, care nu este formatat în nici un fel previzibil

947
00:57:47,550 --> 00:57:51,970
nu va fi cel mai bun mod de a obține aceste date de la server Yahoo pentru mine

948
00:57:51,970 --> 00:57:54,540
într-un mod pe care le pot înțelege cu ușurință.

949
00:57:54,540 --> 00:58:01,280
JSON este o tehnologie care are avantajul de a cum putem crea tablouri asociative în JavaScript.

950
00:58:01,280 --> 00:58:04,510
Acest lucru arata foarte mult ca un tablou asociativ JavaScript,

951
00:58:04,510 --> 00:58:06,600
și, de fapt, e pentru că este.

952
00:58:06,600 --> 00:58:09,710
JSON standuri pentru Notații Obiect JavaScript.

953
00:58:09,710 --> 00:58:15,020
Aceasta este de fapt un format de convenit pentru transferul de date și înapoi.

954
00:58:15,020 --> 00:58:18,280
Aici, acest obiect JSON sau acest tablou asociativ JSON

955
00:58:18,280 --> 00:58:21,010
trimite-mi niste date despre un curs.

956
00:58:21,010 --> 00:58:25,110
>> Cheile acestei matrice sunt lucruri cum ar fi curs care are o valoare de CS50,

957
00:58:25,110 --> 00:58:29,140
si aici putem vedea că pot avea o valoare care este o matrice.

958
00:58:29,140 --> 00:58:32,730
Eu nu trebuie să fac lucruri cum ar fi elimine siruri de caractere și să caute virgule

959
00:58:32,730 --> 00:58:35,330
și de a face lucruri de genul asta nebun.

960
00:58:35,330 --> 00:58:38,820
Deoarece acest lucru este declarat în acest format JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript și jQuery au deja funcții pentru a converti un șir de caractere

962
00:58:43,510 --> 00:58:48,140
care arata ca acest JSON într-un tablou real asociativ JavaScript

963
00:58:48,140 --> 00:58:50,440
că putem lucra cu.

964
00:58:50,440 --> 00:58:56,660
Făcând care este la fel de simplu ca și spune că nu mai este acest fișier, suggest.php,

965
00:58:56,660 --> 00:58:59,040
trimite-mă înapoi pur și simplu un șir de text,

966
00:58:59,040 --> 00:59:01,950
dar știu că va fi ma trimite înapoi JSON.

967
00:59:01,950 --> 00:59:06,760
Asta înseamnă că JSON poate fi convertit într-un tablou asociativ JavaScript.

968
00:59:06,760 --> 00:59:10,830
Și așa jQuery, aș dori să faci asta pentru mine.

969
00:59:10,830 --> 00:59:13,990
Asta înseamnă că acest parametru de răspuns aici,

970
00:59:13,990 --> 00:59:16,070
aceasta nu mai este doar un șir.

971
00:59:16,070 --> 00:59:19,860
Pentru ca ne-am spus jQuery care vine aici unele JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery va fi destul de inteligent pentru a spune, "Ai vrut JSON?"

973
00:59:22,950 --> 00:59:26,890
"Am de gând să transforme că într-un tablou asociativ pentru tine."

974
00:59:26,890 --> 00:59:32,100
Să aruncăm o privire la de fapt, o dată pe fila Network avem quote4.js.

975
00:59:32,100 --> 00:59:35,400
Vom schimba acest lucru și să reîncărcați pagina.

976
00:59:37,150 --> 00:59:41,250
Acum am de gând să tastați într-o-o din nou.

977
00:59:41,250 --> 00:59:45,600
Am facut un cuplu de cereri la suggest.php, dar acum acest răspuns,

978
00:59:45,600 --> 00:59:48,670
, mai degrabă decât pur și simplu șir, e JSON.

979
00:59:48,670 --> 00:59:52,580
Deci, am o proteza deschis cret spune, "Iată vine un tablou asociativ."

980
00:59:52,580 --> 00:59:56,830
>> Tasta primul si singurul de acest tablou asociativ se numește simboluri,

981
00:59:56,830 --> 01:00:00,240
si apoi aici este un tablou al tuturor simbolurilor relevante

982
01:00:00,240 --> 01:00:04,820
vine acum de la Finante Yahoo! nu, din această listă gigantic.

983
01:00:06,110 --> 01:00:10,630
Asta e modul în care pot popula pur și simplu, acest plugin completarea automată

984
01:00:10,630 --> 01:00:14,280
cu unele date care nu vine dintr-un fișier local care este deja predeterminat

985
01:00:14,280 --> 01:00:17,490
dar de la altceva.

986
01:00:17,490 --> 01:00:21,160
Se pare că putem lua de fapt profita de o tehnologie numită JSONP,

987
01:00:21,160 --> 01:00:27,420
sau JSON cu umplutură, care va elimina acest intermediar suggest.php.

988
01:00:27,420 --> 01:00:34,010
Dar, în loc de a face asta, haideți să aruncăm o privire la locul cum pot îmbunătăți acest lucru chiar mai mult.

989
01:00:34,010 --> 01:00:36,040
Îmi place foarte mult Typeahead Bootstrap lui. E foarte frumos.

990
01:00:36,040 --> 01:00:39,570
Dar noi te pricepi la JavaScript și vrem să facem acest gen de noi înșine,

991
01:00:39,570 --> 01:00:43,870
ia poate o privire la ceea ce ar putea fi acest plugin face.

992
01:00:43,870 --> 01:00:46,500
Să nu ne mai folosesc chestia aia Typeahead,

993
01:00:46,500 --> 01:00:50,550
și să încerce să facă această listă de stocuri propuse noi înșine.

994
01:00:50,550 --> 01:00:53,790
Aici, în quote6.php vom începe același fel.

995
01:00:53,790 --> 01:00:58,050
De fiecare dată când cineva tipuri de ceva, dorim să facem o cerere AJAX.

996
01:00:58,050 --> 01:01:01,590
Acest lucru este similar cu originalul nostru Instant Finante CS50.

997
01:01:01,590 --> 01:01:05,020
, Mai degrabă decât a face o cerere de quote.php,

998
01:01:05,020 --> 01:01:08,530
facem acum o cerere în acest dosar la fel ca înainte, acest suggest.php,

999
01:01:08,530 --> 01:01:12,460
care este doar de gând să trage de date de la Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Din nou, ne asteptam inca JSON, dar acum, deoarece Typeahead nu face acest lucru pentru noi,

1001
01:01:19,480 --> 01:01:24,850
avem, de asemenea, trebuie să trimită de-a lungul valoare care este în interiorul casetei de text curent.

1002
01:01:24,850 --> 01:01:28,120
Acum știm ce să ceară pentru Yahoo! Finance,

1003
01:01:28,120 --> 01:01:34,160
si asa ca acum e aici, funcția pe care dorim să execute o dată cererea completeaza.

1004
01:01:34,160 --> 01:01:36,520
Noi nu avem de a face plugin lista pentru noi,

1005
01:01:36,520 --> 01:01:40,630
așa că aici e de fapt, în cazul în care vom merge pentru a construi o listă de sugestii.

1006
01:01:40,630 --> 01:01:44,850
Pentru a face acest lucru, mai mult ca în PHP avem concatenate aceste șiruri mari de HTML

1007
01:01:44,850 --> 01:01:48,170
apoi le-am tipărit, putem face exact acelasi lucru în JavaScript.

1008
01:01:48,170 --> 01:01:51,850
În primul rând vom începe acest șir numit traduceri,

1009
01:01:51,850 --> 01:01:54,590
și acest șir este doar de gând să conțină câteva HTML.

1010
01:01:54,590 --> 01:01:58,320
Ne dorim ca acesta să fie o listă de lucruri, așa că o să încep cu această etichetă listă,

1011
01:01:58,320 --> 01:02:03,340
și acum vom repeta peste toate simbolurile care au fost returnate inapoi la noi.

1012
01:02:03,340 --> 01:02:06,500
Amintiți-vă, pentru că ne-am spus DataType: "JSON", acest lucru nu este un șir.

1013
01:02:06,500 --> 01:02:09,500
Aceasta este deja o matrice pentru noi. Asta e foarte tare.

1014
01:02:09,500 --> 01:02:13,790
Putem spune pur și simplu, "vreau să adăugați un element de listă."

1015
01:02:13,790 --> 01:02:16,000
Vom pune in interiorul unui element de o parte, în a,

1016
01:02:16,000 --> 01:02:19,030
vom da o clasă de traduceri astfel încât să știi ce este,

1017
01:02:19,030 --> 01:02:23,880
iar acum aici este simbolul pe care ne-am întors de la Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> După ce am creat un element pentru fiecare dintre simbolurile am ajuns înapoi,

1019
01:02:27,230 --> 01:02:30,100
vrem doar pentru a inchide lista.

1020
01:02:30,100 --> 01:02:33,040
Deci, acum, traduceri reprezintă acest fragment mic HTML

1021
01:02:33,040 --> 01:02:37,860
că, atunci când a pus pe o pagina va fi lista de lucruri pe care le căutați.

1022
01:02:37,860 --> 01:02:41,070
Acum, hai să punem de fapt, ca pe pagina.

1023
01:02:41,070 --> 01:02:46,390
Pentru a face acest lucru l-am creat, de fapt un alt div gol și m-am dat un ID de traduceri.

1024
01:02:46,390 --> 01:02:52,520
La fel ca ne-am stabilit conținutul div care ar afișează prețul date privind stocurile,

1025
01:02:52,520 --> 01:02:58,600
Acum vrem doar să setați conținutul acestui div la orice acest șir este

1026
01:02:58,600 --> 01:03:00,290
care conține aceste simboluri.

1027
01:03:00,290 --> 01:03:07,650
Prin folosirea acestei metode HTML, această variabilă traduceri, acest șir, este un șir de HTML.

1028
01:03:07,650 --> 01:03:13,490
Vreau să iei HTML si pune-l in interiorul div numit traduceri.

1029
01:03:13,490 --> 01:03:15,680
Am adăugat ceva la DOM acum.

1030
01:03:15,680 --> 01:03:20,360
Am adăugat câteva elemente noi DOM pe care le poate afișa acum pe pagina.

1031
01:03:20,360 --> 01:03:22,540
Să vedem cum arata.

1032
01:03:22,540 --> 01:03:29,110
Dacă vom încărca în quote6 și acum ne vom întoarce,

1033
01:03:29,110 --> 01:03:34,480
acum, când am început să tastați AAPL, nu mai avem acea bootstrap completarea automată,

1034
01:03:34,480 --> 01:03:38,470
dar acum avem această listă pe care ne făcut.

1035
01:03:38,470 --> 01:03:43,230
Acesta este un pic mai urât decât Typeahead Bootstrap, de exemplu,

1036
01:03:43,230 --> 01:03:45,580
dar aceasta nu ne permite să facem un lucru.

1037
01:03:45,580 --> 01:03:48,660
Când ne-am uitat la acel plugin Bootstrap,

1038
01:03:48,660 --> 01:03:52,590
am văzut că, atunci când ne autocompleted, una dintre valorile completare automată a fost AAPL.

1039
01:03:52,590 --> 01:03:54,820
Asta ar putea să nu fie atât de util.

1040
01:03:54,820 --> 01:03:59,100
Ca utilizator, nu s-ar putea recunoaște imediat toate simbolurile stoc.

1041
01:03:59,100 --> 01:04:02,370
Ceea ce eu sunt, probabil, mai multe sanse de a recunoaște sunt numele companiei reale.

1042
01:04:02,370 --> 01:04:05,310
Deci, nu ar fi foarte util în cazul în care, mai degrabă decât spune AAPL

1043
01:04:05,310 --> 01:04:07,970
această a spus ceva de genul Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Pentru ca ne-am rostogolit asta noi înșine, putem foarte ușor să fac asta.

1045
01:04:12,240 --> 01:04:17,630
Să deschidem fișierul nostru de oferta trecut, aici, așa quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Același lucru. Am creat doar un alt fișier PHP, care va reveni la noi mai mult decât doar simboluri.

1047
01:04:23,200 --> 01:04:25,550
Acesta va oferi, de asemenea, ne înapoi numele companiei.

1048
01:04:25,550 --> 01:04:28,150
Și așa facem același lucru. Facem o cerere AJAX.

1049
01:04:28,150 --> 01:04:32,370
Odată ce a completat cererea, vom executa această funcție aici,

1050
01:04:32,370 --> 01:04:36,520
și această funcție este de gând să construiască un șir mare de elemente.

1051
01:04:36,520 --> 01:04:39,520
Dar diferența este că valoarea acestor liste nu mai este doar un simbol,

1052
01:04:39,520 --> 01:04:45,370
e acum numele.

1053
01:04:45,370 --> 01:04:47,070
Deci, avem o mică problemă.

1054
01:04:47,070 --> 01:04:51,590
Când ne-am folosi de căutare nostru, avem nevoie de a trece cumva simbolul.

1055
01:04:51,590 --> 01:04:54,950
Noi nu putem trece ceva de căutare cum ar fi Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Avem nevoie de ea pentru a trece MSFT.

1057
01:04:57,900 --> 01:05:01,640
Când ne-am scriem HTML, avem o mulțime de frumoase încorporate în atribute.

1058
01:05:01,640 --> 01:05:05,440
Un A poate fi asociat cu acesta un href sau o clasă.

1059
01:05:05,440 --> 01:05:08,230
Dar ceea ce avem cu adevărat nevoie acum este pentru fiecare dintre aceste link-uri

1060
01:05:08,230 --> 01:05:11,120
să aibă un simbol stoc asociate cu aceasta.

1061
01:05:11,120 --> 01:05:14,240
Nu e nici un built-in atributul HTML pentru simbol stoc,

1062
01:05:14,240 --> 01:05:21,010
dar, din fericire, HTML5 ne permite să creați propriile noastre atribute să fie tot ce ne dorim.

1063
01:05:21,010 --> 01:05:24,620
Prin a spune de date-simbol, am introdus un nou atribut

1064
01:05:24,620 --> 01:05:29,350
al cărui nume am făcut în sus, și acest lucru este în regulă pentru că l-am prefațat cu aceste date.

1065
01:05:29,350 --> 01:05:34,270
Vom stoca în interiorul de acolo simbolul din stocul acum.

1066
01:05:34,270 --> 01:05:39,590
Ceea ce înseamnă că, chiar dacă suntem afișarea valoarea numelui companiei

1067
01:05:39,590 --> 01:05:43,380
interiorul autocomplete noastre, amintindu-ne în continuare simbolul

1068
01:05:43,380 --> 01:05:47,110
care este asociat cu fiecare companie.

1069
01:05:47,110 --> 01:05:50,350
Modul în care ne facem că este în interiorul acestui element în sine.

1070
01:05:50,350 --> 01:05:52,930
Asta înseamnă că trebuie să facem o schimbare mai mult.

1071
01:05:52,930 --> 01:05:57,090
Când ne-am faceți clic pe el acum, avem nevoie pentru a lua de fapt profita de atributul simbolului

1072
01:05:57,090 --> 01:06:00,220
, mai degrabă decât doar de valoarea sa.

1073
01:06:00,220 --> 01:06:05,010
Dacă ne back-up, am atașa un handler eveniment la traduceri.

1074
01:06:05,010 --> 01:06:09,280
Ori de câte ori unul dintre aceste traduceri se face clic pe acum, vreau să fac ceva.

1075
01:06:09,280 --> 01:06:13,160
Ceea ce vreau să fac este să modificați valoarea de care caseta de intrare.

1076
01:06:13,160 --> 01:06:16,100
Acum vreau să setați această funcție val aceeași.

1077
01:06:16,100 --> 01:06:21,060
>> Deci, fara nici un argument această funcție val se întoarce la tine ceea ce e deja în caseta de text,

1078
01:06:21,060 --> 01:06:27,070
dar daca dau un șir, se va lua ca șir și pune-l în caseta de text.

1079
01:06:27,070 --> 01:06:28,980
Mă selectarea caseta de text sa în același mod.

1080
01:06:28,980 --> 01:06:31,230
Numele lui este in interiorul simbol al formularului-citat.

1081
01:06:31,230 --> 01:06:37,540
Acum, eu trimit aceasta valoare a atributului de date simbol.

1082
01:06:37,540 --> 01:06:41,560
Acest lucru este nou aici, aceasta $ (aceasta).

1083
01:06:41,560 --> 01:06:46,850
Ce este acest lucru se referă la este elementul care a fost făcut clic.

1084
01:06:46,850 --> 01:06:50,880
Putem vedea aici că nu vom atașa un eveniment clic

1085
01:06:50,880 --> 01:06:54,690
pentru fiecare element cu o clasă de sugestie individual.

1086
01:06:54,690 --> 01:06:57,140
Mai degrabă, ne apropiem de acest mic un mod diferit.

1087
01:06:57,140 --> 01:07:01,700
În schimb ne spui de fiecare dată când în interiorul acestui div nimic traduceri,

1088
01:07:01,700 --> 01:07:04,080
care amintesc este doar un container pentru această listă,

1089
01:07:04,080 --> 01:07:10,150
în cazul în care ceva în interiorul acestui div se face clic si are o clasă de sugestie,

1090
01:07:10,150 --> 01:07:13,000
Vreau acest eveniment la foc.

1091
01:07:13,000 --> 01:07:17,490
Practic ce înseamnă acest lucru putem face este, putem reutiliza acest handler aceluiași eveniment

1092
01:07:17,490 --> 01:07:20,000
pentru toate lucrurile din lista.

1093
01:07:20,000 --> 01:07:22,080
Deci, nu avem de a avea unul de tratare a evenimentelor pentru primul element

1094
01:07:22,080 --> 01:07:24,550
și un handler eveniment diferit pentru al doilea element.

1095
01:07:24,550 --> 01:07:29,880
Putem spune în schimb, "Vreau de tratare același eveniment să se aplice totul în lista mea."

1096
01:07:29,880 --> 01:07:34,420
Dar noi trebuie să știți cumva ce element a fost făcut clic.

1097
01:07:34,420 --> 01:07:38,450
Acest "acest" cuvânt cheie reprezinta doar asta.

1098
01:07:38,450 --> 01:07:42,360
Acesta este obiectul care tocmai a fost apasat de utilizator.

1099
01:07:42,360 --> 01:07:47,680
Dacă am dat click pe link-ul treilea, aceasta reprezintă elementul de care se leagă treia,

1100
01:07:47,680 --> 01:07:51,670
ceea ce înseamnă că pot obține atributul său, date-simbol,

1101
01:07:51,670 --> 01:07:57,760
care știm că are să conțină simbolul care este asociat cu compania tocmai am dat click.

1102
01:07:57,760 --> 01:08:04,550
Dacă ne sări înapoi la pagina noastră financiară,

1103
01:08:04,550 --> 01:08:08,580
putem vedea acum că odată ce am început să tastați ceva de genul MSFT,

1104
01:08:08,580 --> 01:08:11,220
nu mai suntem obtinerea doar simboluri bursiere,

1105
01:08:11,220 --> 01:08:13,720
ne apropiem acum companiile reale.

1106
01:08:13,720 --> 01:08:20,410
Dar când dau click pe una dintre aceste companii,

1107
01:08:20,410 --> 01:08:25,180
putem vedea că suntem de fapt, nu popularea caseta de text cu numele companiei

1108
01:08:25,180 --> 01:08:29,850
dar cu tot ce a fost depozitat în interiorul acestor atribute de date.

1109
01:08:29,850 --> 01:08:32,880
Și deci, dacă am inspecta, de fapt unul dintre aceste elemente de dreapta aceasta făcând clic pe

1110
01:08:32,880 --> 01:08:36,200
și făcând clic pe Inspect Element, putem vedea de fapt cum arata.

1111
01:08:36,200 --> 01:08:40,290
>> Amintiți-vă acest lucru este ceva pe care noi am creat în interiorul că, pentru bucla

1112
01:08:40,290 --> 01:08:42,649
cand am fost construirea faptul că un șir de HTML.

1113
01:08:42,649 --> 01:08:47,870
Putem vedea aici că aceste date-simbol are valoarea de MSFT, ceea ce este minunat.

1114
01:08:47,870 --> 01:08:49,189
Asta e ceea ce ne așteptam.

1115
01:08:49,189 --> 01:08:53,170
Asta e simbolul și care este modul în care am ajuns la valoarea de care aveam nevoie pentru a utiliza

1116
01:08:53,170 --> 01:08:56,140
în interiorul acestei casete de text.

1117
01:08:56,140 --> 01:08:58,850
Asta e suficient pentru formularul de oferta pentru că e un fel de plictisitor.

1118
01:08:58,850 --> 01:09:02,990
Să facem niște îmbunătățiri rapide la pagina portofoliul nostru.

1119
01:09:02,990 --> 01:09:08,109
Dacă ați utilizat CS50 Finante pentru un timp și de a începe să cumpararea si vanzarea o mulțime de stocuri,

1120
01:09:08,109 --> 01:09:11,300
în cele din urmă acest tabel este mergi la a lua destul de mare,

1121
01:09:11,300 --> 01:09:13,850
și ai de gând să doriți un simbol stoc, desigur.

1122
01:09:13,850 --> 01:09:20,350
Odata ce masa este foarte, foarte mare, ar putea fi util pentru utilizatorul să încerce să caute peste el.

1123
01:09:20,350 --> 01:09:23,290
In interiorul casetei de căutare, dacă am începe să tastați ceva de genul Disney

1124
01:09:23,290 --> 01:09:26,359
și caută pentru stocul meu Mickey Mouse, putem vedea că tabelul este acum de filtrare

1125
01:09:26,359 --> 01:09:28,189
bazat pe ceea ce am tastat inch

1126
01:09:28,189 --> 01:09:31,640
Această funcționalitate arata super-complicat, dar este foarte, foarte usor

1127
01:09:31,640 --> 01:09:33,859
cu jQuery și JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Acest fișier portfolio.php include un fișier numit portfolio.js JavaScript.

1129
01:09:39,189 --> 01:09:41,130
Să aruncăm o privire la asta.

1130
01:09:41,130 --> 01:09:44,890
Deci html, js, portofoliul.

1131
01:09:44,890 --> 01:09:49,210
Iată în cazul în care vom face acest lucru căutarea pe masă.

1132
01:09:49,210 --> 01:09:52,750
Primul lucru pe care am nevoie să faceți este să atașați o rutină de tratare eveniment la care caseta de text

1133
01:09:52,750 --> 01:09:55,760
pentru că știm că ne-o dorim funcția noastră de filtrare la foc

1134
01:09:55,760 --> 01:09:59,800
de fiecare dată utilizatorul apasă ceva pentru că nu au timp pentru butoanele Căutare.

1135
01:09:59,800 --> 01:10:03,000
Primul lucru pe care trebuie să faceți este să dau seama ce caută utilizatorul,

1136
01:10:03,000 --> 01:10:04,780
la fel cum am făcut-o înainte.

1137
01:10:04,780 --> 01:10:11,320
Acest cuvânt cheie se referă la elementul curent utilizatorul interacționează cu.

1138
01:10:11,320 --> 01:10:14,070
>> Deoarece utilizatorul interacționează cu caseta de căutare,

1139
01:10:14,070 --> 01:10:17,020
$ Acest lucru reprezintă caseta de căutare,

1140
01:10:17,020 --> 01:10:21,820
astfel this.val ne oferă ceea ce este în interiorul casetei de căutare utilizatorul este în prezent tastarea.

1141
01:10:22,810 --> 01:10:27,320
Deci, acum ce vrem să facem este să vrem itera peste toate rândurile

1142
01:10:27,320 --> 01:10:29,240
interiorul masa noastră.

1143
01:10:29,240 --> 01:10:35,630
Pentru a selecta toate rândurile din tabelul nostru, i-am dat acel tabel un ID de portofoliu de masă,

1144
01:10:35,630 --> 01:10:39,060
și fiecare rând este reprezentat de un element TR,

1145
01:10:39,060 --> 01:10:42,080
Deci, acest selector este de gând să se întoarcă la mine o matrice mare

1146
01:10:42,080 --> 01:10:44,370
din toate rândurile din masa mea.

1147
01:10:44,370 --> 01:10:47,010
Acum vreau să itera peste acea matrice.

1148
01:10:47,010 --> 01:10:52,390
Te-aș putea-o pentru buclă, dar de fapt ne oferă jQuery funcția de frumos numit "fiecare."

1149
01:10:52,390 --> 01:10:55,220
Ce face fiecare este fiecare are un argument,

1150
01:10:55,220 --> 01:10:57,090
și acest argument este o funcție.

1151
01:10:57,090 --> 01:11:02,760
Ce o să faceți este să-l va aplica această funcție pentru fiecare element de interiorul acestei liste.

1152
01:11:02,760 --> 01:11:05,550
Aceasta functie are un argument care este e,

1153
01:11:05,550 --> 01:11:10,090
și atunci când această funcție este executat, acest e va fi înlocuit cu primul rând,

1154
01:11:10,090 --> 01:11:12,070
apoi al doilea rând, și apoi al treilea rand.

1155
01:11:12,070 --> 01:11:15,150
Prin acest mod, acesta este același lucru ca și execută o buclă pentru

1156
01:11:15,150 --> 01:11:21,360
și apoi imaginind elementul curent pe baza indicelui de interior pentru buclă.

1157
01:11:21,360 --> 01:11:24,750
La fiecare iteratie, pentru fiecare dintre aceste elemente în tabel,

1158
01:11:24,750 --> 01:11:30,560
Vreau pentru a verifica dacă textul elementului - textul celulei interiorul rând -

1159
01:11:30,560 --> 01:11:33,130
Meciuri ceea ce caut.

1160
01:11:33,130 --> 01:11:36,390
Acest șir lung de mare comenzi este cum am putea face asta.

1161
01:11:36,390 --> 01:11:40,900
În primul rând, din nou, acest lucru acum se referă la - pentru că este în interiorul unei funcții noi -

1162
01:11:40,900 --> 01:11:45,020
aceasta este acum rândul curent din tabel.

1163
01:11:45,020 --> 01:11:47,340
Vreau să iau rândul curent din tabel,

1164
01:11:47,340 --> 01:11:49,950
și vreau pentru a obține toate de copiii săi.

1165
01:11:49,950 --> 01:11:51,940
Amintiți-vă, DOM este un arbore ierarhic,

1166
01:11:51,940 --> 01:11:54,200
ceea ce înseamnă că elementele au un număr de copii.

1167
01:11:54,200 --> 01:12:00,180
>> Această funcție copii. Este de gând să se întoarcă la mine din spate o serie de toate elementele

1168
01:12:00,180 --> 01:12:03,240
că sunt copiii, în acest caz, un rând din tabel.

1169
01:12:03,240 --> 01:12:07,150
Acest lucru este pur și simplu celulele din interiorul rândului.

1170
01:12:07,150 --> 01:12:09,230
Vreau doar să căutați în prima celulă.

1171
01:12:09,230 --> 01:12:13,090
Această funcție. Primul spune-mi dea primul element în această matrice.

1172
01:12:13,090 --> 01:12:17,070
Atunci funcția textul spune-mi exact ce e in interiorul acelei celule

1173
01:12:17,070 --> 01:12:19,530
din moment ce vreau să căutați în acest text.

1174
01:12:19,530 --> 01:12:21,040
În cele din urmă, să îl transformă în litere mici,

1175
01:12:21,040 --> 01:12:23,940
astfel încât să putem face interogări de text caz insensibile.

1176
01:12:23,940 --> 01:12:29,990
În cele din urmă, dorim să vedem dacă acest șir în interiorul unui tabel conține șirul de caractere suntem căutați.

1177
01:12:29,990 --> 01:12:32,980
Funcția indexOf în JavaScript nu doar asta.

1178
01:12:32,980 --> 01:12:37,060
Ea ne spune dacă este sau nu acest șir conține un alt șir.

1179
01:12:37,060 --> 01:12:40,150
Dacă e adevărat că celula conține ceea ce caut,

1180
01:12:40,150 --> 01:12:42,140
atunci vreau să vă asigurați că este indicat.

1181
01:12:42,140 --> 01:12:45,330
Metoda de spectacol va spune, "Arată element."

1182
01:12:45,330 --> 01:12:50,350
Dacă acest lucru nu este cazul, atunci înseamnă că tot ce caut nu sunt conținute

1183
01:12:50,350 --> 01:12:53,550
în acel rând, și așa vreau să ascund este de la utilizator.

1184
01:12:53,550 --> 01:12:59,240
Care realizează acest sens frumos de filtrare în cazul în care nu mai vedem întregul tabel.

1185
01:12:59,240 --> 01:13:01,480
Dacă sunteți interesat în modul de a face acest simbol, precum și,

1186
01:13:01,480 --> 01:13:04,180
vom posta sursa on-line. Dar e foarte simplu.

1187
01:13:04,180 --> 01:13:09,860
JQuery are metode minunat pentru aceste animații și proprietăți CSS manipulare.

1188
01:13:09,860 --> 01:13:11,020
Deci, asta e pentru mine.

1189
01:13:11,020 --> 01:13:15,560
>> Atunci ce se află în fața? După cum veți vedea în câteva zile, finala propuneri de proiecte este datorată.

1190
01:13:15,560 --> 01:13:17,730
Finala propuneri de proiecte va pune câteva întrebări,

1191
01:13:17,730 --> 01:13:19,420
dar printre ei va fi de trei etape -

1192
01:13:19,420 --> 01:13:22,840
o un "bun" piatra de hotar, o piatră de hotar o mai bună, și una cel mai bun.

1193
01:13:22,840 --> 01:13:25,870
Ideea fiind de a ajuta într-adevăr voi stabili așteptările dumneavoastră

1194
01:13:25,870 --> 01:13:29,160
astfel încât minim va fi fericit cu producția de proiectul final

1195
01:13:29,160 --> 01:13:32,060
și va fi "bun", astfel încât ceea ce vă îngrijorează.

1196
01:13:32,060 --> 01:13:34,540
Dar apoi, în interesul de a obține vă pentru a ajunge la doar un pic la ceva mai bun

1197
01:13:34,540 --> 01:13:37,680
sau cel mai bine ceva, vom rezolva, de asemenea, a împinge spre tine la fel de bine.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-un-Thon, între timp, este în câteva săptămâni.

1199
01:13:40,660 --> 01:13:44,340
De obicei, facem acest lucru pe o bază baza loterie, datorită interesului,

1200
01:13:44,340 --> 01:13:47,680
dar sansele sunt vom avea câteva sute de noi în autobuze de transfer de la Harvard Square

1201
01:13:47,680 --> 01:13:51,540
în jos pentru a Kendall Piața cazul în care Microsoft are o facilitate de frumos pe bună dreptate numit "tocilar" -

1202
01:13:51,540 --> 01:13:53,830
New England de Cercetare si Centrul de Dezvoltare.

1203
01:13:53,830 --> 01:13:56,380
Vom ajunge acolo în jurul valorii de 20 Vom avea ceva de mâncare.

1204
01:13:56,380 --> 01:13:58,160
În jurul valorii de 1 dimineața vom avea mâncare ceva mai mult.

1205
01:13:58,160 --> 01:14:02,150
În jurul valorii de 5 am, dacă ești încă treaz, vom peste cap de la IHOP sau de a lua înapoi la campus.

1206
01:14:02,150 --> 01:14:04,380
Obiectivul nu este de a se arunca cu capul în proiecte finale

1207
01:14:04,380 --> 01:14:06,190
alături de colegii de clasă și a personalului.

1208
01:14:06,190 --> 01:14:08,280
Apoi, câteva zile mai târziu, este Târgul CS50,

1209
01:14:08,280 --> 01:14:10,990
care este într-adevăr menit să fie o oportunitate pentru voi de a prezenta munca ta

1210
01:14:10,990 --> 01:14:12,700
și realizări pentru semestrul

1211
01:14:12,700 --> 01:14:15,610
în timp ce frecarea umeri unii cu alții și a obține un sentiment de ceea ce a făcut toată lumea.

1212
01:14:15,610 --> 01:14:17,850
Cu care a spus, multe mulțumiri Tommy și lui Iosif,

1213
01:14:17,850 --> 01:14:19,960
si te vom vedea pe luni.

1214
01:14:19,960 --> 01:14:24,070
 [Aplauze]