1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Vecka 9, Fortsättning]

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

3
00:00:05,160 --> 00:00:07,020
[Detta är CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Detta är CS50. Detta är slutet av vecka 9. Tack så mycket.

5
00:00:13,340 --> 00:00:15,310
Äntligen. Vecka 9. Jag fick det.

6
00:00:15,310 --> 00:00:18,590
Idag fortsätter vi vårt samtal om webbprogrammering

7
00:00:18,590 --> 00:00:21,660
med ett öga mot det slutgiltiga projektet, inte för att du måste göra något webbaserad

8
00:00:21,660 --> 00:00:25,610
för slutliga projekt, men eftersom varken för examensarbeten eller efter CS50

9
00:00:25,610 --> 00:00:29,000
detta är verkligen den riktning i vilken modern programvara går.

10
00:00:29,000 --> 00:00:31,770
Och ändå är det faktiskt inte en lätt sak.

11
00:00:31,770 --> 00:00:35,040
I själva verket är en av de svåraste saker att göra aspekten av design.

12
00:00:35,040 --> 00:00:38,600
>> Till exempel genom konstruktion menar vi faktiskt få användargränssnittet

13
00:00:38,600 --> 00:00:40,420
eller användarupplevelsen höger.

14
00:00:40,420 --> 00:00:43,200
Jag förmodar - och vi vet från en nyligen problembild

15
00:00:43,200 --> 00:00:45,960
när några av er sändes dina gnäller om några mjukvara

16
00:00:45,960 --> 00:00:49,000
eller maskinvara som infuriates dig, vare sig på campus eller utanför -

17
00:00:49,000 --> 00:00:51,930
det finns en hel del webbplatser där ute, det finns en hel del hårdvara ute,

18
00:00:51,930 --> 00:00:53,900
denna typ av suger.

19
00:00:53,900 --> 00:00:58,730
Men verkligheten är att göra saker som är lätta att använda men ändå är ändå kraftfulla

20
00:00:58,730 --> 00:01:00,550
är en mycket svår utmaning.

21
00:01:00,550 --> 00:01:03,680
Så för idag frågade jag Josef och Tommy att gå med mig hit

22
00:01:03,680 --> 00:01:06,680
så att vi kan ha en konversation, både om design

23
00:01:06,680 --> 00:01:09,090
och vilka typer av tankeprocesser ska börja gå igenom ditt huvud

24
00:01:09,090 --> 00:01:12,040
När du designar sista projekt, dina framtida strävanden.

25
00:01:12,040 --> 00:01:15,040
Och därefter med Tommy hjälp vi titta på några av de implementeringsdetaljer.

26
00:01:15,040 --> 00:01:18,440
Hur kan du ha lite visioner på papper eller i ditt sinne

27
00:01:18,440 --> 00:01:20,760
att du sedan kan köra programmässigt

28
00:01:20,760 --> 00:01:24,030
genom att använda en del av de tekniker och metoder som vi har precis börjat prata om,

29
00:01:24,030 --> 00:01:29,080
nämligen JavaScript och något ännu nyare, nämligen AJAX, asynkron JavaScript.

30
00:01:29,080 --> 00:01:32,950
Det låter dig skapa allt mer dynamiska av ett användargränssnitt

31
00:01:32,950 --> 00:01:35,780
genom att hämta mer och mer data successivt från en server.

32
00:01:35,780 --> 00:01:38,560
Så vi får se några av de strängar som bra idag.

33
00:01:38,560 --> 00:01:41,800
Som en sidoreplik, om du är intresserad av att koncentrera i datavetenskap

34
00:01:41,800 --> 00:01:45,010
eller minoring i datavetenskap, vet att denna fredag ​​kl

35
00:01:45,010 --> 00:01:48,750
i Maxwell Dworkin 221 kommer det att finnas en pizza händelse

36
00:01:48,750 --> 00:01:50,780
där du kan lära dig lite mer om datavetenskap.

37
00:01:50,780 --> 00:01:54,860
På väg ut genom dörren idag kommer du att kunna plocka upp en inofficiell guide till CS på Harvard.

38
00:01:54,860 --> 00:01:57,290
Vi ska lägga den på papperskorgen burkar utanför i midjehöjd

39
00:01:57,290 --> 00:01:59,750
så att om du vill ta tag i detta och lära lite mer om CS,

40
00:01:59,750 --> 00:02:02,480
som kommer att vara där för dig som det var i vecka 0.

41
00:02:02,480 --> 00:02:06,500
Även om du skulle vilja gå med oss ​​för CS50 lunch på fredag ​​kl 01:15,

42
00:02:06,500 --> 00:02:09,800
bege dig till cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Utan vidare, jag ger dig undervisning karl Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hej. [Applåder]

45
00:02:19,190 --> 00:02:20,770
Tack.

46
00:02:20,770 --> 00:02:24,780
Första gången jag lärde mig om design var i en klass här kallas CS179.

47
00:02:24,780 --> 00:02:28,040
>> Professorn vid tiden berättade historien om en annan professor

48
00:02:28,040 --> 00:02:31,640
som hade gått till ett hotell och använde kranar.

49
00:02:31,640 --> 00:02:35,630
Kan någon berätta för mig vad de 2 rattarna på vänster och höger gör?

50
00:02:35,630 --> 00:02:39,080
[Elev] Varmt och kallt. >> Varmt och kallt. Bra.

51
00:02:39,080 --> 00:02:41,430
Vad du normalt förväntar, eller hur?

52
00:02:41,430 --> 00:02:46,960
Denna professor efter att ha använt kranen vill ta en dusch, och han fortsätter att använda detta.

53
00:02:46,960 --> 00:02:51,310
Han tror att vänster och höger sidorna är för varmt och kallt, eller hur?

54
00:02:51,310 --> 00:02:55,470
Men kan någon berätta för mig vad dessa egentligen göra?

55
00:02:55,470 --> 00:02:58,060
Några händer?

56
00:02:58,060 --> 00:03:01,740
[Ohörbart elev svar] >> Ett förslag är?

57
00:03:01,740 --> 00:03:05,860
[Ohörbart elev svar] >> Temperatur?

58
00:03:05,860 --> 00:03:10,460
Så en av dem reglerar temperatur och andra kontroller? >> [Elev] Vattentryck.

59
00:03:10,460 --> 00:03:12,350
Vattentrycket. Bra.

60
00:03:12,350 --> 00:03:15,100
Denna professor går in i detta och tror att de kontrollerar varmt och kallt,

61
00:03:15,100 --> 00:03:21,470
vänder den rätta, vilket han tycker är för varmt, hela vägen upp

62
00:03:21,470 --> 00:03:23,560
för att han vill ta en varm dusch.

63
00:03:23,560 --> 00:03:28,100
Tja, detta inte riktigt stämmer, så han får inte mycket rolig upplevelse

64
00:03:28,100 --> 00:03:31,110
av att vara i en kall dusch, och vi vet alla hur det känns.

65
00:03:31,110 --> 00:03:33,620
Detta är ett exempel på en konstruktion fel.

66
00:03:33,620 --> 00:03:37,040
Vad jag menar med detta är hans förväntningar från kranen

67
00:03:37,040 --> 00:03:39,420
matchade inte vad som kom ut ur duschen,

68
00:03:39,420 --> 00:03:41,780
som är typ av olyckligt för honom.

69
00:03:41,780 --> 00:03:44,990
Så detta är ett exempel på en design fel som händer i verkliga livet.

70
00:03:44,990 --> 00:03:48,020
Men vi ser alla möjliga andra som också.

71
00:03:48,020 --> 00:03:50,390
Vi är nog inte fans av MBTA-systemet.

72
00:03:50,390 --> 00:03:55,560
Detta är ett tunnelbana faktiskt i London, som säger: "Den här knappen är inte i bruk."

73
00:03:55,560 --> 00:04:00,220
Varför är det även på det? Varför bryr vi ens?

74
00:04:00,220 --> 00:04:02,810
När jag var liten, är den tekniskt kunniga en i huset,

75
00:04:02,810 --> 00:04:05,050
när datorn skulle krascha, skulle min mamma komma till mig,

76
00:04:05,050 --> 00:04:07,060
visar mig den här skärmen och frågar mig vad som hände.

77
00:04:07,060 --> 00:04:09,210
>> Även jag vet inte vad det innebär.

78
00:04:11,890 --> 00:04:14,700
[Skratt] Vad?

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

80
00:04:18,720 --> 00:04:23,050
Ibland känner vi oss som mjukvaruutvecklare är bara trolling oss.

81
00:04:23,050 --> 00:04:28,460
Som användare är vi som, "Vad är det som händer? Någon berätta för oss."

82
00:04:28,460 --> 00:04:32,140
Detta allt handlar om en fråga om design.

83
00:04:32,140 --> 00:04:34,650
Design, som vi kan se, inte enbart om estetik,

84
00:04:34,650 --> 00:04:37,230
det handlar inte om hur det ser ut.

85
00:04:37,230 --> 00:04:41,720
Vi ser här att denna lilla pop-up hit faktiskt ser ganska trevligt.

86
00:04:41,720 --> 00:04:45,290
Den har en skugga i bakgrunden, har det gränsöverskridande radie pågår.

87
00:04:45,290 --> 00:04:47,550
Det är typ av söt.

88
00:04:47,550 --> 00:04:51,480
Det är inte riktigt bra utformad eftersom det inte är mycket användarvänlig.

89
00:04:51,480 --> 00:04:54,920
Det lilla pop-up som kommer upp inte riktigt ge mig någon information

90
00:04:54,920 --> 00:04:58,450
om vad som händer, säger den mig ingenting som användaren

91
00:04:58,450 --> 00:05:01,400
om hur man återhämta sig från felet.

92
00:05:01,400 --> 00:05:05,190
Vi vill tänka på saker att design inte är.

93
00:05:05,190 --> 00:05:06,670
Först, det är inte estetik.

94
00:05:06,670 --> 00:05:10,800
Det är inte heller fyllning din app med massor av onödiga funktioner.

95
00:05:10,800 --> 00:05:14,890
Om du är en thailändsk restaurang, du förmodligen inte vill bli tandläkare samtidigt.

96
00:05:14,890 --> 00:05:17,720
Och med Facebook Frågor och inte att många människor använde den

97
00:05:17,720 --> 00:05:21,130
och det var inte riktigt i centrum för vad de byggde.

98
00:05:21,130 --> 00:05:24,200
Och så är det skönt att tänka på inte så mycket mängden av de saker

99
00:05:24,200 --> 00:05:26,390
att du sätter på din ansökan men kvaliteten

100
00:05:26,390 --> 00:05:28,910
och hur du gör det användarupplevelsen bättre

101
00:05:28,910 --> 00:05:32,540
genom att faktiskt förbättra på vad du redan har.

102
00:05:32,540 --> 00:05:37,040
>> I ett nötskal, berättar designen för oss vad vi ska bygga.

103
00:05:37,040 --> 00:05:41,950
Till exempel, om vi bygger något som låt oss söka upp saker,

104
00:05:41,950 --> 00:05:45,970
som Google, till exempel, ska vi göra saker på ett sätt som

105
00:05:45,970 --> 00:05:48,950
som kräver att användaren kan ta massor av klick för att komma till vad de vill,

106
00:05:48,950 --> 00:05:52,580
eller ska vi göra det på ett sätt, till exempel med Google Instant eller Komplettera automatiskt

107
00:05:52,580 --> 00:05:54,970
som låter oss komma till våra resultat snabbare?

108
00:05:54,970 --> 00:05:58,740
Engineering innebär, liksom Tommy kommer att visa dig, faktiskt bygga det.

109
00:05:58,740 --> 00:06:01,890
Det finns massor av olika typer av design.

110
00:06:01,890 --> 00:06:06,070
Till exempel, för om du bygger något distribuera något

111
00:06:06,070 --> 00:06:09,770
i ett tredje världen land där det inte finns mycket el eller så mycket teknik,

112
00:06:09,770 --> 00:06:11,440
du måste utforma vad du bygger

113
00:06:11,440 --> 00:06:14,210
på ett sätt som lätt ger tillgång till människorna där.

114
00:06:14,210 --> 00:06:18,290
Men vad för slags andra designbeslut kan det finnas

115
00:06:18,290 --> 00:06:21,850
eller kan vara inblandade i något sådant?

116
00:06:23,690 --> 00:06:25,660
Ja. Jag ser en hand.

117
00:06:25,660 --> 00:06:37,200
[Ohörbart elev svar] >> Höger. Exakt. Tillgänglighet är en sak.

118
00:06:37,200 --> 00:06:40,870
Många tänker inte på, "Vad mina användare?"

119
00:06:40,870 --> 00:06:43,160
liksom ytterligheterna av antingen spektrum.

120
00:06:43,160 --> 00:06:47,770
Jag har användare som kan ha funktionshinder som jag inte tänker

121
00:06:47,770 --> 00:06:50,590
och jag bara tänka designa för den allmänna användaren.

122
00:06:50,590 --> 00:06:52,630
Internet är tillgängliga för alla idag,

123
00:06:52,630 --> 00:06:54,870
och jag borde utarbeta för dem också.

124
00:06:54,870 --> 00:06:58,620
Vilka möjliga andra designbeslut kan du göra?

125
00:06:58,620 --> 00:07:00,690
Ja. >> [Elev] Kostnad.

126
00:07:00,690 --> 00:07:02,680
Kostnad. Mycket bra.

127
00:07:02,680 --> 00:07:08,060
En annan sak vi kan basera våra designbeslut på är kostnaden.

128
00:07:08,060 --> 00:07:13,130
Om vi ​​är ett företag, du vill bygga något som inte tar mycket kostar att producera

129
00:07:13,130 --> 00:07:17,720
men kan sälja till en särskilt hög kostnad eller kan få oss lite vinst.

130
00:07:17,720 --> 00:07:21,540
>> Dessa är alla olika typer av design, men när vi bygger någonting på Internet

131
00:07:21,540 --> 00:07:25,120
eller när vi bygger något som förmodligen inte kostar så mycket att bygga upp nu,

132
00:07:25,120 --> 00:07:28,630
Liksom Internet-tillämpningar - du behöver inte kasta mycket kapital i den

133
00:07:28,630 --> 00:07:30,900
för att göra något som faktiskt fungerar -

134
00:07:30,900 --> 00:07:33,490
vad vi är mer oroad över är användarupplevelsen.

135
00:07:33,490 --> 00:07:36,390
Vi kallar detta användarcentrerad design.

136
00:07:36,390 --> 00:07:41,550
Huvudsak vad användarcentrerad design innebär sätter er i skorna av dina användare.

137
00:07:41,550 --> 00:07:44,870
Om någon registrerar sig för vad jag bygger,

138
00:07:44,870 --> 00:07:48,250
de har kommit uppenbarligen min särskilt program med ett mål i sikte,

139
00:07:48,250 --> 00:07:50,280
en uppgift som de vill genomföra.

140
00:07:50,280 --> 00:07:53,650
Och ditt jobb är inte bara att hjälpa dem slutföra denna uppgift

141
00:07:53,650 --> 00:07:57,930
utan att hjälpa dem slutföra uppgiften på ett sätt som är effektivt, intuitivt,

142
00:07:57,930 --> 00:08:01,900
och som någon person sagt borta, tillgänglig.

143
00:08:01,900 --> 00:08:03,750
Vad betyder effektivitet?

144
00:08:03,750 --> 00:08:08,050
Effektivitet innebär hur snabbt gör mitt användarnamn slutföra uppgiften med tanke på min gränssnitt.

145
00:08:08,050 --> 00:08:11,650
Tar det massor av klick för dem att ta sig från en plats till en annan?

146
00:08:11,650 --> 00:08:14,630
Är det tråkigt? Har de utföra massor av repetitiva uppgifter?

147
00:08:14,630 --> 00:08:17,140
Vi vill göra det så effektivt som möjligt

148
00:08:17,140 --> 00:08:20,070
så de behöver inte göra dessa typer av saker.

149
00:08:20,070 --> 00:08:24,230
När det gäller intuition, är det, till exempel, om en användare tittar upp min gränssnitt,

150
00:08:24,230 --> 00:08:27,240
är det lätt för dem att ta sig från plats till plats?

151
00:08:27,240 --> 00:08:30,390
Är det lätt för dem att räkna ut vad de har att klicka på mitt gränssnitt

152
00:08:30,390 --> 00:08:33,770
så att de kan nå målet eller uppgiften som de vill uppnå?

153
00:08:33,770 --> 00:08:37,520
>> Och slutligen, som en person sade där, är tillgängligheten väldigt viktig.

154
00:08:37,520 --> 00:08:39,640
[Manlig talare] Det kommer att tillgängligheten för saker som vision,

155
00:08:39,640 --> 00:08:42,740
gillar hur jag faktiskt designar något för någon som är blind?

156
00:08:42,740 --> 00:08:46,460
Åh. För människor som inte kan se på allt har vi något som kallas skärmläsare.

157
00:08:46,460 --> 00:08:49,070
Vad du bör göra är att du ska bygga din webbplats på ett sätt som

158
00:08:49,070 --> 00:08:52,020
att till exempel vissa teknologier som vi kallar -

159
00:08:52,020 --> 00:08:53,590
Det finns massor av saker nu.

160
00:08:53,590 --> 00:08:55,660
Jag tror att det finns skärmläsare som kallas JAWS.

161
00:08:55,660 --> 00:08:58,410
Många av dessa saker är beroende av vad vi kallar området regler

162
00:08:58,410 --> 00:09:02,010
För att läsa ut till användaren vad som finns på sidan.

163
00:09:02,010 --> 00:09:05,480
För de människor som inte kan se, måste du se till att dessa skärmläsare

164
00:09:05,480 --> 00:09:09,130
kan faktiskt ta upp innehållet på sidan och kan faktiskt visa dina användare,

165
00:09:09,130 --> 00:09:13,630
Om du inte kan se, åtminstone du kan fortfarande förstå innehållet på sidan.

166
00:09:13,630 --> 00:09:16,190
Ja. Okej.

167
00:09:16,190 --> 00:09:23,410
Nog talar om god design. Låt oss tala om dålig design.

168
00:09:23,410 --> 00:09:25,220
Detta är saker som du inte bör göra.

169
00:09:25,220 --> 00:09:27,890
Kan någon berätta för mig om sina erfarenheter med Craigslist

170
00:09:27,890 --> 00:09:32,190
och vad de tycker är inte så bra denna design?

171
00:09:33,690 --> 00:09:36,430
Ja. >> [Eleven] Jag tror att det finns alltför många ord i ett område.

172
00:09:36,430 --> 00:09:39,350
Alltför många ord, eller hur? Helt överväldigande.

173
00:09:39,350 --> 00:09:42,400
Du kommer till den här sidan och du är hälsade med en hel massa saker här uppe

174
00:09:42,400 --> 00:09:43,860
som kanske inte ens någon roll för dig.

175
00:09:43,860 --> 00:09:47,010
Till exempel, du bor i en stat som inte börjar med detta brev.

176
00:09:47,010 --> 00:09:48,690
Låt oss säga att du bor i Texas eller något.

177
00:09:48,690 --> 00:09:53,790
>> Du måste bläddra hela vägen ner på sidan för att komma till den plats du är på.

178
00:09:53,790 --> 00:10:00,320
Jag är från Boston, så låt mig se i Massachusetts. Var är Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Åh, det är här. Åh, det är Boston. Okej.

180
00:10:03,270 --> 00:10:09,070
Låt oss titta på Boston. [Skratt]

181
00:10:09,070 --> 00:10:12,250
Ganska överväldigande, eller hur?

182
00:10:12,250 --> 00:10:16,400
Awkward saker där. [Skratt]

183
00:10:17,320 --> 00:10:19,470
Låt oss säga att jag letar efter någonstans att bo.

184
00:10:19,470 --> 00:10:24,130
Hur många människor har faktiskt använt Craigslist? Massor av dig.

185
00:10:24,130 --> 00:10:30,960
Det är ganska dåliga sätt att se på detta, men låt oss titta på det här.

186
00:10:35,130 --> 00:10:38,970
Vad är skillnaden mellan img och PIC? Kan någon berätta för mig?

187
00:10:41,350 --> 00:10:42,830
Det faktiskt finns ingen skillnad.

188
00:10:42,830 --> 00:10:47,710
De menar exakt samma sak, men de har olika etiketter för dem av någon anledning.

189
00:10:48,980 --> 00:10:53,560
Om jag klickar på har bild, händer ingenting på sidan.

190
00:10:53,560 --> 00:10:57,490
Jag har faktiskt klicka på Sök igen för att något ska hända.

191
00:10:57,490 --> 00:11:02,430
Vad kan vara en bättre konstruktion beslut som skulle kunna göras där?

192
00:11:03,820 --> 00:11:08,030
Om jag klickar på det filtret, vill jag nog filtrera efter just åtgärder

193
00:11:08,030 --> 00:11:09,970
eller att viss kategori.

194
00:11:09,970 --> 00:11:14,450
Så istället för att behöva trycka Sök igen kunde jag bara automatiskt gör filtreringen

195
00:11:14,450 --> 00:11:17,060
typ av Googles stil där de gör det direkt.

196
00:11:17,060 --> 00:11:20,440
[Malan] Men inte bildas som vi har sett dem hittills måste fysiskt in

197
00:11:20,440 --> 00:11:23,170
genom att slå Ange minst eller klicka på en knapp?

198
00:11:23,170 --> 00:11:26,830
Som du har sett dem så långt, har du faktiskt klicka på Skicka för att göra dessa saker.

199
00:11:26,830 --> 00:11:30,090
>> Men som Tommy kommer att visa dig i ett andra, det finns faktiskt sätt för dig

200
00:11:30,090 --> 00:11:33,010
så att när du klickar på den saken den automatiskt kan skicka

201
00:11:33,010 --> 00:11:38,840
vad vi kallar en AJAX begäran och få data tillbaka och filtrera dina resultat omedelbart.

202
00:11:38,840 --> 00:11:41,340
Det finns massor av saker som är fel med detta gränssnitt.

203
00:11:41,340 --> 00:11:43,530
[Malan] kan du söka efter Cambridge?

204
00:11:43,530 --> 00:11:47,030
Det är något lite avvikande här där du bryr dig om Cambridge

205
00:11:47,030 --> 00:11:54,790
och ändå du får Westford, Spring Hill, West Newton och liknande.

206
00:11:54,790 --> 00:11:57,930
Förmodligen inte perfekt. >> Förmodligen inte perfekt.

207
00:11:57,930 --> 00:12:03,900
Hur skulle jag kunna göra användarens upplevelse bättre på just denna sida?

208
00:12:03,900 --> 00:12:07,340
Ja. >> [Elev] Instruktioner.

209
00:12:07,340 --> 00:12:09,500
Okej. Instruktioner i vilken typ av förnuft?

210
00:12:09,500 --> 00:12:14,630
[Elev] Till exempel en sak för första gången användare som inte ens vet vad Craigslist är

211
00:12:14,630 --> 00:12:17,320
eller om du inte vet vad du ska göra.

212
00:12:17,320 --> 00:12:20,150
Rätt. Så förklara vad Craigslist är på denna sida är viktigt.

213
00:12:20,150 --> 00:12:23,490
Vi kan faktiskt säga användarna vad den här sidan är faktiskt för.

214
00:12:23,490 --> 00:12:27,090
Om jag bara besöker denna ser jag en massa platser. Jag vet inte ens vad de betyder.

215
00:12:27,090 --> 00:12:29,730
Men ännu viktigare, bara tittar på detta gränssnitt,

216
00:12:29,730 --> 00:12:35,530
minns jag var tvungen att scrolla ner massor av saker att hitta en viss gemenskap

217
00:12:35,530 --> 00:12:37,560
att jag brydde faktiskt om den här.

218
00:12:37,560 --> 00:12:39,820
Vad är ett snabbare sätt jag kunde göra det? Ja.

219
00:12:39,820 --> 00:12:43,290
[Elev] Dela upp dem i öster, väster regioner. >> Okej.

220
00:12:43,290 --> 00:12:47,460
Jag kan dela in dem i flera kategorier som skulle kunna hjälpa mig snabbare avgöra

221
00:12:47,460 --> 00:12:49,820
hur man får till det viss plats.

222
00:12:49,820 --> 00:12:54,510
[Elev] Sätt en listruta. >> Höger. Okej.

223
00:12:54,510 --> 00:12:58,240
Jag skulle kunna använda en rullgardinsmeny för att vi har en fast uppsättning av saker

224
00:12:58,240 --> 00:13:00,100
och vi kunde visa dem i en rullgardinsmeny.

225
00:13:00,100 --> 00:13:02,240
På så sätt tar det inte upp så mycket plats på skärmen.

226
00:13:02,240 --> 00:13:05,630
Men ännu bättre än så, vad kan vi göra?

227
00:13:05,630 --> 00:13:09,220
Ja. >> [Ohörbart elev svar] >> Kan du säga det igen? >> [Elev] sökrutan.

228
00:13:09,220 --> 00:13:11,260
Ja, en sökruta. Det är bra.

229
00:13:11,260 --> 00:13:16,430
Vad vi kan faktiskt göra är om vi ser tillbaka på bilderna, sökrutan.

230
00:13:16,430 --> 00:13:21,520
Komplettera automatiskt. Mycket enkelt sätt att söka igenom resultat som du vet är i en uppsättning.

231
00:13:21,520 --> 00:13:25,980
Om jag börjar skriva BO, bara visa mig alla de resultat som har BO inne i dem.

232
00:13:25,980 --> 00:13:29,030
På så sätt kan jag lätt hitta den speciella jag vill gå till

233
00:13:29,030 --> 00:13:32,390
istället för att behöva bläddra igenom detta riktigt stora lista.

234
00:13:32,390 --> 00:13:37,450
>> Dessa är alla typer av riktigt lågt hängande frukt att någon som genomför Craigslist

235
00:13:37,450 --> 00:13:42,500
kan faktiskt göra för att göra upplevelsen på webbplatsen mycket bättre för just deras användare.

236
00:13:42,500 --> 00:13:46,370
Okej. Nog talar om dåliga webbplatser.

237
00:13:46,370 --> 00:13:49,410
Låt oss tala om Facebook.

238
00:13:50,880 --> 00:13:54,390
När Facebook kom ut, och i synnerhet Facebook-foton,

239
00:13:54,390 --> 00:13:57,870
Det fanns massor av andra tjänster vid den tid som skulle kunna göra precis samma saker.

240
00:13:57,870 --> 00:14:00,740
De kunde organisera dina bilder i album.

241
00:14:00,740 --> 00:14:03,360
Vad du kan göra är att du kan organisera dem i uppsättningar också.

242
00:14:03,360 --> 00:14:06,070
Du kan organisera dem efter datum. Du kan göra alla dessa särskilda saker.

243
00:14:06,070 --> 00:14:11,710
Men någon som vet vad som fick Facebook bilder explodera när den släpptes?

244
00:14:11,710 --> 00:14:15,080
Ja. >> [Studerande] Taggar. >> Taggar. Exakt.

245
00:14:15,080 --> 00:14:21,300
Vi har Milo hit, som är vår hund maskot med att CS50 bandana.

246
00:14:21,300 --> 00:14:24,810
Du kan se att vi har den här märkning funktion i mitten.

247
00:14:24,810 --> 00:14:28,240
Och vad gjorde Facebook-foton så intressant ur användbarhet synvinkel

248
00:14:28,240 --> 00:14:34,130
är att det faktiskt får människor via denna att engagera sina vänner i sina bilder.

249
00:14:34,130 --> 00:14:37,680
För Facebook, eftersom deras webbplats är särskilt sociala,

250
00:14:37,680 --> 00:14:40,750
det handlar om att bygga denna typ av social atmosfär.

251
00:14:40,750 --> 00:14:42,620
Det förbättrade upplevelsen av bilder mycket mer

252
00:14:42,620 --> 00:14:46,390
eftersom de kan faktiskt börja säga "Det är kopplingar mellan människor,

253
00:14:46,390 --> 00:14:49,220
och dessa är bilder om människor du verkligen bryr sig om. "

254
00:14:49,220 --> 00:14:52,200
En del av det är också typ narcissism.

255
00:14:52,200 --> 00:14:54,980
Folk gillar att märkas i bilder och sånt.

256
00:14:54,980 --> 00:14:58,510
Även om det är inte nödvändigtvis en bra mänsklig egenskap,

257
00:14:58,510 --> 00:15:01,910
Samtidigt den är baserad på goda designbeslut

258
00:15:01,910 --> 00:15:04,860
eftersom människor faktiskt bryr sig om saker som detta.

259
00:15:04,860 --> 00:15:07,190
Så det är Facebook-foton.

260
00:15:07,190 --> 00:15:09,800
>> Men låt oss tala Facebook allmänhet.

261
00:15:09,800 --> 00:15:13,400
Jag är säker på massor av människor här har åsikter om Facebook,

262
00:15:13,400 --> 00:15:16,430
både bra designbeslut och dåliga beslut design.

263
00:15:16,430 --> 00:15:20,270
Så låt oss ventilera eller vara lycklig.

264
00:15:23,480 --> 00:15:26,450
Kom igen. Jag vet allt om du använder Facebook.

265
00:15:26,450 --> 00:15:30,970
Någon måste ha något dåligt att säga eller något gott att säga om den. Ja.

266
00:15:30,970 --> 00:15:35,060
[Elev] I nyhetsflödet finns en massa saker som jag inte riktigt bryr sig om.

267
00:15:35,060 --> 00:15:37,740
Nyhetsflödet gör visar en massa saker som du kanske inte bryr sig om.

268
00:15:37,740 --> 00:15:41,660
Du har vänner på Facebook som du inte har träffat på 2 eller 3 år

269
00:15:41,660 --> 00:15:43,860
och du ser deras nyheter resultat poppar upp i ditt nyhetsflöde

270
00:15:43,860 --> 00:15:45,870
och du egentligen inte bryr sig om det.

271
00:15:45,870 --> 00:15:48,700
Facebook har faktiskt gjort ett försök att göra detta bättre,

272
00:15:48,700 --> 00:15:53,150
och de har faktiskt försökt att driva relevanta resultat till toppen av nyhetsflödet som för sent

273
00:15:53,150 --> 00:15:58,300
så du ser faktiskt saker av vänner som är relevanta för dig eller dina nära vänner.

274
00:15:58,300 --> 00:16:01,110
Något annat? Ja.

275
00:16:01,110 --> 00:16:06,400
[Ohörbart elev svar] >> Kan du säga det igen?

276
00:16:06,400 --> 00:16:10,140
[Elev] Annonserna är relativt diskreta. >> I vilken mening?

277
00:16:10,140 --> 00:16:16,370
[Ohörbart elev svar] De har inte ljus på skärmen, som banners.

278
00:16:16,370 --> 00:16:17,760
Okej. Det är bra.

279
00:16:17,760 --> 00:16:25,030
Om du kommer ihåg Internet från 90-talet - >> [Malan] jag var där. >> Han var där. [Skratt]

280
00:16:25,030 --> 00:16:29,210
Du kanske kommer ihåg blinkande GIF bakgrunder, sparkly saker,

281
00:16:29,210 --> 00:16:31,570
GeoCities stil slags saker.

282
00:16:31,570 --> 00:16:34,080
Det är verkligen inte ett exempel på en bra design

283
00:16:34,080 --> 00:16:36,690
eftersom det är verkligen störande från innehållet.

284
00:16:36,690 --> 00:16:39,590
Yale konst webbplats brukade ha animerade GIF som sin bakgrund

285
00:16:39,590 --> 00:16:41,800
och du inte kunde läsa något på sidan,

286
00:16:41,800 --> 00:16:44,870
men jag antar att någon faktiskt pratade med dem och nu är det lite annorlunda.

287
00:16:44,870 --> 00:16:48,940
[Malan] Det är mycket bättre nu. >> Det är mycket bättre nu, som ni kan se. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Bara bra, bara - Ja. Okej.

289
00:16:56,020 --> 00:17:00,560
>> En del av det är också att göra din sida kanske mycket minimalistiska och mycket förståeligt

290
00:17:00,560 --> 00:17:05,690
så saker på sidan flödet på ett sätt som är mycket logiskt och inte komma i vägen för varandra.

291
00:17:05,690 --> 00:17:11,849
Vilka möjliga andra saker är bra om Facebook eller dåligt om Facebook?

292
00:17:11,849 --> 00:17:15,730
Låt oss bara ha en design konversation här.

293
00:17:19,470 --> 00:17:21,339
Åh. Var? Ja.

294
00:17:21,339 --> 00:17:25,640
[Eleven] Den nya tidslinje systemet kan du söka personens profil om sitt förflutna.

295
00:17:25,640 --> 00:17:28,119
Ooh, Tidslinje.

296
00:17:28,119 --> 00:17:30,280
Tidslinje är en stor sak eftersom det låter dig stjälk dina vänner

297
00:17:30,280 --> 00:17:33,300
tillbaka när de var i gymnasiet.

298
00:17:35,160 --> 00:17:38,060
Tidslinje är bra eftersom det gör att du kan filtrera igenom innehåll mycket snabbare,

299
00:17:38,060 --> 00:17:41,500
det kan du hitta saker som annars skulle ha tagit dig en riktigt lång tid att hitta

300
00:17:41,500 --> 00:17:45,840
bara rulla upp och ner, upp, upp, upp, upp, upp, som att gå tillbaka i tiden.

301
00:17:45,840 --> 00:17:48,910
Men sedan finns det också en slags nackdelen med att i fråga om användarens upplevelse.

302
00:17:48,910 --> 00:17:51,190
Vad kan det vara?

303
00:17:51,190 --> 00:17:56,780
Stora ord som börjar med P-R. >> [Elev] Sekretess. >> Privat, eller hur?

304
00:17:56,780 --> 00:17:59,970
Sekretess är en stor upplevelse frågan.

305
00:17:59,970 --> 00:18:07,190
Detta är en av de saker jag hatar mest om Facebook nu. [Skratt]

306
00:18:07,190 --> 00:18:09,000
[Malan] Som gör jag nu.

307
00:18:09,000 --> 00:18:11,380
David insåg inte detta faktiskt hände förrän igår.

308
00:18:11,380 --> 00:18:14,560
Så nu vet han att varje gång jag chatta att jag vet att han har ignorerar mig.

309
00:18:14,560 --> 00:18:16,880
[Malan] Den besvärliga delen var jag faktiskt ignorera honom,

310
00:18:16,880 --> 00:18:21,040
och jag visste inte att han visste att jag ignorerar honom. [Skratt]

311
00:18:21,040 --> 00:18:24,030
Sekretess är en stor fråga.

312
00:18:24,030 --> 00:18:28,670
Kan någon här berätta vad som kan vara dåligt om Facebook sekretess

313
00:18:28,670 --> 00:18:32,270
förutom det faktum att de gör saker som detta?

314
00:18:32,270 --> 00:18:37,240
Vad är det särskilt svårt att göra när det gäller Facebook privatliv?

315
00:18:37,240 --> 00:18:40,340
Den sortens är en ledande fråga.

316
00:18:41,680 --> 00:18:43,930
Ja. >> [Elev] Göm dina bilder från vissa personer.

317
00:18:43,930 --> 00:18:46,170
Rätt. Exakt, för att dölja dina bilder från vissa personer.

318
00:18:46,170 --> 00:18:51,290
De har denna lilla, lilla knappen i det övre högra som gör att du växla privatliv på ett foto.

319
00:18:51,290 --> 00:18:56,360
Deras skydd av privatlivet är mycket varierande mellan olika typer av menyer.

320
00:18:56,360 --> 00:18:59,510
>> De har blivit mycket bättre om det nyligen, men det brukade vara fallet

321
00:18:59,510 --> 00:19:04,870
att när du ville hindra dina vänner från att se bilder,

322
00:19:04,870 --> 00:19:08,280
Du skulle behöva gå igenom en mycket komplicerad 5-stegs process för att bli som,

323
00:19:08,280 --> 00:19:11,150
Låt mig klicka på denna länk, låt mig klicka igen, låt mig klicka igen,

324
00:19:11,150 --> 00:19:13,420
Låt mig ange vilka människor inte kan se mina bilder.

325
00:19:13,420 --> 00:19:17,250
Det är inte särskilt bra på Facebook del

326
00:19:17,250 --> 00:19:20,530
eftersom så mycket om användarupplevelsen faktiskt ge dem frihet

327
00:19:20,530 --> 00:19:22,460
att kontrollera vad folk kan se.

328
00:19:22,460 --> 00:19:25,550
Vi kallar denna användare kontroll och frihet.

329
00:19:25,550 --> 00:19:31,090
Om du inte låter dina användare gör det på ett sätt som är effektivt och intuitivt,

330
00:19:31,090 --> 00:19:34,570
då din användarupplevelse är inte riktigt så bra alls.

331
00:19:34,570 --> 00:19:38,200
 Vill ni säga något om Facebook?

332
00:19:38,700 --> 00:19:41,420
Hur stänger jag av denna funktion?

333
00:19:41,420 --> 00:19:46,290
[Ong] Du kan inte stänga av denna funktion, och det är en enorm användbarhet fel hos Facebook.

334
00:19:46,290 --> 00:19:49,410
Denna funktion - jag faktiskt såg i den igår -

335
00:19:49,410 --> 00:19:53,940
det är antingen att man inte kan göra det eller det är begravd någonstans mycket, mycket djup

336
00:19:53,940 --> 00:19:58,050
i skrymslen Facebook eftersom jag inte kan lista ut hur man inaktivera den här funktionen alls.

337
00:19:58,050 --> 00:20:00,400
[Malan] Men ibland dessa beslut inte är uppenbara

338
00:20:00,400 --> 00:20:03,890
eftersom ni har gett oss en hel del nyttig feedback på olika CS50 ansökningar

339
00:20:03,890 --> 00:20:05,710
och webbplatser som kursen använder.

340
00:20:05,710 --> 00:20:10,260
Vi har inte genomfört alla dessa önskemål och förslag.

341
00:20:10,260 --> 00:20:14,550
>> En del av det är för att få så många förfrågningar att det är en funktion av tiden,

342
00:20:14,550 --> 00:20:17,070
men ibland gör vi bara ett medvetet beslut som,

343
00:20:17,070 --> 00:20:19,830
"Tack för förslaget, men vi är oense."

344
00:20:19,830 --> 00:20:24,350
Så hur bestämmer du verkligen vad du ska göra om dina användare tycker att du borde göra något

345
00:20:24,350 --> 00:20:28,110
även om du inte nödvändigtvis?

346
00:20:28,110 --> 00:20:32,360
Det är en fin balans mellan faktiskt lyssnar på vad dina användare säger

347
00:20:32,360 --> 00:20:35,840
och faktiskt ha något slags linje där du säger,

348
00:20:35,840 --> 00:20:37,750
"Vi kommer inte att göra vad dessa användare säger."

349
00:20:37,750 --> 00:20:42,520
Och i synnerhet tror jag att det var ett citat av Henry Ford som sammanfattar upp detta ganska bra.

350
00:20:42,520 --> 00:20:47,130
"Om jag hade frågat folk vad de ville, skulle de ha sagt att de ville ha snabbare hästar."

351
00:20:47,130 --> 00:20:51,840
Kan någon sorts retas isär vad det citatet egentligen betyder?

352
00:20:51,840 --> 00:20:56,060
Det är inte bara att användarna vet vad de vill,

353
00:20:56,060 --> 00:20:59,180
men det är mer som -

354
00:20:59,180 --> 00:21:02,720
[Eleven] De vet inte vad som är möjligt.

355
00:21:02,720 --> 00:21:06,140
I del de inte vet vad som är möjligt.

356
00:21:07,880 --> 00:21:11,440
Tease att förutom lite mer. Vad menar du med det?

357
00:21:11,440 --> 00:21:21,340
[Ohörbart elev svar]

358
00:21:21,340 --> 00:21:25,770
Det är bra. Vad jag tror att vi försöker säga här är att folk vet vad de vill.

359
00:21:25,770 --> 00:21:28,050
De vill snabbare hästar.

360
00:21:28,050 --> 00:21:29,840
Vad de verkligen vill är förmågan att gå snabbare,

361
00:21:29,840 --> 00:21:32,310
men de vet inte riktigt det medium genom vilket för att uppnå detta.

362
00:21:32,310 --> 00:21:36,330
När du kommer till dina användare och dina användare berätta något

363
00:21:36,330 --> 00:21:39,700
och de säger, "Vi vill ha dessa funktioner och dessa funktioner och dessa funktioner"

364
00:21:39,700 --> 00:21:42,650
du inte vill att nödvändigtvis tänka på, "Låt mig gå vidare

365
00:21:42,650 --> 00:21:44,720
"Och genomföra vad de uttryckligen säger,"

366
00:21:44,720 --> 00:21:48,610
men vad du vill tänka på är: "Vad för slags idéer kan jag få från det?"

367
00:21:48,610 --> 00:21:50,450
Vad vill de egentligen?

368
00:21:50,450 --> 00:21:55,560
>> Och därifrån vad du kan göra är utforma något som uppfyller dessa krav

369
00:21:55,560 --> 00:22:00,340
men inte nödvändigtvis på det sätt som användaren förväntar sig att vara nöjd.

370
00:22:00,340 --> 00:22:03,830
Så för något liknande slutliga projekt, i mycket reala termer,

371
00:22:03,830 --> 00:22:07,900
vad är en bra heuristisk när det gäller att göra något bättre,

372
00:22:07,900 --> 00:22:10,630
särskilt om designern har denna arrogans om honom

373
00:22:10,630 --> 00:22:14,360
där du slags vet vad som är bäst, kan du ta input från användarna,

374
00:22:14,360 --> 00:22:16,580
men hur går du egentligen om att få den feedback?

375
00:22:16,580 --> 00:22:21,610
I slutliga projekt, mycket konkret, ger det optimala resultat här?

376
00:22:21,610 --> 00:22:25,030
Vad ger optimala resultat - och jag kommer att gå över denna i en andra -

377
00:22:25,030 --> 00:22:29,190
är denna process att utveckla och sedan testa och sedan iteration.

378
00:22:29,190 --> 00:22:32,020
Vad jag menar med testning är oftast när du designar något

379
00:22:32,020 --> 00:22:36,970
du tycker det är ganska bra, liksom, "Jag är en stor designer. Alla kommer att älska det här."

380
00:22:36,970 --> 00:22:41,600
Och sedan lägga ut den där och folk inte gillar det av någon anledning.

381
00:22:41,600 --> 00:22:46,820
Vad du behöver göra är att du måste ta de delar av saker som folk gör som

382
00:22:46,820 --> 00:22:49,180
och förnya de saker som folk inte gillar.

383
00:22:49,180 --> 00:22:53,080
Det låter som en mycket självklar process, men denna process ständigt iteration

384
00:22:53,080 --> 00:22:55,980
på toppen av vad du redan har byggt är en process som hjälper dig

385
00:22:55,980 --> 00:22:59,730
inte bara förfina dina egna färdigheter, men också hjälper dig att förfina designen

386
00:22:59,730 --> 00:23:03,790
så att människor uppskattar faktiskt din produkt ännu mer än de gjorde tidigare.

387
00:23:03,790 --> 00:23:07,390
>> Jag ska gå över mer konkreta exempel på vad du kan faktiskt göra.

388
00:23:07,390 --> 00:23:11,390
Som en slags sista exempel på en produkt, låt oss titta på KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK när den kom ut var mycket, mycket populär.

390
00:23:14,970 --> 00:23:18,760
Kan någon gissa varför?

391
00:23:18,760 --> 00:23:20,950
Vilka är de typer av saker du tycker om detta om du har använt det

392
00:23:20,950 --> 00:23:23,990
eller vad är de typer av saker du inte gillar?

393
00:23:23,990 --> 00:23:31,590
Ja. >> [Ohörbart elev svar] >> Okej.

394
00:23:31,590 --> 00:23:34,730
Det är en del av det är att låta användaren har en fråga som är mer expansiv

395
00:23:34,730 --> 00:23:38,150
än en mycket restriktiv som, "Du måste välja din startdatum

396
00:23:38,150 --> 00:23:39,810
"Och du måste välja din slutdatum."

397
00:23:39,810 --> 00:23:44,910
I själva verket låter den dig vara flexibel om det och det ger dig alla de flygningar i det intervallet.

398
00:23:44,910 --> 00:23:46,730
Något annat?

399
00:23:46,730 --> 00:23:50,530
[Elev] De omfattar avgifter i priset.

400
00:23:50,530 --> 00:23:53,330
De gör inkluderar avgifter i priset.

401
00:23:53,330 --> 00:23:56,720
De skatter och saker går faktiskt rakt in det priset i det övre vänstra

402
00:23:56,720 --> 00:24:00,710
så att du inte luras att tro att du faktiskt betalar för en $ 240 flygning

403
00:24:00,710 --> 00:24:03,280
när det är riktigt 330 $.

404
00:24:03,280 --> 00:24:06,200
Något annat? Ja.

405
00:24:06,200 --> 00:24:10,140
[Ohörbart elev svar]

406
00:24:10,140 --> 00:24:14,610
Jag är inte säker på om de verkligen låta dig göra det.

407
00:24:14,610 --> 00:24:18,310
Jag kan ha fel.

408
00:24:18,310 --> 00:24:23,360
Det kan vara en intressant sak om du vill lägga mer tyngd på vissa filter

409
00:24:23,360 --> 00:24:27,000
så att de trycker resultat relaterade till det filtret till toppen.

410
00:24:27,000 --> 00:24:31,920
Men kan någon berätta för mig vad som är så speciellt med denna vänster sida?

411
00:24:31,920 --> 00:24:39,540
Hur kom du ser traditionellt upp en flygning på en Internettjänst innan?

412
00:24:41,600 --> 00:24:44,650
>> Ja. >> [Ohörbart elev svar] >> Kan du säga det -

413
00:24:44,650 --> 00:24:47,530
[Eleven] Varje flygbolag. >> Ja. Varje flygbolag har en egen webbplats.

414
00:24:47,530 --> 00:24:50,110
Detta konsoliderar saker. Och?

415
00:24:50,110 --> 00:24:52,190
[Eleven] Du vet exakt vilken tid du lämnar.

416
00:24:52,190 --> 00:24:54,460
Du vet exakt vilken tid du lämnar,

417
00:24:54,460 --> 00:24:59,380
men relaterade till filter i synnerhet.

418
00:25:00,710 --> 00:25:03,540
Låt mig dra upp KAYAK.

419
00:25:11,490 --> 00:25:14,020
Åh Gud, pop-ups. Dålig användarupplevelse.

420
00:25:14,020 --> 00:25:17,230
Vad händer när jag flyttar detta reglage?

421
00:25:17,230 --> 00:25:21,010
[Studerande] Automatiska uppdateringar. >> [Ong] Automatiska uppdateringar.

422
00:25:21,010 --> 00:25:23,440
Det är något som är mycket viktigt.

423
00:25:23,440 --> 00:25:25,380
Före detta, när du ville slå upp en flygning,

424
00:25:25,380 --> 00:25:28,410
du var tvungen att sätta på din input plats, din produktion plats, sedan på Sök

425
00:25:28,410 --> 00:25:31,190
skulle bearbeta det och visa dina resultat.

426
00:25:31,190 --> 00:25:34,120
Om du vill ändra din fråga, skulle du behöva trycka tillbaka två gånger,

427
00:25:34,120 --> 00:25:39,770
in i en ny fråga från början, och sedan göra det om och om igen.

428
00:25:39,770 --> 00:25:43,910
Det fina med något sånt här är det använder en väldigt [obegripliga] sak i mitten.

429
00:25:43,910 --> 00:25:46,230
När du gör något sånt här, skjuter bort en begäran

430
00:25:46,230 --> 00:25:48,420
och det tar dig tillbaka alla resultat omedelbart.

431
00:25:48,420 --> 00:25:51,680
Denna typ av omedelbar feedback är något som gjorde KAYAK mycket populära

432
00:25:51,680 --> 00:25:55,910
eftersom det är väldigt lätt för mig att bara ändra min fråga

433
00:25:55,910 --> 00:25:58,890
och att räkna ut de saker som är kring ett visst område

434
00:25:58,890 --> 00:26:01,950
utan att behöva gå fram och tillbaka, fram och tillbaka, och tillbaka.

435
00:26:01,950 --> 00:26:05,200
Så dessa är alla möjliga saker du vill tänka på när du utformar din webbplats.

436
00:26:05,200 --> 00:26:08,930
Hur kan jag göra det mycket effektivt för mina användare att gå igenom vad de arbetar på

437
00:26:08,930 --> 00:26:13,010
och för att komma till deras eventuella mål så snabbt som möjligt?

438
00:26:13,010 --> 00:26:16,430
[Malan] Och Josefs punkt tidigare om användarna inte nödvändigtvis veta vad de vill,

439
00:26:16,430 --> 00:26:18,640
baserat på vad ni nu vet om HTML

440
00:26:18,640 --> 00:26:22,780
och du har kryssrutor, radioknappar, välja menyer, inmatningsfält och liknande,

441
00:26:22,780 --> 00:26:26,140
hur skulle du genomföra idén att plocka en starttid för en flygning?

442
00:26:26,140 --> 00:26:30,030
>> Vilka av dessa olika UI mekanismer skulle du använda?

443
00:26:30,030 --> 00:26:34,100
Om du vet precis hur mycket HTML som lärdes innan

444
00:26:34,100 --> 00:26:39,070
och du vet ingångarna är radio-knappar, kryssrutor, drop-downs, och rutan,

445
00:26:39,070 --> 00:26:43,320
vad skulle din naturliga valet har varit för att plocka datum?

446
00:26:43,320 --> 00:26:48,670
[Elev] Ingång. >> Ingång. Eller kanske en drop-down med alla datum, eller hur?

447
00:26:48,670 --> 00:26:53,170
Så med mer komplexa UI mekanismer som detta på vänster sida som du kan genomföra,

448
00:26:53,170 --> 00:26:55,500
Du kan göra denna process mycket mer intuitivt med ett reglage

449
00:26:55,500 --> 00:27:01,020
eftersom tiden är kontinuerlig, och människor i allmänhet tror inte på det i termer av diskreta bitar.

450
00:27:01,020 --> 00:27:04,950
Okej. Sista.

451
00:27:04,950 --> 00:27:07,370
Tio användbarhet heuristik.

452
00:27:07,370 --> 00:27:10,820
Alla de saker som vi pratat om faller förmodligen under någon av dessa kategorier.

453
00:27:10,820 --> 00:27:14,420
Om du går till den här länken, som platser kommer att läggas på nätet,

454
00:27:14,420 --> 00:27:18,900
du faktiskt kommer att kunna, som du designar din webbplats, hålla dessa heuristik i åtanke

455
00:27:18,900 --> 00:27:21,330
och dessa tumregler.

456
00:27:21,330 --> 00:27:26,610
För dina projekt, det jag föreslår att du gör för att utforma din app bättre

457
00:27:26,610 --> 00:27:28,850
är att göra papper prototyper först.

458
00:27:28,850 --> 00:27:32,150
När du funderar på din ansökan, snabbt skissa vad du vill att det ska se ut

459
00:27:32,150 --> 00:27:36,230
och se till att alla rutorna är placerade på ett sätt som är mycket intuitivt för användaren att använda

460
00:27:36,230 --> 00:27:39,820
och även visa dessa papper prototyper till dina vänner och börja fokusgrupper.

461
00:27:39,820 --> 00:27:44,230
Bara få 2 eller 3 människor och be dem att bara peka på dessa papper prototyper,

462
00:27:44,230 --> 00:27:47,650
och visa dem nya skärmar för att se om de verkligen förstår vad som händer.

463
00:27:47,650 --> 00:27:50,680
>> Vad du vill göra är att ge dem en uppgift, motivera denna uppgift,

464
00:27:50,680 --> 00:27:53,270
och bara ge dem app och låt dem använda den.

465
00:27:53,270 --> 00:27:56,530
Ge inte dem instruktioner längre än så.

466
00:27:56,530 --> 00:28:00,920
Du vill verkligen låta dem interagera med din app på ett sätt som låter dig se

467
00:28:00,920 --> 00:28:03,870
hur de skulle använda den om du inte stod bredvid dem.

468
00:28:03,870 --> 00:28:05,250
Och det är mycket viktigt.

469
00:28:05,250 --> 00:28:08,780
Det kommer att ge dig massor av insikter om människor blir runt vissa saker

470
00:28:08,780 --> 00:28:10,560
på ett sätt som jag inte hade för avsikt dem?

471
00:28:10,560 --> 00:28:14,680
Använder de speciella UI mekanismer på skärmen

472
00:28:14,680 --> 00:28:17,490
på ett sätt som är typ av Hacky?

473
00:28:17,490 --> 00:28:22,020
Jag har inte för avsikt för dem att göra det på det sättet.

474
00:28:22,020 --> 00:28:23,940
Och när du är klar med det, vad vill du göra?

475
00:28:23,940 --> 00:28:26,010
Din design stenar, eller hur?

476
00:28:26,010 --> 00:28:29,600
Vad du vill göra är att du vill utveckla och göra den processen igen.

477
00:28:29,600 --> 00:28:32,110
Så visa det för vänner när du har utvecklat den, testa den,

478
00:28:32,110 --> 00:28:36,630
utveckla, testa, utveckla, testa, iterera, om och om och framåt.

479
00:28:36,630 --> 00:28:39,720
Design är en mycket iterativ process i denna mening.

480
00:28:39,720 --> 00:28:43,280
Du har faktiskt bygga något och sedan inser saker om det

481
00:28:43,280 --> 00:28:46,520
att du inte inser innan och gå tillbaka och förbättras från det.

482
00:28:46,520 --> 00:28:50,890
Nu för utvecklingen delen, det är vad Tommy kommer att visa dig efter pausen

483
00:28:50,890 --> 00:28:53,220
och hur du skulle kunna genomföra något liknande automatisk komplettering

484
00:28:53,220 --> 00:28:56,610
på ett sätt som är ganska enkel.

485
00:28:57,440 --> 00:28:59,550
[Malan] Som Tommy sätter upp här, en fråga då.

486
00:28:59,550 --> 00:29:03,780
En hel del av de tidigaste webbplatser - och när Josef sade 1990 stil webbplats,

487
00:29:03,780 --> 00:29:07,640
Det var implementeringar där om du ville välja en starttid och en sluttid,

488
00:29:07,640 --> 00:29:10,380
uppriktigt sagt, tillbaka i dag och även på vissa webbplatser idag,

489
00:29:10,380 --> 00:29:13,220
hur du gör detta är du väljer en timme från en drop-down,

490
00:29:13,220 --> 00:29:15,910
du väljer minuter från en drop-down, kanske du väljer AM, PM

491
00:29:15,910 --> 00:29:17,440
och sedan gör att 3 gånger.

492
00:29:17,440 --> 00:29:19,920
Och så med 6 klick och kanske lite bläddra

493
00:29:19,920 --> 00:29:24,000
ditt användarnamn kan faktiskt ge någon form av datum och / eller tidsintervall i denna mening.

494
00:29:24,000 --> 00:29:27,920
>> Så definitivt suboptimal och ändå så långt vi har sett några uttrycksfulla kapacitet

495
00:29:27,920 --> 00:29:30,330
på något av de språk som vi har tittat på att göra något sexigare

496
00:29:30,330 --> 00:29:32,620
Liksom detta reglage för start-och sluttid.

497
00:29:32,620 --> 00:29:36,290
Men om du tänker tillbaka på vecka 0 när vi pratade om Scratch,

498
00:29:36,290 --> 00:29:39,080
där också fanns inte widgets som bara gjorde vissa saker.

499
00:29:39,080 --> 00:29:42,700
Du verkligen bara hade dessa grundprinciper som loopar och villkor och liknande.

500
00:29:42,700 --> 00:29:46,910
Snäll för att bara tänka mycket abstrakt nu oberoende av uppgifterna i HTML,

501
00:29:46,910 --> 00:29:51,260
vad som verkligen händer med något sådant starttid och sluttid skjutreglaget?

502
00:29:51,260 --> 00:29:54,960
När jag flyttar min mus och jag klickar på den lilla morot symbolen till vänster

503
00:29:54,960 --> 00:29:59,220
och börja dra, programmatiskt, vad är det du vill kunna genomföra

504
00:29:59,220 --> 00:30:01,000
att göra det hända?

505
00:30:01,000 --> 00:30:04,920
Vilka frågor, vad booleska uttryck som du vill kunna be?

506
00:30:04,920 --> 00:30:06,930
Vad som verkligen händer? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Eleven] Var är markörens position? >> Bra. Var är markörens position?

508
00:30:10,080 --> 00:30:11,970
Detta var något vi behövde uttrycka tillbaka i Scratch,

509
00:30:11,970 --> 00:30:14,690
om det var baserat på plats eller ens färg eller liknande.

510
00:30:14,690 --> 00:30:18,410
Du kanske kommer ihåg aldrig så kort måndag fanns alla dessa saker som kallas händelser

511
00:30:18,410 --> 00:30:22,370
i världen av webben, och så finns det saker som onclick och onkeypress

512
00:30:22,370 --> 00:30:25,960
och onKeyUp och onMouseOver och onMouseOut.

513
00:30:25,960 --> 00:30:29,130
Så inser att även dessa saker vi har tagit för givet på webben

514
00:30:29,130 --> 00:30:32,190
med sajter som Facebook och Gmail, även om du inte har en aning

515
00:30:32,190 --> 00:30:34,890
hur du skulle kanske genomföra det eftersom det finns inget ens som det föreläsning

516
00:30:34,890 --> 00:30:38,570
eller problembild 7, inse att dessa exakt samma grundprinciper,

517
00:30:38,570 --> 00:30:41,090
med HTTP och parametrar och GET och POST,

518
00:30:41,090 --> 00:30:44,010
med de grundläggande HTML ingångar som vi har tittat på hittills

519
00:30:44,010 --> 00:30:47,690
och i ett ögonblick med de programmatiska mekanismer som Tommys väg att införa

520
00:30:47,690 --> 00:30:51,300
kan du börja uttrycka dig precis som du gjorde i vecka 0

521
00:30:51,300 --> 00:30:53,800
av mycket intuitivt dra och släppa.

522
00:30:53,800 --> 00:30:58,950
>> Så med det sagt, Tommy MacWilliam och några nya pusselbitar för oss för webben.

523
00:30:58,950 --> 00:31:03,450
Okej. Mitt namn är Tommy och jag kommer att tala om JavaScript.

524
00:31:03,450 --> 00:31:07,150
Bara en ansvarsfriskrivning: Jag är av den åsikten att JavaScript är bäst programmeringsspråk

525
00:31:07,150 --> 00:31:09,010
i hela hela världen.

526
00:31:09,010 --> 00:31:11,940
Det finns massor av människor som inte håller med mig, men det är bara fantastiskt.

527
00:31:11,940 --> 00:31:16,330
När du går tillbaka till C, om du måste skriva C för en annan klass eller några andra språk,

528
00:31:16,330 --> 00:31:19,780
det är bara riktigt frustrerande i alla låg nivå detaljer du måste gräva ner i.

529
00:31:19,780 --> 00:31:23,050
Så om du någonsin känner dig ledsen över hur irriterande C är att skriva,

530
00:31:23,050 --> 00:31:25,130
bara gå tillbaka, skriva några JavaScript. Det är nirvana.

531
00:31:25,130 --> 00:31:27,980
Du kommer att må mycket bättre om din dålig dag.

532
00:31:27,980 --> 00:31:31,900
En hel del av den magiska JavaScript kommer från dess förmåga att manipulera saker

533
00:31:31,900 --> 00:31:33,730
som redan finns på sidan.

534
00:31:33,730 --> 00:31:38,520
När vi skrev våra PHP-skript, de körs på servern,

535
00:31:38,520 --> 00:31:42,270
och så småningom att PHP-skript matar förmodligen någon HTML.

536
00:31:42,270 --> 00:31:45,860
Det HTML skickades till kunden, och då var det.

537
00:31:45,860 --> 00:31:50,180
Om PHP ville lägga till en knapp på en sida, till exempel, kan det egentligen inte göra det.

538
00:31:50,180 --> 00:31:54,350
Det skulle ha att göra en helt ny HTML-fil och skicka den till webbläsaren.

539
00:31:54,350 --> 00:31:57,840
Med JavaScript vi vet att vi kan uppdatera saker medan de är redan på sidan,

540
00:31:57,840 --> 00:32:00,840
och på grund av detta kan vi erbjuda mycket mer omedelbar feedback,

541
00:32:00,840 --> 00:32:06,150
som verkligen kommer att förbättra användarupplevelsen på vår hemsida.

542
00:32:06,150 --> 00:32:09,330
Bara en snabb resumé av JavaScript väljare.

543
00:32:09,330 --> 00:32:11,590
Vi vet att när vi hämtar en HTML-sida,

544
00:32:11,590 --> 00:32:13,890
det kommer att vara representerade i DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM är minns bara detta stora träd där elementen är relaterade i denna stora hierarki.

546
00:32:19,340 --> 00:32:21,810
När vi arbetade med databaser i pset 7,

547
00:32:21,810 --> 00:32:26,280
en av de första saker som vi behövde för att veta hur man gör var söka i databasen.

548
00:32:26,280 --> 00:32:29,060
Vi har denna stora användare bord, och ibland vi vill bara säga,

549
00:32:29,060 --> 00:32:33,260
"Jag vill bara några av dessa användare som matchar ett villkor."

550
00:32:33,260 --> 00:32:36,020
Likaså när vi har DOM behöver vi något sätt att fråga det.

551
00:32:36,020 --> 00:32:39,490
Vi behöver ett sätt att säga: "Jag vill att alla knappar som ser ut så här

552
00:32:39,490 --> 00:32:41,860
"Eller alla bilder på sidan."

553
00:32:41,860 --> 00:32:44,330
Och dessa väljare tillåter oss att göra det.

554
00:32:44,330 --> 00:32:45,690
Så bara en snabb återblick.

555
00:32:45,690 --> 00:32:50,770
Denna första här, det # skicka, vad är det att gå att välja? Minns någon?

556
00:32:50,770 --> 00:32:54,880
[Ohörbart elev svar] >> Ja, exakt.

557
00:32:54,880 --> 00:32:59,510
Detta kommer att välja ett element på sidan som har ett ID på skicka.

558
00:32:59,510 --> 00:33:03,470
Och så att hash-taggen säger detta väljare kommer att fungera med ID.

559
00:33:03,470 --> 00:33:07,630
Vad sägs om den andra, det här. Centrerad, vad det välja?

560
00:33:11,360 --> 00:33:15,180
Ja. >> [Elev] Klass. >> Exakt. Detta kommer nu att välja efter klass.

561
00:33:15,180 --> 00:33:18,840
Skillnaden mellan ID och klass här är i allmänhet ID ska vara unikt

562
00:33:18,840 --> 00:33:20,820
inom vilken plats du söker över.

563
00:33:20,820 --> 00:33:23,080
Så om du söker på en hel webbsida,

564
00:33:23,080 --> 00:33:27,740
du borde verkligen bara ha 1 element med att vissa ID, så i detta fall skicka.

565
00:33:27,740 --> 00:33:31,330
Med klasser, å andra sidan kan vi ha mer än 1 del på samma sida

566
00:33:31,330 --> 00:33:33,130
med samma klass.

567
00:33:33,130 --> 00:33:36,580
Detta kan vara användbart för att säga att jag vill välja allt som centreras på sidan

568
00:33:36,580 --> 00:33:38,450
snarare än bara 1 sak.

569
00:33:38,450 --> 00:33:40,310
>> Och slutligen, är det sista en här lite mer komplicerat,

570
00:33:40,310 --> 00:33:43,890
men vad kommer detta att välja från DOM?

571
00:33:46,650 --> 00:33:48,810
[Ohörbart elev svar] >> Vad är det?

572
00:33:48,810 --> 00:33:53,250
[Elev] Allt som är en tagg. >> Vi har 2 delar här.

573
00:33:53,250 --> 00:33:58,070
Den andra delen kommer att säga att jag vill välja dessa taggar med en tagg av input,

574
00:33:58,070 --> 00:34:00,730
så alla element som är en ingång tagg.

575
00:34:00,730 --> 00:34:03,080
Men jag vill inte bara välja alla ingångar

576
00:34:03,080 --> 00:34:05,170
att något som en submit-knapp kan vara en ingång

577
00:34:05,170 --> 00:34:08,409
och något som liknar en textruta kan vara en ingång.

578
00:34:08,409 --> 00:34:11,909
Så med dessa hakparenteser jag säger att jag vill bara att välja de delar

579
00:34:11,909 --> 00:34:14,110
som är av typen text.

580
00:34:14,110 --> 00:34:17,400
Någonstans i min HTML-tagg har jag ett attribut som heter typ,

581
00:34:17,400 --> 00:34:19,750
och värdet av denna egenskap måste vara text.

582
00:34:19,750 --> 00:34:21,340
Så vad sägs om denna första del här?

583
00:34:21,340 --> 00:34:25,489
Det första ordet i denna väljare är form så har jag en plats och sedan den här ingången delen.

584
00:34:25,489 --> 00:34:29,620
Vad gör det, sätta formen framför den?

585
00:34:33,409 --> 00:34:35,860
Detta kommer att i princip begränsa vår fråga.

586
00:34:35,860 --> 00:34:38,510
Det kan vara så att vi har några ingångar på sidan

587
00:34:38,510 --> 00:34:41,080
som inte är ättlingar till ett formulär.

588
00:34:41,080 --> 00:34:46,150
Vad detta kommer att göra är det kommer att säga jag vill bara de ingående taggar som har någonstans ovanför dem

589
00:34:46,150 --> 00:34:49,030
någon förälder element i ett formulär.

590
00:34:49,030 --> 00:34:52,100
Och så på det sättet kan vi göra dessa mer hierarkiska frågor

591
00:34:52,100 --> 00:34:55,000
så att vi inte bara att markera allt matchar en viss väljare.

592
00:34:55,000 --> 00:35:00,760
Vi kan typ av begränsning omfattningen av den frågan till något annat.

593
00:35:00,760 --> 00:35:04,000
Så nu när vi vet hur man väljer element på sidan,

594
00:35:04,000 --> 00:35:06,780
låt oss prata lite om AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX är en fortfarande mycket trendig förkortning som står för Asynchronous JavaScript and XML.

596
00:35:12,270 --> 00:35:15,640
Det råkar vara så att XML är bara några sätt att representera data.

597
00:35:15,640 --> 00:35:20,920
>> Denna typ av förlorad popularitet nyligen, så på X i AJAX används inte hela tiden.

598
00:35:20,920 --> 00:35:26,220
I grund och botten, är att göra det som AJAX tillåter oss att göra HTTP-förfrågningar

599
00:35:26,220 --> 00:35:28,620
av sammanhanget av JavaScript.

600
00:35:28,620 --> 00:35:32,310
När vi är i vår webbläsare och vi navigera runt sidor och vi klickar på en länk,

601
00:35:32,310 --> 00:35:37,790
vad vår webbläsare kommer att göra är att göra en HTTP-förfrågan till vad länken vi klickar.

602
00:35:37,790 --> 00:35:41,670
Men det är inte alltid perfekt, för om så är fallet, då som David sa,

603
00:35:41,670 --> 00:35:45,220
Vi måste alltid göra användarna klickar på en Submit-knappen eller klicka på en länk

604
00:35:45,220 --> 00:35:50,380
för att göra vad som helst hända som kommer att innebära en HTTP-begäran.

605
00:35:50,380 --> 00:35:54,160
Så med AJAX kan vi göra dessa förfrågningar på uppdrag av JavaScript.

606
00:35:54,160 --> 00:35:57,020
Det innebär när användaren interagerar med sidan eller något händer,

607
00:35:57,020 --> 00:36:01,780
Vi kan faktiskt göra en programmatisk begäran till en annan PHP-fil på vår hemsida

608
00:36:01,780 --> 00:36:06,280
eller något annat och hämta data som filen spottar ut.

609
00:36:06,280 --> 00:36:09,860
Låt oss ta en titt på ett exempel på AJAX.

610
00:36:09,860 --> 00:36:16,140
Detta är vår CS50 Finance sida som förhoppningsvis några av oss är bekanta.

611
00:36:16,140 --> 00:36:21,790
Om vi ​​tittar på HTML-koden för sidan ser vi här att jag har lagt ett par saker,

612
00:36:21,790 --> 00:36:23,820
en som jag har gett denna form ett ID.

613
00:36:23,820 --> 00:36:26,480
Jag har sagt id = "form-citat".

614
00:36:26,480 --> 00:36:31,910
Jag har gjort detta bara för att det kommer att göra detta till en lite enklare att välja från DOM

615
00:36:31,910 --> 00:36:35,090
eftersom jag kan bara göra en mycket enkel fråga.

616
00:36:35,090 --> 00:36:38,960
Vad jag vill göra här är att jag vill fixa vissa problem med CS50 Finans.

617
00:36:38,960 --> 00:36:41,550
Så om vi går till finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
varje gång jag vill få en offert, måste jag klicka på denna Get Citat knapp,

619
00:36:45,700 --> 00:36:48,960
och som Få offert knappen och sedan tar mig till en annan hela sidan.

620
00:36:48,960 --> 00:36:52,400
Och om jag vill ha en annan citerar jag måste slå på knappen Bakåt och jag skriver det,

621
00:36:52,400 --> 00:36:54,480
Jag får en offert, och jag slog på knappen Bakåt.

622
00:36:54,480 --> 00:36:56,840
Detta är verkligen inte den bästa användarupplevelsen.

623
00:36:56,840 --> 00:37:01,570
Vem skulle verkligen använda webbplatsen om det är att långsamt få aktiekurser?

624
00:37:01,570 --> 00:37:05,630
Så vad vi vill göra med AJAX är att ta bort det steget att gå till en separat sida

625
00:37:05,630 --> 00:37:08,410
För att se resultatet.

626
00:37:08,410 --> 00:37:11,240
>> Vad vi egentligen bara ber om är att verkligen litet pris,

627
00:37:11,240 --> 00:37:14,240
och det är bara en riktigt liten mängd data.

628
00:37:14,240 --> 00:37:17,400
Så det finns ingen anledning för mig att gå en annan hela HTML-sidan,

629
00:37:17,400 --> 00:37:20,670
hämta en helt ny sats HTML, kanske hämta lite fler bilder,

630
00:37:20,670 --> 00:37:24,410
några andra CSS-filer bara för mig att svara på den mycket enkel fråga

631
00:37:24,410 --> 00:37:27,810
hur mycket kostar detta bestånd kostnad.

632
00:37:27,810 --> 00:37:31,000
Med AJAX kan vi göra detta till en mycket enklare.

633
00:37:31,000 --> 00:37:36,400
Vi ser här nere att jag länka i en JavaScript-fil som heter quote.js.

634
00:37:36,400 --> 00:37:40,140
Låt oss verkligen öppna upp filen. Inte där.

635
00:37:42,610 --> 00:37:45,860
Alla mina JavaScript-filer kommer att finnas i HTML

636
00:37:45,860 --> 00:37:47,630
så att webbläsaren kan komma åt den.

637
00:37:47,630 --> 00:37:50,330
Då har vi en separat katalog här för JavaScript,

638
00:37:50,330 --> 00:37:54,340
och nu här är quote.js.

639
00:37:54,340 --> 00:38:00,930
Högst upp i den här filen detta säger här att jag vill vänta på att hela sidan ska laddas

640
00:38:00,930 --> 00:38:04,830
innan jag försöker göra något. Varför är det nödvändigt?

641
00:38:04,830 --> 00:38:08,650
Det visar sig att nästa sak jag kommer att göra här är att börja leta efter ett element

642
00:38:08,650 --> 00:38:10,810
som matchar en viss väljare.

643
00:38:10,810 --> 00:38:15,600
Om denna Javascript är någonsin utförs innan detta element laddas på sidan,

644
00:38:15,600 --> 00:38:17,820
då allt jag försöker göra inte kommer att fungera

645
00:38:17,820 --> 00:38:20,580
eftersom jag ska försöka välja något som inte finns ännu.

646
00:38:20,580 --> 00:38:23,780
Så här raden uppe säger att jag vill att du ska vänta tills allt är laddad

647
00:38:23,780 --> 00:38:28,030
så vi garanterat att alla element som jag letar efter är faktiskt på sidan.

648
00:38:29,730 --> 00:38:34,310
Denna dollartecken här betyder att jag använder biblioteket som heter jQuery.

649
00:38:34,310 --> 00:38:38,570
Denna jQuery biblioteket tillåter oss att använda dessa selektorer som vi bara tittat på.

650
00:38:38,570 --> 00:38:44,010
Genom att säga $ då passerar in som ett argument här # form-citat,

651
00:38:44,010 --> 00:38:47,910
Jag är nu välja den form som vi bara tog en titt på.

652
00:38:47,910 --> 00:38:52,290
Nu har jag en representation av den formen i minnet på något sätt.

653
00:38:52,290 --> 00:38:56,760
>> På detta objekt nu denna representation av formen,

654
00:38:56,760 --> 00:38:58,890
Jag använder nu en funktion som kallas på.

655
00:38:58,890 --> 00:39:02,710
Vad denna funktion gör är att det kommer att fästa en händelsehanterare.

656
00:39:02,710 --> 00:39:06,310
Om vi ​​ska lyssna efter är submit händelsen.

657
00:39:06,310 --> 00:39:08,890
Så när användaren klickar som skicka-knappen eller trycker på Enter,

658
00:39:08,890 --> 00:39:11,730
denna händelse kommer att avfyras.

659
00:39:11,730 --> 00:39:16,390
Genom att haka in i detta kan jag åsidosätta nu standardbeteendet av formuläret.

660
00:39:16,390 --> 00:39:19,770
Utan denna Javascript skulle formuläret lämna allt PHP-fil

661
00:39:19,770 --> 00:39:22,110
vi använde i att åtgärder attribut.

662
00:39:22,110 --> 00:39:25,440
Men istället, jag säger nu, vänta, vänta, vänta, jag vill inte att du faktiskt göra det.

663
00:39:25,440 --> 00:39:31,140
Jag vill att detta ska hända innan du går och försöka lägga till några PHP-fil.

664
00:39:31,140 --> 00:39:32,870
Nu vad vill jag göra?

665
00:39:32,870 --> 00:39:39,270
Vid denna punkt jag vill använda AJAX på något sätt att ladda i vad priset på aktien är.

666
00:39:39,270 --> 00:39:44,170
Det första jag behöver veta är vad lager användaren tittar upp.

667
00:39:44,170 --> 00:39:46,760
För att göra det jag ska använda en annan väljare.

668
00:39:46,760 --> 00:39:49,020
Detta är den tredje väljaren vi tittat på tidigare.

669
00:39:49,020 --> 00:39:54,460
Detta säger att jag vill börja detta formulär element med ett ID form-citat.

670
00:39:54,460 --> 00:39:58,440
Sedan någonstans inuti formuläret måste det finnas en ingång inslag

671
00:39:58,440 --> 00:40:01,270
som har ett namn symbol.

672
00:40:01,270 --> 00:40:05,460
Om vi ​​ser tillbaka på vår HTML, såg vi att vi hade en ingång [namn = symbol].

673
00:40:05,460 --> 00:40:12,380
Det innebär att detta kommer att välja att textruta som användaren skriver in.

674
00:40:12,380 --> 00:40:13,870
Det är trevligt. Vi har textrutan.

675
00:40:13,870 --> 00:40:17,360
Nu behöver vi bara veta vad som finns inuti den.

676
00:40:17,360 --> 00:40:20,290
För att göra det vi kan kalla den här metoden här, detta. Val,

677
00:40:20,290 --> 00:40:23,240
och detta säger jag vet vad textruta du har.

678
00:40:23,240 --> 00:40:28,160
Jag vill att du berätta för mig vad det är användaren skrivit in i den textruta.

679
00:40:28,160 --> 00:40:34,440
Nu har vi en sträng som heter symbol som är lika med vad användaren skrivit in

680
00:40:34,440 --> 00:40:39,820
Det är trevligt. Vi kan använda den strängen nu att vår begäran.

681
00:40:39,820 --> 00:40:42,450
Detta är en ny funktion här, detta $,

682
00:40:42,450 --> 00:40:44,900
utom vi inte längre kommer att välja element,

683
00:40:44,900 --> 00:40:48,910
vi kommer att ringa en annan funktion som är till oss av jQuery.

684
00:40:48,910 --> 00:40:54,810
Denna AJAX funktion är vad som faktiskt kommer att göra detta HTTP-begäran.

685
00:40:54,810 --> 00:40:57,000
Så vi måste berätta det några saker.

686
00:40:57,000 --> 00:41:01,410
Det första vi måste säga denna funktion är där jag vill att begäran att gå.

687
00:41:01,410 --> 00:41:08,910
Någonstans i mitt projekt har jag den här filen inuti HTML-katalog som heter quote.php.

688
00:41:08,910 --> 00:41:15,150
Jag kan komma åt denna fil, såg vi, precis som här, om jag går till localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Jag vill att min JavaScript för att lämna in en begäran till den sidan.

690
00:41:20,450 --> 00:41:22,920
Vilken typ av förfrågan nu?

691
00:41:22,920 --> 00:41:27,210
Vi såg tidigare att formen har denna metod = "post"-attribut,

692
00:41:27,210 --> 00:41:29,270
och det betyder att det kommer att göra en POST-begäran,

693
00:41:29,270 --> 00:41:32,630
så det kommer inte att sätta något i URL, snarare än en GET begäran,

694
00:41:32,630 --> 00:41:36,860
som bara skulle få sparken om vi bara åt sidan med webbläsaren, till exempel.

695
00:41:36,860 --> 00:41:41,260
Nu har vi sagt att jag vill göra en HTTP POST-begäran

696
00:41:41,260 --> 00:41:44,840
till en sida som ligger på quote.php.

697
00:41:44,840 --> 00:41:51,490
När vi skicka formuläret, minns vi kunde komma åt de ingående delarna inuti formuläret

698
00:41:51,490 --> 00:41:54,430
med att $ _POST variabeln.

699
00:41:54,430 --> 00:41:58,710
Hittills i berättelsen som vi inte har faktiskt skickat längs data ännu.

700
00:41:58,710 --> 00:42:00,640
Vi har precis sagt att vi gör en AJAX begäran

701
00:42:00,640 --> 00:42:03,200
och här är den typ av förfrågan vi gör.

702
00:42:03,200 --> 00:42:07,090
Nu måste vi verkligen skicka några data till sidan.

703
00:42:07,090 --> 00:42:10,930
För att göra det vi kan använda den här egenskapen kallas data.

704
00:42:10,930 --> 00:42:14,950
Värdet för den här egenskapen är faktiskt en associativ array.

705
00:42:14,950 --> 00:42:19,390
Anledningen till detta är det tillåter oss att skicka mer än bara 1 bit data.

706
00:42:19,390 --> 00:42:24,750
Det är därför vi har dessa klammerparenteser här inkapslad i dessa andra klammerparenteser.

707
00:42:24,750 --> 00:42:29,680
Tangenterna i dessa associativa arrayer kommer att vara samma sak

708
00:42:29,680 --> 00:42:32,630
som de namnet attribut i vårt formulär element.

709
00:42:32,630 --> 00:42:35,740
Det betyder att om jag skickar längs en nyckel symbol,

710
00:42:35,740 --> 00:42:41,870
det betyder min PHP-sida kan komma åt denna data med $ _POST [symbol]

711
00:42:41,870 --> 00:42:44,640
precis som vi gjorde innan när vi skickar ett formulär.

712
00:42:44,640 --> 00:42:47,090
Och nu de faktiska uppgifter som vi vill skicka

713
00:42:47,090 --> 00:42:50,790
kommer att vara värdet insidan av denna associativ array.

714
00:42:50,790 --> 00:42:54,070
>> Vi lagras denna text i en variabel som kallas symbol,

715
00:42:54,070 --> 00:42:57,380
och så vi skickar tillsammans nu nyckel symbol

716
00:42:57,380 --> 00:43:01,380
och ett värde oavsett användaren skrivit in

717
00:43:01,380 --> 00:43:06,270
Nu har vi gjort denna HTTP-förfrågan, vår PHP-fil har utförts,

718
00:43:06,270 --> 00:43:11,480
och det kommer att skicka några data tillbaka nu till klienten som bara gjorde denna begäran.

719
00:43:11,480 --> 00:43:15,220
Nu måste vi reagera på vad servern sade till oss.

720
00:43:15,220 --> 00:43:20,180
För att göra det vi har denna sista egenskap här kallas framgång.

721
00:43:20,180 --> 00:43:24,240
Värdet av denna framgång nyckel faktiskt kommer att vara en funktion,

722
00:43:24,240 --> 00:43:26,910
och detta är en av de riktigt coola saker du kan göra med JavaScript.

723
00:43:26,910 --> 00:43:31,720
Inte bara kan du få Ints eller matriser som ett värde inuti en associativ array,

724
00:43:31,720 --> 00:43:34,170
Vi kan också ha en funktion.

725
00:43:34,170 --> 00:43:36,380
Så genom att säga framgång, det är min nyckel.

726
00:43:36,380 --> 00:43:38,830
Ett kolon säger här kommer värdet,

727
00:43:38,830 --> 00:43:41,810
och nu värdet av detta är faktiskt en funktion.

728
00:43:41,810 --> 00:43:44,460
Så vi behöver inte ge den här funktionen ett namn i sig.

729
00:43:44,460 --> 00:43:48,820
Vi kan bara säga att detta kommer att bli någon funktion. Det kommer att ta 1 argument.

730
00:43:48,820 --> 00:43:51,190
Argumentet att denna funktion kommer att vara

731
00:43:51,190 --> 00:43:54,460
oavsett servern skickade oss tillbaka från begäran.

732
00:43:54,460 --> 00:43:57,750
Precis som när vår webbläsare gör en förfrågan skickar servern något tillbaka

733
00:43:57,750 --> 00:43:59,060
och webbläsaren visar den,

734
00:43:59,060 --> 00:44:03,030
i samband med AJAX vi bara gjort en förfrågan skickade servern något tillbaka,

735
00:44:03,030 --> 00:44:07,110
och nu har vi som representeras som en sträng.

736
00:44:07,110 --> 00:44:11,280
Med den strängen skulle jag bara vilja visa det på sidan.

737
00:44:11,280 --> 00:44:14,040
För att göra det jag ska ha en sista väljaren.

738
00:44:14,040 --> 00:44:17,570
Jag vill välja det element med ID priset.

739
00:44:17,570 --> 00:44:20,710
Detta är bara en tom div som jag har skapat på sidan,

740
00:44:20,710 --> 00:44:26,640
och jag vill ställa innehållet i den div som oavsett servern skickade oss tillbaka.

741
00:44:26,640 --> 00:44:30,280
Jag har faktiskt ändrat quote.php lite.

742
00:44:30,280 --> 00:44:33,460
>> I stället för att ringa render och göra lite sida,

743
00:44:33,460 --> 00:44:38,100
quote.php nu bara kommer att skriva ut värdet av beståndet som en sträng.

744
00:44:38,100 --> 00:44:41,880
Så om du skulle faktiskt besöka sidan, skulle du se just det lilla strängen

745
00:44:41,880 --> 00:44:45,030
oavsett aktiekursen är.

746
00:44:45,030 --> 00:44:50,170
En sista sak vi behöver göra här är att bara se den här funktionen returnerar false.

747
00:44:50,170 --> 00:44:53,560
Vad detta säger är att om jag är inne på en händelsehanterare

748
00:44:53,560 --> 00:44:57,300
och att händelsehanterare returnerar false stället för att återvända sant,

749
00:44:57,300 --> 00:45:01,510
det betyder att jag inte vill det ursprungliga händelsen att skjuta.

750
00:45:01,510 --> 00:45:05,270
I det här fallet, om vi inte hade någon JavaScript och vi lämnade ett formulär,

751
00:45:05,270 --> 00:45:08,280
vår webbläsare kommer att säga, "Jag kommer att skicka dessa data tillsammans,"

752
00:45:08,280 --> 00:45:10,130
och de kommer att skicka dig till en annan sida.

753
00:45:10,130 --> 00:45:14,360
Eftersom vi använder AJAX nu, det finns ingen anledning att skicka användaren till en annan sida.

754
00:45:14,360 --> 00:45:17,920
Vi ska bara visa resultaten dynamiskt på samma sida.

755
00:45:17,920 --> 00:45:21,460
Vi vill verkligen inte att de ska gå någonstans, och jag vill stanna på samma sida.

756
00:45:21,460 --> 00:45:27,060
Så genom att returnera false, ser vi till att formuläret inte göra det för oss.

757
00:45:27,060 --> 00:45:31,170
Låt oss ta en titt på vad detta egentligen ser ut.

758
00:45:31,170 --> 00:45:34,180
Vår offert sidan ser likadan ut.

759
00:45:34,180 --> 00:45:37,240
Låt mig dra upp inspektören här nere så att vi kan se vad som händer.

760
00:45:37,240 --> 00:45:40,270
Gör det till en lite mindre enorm.

761
00:45:40,270 --> 00:45:44,590
Tänk om vi öppnar upp fliken Nätverk, det är där vi kan se alla HTTP-förfrågningar

762
00:45:44,590 --> 00:45:47,570
som händer på sidan.

763
00:45:47,570 --> 00:45:52,890
>> För en symbol Låt mig skriva in AAPL och klicka Få offert.

764
00:45:52,890 --> 00:45:56,720
Nu såg vi att en del av Apple kostar ett visst antal dollar

765
00:45:56,720 --> 00:46:00,410
bara dök upp på sidan, men URL ändrar inte alls.

766
00:46:00,410 --> 00:46:04,570
I själva verket, här är HTTP-begäran som vi just gjort.

767
00:46:04,570 --> 00:46:09,980
Vi gjorde en POST-begäran till quote.php. Som är vettigt.

768
00:46:09,980 --> 00:46:12,800
Detta är vad servern skickade oss tillbaka.

769
00:46:12,800 --> 00:46:16,320
Det är inte längre denna gigantiska HTML-dokument med bilder och sånt,

770
00:46:16,320 --> 00:46:20,920
det är bara en textrad och sedan vi bara visade textraden.

771
00:46:20,920 --> 00:46:26,290
Om vi ​​går tillbaka till rubrikerna och se vad vi faktiskt skickade insidan av denna HTTP-begäran,

772
00:46:26,290 --> 00:46:33,950
kan vi se här nere att vi skickade längs en nyckel symbol och ett värde på AAPL,

773
00:46:33,950 --> 00:46:36,430
vilket är vad användaren skrivit in

774
00:46:36,430 --> 00:46:39,230
Det är trevligt, men det är fortfarande lite irriterande.

775
00:46:39,230 --> 00:46:42,490
Jag har fortfarande att klicka på denna knapp för att få aktiekurser.

776
00:46:42,490 --> 00:46:45,880
Vi är upptagna människor och vi har inte tid att klicka på knappar.

777
00:46:45,880 --> 00:46:49,910
Google insåg detta ett litet tag sedan när de genomfört Google Instant.

778
00:46:49,910 --> 00:46:53,590
Vad Google Instant gör är som du skriver det börjar bara visa resultat för dig

779
00:46:53,590 --> 00:46:56,520
så du behöver inte oroa dig för ens klicka på Sök.

780
00:46:56,520 --> 00:46:58,730
Egentligen en rolig historia med anknytning till detta.

781
00:46:58,730 --> 00:47:01,100
När Google Instant kom ut, var folk som "Whoa, är detta super fantastiskt."

782
00:47:01,100 --> 00:47:02,540
"Det här är så coolt."

783
00:47:02,540 --> 00:47:05,950
Och en elev ner vid Stanford som var 19 vid tiden

784
00:47:05,950 --> 00:47:09,000
gjorde denna plats som kallas YouTube Direkt.

785
00:47:09,000 --> 00:47:13,170
Alla YouTube Direkt gör är att söka effektivt YouTube direkt.

786
00:47:13,170 --> 00:47:17,020
Så i stället för att gå till YouTube.com och trycka på sök,

787
00:47:17,020 --> 00:47:21,650
När jag börjar skriva in YouTube Omedelbar något liknande CS50,

788
00:47:21,650 --> 00:47:25,320
kunde vi se här att det är ett försök att på en långsam Internet-anslutning

789
00:47:25,320 --> 00:47:28,500
fylla dessa resultat live.

790
00:47:28,500 --> 00:47:35,590
För att göra det vi faktiskt kan göra en mycket enkel modifiering våra quote.js fil.

791
00:47:35,590 --> 00:47:40,900
Just nu är vi fästa denna händelse när formuläret skickas.

792
00:47:40,900 --> 00:47:43,760
Vi vill egentligen inte göra användaren skicka formuläret längre,

793
00:47:43,760 --> 00:47:48,570
så låt oss istället brand denna händelse varje gång användaren trycker på en tangent.

794
00:47:48,570 --> 00:47:53,200
För att göra det låt oss först ändra händelsen från underkasta sig keyUp.

795
00:47:53,200 --> 00:47:55,740
Det innebär att i stället vänta på formuläret för att skicka,

796
00:47:55,740 --> 00:47:58,490
varje gång du trycker på knappen, är något kommer att hända.

797
00:47:58,490 --> 00:48:02,030
Det går inte längre att bifoga den här keyUp händelse till hela formen.

798
00:48:02,030 --> 00:48:05,080
Vi verkligen bara bryr sig om att sökrutan.

799
00:48:05,080 --> 00:48:09,320
>> För att välja det nu kan vi ändra detta vara, snarare än form-citat,

800
00:48:09,320 --> 00:48:14,220
form-citat och vi kommer att ha en ingång (type = text) eller vi kan säga (namn = symbol) -

801
00:48:14,220 --> 00:48:16,420
vad vi vill.

802
00:48:16,420 --> 00:48:18,650
Nu finns det en sista vi måste göra.

803
00:48:18,650 --> 00:48:21,190
Tänk här nere när vi sa returnera false

804
00:48:21,190 --> 00:48:24,370
Vi sade att vi inte vill att standard händelsen att skjuta.

805
00:48:24,370 --> 00:48:26,390
Men det råkar vara så att om vi inaktiverar det nu,

806
00:48:26,390 --> 00:48:29,660
vad vi skriver i kommer inte att dyka upp i webbläsaren längre

807
00:48:29,660 --> 00:48:33,000
eftersom det skulle vara standardbeteendet att skriva i en textruta.

808
00:48:33,000 --> 00:48:38,660
Vi vill inte längre att överskrida detta, så låt oss förstöra denna återgång falskt.

809
00:48:38,660 --> 00:48:44,800
Om vi ​​sparar det och ladda om sidan, nu när jag börjar skriva AAPL

810
00:48:44,800 --> 00:48:50,160
ser du att aktiekursen i botten här håller på att slutföra automatiskt.

811
00:48:50,160 --> 00:48:53,150
Så här är CS50 Finans Direkt.

812
00:48:53,150 --> 00:48:55,860
Faktiskt en rolig historia om YouTube Direkt

813
00:48:55,860 --> 00:48:59,420
är att eleven bara typ av skrev det som en 1-natt-projektet,

814
00:48:59,420 --> 00:49:03,800
och nästa dag var han erbjuden ett jobb som YouTube VD.

815
00:49:03,800 --> 00:49:10,610
Så enkelt är det, ni CS50 studenter kan dina sista projekt får du ett jobb på YouTube.

816
00:49:10,610 --> 00:49:14,720
Nåt sånt är en riktigt cool idé för ett examensarbete, eller hur?

817
00:49:14,720 --> 00:49:18,170
Vi hade några befintliga funktioner som vi ville integrera med.

818
00:49:18,170 --> 00:49:20,330
Vi förbättrar användarupplevelsen lite,

819
00:49:20,330 --> 00:49:24,340
och plötsligt söker något på YouTube Omedelbar kan vara mycket enklare

820
00:49:24,340 --> 00:49:27,290
än att söka efter det på regelbunden YouTube.

821
00:49:27,290 --> 00:49:30,790
Så det är AJAX i ett nötskal.

822
00:49:30,790 --> 00:49:34,860
>> I de exempel som Josef visade, såg vi en massa autocompletes,

823
00:49:34,860 --> 00:49:39,250
och dessa autocompletes är verkligen, verkligen praktiskt eftersom vi inte behöver komma ihåg -

824
00:49:39,250 --> 00:49:41,770
Till exempel, om du inte kommer ihåg aktiekursen för Apple

825
00:49:41,770 --> 00:49:45,110
och vi vet bara att det är en en något, snarare än att bara säga till mig,

826
00:49:45,110 --> 00:49:48,740
"En del av denna sak kostar så mycket pengar"

827
00:49:48,740 --> 00:49:52,540
Jag sorts vilja veta vad bestånden börjar med AA.

828
00:49:52,540 --> 00:49:58,340
Vi kan göra som verkligen snyggt med Bootstrap biblioteket som redan ingår

829
00:49:58,340 --> 00:50:01,380
inuti CS50 Finans.

830
00:50:01,380 --> 00:50:09,390
Om du kommer hit till JavaScript-taggen och bläddra ner till Typeahead,

831
00:50:09,390 --> 00:50:13,730
Detta är bara en trevlig plugin som någon redan skrivit för oss,

832
00:50:13,730 --> 00:50:16,980
och vi kan enkelt använda sin funktionalitet som denna.

833
00:50:16,980 --> 00:50:21,410
Jag skrev i ett A och här är en lista över några stater som börjar med A.

834
00:50:21,410 --> 00:50:25,360
Låt oss säga att jag tycker att detta är riktigt coolt och det är dags för mig att ta med detta på min sida.

835
00:50:25,360 --> 00:50:28,300
Det visar sig att det är riktigt, riktigt enkelt.

836
00:50:28,300 --> 00:50:32,810
Vi hoppa över här quote3.js.

837
00:50:34,890 --> 00:50:37,380
Min fil ser lite annorlunda.

838
00:50:37,380 --> 00:50:39,700
Här nere alla mina AJAX grejer är densamma.

839
00:50:39,700 --> 00:50:43,170
Jag vill läsa beståndet data utan att behöva gå till en annan sida.

840
00:50:43,170 --> 00:50:46,220
Men nu vill jag använda denna plugin.

841
00:50:46,220 --> 00:50:51,020
Bootstrap Dokumentationen har bra exempel på hur just jag kan göra det.

842
00:50:51,020 --> 00:50:54,350
Jag vill säga: "Här är ingången som jag vill Komplettera automatiskt på"

843
00:50:54,350 --> 00:50:56,640
och jag kommer att kalla denna funktion som kallas typeahead,

844
00:50:56,640 --> 00:50:59,730
och det kommer att hantera alla de Typeahead saker för oss.

845
00:50:59,730 --> 00:51:02,090
Det kommer att initiera listan kommer den att göra alla våra filtrering.

846
00:51:02,090 --> 00:51:06,680
Det enda man behöver veta är vilka uppgifter vi autocompleting på.

847
00:51:06,680 --> 00:51:10,480
Så jag fick reda på den här knappen bara genom att läsa dokumentationen och titta på exemplen.

848
00:51:10,480 --> 00:51:14,150
Om jag ger det en nyckel källa, värdet på denna nyckel

849
00:51:14,150 --> 00:51:17,770
är bara några rad saker jag vill Komplettera automatiskt.

850
00:51:17,770 --> 00:51:20,180
Denna variabel kom från denna andra fil.

851
00:51:20,180 --> 00:51:23,400
Jag öppnar symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Detta symbols.js är just detta verkligen, verkligen stora array som innehåller strängar

853
00:51:27,980 --> 00:51:32,080
av alla dessa lager symboler från NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Om jag vill gå tillbaka till HTML så jharvard, vhosts, globalhost, html, mallar,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Eftersom det nu heter quote3.js, låt mig ändra JavaScript-filen jag även här.

857
00:51:50,910 --> 00:51:55,110
Nu har jag quote3.js, så jag kommer att ladda i den separata JavaScript-fil,

858
00:51:55,110 --> 00:51:57,910
den som har det Bootstrap Komplettera automatiskt.

859
00:51:57,910 --> 00:52:04,430
Nu när jag hoppar tillbaka till webbläsaren, ladda om sidan, och jag börjar skriva aa,

860
00:52:04,430 --> 00:52:06,880
Det är min Komplettera automatiskt. Och det var verkligen så enkelt är det.

861
00:52:06,880 --> 00:52:11,400
Jag hade 1 kodrad som bara sa: "Här är de saker jag vill Komplettera automatiskt på"

862
00:52:11,400 --> 00:52:16,590
och plötsligt har jag detta verkligen, verkligen trevlig funktionalitet med inte en massa ansträngning alls.

863
00:52:16,590 --> 00:52:19,810
När du utvecklar webbplatser och i synnerhet den främre änden sidan av saken,

864
00:52:19,810 --> 00:52:21,840
du kommer att hitta så är fallet mycket.

865
00:52:21,840 --> 00:52:25,700
Det finns mycket, mycket, mycket riktigt coola fria bibliotek ute

866
00:52:25,700 --> 00:52:30,190
som gör det super lätt att göra saker som denna.

867
00:52:30,190 --> 00:52:37,230
Kan någon komma på några nackdelar med att helt enkelt autocompleting på denna stora lista över symboler?

868
00:52:37,230 --> 00:52:41,580
Vad kan vara något som är inte bäst med detta synsätt?

869
00:52:42,790 --> 00:52:45,960
Ja. >> [Elev] tid, om du har en hel del [ohörbart]

870
00:52:45,960 --> 00:52:50,420
Ja. Just nu är vi laddar ner denna enorma JavaScript-fil och det finns en hel del symboler.

871
00:52:50,420 --> 00:52:54,360
Och så om vi har massor av saker, det kan typ av ökad latens, inte bara leta

872
00:52:54,360 --> 00:52:56,600
men också ladda ner själva filen.

873
00:52:56,600 --> 00:52:58,670
Jättebra. Något annat?

874
00:53:01,950 --> 00:53:05,280
Just nu finns det ingen verklig känsla av relevans.

875
00:53:05,280 --> 00:53:08,190
Om jag skriver i ett A, de företag som visar upp här

876
00:53:08,190 --> 00:53:11,220
kanske inte de mest populära företagen som börjar med A.

877
00:53:11,220 --> 00:53:17,130
>> Innan jag kommer till Apple, kan det ta lite fler tecken att hitta vad jag letar efter.

878
00:53:17,130 --> 00:53:20,420
Denna Komplettera automatiskt har inte denna känsla av relevans.

879
00:53:20,420 --> 00:53:24,400
Det kommer bara att säga, "Allt som matchar jag ska visa."

880
00:53:24,400 --> 00:53:30,510
Istället för det, skulle jag vilja att på något sätt integrera viss betydelse i mina sökningar.

881
00:53:30,510 --> 00:53:36,440
Om jag går hit till Yahoo! Finans, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Om jag försöker att ange en symbol på Yahoo Finance sida

883
00:53:42,100 --> 00:53:52,310
och jag börjar skriva goog, jag har denna fina lista över saker.

884
00:53:52,310 --> 00:53:57,100
Uppenbarligen ser det ut som Yahoo Finance gör något mer smart här.

885
00:53:57,100 --> 00:53:59,790
De har viss relevans och de har också ytterligare information

886
00:53:59,790 --> 00:54:01,430
som namnet på beståndet.

887
00:54:01,430 --> 00:54:05,850
Det är något som jag inte riktigt kan få med bara min lagerlista av symboler.

888
00:54:05,850 --> 00:54:09,520
Jag vill ha det här och så ska jag ta den.

889
00:54:09,520 --> 00:54:11,790
För att göra det vi gör ett par saker.

890
00:54:11,790 --> 00:54:15,580
Vi öppnar först upp inspektören på denna sida

891
00:54:15,580 --> 00:54:18,100
eftersom vi såg att denna sida inte omladdning alls,

892
00:54:18,100 --> 00:54:21,960
så det är förmodligen med AJAX något att ladda sina data.

893
00:54:21,960 --> 00:54:23,920
Vi kan ta reda på vilka uppgifter det laddar.

894
00:54:23,920 --> 00:54:28,390
Om jag klickar på fliken Nätverk, dessa kommer att bli alla de förfrågningar som börjar bli avskedad.

895
00:54:28,390 --> 00:54:34,020
Nu om jag skriver i goo, kan vi se att jag bara fick en ny HTTP-begäran.

896
00:54:34,020 --> 00:54:37,490
Detta är förmodligen där att data kommer från.

897
00:54:37,490 --> 00:54:41,990
Visst nog, om jag tittar på denna URL, vilket är lite konstigt namn,

898
00:54:41,990 --> 00:54:46,930
Vi kan se att det är precis där Yahoo sänder ut sina data från.

899
00:54:46,930 --> 00:54:53,400
>> Jag har skapat en separat fil som heter suggest.php som är mycket lik i anden till lookup funktion.

900
00:54:53,400 --> 00:54:57,730
Det är i princip kommer att göra en förfrågan till Yahoo URL, få tillbaka några uppgifter,

901
00:54:57,730 --> 00:54:59,750
och skicka tillbaka den till mig.

902
00:54:59,750 --> 00:55:02,570
Nu, i stället för att använda denna stora, enorm lista med symboler,

903
00:55:02,570 --> 00:55:05,280
Jag kan använda Yahoos fina relevans saker,

904
00:55:05,280 --> 00:55:08,150
och jag behöver inte ladda ner den massiva JavaScript-fil.

905
00:55:08,150 --> 00:55:12,040
Jag kommer bara att dra ner de faktiskt relevanta börssymboler.

906
00:55:12,040 --> 00:55:13,960
Låt oss hoppa in i det.

907
00:55:13,960 --> 00:55:17,360
Så html, js. Vi är nu i quote4.

908
00:55:17,360 --> 00:55:22,120
Nu är vi inte längre använder den stora listan över JavaScript-filer.

909
00:55:22,120 --> 00:55:24,430
Men det finns en liten typ av design problem här.

910
00:55:24,430 --> 00:55:28,200
Vi har sagt att A i AJAX är asynkron.

911
00:55:28,200 --> 00:55:31,000
Vad detta innebär är att när jag gör en AJAX begäran,

912
00:55:31,000 --> 00:55:36,490
så här på rad 8, det är där min AJAX begäran faktiskt sparken.

913
00:55:36,490 --> 00:55:40,370
Låt oss säga nu har jag lite kod här nere som kommer att göra en del saker

914
00:55:40,370 --> 00:55:43,930
liknande uppmärksamma användaren eller ändra något på sidan.

915
00:55:43,930 --> 00:55:49,830
Vad kommer inte att hända är att webbläsaren inte kommer att vänta på denna begäran att fortsätta

916
00:55:49,830 --> 00:55:53,480
innan man kommer ner och slå denna linje.

917
00:55:53,480 --> 00:55:55,900
Det är den asynkrona delen.

918
00:55:55,900 --> 00:55:58,400
Det kommer att göra denna begäran och säga, "När du är klar,

919
00:55:58,400 --> 00:56:03,080
"Komma tillbaka och kalla den funktionen som jag sa till dig att ringa in till framgång."

920
00:56:03,080 --> 00:56:07,300
Det betyder att vi inte bara kan ladda ner alla bestånd i förväg.

921
00:56:07,300 --> 00:56:10,300
Vi måste göra ansökan och vänta på att något ska komma tillbaka.

922
00:56:10,300 --> 00:56:13,330
Det betyder att innan, kan vi tala om helt enkelt Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Här är en lista över saker som jag vill att du ska Komplettera automatiskt på."

924
00:56:15,580 --> 00:56:18,950
Vi kan inte längre göra det längre eftersom vi inte vet

925
00:56:18,950 --> 00:56:21,780
vad vi vill faktiskt Komplettera automatiskt.

926
00:56:21,780 --> 00:56:25,190
Lyckligtvis trodde Bootstrap detta eftersom de är smarta killar borta,

927
00:56:25,190 --> 00:56:30,160
och de gav oss faktiskt ett annat sätt att ladda denna Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Förut var värdet av denna källa egenskapen just denna stora samling av saker att Komplettera automatiskt.

929
00:56:35,630 --> 00:56:39,580
>> Nu egenskapen source är faktiskt en funktion,

930
00:56:39,580 --> 00:56:44,580
och syftet med denna funktion är att räkna ut vad saker till Komplettera automatiskt är.

931
00:56:44,580 --> 00:56:48,730
Hur det kommer att lista ut är att det kommer att ställa Yahoo! Finans

932
00:56:48,730 --> 00:56:51,750
vad de bästa saker att autocomplete är.

933
00:56:51,750 --> 00:56:54,500
För att göra det jag ska göra en mycket likartad AJAX begäran.

934
00:56:54,500 --> 00:56:59,010
Jag ska begära den här sidan på suggest.php.

935
00:56:59,010 --> 00:57:01,360
Jag vill skicka längs symbolerna fortfarande.

936
00:57:01,360 --> 00:57:05,570
Och nu min framgång, berättade Bootstrap dokumentationen mig

937
00:57:05,570 --> 00:57:09,130
att för att fylla den lista över saker,

938
00:57:09,130 --> 00:57:14,370
allt jag behöver göra är att passera i denna array nu till callback-funktionen.

939
00:57:14,370 --> 00:57:15,660
Men vänta lite.

940
00:57:15,660 --> 00:57:20,240
Om detta är tänkt att vara en array och AJAX skickar mig tillbaka texten,

941
00:57:20,240 --> 00:57:22,720
Hur är det möjligt?

942
00:57:22,720 --> 00:57:27,910
Detta introducerar ett nytt sätt att utbyta data kallas JSON.

943
00:57:27,910 --> 00:57:33,000
I det här fallet vi inte bara skicka tillbaka en enkel textsträng.

944
00:57:33,000 --> 00:57:37,670
Nu är vi har att göra med denna mer komplexa lista av börssymboler.

945
00:57:37,670 --> 00:57:41,730
Dessa lager symboler kan även innehålla saker som bolagets namn eller löpande priser.

946
00:57:41,730 --> 00:57:47,550
Bara med hjälp av en stor lång sträng som inte är formaterad på något förutsägbart sätt

947
00:57:47,550 --> 00:57:51,970
kommer inte att vara det bästa sättet att få dessa data från Yahoo server för mig

948
00:57:51,970 --> 00:57:54,540
på ett sätt som jag lätt kan förstå.

949
00:57:54,540 --> 00:58:01,280
JSON är en teknik som utnyttjar hur vi skapar associativa arrayer i JavaScript.

950
00:58:01,280 --> 00:58:04,510
Detta ser ut som en JavaScript associativ array,

951
00:58:04,510 --> 00:58:06,600
och i själva verket är det för att det är.

952
00:58:06,600 --> 00:58:09,710
JSON står för JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Detta är i grunden en överenskomna format för överföring av data och tillbaka.

954
00:58:15,020 --> 00:58:18,280
Här i JSON-objekt eller denna JSON associativ array

955
00:58:18,280 --> 00:58:21,010
skickar mig några data om en kurs.

956
00:58:21,010 --> 00:58:25,110
>> Nycklarna till denna array är saker som kurs som har ett värde på CS50,

957
00:58:25,110 --> 00:58:29,140
och här nere kan vi se att jag kan ha ett värde som är en matris.

958
00:58:29,140 --> 00:58:32,730
Jag behöver inte göra saker som parse ut strängar och leta efter kommatecken

959
00:58:32,730 --> 00:58:35,330
och gör galna saker.

960
00:58:35,330 --> 00:58:38,820
Eftersom detta uppges i denna JSON-format,

961
00:58:38,820 --> 00:58:43,510
JavaScript och jQuery redan funktioner för att konvertera en sträng

962
00:58:43,510 --> 00:58:48,140
som ser ut så här JSON till en verklig JavaScript associativ array

963
00:58:48,140 --> 00:58:50,440
att vi kan arbeta med.

964
00:58:50,440 --> 00:58:56,660
Att göra det är så enkelt som att säga att det inte längre är här filen, suggest.php,

965
00:58:56,660 --> 00:58:59,040
skicka mig tillbaka bara en textsträng,

966
00:58:59,040 --> 00:59:01,950
men jag vet att det kommer att skicka mig tillbaka JSON.

967
00:59:01,950 --> 00:59:06,760
Det innebär att det JSON kan omvandlas till en JavaScript associativ array.

968
00:59:06,760 --> 00:59:10,830
Och så jQuery, skulle jag vilja att du gör det för mig.

969
00:59:10,830 --> 00:59:13,990
Det innebär att detta svar parametern här,

970
00:59:13,990 --> 00:59:16,070
Detta är inte längre bara en sträng.

971
00:59:16,070 --> 00:59:19,860
Eftersom vi har berättat jQuery som kommer här några JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery kommer att vara smart nog att säga: "Du ville JSON?"

973
00:59:22,950 --> 00:59:26,890
"Jag ska omvandla det till en associativ array för dig."

974
00:59:26,890 --> 00:59:32,100
Låt oss verkligen ta en titt på fliken Nätverk när vi har quote4.js.

975
00:59:32,100 --> 00:59:35,400
Vi ska ändra på detta och ladda om sidan.

976
00:59:37,150 --> 00:59:41,250
Nu ska jag skriva in en-en igen.

977
00:59:41,250 --> 00:59:45,600
Jag har gjort ett par förfrågningar till suggest.php, men nu detta svar,

978
00:59:45,600 --> 00:59:48,670
snarare än bara strängen, det JSON.

979
00:59:48,670 --> 00:59:52,580
Så jag har en öppen klammerparentes säger, "Här kommer en associativ array."

980
00:59:52,580 --> 00:59:56,830
>> Den första och enda nyckel av denna associativ array kallas symboler,

981
00:59:56,830 --> 01:00:00,240
och då här är en samling av alla relevanta symboler

982
01:00:00,240 --> 01:00:04,820
kommer nu från Yahoo Finance, inte från den gigantiska lista.

983
01:00:06,110 --> 01:00:10,630
Det är hur jag helt enkelt kan fylla denna automatisk komplettering plugin

984
01:00:10,630 --> 01:00:14,280
med vissa uppgifter som inte är kommer från en lokal fil som redan är förutbestämda

985
01:00:14,280 --> 01:00:17,490
men från något annat.

986
01:00:17,490 --> 01:00:21,160
Det visar sig att vi faktiskt kan dra nytta av en teknik som kallas JSONP,

987
01:00:21,160 --> 01:00:27,420
eller JSON med vaddering, som kommer att eliminera denna suggest.php mellanhand.

988
01:00:27,420 --> 01:00:34,010
Men istället för att göra det, låt oss istället ta en titt på hur jag kan förbättra det ännu mer.

989
01:00:34,010 --> 01:00:36,040
Jag gillar verkligen Bootstrap är Typeahead. Det är riktigt nice.

990
01:00:36,040 --> 01:00:39,570
Men vi får bra på JavaScript och vi vill sorts göra detta själva,

991
01:00:39,570 --> 01:00:43,870
kanske ta en titt på vad denna plugin kan göra.

992
01:00:43,870 --> 01:00:46,500
Låt oss inte längre använda Typeahead sak,

993
01:00:46,500 --> 01:00:50,550
och låt oss försöka göra denna lista med förslag bestånd själva.

994
01:00:50,550 --> 01:00:53,790
Här i quote6.php vi ska börja på samma sätt.

995
01:00:53,790 --> 01:00:58,050
Varje gång någon skriver något, vill vi göra en AJAX begäran.

996
01:00:58,050 --> 01:01:01,590
Detta liknar vår ursprungliga CS50 Finans Direkt.

997
01:01:01,590 --> 01:01:05,020
Snarare än att göra en förfrågan till quote.php,

998
01:01:05,020 --> 01:01:08,530
Vi bevakar nu gör en begäran till samma fil som tidigare, detta suggest.php,

999
01:01:08,530 --> 01:01:12,460
som just kommer att dra data från Yahoo Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Återigen, vi förväntar fortfarande JSON, men nu då Typeahead inte gör detta för oss,

1001
01:01:19,480 --> 01:01:24,850
Vi måste också skicka med det värde som är inne i den aktuella textrutan.

1002
01:01:24,850 --> 01:01:28,120
Nu vet vi vad be Yahoo Finance för,

1003
01:01:28,120 --> 01:01:34,160
och så nu här är den funktion som vi vill köra när begäran är klar.

1004
01:01:34,160 --> 01:01:36,520
Vi har inte plugin för att göra listan för oss,

1005
01:01:36,520 --> 01:01:40,630
så här är där vi faktiskt kommer att bygga en lista med förslag.

1006
01:01:40,630 --> 01:01:44,850
För att göra det, ungefär som i PHP vi sammanlänkade dessa stora strängar av HTML

1007
01:01:44,850 --> 01:01:48,170
då vi tryckt dem, kan vi göra exakt samma sak i JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Först ska vi börja här strängen kallas förslag,

1009
01:01:51,850 --> 01:01:54,590
och denna sträng bara kommer att innehålla lite HTML.

1010
01:01:54,590 --> 01:01:58,320
Vi vill att det ska vara en lista över saker, så vi kommer att börja med den här listan tagg,

1011
01:01:58,320 --> 01:02:03,340
och nu ska vi iterera över alla symboler som returnerades tillbaka till oss.

1012
01:02:03,340 --> 01:02:06,500
Kom ihåg att vi har sagt dataType: "JSON", detta är inte en sträng.

1013
01:02:06,500 --> 01:02:09,500
Detta är redan en matris för oss. Det är verkligen coolt.

1014
01:02:09,500 --> 01:02:13,790
Vi kan helt enkelt säga: "Jag vill att du bifoga en lista element."

1015
01:02:13,790 --> 01:02:16,000
Vi sätter den i ett en del av sidan av det,

1016
01:02:16,000 --> 01:02:19,030
Vi ska ge det en klass av förslag så att vi vet vad det är,

1017
01:02:19,030 --> 01:02:23,880
och nu här är den symbol som vi fick tillbaka från Yahoo Finance.

1018
01:02:23,880 --> 01:02:27,230
>> När vi har skapat ett element för varje symbolerna vi har fått tillbaka,

1019
01:02:27,230 --> 01:02:30,100
Vi vill bara stänga listan.

1020
01:02:30,100 --> 01:02:33,040
Så nu förslag representerar denna lilla HTML-fragment

1021
01:02:33,040 --> 01:02:37,860
som när den tas på en sida kommer att bli en lista över saker som vi letar efter.

1022
01:02:37,860 --> 01:02:41,070
Nu ska vi faktiskt lägga det på sidan.

1023
01:02:41,070 --> 01:02:46,390
För att göra det jag faktiskt har skapat en annan tom div och jag har gett det en ID förslag.

1024
01:02:46,390 --> 01:02:52,520
Ungefär som vi satt innehållet i div som skulle visa priset på stockdata,

1025
01:02:52,520 --> 01:02:58,600
vi nu bara vill ställa innehållet i denna div till vad denna sträng är

1026
01:02:58,600 --> 01:03:00,290
som innehåller dessa symboler.

1027
01:03:00,290 --> 01:03:07,650
Genom att använda denna HTML metod är detta förslag variabel denna sträng, en sträng med HTML.

1028
01:03:07,650 --> 01:03:13,490
Jag vill att du tar den HTML och lägga den inne i div kallas förslag.

1029
01:03:13,490 --> 01:03:15,680
Vi har precis bifogas något DOM nu.

1030
01:03:15,680 --> 01:03:20,360
Vi har lagt till några nya element till DOM att vi nu kan visa på sidan.

1031
01:03:20,360 --> 01:03:22,540
Låt oss se vad detta ser ut.

1032
01:03:22,540 --> 01:03:29,110
Om vi ​​sätter i quote6 och nu vi kommer tillbaka,

1033
01:03:29,110 --> 01:03:34,480
nu när jag börjar skriva AAPL, har vi inte längre att Bootstrap Komplettera automatiskt,

1034
01:03:34,480 --> 01:03:38,470
men vi har nu denna lista som vi gjorde själva.

1035
01:03:38,470 --> 01:03:43,230
Detta är lite fulare än Bootstrap Typeahead, till exempel,

1036
01:03:43,230 --> 01:03:45,580
men det tillåter oss att göra en annan sak.

1037
01:03:45,580 --> 01:03:48,660
När vi tittar på den Bootstrap plugin,

1038
01:03:48,660 --> 01:03:52,590
såg vi att när vi autocompleted, var en av Komplettera automatiskt värdena AAPL.

1039
01:03:52,590 --> 01:03:54,820
Som kanske inte så bra.

1040
01:03:54,820 --> 01:03:59,100
Som användare kan jag inte omedelbart känner igen alla börssymboler.

1041
01:03:59,100 --> 01:04:02,370
Vad jag är nog mer sannolikt att känna igen är bolagets faktiska namn.

1042
01:04:02,370 --> 01:04:05,310
Så skulle det inte vara riktigt bra om istället för att säga AAPL

1043
01:04:05,310 --> 01:04:07,970
Detta sa något i stil Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Eftersom vi har rullat detta själva, kan vi verkligen lätt att göra det.

1045
01:04:12,240 --> 01:04:17,630
Vi öppnar upp vår sista citat fil här, så quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Samma sak. Jag har precis skapat en annan PHP-fil som kommer att återvända till oss mer än bara symboler.

1047
01:04:23,200 --> 01:04:25,550
Det kommer också att ge oss tillbaka bolagets namn.

1048
01:04:25,550 --> 01:04:28,150
Och så vi gör samma sak. Vi gör en AJAX begäran.

1049
01:04:28,150 --> 01:04:32,370
När begäran har slutförts kommer vi att utföra denna funktion här,

1050
01:04:32,370 --> 01:04:36,520
och denna funktion kommer att bygga upp en stor sträng av element.

1051
01:04:36,520 --> 01:04:39,520
Men skillnaden här är att värdet av dessa listor är inte längre bara en symbol,

1052
01:04:39,520 --> 01:04:45,370
det är nu namnet.

1053
01:04:45,370 --> 01:04:47,070
Så vi har ett litet problem.

1054
01:04:47,070 --> 01:04:51,590
När vi använder vår lookup, måste vi på något sätt låta det symbolen.

1055
01:04:51,590 --> 01:04:54,950
Vi kan inte passera lookup något som Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Vi måste ge det MSFT.

1057
01:04:57,900 --> 01:05:01,640
När vi skriver HTML, vi har massor av trevliga inbyggda egenskaper.

1058
01:05:01,640 --> 01:05:05,440
En A kan ha samband med det en href eller en klass.

1059
01:05:05,440 --> 01:05:08,230
Men vad vi verkligen behöver nu är att var och en av dessa länkar

1060
01:05:08,230 --> 01:05:11,120
att ha ett lager som förknippas med den.

1061
01:05:11,120 --> 01:05:14,240
Det finns ingen inbyggd HTML-attribut för lager symbol,

1062
01:05:14,240 --> 01:05:21,010
men lyckligtvis låter HTML5 oss att skapa våra egna attribut för att vara vad vi vill.

1063
01:05:21,010 --> 01:05:24,620
Genom att säga datasymbolsignal har jag infört ett nytt attribut

1064
01:05:24,620 --> 01:05:29,350
vars namn jag gjorde bara upp, och det är okej eftersom jag inleds det med dessa data.

1065
01:05:29,350 --> 01:05:34,270
Vi kommer att lagra inuti det symbolen från beståndet nu.

1066
01:05:34,270 --> 01:05:39,590
Vad detta betyder är att även om vi visar värdet av bolagets firma

1067
01:05:39,590 --> 01:05:43,380
insidan av vår Komplettera automatiskt, vi minns fortfarande en symbol

1068
01:05:43,380 --> 01:05:47,110
som är associerad med varje företag.

1069
01:05:47,110 --> 01:05:50,350
Det sätt vi gör som är inne i detta element i sig.

1070
01:05:50,350 --> 01:05:52,930
Så det betyder att vi måste göra en ytterligare ändring.

1071
01:05:52,930 --> 01:05:57,090
När vi klickar på det nu, måste vi faktiskt dra nytta av symbolen attribut

1072
01:05:57,090 --> 01:06:00,220
snarare än bara dess värde.

1073
01:06:00,220 --> 01:06:05,010
Om vi ​​tillbaka upp, fäster vi en händelsehanterare för förslag.

1074
01:06:05,010 --> 01:06:09,280
När en av dessa förslag klickas nu vill jag göra något.

1075
01:06:09,280 --> 01:06:13,160
Vad jag vill göra är att ändra värdet på denna inmatningsfältet.

1076
01:06:13,160 --> 01:06:16,100
Nu vill jag ställa samma val funktion.

1077
01:06:16,100 --> 01:06:21,060
>> Så utan några argument här val funktionen återgår till vad som är redan i textrutan,

1078
01:06:21,060 --> 01:06:27,070
men om du ger det en sträng, det kommer att ta den strängen och lägg den i textrutan.

1079
01:06:27,070 --> 01:06:28,980
Jag väljer sin textruta på samma sätt.

1080
01:06:28,980 --> 01:06:31,230
Det heter symbol inuti form-citat.

1081
01:06:31,230 --> 01:06:37,540
Nu är jag skickar det värdet på attributet data-symbolen.

1082
01:06:37,540 --> 01:06:41,560
Denna sak här är nytt, denna $ (denna).

1083
01:06:41,560 --> 01:06:46,850
Vad detta handlar om är det element som klickade.

1084
01:06:46,850 --> 01:06:50,880
Vi kan här se att vi inte fäster en click-händelse

1085
01:06:50,880 --> 01:06:54,690
till varje element med en klass av förslag individuellt.

1086
01:06:54,690 --> 01:06:57,140
Snarare vi närmar det lite annorlunda.

1087
01:06:57,140 --> 01:07:01,700
Istället vi säger när något insidan av denna förslagen div,

1088
01:07:01,700 --> 01:07:04,080
vilket är minns bara behållaren för listan,

1089
01:07:04,080 --> 01:07:10,150
om något inuti denna div klickas och har en klass av förslag,

1090
01:07:10,150 --> 01:07:13,000
Jag vill att denna händelse att skjuta.

1091
01:07:13,000 --> 01:07:17,490
I grund och botten vad detta innebär att vi kan göra är att vi kan återanvända samma händelsehanterare

1092
01:07:17,490 --> 01:07:20,000
för alla de saker i listan.

1093
01:07:20,000 --> 01:07:22,080
Så vi behöver inte ha en händelsehanterare för det första elementet

1094
01:07:22,080 --> 01:07:24,550
och en annan händelsehanterare för det andra elementet.

1095
01:07:24,550 --> 01:07:29,880
Vi kan istället säga: "Jag vill ha samma händelsehanterare gälla allt i min lista."

1096
01:07:29,880 --> 01:07:34,420
Men vi måste på något sätt veta vilket element klickade.

1097
01:07:34,420 --> 01:07:38,450
Detta "detta" nyckelordet representerar just detta.

1098
01:07:38,450 --> 01:07:42,360
Detta är objektet som just klickade av användaren.

1099
01:07:42,360 --> 01:07:47,680
Om jag bara klickade den 3: e länken, utgör detta den del av det 3. Länk,

1100
01:07:47,680 --> 01:07:51,670
vilket betyder att jag kan få sin attribut, data-symbol,

1101
01:07:51,670 --> 01:07:57,760
som vi vet måste innehålla den symbol som är knutna till företaget jag klickade.

1102
01:07:57,760 --> 01:08:04,550
Om vi ​​hoppar tillbaka till vår ekonomi sidan,

1103
01:08:04,550 --> 01:08:08,580
Vi kan nu se att när jag börjar skriva något som MSFT,

1104
01:08:08,580 --> 01:08:11,220
vi inte längre får bara börssymboler,

1105
01:08:11,220 --> 01:08:13,720
Vi bevakar nu få verkliga företag.

1106
01:08:13,720 --> 01:08:20,410
Men när jag klickar på en av dessa företag,

1107
01:08:20,410 --> 01:08:25,180
kan vi se att vi faktiskt är fylla textrutan inte med namnet på företaget

1108
01:08:25,180 --> 01:08:29,850
men oavsett var lagras i dessa uppgifter attribut.

1109
01:08:29,850 --> 01:08:32,880
Och så om jag inspektera faktiskt en av dessa element genom att högerklicka på den

1110
01:08:32,880 --> 01:08:36,200
och klicka Inspektera element kan vi faktiskt se hur det ser ut.

1111
01:08:36,200 --> 01:08:40,290
>> Kom ihåg att detta är något som vi skapat i detta for-slinga

1112
01:08:40,290 --> 01:08:42,649
När vi byggde upp den strängen av HTML.

1113
01:08:42,649 --> 01:08:47,870
Vi kan här se att denna datasymbolsignal har värdet MSFT, vilket är bra.

1114
01:08:47,870 --> 01:08:49,189
Det är vad vi väntade.

1115
01:08:49,189 --> 01:08:53,170
Det är symbolen och det är hur vi fick det värde som vi behövde för att använda

1116
01:08:53,170 --> 01:08:56,140
insidan av denna textrutan.

1117
01:08:56,140 --> 01:08:58,850
Det räcker för citatet form eftersom det är ganska tråkigt.

1118
01:08:58,850 --> 01:09:02,990
Låt oss bara göra några snabba förbättringar i vår portfölj sida.

1119
01:09:02,990 --> 01:09:08,109
Om du har använt CS50 Finance för en stund och du börjar köpa och sälja en massa lager,

1120
01:09:08,109 --> 01:09:11,300
småningom denna tabell kommer att bli ganska stor,

1121
01:09:11,300 --> 01:09:13,850
och du kommer att ha en börsinformation, naturligtvis.

1122
01:09:13,850 --> 01:09:20,350
När bordet är verkligen, verkligen stora, skulle det vara användbart för användaren att försöka att söka över den.

1123
01:09:20,350 --> 01:09:23,290
Inne i sökrutan om jag börjar skriva något liknande Disney

1124
01:09:23,290 --> 01:09:26,359
och letar efter min Mickey Mouse lager, kan vi se att tabellen nu filtrering

1125
01:09:26,359 --> 01:09:28,189
baserat på vad jag just skrev i.

1126
01:09:28,189 --> 01:09:31,640
Denna funktion ser super komplicerat, men det är verkligen, verkligen lätt

1127
01:09:31,640 --> 01:09:33,859
med jQuery och JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Denna portfolio.php filen innehåller en JavaScript-fil som heter portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Låt oss ta en titt på det.

1130
01:09:41,130 --> 01:09:44,890
Så html, js, portfölj.

1131
01:09:44,890 --> 01:09:49,210
Här är där vi gör att söka på bordet.

1132
01:09:49,210 --> 01:09:52,750
Det första jag måste göra är fästa en händelsehanterare som textruta

1133
01:09:52,750 --> 01:09:55,760
eftersom vi vet att vi vill att våra filtreringsfunktion att skjuta

1134
01:09:55,760 --> 01:09:59,800
varje gång användaren trycker något eftersom vi inte har tid för Search knappar.

1135
01:09:59,800 --> 01:10:03,000
Det första vi behöver göra är att räkna ut vad användaren söker efter,

1136
01:10:03,000 --> 01:10:04,780
precis som vi gjorde förr.

1137
01:10:04,780 --> 01:10:11,320
Nyckelordet this refererar till det aktuella elementet användaren interagerar med.

1138
01:10:11,320 --> 01:10:14,070
>> Eftersom användaren interagerar med sökrutan

1139
01:10:14,070 --> 01:10:17,020
$ Detta representerar sökrutan

1140
01:10:17,020 --> 01:10:21,820
så this.val ger oss vad som finns inuti sökrutan användaren för närvarande skriver.

1141
01:10:22,810 --> 01:10:27,320
Så, nu vad vi vill göra som vi vill iterera över alla rader

1142
01:10:27,320 --> 01:10:29,240
insidan av vårt bord.

1143
01:10:29,240 --> 01:10:35,630
För att välja alla rader i vårt bord, gav jag att lägga fram ett ID tabell portfölj,

1144
01:10:35,630 --> 01:10:39,060
och varje rad representeras av en TR-elementet,

1145
01:10:39,060 --> 01:10:42,080
så detta väljare kommer att återvända till mig en stor uppsättning

1146
01:10:42,080 --> 01:10:44,370
av alla rader i mitt bord.

1147
01:10:44,370 --> 01:10:47,010
Nu vill jag att iterera över den arrayen.

1148
01:10:47,010 --> 01:10:52,390
Jag kunde du en for-slinga, men jQuery faktiskt ger oss den fina funktionen kallas "varje."

1149
01:10:52,390 --> 01:10:55,220
Vad varje gör är var tar ett argument,

1150
01:10:55,220 --> 01:10:57,090
och argumentet är en funktion.

1151
01:10:57,090 --> 01:11:02,760
Vad det kommer att göra är att det kommer att tillämpa denna funktion varje element inuti denna lista.

1152
01:11:02,760 --> 01:11:05,550
Den här funktionen tar ett argument som är e,

1153
01:11:05,550 --> 01:11:10,090
och när denna funktion utförs, Den här e kommer att ersättas med den första raden,

1154
01:11:10,090 --> 01:11:12,070
sedan den andra raden, och sedan den tredje raden.

1155
01:11:12,070 --> 01:11:15,150
Genom detta sätt är det samma sak som att köra en for-slinga

1156
01:11:15,150 --> 01:11:21,360
och sedan räkna det aktuella elementet utifrån indexet insidan av din för slinga.

1157
01:11:21,360 --> 01:11:24,750
Vid varje iteration, för vart och ett av dessa element i tabellen,

1158
01:11:24,750 --> 01:11:30,560
Jag vill kolla om texten i elementet - texten i cellen inuti raden -

1159
01:11:30,560 --> 01:11:33,130
matchar vad jag söker.

1160
01:11:33,130 --> 01:11:36,390
Denna stora lång rad av kommandon är hur jag kunde göra det.

1161
01:11:36,390 --> 01:11:40,900
Först igen, avser detta nu - eftersom det är inne i en ny funktion -

1162
01:11:40,900 --> 01:11:45,020
detta är nu den aktuella raden i tabellen.

1163
01:11:45,020 --> 01:11:47,340
Jag vill ta den aktuella raden i tabellen,

1164
01:11:47,340 --> 01:11:49,950
och jag vill få alla sina barn.

1165
01:11:49,950 --> 01:11:51,940
Kom ihåg att DOM ett hierarkiskt träd,

1166
01:11:51,940 --> 01:11:54,200
vilket innebär att element har ett antal barn.

1167
01:11:54,200 --> 01:12:00,180
>> Detta. Barn funktionen kommer att återvända till mig tillbaka en rad av alla element

1168
01:12:00,180 --> 01:12:03,240
som är barn, i detta fall, en rad i tabellen.

1169
01:12:03,240 --> 01:12:07,150
Detta är helt enkelt cellerna inne i raden.

1170
01:12:07,150 --> 01:12:09,230
Jag vill bara söka på den första cellen.

1171
01:12:09,230 --> 01:12:13,090
Detta. Första funktionen, säger ge mig det första elementet i den arrayen.

1172
01:12:13,090 --> 01:12:17,070
Då funktionen TEXT säger får mig exakt vad som finns inuti för den cellen

1173
01:12:17,070 --> 01:12:19,530
eftersom jag vill söka på den texten.

1174
01:12:19,530 --> 01:12:21,040
Slutligen, låt oss omvandla den till gemener,

1175
01:12:21,040 --> 01:12:23,940
så att vi kan göra text skiftlägeskänslig frågor.

1176
01:12:23,940 --> 01:12:29,990
Slutligen vill vi se om den strängen inuti en tabell innehåller strängen vi söker efter.

1177
01:12:29,990 --> 01:12:32,980
Den indexOf funktionen i JavaScript gör just det.

1178
01:12:32,980 --> 01:12:37,060
Det säger oss huruvida denna sträng innehåller en annan sträng.

1179
01:12:37,060 --> 01:12:40,150
Om det är sant att cellen innehåller vad jag söker,

1180
01:12:40,150 --> 01:12:42,140
då vill jag vara säker på att det är visat.

1181
01:12:42,140 --> 01:12:45,330
Showen Metoden kommer att säga, "Visa elementet."

1182
01:12:45,330 --> 01:12:50,350
Om så inte är fallet, innebär vad jag letar efter finns inte

1183
01:12:50,350 --> 01:12:53,550
inom den raden, så jag vill dölja är från användaren.

1184
01:12:53,550 --> 01:12:59,240
Som uppnår det trevligt filtrering effekt där inte längre ser vi hela tabellen.

1185
01:12:59,240 --> 01:13:01,480
Om du är intresserad av hur man gör detta ticker också,

1186
01:13:01,480 --> 01:13:04,180
Vi kommer lägga källan på nätet. Men det är väldigt enkelt.

1187
01:13:04,180 --> 01:13:09,860
JQuery har awesome metoder för dessa animationer och manipulera CSS-egenskaper.

1188
01:13:09,860 --> 01:13:11,020
Så, det är det för mig.

1189
01:13:11,020 --> 01:13:15,560
>> Vad ligger då framför oss? Som du ser i några dagar, är den slutliga projekt förslaget betalas.

1190
01:13:15,560 --> 01:13:17,730
Den slutliga projekt Förslaget kommer att ställa några frågor,

1191
01:13:17,730 --> 01:13:19,420
men bland dem kommer att vara tre milstolpar -

1192
01:13:19,420 --> 01:13:22,840
en en "bra" milstolpe, en bättre milstolpe, och en en bäst.

1193
01:13:22,840 --> 01:13:25,870
Tanken är verkligen hjälpa er ange dina förväntningar

1194
01:13:25,870 --> 01:13:29,160
så att minimalt du blir nöjd med utgången på din slutgiltiga projektet

1195
01:13:29,160 --> 01:13:32,060
och det kommer att vara "bra" så långt som du är orolig.

1196
01:13:32,060 --> 01:13:34,540
Men sedan i syfte att få dig att nå bara lite till något bättre

1197
01:13:34,540 --> 01:13:37,680
eller något bäst, vi sorterar också driva dig mot det också.

1198
01:13:37,680 --> 01:13:40,660
Det CS50 Hack-a-thon, tiden är ett par veckor.

1199
01:13:40,660 --> 01:13:44,340
Vanligtvis gör vi detta på ett lotteri enligt grund, eftersom ränta,

1200
01:13:44,340 --> 01:13:47,680
men oddsen är vi tar några hundra av oss i flygbussarna från Harvard Square

1201
01:13:47,680 --> 01:13:51,540
ner till Kendall Square där Microsoft har en vacker anläggning träffande kallas "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England forskning och utveckling Center.

1203
01:13:53,830 --> 01:13:56,380
Vi kommer dit runt 8 pm Vi får lite mat.

1204
01:13:56,380 --> 01:13:58,160
Omkring 01:00 får vi lite mer mat.

1205
01:13:58,160 --> 01:14:02,150
Runt 5 am om du fortfarande vaken vi huvudet över till IHOP eller ta dig tillbaka till campus.

1206
01:14:02,150 --> 01:14:04,380
Målet finns att dyka in slutliga projekt

1207
01:14:04,380 --> 01:14:06,190
vid sidan av klasskamrater och personal.

1208
01:14:06,190 --> 01:14:08,280
Sedan ett par dagar senare är det CS50 mässan,

1209
01:14:08,280 --> 01:14:10,990
som verkligen är tänkt att vara en möjlighet för er att visa upp ditt arbete

1210
01:14:10,990 --> 01:14:12,700
och prestationer för terminen

1211
01:14:12,700 --> 01:14:15,610
medan gnugga axlar med varandra och få en känsla för vad alla gjorde.

1212
01:14:15,610 --> 01:14:17,850
Med det sagt, stort tack till Tommy och Josef,

1213
01:14:17,850 --> 01:14:19,960
och vi kommer att se dig på måndag.

1214
01:14:19,960 --> 01:14:24,070
 [Applåder]