1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Uke 9, Fortsatt]

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

3
00:00:05,160 --> 00:00:07,020
[Dette er CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Dette er CS50. Dette er slutten av uke 9. Tusen takk.

5
00:00:13,340 --> 00:00:15,310
Slutt. Uke 9. Jeg fikk den.

6
00:00:15,310 --> 00:00:18,590
I dag fortsetter vi vår samtale om webprogrammering

7
00:00:18,590 --> 00:00:21,660
med et øye mot det endelige prosjektet, ikke fordi du trenger å gjøre noe web-basert

8
00:00:21,660 --> 00:00:25,610
for endelig prosjekter, men fordi enten for endelig prosjekter eller etter CS50

9
00:00:25,610 --> 00:00:29,000
dette er absolutt den retningen som moderne programvare går.

10
00:00:29,000 --> 00:00:31,770
Og likevel er det faktisk ikke en enkel ting.

11
00:00:31,770 --> 00:00:35,040
Faktisk er en av de vanskeligste ting å gjøre det aspektet av motivet.

12
00:00:35,040 --> 00:00:38,600
>> For eksempel ved utforming mener vi faktisk får brukergrensesnittet

13
00:00:38,600 --> 00:00:40,420
eller brukeropplevelsen høyre.

14
00:00:40,420 --> 00:00:43,200
Jeg daresay - og vi vet fra en nylig problem sett

15
00:00:43,200 --> 00:00:45,960
når noen av dere luftet dine gripes om noen stykke programvare

16
00:00:45,960 --> 00:00:49,000
eller maskinvare som infuriates deg, enten på eller utenfor skoleområdet -

17
00:00:49,000 --> 00:00:51,930
det er en rekke nettsteder der ute, det er mye hardware der ute,

18
00:00:51,930 --> 00:00:53,900
den slags suger.

19
00:00:53,900 --> 00:00:58,730
Men realiteten er at det å gjøre ting som er lett å bruke, men er likevel kraftig

20
00:00:58,730 --> 00:01:00,550
er en svært vanskelig utfordring.

21
00:01:00,550 --> 00:01:03,680
Så i dag spurte jeg Joseph og Tommy å bli med meg opp her

22
00:01:03,680 --> 00:01:06,680
slik at vi kan ha en samtale, både om utforming

23
00:01:06,680 --> 00:01:09,090
og hva slags tankeprosesser bør begynne å gå gjennom hodet ditt

24
00:01:09,090 --> 00:01:12,040
når du designe din endelige prosjekter, dine fremtidige bestrebelser.

25
00:01:12,040 --> 00:01:15,040
Og deretter med Tommy hjelp vil vi se på noen av gjennomføringen detaljer.

26
00:01:15,040 --> 00:01:18,440
Hvordan kan du ha noen visjon på papir eller i tankene dine

27
00:01:18,440 --> 00:01:20,760
som du deretter kan utføre programmatisk

28
00:01:20,760 --> 00:01:24,030
ved hjelp av noen av teknologiene og teknikker har vi nettopp begynt å snakke om,

29
00:01:24,030 --> 00:01:29,080
nemlig JavaScript og noe enda nyere, nemlig AJAX, asynkron JavaScript.

30
00:01:29,080 --> 00:01:32,950
Som lar deg lage alle de mer dynamiske av et brukergrensesnitt

31
00:01:32,950 --> 00:01:35,780
ved henting mer og mer data gradvis fra en server.

32
00:01:35,780 --> 00:01:38,560
Så vi får se noen av disse tekstutdragene som godt i dag.

33
00:01:38,560 --> 00:01:41,800
Som en side, hvis du er interessert i å konsentrere seg i datavitenskap

34
00:01:41,800 --> 00:01:45,010
eller grunnfag i informatikk, vet at dette fredag ​​midt på dagen

35
00:01:45,010 --> 00:01:48,750
i Maxwell Dworkin 221 vil det være en pizza hendelse

36
00:01:48,750 --> 00:01:50,780
hvor du kan lære litt mer om informatikk.

37
00:01:50,780 --> 00:01:54,860
På vei ut døren i dag vil du være i stand til å plukke opp en uoffisiell guide til CS ved Harvard.

38
00:01:54,860 --> 00:01:57,290
Vil vi sette det på søppeldunker utenfor i hoftehøyde

39
00:01:57,290 --> 00:01:59,750
slik at hvis du ønsker å ta dette og lære litt mer om CS,

40
00:01:59,750 --> 00:02:02,480
som vil være der for deg som det var i uke 0.

41
00:02:02,480 --> 00:02:06,500
Også hvis du ønsker å bli med oss ​​for CS50 lunsj denne fredag ​​på 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Uten videre, jeg gir deg undervisning stipendiat Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hei. [Applaus]

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

46
00:02:20,770 --> 00:02:24,780
Første gang jeg hørte om design var i en klasse her kalt CS179.

47
00:02:24,780 --> 00:02:28,040
>> Professoren ved tiden fortalte oss historien om en annen professor

48
00:02:28,040 --> 00:02:31,640
som hadde gått til et hotell og brukte kraner.

49
00:02:31,640 --> 00:02:35,630
Kan noen fortelle meg hva de to knottene på venstre og høyre gjøre?

50
00:02:35,630 --> 00:02:39,080
[Student] Varmt og kaldt. >> Varmt og kaldt. Bra.

51
00:02:39,080 --> 00:02:41,430
Hva du vanligvis forventer, ikke sant?

52
00:02:41,430 --> 00:02:46,960
Dette professor etter bruk av kranen ønsker å ta en dusj, og han fortsetter å bruke dette.

53
00:02:46,960 --> 00:02:51,310
Han mener den venstre og høyre side er for varmt og kaldt, ikke sant?

54
00:02:51,310 --> 00:02:55,470
Men kan noen fortelle meg hva disse egentlig gjøre?

55
00:02:55,470 --> 00:02:58,060
Noen hender?

56
00:02:58,060 --> 00:03:01,740
[Uhørlig student respons] >> Ett forslag er?

57
00:03:01,740 --> 00:03:05,860
[Uhørlig student respons] >> Temperatur?

58
00:03:05,860 --> 00:03:10,460
Så en av dem styrer temperatur og de andre kontroller? >> [Student] Vanntrykk.

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

60
00:03:12,350 --> 00:03:15,100
Dette professor går inn i dette, og tro at de kontrollerende varmt og kaldt,

61
00:03:15,100 --> 00:03:21,470
slår den rette, som han mener er for varmt, hele veien opp

62
00:03:21,470 --> 00:03:23,560
fordi han ønsker å ta en varm dusj.

63
00:03:23,560 --> 00:03:28,100
Vel, disse ikke helt samsvarer opp, så han får ikke dette veldig morsom opplevelse

64
00:03:28,100 --> 00:03:31,110
av å være i en kald dusj, og vi vet alle hvordan det føles.

65
00:03:31,110 --> 00:03:33,620
Dette er et eksempel av en design feil.

66
00:03:33,620 --> 00:03:37,040
Hva jeg mener med det er hans forventning fra kranen

67
00:03:37,040 --> 00:03:39,420
samsvarte ikke hva som kom ut av dusjen,

68
00:03:39,420 --> 00:03:41,780
som er slags uheldig for ham.

69
00:03:41,780 --> 00:03:44,990
Så dette er et eksempel på en design feil som skjer i det virkelige liv.

70
00:03:44,990 --> 00:03:48,020
Men vi ser alle slags andre de også.

71
00:03:48,020 --> 00:03:50,390
Vi er nok ikke fans av MBTA systemet.

72
00:03:50,390 --> 00:03:55,560
Dette er en metrostasjon systemet faktisk i London, som sier: "Denne knappen er ikke i bruk."

73
00:03:55,560 --> 00:04:00,220
Hvorfor er det selv på det? Hvorfor gjør vi selv bryr?

74
00:04:00,220 --> 00:04:02,810
Da jeg var gutt, som er den teknisk kunnskapsrike i huset,

75
00:04:02,810 --> 00:04:05,050
når maskinen skulle krasje, ville min mor kommer til meg,

76
00:04:05,050 --> 00:04:07,060
viser meg denne skjermen og spør meg hva som skjedde.

77
00:04:07,060 --> 00:04:09,210
>> Selv vet jeg ikke hva dette betyr.

78
00:04:11,890 --> 00:04:14,700
[Latter] Hva?

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

80
00:04:18,720 --> 00:04:23,050
Noen ganger føler vi programvareutviklere er bare trolling oss.

81
00:04:23,050 --> 00:04:28,460
Som brukere er vi som "Hva er det som skjer? Noen fortelle oss."

82
00:04:28,460 --> 00:04:32,140
Alt dette kommer ned til et spørsmål om design.

83
00:04:32,140 --> 00:04:34,650
Design, som vi kan se, er ikke rent om estetikk,

84
00:04:34,650 --> 00:04:37,230
det handler ikke om hvordan ting ser ut.

85
00:04:37,230 --> 00:04:41,720
Vi ser her at denne lille pop-up over her faktisk ser ganske fin.

86
00:04:41,720 --> 00:04:45,290
Den har en skygge i bakgrunnen, har det landegrensene radier skjer.

87
00:04:45,290 --> 00:04:47,550
Det er litt pen.

88
00:04:47,550 --> 00:04:51,480
Det er ikke veldig bra designet fordi det ikke er veldig brukervennlig.

89
00:04:51,480 --> 00:04:54,920
Den lille pop-up som kommer opp egentlig ikke gi meg noe informasjon

90
00:04:54,920 --> 00:04:58,450
om hva som skjer, betyr det ikke fortelle meg noe som brukeren

91
00:04:58,450 --> 00:05:01,400
om hvordan å komme seg fra denne feilen.

92
00:05:01,400 --> 00:05:05,190
Vi ønsker å tenke på ting som design er det ikke.

93
00:05:05,190 --> 00:05:06,670
Først, det er ikke estetikk.

94
00:05:06,670 --> 00:05:10,800
Det er heller ikke stuffing app med tonnevis av unødvendige funksjoner.

95
00:05:10,800 --> 00:05:14,890
Hvis du er en thailandsk restaurant, har du sannsynligvis ikke vil være en tannlege på samme tid.

96
00:05:14,890 --> 00:05:17,720
Og med Facebook Spørsmål, ikke at mange mennesker brukt det

97
00:05:17,720 --> 00:05:21,130
og det var egentlig ikke i kjernen av hva de var å bygge.

98
00:05:21,130 --> 00:05:24,200
Og så er det fint å tenke på ikke så mye mengden av de tingene

99
00:05:24,200 --> 00:05:26,390
at du setter på søknaden, men kvaliteten

100
00:05:26,390 --> 00:05:28,910
og hvordan du gjør det brukeropplevelsen bedre

101
00:05:28,910 --> 00:05:32,540
ved å faktisk bedre på det du allerede har.

102
00:05:32,540 --> 00:05:37,040
>> I et nøtteskall, forteller utforming oss hva vi bør bygge.

103
00:05:37,040 --> 00:05:41,950
For eksempel, hvis vi bygger noe som lar oss søke opp ting,

104
00:05:41,950 --> 00:05:45,970
som Google, for eksempel, bør vi gjøre ting på en måte

105
00:05:45,970 --> 00:05:48,950
som krever at brukeren til å ta mange klikk for å komme til det de ønsker,

106
00:05:48,950 --> 00:05:52,580
eller skal vi gjøre det på en måte, for eksempel med Google Instant eller autofullføring

107
00:05:52,580 --> 00:05:54,970
som lar oss komme til våre resultater raskere?

108
00:05:54,970 --> 00:05:58,740
Engineering innebærer, som Tommy vil vise deg, faktisk bygge det.

109
00:05:58,740 --> 00:06:01,890
Det er mange typer design.

110
00:06:01,890 --> 00:06:06,070
For eksempel, hvis du bygger noe distribuere noe

111
00:06:06,070 --> 00:06:09,770
i et tredje verden land der det ikke er mye strøm eller at mye teknologi,

112
00:06:09,770 --> 00:06:11,440
du må lage hva du bygger

113
00:06:11,440 --> 00:06:14,210
på en måte som lett gir tilgang til folk der.

114
00:06:14,210 --> 00:06:18,290
Men hva slags andre design beslutninger kan det være

115
00:06:18,290 --> 00:06:21,850
eller kan være involvert i noe som dette?

116
00:06:23,690 --> 00:06:25,660
Ja. Jeg ser en hånd.

117
00:06:25,660 --> 00:06:37,200
[Uhørlig student respons] >> Høyre. Akkurat. Tilgjengelighet er en ting.

118
00:06:37,200 --> 00:06:40,870
Mange tenker ikke: "Hva med brukerne mine?"

119
00:06:40,870 --> 00:06:43,160
som ytterpunktene av enten spekteret.

120
00:06:43,160 --> 00:06:47,770
Jeg har brukere som kan ha funksjonshemninger som jeg ikke tenker på

121
00:06:47,770 --> 00:06:50,590
og jeg bare tenker på å designe for den generelle bruker.

122
00:06:50,590 --> 00:06:52,630
Internett er tilgjengelig for alle i dag,

123
00:06:52,630 --> 00:06:54,870
og jeg skal designe for dem også.

124
00:06:54,870 --> 00:06:58,620
Hva slags andre design beslutninger kan du gjøre?

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

126
00:07:00,690 --> 00:07:02,680
Koste. Veldig bra.

127
00:07:02,680 --> 00:07:08,060
En annen ting vi kan basere våre design beslutninger på er pris.

128
00:07:08,060 --> 00:07:13,130
Hvis vi er en bedrift du ønsker å bygge noe som ikke tar mye koster å produsere

129
00:07:13,130 --> 00:07:17,720
men kan selge til en spesielt høy pris eller kan få oss noen fortjeneste.

130
00:07:17,720 --> 00:07:21,540
>> Disse er alle forskjellige typer design, men når vi bygger noe på Internett

131
00:07:21,540 --> 00:07:25,120
eller når vi bygger noe som sannsynligvis ikke koste så mye å bygge opp nå,

132
00:07:25,120 --> 00:07:28,630
som Internett-applikasjoner - du trenger ikke å kaste mye kapital inn i det

133
00:07:28,630 --> 00:07:30,900
for å lage noe som faktisk fungerer -

134
00:07:30,900 --> 00:07:33,490
hva vi er mer bekymret for er brukeropplevelsen.

135
00:07:33,490 --> 00:07:36,390
Vi kaller dette brukersentrert design.

136
00:07:36,390 --> 00:07:41,550
Egentlig hva brukersentrert design innebærer er å sette dere selv i skoene til brukerne.

137
00:07:41,550 --> 00:07:44,870
Hvis noen registrerer seg for hva jeg bygger,

138
00:07:44,870 --> 00:07:48,250
de har tydeligvis kommet til min bestemt applikasjon med et mål i tankene,

139
00:07:48,250 --> 00:07:50,280
med en oppgave de ønsker å fullføre.

140
00:07:50,280 --> 00:07:53,650
Og din jobb er ikke bare å hjelpe dem å fullføre den oppgaven

141
00:07:53,650 --> 00:07:57,930
men å hjelpe dem å fullføre den oppgaven på en måte som er effektiv, intuitiv,

142
00:07:57,930 --> 00:08:01,900
og som noen person sa der, tilgjengelig.

143
00:08:01,900 --> 00:08:03,750
Hva betyr effektivitet?

144
00:08:03,750 --> 00:08:08,050
Effektivitet betyr hvor raskt gjør fullføre min bruker oppgaven gitt min grensesnitt.

145
00:08:08,050 --> 00:08:11,650
Tar det mange klikk for dem å komme seg fra ett sted til et annet?

146
00:08:11,650 --> 00:08:14,630
Er det kjedelig? Har de å utføre mange repetitive oppgaver?

147
00:08:14,630 --> 00:08:17,140
Vi ønsker å gjøre denne prosessen så effektiv som mulig

148
00:08:17,140 --> 00:08:20,070
slik at de ikke trenger å gjøre denslags.

149
00:08:20,070 --> 00:08:24,230
Som for intuitiveness, er at, for eksempel, hvis en bruker ser opp min grensesnittet,

150
00:08:24,230 --> 00:08:27,240
er det lett for dem å komme seg fra sted til sted?

151
00:08:27,240 --> 00:08:30,390
Er det lett for dem å finne ut hva de har å klikke i grensesnittet min

152
00:08:30,390 --> 00:08:33,770
for dem å nå målet eller oppgaven som de ønsker å oppnå?

153
00:08:33,770 --> 00:08:37,520
>> Og til slutt, som en person sa over det, er tilgjengelighet svært viktig.

154
00:08:37,520 --> 00:08:39,640
[Mannlige høyttaler] Det gjelder tilgjengelighet for ting som syn,

155
00:08:39,640 --> 00:08:42,740
liker hvordan jeg faktisk designe noe for noen som er blind?

156
00:08:42,740 --> 00:08:46,460
Oh. For folk som ikke kan se i det hele tatt, har vi noe som heter skjermlesere.

157
00:08:46,460 --> 00:08:49,070
Hva du bør gjøre er at du bør bygge ditt nettsted på en måte

158
00:08:49,070 --> 00:08:52,020
som for eksempel bestemte teknologier hva vi kaller -

159
00:08:52,020 --> 00:08:53,590
Det er mange ting nå.

160
00:08:53,590 --> 00:08:55,660
Jeg tror det er skjermlesere kalt JAWS.

161
00:08:55,660 --> 00:08:58,410
Mange av disse tingene er avhengige av det vi kaller området regler

162
00:08:58,410 --> 00:09:02,010
for å kunne lese ut til brukeren hva som er tilstede på siden.

163
00:09:02,010 --> 00:09:05,480
For dem som ikke kan se, må du sørge for at disse skjermlesere

164
00:09:05,480 --> 00:09:09,130
kan faktisk plukke opp innholdet på siden, og kan faktisk vise brukerne,

165
00:09:09,130 --> 00:09:13,630
Hvis du ikke kan se, i det minste du kan fortsatt forstå innholdet på siden.

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

167
00:09:16,190 --> 00:09:23,410
Nok snakk om god design. La oss snakke om dårlig design.

168
00:09:23,410 --> 00:09:25,220
Dette er ting som du ikke bør gjøre.

169
00:09:25,220 --> 00:09:27,890
Kan noen fortelle meg om sine erfaringer med Craigslist

170
00:09:27,890 --> 00:09:32,190
og hva de tror er ikke så stor om dette design?

171
00:09:33,690 --> 00:09:36,430
Ja. >> [Student] Jeg tror det er altfor mange ord i ett område.

172
00:09:36,430 --> 00:09:39,350
For mange ord, ikke sant? Helt overveldende.

173
00:09:39,350 --> 00:09:42,400
Du kommer til denne siden, og du er møtt med en hel haug av ting her oppe

174
00:09:42,400 --> 00:09:43,860
som kanskje ikke engang noe for deg.

175
00:09:43,860 --> 00:09:47,010
For eksempel, du bor i en stat som ikke begynner med denne bokstaven.

176
00:09:47,010 --> 00:09:48,690
La oss si du bor i Texas eller noe.

177
00:09:48,690 --> 00:09:53,790
>> Du må bla hele veien ned på siden for å komme til det stedet du er på.

178
00:09:53,790 --> 00:10:00,320
Jeg er fra Boston, så la meg se i Massachusetts. Hvor er Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Å, det er akkurat her. Å, det er Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
La oss se på Boston. [Latter]

181
00:10:09,070 --> 00:10:12,250
Ganske overveldende, ikke sant?

182
00:10:12,250 --> 00:10:16,400
Awkward ting der borte. [Latter]

183
00:10:17,320 --> 00:10:19,470
La oss si jeg leter etter et sted å bo.

184
00:10:19,470 --> 00:10:24,130
Hvor mange mennesker har faktisk brukt Craigslist? Tonnevis av deg.

185
00:10:24,130 --> 00:10:30,960
Det er ganske dårlig måter å se på dette, men la oss se på dette.

186
00:10:35,130 --> 00:10:38,970
Hva er forskjellen mellom img og bilde? Kan noen fortelle meg?

187
00:10:41,350 --> 00:10:42,830
Det er faktisk ingen forskjell.

188
00:10:42,830 --> 00:10:47,710
De mener akkurat det samme, men de har forskjellige etiketter for dem for noen grunn.

189
00:10:48,980 --> 00:10:53,560
Hvis jeg klikker på har bilde, skjer det ingenting på siden.

190
00:10:53,560 --> 00:10:57,490
Jeg må faktisk klikker på Søk på nytt for at noe skal skje.

191
00:10:57,490 --> 00:11:02,430
Hva kan være et bedre design beslutning som kan gjøres der?

192
00:11:03,820 --> 00:11:08,030
Hvis jeg klikker på dette filteret, jeg sannsynligvis vil filtrere etter en bestemt handling

193
00:11:08,030 --> 00:11:09,970
eller den aktuelle kategorien.

194
00:11:09,970 --> 00:11:14,450
Så i stedet for å måtte trykke Søk igjen, kunne jeg bare automatisk gjøre filtrering

195
00:11:14,450 --> 00:11:17,060
slags Google stil der de gjør det umiddelbart.

196
00:11:17,060 --> 00:11:20,440
[Malan] Men danner ikke som vi har sett dem så langt må være fysisk sendes

197
00:11:20,440 --> 00:11:23,170
ved å treffe Skriv inn minst eller klikke på en knapp?

198
00:11:23,170 --> 00:11:26,830
Som du har sett dem så langt, har du faktisk nødt til å klikke Send å gjøre disse tingene.

199
00:11:26,830 --> 00:11:30,090
>> Men som Tommy vil vise deg i et sekund, det er faktisk måter for deg

200
00:11:30,090 --> 00:11:33,010
slik at når du klikker på at ting kan automatisk sende

201
00:11:33,010 --> 00:11:38,840
det vi kaller en AJAX forespørsel og få data tilbake og filtrere resultatene umiddelbart.

202
00:11:38,840 --> 00:11:41,340
Det er tonnevis av ting som er galt med dette grensesnittet.

203
00:11:41,340 --> 00:11:43,530
[Malan] Kan du søke etter Cambridge?

204
00:11:43,530 --> 00:11:47,030
Det er noe litt avvikende her hvor du bryr deg om Cambridge

205
00:11:47,030 --> 00:11:54,790
og likevel du får Westford, Spring Hill, West Newton og lignende.

206
00:11:54,790 --> 00:11:57,930
Sannsynligvis ikke ideelt. >> Sannsynligvis ikke ideelt.

207
00:11:57,930 --> 00:12:03,900
Hvordan kan jeg være i stand til å gjøre brukeropplevelsen bedre på denne siden?

208
00:12:03,900 --> 00:12:07,340
Ja. >> [Student] Instruksjoner.

209
00:12:07,340 --> 00:12:09,500
Okay. Instruksjoner på hva slags følelse?

210
00:12:09,500 --> 00:12:14,630
[Student] For eksempel, en ting for første gang brukere som ikke engang vet hva Craigslist er

211
00:12:14,630 --> 00:12:17,320
eller du ikke vet hva du skal gjøre.

212
00:12:17,320 --> 00:12:20,150
Høyre. Så forklare hva Craigslist er på denne siden er viktig.

213
00:12:20,150 --> 00:12:23,490
Vi kan faktisk fortelle brukerne hva denne siden er faktisk for.

214
00:12:23,490 --> 00:12:27,090
Hvis jeg bare besøker dette, ser jeg en hel haug av steder. Jeg vet ikke engang hva de betyr.

215
00:12:27,090 --> 00:12:29,730
Men enda viktigere, bare se på dette grensesnittet,

216
00:12:29,730 --> 00:12:35,530
husker jeg måtte rulle nedover massevis av ting å finne et bestemt samfunn

217
00:12:35,530 --> 00:12:37,560
at jeg faktisk brydde seg om på dette.

218
00:12:37,560 --> 00:12:39,820
Hva er en raskere måte jeg kunne gjøre det? Ja.

219
00:12:39,820 --> 00:12:43,290
[Student] Del dem opp i øst, vest regioner. >> Ok.

220
00:12:43,290 --> 00:12:47,460
Jeg kunne dele dem inn flere kategorier som kan hjelpe meg raskere avgjøre

221
00:12:47,460 --> 00:12:49,820
hvordan komme til det aktuelle stedet.

222
00:12:49,820 --> 00:12:54,510
[Student] Sett en drop-down listen. >> Høyre. Okay.

223
00:12:54,510 --> 00:12:58,240
Jeg kunne bruke en drop-down menyen fordi vi har et fast sett av ting

224
00:12:58,240 --> 00:13:00,100
og vi kunne vise dem i en drop-down menyen.

225
00:13:00,100 --> 00:13:02,240
På den måten tar ikke opp så mye plass på skjermen.

226
00:13:02,240 --> 00:13:05,630
Men enda bedre enn det, hva kan vi gjøre?

227
00:13:05,630 --> 00:13:09,220
Ja. >> [Uhørlig student respons] >> Kan du si det igjen? >> [Student] søkeboksen.

228
00:13:09,220 --> 00:13:11,260
Ja, en søkeboks. Det er flott.

229
00:13:11,260 --> 00:13:16,430
Hva vi faktisk kan gjøre er hvis vi ser tilbake på lysbilder, søkeboksen.

230
00:13:16,430 --> 00:13:21,520
Autofullfør. Svært enkel måte å søke gjennom resultater som du vet er i et sett.

231
00:13:21,520 --> 00:13:25,980
Hvis jeg begynner å skrive BO, bare vise meg alle resultater som har BO innsiden av dem.

232
00:13:25,980 --> 00:13:29,030
På den måten jeg kan veldig lett finne den bestemte jeg ønsker å gå til

233
00:13:29,030 --> 00:13:32,390
i stedet for å måtte bla gjennom dette virkelig stor liste.

234
00:13:32,390 --> 00:13:37,450
>> Disse er alle slags virkelig lavthengende frukt som noen som gjennomfører Craigslist

235
00:13:37,450 --> 00:13:42,500
kan faktisk gjøre for å gjøre opplevelsen på nettstedet mye bedre for deres bestemt bruker.

236
00:13:42,500 --> 00:13:46,370
Okay. Nok snakk om dårlige nettsteder.

237
00:13:46,370 --> 00:13:49,410
La oss snakke om Facebook.

238
00:13:50,880 --> 00:13:54,390
Da Facebook kom ut, og spesielt Facebook-bilder,

239
00:13:54,390 --> 00:13:57,870
Det var massevis av andre tjenester på den tiden som kunne gjøre akkurat de samme tingene.

240
00:13:57,870 --> 00:14:00,740
De kunne organisere bildene dine i album.

241
00:14:00,740 --> 00:14:03,360
Hva du kan gjøre er at du kan organisere dem i sett også.

242
00:14:03,360 --> 00:14:06,070
Du kan organisere dem etter dato. Du kan gjøre alle disse spesielle ting.

243
00:14:06,070 --> 00:14:11,710
Men vet noen hva som gjorde Facebook bilder eksplodere på den tiden den ble utgitt?

244
00:14:11,710 --> 00:14:15,080
Ja. >> [Student] Merker. >> Tags. Akkurat.

245
00:14:15,080 --> 00:14:21,300
Vi har Milo over her, som er vår hund maskot med at CS50 halstørkle.

246
00:14:21,300 --> 00:14:24,810
Du kan se at vi har denne merking i midten.

247
00:14:24,810 --> 00:14:28,240
Og hva gjorde Facebook-bilder så interessant fra et usability ståsted

248
00:14:28,240 --> 00:14:34,130
er at det faktisk er tillatt mennesker via denne for å involvere sine venner i sine bilder.

249
00:14:34,130 --> 00:14:37,680
For Facebook, siden deres hjemmeside er spesielt sosial,

250
00:14:37,680 --> 00:14:40,750
det handler om å bygge denne typen sosial atmosfære.

251
00:14:40,750 --> 00:14:42,620
Som forbedret opplevelsen av bilder mye mer

252
00:14:42,620 --> 00:14:46,390
fordi de faktisk kunne begynne å si: "Dette er forbindelser mellom mennesker,

253
00:14:46,390 --> 00:14:49,220
og disse er bilder om folk du faktisk bryr deg om. "

254
00:14:49,220 --> 00:14:52,200
En del av det er også sortere narsissisme.

255
00:14:52,200 --> 00:14:54,980
Folk liker å bli tagget i bilder og sånt.

256
00:14:54,980 --> 00:14:58,510
Selv om det ikke er nødvendigvis en god menneskelig egenskap,

257
00:14:58,510 --> 00:15:01,910
samtidig det er basert på god design beslutninger

258
00:15:01,910 --> 00:15:04,860
fordi folk faktisk bryr seg om ting som dette.

259
00:15:04,860 --> 00:15:07,190
Så det er Facebook-bilder.

260
00:15:07,190 --> 00:15:09,800
>> Men la oss snakke Facebook mer generelt.

261
00:15:09,800 --> 00:15:13,400
Jeg er sikker på at mange folk her har meninger om Facebook,

262
00:15:13,400 --> 00:15:16,430
både gode design beslutninger og dårlig design beslutninger.

263
00:15:16,430 --> 00:15:20,270
Så la oss ventilere eller være lykkelig.

264
00:15:23,480 --> 00:15:26,450
Kom igjen. Jeg vet bruker alle dere Facebook.

265
00:15:26,450 --> 00:15:30,970
Noen må ha noe dårlig å si eller noe godt å si om det. Ja.

266
00:15:30,970 --> 00:15:35,060
[Student] I nyhetsfeed det er mange ting jeg egentlig ikke bryr seg om.

267
00:15:35,060 --> 00:15:37,740
Nyhetsmatingen ikke viser en masse ting du kanskje ikke bryr seg om.

268
00:15:37,740 --> 00:15:41,660
Du har venner på Facebook som du ikke har møtt for 2 eller 3 år

269
00:15:41,660 --> 00:15:43,860
og du ser sine nyheter resultater dukker opp i news feed

270
00:15:43,860 --> 00:15:45,870
og du ikke virkelig bryr seg om det.

271
00:15:45,870 --> 00:15:48,700
Facebook har faktisk gjort en innsats for å gjøre dette bedre,

272
00:15:48,700 --> 00:15:53,150
og de har faktisk prøvd å presse relevante resultater til toppen av nyhetsfeed som for sent

273
00:15:53,150 --> 00:15:58,300
slik at du faktisk se ting av venner som er relevante for deg eller dine nære venner.

274
00:15:58,300 --> 00:16:01,110
Noe annet? Ja.

275
00:16:01,110 --> 00:16:06,400
[Uhørlig student respons] >> Kan du si det igjen?

276
00:16:06,400 --> 00:16:10,140
[Student] Annonsene er relativt påtrengende. >> I hvilken forstand?

277
00:16:10,140 --> 00:16:16,370
[Uhørlig student respons] De har ikke lys på skjermen, som bannere.

278
00:16:16,370 --> 00:16:17,760
Okay. Det er bra.

279
00:16:17,760 --> 00:16:25,030
Hvis du husker på Internett fra 90-tallet - >> [Malan] jeg var der. >> Han var der. [Latter]

280
00:16:25,030 --> 00:16:29,210
Du husker kanskje blinkende GIF bakgrunner, sparkly ting,

281
00:16:29,210 --> 00:16:31,570
Geocities stil slags ting.

282
00:16:31,570 --> 00:16:34,080
Det er egentlig ikke et eksempel på en god design

283
00:16:34,080 --> 00:16:36,690
fordi det er virkelig distraherende fra innholdet.

284
00:16:36,690 --> 00:16:39,590
The Yale art nettstedet pleide å ha animerte GIF-filer som deres bakgrunn

285
00:16:39,590 --> 00:16:41,800
og du ikke kunne lese noe på siden,

286
00:16:41,800 --> 00:16:44,870
men jeg antar at noen faktisk snakket med dem, og nå er det litt annerledes.

287
00:16:44,870 --> 00:16:48,940
[Malan] Det er mye bedre nå. >> Det er mye bedre nå, som du kan se. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Like stor, bare - Ja. Okay.

289
00:16:56,020 --> 00:17:00,560
>> En del av det er også noe som gjør siden din muligens veldig minimalistisk og svært forståelig

290
00:17:00,560 --> 00:17:05,690
så ting på siden flyten i en måte som er veldig logisk og ikke komme i veien for hverandre.

291
00:17:05,690 --> 00:17:11,849
Hva slags andre ting er bra om Facebook eller dårlig om Facebook?

292
00:17:11,849 --> 00:17:15,730
La oss bare ha en utforming samtale her.

293
00:17:19,470 --> 00:17:21,339
Oh. Hvor? Ja.

294
00:17:21,339 --> 00:17:25,640
[Student] Den nye Timeline-systemet lar deg søke på personens profil om sin fortid.

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

296
00:17:28,119 --> 00:17:30,280
Timeline er en stor ting fordi det lar deg stengel vennene dine

297
00:17:30,280 --> 00:17:33,300
tilbake når de var på high school.

298
00:17:35,160 --> 00:17:38,060
Tidslinjen er bra fordi det lar deg filtrere gjennom innhold mye raskere,

299
00:17:38,060 --> 00:17:41,500
den lar deg finne ting som ellers ville ha tatt deg en veldig lang tid å finne

300
00:17:41,500 --> 00:17:45,840
bare å bla opp og ned, opp, opp, opp, opp, opp, som å gå tilbake i tid.

301
00:17:45,840 --> 00:17:48,910
Men så er det også en slags ulemper som i form av brukeropplevelsen.

302
00:17:48,910 --> 00:17:51,190
Hva kan det være?

303
00:17:51,190 --> 00:17:56,780
Store ord som starter med P-R. >> [Student] Personvern. >> Personvern, ikke sant?

304
00:17:56,780 --> 00:17:59,970
Personvern er et stort brukeropplevelse problemet.

305
00:17:59,970 --> 00:18:07,190
Dette er en av de tingene jeg hater mest om Facebook nå. [Latter]

306
00:18:07,190 --> 00:18:09,000
[Malan] Som jeg nå.

307
00:18:09,000 --> 00:18:11,380
David var ikke klar over dette faktisk skjedde før i går.

308
00:18:11,380 --> 00:18:14,560
Så nå vet han at hver gang jeg chatte ham jeg vet han har vært ignorerer meg.

309
00:18:14,560 --> 00:18:16,880
[Malan] Det klønete delen ble jeg faktisk ignorerer ham,

310
00:18:16,880 --> 00:18:21,040
og jeg visste ikke at han visste at jeg var ignorerer ham. [Latter]

311
00:18:21,040 --> 00:18:24,030
Personvern er et stort problem.

312
00:18:24,030 --> 00:18:28,670
Kan noen her fortelle meg hva som kan være dårlig om Facebook personvern

313
00:18:28,670 --> 00:18:32,270
foruten det faktum at de gjør ting som dette?

314
00:18:32,270 --> 00:18:37,240
Hva er det spesielt vanskelig å gjøre med hensyn til Facebook personvernet?

315
00:18:37,240 --> 00:18:40,340
Den slags er en ledende spørsmål.

316
00:18:41,680 --> 00:18:43,930
Ja. >> [Student] Skjul dine bilder fra bestemte personer.

317
00:18:43,930 --> 00:18:46,170
Høyre. Akkurat, for å skjule bildene dine fra bestemte personer.

318
00:18:46,170 --> 00:18:51,290
De har denne lille, lille knappen i øvre høyre som lar deg veksle personvernet til et bilde.

319
00:18:51,290 --> 00:18:56,360
Deres personvern alternativer er svært varierte mellom ulike typer menyer.

320
00:18:56,360 --> 00:18:59,510
>> De har fått mye bedre om det nylig, men det pleide å være tilfelle

321
00:18:59,510 --> 00:19:04,870
at når du ønsket å hindre dine venner fra å se bilder,

322
00:19:04,870 --> 00:19:08,280
du vil måtte gå gjennom en svært komplisert 5-trinns prosess for å være like,

323
00:19:08,280 --> 00:19:11,150
la meg klikke på denne linken, nå la meg på nytt, la meg på nytt,

324
00:19:11,150 --> 00:19:13,420
la meg spesifisere hvilke folk ikke kan se bildene mine.

325
00:19:13,420 --> 00:19:17,250
Det er ikke spesielt god på Facebook del

326
00:19:17,250 --> 00:19:20,530
fordi så mye om brukeropplevelse er faktisk å gi dem frihet

327
00:19:20,530 --> 00:19:22,460
å kontrollere hva folk kan se.

328
00:19:22,460 --> 00:19:25,550
Vi kaller denne brukeren kontroll og frihet.

329
00:19:25,550 --> 00:19:31,090
Hvis du ikke lar brukerne gjøre det på en måte som er effektiv og intuitiv,

330
00:19:31,090 --> 00:19:34,570
deretter din brukeropplevelse er egentlig ikke så stor på alle.

331
00:19:34,570 --> 00:19:38,200
 Vil dere liker å si noe om Facebook?

332
00:19:38,700 --> 00:19:41,420
Hvordan slår jeg av dette?

333
00:19:41,420 --> 00:19:46,290
[Ong] Du kan ikke slå dette av, og det er en stor brukervennlighet feil på den delen av Facebook.

334
00:19:46,290 --> 00:19:49,410
Denne funksjonen - jeg faktisk sett det i går -

335
00:19:49,410 --> 00:19:53,940
det er enten at du ikke kan gjøre det eller det er begravet et sted veldig, veldig dypt

336
00:19:53,940 --> 00:19:58,050
i recesses av Facebook fordi jeg ikke kan finne ut hvordan du deaktiverer denne funksjonen i det hele tatt.

337
00:19:58,050 --> 00:20:00,400
[Malan] Men noen ganger disse beslutningene er ikke opplagt

338
00:20:00,400 --> 00:20:03,890
fordi dere har gitt oss mye nyttig tilbakemelding på ulike CS50 søknader

339
00:20:03,890 --> 00:20:05,710
og nettsteder som kurset bruker.

340
00:20:05,710 --> 00:20:10,260
Vi har ikke implementert alle disse forespørslene og forslag.

341
00:20:10,260 --> 00:20:14,550
>> En del av det er for å få så mange forespørsler at det er en funksjon av tiden,

342
00:20:14,550 --> 00:20:17,070
men noen ganger er vi bare gjøre en bevisst beslutning som,

343
00:20:17,070 --> 00:20:19,830
"Takk for forslaget, men vi er uenige."

344
00:20:19,830 --> 00:20:24,350
Så hvordan kan du faktisk bestemme hva du skal gjøre hvis brukerne tror du bør gjøre noe

345
00:20:24,350 --> 00:20:28,110
selv om du ikke nødvendigvis?

346
00:20:28,110 --> 00:20:32,360
Det er en fin balanse mellom faktisk lytte til hva brukerne sier

347
00:20:32,360 --> 00:20:35,840
og faktisk har en slags linje der du sier,

348
00:20:35,840 --> 00:20:37,750
"Vi kommer ikke til å gjøre hva disse brukerne sier."

349
00:20:37,750 --> 00:20:42,520
Og i særdeleshet, tror jeg det var et sitat av Henry Ford som summerer dette opp ganske godt.

350
00:20:42,520 --> 00:20:47,130
"Hvis jeg hadde spurt folk hva de ville, ville de ha sagt de ønsket raskere hester."

351
00:20:47,130 --> 00:20:51,840
Kan noen slags erte hverandre hva dette sitatet egentlig betyr?

352
00:20:51,840 --> 00:20:56,060
Det er ikke bare at brukerne vet hva de vil,

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

354
00:20:59,180 --> 00:21:02,720
[Student] De vet ikke hva som er mulig.

355
00:21:02,720 --> 00:21:06,140
I del de ikke vet hva som er mulig.

356
00:21:07,880 --> 00:21:11,440
Erte at bortsett litt mer. Hva mener du med det?

357
00:21:11,440 --> 00:21:21,340
[Uhørlig student respons]

358
00:21:21,340 --> 00:21:25,770
Det er bra. Hva jeg tror vi prøver å si her er at folk vet hva de vil.

359
00:21:25,770 --> 00:21:28,050
De ønsker raskere hester.

360
00:21:28,050 --> 00:21:29,840
Hva de egentlig ønsker er evnen til å bevege seg raskere,

361
00:21:29,840 --> 00:21:32,310
men de ikke vet det mediet som å oppnå det.

362
00:21:32,310 --> 00:21:36,330
Når du kommer til brukerne og brukerne du fortelle noe

363
00:21:36,330 --> 00:21:39,700
og de forteller deg: "Vi vil ha disse funksjonene og disse funksjonene og disse funksjonene,"

364
00:21:39,700 --> 00:21:42,650
du ikke ønsker å nødvendigvis tenke på, "La meg gå videre

365
00:21:42,650 --> 00:21:44,720
"Og gjennomføre det de eksplisitt sier,"

366
00:21:44,720 --> 00:21:48,610
men hva du ønsker å tenke på er: "Hva slags ideer kan jeg få fra det?"

367
00:21:48,610 --> 00:21:50,450
Hva gjør de egentlig vil?

368
00:21:50,450 --> 00:21:55,560
>> Og derfra hva du kan gjøre er å lage noe som tilfredsstiller disse forespørslene

369
00:21:55,560 --> 00:22:00,340
men ikke nødvendigvis på den måten at brukeren forventer det å være fornøyd.

370
00:22:00,340 --> 00:22:03,830
Så for noe sånt endelige prosjektene, i svært reelt,

371
00:22:03,830 --> 00:22:07,900
hva er et nyttig heuristisk når det gjelder å lage noe bedre,

372
00:22:07,900 --> 00:22:10,630
spesielt hvis designeren har denne arroganse om ham

373
00:22:10,630 --> 00:22:14,360
der du liksom vet hva som er best, kan du ta innspill fra brukerne,

374
00:22:14,360 --> 00:22:16,580
men hvordan kan du faktisk gå om å få disse tilbakemeldingene?

375
00:22:16,580 --> 00:22:21,610
I siste prosjekter, veldig konkret, produserer hva optimale resultater her?

376
00:22:21,610 --> 00:22:25,030
Hva gir optimale resultater - og jeg vil gå over dette i et sekund -

377
00:22:25,030 --> 00:22:29,190
er denne prosessen med å utvikle og deretter teste og deretter gjentar.

378
00:22:29,190 --> 00:22:32,020
Hva jeg mener med testing er vanligvis når du utformer noe

379
00:22:32,020 --> 00:22:36,970
du tror det er ganske bra, som "Jeg er en stor designer. Alle kommer til å elske denne."

380
00:22:36,970 --> 00:22:41,600
Og så lagt det ut og folk ikke liker det for noen grunn.

381
00:22:41,600 --> 00:22:46,820
Hva du trenger å gjøre er at du må ta deler av ting som folk gjøre som

382
00:22:46,820 --> 00:22:49,180
og revolusjonere de tingene som folk ikke liker.

383
00:22:49,180 --> 00:22:53,080
Det høres ut som en veldig tydelig prosess, men denne prosessen av stadig gjentar

384
00:22:53,080 --> 00:22:55,980
på toppen av hva du allerede har bygget er en prosess som hjelper deg

385
00:22:55,980 --> 00:22:59,730
ikke bare avgrense dine egne design ferdigheter, men også hjelper deg med å avgrense design

386
00:22:59,730 --> 00:23:03,790
slik at folk faktisk setter pris på din produkt enda mer enn de gjorde før.

387
00:23:03,790 --> 00:23:07,390
>> Jeg skal gå over flere konkrete eksempler på hva du kan faktisk gjøre.

388
00:23:07,390 --> 00:23:11,390
Som en slags siste eksempel på et produkt, la oss se på KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK da den kom ut var veldig, veldig populære.

390
00:23:14,970 --> 00:23:18,760
Kan noen gjette hvorfor?

391
00:23:18,760 --> 00:23:20,950
Hva er den slags ting du liker om dette hvis du har brukt den

392
00:23:20,950 --> 00:23:23,990
eller hva er den slags ting du ikke liker?

393
00:23:23,990 --> 00:23:31,590
Ja. >> [Uhørlig student respons] >> Ok.

394
00:23:31,590 --> 00:23:34,730
Det er en del av det er å la brukeren ha en spørring som er mer ekspansiv

395
00:23:34,730 --> 00:23:38,150
enn en svært restriktiv en som, "Du må velge din startdato

396
00:23:38,150 --> 00:23:39,810
"Og du må velge din sluttdato."

397
00:23:39,810 --> 00:23:44,910
Faktisk, det kan du være fleksibel om det og det gir deg alle flyreiser i dette området.

398
00:23:44,910 --> 00:23:46,730
Noe annet?

399
00:23:46,730 --> 00:23:50,530
[Student] De omfatter avgiftene i prisen.

400
00:23:50,530 --> 00:23:53,330
De inkluderer avgifter i prisen.

401
00:23:53,330 --> 00:23:56,720
Skatter og ting faktisk gå rett inn at prisen i det øvre venstre

402
00:23:56,720 --> 00:24:00,710
slik at du ikke lures til å tro at du faktisk betaler for en $ 240 fly

403
00:24:00,710 --> 00:24:03,280
når det er egentlig $ 330.

404
00:24:03,280 --> 00:24:06,200
Noe annet? Ja.

405
00:24:06,200 --> 00:24:10,140
[Uhørlig student respons]

406
00:24:10,140 --> 00:24:14,610
Jeg er ikke sikker på om de faktisk lar deg gjøre det.

407
00:24:14,610 --> 00:24:18,310
Jeg kan være galt.

408
00:24:18,310 --> 00:24:23,360
Det kan være en interessant ting hvis du ønsker å legge større vekt på bestemte filtre

409
00:24:23,360 --> 00:24:27,000
slik at de presser resultater relatert til at filteret til toppen.

410
00:24:27,000 --> 00:24:31,920
Men kan noen fortelle meg hva som er så spesielt med denne venstre side?

411
00:24:31,920 --> 00:24:39,540
Hvordan fikk du tradisjonelt slå opp et fly på en Internett-tjeneste før dette?

412
00:24:41,600 --> 00:24:44,650
>> Ja. >> [Uhørlig student respons] >> Kan du si at -

413
00:24:44,650 --> 00:24:47,530
[Student] Hvert flyselskap. >> Ja. Hvert flyselskap har sin egen hjemmeside.

414
00:24:47,530 --> 00:24:50,110
Dette befester ting. Og?

415
00:24:50,110 --> 00:24:52,190
[Student] Du vet nøyaktig hva tid du drar.

416
00:24:52,190 --> 00:24:54,460
Du vet nøyaktig hva tid du drar,

417
00:24:54,460 --> 00:24:59,380
men knyttet til filtrene spesielt.

418
00:25:00,710 --> 00:25:03,540
La meg trekke opp KAYAK.

419
00:25:11,490 --> 00:25:14,020
Å Gud, pop-ups. Dårlig brukeropplevelse.

420
00:25:14,020 --> 00:25:17,230
Hva skjer når jeg flytter denne slideren?

421
00:25:17,230 --> 00:25:21,010
[Student] Automatiske oppdateringer. >> [Ong] Automatiske oppdateringer.

422
00:25:21,010 --> 00:25:23,440
Det er noe som er veldig viktig.

423
00:25:23,440 --> 00:25:25,380
Før dette, når du ønsket å slå opp et fly,

424
00:25:25,380 --> 00:25:28,410
du måtte sette i dine innspill plassering, utgang plassering, trykker Søk,

425
00:25:28,410 --> 00:25:31,190
det ville behandle det og vise resultatene.

426
00:25:31,190 --> 00:25:34,120
Hvis du ønsker å endre spørringen, ville du må trykke tilbake to ganger,

427
00:25:34,120 --> 00:25:39,770
inn i en ny spørring fra grunnen av, og deretter gjøre det igjen og igjen.

428
00:25:39,770 --> 00:25:43,910
Det fine med noe sånt som dette er det bruker en svært [uforståelig] ting i midten.

429
00:25:43,910 --> 00:25:46,230
Når du gjør noe som dette, skyter den av en forespørsel

430
00:25:46,230 --> 00:25:48,420
og den returnerer deg alle resultatene umiddelbart.

431
00:25:48,420 --> 00:25:51,680
Denne typen umiddelbar tilbakemelding er noe som gjorde KAYAK svært populære

432
00:25:51,680 --> 00:25:55,910
fordi det er veldig lett for meg å bare endre mine søk

433
00:25:55,910 --> 00:25:58,890
og for å finne ut de tingene som er rundt et bestemt område

434
00:25:58,890 --> 00:26:01,950
uten å måtte gå frem og tilbake, frem og tilbake, frem og tilbake.

435
00:26:01,950 --> 00:26:05,200
Så disse er alle slags ting du ønsker å tenke på når du designer ditt nettsted.

436
00:26:05,200 --> 00:26:08,930
Hvordan kan jeg gjøre det veldig effektivt for brukerne mine til å gå gjennom hva de jobber med

437
00:26:08,930 --> 00:26:13,010
og for å komme til deres endelige mål så raskt som mulig?

438
00:26:13,010 --> 00:26:16,430
[Malan] Og til Josefs punkt tidligere om brukerne ikke nødvendigvis vet hva de vil,

439
00:26:16,430 --> 00:26:18,640
basert på hva dere nå vet om HTML

440
00:26:18,640 --> 00:26:22,780
og du har avkrysningsbokser, radioknapper, velger menyer, inntastingsfelter og lignende,

441
00:26:22,780 --> 00:26:26,140
hvordan ville du gjennomføre tanken om å plukke en starttid for en flyreise?

442
00:26:26,140 --> 00:26:30,030
>> Hvilke av disse ulike UI mekanismer vil du bruke?

443
00:26:30,030 --> 00:26:34,100
Hvis du bare vite hvor mye av HTML som ble undervist før

444
00:26:34,100 --> 00:26:39,070
og du vet at innganger radioknapper, avmerkingsbokser, drop-downs, og input-boksen,

445
00:26:39,070 --> 00:26:43,320
hva ville det naturlige valget har vært for å plukke datoer?

446
00:26:43,320 --> 00:26:48,670
[Student] Input. >> Inngang. Eller kanskje en drop-down med alle datoene, ikke sant?

447
00:26:48,670 --> 00:26:53,170
Så med mer komplekse UI mekanismer som dette på venstre side som du kan implementere,

448
00:26:53,170 --> 00:26:55,500
du kan gjøre denne prosessen mye mer intuitivt med en glidebryter

449
00:26:55,500 --> 00:27:01,020
fordi tiden er kontinuerlig, og folk vanligvis ikke tenker på det i form av diskrete biter.

450
00:27:01,020 --> 00:27:04,950
OK. Siste ting.

451
00:27:04,950 --> 00:27:07,370
Ti brukervennlighet heuristikk.

452
00:27:07,370 --> 00:27:10,820
Alle de tingene vi snakket om trolig falle under en av disse kategoriene.

453
00:27:10,820 --> 00:27:14,420
Hvis du går til denne linken, som nettstedene vil bli lagt ut på nettet,

454
00:27:14,420 --> 00:27:18,900
vil du faktisk være i stand til, som du designe ditt nettsted, holde disse heuristikk i tankene

455
00:27:18,900 --> 00:27:21,330
og disse tommelfingerregler.

456
00:27:21,330 --> 00:27:26,610
For prosjektene dine, hva jeg foreslår at du gjør for å designe din app bedre

457
00:27:26,610 --> 00:27:28,850
er å gjøre papir prototyping først.

458
00:27:28,850 --> 00:27:32,150
Når du tenker på søknaden din, veldig raskt skissere hva du vil den skal se ut

459
00:27:32,150 --> 00:27:36,230
og sørge for at alle boksene er ordnet på en måte som er svært intuitivt for brukeren å bruke

460
00:27:36,230 --> 00:27:39,820
og selv vise disse papir prototyper til vennene dine og begynne fokusgrupper.

461
00:27:39,820 --> 00:27:44,230
Bare få 2 eller 3 personer sammen og be dem om å bare trykke på disse papir prototyper,

462
00:27:44,230 --> 00:27:47,650
og vise dem nye skjermer for å se om de faktisk forstår hva som skjer.

463
00:27:47,650 --> 00:27:50,680
>> Hva du ønsker å gjøre er å gi dem en oppgave, motivere den oppgaven,

464
00:27:50,680 --> 00:27:53,270
og bare gi dem til applikasjonen og la dem bruke den.

465
00:27:53,270 --> 00:27:56,530
Ikke gi dem instrukser utover det.

466
00:27:56,530 --> 00:28:00,920
Du ønsker å faktisk la dem samhandle med programmet ditt på en måte som lar deg se

467
00:28:00,920 --> 00:28:03,870
hvordan de ville bruke det hvis du ikke ble stående ved siden av dem.

468
00:28:03,870 --> 00:28:05,250
Og det er veldig viktig.

469
00:28:05,250 --> 00:28:08,780
Det vil gi deg massevis av innsikt som til er folk får rundt spesielle ting

470
00:28:08,780 --> 00:28:10,560
på en måte som jeg ikke hadde tenkt dem til?

471
00:28:10,560 --> 00:28:14,680
De bruker bestemte UI mekanismer på skjermen

472
00:28:14,680 --> 00:28:17,490
på en måte som er slags hacky?

473
00:28:17,490 --> 00:28:22,020
Jeg hadde ikke tenkt for dem å gjøre det på den måten.

474
00:28:22,020 --> 00:28:23,940
Og når du er ferdig med det, hva vil du gjøre?

475
00:28:23,940 --> 00:28:26,010
Din design steiner, ikke sant?

476
00:28:26,010 --> 00:28:29,600
Hva du ønsker å gjøre er du ønsker å utvikle og gjøre det prosessen på nytt.

477
00:28:29,600 --> 00:28:32,110
Så viser det til venner når du har utviklet den, teste den,

478
00:28:32,110 --> 00:28:36,630
utvikle, teste, utvikle, teste, iterate, videre og videre og videre.

479
00:28:36,630 --> 00:28:39,720
Design er en svært iterativ prosess i denne forstand.

480
00:28:39,720 --> 00:28:43,280
Du har faktisk å bygge noe og deretter innse ting om det

481
00:28:43,280 --> 00:28:46,520
at du ikke skjønner før og gå tilbake og forbedre fra det.

482
00:28:46,520 --> 00:28:50,890
Nå, som for utviklingen del, det er hva Tommy kommer til å vise deg etter bruddet

483
00:28:50,890 --> 00:28:53,220
og hvordan du kan være i stand til å gjennomføre noe sånt autofullføring

484
00:28:53,220 --> 00:28:56,610
på en måte som er ganske enkel.

485
00:28:57,440 --> 00:28:59,550
[Malan] Som Tommy setter opp her, et spørsmål da.

486
00:28:59,550 --> 00:29:03,780
Mange av de tidligste nettsteder - og da Josef sa 1990 stil nettsted,

487
00:29:03,780 --> 00:29:07,640
det var implementeringer der hvis du ønsket å velge en starttid og en slutt tid,

488
00:29:07,640 --> 00:29:10,380
ærlig, tilbake i dag, og selv om noen nettsteder i dag,

489
00:29:10,380 --> 00:29:13,220
måten du gjør dette er du plukke en time fra en drop-down,

490
00:29:13,220 --> 00:29:15,910
du plukke minutter fra en drop-down, kanskje du velge AM, PM,

491
00:29:15,910 --> 00:29:17,440
og deretter gjøre som 3 flere ganger.

492
00:29:17,440 --> 00:29:19,920
Og så med 6 klikk og kanskje noen rulling

493
00:29:19,920 --> 00:29:24,000
bruker faktisk kan gi noen form for dato og / eller tidsrom i denne forstand.

494
00:29:24,000 --> 00:29:27,920
>> Så definitivt suboptimal og likevel så langt vi har sett noen uttrykksfulle evner

495
00:29:27,920 --> 00:29:30,330
i noen av språkene har vi sett på å gjøre noe mer sexy

496
00:29:30,330 --> 00:29:32,620
som denne skyvekontrollen for starttidspunkt og sluttidspunkt.

497
00:29:32,620 --> 00:29:36,290
Men hvis du tenker tilbake til uke 0 når vi snakket om Scratch,

498
00:29:36,290 --> 00:29:39,080
der også det var ikke widgets som bare gjorde visse ting.

499
00:29:39,080 --> 00:29:42,700
Du egentlig bare hadde disse grunnleggende som loops og betingelser og lignende.

500
00:29:42,700 --> 00:29:46,910
Så slags bare tenker veldig abstrakt nå, uavhengig av opplysninger om HTML,

501
00:29:46,910 --> 00:29:51,260
hva som egentlig skjer med noe som dette start og sluttid glidebryteren?

502
00:29:51,260 --> 00:29:54,960
Når jeg flytter min mus og jeg klikker på den lille gulrot symbolet på venstre

503
00:29:54,960 --> 00:29:59,220
og begynner å dra programmatisk, hva er det du ønsker å være i stand til å gjennomføre

504
00:29:59,220 --> 00:30:01,000
å gjøre det skje?

505
00:30:01,000 --> 00:30:04,920
Hvilke spørsmål, hva boolske uttrykk du ønsker å være i stand til å spørre?

506
00:30:04,920 --> 00:30:06,930
Hva som egentlig skjer? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Student] Hvor er posisjonen til markøren? >> Bra. Hvor er plasseringen av markøren?

508
00:30:10,080 --> 00:30:11,970
Dette var noe vi trengte å uttrykke tilbake i Scratch,

509
00:30:11,970 --> 00:30:14,690
enten det var basert på plasseringen eller jevn farge eller lignende.

510
00:30:14,690 --> 00:30:18,410
Du husker kanskje aldri så kort på mandag var det alle disse tingene som kalles hendelser

511
00:30:18,410 --> 00:30:22,370
i verden av Internett, og så det er ting som onclick og onkeypress

512
00:30:22,370 --> 00:30:25,960
og onkeyup og onmouseover og onmouseout.

513
00:30:25,960 --> 00:30:29,130
Så innse at selv disse tingene vi har tatt for gitt på nettet

514
00:30:29,130 --> 00:30:32,190
med nettsteder som Facebook og Gmail, selv om du har ingen anelse

515
00:30:32,190 --> 00:30:34,890
hvordan ville du eventuelt iverksette at fordi det er ingenting selv som det i foredraget

516
00:30:34,890 --> 00:30:38,570
eller oppgavesettet 7, innser at med disse nøyaktig samme fundamentale forhold,

517
00:30:38,570 --> 00:30:41,090
med HTTP og parametere og GET og POST,

518
00:30:41,090 --> 00:30:44,010
med de grunnleggende HTML innganger som vi har sett på så langt

519
00:30:44,010 --> 00:30:47,690
og i et øyeblikk med de programmatiske mekanismer som Tommys om å innføre

520
00:30:47,690 --> 00:30:51,300
kan du begynne å uttrykke deg akkurat som du gjorde i uke 0

521
00:30:51,300 --> 00:30:53,800
av svært intuitivt å dra og slippe.

522
00:30:53,800 --> 00:30:58,950
>> Så med det sagt, Tommy MacWilliam og noen nye brikkene for oss for Web.

523
00:30:58,950 --> 00:31:03,450
OK. Mitt navn er Tommy og jeg skal snakke om JavaScript.

524
00:31:03,450 --> 00:31:07,150
Bare en ansvarsfraskrivelse: Jeg er av den oppfatning at JavaScript er den beste programmeringsspråket

525
00:31:07,150 --> 00:31:09,010
i hele hele verden.

526
00:31:09,010 --> 00:31:11,940
Det er mange folk som er uenige med meg, men det er bare fantastisk.

527
00:31:11,940 --> 00:31:16,330
Når du går tilbake til C, hvis du må skrive C for en annen klasse eller noen andre språk,

528
00:31:16,330 --> 00:31:19,780
det er bare veldig frustrerende i alle lavnivå detaljer du må få kjørt seg fast i.

529
00:31:19,780 --> 00:31:23,050
Så hvis du noen gang følelsen trist om hvor irriterende C er å skrive,

530
00:31:23,050 --> 00:31:25,130
bare gå tilbake, skrive noen JavaScript. Det er nirvana.

531
00:31:25,130 --> 00:31:27,980
Du vil føle deg mye bedre om dårlig dag.

532
00:31:27,980 --> 00:31:31,900
Mye av den magiske JavaScript kommer fra dens evne til å manipulere ting

533
00:31:31,900 --> 00:31:33,730
som allerede er på siden.

534
00:31:33,730 --> 00:31:38,520
Når vi skrev våre PHP-skript, ble de henrettet på serveren,

535
00:31:38,520 --> 00:31:42,270
og til slutt at PHP script sannsynligvis sende noen HTML.

536
00:31:42,270 --> 00:31:45,860
Som HTML ble sendt til klienten, og så det var det.

537
00:31:45,860 --> 00:31:50,180
Hvis PHP ønsket å legge til en knapp på en side, for eksempel, kan det egentlig ikke gjør det.

538
00:31:50,180 --> 00:31:54,350
Det ville ha å gjengi en helt ny HTML-fil og sende den til nettleseren.

539
00:31:54,350 --> 00:31:57,840
Med JavaScript vet vi at vi kan oppdatere ting mens de er allerede på siden,

540
00:31:57,840 --> 00:32:00,840
og på grunn av dette kan vi gi mye mer umiddelbar tilbakemelding,

541
00:32:00,840 --> 00:32:06,150
som virkelig vil forbedre brukeropplevelsen på våre nettsider.

542
00:32:06,150 --> 00:32:09,330
Bare en rask oppsummering av JavaScript-velgere.

543
00:32:09,330 --> 00:32:11,590
Vi vet at når vi laster ned en HTML-side,

544
00:32:11,590 --> 00:32:13,890
som kommer til å være representert i DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM er husk bare dette store treet der elementer er relatert i denne store hierarkiet.

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

547
00:32:21,810 --> 00:32:26,280
en av de første tingene vi trengte å vite hvordan å gjøre var søke i databasen.

548
00:32:26,280 --> 00:32:29,060
Vi har denne store brukere tabellen, og noen ganger vi vil bare si,

549
00:32:29,060 --> 00:32:33,260
"Jeg vil bare ha noen av disse brukerne som stemmer overens noen tilstand."

550
00:32:33,260 --> 00:32:36,020
Tilsvarende når vi har DOM vi trenger noen måte å utføre en spørring.

551
00:32:36,020 --> 00:32:39,490
Vi trenger noen måte å si: "Jeg ønsker alle knappene som ser ut som dette

552
00:32:39,490 --> 00:32:41,860
"Eller alle bildene på siden."

553
00:32:41,860 --> 00:32:44,330
Og desse tillate oss å gjøre det.

554
00:32:44,330 --> 00:32:45,690
Så bare en rask oppsummering.

555
00:32:45,690 --> 00:32:50,770
Dette første her, denne # sende, hva er det kommer til å velge? Husker noen?

556
00:32:50,770 --> 00:32:54,880
[Uhørlig student respons] >> Ja, akkurat.

557
00:32:54,880 --> 00:32:59,510
Dette kommer til å velge et element på siden som har en ID på send.

558
00:32:59,510 --> 00:33:03,470
Og slik at hash tag sier denne velgeren kommer til å jobbe med IDer.

559
00:33:03,470 --> 00:33:07,630
Hva med den andre, dette. Sentrert, hva vil det velge?

560
00:33:11,360 --> 00:33:15,180
Ja. >> [Student] Class. >> Nettopp. Dette skal nå velge etter klasse.

561
00:33:15,180 --> 00:33:18,840
Forskjellen mellom ID og klasse her er generelt ID skal være unike

562
00:33:18,840 --> 00:33:20,820
innenfor hva plass du søker over.

563
00:33:20,820 --> 00:33:23,080
Så hvis du skulle søke over en hel nettside,

564
00:33:23,080 --> 00:33:27,740
du virkelig bør bare ha en del med at visse ID, så i dette tilfellet av send.

565
00:33:27,740 --> 00:33:31,330
Med klasser, på den annen side, kan vi ha mer enn en del på samme side

566
00:33:31,330 --> 00:33:33,130
med den samme klasse.

567
00:33:33,130 --> 00:33:36,580
Dette kan være nyttig for å si jeg ønsker å velge alt som er sentrert på siden

568
00:33:36,580 --> 00:33:38,450
snarere enn bare en ting.

569
00:33:38,450 --> 00:33:40,310
>> Og til slutt, er dette siste her litt mer komplisert,

570
00:33:40,310 --> 00:33:43,890
men hva dette kommer til å velge fra DOM?

571
00:33:46,650 --> 00:33:48,810
[Uhørlig student respons] >> Hva er det?

572
00:33:48,810 --> 00:33:53,250
[Student] Alt som er en kode. >> Vi har 2 deler her.

573
00:33:53,250 --> 00:33:58,070
Den andre delen skal si jeg ønsker å velge disse kodene med en tag av input,

574
00:33:58,070 --> 00:34:00,730
så noen element som er en inngang tag.

575
00:34:00,730 --> 00:34:03,080
Men jeg ønsker ikke å bare velge alle inngangene

576
00:34:03,080 --> 00:34:05,170
fordi noe som en send-knappen kan være en inngang

577
00:34:05,170 --> 00:34:08,409
og noe som en tekstboks kan være en inngang.

578
00:34:08,409 --> 00:34:11,909
Så med disse hakeparenteser jeg sier bare jeg vil velge de elementene

579
00:34:11,909 --> 00:34:14,110
som er av typen tekst.

580
00:34:14,110 --> 00:34:17,400
Et sted i min HTML-kode har jeg et attributt som heter type,

581
00:34:17,400 --> 00:34:19,750
og verdien av attributtet må være tekst.

582
00:34:19,750 --> 00:34:21,340
Så hva med denne første delen her?

583
00:34:21,340 --> 00:34:25,489
Det første ordet i denne velgeren er formen da jeg har en plass og deretter denne inngangen del.

584
00:34:25,489 --> 00:34:29,620
Hva gjør det, setter form foran den?

585
00:34:33,409 --> 00:34:35,860
Dette kommer til å utgangspunktet begrense vår søket.

586
00:34:35,860 --> 00:34:38,510
Det kan være slik at vi har noen innspill på siden

587
00:34:38,510 --> 00:34:41,080
som ikke er etterkommere av et skjema.

588
00:34:41,080 --> 00:34:46,150
Hva dette vil gjøre er dette vil si at jeg bare vil at innspill koder som har et sted over dem

589
00:34:46,150 --> 00:34:49,030
noen overordnede element av et skjema.

590
00:34:49,030 --> 00:34:52,100
Og så på denne måten kan vi gjøre disse mer hierarkiske spørringer

591
00:34:52,100 --> 00:34:55,000
så vi ikke bare har å velge alt matchende et gitt valg.

592
00:34:55,000 --> 00:35:00,760
Vi kan slags begrense omfanget av den spørringen til noe annet.

593
00:35:00,760 --> 00:35:04,000
Så nå som vi vet hvordan du velger elementer på siden,

594
00:35:04,000 --> 00:35:06,780
la oss snakke litt om AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX er en fortsatt veldig trendy akronym som står for Asynchronous JavaScript and XML.

596
00:35:12,270 --> 00:35:15,640
Det bare så skjer at XML er bare en måte å representere data.

597
00:35:15,640 --> 00:35:20,920
>> Den slags tapt popularitet nylig, så X i AJAX ikke brukes hele tiden.

598
00:35:20,920 --> 00:35:26,220
I utgangspunktet er det som gjør AJAX tillater oss å gjøre HTTP-forespørsler

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

600
00:35:28,620 --> 00:35:32,310
Når vi er i vår nettleser og vi navigerer rundt sider og klikker vi en link,

601
00:35:32,310 --> 00:35:37,790
hva vår nettleser kommer til å gjøre er å gjøre en HTTP-forespørsel til det koblingen vi klikker.

602
00:35:37,790 --> 00:35:41,670
Men det er ikke alltid ideelt fordi hvis det er tilfelle, så som David sa,

603
00:35:41,670 --> 00:35:45,220
vi har alltid å gjøre brukerne klikker en Send-knappen eller klikk på en kobling

604
00:35:45,220 --> 00:35:50,380
for å gjøre noe skje som kommer til å innebære en HTTP-forespørsel.

605
00:35:50,380 --> 00:35:54,160
Så med AJAX kan vi gjøre disse forespørslene på vegne av JavaScript.

606
00:35:54,160 --> 00:35:57,020
Det betyr når brukeren samhandler med siden eller noe skjer,

607
00:35:57,020 --> 00:36:01,780
Vi kan faktisk gjøre en programmatisk forespørsel til en annen PHP-fil på våre nettsider

608
00:36:01,780 --> 00:36:06,280
eller noe annet, og hente data som filen spytter ut.

609
00:36:06,280 --> 00:36:09,860
La oss ta en titt på et eksempel på AJAX.

610
00:36:09,860 --> 00:36:16,140
Dette er vår CS50 Finance side som forhåpentligvis noen av oss er kjent.

611
00:36:16,140 --> 00:36:21,790
Hvis vi ser på HTML på denne siden, ser vi her at jeg har lagt et par ting,

612
00:36:21,790 --> 00:36:23,820
en som jeg har gitt denne formen en ID.

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

614
00:36:26,480 --> 00:36:31,910
Jeg har gjort dette bare fordi det kommer til å gjøre dette litt enklere å velge fra DOM

615
00:36:31,910 --> 00:36:35,090
siden jeg kan bare gjøre en veldig enkel spørring.

616
00:36:35,090 --> 00:36:38,960
Hva jeg vil gjøre her er at jeg ønsker å fikse noen problemer med CS50 Finance.

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

618
00:36:41,550 --> 00:36:45,700
hver gang jeg ønsker å få et tilbud, må jeg klikke på denne Get Quote knappen,

619
00:36:45,700 --> 00:36:48,960
og at Get Quote knappen og deretter tar meg til en annen hele siden.

620
00:36:48,960 --> 00:36:52,400
Og hvis jeg ønsker en annen sitat, må jeg treffe på Tilbake-knappen og deretter jeg skriver det inn,

621
00:36:52,400 --> 00:36:54,480
Jeg får et tilbud, og jeg traff på Tilbake-knappen.

622
00:36:54,480 --> 00:36:56,840
Dette er egentlig ikke den beste brukeropplevelsen.

623
00:36:56,840 --> 00:37:01,570
Hvem ville virkelig bruke området hvis det er det treg å få aksjekurser?

624
00:37:01,570 --> 00:37:05,630
Så det vi ønsker å gjøre med AJAX er å fjerne det skritt å gå til en egen side

625
00:37:05,630 --> 00:37:08,410
for å se resultatet.

626
00:37:08,410 --> 00:37:11,240
>> Hva vi egentlig bare ber om er at veldig liten pris,

627
00:37:11,240 --> 00:37:14,240
og det er bare en veldig liten mengde data.

628
00:37:14,240 --> 00:37:17,400
Så det er ingen grunn for meg å gå en annen hele HTML-side,

629
00:37:17,400 --> 00:37:20,670
laste ned en helt ny gruppe med HTML, kanskje laste ned noen flere bilder,

630
00:37:20,670 --> 00:37:24,410
noen andre CSS-filer bare for meg å svare på det veldig enkelt spørsmål

631
00:37:24,410 --> 00:37:27,810
hvor mye koster denne bestanden kostnader.

632
00:37:27,810 --> 00:37:31,000
Med AJAX kan vi gjøre dette mye enklere.

633
00:37:31,000 --> 00:37:36,400
Vi ser her nede at jeg kobler i en JavaScript-fil som heter quote.js.

634
00:37:36,400 --> 00:37:40,140
La oss faktisk åpne opp den filen. Ikke der.

635
00:37:42,610 --> 00:37:45,860
Alle mine JavaScript-filer kommer til å bli plassert i HTML

636
00:37:45,860 --> 00:37:47,630
slik at nettleseren kan få tilgang til den.

637
00:37:47,630 --> 00:37:50,330
Da har vi en egen katalog for JavaScript,

638
00:37:50,330 --> 00:37:54,340
og nå er her quote.js.

639
00:37:54,340 --> 00:38:00,930
På toppen av denne filen dette sier her at jeg ønsker å vente på at hele siden skal lastes

640
00:38:00,930 --> 00:38:04,830
før jeg prøver å gjøre noe. Hvorfor er det nødvendig?

641
00:38:04,830 --> 00:38:08,650
Det viser seg at det neste jeg skal gjøre her er starten på jakt etter et element

642
00:38:08,650 --> 00:38:10,810
som samsvarer noen valg.

643
00:38:10,810 --> 00:38:15,600
Hvis dette JavaScript er stadig gjennomført før dette elementet er lastet på siden,

644
00:38:15,600 --> 00:38:17,820
så alt jeg prøver å gjøre er ikke å gå på jobb

645
00:38:17,820 --> 00:38:20,580
fordi jeg kommer til å prøve å velge noe som ikke er der ennå.

646
00:38:20,580 --> 00:38:23,780
Så denne linjen opp toppen sier at jeg vil at du skal vente til alt er lastet

647
00:38:23,780 --> 00:38:28,030
så vi er garantert at noen elementer jeg leter etter er faktisk på siden.

648
00:38:29,730 --> 00:38:34,310
Dette dollartegn her betyr at jeg bruker biblioteket som heter jQuery.

649
00:38:34,310 --> 00:38:38,570
Dette jQuery biblioteket tillater oss å bruke desse som vi bare så på.

650
00:38:38,570 --> 00:38:44,010
Ved å si $ deretter passerer som et argument denne # form-sitat,

651
00:38:44,010 --> 00:38:47,910
Jeg er nå velge at formen at vi bare tok en titt på.

652
00:38:47,910 --> 00:38:52,290
Nå har jeg en representasjon av som dannes i minnet eller annen måte.

653
00:38:52,290 --> 00:38:56,760
>> På dette objektet nå, denne representasjonen av skjemaet,

654
00:38:56,760 --> 00:38:58,890
Jeg bruker nå en funksjon kalt på.

655
00:38:58,890 --> 00:39:02,710
Hva denne funksjonen gjør er det kommer til å feste en hendelseshåndterer.

656
00:39:02,710 --> 00:39:06,310
Dersom vi kommer til å høre etter er submit hendelsen.

657
00:39:06,310 --> 00:39:08,890
Så når brukeren klikker som send-knappen eller trykker Enter,

658
00:39:08,890 --> 00:39:11,730
denne hendelsen kommer til å skyte.

659
00:39:11,730 --> 00:39:16,390
Ved å hekte inn i dette, kan jeg nå overstyre standard virkemåte av skjemaet.

660
00:39:16,390 --> 00:39:19,770
Uten denne JavaScript, ville skjemaet underordne deg hva PHP-fil

661
00:39:19,770 --> 00:39:22,110
vi brukte i handlingen attributt.

662
00:39:22,110 --> 00:39:25,440
Men i stedet, er jeg nå sier, vente, vente, vente, jeg vil at du skal faktisk gjøre det.

663
00:39:25,440 --> 00:39:31,140
Jeg vil at dette skal skje før du går og prøver å sende til noen PHP-fil.

664
00:39:31,140 --> 00:39:32,870
Nå hva gjør jeg ønsker å gjøre?

665
00:39:32,870 --> 00:39:39,270
På dette punktet jeg ønsker å bruke AJAX eller annen måte å laste inn hva prisen på aksjen er.

666
00:39:39,270 --> 00:39:44,170
Det første jeg trenger å vite er hva lager brukeren ser opp.

667
00:39:44,170 --> 00:39:46,760
Å gjøre at jeg kommer til å bruke en annen velgeren.

668
00:39:46,760 --> 00:39:49,020
Dette er den tredje velgeren vi sett på før.

669
00:39:49,020 --> 00:39:54,460
Dette sier at jeg ønsker å starte dette skjemaet element med en ID form-sitat.

670
00:39:54,460 --> 00:39:58,440
Så et sted inne i den form det må være en inngang element

671
00:39:58,440 --> 00:40:01,270
som har et navn på symbolet.

672
00:40:01,270 --> 00:40:05,460
Hvis vi ser tilbake på HTML vår, så vi at vi hadde en inngang [name = symbol].

673
00:40:05,460 --> 00:40:12,380
Det betyr at dette kommer til å velge det tekstboksen at brukeren skriver inn.

674
00:40:12,380 --> 00:40:13,870
Det er fint. Vi har tekstboksen.

675
00:40:13,870 --> 00:40:17,360
Nå trenger vi bare å vite hva som er inni den.

676
00:40:17,360 --> 00:40:20,290
For å gjøre det vi kan kalle denne metoden her, dette. Val,

677
00:40:20,290 --> 00:40:23,240
og dette sier jeg vet hva tekstboksen du har.

678
00:40:23,240 --> 00:40:28,160
Jeg vil at du skal fortelle meg hva det er brukeren har skrevet inn i den tekstboksen.

679
00:40:28,160 --> 00:40:34,440
Nå har vi en streng kalt symbol som er lik uansett brukeren har skrevet inn

680
00:40:34,440 --> 00:40:39,820
Det er fint. Vi kan bruke denne strengen nå for å gjøre vår forespørsel.

681
00:40:39,820 --> 00:40:42,450
Dette er en ny funksjon her, denne $,

682
00:40:42,450 --> 00:40:44,900
bortsett vi ikke lenger kommer til å være å velge elementer,

683
00:40:44,900 --> 00:40:48,910
vi kommer til å kalle en annen funksjon som er gitt til oss av jQuery.

684
00:40:48,910 --> 00:40:54,810
Dette AJAX funksjonen er hva som faktisk kommer til å gjøre dette HTTP-forespørsel.

685
00:40:54,810 --> 00:40:57,000
Så vi har å fortelle det et par ting.

686
00:40:57,000 --> 00:41:01,410
Det første vi må fortelle denne funksjonen er der jeg vil at forespørselen om å gå.

687
00:41:01,410 --> 00:41:08,910
Et sted i prosjektet mitt har jeg denne filen på innsiden av HTML katalog kalt quote.php.

688
00:41:08,910 --> 00:41:15,150
Jeg får tilgang til denne filen, så vi, akkurat som dette, hvis jeg går til localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Jeg vil at min JavaScript for å gjøre en forespørsel til den aktuelle siden.

690
00:41:20,450 --> 00:41:22,920
Hva slags forespørsel nå?

691
00:41:22,920 --> 00:41:27,210
Vi så tidligere at formen har denne metoden = "post"-attributtet,

692
00:41:27,210 --> 00:41:29,270
og det betyr at det kommer til å gjøre en POST-forespørsel,

693
00:41:29,270 --> 00:41:32,630
så det kommer ikke til å sette noe i URL, snarere enn en GET-forespørsel,

694
00:41:32,630 --> 00:41:36,860
som ville bare bli oppsagt hvis vi bare tilgang til siden med nettleseren, for eksempel.

695
00:41:36,860 --> 00:41:41,260
Nå har vi sagt jeg ønsker å gjøre en HTTP POST-forespørsel

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

697
00:41:44,840 --> 00:41:51,490
Når vi sender skjemaet, husk vi kunne få tilgang input elementer inne i det skjemaet

698
00:41:51,490 --> 00:41:54,430
med at $ _POST variabel.

699
00:41:54,430 --> 00:41:58,710
Så langt i historien har vi ikke egentlig sendes sammen alle data ennå.

700
00:41:58,710 --> 00:42:00,640
Vi har nettopp sagt vi gjør en AJAX forespørsel

701
00:42:00,640 --> 00:42:03,200
og her er den type forespørsel vi gjør.

702
00:42:03,200 --> 00:42:07,090
Nå må vi faktisk sende noen data til siden.

703
00:42:07,090 --> 00:42:10,930
Å gjøre at vi kan bruke denne egenskapen kalles data.

704
00:42:10,930 --> 00:42:14,950
Verdien av denne egenskapen er faktisk en assosiativ array.

705
00:42:14,950 --> 00:42:19,390
Grunnen til dette er det tillater oss å sende mer enn bare en bit av data.

706
00:42:19,390 --> 00:42:24,750
Det er derfor vi har disse klammeparentes her nestet inne i disse andre klammeparentes.

707
00:42:24,750 --> 00:42:29,680
Tastene i disse assosiative matriser kommer til å være det samme

708
00:42:29,680 --> 00:42:32,630
som de navn attributter i vårt skjema elementer.

709
00:42:32,630 --> 00:42:35,740
Det betyr at hvis jeg sender langs en nøkkel symbol,

710
00:42:35,740 --> 00:42:41,870
det betyr at min PHP side får tilgang til disse dataene med $ _POST [symbol]

711
00:42:41,870 --> 00:42:44,640
akkurat som vi gjorde før når vi var å sende inn et skjema.

712
00:42:44,640 --> 00:42:47,090
Og nå de faktiske dataene vi ønsker å sende

713
00:42:47,090 --> 00:42:50,790
kommer til å være verdien innsiden av denne assosiativ array.

714
00:42:50,790 --> 00:42:54,070
>> Vi lagret denne teksten i en variabel kalt symbol,

715
00:42:54,070 --> 00:42:57,380
og så vi sender sammen nå en nøkkel symbol

716
00:42:57,380 --> 00:43:01,380
og en verdi av hva brukeren har skrevet inn

717
00:43:01,380 --> 00:43:06,270
Nå har vi gjort denne HTTP-forespørsel, vår PHP-fil har utført,

718
00:43:06,270 --> 00:43:11,480
og det kommer til å sende noen data tilbake nå til klienten som bare gjorde denne forespørselen.

719
00:43:11,480 --> 00:43:15,220
Nå må vi svare på hva serveren sa til oss.

720
00:43:15,220 --> 00:43:20,180
For å gjøre at vi har denne siste egenskapen her kalles suksess.

721
00:43:20,180 --> 00:43:24,240
Verdien av denne suksessen tasten er faktisk kommer til å være en funksjon,

722
00:43:24,240 --> 00:43:26,910
og dette er en av de virkelig kule tingene du kan gjøre med JavaScript.

723
00:43:26,910 --> 00:43:31,720
Ikke bare kan du ha ints eller matriser som en verdi innsiden av en assosiativ array,

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

725
00:43:34,170 --> 00:43:36,380
Så ved å si suksess, dette er min nøkkel.

726
00:43:36,380 --> 00:43:38,830
Et kolon sier her kommer verdien,

727
00:43:38,830 --> 00:43:41,810
og nå verdien av dette er faktisk en funksjon.

728
00:43:41,810 --> 00:43:44,460
Slik at vi ikke trenger å gi denne funksjonen et navn i seg selv.

729
00:43:44,460 --> 00:43:48,820
Vi kan bare si dette kommer til å bli noen funksjon. Det kommer til å ta en argument.

730
00:43:48,820 --> 00:43:51,190
Argumentet til denne funksjonen kommer til å være

731
00:43:51,190 --> 00:43:54,460
uansett serveren sendte oss tilbake fra forespørselen.

732
00:43:54,460 --> 00:43:57,750
Akkurat som når våre nettleseren gjør en forespørsel, sender serveren noe tilbake

733
00:43:57,750 --> 00:43:59,060
og nettleseren viser det,

734
00:43:59,060 --> 00:44:03,030
i sammenheng med AJAX vi bare gjort en forespørsel, sendte serveren noe tilbake,

735
00:44:03,030 --> 00:44:07,110
og nå har vi det representert som en streng.

736
00:44:07,110 --> 00:44:11,280
Med denne strengen ville jeg bare liker å vise det på siden.

737
00:44:11,280 --> 00:44:14,040
Å gjøre at jeg kommer til å ha en siste valg.

738
00:44:14,040 --> 00:44:17,570
Jeg ønsker å velge elementet med ID pris.

739
00:44:17,570 --> 00:44:20,710
Dette er bare en tom div som jeg har laget på siden,

740
00:44:20,710 --> 00:44:26,640
og jeg ønsker å bestemme innholdet i den div å være uansett serveren sendte oss tilbake.

741
00:44:26,640 --> 00:44:30,280
Jeg har faktisk endret quote.php litt.

742
00:44:30,280 --> 00:44:33,460
>> Snarere enn å ringe render og rendring noen side,

743
00:44:33,460 --> 00:44:38,100
quote.php nå er rett og slett kommer til å skrive ut verdien av aksjen som en streng.

744
00:44:38,100 --> 00:44:41,880
Så hvis du skulle faktisk besøker siden, ville du bare se at lille strengen

745
00:44:41,880 --> 00:44:45,030
av hva aksjekursen er.

746
00:44:45,030 --> 00:44:50,170
En siste ting vi trenger å gjøre her er å bare at denne funksjonen returnerer false.

747
00:44:50,170 --> 00:44:53,560
Hva dette sier er at hvis jeg er inne i en hendelseshåndterer

748
00:44:53,560 --> 00:44:57,300
og at hendelseshåndterer returnerer false stedet for å returnere sant,

749
00:44:57,300 --> 00:45:01,510
det betyr at jeg ikke vil den opprinnelige hendelsen til brann.

750
00:45:01,510 --> 00:45:05,270
I dette tilfellet, hvis vi ikke har noen JavaScript og vi leverte et skjema,

751
00:45:05,270 --> 00:45:08,280
vår nettleser kommer til å si, "Jeg kommer til å sende dataene sammen,"

752
00:45:08,280 --> 00:45:10,130
og de kommer til å sende deg til en annen side.

753
00:45:10,130 --> 00:45:14,360
Fordi vi bruker AJAX nå, det er ikke nødvendig å sende brukeren til en annen side.

754
00:45:14,360 --> 00:45:17,920
Vi skal bare vise resultatene dynamisk på den samme siden.

755
00:45:17,920 --> 00:45:21,460
Vi egentlig ikke vil ha dem til å gå hvor som helst, og jeg ønsker å bo på samme side.

756
00:45:21,460 --> 00:45:27,060
Så ved å returnere falsk, sørger vi for at skjemaet ikke gjøre det for oss.

757
00:45:27,060 --> 00:45:31,170
La oss ta en titt på hva dette faktisk ser ut.

758
00:45:31,170 --> 00:45:34,180
Vår sitat side ser det samme.

759
00:45:34,180 --> 00:45:37,240
La meg trekke opp inspektøren her nede, så vi kan se hva som skjer.

760
00:45:37,240 --> 00:45:40,270
Gjør det til en litt mindre stor.

761
00:45:40,270 --> 00:45:44,590
Husk at hvis vi åpner opp nettverket kategorien, er dette hvor vi kan se alle HTTP-forespørsler

762
00:45:44,590 --> 00:45:47,570
som skjer på siden.

763
00:45:47,570 --> 00:45:52,890
>> For et symbol la meg skrive AAPL og klikk på Hent Sitat.

764
00:45:52,890 --> 00:45:56,720
Nå er vi så at en del av Apple koster noen flere dollar

765
00:45:56,720 --> 00:46:00,410
bare dukket opp på siden, men URL endret ikke i det hele tatt.

766
00:46:00,410 --> 00:46:04,570
Faktisk, her er HTTP-forespørsel som vi nettopp laget.

767
00:46:04,570 --> 00:46:09,980
Vi har gjort en POST-forespørsel til quote.php. Det er fornuftig.

768
00:46:09,980 --> 00:46:12,800
Dette er hva serveren sendte oss tilbake.

769
00:46:12,800 --> 00:46:16,320
Det er ikke lenger dette gigantiske HTML-dokument med bilder og sånt,

770
00:46:16,320 --> 00:46:20,920
det er bare en tekstlinje, og da vi bare vises linjen med tekst.

771
00:46:20,920 --> 00:46:26,290
Hvis vi går tilbake til overskrifter og se hva vi faktisk har sendt innsiden av denne HTTP-forespørsel,

772
00:46:26,290 --> 00:46:33,950
Vi kan se her nede at vi sendte langs en nøkkel symbol og en verdi på AAPL,

773
00:46:33,950 --> 00:46:36,430
som er hva brukeren skrev inn

774
00:46:36,430 --> 00:46:39,230
Dette er hyggelig, men det er fortsatt litt irriterende.

775
00:46:39,230 --> 00:46:42,490
Jeg har fortsatt å klikke på denne knappen for å få aksjekursen.

776
00:46:42,490 --> 00:46:45,880
Vi er travle mennesker, og vi har ikke tid til å klikke på knapper.

777
00:46:45,880 --> 00:46:49,910
Google innsett dette en liten stund siden, da de implementert Google Instant.

778
00:46:49,910 --> 00:46:53,590
Hva Google Instant gjør er som du skriver det begynner bare å vise resultater for deg

779
00:46:53,590 --> 00:46:56,520
slik at du ikke trenger å bekymre deg selv klikke Søk.

780
00:46:56,520 --> 00:46:58,730
Egentlig en morsom historie knyttet til det.

781
00:46:58,730 --> 00:47:01,100
Når Google Instant kom ut, folk var som "Jøss, dette er super fantastisk."

782
00:47:01,100 --> 00:47:02,540
"Dette er så kult."

783
00:47:02,540 --> 00:47:05,950
Og en student ned ved Stanford som var 19 på den tiden

784
00:47:05,950 --> 00:47:09,000
gjort dette området kalles YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Alle YouTube Instant gjør er å søke effektivt YouTube umiddelbart.

786
00:47:13,170 --> 00:47:17,020
Så heller enn å måtte gå til YouTube.com og traff Søk,

787
00:47:17,020 --> 00:47:21,650
når jeg begynner å skrive inn YouTube Instant noe sånt CS50,

788
00:47:21,650 --> 00:47:25,320
vi kunne se her at det er forsøk på å på en treg Internett-forbindelse

789
00:47:25,320 --> 00:47:28,500
befolke disse resultatene bor.

790
00:47:28,500 --> 00:47:35,590
Å gjøre at vi faktisk kan gjøre en veldig enkel endring i vår quote.js fil.

791
00:47:35,590 --> 00:47:40,900
Akkurat nå er vi knytter denne hendelsen når skjemaet er sendt.

792
00:47:40,900 --> 00:47:43,760
Vi vet egentlig ikke ønsker å gjøre brukeren sende dette skjemaet lenger,

793
00:47:43,760 --> 00:47:48,570
så la oss i stedet fyre denne hendelsen hver gang brukeren trykker på en knapp.

794
00:47:48,570 --> 00:47:53,200
For å gjøre det la oss først endre hendelsen fra sender til keyup.

795
00:47:53,200 --> 00:47:55,740
Det betyr at heller enn å vente på skjemaet for å sende inn,

796
00:47:55,740 --> 00:47:58,490
hver gang du trykker på tasten, er noe kommer til å skje.

797
00:47:58,490 --> 00:48:02,030
Det ikke lenger gir mening å feste denne keyup hendelsen til hele skjemaet.

798
00:48:02,030 --> 00:48:05,080
Vi egentlig bare bryr seg om at søkeboksen.

799
00:48:05,080 --> 00:48:09,320
>> Å velge det nå, kan vi endre dette til å være, heller enn form-sitat,

800
00:48:09,320 --> 00:48:14,220
form-sitat, og vi vil ha en inngang (type = text) eller vi kan si (navn = symbol) -

801
00:48:14,220 --> 00:48:16,420
hva vi ønsker.

802
00:48:16,420 --> 00:48:18,650
Nå er det en siste ting vi må gjøre.

803
00:48:18,650 --> 00:48:21,190
Husk her nede, når vi sa return false

804
00:48:21,190 --> 00:48:24,370
Vi sa at vi ikke ønsker at standard hendelsen til brann.

805
00:48:24,370 --> 00:48:26,390
Men det bare skjer, slik at hvis vi deaktiverer det nå,

806
00:48:26,390 --> 00:48:29,660
hva vi skriver i ikke kommer til å dukke opp i nettleseren lenger

807
00:48:29,660 --> 00:48:33,000
fordi det ville være standard virkemåte for å skrive inn en tekstboks.

808
00:48:33,000 --> 00:48:38,660
Vi ikke lenger ønsker å overstyre det, så la oss ødelegge denne return false.

809
00:48:38,660 --> 00:48:44,800
Hvis vi lagre det og oppdater siden, nå når jeg begynner å skrive AAPL

810
00:48:44,800 --> 00:48:50,160
vil du se at aksjekursen nederst her fullfører automatisk.

811
00:48:50,160 --> 00:48:53,150
Så her er CS50 Finance Instant.

812
00:48:53,150 --> 00:48:55,860
Faktisk en morsom historie om YouTube Instant

813
00:48:55,860 --> 00:48:59,420
er at studenten bare slags skrev det som en 1-natt-prosjektet,

814
00:48:59,420 --> 00:49:03,800
og neste dag ble han tilbudt en jobb ved YouTube konsernsjef.

815
00:49:03,800 --> 00:49:10,610
Så så enkelt som det, du CS50 studenter, kan den endelige prosjekter får du en jobb på YouTube.

816
00:49:10,610 --> 00:49:14,720
Noe sånt er en veldig kul idé for et avsluttende prosjekt, ikke sant?

817
00:49:14,720 --> 00:49:18,170
Vi hadde noen eksisterende funksjonalitet som vi ønsket å integrere med.

818
00:49:18,170 --> 00:49:20,330
Vi forbedre brukeropplevelsen litt,

819
00:49:20,330 --> 00:49:24,340
og plutselig søker noe på YouTube Instant kan være mye enklere

820
00:49:24,340 --> 00:49:27,290
enn å lete etter den på vanlig YouTube.

821
00:49:27,290 --> 00:49:30,790
Så det er AJAX i et nøtteskall.

822
00:49:30,790 --> 00:49:34,860
>> I eksemplene som Joseph ble vist, så vi en masse autocompletes,

823
00:49:34,860 --> 00:49:39,250
og disse autocompletes er virkelig, virkelig hendig fordi vi ikke trenger å huske -

824
00:49:39,250 --> 00:49:41,770
For eksempel, hvis du ikke husker aksjekursen for Apple

825
00:49:41,770 --> 00:49:45,110
og vi bare vet at det er aa noe, heller enn å bare si til meg,

826
00:49:45,110 --> 00:49:48,740
"En del av denne tingen koster så mye penger,"

827
00:49:48,740 --> 00:49:52,540
Jeg vil slags gjerne vite hva aksjer starter med aa.

828
00:49:52,540 --> 00:49:58,340
Vi kan gjøre som virkelig pent med Bootstrap bibliotek som allerede er inkludert

829
00:49:58,340 --> 00:50:01,380
innsiden av CS50 Finance.

830
00:50:01,380 --> 00:50:09,390
Hvis du kommer opp her til JavaScript-koden og bla ned til Typeahead,

831
00:50:09,390 --> 00:50:13,730
Dette er bare en fin plugin som noen allerede skrev for oss,

832
00:50:13,730 --> 00:50:16,980
og vi kan lett bruke sin funksjonalitet som dette.

833
00:50:16,980 --> 00:50:21,410
Jeg skrev i en A og her er en liste over noen stater som starter med A.

834
00:50:21,410 --> 00:50:25,360
La oss si at jeg tror dette er veldig kult, og det er på tide for meg å ta dette på siden min.

835
00:50:25,360 --> 00:50:28,300
Det viser seg at dette er veldig, veldig enkel.

836
00:50:28,300 --> 00:50:32,810
La oss hoppe over her til quote3.js.

837
00:50:34,890 --> 00:50:37,380
Filen min ser litt annerledes.

838
00:50:37,380 --> 00:50:39,700
Her nede alle mine AJAX ting er den samme.

839
00:50:39,700 --> 00:50:43,170
Jeg ønsker å laste aksjen data uten å måtte gå til en annen side.

840
00:50:43,170 --> 00:50:46,220
Men nå vil jeg bruke denne plugin.

841
00:50:46,220 --> 00:50:51,020
Den Bootstrap dokumentasjon har gode eksempler på hvordan akkurat jeg kan gjøre det.

842
00:50:51,020 --> 00:50:54,350
Jeg ønsker å si: "Her er innspill som jeg ønsker å Autofullfør,"

843
00:50:54,350 --> 00:50:56,640
og jeg kommer til å kalle denne funksjonen kalles typeahead,

844
00:50:56,640 --> 00:50:59,730
og det kommer til å håndtere alle de Typeahead ting for oss.

845
00:50:59,730 --> 00:51:02,090
Den vil sette listen, vil den gjøre alle våre filtrering.

846
00:51:02,090 --> 00:51:06,680
Det eneste den trenger å vite er hvilke data vi autocompleting på.

847
00:51:06,680 --> 00:51:10,480
Så jeg fant ut denne tasten bare ved å lese dokumentasjonen og ser på eksemplene.

848
00:51:10,480 --> 00:51:14,150
Hvis jeg gir den en nøkkel kilde, verdien av denne nøkkelen

849
00:51:14,150 --> 00:51:17,770
er bare noen utvalg av ting jeg ønsker å Autofullfør.

850
00:51:17,770 --> 00:51:20,180
Denne variabelen kom fra dette andre filen.

851
00:51:20,180 --> 00:51:23,400
Jeg åpner opp symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Dette symbols.js er nettopp dette virkelig, virkelig stor array som inneholder strenger

853
00:51:27,980 --> 00:51:32,080
av alle disse aksjesymboler fra NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Hvis jeg ønsker å gå tilbake til HTML, så jharvard, vhosts, globalhost, html, maler,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Siden det som nå kalles quote3.js, la meg endre JavaScript-filen jeg er inkludert her.

857
00:51:50,910 --> 00:51:55,110
Nå har jeg quote3.js, så jeg kommer til å laste i det separat JavaScript-fil,

858
00:51:55,110 --> 00:51:57,910
den som har det Bootstrap autofullfør.

859
00:51:57,910 --> 00:52:04,430
Nå når jeg hopper tilbake til nettleseren, oppdater siden, og jeg begynner å skrive aa,

860
00:52:04,430 --> 00:52:06,880
Det er min autofullfør. Og det var virkelig så enkelt som det.

861
00:52:06,880 --> 00:52:11,400
Jeg hadde en linje med kode som bare sa: "Her er de tingene jeg ønsker å Autofullfør,"

862
00:52:11,400 --> 00:52:16,590
og plutselig har jeg dette virkelig, virkelig hyggelig funksjonalitet med ikke en hel masse arbeid i det hele tatt.

863
00:52:16,590 --> 00:52:19,810
Som du utvikler nettsteder og særlig fronten side av ting,

864
00:52:19,810 --> 00:52:21,840
du kommer til å finne dette er tilfelle mye.

865
00:52:21,840 --> 00:52:25,700
Det er mye, mye, mye kult gratis biblioteker der ute

866
00:52:25,700 --> 00:52:30,190
som gjør det super enkelt å gjøre ting som dette.

867
00:52:30,190 --> 00:52:37,230
Kan noen tenke på noen ulemper for bare autocompleting på denne stor liste over symboler?

868
00:52:37,230 --> 00:52:41,580
Hva kan være noe som ikke er det beste med denne tilnærmingen?

869
00:52:42,790 --> 00:52:45,960
Ja. >> [Student] Time, hvis du har en masse [hørbar]

870
00:52:45,960 --> 00:52:50,420
Ja. Akkurat nå er vi laster ned denne enorme JavaScript-fil, og det er mye av symboler.

871
00:52:50,420 --> 00:52:54,360
Og så hvis vi har massevis av ting, dette kunne slags øke ventetiden for ikke bare å søke

872
00:52:54,360 --> 00:52:56,600
men også laste ned selve filen.

873
00:52:56,600 --> 00:52:58,670
Flott. Noe annet?

874
00:53:01,950 --> 00:53:05,280
Akkurat nå er det ingen reell følelse av relevans.

875
00:53:05,280 --> 00:53:08,190
Hvis jeg skriver i en A, selskapene som dukker opp her

876
00:53:08,190 --> 00:53:11,220
kanskje ikke de mest populære selskapene som starter med A.

877
00:53:11,220 --> 00:53:17,130
>> Før jeg kommer til Apple, kan det ta litt flere tegn å finne det jeg leter etter.

878
00:53:17,130 --> 00:53:20,420
Dette autofullfør har ikke denne følelsen av relevans.

879
00:53:20,420 --> 00:53:24,400
Det er bare kommer til å si, "Alt som matcher Jeg kommer til å vise."

880
00:53:24,400 --> 00:53:30,510
I stedet for det, ville jeg gjerne noe integrere noen relevans i mine søk.

881
00:53:30,510 --> 00:53:36,440
Hvis jeg går over her til Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Hvis jeg prøver å skrive inn et symbol på Yahoo! Finance side

883
00:53:42,100 --> 00:53:52,310
og jeg begynner å skrive goog, har jeg denne fine liste over ting.

884
00:53:52,310 --> 00:53:57,100
Klart, det ser ut som Yahoo! Finance gjør noe mer smart her.

885
00:53:57,100 --> 00:53:59,790
De har noen relevans og de har også tilleggsinformasjon

886
00:53:59,790 --> 00:54:01,430
som navnet på lager.

887
00:54:01,430 --> 00:54:05,850
Det er noe som jeg ikke kan virkelig få med bare min lager liste over symboler.

888
00:54:05,850 --> 00:54:09,520
Jeg vil ha denne og så skal jeg ta den.

889
00:54:09,520 --> 00:54:11,790
For å gjøre det la oss gjøre et par ting.

890
00:54:11,790 --> 00:54:15,580
La oss først åpne opp inspektøren på denne siden

891
00:54:15,580 --> 00:54:18,100
fordi vi så at denne siden ikke er omlasting i det hele tatt,

892
00:54:18,100 --> 00:54:21,960
så det er nok å bruke AJAX eller annen måte å være lasting sine data.

893
00:54:21,960 --> 00:54:23,920
Vi kan finne ut hvilke data det er lasting.

894
00:54:23,920 --> 00:54:28,390
Hvis jeg klikker på denne kategorien Nettverk, er disse kommer til å være alle forespørsler som begynner å bli sparket.

895
00:54:28,390 --> 00:54:34,020
Nå hvis jeg skriver i goo, kan vi se at jeg fikk en ny HTTP-forespørsel.

896
00:54:34,020 --> 00:54:37,490
Dette er sannsynligvis der at data kommer fra.

897
00:54:37,490 --> 00:54:41,990
Sikker nok, hvis jeg ser på denne nettadressen, som er litt merkelig navn,

898
00:54:41,990 --> 00:54:46,930
Vi kan se at dette er akkurat der Yahoo sender ut sine data fra.

899
00:54:46,930 --> 00:54:53,400
>> Jeg har opprettet en egen fil som heter suggest.php som er veldig lik i ånden til oppslaget funksjonen.

900
00:54:53,400 --> 00:54:57,730
Det er i utgangspunktet kommer til å gjøre en forespørsel til Yahoo URL, få tilbake noen data,

901
00:54:57,730 --> 00:54:59,750
og sende det tilbake til meg.

902
00:54:59,750 --> 00:55:02,570
Nå, i stedet for å bruke denne stor, stor liste over symboler,

903
00:55:02,570 --> 00:55:05,280
Jeg kan bruke Yahoo fine relevans ting,

904
00:55:05,280 --> 00:55:08,150
og jeg trenger ikke å laste ned det massive JavaScript-fil.

905
00:55:08,150 --> 00:55:12,040
Jeg bare kommer til å trekke ned faktisk relevante aksjesymboler.

906
00:55:12,040 --> 00:55:13,960
La oss hoppe inn i den.

907
00:55:13,960 --> 00:55:17,360
Så html, js. Vi er nå i quote4.

908
00:55:17,360 --> 00:55:22,120
Nå er vi ikke lenger bruker den store listen av JavaScript-filer.

909
00:55:22,120 --> 00:55:24,430
Men det er en liten slags design problem her.

910
00:55:24,430 --> 00:55:28,200
Vi har sagt at A i AJAX er asynkron.

911
00:55:28,200 --> 00:55:31,000
Hva det betyr er at når jeg gjør en AJAX forespørsel,

912
00:55:31,000 --> 00:55:36,490
så rett her på linje 8, dette er hvor min AJAX forespørsel er faktisk sparken.

913
00:55:36,490 --> 00:55:40,370
La oss si nå har jeg noen kode her nede som kommer til å gjøre noen ting

914
00:55:40,370 --> 00:55:43,930
liker varsle brukeren eller endre noe på siden.

915
00:55:43,930 --> 00:55:49,830
Hva kommer ikke til å skje er at nettleseren ikke kommer til å vente på denne forespørselen for å fortsette

916
00:55:49,830 --> 00:55:53,480
før du kommer ned og treffer denne linjen.

917
00:55:53,480 --> 00:55:55,900
Det er asynkron del.

918
00:55:55,900 --> 00:55:58,400
Det kommer til å gjøre denne forespørselen og si: "Når du er ferdig,

919
00:55:58,400 --> 00:56:03,080
"Komme tilbake og kalle det funksjon som jeg ba deg ringe innsiden av suksess."

920
00:56:03,080 --> 00:56:07,300
Det betyr at vi kan ikke bare laste ned alle aksjene forhånd.

921
00:56:07,300 --> 00:56:10,300
Vi trenger å gjøre forespørselen og vente på at noe skal komme tilbake.

922
00:56:10,300 --> 00:56:13,330
Det betyr at før, kunne vi bare fortelle Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Her er listen over ting jeg vil du skal autofullfør på."

924
00:56:15,580 --> 00:56:18,950
Vi kan ikke lenger gjøre det lenger fordi vi ikke vet

925
00:56:18,950 --> 00:56:21,780
hva vi ønsker å faktisk Autofullfør.

926
00:56:21,780 --> 00:56:25,190
Heldigvis, tenkte Bootstrap av dette fordi de er smarte gutta der borte,

927
00:56:25,190 --> 00:56:30,160
og de faktisk ga oss en annen måte å laste denne Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Før, var verdien av denne kilden egenskapen bare denne store utvalg av ting å Autofullfør.

929
00:56:35,630 --> 00:56:39,580
>> Nå kilden eiendommen er faktisk en funksjon,

930
00:56:39,580 --> 00:56:44,580
og hensikten med denne funksjonen er å finne ut hva ting til Autofullfør er.

931
00:56:44,580 --> 00:56:48,730
Måten det kommer til å finne det ut er det kommer til å spørre Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
hva de beste tingene til autofullføring er.

933
00:56:51,750 --> 00:56:54,500
Å gjøre at jeg kommer til å gjøre en veldig lignende AJAX forespørsel.

934
00:56:54,500 --> 00:56:59,010
Jeg kommer til å be om denne siden på suggest.php.

935
00:56:59,010 --> 00:57:01,360
Jeg ønsker å sende langs symbolene fremdeles.

936
00:57:01,360 --> 00:57:05,570
Og nå er min suksess, fortalte Bootstrap dokumentasjon meg

937
00:57:05,570 --> 00:57:09,130
at for å fylle den listen over ting,

938
00:57:09,130 --> 00:57:14,370
alt jeg trenger å gjøre er å passere i denne matrisen nå til tilbakekallsfunksjon.

939
00:57:14,370 --> 00:57:15,660
Men vent litt.

940
00:57:15,660 --> 00:57:20,240
Hvis dette er ment å være en matrise og AJAX sender meg tilbake tekst,

941
00:57:20,240 --> 00:57:22,720
hvordan er det mulig?

942
00:57:22,720 --> 00:57:27,910
Dette introduserer en ny måte å utveksle data kalles JSON.

943
00:57:27,910 --> 00:57:33,000
I dette tilfellet ikke vi bare sende tilbake en enkel tekststreng.

944
00:57:33,000 --> 00:57:37,670
Nå er vi håndtere dette mer kompleks liste over aksjesymboler.

945
00:57:37,670 --> 00:57:41,730
Disse aksjesymboler kan også inkludere ting som selskapets navn eller gjeldende priser.

946
00:57:41,730 --> 00:57:47,550
Bare ved hjelp av en stor lang streng som ikke formatert på noen forutsigbar måte

947
00:57:47,550 --> 00:57:51,970
ikke kommer til å være den beste måten å få disse dataene fra Yahoo server til meg

948
00:57:51,970 --> 00:57:54,540
på en måte som jeg lett kan forstå.

949
00:57:54,540 --> 00:58:01,280
JSON er en teknologi som utnytter hvordan vi skaper assosiative arrays i JavaScript.

950
00:58:01,280 --> 00:58:04,510
Dette ser mye ut som en JavaScript assosiativ array,

951
00:58:04,510 --> 00:58:06,600
og faktisk, er det fordi det er.

952
00:58:06,600 --> 00:58:09,710
JSON står for JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Dette er i utgangspunktet en avtalt format for overføring av data frem og tilbake.

954
00:58:15,020 --> 00:58:18,280
Her denne JSON objekt eller denne JSON assosiativ array

955
00:58:18,280 --> 00:58:21,010
sender meg noen data om et kurs.

956
00:58:21,010 --> 00:58:25,110
>> Nøklene til denne matrisen er ting som kurs som har en verdi på CS50,

957
00:58:25,110 --> 00:58:29,140
og ned her vi kan se at jeg kan ha en verdi som er en matrise.

958
00:58:29,140 --> 00:58:32,730
Jeg trenger ikke å gjøre ting som parse ut strenger og se etter komma

959
00:58:32,730 --> 00:58:35,330
og gjøre gale ting som det.

960
00:58:35,330 --> 00:58:38,820
Fordi dette er deklarert i denne JSON-format,

961
00:58:38,820 --> 00:58:43,510
JavaScript og jQuery allerede har funksjoner for å konvertere en streng

962
00:58:43,510 --> 00:58:48,140
som ser slik ut JSON i en faktisk JavaScript assosiativ array

963
00:58:48,140 --> 00:58:50,440
at vi kan arbeide med.

964
00:58:50,440 --> 00:58:56,660
Gjør som er så enkelt som å si at ingen lenger er denne filen, suggest.php,

965
00:58:56,660 --> 00:58:59,040
sende meg tilbake bare en tekststreng,

966
00:58:59,040 --> 00:59:01,950
men jeg vet det kommer til å være å sende meg tilbake JSON.

967
00:59:01,950 --> 00:59:06,760
Det betyr at det JSON kan konverteres til en JavaScript assosiativ array.

968
00:59:06,760 --> 00:59:10,830
Og så jQuery, vil jeg gjerne at du skal gjøre det for meg.

969
00:59:10,830 --> 00:59:13,990
Det betyr at denne svarparameteren her,

970
00:59:13,990 --> 00:59:16,070
Dette er ikke lenger bare en streng.

971
00:59:16,070 --> 00:59:19,860
Fordi vi har fortalt jQuery som kommer her noen JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery kommer til å være smart nok til å si, "Du ville JSON?"

973
00:59:22,950 --> 00:59:26,890
"Jeg kommer til å konvertere til en assosiativ array for deg."

974
00:59:26,890 --> 00:59:32,100
La oss faktisk ta en titt på kategorien Nettverk når vi har quote4.js.

975
00:59:32,100 --> 00:59:35,400
Vi kommer til å endre dette og oppdater siden.

976
00:59:37,150 --> 00:59:41,250
Nå skal jeg skrive i a-en på nytt.

977
00:59:41,250 --> 00:59:45,600
Jeg har gjort et par forespørsler til suggest.php, men nå dette svaret,

978
00:59:45,600 --> 00:59:48,670
snarere enn bare strengen, er det JSON.

979
00:59:48,670 --> 00:59:52,580
Så jeg har en åpen krøllete brace si: "Her kommer en assosiativ array."

980
00:59:52,580 --> 00:59:56,830
>> Den første og eneste nøkkelen av denne assosiativ array kalles symboler,

981
00:59:56,830 --> 01:00:00,240
og da er her en rekke av alle de relevante tabeller

982
01:00:00,240 --> 01:00:04,820
kommer nå fra Yahoo! Finance, ikke fra det gigantiske listen.

983
01:00:06,110 --> 01:00:10,630
Det er hvordan jeg kan rett og slett fylle denne autofullføring plugin

984
01:00:10,630 --> 01:00:14,280
med noen data som ikke kommer fra en lokal fil som allerede forutbestemt

985
01:00:14,280 --> 01:00:17,490
men fra noe annet.

986
01:00:17,490 --> 01:00:21,160
Det viser seg at vi faktisk kan dra nytte av en teknologi som kalles JSONP,

987
01:00:21,160 --> 01:00:27,420
eller JSON med polstring, som vil eliminere denne suggest.php mellommann.

988
01:00:27,420 --> 01:00:34,010
Men i stedet for å gjøre det, la oss i stedet ta en titt på hvordan jeg kan forbedre dette ytterligere.

989
01:00:34,010 --> 01:00:36,040
Jeg liker Bootstrap er Typeahead. Det er virkelig fint.

990
01:00:36,040 --> 01:00:39,570
Men vi får gode på JavaScript og vi ønsker å slags gjøre dette selv,

991
01:00:39,570 --> 01:00:43,870
kanskje ta en titt på hva denne plugin kan gjøre.

992
01:00:43,870 --> 01:00:46,500
La oss bruke ikke lenger så Typeahead ting,

993
01:00:46,500 --> 01:00:50,550
og la oss prøve å gjøre denne listen over foreslåtte aksjer selv.

994
01:00:50,550 --> 01:00:53,790
Her i quote6.php skal vi begynne på samme måte.

995
01:00:53,790 --> 01:00:58,050
Hver gang noen skriver noe, ønsker vi å gjøre en AJAX forespørsel.

996
01:00:58,050 --> 01:01:01,590
Dette ligner på vår opprinnelige CS50 Finance Instant.

997
01:01:01,590 --> 01:01:05,020
Snarere enn å lage en forespørsel til quote.php,

998
01:01:05,020 --> 01:01:08,530
Nå har vi gjort en forespørsel til den samme filen som før, dette suggest.php,

999
01:01:08,530 --> 01:01:12,460
som bare kommer til å trekke ut data fra Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Igjen, er vi fremdeles venter JSON, men nå siden Typeahead ikke gjør dette for oss,

1001
01:01:19,480 --> 01:01:24,850
Vi trenger også å sende langs verdien som er inne i den aktuelle tekstboksen.

1002
01:01:24,850 --> 01:01:28,120
Nå vet vi hva vi skal be Yahoo! Finance for,

1003
01:01:28,120 --> 01:01:34,160
og så nå er her den funksjonen som vi ønsker å gjennomføre når forespørselen er fullført.

1004
01:01:34,160 --> 01:01:36,520
Vi har ikke plugin for å gjøre listen for oss,

1005
01:01:36,520 --> 01:01:40,630
så her er hvor vi faktisk kommer til å bygge opp en liste med forslag.

1006
01:01:40,630 --> 01:01:44,850
For å gjøre det, mye som i PHP vi sammensatt disse store strenger av HTML

1007
01:01:44,850 --> 01:01:48,170
så vi skrevet dem, kan vi gjøre de samme ting i JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Først skal vi begynne denne strengen som kalles forslag,

1009
01:01:51,850 --> 01:01:54,590
og denne strengen er bare kommer til å inneholde noen HTML.

1010
01:01:54,590 --> 01:01:58,320
Vi vil at det skal være en liste over ting, så vi kommer til å starte med denne listen tag,

1011
01:01:58,320 --> 01:02:03,340
og nå skal vi iterere over alle symbolene som ble returnert tilbake til oss.

1012
01:02:03,340 --> 01:02:06,500
Husk, fordi vi har sagt datatype: 'json', dette er ikke en streng.

1013
01:02:06,500 --> 01:02:09,500
Dette er allerede en rekke for oss. Det er veldig kult.

1014
01:02:09,500 --> 01:02:13,790
Vi kan bare si: "Jeg vil at du skal legge et listeelement."

1015
01:02:13,790 --> 01:02:16,000
Vil vi sette det inni en en del i siden av det,

1016
01:02:16,000 --> 01:02:19,030
Vi skal gi det en klasse for forslag, så vi vet hva det er,

1017
01:02:19,030 --> 01:02:23,880
og nå er her selve symbolet på at vi kom tilbake fra Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Når vi har laget et element for hver av de symbolene vi har fått tilbake,

1019
01:02:27,230 --> 01:02:30,100
Vi ønsker bare å stenge av listen.

1020
01:02:30,100 --> 01:02:33,040
Så nå forslag representerer denne lille HTML fragment

1021
01:02:33,040 --> 01:02:37,860
som da satt på en side skal være på listen over ting vi leter etter.

1022
01:02:37,860 --> 01:02:41,070
Nå la oss faktisk sette det på siden.

1023
01:02:41,070 --> 01:02:46,390
Å gjøre at jeg har faktisk opprettet en annen tomt div og jeg har gitt det en ID med forslag.

1024
01:02:46,390 --> 01:02:52,520
Mye som vi setter innholdet i div som ville vise prisen på aksjen data,

1025
01:02:52,520 --> 01:02:58,600
vi nå bare ønsker å bestemme innholdet i denne div til hva denne strengen er

1026
01:02:58,600 --> 01:03:00,290
som inneholder disse symbolene.

1027
01:03:00,290 --> 01:03:07,650
Ved å bruke denne HTML metoden, er dette forslag variabel, denne strengen, en streng av HTML.

1028
01:03:07,650 --> 01:03:13,490
Jeg vil at du skal ta det HTML og sette den på innsiden av div kalt forslag.

1029
01:03:13,490 --> 01:03:15,680
Vi har nettopp lagt noe til DOM nå.

1030
01:03:15,680 --> 01:03:20,360
Vi har lagt til noen nye elementer til DOM at vi nå kan vise på siden.

1031
01:03:20,360 --> 01:03:22,540
La oss se hvordan dette ser ut.

1032
01:03:22,540 --> 01:03:29,110
Hvis vi legger i quote6 og nå kommer vi tilbake,

1033
01:03:29,110 --> 01:03:34,480
nå når jeg begynner å skrive AAPL, har vi ikke lenger at Bootstrap autofullføring,

1034
01:03:34,480 --> 01:03:38,470
men vi har nå denne listen som vi gjorde oss.

1035
01:03:38,470 --> 01:03:43,230
Dette er litt styggere enn Bootstrap Typeahead f.eks

1036
01:03:43,230 --> 01:03:45,580
men det tillater oss å gjøre en annen ting.

1037
01:03:45,580 --> 01:03:48,660
Når vi ser på den Bootstrap plugin,

1038
01:03:48,660 --> 01:03:52,590
Vi så at når vi autocompleted, en av de autofullfør verdier var AAPL.

1039
01:03:52,590 --> 01:03:54,820
Som kanskje ikke er så nyttig.

1040
01:03:54,820 --> 01:03:59,100
Som bruker, kan jeg ikke umiddelbart gjenkjenner alle aksjesymboler.

1041
01:03:59,100 --> 01:04:02,370
Hva jeg er nok mer sannsynlig å gjenkjenne er selskapets faktiske navn.

1042
01:04:02,370 --> 01:04:05,310
Så ville ikke det være veldig nyttig hvis stedet for å si AAPL

1043
01:04:05,310 --> 01:04:07,970
dette sa noe sånt som Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Fordi vi har rullet dette selv, kan vi virkelig enkelt gjøre det.

1045
01:04:12,240 --> 01:04:17,630
La oss åpne opp vår siste sitatet fil her, så quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Samme. Jeg har nettopp opprettet en annen PHP-fil som vil komme tilbake til oss mer enn bare symboler.

1047
01:04:23,200 --> 01:04:25,550
Det vil også gi oss tilbake selskapets navn.

1048
01:04:25,550 --> 01:04:28,150
Og så gjør vi det samme. Vi gjør en AJAX forespørsel.

1049
01:04:28,150 --> 01:04:32,370
Når forespørselen er fullført, skal vi utføre denne funksjonen her,

1050
01:04:32,370 --> 01:04:36,520
og denne funksjonen er kommer til å bygge opp en stor rekke elementer.

1051
01:04:36,520 --> 01:04:39,520
Men forskjellen her er at verdien av disse listene er ikke lenger bare symbolet,

1052
01:04:39,520 --> 01:04:45,370
det er nå navnet.

1053
01:04:45,370 --> 01:04:47,070
Så vi har et lite problem.

1054
01:04:47,070 --> 01:04:51,590
Når vi bruker vår oppslag, må vi liksom passere den symbolet.

1055
01:04:51,590 --> 01:04:54,950
Vi kan ikke passere lookup noe som Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Vi må passere det MSFT.

1057
01:04:57,900 --> 01:05:01,640
Når vi skriver HTML, har vi mange fine innebygde egenskaper.

1058
01:05:01,640 --> 01:05:05,440
En A kan ha forbindelse med det en href eller en klasse.

1059
01:05:05,440 --> 01:05:08,230
Men hva vi virkelig trenger nå er for hver av disse koblingene

1060
01:05:08,230 --> 01:05:11,120
å ha et lager symbol forbundet med det.

1061
01:05:11,120 --> 01:05:14,240
Det er ingen innebygd i HTML-attributt for aksjesymbol,

1062
01:05:14,240 --> 01:05:21,010
men heldigvis, kan HTML5 oss å lage våre egne attributter for å være det vi ønsker.

1063
01:05:21,010 --> 01:05:24,620
Ved å si data-symbol, har jeg introdusert en ny attributt

1064
01:05:24,620 --> 01:05:29,350
hvis navn jeg bare gjort opp, og dette er greit, fordi jeg innledet det med disse dataene.

1065
01:05:29,350 --> 01:05:34,270
Vi kommer til å lagre innsiden av det symbolet fra lager nå.

1066
01:05:34,270 --> 01:05:39,590
Hva det betyr er at selv om vi viser verdien av selskapets navn

1067
01:05:39,590 --> 01:05:43,380
Innsiden av våre autocomplete, er vi fremdeles huske symbolet

1068
01:05:43,380 --> 01:05:47,110
som er knyttet til hvert enkelt selskap.

1069
01:05:47,110 --> 01:05:50,350
Måten vi gjør som er inne i dette elementet selv.

1070
01:05:50,350 --> 01:05:52,930
Så det betyr at vi må gjøre en mer endring.

1071
01:05:52,930 --> 01:05:57,090
Når vi klikker det nå, må vi faktisk dra nytte av symbolet attributt

1072
01:05:57,090 --> 01:06:00,220
snarere enn bare sin verdi.

1073
01:06:00,220 --> 01:06:05,010
Hvis vi opp igjen, legger vi en hendelseshåndterer til forslag.

1074
01:06:05,010 --> 01:06:09,280
Når en av disse forslagene er klikket nå, ønsker jeg å gjøre noe.

1075
01:06:09,280 --> 01:06:13,160
Hva jeg vil gjøre er å endre verdien av at boksen.

1076
01:06:13,160 --> 01:06:16,100
Nå ønsker jeg å sette den samme val funksjonen.

1077
01:06:16,100 --> 01:06:21,060
>> Så uten noen argumenter denne val funksjonen returnerer til deg hva som allerede er i tekstboksen,

1078
01:06:21,060 --> 01:06:27,070
men hvis du gir den en streng, det kommer til å ta det streng og sette den inn i tekstboksen.

1079
01:06:27,070 --> 01:06:28,980
Jeg velger sin tekstboksen på samme måte.

1080
01:06:28,980 --> 01:06:31,230
Det heter symbol innsiden av form-sitat.

1081
01:06:31,230 --> 01:06:37,540
Nå er jeg sender den verdien av attributtet data-symbol.

1082
01:06:37,540 --> 01:06:41,560
Denne saken her er nytt, denne $ (denne).

1083
01:06:41,560 --> 01:06:46,850
Hva dette refererer til er det elementet som ble klikket på.

1084
01:06:46,850 --> 01:06:50,880
Vi ser her at vi ikke legger ved et klikk arrangement

1085
01:06:50,880 --> 01:06:54,690
til hvert element med en klasse av forslag individuelt.

1086
01:06:54,690 --> 01:06:57,140
Snarere, vi nærmer dette litt annerledes.

1087
01:06:57,140 --> 01:07:01,700
I stedet vi sier når noe inni denne forslag div,

1088
01:07:01,700 --> 01:07:04,080
som er husk bare beholderen for listen,

1089
01:07:04,080 --> 01:07:10,150
hvis noe inne i denne div er klikket, og den har en klasse av forslag,

1090
01:07:10,150 --> 01:07:13,000
Jeg vil ha denne hendelsen til brann.

1091
01:07:13,000 --> 01:07:17,490
I utgangspunktet hva dette betyr at vi kan gjøre er at vi kan bruke denne samme hendelseshåndterer

1092
01:07:17,490 --> 01:07:20,000
for alle de tingene på listen.

1093
01:07:20,000 --> 01:07:22,080
Så vi trenger ikke å ha en hendelseshåndterer for det første elementet

1094
01:07:22,080 --> 01:07:24,550
og en annen hendelse behandleren for det andre elementet.

1095
01:07:24,550 --> 01:07:29,880
Vi kan i stedet si: "Jeg vil ha den samme hendelseshåndterer å gjelde alt i min liste."

1096
01:07:29,880 --> 01:07:34,420
Men vi trenger å liksom vite hvilket element ble klikket på.

1097
01:07:34,420 --> 01:07:38,450
Denne "dette" søkeord representerer nettopp det.

1098
01:07:38,450 --> 01:07:42,360
Dette er gjenstanden som nettopp ble klikket av brukeren.

1099
01:07:42,360 --> 01:07:47,680
Hvis jeg bare klikket på tredje linken, representerer dette elementet av at tredje link,

1100
01:07:47,680 --> 01:07:51,670
noe som betyr at jeg kan få sin attributt, data-symbol,

1101
01:07:51,670 --> 01:07:57,760
som vi vet må inneholde symbolet som er tilknyttet selskapet jeg bare klikket.

1102
01:07:57,760 --> 01:08:04,550
Hvis vi hopper tilbake til vår økonomiavdeling side,

1103
01:08:04,550 --> 01:08:08,580
Vi ser nå at når jeg begynner å skrive noe sånt MSFT,

1104
01:08:08,580 --> 01:08:11,220
vi ikke lenger får bare aksjesymboler,

1105
01:08:11,220 --> 01:08:13,720
Vi overvåker nå får de faktiske selskaper.

1106
01:08:13,720 --> 01:08:20,410
Men når jeg klikker på en av disse selskapene,

1107
01:08:20,410 --> 01:08:25,180
kan vi se at vi faktisk fyller tekstboksen ikke med navnet på selskapet

1108
01:08:25,180 --> 01:08:29,850
men med hva var lagret inne av disse data attributter.

1109
01:08:29,850 --> 01:08:32,880
Og så hvis jeg faktisk inspisere en av disse elementene ved å høyreklikke det

1110
01:08:32,880 --> 01:08:36,200
og klikke Kontroller Element, kan vi faktisk se hvordan dette ser ut.

1111
01:08:36,200 --> 01:08:40,290
>> Husk dette er noe som vi skapte innsiden av det for loop

1112
01:08:40,290 --> 01:08:42,649
når vi bygger opp at strengen av HTML.

1113
01:08:42,649 --> 01:08:47,870
Vi ser her at dette data-symbolet har verdien av MSFT, som er flott.

1114
01:08:47,870 --> 01:08:49,189
Det er hva vi har ventet.

1115
01:08:49,189 --> 01:08:53,170
Det er symbolet og det er hvordan vi fikk den verdien som vi trengte å bruke

1116
01:08:53,170 --> 01:08:56,140
innsiden av denne tekstboksen.

1117
01:08:56,140 --> 01:08:58,850
Det er nok for sitatet form fordi det er slags kjedelig.

1118
01:08:58,850 --> 01:09:02,990
La oss bare gjøre noen raske forbedringer i vår portefølje side.

1119
01:09:02,990 --> 01:09:08,109
Hvis du har brukt CS50 Finance for en stund og du begynner å kjøpe og selge en rekke aksjer,

1120
01:09:08,109 --> 01:09:11,300
slutt denne tabellen kommer til å bli ganske stor,

1121
01:09:11,300 --> 01:09:13,850
og du kommer til å ønske et lager ticker, selvfølgelig.

1122
01:09:13,850 --> 01:09:20,350
Når bordet er virkelig, virkelig stor, kan det være nyttig for brukeren å prøve å søke over den.

1123
01:09:20,350 --> 01:09:23,290
Innsiden av søkeboksen hvis jeg begynner å skrive noe som Disney

1124
01:09:23,290 --> 01:09:26,359
og leter etter min Mikke Mus lager, kan vi se at det er nå filtrering

1125
01:09:26,359 --> 01:09:28,189
basert på hva jeg nettopp skrev i.

1126
01:09:28,189 --> 01:09:31,640
Denne funksjonaliteten ser super komplisert, men det er veldig, veldig lett

1127
01:09:31,640 --> 01:09:33,859
med jQuery og JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Dette portfolio.php filen inneholder en JavaScript-fil som heter portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
La oss ta en titt på det.

1130
01:09:41,130 --> 01:09:44,890
Så html, js, portefølje.

1131
01:09:44,890 --> 01:09:49,210
Her er der vi gjør at søk på bordet.

1132
01:09:49,210 --> 01:09:52,750
Det første jeg må gjøre er å feste en hendelseshåndterer til at tekstboksen

1133
01:09:52,750 --> 01:09:55,760
fordi vi vet at vi ønsker at våre filtrering funksjon å skyte

1134
01:09:55,760 --> 01:09:59,800
hver gang brukeren trykker noe fordi vi ikke har tid til Søkeknapper.

1135
01:09:59,800 --> 01:10:03,000
Det første vi må gjøre er å finne ut hva brukeren søker etter,

1136
01:10:03,000 --> 01:10:04,780
akkurat som vi gjorde før.

1137
01:10:04,780 --> 01:10:11,320
Dette nøkkelordet refererer til det aktuelle elementet brukeren samarbeidsstil.

1138
01:10:11,320 --> 01:10:14,070
>> Fordi brukeren er i samspill med søkeboksen,

1139
01:10:14,070 --> 01:10:17,020
$ Dette representerer søkeboksen,

1140
01:10:17,020 --> 01:10:21,820
så this.val gir oss hva som er på innsiden av søkeboksen brukeren er for tiden å skrive.

1141
01:10:22,810 --> 01:10:27,320
Så nå hva vi ønsker å gjøre vi ønsker å iterere over alle radene

1142
01:10:27,320 --> 01:10:29,240
innsiden av vårt bord.

1143
01:10:29,240 --> 01:10:35,630
For å velge alle radene i tabellen vår, ga jeg at bordet en ID på tabellen portefølje,

1144
01:10:35,630 --> 01:10:39,060
og hver rad er representert ved en TR element,

1145
01:10:39,060 --> 01:10:42,080
så denne velgeren kommer til å returnere til meg en stor matrise

1146
01:10:42,080 --> 01:10:44,370
av alle radene i tabellen.

1147
01:10:44,370 --> 01:10:47,010
Nå ønsker jeg å iterere over denne matrisen.

1148
01:10:47,010 --> 01:10:52,390
Jeg kunne du en for løkke, men jQuery faktisk gir oss fin funksjon som heter "hver".

1149
01:10:52,390 --> 01:10:55,220
Hva hver enkelt gjør er hver tar ett argument,

1150
01:10:55,220 --> 01:10:57,090
og at argumentet er en funksjon.

1151
01:10:57,090 --> 01:11:02,760
Hva det kommer til å gjøre er det kommer til å bruke denne funksjonen til hvert element inne i denne listen.

1152
01:11:02,760 --> 01:11:05,550
Denne funksjonen tar ett argument som er e,

1153
01:11:05,550 --> 01:11:10,090
og når denne funksjonen er utført, er denne e kommer til å bli erstattet med den første raden,

1154
01:11:10,090 --> 01:11:12,070
deretter den andre rad, og deretter den tredje rad.

1155
01:11:12,070 --> 01:11:15,150
Ved denne måten, er dette det samme som å kjøre en for loop

1156
01:11:15,150 --> 01:11:21,360
og deretter finne det aktuelle elementet basert på indeksen innsiden av for-løkke.

1157
01:11:21,360 --> 01:11:24,750
Ved hver iterasjon, for hvert av disse elementene i tabellen,

1158
01:11:24,750 --> 01:11:30,560
Jeg vil sjekke om teksten i elementet - teksten i cellen innsiden av raden -

1159
01:11:30,560 --> 01:11:33,130
samsvarer med det jeg søker etter.

1160
01:11:33,130 --> 01:11:36,390
Denne store lang streng av kommandoer er hvordan jeg kunne gjøre det.

1161
01:11:36,390 --> 01:11:40,900
Først, igjen, dette refererer nå til - fordi det er inne i en ny funksjon -

1162
01:11:40,900 --> 01:11:45,020
dette er nå gjeldende rad i tabellen.

1163
01:11:45,020 --> 01:11:47,340
Jeg ønsker å ta den aktuelle raden i tabellen,

1164
01:11:47,340 --> 01:11:49,950
og jeg ønsker å få alle sine barn.

1165
01:11:49,950 --> 01:11:51,940
Husk at DOM et hierarkisk tre,

1166
01:11:51,940 --> 01:11:54,200
noe som betyr at elementene har et antall barn.

1167
01:11:54,200 --> 01:12:00,180
>> Dette. Barn funksjonen kommer til å returnere til meg tilbake en rekke alle elementene

1168
01:12:00,180 --> 01:12:03,240
som er barn av, i dette tilfellet, en rad i tabellen.

1169
01:12:03,240 --> 01:12:07,150
Dette er bare simpelthen cellene inne av raden.

1170
01:12:07,150 --> 01:12:09,230
Jeg vil bare søke gjennom den første cellen.

1171
01:12:09,230 --> 01:12:13,090
Dette. Første funksjonen sier gi meg det første elementet i denne matrisen.

1172
01:12:13,090 --> 01:12:17,070
Deretter teksten funksjonen sier få meg nøyaktig hva som er inne i cellen

1173
01:12:17,070 --> 01:12:19,530
siden jeg ønsker å søke gjennom teksten.

1174
01:12:19,530 --> 01:12:21,040
La oss til slutt konvertere den til små bokstaver,

1175
01:12:21,040 --> 01:12:23,940
slik at vi kan gjøre tekst case insensitive søk.

1176
01:12:23,940 --> 01:12:29,990
Til slutt ønsker vi å se om det streng inne i en tabell inneholder strengen vi leter etter.

1177
01:12:29,990 --> 01:12:32,980
Den indexOf funksjon i JavaScript gjør nettopp det.

1178
01:12:32,980 --> 01:12:37,060
Den forteller oss om denne strengen inneholder en annen streng.

1179
01:12:37,060 --> 01:12:40,150
Hvis det er sant at cellen inneholder hva jeg søker etter,

1180
01:12:40,150 --> 01:12:42,140
så jeg vil være sikker på at det er vist.

1181
01:12:42,140 --> 01:12:45,330
Showet metoden vil si, "Vis elementet."

1182
01:12:45,330 --> 01:12:50,350
Hvis dette ikke er tilfelle, så betyr det at det jeg søker etter ikke finnes

1183
01:12:50,350 --> 01:12:53,550
innenfor den raden, og så jeg ønsker å skjule er fra brukeren.

1184
01:12:53,550 --> 01:12:59,240
Som oppnår det hyggelig filtrering effekt der vi ikke lenger se hele tabellen.

1185
01:12:59,240 --> 01:13:01,480
Hvis du er interessert i hvordan du gjør dette ticker også,

1186
01:13:01,480 --> 01:13:04,180
Vi vil legge kilden på nettet. Men det er veldig enkelt.

1187
01:13:04,180 --> 01:13:09,860
JQuery har fantastisk metoder for disse animasjoner og manipulere CSS egenskaper.

1188
01:13:09,860 --> 01:13:11,020
Så, det er det for meg.

1189
01:13:11,020 --> 01:13:15,560
>> Hva ligger så videre? Som du vil se i noen få dager, er den endelige prosjekter forslaget grunn.

1190
01:13:15,560 --> 01:13:17,730
Den endelige prosjekter forslaget vil stille deg noen spørsmål,

1191
01:13:17,730 --> 01:13:19,420
men blant dem vil være tre milepæler -

1192
01:13:19,420 --> 01:13:22,840
en en "god" milepæl, en en bedre milepæl, og en en best.

1193
01:13:22,840 --> 01:13:25,870
Ideen er virkelig å hjelpe dere satt dine forventninger

1194
01:13:25,870 --> 01:13:29,160
slik at minimalt du vil være fornøyd med resultatet av den endelige prosjektet

1195
01:13:29,160 --> 01:13:32,060
og det vil være "gode" så langt som du er bekymret.

1196
01:13:32,060 --> 01:13:34,540
Men så i interessen for å få deg til å nå bare litt til noe bedre

1197
01:13:34,540 --> 01:13:37,680
eller noe beste, vil vi også sortere av presse deg mot det også.

1198
01:13:37,680 --> 01:13:40,660
Den CS50 Hack-a-thon, i mellomtiden, er i et par uker.

1199
01:13:40,660 --> 01:13:44,340
Vanligvis gjør vi dette på et lotteri basis basis på grunn av interesse,

1200
01:13:44,340 --> 01:13:47,680
men oddsen er vi tar et par hundre av oss i skyttelbusser fra Harvard Square

1201
01:13:47,680 --> 01:13:51,540
ned til Kendall Square der Microsoft har en vakker anlegget treffende kalt "nerd" -

1202
01:13:51,540 --> 01:13:53,830
New England Research and Development Center.

1203
01:13:53,830 --> 01:13:56,380
Vi får det rundt 20:00 vil vi ha litt mat.

1204
01:13:56,380 --> 01:13:58,160
Rundt 1 a.m. vil vi ha litt mer mat.

1205
01:13:58,160 --> 01:14:02,150
Rundt 5 am hvis du fremdeles våken vi hodet over til IHOP eller ta deg tilbake til campus.

1206
01:14:02,150 --> 01:14:04,380
Målet er å dykke inn endelige prosjekter

1207
01:14:04,380 --> 01:14:06,190
sammen av klassekamerater og ansatte.

1208
01:14:06,190 --> 01:14:08,280
Så noen dager senere er CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
som er egentlig ment å være en mulighet for dere til å presentere arbeidet ditt

1210
01:14:10,990 --> 01:14:12,700
og prestasjoner for semesteret

1211
01:14:12,700 --> 01:14:15,610
mens rubbing skuldre med hverandre og få en følelse av hva alle gjorde.

1212
01:14:15,610 --> 01:14:17,850
Med det sagt, mange takk til Tommy og Josef,

1213
01:14:17,850 --> 01:14:19,960
og vi vil se deg på mandag.

1214
01:14:19,960 --> 01:14:24,070
 [Applaus]