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

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
>> Det er CS50. Dette er slutningen af ​​uge 9. Mange tak.

5
00:00:13,340 --> 00:00:15,310
Endelig. Uge 9. Jeg fik det.

6
00:00:15,310 --> 00:00:18,590
I dag fortsætter vi vores samtale om webprogrammering

7
00:00:18,590 --> 00:00:21,660
med et øje mod det endelige projekt, fordi du ikke behøver at gøre noget web-baseret

8
00:00:21,660 --> 00:00:25,610
for de endelige projekter, men fordi enten til endelige projekter eller efter CS50

9
00:00:25,610 --> 00:00:29,000
dette er helt sikkert den retning, i hvilken moderne software er i gang.

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

11
00:00:31,770 --> 00:00:35,040
Faktisk er en af ​​de sværeste ting at gøre det aspekt af design.

12
00:00:35,040 --> 00:00:38,600
>> For eksempel har vi med design betyder faktisk at få brugergrænsefladen

13
00:00:38,600 --> 00:00:40,420
eller brugerens oplevelse højre.

14
00:00:40,420 --> 00:00:43,200
Jeg tør sige - og vi ved fra en nylig problem sæt

15
00:00:43,200 --> 00:00:45,960
når et par af jer luftet dine kvababbelser om nogle stykke software

16
00:00:45,960 --> 00:00:49,000
eller hardware, der infuriates dig, hvad enten på campus eller fra -

17
00:00:49,000 --> 00:00:51,930
Der er en masse steder derude, der er en masse af hardware derude,

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

19
00:00:53,900 --> 00:00:58,730
Men virkeligheden er, at gøre ting, der er nemme at bruge og alligevel er ikke desto mindre magtfulde

20
00:00:58,730 --> 00:01:00,550
er en meget vanskelig udfordring.

21
00:01:00,550 --> 00:01:03,680
Så for i dag spurgte jeg Joseph og Tommy til at slutte mig op her

22
00:01:03,680 --> 00:01:06,680
så vi kan få en samtale, både om design

23
00:01:06,680 --> 00:01:09,090
og hvilke typer af tankeprocesser bør begynde at gå gennem dit hoved

24
00:01:09,090 --> 00:01:12,040
når du designer dine endelige projekter, dine fremtidige bestræbelser.

25
00:01:12,040 --> 00:01:15,040
Og så med Tommy hjælp vil vi se på nogle af de nærmere oplysninger om gennemførelsen.

26
00:01:15,040 --> 00:01:18,440
Hvordan kan du have nogle visioner på papir eller i dit sind

27
00:01:18,440 --> 00:01:20,760
at du derefter kan udføre programmeringsmæssigt

28
00:01:20,760 --> 00:01:24,030
ved at bruge nogle af de teknologier og teknikker, vi har lige begyndt at tale om,

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

30
00:01:29,080 --> 00:01:32,950
Det giver dig mulighed for at oprette alle de mere dynamiske af en brugergrænseflade

31
00:01:32,950 --> 00:01:35,780
ved at hente flere og flere data progressivt fra en server.

32
00:01:35,780 --> 00:01:38,560
Så vi vil se nogle af disse stumper så godt i dag.

33
00:01:38,560 --> 00:01:41,800
Som en sidebemærkning, hvis du er interesseret i at koncentrere i datalogi

34
00:01:41,800 --> 00:01:45,010
eller minoring i datalogi, ved, at denne fredag ​​ved middagstid

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

36
00:01:48,750 --> 00:01:50,780
hvor du kan lære lidt mere om datalogi.

37
00:01:50,780 --> 00:01:54,860
På din vej ud af døren i dag, du vil være i stand til at afhente en uofficiel guide til CS på Harvard.

38
00:01:54,860 --> 00:01:57,290
Vi sætter det på papirkurven dåser uden i hoftehøjde

39
00:01:57,290 --> 00:01:59,750
så hvis du gerne vil få fat i denne og lære lidt mere om CS,

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

41
00:02:02,480 --> 00:02:06,500
Også hvis du gerne vil slutte sig til os for CS50 frokost denne fredag ​​kl 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Uden videre, giver jeg dig undervisning kollega Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hi. [Bifald]

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

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

47
00:02:24,780 --> 00:02:28,040
>> Professoren på det tidspunkt fortalte os historien om en anden professor

48
00:02:28,040 --> 00:02:31,640
der var gået til et hotel og brugte vandhaner.

49
00:02:31,640 --> 00:02:35,630
Kan nogen fortælle mig, hvad de 2 knapper på venstre og højre gøre?

50
00:02:35,630 --> 00:02:39,080
[Studerende] Varmt og koldt. >> Varmt og koldt. Godt.

51
00:02:39,080 --> 00:02:41,430
Hvad du normalt forvente, right?

52
00:02:41,430 --> 00:02:46,960
Denne professor efter brug af vandhanen ønsker at tage et brusebad, og han fortsætter med at bruge dette.

53
00:02:46,960 --> 00:02:51,310
Han mener, at venstre og højre sider er for varmt og koldt, ikke?

54
00:02:51,310 --> 00:02:55,470
Men kan nogen fortælle mig, hvad disse rent faktisk gøre?

55
00:02:55,470 --> 00:02:58,060
Eventuelle hænder?

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

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

58
00:03:05,860 --> 00:03:10,460
Så en af ​​dem styrer temperaturen og de andre kontroller? >> [Studerende] vandtryk.

59
00:03:10,460 --> 00:03:12,350
Vandtryk. Godt.

60
00:03:12,350 --> 00:03:15,100
Denne professor går ind i dette, og tænker som de styrer varme og kulde,

61
00:03:15,100 --> 00:03:21,470
vender den rigtige, som han mener er for varmt, hele vejen op

62
00:03:21,470 --> 00:03:23,560
fordi han ønsker at tage et varmt brusebad.

63
00:03:23,560 --> 00:03:28,100
Nå, har disse ikke rigtig passer sammen, så han får det ikke meget sjov oplevelse

64
00:03:28,100 --> 00:03:31,110
af at være i et koldt brusebad, og vi ved alle, hvad det føles.

65
00:03:31,110 --> 00:03:33,620
Dette er et eksempel på et design fejl.

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

67
00:03:37,040 --> 00:03:39,420
svarer ikke til, hvad der kom ud af bruser,

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

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

70
00:03:44,990 --> 00:03:48,020
Men vi ser alle mulige andre dem så godt.

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

72
00:03:50,390 --> 00:03:55,560
Dette er en undergrundsbane system rent faktisk i London, som siger: "Denne knap er ikke i brug."

73
00:03:55,560 --> 00:04:00,220
Hvorfor er det endda på der? Hvorfor har vi selv pleje?

74
00:04:00,220 --> 00:04:02,810
Da jeg var barn, er den teknisk dygtige i huset,

75
00:04:02,810 --> 00:04:05,050
når computeren ville gå ned, ville min mor kommer til mig,

76
00:04:05,050 --> 00:04:07,060
viser mig denne skærm, og spørger mig, hvad der skete.

77
00:04:07,060 --> 00:04:09,210
>> Selv jeg ved ikke, hvad det betyder.

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

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

80
00:04:18,720 --> 00:04:23,050
Nogle gange har vi lyst til softwareudviklere er bare trolling os.

81
00:04:23,050 --> 00:04:28,460
Som brugere er vi ligesom, "Hvad sker der? Nogen fortælle os."

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

83
00:04:32,140 --> 00:04:34,650
Design, som vi kan se, er ikke udelukkende om æstetik,

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

85
00:04:37,230 --> 00:04:41,720
Vi ser her, at denne lille pop-up herovre faktisk ser ret nice.

86
00:04:41,720 --> 00:04:45,290
Det har en slagskygge i baggrunden, har det grænseoverskridende radier foregår.

87
00:04:45,290 --> 00:04:47,550
Det er slags smuk.

88
00:04:47,550 --> 00:04:51,480
Det er ikke virkelig godt designet, fordi det ikke er meget brugervenlig.

89
00:04:51,480 --> 00:04:54,920
Den lille pop-up, der kommer op ikke rigtig give mig nogen oplysninger

90
00:04:54,920 --> 00:04:58,450
om, hvad der sker, er det ikke fortælle mig noget som brugeren

91
00:04:58,450 --> 00:05:01,400
om, hvordan du gendanner fra denne fejl.

92
00:05:01,400 --> 00:05:05,190
Vi ønsker at tænke over tingene, at design ikke.

93
00:05:05,190 --> 00:05:06,670
Første, det er ikke æstetik.

94
00:05:06,670 --> 00:05:10,800
Det er heller ikke udstopning din app med tonsvis af unødvendig funktionalitet.

95
00:05:10,800 --> 00:05:14,890
Hvis du er en thailandsk restaurant, har du sandsynligvis ikke ønsker at være en tandlæge på samme tid.

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

97
00:05:17,720 --> 00:05:21,130
og det var egentlig ikke kernen i det, de byggede.

98
00:05:21,130 --> 00:05:24,200
Og så er det rart at tænke ikke så meget mængden af ​​de ting

99
00:05:24,200 --> 00:05:26,390
at du lægger din ansøgning, men kvaliteten

100
00:05:26,390 --> 00:05:28,910
og hvordan du laver det brugeroplevelse bedre

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

102
00:05:32,540 --> 00:05:37,040
>> I en nøddeskal, fortæller design os, hvad vi skal bygge videre på.

103
00:05:37,040 --> 00:05:41,950
For eksempel, hvis vi bygger noget, lad os søge ting op

104
00:05:41,950 --> 00:05:45,970
som Google, for eksempel skal vi gøre tingene på en måde,

105
00:05:45,970 --> 00:05:48,950
der kræver, at brugeren til at tage masser af klik for at komme til, hvad de vil,

106
00:05:48,950 --> 00:05:52,580
eller skal vi gøre det på en måde, for eksempel med Google Instant eller autofuldførelse

107
00:05:52,580 --> 00:05:54,970
der lader os komme til vores resultater hurtigere?

108
00:05:54,970 --> 00:05:58,740
Engineering indebærer, ligesom Tommy vil vise dig, faktisk bygge det.

109
00:05:58,740 --> 00:06:01,890
Der er masser af forskellige typer af design.

110
00:06:01,890 --> 00:06:06,070
For eksempel, at hvis du bygger noget implementere noget

111
00:06:06,070 --> 00:06:09,770
i et tredje verdens land, hvor der ikke er meget strøm, eller at meget teknologi,

112
00:06:09,770 --> 00:06:11,440
du er nødt til at designe hvad du bygger

113
00:06:11,440 --> 00:06:14,210
på en måde, som nemt giver adgang til de mennesker der.

114
00:06:14,210 --> 00:06:18,290
Men hvad mulige andre design beslutninger kan der være

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

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

117
00:06:25,660 --> 00:06:37,200
[Uhørlig student svar] >> Højre. Præcis. Tilgængelighed er én ting.

118
00:06:37,200 --> 00:06:40,870
En masse mennesker ikke tænker over, "Hvad med mine brugere?"

119
00:06:40,870 --> 00:06:43,160
ligesom de yderste områder af begge frekvenser.

120
00:06:43,160 --> 00:06:47,770
Jeg har brugere, der måske har handicap, at jeg ikke tænker på

121
00:06:47,770 --> 00:06:50,590
og jeg er bare tænker designe for den almindelige bruger.

122
00:06:50,590 --> 00:06:52,630
Internettet er tilgængelige for alle i dag,

123
00:06:52,630 --> 00:06:54,870
og jeg skal designe for de mennesker som godt.

124
00:06:54,870 --> 00:06:58,620
Hvilke mulige andre design beslutninger kan du gøre?

125
00:06:58,620 --> 00:07:00,690
Ja. >> [Studerende] Udgifter.

126
00:07:00,690 --> 00:07:02,680
Koste. Meget godt.

127
00:07:02,680 --> 00:07:08,060
En anden ting vi kan basere vores design beslutninger på, er omkostningerne.

128
00:07:08,060 --> 00:07:13,130
Hvis vi er en virksomhed, du ønsker at bygge noget, der ikke tager meget koster at producere

129
00:07:13,130 --> 00:07:17,720
men kan sælge til en særlig høj pris, eller kan få os nogle fortjeneste.

130
00:07:17,720 --> 00:07:21,540
>> Disse er alle forskellige typer af design, men når vi er ved at bygge noget på internettet

131
00:07:21,540 --> 00:07:25,120
eller når vi er ved at bygge noget, der sandsynligvis ikke koster så meget at bygge op nu,

132
00:07:25,120 --> 00:07:28,630
ligesom Internet applikationer - du behøver ikke at smide meget kapital ind i det

133
00:07:28,630 --> 00:07:30,900
for at gøre noget, der rent faktisk virker -

134
00:07:30,900 --> 00:07:33,490
hvad vi er mere bekymret for er brugeroplevelsen.

135
00:07:33,490 --> 00:07:36,390
Vi kalder denne bruger centreret design.

136
00:07:36,390 --> 00:07:41,550
Hovedsagelig hvad brugercentreret design indebærer er at sætte jer selv i skoene af dine brugere.

137
00:07:41,550 --> 00:07:44,870
Hvis nogen tilmelder sig hvad jeg bygger,

138
00:07:44,870 --> 00:07:48,250
de har åbenbart kommet til min særlige ansøgning med et mål for øje,

139
00:07:48,250 --> 00:07:50,280
med en opgave, de ønsker at gennemføre.

140
00:07:50,280 --> 00:07:53,650
Og dit job er ikke kun at hjælpe dem udføre opgaven

141
00:07:53,650 --> 00:07:57,930
men at hjælpe dem udføre opgaven på en måde, der er effektiv, intuitiv,

142
00:07:57,930 --> 00:08:01,900
og, som nogle person sagde derovre, tilgængelige.

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

144
00:08:03,750 --> 00:08:08,050
Effektivitet betyder hvor hurtigt har min bruger fuldføre opgaven givet min interface.

145
00:08:08,050 --> 00:08:11,650
Tager det masser af klik for dem at komme fra det ene sted til det andet?

146
00:08:11,650 --> 00:08:14,630
Er det trættende? Har de for at udføre masser af gentagne opgaver?

147
00:08:14,630 --> 00:08:17,140
Vi ønsker at gøre denne proces så effektiv som muligt

148
00:08:17,140 --> 00:08:20,070
så de ikke behøver at gøre den slags ting.

149
00:08:20,070 --> 00:08:24,230
Hvad angår intuitiveness, er, for eksempel hvis en bruger ser op min grænseflade,

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

151
00:08:27,240 --> 00:08:30,390
Er det nemt for dem at finde ud af, hvad de har at klikke i min grænseflade

152
00:08:30,390 --> 00:08:33,770
i orden for dem at nå det mål eller opgave, de ønsker at opnå?

153
00:08:33,770 --> 00:08:37,520
>> Og endelig, som en person sagde derovre, tilgængelighed er meget vigtigt.

154
00:08:37,520 --> 00:08:39,640
[Mandlig taler] Det kommer til tilgængelighed for ting som vision,

155
00:08:39,640 --> 00:08:42,740
gerne, hvordan kan jeg faktisk designe noget for nogen, der er blind?

156
00:08:42,740 --> 00:08:46,460
Oh. For folk, der ikke kan se på alle, har vi noget, der hedder skærmlæsere.

157
00:08:46,460 --> 00:08:49,070
Hvad du skal gøre er, at du skal bygge din hjemmeside på en måde

158
00:08:49,070 --> 00:08:52,020
at for eksempel særlige teknologier, hvad vi kalder -

159
00:08:52,020 --> 00:08:53,590
Der er masser af ting nu.

160
00:08:53,590 --> 00:08:55,660
Jeg tror, ​​der er skærmlæsere kaldet JAWS.

161
00:08:55,660 --> 00:08:58,410
En masse af disse ting er afhængige af, hvad vi kalder området regler

162
00:08:58,410 --> 00:09:02,010
med henblik på at udlæses til brugeren, hvad der er til stede på siden.

163
00:09:02,010 --> 00:09:05,480
For de mennesker, der ikke kan se, skal du sørge for, at disse skærmlæsere

164
00:09:05,480 --> 00:09:09,130
kan faktisk hente indholdet på siden og kan faktisk vise dine brugere,

165
00:09:09,130 --> 00:09:13,630
hvis du ikke kan se, i det mindste du kan stadig forstå indholdet på siden.

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

167
00:09:16,190 --> 00:09:23,410
Nok taler om godt design. Lad os tale om dårligt design.

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

169
00:09:25,220 --> 00:09:27,890
Kan nogen fortælle mig om deres erfaringer med Craigslist

170
00:09:27,890 --> 00:09:32,190
og hvad de mener, er ikke så fantastisk ved dette design?

171
00:09:33,690 --> 00:09:36,430
Ja. >> [Studerende] Jeg tror, ​​der er for mange ord i et område.

172
00:09:36,430 --> 00:09:39,350
Alt for mange ord, ikke? Helt overvældende.

173
00:09:39,350 --> 00:09:42,400
Du kommer til denne side, og du er mødt med en hel masse ting heroppe

174
00:09:42,400 --> 00:09:43,860
der måske ikke engang noget for dig.

175
00:09:43,860 --> 00:09:47,010
For eksempel bor du i en stat, der ikke begynder med dette bogstav.

176
00:09:47,010 --> 00:09:48,690
Lad os sige, at du bor i Texas eller noget.

177
00:09:48,690 --> 00:09:53,790
>> Du er nødt til at rulle hele vejen ned på siden for at komme til det sted, du befinder dig på.

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

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

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

181
00:10:09,070 --> 00:10:12,250
Temmelig overvældende, ikke sandt?

182
00:10:12,250 --> 00:10:16,400
Akavet ting derovre. [Latter]

183
00:10:17,320 --> 00:10:19,470
Lad os sige, jeg leder efter et sted at bo.

184
00:10:19,470 --> 00:10:24,130
Hvor mange mennesker har faktisk brugt Craigslist? Tonsvis af dig.

185
00:10:24,130 --> 00:10:30,960
Der er temmelig dårlige måder at se på dette, men lad os se på dette.

186
00:10:35,130 --> 00:10:38,970
Hvad er forskellen mellem img og pic? Kan nogen fortælle mig?

187
00:10:41,350 --> 00:10:42,830
Der er faktisk ingen forskel.

188
00:10:42,830 --> 00:10:47,710
De betyder præcis det samme, men de har forskellige etiketter til dem for nogle grund.

189
00:10:48,980 --> 00:10:53,560
Hvis jeg klikker på Has Image, sker der ingenting på siden.

190
00:10:53,560 --> 00:10:57,490
Jeg har faktisk at klikke på Søg igen for at noget skal ske.

191
00:10:57,490 --> 00:11:02,430
Hvad der kunne være et bedre design beslutning, der kunne gøres der?

192
00:11:03,820 --> 00:11:08,030
Hvis jeg klikker på det filter, jeg sandsynligvis vil filtrere efter den pågældende aktion

193
00:11:08,030 --> 00:11:09,970
eller den pågældende kategori.

194
00:11:09,970 --> 00:11:14,450
Så i stedet for at skulle trykke på Søg igen, kunne jeg bare automatisk gøre filtreringen

195
00:11:14,450 --> 00:11:17,060
slags Google stil, hvor de gør det samme.

196
00:11:17,060 --> 00:11:20,440
[Malan] Men ikke danner som vi har set dem hidtil at have fysisk indsendes

197
00:11:20,440 --> 00:11:23,170
ved at trykke på Enter i det mindste eller klikke på en knap?

198
00:11:23,170 --> 00:11:26,830
Som du har set dem så langt, du faktisk nødt til at klikke på Send for at gøre disse ting.

199
00:11:26,830 --> 00:11:30,090
>> Men da Tommy vil vise dig i en anden, er der faktisk måder for dig

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

201
00:11:33,010 --> 00:11:38,840
hvad vi kalder en AJAX anmodning og få data tilbage og filtrere dine resultater øjeblikkeligt.

202
00:11:38,840 --> 00:11:41,340
Der er tonsvis af ting, der er galt med dette interface.

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

204
00:11:43,530 --> 00:11:47,030
Der er noget lidt unormal her, hvor du holder af Cambridge

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

206
00:11:54,790 --> 00:11:57,930
Sandsynligvis ikke ideel. >> Sandsynligvis ikke ideel.

207
00:11:57,930 --> 00:12:03,900
Hvordan kan jeg være i stand til at gøre brugerens oplevelse bedre på netop denne side?

208
00:12:03,900 --> 00:12:07,340
Ja. >> [Studerende] instruktioner.

209
00:12:07,340 --> 00:12:09,500
Okay. Instruktion i hvad slags fornuft?

210
00:12:09,500 --> 00:12:14,630
[Studerende] For eksempel en ting for første gang brugere, der ikke engang ved, hvad Craigslist er

211
00:12:14,630 --> 00:12:17,320
eller du ikke ved hvad du skal gøre.

212
00:12:17,320 --> 00:12:20,150
Right. Så forklare, hvad Craigslist er på denne side er vigtig.

213
00:12:20,150 --> 00:12:23,490
Vi kan faktisk fortælle brugerne, hvad denne side er faktisk for.

214
00:12:23,490 --> 00:12:27,090
Hvis jeg bare besøger denne, ser jeg en hel masse steder. Jeg ved ikke engang, hvad de betyder.

215
00:12:27,090 --> 00:12:29,730
Men endnu vigtigere, bare at kigge på denne grænseflade,

216
00:12:29,730 --> 00:12:35,530
huske, at jeg var nødt til at rulle ned et ton af ting at finde en bestemt samfund

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

218
00:12:37,560 --> 00:12:39,820
Hvad er en hurtigere måde jeg kunne gøre det? Ja.

219
00:12:39,820 --> 00:12:43,290
[Studerende] Opdel dem op i øst, vest regioner. >> Okay.

220
00:12:43,290 --> 00:12:47,460
Jeg kunne opdele dem i flere kategorier, der kunne hjælpe mig hurtigere bestemme

221
00:12:47,460 --> 00:12:49,820
hvordan du kommer til det pågældende sted.

222
00:12:49,820 --> 00:12:54,510
[Studerende] Sæt en drop-down liste. >> Højre. Okay.

223
00:12:54,510 --> 00:12:58,240
Jeg kunne bruge en drop-down menu, fordi vi har et fast sæt af ting

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

225
00:13:00,100 --> 00:13:02,240
På den måde er det ikke optager så meget plads på skærmen.

226
00:13:02,240 --> 00:13:05,630
Men endnu bedre end det, hvad kan vi gøre?

227
00:13:05,630 --> 00:13:09,220
Ja. >> [Uhørlig student svar] >> Kan du sige det igen? >> [Studerende] søgefeltet.

228
00:13:09,220 --> 00:13:11,260
Ja, et søgefelt. Det er godt.

229
00:13:11,260 --> 00:13:16,430
Hvad vi rent faktisk kan gøre, er, hvis vi ser tilbage på dias, søgefeltet.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Meget nem måde at søge gennem resultater, som du ved er i et sæt.

231
00:13:21,520 --> 00:13:25,980
Hvis jeg begynder at skrive BO, bare vise mig alle de resultater, der har BO inde i dem.

232
00:13:25,980 --> 00:13:29,030
På den måde kan jeg meget nemt finde den særlige, jeg ønsker at gå til

233
00:13:29,030 --> 00:13:32,390
stedet for at skulle bladre gennem dette virkelig store liste.

234
00:13:32,390 --> 00:13:37,450
>> Disse er alle mulige virkelig lavt hængende frugter, som en person, der gennemfører Craigslist

235
00:13:37,450 --> 00:13:42,500
kan faktisk gøre for at gøre oplevelsen på hjemmesiden meget bedre for deres særlige bruger.

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

237
00:13:46,370 --> 00:13:49,410
Lad os tale om Facebook.

238
00:13:50,880 --> 00:13:54,390
Da Facebook kom ud, og især Facebook-billeder,

239
00:13:54,390 --> 00:13:57,870
der var masser af andre tjenester på det tidspunkt, der kunne gøre præcis de samme ting.

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

241
00:14:00,740 --> 00:14:03,360
Hvad du kan gøre, er du kunne organisere dem i sæt så godt.

242
00:14:03,360 --> 00:14:06,070
Du kan organisere dem efter dato. Du kan gøre alle disse særlige ting.

243
00:14:06,070 --> 00:14:11,710
Men er der nogen vide, hvad der gjorde Facebook fotos eksplodere på det tidspunkt, det blev frigivet?

244
00:14:11,710 --> 00:14:15,080
Ja. >> [Studerende] Emner. >> Tags. Præcis.

245
00:14:15,080 --> 00:14:21,300
Vi har Milo herovre, der er vores hund maskot med det CS50 bandana.

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

247
00:14:24,810 --> 00:14:28,240
Og hvad gjorde Facebook-billeder så interessant ud fra et usability synspunkt

248
00:14:28,240 --> 00:14:34,130
er, at det faktisk tillod folk via dette at inddrage deres venner i deres fotos.

249
00:14:34,130 --> 00:14:37,680
For Facebook, da deres hjemmeside er særlig social

250
00:14:37,680 --> 00:14:40,750
det handler om at opbygge denne form for social atmosfære.

251
00:14:40,750 --> 00:14:42,620
Det forbedrede oplevelse af billeder meget mere

252
00:14:42,620 --> 00:14:46,390
fordi de rent faktisk kan begynde at sige: "Det er forbindelser mellem mennesker,

253
00:14:46,390 --> 00:14:49,220
og disse er fotos om mennesker du rent faktisk holder af. "

254
00:14:49,220 --> 00:14:52,200
En del af det er også slags narcissisme.

255
00:14:52,200 --> 00:14:54,980
Folk kan lide at blive tagget på fotos og sådan noget.

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

257
00:14:58,510 --> 00:15:01,910
på samme tid, det er baseret på gode design beslutninger

258
00:15:01,910 --> 00:15:04,860
fordi folk rent faktisk bekymrer sig om ting som dette.

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

260
00:15:07,190 --> 00:15:09,800
>> Men lad os snakke Facebook mere generelt.

261
00:15:09,800 --> 00:15:13,400
Jeg er sikker på masser af mennesker her har meninger om Facebook,

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

263
00:15:16,430 --> 00:15:20,270
Så lad os lufte eller være glad.

264
00:15:23,480 --> 00:15:26,450
Kom nu. Jeg kender alle du bruger Facebook.

265
00:15:26,450 --> 00:15:30,970
Nogen er nødt til at have noget dårligt at sige eller noget godt at sige om det. Ja.

266
00:15:30,970 --> 00:15:35,060
[Studerende] I news feed der er en masse ting, jeg ikke virkelig bekymrer sig om.

267
00:15:35,060 --> 00:15:37,740
Nyheden foder gør vise en masse ting, du måske ikke holder af.

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

269
00:15:41,660 --> 00:15:43,860
og du kan se deres nyheder resultater dukker op i din news feed

270
00:15:43,860 --> 00:15:45,870
og du behøver ikke virkelig bekymrer sig om det.

271
00:15:45,870 --> 00:15:48,700
Facebook har faktisk gjort en indsats for at gøre dette bedre,

272
00:15:48,700 --> 00:15:53,150
og de har faktisk prøvet at skubbe relevante resultater til toppen af ​​news feed som for sent

273
00:15:53,150 --> 00:15:58,300
så du faktisk se tingene af venner, der er relevante for dig eller dine nære venner.

274
00:15:58,300 --> 00:16:01,110
Noget andet? Ja.

275
00:16:01,110 --> 00:16:06,400
[Uhørlig student svar] >> Kan du sige det igen?

276
00:16:06,400 --> 00:16:10,140
[Studerende] Annoncerne er relativt diskret. >> I hvilken forstand?

277
00:16:10,140 --> 00:16:16,370
[Uhørlig student svar] De har ikke lys på skærmen, ligesom bannere.

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

279
00:16:17,760 --> 00:16:25,030
Hvis du husker internettet fra 90'erne - >> [Malan] jeg var der. >> Han var der. [Latter]

280
00:16:25,030 --> 00:16:29,210
Du kan måske huske blinkende GIF'er baggrunde, funklende 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 virkelig ikke et eksempel på et godt design

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

284
00:16:36,690 --> 00:16:39,590
The Yale kunst hjemmeside bruges til at have animerede GIF'er som deres baggrund

285
00:16:39,590 --> 00:16:41,800
og du kunne ikke læse noget på siden,

286
00:16:41,800 --> 00:16:44,870
men jeg gætte nogen rent faktisk talte med dem, og nu er det en smule anderledes.

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

288
00:16:48,940 --> 00:16:56,020
Lige stor, blot - Ja. Okay.

289
00:16:56,020 --> 00:17:00,560
>> En del af det er også at gøre din side muligvis meget minimalistisk og meget forståeligt

290
00:17:00,560 --> 00:17:05,690
så ting på siden flow på en måde, der er meget logisk og ikke komme i vejen for hinanden.

291
00:17:05,690 --> 00:17:11,849
Hvilke mulige andre ting er gode om Facebook eller dårligt om Facebook?

292
00:17:11,849 --> 00:17:15,730
Lad os bare få et design samtale her.

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

294
00:17:21,339 --> 00:17:25,640
[Studerende] Den nye Timeline system giver dig mulighed for at søge personens profil om deres 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 lader dig stilk dine venner

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

298
00:17:35,160 --> 00:17:38,060
Timeline er godt, fordi det lader dig filtrere gennem indhold meget hurtigere,

299
00:17:38,060 --> 00:17:41,500
det kan du finde ting, som ellers ville have taget dig en virkelig lang tid at finde

300
00:17:41,500 --> 00:17:45,840
bare at rulle op og ned, op, op, op, op, op, ligesom gå tilbage i tiden.

301
00:17:45,840 --> 00:17:48,910
Men så er der også en slags downside til at med hensyn til brugerens oplevelse.

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

303
00:17:51,190 --> 00:17:56,780
Big ord, der begynder med P-R. >> [Studerende] Privacy. >> Privacy, right?

304
00:17:56,780 --> 00:17:59,970
Privatlivets fred er en kæmpe brugeroplevelse spørgsmål.

305
00:17:59,970 --> 00:18:07,190
Dette er en af ​​de ting jeg hader mest om Facebook nu. [Latter]

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

307
00:18:09,000 --> 00:18:11,380
David var ikke klar over dette rent faktisk er sket indtil i går.

308
00:18:11,380 --> 00:18:14,560
Så nu ved han, at hver gang jeg chatte ham jeg ved, at han har været ignorerer mig.

309
00:18:14,560 --> 00:18:16,880
[Malan] Den akavet del var jeg faktisk ignorerede ham,

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

311
00:18:21,040 --> 00:18:24,030
Privatlivets fred er et enormt problem.

312
00:18:24,030 --> 00:18:28,670
Kan nogen her fortælle mig hvad der kunne være dårligt om Facebook privatliv

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

314
00:18:32,270 --> 00:18:37,240
Hvad er det særligt svært at gøre med hensyn til Facebook privatliv?

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

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

317
00:18:43,930 --> 00:18:46,170
Right. Præcis, for at skjule dine billeder fra bestemte personer.

318
00:18:46,170 --> 00:18:51,290
De har denne lille, lille knap i øverste højre, hvor du kan skifte privatlivets fred for et foto.

319
00:18:51,290 --> 00:18:56,360
Deres privatliv muligheder er meget varieret mellem forskellige former for menuer.

320
00:18:56,360 --> 00:18:59,510
>> De har fået en meget bedre om det for nylig, men det plejer at være tilfældet

321
00:18:59,510 --> 00:19:04,870
at når du ønskede at forhindre dine venner i at se billeder,

322
00:19:04,870 --> 00:19:08,280
ville du nødt til at gå gennem en meget kompliceret 5-trins proces for at være ligesom,

323
00:19:08,280 --> 00:19:11,150
Lad mig på dette link, lad mig klik igen, lad mig klik igen,

324
00:19:11,150 --> 00:19:13,420
Lad mig angive, hvilke folk kan ikke se mine billeder.

325
00:19:13,420 --> 00:19:17,250
Det er ikke særlig god på Facebooks side

326
00:19:17,250 --> 00:19:20,530
fordi så meget om brugerens oplevelse faktisk give dem frihed

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

328
00:19:22,460 --> 00:19:25,550
Vi kalder denne bruger kontrol og frihed.

329
00:19:25,550 --> 00:19:31,090
Hvis du ikke lader dine brugere gør det på en måde, der er effektiv og intuitiv,

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

331
00:19:34,570 --> 00:19:38,200
 Vil du fyre gerne sige noget om Facebook?

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

333
00:19:41,420 --> 00:19:46,290
[Ong] Du kan ikke slå dette fra, og det er en enorm usability fejl på den del af Facebook.

334
00:19:46,290 --> 00:19:49,410
Denne funktion - jeg faktisk kiggede ind i det i går -

335
00:19:49,410 --> 00:19:53,940
det er enten, at du ikke kan gøre det, eller det er begravet et eller andet sted meget, meget dyb

336
00:19:53,940 --> 00:19:58,050
i fordybningerne i Facebook, fordi jeg ikke kan finde ud af at deaktivere denne funktion på alle.

337
00:19:58,050 --> 00:20:00,400
[Malan] Men nogle gange disse beslutninger er ikke indlysende

338
00:20:00,400 --> 00:20:03,890
fordi du fyre har givet os en masse nyttig feedback på forskellige CS50 ansøgninger

339
00:20:03,890 --> 00:20:05,710
og hjemmesider, kurset anvender.

340
00:20:05,710 --> 00:20:10,260
Vi har ikke gennemført alle disse ønsker og forslag.

341
00:20:10,260 --> 00:20:14,550
>> En del af dette er for at få så mange anmodninger, at det er en funktion af tiden,

342
00:20:14,550 --> 00:20:17,070
men nogle gange er vi bare gøre en bevidst beslutning lignende,

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

344
00:20:19,830 --> 00:20:24,350
Så hvordan kan du faktisk beslutte, hvad du skal gøre, hvis dine brugere synes du skal gøre noget

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

346
00:20:28,110 --> 00:20:32,360
Det er en fin balance mellem faktisk lytter til, hvad dine brugere siger

347
00:20:32,360 --> 00:20:35,840
og rent faktisk at have en form for linje, hvor du siger,

348
00:20:35,840 --> 00:20:37,750
"Vi kommer ikke til at gøre, hvad disse brugere siger."

349
00:20:37,750 --> 00:20:42,520
Og i særdeleshed, tror jeg, at der var et citat af Henry Ford, der opsummerer denne op temmelig godt.

350
00:20:42,520 --> 00:20:47,130
"Hvis jeg havde spurgt folk, hvad de ønskede, ville de have sagt, at de ville have hurtigere heste."

351
00:20:47,130 --> 00:20:51,840
Kan nogen sortere af drille hinanden, hvad det citat egentlig betyder?

352
00:20:51,840 --> 00:20:56,060
Det er ikke bare, at brugerne ved, hvad de vil,

353
00:20:56,060 --> 00:20:59,180
men det er mere, at -

354
00:20:59,180 --> 00:21:02,720
[Studerende] De ved ikke, hvad der er muligt.

355
00:21:02,720 --> 00:21:06,140
I del de ikke ved hvad der er muligt.

356
00:21:07,880 --> 00:21:11,440
Drille at udover en lille smule mere. Hvad mener du med det?

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

358
00:21:21,340 --> 00:21:25,770
Det er godt. Hvad jeg tror, ​​vi prøver at sige her er, at folk ved, hvad de vil have.

359
00:21:25,770 --> 00:21:28,050
De vil have hurtigere heste.

360
00:21:28,050 --> 00:21:29,840
Hvad de virkelig ønsker, er evnen til at bevæge sig hurtigere,

361
00:21:29,840 --> 00:21:32,310
men de ikke rigtig kender mediet til at nå det.

362
00:21:32,310 --> 00:21:36,330
Når du kommer til dine brugere og dine brugere fortælle dig noget

363
00:21:36,330 --> 00:21:39,700
og de fortæller dig, "Vi ønsker, at disse funktioner og disse funktioner, og disse funktioner,"

364
00:21:39,700 --> 00:21:42,650
du ikke ønsker at nødvendigvis tænker over, "Lad mig gå videre

365
00:21:42,650 --> 00:21:44,720
"Og gennemføre, hvad de udtrykkeligt siger,"

366
00:21:44,720 --> 00:21:48,610
men hvad du ønsker at tænke på er, "Hvad slags idéer kan jeg få ud af det?"

367
00:21:48,610 --> 00:21:50,450
Hvad vil de egentlig have?

368
00:21:50,450 --> 00:21:55,560
>> Og derfra hvad du kan gøre, er at designe noget, der opfylder disse anmodninger

369
00:21:55,560 --> 00:22:00,340
men ikke nødvendigvis på den måde, at brugeren forventer, at være opfyldt.

370
00:22:00,340 --> 00:22:03,830
Så for noget afsluttende projekter i meget faste priser,

371
00:22:03,830 --> 00:22:07,900
hvad er en nyttig heuristisk når det kommer til at gøre noget bedre,

372
00:22:07,900 --> 00:22:10,630
især hvis designeren har denne arrogance om ham

373
00:22:10,630 --> 00:22:14,360
hvor du slags vide hvad der er bedst, kan du tage input fra dine brugere,

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

375
00:22:16,580 --> 00:22:21,610
I sidste projekter, meget konkret, hvad producerer optimale resultater her?

376
00:22:21,610 --> 00:22:25,030
Hvad producerer optimale resultater - og jeg vil gå over dette i en anden -

377
00:22:25,030 --> 00:22:29,190
er denne proces med at udvikle og derefter teste og derefter iteration.

378
00:22:29,190 --> 00:22:32,020
Hvad jeg mener med test er som regel, når du designe noget

379
00:22:32,020 --> 00:22:36,970
du synes, det er temmelig godt, som, "Jeg er sådan en stor designer. Alle vil elske det her."

380
00:22:36,970 --> 00:22:41,600
Og så skal du sætte det derude, og folk ikke rigtig lide det eller anden grund.

381
00:22:41,600 --> 00:22:46,820
Hvad du skal gøre, er du nødt til at tage de dele af ting, som folk gør ligesom

382
00:22:46,820 --> 00:22:49,180
og forny de ting, som folk ikke kan lide.

383
00:22:49,180 --> 00:22:53,080
Det lyder som en meget indlysende proces, men denne proces af konstant iteration

384
00:22:53,080 --> 00:22:55,980
på toppen af ​​hvad du allerede har bygget, er en proces, der hjælper dig

385
00:22:55,980 --> 00:22:59,730
ikke blot forbedre dine egne design færdigheder, men også hjælper dig med at forfine design

386
00:22:59,730 --> 00:23:03,790
så folk rent faktisk sætter pris på dit produkt endnu mere, end de gjorde før.

387
00:23:03,790 --> 00:23:07,390
>> Jeg vil gå over mere konkrete eksempler på, hvad du kan rent faktisk gør.

388
00:23:07,390 --> 00:23:11,390
Som en slags sidste eksempel på et produkt, så lad os se på KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK når det kom ud var meget, meget populære.

390
00:23:14,970 --> 00:23:18,760
Kan nogen gætte hvorfor?

391
00:23:18,760 --> 00:23:20,950
Hvad er den slags ting, du godt kan lide ved dette, hvis du har brugt det

392
00:23:20,950 --> 00:23:23,990
eller hvad er den slags ting, du ikke kan lide?

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

394
00:23:31,590 --> 00:23:34,730
Det er en del af det er at lade brugeren have en forespørgsel, der er mere ekspansiv

395
00:23:34,730 --> 00:23:38,150
end en meget restriktiv en som "Du er nødt til at vælge din startdato

396
00:23:38,150 --> 00:23:39,810
"Og du er nødt til at vælge din slutdato."

397
00:23:39,810 --> 00:23:44,910
I virkeligheden lader det du være fleksibel om det, og det giver dig alle de flyvninger i dette område.

398
00:23:44,910 --> 00:23:46,730
Noget andet?

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

400
00:23:50,530 --> 00:23:53,330
De gør omfatte gebyrer i prisen.

401
00:23:53,330 --> 00:23:56,720
De skatter og ting faktisk gå lige ind denne pris i øverste venstre hjørne

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

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

404
00:24:03,280 --> 00:24:06,200
Noget andet? Ja.

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

406
00:24:10,140 --> 00:24:14,610
Jeg er ikke sikker på, om de rent faktisk lade dig gøre det.

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

408
00:24:18,310 --> 00:24:23,360
Det kunne være en interessant ting, hvis du ønsker at lægge mere vægt på bestemte filtre

409
00:24:23,360 --> 00:24:27,000
således at de skubber resultater relateret til dette filter til toppen.

410
00:24:27,000 --> 00:24:31,920
Men kan nogen fortælle mig, hvad der er så specielt ved denne venstre side?

411
00:24:31,920 --> 00:24:39,540
Hvordan har du traditionelt kigge op en flyvning på en internettjeneste, før dette?

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

413
00:24:44,650 --> 00:24:47,530
[Studerende] Hver flyselskab. >> Yeah. Hvert flyselskab har sin egen hjemmeside.

414
00:24:47,530 --> 00:24:50,110
Det konsoliderer ting. Og?

415
00:24:50,110 --> 00:24:52,190
[Studerende] Du ved præcis, hvad tid du tager afsted.

416
00:24:52,190 --> 00:24:54,460
Du ved præcis, hvad tid du forlader,

417
00:24:54,460 --> 00:24:59,380
men relateret til filtrene i særdeleshed.

418
00:25:00,710 --> 00:25:03,540
Lad mig trække op KAYAK.

419
00:25:11,490 --> 00:25:14,020
Åh Gud, pop-ups. Bad brugeroplevelse.

420
00:25:14,020 --> 00:25:17,230
Hvad sker der, når jeg flytter denne skyder?

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

422
00:25:21,010 --> 00:25:23,440
Det er noget, der er meget vigtigt.

423
00:25:23,440 --> 00:25:25,380
Før dette, når du ønskede at slå op en flyvning

424
00:25:25,380 --> 00:25:28,410
du havde at sætte i dit input placering, dit output placering, tryk på Søg,

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

426
00:25:31,190 --> 00:25:34,120
Hvis du ønskede at ændre din forespørgsel, ville du nødt til at trykke tilbage to gange,

427
00:25:34,120 --> 00:25:39,770
indtaste i en ny forespørgsel fra bunden, og derefter gøre det igen og igen.

428
00:25:39,770 --> 00:25:43,910
Det gode ved sådan noget er det bruger en meget [uforståelige] ting i midten.

429
00:25:43,910 --> 00:25:46,230
Når du gør noget som dette, det skyder en anmodning

430
00:25:46,230 --> 00:25:48,420
og det bringer dig alle resultaterne med det samme.

431
00:25:48,420 --> 00:25:51,680
Denne form for øjeblikkelig feedback er noget, der gjorde KAYAK vildt populære

432
00:25:51,680 --> 00:25:55,910
fordi det er virkelig nemt for mig bare at ændre min forespørgsel

433
00:25:55,910 --> 00:25:58,890
og at finde ud af de ting, der er omkring et bestemt område

434
00:25:58,890 --> 00:26:01,950
uden at skulle gå frem og tilbage, frem og tilbage, frem og tilbage.

435
00:26:01,950 --> 00:26:05,200
Så disse er alle mulige ting, du ønsker at tænke på, når du designer din hjemmeside.

436
00:26:05,200 --> 00:26:08,930
Hvordan kan jeg gøre det meget effektivt for mine brugere til at gå igennem, hvad de arbejder med

437
00:26:08,930 --> 00:26:13,010
og at komme til deres endelige mål så hurtigt som muligt?

438
00:26:13,010 --> 00:26:16,430
[Malan] Og til Josefs punkt tidligere om brugerne ikke nødvendigvis at vide, hvad de ønsker,

439
00:26:16,430 --> 00:26:18,640
baseret på, hvad du fyre nu kender HTML

440
00:26:18,640 --> 00:26:22,780
og du har afkrydsningsfelter, radioknapper, vælge menuer, indtastningsfelter og lignende,

441
00:26:22,780 --> 00:26:26,140
hvordan ville du gennemfører begrebet plukke et starttidspunkt for en flyvning?

442
00:26:26,140 --> 00:26:30,030
>> Hvilke af disse forskellige UI mekanismer ville du bruge?

443
00:26:30,030 --> 00:26:34,100
Hvis du bare vide mængden af ​​HTML, der blev undervist før

444
00:26:34,100 --> 00:26:39,070
og du kender de input er radioknapper, afkrydsningsfelter, drop-nedture, og indtastningsfeltet,

445
00:26:39,070 --> 00:26:43,320
hvad ville dit naturlige valg har været til plukning datoer?

446
00:26:43,320 --> 00:26:48,670
[Elev] Input. >> Input. Eller måske endda en drop-down med alle de datoer, right?

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

448
00:26:53,170 --> 00:26:55,500
du kan gøre denne proces langt mere intuitiv med en skyder

449
00:26:55,500 --> 00:27:01,020
fordi tiden er kontinuerlig, og folk normalt ikke tænker på det i form af diskrete bidder.

450
00:27:01,020 --> 00:27:04,950
Ok. Sidste ting.

451
00:27:04,950 --> 00:27:07,370
Ti usability heuristikker.

452
00:27:07,370 --> 00:27:10,820
Alle de ting, vi talte om formentlig falder ind under en af ​​disse kategorier.

453
00:27:10,820 --> 00:27:14,420
Hvis du går til dette link, som områderne vil blive lagt online,

454
00:27:14,420 --> 00:27:18,900
vil du faktisk være i stand til, da du designe dit websted, husk da disse heuristik i tankerne

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

456
00:27:21,330 --> 00:27:26,610
For dine projekter, jeg hvad foreslår du gøre for at designe din app bedre

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

458
00:27:28,850 --> 00:27:32,150
Når du tænker på din ansøgning, meget hurtigt at skitsere, hvad du vil have det til at ligne

459
00:27:32,150 --> 00:27:36,230
og sørge for alle boksene er anbragt på en måde, der er meget intuitiv for brugeren at anvende

460
00:27:36,230 --> 00:27:39,820
og endda vise disse papir prototyper til dine venner og begynde fokusgrupper.

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

462
00:27:44,230 --> 00:27:47,650
og vise dem nye skærme at se, om de rent faktisk forstår, hvad der foregår.

463
00:27:47,650 --> 00:27:50,680
>> Hvad du ønsker at gøre er at give dem en opgave, motivere denne opgave,

464
00:27:50,680 --> 00:27:53,270
og bare give dem den app og lad dem bruge det.

465
00:27:53,270 --> 00:27:56,530
Må ikke give dem instruktioner ud over dette.

466
00:27:56,530 --> 00:28:00,920
Du ønsker at rent faktisk lade dem interagere med din app på en måde, der lader dig se

467
00:28:00,920 --> 00:28:03,870
hvordan de ville bruge det, hvis du ikke stod ved siden af ​​dem.

468
00:28:03,870 --> 00:28:05,250
Og det er meget vigtigt.

469
00:28:05,250 --> 00:28:08,780
Det vil give dig masser af indsigt, at folk får omkring bestemte ting

470
00:28:08,780 --> 00:28:10,560
på en måde, jeg ikke havde til hensigt dem til?

471
00:28:10,560 --> 00:28:14,680
Er de ved hjælp af bestemte UI mekanismer på skærmen

472
00:28:14,680 --> 00:28:17,490
på en måde, der er slags Hacky?

473
00:28:17,490 --> 00:28:22,020
Jeg havde ikke til hensigt for dem at gøre det på den måde.

474
00:28:22,020 --> 00:28:23,940
Og når du er færdig med det, hvad vil du gøre?

475
00:28:23,940 --> 00:28:26,010
Dit design klipper, right?

476
00:28:26,010 --> 00:28:29,600
Hvad du ønsker at gøre, er du ønsker at udvikle og derefter gøre denne proces igen.

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

478
00:28:32,110 --> 00:28:36,630
udvikle, afprøve, udvikle, teste, gentage, om og om og fremad.

479
00:28:36,630 --> 00:28:39,720
Design er en meget iterativ proces i denne forstand.

480
00:28:39,720 --> 00:28:43,280
Du faktisk nødt til at bygge noget, og derefter indse ting om det

481
00:28:43,280 --> 00:28:46,520
at du ikke var klar før, og gå tilbage og forbedres fra det.

482
00:28:46,520 --> 00:28:50,890
Nu, som for udviklingen del, er det, hvad Tommy vil vise dig efter pausen

483
00:28:50,890 --> 00:28:53,220
og hvordan du kan være i stand til at gennemføre noget som autofuldførelse

484
00:28:53,220 --> 00:28:56,610
på en måde, er forholdsvis enkel.

485
00:28:57,440 --> 00:28:59,550
[Malan] Som Tommy opstiller her, et spørgsmål så.

486
00:28:59,550 --> 00:29:03,780
En masse af de tidligste websites - og da sagde Josef 1990'erne stil hjemmeside,

487
00:29:03,780 --> 00:29:07,640
Det var implementeringer, hvor, hvis du ønskede at vælge et starttidspunkt og et sluttidspunkt,

488
00:29:07,640 --> 00:29:10,380
helt ærligt, tilbage i dag, og selv om nogle hjemmesider i dag,

489
00:29:10,380 --> 00:29:13,220
den måde du gør dette, er du vælger en time fra en drop-down,

490
00:29:13,220 --> 00:29:15,910
du vælger minutter fra en drop-down, måske du vælger AM, PM

491
00:29:15,910 --> 00:29:17,440
og så du kan gøre dette 3 gange mere.

492
00:29:17,440 --> 00:29:19,920
Og så med 6 klik og måske nogle rulle

493
00:29:19,920 --> 00:29:24,000
din bruger kan faktisk give en form for dato og / eller tidsinterval i denne forstand.

494
00:29:24,000 --> 00:29:27,920
>> Så absolut suboptimal og alligevel hidtil har vi ikke set nogen udtryksfulde muligheder

495
00:29:27,920 --> 00:29:30,330
på et af de sprog, vi har kigget på at gøre noget mere sexet

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

497
00:29:32,620 --> 00:29:36,290
Men hvis du tænker tilbage til uge 0, når vi talte om Scratch,

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

499
00:29:39,080 --> 00:29:42,700
Du virkelig bare havde disse grundlæggende som loops og betingelser og lignende.

500
00:29:42,700 --> 00:29:46,910
Så slags bare tænke meget abstrakt nu, uafhængigt af de oplysninger om HTML,

501
00:29:46,910 --> 00:29:51,260
hvad der virkelig foregår med noget som dette starttidspunkt og sluttidspunkt skyderen?

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

503
00:29:54,960 --> 00:29:59,220
og begynde at trække, programmeringsmæssigt, hvad er det du ønsker at være i stand til at gennemføre

504
00:29:59,220 --> 00:30:01,000
at få til at ske?

505
00:30:01,000 --> 00:30:04,920
Hvilke spørgsmål, hvad boolske udtryk, du ønsker at være i stand til at spørge?

506
00:30:04,920 --> 00:30:06,930
Hvad der virkelig foregår? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Studerende] Hvor er markørens position? >> Godt. Hvor er markørens position?

508
00:30:10,080 --> 00:30:11,970
Det var noget vi behov for at udtrykke tilbage i Scratch,

509
00:30:11,970 --> 00:30:14,690
hvorvidt det var baseret på placering eller endda farve eller lignende.

510
00:30:14,690 --> 00:30:18,410
Du husker muligvis nogensinde så kortvarigt på mandag var der alle disse ting kaldet begivenheder

511
00:30:18,410 --> 00:30:22,370
i verden af ​​internettet, så og der 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å indse, at selv disse ting, vi har taget for givet på nettet

514
00:30:29,130 --> 00:30:32,190
med sites som Facebook og Gmail, selvom du ikke har nogen idé

515
00:30:32,190 --> 00:30:34,890
hvordan ville du muligvis implementere det fordi der er intet selv ligesom det i forelæsning

516
00:30:34,890 --> 00:30:38,570
eller Problem Set 7, indse, at med netop disse samme nøgletal,

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

518
00:30:41,090 --> 00:30:44,010
med de grundlæggende HTML input, som vi har kigget på hidtil

519
00:30:44,010 --> 00:30:47,690
og i et øjeblik med de programmatiske mekanismer, Tommys om at indføre

520
00:30:47,690 --> 00:30:51,300
kan du begynde at udtrykke dig, ligesom du gjorde i uge 0

521
00:30:51,300 --> 00:30:53,800
ved meget intuitivt at trække og slippe.

522
00:30:53,800 --> 00:30:58,950
>> Så med det sagt, Tommy MacWilliam og nogle nye puslespilsbrikker for os til web.

523
00:30:58,950 --> 00:31:03,450
Ok. Mit navn er Tommy og jeg har tænkt mig at tale om JavaScript.

524
00:31:03,450 --> 00:31:07,150
Bare en disclaimer: Jeg er af den opfattelse, at JavaScript er den bedste programmeringssprog

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

526
00:31:09,010 --> 00:31:11,940
Der er masser af folk der er uenige med mig, men det er bare fantastisk.

527
00:31:11,940 --> 00:31:16,330
Når du går tilbage til C, hvis du nødt til at skrive C for en anden klasse eller nogle andre sprog,

528
00:31:16,330 --> 00:31:19,780
det er bare virkelig frustrerende i alle de lavniveau detaljer du skal få kørt ned i.

529
00:31:19,780 --> 00:31:23,050
Så hvis du nogensinde føler ked hvor irriterende C er at skrive,

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

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

532
00:31:27,980 --> 00:31:31,900
En stor del af magien i JavaScript kommer fra dens evne til at manipulere tingene

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

534
00:31:33,730 --> 00:31:38,520
Da vi skrev vores PHP-scripts, blev de henrettet på serveren,

535
00:31:38,520 --> 00:31:42,270
og i sidste ende, at PHP script formentlig udsende nogle HTML.

536
00:31:42,270 --> 00:31:45,860
Denne HTML blev sendt til kunden, og så det var det.

537
00:31:45,860 --> 00:31:50,180
Hvis PHP ønskede at tilføje en knap til en side, for eksempel, kan det ikke rigtig gøre det.

538
00:31:50,180 --> 00:31:54,350
Det ville have til at gøre en helt ny HTML-fil og sende den til browseren.

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

540
00:31:57,840 --> 00:32:00,840
og på grund af dette kan vi give meget mere øjeblikkelig feedback,

541
00:32:00,840 --> 00:32:06,150
som virkelig vil forbedre brugeroplevelsen på vores hjemmeside.

542
00:32:06,150 --> 00:32:09,330
Bare en hurtig resumé af JavaScript selectors.

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

544
00:32:11,590 --> 00:32:13,890
der kommer til at være repræsenteret i DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM huske er netop denne store træ, hvor elementer er relateret på denne store hierarki.

546
00:32:19,340 --> 00:32:21,810
Da vi arbejdede med databaser i Pset 7,

547
00:32:21,810 --> 00:32:26,280
en af ​​de første ting, vi har brug for at vide, hvordan at gøre, var forespørge i databasen.

548
00:32:26,280 --> 00:32:29,060
Vi har denne store brugere bord, og undertiden vi vil bare sige,

549
00:32:29,060 --> 00:32:33,260
"Jeg ønsker kun nogle af disse brugere, der matcher nogle betingelse."

550
00:32:33,260 --> 00:32:36,020
Tilsvarende når vi har DOM vi har brug for en måde at forespørge den.

551
00:32:36,020 --> 00:32:39,490
Vi har brug for en måde at sige: "Jeg vil have alle knapperne, der ligner dette

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

553
00:32:41,860 --> 00:32:44,330
Og disse vælgere tillader os at gøre det.

554
00:32:44,330 --> 00:32:45,690
Så bare en hurtig resumé.

555
00:32:45,690 --> 00:32:50,770
Denne første her, det # indsende, hvad der er at gå for at vælge? Er der nogen huske?

556
00:32:50,770 --> 00:32:54,880
[Uhørlig student svar] >> Ja, præcis.

557
00:32:54,880 --> 00:32:59,510
Dette vil vælge et element på den side, der har en ID på send.

558
00:32:59,510 --> 00:33:03,470
Og så at hash tag siger dette vælgeren kommer til at arbejde med ID'er.

559
00:33:03,470 --> 00:33:07,630
Hvad med den anden, det her. Centreret, hvad vil det vælge?

560
00:33:11,360 --> 00:33:15,180
Yeah. >> [Studerende] Klasse. >> Præcis. Dette skal nu til at vælge med klassen.

561
00:33:15,180 --> 00:33:18,840
Forskellen mellem ID og klasse her er generelt ID skal være unikt

562
00:33:18,840 --> 00:33:20,820
indenfor uanset plads, du søger over.

563
00:33:20,820 --> 00:33:23,080
Så hvis du ledte over en hel webside,

564
00:33:23,080 --> 00:33:27,740
du virkelig bør kun have 1 element med, at visse ID, så i dette tilfælde indsende.

565
00:33:27,740 --> 00:33:31,330
Med klasser, på den anden side kan man have mere end en bestanddel på den samme side

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

567
00:33:33,130 --> 00:33:36,580
Dette kan være nyttigt for at sige jeg ønsker at vælge alt, hvad der er centreret på siden

568
00:33:36,580 --> 00:33:38,450
snarere end blot 1 ting.

569
00:33:38,450 --> 00:33:40,310
>> Og endelig denne sidste her er lidt mere kompliceret,

570
00:33:40,310 --> 00:33:43,890
men hvad er dette vil vælge fra DOM?

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

572
00:33:48,810 --> 00:33:53,250
[Elev] Alt, hvad der er en tag. >> Vi har 2 dele her.

573
00:33:53,250 --> 00:33:58,070
Den anden del vil sige, at jeg vil vælge disse tags med et tag af input,

574
00:33:58,070 --> 00:34:00,730
så ethvert element, er et input-tag.

575
00:34:00,730 --> 00:34:03,080
Men jeg ønsker ikke at bare vælge alle indgange

576
00:34:03,080 --> 00:34:05,170
fordi noget som en submit knap kunne være en indgang

577
00:34:05,170 --> 00:34:08,409
og noget som en tekstboks kunne være en indgang.

578
00:34:08,409 --> 00:34:11,909
Så med disse firkantede parenteser jeg siger jeg kun ønsker at vælge de elementer

579
00:34:11,909 --> 00:34:14,110
der er af typen tekst.

580
00:34:14,110 --> 00:34:17,400
Et sted i min HTML-tag jeg har en attribut kaldet type,

581
00:34:17,400 --> 00:34:19,750
og værdien af ​​denne attribut skal være tekst.

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

583
00:34:21,340 --> 00:34:25,489
Det første ord i denne selector er form så jeg har et mellemrum og derefter dette input del.

584
00:34:25,489 --> 00:34:29,620
Hvad betyder det gøre, at sætte den form foran det?

585
00:34:33,409 --> 00:34:35,860
Dette vil stort set begrænse vores forespørgsel.

586
00:34:35,860 --> 00:34:38,510
Det kunne være tilfældet, at vi har nogle input på siden

587
00:34:38,510 --> 00:34:41,080
der er ikke efterkommere af en formular.

588
00:34:41,080 --> 00:34:46,150
Hvad dette vil gøre, er dette vil sige, at jeg kun ønsker input tags, der har et eller andet sted over dem

589
00:34:46,150 --> 00:34:49,030
nogle forælder element i en formular.

590
00:34:49,030 --> 00:34:52,100
Og så på den måde kan vi gøre disse mere hierarkiske forespørgsler

591
00:34:52,100 --> 00:34:55,000
så vi ikke bare nødt til at vælge alt matcher en given selector.

592
00:34:55,000 --> 00:35:00,760
Vi kan slags grænse rækkevidden af ​​denne forespørgsel til noget andet.

593
00:35:00,760 --> 00:35:04,000
Så nu, at vi ved, hvordan du vælger elementer på siden,

594
00:35:04,000 --> 00:35:06,780
lad os snakke lidt om AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX er en stadig meget trendy forkortelse for asynkron JavaScript og XML.

596
00:35:12,270 --> 00:35:15,640
Det bare så sker det, at XML er bare en måde at repræsentere data.

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

598
00:35:20,920 --> 00:35:26,220
Dybest set, hvad AJAX giver os mulighed for at gøre gøre HTTP-anmodninger

599
00:35:26,220 --> 00:35:28,620
af den sammenhæng, JavaScript.

600
00:35:28,620 --> 00:35:32,310
Når vi er i vores web-browser og vi navigerer rundt sider, og vi klikker på et link,

601
00:35:32,310 --> 00:35:37,790
hvad vores browser vil gøre, er at en HTTP-anmodning til uanset link vi klikker.

602
00:35:37,790 --> 00:35:41,670
Men det er ikke altid ideel, fordi hvis det er tilfældet, så som David sagde,

603
00:35:41,670 --> 00:35:45,220
vi altid nødt til at brugerne klikker på en Send-knappen eller klikke på et link

604
00:35:45,220 --> 00:35:50,380
for at gøre noget ske, at der kommer til at involvere en HTTP-anmodning.

605
00:35:50,380 --> 00:35:54,160
Så med AJAX kan vi gøre disse anmodninger på vegne af JavaScript.

606
00:35:54,160 --> 00:35:57,020
Det betyder, når brugeren interagerer med siden eller der sker noget,

607
00:35:57,020 --> 00:36:01,780
vi kan faktisk gøre en programmatisk anmodning til en anden PHP-fil på vores hjemmeside

608
00:36:01,780 --> 00:36:06,280
eller noget andet og hente de data, den pågældende fil spytter ud.

609
00:36:06,280 --> 00:36:09,860
Lad os tage et kig på et eksempel på AJAX.

610
00:36:09,860 --> 00:36:16,140
Dette er vores CS50 Finance side med som forhåbentlig nogle af os er fortrolige med.

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

612
00:36:21,790 --> 00:36:23,820
hvoraf jeg har givet denne formular et ID.

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

614
00:36:26,480 --> 00:36:31,910
Jeg har gjort dette bare fordi det kommer til at gøre det en lille smule nemmere at vælge fra DOM

615
00:36:31,910 --> 00:36:35,090
da jeg bare kan lave en meget simpel forespørgsel.

616
00:36:35,090 --> 00:36:38,960
Hvad jeg ønsker at gøre her er jeg ønsker at fastsætte nogle problem 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 at få et tilbud, jeg er nødt til at klikke på dette Få Citat knap,

619
00:36:45,700 --> 00:36:48,960
og det Få Citat knappen og derefter tager mig til en anden hel side.

620
00:36:48,960 --> 00:36:52,400
Og hvis jeg vil have et tilbud, jeg nødt til at ramme Back-knappen og derefter jeg skrive det i,

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

622
00:36:54,480 --> 00:36:56,840
Dette er virkelig ikke den bedste brugeroplevelse.

623
00:36:56,840 --> 00:37:01,570
Hvem ville virkelig bruge hjemmesiden, hvis det er så længe om at komme aktiekurserne?

624
00:37:01,570 --> 00:37:05,630
Så hvad vi ønsker at gøre med AJAX er at fjerne dette skridt for at gå til en separat side

625
00:37:05,630 --> 00:37:08,410
for at se resultaterne.

626
00:37:08,410 --> 00:37:11,240
>> Hvad vi virkelig kun beder om, er, at virkelig lille pris,

627
00:37:11,240 --> 00:37:14,240
og det er bare en rigtig lille mængde data.

628
00:37:14,240 --> 00:37:17,400
Så der er ingen grund for mig at gå en anden hele HTML-side,

629
00:37:17,400 --> 00:37:20,670
downloade en helt ny batch af HTML, måske hente nogle flere billeder,

630
00:37:20,670 --> 00:37:24,410
nogle andre CSS filer bare for mig at besvare dette meget enkle spørgsmål

631
00:37:24,410 --> 00:37:27,810
af, hvor meget koster denne bestand omkostninger.

632
00:37:27,810 --> 00:37:31,000
Med AJAX kan vi gøre dette til en hel del lettere.

633
00:37:31,000 --> 00:37:36,400
Vi ser herned, jeg forbinder i en JavaScript-fil, der hedder quote.js.

634
00:37:36,400 --> 00:37:40,140
Lad os faktisk åbne den pågældende fil. Ikke der.

635
00:37:42,610 --> 00:37:45,860
Alle mine JavaScript-filer vil blive placeret i HTML

636
00:37:45,860 --> 00:37:47,630
således at webbrowseren kan få adgang til det.

637
00:37:47,630 --> 00:37:50,330
Så har vi en separat mappe her for JavaScript,

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

639
00:37:54,340 --> 00:38:00,930
Øverst i denne fil dette står her, at jeg ønsker at vente på at hele siden skal indlæses

640
00:38:00,930 --> 00:38:04,830
før jeg forsøger at gøre noget. Hvorfor er det nødvendigt?

641
00:38:04,830 --> 00:38:08,650
Det viser sig, at det næste jeg har tænkt mig at gøre her er starten på udkig efter et element

642
00:38:08,650 --> 00:38:10,810
der matcher nogen selector.

643
00:38:10,810 --> 00:38:15,600
Hvis denne JavaScript nogensinde er udført før dette element er indlæst på siden,

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

645
00:38:17,820 --> 00:38:20,580
fordi jeg har tænkt mig at forsøge at vælge noget, der er der ikke endnu.

646
00:38:20,580 --> 00:38:23,780
Så denne linje op top siger jeg vil have dig til at vente, indtil alt er indlæst

647
00:38:23,780 --> 00:38:28,030
så vi er garanteret, at eventuelle elementer, jeg leder efter, er faktisk på siden.

648
00:38:29,730 --> 00:38:34,310
Denne dollartegn betyder her Jeg bruger biblioteket kaldet jQuery.

649
00:38:34,310 --> 00:38:38,570
Denne jQuery bibliotek giver os mulighed for at bruge disse vælgere, at vi bare kiggede på.

650
00:38:38,570 --> 00:38:44,010
Ved at sige $ derefter passerer ind som et argument dette # form-citat,

651
00:38:44,010 --> 00:38:47,910
Jeg er nu at vælge denne form, at vi bare tog et kig på.

652
00:38:47,910 --> 00:38:52,290
Nu har jeg en repræsentation af denne form i hukommelsen eller anden måde.

653
00:38:52,290 --> 00:38:56,760
>> På dette objekt nu, er denne repræsentation af formen

654
00:38:56,760 --> 00:38:58,890
Jeg er nu ved hjælp af en funktion kaldet til.

655
00:38:58,890 --> 00:39:02,710
Hvad denne funktion gør, er det kommer til at vedhæfte en hændelseshandler.

656
00:39:02,710 --> 00:39:06,310
Den begivenhed, vi vil lytte til er den submit begivenhed.

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

658
00:39:08,890 --> 00:39:11,730
denne begivenhed kommer til at skyde.

659
00:39:11,730 --> 00:39:16,390
Ved at hægte ind i dette, kan jeg nu tilsidesætte standardindstillingen opførsel af formularen.

660
00:39:16,390 --> 00:39:19,770
Uden denne JavaScript ville formularindsendelse til, hvad PHP-fil

661
00:39:19,770 --> 00:39:22,110
vi brugte i dette søgsmål attribut.

662
00:39:22,110 --> 00:39:25,440
Men i stedet, jeg nu siger, vent, vent, vent, jeg vil ikke have dig til faktisk at gøre det.

663
00:39:25,440 --> 00:39:31,140
Jeg ønsker, at dette skal ske, før du gå og prøv at underkaste sig nogle PHP-fil.

664
00:39:31,140 --> 00:39:32,870
Nu hvad vil jeg gøre?

665
00:39:32,870 --> 00:39:39,270
På dette punkt, jeg ønsker at bruge AJAX eller anden måde at indlæse i, hvad prisen af ​​bestanden er.

666
00:39:39,270 --> 00:39:44,170
Den første ting jeg har brug for at vide er, hvad bestand brugeren ser op.

667
00:39:44,170 --> 00:39:46,760
For at gøre, at jeg har tænkt mig at bruge en anden selector.

668
00:39:46,760 --> 00:39:49,020
Dette er den tredje vælgeren vi kiggede på før.

669
00:39:49,020 --> 00:39:54,460
Det siger, at jeg ønsker at starte denne form element med en id på form-citat.

670
00:39:54,460 --> 00:39:58,440
Derefter et sted inde i den form der være et input element

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

672
00:40:01,270 --> 00:40:05,460
Hvis vi ser tilbage på vores HTML, så vi, at vi havde et input [name = symbol].

673
00:40:05,460 --> 00:40:12,380
Det betyder, at det vil markere, at tekstboks, som brugeren er at skrive ind.

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

675
00:40:13,870 --> 00:40:17,360
Nu er vi bare nødt til at vide, hvad der er inde i den.

676
00:40:17,360 --> 00:40:20,290
For at gøre, at vi kan kalde denne metode her, det her. Val,

677
00:40:20,290 --> 00:40:23,240
og det siger jeg, hvad tekstboks, du har.

678
00:40:23,240 --> 00:40:28,160
Jeg vil have dig til at fortælle mig, hvad det er brugeren indtastede i denne tekstboks.

679
00:40:28,160 --> 00:40:34,440
Nu har vi en streng kaldet symbol, der er lig med hvad brugeren skrevet i.

680
00:40:34,440 --> 00:40:39,820
Det er dejligt. Vi kan bruge denne streng nu for at gøre vores anmodning.

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

682
00:40:42,450 --> 00:40:44,900
undtagen vi ikke længere vil være at vælge elementer,

683
00:40:44,900 --> 00:40:48,910
vi kommer til at kalde en anden funktion, der er givet os jQuery.

684
00:40:48,910 --> 00:40:54,810
Denne AJAX funktion er hvad der rent faktisk kommer til at gøre denne HTTP-anmodning.

685
00:40:54,810 --> 00:40:57,000
Så vi er nødt til at fortælle det et par ting.

686
00:40:57,000 --> 00:41:01,410
Den første ting, vi er nødt til at fortælle denne funktion er, hvor jeg ønsker, at anmodningen om at gå.

687
00:41:01,410 --> 00:41:08,910
Et sted i mit projekt har jeg denne fil inde i HTML mappe kaldet quote.php.

688
00:41:08,910 --> 00:41:15,150
Jeg kan få adgang til denne fil, så vi, ligesom dette, hvis jeg går til localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Jeg vil have min JavaScript til at gøre en anmodning til den pågældende side.

690
00:41:20,450 --> 00:41:22,920
Hvilken type anmodning nu?

691
00:41:22,920 --> 00:41:27,210
Vi så før, at den form har denne metode = "post" attribut,

692
00:41:27,210 --> 00:41:29,270
og det betyder, at det kommer til at gøre en POST anmodning,

693
00:41:29,270 --> 00:41:32,630
så det kommer ikke til at sætte noget i URL'en, snarere end en GET-anmodning,

694
00:41:32,630 --> 00:41:36,860
der ville bare blive fyret, hvis vi bare åbnede side med web browser, for eksempel.

695
00:41:36,860 --> 00:41:41,260
Nu har vi sagt, at jeg ønsker at gøre en HTTP POST-anmodning

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

697
00:41:44,840 --> 00:41:51,490
Når vi sender formularen, husk vi kunne få adgang til input elementer inde i denne formular

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

699
00:41:54,430 --> 00:41:58,710
Hidtil i den historie, vi har faktisk ikke sendt langs alle data endnu.

700
00:41:58,710 --> 00:42:00,640
Vi har bare sagt, at vi laver en AJAX anmodning

701
00:42:00,640 --> 00:42:03,200
og her er den type anmodning kan vi laver.

702
00:42:03,200 --> 00:42:07,090
Nu skal vi faktisk sende nogle data til siden.

703
00:42:07,090 --> 00:42:10,930
For at gøre, at vi kan bruge denne egenskab kaldet data.

704
00:42:10,930 --> 00:42:14,950
Værdien af ​​denne egenskab er faktisk et associativt array.

705
00:42:14,950 --> 00:42:19,390
Grunden til dette er det muligt for os at sende mere end bare 1 stykke data.

706
00:42:19,390 --> 00:42:24,750
Det er derfor, vi har disse krøllede parenteser her indlejret i disse andre krøllede parenteser.

707
00:42:24,750 --> 00:42:29,680
Tasterne i disse associative arrays vil være det samme

708
00:42:29,680 --> 00:42:32,630
som dem navnet egenskaber i vores formelementer.

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

710
00:42:35,740 --> 00:42:41,870
Det betyder min PHP side kan få adgang til disse data med $ _POST [symbol]

711
00:42:41,870 --> 00:42:44,640
ligesom vi gjorde før, da vi fik at indsende en formular.

712
00:42:44,640 --> 00:42:47,090
Og nu er de faktiske data, vi ønsker at sende

713
00:42:47,090 --> 00:42:50,790
bliver værdien indersiden af ​​dette associative array.

714
00:42:50,790 --> 00:42:54,070
>> Vi gemt denne tekst i en variabel kaldet symbol,

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

716
00:42:57,380 --> 00:43:01,380
og en værdi af, hvad brugeren har indtastet i.

717
00:43:01,380 --> 00:43:06,270
Nu har vi gjort denne HTTP-anmodning, vores PHP filen er udført,

718
00:43:06,270 --> 00:43:11,480
og det kommer til at sende nogle data tilbage nu til kunden, som netop har gjort denne anmodning.

719
00:43:11,480 --> 00:43:15,220
Nu er vi nødt til at reagere på, hvad serveren sagde til os.

720
00:43:15,220 --> 00:43:20,180
At gøre, at vi har denne sidste egenskab her kaldet succes.

721
00:43:20,180 --> 00:43:24,240
Værdien af ​​denne succes nøgle faktisk kommer til at være en funktion,

722
00:43:24,240 --> 00:43:26,910
og dette er en af ​​de virkelig seje ting, du kan gøre med JavaScript.

723
00:43:26,910 --> 00:43:31,720
Ikke alene kan du få int'er eller arrays som en værdi inde i en associativ array,

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

725
00:43:34,170 --> 00:43:36,380
Så ved at sige succes, dette er min nøgle.

726
00:43:36,380 --> 00:43:38,830
Et kolon siger her kommer værdien,

727
00:43:38,830 --> 00:43:41,810
og nu værdien af ​​dette er faktisk en funktion.

728
00:43:41,810 --> 00:43:44,460
Så vi behøver ikke at give denne funktion et navn i sig selv.

729
00:43:44,460 --> 00:43:48,820
Vi kan blot sige dette vil være en funktion. Det kommer til at tage 1 argument.

730
00:43:48,820 --> 00:43:51,190
Argumentet til denne funktion vil være

731
00:43:51,190 --> 00:43:54,460
uanset server har sendt os tilbage fra anmodningen.

732
00:43:54,460 --> 00:43:57,750
Ligesom når vores browser fremsætter en anmodning, serveren sender noget tilbage

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

734
00:43:59,060 --> 00:44:03,030
i forbindelse med AJAX vi lige lavet en forespørgsel, sendte server noget tilbage,

735
00:44:03,030 --> 00:44:07,110
og nu har vi det repræsenteret som en streng.

736
00:44:07,110 --> 00:44:11,280
Med denne streng jeg vil bare gerne vise, at på siden.

737
00:44:11,280 --> 00:44:14,040
For at gøre, at jeg har tænkt mig at have en sidste selector.

738
00:44:14,040 --> 00:44:17,570
Jeg ønsker at vælge elementet med ID prisen.

739
00:44:17,570 --> 00:44:20,710
Dette er blot en tom div, at jeg har lavet en på siden,

740
00:44:20,710 --> 00:44:26,640
og jeg ønsker at indstille indholdet af denne div til at være, hvad serveren sendte os tilbage.

741
00:44:26,640 --> 00:44:30,280
Jeg har faktisk modificeret quote.php en smule.

742
00:44:30,280 --> 00:44:33,460
>> Snarere end at kalde render og realisere nogle side,

743
00:44:33,460 --> 00:44:38,100
quote.php nu er simpelthen kommer til at udskrive værdien af ​​aktien som en streng.

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

745
00:44:41,880 --> 00:44:45,030
uanset aktiekursen er.

746
00:44:45,030 --> 00:44:50,170
En sidste ting vi skal gøre her, er bare sørg denne funktion returnerer falsk.

747
00:44:50,170 --> 00:44:53,560
Hvad dette siger er, at hvis jeg er inde i en hændelseshandler

748
00:44:53,560 --> 00:44:57,300
og at hændelseshandler returnerer false stedet for at returnere sand,

749
00:44:57,300 --> 00:45:01,510
det betyder, at jeg ikke ønsker den oprindelige begivenhed til at skyde.

750
00:45:01,510 --> 00:45:05,270
I dette tilfælde har vi, hvis vi ikke havde nogen JavaScript og indsendt en formular,

751
00:45:05,270 --> 00:45:08,280
vores web browser kommer til at sige, "Jeg har tænkt mig at sende disse data sammen,"

752
00:45:08,280 --> 00:45:10,130
og de kommer til at sende dig til en anden side.

753
00:45:10,130 --> 00:45:14,360
Fordi vi bruger AJAX nu, er der ingen grund til at sende brugeren til en anden side.

754
00:45:14,360 --> 00:45:17,920
Vi vil bare vise resultaterne dynamisk på samme side.

755
00:45:17,920 --> 00:45:21,460
Vi virkelig ikke vil have dem til at gå nogen steder, og jeg ønsker at bo på samme side.

756
00:45:21,460 --> 00:45:27,060
Så ved at returnere falsk, sikrer vi, at formularen ikke gøre det for os.

757
00:45:27,060 --> 00:45:31,170
Lad os tage et kig på, hvad det rent faktisk ser ud.

758
00:45:31,170 --> 00:45:34,180
Vores citat side ser ens ud.

759
00:45:34,180 --> 00:45:37,240
Lad mig trække op inspektøren hernede, så vi kan se, hvad der foregår.

760
00:45:37,240 --> 00:45:40,270
Gør det til en lidt mindre enorm.

761
00:45:40,270 --> 00:45:44,590
Husk, hvis vi åbner fanen Netværk, det er her vi kan se alle de HTTP-anmodninger

762
00:45:44,590 --> 00:45:47,570
der sker på siden.

763
00:45:47,570 --> 00:45:52,890
>> For et symbol lad mig skrive i AAPL og klik Få Citat.

764
00:45:52,890 --> 00:45:56,720
Nu har vi så, at en del af Apple koster nogle flere dollars

765
00:45:56,720 --> 00:46:00,410
bare dukkede op på siden, men URL'en ikke ændre på alle.

766
00:46:00,410 --> 00:46:04,570
Faktisk er her en HTTP-anmodning, som vi lige har lavet.

767
00:46:04,570 --> 00:46:09,980
Vi lavede en POST anmodning til quote.php. Det giver mening.

768
00:46:09,980 --> 00:46:12,800
Det er, hvad serveren sendte os tilbage.

769
00:46:12,800 --> 00:46:16,320
Det er ikke længere denne gigantiske HTML-dokument med billeder og sådan noget,

770
00:46:16,320 --> 00:46:20,920
det er bare en tekstlinje, og så må vi bare viste tekstlinjen.

771
00:46:20,920 --> 00:46:26,290
Hvis vi går tilbage til overskrifterne og se, hvad vi rent faktisk har sendt inde i denne HTTP-anmodning,

772
00:46:26,290 --> 00:46:33,950
vi kan se ned her, at vi sendte langs en nøgle symbol og en værdi på AAPL,

773
00:46:33,950 --> 00:46:36,430
hvilket er, hvad brugeren har indtastet i.

774
00:46:36,430 --> 00:46:39,230
Det er rart, men det er stadig lidt irriterende.

775
00:46:39,230 --> 00:46:42,490
Jeg har stadig nødt til at klikke på denne knap for at få aktiekursen.

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

777
00:46:45,880 --> 00:46:49,910
Google indset dette for lidt siden, da de implementeret Google Instant.

778
00:46:49,910 --> 00:46:53,590
Hvad Google Instant gør, er som du skriver det bare begynder at vise resultater for dig

779
00:46:53,590 --> 00:46:56,520
så du ikke behøver at bekymre sig om selv klikke på Søg.

780
00:46:56,520 --> 00:46:58,730
Faktisk, en sjov historie knyttet til denne.

781
00:46:58,730 --> 00:47:01,100
Når Google Instant kom ud, var folk som, "Whoa, det er super fantastisk."

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

783
00:47:02,540 --> 00:47:05,950
Og en elev ned på Stanford, der var 19 på det tidspunkt

784
00:47:05,950 --> 00:47:09,000
gjorde dette websted kaldet YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Alle YouTube Instant gør, er effektivt søge på YouTube med det samme.

786
00:47:13,170 --> 00:47:17,020
Så i stedet for at skulle gå til YouTube.com og ramte Søg,

787
00:47:17,020 --> 00:47:21,650
når jeg begynder at skrive ind på YouTube Instant noget CS50,

788
00:47:21,650 --> 00:47:25,320
vi kunne se her, at det er at forsøge at på en langsom internetforbindelse

789
00:47:25,320 --> 00:47:28,500
udfylde disse resultater bor.

790
00:47:28,500 --> 00:47:35,590
For at gøre, at vi faktisk kan gøre en meget simpel modifikation til vores quote.js fil.

791
00:47:35,590 --> 00:47:40,900
Lige nu er vi fastgøre denne begivenhed, når formularen er sendt.

792
00:47:40,900 --> 00:47:43,760
Vi har ikke rigtig lyst til at gøre brugeren indsende denne form længere,

793
00:47:43,760 --> 00:47:48,570
så lad os i stedet affyre denne begivenhed hver gang brugeren trykker på en tast.

794
00:47:48,570 --> 00:47:53,200
For at gøre dette lad os først ændre begivenheden fra underkaste sig keyup.

795
00:47:53,200 --> 00:47:55,740
Det betyder, at i stedet for at vente på den formular til at indsende,

796
00:47:55,740 --> 00:47:58,490
hver gang der trykkes på tasten, er noget vil ske.

797
00:47:58,490 --> 00:48:02,030
Det ikke længere giver mening at knytte denne keyup begivenhed til hele form.

798
00:48:02,030 --> 00:48:05,080
Vi virkelig kun bekymrer sig om det søgefelt.

799
00:48:05,080 --> 00:48:09,320
>> Hvis du vil vælge det nu, kan vi ændre dette for at være, snarere end form-citat,

800
00:48:09,320 --> 00:48:14,220
form-citat, og vi vil have en indgang (type = text) eller vi kunne sige (navn = symbol) -

801
00:48:14,220 --> 00:48:16,420
hvad vi vil.

802
00:48:16,420 --> 00:48:18,650
Nu er der en sidste ting, vi skal gøre.

803
00:48:18,650 --> 00:48:21,190
Husk hernede, da vi sagde return false

804
00:48:21,190 --> 00:48:24,370
vi sagde vi ikke ønsker, at standard-begivenhed til brand.

805
00:48:24,370 --> 00:48:26,390
Men det bare så sker det, at hvis vi deaktivere det nu,

806
00:48:26,390 --> 00:48:29,660
uanset hvad vi skriver i kommer ikke til at dukke op i browseren længere

807
00:48:29,660 --> 00:48:33,000
fordi det ville være standard opførsel for at skrive i en tekstboks.

808
00:48:33,000 --> 00:48:38,660
Vi ønsker ikke længere at tilsidesætte det, så lad os ødelægge denne return false.

809
00:48:38,660 --> 00:48:44,800
Hvis vi gemmer det og genindlæse siden, nu når jeg begynder at skrive AAPL

810
00:48:44,800 --> 00:48:50,160
vil du se, at aktiekursen på bunden her er ved at afslutte 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 sjov historie om YouTube Instant

813
00:48:55,860 --> 00:48:59,420
er, at studerende lige slags skrev det som en 1-nat-projektet,

814
00:48:59,420 --> 00:49:03,800
og den næste dag blev han tilbudt et job af YouTube CEO.

815
00:49:03,800 --> 00:49:10,610
Så så simpelt er det, du CS50 studerende, kan dine endelige projekter får du et job hos YouTube.

816
00:49:10,610 --> 00:49:14,720
Noget i den stil er en virkelig cool idé til et afsluttende projekt, right?

817
00:49:14,720 --> 00:49:18,170
Vi havde nogle eksisterende funktionalitet, som vi ønskede at integrere med.

818
00:49:18,170 --> 00:49:20,330
Vi forbedrer brugeroplevelsen en lille smule,

819
00:49:20,330 --> 00:49:24,340
og pludselig søger noget på YouTube Instant kunne være en hel del lettere

820
00:49:24,340 --> 00:49:27,290
end at søge efter det på regelmæssig YouTube.

821
00:49:27,290 --> 00:49:30,790
Så det er AJAX i en nøddeskal.

822
00:49:30,790 --> 00:49:34,860
>> I eksemplerne, at Joseph var viser, oplevede vi en masse autocompletes,

823
00:49:34,860 --> 00:49:39,250
og disse autocompletes er virkelig, virkelig praktisk, fordi vi ikke behøver at huske -

824
00:49:39,250 --> 00:49:41,770
For eksempel, hvis du ikke kan huske aktiekursen for Apple

825
00:49:41,770 --> 00:49:45,110
og vi bare ved det er aa noget, snarere end bare at sige til mig,

826
00:49:45,110 --> 00:49:48,740
"En del af denne ting koster så mange penge,"

827
00:49:48,740 --> 00:49:52,540
Jeg vil slags gerne vide, hvad bestandene starter med aa.

828
00:49:52,540 --> 00:49:58,340
Vi kan gøre, som virkelig pænt med Bootstrap bibliotek, der allerede er inkluderet

829
00:49:58,340 --> 00:50:01,380
indersiden af ​​CS50 Finance.

830
00:50:01,380 --> 00:50:09,390
Hvis du kommer herop til JavaScript-tag og rul ned til Typeahead,

831
00:50:09,390 --> 00:50:13,730
Dette er blot en nice plugin, at nogen allerede skrev for os,

832
00:50:13,730 --> 00:50:16,980
og vi kan sagtens bruge sin funktionalitet som denne.

833
00:50:16,980 --> 00:50:21,410
Jeg har skrevet i en A og her er en liste over nogle stater, der starter med A.

834
00:50:21,410 --> 00:50:25,360
Lad os sige, at jeg synes, det er virkelig cool, og det er tid for mig at medtage dette på min side.

835
00:50:25,360 --> 00:50:28,300
Det viser sig, at dette er virkelig, virkelig simpelt.

836
00:50:28,300 --> 00:50:32,810
Lad os springe over her til quote3.js.

837
00:50:34,890 --> 00:50:37,380
Min fil ser en lille smule anderledes.

838
00:50:37,380 --> 00:50:39,700
Hernede alle mine AJAX ting er den samme.

839
00:50:39,700 --> 00:50:43,170
Jeg ønsker at indlæse beholdningsdataene uden at skulle gå til en anden side.

840
00:50:43,170 --> 00:50:46,220
Men nu vil jeg bruge dette plugin.

841
00:50:46,220 --> 00:50:51,020
Den Bootstrap Dokumentationen har gode eksempler på, hvordan netop jeg kan gøre det.

842
00:50:51,020 --> 00:50:54,350
Jeg vil gerne sige, "Her er den indgang, som jeg gerne vil autofuldførelse på,"

843
00:50:54,350 --> 00:50:56,640
og jeg har tænkt mig at kalde denne funktion kaldet typeahead,

844
00:50:56,640 --> 00:50:59,730
og det kommer til at håndtere alle de Typeahead ting for os.

845
00:50:59,730 --> 00:51:02,090
Det vil initialisere listen, vil det gøre alle vores filtrering.

846
00:51:02,090 --> 00:51:06,680
Det eneste, den har brug for at vide er, hvad data, vi autocompleting på.

847
00:51:06,680 --> 00:51:10,480
Så jeg fandt ud af denne tast blot ved at læse dokumentationen og ser på eksemplerne.

848
00:51:10,480 --> 00:51:14,150
Hvis jeg giver det en nøgle kilde, værdien af ​​denne nøgle

849
00:51:14,150 --> 00:51:17,770
er blot nogle vifte af ting, jeg gerne vil Autofuldførelse.

850
00:51:17,770 --> 00:51:20,180
Denne variabel kom fra denne anden fil.

851
00:51:20,180 --> 00:51:23,400
Jeg åbner symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Dette symbols.js er bare det virkelig, virkelig store array indeholdende strenge

853
00:51:27,980 --> 00:51:32,080
af alle disse aktiesymboler fra NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Hvis jeg ønsker at springe tilbage til HTML, så jharvard, vhosts, globalhost, html, skabeloner,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Da der nu hedder quote3.js, lad mig ændre JavaScript-fil jeg også her.

857
00:51:50,910 --> 00:51:55,110
Nu har jeg quote3.js, så jeg har tænkt mig at indlæse i at separat JavaScript-fil,

858
00:51:55,110 --> 00:51:57,910
den, der har at Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Nu når jeg hopper tilbage til browseren, genindlæse siden, og jeg begynder at skrive aa,

860
00:52:04,430 --> 00:52:06,880
Der er min autocomplete. Og det var virkelig så simpelt er det.

861
00:52:06,880 --> 00:52:11,400
Jeg havde 1 linje kode, der bare sagde: "Her er de ting, jeg gerne vil autofuldførelse på,"

862
00:52:11,400 --> 00:52:16,590
og pludselig har jeg det virkelig, virkelig rart funktionalitet med ikke en hel masse indsats på alle.

863
00:52:16,590 --> 00:52:19,810
Som du udvikler hjemmesider og især den forreste ende side af tingene,

864
00:52:19,810 --> 00:52:21,840
du vil finde dette er tilfældet en masse.

865
00:52:21,840 --> 00:52:25,700
Der er en masse, masse, masse virkelig cool gratis biblioteker derude

866
00:52:25,700 --> 00:52:30,190
der gør det super nemt at gøre ting som dette.

867
00:52:30,190 --> 00:52:37,230
Kan nogen komme i tanke om nogen ulemper for blot autocompleting på denne store liste af symboler?

868
00:52:37,230 --> 00:52:41,580
Hvad kunne være noget, der er ikke den bedste med denne fremgangsmåde?

869
00:52:42,790 --> 00:52:45,960
Yeah. >> [Studerende] Tid, hvis du har en masse [uhørlig]

870
00:52:45,960 --> 00:52:50,420
Yeah. Lige nu er vi henter denne enorme JavaScript-fil, og der er en masse symboler.

871
00:52:50,420 --> 00:52:54,360
Og så hvis vi har et væld af ting, dette kunne slags øge latensen af ​​ikke blot at søge

872
00:52:54,360 --> 00:52:56,600
men også at downloade den faktiske fil.

873
00:52:56,600 --> 00:52:58,670
Great. Noget andet?

874
00:53:01,950 --> 00:53:05,280
Lige nu er der ingen reel følelse af relevans.

875
00:53:05,280 --> 00:53:08,190
Hvis jeg skriver i en A, de virksomheder, der dukker op her

876
00:53:08,190 --> 00:53:11,220
måske ikke de mest populære virksomheder, der starter med A.

877
00:53:11,220 --> 00:53:17,130
>> Før jeg kommer til Apple, kan det tage nogle flere tegn til at finde, hvad jeg leder efter.

878
00:53:17,130 --> 00:53:20,420
Denne autocomplete har ikke denne følelse af relevans.

879
00:53:20,420 --> 00:53:24,400
Det er bare at sige, "Alt, hvad der matcher jeg har tænkt mig at vise."

880
00:53:24,400 --> 00:53:30,510
I stedet for det, ville jeg gerne en eller anden måde integrere en vis betydning i mine søgninger.

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 forsøger at indtaste et symbol på Yahoo! Finans side

883
00:53:42,100 --> 00:53:52,310
og jeg begynder at skrive goog, jeg har denne fin lille liste over ting.

884
00:53:52,310 --> 00:53:57,100
Det er klart, det ligner Yahoo! Finans gør noget mere smart her.

885
00:53:57,100 --> 00:53:59,790
De har en vis relevans og de har også yderligere oplysninger

886
00:53:59,790 --> 00:54:01,430
ligesom navnet på bestanden.

887
00:54:01,430 --> 00:54:05,850
Det er noget, som jeg ikke rigtigt kan komme med blot min bestand liste over symboler.

888
00:54:05,850 --> 00:54:09,520
Jeg vil have denne, og så jeg har tænkt mig at tage det.

889
00:54:09,520 --> 00:54:11,790
For at gøre dette lad os gøre et par ting.

890
00:54:11,790 --> 00:54:15,580
Lad os først åbne inspektøren på denne side

891
00:54:15,580 --> 00:54:18,100
fordi vi så, at denne side ikke er ladning på alle,

892
00:54:18,100 --> 00:54:21,960
så det er formentlig ved hjælp af AJAX eller anden måde at være indlæse sine data.

893
00:54:21,960 --> 00:54:23,920
Vi kan finde ud af, hvilke data det er indlæst.

894
00:54:23,920 --> 00:54:28,390
Hvis jeg klikker på dette fanen Netværk, er disse vil være alle de anmodninger, der begynder at blive fyret.

895
00:54:28,390 --> 00:54:34,020
Nu, hvis jeg skriver i goo, kan vi se, at jeg har lige fået en ny HTTP-anmodning.

896
00:54:34,020 --> 00:54:37,490
Dette er sandsynligvis hvor de pågældende data kommer fra.

897
00:54:37,490 --> 00:54:41,990
Sure nok, hvis jeg ser på denne webadresse, som er en smule mærkeligt navn,

898
00:54:41,990 --> 00:54:46,930
Vi kan se, at dette er præcis, hvor Yahoo sender fra sine data fra.

899
00:54:46,930 --> 00:54:53,400
>> Jeg har oprettet en separat fil kaldet suggest.php, der er meget ens i ånd til opslag funktion.

900
00:54:53,400 --> 00:54:57,730
Det er dybest set kommer til at gøre en forespørgsel til Yahoos URL, komme tilbage nogle data,

901
00:54:57,730 --> 00:54:59,750
og sende det tilbage til mig.

902
00:54:59,750 --> 00:55:02,570
Nu, i stedet for at bruge denne store, enorm liste af symboler,

903
00:55:02,570 --> 00:55:05,280
Jeg kan bruge Yahoos pæne relevans ting,

904
00:55:05,280 --> 00:55:08,150
og jeg behøver ikke at hente det massive JavaScript-fil.

905
00:55:08,150 --> 00:55:12,040
Jeg vil kun trække ned de faktisk relevante aktiesymboler.

906
00:55:12,040 --> 00:55:13,960
Lad os hoppe ind i det.

907
00:55:13,960 --> 00:55:17,360
Så html, js. Vi er nu i quote4.

908
00:55:17,360 --> 00:55:22,120
Nu er vi ikke længere bruger den store liste af JavaScript-filer.

909
00:55:22,120 --> 00:55:24,430
Men der er en lille form for 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
Hvad det betyder, er, at når jeg laver et AJAX anmodning,

912
00:55:31,000 --> 00:55:36,490
så lige her på linie 8, er dette hvor min AJAX anmodning er faktisk fyret.

913
00:55:36,490 --> 00:55:40,370
Lad os sige nu har jeg noget kode ned her, kommer til at gøre nogle ting

914
00:55:40,370 --> 00:55:43,930
gerne advare brugeren eller ændre noget på siden.

915
00:55:43,930 --> 00:55:49,830
Hvad kommer ikke til at ske, er browseren ikke kommer til at vente på denne anmodning om at fortsætte

916
00:55:49,830 --> 00:55:53,480
før kommer ned og rammer denne linje.

917
00:55:53,480 --> 00:55:55,900
Det er den asynkrone del.

918
00:55:55,900 --> 00:55:58,400
Det kommer til at gøre denne anmodning og sige: "Når du er færdig,

919
00:55:58,400 --> 00:56:03,080
"Komme tilbage og kalde denne funktion, som jeg fortalte dig at ringe inde i succes."

920
00:56:03,080 --> 00:56:07,300
Det betyder, at vi kan ikke bare hente alle de bestande forhånd.

921
00:56:07,300 --> 00:56:10,300
Vi er nødt til at gøre anmodningen og vente på noget at vende tilbage.

922
00:56:10,300 --> 00:56:13,330
Det betyder, at før, kunne vi blot fortælle Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Her er en liste over ting, jeg vil have dig til autocomplete på."

924
00:56:15,580 --> 00:56:18,950
Vi kan ikke længere gøre det længere, fordi vi ikke kender

925
00:56:18,950 --> 00:56:21,780
hvad vi ønsker rent faktisk at autofuldførelse på.

926
00:56:21,780 --> 00:56:25,190
Heldigvis Bootstrap tænkte på dette, fordi de er smarte fyre derovre,

927
00:56:25,190 --> 00:56:30,160
og de faktisk gav os en anden måde at indlæse denne Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Før, at værdien af ​​denne kilde egenskab var netop denne store vifte af ting at autocomplete på.

929
00:56:35,630 --> 00:56:39,580
>> Nu kilden egenskaben er faktisk en funktion,

930
00:56:39,580 --> 00:56:44,580
og formålet med denne funktion er at regne ud, hvad de ting til Autofuldførelse er.

931
00:56:44,580 --> 00:56:48,730
Den måde, det kommer til at regne det ud, er det kommer til at spørge Yahoo! Finans

932
00:56:48,730 --> 00:56:51,750
hvad de bedste ting at autocomplete er.

933
00:56:51,750 --> 00:56:54,500
For at gøre, at jeg har tænkt mig at lave en meget lignende AJAX anmodning.

934
00:56:54,500 --> 00:56:59,010
Jeg har tænkt mig at anmode om denne side på suggest.php.

935
00:56:59,010 --> 00:57:01,360
Jeg vil sende langs symbolerne stadig.

936
00:57:01,360 --> 00:57:05,570
Og nu er min succes, Bootstrap dokumentation fortalte mig

937
00:57:05,570 --> 00:57:09,130
at det for at udfylde denne liste over de ting,

938
00:57:09,130 --> 00:57:14,370
alt hvad jeg behøver at gøre er gå i denne række nu til callback funktion.

939
00:57:14,370 --> 00:57:15,660
Men vent et øjeblik.

940
00:57:15,660 --> 00:57:20,240
Hvis dette skulle være et array og AJAX sender mig tilbage tekst,

941
00:57:20,240 --> 00:57:22,720
hvordan er det muligt?

942
00:57:22,720 --> 00:57:27,910
Dette introducerer en ny måde at udveksle data kaldes JSON.

943
00:57:27,910 --> 00:57:33,000
I dette tilfælde er vi ikke bare sender tilbage en simpel tekststreng.

944
00:57:33,000 --> 00:57:37,670
Nu vi har at gøre med dette mere komplekse liste af aktiesymboler.

945
00:57:37,670 --> 00:57:41,730
Disse aktiesymboler kan også omfatte ting som firmaets navn eller de aktuelle priser.

946
00:57:41,730 --> 00:57:47,550
Bare bruge en stor lang snor, der ikke er formateret på nogen forudsigelig måde

947
00:57:47,550 --> 00:57:51,970
kommer ikke til at være den bedste måde at få disse data fra Yahoos server til mig

948
00:57:51,970 --> 00:57:54,540
på en måde, som jeg nemt kan forstå.

949
00:57:54,540 --> 00:58:01,280
JSON er en teknologi, der udnytter hvordan vi skaber associative arrays i JavaScript.

950
00:58:01,280 --> 00:58:04,510
Det ser meget gerne et JavaScript associative array,

951
00:58:04,510 --> 00:58:06,600
og i virkeligheden, 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 grundlæggende et aftalt format til overførsel af data frem og tilbage.

954
00:58:15,020 --> 00:58:18,280
Her denne JSON objekt eller denne JSON associative array

955
00:58:18,280 --> 00:58:21,010
sender mig nogle oplysninger om et kursus.

956
00:58:21,010 --> 00:58:25,110
>> Nøglerne til dette array er ting som kursus, der har en værdi af CS50,

957
00:58:25,110 --> 00:58:29,140
og hernede kan vi se, at jeg kan have en værdi, der er et array.

958
00:58:29,140 --> 00:58:32,730
Jeg behøver ikke at gøre ting som frasortere strygere og lede efter kommaer

959
00:58:32,730 --> 00:58:35,330
og gøre skøre ting som dette.

960
00:58:35,330 --> 00:58:38,820
Da dette er deklareret i denne JSON format,

961
00:58:38,820 --> 00:58:43,510
JavaScript og jQuery allerede har funktioner til at konvertere en streng

962
00:58:43,510 --> 00:58:48,140
der ligner denne JSON til en egentlig JavaScript associativt array

963
00:58:48,140 --> 00:58:50,440
at vi kan arbejde med.

964
00:58:50,440 --> 00:58:56,660
Doing, der er så simpelt som at sige, at der ikke længere er denne fil, suggest.php,

965
00:58:56,660 --> 00:58:59,040
sende mig tilbage blot en tekststreng,

966
00:58:59,040 --> 00:59:01,950
men jeg ved, at det kommer til at sende mig tilbage JSON.

967
00:59:01,950 --> 00:59:06,760
Det betyder, at der JSON kan omdannes til et JavaScript associative array.

968
00:59:06,760 --> 00:59:10,830
Og så jQuery, vil jeg gerne have, at gøre det for mig.

969
00:59:10,830 --> 00:59:13,990
Det betyder, at denne reaktion parameter her,

970
00:59:13,990 --> 00:59:16,070
Dette er ikke længere bare en streng.

971
00:59:16,070 --> 00:59:19,860
Fordi vi har fortalt jQuery, at her kommer nogle JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery vil være smart nok til at sige, "Du ville JSON?"

973
00:59:22,950 --> 00:59:26,890
"Jeg har tænkt mig at konvertere det til et associativt array for dig."

974
00:59:26,890 --> 00:59:32,100
Lad os faktisk tage et kig på fanen Network, når vi har quote4.js.

975
00:59:32,100 --> 00:59:35,400
Vi vil ændre dette og genindlæs siden.

976
00:59:37,150 --> 00:59:41,250
Nu jeg har tænkt mig at skrive i en-en igen.

977
00:59:41,250 --> 00:59:45,600
Jeg har lavet et par anmodninger til suggest.php, men nu er denne reaktion,

978
00:59:45,600 --> 00:59:48,670
snarere end blot strengen, er det JSON.

979
00:59:48,670 --> 00:59:52,580
Så jeg har en åben klammeparentes sige: »Her kommer et associativt array."

980
00:59:52,580 --> 00:59:56,830
>> Den første og eneste nøgle i denne associative array kaldes symboler,

981
00:59:56,830 --> 01:00:00,240
og her er en opstilling af alle relevante symboler

982
01:00:00,240 --> 01:00:04,820
kommer nu fra Yahoo! Finance, ikke fra det gigantiske liste.

983
01:00:06,110 --> 01:00:10,630
Det er, hvordan jeg kan simpelthen udfylde denne Autofuldførelse plugin

984
01:00:10,630 --> 01:00:14,280
med nogle data, der er ikke kommer fra en lokal fil, der allerede forudbestemt

985
01:00:14,280 --> 01:00:17,490
men fra noget andet.

986
01:00:17,490 --> 01:00:21,160
Det viser sig, at vi faktisk kan drage fordel af en teknologi kaldet JSONP,

987
01:00:21,160 --> 01:00:27,420
eller JSON med polstring, vil der fjerne denne suggest.php mellemmand.

988
01:00:27,420 --> 01:00:34,010
Men i stedet for at gøre det, så lad os i stedet tage et kig på, hvordan jeg kan forbedre dette endnu mere.

989
01:00:34,010 --> 01:00:36,040
Jeg kan virkelig godt lide Bootstrap s Typeahead. Det er virkelig rart.

990
01:00:36,040 --> 01:00:39,570
Men vi får gode til JavaScript, og vi ønsker at slags gør det selv,

991
01:00:39,570 --> 01:00:43,870
måske tage et kig på, hvad dette plugin kunne gøre.

992
01:00:43,870 --> 01:00:46,500
Lad os ikke længere at anvende denne Typeahead ting,

993
01:00:46,500 --> 01:00:50,550
og lad os prøve at gøre denne liste over foreslåede bestande os selv.

994
01:00:50,550 --> 01:00:53,790
Her i quote6.php vi vil starte på samme måde.

995
01:00:53,790 --> 01:00:58,050
Hver gang nogen typer noget, vi ønsker at gøre en AJAX anmodning.

996
01:00:58,050 --> 01:01:01,590
Dette svarer til vores oprindelige CS50 Finance Instant.

997
01:01:01,590 --> 01:01:05,020
Snarere end at gøre en anmodning til quote.php,

998
01:01:05,020 --> 01:01:08,530
vi nu gør en anmodning til den samme fil som før, denne suggest.php,

999
01:01:08,530 --> 01:01:12,460
der er bare at trække data fra Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Igen, vi er stadig forventer JSON, men nu da Typeahead ikke gør dette for os,

1001
01:01:19,480 --> 01:01:24,850
vi også nødt til at sende langs den værdi, der er inde i den nuværende tekst boksen.

1002
01:01:24,850 --> 01:01:28,120
Nu ved vi, hvad de skal spørge Yahoo! Finance for,

1003
01:01:28,120 --> 01:01:34,160
og så nu her er den funktion, at vi ønsker at udføre, når anmodningen er fuldført.

1004
01:01:34,160 --> 01:01:36,520
Vi har ikke et plugin for at gøre listen for os,

1005
01:01:36,520 --> 01:01:40,630
så her er der vi skal faktisk kommer til at opbygge en liste over forslag.

1006
01:01:40,630 --> 01:01:44,850
For at gøre dette, meget gerne i PHP vi sammenkædet disse store strenge af HTML

1007
01:01:44,850 --> 01:01:48,170
så vi trykt dem, kan vi gøre nøjagtig de samme ting i JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Først vil vi starte denne streng kaldet forslag,

1009
01:01:51,850 --> 01:01:54,590
og denne streng er bare at indeholde nogle HTML.

1010
01:01:54,590 --> 01:01:58,320
Vi ønsker det skal være en liste over ting, så vi vil starte med denne liste tag,

1011
01:01:58,320 --> 01:02:03,340
og nu skal vi til at gentage over alle de symboler, der blev returneret tilbage til os.

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
Det er allerede et array for os. Det er virkelig cool.

1014
01:02:09,500 --> 01:02:13,790
Vi kan blot sige: "Jeg vil have dig til at tilføje et element på listen."

1015
01:02:13,790 --> 01:02:16,000
Vi vil sætte det ind et et element i siden af ​​det,

1016
01:02:16,000 --> 01:02:19,030
vi vil give det en klasse af forslag, så vi ved, hvad det er,

1017
01:02:19,030 --> 01:02:23,880
og nu her er det symbol, vi fik tilbage fra Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Når vi har oprettet et element for hver af de symboler, vi har fået tilbage,

1019
01:02:27,230 --> 01:02:30,100
Vi ønsker blot at lukke listen.

1020
01:02:30,100 --> 01:02:33,040
Så nu forslag repræsenterer dette lille HTML fragment

1021
01:02:33,040 --> 01:02:37,860
at når de sættes på en side vil være en liste over ting, vi leder efter.

1022
01:02:37,860 --> 01:02:41,070
Lad os nu rent faktisk sætte det på siden.

1023
01:02:41,070 --> 01:02:46,390
For at gøre, at jeg faktisk har lavet en anden tom div, og jeg har givet det en ID af forslag.

1024
01:02:46,390 --> 01:02:52,520
Meget ligesom vi sætter indholdet af div, der ville vise prisen på beholdningsdata,

1025
01:02:52,520 --> 01:02:58,600
vi nu bare ønsker at sætte indholdet af denne div til, hvad denne streng er

1026
01:02:58,600 --> 01:03:00,290
der indeholder disse symboler.

1027
01:03:00,290 --> 01:03:07,650
Ved at bruge denne HTML metode, er dette forslag variabel, denne streng, en perlerække af HTML.

1028
01:03:07,650 --> 01:03:13,490
Jeg vil have dig til at tage det HTML og sætte det ind i div kaldet forslag.

1029
01:03:13,490 --> 01:03:15,680
Vi har lige vedhæftet noget til DOM nu.

1030
01:03:15,680 --> 01:03:20,360
Vi har tilføjet nogle nye elementer til DOM, at vi nu kan vise på siden.

1031
01:03:20,360 --> 01:03:22,540
Lad os se hvad det ligner.

1032
01:03:22,540 --> 01:03:29,110
Hvis vi lægger i quote6 og nu kommer vi tilbage,

1033
01:03:29,110 --> 01:03:34,480
nu, når jeg begynder at skrive AAPL, vi ikke længere har denne Bootstrap autofuldførelse,

1034
01:03:34,480 --> 01:03:38,470
men vi har nu denne liste, som vi gjorde os selv.

1035
01:03:38,470 --> 01:03:43,230
Dette er en lille smule grimmere end Bootstrap Typeahead, for eksempel

1036
01:03:43,230 --> 01:03:45,580
men det gør tillade os at gøre en anden ting.

1037
01:03:45,580 --> 01:03:48,660
Da vi ledte på det Bootstrap plugin,

1038
01:03:48,660 --> 01:03:52,590
så vi, at når vi automatisk kompletteret, en af ​​de autocomplete værdier var AAPL.

1039
01:03:52,590 --> 01:03:54,820
Det er måske ikke være så hjælpsomme.

1040
01:03:54,820 --> 01:03:59,100
Som bruger, kan jeg ikke umiddelbart genkende alle de aktiesymboler.

1041
01:03:59,100 --> 01:04:02,370
Hvad er jeg nok mere tilbøjelige til at anerkende, er virksomhedens faktiske navne.

1042
01:04:02,370 --> 01:04:05,310
Så ville det ikke være rigtig nyttigt, hvis stedet for at sige AAPL

1043
01:04:05,310 --> 01:04:07,970
dette sagt noget som Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Fordi vi har rullet det os selv, kan vi virkelig nemt gøre det.

1045
01:04:12,240 --> 01:04:17,630
Lad os åbne vores sidste citat fil her, så quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Samme ting. Jeg har lige oprettet en anden PHP-fil, der vil vende tilbage til os mere end blot symboler.

1047
01:04:23,200 --> 01:04:25,550
Det vil også give os tilbage selskabets navne.

1048
01:04:25,550 --> 01:04:28,150
Og så gør vi det samme. Vi laver en AJAX anmodning.

1049
01:04:28,150 --> 01:04:32,370
Når anmodningen er afsluttet, vil vi udføre denne funktion her,

1050
01:04:32,370 --> 01:04:36,520
og denne funktion vil opbygge en stor streng af elementer.

1051
01:04:36,520 --> 01:04:39,520
Men forskellen her er, at værdien af ​​disse lister er ikke længere kun et symbol,

1052
01:04:39,520 --> 01:04:45,370
det er nu navnet.

1053
01:04:45,370 --> 01:04:47,070
Så vi har et lille problem.

1054
01:04:47,070 --> 01:04:51,590
Når vi bruger vores opslag, skal vi en eller anden måde passere det symbolet.

1055
01:04:51,590 --> 01:04:54,950
Vi kan ikke passere lookup noget som Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Vi er nødt til at passere det MSFT.

1057
01:04:57,900 --> 01:05:01,640
Når vi skriver HTML, vi har masser af nice indbyggede egenskaber.

1058
01:05:01,640 --> 01:05:05,440
En A kunne have tilknyttet en href eller en klasse.

1059
01:05:05,440 --> 01:05:08,230
Men hvad vi virkelig har brug for nu, er for hver af disse links

1060
01:05:08,230 --> 01:05:11,120
at have en aktiesymbol forbundet med det.

1061
01:05:11,120 --> 01:05:14,240
Der er ingen indbygget HTML attribut for lager symbol,

1062
01:05:14,240 --> 01:05:21,010
men heldigvis, HTML5 giver os mulighed for at skabe vores egne egenskaber til at være, hvad vi vil.

1063
01:05:21,010 --> 01:05:24,620
Ved at sige data-symbol, har jeg indført en ny attribut

1064
01:05:24,620 --> 01:05:29,350
hvis navn jeg lige gjort op, og det er okay, fordi jeg indledte det med disse data.

1065
01:05:29,350 --> 01:05:34,270
Vi kommer til at gemme inde i der et symbol fra lager nu.

1066
01:05:34,270 --> 01:05:39,590
Hvad det betyder, er, at selv om vi får vist værdien af ​​selskabets navn

1067
01:05:39,590 --> 01:05:43,380
inde i vores autofuldførelse, vi stadig huske symbol

1068
01:05:43,380 --> 01:05:47,110
der er tilknyttet hver virksomhed.

1069
01:05:47,110 --> 01:05:50,350
Den måde, vi laver, der er inde i dette element i sig selv.

1070
01:05:50,350 --> 01:05:52,930
Så det betyder, at vi er nødt til at lave en mere forandring.

1071
01:05:52,930 --> 01:05:57,090
Når vi klikker på det nu, er vi nødt til rent faktisk at drage fordel af symbolet attribut

1072
01:05:57,090 --> 01:06:00,220
snarere end blot sin værdi.

1073
01:06:00,220 --> 01:06:05,010
Hvis vi op igen, lægger vi en hændelseshandler for forslag.

1074
01:06:05,010 --> 01:06:09,280
Hvis ét af disse forslag er klikket nu, jeg ønsker at gøre noget.

1075
01:06:09,280 --> 01:06:13,160
Hvad jeg vil gøre, er at ændre værdien af ​​denne indtastningsfeltet.

1076
01:06:13,160 --> 01:06:16,100
Nu vil jeg indstille denne samme val funktion.

1077
01:06:16,100 --> 01:06:21,060
>> Så uden nogen argumenter denne val funktionen returnerer til dig, hvad er allerede i tekstfeltet,

1078
01:06:21,060 --> 01:06:27,070
men hvis du giver det en streng, det vil tage at strengen og sætte det ind i tekstfeltet.

1079
01:06:27,070 --> 01:06:28,980
Jeg vælger sin tekstboks på samme måde.

1080
01:06:28,980 --> 01:06:31,230
Det navn er symbol inde i formular-citat.

1081
01:06:31,230 --> 01:06:37,540
Nu Jeg sender det værdien af ​​attributten data-symbol.

1082
01:06:37,540 --> 01:06:41,560
Denne ting her er ny, denne $ (this).

1083
01:06:41,560 --> 01:06:46,850
Hvad dette henviser til er det element, der blev klikket på.

1084
01:06:46,850 --> 01:06:50,880
Vi kan se her, at vi ikke er knyttet et klik begivenhed

1085
01:06:50,880 --> 01:06:54,690
til hvert element med en klasse af forslag individuelt.

1086
01:06:54,690 --> 01:06:57,140
Snarere, vi nærmer dette lidt anderledes.

1087
01:06:57,140 --> 01:07:01,700
I stedet vi siger, når noget indersiden af ​​dette forslag div,

1088
01:07:01,700 --> 01:07:04,080
som huske er blot beholderen til denne liste,

1089
01:07:04,080 --> 01:07:10,150
hvis noget inde i denne div er klikket, og det har en klasse af forslag,

1090
01:07:10,150 --> 01:07:13,000
Jeg ønsker, at denne begivenhed til at skyde.

1091
01:07:13,000 --> 01:07:17,490
Dybest set, hvad dette betyder, at vi kan gøre, er at vi kan genbruge den samme hændelseshandler

1092
01:07:17,490 --> 01:07:20,000
for alle de ting på listen.

1093
01:07:20,000 --> 01:07:22,080
Så vi behøver ikke at have en hændelseshandler for det første element

1094
01:07:22,080 --> 01:07:24,550
og en anden event handler for det andet element.

1095
01:07:24,550 --> 01:07:29,880
Vi kan i stedet sige: "Jeg vil have den samme hændelseshandler skal gælde for alt i min liste."

1096
01:07:29,880 --> 01:07:34,420
Men vi er nødt til en eller anden måde vide hvilket element blev klikket.

1097
01:07:34,420 --> 01:07:38,450
Denne "dette" nøgleordet repræsenterer netop det.

1098
01:07:38,450 --> 01:07:42,360
Dette er det objekt, der netop er klikket af brugeren.

1099
01:07:42,360 --> 01:07:47,680
Hvis jeg bare klikkede 3. link, dette repræsenterer den del af det 3:e link,

1100
01:07:47,680 --> 01:07:51,670
hvilket betyder, at jeg kan få sin attribut, data-symbol,

1101
01:07:51,670 --> 01:07:57,760
som vi ved skal indeholde det symbol, der er tilknyttet den virksomhed, jeg lige har klikket på.

1102
01:07:57,760 --> 01:08:04,550
Hvis vi hopper tilbage til vores økonomiafdeling side,

1103
01:08:04,550 --> 01:08:08,580
Vi kan nu se, at når jeg begynder at skrive noget som MSFT,

1104
01:08:08,580 --> 01:08:11,220
vi ikke længere får blot aktiesymboler,

1105
01:08:11,220 --> 01:08:13,720
vi nu at få de konkrete virksomheder.

1106
01:08:13,720 --> 01:08:20,410
Men når jeg klikker på et af disse selskaber,

1107
01:08:20,410 --> 01:08:25,180
Vi kan se, at vi faktisk er befolker tekstboksen ikke med navnet på den virksomhed,

1108
01:08:25,180 --> 01:08:29,850
men med hvad blev gemt inde for disse data attributter.

1109
01:08:29,850 --> 01:08:32,880
Og så hvis jeg faktisk inspicere et af disse elementer ved at højreklikke det

1110
01:08:32,880 --> 01:08:36,200
og klikke Inspect Element, kan vi faktisk se, hvad det ligner.

1111
01:08:36,200 --> 01:08:40,290
>> Husk dette er noget, vi skabte inde i det for-løkke

1112
01:08:40,290 --> 01:08:42,649
da vi var ved at bygge op, at streng af HTML.

1113
01:08:42,649 --> 01:08:47,870
Vi kan se her, at disse data-symbol har værdien af ​​MSFT, som er stort.

1114
01:08:47,870 --> 01:08:49,189
Det er, hvad vi havde forventet.

1115
01:08:49,189 --> 01:08:53,170
Det er symbolet og det er, hvordan vi fik den værdi, at vi skulle bruge

1116
01:08:53,170 --> 01:08:56,140
inde i dette tekstfelt.

1117
01:08:56,140 --> 01:08:58,850
Det er nok for citatet form, fordi det er lidt kedeligt.

1118
01:08:58,850 --> 01:09:02,990
Lad os bare gøre nogle hurtige forbedringer til vores portefølje side.

1119
01:09:02,990 --> 01:09:08,109
Hvis du har brugt CS50 Finance i et stykke tid, og du begynder at købe og sælge en masse af lagrene,

1120
01:09:08,109 --> 01:09:11,300
i sidste ende denne tabel vil få temmelig store,

1121
01:09:11,300 --> 01:09:13,850
og du vil have en bestand ticker, selvfølgelig.

1122
01:09:13,850 --> 01:09:20,350
Når bordet er meget, meget stor, kunne det være nyttigt for brugeren at forsøge at søge over det.

1123
01:09:20,350 --> 01:09:23,290
Inde i søgefeltet, hvis jeg begynder at skrive noget som Disney

1124
01:09:23,290 --> 01:09:26,359
og leder efter min Mickey Mouse lager, kan vi se, at bordet nu er filtrering

1125
01:09:26,359 --> 01:09:28,189
baseret på hvad jeg lige har skrevet i.

1126
01:09:28,189 --> 01:09:31,640
Denne funktionalitet ser super kompliceret, men det er virkelig, virkelig nemt

1127
01:09:31,640 --> 01:09:33,859
med jQuery og JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Denne portfolio.php fil indeholder en JavaScript-fil kaldet portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Lad os tage et kig 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 hvor vi laver, at søge på bordet.

1132
01:09:49,210 --> 01:09:52,750
Den første ting jeg skal gøre, er vedhæfte en hændelseshandler til at tekstboks

1133
01:09:52,750 --> 01:09:55,760
fordi vi ved, at vi ønsker, at vores filterfunktion til at fyre

1134
01:09:55,760 --> 01:09:59,800
hver gang brugeren trykker noget, fordi vi ikke har tid til søgning knapper.

1135
01:09:59,800 --> 01:10:03,000
Det første, vi skal gøre, er at finde ud af, hvad brugeren søger efter,

1136
01:10:03,000 --> 01:10:04,780
ligesom vi gjorde før.

1137
01:10:04,780 --> 01:10:11,320
Dette søgeord refererer til den aktuelle element brugeren interagerer med.

1138
01:10:11,320 --> 01:10:14,070
>> Da brugeren interagerer med søgefeltet,

1139
01:10:14,070 --> 01:10:17,020
$ Dette repræsenterer søgefeltet,

1140
01:10:17,020 --> 01:10:21,820
så this.val giver os, hvad der er inde i søgefeltet brugeren skriver iøjeblikket.

1141
01:10:22,810 --> 01:10:27,320
Så, nu er hvad vi ønsker at ønsker vi at gentage over alle rækkerne

1142
01:10:27,320 --> 01:10:29,240
indersiden af ​​vores tabel.

1143
01:10:29,240 --> 01:10:35,630
Hvis du vil vælge alle rækkerne i vores tabel, jeg gav denne tabel et id af tabellen portefølje,

1144
01:10:35,630 --> 01:10:39,060
og hver række er repræsenteret ved en TR element,

1145
01:10:39,060 --> 01:10:42,080
så denne vælger vil vende tilbage til mig en stor vifte

1146
01:10:42,080 --> 01:10:44,370
af alle rækker i mit bord.

1147
01:10:44,370 --> 01:10:47,010
Nu vil jeg gentage over det array.

1148
01:10:47,010 --> 01:10:52,390
Jeg kunne du en for-løkke, men jQuery faktisk giver os nice funktion kaldet "hver."

1149
01:10:52,390 --> 01:10:55,220
Hvad den enkelte gør, er hver tager et argument,

1150
01:10:55,220 --> 01:10:57,090
og dette argument er en funktion.

1151
01:10:57,090 --> 01:11:02,760
Hvad det kommer til at gøre, er det kommer til at anvende denne funktion til hvert element inde i denne liste.

1152
01:11:02,760 --> 01:11:05,550
Denne funktion kræver ét argument, der er e,

1153
01:11:05,550 --> 01:11:10,090
og når denne funktion er udført, er denne e vil blive erstattet med den første række,

1154
01:11:10,090 --> 01:11:12,070
derefter den anden række, og den tredje række.

1155
01:11:12,070 --> 01:11:15,150
Ved denne måde, er det det samme som at køre en for-løkke

1156
01:11:15,150 --> 01:11:21,360
og derefter regne det aktuelle element er baseret på indeks indersiden af ​​dit for-løkke.

1157
01:11:21,360 --> 01:11:24,750
Ved hver iteration, for hver af disse elementer i tabellen

1158
01:11:24,750 --> 01:11:30,560
Jeg ønsker at kontrollere, om teksten i element - teksten af ​​cellens indvendige af rækken -

1159
01:11:30,560 --> 01:11:33,130
matcher hvad jeg søger efter.

1160
01:11:33,130 --> 01:11:36,390
Denne store lange række af kommandoer er, hvordan jeg kunne gøre det.

1161
01:11:36,390 --> 01:11:40,900
Først igen, denne henviser nu til - fordi det er inde i en ny funktion -

1162
01:11:40,900 --> 01:11:45,020
dette er nu den aktuelle række i tabellen.

1163
01:11:45,020 --> 01:11:47,340
Jeg ønsker at tage den aktuelle række i tabellen,

1164
01:11:47,340 --> 01:11:49,950
og jeg ønsker at få alle sine børn.

1165
01:11:49,950 --> 01:11:51,940
Husk, at DOM er en hierarkisk træ,

1166
01:11:51,940 --> 01:11:54,200
hvilket betyder, at elementerne har et antal børn.

1167
01:11:54,200 --> 01:12:00,180
>> Dette. Børn funktion vil vende tilbage til mig tilbage et array af alle elementer

1168
01:12:00,180 --> 01:12:03,240
der er børn af, i dette tilfælde en række i tabellen.

1169
01:12:03,240 --> 01:12:07,150
Det er simpelthen cellerne inde i rækken.

1170
01:12:07,150 --> 01:12:09,230
Jeg ønsker bare at søge over den første celle.

1171
01:12:09,230 --> 01:12:13,090
Dette. Første funktion, siger give mig det første element i denne array.

1172
01:12:13,090 --> 01:12:17,070
Så teksten funktionen siger få mig præcis, hvad der er inde i denne celle

1173
01:12:17,070 --> 01:12:19,530
da jeg ønsker at søge over denne tekst.

1174
01:12:19,530 --> 01:12:21,040
Endelig, lad os konvertere det til små bogstaver,

1175
01:12:21,040 --> 01:12:23,940
så vi kan gøre tekst case ufølsomme forespørgsler.

1176
01:12:23,940 --> 01:12:29,990
Endelig ønsker vi at se, om denne streng inde i en tabel indeholder strengen vi leder efter.

1177
01:12:29,990 --> 01:12:32,980
Den indexOf funktion i JavaScript gør netop det.

1178
01:12:32,980 --> 01:12:37,060
Det fortæller os, hvorvidt denne streng indeholder en anden streng.

1179
01:12:37,060 --> 01:12:40,150
Hvis det er sandt, at cellen indeholder, hvad jeg søger efter,

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 metode vil sige, "Vis element."

1182
01:12:45,330 --> 01:12:50,350
Hvis dette ikke er tilfældet, så det betyder, hvad jeg søger efter, er ikke indeholdt

1183
01:12:50,350 --> 01:12:53,550
inden for denne række, så og jeg ønsker at skjule, er fra brugeren.

1184
01:12:53,550 --> 01:12:59,240
Det opnår at nice filtrering virkning, hvor vi ikke længere se hele tabellen.

1185
01:12:59,240 --> 01:13:01,480
Hvis du er interesseret i, hvordan man gør dette ticker så godt,

1186
01:13:01,480 --> 01:13:04,180
vi vil sende kilden online. Men det er meget simpelt.

1187
01:13:04,180 --> 01:13:09,860
JQuery har awesome metoder for disse animationer og manipulere CSS egenskaber.

1188
01:13:09,860 --> 01:13:11,020
Så det er det for mig.

1189
01:13:11,020 --> 01:13:15,560
>> Hvad så ligger forude? Som du vil se i et par dage, den afsluttende projekter forslaget skyldes.

1190
01:13:15,560 --> 01:13:17,730
Det endelige projekter Forslaget vil stille dig et par spørgsmål,

1191
01:13:17,730 --> 01:13:19,420
men blandt dem vil være tre milepæle -

1192
01:13:19,420 --> 01:13:22,840
den ene en "god" milepæl, en bedre milepæl, og en en bedste.

1193
01:13:22,840 --> 01:13:25,870
Ideen bliver virkelig at hjælpe jer angive dine forventninger

1194
01:13:25,870 --> 01:13:29,160
så minimalt du vil være tilfreds med udgangen på din endelige projekt

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å af hensyn til at få dig til at nå bare en lille smule til noget bedre

1197
01:13:34,540 --> 01:13:37,680
eller noget bedst, vil vi også sortere af skubbe dig mod at så godt.

1198
01:13:37,680 --> 01:13:40,660
Den CS50 Hack-a-thon, i mellemtiden, er i et par uger.

1199
01:13:40,660 --> 01:13:44,340
Typisk, vi gør dette på et lotteri basis basis på grund af interesse,

1200
01:13:44,340 --> 01:13:47,680
men odds er vi vil tage et par hundrede af os i shuttlebusser fra Harvard Square

1201
01:13:47,680 --> 01:13:51,540
ned til Kendall Square hvor Microsoft har en smuk facilitet rammende kaldes "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England Research og Development Center.

1203
01:13:53,830 --> 01:13:56,380
Vi får der omkring 8 pm Vi skal have noget mad.

1204
01:13:56,380 --> 01:13:58,160
Omkring 01:00 vil vi have nogle flere fødevarer.

1205
01:13:58,160 --> 01:14:02,150
Omkring 5 am, hvis du stadig vågen vi hovedet over til IHOP eller tage dig tilbage til campus.

1206
01:14:02,150 --> 01:14:04,380
Målet er at dykke ned i afgangsprojekter

1207
01:14:04,380 --> 01:14:06,190
ved siden af ​​klassekammerater og personale.

1208
01:14:06,190 --> 01:14:08,280
Så et par dage senere er det CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
der er virkelig tænkt som en mulighed for jer at fremvise dit arbejde

1210
01:14:10,990 --> 01:14:12,700
og resultater for semestret

1211
01:14:12,700 --> 01:14:15,610
mens gnide skuldre med hinanden og få en fornemmelse af, hvad alle gjorde.

1212
01:14:15,610 --> 01:14:17,850
Med det sagt, mange tak til Tommy og til Joseph

1213
01:14:17,850 --> 01:14:19,960
og vi vil se dig på mandag.

1214
01:14:19,960 --> 01:14:24,070
 [Bifald]