1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [9. týden, pokračování]

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 konec týdne 9. Děkuju mnohokrát.

5
00:00:13,340 --> 00:00:15,310
Konečně. 9. týden. Mám to.

6
00:00:15,310 --> 00:00:18,590
Dnes budeme pokračovat v našem rozhovoru o programování pro web

7
00:00:18,590 --> 00:00:21,660
s okem k závěrečného projektu, ne proto, že musíte něco udělat webové

8
00:00:21,660 --> 00:00:25,610
pro konečné projekty, ale proto, že buď pro závěrečných prací nebo po CS50

9
00:00:25,610 --> 00:00:29,000
je to jistě směr, ve kterém moderní software se děje.

10
00:00:29,000 --> 00:00:31,770
A přesto, že to není ve skutečnosti jednoduchá věc.

11
00:00:31,770 --> 00:00:35,040
Ve skutečnosti, jeden z nejtěžších věcí, které udělat, je aspekt designu.

12
00:00:35,040 --> 00:00:38,600
>> Například, podle návrhu máme na mysli skutečně dostat uživatelského rozhraní

13
00:00:38,600 --> 00:00:40,420
nebo uživatelské zkušenosti právo.

14
00:00:40,420 --> 00:00:43,200
Troufám si říct, - a my víme z nedávné problému sady

15
00:00:43,200 --> 00:00:45,960
když pár z vás vysílal své nadávání nějaký kus software

16
00:00:45,960 --> 00:00:49,000
nebo hardware, který přivádí k zuřivosti vás, ať už na akademické půdě nebo mimo -

17
00:00:49,000 --> 00:00:51,930
je tu spousta míst tam, je tam spousta hardwaru tam,

18
00:00:51,930 --> 00:00:53,900
že druh hovno.

19
00:00:53,900 --> 00:00:58,730
Skutečnost je však taková, že dělat věci, které se snadno používají a přesto jsou však silné

20
00:00:58,730 --> 00:01:00,550
je velmi jednoduchá.

21
00:01:00,550 --> 00:01:03,680
Tak pro dnešek jsem se zeptal Josefa a Tommy se připojit mě sem

22
00:01:03,680 --> 00:01:06,680
takže můžeme mít rozhovor, jak o designu

23
00:01:06,680 --> 00:01:09,090
a jaké druhy myšlenkových procesů by měla začít chodit přes hlavu

24
00:01:09,090 --> 00:01:12,040
když si navrhnout konečné projekty, vaše budoucí úsilí.

25
00:01:12,040 --> 00:01:15,040
A pak se s pomocí Tommyho se podíváme na některé z implementačních detailů.

26
00:01:15,040 --> 00:01:18,440
Jak můžete mít nějaké vidění na papíře nebo ve vaší mysli

27
00:01:18,440 --> 00:01:20,760
, které pak můžete spustit programově

28
00:01:20,760 --> 00:01:24,030
pomocí některé z technologií a technik jsme začali mluvit o tom,

29
00:01:24,030 --> 00:01:29,080
konkrétně JavaScript a ještě něco novější, a to AJAX, asynchronní JavaScript.

30
00:01:29,080 --> 00:01:32,950
To vám umožní vytvořit všechny dynamičtější z uživatelského rozhraní

31
00:01:32,950 --> 00:01:35,780
od načítání více a více dat postupně ze serveru.

32
00:01:35,780 --> 00:01:38,560
Tak uvidíme některé z těchto úryvků i dnes.

33
00:01:38,560 --> 00:01:41,800
Jak stranou, pokud máte zájem o soustředění v informatice

34
00:01:41,800 --> 00:01:45,010
nebo minoring ve vědě o počítačích, vím, že tento pátek v poledne

35
00:01:45,010 --> 00:01:48,750
v Maxwell Dworkin 221 bude pizza událost

36
00:01:48,750 --> 00:01:50,780
kde se můžete dozvědět něco více o počítačové vědě.

37
00:01:50,780 --> 00:01:54,860
Na své cestě ven ze dveří dnes budete moci vyzvednout neoficiální příručka CS na Harvardu.

38
00:01:54,860 --> 00:01:57,290
Dáme ji na popelnicích mimo výši pasu

39
00:01:57,290 --> 00:01:59,750
takže pokud chcete chytit to a naučit se něco více o CS,

40
00:01:59,750 --> 00:02:02,480
že tam bude pro vás, jak to bylo v týdnu 0.

41
00:02:02,480 --> 00:02:06,500
Také pokud byste se k nám připojit na CS50 oběd v pátek v 13:15,

42
00:02:06,500 --> 00:02:09,800
zamiřte do cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Bez dalších okolků, 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
Díky.

46
00:02:20,770 --> 00:02:24,780
Poprvé jsem se dozvěděl o návrhu byl ve třídě zde nazývá CS179.

47
00:02:24,780 --> 00:02:28,040
>> Profesor v té době řekl nám příběh o jiném profesor

48
00:02:28,040 --> 00:02:31,640
kdo šel do hotelu a používal kohoutky.

49
00:02:31,640 --> 00:02:35,630
Může mi někdo říct, co se 2 knoflíky na levé a pravé dělat?

50
00:02:35,630 --> 00:02:39,080
[Student] Horká a studená. >> Horká a studená. Dobré.

51
00:02:39,080 --> 00:02:41,430
To, co běžně očekávat, že jo?

52
00:02:41,430 --> 00:02:46,960
Tento profesor po použití kohoutek chce osprchovat, a on pokračuje používat.

53
00:02:46,960 --> 00:02:51,310
Myslí si, že levá a pravá strana jsou pro teplou a studenou, ne?

54
00:02:51,310 --> 00:02:55,470
Ale může mi někdo říct, co to vlastně dělat?

55
00:02:55,470 --> 00:02:58,060
Nějaké ruce?

56
00:02:58,060 --> 00:03:01,740
[Neslyšitelné Student odpověď] >> Jeden návrh je?

57
00:03:01,740 --> 00:03:05,860
[Neslyšitelné Student odpověď] >> Teplota?

58
00:03:05,860 --> 00:03:10,460
Takže jeden z nich kontroluje teplotu a další ovládací? >> [Student] 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 vejde do toho, a v domnění, že jsou kontroly teplé a studené,

61
00:03:15,100 --> 00:03:21,470
otočí ten správný, který si myslí, že je pro horký, celou cestu nahoru

62
00:03:21,470 --> 00:03:23,560
proto, že chce, aby se teplou sprchu.

63
00:03:23,560 --> 00:03:28,100
No, to není opravdu odpovídat, tak on dostane toto není moc zábavné zkušenosti

64
00:03:28,100 --> 00:03:31,110
z toho, že v studenou sprchu, a všichni víme, jaký je to pocit.

65
00:03:31,110 --> 00:03:33,620
Toto je příklad konstrukční chyba.

66
00:03:33,620 --> 00:03:37,040
Co tím chci říct, že je jeho očekávání z kohoutku

67
00:03:37,040 --> 00:03:39,420
neodpovídá, co vyšel ze sprchy,

68
00:03:39,420 --> 00:03:41,780
který je tak trochu nešťastné pro něj.

69
00:03:41,780 --> 00:03:44,990
Tak tohle je příklad návrhu chyby, které se děje v reálném životě.

70
00:03:44,990 --> 00:03:48,020
Ale uvidíme všechny druhy ty ostatní stejně.

71
00:03:48,020 --> 00:03:50,390
Jsme pravděpodobně fanoušci systému MBTA.

72
00:03:50,390 --> 00:03:55,560
To je podzemní systém skutečně v Londýně, který říká, "Toto tlačítko není v provozu."

73
00:03:55,560 --> 00:04:00,220
Proč je to ještě tam? Proč jsme ještě jedno?

74
00:04:00,220 --> 00:04:02,810
Když jsem byl malý kluk, je tech důvtipný jeden v domě,

75
00:04:02,810 --> 00:04:05,050
Jestliže je počítač zhroutí, moje máma ke mně,

76
00:04:05,050 --> 00:04:07,060
mi ukázal tuto obrazovku a požádal mě, co se stalo.

77
00:04:07,060 --> 00:04:09,210
>> Ani nevím, co to znamená.

78
00:04:11,890 --> 00:04:14,700
[Smích] Co?

79
00:04:16,950 --> 00:04:18,019
[Smích]

80
00:04:18,720 --> 00:04:23,050
Někdy máme pocit, jako vývojáři softwaru jsou jen trolling nám.

81
00:04:23,050 --> 00:04:28,460
Jako uživatelé jsme jako, "Co se děje? Někdo nám."

82
00:04:28,460 --> 00:04:32,140
To vše přijde na problém designu.

83
00:04:32,140 --> 00:04:34,650
Design, jak můžeme vidět, není čistě o estetice,

84
00:04:34,650 --> 00:04:37,230
to není o tom, jak věci vypadají.

85
00:04:37,230 --> 00:04:41,720
Vidíme zde, že tento malý pop-up tady vlastně vypadá docela hezky.

86
00:04:41,720 --> 00:04:45,290
Má stín v pozadí, má přeshraniční rádiusů děje.

87
00:04:45,290 --> 00:04:47,550
Je to docela dost.

88
00:04:47,550 --> 00:04:51,480
Je to opravdu dobře navržen, protože to není příliš uživatelsky příjemný.

89
00:04:51,480 --> 00:04:54,920
To málo pop-up, který přijde opravdu není mi žádné informace

90
00:04:54,920 --> 00:04:58,450
o tom, co se děje, to mi neříkej, jak uživatel

91
00:04:58,450 --> 00:05:01,400
o tom, jak se dostat z této chyby.

92
00:05:01,400 --> 00:05:05,190
Chceme myslet na věci, že design není.

93
00:05:05,190 --> 00:05:06,670
Za prvé, není to estetika.

94
00:05:06,670 --> 00:05:10,800
Je to také není nádivkou vaši aplikaci s hromadou zbytečných funkcí.

95
00:05:10,800 --> 00:05:14,890
Pokud jste thajská restaurace, pravděpodobně nebudete chtít být zubař ve stejnou dobu.

96
00:05:14,890 --> 00:05:17,720
A s otázkami Facebook, ne, že mnoho lidí používá jej

97
00:05:17,720 --> 00:05:21,130
a bylo to opravdu v jádru toho, co stavěli.

98
00:05:21,130 --> 00:05:24,200
A tak je to hezké myslet ani tak na množství věcí,

99
00:05:24,200 --> 00:05:26,390
že jste uvedení vaší žádosti, ale kvalita

100
00:05:26,390 --> 00:05:28,910
a jak děláte, že uživatelský zážitek lepší

101
00:05:28,910 --> 00:05:32,540
vlastně zlepšení na to, co už máte.

102
00:05:32,540 --> 00:05:37,040
>> Stručně řečeno, design říká nám, co bychom měli stavět.

103
00:05:37,040 --> 00:05:41,950
Například, jestliže my budujeme něco, co nechal nás hledat věci,

104
00:05:41,950 --> 00:05:45,970
jako je Google, například by se dělat věci způsobem

105
00:05:45,970 --> 00:05:48,950
, která vyžaduje, aby uživatel vzít spoustu kliknutí se dostat na to, co chtějí,

106
00:05:48,950 --> 00:05:52,580
nebo bychom to měli dělat způsobem, například s Google Instant nebo automatického dokončování

107
00:05:52,580 --> 00:05:54,970
že nám umožňuje dostat na naše výsledky rychleji?

108
00:05:54,970 --> 00:05:58,740
Engineering zahrnuje, stejně jako Tommy vám ukáže, vlastně stavěli.

109
00:05:58,740 --> 00:06:01,890
Existuje mnoho typů designu.

110
00:06:01,890 --> 00:06:06,070
Například, pokud stavíte něco nasadit něco

111
00:06:06,070 --> 00:06:09,770
v zemi Třetího světa, kde není tolik elektřiny, nebo že mnoho technologií,

112
00:06:09,770 --> 00:06:11,440
musíte navrhnout to, co stavíte

113
00:06:11,440 --> 00:06:14,210
způsobem, který snadno umožňuje přístup k lidem tam.

114
00:06:14,210 --> 00:06:18,290
Ale jaké druhy z jiných konstrukčních rozhodnutí může být

115
00:06:18,290 --> 00:06:21,850
nebo by mohly být zapojeny do něčeho jako je tohle?

116
00:06:23,690 --> 00:06:25,660
Jo. Vidím ruku.

117
00:06:25,660 --> 00:06:37,200
[Neslyšitelné Student odpověď] >> Právo. Přesně tak. Dostupnost je jedna věc.

118
00:06:37,200 --> 00:06:40,870
Spousta lidí si nemyslím, že o tom, "co moje uživatelů?"

119
00:06:40,870 --> 00:06:43,160
jako extrémy obou spektra.

120
00:06:43,160 --> 00:06:47,770
Mám uživatelů, kteří by mohli mít postižení, že jsem nepřemýšlel o

121
00:06:47,770 --> 00:06:50,590
a já jsem přemýšlel o navrhování pro běžného uživatele.

122
00:06:50,590 --> 00:06:52,630
Internet je přístupný všem v dnešní době,

123
00:06:52,630 --> 00:06:54,870
a já bych se navrhování pro ty lidi stejně.

124
00:06:54,870 --> 00:06:58,620
Jaké druhy ostatních konstrukčních rozhodnutí můžete udělat?

125
00:06:58,620 --> 00:07:00,690
Ano. >> [Student] Tyto náklady.

126
00:07:00,690 --> 00:07:02,680
Náklady. Velmi dobrá.

127
00:07:02,680 --> 00:07:08,060
Další věc, kterou bychom mohli založit naše konstrukční rozhodnutí o nákladově.

128
00:07:08,060 --> 00:07:13,130
Pokud jsme firma, chcete postavit něco, co nebere moc náklady na výrobu

129
00:07:13,130 --> 00:07:17,720
ale může prodat za mimořádně vysoké náklady, nebo nás může dostat nějaký zisk.

130
00:07:17,720 --> 00:07:21,540
>> To vše jsou různé typy designu, ale když stavíme na internetu

131
00:07:21,540 --> 00:07:25,120
nebo když budujeme něco, co pravděpodobně nestojí tolik vybudovat hned,

132
00:07:25,120 --> 00:07:28,630
jako internetové aplikace - nemusíte házet tolik kapitálu do něj

133
00:07:28,630 --> 00:07:30,900
, aby něco, co skutečně funguje -

134
00:07:30,900 --> 00:07:33,490
to, co jsme více starat o je uživatelské zkušenosti.

135
00:07:33,490 --> 00:07:36,390
Říkáme tomu uživatelský zaměřený design.

136
00:07:36,390 --> 00:07:41,550
V podstatě to, co uživatel centred design zahrnuje je uvedení sami v botách vašich uživatelů.

137
00:07:41,550 --> 00:07:44,870
Pokud někdo zaregistruje na to, co stavím,

138
00:07:44,870 --> 00:07:48,250
že jsem zřejmě přišel do mého konkrétní aplikaci s cílem na mysli,

139
00:07:48,250 --> 00:07:50,280
s úkolem chtějí dokončit.

140
00:07:50,280 --> 00:07:53,650
A vaším úkolem je nejen pomoci jim splnění tohoto úkolu

141
00:07:53,650 --> 00:07:57,930
ale pomoci jim splnění tohoto úkolu způsobem, který je efektivní, intuitivní,

142
00:07:57,930 --> 00:08:01,900
a, jak se někteří člověk řekl: tam, přístupné.

143
00:08:01,900 --> 00:08:03,750
Co účinnost znamená?

144
00:08:03,750 --> 00:08:08,050
Účinnost znamená, jak rychle se moje uživatelská dokončit úkol, můj rozhraní.

145
00:08:08,050 --> 00:08:11,650
Má to trvat hodně kliknutí na ně se dostat z jednoho místa na druhé?

146
00:08:11,650 --> 00:08:14,630
Je to únavné? Mají plnit spoustu opakovaných úkolů?

147
00:08:14,630 --> 00:08:17,140
Chceme, aby se tento proces co nejefektivnější

148
00:08:17,140 --> 00:08:20,070
takže nemají dělat ty druhy věcí.

149
00:08:20,070 --> 00:08:24,230
Pokud jde o intuitivnost, to znamená, že například v případě, že uživatel zvedne mé rozhraní,

150
00:08:24,230 --> 00:08:27,240
je to pro ně snadné se dostat z místa na místo?

151
00:08:27,240 --> 00:08:30,390
Je to pro ně snadné zjistit, co mají kliknout v mém rozhraní

152
00:08:30,390 --> 00:08:33,770
aby pro ně dosažení cíle nebo úkol, který chtějí dosáhnout?

153
00:08:33,770 --> 00:08:37,520
>> A konečně, jak jeden člověk řekl: tam, dostupnost je velmi důležité.

154
00:08:37,520 --> 00:08:39,640
[Samec reproduktor] To přijde na přístupnost pro věci, jako je vize,

155
00:08:39,640 --> 00:08:42,740
líbí, jak mám vlastně navrhnout něco pro někoho, kdo je slepý?

156
00:08:42,740 --> 00:08:46,460
Oh. Pro lidi, kteří nevidí vůbec, máme něco jako čtení z obrazovky.

157
00:08:46,460 --> 00:08:49,070
Co byste měli udělat, je, měli byste stavět své webové stránky takovým způsobem,

158
00:08:49,070 --> 00:08:52,020
, že například, konkrétní technologie, co nazýváme -

159
00:08:52,020 --> 00:08:53,590
Existuje spousta věcí, nyní.

160
00:08:53,590 --> 00:08:55,660
Myslím, že tam jsou odečítače obrazovky JAWS volal.

161
00:08:55,660 --> 00:08:58,410
Mnoho z těchto věcí se spoléhají na to, co nazýváme oblast pravidla

162
00:08:58,410 --> 00:09:02,010
aby četl ven k uživateli, co je na stránce.

163
00:09:02,010 --> 00:09:05,480
Pro ty, kteří nemohou vidět, je třeba se ujistit, že tyto obrazovky čtenáři

164
00:09:05,480 --> 00:09:09,130
může skutečně vyzvednout obsah na stránce a může skutečně ukázat své uživatele,

165
00:09:09,130 --> 00:09:13,630
Pokud nevidíte, alespoň si můžete stále pochopit obsah na stránce.

166
00:09:13,630 --> 00:09:16,190
Jo. Dobře.

167
00:09:16,190 --> 00:09:23,410
Dost povídání o dobrém designu. Pojďme mluvit o špatné konstrukce.

168
00:09:23,410 --> 00:09:25,220
To jsou věci, které byste neměli dělat.

169
00:09:25,220 --> 00:09:27,890
Může mi někdo říct, o svých zkušenostech s Craigslist

170
00:09:27,890 --> 00:09:32,190
a to, co si myslí, že není tak velký o tomto návrhu?

171
00:09:33,690 --> 00:09:36,430
Ano. >> [Student] Myslím, že je to příliš mnoho slov v jedné oblasti.

172
00:09:36,430 --> 00:09:39,350
Příliš mnoho slov, ne? Zcela ohromující.

173
00:09:39,350 --> 00:09:42,400
Přijdete na této stránce a budete uvítáni s celou partou věcí až sem

174
00:09:42,400 --> 00:09:43,860
že možná ani jedno.

175
00:09:43,860 --> 00:09:47,010
Například, žijete v jednom státě, který nezačíná tohoto dopisu.

176
00:09:47,010 --> 00:09:48,690
Řekněme, že žijete v Texasu, nebo tak něco.

177
00:09:48,690 --> 00:09:53,790
>> Musíte procházet celou cestu dolů na stránku se dostanete do místa, které na.

178
00:09:53,790 --> 00:10:00,320
Jsem z Bostonu, tak ať mi to hledat v Massachusetts. Kde je Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, je to tady. Oh, to je Boston. Dobře.

180
00:10:03,270 --> 00:10:09,070
Pojďme se podívat na Boston. [Smích]

181
00:10:09,070 --> 00:10:12,250
Docela ohromující, že jo?

182
00:10:12,250 --> 00:10:16,400
Trapné věci támhle. [Smích]

183
00:10:17,320 --> 00:10:19,470
Řekněme, že jsem hledal něco žít.

184
00:10:19,470 --> 00:10:24,130
Kolik lidí vlastně používá Craigslist? Tuny vás.

185
00:10:24,130 --> 00:10:30,960
Tam jsou dost špatné způsoby, jak se dívat na to, ale pojďme se podívat na to.

186
00:10:35,130 --> 00:10:38,970
Jaký je rozdíl mezi img a pic? Může mi někdo říct,?

187
00:10:41,350 --> 00:10:42,830
Tam vlastně není žádný rozdíl.

188
00:10:42,830 --> 00:10:47,710
Znamenají přesně totéž, ale mají různé etikety pro ně z nějakého důvodu.

189
00:10:48,980 --> 00:10:53,560
Kdybych klikněte na Obsahuje obrázku, nic se neděje na stránce.

190
00:10:53,560 --> 00:10:57,490
Vlastně jsem se na tlačítko Hledat znovu se něco stane.

191
00:10:57,490 --> 00:11:02,430
Co by mohlo být lepší design rozhodnutí, které by se dalo dělat tam?

192
00:11:03,820 --> 00:11:08,030
Pokud jsem kliknout na tento filtr, bych asi chcete filtrovat podle konkrétní akce

193
00:11:08,030 --> 00:11:09,970
nebo že konkrétní kategorie.

194
00:11:09,970 --> 00:11:14,450
Takže místo toho, aby musel stiskněte Hledat znovu, mohl jsem automaticky dělat filtrování

195
00:11:14,450 --> 00:11:17,060
druh stylu Google, kde se to udělat okamžitě.

196
00:11:17,060 --> 00:11:20,440
[Malan] Ale ne tvoří, jak jsme je viděli doposud musí být fyzicky předložena

197
00:11:20,440 --> 00:11:23,170
tím, že udeří Zadejte alespoň nebo klepnutím na tlačítko?

198
00:11:23,170 --> 00:11:26,830
Jak jste viděl tak daleko, že opravdu máte na tlačítko Odeslat dělat ty věci.

199
00:11:26,830 --> 00:11:30,090
>> Ale jak Tommy Vám ukáže, do vteřiny, tam jsou vlastně způsoby, jak můžete

200
00:11:30,090 --> 00:11:33,010
tak, že když kliknete na tu věc, že ​​může automaticky odeslat

201
00:11:33,010 --> 00:11:38,840
to, co nazýváme AJAX požadavek a získat data zpět a filtrovat výsledky okamžitě.

202
00:11:38,840 --> 00:11:41,340
Existují tuny věcí, které jsou špatně s tímto rozhraním.

203
00:11:41,340 --> 00:11:43,530
[Malan] Můžete vyhledávat Cambridge?

204
00:11:43,530 --> 00:11:47,030
Je tu něco, co trochu anomální tady, kde vám záleží Cambridge

205
00:11:47,030 --> 00:11:54,790
a přesto jste stále Westford, Spring Hill, West Newton a jako.

206
00:11:54,790 --> 00:11:57,930
Pravděpodobně není ideální. Pravděpodobně >> není ideální.

207
00:11:57,930 --> 00:12:03,900
Jak bych mohl být schopen provést uživatele zážitek lepší na tuto konkrétní stránku?

208
00:12:03,900 --> 00:12:07,340
Ano. >> [Student] Pokyny.

209
00:12:07,340 --> 00:12:09,500
Dobře. Instrukce v jaké smyslu?

210
00:12:09,500 --> 00:12:14,630
[Student] Například věc pro nové uživatele, kteří ani nevědí, co Craigslist je

211
00:12:14,630 --> 00:12:17,320
nebo nevíte, co máte dělat.

212
00:12:17,320 --> 00:12:20,150
Přesně tak. Takže vysvětlovat, co Craigslist je na této stránce je důležité.

213
00:12:20,150 --> 00:12:23,490
Můžeme vlastně říci, uživatelů, co tato stránka je ve skutečnosti pro.

214
00:12:23,490 --> 00:12:27,090
Pokud jsem jen na návštěvě to, vidím spoustu míst. Já ani nevím, co to znamená.

215
00:12:27,090 --> 00:12:29,730
Ale mnohem důležitější je, jen při pohledu na toto rozhraní,

216
00:12:29,730 --> 00:12:35,530
pamatujte si, že musel rolovat dolů spoustu věcí najít konkrétní komunitu

217
00:12:35,530 --> 00:12:37,560
že jsem vlastně záleželo na tom.

218
00:12:37,560 --> 00:12:39,820
Co je to rychlejší způsob, jak bych mohl udělat, že? Ano.

219
00:12:39,820 --> 00:12:43,290
[Student] Rozdělte je do oblastí na východ, západ. Dobře >>.

220
00:12:43,290 --> 00:12:47,460
Mohl bych je rozdělit do více kategorií, které by mi mohl pomoci rychleji určit

221
00:12:47,460 --> 00:12:49,820
jak se dostat do daného místa.

222
00:12:49,820 --> 00:12:54,510
[Student] Dejte rozevírací seznam. Právo >>. Dobře.

223
00:12:54,510 --> 00:12:58,240
Mohl bych použít drop-down menu, protože máme pevnou sadu věcí

224
00:12:58,240 --> 00:13:00,100
a my jsme mohli ukázat jim v drop-down menu.

225
00:13:00,100 --> 00:13:02,240
Takhle to nezabírá tolik místa na obrazovce.

226
00:13:02,240 --> 00:13:05,630
Ale ještě lepší než to, co můžeme dělat?

227
00:13:05,630 --> 00:13:09,220
Ano. >> [Neslyšitelné Student reakce] >> Můžete říci, že znovu? >> [Student] Search box.

228
00:13:09,220 --> 00:13:11,260
Jo, vyhledávací okno. To je skvělé.

229
00:13:11,260 --> 00:13:16,430
Co můžeme skutečně udělat, je, když se podíváme zpět na sklíčka, vyhledávacího pole.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Velmi snadný způsob, jak vyhledávat na základě výsledků, které znáte, jsou v sadě.

231
00:13:21,520 --> 00:13:25,980
Když začnu psát BO, jen ukázat mi všechny výsledky, které mají BO uvnitř nich.

232
00:13:25,980 --> 00:13:29,030
Tak jsem si velmi snadno najít konkrétní jediná, kterou chci jít do

233
00:13:29,030 --> 00:13:32,390
místo toho, aby museli listovat to opravdu velkého seznamu.

234
00:13:32,390 --> 00:13:37,450
>> Jedná se o všechny druhy opravdu nízko visící ovoce, že někdo, kdo je provádí Craigslist

235
00:13:37,450 --> 00:13:42,500
může skutečně udělat, aby zážitek na internetových stránkách mnohem lepší pro jejich konkrétní uživatele.

236
00:13:42,500 --> 00:13:46,370
Dobře. Dost mluví o špatných stránkách.

237
00:13:46,370 --> 00:13:49,410
Pojďme mluvit o Facebooku.

238
00:13:50,880 --> 00:13:54,390
Když Facebook vyšel, a zejména Facebook fotky,

239
00:13:54,390 --> 00:13:57,870
tam bylo hodně dalších služeb v době, která by mohla dělat přesně stejné věci.

240
00:13:57,870 --> 00:14:00,740
Mohli organizovat své fotografie do alba.

241
00:14:00,740 --> 00:14:03,360
Co můžete udělat, je můžete uspořádat do sad stejně.

242
00:14:03,360 --> 00:14:06,070
Dalo by se uspořádat je podle data. Dalo by se dělat všechny tyto konkrétní věci.

243
00:14:06,070 --> 00:14:11,710
Ale nevíte někdo, co dělal Facebook fotografií exploduje v době, kdy byl propuštěn?

244
00:14:11,710 --> 00:14:15,080
Ano. >> [Studentských] Tagy. Tagy >>. Přesně tak.

245
00:14:15,080 --> 00:14:21,300
Máme Milo přes tu, která je náš pes maskot s tímto šátkem CS50.

246
00:14:21,300 --> 00:14:24,810
Můžete vidět, že máme tuto funkci značkování ve středu.

247
00:14:24,810 --> 00:14:28,240
A to, co se Facebook fotky tak zajímavé z hlediska použitelnosti

248
00:14:28,240 --> 00:14:34,130
je to, že vlastně dovolil lidem přes tento zapojit své přátele v jejich fotografií.

249
00:14:34,130 --> 00:14:37,680
Pro Facebook, protože jejich stránky jsou zejména sociální,

250
00:14:37,680 --> 00:14:40,750
je to o budování tento druh společenské atmosféry.

251
00:14:40,750 --> 00:14:42,620
To zlepšilo zážitek fotografií mnohem více

252
00:14:42,620 --> 00:14:46,390
protože by se skutečně začalo říkat, "To jsou spojení mezi lidmi,

253
00:14:46,390 --> 00:14:49,220
a to jsou fotky o lidi, které skutečně záleží. "

254
00:14:49,220 --> 00:14:52,200
Součástí je také jakoby narcismus.

255
00:14:52,200 --> 00:14:54,980
Lidé chtěli být označeni na fotky a podobné věci.

256
00:14:54,980 --> 00:14:58,510
I když to není nutně dobré lidské zvláštnost,

257
00:14:58,510 --> 00:15:01,910
zároveň je to na základě dobré designu rozhodnutí

258
00:15:01,910 --> 00:15:04,860
proto, že lidé skutečně záleží věci, jako 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 pojďme mluvit Facebook obecněji.

261
00:15:09,800 --> 00:15:13,400
Jsem si jistý, že spousta lidí, kteří zde mají názory na Facebook,

262
00:15:13,400 --> 00:15:16,430
oba dobrý design rozhodnutí a špatné provedení rozhodnutí.

263
00:15:16,430 --> 00:15:20,270
Takže pojďme ventilovat nebo být šťastný.

264
00:15:23,480 --> 00:15:26,450
Pojď. Vím, že vás všechny používat Facebook.

265
00:15:26,450 --> 00:15:30,970
Někdo musí mít něco špatného říct, nebo něco dobrého říct o tom. Ano.

266
00:15:30,970 --> 00:15:35,060
[Student] V novinek je tu spousta věcí, které jsem se opravdu záleží.

267
00:15:35,060 --> 00:15:37,740
News Feed se ukázat mnoho věcí, které jste možná nezajímá.

268
00:15:37,740 --> 00:15:41,660
Máte přátele na Facebooku, kteří jste se setkal na 2 nebo 3 roky

269
00:15:41,660 --> 00:15:43,860
a uvidíte jejich zprávy výsledky objevovat ve vašem novinek

270
00:15:43,860 --> 00:15:45,870
a opravdu nestarám o to.

271
00:15:45,870 --> 00:15:48,700
Facebook skutečně dělal úsilí, aby to lepší,

272
00:15:48,700 --> 00:15:53,150
a že jsem se snažil tlačit příslušné výsledky v horní části novinek jako pozdní

273
00:15:53,150 --> 00:15:58,300
takže jste vlastně vidět věci přáteli, které jsou relevantní pro Vás nebo Vaše blízké přátele.

274
00:15:58,300 --> 00:16:01,110
Ještě něco? Ano.

275
00:16:01,110 --> 00:16:06,400
[Neslyšitelný studentů odpověď] >> Můžete říci, že znovu?

276
00:16:06,400 --> 00:16:10,140
[Student] Tyto reklamy jsou poměrně nenápadné. >> V jakém smyslu?

277
00:16:10,140 --> 00:16:16,370
[Neslyšitelné Student odpověď] Nemají světlo na obrazovce, jako bannery.

278
00:16:16,370 --> 00:16:17,760
Dobře. To je dobře.

279
00:16:17,760 --> 00:16:25,030
Pokud si pamatujete na internetu od 90. let - >> [Malan] Byl jsem tam. >> Byl tam. [Smích]

280
00:16:25,030 --> 00:16:29,210
Možná si ještě vzpomínáte blikající Gify pozadí, jiskřivé věci,

281
00:16:29,210 --> 00:16:31,570
GeoCities styl druh věcí.

282
00:16:31,570 --> 00:16:34,080
To opravdu není příklad dobrého designu

283
00:16:34,080 --> 00:16:36,690
protože je to opravdu neodvádí pozornost od obsahu.

284
00:16:36,690 --> 00:16:39,590
Umění Yale stránky míval animované GIFy jako jejich pozadí

285
00:16:39,590 --> 00:16:41,800
a vy jste nemohli přečíst něco na stránce,

286
00:16:41,800 --> 00:16:44,870
ale myslím, že někdo skutečně mluvil s nimi, a teď je to trochu jiné.

287
00:16:44,870 --> 00:16:48,940
[Malan] Je to mnohem líp. >> Je to mnohem lepší, teď, jak můžete vidět. >> [Malan] Ach jo.

288
00:16:48,940 --> 00:16:56,020
Prostě skvělé, jen - Jo. Dobře.

289
00:16:56,020 --> 00:17:00,560
>> Část z toho je také, aby vaše stránky možná velmi minimalistický a velmi srozumitelné

290
00:17:00,560 --> 00:17:05,690
takže věci na stránku průtoku způsobem, který je velmi logické a nejsou v cestě každého jiný.

291
00:17:05,690 --> 00:17:11,849
Jaké druhy jiných věcí jsou dobré na Facebooku nebo špatný o Facebooku?

292
00:17:11,849 --> 00:17:15,730
Prostě mají konstrukční rozhovor zde.

293
00:17:19,470 --> 00:17:21,339
Oh. Kde? Jo.

294
00:17:21,339 --> 00:17:25,640
[Student] Nový Timeline systém umožňuje prohledávat osoby profilu o své minulosti.

295
00:17:25,640 --> 00:17:28,119
Ooh, časovou osu.

296
00:17:28,119 --> 00:17:30,280
Časová osa je skvělá věc, protože umožňuje stonku svým přátelům

297
00:17:30,280 --> 00:17:33,300
zpět, když byli na střední škole.

298
00:17:35,160 --> 00:17:38,060
Časová osa je dobré, protože to umožňuje filtrovat pomocí obsahu hodně rychlejší,

299
00:17:38,060 --> 00:17:41,500
To vám umožní najít věci, které by jinak byly pořízené vám opravdu dlouho najít

300
00:17:41,500 --> 00:17:45,840
jen pohyb nahoru a dolů, nahoru, nahoru, nahoru, nahoru, nahoru, jako vrátit se zpět v čase.

301
00:17:45,840 --> 00:17:48,910
Ale pak je tu také trochu nevýhodu, aby, že pokud jde o uživatelské zkušenosti.

302
00:17:48,910 --> 00:17:51,190
Co by to mohlo být?

303
00:17:51,190 --> 00:17:56,780
Big slovo, které začíná P-R. >> [Student] Ochrana osobních údajů. >> Privacy, že jo?

304
00:17:56,780 --> 00:17:59,970
Ochrana osobních údajů je obrovský uživatelské zkušenosti problém.

305
00:17:59,970 --> 00:18:07,190
To je jedna z věcí, které nenávidím nejvíc Facebooku teď. [Smích]

306
00:18:07,190 --> 00:18:09,000
[Malan] Jak mám teď.

307
00:18:09,000 --> 00:18:11,380
David si neuvědomil, to se skutečně stalo až do včerejška.

308
00:18:11,380 --> 00:18:14,560
Takže teď už ví, že pokaždé, když jsem chatovat mu, že vím, že byl ignoruje mě.

309
00:18:14,560 --> 00:18:16,880
[Malan] trapné část byla jsem vlastně ho ignorovala,

310
00:18:16,880 --> 00:18:21,040
a já jsem nevěděl, že on věděl, že jsem ignoroval ho. [Smích]

311
00:18:21,040 --> 00:18:24,030
Ochrana osobních údajů je obrovský problém.

312
00:18:24,030 --> 00:18:28,670
Může tady někdo mi říct, co by mohlo být špatně Facebook soukromí

313
00:18:28,670 --> 00:18:32,270
kromě toho, že se takové věci?

314
00:18:32,270 --> 00:18:37,240
Co je to obzvlášť těžké udělat s ohledem na Facebooku soukromí?

315
00:18:37,240 --> 00:18:40,340
Taková je hlavní otázka.

316
00:18:41,680 --> 00:18:43,930
Ano. >> [Student] Skrýt své fotografie z některých lidí.

317
00:18:43,930 --> 00:18:46,170
Přesně tak. Přesně, skrýt vaše snímky z některých lidí.

318
00:18:46,170 --> 00:18:51,290
Mají tento malý, malé tlačítko v pravém horním rohu, který vám umožní přepínat soukromí fotografii.

319
00:18:51,290 --> 00:18:56,360
Jejich možnosti ochrany osobních údajů jsou velmi různorodé a mezi různými druhy menu.

320
00:18:56,360 --> 00:18:59,510
>> Oni se dostali mnohem lépe o tom v poslední době, ale to bylo v případě

321
00:18:59,510 --> 00:19:04,870
že kdykoli byste chtěli, aby se vaše přátele z pozorovacích fotografií,

322
00:19:04,870 --> 00:19:08,280
budete muset projít velmi komplikované 5-stupňovým procesem bytí jako,

323
00:19:08,280 --> 00:19:11,150
dovolte mi, abych na tento odkaz, teď mi dovolte klepněte na tlačítko znovu, dovolte mi, abych znovu klepněte,

324
00:19:11,150 --> 00:19:13,420
dovolte mi, abych specifikovat, které lidé nemohou vidět mé fotografie.

325
00:19:13,420 --> 00:19:17,250
To není zvláště dobré na straně Facebooku je

326
00:19:17,250 --> 00:19:20,530
protože tolik o zkušenostech se vlastně dává jim svobodu

327
00:19:20,530 --> 00:19:22,460
kontrolovat, co lidé mohou vidět.

328
00:19:22,460 --> 00:19:25,550
Říkáme tomu uživatelský ovládací prvek a svobodu.

329
00:19:25,550 --> 00:19:31,090
Pokud si nejste nechat vaši uživatelé dělají, že způsobem, který je efektivní a intuitivní,

330
00:19:31,090 --> 00:19:34,570
pak se vaše uživatelské zkušenosti není opravdu tak velký vůbec.

331
00:19:34,570 --> 00:19:38,200
 Chtěli jste chtěl říci něco o Facebook?

332
00:19:38,700 --> 00:19:41,420
Jak mohu tuto funkci vypnout?

333
00:19:41,420 --> 00:19:46,290
[Ong] nelze tuto funkci vypnout, a to je obrovský použitelnost chyba na straně Facebooku.

334
00:19:46,290 --> 00:19:49,410
Tato funkce - jsem skutečně podíval do toho včera -

335
00:19:49,410 --> 00:19:53,940
je to buď, že nemůžete udělat, nebo to je pohřben někde velmi, velmi hluboko

336
00:19:53,940 --> 00:19:58,050
v záhybech Facebook, protože nemůžu přijít na to, jak tuto funkci zakázat vůbec.

337
00:19:58,050 --> 00:20:00,400
[Malan] Ale někdy tato rozhodnutí nejsou zřejmé

338
00:20:00,400 --> 00:20:03,890
protože jste nám dali hodně užitečnou zpětnou vazbu na různých CS50 aplikací

339
00:20:03,890 --> 00:20:05,710
a webové stránky, které kurz používá.

340
00:20:05,710 --> 00:20:10,260
Jsme neprovedly všechny tyto požadavky a návrhy.

341
00:20:10,260 --> 00:20:14,550
>> Část, která je pro získání tolik žádostí, že se jedná o funkci času,

342
00:20:14,550 --> 00:20:17,070
ale někdy prostě učinit vědomé rozhodnutí, jako,

343
00:20:17,070 --> 00:20:19,830
"Děkuji vám za návrh, ale my nesouhlasíme."

344
00:20:19,830 --> 00:20:24,350
Tak jak se vám vlastně rozhodnout, co byste měli dělat, pokud vaši uživatelé, že bys měl něco udělat

345
00:20:24,350 --> 00:20:28,110
i když ne nutně?

346
00:20:28,110 --> 00:20:32,360
Je to jemná rovnováha mezi skutečně naslouchat tomu, co uživatelé říkají

347
00:20:32,360 --> 00:20:35,840
a skutečně má nějaký řádek, kde říkáte,

348
00:20:35,840 --> 00:20:37,750
"Nebudeme dělat to, co tito uživatelé říkají."

349
00:20:37,750 --> 00:20:42,520
A zejména, myslím, že tam byl citát Henryho Forda, že to shrnuje docela dobře.

350
00:20:42,520 --> 00:20:47,130
"Když jsem se zeptal lidí, co chtějí, by řekli, že chtějí rychlejší koně."

351
00:20:47,130 --> 00:20:51,840
Může mi někdo nějak šprýmaři odděleně, co to ve skutečnosti znamená citát?

352
00:20:51,840 --> 00:20:56,060
Není to jen, že uživatelé vědí, co chtějí,

353
00:20:56,060 --> 00:20:59,180
ale je to víc, že ​​-

354
00:20:59,180 --> 00:21:02,720
[Student] Oni nevědí, co je možné.

355
00:21:02,720 --> 00:21:06,140
V části nevědí, co je možné.

356
00:21:07,880 --> 00:21:11,440
Tease, že kromě trochu víc. Co tím myslíš, že?

357
00:21:11,440 --> 00:21:21,340
[Neslyšitelné Student odpověď]

358
00:21:21,340 --> 00:21:25,770
To je dobře. Co si myslím, že se snažíme říct je, že lidé vědí, co chtějí.

359
00:21:25,770 --> 00:21:28,050
Chtějí rychlejší koně.

360
00:21:28,050 --> 00:21:29,840
To, co opravdu chtějí, je schopnost pohybovat se rychleji,

361
00:21:29,840 --> 00:21:32,310
ale opravdu nevím, médium, kterým k dosažení, že.

362
00:21:32,310 --> 00:21:36,330
Když přijde na uživatele a uživatelé vám něco říct

363
00:21:36,330 --> 00:21:39,700
a řeknou vám, "My chceme tyto funkce a tyto funkce a tyto funkce,"

364
00:21:39,700 --> 00:21:42,650
nechcete nutně myslet, "Nech mě jít napřed

365
00:21:42,650 --> 00:21:44,720
"A realizovat to, co by se výslovně říká,"

366
00:21:44,720 --> 00:21:48,610
ale to, co chcete myslet, je, "Jaké myšlenky mohu dostat z toho?"

367
00:21:48,610 --> 00:21:50,450
Co vlastně chtějí?

368
00:21:50,450 --> 00:21:55,560
>> A odtud, co můžete udělat, je navrhnout něco, co splňuje tyto požadavky

369
00:21:55,560 --> 00:22:00,340
ale ne nutně tak, že uživatel očekává, že bude spokojen.

370
00:22:00,340 --> 00:22:03,830
Takže něco jako finálových projektů, ve velmi reálně,

371
00:22:03,830 --> 00:22:07,900
co je užitečné, heuristická, pokud jde o výrobu něco lepšího,

372
00:22:07,900 --> 00:22:10,630
zejména pokud návrhář má tuto aroganci o něm

373
00:22:10,630 --> 00:22:14,360
kdy jste nějak víte, co je nejlepší, můžete mít vstup z vašich uživatelů,

374
00:22:14,360 --> 00:22:16,580
ale jak se vlastně jít o získání, že zpětná vazba?

375
00:22:16,580 --> 00:22:21,610
V závěrečných prací, velmi konkrétně, co vytváří optimální výsledky zde?

376
00:22:21,610 --> 00:22:25,030
Co produkuje optimální výsledky - a já půjdu přes to v druhém -

377
00:22:25,030 --> 00:22:29,190
je tento proces rozvoje a pak testování a pak iterace.

378
00:22:29,190 --> 00:22:32,020
Co tím chci říct testování je obvykle, když si navrhnout něco

379
00:22:32,020 --> 00:22:36,970
si myslíte, že je to docela dobrý, jako, "já jsem tak skvělý designer. Každý se bude líbit."

380
00:22:36,970 --> 00:22:41,600
A pak jste to tam, a lidé nemají opravdu rád nějakého důvodu.

381
00:22:41,600 --> 00:22:46,820
Co musíte udělat, je budete muset vzít části věcí, které lidé dělají, jako

382
00:22:46,820 --> 00:22:49,180
a předělat věci, které lidé nemají rádi.

383
00:22:49,180 --> 00:22:53,080
To zní jako velmi zřejmým procesu, ale tento proces neustále iterace

384
00:22:53,080 --> 00:22:55,980
na vrcholu toho, co jste již postaven, je proces, který vám pomůže

385
00:22:55,980 --> 00:22:59,730
nejen zdokonalit své vlastní návrhářské schopnosti, ale také vám pomůže zdokonalit design

386
00:22:59,730 --> 00:23:03,790
tak, že lidé skutečně ocení váš produkt ještě víc než dřív.

387
00:23:03,790 --> 00:23:07,390
>> Půjdu přes více konkrétní příklady toho, co by se Vám mohl vlastně dělat.

388
00:23:07,390 --> 00:23:11,390
Jako jakési poslední příklad výrobku, pojďme se podívat na kajaku.

389
00:23:11,390 --> 00:23:14,970
KAYAK, když to vyšlo bylo velmi, velmi populární.

390
00:23:14,970 --> 00:23:18,760
Může někdo hádat, proč?

391
00:23:18,760 --> 00:23:20,950
Jaké jsou druhy věcí, které rád o tom, pokud jste použili

392
00:23:20,950 --> 00:23:23,990
nebo jaké jsou druhy věcí se vám nelíbí?

393
00:23:23,990 --> 00:23:31,590
Ano. >> [Neslyšitelné Student odpověď] >> Dobře.

394
00:23:31,590 --> 00:23:34,730
To je součástí toho je nechat uživatel mít dotaz, který je mnohem obsáhlejší

395
00:23:34,730 --> 00:23:38,150
než velmi restriktivní jeden jako, "Musíte k vyzvednutí datum zahájení

396
00:23:38,150 --> 00:23:39,810
"A vy budete muset vybrat datum ukončení."

397
00:23:39,810 --> 00:23:44,910
Ve skutečnosti, to vám umožní být flexibilní na to, a to vám dává všechny letů v tomto rozsahu.

398
00:23:44,910 --> 00:23:46,730
Ještě něco?

399
00:23:46,730 --> 00:23:50,530
[Student] Jedná se například o poplatky v ceně.

400
00:23:50,530 --> 00:23:53,330
Dělají zahrnují poplatky v ceně.

401
00:23:53,330 --> 00:23:56,720
Daně a věci skutečně jít rovnou do této ceny v levé horní části

402
00:23:56,720 --> 00:24:00,710
takže nejste napálil do myšlení, že jste skutečně platit za 240 dolarů letu

403
00:24:00,710 --> 00:24:03,280
když je to opravdu 330 dolarů.

404
00:24:03,280 --> 00:24:06,200
Ještě něco? Ano.

405
00:24:06,200 --> 00:24:10,140
[Neslyšitelné Student odpověď]

406
00:24:10,140 --> 00:24:14,610
Nejsem si jistý, jestli se skutečně nechat udělat.

407
00:24:14,610 --> 00:24:18,310
I Might Be Wrong.

408
00:24:18,310 --> 00:24:23,360
To by mohlo být zajímavé, pokud chcete, aby větší váhu na konkrétních filtrech

409
00:24:23,360 --> 00:24:27,000
tak, že tlačí výsledky související s tímto filtrem na vrchol.

410
00:24:27,000 --> 00:24:31,920
Ale může mi někdo říct, co je tak zvláštního na tomto levé straně?

411
00:24:31,920 --> 00:24:39,540
Jak jste se tradičně podívat nahoru do patra na internetové služby před tím?

412
00:24:41,600 --> 00:24:44,650
>> Ano. >> [Neslyšitelné Student reakce] >> Můžete říci, že -

413
00:24:44,650 --> 00:24:47,530
[Student] Každá letecká společnost. Jo >>. Každá letecká společnost má své vlastní internetové stránky.

414
00:24:47,530 --> 00:24:50,110
To konsoliduje věci. A?

415
00:24:50,110 --> 00:24:52,190
[Student] Víš přesně, co když budete opouštět.

416
00:24:52,190 --> 00:24:54,460
Víte přesně, v kolik hodin odcházíš,

417
00:24:54,460 --> 00:24:59,380
ale souvisí s filtry zejména.

418
00:25:00,710 --> 00:25:03,540
Dovolte mi, abych vytáhnout kajaku.

419
00:25:11,490 --> 00:25:14,020
Ach, Bože, pop-ups. Bad uživatelské zkušenosti.

420
00:25:14,020 --> 00:25:17,230
Co se stane, když jsem se přesunout tohoto posuvníku?

421
00:25:17,230 --> 00:25:21,010
[Studentských] Automatické aktualizace. >> [Ong] Automatické aktualizace.

422
00:25:21,010 --> 00:25:23,440
To je něco, co je velmi důležité.

423
00:25:23,440 --> 00:25:25,380
Před tím, když jste chtěli podívat nahoru do patra,

424
00:25:25,380 --> 00:25:28,410
jste museli dát do vstupního místa, váš výstup umístění, stiskněte tlačítko Hledat,

425
00:25:28,410 --> 00:25:31,190
to by proces, který a zobrazit výsledky.

426
00:25:31,190 --> 00:25:34,120
Pokud byste chtěli změnit svůj dotaz, měli byste se vymáčknout dvakrát,

427
00:25:34,120 --> 00:25:39,770
vstoupit do nového dotazu od nuly, a pak to znovu a znovu.

428
00:25:39,770 --> 00:25:43,910
Pěkná věc, o něčem, jako je to, že používá velmi [nesrozumitelné] věc ve středu.

429
00:25:43,910 --> 00:25:46,230
Kdykoli budete něco takového, to střílí mimo žádost

430
00:25:46,230 --> 00:25:48,420
a vrátí vám všechny výsledky okamžitě.

431
00:25:48,420 --> 00:25:51,680
Tento druh okamžitou zpětnou vazbu, je něco, co dělal KAYAK velmi populární

432
00:25:51,680 --> 00:25:55,910
protože je to opravdu snadné pro mě jen změnit svůj dotaz

433
00:25:55,910 --> 00:25:58,890
a přijít na to, věci, které jsou kolem určitého rozsahu

434
00:25:58,890 --> 00:26:01,950
aniž by museli jít tam a zpět, tam a zpátky, tam a zpátky.

435
00:26:01,950 --> 00:26:05,200
Tak to jsou všechny možné věci, které chcete myslet, když jste navrhování své webové stránky.

436
00:26:05,200 --> 00:26:08,930
Jak mohu dělat to velmi efektivní pro moji uživatelé projít, co pracují na

437
00:26:08,930 --> 00:26:13,010
a aby se jejich konečným cílem je tak rychle, jak je to možné?

438
00:26:13,010 --> 00:26:16,430
[Malan] A do bodu Josefa starší o uživatelích nejsou nutně vědět, co chtějí,

439
00:26:16,430 --> 00:26:18,640
na základě toho, co jste již slyšeli o HTML

440
00:26:18,640 --> 00:26:22,780
a máte políčka, přepínače, zvolte menu, vstupní pole a podobně,

441
00:26:22,780 --> 00:26:26,140
jak byste implementovat pojem výběrem počáteční čas letu?

442
00:26:26,140 --> 00:26:30,030
>> Které z těchto různých UI mechanismy byste používat?

443
00:26:30,030 --> 00:26:34,100
Pokud jste právě znát množství kódu HTML, který byl vyučován před

444
00:26:34,100 --> 00:26:39,070
a víte, že vstupy jsou přepínací tlačítka, checkboxy, drop-sestřelí, a vstupní pole,

445
00:26:39,070 --> 00:26:43,320
co by si přirozenou volbou byly pro uchopení data?

446
00:26:43,320 --> 00:26:48,670
[Student] vstup. Vstupní >>. Nebo možná i drop-dole se všemi daty, ne?

447
00:26:48,670 --> 00:26:53,170
Takže s složitějších UI mechanismů, jako je tento na levé straně, které můžete implementovat,

448
00:26:53,170 --> 00:26:55,500
můžete tento proces mnohem intuitivnější s jezdcem

449
00:26:55,500 --> 00:27:01,020
protože čas je spojitá, a lidé obvykle nemyslí na to, pokud jde o diskrétních bloků.

450
00:27:01,020 --> 00:27:04,950
Dobrá. Poslední věc.

451
00:27:04,950 --> 00:27:07,370
Deset použitelnost heuristiky.

452
00:27:07,370 --> 00:27:10,820
Všechny ty věci, s nimiž jsme hovořili o tom pravděpodobně spadají do jedné z těchto kategorií.

453
00:27:10,820 --> 00:27:14,420
Pokud půjdete na tento odkaz, které stránky budou umístěny na internet,

454
00:27:14,420 --> 00:27:18,900
budete skutečně moci, jak si navrhnout své stránky, aby tyto heuristiky na paměti

455
00:27:18,900 --> 00:27:21,330
a tato pravidla palce.

456
00:27:21,330 --> 00:27:26,610
Pro vaše projekty, co radím vám, abyste s cílem navrhnout app lépe

457
00:27:26,610 --> 00:27:28,850
je to papír prototypování jako první.

458
00:27:28,850 --> 00:27:32,150
Pokud uvažujete o své žádosti, velmi rychle načrtnout to, co chcete, aby to vypadalo, jako

459
00:27:32,150 --> 00:27:36,230
a zajistit, aby všechny krabice jsou uspořádány tak, že je velmi intuitivní pro uživatele k použití

460
00:27:36,230 --> 00:27:39,820
a dokonce ukazují tyto papírové prototypy svým přátelům a začít cílových skupin.

461
00:27:39,820 --> 00:27:44,230
Jen si 2 nebo 3 lidi dohromady a požádat je, aby právě klepněte na těchto papírových prototypů,

462
00:27:44,230 --> 00:27:47,650
a ukázat jim nové obrazovky, aby zjistili, zda skutečně pochopit, co se děje.

463
00:27:47,650 --> 00:27:50,680
>> Co chcete udělat, je dát jim úkol, motivovat, že úkol,

464
00:27:50,680 --> 00:27:53,270
a dej jim na aplikaci a nechat je používat.

465
00:27:53,270 --> 00:27:56,530
Nedávejte jim pokyny za tím.

466
00:27:56,530 --> 00:28:00,920
Chcete-li skutečně nechat interakci s vaší aplikace tak, že vám umožní vidět

467
00:28:00,920 --> 00:28:03,870
jak by použít, pokud jste nebyli stál vedle nich.

468
00:28:03,870 --> 00:28:05,250
A to je velmi důležité.

469
00:28:05,250 --> 00:28:08,780
To vám dá spoustu nových poznatků, aby se lidé dostat kolem konkrétních věcí

470
00:28:08,780 --> 00:28:10,560
tak, že jsem nezamýšlel je?

471
00:28:10,560 --> 00:28:14,680
Jsou použitím určitých rozhraní mechanismů na obrazovce

472
00:28:14,680 --> 00:28:17,490
takovým způsobem, který je druh háčky?

473
00:28:17,490 --> 00:28:22,020
Neměl jsem v úmyslu pro ně to tak.

474
00:28:22,020 --> 00:28:23,940
A jakmile jste hotovi s tím, co chceš dělat?

475
00:28:23,940 --> 00:28:26,010
Vaše konstrukce skály, ne?

476
00:28:26,010 --> 00:28:29,600
Co chcete udělat, je, že chcete vyvíjet a pak to, že proces znovu.

477
00:28:29,600 --> 00:28:32,110
Tak ukaž to přátelům, jakmile jste ho vyvinul, otestovat,

478
00:28:32,110 --> 00:28:36,630
vyvíjet, testovat, vyvíjet, testovat, iterovat, dál a dál a dál.

479
00:28:36,630 --> 00:28:39,720
Provedení je velmi opakovaný proces v tomto smyslu.

480
00:28:39,720 --> 00:28:43,280
Máte skutečně něco postavit a pak si uvědomí, co o něm

481
00:28:43,280 --> 00:28:46,520
že jste si neuvědomil, před a vrátit a zlepšit z toho.

482
00:28:46,520 --> 00:28:50,890
Nyní, stejně jako pro rozvojové části, to je to, co Tommy se chystá ukázat vám po přestávce

483
00:28:50,890 --> 00:28:53,220
a jak byste měli být schopni realizovat něco jako autocomplete

484
00:28:53,220 --> 00:28:56,610
způsobem, který je velmi jednoduchá.

485
00:28:57,440 --> 00:28:59,550
[Malan] Jak Tommy nastaví tady, otázka pak.

486
00:28:59,550 --> 00:29:03,780
Mnoho z prvních webových stránek - a když řekl Josef 1990 ve stylu webové stránky,

487
00:29:03,780 --> 00:29:07,640
bylo to implementace, kde, pokud jste chtěli zvolit čas začátku a čas konce,

488
00:29:07,640 --> 00:29:10,380
upřímně řečeno, zpět v den, a dokonce i na některých webových stránkách dnes,

489
00:29:10,380 --> 00:29:13,220
způsob, jak to udělat, je vybrat si hodinu z drop-dolů,

490
00:29:13,220 --> 00:29:15,910
si vyberete minut od drop-dolů, možná si vyberete AM, PM,

491
00:29:15,910 --> 00:29:17,440
a pak uděláte, že další 3 krát.

492
00:29:17,440 --> 00:29:19,920
A tak s 6 kliknutí a možná i posouvání

493
00:29:19,920 --> 00:29:24,000
Vaše uživatelské může skutečně poskytnout nějakou datum a / nebo časový rozsah v tomto smyslu.

494
00:29:24,000 --> 00:29:27,920
>> Takže rozhodně optimální a přesto tak daleko jsme viděli žádné vyjadřovací možnosti

495
00:29:27,920 --> 00:29:30,330
v některém z jazyků Podívali jsme se na to udělat něco více sexy

496
00:29:30,330 --> 00:29:32,620
líbí tento jezdec začátku a čas konce.

497
00:29:32,620 --> 00:29:36,290
Ale pokud si myslíte, že zpět do týdne 0, když jsme hovořili o Scratch,

498
00:29:36,290 --> 00:29:39,080
tam taky nebylo widgety, které prostě určité věci.

499
00:29:39,080 --> 00:29:42,700
Opravdu prostě musel tyto základní principy, jako je vedení a podmínky a jako.

500
00:29:42,700 --> 00:29:46,910
Takže trochu jsem přemýšlel velmi abstraktně teď, nezávisle na údaje o HTML,

501
00:29:46,910 --> 00:29:51,260
Co se opravdu děje s něčím, jako je tento čas začátku a čas konce jezdcem?

502
00:29:51,260 --> 00:29:54,960
Když jsem se pohnout myší a já klikněte na té malé mrkví symbol na levé

503
00:29:54,960 --> 00:29:59,220
a začnete přetahovat, programově, co je to chcete být schopni realizovat

504
00:29:59,220 --> 00:30:01,000
aby se tak stalo?

505
00:30:01,000 --> 00:30:04,920
Jaké otázky, co Boolean výrazy chceš mít možnost požádat?

506
00:30:04,920 --> 00:30:06,930
Co se vlastně děje? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Student] Kde je pozice kurzoru? Dobrý >>. Kde je pozice kurzoru?

508
00:30:10,080 --> 00:30:11,970
To bylo něco, co jsme potřebovali vyjádřit zpět Scratch,

509
00:30:11,970 --> 00:30:14,690
zda to bylo založeno na místě, nebo dokonce barvu nebo podobně.

510
00:30:14,690 --> 00:30:18,410
Můžete vzpomenout někdy tak krátce v pondělí bylo všechny tyto věci nazývají události

511
00:30:18,410 --> 00:30:22,370
ve světě webu, a tak je tu věci jako 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 uvědomit, že i tyto věci jsme užívali jako samozřejmost na webu

514
00:30:29,130 --> 00:30:32,190
s weby jako Facebook a Gmail, i když nemají tušení,

515
00:30:32,190 --> 00:30:34,890
jak byste možná realizovat, protože není nic, i jako to v přednášce

516
00:30:34,890 --> 00:30:38,570
nebo problém Nastavit 7, si uvědomit, že s těmito přesnými stejnými základy,

517
00:30:38,570 --> 00:30:41,090
s HTTP a parametry a GET a POST,

518
00:30:41,090 --> 00:30:44,010
se základními HTML vstupů, které Podívali jsme se na dosud

519
00:30:44,010 --> 00:30:47,690
a za chvíli s programovými mechanismy, které Tommy je asi představit

520
00:30:47,690 --> 00:30:51,300
můžete začít vyjádřit sám sebe, stejně jako jste v týdnu 0

521
00:30:51,300 --> 00:30:53,800
by velmi intuitivně přetažením.

522
00:30:53,800 --> 00:30:58,950
>> Takže s tím řekl, Tommy MacWilliam a některé nové kousky skládačky pro nás pro web.

523
00:30:58,950 --> 00:31:03,450
Dobrá. Mé jméno je Tommy a já budu mluvit o JavaScriptu.

524
00:31:03,450 --> 00:31:07,150
Jen disclaimer: Já jsem toho názoru, že JavaScript je nejlepší programovací jazyk

525
00:31:07,150 --> 00:31:09,010
v celém celém světě.

526
00:31:09,010 --> 00:31:11,940
Existuje spousta lidí, kteří se mnou nesouhlasí, ale je to prostě úžasné.

527
00:31:11,940 --> 00:31:16,330
Jakmile se vrátíte do C, pokud máte napsat C pro jiné třídy nebo jiných jazyků,

528
00:31:16,330 --> 00:31:19,780
je to jen opravdu frustrující ve všech low-level detaily, které mají na zabřednout a.

529
00:31:19,780 --> 00:31:23,050
Takže pokud jste někdy smutno o tom, jak nepříjemné C je psát,

530
00:31:23,050 --> 00:31:25,130
se vrátit, napsat nějaký JavaScript. Je to nirvána.

531
00:31:25,130 --> 00:31:27,980
Budete se cítit mnohem lépe o své špatný den.

532
00:31:27,980 --> 00:31:31,900
Mnoho magie JavaScript pochází z její schopnosti manipulovat věci

533
00:31:31,900 --> 00:31:33,730
které jsou již na stránce.

534
00:31:33,730 --> 00:31:38,520
Když jsme napsali naše PHP skripty, byly provedeny na serveru,

535
00:31:38,520 --> 00:31:42,270
a nakonec, že ​​PHP skript pravděpodobně vypíše HTML.

536
00:31:42,270 --> 00:31:45,860
To HTML byl poslán klientovi, a pak, že to bylo.

537
00:31:45,860 --> 00:31:50,180
Pokud PHP chtěl přidat tlačítko na stránku, například, to může opravdu udělat.

538
00:31:50,180 --> 00:31:54,350
Měla by mít k tomu, aby celý nový HTML soubor a odeslat, která do prohlížeče.

539
00:31:54,350 --> 00:31:57,840
S JavaScript víme, že můžeme aktualizovat věci, zatímco oni jsou již na stránce,

540
00:31:57,840 --> 00:32:00,840
a kvůli tomu jsme schopni poskytnout mnohem více okamžitou zpětnou vazbu,

541
00:32:00,840 --> 00:32:06,150
která bude opravdu zlepšit uživatelský komfort na našich webových stránkách.

542
00:32:06,150 --> 00:32:09,330
Jen rychlý rekapitulace selektorů JavaScript.

543
00:32:09,330 --> 00:32:11,590
Víme, že když budeme stáhnout HTML stránky,

544
00:32:11,590 --> 00:32:13,890
že se to být zastoupen v DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM pamatuj je to právě tento velký strom, kde jsou prvky vztahující se v tomto velkém hierarchii.

546
00:32:19,340 --> 00:32:21,810
Když jsme pracovali s databázemi v PSet 7,

547
00:32:21,810 --> 00:32:26,280
jedna z prvních věcí, které jsme potřebovali vědět, jak to udělat je vyhledávat v databázi.

548
00:32:26,280 --> 00:32:29,060
Máme tuto velkou uživatelům tabulky, a někdy jsme jen chci říct,

549
00:32:29,060 --> 00:32:33,260
"Chci jen některé z těchto uživatelů, kteří odpovídají nějakou podmínku."

550
00:32:33,260 --> 00:32:36,020
Podobně, když máme DOM potřebujeme nějaký způsob, jak to dotazování.

551
00:32:36,020 --> 00:32:39,490
Potřebujeme nějaký způsob, jak říkat, "já chci všechny tlačítka, které vypadá podobně jako

552
00:32:39,490 --> 00:32:41,860
"Nebo všech snímků na stránce."

553
00:32:41,860 --> 00:32:44,330
A tyto selektory nám umožňují udělat.

554
00:32:44,330 --> 00:32:45,690
Takže jen rychlá rekapitulace.

555
00:32:45,690 --> 00:32:50,770
To první, kdo tu je, to # předloží, co je to, že bude na výběr? Pamatuje si někdo?

556
00:32:50,770 --> 00:32:54,880
[Neslyšitelné Student odpověď] >> Jo, přesně tak.

557
00:32:54,880 --> 00:32:59,510
To bude pro vybrání prvku na stránce, která má ID odeslat.

558
00:32:59,510 --> 00:33:03,470
A tak, aby hash tag říká, že tento výběr bude fungovat s ID.

559
00:33:03,470 --> 00:33:07,630
Jak o druhé, to. Střed, co bude, že vybrat?

560
00:33:11,360 --> 00:33:15,180
Jo. >> [Student] Class. Přesně >>. Toto se nyní vyberte podle třídy.

561
00:33:15,180 --> 00:33:18,840
Rozdíl mezi ID a třídy zde je obecně ID musí být jedinečná

562
00:33:18,840 --> 00:33:20,820
v co space hledáte přes.

563
00:33:20,820 --> 00:33:23,080
Takže pokud jste hledali přes celou webovou stránku,

564
00:33:23,080 --> 00:33:27,740
měli byste mít pouze 1 prvek s touto určitou ID, takže v tomto případě předloží.

565
00:33:27,740 --> 00:33:31,330
S tříd, na druhé straně, můžeme mít více než 1 prvek na stejné straně

566
00:33:31,330 --> 00:33:33,130
se stejné třídy.

567
00:33:33,130 --> 00:33:36,580
To by mohlo být užitečné pro ostatní chci vybrat vše, co se soustředil na stránce

568
00:33:36,580 --> 00:33:38,450
spíše než jen 1 věc.

569
00:33:38,450 --> 00:33:40,310
>> A konečně, tato poslední je zde poněkud složitější,

570
00:33:40,310 --> 00:33:43,890
ale co je to bude vybrat z DOM?

571
00:33:46,650 --> 00:33:48,810
[Neslyšitelné Student odpověď] >> Co je to?

572
00:33:48,810 --> 00:33:53,250
[Student] Všechno, co tag. >> Máme 2 díly zde.

573
00:33:53,250 --> 00:33:58,070
Druhá část je říct chci vybrat tyto značky se značkou vstupu,

574
00:33:58,070 --> 00:34:00,730
tak libovolný prvek, který je vstupní tag.

575
00:34:00,730 --> 00:34:03,080
Ale já nechci jen vybrat všechny vstupy

576
00:34:03,080 --> 00:34:05,170
protože něco jako tlačítko submit by mohl být vstup

577
00:34:05,170 --> 00:34:08,409
a něco jako textové pole může být vstup.

578
00:34:08,409 --> 00:34:11,909
Takže s těmito hranatými závorkami říkám chci jen vybrat ty prvky

579
00:34:11,909 --> 00:34:14,110
které jsou typu text.

580
00:34:14,110 --> 00:34:17,400
Někde v mém HTML tag mám atribut nazvaný Typ,

581
00:34:17,400 --> 00:34:19,750
a hodnota tohoto atributu musí být text.

582
00:34:19,750 --> 00:34:21,340
Tak jak o této první části tady?

583
00:34:21,340 --> 00:34:25,489
První slovo tohoto voliče je forma pak mám prostor a pak tento vstup část.

584
00:34:25,489 --> 00:34:29,620
Co to udělat, uvedení formulář před ním?

585
00:34:33,409 --> 00:34:35,860
To se děje v podstatě omezit naši dotaz.

586
00:34:35,860 --> 00:34:38,510
To by mohl být případ, že máme některé vstupy na stránce

587
00:34:38,510 --> 00:34:41,080
že nejsou potomky formuláře.

588
00:34:41,080 --> 00:34:46,150
Co to bude dělat, je to, že jsem jen chci vstupní tagy, které mají někde nad nimi

589
00:34:46,150 --> 00:34:49,030
některé rodiče prvek formuláře.

590
00:34:49,030 --> 00:34:52,100
A tak tímto způsobem můžeme tyto další hierarchické dotazy

591
00:34:52,100 --> 00:34:55,000
takže nemají jen vybrat vše odpovídající dané voliče.

592
00:34:55,000 --> 00:35:00,760
Můžeme trochu omezit rozsah tohoto dotazu na něco jiného.

593
00:35:00,760 --> 00:35:04,000
Takže teď, když víme, jak vybrat prvky na stránce,

594
00:35:04,000 --> 00:35:06,780
Pojďme mluvit trochu o AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX je stále velmi módní zkratka, která znamená pro Asynchronous JavaScript and XML.

596
00:35:12,270 --> 00:35:15,640
To jen tak se stane, že XML je to jen nějaký způsob, jak reprezentovat data.

597
00:35:15,640 --> 00:35:20,920
>> Tento druh ztracené popularity v poslední době, takže X v AJAX není používán po celou dobu.

598
00:35:20,920 --> 00:35:26,220
V podstatě to, co AJAX nám umožňuje udělat, je HTTP požadavky

599
00:35:26,220 --> 00:35:28,620
z kontextu JavaScriptu.

600
00:35:28,620 --> 00:35:32,310
Když jsme v našem webovém prohlížeči a my navigaci kolem stran a my klikněte na odkaz,

601
00:35:32,310 --> 00:35:37,790
co náš prohlížeč udělá, je, aby požadavek HTTP, co odkaz klikneme.

602
00:35:37,790 --> 00:35:41,670
Ale to není vždy ideální, protože pokud je to ten případ, pak jako David říkal,

603
00:35:41,670 --> 00:35:45,220
musíme vždy, aby uživatelé kliknout na tlačítko Odeslat nebo klepnout na odkaz

604
00:35:45,220 --> 00:35:50,380
tak, aby se něco stalo, že to bude zahrnovat požadavek HTTP.

605
00:35:50,380 --> 00:35:54,160
Takže s AJAX můžeme tyto požadavky jménem JavaScript.

606
00:35:54,160 --> 00:35:57,020
To znamená, že pokud uživatel pracuje se stránkou nebo se něco stane,

607
00:35:57,020 --> 00:36:01,780
můžeme skutečně udělat programový požadavek na jinou souboru PHP na našich webových stránkách

608
00:36:01,780 --> 00:36:06,280
nebo cokoliv jiného a načíst data, která tento soubor vyplivne.

609
00:36:06,280 --> 00:36:09,860
Pojďme se podívat na příklad AJAX.

610
00:36:09,860 --> 00:36:16,140
To je naše CS50 Finance stránku, se kterou snad někteří z nás zná.

611
00:36:16,140 --> 00:36:21,790
Podíváme-li se na HTML stránky, zde vidíme, že jsem přidal pár věcí,

612
00:36:21,790 --> 00:36:23,820
z nichž jeden jsem dal tento formulář identifikátor.

613
00:36:23,820 --> 00:36:26,480
Řekl jsem id = "form-citace".

614
00:36:26,480 --> 00:36:31,910
Udělal jsem to jen proto, že to bude dělat to trochu jednodušší vybrat z DOM

615
00:36:31,910 --> 00:36:35,090
protože jsem si jen udělat velmi jednoduchý dotaz.

616
00:36:35,090 --> 00:36:38,960
To, co chci udělat je chci opravit nějaký problém s CS50 financí.

617
00:36:38,960 --> 00:36:41,550
Takže pokud bychom jít do finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
Pokaždé, když chcete získat cenovou nabídku, musím klepněte na toto tlačítko Vyžádat,

619
00:36:45,700 --> 00:36:48,960
a že Získat cenovou nabídku tlačítka pak vezme mě na jinou celou stránku.

620
00:36:48,960 --> 00:36:52,400
A když chci další citát, musím trefit na tlačítko Zpět a pak jsem jej zadejte do,

621
00:36:52,400 --> 00:36:54,480
Mám nabídku, a já jsem narazila na tlačítko Zpět.

622
00:36:54,480 --> 00:36:56,840
To opravdu není nejlepší uživatelskou zkušenost.

623
00:36:56,840 --> 00:37:01,570
Kdo by ve skutečnosti využívají stránky, pokud je to tak pomalé, aby se ceny akcií?

624
00:37:01,570 --> 00:37:05,630
Takže to, co chcete udělat s AJAX je odstranit, že krok jít na samostatnou stránku

625
00:37:05,630 --> 00:37:08,410
aby k zobrazení výsledků.

626
00:37:08,410 --> 00:37:11,240
>> Co jsme opravdu jen ptám, je to opravdu jen malá cena,

627
00:37:11,240 --> 00:37:14,240
a to je jen opravdu malé množství dat.

628
00:37:14,240 --> 00:37:17,400
Takže není třeba pro mě jít jinou celou HTML stránku,

629
00:37:17,400 --> 00:37:20,670
stáhnout celou novou dávku HTML, možná stáhnout některé další obrázky,

630
00:37:20,670 --> 00:37:24,410
některé jiné CSS soubory jen pro mě odpovědět na tuto velmi jednoduchou otázku

631
00:37:24,410 --> 00:37:27,810
o tom, jak moc to dělá legální náklady.

632
00:37:27,810 --> 00:37:31,000
S AJAX bychom mohli udělat tuto mnohem jednodušší.

633
00:37:31,000 --> 00:37:36,400
Vidíme tady, že jsem propojení v souboru JavaScriptu s názvem quote.js.

634
00:37:36,400 --> 00:37:40,140
Pojďme skutečně otevřít tento soubor. Není tam.

635
00:37:42,610 --> 00:37:45,860
Všechny mé soubory JavaScriptu se bude umístěn v HTML

636
00:37:45,860 --> 00:37:47,630
tak, že webový prohlížeč může přistupovat.

637
00:37:47,630 --> 00:37:50,330
Pak máme samostatný adresář zde pro JavaScript,

638
00:37:50,330 --> 00:37:54,340
a nyní je zde quote.js.

639
00:37:54,340 --> 00:38:00,930
V horní části tohoto souboru to říká zde, že chci počkat na celou stránku má být vložen

640
00:38:00,930 --> 00:38:04,830
předtím, než jsem se snaží udělat cokoliv. Proč je to nutné?

641
00:38:04,830 --> 00:38:08,650
Ukazuje se, že další věc, kterou budu dělat, je zde začít hledat pro prvek

642
00:38:08,650 --> 00:38:10,810
která odpovídá některé voliče.

643
00:38:10,810 --> 00:38:15,600
Pokud je tato JavaScript je někdy proveden před tento prvek je vložen na stránce,

644
00:38:15,600 --> 00:38:17,820
pak se vše snažím udělat, je nebude fungovat

645
00:38:17,820 --> 00:38:20,580
protože budu snažit vybrat něco, co tam není ještě.

646
00:38:20,580 --> 00:38:23,780
Tak tohle line up horní říká, že chci, abys počkat, až vše je načten

647
00:38:23,780 --> 00:38:28,030
takže jsme zaručeno, že všechny prvky Hledám jsou skutečně na stránce.

648
00:38:29,730 --> 00:38:34,310
Tento znak dolaru zde znamená, že jsem pomocí knihovny s názvem jQuery.

649
00:38:34,310 --> 00:38:38,570
This jQuery knihovna nám umožňuje použít tyto selektory, že jsme se podíval na.

650
00:38:38,570 --> 00:38:44,010
Tím, že říkáte $ pak předá v jako argument toto # form-cenovou nabídku,

651
00:38:44,010 --> 00:38:47,910
Já jsem teď výběrem této formulář, který jsme právě se podívat na.

652
00:38:47,910 --> 00:38:52,290
Teď mám zastoupení té formě v paměti nějak.

653
00:38:52,290 --> 00:38:56,760
>> Na tomto objektu se, toto zastoupení formy,

654
00:38:56,760 --> 00:38:58,890
Já jsem teď pomocí funkce vyzval.

655
00:38:58,890 --> 00:39:02,710
Co tato funkce dělá, je, že to bude připojit obslužnou rutinu události.

656
00:39:02,710 --> 00:39:06,310
Událost, která budeme naslouchat, je událost submit.

657
00:39:06,310 --> 00:39:08,890
Takže, když uživatel klikne na tlačítko Odeslat, které nebo stiskne klávesu ENTER,

658
00:39:08,890 --> 00:39:11,730
tato událost je vyhodí.

659
00:39:11,730 --> 00:39:16,390
Po připojení do toho, teď mohu přepsat výchozí chování formuláře.

660
00:39:16,390 --> 00:39:19,770
Bez tohoto JavaScript, by odeslání formuláře na cokoliv PHP souboru

661
00:39:19,770 --> 00:39:22,110
jsme použili v tomto atributu action.

662
00:39:22,110 --> 00:39:25,440
Ale místo toho, jsem teď řekl, počkej, počkej, počkej, já nechci, abys skutečně udělat.

663
00:39:25,440 --> 00:39:31,140
Chci, aby to stalo předtím, než jdete a odešlete do určité PHP soubor.

664
00:39:31,140 --> 00:39:32,870
Teď, co chci dělat?

665
00:39:32,870 --> 00:39:39,270
Na tomto místě chci použít AJAX nějak nahrát, co cena akcií je.

666
00:39:39,270 --> 00:39:44,170
První věc, kterou musím vědět, je to, co legální uživatel vzhlédl.

667
00:39:44,170 --> 00:39:46,760
Chcete-li, že budu používat jiný volič.

668
00:39:46,760 --> 00:39:49,020
Jedná se o třetí volič jsme se na před.

669
00:39:49,020 --> 00:39:54,460
Ta říká, že chci začít tento formulář prvek s ID pro formu-citátu.

670
00:39:54,460 --> 00:39:58,440
Pak někde uvnitř tohoto formuláře, musí být vstupní prvek

671
00:39:58,440 --> 00:40:01,270
která má název symbolu.

672
00:40:01,270 --> 00:40:05,460
Pokud se podíváme zpět na naši HTML, viděli jsme, že jsme měli vstup [název = symbol].

673
00:40:05,460 --> 00:40:12,380
To znamená, že to bude k výběru, že textové pole, které uživatel je psaní do.

674
00:40:12,380 --> 00:40:13,870
To je hezké. Máme textové pole.

675
00:40:13,870 --> 00:40:17,360
Teď už jen potřebujeme vědět, co je uvnitř ní.

676
00:40:17,360 --> 00:40:20,290
K tomu, abychom mohli tuto metodu volat tady, tohle. Val,

677
00:40:20,290 --> 00:40:23,240
a to říká, že vím, co textové pole máte.

678
00:40:23,240 --> 00:40:28,160
Chci, abys mi řekl, co to je uživatel zadat do tohoto textového pole.

679
00:40:28,160 --> 00:40:34,440
Nyní máme řetězec s názvem symbol, který se rovná bez ohledu na uživatele zadali dovnitř

680
00:40:34,440 --> 00:40:39,820
To je hezké. Můžeme použít tento řetězec, aby se naše žádost.

681
00:40:39,820 --> 00:40:42,450
To je nová funkce zde, toto $,

682
00:40:42,450 --> 00:40:44,900
kromě jsme již bude výběr prvků,

683
00:40:44,900 --> 00:40:48,910
budeme se volání jiné funkce, která je nám poskytli, by jQuery.

684
00:40:48,910 --> 00:40:54,810
Tato funkce AJAX je to, co se vlastně děje, aby se tento požadavek HTTP.

685
00:40:54,810 --> 00:40:57,000
Takže musíme říct, že to pár věcí.

686
00:40:57,000 --> 00:41:01,410
První věc, kterou musíme říct tuto funkci je místo, kde chci požadavek jít.

687
00:41:01,410 --> 00:41:08,910
Někde v mém projektu jsem tento soubor uvnitř HTML adresáři nazvaném quote.php.

688
00:41:08,910 --> 00:41:15,150
Mohu přístup k tomuto souboru, viděli jsme, stejně jako to, když půjdu na localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Chci JavaScript, aby požadavek na danou stránku.

690
00:41:20,450 --> 00:41:22,920
Jaký typ požadavku teď?

691
00:41:22,920 --> 00:41:27,210
Viděli jsme před tím forma má tuto metodu = "post" atribut,

692
00:41:27,210 --> 00:41:29,270
a to znamená, že to bude dělat požadavek POST,

693
00:41:29,270 --> 00:41:32,630
takže to nebude dát nic v adrese URL, spíše než GET,

694
00:41:32,630 --> 00:41:36,860
které by prostě být aktivována, pokud jsme jen přístup na stránku s webovém prohlížeči, například.

695
00:41:36,860 --> 00:41:41,260
Nyní jsme říkal, že chcete, aby se požadavek HTTP POST

696
00:41:41,260 --> 00:41:44,840
na stránce se nachází na quote.php.

697
00:41:44,840 --> 00:41:51,490
Když jsme se předložit formulář, nezapomeňte bychom mohli přistupovat vstupní prvky uvnitř tohoto formuláře

698
00:41:51,490 --> 00:41:54,430
s tímto $ _POST proměnné.

699
00:41:54,430 --> 00:41:58,710
Zatím v příběhu jsme se skutečně odeslán spolu jakýchkoli dat, ale.

700
00:41:58,710 --> 00:42:00,640
Jsme právě řekl, že děláme AJAX požadavek

701
00:42:00,640 --> 00:42:03,200
a tady je druh žádosti děláme.

702
00:42:03,200 --> 00:42:07,090
Nyní se musíme skutečně odesílat data na stránku.

703
00:42:07,090 --> 00:42:10,930
K tomu můžeme použít tuto vlastnost nazvanou data.

704
00:42:10,930 --> 00:42:14,950
Hodnota této vlastnosti je vlastně asociativní pole.

705
00:42:14,950 --> 00:42:19,390
Důvodem pro to je, že nám umožňuje posílat víc než jen 1 kus dat.

706
00:42:19,390 --> 00:42:24,750
To je důvod, proč máme tyto složené závorky zde vnořena uvnitř těchto dalších složených závorek.

707
00:42:24,750 --> 00:42:29,680
Klíče v těchto asociativních polích se bude totéž

708
00:42:29,680 --> 00:42:32,630
jako jsou jméno připisuje v našich formulářových prvků.

709
00:42:32,630 --> 00:42:35,740
To znamená, že v případě pošlu podél klíče symbolu,

710
00:42:35,740 --> 00:42:41,870
to znamená, že moje PHP stránka může přístup k těmto datům pomocí $ _POST [symbol]

711
00:42:41,870 --> 00:42:44,640
stejně jako jsme to udělali předtím, když jsme byli odeslání formuláře.

712
00:42:44,640 --> 00:42:47,090
A teď skutečné údaje chceme poslat

713
00:42:47,090 --> 00:42:50,790
bude hodnota uvnitř tohoto asociativního pole.

714
00:42:50,790 --> 00:42:54,070
>> My uloženy tento text do proměnné s názvem symbol,

715
00:42:54,070 --> 00:42:57,380
a tak posíláme spolu nyní klíč symbolu

716
00:42:57,380 --> 00:43:01,380
a hodnota bez ohledu na Uživatel napsal dovnitř

717
00:43:01,380 --> 00:43:06,270
Nyní jsme tuto žádost HTTP, naše PHP soubor vykonán,

718
00:43:06,270 --> 00:43:11,480
a to bude odesílat data zpátky klientovi, že právě z tohoto požadavku.

719
00:43:11,480 --> 00:43:15,220
Nyní musíme reagovat na cokoliv serveru řekl nám.

720
00:43:15,220 --> 00:43:20,180
K tomu, že máme tuto poslední vlastnost zde nazývá úspěch.

721
00:43:20,180 --> 00:43:24,240
Hodnota tohoto úspěchu klíče se vlastně bude funkce,

722
00:43:24,240 --> 00:43:26,910
a toto je jeden z opravdu skvělých věcí, které můžete udělat pomocí JavaScriptu.

723
00:43:26,910 --> 00:43:31,720
Nejen, že můžete mít ints nebo pole jako hodnotu uvnitř asociativního pole,

724
00:43:31,720 --> 00:43:34,170
můžeme také funkci.

725
00:43:34,170 --> 00:43:36,380
Takže tím, že říká úspěch, to je můj klíč.

726
00:43:36,380 --> 00:43:38,830
Dvojtečka říká, že sem přijde hodnotu,

727
00:43:38,830 --> 00:43:41,810
a nyní hodnota je ve skutečnosti funkce.

728
00:43:41,810 --> 00:43:44,460
Takže nepotřebujeme k této funkci jméno samo o sobě.

729
00:43:44,460 --> 00:43:48,820
Můžeme jen říct to bude nějaká funkce. Bude to trvat 1 argument.

730
00:43:48,820 --> 00:43:51,190
Argument pro tuto funkci bude

731
00:43:51,190 --> 00:43:54,460
bez ohledu na server poslal nás zpět od podání žádosti.

732
00:43:54,460 --> 00:43:57,750
Stejně jako když náš prohlížeč podá žádost, server pošle něco zpět

733
00:43:57,750 --> 00:43:59,060
a prohlížeč zobrazí ji,

734
00:43:59,060 --> 00:44:03,030
v souvislosti s AJAX jsme jen z žádosti, server odeslal něco zpět,

735
00:44:03,030 --> 00:44:07,110
a teď jsme, že reprezentován jako řetězec.

736
00:44:07,110 --> 00:44:11,280
S tímto řetězcem Rád bych se zobrazí, že na stránce.

737
00:44:11,280 --> 00:44:14,040
K tomu, že budu mít poslední voliče.

738
00:44:14,040 --> 00:44:17,570
Chci vybrat prvek s ID ceny.

739
00:44:17,570 --> 00:44:20,710
To je jen prázdný div, že jsem si vytvořil na stránce,

740
00:44:20,710 --> 00:44:26,640
a chci nastavit obsah tohoto div jako něco, co server poslal nás zpět.

741
00:44:26,640 --> 00:44:30,280
Já jsem vlastně upravený quote.php trochu.

742
00:44:30,280 --> 00:44:33,460
>> Spíše než volání render a upřesnění některých stránku,

743
00:44:33,460 --> 00:44:38,100
quote.php teď prostě bude vytisknout hodnotu zásob jako řetězec.

744
00:44:38,100 --> 00:44:41,880
Takže pokud jste byli skutečně navštívit stránku, měli byste prostě vidět, že malé řetězec

745
00:44:41,880 --> 00:44:45,030
jakékoliv cena akcií je.

746
00:44:45,030 --> 00:44:50,170
Jedna poslední věc, kterou musíme udělat, je zde jen ujistěte se, že tato funkce vrací false.

747
00:44:50,170 --> 00:44:53,560
Co to říká, je, že když jsem uvnitř obslužnou rutinu události

748
00:44:53,560 --> 00:44:57,300
a že obslužná rutina událost vrátí false místo vrací hodnotu true,

749
00:44:57,300 --> 00:45:01,510
to znamená, že nechci, původní událost na oheň.

750
00:45:01,510 --> 00:45:05,270
V tomto případě, pokud se neměla žádné JavaScript a my předložen formulář,

751
00:45:05,270 --> 00:45:08,280
náš webový prohlížeč se říct, "já jdu poslat, že data spolu,"

752
00:45:08,280 --> 00:45:10,130
a oni pošlou vás na jinou stránku.

753
00:45:10,130 --> 00:45:14,360
Protože jsme pomocí AJAX teď, že to není třeba posílat uživatele na jinou stránku.

754
00:45:14,360 --> 00:45:17,920
Jsme prostě bude zobrazovat výsledky dynamicky na stejné straně.

755
00:45:17,920 --> 00:45:21,460
My opravdu nechceme, aby nikam, a já chci zůstat na stejné stránce.

756
00:45:21,460 --> 00:45:27,060
Takže tím, že vrátí false, abychom zajistili, že formulář není to pro nás.

757
00:45:27,060 --> 00:45:31,170
Pojďme se podívat na to, co to vlastně vypadá.

758
00:45:31,170 --> 00:45:34,180
Naše quote stránka vypadá stejně.

759
00:45:34,180 --> 00:45:37,240
Dovolte mi, abych vytáhnout inspektor sem, takže můžeme vidět, co se děje.

760
00:45:37,240 --> 00:45:40,270
Ať je to trochu méně obrovský.

761
00:45:40,270 --> 00:45:44,590
Pamatujte, že pokud budeme otevírat kartu síť, to je místo, kde můžeme vidět všechny požadavky HTTP

762
00:45:44,590 --> 00:45:47,570
které se dějí na stránce.

763
00:45:47,570 --> 00:45:52,890
>> Pro symbol dovolte mi, abych zadejte AAPL a klepněte na položku Získat cenu.

764
00:45:52,890 --> 00:45:56,720
Nyní jsme viděli, že podíl Apple stojí určitý počet dolarů

765
00:45:56,720 --> 00:46:00,410
právě objevila na stránce, ale URL nezměnila vůbec.

766
00:46:00,410 --> 00:46:04,570
Ve skutečnosti, zde je HTTP požadavek, že jsme právě udělal.

767
00:46:04,570 --> 00:46:09,980
Udělali jsme požadavek POST na quote.php. To dává smysl.

768
00:46:09,980 --> 00:46:12,800
To je to, co server poslal nás zpět.

769
00:46:12,800 --> 00:46:16,320
Je to už tento gigantický HTML dokument s obrázky a podobné věci, které,

770
00:46:16,320 --> 00:46:20,920
je to jen řádek textu, a pak jsme jen zobrazí řádek textu.

771
00:46:20,920 --> 00:46:26,290
Vrátíme-li se do hlavičky, a uvidíme, co se skutečně poslal uvnitř tohoto požadavku HTTP,

772
00:46:26,290 --> 00:46:33,950
můžeme vidět tady dole, že jsme poslali podél klíč symbol a hodnotou AAPL,

773
00:46:33,950 --> 00:46:36,430
což je to, co uživatel napsal dovnitř

774
00:46:36,430 --> 00:46:39,230
To je pěkné, ale je to stále trochu nepříjemné.

775
00:46:39,230 --> 00:46:42,490
Stále mám kliknout na toto tlačítko se dostat na cenu akcií.

776
00:46:42,490 --> 00:46:45,880
Jsme zaneprázdnění lidé a nemáme čas na tlačítko tlačítka.

777
00:46:45,880 --> 00:46:49,910
Google si to uvědomila před chvílí, když prováděly Google Instant.

778
00:46:49,910 --> 00:46:53,590
Co Google Instant dělá, je, jak píšete, že právě začíná zobrazování výsledků pro vás

779
00:46:53,590 --> 00:46:56,520
takže nemusíte mít strach o ještě klepnutím na tlačítko Hledat.

780
00:46:56,520 --> 00:46:58,730
Vlastně, zábava příběh vztahující se k tomu.

781
00:46:58,730 --> 00:47:01,100
Jakmile Google Instant vyšel, byli lidé jako, "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 student se na Stanfordu, který byl 19 v té době

784
00:47:05,950 --> 00:47:09,000
z této stránky s názvem YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Všechny Instant YouTube se je efektivně vyhledávat YouTube okamžitě.

786
00:47:13,170 --> 00:47:17,020
Takže spíše než jít na YouTube.com a stiskněte Hledat,

787
00:47:17,020 --> 00:47:21,650
když začnu psát do YouTube Instant něco jako CS50,

788
00:47:21,650 --> 00:47:25,320
jsme mohli vidět, že to pokouší na pomalé připojení k internetu

789
00:47:25,320 --> 00:47:28,500
naplnění těchto výsledků žije.

790
00:47:28,500 --> 00:47:35,590
K tomu, že můžeme skutečně udělat velmi jednoduchý úpravu našeho quote.js souboru.

791
00:47:35,590 --> 00:47:40,900
Právě teď jsme připevnění tuto událost, pokud je předložen formulář.

792
00:47:40,900 --> 00:47:43,760
My opravdu nechceme, aby uživatel odeslat tento formulář už,

793
00:47:43,760 --> 00:47:48,570
takže se pojďme místo požáru se tato událost pokaždé, když uživatel stiskne klávesu.

794
00:47:48,570 --> 00:47:53,200
Chcete-li, aby pojďme nejprve změnit událost z předložit KeyUp.

795
00:47:53,200 --> 00:47:55,740
To znamená, že spíše než čekat na formulář odeslat,

796
00:47:55,740 --> 00:47:58,490
pokaždé, když je stisknuto tlačítko, něco se stane.

797
00:47:58,490 --> 00:48:02,030
To už dává smysl přiložit tento KeyUp události na celý formulář.

798
00:48:02,030 --> 00:48:05,080
Jsme opravdu jen o té vyhledávacího pole.

799
00:48:05,080 --> 00:48:09,320
>> Chcete-li vybrat, že nyní, můžeme změnit to být, spíše než forma-citací,

800
00:48:09,320 --> 00:48:14,220
form-quote a budeme mít vstup (typ = text), nebo bychom mohli říci (name = symbol) -

801
00:48:14,220 --> 00:48:16,420
co chceme.

802
00:48:16,420 --> 00:48:18,650
Teď je tu ještě jedna poslední věc, co musíme udělat.

803
00:48:18,650 --> 00:48:21,190
Nezapomeňte se sem, když jsme řekli return false

804
00:48:21,190 --> 00:48:24,370
jsme si řekli, že nechceme, aby výchozí událost na oheň.

805
00:48:24,370 --> 00:48:26,390
Ale to jen tak se stane, že když vypneme, že nyní,

806
00:48:26,390 --> 00:48:29,660
co jsme zadejte nebude zobrazovat v prohlížeči už

807
00:48:29,660 --> 00:48:33,000
protože by to bylo výchozí chování psaní do textového pole.

808
00:48:33,000 --> 00:48:38,660
My už chcete přepsat, takže se pojďme zničit to return false.

809
00:48:38,660 --> 00:48:44,800
Pokud šetříme, že a obnovte stránku, teď, když jsem začal psát AAPL

810
00:48:44,800 --> 00:48:50,160
uvidíte, že cena akcií na dně zde je dokončení automaticky.

811
00:48:50,160 --> 00:48:53,150
Takže tady je CS50 Finance Instant.

812
00:48:53,150 --> 00:48:55,860
Vlastně zábava příběh o YouTube Instant

813
00:48:55,860 --> 00:48:59,420
je, že student tak nějak to psal jako 1-noční projektu,

814
00:48:59,420 --> 00:49:03,800
a druhý den mu byla nabídnuta práce v YouTube generálního ředitele.

815
00:49:03,800 --> 00:49:10,610
Takže tak jednoduché, jak to, že jste CS50 studenti, mohou se vaše konečné projekty vám práci na YouTube.

816
00:49:10,610 --> 00:49:14,720
Něco jako, že je opravdu skvělý nápad pro konečného projektu, ne?

817
00:49:14,720 --> 00:49:18,170
Měli jsme nějaké existující funkce, které jsme chtěli integrovat s.

818
00:49:18,170 --> 00:49:20,330
Jsme zlepšit uživatelský komfort trochu,

819
00:49:20,330 --> 00:49:24,340
a najednou hledá něco na YouTube Instant může být mnohem jednodušší

820
00:49:24,340 --> 00:49:27,290
než ji vyhledat na pravidelném YouTube.

821
00:49:27,290 --> 00:49:30,790
Tak to je AJAX v kostce.

822
00:49:30,790 --> 00:49:34,860
>> V příkladech, že Josef byl zobrazen, viděli jsme spoustu autocompletes,

823
00:49:34,860 --> 00:49:39,250
a ty autocompletes jsou opravdu užitečné, protože nemáme pamatovat -

824
00:49:39,250 --> 00:49:41,770
Například, pokud si nepamatujete cenu akcií pro Apple

825
00:49:41,770 --> 00:49:45,110
a my jsme jen vím, že je to aa něco, spíše než jen jak mi říká,

826
00:49:45,110 --> 00:49:48,740
"Podíl této věci stojí tolik peněz,"

827
00:49:48,740 --> 00:49:52,540
Já bych trochu rád věděl, co akcie začít s aa.

828
00:49:52,540 --> 00:49:58,340
Můžeme to udělat opravdu pěkně s Bootstrap knihovně, která je již součástí

829
00:49:58,340 --> 00:50:01,380
uvnitř CS50 financí.

830
00:50:01,380 --> 00:50:09,390
Pokud jste přišli sem do tagu JavaScript a přejděte dolů na Typeahead,

831
00:50:09,390 --> 00:50:13,730
je to jen pěkná plugin že někdo už psal pro nás,

832
00:50:13,730 --> 00:50:16,980
a můžeme snadno používat jeho funkce, jako je tento.

833
00:50:16,980 --> 00:50:21,410
Jsem napsal v a tady je seznam některých státech, které začínají s A.

834
00:50:21,410 --> 00:50:25,360
Řekněme, že myslím, že to je opravdu cool, a to je čas pro mě, aby je zařadila na mé straně.

835
00:50:25,360 --> 00:50:28,300
Ukazuje se, že je to opravdu, ale opravdu jednoduché.

836
00:50:28,300 --> 00:50:32,810
Pojďme přeskočit zde quote3.js.

837
00:50:34,890 --> 00:50:37,380
Můj soubor vypadá trochu jinak.

838
00:50:37,380 --> 00:50:39,700
Tady dole všechny mé věci AJAX je stejný.

839
00:50:39,700 --> 00:50:43,170
Chci načíst stavové údaje, aniž by museli jít na jinou stránku.

840
00:50:43,170 --> 00:50:46,220
Ale teď chci použít tento plugin.

841
00:50:46,220 --> 00:50:51,020
Bootstrap dokumentace je skvělé příklady toho, jak přesně mám udělat, že.

842
00:50:51,020 --> 00:50:54,350
Chci říct, "Tady je vstup, který chci automatického dokončování,"

843
00:50:54,350 --> 00:50:56,640
a budu volat tuto funkci s názvem typeahead,

844
00:50:56,640 --> 00:50:59,730
a že se to zvládnout všechny Typeahead věci pro nás.

845
00:50:59,730 --> 00:51:02,090
To bude inicializovat seznamu, bude to dělat všechny naše filtrování.

846
00:51:02,090 --> 00:51:06,680
Jediná věc, je třeba vědět, je, jaké údaje jsme autocompleting na.

847
00:51:06,680 --> 00:51:10,480
Tak jsem zjistil, tento klíč jen tím, že čtení dokumentace a při pohledu na příklady.

848
00:51:10,480 --> 00:51:14,150
Kdybych jej klíč zdroje, hodnota tohoto klíče

849
00:51:14,150 --> 00:51:17,770
je to jen nějaký řada věcí, chci automatického dokončování.

850
00:51:17,770 --> 00:51:20,180
Tato proměnná pochází z tohoto jiného souboru.

851
00:51:20,180 --> 00:51:23,400
I otevřít symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Tento symbols.js je právě tento opravdu, ale opravdu velká pole obsahující řetězce

853
00:51:27,980 --> 00:51:32,080
všech těchto akciových symbolů z NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Pokud chci skočit zpět do HTML, tak jharvard, vhosts, globalhost, html, šablony,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Vzhledem k tomu, že se nyní nazývá quote3.js, dovolte mi, abych si změnit soubor JavaScriptu jsem včetně zde.

857
00:51:50,910 --> 00:51:55,110
Teď mám quote3.js, takže budu načíst v tomto samostatném JavaScript souboru,

858
00:51:55,110 --> 00:51:57,910
ten, který má tuto Bootstrap Automatické dokončování.

859
00:51:57,910 --> 00:52:04,430
Teď, když jsem se skočit zpět do prohlížeče, stránku znovu načíst, a začnu psát aa,

860
00:52:04,430 --> 00:52:06,880
tady je moje autocomplete. A bylo to opravdu tak jednoduché, že.

861
00:52:06,880 --> 00:52:11,400
Měl jsem 1 řádek kódu, který právě řekl, "Tady jsou věci, které chci, aby automatického dokončování,"

862
00:52:11,400 --> 00:52:16,590
a najednou jsem to opravdu, ale opravdu pěkné funkčnost s ne spoustu úsilí vůbec.

863
00:52:16,590 --> 00:52:19,810
Jak jste vyvíjíte webové stránky, a zejména čela straně věcí,

864
00:52:19,810 --> 00:52:21,840
budete toto je případ hodně.

865
00:52:21,840 --> 00:52:25,700
Existuje mnoho, mnoho, mnoho opravdu cool volných knihoven tam

866
00:52:25,700 --> 00:52:30,190
které dělají to super snadné dělat věci takhle.

867
00:52:30,190 --> 00:52:37,230
Může někdo myslet na žádné nevýhod prostě autocompleting na tomto rozsáhlém seznamu symbolů?

868
00:52:37,230 --> 00:52:41,580
Co by mohlo být něco, co není nejlepší s tímto přístupem?

869
00:52:42,790 --> 00:52:45,960
Jo. >> [Student] Čas, pokud máte hodně [neslyšitelné]

870
00:52:45,960 --> 00:52:50,420
Jo. Právě teď stažení tento obrovský JavaScript soubor a tam je spousta symbolů.

871
00:52:50,420 --> 00:52:54,360
A pokud máme spoustu věcí, by to mohlo trochu zvýšit latenci nejen vyhledávání

872
00:52:54,360 --> 00:52:56,600
ale také stahování aktuální soubor.

873
00:52:56,600 --> 00:52:58,670
Great. Ještě něco?

874
00:53:01,950 --> 00:53:05,280
Právě teď není tam žádný skutečný smysl pro EHP.

875
00:53:05,280 --> 00:53:08,190
Kdybych zadejte A, společností, které se objeví zde

876
00:53:08,190 --> 00:53:11,220
nemusí být z nejpopulárnějších společností, které začínají s A.

877
00:53:11,220 --> 00:53:17,130
>> Než se dostanu k Apple, může to trvat i několik více znaků najít to, co jsem hledal.

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 jen tak říct, "Cokoliv, co odpovídá jdu k zobrazení."

880
00:53:24,400 --> 00:53:30,510
Místo toho, rád bych se nějak integrovat nějaký význam do mých vyhledávání.

881
00:53:30,510 --> 00:53:36,440
Když jdu sem na Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Pokud se snažím zadat symbol na stránce Yahoo! Finance tyto

883
00:53:42,100 --> 00:53:52,310
a začnu psát GOOG, mám pěkný seznam věcí.

884
00:53:52,310 --> 00:53:57,100
Je zřejmé, vypadá to, že Yahoo! Finance dělá něco chytřejší zde.

885
00:53:57,100 --> 00:53:59,790
Mají nějaký význam, a mají také další informace

886
00:53:59,790 --> 00:54:01,430
jako jméno populace.

887
00:54:01,430 --> 00:54:05,850
To je něco, co nemůžu dostat jen s mým Slovník seznamu symbolů.

888
00:54:05,850 --> 00:54:09,520
Chci to, a tak jsem to vzít.

889
00:54:09,520 --> 00:54:11,790
Chcete-li, aby Pojďme udělat pár věcí.

890
00:54:11,790 --> 00:54:15,580
Podívejme se nejprve otevřete inspektor na této stránce

891
00:54:15,580 --> 00:54:18,100
protože jsme viděli, že tato stránka není nakládání na všechny,

892
00:54:18,100 --> 00:54:21,960
takže je to asi pomocí AJAX nějak načítat svá data.

893
00:54:21,960 --> 00:54:23,920
Můžeme zjistit, jaké údaje to načítání.

894
00:54:23,920 --> 00:54:28,390
Kdybych klikněte na kartě Síť, to se bude všechny požadavky, které začínají být vypalován.

895
00:54:28,390 --> 00:54:34,020
Nyní, když jsem zadejte břečky, můžeme vidět, že jsem právě dostal novou HTTP požadavku.

896
00:54:34,020 --> 00:54:37,490
To je pravděpodobně tam, kde že data pochází.

897
00:54:37,490 --> 00:54:41,990
Samozřejmě, když jsem se podívat na této adrese, která je trochu podivně pojmenovaný,

898
00:54:41,990 --> 00:54:46,930
můžeme vidět, že to je přesně to, kde Yahoo se vyšle svá data z.

899
00:54:46,930 --> 00:54:53,400
>> Vytvořil jsem samostatný soubor s názvem suggest.php, která je velmi podobná v duchu na vyhledávací funkci.

900
00:54:53,400 --> 00:54:57,730
Je to v podstatě udělá dotaz na adresu URL Yahoo, získat zpět některé údaje,

901
00:54:57,730 --> 00:54:59,750
a odeslat ji zpět ke mně.

902
00:54:59,750 --> 00:55:02,570
Nyní, spíše než používat tento velký, obrovský seznam symbolů,

903
00:55:02,570 --> 00:55:05,280
Mohu použít Yahoo pěkné relevance věci,

904
00:55:05,280 --> 00:55:08,150
a já nemám stahovat, že masivní JavaScript soubor.

905
00:55:08,150 --> 00:55:12,040
Já jen bude strhnout skutečně relevantní reklamní symboly.

906
00:55:12,040 --> 00:55:13,960
Pojďme skočit do toho.

907
00:55:13,960 --> 00:55:17,360
Takže html, js. Jsme nyní v quote4.

908
00:55:17,360 --> 00:55:22,120
Nyní jsme již používáte tento velký seznam souborů JavaScript.

909
00:55:22,120 --> 00:55:24,430
Ale je tu malý druh designu problému zde.

910
00:55:24,430 --> 00:55:28,200
Řekli jsme, že v AJAX je asynchronní.

911
00:55:28,200 --> 00:55:31,000
Co to znamená, že když udělám AJAX požadavek,

912
00:55:31,000 --> 00:55:36,490
tak tady na lince 8, to je místo, kde se má AJAX požadavek skutečně vystřelil.

913
00:55:36,490 --> 00:55:40,370
Řekněme, že teď mám nějaký kód sem, že to bude dělat nějaké věci

914
00:55:40,370 --> 00:55:43,930
Líbí upozorní uživatele, nebo změnit něco na stránce.

915
00:55:43,930 --> 00:55:49,830
Co se to se nestane, je prohlížeč nebude čekat na tuto žádost, aby i nadále

916
00:55:49,830 --> 00:55:53,480
před příchodem dolů a bít tento řádek.

917
00:55:53,480 --> 00:55:55,900
To je asynchronní část.

918
00:55:55,900 --> 00:55:58,400
Bude to, aby se tento požadavek a říct, "Kdykoliv dokončíte,

919
00:55:58,400 --> 00:56:03,080
"Vrátit a zavolat, že funkce, které jsem ti zavolat uvnitř úspěchu."

920
00:56:03,080 --> 00:56:07,300
To znamená, že nemůžeme jen stáhnout všechny zásoby předem.

921
00:56:07,300 --> 00:56:10,300
Musíme podat žádost a čekat na něco, aby se vrátil.

922
00:56:10,300 --> 00:56:13,330
To znamená, že před, mohli bychom jednoduše říci Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Tady je seznam věcí, které chci, abyste automatického dokončování."

924
00:56:15,580 --> 00:56:18,950
Nemůžeme už ne dělat, že už proto, že nevíme,

925
00:56:18,950 --> 00:56:21,780
to, co chceme, aby skutečně autocomplete na.

926
00:56:21,780 --> 00:56:25,190
Naštěstí, Bootstrap si na to, protože to jsou inteligentní chlapi támhle,

927
00:56:25,190 --> 00:56:30,160
a oni vlastně dali nám jiný způsob, jak naložit tuto Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Dříve, hodnota tohoto zdroje majetku byl právě tento velký pole věcí automatického dokončování.

929
00:56:35,630 --> 00:56:39,580
>> Nyní Vlastnost source je vlastně funkce,

930
00:56:39,580 --> 00:56:44,580
a účelem této funkce je zjistit, co ty věci do automatického dokončování je.

931
00:56:44,580 --> 00:56:48,730
Tak, jak to bude na to přišel, je, že to bude ptát Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
co nejlepší věci na autocomplete jsou.

933
00:56:51,750 --> 00:56:54,500
Chcete-li, že budu dělat velmi podobnou AJAX požadavek.

934
00:56:54,500 --> 00:56:59,010
Chystám se požádat tuto stránku na suggest.php.

935
00:56:59,010 --> 00:57:01,360
Chci poslat podél symboly stále.

936
00:57:01,360 --> 00:57:05,570
A teď můj úspěch, Bootstrap dokumentace mi

937
00:57:05,570 --> 00:57:09,130
, že za účelem naplnění tento seznam věcí,

938
00:57:09,130 --> 00:57:14,370
vše, co potřebujete udělat, je předat v tomto poli nyní funkci zpětného volání.

939
00:57:14,370 --> 00:57:15,660
Ale počkejte.

940
00:57:15,660 --> 00:57:20,240
Pokud tohle má být pole a AJAX mě posílá zpátky text,

941
00:57:20,240 --> 00:57:22,720
Jak je to možné?

942
00:57:22,720 --> 00:57:27,910
To představuje nový způsob výměny dat s názvem JSON.

943
00:57:27,910 --> 00:57:33,000
V tomto případě jsme nejen zasláním jednoduché řetězec textu.

944
00:57:33,000 --> 00:57:37,670
Nyní máme co do činění s tímto složitějším seznamu symboly akcií.

945
00:57:37,670 --> 00:57:41,730
Tyto symboly akcií může také zahrnovat věci jako název společnosti nebo aktuálních cen.

946
00:57:41,730 --> 00:57:47,550
Jen pomocí velké dlouhý řetězec, který není naformátovaný v žádném předvídatelným způsobem

947
00:57:47,550 --> 00:57:51,970
se nebude nejlepší způsob, jak dostat tyto údaje ze serveru Yahoo se mnou

948
00:57:51,970 --> 00:57:54,540
tak, že nemohu snadno srozumitelná.

949
00:57:54,540 --> 00:58:01,280
JSON je technologie, která využívá toho, jak jsme se vytvořit asociativní pole v JavaScriptu.

950
00:58:01,280 --> 00:58:04,510
To vypadá hodně jako JavaScript asociativního pole,

951
00:58:04,510 --> 00:58:06,600
a ve skutečnosti, že je to proto, že je.

952
00:58:06,600 --> 00:58:09,710
JSON je zkratka pro JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
To je v podstatě dohodnuté formátu pro přenos dat tam a zpět.

954
00:58:15,020 --> 00:58:18,280
Zde tento objekt JSON nebo to JSON asociativní pole

955
00:58:18,280 --> 00:58:21,010
je mi poslal nějaké údaje o kurzu.

956
00:58:21,010 --> 00:58:25,110
>> Klíče tohoto pole, jsou věci jako předmětu, který má hodnotu cs50,

957
00:58:25,110 --> 00:58:29,140
a tady dole můžeme vidět, že můžu mít hodnotu, která je pole.

958
00:58:29,140 --> 00:58:32,730
Nemám dělat věci jako vyřadil řetězců a podívejte se na čárkami

959
00:58:32,730 --> 00:58:35,330
a dělat šílené věci, jako že.

960
00:58:35,330 --> 00:58:38,820
Protože toto je deklarována v tomto formátu JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript a jQuery již funkce převést řetězec

962
00:58:43,510 --> 00:58:48,140
, která vypadá jako tento JSON do skutečného JavaScript asociativního pole

963
00:58:48,140 --> 00:58:50,440
, že můžeme pracovat s.

964
00:58:50,440 --> 00:58:56,660
Dělat, že je tak jednoduché, jak říká, že už je to soubor, suggest.php,

965
00:58:56,660 --> 00:58:59,040
mě poslal zpátky prostě řetězec textu,

966
00:58:59,040 --> 00:59:01,950
ale já vím, že to bude mě poslal zpět JSON.

967
00:59:01,950 --> 00:59:06,760
To znamená, že JSON může být převeden do JavaScriptu asociativního pole.

968
00:59:06,760 --> 00:59:10,830
A tak jQuery, rád bych, abys to pro mě udělat.

969
00:59:10,830 --> 00:59:13,990
To znamená, že se tato reakce zde parametr,

970
00:59:13,990 --> 00:59:16,070
To je již jen řetězec.

971
00:59:16,070 --> 00:59:19,860
Vzhledem k tomu, že jsme řekli, že jQuery přichází nějaký JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery bude dost chytrý, aby řekl, "Chtěl jste JSON?"

973
00:59:22,950 --> 00:59:26,890
"Chystám se převést to do asociativního pole pro tebe."

974
00:59:26,890 --> 00:59:32,100
Pojďme vlastně se podívat na záložce Síť jakmile budeme mít quote4.js.

975
00:59:32,100 --> 00:59:35,400
Budeme změnit a obnovte stránku.

976
00:59:37,150 --> 00:59:41,250
Teď budu psát v-znovu.

977
00:59:41,250 --> 00:59:45,600
Udělal jsem pár žádostí na suggest.php, ale teď to odpověď,

978
00:59:45,600 --> 00:59:48,670
spíše než jen řetězec, je to JSON.

979
00:59:48,670 --> 00:59:52,580
Tak jsem si otevřený složená závorka říká, "Tady je asociativní pole."

980
00:59:52,580 --> 00:59:56,830
>> První a pouze klíč tohoto asociativního pole se nazývá symboly,

981
00:59:56,830 --> 01:00:00,240
a pak je zde pole všech příslušných symbolů

982
01:00:00,240 --> 01:00:04,820
nyní přichází z Yahoo! Finance, není z tohoto obrovského seznamu.

983
01:00:06,110 --> 01:00:10,630
To je, jak mohu jednoduše naplnit tuto automatického dokončování plugin

984
01:00:10,630 --> 01:00:14,280
s některými údaji, které není pocházejících z místního souboru, který je již předem stanovené

985
01:00:14,280 --> 01:00:17,490
ale z něčeho jiného.

986
01:00:17,490 --> 01:00:21,160
Ukazuje se, že skutečně můžeme využít technologii zvané JSONP,

987
01:00:21,160 --> 01:00:27,420
nebo JSON s polstrováním, bude to odstranit tuto suggest.php prostředníka.

988
01:00:27,420 --> 01:00:34,010
Ale místo toho, aby dělal to, pojďme místo podívat na to, jak mohu zlepšit to ještě víc.

989
01:00:34,010 --> 01:00:36,040
Moc se mi líbí bootstrap je Typeahead. Je to opravdu pěkné.

990
01:00:36,040 --> 01:00:39,570
Ale my jsme stále dobří JavaScriptu a chceme trochu to sami,

991
01:00:39,570 --> 01:00:43,870
Možná se podívat na to, co tento plugin mohl dělat.

992
01:00:43,870 --> 01:00:46,500
Pojďme již použít tento Typeahead věc,

993
01:00:46,500 --> 01:00:50,550
a zkusme se tento seznam navrhovaných zásob sami.

994
01:00:50,550 --> 01:00:53,790
Tady v quote6.php budeme začít stejným způsobem.

995
01:00:53,790 --> 01:00:58,050
Pokaždé, když někdo něco napíše, chceme, aby AJAX požadavek.

996
01:00:58,050 --> 01:01:01,590
To je podobné našemu původnímu CS50 financí Instant.

997
01:01:01,590 --> 01:01:05,020
Spíše než aby žádost o quote.php,

998
01:01:05,020 --> 01:01:08,530
jsme nyní snaží o to požádají stejném souboru jako dříve, tato suggest.php,

999
01:01:08,530 --> 01:01:12,460
které se právě chystá vytáhnout data z Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Opět, jsme stále čeká JSON, ale teď, protože Typeahead nedělá to pro nás,

1001
01:01:19,480 --> 01:01:24,850
musíme také zaslat spolu hodnotu, která je uvnitř aktuálního textového pole.

1002
01:01:24,850 --> 01:01:28,120
Teď víme, na co se ptát Yahoo! Finance pro,

1003
01:01:28,120 --> 01:01:34,160
a tak nyní je tu funkce, kterou chcete provést, jakmile požadavek dokončení.

1004
01:01:34,160 --> 01:01:36,520
Nemáme plugin, aby se seznam pro nás,

1005
01:01:36,520 --> 01:01:40,630
takže tady je místo, kde jsme se to vlastně bude stavět seznam návrhů.

1006
01:01:40,630 --> 01:01:44,850
Chcete-li, že, stejně jako v PHP jsme spojeny tyto velké řetězce HTML

1007
01:01:44,850 --> 01:01:48,170
pak jsme si vytiskli je, můžeme udělat stejnou věc přesně v JavaScriptu.

1008
01:01:48,170 --> 01:01:51,850
Nejprve budeme začít tento řetězec s názvem návrhy,

1009
01:01:51,850 --> 01:01:54,590
a tento řetězec je jen bude obsahovat nějaký HTML.

1010
01:01:54,590 --> 01:01:58,320
Chceme, aby to bylo seznam věcí, takže budeme začít s tímto seznamem tag,

1011
01:01:58,320 --> 01:02:03,340
a teď budeme iterovat přes všechny symboly, které byly vráceny zpět k nám.

1012
01:02:03,340 --> 01:02:06,500
Pamatujte si, protože jsme řekli Typ dat: "JSON ', to není řetězec.

1013
01:02:06,500 --> 01:02:09,500
To je již pole pro nás. To je opravdu cool.

1014
01:02:09,500 --> 01:02:13,790
Můžeme jednoduše říci: "Chci, abys pripojit prvek seznamu."

1015
01:02:13,790 --> 01:02:16,000
Dáme ji uvnitř prvku v části, která,

1016
01:02:16,000 --> 01:02:19,030
budeme jej třídu návrhů, takže víme, co to je,

1017
01:02:19,030 --> 01:02:23,880
a nyní je zde symbol, že jsme se vrátili z Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Jakmile jsme vytvořili prvek pro každý ze symbolů jsme dostali zpět,

1019
01:02:27,230 --> 01:02:30,100
chceme jen uzavřít seznamu.

1020
01:02:30,100 --> 01:02:33,040
Takže teď návrhy představuje tento malý fragment HTML

1021
01:02:33,040 --> 01:02:37,860
které když se na stránce bude seznam věcí, které hledáte.

1022
01:02:37,860 --> 01:02:41,070
Nyní se pojďme skutečně dát na stránce.

1023
01:02:41,070 --> 01:02:46,390
K tomu, že jsem vlastně vytvořil další prázdný div a já jsem mu poskytla identifikátor návrhů.

1024
01:02:46,390 --> 01:02:52,520
Stejně jako jsme si stanovili obsah div, že by zobrazují cenu stavových údajů,

1025
01:02:52,520 --> 01:02:58,600
nyní jen chcete nastavit obsah tohoto div se, co je tento řetězec

1026
01:02:58,600 --> 01:03:00,290
který obsahuje tyto symboly.

1027
01:03:00,290 --> 01:03:07,650
Pomocí této metody HTML, toto doporučení proměnné, tento řetězec je řetězec HTML.

1028
01:03:07,650 --> 01:03:13,490
Chci, abys to HTML a vložte jej uvnitř div s názvem návrhy.

1029
01:03:13,490 --> 01:03:15,680
Právě jsme připojena něco DOM teď.

1030
01:03:15,680 --> 01:03:20,360
Přidali jsme nějaké nové prvky do DOM, že nyní můžeme zobrazit na stránce.

1031
01:03:20,360 --> 01:03:22,540
Pojďme se podívat, jak to vypadá.

1032
01:03:22,540 --> 01:03:29,110
Pokud načítáme na quote6 a nyní se vrátíme zpět,

1033
01:03:29,110 --> 01:03:34,480
teď, když jsem se začít psát AAPL, že už nemáme, že Bootstrap automatického dokončování,

1034
01:03:34,480 --> 01:03:38,470
ale nyní máme tento seznam, který jsme udělali sami.

1035
01:03:38,470 --> 01:03:43,230
To je trochu ošklivější než Bootstrap Typeahead, například,

1036
01:03:43,230 --> 01:03:45,580
ale to nám umožní udělat jednu věc.

1037
01:03:45,580 --> 01:03:48,660
Když jsme se dívali na tento Bootstrap pluginu,

1038
01:03:48,660 --> 01:03:52,590
jsme viděli, že když jsme autocompleted, jeden z autocomplete hodnot byl AAPL.

1039
01:03:52,590 --> 01:03:54,820
To nemusí být tak užitečné.

1040
01:03:54,820 --> 01:03:59,100
Jako uživatel bych neměl okamžitě rozpoznat všechny symboly akcií.

1041
01:03:59,100 --> 01:04:02,370
Co jsem asi větší pravděpodobností rozpoznat jsou firemní skutečná jména.

1042
01:04:02,370 --> 01:04:05,310
Takže by to bylo opravdu užitečné, pokud spíše než říkat AAPL

1043
01:04:05,310 --> 01:04:07,970
tímto řekl něco jako Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Vzhledem k tomu, že jsme válcované to sami, můžeme velmi snadno udělat.

1045
01:04:12,240 --> 01:04:17,630
Pojďme otevřít náš poslední citát soubor zde, tak quote7.

1046
01:04:17,630 --> 01:04:23,200
>> To je totéž. Právě jsem vytvořil další PHP soubor, který se vrátí k nám víc než jen symboly.

1047
01:04:23,200 --> 01:04:25,550
To bude také dát nám zpět společnosti jména.

1048
01:04:25,550 --> 01:04:28,150
A tak děláme to samé. Děláme AJAX požadavek.

1049
01:04:28,150 --> 01:04:32,370
Po požadavek byl dokončen, budeme provádět tuto funkci zde,

1050
01:04:32,370 --> 01:04:36,520
a tato funkce bude vybudovat velkou řetězec prvků.

1051
01:04:36,520 --> 01:04:39,520
Ale rozdíl je, že hodnota těchto seznamů je již jen symbol,

1052
01:04:39,520 --> 01:04:45,370
je to teď jméno.

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
Když jsme využít naše vyhledávání, musíme nějak předat symbol.

1055
01:04:51,590 --> 01:04:54,950
Nemůžeme projít vyhledávací něco jako Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Musíme ji předat MSFT.

1057
01:04:57,900 --> 01:05:01,640
Když jsme psát HTML, máme spoustu pěkných vestavěné atributy.

1058
01:05:01,640 --> 01:05:05,440
Mohl s ním spojené href nebo třídy.

1059
01:05:05,440 --> 01:05:08,230
Ale to, co opravdu potřebujeme, je pro každý z těchto odkazů

1060
01:05:08,230 --> 01:05:11,120
mít symbol akcií s ním spojené.

1061
01:05:11,120 --> 01:05:14,240
Není vestavěný HTML atributu fotografii symbol,

1062
01:05:14,240 --> 01:05:21,010
ale naštěstí, HTML5 nám umožňuje vytvořit vlastní atributy, aby co chceme.

1063
01:05:21,010 --> 01:05:24,620
Tím, že říkáte dat-symbol, jsem představil nový atribut

1064
01:05:24,620 --> 01:05:29,350
jehož jméno jsem skládá, a je to v pořádku, protože jsem zahájen s těmito daty.

1065
01:05:29,350 --> 01:05:34,270
Budeme uložit uvnitř města se symbolu ze skladu teď.

1066
01:05:34,270 --> 01:05:39,590
Co to znamená, je to, že i když jsme zobrazení hodnoty názvu společnosti

1067
01:05:39,590 --> 01:05:43,380
uvnitř našeho autocomplete, jsme stále pamatovat na symbol

1068
01:05:43,380 --> 01:05:47,110
který je spojen s každou společnost.

1069
01:05:47,110 --> 01:05:50,350
Způsob, jakým to děláš, je uvnitř tohoto prvku.

1070
01:05:50,350 --> 01:05:52,930
Takže to znamená, že musíme udělat ještě jednu změnu.

1071
01:05:52,930 --> 01:05:57,090
Když jsme na něj teď, musíme skutečně využít symbol atributu

1072
01:05:57,090 --> 01:06:00,220
spíše než jen jeho hodnota.

1073
01:06:00,220 --> 01:06:05,010
Pokud se zpět nahoru, přikládáme obslužnou rutinu události návrhy.

1074
01:06:05,010 --> 01:06:09,280
Kdykoliv je jeden z těchto návrhů kliknutí teď, chci něco udělat.

1075
01:06:09,280 --> 01:06:13,160
To, co chci udělat, je změnit hodnotu tohoto vstupního pole.

1076
01:06:13,160 --> 01:06:16,100
Teď chci nastavit stejný val funkci.

1077
01:06:16,100 --> 01:06:21,060
>> Takže bez argumentů tato funkce val vrací na vás, co je již v textovém poli,

1078
01:06:21,060 --> 01:06:27,070
ale pokud dáte to řetězec, to bude trvat tento řetězec a vložte jej do textového pole.

1079
01:06:27,070 --> 01:06:28,980
Já výběru jeho textové pole stejným způsobem.

1080
01:06:28,980 --> 01:06:31,230
Je to jméno je symbolem uvnitř formulářů citátu.

1081
01:06:31,230 --> 01:06:37,540
Teď jsem zaslala mu hodnotu atributu data-symbol.

1082
01:06:37,540 --> 01:06:41,560
Tato věc zde je nový, to $ (to).

1083
01:06:41,560 --> 01:06:46,850
Co se to týká, je prvek, který bylo kliknuto.

1084
01:06:46,850 --> 01:06:50,880
Můžeme vidět, že nejsme připojení událost click

1085
01:06:50,880 --> 01:06:54,690
na každý prvek s třídou návrhu jednotlivě.

1086
01:06:54,690 --> 01:06:57,140
Spíše, blížíme se to trochu jinak.

1087
01:06:57,140 --> 01:07:01,700
Místo toho říkáme, kdykoli něco uvnitř tohoto div náměty,

1088
01:07:01,700 --> 01:07:04,080
která pamatujte je jen kontejner pro tohoto seznamu,

1089
01:07:04,080 --> 01:07:10,150
pokud něco uvnitř tohoto div klepnutí a má třídu sugesce,

1090
01:07:10,150 --> 01:07:13,000
Chci tuto událost na oheň.

1091
01:07:13,000 --> 01:07:17,490
V podstatě to, co to znamená, že můžeme udělat, je, že jsme mohli znovu použít stejný obslužnou rutinu události

1092
01:07:17,490 --> 01:07:20,000
pro všechny věci v seznamu.

1093
01:07:20,000 --> 01:07:22,080
Takže nemáme mít jednu obslužnou rutinu události pro první prvek

1094
01:07:22,080 --> 01:07:24,550
a různé události pro druhý prvek.

1095
01:07:24,550 --> 01:07:29,880
Můžeme místo toho říct, "Chci stejné obslužné rutiny události se vztahuje na všechno v mém seznamu."

1096
01:07:29,880 --> 01:07:34,420
Ale musíme to nějak vědět, který prvek bylo kliknuto.

1097
01:07:34,420 --> 01:07:38,450
Tento "to" klíčové slovo představuje právě to.

1098
01:07:38,450 --> 01:07:42,360
To je předmět, který právě klikli uživatelem.

1099
01:07:42,360 --> 01:07:47,680
Pokud jsem kliknul 3. odkaz, to představuje prvek této třetí odkaz,

1100
01:07:47,680 --> 01:07:51,670
což znamená, že bych mohl dostat svůj atribut, data-symbol,

1101
01:07:51,670 --> 01:07:57,760
které známe musí obsahovat symbol, který je spojený s firmou jsem kliknul.

1102
01:07:57,760 --> 01:08:04,550
Pokud bychom skočit zpět na náš finanční stránce,

1103
01:08:04,550 --> 01:08:08,580
můžeme vidět, že až začnu psát něco jako MSFT,

1104
01:08:08,580 --> 01:08:11,220
jsme již stále jen na reklamní symboly,

1105
01:08:11,220 --> 01:08:13,720
jsme teď dostali skutečné společnosti.

1106
01:08:13,720 --> 01:08:20,410
Ale když jsem klikněte na jednu z těchto společností,

1107
01:08:20,410 --> 01:08:25,180
můžeme vidět, že jsme skutečně vyplnění textové pole není s názvem firmy

1108
01:08:25,180 --> 01:08:29,850
ale s tím, co bylo uloženo v těchto datových atributů.

1109
01:08:29,850 --> 01:08:32,880
A tak když jsem vlastně prohlédnout jeden z těchto prvků pravým kliknutím

1110
01:08:32,880 --> 01:08:36,200
a klepnutím na tlačítko Zkontrolovat prvek, můžeme skutečně vidět, jak to vypadá.

1111
01:08:36,200 --> 01:08:40,290
>> Označit toto je něco, co jsme vytvořili uvnitř, že pro vedení

1112
01:08:40,290 --> 01:08:42,649
když jsme byli budování že řetězec HTML.

1113
01:08:42,649 --> 01:08:47,870
Je vidět, že tímto dat symbol má hodnotu MSFT, což je velmi dobrá.

1114
01:08:47,870 --> 01:08:49,189
To je to, co jsme očekávali.

1115
01:08:49,189 --> 01:08:53,170
To je symbol, a to je, jak jsme se dostali hodnotu, která jsme potřebovali použít

1116
01:08:53,170 --> 01:08:56,140
uvnitř tohoto textového pole.

1117
01:08:56,140 --> 01:08:58,850
To je dost na poptávkový formulář, protože to je něco nudné.

1118
01:08:58,850 --> 01:09:02,990
Pojďme udělat nějaké rychlé vylepšení našeho portfolia stránku.

1119
01:09:02,990 --> 01:09:08,109
Pokud jste použili CS50 Finance na chvíli a můžete začít kupovat a prodávat hodně zásob,

1120
01:09:08,109 --> 01:09:11,300
nakonec tato tabulka dostane docela velký,

1121
01:09:11,300 --> 01:09:13,850
a budete chtít burzovní, samozřejmě.

1122
01:09:13,850 --> 01:09:20,350
Jakmile tabulka je opravdu, opravdu velký, mohlo by to být užitečné pro uživatele, aby se pokusili hledat přes něj.

1123
01:09:20,350 --> 01:09:23,290
Uvnitř vyhledávacího pole, pokud začnu psát něco jako Disney

1124
01:09:23,290 --> 01:09:26,359
a hledají pro své ilustrace Mickey Mouse, můžeme vidět, že tabulka je nyní filtrování

1125
01:09:26,359 --> 01:09:28,189
na základě toho, co jsem právě napsal dovnitř

1126
01:09:28,189 --> 01:09:31,640
Tato funkce vypadá Super komplikované, ale je to opravdu, ale opravdu 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 soubor obsahuje soubor JavaScriptu s názvem portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Pojďme se na to podívat.

1130
01:09:41,130 --> 01:09:44,890
Takže html, js, portfolio.

1131
01:09:44,890 --> 01:09:49,210
Zde je místo, kde děláme, že vyhledávání na stole.

1132
01:09:49,210 --> 01:09:52,750
První věc, kterou musím udělat, je připojit obslužnou rutinu události tohoto textového pole

1133
01:09:52,750 --> 01:09:55,760
protože víme, že chceme, aby naše filtrování funkce na oheň

1134
01:09:55,760 --> 01:09:59,800
pokaždé, když uživatel stiskne něco, protože nemáme čas na hledání tlačítek.

1135
01:09:59,800 --> 01:10:03,000
První věc, kterou musíte udělat, je zjistit, co uživatel hledá,

1136
01:10:03,000 --> 01:10:04,780
stejně jako jsme to udělali předtím.

1137
01:10:04,780 --> 01:10:11,320
Toto klíčové odkazuje na aktuální prvek je uživatel interakci s.

1138
01:10:11,320 --> 01:10:14,070
>> Vzhledem k tomu, že uživatel je interakce s vyhledávacího pole,

1139
01:10:14,070 --> 01:10:17,020
$ Představuje pole pro vyhledávání,

1140
01:10:17,020 --> 01:10:21,820
tak this.val nám dává to, co je uvnitř vyhledávacího pole je uživatel aktuálně píšete.

1141
01:10:22,810 --> 01:10:27,320
Takže, co teď chceme udělat, je chceme iterovat přes všechny řádky

1142
01:10:27,320 --> 01:10:29,240
uvnitř našeho stolu.

1143
01:10:29,240 --> 01:10:35,630
Chcete-li vybrat všechny řádky v naší tabulce, dal jsem, že tabulka k ID tabulky portfolia,

1144
01:10:35,630 --> 01:10:39,060
a každý řádek je reprezentován prvkem TR,

1145
01:10:39,060 --> 01:10:42,080
takže výběr bude vrátit ke mně velkou pole

1146
01:10:42,080 --> 01:10:44,370
všech řádků v mém stole.

1147
01:10:44,370 --> 01:10:47,010
Teď chci, aby iteraci, že pole.

1148
01:10:47,010 --> 01:10:52,390
Mohl bych si pro smyčce, ale jQuery skutečnosti nám poskytuje pěkný funkci s názvem "každý."

1149
01:10:52,390 --> 01:10:55,220
Co každý dělá, je každý přijímá jeden argument,

1150
01:10:55,220 --> 01:10:57,090
a tento argument je funkce.

1151
01:10:57,090 --> 01:11:02,760
Co to udělá, je, že to bude platit tuto funkci na každý prvek uvnitř tohoto seznamu.

1152
01:11:02,760 --> 01:11:05,550
Tato funkce má jeden argument, který je e,

1153
01:11:05,550 --> 01:11:10,090
a když se provede tato funkce, tento e se bude nahrazen prvním řádku,

1154
01:11:10,090 --> 01:11:12,070
pak v druhé řadě, a pak třetí řadě.

1155
01:11:12,070 --> 01:11:15,150
Tímto způsobem, to je totéž, jako běh pro smyčce

1156
01:11:15,150 --> 01:11:21,360
a pak zjišťuje aktuální prvek na základě indexu uvnitř vaší smyčky for.

1157
01:11:21,360 --> 01:11:24,750
Na každé iteraci, pro každý z těchto prvků v tabulce,

1158
01:11:24,750 --> 01:11:30,560
Chci zjistit, jestli textu prvku - text buňky uvnitř daného řádku -

1159
01:11:30,560 --> 01:11:33,130
odpovídá tomu, co jsem hledal.

1160
01:11:33,130 --> 01:11:36,390
Tento velký dlouhý řetězec příkazů je, jak bych mohl udělat, že.

1161
01:11:36,390 --> 01:11:40,900
Za prvé, opět, to se týká - protože je to uvnitř nové funkce -

1162
01:11:40,900 --> 01:11:45,020
toto je nyní aktuální řádek v tabulce.

1163
01:11:45,020 --> 01:11:47,340
Chci, aby se aktuální řádek v tabulce,

1164
01:11:47,340 --> 01:11:49,950
a chci se dostat všechny své děti.

1165
01:11:49,950 --> 01:11:51,940
Nezapomeňte, DOM je hierarchické strom,

1166
01:11:51,940 --> 01:11:54,200
, což znamená, že prvky mají řadu dětí.

1167
01:11:54,200 --> 01:12:00,180
>> Tato. Děti funkce se vrátí na mě zpět matici všechny prvky

1168
01:12:00,180 --> 01:12:03,240
že jsou děti, v tomto případě, řádek v tabulce.

1169
01:12:03,240 --> 01:12:07,150
To je prostě buňky uvnitř této řady.

1170
01:12:07,150 --> 01:12:09,230
Já jen chci, aby vyhledávat v první buňce.

1171
01:12:09,230 --> 01:12:13,090
Tato. První funkce říká, že mi na první prvek v daném poli.

1172
01:12:13,090 --> 01:12:17,070
Pak Odkazová funkce říká, že mě přesně to, co je uvnitř této buňky

1173
01:12:17,070 --> 01:12:19,530
protože chci prohledávat tohoto textu.

1174
01:12:19,530 --> 01:12:21,040
Konečně, pojďme převést na malá písmena,

1175
01:12:21,040 --> 01:12:23,940
takže můžeme udělat textové nezáleží na velikosti písmen dotazy.

1176
01:12:23,940 --> 01:12:29,990
Konečně, chceme zjistit, zda se tento řetězec uvnitř tabulky obsahuje řetězec jsme hledali.

1177
01:12:29,990 --> 01:12:32,980
IndexOf funkce v JavaScriptu dělá jen to.

1178
01:12:32,980 --> 01:12:37,060
To nám říká, zda je tento řetězec obsahuje jiný řetězec.

1179
01:12:37,060 --> 01:12:40,150
Pokud je to pravda, že buňka obsahuje to, co jsem hledal,

1180
01:12:40,150 --> 01:12:42,140
pak chci, aby se ujistil, že je to uvedeno.

1181
01:12:42,140 --> 01:12:45,330
Zobrazit metoda bude říkat, "Zobrazit element."

1182
01:12:45,330 --> 01:12:50,350
Pokud toto není ten případ, pak to znamená, že bez ohledu na pátrám, není obsažena

1183
01:12:50,350 --> 01:12:53,550
v tomto řádku, a tak se chci schovat, je od uživatele.

1184
01:12:53,550 --> 01:12:59,240
To dosahuje že pěkný filtrování účinek, pokud již vidíme celou tabulku.

1185
01:12:59,240 --> 01:13:01,480
Pokud máte zájem o tom, jak tento burzovní stejně,

1186
01:13:01,480 --> 01:13:04,180
budeme psát zdroj on-line. Ale je to opravdu jednoduché.

1187
01:13:04,180 --> 01:13:09,860
JQuery má úžasné metody pro tyto animací a manipulace CSS vlastnosti.

1188
01:13:09,860 --> 01:13:11,020
Tak, to je to pro mě.

1189
01:13:11,020 --> 01:13:15,560
>> Co pak čeká? Jak uvidíte v několika dnech, konečný projekty návrhu se počítá.

1190
01:13:15,560 --> 01:13:17,730
Konečný projekty Návrh bude se vás zeptat na pár otázek,

1191
01:13:17,730 --> 01:13:19,420
ale mezi nimi budou tři milníky -

1192
01:13:19,420 --> 01:13:22,840
jeden je "dobrý" milník, jeden lepší milník, a jeden nejlepší.

1193
01:13:22,840 --> 01:13:25,870
Myšlenka je opravdu pomůže vám kluci nastavit očekávání

1194
01:13:25,870 --> 01:13:29,160
tak, že minimálně budete spokojeni s výkonem svého konečného projektu

1195
01:13:29,160 --> 01:13:32,060
a to bude "dobrý", pokud máte obavy.

1196
01:13:32,060 --> 01:13:34,540
Ale pak v zájmu dostat se dosáhnout jen trochu na něco lepšího

1197
01:13:34,540 --> 01:13:37,680
nebo něco nejlepší, budeme také nějak tlačit vás k, že stejně.

1198
01:13:37,680 --> 01:13:40,660
The CS50 Hack-a-Thon, mezitím, je během několika týdnů.

1199
01:13:40,660 --> 01:13:44,340
Typicky, děláme to na základě loterie základ, protože zájem,

1200
01:13:44,340 --> 01:13:47,680
ale statistiky jsme si vezmu několik stovek z nás v kyvadlové autobusy z Harvard Square

1201
01:13:47,680 --> 01:13:51,540
dolů Kendall náměstí, kde Microsoft má krásnou zařízení výstižně nazývá "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England Výzkumné a vývojové centrum.

1203
01:13:53,830 --> 01:13:56,380
Budeme se tam dostat kolem 8 vecer budeme mít něco k jídlu.

1204
01:13:56,380 --> 01:13:58,160
Kolem 1 hod. budeme mít trochu víc jídla.

1205
01:13:58,160 --> 01:14:02,150
Kolem 5 hod., když jsi ještě vzhůru budeme přes hlavu IHOP nebo se dostanete zpět do areálu.

1206
01:14:02,150 --> 01:14:04,380
Cílem je ponořit se do finálových projektů

1207
01:14:04,380 --> 01:14:06,190
vedle spolužáků a zaměstnanců.

1208
01:14:06,190 --> 01:14:08,280
Pak o několik dní později je CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
který je opravdu chtěl být příležitost pro vás kluci předvést svou práci

1210
01:14:10,990 --> 01:14:12,700
a úspěchy na semestr

1211
01:14:12,700 --> 01:14:15,610
zatímco kontaktech se navzájem a získat představu, co každý dělal.

1212
01:14:15,610 --> 01:14:17,850
Díky, že řekl, moc děkuji Tommymu a Josefovi,

1213
01:14:17,850 --> 01:14:19,960
a uvidíme se v pondělí.

1214
01:14:19,960 --> 01:14:24,070
 [Potlesk]