1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [9. týždeň, pokračovanie]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Harvard University]

3
00:00:05,160 --> 00:00:07,020
[To je CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> To je CS50. To je koniec týždňa 9. Děkuju mnohokrát.

5
00:00:13,340 --> 00:00:15,310
Konečne. 9. týždeň. Mám to.

6
00:00:15,310 --> 00:00:18,590
Dnes budeme pokračovať v našom rozhovore o programovanie pre web

7
00:00:18,590 --> 00:00:21,660
s okom k záverečného projektu, nie preto, že musíte niečo urobiť webové

8
00:00:21,660 --> 00:00:25,610
pre konečné projekty, ale preto, že buď na záverečných prác alebo po CS50

9
00:00:25,610 --> 00:00:29,000
je to určite smer, v ktorom moderný softvér sa deje.

10
00:00:29,000 --> 00:00:31,770
A napriek tomu, že to nie je v skutočnosti jednoduchá vec.

11
00:00:31,770 --> 00:00:35,040
V skutočnosti, jeden z najťažších vecí, ktoré urobiť, je aspekt designu.

12
00:00:35,040 --> 00:00:38,600
>> Napríklad, podľa návrhu máme na mysli skutočne dostať užívateľského rozhrania

13
00:00:38,600 --> 00:00:40,420
alebo užívateľské skúsenosti právo.

14
00:00:40,420 --> 00:00:43,200
Trúfam si povedať, - a my vieme z nedávnej problému sady

15
00:00:43,200 --> 00:00:45,960
keď pár z vás vysielal svoje nadávanie nejaký kus softvér

16
00:00:45,960 --> 00:00:49,000
alebo hardvér, ktorý privádza k zúrivosti vás, či už na akademickej pôde alebo mimo -

17
00:00:49,000 --> 00:00:51,930
je tu veľa miest tam, je tam veľa hardvéru tam,

18
00:00:51,930 --> 00:00:53,900
že druh hovno.

19
00:00:53,900 --> 00:00:58,730
Skutočnosť je však taká, že robiť veci, ktoré sa ľahko používajú a napriek tomu sú však silné

20
00:00:58,730 --> 00:01:00,550
je veľmi jednoduchá.

21
00:01:00,550 --> 00:01:03,680
Tak pre dnešok som sa opýtal Jozefa a Tommy sa pripojiť ma sem

22
00:01:03,680 --> 00:01:06,680
takže môžeme mať rozhovor, ako o dizajne

23
00:01:06,680 --> 00:01:09,090
a aké druhy myšlienkových procesov by mala začať chodiť cez hlavu

24
00:01:09,090 --> 00:01:12,040
keď si navrhnúť konečné projekty, vaše budúce úsilie.

25
00:01:12,040 --> 00:01:15,040
A potom sa s pomocou Tommyho sa pozrieme na niektoré z implementačných detailov.

26
00:01:15,040 --> 00:01:18,440
Ako môžete mať nejaké videnie na papieri alebo vo vašej mysli

27
00:01:18,440 --> 00:01:20,760
, Ktoré potom môžete spustiť programovo

28
00:01:20,760 --> 00:01:24,030
pomocou niektoré z technológií a techník sme začali hovoriť o tom,

29
00:01:24,030 --> 00:01:29,080
konkrétne JavaScript a ešte niečo novšie, a to AJAX, asynchrónne JavaScript.

30
00:01:29,080 --> 00:01:32,950
To vám umožní vytvoriť všetky dynamickejší z užívateľského rozhrania

31
00:01:32,950 --> 00:01:35,780
od načítania viac a viac dát postupne zo servera.

32
00:01:35,780 --> 00:01:38,560
Tak uvidíme niektoré z týchto úryvkov aj dnes.

33
00:01:38,560 --> 00:01:41,800
Ako stranou, ak máte záujem o sústredenie v informatike

34
00:01:41,800 --> 00:01:45,010
alebo minoring vo vede o počítačoch, viem, že tento piatok na poludnie

35
00:01:45,010 --> 00:01:48,750
v Maxwell Dworkin 221 bude pizza udalosť

36
00:01:48,750 --> 00:01:50,780
kde sa môžete dozvedieť niečo viac o počítačovej vede.

37
00:01:50,780 --> 00:01:54,860
Na svojej ceste von z dverí dnes budete môcť vyzdvihnúť neoficiálne príručka SK na Harvarde.

38
00:01:54,860 --> 00:01:57,290
Dáme ju na košoch mimo výške pása

39
00:01:57,290 --> 00:01:59,750
takže ak chcete chytiť to a naučiť sa niečo viac o SK,

40
00:01:59,750 --> 00:02:02,480
že tam bude pre vás, ako to bolo v týždni 0.

41
00:02:02,480 --> 00:02:06,500
Tiež ak by ste sa k nám pripojiť na CS50 obed v piatok o 13.15

42
00:02:06,500 --> 00:02:09,800
zamierte do cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Bez ďalších okolkov, dám vám pedagogické kolega Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Ahoj. [Potlesk]

45
00:02:19,190 --> 00:02:20,770
Vďaka.

46
00:02:20,770 --> 00:02:24,780
Prvýkrát som sa dozvedel o návrhu bol v triede tu nazýva CS179.

47
00:02:24,780 --> 00:02:28,040
>> Profesor v tej dobe povedal nám príbeh o inom profesor

48
00:02:28,040 --> 00:02:31,640
kto šiel do hotela a používal kohútiky.

49
00:02:31,640 --> 00:02:35,630
Môže mi niekto povedať, čo sa 2 gombíky na ľavej a pravej robiť?

50
00:02:35,630 --> 00:02:39,080
[Študent] Horúca a studená. >> Horúca a studená. Dobré.

51
00:02:39,080 --> 00:02:41,430
To, čo bežne očakávať, že jo?

52
00:02:41,430 --> 00:02:46,960
Tento profesor po použití kohútik chce osprchovať, a on pokračuje používať.

53
00:02:46,960 --> 00:02:51,310
Myslí si, že ľavá a pravá strana sú pre teplú a studenú, nie?

54
00:02:51,310 --> 00:02:55,470
Ale môže mi niekto povedať, čo to vlastne robiť?

55
00:02:55,470 --> 00:02:58,060
Nejaké ruky?

56
00:02:58,060 --> 00:03:01,740
[Nepočuteľné Študent odpoveď] >> Jeden návrh je?

57
00:03:01,740 --> 00:03:05,860
[Nepočuteľné Študent odpoveď] >> Teplota?

58
00:03:05,860 --> 00:03:10,460
Takže jeden z nich kontroluje teplotu a ďalšie ovládacie? >> [Študent] tlak vody.

59
00:03:10,460 --> 00:03:12,350
Tlak vody. Dobré.

60
00:03:12,350 --> 00:03:15,100
Tento profesor vojde do toho, a v domnení, že sú kontroly teplé a studené,

61
00:03:15,100 --> 00:03:21,470
otočí ten správny, ktorý si myslí, že je pre horúci, celú cestu hore

62
00:03:21,470 --> 00:03:23,560
preto, že chce, aby sa teplú sprchu.

63
00:03:23,560 --> 00:03:28,100
No, to nie je naozaj odpovedať, tak on dostane toto nie je moc zábavné skúsenosti

64
00:03:28,100 --> 00:03:31,110
z toho, že v studenú sprchu, a všetci vieme, aký je to pocit.

65
00:03:31,110 --> 00:03:33,620
Toto je príklad konštrukčná chyba.

66
00:03:33,620 --> 00:03:37,040
Čo tým chcem povedať, že je jeho očakávania z kohútika

67
00:03:37,040 --> 00:03:39,420
nezodpovedá, čo vyšiel zo sprchy,

68
00:03:39,420 --> 00:03:41,780
ktorý je tak trochu nešťastné pre neho.

69
00:03:41,780 --> 00:03:44,990
Tak toto je príklad návrhu chyby, ktoré sa deje v reálnom živote.

70
00:03:44,990 --> 00:03:48,020
Ale uvidíme všetky druhy tie ostatné rovnako.

71
00:03:48,020 --> 00:03:50,390
Sme pravdepodobne fanúšikovia systému MBTA.

72
00:03:50,390 --> 00:03:55,560
To je podzemné systém skutočne v Londýne, ktorý hovorí, "Toto tlačidlo nie je v prevádzke."

73
00:03:55,560 --> 00:04:00,220
Prečo je to ešte tam? Prečo sme ešte jedno?

74
00:04:00,220 --> 00:04:02,810
Keď som bol malý chlapec, je tech pútavé jeden v dome,

75
00:04:02,810 --> 00:04:05,050
Ak je počítač zrúti, moja mama ku mne,

76
00:04:05,050 --> 00:04:07,060
mi ukázal túto obrazovku a požiadal ma, čo sa stalo.

77
00:04:07,060 --> 00:04:09,210
>> Ani neviem, čo to znamená.

78
00:04:11,890 --> 00:04:14,700
[Smiech] Čo?

79
00:04:16,950 --> 00:04:18,019
[Smiech]

80
00:04:18,720 --> 00:04:23,050
Niekedy máme pocit, ako vývojári softvéru sú len trolling nám.

81
00:04:23,050 --> 00:04:28,460
Ako užívatelia sme ako, "Čo sa deje? Niekto nám."

82
00:04:28,460 --> 00:04:32,140
To všetko príde na problém dizajne.

83
00:04:32,140 --> 00:04:34,650
Dizajn, ako môžeme vidieť, nie je čisto o estetike,

84
00:04:34,650 --> 00:04:37,230
to nie je o tom, ako veci vyzerajú.

85
00:04:37,230 --> 00:04:41,720
Vidíme tu, že tento malý pop-up tu vlastne vyzerá celkom pekne.

86
00:04:41,720 --> 00:04:45,290
Má tieň v pozadí, má cezhraničné rádiusov deje.

87
00:04:45,290 --> 00:04:47,550
Je to celkom dosť.

88
00:04:47,550 --> 00:04:51,480
Je to naozaj dobre navrhnutý, pretože to nie je príliš užívateľsky príjemný.

89
00:04:51,480 --> 00:04:54,920
To málo pop-up, ktorý príde naozaj nie je mi žiadne informácie

90
00:04:54,920 --> 00:04:58,450
o tom, čo sa deje, to mi nehovor, ako používateľ

91
00:04:58,450 --> 00:05:01,400
o tom, ako sa dostať z tejto chyby.

92
00:05:01,400 --> 00:05:05,190
Chceme myslieť na veci, že dizajn nie je.

93
00:05:05,190 --> 00:05:06,670
Po prvé, nie je to estetika.

94
00:05:06,670 --> 00:05:10,800
Je to tiež nie je plnkou vašu aplikáciu s hromadou zbytočných funkcií.

95
00:05:10,800 --> 00:05:14,890
Ak ste thajská reštaurácia, pravdepodobne nebudete chcieť byť zubár v rovnakom čase.

96
00:05:14,890 --> 00:05:17,720
A s otázkami Facebook, nie, že veľa ľudí používa ho

97
00:05:17,720 --> 00:05:21,130
a bolo to naozaj v jadre toho, čo stavali.

98
00:05:21,130 --> 00:05:24,200
A tak je to pekné myslieť ani tak na množstvo vecí,

99
00:05:24,200 --> 00:05:26,390
že ste uvedenie vašej žiadosti, ale kvalita

100
00:05:26,390 --> 00:05:28,910
a ako robíte, že užívateľský zážitok lepší

101
00:05:28,910 --> 00:05:32,540
vlastne zlepšenie na to, čo už máte.

102
00:05:32,540 --> 00:05:37,040
>> Stručne povedané, dizajn hovorí nám, čo by sme mali stavať.

103
00:05:37,040 --> 00:05:41,950
Napríklad, ak my budujeme niečo, čo nechal nás hľadať veci,

104
00:05:41,950 --> 00:05:45,970
ako je Google, napríklad by sa robiť veci spôsobom

105
00:05:45,970 --> 00:05:48,950
, Ktorá vyžaduje, aby používateľ vziať veľa kliknutí sa dostať na to, čo chcú,

106
00:05:48,950 --> 00:05:52,580
alebo by sme to mali robiť spôsobom, napríklad s Google Instant alebo automatického dokončovania

107
00:05:52,580 --> 00:05:54,970
že nám umožňuje dostať na naše výsledky rýchlejšie?

108
00:05:54,970 --> 00:05:58,740
Engineering zahŕňa, rovnako ako Tommy vám ukáže, vlastne stavali.

109
00:05:58,740 --> 00:06:01,890
Existuje mnoho typov designu.

110
00:06:01,890 --> 00:06:06,070
Napríklad, ak staviate niečo nasadiť niečo

111
00:06:06,070 --> 00:06:09,770
v krajine Tretieho sveta, kde nie je toľko elektriny, alebo že mnoho technológií,

112
00:06:09,770 --> 00:06:11,440
musíte navrhnúť to, čo staviate

113
00:06:11,440 --> 00:06:14,210
spôsobom, ktorý ľahko umožňuje prístup k ľuďom tam.

114
00:06:14,210 --> 00:06:18,290
Ale aké druhy z iných konštrukčných rozhodnutie môže byť

115
00:06:18,290 --> 00:06:21,850
alebo by mohli byť zapojené do niečoho ako je toto?

116
00:06:23,690 --> 00:06:25,660
Jo. Vidím ruku.

117
00:06:25,660 --> 00:06:37,200
[Nepočuteľné Študent odpoveď] >> Právo. Presne tak. Dostupnosť je jedna vec.

118
00:06:37,200 --> 00:06:40,870
Veľa ľudí si nemyslím, že o tom, "čo moje užívateľov?"

119
00:06:40,870 --> 00:06:43,160
ako extrémy oboch spektra.

120
00:06:43,160 --> 00:06:47,770
Mám užívateľov, ktorí by mohli mať postihnutie, že som nepremýšľal o

121
00:06:47,770 --> 00:06:50,590
a ja som premýšľal o navrhovaní pre bežného užívateľa.

122
00:06:50,590 --> 00:06:52,630
Internet je prístupný všetkým v dnešnej dobe,

123
00:06:52,630 --> 00:06:54,870
a ja by som sa navrhovaní pre tých ľudí rovnako.

124
00:06:54,870 --> 00:06:58,620
Aké druhy ostatných konštrukčných rozhodnutia môžete urobiť?

125
00:06:58,620 --> 00:07:00,690
Áno. >> [Študent] Tieto náklady.

126
00:07:00,690 --> 00:07:02,680
Náklady. Veľmi dobrá.

127
00:07:02,680 --> 00:07:08,060
Ďalšia vec, ktorú by sme mohli založiť naše konštrukčné rozhodnutia o nákladovo.

128
00:07:08,060 --> 00:07:13,130
Ak sme firma, chcete postaviť niečo, čo neberie moc náklady na výrobu

129
00:07:13,130 --> 00:07:17,720
ale môže predať za mimoriadne vysoké náklady, alebo nás môže dostať nejaký zisk.

130
00:07:17,720 --> 00:07:21,540
>> To všetko sú rôzne typy dizajnu, ale keď staviame na internete

131
00:07:21,540 --> 00:07:25,120
alebo keď budujeme niečo, čo pravdepodobne nestojí toľko vybudovať hneď,

132
00:07:25,120 --> 00:07:28,630
ako internetové aplikácie - nemusíte hádzať toľko kapitálu do neho

133
00:07:28,630 --> 00:07:30,900
, Aby niečo, čo skutočne funguje -

134
00:07:30,900 --> 00:07:33,490
to, čo sme viac starať o ich užívateľské skúsenosti.

135
00:07:33,490 --> 00:07:36,390
Hovoríme tomu užívateľský zameraný dizajn.

136
00:07:36,390 --> 00:07:41,550
V podstate to, čo užívateľ centred dizajn zahŕňa je uvedenie sami v topánkach vašich používateľov.

137
00:07:41,550 --> 00:07:44,870
Ak niekto zaregistruje na to, čo staviam,

138
00:07:44,870 --> 00:07:48,250
že som zrejme prišiel do môjho konkrétnu aplikáciu s cieľom na mysli,

139
00:07:48,250 --> 00:07:50,280
s úlohou chcú dokončiť.

140
00:07:50,280 --> 00:07:53,650
A vašou úlohou je nielen pomôcť im splnenie tejto úlohy

141
00:07:53,650 --> 00:07:57,930
ale pomôcť im splnenie tejto úlohy spôsobom, ktorý je efektívny, intuitívne,

142
00:07:57,930 --> 00:08:01,900
a, ako sa niektorí človek povedal: tam, prístupné.

143
00:08:01,900 --> 00:08:03,750
Čo účinnosť znamená?

144
00:08:03,750 --> 00:08:08,050
Účinnosť znamená, ako rýchlo sa moje užívateľské dokončiť úlohu, môj rozhranie.

145
00:08:08,050 --> 00:08:11,650
Má to trvať veľa kliknutí na ne sa dostať z jedného miesta na druhé?

146
00:08:11,650 --> 00:08:14,630
Je to únavné? Majú plniť veľa opakovaných úloh?

147
00:08:14,630 --> 00:08:17,140
Chceme, aby sa tento proces čo najefektívnejšie

148
00:08:17,140 --> 00:08:20,070
takže nemajú robiť tie druhy vecí.

149
00:08:20,070 --> 00:08:24,230
Pokiaľ ide o intuitívnosť, to znamená, že napríklad v prípade, že užívateľ zdvihne moje rozhranie,

150
00:08:24,230 --> 00:08:27,240
je to pre nich ľahké sa dostať z miesta na miesto?

151
00:08:27,240 --> 00:08:30,390
Je to pre nich ľahké zistiť, čo majú kliknúť v mojom rozhranie

152
00:08:30,390 --> 00:08:33,770
aby pre nich dosiahnutie cieľa alebo úlohu, ktorý chcú dosiahnuť?

153
00:08:33,770 --> 00:08:37,520
>> A konečne, ako jeden človek povedal: tam, dostupnosť je veľmi dôležité.

154
00:08:37,520 --> 00:08:39,640
[Samec reproduktor] To príde na prístupnosť pre veci, ako je vízia,

155
00:08:39,640 --> 00:08:42,740
páči, ako mám vlastne navrhnúť niečo pre niekoho, kto je slepý?

156
00:08:42,740 --> 00:08:46,460
Oh. Pre ľudí, ktorí nevidia vôbec, máme niečo ako čítanie z obrazovky.

157
00:08:46,460 --> 00:08:49,070
Čo by ste mali urobiť, je, mali by ste stavať svoje webové stránky takým spôsobom,

158
00:08:49,070 --> 00:08:52,020
, Že napríklad, konkrétne technológie, čo nazývame -

159
00:08:52,020 --> 00:08:53,590
Existuje veľa vecí, teraz.

160
00:08:53,590 --> 00:08:55,660
Myslím, že tam sú čítače obrazovky JAWS volal.

161
00:08:55,660 --> 00:08:58,410
Mnoho z týchto vecí sa spoliehajú na to, čo nazývame oblasť pravidlá

162
00:08:58,410 --> 00:09:02,010
aby čítal von k užívateľovi, čo je na stránke.

163
00:09:02,010 --> 00:09:05,480
Pre tých, ktorí nemôžu vidieť, je potrebné sa uistiť, že tieto obrazovky čitateľovi

164
00:09:05,480 --> 00:09:09,130
môže skutočne vyzdvihnúť obsah na stránke a môže skutočne ukázať svojich užívateľov,

165
00:09:09,130 --> 00:09:13,630
Ak nevidíte, aspoň si môžete stále pochopiť obsah na stránke.

166
00:09:13,630 --> 00:09:16,190
Jo. Dobre.

167
00:09:16,190 --> 00:09:23,410
Dosť rozprávanie o dobrom dizajne. Poďme hovoriť o zlej konštrukcie.

168
00:09:23,410 --> 00:09:25,220
To sú veci, ktoré by ste nemali robiť.

169
00:09:25,220 --> 00:09:27,890
Môže mi niekto povedať, o svojich skúsenostiach s Craigslist

170
00:09:27,890 --> 00:09:32,190
a to, čo si myslia, že nie je tak veľký o tomto návrhu?

171
00:09:33,690 --> 00:09:36,430
Áno. >> [Študent] Myslím, že je to príliš veľa slov v jednej oblasti.

172
00:09:36,430 --> 00:09:39,350
Príliš veľa slov, nie? Úplne ohromujúci.

173
00:09:39,350 --> 00:09:42,400
Prídete na tejto stránke a budete uvítání s celou partiou vecí až sem

174
00:09:42,400 --> 00:09:43,860
že možno ani jedno.

175
00:09:43,860 --> 00:09:47,010
Napríklad, žijete v jednom štáte, ktorý nezačína tohto listu.

176
00:09:47,010 --> 00:09:48,690
Povedzme, že žijete v Texase, alebo tak niečo.

177
00:09:48,690 --> 00:09:53,790
>> Musíte prechádzať celú cestu dole na stránku sa dostanete do miesta, ktoré na.

178
00:09:53,790 --> 00:10:00,320
Som z Bostonu, tak nech mi to hľadať v Massachusetts. Kde je Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, je to tu. Oh, to je Boston. Dobre.

180
00:10:03,270 --> 00:10:09,070
Poďme sa pozrieť na Boston. [Smiech]

181
00:10:09,070 --> 00:10:12,250
Docela ohromujúci, že jo?

182
00:10:12,250 --> 00:10:16,400
Trápne veci tamto. [Smiech]

183
00:10:17,320 --> 00:10:19,470
Povedzme, že som hľadal niečo žiť.

184
00:10:19,470 --> 00:10:24,130
Koľko ľudí vlastne používa Craigslist? Tony vás.

185
00:10:24,130 --> 00:10:30,960
Tam sú dosť zlé spôsoby, ako sa pozerať na to, ale poďme sa pozrieť na to.

186
00:10:35,130 --> 00:10:38,970
Aký je rozdiel medzi img a pic? Môže mi niekto povedať,?

187
00:10:41,350 --> 00:10:42,830
Tam vlastne nie je žiadny rozdiel.

188
00:10:42,830 --> 00:10:47,710
Znamenajú presne to isté, ale majú rôzne etikety pre nich z nejakého dôvodu.

189
00:10:48,980 --> 00:10:53,560
Keby som kliknite na Obsahuje obrázku, nič sa nedeje na stránke.

190
00:10:53,560 --> 00:10:57,490
Vlastne som sa na tlačidlo Hľadať znovu sa niečo stane.

191
00:10:57,490 --> 00:11:02,430
Čo by mohlo byť lepšie design rozhodnutia, ktoré by sa dalo robiť tam?

192
00:11:03,820 --> 00:11:08,030
Ak som kliknúť na tento filter, by som asi chcete filtrovať podľa konkrétnej akcie

193
00:11:08,030 --> 00:11:09,970
alebo že konkrétne kategórie.

194
00:11:09,970 --> 00:11:14,450
Takže namiesto toho, aby musel stlačte Hľadať znova, mohol som automaticky robiť filtrovanie

195
00:11:14,450 --> 00:11:17,060
druh štýlu Google, kde sa to urobiť okamžite.

196
00:11:17,060 --> 00:11:20,440
[Malan] Ale nie tvorí, ako sme ich videli doteraz musí byť fyzicky predložená

197
00:11:20,440 --> 00:11:23,170
tým, že udrie Zadajte aspoň alebo kliknutím na tlačidlo?

198
00:11:23,170 --> 00:11:26,830
Ako ste videl tak ďaleko, že naozaj máte na tlačidlo Odoslať robiť tie veci.

199
00:11:26,830 --> 00:11:30,090
>> Ale ako Tommy Vám ukáže, do sekundy, tam sú vlastne spôsoby, ako môžete

200
00:11:30,090 --> 00:11:33,010
tak, že keď kliknete na tú vec, že ​​môže automaticky odoslať

201
00:11:33,010 --> 00:11:38,840
to, čo nazývame AJAX požiadavku a získať dáta späť a filtrovať výsledky okamžite.

202
00:11:38,840 --> 00:11:41,340
Existujú tony vecí, ktoré sú zle s týmto rozhraním.

203
00:11:41,340 --> 00:11:43,530
[Malan] Môžete vyhľadávať Cambridge?

204
00:11:43,530 --> 00:11:47,030
Je tu niečo, čo trochu anomálne tu, kde vám záleží Cambridge

205
00:11:47,030 --> 00:11:54,790
a napriek tomu ste stále Westford, Spring Hill, West Newton a ako.

206
00:11:54,790 --> 00:11:57,930
Pravdepodobne nie je ideálne. Pravdepodobne >> nie je ideálne.

207
00:11:57,930 --> 00:12:03,900
Ako by som mohol byť schopný vykonať užívateľa zážitok lepšie na túto konkrétnu stránku?

208
00:12:03,900 --> 00:12:07,340
Áno. >> [Študent] Usmernenia.

209
00:12:07,340 --> 00:12:09,500
Dobre. Inštrukcie v akej zmysle?

210
00:12:09,500 --> 00:12:14,630
[Študent] Napríklad vec pre nových užívateľov, ktorí ani nevedia, čo Craigslist je

211
00:12:14,630 --> 00:12:17,320
alebo neviete, čo máte robiť.

212
00:12:17,320 --> 00:12:20,150
Právo. Takže vysvetľovať, čo Craigslist je na tejto stránke je dôležité.

213
00:12:20,150 --> 00:12:23,490
Môžeme vlastne povedať, užívateľov, čo táto stránka je v skutočnosti pre.

214
00:12:23,490 --> 00:12:27,090
Ak som len na návšteve to, vidím veľa miest. Ja ani neviem, čo to znamená.

215
00:12:27,090 --> 00:12:29,730
Ale oveľa dôležitejšie je, len pri pohľade na toto rozhranie,

216
00:12:29,730 --> 00:12:35,530
pamätajte si, že musel rolovať dole veľa vecí nájsť konkrétnu komunitu

217
00:12:35,530 --> 00:12:37,560
že som vlastne záležalo na tom.

218
00:12:37,560 --> 00:12:39,820
Čo je to rýchlejší spôsob, ako by som mohol urobiť, že? Áno.

219
00:12:39,820 --> 00:12:43,290
[Študent] Rozdeľte ich do oblastí na východ, západ. Dobre >>.

220
00:12:43,290 --> 00:12:47,460
Mohol by som ich rozdeliť do viacerých kategórií, ktoré by mi mohol pomôcť rýchlejšie určiť

221
00:12:47,460 --> 00:12:49,820
ako sa dostať do daného miesta.

222
00:12:49,820 --> 00:12:54,510
[Študent] Dajte rozbaľovací zoznam. Právo >>. Dobre.

223
00:12:54,510 --> 00:12:58,240
Mohol by som použiť drop-down menu, pretože máme pevnú sadu vecí

224
00:12:58,240 --> 00:13:00,100
a my sme mohli ukázať im v drop-down menu.

225
00:13:00,100 --> 00:13:02,240
Takto to nezaberá toľko miesta na obrazovke.

226
00:13:02,240 --> 00:13:05,630
Ale ešte lepšie ako to, čo môžeme robiť?

227
00:13:05,630 --> 00:13:09,220
Áno. >> [Nepočuteľné Študent reakcie] >> Môžete povedať, že znova? >> [Študent] Search box.

228
00:13:09,220 --> 00:13:11,260
Jo, vyhľadávacie okno. To je skvelé.

229
00:13:11,260 --> 00:13:16,430
Čo môžeme skutočne urobiť, je, keď sa pozrieme späť na sklíčka, vyhľadávacieho poľa.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Veľmi jednoduchý spôsob, ako vyhľadávať na základe výsledkov, ktoré poznáte, sú v sade.

231
00:13:21,520 --> 00:13:25,980
Keď začnem písať BO, len ukázať mi všetky výsledky, ktoré majú BO vnútri nich.

232
00:13:25,980 --> 00:13:29,030
Tak som si veľmi ľahko nájsť konkrétny jediná, ktorú chcem ísť do

233
00:13:29,030 --> 00:13:32,390
namiesto toho, aby museli listovať to naozaj veľkého zoznamu.

234
00:13:32,390 --> 00:13:37,450
>> Jedná sa o všetky druhy naozaj nízko visiace ovocie, že niekto, kto ich vykonáva Craigslist

235
00:13:37,450 --> 00:13:42,500
môže skutočne urobiť, aby zážitok na internetových stránkach oveľa lepšie pre ich konkrétne užívateľa.

236
00:13:42,500 --> 00:13:46,370
Dobre. Dosť hovorí o zlých stránkach.

237
00:13:46,370 --> 00:13:49,410
Poďme hovoriť o Facebooku.

238
00:13:50,880 --> 00:13:54,390
Keď Facebook vyšiel, a najmä Facebook fotky,

239
00:13:54,390 --> 00:13:57,870
tam bolo veľa ďalších služieb v dobe, ktorá by mohla robiť presne rovnaké veci.

240
00:13:57,870 --> 00:14:00,740
Mohli organizovať svoje fotografie do albumu.

241
00:14:00,740 --> 00:14:03,360
Čo môžete urobiť, je môžete usporiadať do sád rovnako.

242
00:14:03,360 --> 00:14:06,070
Dalo by sa usporiadať ich podľa dátumu. Dalo by sa robiť všetky tieto konkrétne veci.

243
00:14:06,070 --> 00:14:11,710
Ale neviete niekto, čo robil Facebook fotografií exploduje v čase, keď bol prepustený?

244
00:14:11,710 --> 00:14:15,080
Áno. >> [Štud] Tagy. Tagy >>. Presne tak.

245
00:14:15,080 --> 00:14:21,300
Máme Milo cez tú, ktorá je náš pes maskot s týmto šatkou CS50.

246
00:14:21,300 --> 00:14:24,810
Môžete vidieť, že máme túto funkciu značkovanie v stredu.

247
00:14:24,810 --> 00:14:28,240
A to, čo sa Facebook fotky tak zaujímavé z hľadiska použiteľnosti

248
00:14:28,240 --> 00:14:34,130
je to, že vlastne dovolil ľuďom cez tento zapojiť svojich priateľov v ich fotografií.

249
00:14:34,130 --> 00:14:37,680
Pre Facebook, pretože ich stránky sú najmä sociálne,

250
00:14:37,680 --> 00:14:40,750
je to o budovaní tento druh spoločenskej atmosféry.

251
00:14:40,750 --> 00:14:42,620
To zlepšilo zážitok fotografií omnoho viac

252
00:14:42,620 --> 00:14:46,390
pretože by sa skutočne začalo hovoriť, "To sú spojenia medzi ľuďmi,

253
00:14:46,390 --> 00:14:49,220
a to sú fotky o ľudí, ktoré skutočne záleží. "

254
00:14:49,220 --> 00:14:52,200
Súčasťou je tiež akoby narcizmus.

255
00:14:52,200 --> 00:14:54,980
Ľudia chceli byť označení na fotky a podobné veci.

256
00:14:54,980 --> 00:14:58,510
Aj keď to nie je nutne dobré ľudské zvláštnosť,

257
00:14:58,510 --> 00:15:01,910
zároveň je to na základe dobrej dizajne rozhodnutia

258
00:15:01,910 --> 00:15:04,860
preto, že ľudia skutočne záleží veci, ako je tento.

259
00:15:04,860 --> 00:15:07,190
Tak to je Facebook fotky.

260
00:15:07,190 --> 00:15:09,800
>> Ale poďme hovoriť Facebook všeobecnejšie.

261
00:15:09,800 --> 00:15:13,400
Som si istý, že veľa ľudí, ktorí tu majú názory na Facebook,

262
00:15:13,400 --> 00:15:16,430
obaja dobrý dizajn rozhodnutia a zlé prevedenie rozhodnutia.

263
00:15:16,430 --> 00:15:20,270
Takže poďme ventilovať alebo byť šťastný.

264
00:15:23,480 --> 00:15:26,450
Poď. Viem, že vás všetkých používať Facebook.

265
00:15:26,450 --> 00:15:30,970
Niekto musí mať niečo zlé povedať, alebo niečo dobré povedať o tom. Áno.

266
00:15:30,970 --> 00:15:35,060
[Študent] V noviniek je tu veľa vecí, ktoré som sa naozaj záleží.

267
00:15:35,060 --> 00:15:37,740
News Feed sa ukázať veľa vecí, ktoré ste možno nezaujíma.

268
00:15:37,740 --> 00:15:41,660
Máte priateľov na Facebooku, ktorí ste sa stretol na 2 alebo 3 roky

269
00:15:41,660 --> 00:15:43,860
a uvidíte ich správy výsledky objavovať vo vašom noviniek

270
00:15:43,860 --> 00:15:45,870
a naozaj nestarám o to.

271
00:15:45,870 --> 00:15:48,700
Facebook skutočne robil úsilie, aby to lepšie,

272
00:15:48,700 --> 00:15:53,150
a že som sa snažil tlačiť príslušné výsledky v hornej časti noviniek ako neskoré

273
00:15:53,150 --> 00:15:58,300
takže ste vlastne vidieť veci priateľmi, ktoré sú relevantné pre Vás alebo Vašich blízkych priateľov.

274
00:15:58,300 --> 00:16:01,110
Ešte niečo? Áno.

275
00:16:01,110 --> 00:16:06,400
[Nepočuteľný študentov odpoveď] >> Môžete povedať, že znova?

276
00:16:06,400 --> 00:16:10,140
[Študent] Tieto reklamy sú pomerne nenápadné. >> V akom zmysle?

277
00:16:10,140 --> 00:16:16,370
[Nepočuteľné Študent odpoveď] Nemajú svetlo na obrazovke, ako bannery.

278
00:16:16,370 --> 00:16:17,760
Dobre. To je dobre.

279
00:16:17,760 --> 00:16:25,030
Ak si pamätáte na internete od 90. rokov - >> [Malan] Bol som tam. >> Bol tam. [Smiech]

280
00:16:25,030 --> 00:16:29,210
Možno si ešte spomínate blikajúce Gify pozadí, iskrivé veci,

281
00:16:29,210 --> 00:16:31,570
GeoCities štýl druh vecí.

282
00:16:31,570 --> 00:16:34,080
To naozaj nie je príklad dobrého dizajnu

283
00:16:34,080 --> 00:16:36,690
pretože je to naozaj neodvádza pozornosť od obsahu.

284
00:16:36,690 --> 00:16:39,590
Umenie Yale stránky mával animované GIFy ako ich pozadie

285
00:16:39,590 --> 00:16:41,800
a vy ste nemohli prečítať niečo na stránke,

286
00:16:41,800 --> 00:16:44,870
ale myslím, že niekto skutočne hovoril s nimi, a teraz je to trochu iné.

287
00:16:44,870 --> 00:16:48,940
[Malan] Je to oveľa lepšie. >> Je to oveľa lepšie, teraz, ako môžete vidieť. >> [Malan] Ach jo.

288
00:16:48,940 --> 00:16:56,020
Jednoducho skvelé, len - Jo. Dobre.

289
00:16:56,020 --> 00:17:00,560
>> Časť z toho je tiež, aby vaše stránky možno veľmi minimalistický a veľmi zrozumiteľné

290
00:17:00,560 --> 00:17:05,690
takže veci na stránku prietoku spôsobom, ktorý je veľmi logické a nie sú v ceste každého iný.

291
00:17:05,690 --> 00:17:11,849
Aké druhy iných vecí sú dobré na Facebooku alebo zlý o Facebooku?

292
00:17:11,849 --> 00:17:15,730
Proste majú konštrukčné rozhovor tu.

293
00:17:19,470 --> 00:17:21,339
Oh. Kde? Jo.

294
00:17:21,339 --> 00:17:25,640
[Študent] Nový Timeline systém umožňuje prehľadávať osoby profilu o svojej minulosti.

295
00:17:25,640 --> 00:17:28,119
Ooh, časovú os.

296
00:17:28,119 --> 00:17:30,280
Časová os je skvelá vec, pretože umožňuje stonky svojim priateľom

297
00:17:30,280 --> 00:17:33,300
späť, keď boli na strednej škole.

298
00:17:35,160 --> 00:17:38,060
Časová os je dobré, pretože to umožňuje filtrovať pomocou obsahu veľa rýchlejšie,

299
00:17:38,060 --> 00:17:41,500
To vám umožní nájsť veci, ktoré by inak boli nasnímané vám naozaj dlho nájsť

300
00:17:41,500 --> 00:17:45,840
len pohyb hore a dole, hore, hore, hore, hore, hore, ako vrátiť sa späť v čase.

301
00:17:45,840 --> 00:17:48,910
Ale potom je tu aj trochu nevýhodu, aby, že pokiaľ ide o užívateľské skúsenosti.

302
00:17:48,910 --> 00:17:51,190
Čo by to mohlo byť?

303
00:17:51,190 --> 00:17:56,780
Big slovo, ktoré začína P-R. >> [Študent] Ochrana osobných údajov. >> Privacy, že jo?

304
00:17:56,780 --> 00:17:59,970
Ochrana osobných údajov je obrovský užívateľské skúsenosti problém.

305
00:17:59,970 --> 00:18:07,190
To je jedna z vecí, ktoré nenávidím najviac Facebooku teraz. [Smiech]

306
00:18:07,190 --> 00:18:09,000
[Malan] Ako mám teraz.

307
00:18:09,000 --> 00:18:11,380
David si neuvedomil, to sa skutočne stalo až do včerajška.

308
00:18:11,380 --> 00:18:14,560
Takže teraz už vie, že zakaždým, keď som chatovať mu, že viem, že bol ignoruje ma.

309
00:18:14,560 --> 00:18:16,880
[Malan] trápne časť bola som vlastne ho ignorovala,

310
00:18:16,880 --> 00:18:21,040
a ja som nevedel, že on vedel, že som ignoroval ho. [Smiech]

311
00:18:21,040 --> 00:18:24,030
Ochrana osobných údajov je obrovský problém.

312
00:18:24,030 --> 00:18:28,670
Môže tu niekto mi povedať, čo by mohlo byť zle Facebook súkromia

313
00:18:28,670 --> 00:18:32,270
okrem toho, že sa také veci?

314
00:18:32,270 --> 00:18:37,240
Čo je to obzvlášť ťažké urobiť s ohľadom na Facebooku súkromie?

315
00:18:37,240 --> 00:18:40,340
Taká je hlavná otázka.

316
00:18:41,680 --> 00:18:43,930
Áno. >> [Študent] Skryť svoje fotografie z niektorých ľudí.

317
00:18:43,930 --> 00:18:46,170
Právo. Presne, skryť vaše fotografie z niektorých ľudí.

318
00:18:46,170 --> 00:18:51,290
Majú tento malý, malé tlačidlo v pravom hornom rohu, ktorý vám umožní prepínať súkromie fotografiu.

319
00:18:51,290 --> 00:18:56,360
Ich možnosti ochrany osobných údajov sú veľmi rôznorodé a medzi rôznymi druhmi menu.

320
00:18:56,360 --> 00:18:59,510
>> Oni sa dostali oveľa lepšie o tom v poslednej dobe, ale to bolo v prípade

321
00:18:59,510 --> 00:19:04,870
že kedykoľvek by ste chceli, aby sa vaše priateľov z pozorovacích fotografií,

322
00:19:04,870 --> 00:19:08,280
budete musieť prejsť veľmi komplikované 5-stupňovým procesom bytia ako,

323
00:19:08,280 --> 00:19:11,150
dovoľte mi, aby som na tento odkaz, teraz mi dovoľte kliknite na tlačidlo znova, dovoľte mi, aby som znovu kliknite,

324
00:19:11,150 --> 00:19:13,420
dovoľte mi, aby som špecifikovať, ktoré ľudia nemôžu vidieť moje fotografie.

325
00:19:13,420 --> 00:19:17,250
To nie je zvlášť dobré na strane Facebooku je

326
00:19:17,250 --> 00:19:20,530
pretože toľko o skúsenostiach sa vlastne dáva im slobodu

327
00:19:20,530 --> 00:19:22,460
kontrolovať, čo ľudia môžu vidieť.

328
00:19:22,460 --> 00:19:25,550
Hovoríme tomu užívateľský ovládací prvok a slobodu.

329
00:19:25,550 --> 00:19:31,090
Ak si nie ste nechať vašu užívatelia robia, že spôsobom, ktorý je efektívny a intuitívne,

330
00:19:31,090 --> 00:19:34,570
potom sa vaše užívateľské skúsenosti nie je naozaj tak veľký vôbec.

331
00:19:34,570 --> 00:19:38,200
 Chceli ste chcel povedať niečo o Facebook?

332
00:19:38,700 --> 00:19:41,420
Ako môžem túto funkciu vypnúť?

333
00:19:41,420 --> 00:19:46,290
[Ong] nemožno túto funkciu vypnúť, a to je obrovský použiteľnosť chyba na strane Facebooku.

334
00:19:46,290 --> 00:19:49,410
Táto funkcia - som skutočne pozrel do toho včera -

335
00:19:49,410 --> 00:19:53,940
je to buď, že nemôžete urobiť, alebo to je pochovaný niekde veľmi, veľmi hlboko

336
00:19:53,940 --> 00:19:58,050
v záhyboch Facebook, pretože nemôžem prísť na to, ako túto funkciu zakázať vôbec.

337
00:19:58,050 --> 00:20:00,400
[Malan] Ale niekedy tieto rozhodnutia nie sú zrejmé

338
00:20:00,400 --> 00:20:03,890
pretože ste nám dali veľa užitočnú spätnú väzbu na rôznych CS50 aplikácií

339
00:20:03,890 --> 00:20:05,710
a webové stránky, ktoré kurz používa.

340
00:20:05,710 --> 00:20:10,260
Sme nevykonali všetky tieto požiadavky a návrhy.

341
00:20:10,260 --> 00:20:14,550
>> Časť, ktorá je pre získanie toľko žiadostí, že sa jedná o funkciu času,

342
00:20:14,550 --> 00:20:17,070
ale niekedy jednoducho urobiť vedomé rozhodnutie, ako,

343
00:20:17,070 --> 00:20:19,830
"Ďakujem vám za návrh, ale my nesúhlasíme."

344
00:20:19,830 --> 00:20:24,350
Tak ako sa vám vlastne rozhodnúť, čo by ste mali robiť, ak vaši používatelia, že by si mal niečo urobiť

345
00:20:24,350 --> 00:20:28,110
aj keď nie nutne?

346
00:20:28,110 --> 00:20:32,360
Je to jemná rovnováha medzi skutočne načúvať tomu, čo užívatelia hovoria

347
00:20:32,360 --> 00:20:35,840
a skutočne má nejaký riadok, kde hovoríte,

348
00:20:35,840 --> 00:20:37,750
"Nebudeme robiť to, čo títo užívatelia hovoria."

349
00:20:37,750 --> 00:20:42,520
A najmä, myslím, že tam bol citát Henryho Forda, že to zhŕňa celkom dobre.

350
00:20:42,520 --> 00:20:47,130
"Keď som sa spýtal ľudí, čo chcú, by povedali, že chcú rýchlejšie koňa."

351
00:20:47,130 --> 00:20:51,840
Môže mi niekto nejako šprýmař oddelene, čo to v skutočnosti znamená citát?

352
00:20:51,840 --> 00:20:56,060
Nie je to len, že používatelia vedia, čo chcú,

353
00:20:56,060 --> 00:20:59,180
ale je to viac, že ​​-

354
00:20:59,180 --> 00:21:02,720
[Študent] Oni nevedia, čo je možné.

355
00:21:02,720 --> 00:21:06,140
V časti nevedia, čo je možné.

356
00:21:07,880 --> 00:21:11,440
Tease, že okrem trochu viac. Čo tým myslíš, že?

357
00:21:11,440 --> 00:21:21,340
[Nepočuteľné Študent odpoveď]

358
00:21:21,340 --> 00:21:25,770
To je dobre. Čo si myslím, že sa snažíme povedať je, že ľudia vedia, čo chcú.

359
00:21:25,770 --> 00:21:28,050
Chcú rýchlejší kone.

360
00:21:28,050 --> 00:21:29,840
To, čo naozaj chcú, je schopnosť pohybovať sa rýchlejšie,

361
00:21:29,840 --> 00:21:32,310
ale naozaj neviem, médium, ktorým k dosiahnutiu, že.

362
00:21:32,310 --> 00:21:36,330
Keď príde na užívateľa a užívatelia vám niečo povedať

363
00:21:36,330 --> 00:21:39,700
a povedia vám, "My chceme tieto funkcie a tieto funkcie a tieto funkcie,"

364
00:21:39,700 --> 00:21:42,650
nechcete nutne myslieť, "Nechaj ma ísť napred

365
00:21:42,650 --> 00:21:44,720
"A realizovať to, čo by sa výslovne hovorí,"

366
00:21:44,720 --> 00:21:48,610
ale to, čo chcete myslieť, je, "Aké myšlienky môžem dostať z toho?"

367
00:21:48,610 --> 00:21:50,450
Čo vlastne chcú?

368
00:21:50,450 --> 00:21:55,560
>> A odtiaľ, čo môžete urobiť, je navrhnúť niečo, čo spĺňa tieto požiadavky

369
00:21:55,560 --> 00:22:00,340
ale nie nevyhnutne tak, že používateľ očakáva, že bude spokojný.

370
00:22:00,340 --> 00:22:03,830
Takže niečo ako finálových projektov, vo veľmi reálne,

371
00:22:03,830 --> 00:22:07,900
čo je užitočné, heuristická, pokiaľ ide o výrobu niečo lepšie,

372
00:22:07,900 --> 00:22:10,630
najmä ak návrhár má túto aroganciu o ňom

373
00:22:10,630 --> 00:22:14,360
kedy ste nejako viete, čo je najlepšie, môžete mať vstup z vašich užívateľov,

374
00:22:14,360 --> 00:22:16,580
ale ako sa vlastne ísť o získanie, že spätná väzba?

375
00:22:16,580 --> 00:22:21,610
V záverečných prác, veľmi konkrétne, čo vytvára optimálne výsledky tu?

376
00:22:21,610 --> 00:22:25,030
Čo produkuje optimálne výsledky - a ja pôjdem cez to v druhom -

377
00:22:25,030 --> 00:22:29,190
je tento proces rozvoja a potom testovanie a potom iterácie.

378
00:22:29,190 --> 00:22:32,020
Čo tým chcem povedať testovanie je zvyčajne, keď si navrhnúť niečo

379
00:22:32,020 --> 00:22:36,970
si myslíte, že je to celkom dobrý, ako, "ja som tak skvelý designer. Každý sa bude páčiť."

380
00:22:36,970 --> 00:22:41,600
A potom ste to tam, a ľudia nemajú naozaj rád nejakého dôvodu.

381
00:22:41,600 --> 00:22:46,820
Čo musíte urobiť, je budete musieť vziať časti vecí, ktoré ľudia robia, ako

382
00:22:46,820 --> 00:22:49,180
a prerobiť veci, ktoré ľudia nemajú radi.

383
00:22:49,180 --> 00:22:53,080
To znie ako veľmi zrejmým procesu, ale tento proces neustále iterácie

384
00:22:53,080 --> 00:22:55,980
na vrchole toho, čo ste už postavený, je proces, ktorý vám pomôže

385
00:22:55,980 --> 00:22:59,730
nielen zdokonaliť svoje vlastné návrhárske schopnosti, ale tiež vám pomôže zdokonaliť dizajn

386
00:22:59,730 --> 00:23:03,790
tak, že ľudia skutočne ocenia váš produkt ešte viac ako predtým.

387
00:23:03,790 --> 00:23:07,390
>> Pôjdem cez viac konkrétne príklady toho, čo by sa Vám mohol vlastne robiť.

388
00:23:07,390 --> 00:23:11,390
Ako akési posledný príklad výrobku, poďme sa pozrieť na kajaku.

389
00:23:11,390 --> 00:23:14,970
KAYAK, keď to vyšlo bolo veľmi, veľmi populárny.

390
00:23:14,970 --> 00:23:18,760
Môže niekto hádať, prečo?

391
00:23:18,760 --> 00:23:20,950
Aké sú druhy vecí, ktoré rád o tom, ak ste použili

392
00:23:20,950 --> 00:23:23,990
alebo aké sú druhy vecí sa vám nepáči?

393
00:23:23,990 --> 00:23:31,590
Áno. >> [Nepočuteľné Študent odpoveď] >> Dobre.

394
00:23:31,590 --> 00:23:34,730
To je súčasťou toho je nechať užívateľ mať dotaz, ktorý je oveľa obsiahlejší

395
00:23:34,730 --> 00:23:38,150
ako veľmi reštriktívny jeden ako, "Musíte na vyzdvihnutie dátum začatia

396
00:23:38,150 --> 00:23:39,810
"A vy budete musieť vybrať dátum ukončenia."

397
00:23:39,810 --> 00:23:44,910
V skutočnosti, to vám umožní byť flexibilný na to, a to vám dáva všetky letov v tomto rozsahu.

398
00:23:44,910 --> 00:23:46,730
Ešte niečo?

399
00:23:46,730 --> 00:23:50,530
[Študent] Ide napríklad o poplatky v cene.

400
00:23:50,530 --> 00:23:53,330
Robia zahŕňajú poplatky v cene.

401
00:23:53,330 --> 00:23:56,720
Dane a veci skutočne ísť rovno do tejto ceny v ľavej hornej časti

402
00:23:56,720 --> 00:24:00,710
takže nie ste napálil do myslenia, že ste skutočne platiť za 240 dolárov letu

403
00:24:00,710 --> 00:24:03,280
keď je to naozaj 330 dolárov.

404
00:24:03,280 --> 00:24:06,200
Ešte niečo? Áno.

405
00:24:06,200 --> 00:24:10,140
[Nepočuteľné Študent odpoveď]

406
00:24:10,140 --> 00:24:14,610
Nie som si istý, či sa skutočne nechať urobiť.

407
00:24:14,610 --> 00:24:18,310
Aj Might Be Wrong.

408
00:24:18,310 --> 00:24:23,360
To by mohlo byť zaujímavé, ak chcete, aby väčšiu váhu na konkrétnych filtroch

409
00:24:23,360 --> 00:24:27,000
tak, že tlačí výsledky súvisiace s týmto filtrom na vrchol.

410
00:24:27,000 --> 00:24:31,920
Ale môže mi niekto povedať, čo je tak osobitného na tomto ľavej strane?

411
00:24:31,920 --> 00:24:39,540
Ako ste sa tradične pozrieť hore na poschodie na internetové služby pred tým?

412
00:24:41,600 --> 00:24:44,650
>> Áno. >> [Nepočuteľné Študent reakcie] >> Môžete povedať, že -

413
00:24:44,650 --> 00:24:47,530
[Študent] Každá letecká spoločnosť. Jo >>. Každá letecká spoločnosť má svoje vlastné internetové stránky.

414
00:24:47,530 --> 00:24:50,110
To konsoliduje veci. A?

415
00:24:50,110 --> 00:24:52,190
[Študent] Vieš presne, čo keď budete opúšťať.

416
00:24:52,190 --> 00:24:54,460
Viete presne, v koľko hodín odchádzaš,

417
00:24:54,460 --> 00:24:59,380
ale súvisí s filtrami najmä.

418
00:25:00,710 --> 00:25:03,540
Dovoľte mi, aby som vytiahnuť kajaku.

419
00:25:11,490 --> 00:25:14,020
Ach, Bože, pop-ups. Bad užívateľské skúsenosti.

420
00:25:14,020 --> 00:25:17,230
Čo sa stane, keď som sa presunúť tohto jazdca?

421
00:25:17,230 --> 00:25:21,010
[Štud] Automatické aktualizácie. >> [Ong] Automatické aktualizácie.

422
00:25:21,010 --> 00:25:23,440
To je niečo, čo je veľmi dôležité.

423
00:25:23,440 --> 00:25:25,380
Pred tým, keď ste chceli pozrieť hore na poschodie,

424
00:25:25,380 --> 00:25:28,410
ste museli dať do miesta vstupu, váš výstup umiestnenie, stlačte tlačidlo Hľadať,

425
00:25:28,410 --> 00:25:31,190
to by proces, ktorý a zobraziť výsledky.

426
00:25:31,190 --> 00:25:34,120
Ak by ste chceli zmeniť svoju otázku, mali by ste sa vymáčknout dvakrát,

427
00:25:34,120 --> 00:25:39,770
vstúpiť do nového dopytu od nuly, a potom to znova a znova.

428
00:25:39,770 --> 00:25:43,910
Pekná vec, o niečom, ako je to, že používa veľmi [nezrozumiteľné] vec v stredu.

429
00:25:43,910 --> 00:25:46,230
Kedykoľvek budete niečo také, to strieľa mimo žiadosť

430
00:25:46,230 --> 00:25:48,420
a vráti vám všetky výsledky okamžite.

431
00:25:48,420 --> 00:25:51,680
Tento druh okamžitú spätnú väzbu, je niečo, čo robil KAYAK veľmi populárne

432
00:25:51,680 --> 00:25:55,910
pretože je to naozaj jednoduché pre mňa len zmeniť svoj dotaz

433
00:25:55,910 --> 00:25:58,890
a prísť na to, veci, ktoré sú okolo určitého rozsahu

434
00:25:58,890 --> 00:26:01,950
bez toho, aby museli ísť tam a späť, tam a späť, tam a späť.

435
00:26:01,950 --> 00:26:05,200
Tak to sú všetky možné veci, ktoré chcete myslieť, keď ste navrhovaní svoje webové stránky.

436
00:26:05,200 --> 00:26:08,930
Ako môžem robiť to veľmi efektívne pre moju užívatelia prejsť, čo pracujú na

437
00:26:08,930 --> 00:26:13,010
a aby sa ich konečným cieľom je tak rýchlo, ako je to možné?

438
00:26:13,010 --> 00:26:16,430
[Malan] A do bodu Jozefa staršie o užívateľoch nie sú nevyhnutne vedieť, čo chcú,

439
00:26:16,430 --> 00:26:18,640
na základe toho, čo ste už počuli o HTML

440
00:26:18,640 --> 00:26:22,780
a máte políčka, prepínače, zvoľte menu, vstupné pole a podobne,

441
00:26:22,780 --> 00:26:26,140
ako by ste implementovať pojem výberom počiatočný čas letu?

442
00:26:26,140 --> 00:26:30,030
>> Ktoré z týchto rôznych UI mechanizmy by ste používať?

443
00:26:30,030 --> 00:26:34,100
Ak ste práve poznať množstvo kódu HTML, ktorý bol vyučovaný pred

444
00:26:34,100 --> 00:26:39,070
a viete, že vstupy sú prepínacie tlačidlá, checkboxom, drop-zostrelí, a vstupné pole,

445
00:26:39,070 --> 00:26:43,320
čo by si prirodzenou voľbou boli pre uchopenie dáta?

446
00:26:43,320 --> 00:26:48,670
[Študent] vstup. Vstupné >>. Alebo možno aj drop-dole so všetkými dátami, nie?

447
00:26:48,670 --> 00:26:53,170
Takže s zložitejších UI mechanizmov, ako je tento na ľavej strane, ktoré môžete implementovať,

448
00:26:53,170 --> 00:26:55,500
môžete tento proces oveľa intuitívnejšie s jazdcom

449
00:26:55,500 --> 00:27:01,020
pretože čas je spojitá, a ľudia obvykle nemyslí na to, pokiaľ ide o diskrétnych blokov.

450
00:27:01,020 --> 00:27:04,950
Dobrá. Posledná vec.

451
00:27:04,950 --> 00:27:07,370
Desať použiteľnosť heuristiky.

452
00:27:07,370 --> 00:27:10,820
Všetky tie veci, s ktorými sme hovorili o tom pravdepodobne spadajú do jednej z týchto kategórií.

453
00:27:10,820 --> 00:27:14,420
Ak pôjdete na tento odkaz, ktorý sa stránky budú umiestnené na internet,

454
00:27:14,420 --> 00:27:18,900
budete skutočne môcť, ako si navrhnúť svoje stránky, aby tieto heuristiky na pamäti

455
00:27:18,900 --> 00:27:21,330
a tieto pravidlá palca.

456
00:27:21,330 --> 00:27:26,610
Pre vaše projekty, čo radím vám, aby ste s cieľom navrhnúť app lepšie

457
00:27:26,610 --> 00:27:28,850
je to papier prototypovania ako prvý.

458
00:27:28,850 --> 00:27:32,150
Ak uvažujete o svojej žiadosti, veľmi rýchlo načrtnúť to, čo chcete, aby to vyzeralo, ako

459
00:27:32,150 --> 00:27:36,230
a zabezpečiť, aby všetky krabice sú usporiadané tak, že je veľmi intuitívne pre užívateľa na použitie

460
00:27:36,230 --> 00:27:39,820
a dokonca ukazujú tieto papierové prototypy svojim priateľom a začať cieľových skupín.

461
00:27:39,820 --> 00:27:44,230
Len si 2 alebo 3 ľudí dohromady a požiadať ich, aby práve kliknite na týchto papierových prototypov,

462
00:27:44,230 --> 00:27:47,650
a ukázať im nové obrazovky, aby zistili, či skutočne pochopiť, čo sa deje.

463
00:27:47,650 --> 00:27:50,680
>> Čo chcete urobiť, je dať im úlohu, motivovať, že úloha,

464
00:27:50,680 --> 00:27:53,270
a daj im na aplikáciu a nechať ich používať.

465
00:27:53,270 --> 00:27:56,530
Nedávajte im pokyny za tým.

466
00:27:56,530 --> 00:28:00,920
Ak chcete skutočne nechať interakciu s vašej aplikácie tak, že vám umožní vidieť

467
00:28:00,920 --> 00:28:03,870
ako by použiť, ak ste neboli stál vedľa nich.

468
00:28:03,870 --> 00:28:05,250
A to je veľmi dôležité.

469
00:28:05,250 --> 00:28:08,780
To vám dá veľa nových poznatkov, aby sa ľudia dostať okolo konkrétnych vecí

470
00:28:08,780 --> 00:28:10,560
tak, že som nezamýšľal je?

471
00:28:10,560 --> 00:28:14,680
Sú použitím určitých rozhranie mechanizmov na obrazovke

472
00:28:14,680 --> 00:28:17,490
takým spôsobom, ktorý je druh háčiky?

473
00:28:17,490 --> 00:28:22,020
Nemal som v úmysle pre nich to tak.

474
00:28:22,020 --> 00:28:23,940
A akonáhle ste hotoví s tým, čo chceš robiť?

475
00:28:23,940 --> 00:28:26,010
Vaša konštrukcia skaly, nie?

476
00:28:26,010 --> 00:28:29,600
Čo chcete urobiť, je, že chcete vyvíjať a potom to, že proces znovu.

477
00:28:29,600 --> 00:28:32,110
Tak ukáž to priateľom, akonáhle ste ho vyvinul, otestovať,

478
00:28:32,110 --> 00:28:36,630
vyvíjať, testovať, vyvíjať, testovať, určiť iteráciou, ďalej a ďalej a ďalej.

479
00:28:36,630 --> 00:28:39,720
Prevedenie je veľmi opakovaný proces v tomto zmysle.

480
00:28:39,720 --> 00:28:43,280
Máte skutočne niečo postaviť a potom si uvedomí, čo o ňom

481
00:28:43,280 --> 00:28:46,520
že ste si neuvedomil, pred a vrátiť a zlepšiť z toho.

482
00:28:46,520 --> 00:28:50,890
Teraz, rovnako ako pre rozvojové časti, to je to, čo Tommy sa chystá ukázať vám po prestávke

483
00:28:50,890 --> 00:28:53,220
a ako by ste mali byť schopní realizovať niečo ako autocomplete

484
00:28:53,220 --> 00:28:56,610
spôsobom, ktorý je veľmi jednoduchá.

485
00:28:57,440 --> 00:28:59,550
[Malan] Ako Tommy nastaví tu, otázka potom.

486
00:28:59,550 --> 00:29:03,780
Mnoho z prvých webových stránok - a keď povedal Josef 1990 v štýle webovej stránky,

487
00:29:03,780 --> 00:29:07,640
bolo to implementácia, kde, ak ste chceli zvoliť čas začiatku a čas konca,

488
00:29:07,640 --> 00:29:10,380
úprimne povedané, späť v deň, a dokonca aj na niektorých webových stránkach dnes,

489
00:29:10,380 --> 00:29:13,220
spôsob, ako to urobiť, je vybrať si hodinu z drop-dole,

490
00:29:13,220 --> 00:29:15,910
si vyberiete minút od drop-dole, možno si vyberiete AM, PM,

491
00:29:15,910 --> 00:29:17,440
a potom urobíte, že ďalšie 3 krát.

492
00:29:17,440 --> 00:29:19,920
A tak s 6 kliknutí a možno aj posúvanie

493
00:29:19,920 --> 00:29:24,000
Vaše užívateľské môže skutočne poskytnúť nejakú dátum a / alebo časový rozsah v tomto zmysle.

494
00:29:24,000 --> 00:29:27,920
>> Takže rozhodne optimálne a predsa tak ďaleko sme videli žiadne vyjadrovacie možnosti

495
00:29:27,920 --> 00:29:30,330
v niektorom z jazykov Pozreli sme sa na to urobiť niečo viac sexy

496
00:29:30,330 --> 00:29:32,620
páči tento jazdec začiatku a čas konca.

497
00:29:32,620 --> 00:29:36,290
Ale ak si myslíte, že späť do týždňa 0, keď sme hovorili o Scratch,

498
00:29:36,290 --> 00:29:39,080
tam taky nebolo widgety, ktoré jednoducho určité veci.

499
00:29:39,080 --> 00:29:42,700
Naozaj jednoducho musel tieto základné princípy, ako je vedenie a podmienky a ako.

500
00:29:42,700 --> 00:29:46,910
Takže trochu som premýšľal veľmi abstraktne teraz, nezávisle na údaje o HTML,

501
00:29:46,910 --> 00:29:51,260
Čo sa naozaj deje s niečím, ako je tento čas začiatku a čas konca jazdcom?

502
00:29:51,260 --> 00:29:54,960
Keď som sa pohnúť myšou a ja kliknite na tej malej mrkvou symbol na ľavej

503
00:29:54,960 --> 00:29:59,220
a začnete preťahovať, programovo, čo je to chcete byť schopní realizovať

504
00:29:59,220 --> 00:30:01,000
aby sa tak stalo?

505
00:30:01,000 --> 00:30:04,920
Aké otázky, čo Boolean výrazy chceš mať možnosť požiadať?

506
00:30:04,920 --> 00:30:06,930
Čo sa vlastne deje? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Študent] Kde je pozícia kurzora? Dobrý >>. Kde je pozícia kurzora?

508
00:30:10,080 --> 00:30:11,970
To bolo niečo, čo sme potrebovali vyjadriť späť Scratch,

509
00:30:11,970 --> 00:30:14,690
či to bolo založené na mieste, alebo dokonca farbu alebo podobne.

510
00:30:14,690 --> 00:30:18,410
Môžete spomenúť niekedy tak krátko v pondelok bolo všetky tieto veci nazývajú udalosti

511
00:30:18,410 --> 00:30:22,370
vo svete webu, a tak je tu veci ako onclick a onkeypress

512
00:30:22,370 --> 00:30:25,960
a OnKeyUp a onmouseover a onmouseout.

513
00:30:25,960 --> 00:30:29,130
Takže si uvedomiť, že aj tieto veci sme užívali ako samozrejmosť na webe

514
00:30:29,130 --> 00:30:32,190
s weby ako Facebook a Gmail, aj keď nemajú tušenie,

515
00:30:32,190 --> 00:30:34,890
ako by ste možno realizovať, pretože nie je nič, aj ako to v prednáške

516
00:30:34,890 --> 00:30:38,570
alebo problém Nastaviť 7, si uvedomiť, že s týmito presnými rovnakými základy,

517
00:30:38,570 --> 00:30:41,090
s HTTP a parametre a GET a POST,

518
00:30:41,090 --> 00:30:44,010
so základnými HTML vstupov, ktoré Pozreli sme sa na doteraz

519
00:30:44,010 --> 00:30:47,690
a za chvíľu s programovými mechanizmy, ktoré Tommy je asi predstaviť

520
00:30:47,690 --> 00:30:51,300
môžete začať vyjadriť sám seba, rovnako ako ste v týždni 0

521
00:30:51,300 --> 00:30:53,800
by veľmi intuitívne pretiahnutím.

522
00:30:53,800 --> 00:30:58,950
>> Takže s tým povedal, Tommy MacWilliam a niektoré nové kúsky skladačky pre nás pre web.

523
00:30:58,950 --> 00:31:03,450
Dobrá. Moje meno je Tommy a ja budem hovoriť o JavaScriptu.

524
00:31:03,450 --> 00:31:07,150
Len disclaimer: Ja som toho názoru, že JavaScript je najlepší programovací jazyk

525
00:31:07,150 --> 00:31:09,010
v celom celom svete.

526
00:31:09,010 --> 00:31:11,940
Existuje veľa ľudí, ktorí so mnou nesúhlasia, ale je to jednoducho úžasné.

527
00:31:11,940 --> 00:31:16,330
Akonáhle sa vrátite do C, ak máte napísať C pre iné triedy alebo iných jazykov,

528
00:31:16,330 --> 00:31:19,780
je to len naozaj frustrujúce vo všetkých low-level detaily, ktoré majú na zabŕdnuť a

529
00:31:19,780 --> 00:31:23,050
Takže ak ste niekedy smutno o tom, ako nepríjemné C je písať,

530
00:31:23,050 --> 00:31:25,130
sa vrátiť, napísať nejaký JavaScript. Je to nirvána.

531
00:31:25,130 --> 00:31:27,980
Budete sa cítiť oveľa lepšie o svoje zlý deň.

532
00:31:27,980 --> 00:31:31,900
Mnoho mágie JavaScript pochádza z jej schopnosti manipulovať veci

533
00:31:31,900 --> 00:31:33,730
ktoré sú už na stránke.

534
00:31:33,730 --> 00:31:38,520
Keď sme napísali naše PHP skripty, boli vykonané na serveri,

535
00:31:38,520 --> 00:31:42,270
a nakoniec, že ​​PHP skript pravdepodobne vypíše HTML.

536
00:31:42,270 --> 00:31:45,860
To HTML bol poslaný klientovi, a potom, že to bolo.

537
00:31:45,860 --> 00:31:50,180
Ak PHP chcel pridať tlačidlo na stránku, napríklad, to môže naozaj urobiť.

538
00:31:50,180 --> 00:31:54,350
Mala by mať k tomu, aby celý nový HTML súbor a odoslať, ktorá do prehliadača.

539
00:31:54,350 --> 00:31:57,840
S JavaScript vieme, že môžeme aktualizovať veci, zatiaľ čo oni sú už na stránke,

540
00:31:57,840 --> 00:32:00,840
a kvôli tomu sme schopní poskytnúť oveľa viac okamžitú spätnú väzbu,

541
00:32:00,840 --> 00:32:06,150
ktorá bude naozaj zlepšiť užívateľský komfort na našich webových stránkach.

542
00:32:06,150 --> 00:32:09,330
Len rýchly rekapitulácia selektorov JavaScript.

543
00:32:09,330 --> 00:32:11,590
Vieme, že keď budeme stiahnuť HTML stránky,

544
00:32:11,590 --> 00:32:13,890
že sa to byť zastúpený v DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM pamätaj je to práve tento veľký strom, kde sú prvky vzťahujúce sa v tomto veľkom hierarchii.

546
00:32:19,340 --> 00:32:21,810
Keď sme pracovali s databázami v PSet 7,

547
00:32:21,810 --> 00:32:26,280
jedna z prvých vecí, ktoré sme potrebovali vedieť, ako to urobiť je vyhľadávať v databáze.

548
00:32:26,280 --> 00:32:29,060
Máme túto veľkú užívateľom tabuľky, a niekedy sme len chcem povedať,

549
00:32:29,060 --> 00:32:33,260
"Chcem len niektoré z týchto užívateľov, ktorí zodpovedajú nejakú podmienku."

550
00:32:33,260 --> 00:32:36,020
Podobne, keď máme DOM potrebujeme nejaký spôsob, ako to dopytovania.

551
00:32:36,020 --> 00:32:39,490
Potrebujeme nejaký spôsob, ako hovoriť, "ja chcem všetky tlačidlá, ktoré vyzerá podobne ako

552
00:32:39,490 --> 00:32:41,860
"Alebo všetkých snímok na stránke."

553
00:32:41,860 --> 00:32:44,330
A tieto selektory nám umožňujú urobiť.

554
00:32:44,330 --> 00:32:45,690
Takže len rýchla rekapitulácia.

555
00:32:45,690 --> 00:32:50,770
To prvé, kto tu je, to # predloží, čo je to, že bude na výber? Pamätá si niekto?

556
00:32:50,770 --> 00:32:54,880
[Nepočuteľné Študent odpoveď] >> Jo, presne tak.

557
00:32:54,880 --> 00:32:59,510
To bude pre vybranie prvku na stránke, ktorá má ID odoslať.

558
00:32:59,510 --> 00:33:03,470
A tak, aby hash tag hovorí, že tento výber bude fungovať s ID.

559
00:33:03,470 --> 00:33:07,630
Ako o druhej, to. Stred, čo bude, že vybrať?

560
00:33:11,360 --> 00:33:15,180
Jo. >> [Študent] Class. Presne >>. Toto sa teraz vyberte podľa triedy.

561
00:33:15,180 --> 00:33:18,840
Rozdiel medzi ID a triedy tu je všeobecne ID musí byť jedinečná

562
00:33:18,840 --> 00:33:20,820
v čo space hľadáte cez.

563
00:33:20,820 --> 00:33:23,080
Takže ak ste hľadali cez celú webovú stránku,

564
00:33:23,080 --> 00:33:27,740
mali by ste mať iba 1 prvok s touto určitou ID, takže v tomto prípade predloží.

565
00:33:27,740 --> 00:33:31,330
S tried, na druhej strane, môžeme mať viac ako 1 prvok na rovnakej strane

566
00:33:31,330 --> 00:33:33,130
sa rovnakej triedy.

567
00:33:33,130 --> 00:33:36,580
To by mohlo byť užitočné pre ostatných chcem vybrať všetko, čo sa sústredil na stránke

568
00:33:36,580 --> 00:33:38,450
skôr než len 1 vec.

569
00:33:38,450 --> 00:33:40,310
>> A konečne, táto posledná je tu trochu zložitejšie,

570
00:33:40,310 --> 00:33:43,890
ale čo je to bude vybrať z DOM?

571
00:33:46,650 --> 00:33:48,810
[Nepočuteľné Študent odpoveď] >> Čo je to?

572
00:33:48,810 --> 00:33:53,250
[Študent] Všetko, čo tag. >> Máme 2 diely tu.

573
00:33:53,250 --> 00:33:58,070
Druhá časť sa povedať chcem vybrať tieto značky so značkou vstupu,

574
00:33:58,070 --> 00:34:00,730
tak ľubovoľný prvok, ktorý je vstupnou tag.

575
00:34:00,730 --> 00:34:03,080
Ale ja nechcem, aby stačí vybrať všetky vstupy

576
00:34:03,080 --> 00:34:05,170
pretože niečo ako tlačidlo submit by mohol byť vstup

577
00:34:05,170 --> 00:34:08,409
a niečo ako textové pole môže byť vstup.

578
00:34:08,409 --> 00:34:11,909
Takže s týmito hranatými zátvorkami hovorím chcem len vybrať tie prvky

579
00:34:11,909 --> 00:34:14,110
ktoré sú typu text.

580
00:34:14,110 --> 00:34:17,400
Niekde v mojom HTML tag mám atribút nazvaný Typ,

581
00:34:17,400 --> 00:34:19,750
a hodnota tohto atribútu musí byť text.

582
00:34:19,750 --> 00:34:21,340
Tak ako o tejto prvej časti tu?

583
00:34:21,340 --> 00:34:25,489
Prvé slovo tohto voliča je forma potom mám priestor a potom tento vstup časť.

584
00:34:25,489 --> 00:34:29,620
Čo to urobiť, uvedenie formulár pred ním?

585
00:34:33,409 --> 00:34:35,860
To sa deje v podstate obmedziť našu otázku.

586
00:34:35,860 --> 00:34:38,510
To by mohol byť prípad, že máme niektoré vstupy na stránke

587
00:34:38,510 --> 00:34:41,080
že nie sú potomkami formulára.

588
00:34:41,080 --> 00:34:46,150
Čo to bude robiť, je to, že som len chcem vstupné tagy, ktoré majú niekde nad nimi

589
00:34:46,150 --> 00:34:49,030
niektorých rodičov prvok formulára.

590
00:34:49,030 --> 00:34:52,100
A tak týmto spôsobom môžeme tieto ďalšie hierarchické otázky

591
00:34:52,100 --> 00:34:55,000
takže nemajú len vybrať všetko zodpovedajúce danej voliča.

592
00:34:55,000 --> 00:35:00,760
Môžeme trochu obmedziť rozsah tohto dotazu na niečo iné.

593
00:35:00,760 --> 00:35:04,000
Takže teraz, keď vieme, ako vybrať prvky na stránke,

594
00:35:04,000 --> 00:35:06,780
Poďme hovoriť trochu o AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX je stále veľmi módne skratka, ktorá znamená pre Asynchronous JavaScript and XML.

596
00:35:12,270 --> 00:35:15,640
To len tak sa stane, že XML je to len nejaký spôsob, ako reprezentovať dáta.

597
00:35:15,640 --> 00:35:20,920
>> Tento druh stratené popularity v poslednej dobe, takže X v AJAX nie je používaný po celú dobu.

598
00:35:20,920 --> 00:35:26,220
V podstate to, čo AJAX nám umožňuje urobiť, je HTTP požiadavky

599
00:35:26,220 --> 00:35:28,620
z kontextu JavaScriptu.

600
00:35:28,620 --> 00:35:32,310
Keď sme v našom webovom prehliadači a my navigáciu okolo strán a my kliknite na odkaz,

601
00:35:32,310 --> 00:35:37,790
čo náš prehliadač urobí, je, aby požiadavka HTTP, čo sme ako odkaz kliknite na tlačidlo.

602
00:35:37,790 --> 00:35:41,670
Ale to nie je vždy ideálne, pretože ak je to ten prípad, potom ako David hovoril,

603
00:35:41,670 --> 00:35:45,220
musíme vždy, aby používatelia kliknúť na tlačidlo Odoslať alebo kliknite na odkaz

604
00:35:45,220 --> 00:35:50,380
tak, aby sa niečo stalo, čo sa deje zapojiť požiadavky HTTP.

605
00:35:50,380 --> 00:35:54,160
Takže s AJAX môžeme tieto požiadavky menom JavaScript.

606
00:35:54,160 --> 00:35:57,020
To znamená, že ak používateľ pracuje so stránkou alebo sa niečo stane,

607
00:35:57,020 --> 00:36:01,780
môžeme skutočne urobiť programový požiadavku na inú súboru PHP na našich webových stránkach

608
00:36:01,780 --> 00:36:06,280
alebo čokoľvek iné a načítať dáta, ktorá tento súbor vypľuje.

609
00:36:06,280 --> 00:36:09,860
Poďme sa pozrieť na príklad AJAX.

610
00:36:09,860 --> 00:36:16,140
To je naša CS50 Financie stránku, s ktorou snáď niektorí z nás pozná.

611
00:36:16,140 --> 00:36:21,790
Ak sa pozrieme na HTML stránky, tu vidíme, že som pridal pár vecí,

612
00:36:21,790 --> 00:36:23,820
z ktorých jeden som dal tento formulár identifikátor.

613
00:36:23,820 --> 00:36:26,480
Povedal som id = "form-citácie".

614
00:36:26,480 --> 00:36:31,910
Urobil som to len preto, že to bude robiť to trochu jednoduchšie vybrať z DOM

615
00:36:31,910 --> 00:36:35,090
pretože som si len urobiť veľmi jednoduchý dotaz.

616
00:36:35,090 --> 00:36:38,960
To, čo chcem urobiť je chcem opraviť nejaký problém s CS50 financií.

617
00:36:38,960 --> 00:36:41,550
Takže ak by sme ísť do finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
Zakaždým, keď chcete získať cenovú ponuku, musím kliknite na toto tlačidlo Vyžiadať,

619
00:36:45,700 --> 00:36:48,960
a že Získať cenovú ponuku tlačidla potom vezme ma na inú celú stránku.

620
00:36:48,960 --> 00:36:52,400
A keď chcem ďalšie citát, musím trafiť na tlačidlo Späť a potom som ho zadajte do,

621
00:36:52,400 --> 00:36:54,480
Mám ponuku, a ja som narazila na tlačidlo Späť.

622
00:36:54,480 --> 00:36:56,840
To naozaj nie je najlepšie užívateľskú skúsenosť.

623
00:36:56,840 --> 00:37:01,570
Kto by v skutočnosti využívajú stránky, ak je to tak pomalé, aby sa ceny akcií?

624
00:37:01,570 --> 00:37:05,630
Takže to, čo chcete urobiť s AJAX je odstrániť, že krok ísť na samostatnú stránku

625
00:37:05,630 --> 00:37:08,410
aby na zobrazenie výsledkov.

626
00:37:08,410 --> 00:37:11,240
>> Čo sme naozaj len pýtam, je to naozaj len malá cena,

627
00:37:11,240 --> 00:37:14,240
a to je len naozaj malé množstvo dát.

628
00:37:14,240 --> 00:37:17,400
Takže nie je potrebné pre mňa ísť inou celú HTML stránku,

629
00:37:17,400 --> 00:37:20,670
stiahnuť celú novú dávku HTML, možno stiahnuť niektoré ďalšie obrázky,

630
00:37:20,670 --> 00:37:24,410
niektoré iné CSS súbory len pre mňa odpovedať na túto veľmi jednoduchú otázku

631
00:37:24,410 --> 00:37:27,810
o tom, ako moc to robí legálne náklady.

632
00:37:27,810 --> 00:37:31,000
S AJAX by sme mohli urobiť túto oveľa jednoduchšie.

633
00:37:31,000 --> 00:37:36,400
Vidíme tu, že som prepojenie v súbore JavaScriptu s názvom quote.js.

634
00:37:36,400 --> 00:37:40,140
Poďme skutočne otvoriť tento súbor. Nie je tam.

635
00:37:42,610 --> 00:37:45,860
Všetky moje súbory JavaScriptu sa bude umiestnený v HTML

636
00:37:45,860 --> 00:37:47,630
tak, že webový prehliadač môže pristupovať.

637
00:37:47,630 --> 00:37:50,330
Potom máme samostatný adresár tu pre JavaScript,

638
00:37:50,330 --> 00:37:54,340
a teraz je tu quote.js.

639
00:37:54,340 --> 00:38:00,930
V hornej časti tohto súboru to tu hovorí, že chcem počkať na celú stránku má byť vložený

640
00:38:00,930 --> 00:38:04,830
predtým, než som sa snaží urobiť čokoľvek. Prečo je to nutné?

641
00:38:04,830 --> 00:38:08,650
Ukazuje sa, že ďalšia vec, ktorú budem robiť, je tu začať hľadať pre prvok

642
00:38:08,650 --> 00:38:10,810
ktorá zodpovedá niektoré voliča.

643
00:38:10,810 --> 00:38:15,600
Ak je táto JavaScript je niekedy vykonaný pred tento prvok je vložený na stránke,

644
00:38:15,600 --> 00:38:17,820
potom sa všetko snažím urobiť, je nebude fungovať

645
00:38:17,820 --> 00:38:20,580
pretože budem snažiť vybrať niečo, čo tam nie je ešte.

646
00:38:20,580 --> 00:38:23,780
Tak toto line up hornej hovorí, že chcem, aby si počkať, až všetko je načítaný

647
00:38:23,780 --> 00:38:28,030
takže sme zaručené, že všetky prvky Hľadám sú skutočne na stránke.

648
00:38:29,730 --> 00:38:34,310
Tento znak dolára tu znamená, že som pomocou knižnice s názvom jQuery.

649
00:38:34,310 --> 00:38:38,570
This jQuery knižnica nám umožňuje použiť tieto selektory, že sme sa pozrel na.

650
00:38:38,570 --> 00:38:44,010
Tým, že hovoríte $ potom odovzdá v ako argument toto # form-cenovú ponuku,

651
00:38:44,010 --> 00:38:47,910
Ja som teraz výberom tejto formulár, ktorý sme práve sa pozrieť na.

652
00:38:47,910 --> 00:38:52,290
Teraz mám zastúpenie tej forme v pamäti nejako.

653
00:38:52,290 --> 00:38:56,760
>> Na tomto objekte sa, toto zastúpenie formy,

654
00:38:56,760 --> 00:38:58,890
Ja som teraz pomocou funkcie vyzval.

655
00:38:58,890 --> 00:39:02,710
Čo táto funkcia robí, je, že to bude pripojiť obslužnú rutinu udalosti.

656
00:39:02,710 --> 00:39:06,310
Udalosť, ktorá budeme načúvať, je udalosť submit.

657
00:39:06,310 --> 00:39:08,890
Takže, keď používateľ klikne na tlačidlo Odoslať, ktoré alebo stlačí kláves ENTER,

658
00:39:08,890 --> 00:39:11,730
táto udalosť je vyhodia.

659
00:39:11,730 --> 00:39:16,390
Po pripojení do toho, teraz môžem prepísať predvolené správanie formulára.

660
00:39:16,390 --> 00:39:19,770
Bez tohto JavaScript, by odoslaní formulára na čokoľvek PHP súboru

661
00:39:19,770 --> 00:39:22,110
sme použili v tomto atribúte action.

662
00:39:22,110 --> 00:39:25,440
Ale namiesto toho, som teraz povedal, počkaj, počkaj, počkaj, ja nechcem, aby si skutočne urobiť.

663
00:39:25,440 --> 00:39:31,140
Chcem, aby to stalo predtým, než idete a odošlite do určitej PHP súbor.

664
00:39:31,140 --> 00:39:32,870
Teraz, čo chcem robiť?

665
00:39:32,870 --> 00:39:39,270
Na tomto mieste chcem použiť AJAX nejako nahrať, čo cena akcií je.

666
00:39:39,270 --> 00:39:44,170
Prvá vec, ktorú musím vedieť, je to, čo legálne užívateľ vzhliadol.

667
00:39:44,170 --> 00:39:46,760
Ak chcete, že budem používať iný volič.

668
00:39:46,760 --> 00:39:49,020
Jedná sa o tretí volič sme sa na pred.

669
00:39:49,020 --> 00:39:54,460
To hovorí, že chcem začať tento formulár prvok s ID pre formu-citátu.

670
00:39:54,460 --> 00:39:58,440
Potom niekde vnútri tohto formulára, musí byť vstupný prvok

671
00:39:58,440 --> 00:40:01,270
ktorá má názov symbolu.

672
00:40:01,270 --> 00:40:05,460
Ak sa pozrieme späť na našu HTML, videli sme, že sme mali vstup [názov = symbol].

673
00:40:05,460 --> 00:40:12,380
To znamená, že to bude k výberu, že textové pole, ktoré používateľ je písanie do.

674
00:40:12,380 --> 00:40:13,870
To je pekné. Máme textové pole.

675
00:40:13,870 --> 00:40:17,360
Teraz už len potrebujeme vedieť, čo je vo vnútri nej.

676
00:40:17,360 --> 00:40:20,290
K tomu, aby sme mohli túto metódu volať tu, tento val.,

677
00:40:20,290 --> 00:40:23,240
a to hovorí, že viem, čo textové pole máte.

678
00:40:23,240 --> 00:40:28,160
Chcem, aby si mi povedal, čo to je užívateľ zadať do tohto textového poľa.

679
00:40:28,160 --> 00:40:34,440
Teraz máme reťazec s názvom symbol, ktorý sa rovná bez ohľadu užívateľ zadali dovnútra

680
00:40:34,440 --> 00:40:39,820
To je pekné. Môžeme použiť tento reťazec, aby sa naša žiadosť.

681
00:40:39,820 --> 00:40:42,450
To je nová funkcia tu, toto $,

682
00:40:42,450 --> 00:40:44,900
okrem sme už bude výber prvkov,

683
00:40:44,900 --> 00:40:48,910
budeme sa volanie inej funkcie, ktorá je nám poskytli, by jQuery.

684
00:40:48,910 --> 00:40:54,810
Táto funkcia AJAX je to, čo sa vlastne deje, aby sa táto požiadavka HTTP.

685
00:40:54,810 --> 00:40:57,000
Takže musíme povedať, že to pár vecí.

686
00:40:57,000 --> 00:41:01,410
Prvá vec, ktorú musíme povedať túto funkciu je miesto, kde chcem požiadavka ísť.

687
00:41:01,410 --> 00:41:08,910
Niekde v mojom projekte som tento súbor vnútri HTML adresári nazvanom quote.php.

688
00:41:08,910 --> 00:41:15,150
Môžem prístup k tomuto súboru, videli sme, rovnako ako to, keď pôjdem na localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Chcem JavaScript, aby žiadosť na tejto stránke.

690
00:41:20,450 --> 00:41:22,920
Aký typ požiadavke teraz?

691
00:41:22,920 --> 00:41:27,210
Videli sme, že predtým, ako má formulár, že method = "post" atribút,

692
00:41:27,210 --> 00:41:29,270
a to znamená, že to bude robiť požiadavku POST,

693
00:41:29,270 --> 00:41:32,630
takže to nebude dať nič v adrese URL, skôr ako GET,

694
00:41:32,630 --> 00:41:36,860
ktoré by len byť aktivovaná, ak sme len prístup na stránku s webovom prehliadači, napríklad.

695
00:41:36,860 --> 00:41:41,260
Teraz sme hovoril, že chcete, aby sa požiadavka HTTP POST

696
00:41:41,260 --> 00:41:44,840
na stránke sa nachádza na quote.php.

697
00:41:44,840 --> 00:41:51,490
Keď sme sa predložiť formulár, nezabudnite by sme mohli pristupovať vstupných prvkov vnútri tohto formulára

698
00:41:51,490 --> 00:41:54,430
s týmto $ _POST premenné.

699
00:41:54,430 --> 00:41:58,710
Zatiaľ v príbehu sme sa skutočne odoslaný spolu akýchkoľvek dát, ale.

700
00:41:58,710 --> 00:42:00,640
Práve sme povedal, že robíme AJAX požiadavku

701
00:42:00,640 --> 00:42:03,200
a tu je druh žiadosti robíme.

702
00:42:03,200 --> 00:42:07,090
Teraz musíme skutočne odosielať dáta na stránku.

703
00:42:07,090 --> 00:42:10,930
K tomu, že môžeme použiť túto vlastnosť nazvanú dáta.

704
00:42:10,930 --> 00:42:14,950
Hodnota tejto vlastnosti je vlastne asociatívne pole.

705
00:42:14,950 --> 00:42:19,390
Dôvodom pre to je, že nám umožňuje odoslať viac než len 1 kus dát.

706
00:42:19,390 --> 00:42:24,750
To je dôvod, prečo máme tieto zložené zátvorky tu vnorená vnútri týchto ďalších zložených zátvoriek.

707
00:42:24,750 --> 00:42:29,680
Kľúče v týchto asociatívnych poliach sa bude rovnaká vec

708
00:42:29,680 --> 00:42:32,630
ako sú meno pripisuje v našich formulárových prvkov.

709
00:42:32,630 --> 00:42:35,740
To znamená, že ak pošlem pozdĺž kľúče symbolu,

710
00:42:35,740 --> 00:42:41,870
to znamená, že moja PHP stránka môže prístup k týmto dátam pomocou $ _POST [symbol]

711
00:42:41,870 --> 00:42:44,640
rovnako ako sme to urobili predtým, keď sme boli odoslaní formulára.

712
00:42:44,640 --> 00:42:47,090
A teraz skutočné údaje chceme poslať

713
00:42:47,090 --> 00:42:50,790
bude hodnota vnútri tohto asociatívneho poľa.

714
00:42:50,790 --> 00:42:54,070
>> My uložené tento text do premennej s názvom symbol,

715
00:42:54,070 --> 00:42:57,380
a tak posielame spolu teraz kľúč symbolu

716
00:42:57,380 --> 00:43:01,380
a hodnota akejkoľvek Užívateľ napísal dovnútra

717
00:43:01,380 --> 00:43:06,270
Teraz sme túto žiadosť HTTP, naše PHP súbor vykonaný,

718
00:43:06,270 --> 00:43:11,480
a to bude odosielať dáta staré klientovi, že práve z tejto požiadavky.

719
00:43:11,480 --> 00:43:15,220
Teraz musíme reagovať na čokoľvek server povedal nám.

720
00:43:15,220 --> 00:43:20,180
K tomu, že máme túto poslednú vlastnosť tu nazýva úspech.

721
00:43:20,180 --> 00:43:24,240
Hodnota tohto úspechu kľúča sa vlastne bude funkcia,

722
00:43:24,240 --> 00:43:26,910
a toto je jeden z naozaj skvelých vecí, ktoré môžete urobiť pomocou JavaScriptu.

723
00:43:26,910 --> 00:43:31,720
Nielen, že môžete mať ints alebo pole ako hodnotu vnútri asociatívneho poľa,

724
00:43:31,720 --> 00:43:34,170
môžeme tiež funkciu.

725
00:43:34,170 --> 00:43:36,380
Takže tým, že hovorí úspech, to je môj kľúč.

726
00:43:36,380 --> 00:43:38,830
Dvojbodka hovorí, že sem príde hodnotu,

727
00:43:38,830 --> 00:43:41,810
a teraz hodnota je v skutočnosti funkcie.

728
00:43:41,810 --> 00:43:44,460
Takže nepotrebujeme k tejto funkcii meno samo o sebe.

729
00:43:44,460 --> 00:43:48,820
Môžeme len povedať to bude nejaká funkcia. Bude to trvať 1 argumentu.

730
00:43:48,820 --> 00:43:51,190
Argument pre túto funkciu bude

731
00:43:51,190 --> 00:43:54,460
bez ohľadu na server poslal nás späť od podania žiadosti.

732
00:43:54,460 --> 00:43:57,750
Rovnako ako keď náš prehliadač podá žiadosť, server odošle niečo späť

733
00:43:57,750 --> 00:43:59,060
a prehliadač zobrazí ju,

734
00:43:59,060 --> 00:44:03,030
v súvislosti s AJAX sme práve vytvorili požiadavku, server poslal niečo späť,

735
00:44:03,030 --> 00:44:07,110
a teraz sme, že reprezentovaný ako reťazec.

736
00:44:07,110 --> 00:44:11,280
S týmto reťazcom Rád by som sa zobrazí, že na stránke.

737
00:44:11,280 --> 00:44:14,040
Ak chcete, že budem mať jednu poslednú voliča.

738
00:44:14,040 --> 00:44:17,570
Chcem vybrať prvok s ID ceny.

739
00:44:17,570 --> 00:44:20,710
To je len prázdny div, že som si vytvoril na stránke,

740
00:44:20,710 --> 00:44:26,640
a chcem nastaviť obsah tohto div ako niečo, čo server poslal nás späť.

741
00:44:26,640 --> 00:44:30,280
Ja som vlastne upravený quote.php trochu.

742
00:44:30,280 --> 00:44:33,460
>> Skôr než volanie render a spresnenie niektorých stránku,

743
00:44:33,460 --> 00:44:38,100
quote.php teraz sa jednoducho bude vytlačiť hodnotu zásob ako reťazec.

744
00:44:38,100 --> 00:44:41,880
Takže ak ste boli skutočne navštíviť stránku, mali by ste jednoducho vidieť, že malé reťazec

745
00:44:41,880 --> 00:44:45,030
z ohľadu na cenu akcií je.

746
00:44:45,030 --> 00:44:50,170
Jedna posledná vec, ktorú musíme urobiť, je tu len uistite, že táto funkcia vracia false.

747
00:44:50,170 --> 00:44:53,560
Čo to hovorí, je, že keď som vo vnútri obslužné rutiny udalosti

748
00:44:53,560 --> 00:44:57,300
a že popisovač udalosť vracia false miesto vracia hodnotu true,

749
00:44:57,300 --> 00:45:01,510
to znamená, že nechcem, pôvodná udalosť na oheň.

750
00:45:01,510 --> 00:45:05,270
V tomto prípade, ak sa nemala žiadne JavaScript a my predložený formulár,

751
00:45:05,270 --> 00:45:08,280
náš webový prehliadač sa povedať, "ja pošlem, že dáta spolu,"

752
00:45:08,280 --> 00:45:10,130
a oni pošlú na inú stránku.

753
00:45:10,130 --> 00:45:14,360
Pretože sme pomocou AJAX teraz, že to nie je potrebné poslať užívateľa na inú stránku.

754
00:45:14,360 --> 00:45:17,920
Sme len tak zobrazenie výsledkov dynamicky na rovnakej strane.

755
00:45:17,920 --> 00:45:21,460
My naozaj nechceme, aby nikam, a ja chcem zostať na rovnakej stránke.

756
00:45:21,460 --> 00:45:27,060
Takže tým, že vráti false, aby sme zaistili, že formulár nie je to pre nás.

757
00:45:27,060 --> 00:45:31,170
Poďme sa pozrieť na to, čo to vlastne vyzerá.

758
00:45:31,170 --> 00:45:34,180
Naša quote stránka vyzerá rovnako.

759
00:45:34,180 --> 00:45:37,240
Dovoľte mi, aby som vytiahnuť inšpektor sem, takže môžeme vidieť, čo sa deje.

760
00:45:37,240 --> 00:45:40,270
Či je to trochu menej obrovský.

761
00:45:40,270 --> 00:45:44,590
Pamätajte, že ak budeme otvárať kartu sieť, to je miesto, kde môžeme vidieť všetky požiadavky HTTP

762
00:45:44,590 --> 00:45:47,570
ktoré sa dejú na stránke.

763
00:45:47,570 --> 00:45:52,890
>> Pre symbol dovoľte mi, aby som zadajte AAPL a kliknite na položku Získať cenu.

764
00:45:52,890 --> 00:45:56,720
Teraz sme videli, že podiel Apple stojí určitý počet dolárov

765
00:45:56,720 --> 00:46:00,410
práve objavila na stránke, ale URL nezmenila vôbec.

766
00:46:00,410 --> 00:46:04,570
V skutočnosti, je tu HTTP požiadavku, že sme práve urobil.

767
00:46:04,570 --> 00:46:09,980
Urobili sme požiadavku POST na quote.php. To dáva zmysel.

768
00:46:09,980 --> 00:46:12,800
To je to, čo server poslal nás späť.

769
00:46:12,800 --> 00:46:16,320
Je to už tento gigantický HTML dokument s obrázkami a podobné veci, ktoré,

770
00:46:16,320 --> 00:46:20,920
je to len riadok textu, a potom sme len zobrazí riadok textu.

771
00:46:20,920 --> 00:46:26,290
Ak sa vrátime do hlavičky, a uvidíme, čo sa skutočne poslal vnútri tejto požiadavky HTTP,

772
00:46:26,290 --> 00:46:33,950
môžeme vidieť tu dole, že sme poslali pozdĺž kľúč symbol a hodnotou AAPL,

773
00:46:33,950 --> 00:46:36,430
čo je to, čo užívateľ napísal dovnútra

774
00:46:36,430 --> 00:46:39,230
To je pekné, ale je to stále trochu nepríjemné.

775
00:46:39,230 --> 00:46:42,490
Stále mám kliknúť na toto tlačidlo sa dostať na cenu akcií.

776
00:46:42,490 --> 00:46:45,880
Sme zaneprázdnení ľudia a nemáme čas na tlačidlo tlačidla.

777
00:46:45,880 --> 00:46:49,910
Google si to uvedomila pred chvíľou, keď vykonávali Dynamické vyhľadávanie.

778
00:46:49,910 --> 00:46:53,590
Čo Google Instant robí, je, ako si píšete, že práve začína zobrazovanie výsledkov pre vás

779
00:46:53,590 --> 00:46:56,520
takže nemusíte mať strach o ešte kliknutím na tlačidlo Hľadať.

780
00:46:56,520 --> 00:46:58,730
Vlastne, zábava príbeh vzťahujúce sa k tomu.

781
00:46:58,730 --> 00:47:01,100
Akonáhle Google Instant vyšiel, boli ľudia ako, "Whoa, to je super úžasné."

782
00:47:01,100 --> 00:47:02,540
"To je tak cool."

783
00:47:02,540 --> 00:47:05,950
A študent sa na Stanforde, ktorý bol 19 v tej dobe

784
00:47:05,950 --> 00:47:09,000
z tejto stránky s názvom YouTube instant.

785
00:47:09,000 --> 00:47:13,170
Všetky Instant YouTube sa je efektívne vyhľadávať YouTube okamžite.

786
00:47:13,170 --> 00:47:17,020
Takže skôr než ísť na YouTube.com a stlačte Hľadať,

787
00:47:17,020 --> 00:47:21,650
keď začnem písať do YouTube Instant niečo ako CS50,

788
00:47:21,650 --> 00:47:25,320
sme mohli vidieť, že to pokúša na pomalé pripojenie k internetu

789
00:47:25,320 --> 00:47:28,500
naplnenie týchto výsledkov žije.

790
00:47:28,500 --> 00:47:35,590
K tomu, že môžeme skutočne urobiť veľmi jednoduchý úpravu nášho quote.js súboru.

791
00:47:35,590 --> 00:47:40,900
Práve teraz sme pripevnenie túto udalosť, ak je predložený formulár.

792
00:47:40,900 --> 00:47:43,760
My naozaj nechceme, aby používateľ odoslať tento formulár už,

793
00:47:43,760 --> 00:47:48,570
takže sa poďme miesto požiaru sa táto udalosť zakaždým, keď užívateľ stlačí kláves.

794
00:47:48,570 --> 00:47:53,200
Ak chcete, aby poďme najprv zmeniť udalosť z predložiť KeyUp.

795
00:47:53,200 --> 00:47:55,740
To znamená, že skôr než čakať na formulár odoslať,

796
00:47:55,740 --> 00:47:58,490
zakaždým, keď je stlačené tlačidlo, niečo sa stane.

797
00:47:58,490 --> 00:48:02,030
To už zmysel priložiť tento KeyUp udalosti celého formulára.

798
00:48:02,030 --> 00:48:05,080
Sme naozaj len o tej vyhľadávacieho poľa.

799
00:48:05,080 --> 00:48:09,320
>> Ak chcete vybrať, že teraz, môžeme zmeniť to byť, skôr než forma-citácií,

800
00:48:09,320 --> 00:48:14,220
form-quote a budeme mať vstup (typ = text), alebo by sme mohli povedať (name = symbol) -

801
00:48:14,220 --> 00:48:16,420
čo chceme.

802
00:48:16,420 --> 00:48:18,650
Teraz je tu ešte jedna posledná vec, čo musíme urobiť.

803
00:48:18,650 --> 00:48:21,190
Nezabudnite sa sem, keď sme povedali return false

804
00:48:21,190 --> 00:48:24,370
sme si povedali, že nechceme, aby predvolenú udalosť na oheň.

805
00:48:24,370 --> 00:48:26,390
Ale to len tak sa stane, že keď vypneme, že teraz,

806
00:48:26,390 --> 00:48:29,660
čo sme zadajte nebude zobrazovať v prehliadači už

807
00:48:29,660 --> 00:48:33,000
pretože by to bolo predvolené správanie písaní do textového poľa.

808
00:48:33,000 --> 00:48:38,660
My už chcete prepísať, takže sa poďme zničiť to return false.

809
00:48:38,660 --> 00:48:44,800
Ak šetríme, že a obnovte stránku, teraz, keď som začal písať AAPL

810
00:48:44,800 --> 00:48:50,160
uvidíte, že cena akcií na dne tu je dokončenie automaticky.

811
00:48:50,160 --> 00:48:53,150
Takže tu je CS50 Financie instant.

812
00:48:53,150 --> 00:48:55,860
Vlastne zábava príbeh o YouTube Instant

813
00:48:55,860 --> 00:48:59,420
je, že študent tak nejako to písal ako 1-nočný projektu,

814
00:48:59,420 --> 00:49:03,800
a druhý deň mu bola ponúknutá práca v YouTube generálneho riaditeľa.

815
00:49:03,800 --> 00:49:10,610
Takže tak jednoduché, ako to, že ste CS50 študenti, môžu sa vaše konečné projekty vám prácu na YouTube.

816
00:49:10,610 --> 00:49:14,720
Niečo ako, že je naozaj skvelý nápad pre konečného projektu, nie?

817
00:49:14,720 --> 00:49:18,170
Sme mali nejaké existujúce funkcie, ktoré sme chceli integrovať s

818
00:49:18,170 --> 00:49:20,330
Sme zlepšiť užívateľský komfort trochu,

819
00:49:20,330 --> 00:49:24,340
a zrazu hľadá niečo na YouTube Instant môže byť oveľa jednoduchšie

820
00:49:24,340 --> 00:49:27,290
ako ju vyhľadať na pravidelnom YouTube.

821
00:49:27,290 --> 00:49:30,790
Tak to je AJAX v kocke.

822
00:49:30,790 --> 00:49:34,860
>> V príkladoch, že Jozef bol zobrazený, videli sme veľa autocompletes,

823
00:49:34,860 --> 00:49:39,250
a tie autocompletes sú naozaj užitočné, pretože nemáme pamätať -

824
00:49:39,250 --> 00:49:41,770
Napríklad, ak si nepamätáte cenu akcií pre Apple

825
00:49:41,770 --> 00:49:45,110
a my sme jednoducho viem, že je to aa niečo, skôr než len ako mi hovorí,

826
00:49:45,110 --> 00:49:48,740
"Podiel tejto veci stoja toľko peňazí,"

827
00:49:48,740 --> 00:49:52,540
Ja by som trochu rád vedel, čo akcie začať s aa.

828
00:49:52,540 --> 00:49:58,340
Môžeme to urobiť naozaj pekne s Bootstrap knižnici, ktorá je už súčasťou

829
00:49:58,340 --> 00:50:01,380
vnútri CS50 financií.

830
00:50:01,380 --> 00:50:09,390
Ak ste prišli sem do tagu JavaScript a prejdite dole na Typeahead,

831
00:50:09,390 --> 00:50:13,730
je to len pekná plugin že niekto už písal pre nás,

832
00:50:13,730 --> 00:50:16,980
a môžeme ľahko používať jeho funkcie, ako je tento.

833
00:50:16,980 --> 00:50:21,410
Som napísal v a tu je zoznam niektorých štátoch, ktoré začínajú s A.

834
00:50:21,410 --> 00:50:25,360
Povedzme, že myslím, že to je naozaj cool, a to je čas pre mňa, aby ich zaradila na mojej strane.

835
00:50:25,360 --> 00:50:28,300
Ukazuje sa, že je to naozaj, ale naozaj jednoduché.

836
00:50:28,300 --> 00:50:32,810
Poďme preskočiť tu quote3.js.

837
00:50:34,890 --> 00:50:37,380
Môj súbor vyzerá trochu inak.

838
00:50:37,380 --> 00:50:39,700
Tu dole všetky moje veci AJAX je rovnaký.

839
00:50:39,700 --> 00:50:43,170
Chcem načítať stavové údaje, bez toho aby museli ísť na inú stránku.

840
00:50:43,170 --> 00:50:46,220
Ale teraz chcem použiť tento plugin.

841
00:50:46,220 --> 00:50:51,020
Bootstrap dokumentácie je skvelé príklady toho, ako presne mám urobiť, že.

842
00:50:51,020 --> 00:50:54,350
Chcem povedať, "Tu je vstup, ktorý chcem automatického dokončovania,"

843
00:50:54,350 --> 00:50:56,640
a budem volať túto funkciu s názvom typeahead,

844
00:50:56,640 --> 00:50:59,730
a že sa to zvládnuť všetky Typeahead veci pre nás.

845
00:50:59,730 --> 00:51:02,090
To bude inicializovať zoznamu, bude to robiť všetky naše filtrovanie.

846
00:51:02,090 --> 00:51:06,680
Jediná vec, je potrebné vedieť, je, aké údaje sme autocompleting na.

847
00:51:06,680 --> 00:51:10,480
Tak som našiel túto kľúč jednoduchým čítaním dokumentácie a pri pohľade na príklady.

848
00:51:10,480 --> 00:51:14,150
Keby som ho kľúč zdroje, hodnota tohto kľúča

849
00:51:14,150 --> 00:51:17,770
je to len nejaký rad vecí, chcem automatického dokončovania.

850
00:51:17,770 --> 00:51:20,180
Táto premenná pochádza z tohto iného súboru.

851
00:51:20,180 --> 00:51:23,400
Aj otvoriť symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Tento symbols.js je práve tento naozaj, ale naozaj veľká pole obsahujúce reťazce

853
00:51:27,980 --> 00:51:32,080
všetkých týchto akciových symbolov z NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Ak chcem skočiť späť do HTML, tak jharvard, vhosts, globalhost, html, šablóny,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Vzhľadom k tomu, že sa teraz nazýva quote3.js, dovoľte mi, aby som si zmeniť súbor JavaScriptu som vrátane tu.

857
00:51:50,910 --> 00:51:55,110
Teraz mám quote3.js, takže budem načítať v tomto samostatnom JavaScript súboru,

858
00:51:55,110 --> 00:51:57,910
ten, ktorý má túto Bootstrap Automatické dokončovanie.

859
00:51:57,910 --> 00:52:04,430
Teraz, keď som sa skočiť späť do prehliadača, stránku znovu načítať, a začnem písať aa,

860
00:52:04,430 --> 00:52:06,880
tu je moja autocomplete. A bolo to naozaj tak jednoduché, že.

861
00:52:06,880 --> 00:52:11,400
Mal som 1 riadok kódu, ktorý práve povedal, "Tu sú veci, ktoré chcem, aby automatického dokončovania,"

862
00:52:11,400 --> 00:52:16,590
a zrazu som to naozaj, ale naozaj pekné funkčnosť s nie veľa úsilia vôbec.

863
00:52:16,590 --> 00:52:19,810
Ako ste vyvíjate webové stránky, a najmä čela strane vecí,

864
00:52:19,810 --> 00:52:21,840
budete toto je prípad veľa.

865
00:52:21,840 --> 00:52:25,700
Existuje veľa, veľa, veľa naozaj cool voľných knižníc tam

866
00:52:25,700 --> 00:52:30,190
ktoré robia to super ľahké robiť veci takto.

867
00:52:30,190 --> 00:52:37,230
Môže niekto myslieť na žiadne nevýhody jednoducho autocompleting na tomto rozsiahlom zozname symbolov?

868
00:52:37,230 --> 00:52:41,580
Čo by mohlo byť niečo, čo nie je najlepšie s týmto prístupom?

869
00:52:42,790 --> 00:52:45,960
Jo. >> [Študent] Čas, ak máte veľa [nepočuteľné]

870
00:52:45,960 --> 00:52:50,420
Jo. Práve teraz prevzatí tento obrovský JavaScript súbor a tam je veľa symbolov.

871
00:52:50,420 --> 00:52:54,360
A ak máme veľa vecí, by to mohlo trochu zvýšiť latenciu nielen vyhľadávania

872
00:52:54,360 --> 00:52:56,600
ale aj sťahovanie aktuálny súbor.

873
00:52:56,600 --> 00:52:58,670
Great. Ešte niečo?

874
00:53:01,950 --> 00:53:05,280
Práve teraz nie je tam žiadny skutočný zmysel pre EHP.

875
00:53:05,280 --> 00:53:08,190
Keby som zadajte A, spoločností, ktoré sa objavia tu

876
00:53:08,190 --> 00:53:11,220
nemusí byť z najpopulárnejších spoločností, ktoré začínajú s A.

877
00:53:11,220 --> 00:53:17,130
>> Než sa dostanem k Apple, môže to trvať aj niekoľko viac znakov nájsť to, čo som hľadal.

878
00:53:17,130 --> 00:53:20,420
Tento autocomplete nemá tento pocit EHP.

879
00:53:20,420 --> 00:53:24,400
Je to len tak povedať, "Čokoľvek, čo zodpovedá idem na zobrazenie."

880
00:53:24,400 --> 00:53:30,510
Namiesto toho, rád by som sa nejako integrovať nejaký význam do mojich vyhľadávania.

881
00:53:30,510 --> 00:53:36,440
Keď idem sem na Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Ak sa snažím zadať symbol na stránke Yahoo! Finance tieto

883
00:53:42,100 --> 00:53:52,310
a začnem písať GOOG, mám pekný zoznam vecí.

884
00:53:52,310 --> 00:53:57,100
Je zrejmé, vyzerá to, že Yahoo! Finance robí niečo múdrejší tu.

885
00:53:57,100 --> 00:53:59,790
Majú nejaký význam, a majú tiež ďalšie informácie

886
00:53:59,790 --> 00:54:01,430
ako meno populácie.

887
00:54:01,430 --> 00:54:05,850
To je niečo, čo nemôžem dostať len s mojím Slovník zoznamu symbolov.

888
00:54:05,850 --> 00:54:09,520
Chcem to, a tak som to vziať.

889
00:54:09,520 --> 00:54:11,790
Ak chcete, aby Poďme urobiť pár vecí.

890
00:54:11,790 --> 00:54:15,580
Pozrime sa najprv otvorte inšpektor na tejto stránke

891
00:54:15,580 --> 00:54:18,100
pretože sme videli, že táto stránka nie je nakladanie na všetky,

892
00:54:18,100 --> 00:54:21,960
takže je to asi pomocou AJAX nejako načítať svoje dáta.

893
00:54:21,960 --> 00:54:23,920
Môžeme zistiť, aké údaje to načítania.

894
00:54:23,920 --> 00:54:28,390
Keby som kliknite na karte Sieť, tie sa bude všetky požiadavky, ktoré začínajú byť vypalovaný.

895
00:54:28,390 --> 00:54:34,020
Teraz, keď som zadajte brečky, môžeme vidieť, že som práve dostal novú HTTP požiadavky.

896
00:54:34,020 --> 00:54:37,490
To je pravdepodobne tam, kde že dáta pochádza.

897
00:54:37,490 --> 00:54:41,990
Samozrejme, keď som sa pozrieť na tejto adrese, ktorá je trochu podivne pomenovaný,

898
00:54:41,990 --> 00:54:46,930
môžeme vidieť, že to je presne to, kde Yahoo sa vyšle svoje dáta z

899
00:54:46,930 --> 00:54:53,400
>> Vytvoril som samostatný súbor s názvom suggest.php, ktorá je veľmi podobná v duchu na vyhľadávaciu funkciu.

900
00:54:53,400 --> 00:54:57,730
Je to v podstate udělá dotaz na adresu URL Yahoo, získať späť niektoré údaje,

901
00:54:57,730 --> 00:54:59,750
a odoslať ju späť ku mne.

902
00:54:59,750 --> 00:55:02,570
Teraz, skôr ako používať tento veľký, obrovský zoznam symbolov,

903
00:55:02,570 --> 00:55:05,280
Môžem použiť Yahoo pekné relevantnosti veci,

904
00:55:05,280 --> 00:55:08,150
a ja nemám sťahovať, že masívne JavaScript súbor.

905
00:55:08,150 --> 00:55:12,040
Ja len bude strhnúť skutočne relevantné reklamné symboly.

906
00:55:12,040 --> 00:55:13,960
Poďme skočiť do toho.

907
00:55:13,960 --> 00:55:17,360
Takže html, js. Sme teraz v quote4.

908
00:55:17,360 --> 00:55:22,120
Teraz sme už používate tento veľký zoznam súborov JavaScript.

909
00:55:22,120 --> 00:55:24,430
Ale je tu malý druh designu problému tu.

910
00:55:24,430 --> 00:55:28,200
Povedali sme, že v AJAX je asynchrónny.

911
00:55:28,200 --> 00:55:31,000
Čo to znamená, že keď urobím AJAX požiadavku,

912
00:55:31,000 --> 00:55:36,490
tak tu na linke 8, to je miesto, kde sa má AJAX požiadavka skutočne vystrelil.

913
00:55:36,490 --> 00:55:40,370
Povedzme, že teraz mám nejaký kód sem, že to bude robiť nejaké veci

914
00:55:40,370 --> 00:55:43,930
Páči upozorní užívateľa, alebo zmeniť niečo na stránke.

915
00:55:43,930 --> 00:55:49,830
Čo sa to sa nestane, je prehliadač nebude čakať na túto žiadosť, aby aj naďalej

916
00:55:49,830 --> 00:55:53,480
pred príchodom dole a biť tento riadok.

917
00:55:53,480 --> 00:55:55,900
To je asynchrónny časť.

918
00:55:55,900 --> 00:55:58,400
Bude to, aby sa táto požiadavka a povedať, "Kedykoľvek dokončíte,

919
00:55:58,400 --> 00:56:03,080
"Vrátiť a zavolať, že funkcie, ktoré som ti zavolať vnútri úspechu."

920
00:56:03,080 --> 00:56:07,300
To znamená, že nemôžeme len stiahnuť všetky zásoby vopred.

921
00:56:07,300 --> 00:56:10,300
Musíme podať žiadosť a čakať na niečo, aby sa vrátil.

922
00:56:10,300 --> 00:56:13,330
To znamená, že pred, mohli by sme jednoducho povedať Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Tu je zoznam vecí, ktoré chcem, aby ste automatického dokončovania."

924
00:56:15,580 --> 00:56:18,950
Nemôžeme už nie robiť, že už preto, že nevieme,

925
00:56:18,950 --> 00:56:21,780
to, čo chceme, aby skutočne autocomplete na.

926
00:56:21,780 --> 00:56:25,190
Našťastie, Bootstrap si na to, pretože to sú inteligentné chlapi tamto,

927
00:56:25,190 --> 00:56:30,160
a oni vlastne dali nám iný spôsob, ako naložiť túto Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Skôr, hodnota tohto zdroja majetku bol práve tento veľký poľa vecí automatického dokončovania.

929
00:56:35,630 --> 00:56:39,580
>> Teraz Vlastnosť source je vlastne funkcia,

930
00:56:39,580 --> 00:56:44,580
a cieľom tejto funkcie je zistiť, čo tie veci do automatického dokončovania je.

931
00:56:44,580 --> 00:56:48,730
Tak, ako to bude na to prišiel, je, že to bude pýtať Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
čo najlepšie veci na autocomplete sú.

933
00:56:51,750 --> 00:56:54,500
Ak chcete, že budem robiť veľmi podobnú AJAX požiadavku.

934
00:56:54,500 --> 00:56:59,010
Chystám sa požiadať túto stránku na suggest.php.

935
00:56:59,010 --> 00:57:01,360
Chcem poslať pozdĺž symboly stále.

936
00:57:01,360 --> 00:57:05,570
A teraz môj úspech, Bootstrap dokumentácie mi

937
00:57:05,570 --> 00:57:09,130
, Že za účelom naplnenia tento zoznam vecí,

938
00:57:09,130 --> 00:57:14,370
všetko, čo potrebujete urobiť, je odovzdať v tomto poli teraz funkciu spätného volania.

939
00:57:14,370 --> 00:57:15,660
Ale počkajte.

940
00:57:15,660 --> 00:57:20,240
Ak toto má byť pole a AJAX ma posiela staré text,

941
00:57:20,240 --> 00:57:22,720
Ako je to možné?

942
00:57:22,720 --> 00:57:27,910
To predstavuje nový spôsob výmeny dát s názvom JSON.

943
00:57:27,910 --> 00:57:33,000
V tomto prípade sme nielen zaslaním jednoduché reťazec textu.

944
00:57:33,000 --> 00:57:37,670
Teraz máme čo do činenia s týmto zložitejším zoznamu symboly akcií.

945
00:57:37,670 --> 00:57:41,730
Tieto symboly akcií môže tiež zahŕňať veci ako názov spoločnosti alebo aktuálnych cien.

946
00:57:41,730 --> 00:57:47,550
Len pomocou veľkej dlhý reťazec, ktorý nie je naformátovaný v žiadnom predvídateľným spôsobom

947
00:57:47,550 --> 00:57:51,970
sa nebude najlepší spôsob, ako dostať tieto údaje zo servera Yahoo so mnou

948
00:57:51,970 --> 00:57:54,540
tak, že nemôžem ľahko zrozumiteľná.

949
00:57:54,540 --> 00:58:01,280
JSON je technológia, ktorá využíva toho, ako sme sa vytvoriť asociatívne pole v JavaScriptu.

950
00:58:01,280 --> 00:58:04,510
To vyzerá veľa ako JavaScript asociatívneho poľa,

951
00:58:04,510 --> 00:58:06,600
a v skutočnosti, že je to preto, že je.

952
00:58:06,600 --> 00:58:09,710
JSON je skratka pre JavaScript Object notácie.

953
00:58:09,710 --> 00:58:15,020
To je v podstate dohodnuté formáte pre prenos dát tam a späť.

954
00:58:15,020 --> 00:58:18,280
Tu tento objekt JSON alebo to JSON asociatívne pole

955
00:58:18,280 --> 00:58:21,010
je mi poslal nejaké údaje o kurze.

956
00:58:21,010 --> 00:58:25,110
>> Kľúče tohto poľa, sú veci ako predmetu, ktorý má hodnotu cs50,

957
00:58:25,110 --> 00:58:29,140
a tu dole môžeme vidieť, že môžem mať hodnotu, ktorá je pole.

958
00:58:29,140 --> 00:58:32,730
Nemám robiť veci ako vyradil reťazcov a pozrite sa na čiarkami

959
00:58:32,730 --> 00:58:35,330
a robiť šialené veci, ako že.

960
00:58:35,330 --> 00:58:38,820
Pretože toto je deklarovaná v tomto formáte JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript a jQuery už funkcia previesť reťazec

962
00:58:43,510 --> 00:58:48,140
, Ktorá vyzerá ako tento JSON do skutočného JavaScript asociatívneho poľa

963
00:58:48,140 --> 00:58:50,440
, Že môžeme pracovať s

964
00:58:50,440 --> 00:58:56,660
Robiť, že je tak jednoduché, ako hovorí, že už je to súbor, suggest.php,

965
00:58:56,660 --> 00:58:59,040
ma poslal naspäť jednoducho reťazec textu,

966
00:58:59,040 --> 00:59:01,950
ale ja viem, že to bude ma poslal späť JSON.

967
00:59:01,950 --> 00:59:06,760
To znamená, že JSON môže byť prevedený do JavaScriptu asociatívneho poľa.

968
00:59:06,760 --> 00:59:10,830
A tak jQuery, rád by som, aby si to pre mňa urobiť.

969
00:59:10,830 --> 00:59:13,990
To znamená, že sa táto reakcia tu parameter,

970
00:59:13,990 --> 00:59:16,070
To je už len reťazec.

971
00:59:16,070 --> 00:59:19,860
Vzhľadom k tomu, že sme povedali, že jQuery prichádza nejaký JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery bude dosť chytrý, aby povedal, "Chcel ste JSON?"

973
00:59:22,950 --> 00:59:26,890
"Chystám sa previesť to do asociatívneho poľa pre teba."

974
00:59:26,890 --> 00:59:32,100
Poďme vlastne sa pozrieť na záložke Sieť akonáhle budeme mať quote4.js.

975
00:59:32,100 --> 00:59:35,400
Budeme zmeniť a obnovte stránku.

976
00:59:37,150 --> 00:59:41,250
Teraz budem písať v-znova.

977
00:59:41,250 --> 00:59:45,600
Urobil som pár žiadostí na suggest.php, ale teraz to odpoveď,

978
00:59:45,600 --> 00:59:48,670
skôr než len reťazec, je to JSON.

979
00:59:48,670 --> 00:59:52,580
Tak som si otvorený zložená zátvorka hovorí, "Tu je asociatívne pole."

980
00:59:52,580 --> 00:59:56,830
>> Prvá a jediná kľúč tohto asociatívneho poľa sa nazýva symboly,

981
00:59:56,830 --> 01:00:00,240
a potom je tu pole všetkých príslušných symbolov

982
01:00:00,240 --> 01:00:04,820
teraz prichádza z Yahoo! Finance, nie je z tohto obrovského zoznamu.

983
01:00:06,110 --> 01:00:10,630
To je, ako môžem jednoducho naplniť túto automatického dokončovania plugin

984
01:00:10,630 --> 01:00:14,280
s niektorými údajmi, ktoré nie je pochádzajúcich z miestneho súboru, ktorý je už vopred stanovené

985
01:00:14,280 --> 01:00:17,490
ale z niečoho iného.

986
01:00:17,490 --> 01:00:21,160
Ukazuje sa, že skutočne môžeme využiť technológiu zvanej JSONP,

987
01:00:21,160 --> 01:00:27,420
alebo JSON s polstrovaním, bude to odstrániť túto suggest.php prostredníka.

988
01:00:27,420 --> 01:00:34,010
Ale namiesto toho, aby robil to, poďme miesto pozrieť na to, ako môžem zlepšiť to ešte viac.

989
01:00:34,010 --> 01:00:36,040
Moc sa mi páči Bootstrap je Typeahead. Je to naozaj pekné.

990
01:00:36,040 --> 01:00:39,570
Ale my sme stále dobrí JavaScriptu a chceme trochu to sami,

991
01:00:39,570 --> 01:00:43,870
Možno sa pozrieť na to, čo tento plugin mohol robiť.

992
01:00:43,870 --> 01:00:46,500
Poďme už použiť tento Typeahead vec,

993
01:00:46,500 --> 01:00:50,550
a skúsme sa tento zoznam navrhovaných zásob sami.

994
01:00:50,550 --> 01:00:53,790
Tu v quote6.php budeme začať rovnakým spôsobom.

995
01:00:53,790 --> 01:00:58,050
Zakaždým, keď niekto niečo napíše, chceme, aby AJAX požiadavku.

996
01:00:58,050 --> 01:01:01,590
To je podobné nášmu pôvodnému CS50 financií Instant.

997
01:01:01,590 --> 01:01:05,020
Skôr než aby žiadosť o quote.php,

998
01:01:05,020 --> 01:01:08,530
sme teraz snažia o to požiadajú rovnakom súboru ako predtým, táto suggest.php,

999
01:01:08,530 --> 01:01:12,460
ktorý je len tak vytiahnuť dáta z Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Opäť, sme stále čaká JSON, ale teraz, pretože Typeahead nerobí to pre nás,

1001
01:01:19,480 --> 01:01:24,850
musíme tiež zaslať spolu hodnotu, ktorá je vo vnútri aktuálneho textového poľa.

1002
01:01:24,850 --> 01:01:28,120
Teraz vieme, na čo sa pýtať Yahoo! Financie pre,

1003
01:01:28,120 --> 01:01:34,160
a tak teraz je tu funkcia, ktorú chcete vykonať, akonáhle požiadavku dokončenie.

1004
01:01:34,160 --> 01:01:36,520
Nemáme plugin, aby sa zoznam pre nás,

1005
01:01:36,520 --> 01:01:40,630
takže tu je miesto, kde sme sa to vlastne bude stavať zoznam návrhov.

1006
01:01:40,630 --> 01:01:44,850
Ak chcete, že, rovnako ako v PHP sme spojené tieto veľké reťazce HTML

1007
01:01:44,850 --> 01:01:48,170
potom sme si vytlačili je, môžeme urobiť rovnakú vec presne v JavaScriptu.

1008
01:01:48,170 --> 01:01:51,850
Najprv budeme začať tento reťazec s názvom návrhy,

1009
01:01:51,850 --> 01:01:54,590
a tento reťazec je len bude obsahovať nejaký HTML.

1010
01:01:54,590 --> 01:01:58,320
Chceme, aby to bolo zoznam vecí, takže budeme začať s týmto zoznamom tag,

1011
01:01:58,320 --> 01:02:03,340
a teraz budeme určiť iteráciou cez všetky symboly, ktoré boli vrátené späť k nám.

1012
01:02:03,340 --> 01:02:06,500
Pamätajte si, pretože sme povedali Typ dát: "JSON ', to nie je reťazec.

1013
01:02:06,500 --> 01:02:09,500
To je už pole pre nás. To je naozaj cool.

1014
01:02:09,500 --> 01:02:13,790
Môžeme jednoducho povedať: "Chcem, aby si pripojit prvok zoznamu."

1015
01:02:13,790 --> 01:02:16,000
Dáme ju vnútri prvku v časti, ktorá,

1016
01:02:16,000 --> 01:02:19,030
budeme ho triedu návrhov, takže vieme, čo to je,

1017
01:02:19,030 --> 01:02:23,880
a teraz je tu symbol, že sme sa vrátili z Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Akonáhle sme vytvorili prvok pre každý zo symbolov sme dostali späť,

1019
01:02:27,230 --> 01:02:30,100
chceme len uzavrieť zoznamu.

1020
01:02:30,100 --> 01:02:33,040
Takže teraz návrhy predstavuje tento malý fragment HTML

1021
01:02:33,040 --> 01:02:37,860
ktoré keď sa na stránke bude zoznam vecí, ktoré hľadáte.

1022
01:02:37,860 --> 01:02:41,070
Teraz sa poďme skutočne dať na stránke.

1023
01:02:41,070 --> 01:02:46,390
K tomu, že som vlastne vytvoril ďalší prázdny div a ja som mu poskytla identifikátor návrhov.

1024
01:02:46,390 --> 01:02:52,520
Rovnako ako sme si stanovili obsah div, že by zobrazujú cenu stavových údajov,

1025
01:02:52,520 --> 01:02:58,600
teraz len chcete nastaviť obsah tohto div sa, čo je tento reťazec

1026
01:02:58,600 --> 01:03:00,290
ktorý obsahuje tieto symboly.

1027
01:03:00,290 --> 01:03:07,650
Pomocou tejto metódy HTML, toto odporúčanie premenné, tento reťazec je reťazec HTML.

1028
01:03:07,650 --> 01:03:13,490
Chcem, aby si to HTML a vložte ho vnútri div s názvom návrhy.

1029
01:03:13,490 --> 01:03:15,680
Práve sme pripojená niečo DOM teraz.

1030
01:03:15,680 --> 01:03:20,360
Pridali sme nejaké nové prvky do DOM, že teraz môžeme zobraziť na stránke.

1031
01:03:20,360 --> 01:03:22,540
Poďme sa pozrieť, ako to vyzerá.

1032
01:03:22,540 --> 01:03:29,110
Ak načítame na quote6 a teraz sa vrátime späť,

1033
01:03:29,110 --> 01:03:34,480
teraz, keď som sa začať písať AAPL, že už nemáme, že Bootstrap automatického dokončovania,

1034
01:03:34,480 --> 01:03:38,470
ale teraz máme tento zoznam, ktorý sme urobili sami.

1035
01:03:38,470 --> 01:03:43,230
To je trochu škaredšie ako Bootstrap Typeahead, napríklad,

1036
01:03:43,230 --> 01:03:45,580
ale to nám umožní urobiť jednu vec.

1037
01:03:45,580 --> 01:03:48,660
Keď sme sa pozerali na tento Bootstrap pluginu,

1038
01:03:48,660 --> 01:03:52,590
sme videli, že keď sme autocompleted, jeden z autocomplete hodnôt bol AAPL.

1039
01:03:52,590 --> 01:03:54,820
To nemusí byť tak užitočné.

1040
01:03:54,820 --> 01:03:59,100
Ako užívateľ by som nemal okamžite rozpoznať všetky symboly akcií.

1041
01:03:59,100 --> 01:04:02,370
Čo som asi väčšou pravdepodobnosťou rozpoznať sú firemné skutočné mená.

1042
01:04:02,370 --> 01:04:05,310
Takže by to bolo naozaj užitočné, ak skôr než hovoriť AAPL

1043
01:04:05,310 --> 01:04:07,970
týmto povedal niečo ako Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Vzhľadom k tomu, že sme valcované to sami, môžeme veľmi ľahko urobiť.

1045
01:04:12,240 --> 01:04:17,630
Poďme otvoriť náš posledný citát súbor tu, tak quote7.

1046
01:04:17,630 --> 01:04:23,200
>> To je to isté. Práve som vytvoril ďalšie PHP súbor, ktorý sa vráti k nám viac ako len symboly.

1047
01:04:23,200 --> 01:04:25,550
To bude tiež dať nám späť spoločnosti mená.

1048
01:04:25,550 --> 01:04:28,150
A tak robíme to isté. Robíme AJAX požiadavku.

1049
01:04:28,150 --> 01:04:32,370
Po požiadavku bol dokončený, budeme vykonávať túto funkciu tu,

1050
01:04:32,370 --> 01:04:36,520
a táto funkcia bude vybudovať veľkú reťazec prvkov.

1051
01:04:36,520 --> 01:04:39,520
Ale rozdiel je, že hodnota týchto zoznamov je už len symbol,

1052
01:04:39,520 --> 01:04:45,370
je to teraz meno.

1053
01:04:45,370 --> 01:04:47,070
Takže máme jeden malý problém.

1054
01:04:47,070 --> 01:04:51,590
Keď sme využiť naše vyhľadávanie, musíme nejako odovzdať symbol.

1055
01:04:51,590 --> 01:04:54,950
Nemôžeme prejsť vyhľadávacie niečo ako Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Musíme ju odovzdať MSFT.

1057
01:04:57,900 --> 01:05:01,640
Keď sme písať HTML, máme veľa pekných vstavané atribúty.

1058
01:05:01,640 --> 01:05:05,440
Mohol s ním spojené href alebo triedy.

1059
01:05:05,440 --> 01:05:08,230
Ale to, čo naozaj potrebujeme, je pre každý z týchto odkazov

1060
01:05:08,230 --> 01:05:11,120
mať symbol akcií s ním spojené.

1061
01:05:11,120 --> 01:05:14,240
Nie je vstavaný HTML atribútu fotografiu symbol,

1062
01:05:14,240 --> 01:05:21,010
ale našťastie, HTML5 nám umožňuje vytvoriť vlastné atribúty, aby čo chceme.

1063
01:05:21,010 --> 01:05:24,620
Tým, že hovoríte dát-symbol, som predstavil nový atribút

1064
01:05:24,620 --> 01:05:29,350
ktorého meno som skladá, a je to v poriadku, pretože som začal s týmito dátami.

1065
01:05:29,350 --> 01:05:34,270
Budeme uložiť vnútri mesta sa symbolu zo skladu teraz.

1066
01:05:34,270 --> 01:05:39,590
Čo to znamená, je to, že aj keď sme zobrazenie hodnoty názvu spoločnosti

1067
01:05:39,590 --> 01:05:43,380
vnútri nášho autocomplete, sme stále pamätať na symbol

1068
01:05:43,380 --> 01:05:47,110
ktorý je spojený s každú spoločnosť.

1069
01:05:47,110 --> 01:05:50,350
Spôsob, akým to robíš, je vo vnútri tohto prvku.

1070
01:05:50,350 --> 01:05:52,930
Takže to znamená, že musíme urobiť ešte jednu zmenu.

1071
01:05:52,930 --> 01:05:57,090
Keď sme na neho teraz, musíme skutočne využiť symbol atribútu

1072
01:05:57,090 --> 01:06:00,220
skôr než len jeho hodnota.

1073
01:06:00,220 --> 01:06:05,010
Ak sa späť hore, prikladáme obslužnú rutinu udalosti návrhy.

1074
01:06:05,010 --> 01:06:09,280
Kedykoľvek je jeden z týchto návrhov kliknutí teraz, chcem niečo urobiť.

1075
01:06:09,280 --> 01:06:13,160
To, čo chcem urobiť, je zmeniť hodnotu tohto vstupného poľa.

1076
01:06:13,160 --> 01:06:16,100
Teraz chcem nastaviť rovnaký val funkciu.

1077
01:06:16,100 --> 01:06:21,060
>> Takže bez argumentov táto funkcia val vracia na vás, čo je už v textovom poli,

1078
01:06:21,060 --> 01:06:27,070
ale ak dáte to reťazec, to bude trvať tento reťazec a vložte ho do textového poľa.

1079
01:06:27,070 --> 01:06:28,980
Ja výberu jeho textové pole rovnakým spôsobom.

1080
01:06:28,980 --> 01:06:31,230
Je to meno je symbolom vnútri formulárov citátu.

1081
01:06:31,230 --> 01:06:37,540
Teraz som zaslala mu hodnotu atribútu dáta-symbol.

1082
01:06:37,540 --> 01:06:41,560
Táto vec tu je nový, to $ (to).

1083
01:06:41,560 --> 01:06:46,850
Čo sa to týka, je prvok, ktorý bolo kliknuté.

1084
01:06:46,850 --> 01:06:50,880
Môžeme vidieť, že nie sme pripojení udalosť click

1085
01:06:50,880 --> 01:06:54,690
na každý prvok s triedou návrhu jednotlivo.

1086
01:06:54,690 --> 01:06:57,140
Skôr, blížime sa to trochu inak.

1087
01:06:57,140 --> 01:07:01,700
Namiesto toho hovoríme, kedykoľvek niečo vnútri tohto div námety,

1088
01:07:01,700 --> 01:07:04,080
ktorá pamätajte je len kontajner pre tohto zoznamu,

1089
01:07:04,080 --> 01:07:10,150
ak niečo vnútri tohto div kliknutí a má triedu sugescia,

1090
01:07:10,150 --> 01:07:13,000
Chcem túto udalosť na oheň.

1091
01:07:13,000 --> 01:07:17,490
V podstate to, čo to znamená, že môžeme urobiť, je, že sme mohli znovu použiť rovnaký obslužnú rutinu udalosti

1092
01:07:17,490 --> 01:07:20,000
pre všetky veci v zozname.

1093
01:07:20,000 --> 01:07:22,080
Takže nemáme mať jednu obslužnú rutinu udalosti pre prvý prvok

1094
01:07:22,080 --> 01:07:24,550
a rôzne udalosti pre druhý prvok.

1095
01:07:24,550 --> 01:07:29,880
Môžeme namiesto toho povedať, "Chcem rovnaké obslužné rutiny udalosti sa vzťahuje na všetko v mojom zozname."

1096
01:07:29,880 --> 01:07:34,420
Ale musíme to nejako vedieť, ktorý prvok bolo kliknuté.

1097
01:07:34,420 --> 01:07:38,450
Tento "to" kľúčové slovo predstavuje práve to.

1098
01:07:38,450 --> 01:07:42,360
To je predmet, ktorý práve klikli užívateľom.

1099
01:07:42,360 --> 01:07:47,680
Ak som klikol 3. odkaz, to predstavuje prvok tejto tretej odkaz,

1100
01:07:47,680 --> 01:07:51,670
čo znamená, že by som mohol dostať svoj atribút, data-symbol,

1101
01:07:51,670 --> 01:07:57,760
ktoré poznáme musí obsahovať symbol, ktorý je spojený s firmou som klikol.

1102
01:07:57,760 --> 01:08:04,550
Ak by sme skočiť späť na náš finančnej stránke,

1103
01:08:04,550 --> 01:08:08,580
môžeme vidieť, že až začnem písať niečo ako MSFT,

1104
01:08:08,580 --> 01:08:11,220
sme už stále len na reklamné symboly,

1105
01:08:11,220 --> 01:08:13,720
sme teraz dostali skutočné spoločnosti.

1106
01:08:13,720 --> 01:08:20,410
Ale keď som kliknite na jednu z týchto spoločností,

1107
01:08:20,410 --> 01:08:25,180
môžeme vidieť, že sme skutočne vyplnenie textové pole nie je s názvom firmy

1108
01:08:25,180 --> 01:08:29,850
ale s tým, čo bolo uložené v týchto dátových atribútov.

1109
01:08:29,850 --> 01:08:32,880
A tak keď som vlastne prezrieť jeden z týchto prvkov pravým kliknutím

1110
01:08:32,880 --> 01:08:36,200
a kliknutím na tlačidlo Skontrolovať prvok, môžeme skutočne vidieť, ako to vyzerá.

1111
01:08:36,200 --> 01:08:40,290
>> Označiť toto je niečo, čo sme vytvorili vo vnútri, že pre vedenie

1112
01:08:40,290 --> 01:08:42,649
keď sme boli budovanie že reťazec HTML.

1113
01:08:42,649 --> 01:08:47,870
Je vidieť, že týmto dát symbol má hodnotu MSFT, čo je veľmi dobrá.

1114
01:08:47,870 --> 01:08:49,189
To je to, čo sme očakávali.

1115
01:08:49,189 --> 01:08:53,170
To je symbol, a to je, ako sme sa dostali na hodnotu, ktorá sme potrebovali použiť

1116
01:08:53,170 --> 01:08:56,140
vnútri tohto textového poľa.

1117
01:08:56,140 --> 01:08:58,850
To je dosť na dopytový formulár, pretože to je niečo nudné.

1118
01:08:58,850 --> 01:09:02,990
Poďme urobiť nejaké rýchle vylepšenie nášho portfólia stránku.

1119
01:09:02,990 --> 01:09:08,109
Ak ste použili CS50 Financie na chvíľu a môžete začať kupovať a predávať veľa zásob,

1120
01:09:08,109 --> 01:09:11,300
nakoniec táto tabuľka dostane docela veľký,

1121
01:09:11,300 --> 01:09:13,850
a budete chcieť burzové, samozrejme.

1122
01:09:13,850 --> 01:09:20,350
Akonáhle tabuľka je naozaj, naozaj veľký, mohlo by to byť užitočné pre užívateľa, aby sa pokúsili hľadať cez neho.

1123
01:09:20,350 --> 01:09:23,290
Vnútri vyhľadávacieho poľa, ak začnem písať niečo ako Disney

1124
01:09:23,290 --> 01:09:26,359
a hľadajú pre svoje ilustrácie Mickey Mouse, môžeme vidieť, že tabuľka je teraz filtrovanie

1125
01:09:26,359 --> 01:09:28,189
na základe toho, čo som práve napísal dovnútra

1126
01:09:28,189 --> 01:09:31,640
Táto funkcia vyzerá Super komplikované, ale je to naozaj, ale naozaj jednoduché

1127
01:09:31,640 --> 01:09:33,859
s jQuery a JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Tento portfolio.php súbor obsahuje súbor JavaScriptu s názvom portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Poďme sa na to pozrieť.

1130
01:09:41,130 --> 01:09:44,890
Takže html, js, portfólio.

1131
01:09:44,890 --> 01:09:49,210
Tu je miesto, kde robíme, že vyhľadávanie na stole.

1132
01:09:49,210 --> 01:09:52,750
Prvá vec, ktorú musím urobiť, je pripojiť obslužnú rutinu udalosti tohto textového poľa

1133
01:09:52,750 --> 01:09:55,760
pretože vieme, že chceme, aby naše filtrovanie funkcie na oheň

1134
01:09:55,760 --> 01:09:59,800
zakaždým, keď užívateľ stlačí niečo, pretože nemáme čas na hľadanie tlačidiel.

1135
01:09:59,800 --> 01:10:03,000
Prvá vec, ktorú musíte urobiť, je zistiť, čo používateľ hľadá,

1136
01:10:03,000 --> 01:10:04,780
rovnako ako sme to urobili predtým.

1137
01:10:04,780 --> 01:10:11,320
Toto kľúčové odkazuje na aktuálnu prvok je užívateľ interakciu s

1138
01:10:11,320 --> 01:10:14,070
>> Vzhľadom k tomu, že používateľ je interakcia s vyhľadávacieho poľa,

1139
01:10:14,070 --> 01:10:17,020
$ Predstavuje pole pre vyhľadávanie,

1140
01:10:17,020 --> 01:10:21,820
tak this.val nám dáva to, čo je vo vnútri vyhľadávacieho poľa je užívateľ aktuálne píšete.

1141
01:10:22,810 --> 01:10:27,320
Takže, čo teraz chceme urobiť, je chceme určiť iteráciou cez všetky riadky

1142
01:10:27,320 --> 01:10:29,240
vnútri nášho stola.

1143
01:10:29,240 --> 01:10:35,630
Ak chcete vybrať všetky riadky v našej tabuľke, dal som, že tabuľka k ID tabuľky portfólia,

1144
01:10:35,630 --> 01:10:39,060
a každý riadok je reprezentovaný prvkom TR,

1145
01:10:39,060 --> 01:10:42,080
takže výber bude vrátiť ku mne veľkú poľa

1146
01:10:42,080 --> 01:10:44,370
všetkých riadkov v mojom stole.

1147
01:10:44,370 --> 01:10:47,010
Teraz chcem, aby iterácii, že pole.

1148
01:10:47,010 --> 01:10:52,390
Mohol by som si pre sláčiky, ale jQuery skutočnosti nám poskytuje pekný funkciu s názvom "každý."

1149
01:10:52,390 --> 01:10:55,220
Čo každý robí, je každý prijíma jeden argument,

1150
01:10:55,220 --> 01:10:57,090
a tento argument je funkcia.

1151
01:10:57,090 --> 01:11:02,760
Čo to urobí, je, že to bude platiť túto funkciu na každý prvok vo vnútri tohto zoznamu.

1152
01:11:02,760 --> 01:11:05,550
Táto funkcia má jeden argument, ktorý je e,

1153
01:11:05,550 --> 01:11:10,090
a keď sa vykoná táto funkcia, tento e sa bude nahradený prvom riadku,

1154
01:11:10,090 --> 01:11:12,070
potom v druhej rade, a potom sa tretí rad.

1155
01:11:12,070 --> 01:11:15,150
Týmto spôsobom, to je to isté, ako beh pre sláčiky

1156
01:11:15,150 --> 01:11:21,360
a potom zisťuje aktuálny prvok na základe indexu vnútri vašej slučky for.

1157
01:11:21,360 --> 01:11:24,750
Na každej iterácii, pre každý z týchto prvkov v tabuľke,

1158
01:11:24,750 --> 01:11:30,560
Chcem zistiť, či texte prvku - text bunky vnútri tejto rady -

1159
01:11:30,560 --> 01:11:33,130
zodpovedá tomu, čo som hľadal.

1160
01:11:33,130 --> 01:11:36,390
Tento veľký dlhý reťazec príkazov je, ako by som mohol urobiť, že.

1161
01:11:36,390 --> 01:11:40,900
Po prvé, opäť, to sa týka - pretože je to vo vnútri nové funkcie -

1162
01:11:40,900 --> 01:11:45,020
toto je teraz aktuálny riadok v tabuľke.

1163
01:11:45,020 --> 01:11:47,340
Chcem, aby sa aktuálny riadok v tabuľke,

1164
01:11:47,340 --> 01:11:49,950
a chcem sa dostať všetky svoje deti.

1165
01:11:49,950 --> 01:11:51,940
Nezabudnite, DOM je hierarchickej strom,

1166
01:11:51,940 --> 01:11:54,200
, Čo znamená, že prvky majú rad detí.

1167
01:11:54,200 --> 01:12:00,180
>> Táto. Deti funkcia sa vráti na mňa späť maticu všetky prvky

1168
01:12:00,180 --> 01:12:03,240
že sú deti, v tomto prípade, riadok v tabuľke.

1169
01:12:03,240 --> 01:12:07,150
To je proste bunky vnútri tejto rady.

1170
01:12:07,150 --> 01:12:09,230
Ja len chcem, aby vyhľadávať v prvej bunke.

1171
01:12:09,230 --> 01:12:13,090
Táto. Prvá funkcia hovorí, že mi na prvý prvok v danom poli.

1172
01:12:13,090 --> 01:12:17,070
Potom Odkazová funkcie hovorí, že ma presne to, čo je vo vnútri tejto bunky

1173
01:12:17,070 --> 01:12:19,530
pretože chcem prehľadávať tohto textu.

1174
01:12:19,530 --> 01:12:21,040
Konečne, poďme previesť na malé písmená,

1175
01:12:21,040 --> 01:12:23,940
takže môžeme urobiť textové nezáleží na veľkosti písmen otázky.

1176
01:12:23,940 --> 01:12:29,990
Napokon, chceme zistiť, či sa tento reťazec vo vnútri tabuľky obsahuje reťazec sme hľadali.

1177
01:12:29,990 --> 01:12:32,980
IndexOf funkcie v JavaScriptu robí len to.

1178
01:12:32,980 --> 01:12:37,060
To nám hovorí, či je tento reťazec obsahuje iný reťazec.

1179
01:12:37,060 --> 01:12:40,150
Ak je to pravda, že bunka obsahuje to, čo som hľadal,

1180
01:12:40,150 --> 01:12:42,140
potom chcem, aby sa ubezpečil, že je to uvedené.

1181
01:12:42,140 --> 01:12:45,330
Zobraziť metóda bude hovoriť, "Zobraziť element."

1182
01:12:45,330 --> 01:12:50,350
Pokiaľ toto nie je ten prípad, potom to znamená, že bez ohľadu na pátram, nie je obsiahnutá

1183
01:12:50,350 --> 01:12:53,550
v tomto riadku, a tak sa chcem schovať, je od užívateľa.

1184
01:12:53,550 --> 01:12:59,240
To dosahuje že pekný filtrovanie účinok, ak už vidíme celú tabuľku.

1185
01:12:59,240 --> 01:13:01,480
Ak máte záujem o tom, ako tento burzový rovnako,

1186
01:13:01,480 --> 01:13:04,180
budeme písať zdroj on-line. Ale je to naozaj jednoduché.

1187
01:13:04,180 --> 01:13:09,860
JQuery má úžasné metódy pre tieto animácií a manipulácie CSS vlastnosti.

1188
01:13:09,860 --> 01:13:11,020
Tak, to je to pre mňa.

1189
01:13:11,020 --> 01:13:15,560
>> Čo potom čaká? Ako uvidíte v niekoľkých dňoch, finálne projekty návrhu sa počíta.

1190
01:13:15,560 --> 01:13:17,730
Konečný projekty Návrh bude sa vás opýtať na pár otázok,

1191
01:13:17,730 --> 01:13:19,420
ale medzi nimi budú tri míľniky -

1192
01:13:19,420 --> 01:13:22,840
jeden je "dobrý" míľnik, jeden lepší míľnik, a jeden najlepší.

1193
01:13:22,840 --> 01:13:25,870
Myšlienka je naozaj pomôže vám chlapci nastaviť očakávania

1194
01:13:25,870 --> 01:13:29,160
tak, že minimálne budete spokojní s výkonom svojho konečného projektu

1195
01:13:29,160 --> 01:13:32,060
a to bude "dobrý", ak máte obavy.

1196
01:13:32,060 --> 01:13:34,540
Ale potom v záujme dostať sa dosiahnuť len trochu na niečo lepšie

1197
01:13:34,540 --> 01:13:37,680
alebo niečo najlepšie, budeme tiež nejako tlačiť vás k, že rovnako.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-Thon, medzitým, je v priebehu niekoľkých týždňov.

1199
01:13:40,660 --> 01:13:44,340
Typicky, robíme to na základe lotérie základ, pretože záujem,

1200
01:13:44,340 --> 01:13:47,680
ale štatistiky sme si vezmem niekoľko stoviek z nás v kyvadlové autobusy z Harvard Square

1201
01:13:47,680 --> 01:13:51,540
dole Kendall námestí, kde Microsoft má krásnu zariadenia výstižne nazýva "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England Výskumné a vývojové centrum.

1203
01:13:53,830 --> 01:13:56,380
Budeme sa tam dostať okolo 8 vecer budeme mať niečo k jedlu.

1204
01:13:56,380 --> 01:13:58,160
Okolo 1 hod budeme mať trochu viac jedla.

1205
01:13:58,160 --> 01:14:02,150
Okolo 5 hod, keď si ešte hore budeme cez hlavu IHOP alebo sa dostanete späť do areálu.

1206
01:14:02,150 --> 01:14:04,380
Cieľom je ponoriť sa do finálových projektov

1207
01:14:04,380 --> 01:14:06,190
vedľa spolužiakov a zamestnancov.

1208
01:14:06,190 --> 01:14:08,280
Potom o niekoľko dní neskôr je CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
ktorý je naozaj chcel byť príležitosť pre vás chlapci predviesť svoju prácu

1210
01:14:10,990 --> 01:14:12,700
a úspechy na semester

1211
01:14:12,700 --> 01:14:15,610
zatiaľ čo kontaktoch sa navzájom a získať predstavu, čo každý robil.

1212
01:14:15,610 --> 01:14:17,850
Vďaka, že povedal, moc ďakujem Tommymu a Jozefovi,

1213
01:14:17,850 --> 01:14:19,960
a uvidíme sa v pondelok.

1214
01:14:19,960 --> 01:14:24,070
 [Potlesk]