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

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

3
00:00:05,160 --> 00:00:07,020
[Hierdie is CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Dit is CS50. Dit is die einde van die week 9. Thank you very much.

5
00:00:13,340 --> 00:00:15,310
Finaal. Week 9. Ek het dit.

6
00:00:15,310 --> 00:00:18,590
Vandag is ons voortgaan om ons gesprek oor die web programmering

7
00:00:18,590 --> 00:00:21,660
met die oog op die finale projek nie, want jy het iets te doen web-gebaseerde

8
00:00:21,660 --> 00:00:25,610
vir finale projekte nie, maar omdat een vir finale projekte of na CS50

9
00:00:25,610 --> 00:00:29,000
hierdie is beslis die rigting waarin moderne sagteware gaan.

10
00:00:29,000 --> 00:00:31,770
En tog is dit nie eintlik 'n maklike ding nie.

11
00:00:31,770 --> 00:00:35,040
Trouens, een van die moeilikste dinge om te doen is om die aspek van die ontwerp.

12
00:00:35,040 --> 00:00:38,600
>> Byvoorbeeld, deur die ontwerp bedoel ons eintlik om die gebruikerskoppelvlak

13
00:00:38,600 --> 00:00:40,420
of die gebruiker se ervaring.

14
00:00:40,420 --> 00:00:43,200
Ek daresay - en ons weet uit 'n onlangse probleem stel

15
00:00:43,200 --> 00:00:45,960
wanneer 'n paar van julle uitgesaai jou klagtes oor 'n stuk van sagteware

16
00:00:45,960 --> 00:00:49,000
of hardeware wat jy infuriates, hetsy op die kampus of af -

17
00:00:49,000 --> 00:00:51,930
daar is 'n baie van die sites daar buite, daar is 'n baie van die hardeware daar buite,

18
00:00:51,930 --> 00:00:53,900
daardie soort van suig.

19
00:00:53,900 --> 00:00:58,730
Maar die werklikheid is dat die maak van dinge wat is maklik om te gebruik en tog is tog kragtige

20
00:00:58,730 --> 00:01:00,550
is 'n baie moeilike uitdaging.

21
00:01:00,550 --> 00:01:03,680
Dus, vir vandag het ek het Josef en Tommy gevra om saam met my hier

22
00:01:03,680 --> 00:01:06,680
sodat ons kan 'n gesprek, beide oor die ontwerp

23
00:01:06,680 --> 00:01:09,090
en watter soort van denkprosesse moet begin gaan deur jou kop

24
00:01:09,090 --> 00:01:12,040
wanneer jy die ontwerp van jou finale projekte, jou toekoms streef.

25
00:01:12,040 --> 00:01:15,040
En dan met Tommy se hulp sal ons kyk na sommige van die implementering besonderhede.

26
00:01:15,040 --> 00:01:18,440
Hoe kan jy 'n visie op papier of in jou gedagtes

27
00:01:18,440 --> 00:01:20,760
wat jy dan kan programmaties voer

28
00:01:20,760 --> 00:01:24,030
deur gebruik te maak van sommige van die tegnologie en tegnieke het ons net begin praat,

29
00:01:24,030 --> 00:01:29,080
naamlik JavaScript en selfs iets nuwer, naamlik AJAX, asynchrone JavaScript.

30
00:01:29,080 --> 00:01:32,950
Wat jou toelaat om al die meer dinamiese van 'n gebruikerskoppelvlak te skep

31
00:01:32,950 --> 00:01:35,780
haal meer en meer data geleidelik vanaf 'n bediener.

32
00:01:35,780 --> 00:01:38,560
So ons sal sien 'n paar van daardie stukkies sowel vandag.

33
00:01:38,560 --> 00:01:41,800
As 'n eenkant, indien u belangstel in konsentreer in rekenaarwetenskap

34
00:01:41,800 --> 00:01:45,010
of minoring in rekenaarwetenskap, weet dat hierdie Vrydag op die middag

35
00:01:45,010 --> 00:01:48,750
in Maxwell Dworkin 221 daar sal 'n pizza gebeurtenis

36
00:01:48,750 --> 00:01:50,780
waar jy kan 'n bietjie meer leer oor rekenaarwetenskap.

37
00:01:50,780 --> 00:01:54,860
Op jou pad uit die ingang van vandag sal jy in staat wees om af te haal 'n nie-amptelike gids tot CS aan die Harvard.

38
00:01:54,860 --> 00:01:57,290
Ons sal dit op die vuilnisemmer buite by die middellyf hoogte

39
00:01:57,290 --> 00:01:59,750
sodat as jy wil om dit te gryp en te leer om 'n bietjie meer oor CS,

40
00:01:59,750 --> 00:02:02,480
wat sal daar wees vir jou as dit was in week 0.

41
00:02:02,480 --> 00:02:06,500
Ook as jy wil om ons aan te sluit vir CS50 middagete hierdie Vrydag op 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Sonder verdere uitstel het, ek gee jou onderrig mede Joseph Ong.

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

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

46
00:02:20,770 --> 00:02:24,780
Was die eerste keer wat ek geleer het oor die ontwerp in 'n klas wat hier genoem CS179.

47
00:02:24,780 --> 00:02:28,040
>> Die professor by die tyd het ons vertel die storie oor 'n ander professor

48
00:02:28,040 --> 00:02:31,640
wat gegaan het om 'n hotel en gebruik word om die kraan.

49
00:02:31,640 --> 00:02:35,630
Kan iemand vir my sê wat die 2 knoppies aan die linkerkant en reg te doen nie?

50
00:02:35,630 --> 00:02:39,080
[Student] Warm en koue. >> Warm en koue. Goed.

51
00:02:39,080 --> 00:02:41,430
Wat jy normaalweg verwag, reg?

52
00:02:41,430 --> 00:02:46,960
Hierdie professor na die gebruik van die kraan wil 'n stort te neem, en hy gaan voort om dit te gebruik.

53
00:02:46,960 --> 00:02:51,310
Hy dink die linkerkant en die regterkant is vir warm en koue, reg?

54
00:02:51,310 --> 00:02:55,470
Maar kan iemand my vertel wat dit eintlik doen?

55
00:02:55,470 --> 00:02:58,060
Enige hande?

56
00:02:58,060 --> 00:03:01,740
[Onhoorbaar student reaksie] >> Een voorstel is?

57
00:03:01,740 --> 00:03:05,860
[Onhoorbaar student reaksie] >> Temperatuur?

58
00:03:05,860 --> 00:03:10,460
So een van die temperatuur en die ander kontroles beheer? >> [Student] Water druk.

59
00:03:10,460 --> 00:03:12,350
Water druk. Goed.

60
00:03:12,350 --> 00:03:15,100
Hierdie professor loop in hierdie, en dink hulle is die beheer van warm en koue,

61
00:03:15,100 --> 00:03:21,470
draai die regte een, wat dink hy is warm, al die pad tot

62
00:03:21,470 --> 00:03:23,560
want hy wil 'n warm stort te neem.

63
00:03:23,560 --> 00:03:28,100
Wel, hierdie werklik stem nie ooreen nie, so hy kry dit nie baie pret ervaring

64
00:03:28,100 --> 00:03:31,110
om in 'n koue stort, en ons almal weet wat dit voel soos.

65
00:03:31,110 --> 00:03:33,620
Dit is 'n voorbeeld van 'n ontwerp fout.

66
00:03:33,620 --> 00:03:37,040
Wat ek bedoel met dit is sy verwagting van die kraan

67
00:03:37,040 --> 00:03:39,420
het nie ooreen met wat uit die stort gekom,

68
00:03:39,420 --> 00:03:41,780
wat is 'n soort van jammer vir hom.

69
00:03:41,780 --> 00:03:44,990
So, dit is 'n voorbeeld van 'n ontwerp fout wat in die werklike lewe gebeur.

70
00:03:44,990 --> 00:03:48,020
Maar ons sien alle vorme van ander kinders as well.

71
00:03:48,020 --> 00:03:50,390
Ons is waarskynlik nie ondersteuners van die MBTA stelsel.

72
00:03:50,390 --> 00:03:55,560
Dit is 'n metro-stelsel eintlik in Londen, wat sê: "Hierdie knoppie is nie in gebruik is."

73
00:03:55,560 --> 00:04:00,220
Hoekom is dit nog daar? Daarom vind ons selfs?

74
00:04:00,220 --> 00:04:02,810
Toe ek 'n kind was, synde die tegnologie vaardig een in die huis,

75
00:04:02,810 --> 00:04:05,050
wanneer die rekenaar crash, sou my ma kom na my toe,

76
00:04:05,050 --> 00:04:07,060
wys my hierdie skerm en vra my wat gebeur het.

77
00:04:07,060 --> 00:04:09,210
>> Selfs ek weet nie wat dit beteken.

78
00:04:11,890 --> 00:04:14,700
[Lag] Wat?

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

80
00:04:18,720 --> 00:04:23,050
Soms voel ons soos sagteware-ontwikkelaars is net trolling ons.

81
00:04:23,050 --> 00:04:28,460
As gebruikers ons soos, "Wat gaan aan Iemand sê vir ons."

82
00:04:28,460 --> 00:04:32,140
Dit alles kom neer op 'n kwessie van ontwerp.

83
00:04:32,140 --> 00:04:34,650
Ontwerp, soos ons kan sien, is nie suiwer oor estetika,

84
00:04:34,650 --> 00:04:37,230
dit gaan nie oor hoe dinge lyk.

85
00:04:37,230 --> 00:04:41,720
Ons sien hier dat dit eintlik min pop-up hier lyk pretty nice.

86
00:04:41,720 --> 00:04:45,290
Dit het 'n druppel skaduwee in die agtergrond, het dit grens radiuses gaan.

87
00:04:45,290 --> 00:04:47,550
Dit is soort van die mooi.

88
00:04:47,550 --> 00:04:51,480
Dit is regtig nie goed ontwerp, want dit is nie baie gebruikers vriendelik.

89
00:04:51,480 --> 00:04:54,920
Daardie klein pop-up wat opkom nie regtig gee my enige inligting

90
00:04:54,920 --> 00:04:58,450
wat gaan aan, is dit nie vir my sê iets as die gebruiker

91
00:04:58,450 --> 00:05:01,400
oor hoe om te herstel van die fout.

92
00:05:01,400 --> 00:05:05,190
Ons wil om te dink oor dinge wat ontwerp is nie.

93
00:05:05,190 --> 00:05:06,670
Eerstens, dit is nie estetika.

94
00:05:06,670 --> 00:05:10,800
Dit is ook nie vulsel jou app met ton van onnodige funksionaliteit.

95
00:05:10,800 --> 00:05:14,890
As jy 'n Thai restaurant, het jy waarskynlik wil nie na 'n tandarts op dieselfde tyd te wees.

96
00:05:14,890 --> 00:05:17,720
En met Facebook vrae, nie dat baie mense dit gebruik

97
00:05:17,720 --> 00:05:21,130
en dit was nie regtig by die kern van wat hulle bou.

98
00:05:21,130 --> 00:05:24,200
En dus is dit lekker om na te dink oor nie soseer die hoeveelheid van die dinge wat

99
00:05:24,200 --> 00:05:26,390
dat jy om na jou aansoek nie, maar die gehalte

100
00:05:26,390 --> 00:05:28,910
en hoe jy maak dat die gebruikers ervaring beter

101
00:05:28,910 --> 00:05:32,540
deur 'n verbetering op wat jy reeds het.

102
00:05:32,540 --> 00:05:37,040
>> In 'n neutedop, ontwerp vertel ons wat ons moet bou.

103
00:05:37,040 --> 00:05:41,950
Byvoorbeeld, as ons iets wat laat ons soek die dinge op te bou,

104
00:05:41,950 --> 00:05:45,970
soos Google, byvoorbeeld, moet ons dinge doen op 'n wyse

105
00:05:45,970 --> 00:05:48,950
wat vereis dat die gebruiker baie van die druk te neem om te kry wat hulle wil hê,

106
00:05:48,950 --> 00:05:52,580
of moet ons dit doen op 'n manier, byvoorbeeld met Google Instant of outomaties

107
00:05:52,580 --> 00:05:54,970
waarmee ons ons resultate vinniger?

108
00:05:54,970 --> 00:05:58,740
Ingenieurswese behels, soos Tommy sal jou wys dit eintlik gebou.

109
00:05:58,740 --> 00:06:01,890
Daar is baie van die tipes van ontwerp.

110
00:06:01,890 --> 00:06:06,070
Byvoorbeeld, as jy die bou van iets wat iets te sit

111
00:06:06,070 --> 00:06:09,770
in 'n Derde Wêreld land waar daar nie veel elektrisiteit of dat 'n groot tegnologie,

112
00:06:09,770 --> 00:06:11,440
jy het om te ontwerp wat jy bou

113
00:06:11,440 --> 00:06:14,210
op 'n manier wat maklik toegang tot die mense daar gee.

114
00:06:14,210 --> 00:06:18,290
Maar wat vorme van ander ontwerp besluite daar sou wees nie

115
00:06:18,290 --> 00:06:21,850
of kan wees wat betrokke is by iets soos hierdie?

116
00:06:23,690 --> 00:06:25,660
Ja. Ek sien 'n hand.

117
00:06:25,660 --> 00:06:37,200
[Onhoorbaar student reaksie] >> Reg. Presies. Toeganklikheid is een ding.

118
00:06:37,200 --> 00:06:40,870
'N baie van die mense dink nie, "Wat van my gebruikers?"

119
00:06:40,870 --> 00:06:43,160
soos die uiterstes van óf spektrum.

120
00:06:43,160 --> 00:06:47,770
Ek het gebruikers wat dalk gestremdhede dat ek nie dink oor

121
00:06:47,770 --> 00:06:50,590
en ek is net te dink oor die ontwerp vir die algemene gebruiker.

122
00:06:50,590 --> 00:06:52,630
Die Internet toeganklik is deur almal deesdae,

123
00:06:52,630 --> 00:06:54,870
en ek moet ontwerp word vir die mense as well.

124
00:06:54,870 --> 00:06:58,620
Watter vorme van ander ontwerp besluite kan jy maak?

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

126
00:07:00,690 --> 00:07:02,680
Kos. Baie goed.

127
00:07:02,680 --> 00:07:08,060
Nog 'n ding wat ons kan ons ontwerp besluite baseer op koste.

128
00:07:08,060 --> 00:07:13,130
As ons 'n besigheid is, wil jy iets te bou wat nie veel koste te produseer

129
00:07:13,130 --> 00:07:17,720
maar kan verkoop teen 'n besonder hoë koste of kan ons 'n paar wins.

130
00:07:17,720 --> 00:07:21,540
>> Dit is al die verskillende tipes van die ontwerp, maar toe ons die bou van iets op die Internet

131
00:07:21,540 --> 00:07:25,120
of wanneer ons die bou van iets wat waarskynlik nie dat daar nog baie kos om te bou nou,

132
00:07:25,120 --> 00:07:28,630
soos Internet-toepassings - jy hoef nie veel kapitaal te gooi in dit

133
00:07:28,630 --> 00:07:30,900
ten einde te maak van iets wat regtig werk -

134
00:07:30,900 --> 00:07:33,490
wat ons is meer bekommerd oor die gebruikers ervaring.

135
00:07:33,490 --> 00:07:36,390
Ons noem hierdie gebruiker gesentreerde ontwerp.

136
00:07:36,390 --> 00:07:41,550
Wese wat gebruiker gesentreerde ontwerp behels om jouself in die skoene van jou gebruikers.

137
00:07:41,550 --> 00:07:44,870
As iemand tekens vir die wat ek bou,

138
00:07:44,870 --> 00:07:48,250
hulle kom natuurlik met 'n doel in gedagte het na my spesifieke aansoek,

139
00:07:48,250 --> 00:07:50,280
met 'n taak wat hulle wil om te voltooi.

140
00:07:50,280 --> 00:07:53,650
En jou werk is nie net om hulle te help om daardie taak te voltooi

141
00:07:53,650 --> 00:07:57,930
maar om hulle te help dat die taak te voltooi in 'n wyse wat doeltreffende, intuïtief,

142
00:07:57,930 --> 00:08:01,900
en as 'n persoon wat daar gesê, toeganklik.

143
00:08:01,900 --> 00:08:03,750
Wat beteken doeltreffendheid beteken?

144
00:08:03,750 --> 00:08:08,050
Doeltreffendheid beteken hoe vinnig my gebruiker die taak te voltooi my koppelvlak.

145
00:08:08,050 --> 00:08:11,650
Is dit neem baie van die druk vir hulle te kry van die een plek na die ander?

146
00:08:11,650 --> 00:08:14,630
Is dit vervelig? Het hulle baie van die herhalende take uit te voer?

147
00:08:14,630 --> 00:08:17,140
Ons wil hê dat die proses so doeltreffend as moontlik te maak

148
00:08:17,140 --> 00:08:20,070
so hulle het nie hierdie soort van dinge om te doen.

149
00:08:20,070 --> 00:08:24,230
Intuïtie dat, byvoorbeeld, as 'n gebruiker lyk my koppelvlak,

150
00:08:24,230 --> 00:08:27,240
is dit maklik om vir hulle van plek tot plek te kry?

151
00:08:27,240 --> 00:08:30,390
Is dit maklik vir hulle om uit te vind wat hulle in my koppelvlak te kliek

152
00:08:30,390 --> 00:08:33,770
sodat hulle die doel of taak te bereik wat hulle wil bereik?

153
00:08:33,770 --> 00:08:37,520
>> En laastens, as een persoon het gesê daar, toeganklikheid is baie belangrik.

154
00:08:37,520 --> 00:08:39,640
[Manlike spreker] Dit kom tot toeganklikheid vir dinge soos visie,

155
00:08:39,640 --> 00:08:42,740
soos hoe ek eintlik ontwerp iets vir iemand wat blind is?

156
00:08:42,740 --> 00:08:46,460
Oh. Vir mense wat nie kan sien nie, ons het iets genoem screen readers.

157
00:08:46,460 --> 00:08:49,070
Wat jy moet doen is jy moet jou webwerf te bou op 'n manier

158
00:08:49,070 --> 00:08:52,020
dat, byvoorbeeld, veral tegnologie wat ons noem -

159
00:08:52,020 --> 00:08:53,590
Daar is baie van die dinge wat nou.

160
00:08:53,590 --> 00:08:55,660
Ek dink daar is 'n skerm lesers genoem JAWS.

161
00:08:55,660 --> 00:08:58,410
'N baie van hierdie dinge staatmaak op wat ons noem area reëls

162
00:08:58,410 --> 00:09:02,010
ten einde aan die gebruiker om te lees wat teenwoordig is op die bladsy.

163
00:09:02,010 --> 00:09:05,480
Vir die mense wat nie kan sien, wat jy nodig het om seker te maak dat hierdie skerm lesers

164
00:09:05,480 --> 00:09:09,130
kan eintlik haal die inhoud op die bladsy en kan eintlik wys jou gebruikers,

165
00:09:09,130 --> 00:09:13,630
as jy nie kan sien nie, ten minste kan jy verstaan ​​nog steeds die inhoud op die bladsy.

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

167
00:09:16,190 --> 00:09:23,410
Genoeg gepraat oor goeie ontwerp. Kom ons praat oor die slegte ontwerp.

168
00:09:23,410 --> 00:09:25,220
Dit is dinge wat jy moet doen nie.

169
00:09:25,220 --> 00:09:27,890
Kan iemand my vertel oor hul ervarings met Craigslist

170
00:09:27,890 --> 00:09:32,190
en wat hulle dink is nie so groot oor hierdie ontwerp?

171
00:09:33,690 --> 00:09:36,430
Ja. >> [Student] Ek dink daar is te veel woorde in 'n gebied.

172
00:09:36,430 --> 00:09:39,350
Te veel woorde nie, reg? Heeltemal oorweldigend.

173
00:09:39,350 --> 00:09:42,400
Jy kom na hierdie bladsy en jy begroet met 'n hele klomp van die dinge wat hier

174
00:09:42,400 --> 00:09:43,860
wat kan selfs nie jou saak maak.

175
00:09:43,860 --> 00:09:47,010
Byvoorbeeld, as jy leef in 'n staat wat nie begin met hierdie brief.

176
00:09:47,010 --> 00:09:48,690
Kom ons sê jy woon in Texas of iets.

177
00:09:48,690 --> 00:09:53,790
>> Jy het al die pad af op die bladsy om te blaai om te kry om die plek waar jy is op.

178
00:09:53,790 --> 00:10:00,320
Ek is van Boston, so laat my kyk in Massachusetts. Waar is Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Ag, dit is reg hier. Ag, dit is Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
Kom ons kyk na Boston. [Lag]

181
00:10:09,070 --> 00:10:12,250
Nogals oorweldigend, reg?

182
00:10:12,250 --> 00:10:16,400
Awkward dinge daar. [Lag]

183
00:10:17,320 --> 00:10:19,470
Kom ons sê ek is op soek na iewers om te lewe.

184
00:10:19,470 --> 00:10:24,130
Hoeveel mense het eintlik gebruik Craigslist? Ton van julle.

185
00:10:24,130 --> 00:10:30,960
Daar is 'n redelik slegte maniere om te kyk na hierdie, maar laat ons kyk na hierdie.

186
00:10:35,130 --> 00:10:38,970
Wat is die verskil tussen img en pic? Kan iemand vir my sê?

187
00:10:41,350 --> 00:10:42,830
Daar is eintlik geen verskil nie.

188
00:10:42,830 --> 00:10:47,710
Dit beteken presies dieselfde ding, maar hulle het verskillende etikette vir hulle vir een of ander rede.

189
00:10:48,980 --> 00:10:53,560
As ek op Het Image, gebeur daar niks op die bladsy.

190
00:10:53,560 --> 00:10:57,490
Ek het eintlik 'Soek weer kliek vir iets om te gebeur.

191
00:10:57,490 --> 00:11:02,430
Wat sou 'n beter ontwerp van die besluit wat daar gedoen moet word?

192
00:11:03,820 --> 00:11:08,030
As ek op daardie filter, wil ek waarskynlik te filter deur die betrokke aksie

193
00:11:08,030 --> 00:11:09,970
of daardie spesifieke kategorie.

194
00:11:09,970 --> 00:11:14,450
Dus, in plaas van 'Soek weer druk, kan ek net outomaties doen die filter

195
00:11:14,450 --> 00:11:17,060
soort van Google styl waar hulle doen dit onmiddellik.

196
00:11:17,060 --> 00:11:20,440
[Malan] Maar moenie vorm soos ons gesien het hulle tot dusver fisies voorgelê moet word

197
00:11:20,440 --> 00:11:23,170
deur slaan ten minste of kliek op 'n knoppie Enter?

198
00:11:23,170 --> 00:11:26,830
Soos jy gesien het hulle tot dusver, kan jy eintlik te kliek Submit daardie dinge te doen.

199
00:11:26,830 --> 00:11:30,090
>> Maar as Tommy jou sal wys in 'n tweede, is daar eintlik maniere vir jou

200
00:11:30,090 --> 00:11:33,010
van so 'n aard dat wanneer jy op daardie ding dit outomaties kan stuur

201
00:11:33,010 --> 00:11:38,840
wat ons noem 'n AJAX-versoek en data terug te kry en jou resultate filter oombliklik.

202
00:11:38,840 --> 00:11:41,340
Daar is ton van die dinge wat is verkeerd met hierdie koppelvlak.

203
00:11:41,340 --> 00:11:43,530
[Malan] Kan jy soek vir Cambridge?

204
00:11:43,530 --> 00:11:47,030
Daar is iets wat effens onreëlmatige hier waar jy omgee Cambridge

205
00:11:47,030 --> 00:11:54,790
en tog jy kry Westford, Spring Hill, West Newton en dies meer.

206
00:11:54,790 --> 00:11:57,930
Waarskynlik nie ideaal nie. >> Waarskynlik nie ideaal nie.

207
00:11:57,930 --> 00:12:03,900
Hoe kan ek in staat wees om die gebruiker se ervaring beter te maak op hierdie spesifieke bladsy?

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

209
00:12:07,340 --> 00:12:09,500
Okay. Instruksies in watter soort sin?

210
00:12:09,500 --> 00:12:14,630
[Student] Byvoorbeeld, 'n ding vir die eerste keer gebruikers wat nie eens weet wat Craigslist is

211
00:12:14,630 --> 00:12:17,320
of jy weet nie wat jy veronderstel is om te doen.

212
00:12:17,320 --> 00:12:20,150
Reg. So verduidelik wat Craigslist is op hierdie bladsy is belangrik.

213
00:12:20,150 --> 00:12:23,490
Ons kan eintlik sê gebruikers wat hierdie bladsy eintlik is.

214
00:12:23,490 --> 00:12:27,090
As ek net hierdie besoek, sien ek 'n hele klomp van die plekke. Ek het nie eens weet wat dit beteken.

215
00:12:27,090 --> 00:12:29,730
Maar meer belangrik, net te kyk na hierdie koppelvlak,

216
00:12:29,730 --> 00:12:35,530
onthou ek moes na benede 'n ton van die dinge wat 'n bepaalde gemeenskap te vind

217
00:12:35,530 --> 00:12:37,560
dat ek eintlik omgegee oor hierdie.

218
00:12:37,560 --> 00:12:39,820
Wat is 'n vinniger manier wat ek kon doen nie? Ja.

219
00:12:39,820 --> 00:12:43,290
[Student] Verdeel hulle in die ooste, weste streke. >> Goed.

220
00:12:43,290 --> 00:12:47,460
Ek kon hulle verdeel in meer kategorieë wat my kan help vinniger bepaal

221
00:12:47,460 --> 00:12:49,820
hoe om by daardie spesifieke plek.

222
00:12:49,820 --> 00:12:54,510
[Student] Sit 'n drop-down list. >> Reg. Okay.

223
00:12:54,510 --> 00:12:58,240
Ek kon 'n drop-down menu gebruik, want ons het 'n vaste stel van die dinge wat

224
00:12:58,240 --> 00:13:00,100
en ons kon hulle wys in 'n drop-down menu.

225
00:13:00,100 --> 00:13:02,240
So is dit nie neem so baie spasie op die skerm.

226
00:13:02,240 --> 00:13:05,630
Maar selfs beter as dit, wat kan ons doen?

227
00:13:05,630 --> 00:13:09,220
Ja. >> [Onhoorbaar student reaksie] >> Kan jy sê dat weer? >> [Student] soekkassie.

228
00:13:09,220 --> 00:13:11,260
Ja, 'n soekkassie. Dit is 'n groot.

229
00:13:11,260 --> 00:13:16,430
Wat ons eintlik kan doen, is as ons terug kyk op die skyfies, soekkassie.

230
00:13:16,430 --> 00:13:21,520
AutoComplete. N baie maklike manier om te soek deur die resultate wat jy ken in 'n stel.

231
00:13:21,520 --> 00:13:25,980
As ek begin tik BO, wys my net al die resultate wat BO binnekant van hulle het.

232
00:13:25,980 --> 00:13:29,030
Dié manier kan ek baie maklik die spesifieke een wat ek wil om te gaan na

233
00:13:29,030 --> 00:13:32,390
in plaas van om te blaai deur die lys van werklik 'n groot.

234
00:13:32,390 --> 00:13:37,450
>> Dit is alle soorte van 'n baie lae-hang vrugte dat iemand wat Craigslist implementering van

235
00:13:37,450 --> 00:13:42,500
eintlik kan doen om die ervaring op die webwerf 'n baie beter vir hul spesifieke gebruiker te maak.

236
00:13:42,500 --> 00:13:46,370
Okay. Genoeg gepraat oor die slegte webwerwe.

237
00:13:46,370 --> 00:13:49,410
Kom ons praat oor Facebook.

238
00:13:50,880 --> 00:13:54,390
Wanneer Facebook uitgekom het, en in die besonder Facebook foto's,

239
00:13:54,390 --> 00:13:57,870
was daar baie van die ander dienste by die tyd wat presies dieselfde dinge kan doen.

240
00:13:57,870 --> 00:14:00,740
Hulle kon organiseer jou foto's in albums.

241
00:14:00,740 --> 00:14:03,360
Wat jy kan doen, is jy hulle kan organiseer in stelle sowel.

242
00:14:03,360 --> 00:14:06,070
Jy kan organiseer hulle volgens datum. Wat jy kan doen al hierdie spesifieke dinge.

243
00:14:06,070 --> 00:14:11,710
Maar nie almal weet wat die Facebook foto's ontplof by die tyd wat dit is vrygestel?

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

245
00:14:15,080 --> 00:14:21,300
Ons het Milo hier, wat is ons hond gelukbringer met daardie CS50 bandana.

246
00:14:21,300 --> 00:14:24,810
Jy kan sien dat ons hierdie kodering funksie in die middel.

247
00:14:24,810 --> 00:14:28,240
En wat Facebook foto's so interessant gemaak het van 'n bruikbaarheid standpunt

248
00:14:28,240 --> 00:14:34,130
is dat dit eintlik mense via hierdie toegelaat om hul vriende te betrek in hul foto's.

249
00:14:34,130 --> 00:14:37,680
Vir Facebook, sedert hul webwerf is veral sosiale,

250
00:14:37,680 --> 00:14:40,750
dit is oor die bou van hierdie soort van sosiale atmosfeer.

251
00:14:40,750 --> 00:14:42,620
Dit verbeter die ervaring van die foto's 'n baie meer

252
00:14:42,620 --> 00:14:46,390
want hulle kon eintlik begin sê: "Dit is die bande tussen mense,

253
00:14:46,390 --> 00:14:49,220
en dit is foto's oor mense wat jy eintlik omgee. "

254
00:14:49,220 --> 00:14:52,200
Deel van dit is ook soort narcisme.

255
00:14:52,200 --> 00:14:54,980
Mense wil graag tagged in foto's en dinge soos dat.

256
00:14:54,980 --> 00:14:58,510
Terwyl dit is nie noodwendig 'n goeie menslike eienskap,

257
00:14:58,510 --> 00:15:01,910
op dieselfde tyd dit gebaseer is op goeie ontwerp besluite

258
00:15:01,910 --> 00:15:04,860
omdat mense werklik omgee oor dinge soos hierdie.

259
00:15:04,860 --> 00:15:07,190
So wat se Facebook-foto's.

260
00:15:07,190 --> 00:15:09,800
>> Maar laat ons praat Facebook meer in die algemeen.

261
00:15:09,800 --> 00:15:13,400
Ek is seker dat baie van die mense hier het menings oor Facebook,

262
00:15:13,400 --> 00:15:16,430
beide goeie ontwerp besluite en swak ontwerp besluite.

263
00:15:16,430 --> 00:15:20,270
So laat vent of gelukkig te wees.

264
00:15:23,480 --> 00:15:26,450
Kom op. Ek weet almal van julle gebruik Facebook.

265
00:15:26,450 --> 00:15:30,970
Iemand het iets sleg te sê of iets goed te sê oor dit te hê. Ja.

266
00:15:30,970 --> 00:15:35,060
[Student] In die nuus voer daar is 'n baie dinge wat ek nie regtig omgee.

267
00:15:35,060 --> 00:15:37,740
Die nuusvoer toon 'n baie van die dinge wat jy dalk nie omgee.

268
00:15:37,740 --> 00:15:41,660
Jy het vriende op Facebook wat jy nog nie ontmoet vir 2 of 3 jaar

269
00:15:41,660 --> 00:15:43,860
en jy sien die resultate van hul nuus knal in jou news feed

270
00:15:43,860 --> 00:15:45,870
en jy het nie regtig omgee oor dit.

271
00:15:45,870 --> 00:15:48,700
Facebook het eintlik 'n poging om dit beter te maak,

272
00:15:48,700 --> 00:15:53,150
en hulle het eintlik probeer om relevante resultate te stoot na die top van die nuus voer as van die laat

273
00:15:53,150 --> 00:15:58,300
sodat jy werklik dinge sien deur vriende wat relevant is vir jou of jou vriende.

274
00:15:58,300 --> 00:16:01,110
Enigiets anders? Ja.

275
00:16:01,110 --> 00:16:06,400
[Onhoorbaar student reaksie] >> Kan jy sê dat weer?

276
00:16:06,400 --> 00:16:10,140
[Student] Die advertensies is relatief onopsigtelik. >> In watter sin?

277
00:16:10,140 --> 00:16:16,370
[Onhoorbaar student reaksie] Hulle het nie die lig op die skerm, soos baniere.

278
00:16:16,370 --> 00:16:17,760
Okay. Dis goed.

279
00:16:17,760 --> 00:16:25,030
As jy onthou die internet van die '90 - >> [Malan] ek daar was. >> Hy daar was. [Lag]

280
00:16:25,030 --> 00:16:29,210
Jy kan onthou flikker GIFs agtergronde, sparkly dinge,

281
00:16:29,210 --> 00:16:31,570
Geocities styl soort van dinge.

282
00:16:31,570 --> 00:16:34,080
Dit is regtig nie 'n voorbeeld van 'n goeie ontwerp

283
00:16:34,080 --> 00:16:36,690
Want dit is baie steurende van die inhoud.

284
00:16:36,690 --> 00:16:39,590
Die Yale kuns webwerf wat gebruik word om animated gifs as hul agtergrond te hê

285
00:16:39,590 --> 00:16:41,800
en jy kan nie lees nie enigiets op die bladsy,

286
00:16:41,800 --> 00:16:44,870
maar ek dink iemand eintlik met hulle gepraat het en nou is dit 'n bietjie anders.

287
00:16:44,870 --> 00:16:48,940
[Malan] Dit is nou baie beter. >> Dit is baie beter nou, soos jy kan sien. >> [Malan] O ja.

288
00:16:48,940 --> 00:16:56,020
Net groot, net - Ja. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Deel van dit is ook die maak van jou bladsy moontlik baie minimalistiese en baie verstaanbaar

290
00:17:00,560 --> 00:17:05,690
sodat dinge op die bladsy vloei in 'n manier wat baie logies en nie in die weg van mekaar kry nie.

291
00:17:05,690 --> 00:17:11,849
Wat allerhande ander dinge is goed oor Facebook of sleg oor Facebook?

292
00:17:11,849 --> 00:17:15,730
Laat ons net 'n ontwerp gesprek hier.

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

294
00:17:21,339 --> 00:17:25,640
[Student] Die nuwe Timeline stelsel laat jou toe om die persoon se profiel oor hul verlede te soek.

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

296
00:17:28,119 --> 00:17:30,280
Tydlyn is 'n groot ding, want dit kan jy steel jou vriende

297
00:17:30,280 --> 00:17:33,300
terug wanneer hulle in die hoërskool was.

298
00:17:35,160 --> 00:17:38,060
Timeline is goed, want dit kan jy deursyfer inhoud 'n baie vinniger,

299
00:17:38,060 --> 00:17:41,500
dit kan jy sien dinge wat andersins sou geneem het jy 'n baie lang tyd om te vind

300
00:17:41,500 --> 00:17:45,840
net blaai en af, op, op, op, op, op, soos die gaan terug in die tyd.

301
00:17:45,840 --> 00:17:48,910
Maar dan is daar ook soort van 'n nadeel aan wat in terme van die gebruiker se ervaring.

302
00:17:48,910 --> 00:17:51,190
Wat kan dit wees?

303
00:17:51,190 --> 00:17:56,780
Big woord wat begin met P-R. >> [Student] Privacy. >> Privaatheid, reg?

304
00:17:56,780 --> 00:17:59,970
Privaatheid is 'n groot gebruikers ervaring kwessie.

305
00:17:59,970 --> 00:18:07,190
Dit is een van die dinge wat ek haat die meeste oor Facebook. [Lag]

306
00:18:07,190 --> 00:18:09,000
[Malan] As ek nou doen.

307
00:18:09,000 --> 00:18:11,380
Dawid het nie besef dat dit werklik gebeur het tot gister.

308
00:18:11,380 --> 00:18:14,560
So nou is hy weet dat elke keer as ek hom gesels ek weet hy my geïgnoreer.

309
00:18:14,560 --> 00:18:16,880
[Malan] Die ongemaklike deel was ek was eintlik ignoreer hom,

310
00:18:16,880 --> 00:18:21,040
en ek het nie geweet hy het geweet dat ek hom ignoreer. [Lag]

311
00:18:21,040 --> 00:18:24,030
Privaatheid is 'n groot probleem.

312
00:18:24,030 --> 00:18:28,670
Kan iemand hier vir my sê wat sleg kan wees oor Facebook privaatheid

313
00:18:28,670 --> 00:18:32,270
behalwe die feit dat hulle dinge doen soos hierdie?

314
00:18:32,270 --> 00:18:37,240
Wat is dit besonder moeilik om te doen met betrekking tot Facebook privaatheid?

315
00:18:37,240 --> 00:18:40,340
Dat die soort van 'n leidende vraag.

316
00:18:41,680 --> 00:18:43,930
Ja. >> [Student] Steek jou foto's van sekere mense.

317
00:18:43,930 --> 00:18:46,170
Reg. Presies, jou foto's van sekere mense verberg.

318
00:18:46,170 --> 00:18:51,290
Hulle het hierdie klein, klein knoppie in die boonste regterkantste wat kan jy wissel die privaatheid van 'n foto.

319
00:18:51,290 --> 00:18:56,360
Hul privaatheid opsies is baie gevarieerd tussen verskillende vorme van spyskaarte.

320
00:18:56,360 --> 00:18:59,510
>> Hulle het 'n baie beter gekry het oor dit onlangs, maar dit gebruik om die geval te wees

321
00:18:59,510 --> 00:19:04,870
dat wanneer jy wil jou vriende te verhoed dat foto's te sien,

322
00:19:04,870 --> 00:19:08,280
jy sal hê om te gaan deur middel van 'n baie ingewikkelde 5-stap proses van om soos

323
00:19:08,280 --> 00:19:11,150
laat my op hierdie skakel kliek, laat my nou weer op, laat my weer op,

324
00:19:11,150 --> 00:19:13,420
laat my spesifiseer watter mense nie kan sien nie my foto's.

325
00:19:13,420 --> 00:19:17,250
Dit is nie baie goed op Facebook se deel

326
00:19:17,250 --> 00:19:20,530
omdat so baie oor die gebruikers ervaring is eintlik gee hulle die vryheid

327
00:19:20,530 --> 00:19:22,460
te beheer wat mense kan sien.

328
00:19:22,460 --> 00:19:25,550
Ons noem hierdie gebruiker rapporteer beheer en vryheid.

329
00:19:25,550 --> 00:19:31,090
As jy nie jou gebruikers te laat doen wat in 'n manier wat doeltreffende en intuïtief,

330
00:19:31,090 --> 00:19:34,570
dan is jou gebruikers ervaring is nie regtig so groot nie.

331
00:19:34,570 --> 00:19:38,200
 Sal julle ouens hou daarvan om te sê iets oor Facebook?

332
00:19:38,700 --> 00:19:41,420
Hoe skakel ek dit af?

333
00:19:41,420 --> 00:19:46,290
[Ong] Jy kan nie dit afskakel, en dit is 'n groot bruikbaarheid fout op die deel van Facebook.

334
00:19:46,290 --> 00:19:49,410
Hierdie funksie - ek eintlik kyk na dit gister -

335
00:19:49,410 --> 00:19:53,940
dit is óf dat jy nie kan doen nie, of dit is iewers baie, baie diep begrawe

336
00:19:53,940 --> 00:19:58,050
in die uithoeke van Facebook, want ek kan nie uitvind hoe om hierdie funksie te skakel.

337
00:19:58,050 --> 00:20:00,400
[Malan] soms Maar hierdie besluite is nie voor die hand liggend

338
00:20:00,400 --> 00:20:03,890
omdat julle aan ons gegee het 'n baie nuttige terugvoer op verskeie CS50 aansoeke

339
00:20:03,890 --> 00:20:05,710
en webwerwe wat die kursus gebruik.

340
00:20:05,710 --> 00:20:10,260
Ons het nie al hierdie versoeke en voorstelle geïmplementeer.

341
00:20:10,260 --> 00:20:14,550
>> Deel van daardie is vir die kry so baie versoeke dat dit is 'n funksie van tyd,

342
00:20:14,550 --> 00:20:17,070
maar soms het ons net 'n bewuste besluit soos,

343
00:20:17,070 --> 00:20:19,830
"Dankie vir die voorstel, maar ons nie saamstem nie."

344
00:20:19,830 --> 00:20:24,350
So, hoe jy besluit eintlik wat jy moet doen as jou gebruikers dink dat jy iets moet doen

345
00:20:24,350 --> 00:20:28,110
selfs as jy dit nie noodwendig?

346
00:20:28,110 --> 00:20:32,360
Dit is 'n fyn balans tussen die werklik te luister na wat jou gebruikers sê

347
00:20:32,360 --> 00:20:35,840
en eintlik 'n soort van die lyn waar jy sê,

348
00:20:35,840 --> 00:20:37,750
"Ons is nie van plan om te doen wat die gebruikers sê."

349
00:20:37,750 --> 00:20:42,520
En in besonder, Ek dink daar was 'n kwotasie deur Henry Ford wat vat om dit redelik goed.

350
00:20:42,520 --> 00:20:47,130
"As ek die mense gevra wat hulle wou, sou hulle gesê het hulle wou vinniger perde."

351
00:20:47,130 --> 00:20:51,840
Kan iemand sorteer terg uitmekaar wat kwotasie werklik beteken?

352
00:20:51,840 --> 00:20:56,060
Dit is nie net dat gebruikers weet wat hulle wil hê,

353
00:20:56,060 --> 00:20:59,180
maar dit is meer dat -

354
00:20:59,180 --> 00:21:02,720
[Student] Hulle weet nie wat moontlik is.

355
00:21:02,720 --> 00:21:06,140
In deel hulle nie weet wat moontlik is.

356
00:21:07,880 --> 00:21:11,440
Pla dat, behalwe 'n bietjie meer. Wat bedoel jy daarmee?

357
00:21:11,440 --> 00:21:21,340
[Onhoorbaar student reaksie]

358
00:21:21,340 --> 00:21:25,770
Dis goed. Wat ek dink ons ​​probeer om hier te sê, is dat die mense weet wat hulle wil hê.

359
00:21:25,770 --> 00:21:28,050
Hulle wil vinniger perde.

360
00:21:28,050 --> 00:21:29,840
Wat hulle regtig wil, is die vermoë om vinniger te beweeg,

361
00:21:29,840 --> 00:21:32,310
maar hulle weet nie regtig nie die medium waardeur dit te bereik.

362
00:21:32,310 --> 00:21:36,330
As julle kom om jou gebruikers en jou gebruikers sal jy iets sê

363
00:21:36,330 --> 00:21:39,700
en hulle vertel nie, "Ons wil hierdie funksies en hierdie funksies en hierdie funksies,

364
00:21:39,700 --> 00:21:42,650
jy wil nie noodwendig dink oor, "Laat my gaan voort

365
00:21:42,650 --> 00:21:44,720
"En te implementeer wat hulle uitdruklik sê,"

366
00:21:44,720 --> 00:21:48,610
maar wat jy wil na te dink oor is, "Watter soort van idees kan ek kry?"

367
00:21:48,610 --> 00:21:50,450
Wat hulle eintlik wil hê?

368
00:21:50,450 --> 00:21:55,560
>> En van daar wat jy kan doen, is die ontwerp van iets wat aan daardie versoeke

369
00:21:55,560 --> 00:22:00,340
maar nie noodwendig in die manier waarop die gebruiker verwag om tevrede te wees.

370
00:22:00,340 --> 00:22:03,830
So vir iets soos die finale projekte, in 'n baie reële terme,

371
00:22:03,830 --> 00:22:07,900
wat is 'n nuttige heuristiese wanneer dit kom by die maak van iets beter,

372
00:22:07,900 --> 00:22:10,630
veral as die ontwerper het hierdie arrogansie omtrent hom

373
00:22:10,630 --> 00:22:14,360
waardeur jy soort van weet wat die beste is, kan jy die insette van jou gebruikers,

374
00:22:14,360 --> 00:22:16,580
maar hoe jy gaan eintlik nie om dat terugvoering?

375
00:22:16,580 --> 00:22:21,610
In die finale projekte, baie konkreet, wat optimale resultate hier?

376
00:22:21,610 --> 00:22:25,030
Wat optimale resultate produseer - en ek sal gaan oor dit in 'n tweede -

377
00:22:25,030 --> 00:22:29,190
is die proses van die ontwikkeling van en dan die toets en dan iterating.

378
00:22:29,190 --> 00:22:32,020
Wat ek bedoel deur die toets is gewoonlik wanneer jy die ontwerp van iets

379
00:22:32,020 --> 00:22:36,970
jy dink dit is redelik goed, soos, "Ek is so 'n groot ontwerper. Almal gaan dit om lief te hê."

380
00:22:36,970 --> 00:22:41,600
En dan kan jy sit dit daar buite en mense het nie regtig soos dit vir een of ander rede.

381
00:22:41,600 --> 00:22:46,820
Wat jy hoef te doen, is jy die dele van die dinge wat mense doen soos

382
00:22:46,820 --> 00:22:49,180
en blaas die dinge wat mense nie hou nie.

383
00:22:49,180 --> 00:22:53,080
Dit klink soos 'n baie duidelike proses, maar hierdie proses voortdurend iterating

384
00:22:53,080 --> 00:22:55,980
op die top van wat jy reeds gebou is 'n proses wat jou help om

385
00:22:55,980 --> 00:22:59,730
nie net verfyn jou eie ontwerp vaardighede, maar ook help om die ontwerp te verfyn

386
00:22:59,730 --> 00:23:03,790
sodat mense werklik waardeer jou produk selfs meer as wat hulle voorheen gedoen het.

387
00:23:03,790 --> 00:23:07,390
>> Ek gaan oor meer konkrete voorbeelde van wat jy werklik kan doen.

388
00:23:07,390 --> 00:23:11,390
As 'n soort van 'n laaste voorbeeld van 'n produk, laat ons kyk na KAJAK.

389
00:23:11,390 --> 00:23:14,970
KAJAK toe dit uitgekom het, was baie, baie gewild.

390
00:23:14,970 --> 00:23:18,760
Kan iemand raai hoekom?

391
00:23:18,760 --> 00:23:20,950
Wat is die soort van dinge wat jy graag oor hierdie as jy dit gebruik het

392
00:23:20,950 --> 00:23:23,990
of wat is die soort van dinge wat jy wil nie?

393
00:23:23,990 --> 00:23:31,590
Ja. >> [Onhoorbaar student reaksie] >> Goed.

394
00:23:31,590 --> 00:23:34,730
Dit is deel van dit laat die gebruiker 'n navraag wat wyer is

395
00:23:34,730 --> 00:23:38,150
as 'n baie beperkende soos, "Jy het jou begin datum te kies

396
00:23:38,150 --> 00:23:39,810
"Jy het jou einddatum te kies."

397
00:23:39,810 --> 00:23:44,910
Trouens, dit kan jy buigsaam wees oor dit en dit gee jou al van die vlugte in daardie reeks.

398
00:23:44,910 --> 00:23:46,730
Enigiets anders?

399
00:23:46,730 --> 00:23:50,530
[Student] Hulle sluit die gelde in die prys.

400
00:23:50,530 --> 00:23:53,330
Hulle doen die gelde in die prys.

401
00:23:53,330 --> 00:23:56,720
Die belasting en dinge eintlik gaan reguit in daardie prys in die boonste linker

402
00:23:56,720 --> 00:24:00,710
sodat jy nie die bos gelei om te dink dat jy eintlik betaal vir 'n $ 240 vlug

403
00:24:00,710 --> 00:24:03,280
wanneer dit is regtig $ 330.

404
00:24:03,280 --> 00:24:06,200
Enigiets anders? Ja.

405
00:24:06,200 --> 00:24:10,140
[Onhoorbaar student reaksie]

406
00:24:10,140 --> 00:24:14,610
Ek is nie seker of hulle werklik laat jy dit doen.

407
00:24:14,610 --> 00:24:18,310
Ek kan verkeerd wees.

408
00:24:18,310 --> 00:24:23,360
Dit mag dalk 'n interessante ding wees as jy wil om meer gewig te plaas op bepaalde filters

409
00:24:23,360 --> 00:24:27,000
sodat hulle druk resultate verwant aan dat die filter na die top.

410
00:24:27,000 --> 00:24:31,920
Maar kan iemand my vertel wat is so spesiaal oor hierdie linkerkant?

411
00:24:31,920 --> 00:24:39,540
Hoe het u die tradisioneel kyk 'n vlug op 'n Internet diens voor dit?

412
00:24:41,600 --> 00:24:44,650
>> Ja. >> [Onhoorbaar student reaksie] >> Kan jy sê dat -

413
00:24:44,650 --> 00:24:47,530
[Student] Elke lugredery. >> Ja. Elke lugredery het sy eie webwerf.

414
00:24:47,530 --> 00:24:50,110
Dit konsolideer dinge. En?

415
00:24:50,110 --> 00:24:52,190
[Student] Jy weet presies watter tyd jy verlaat.

416
00:24:52,190 --> 00:24:54,460
Jy weet presies watter tyd jy verlaat,

417
00:24:54,460 --> 00:24:59,380
maar wat verband hou met die filters in die besonder.

418
00:25:00,710 --> 00:25:03,540
Laat my trek kajak.

419
00:25:11,490 --> 00:25:14,020
O God, pop-ups. Bad gebruikers ervaring.

420
00:25:14,020 --> 00:25:17,230
Wat gebeur wanneer ek hierdie schuifbalk beweeg?

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

422
00:25:21,010 --> 00:25:23,440
Dit is iets wat baie belangrik is.

423
00:25:23,440 --> 00:25:25,380
Voor hierdie, wanneer jy wil om 'n vlug te kyk,

424
00:25:25,380 --> 00:25:28,410
jy het om te sit in jou insette plek, jou uitset plek, pers Soek,

425
00:25:28,410 --> 00:25:31,190
sou dit verwerk en wys jou resultate.

426
00:25:31,190 --> 00:25:34,120
As jy wil om jou soektog te verander, sal jy het om terug te druk twee keer,

427
00:25:34,120 --> 00:25:39,770
tree in 'n nuwe navraag ('query') van nuuts af, en dan doen dit oor en oor weer.

428
00:25:39,770 --> 00:25:43,910
Die nice ding oor iets soos hierdie is dit gebruik 'n baie [onverstaanbaar] ding in die middel.

429
00:25:43,910 --> 00:25:46,230
Wanneer jy iets soos hierdie, is dit skiet uit 'n versoek

430
00:25:46,230 --> 00:25:48,420
en dit gaan terug al die resultate onmiddellik.

431
00:25:48,420 --> 00:25:51,680
Hierdie soort van onmiddellike terugvoer is iets wat kajak baie gewilde

432
00:25:51,680 --> 00:25:55,910
want dit is regtig maklik vir my om net my navraag verander

433
00:25:55,910 --> 00:25:58,890
en om uit te vind die dinge wat rondom 'n bepaalde reeks

434
00:25:58,890 --> 00:26:01,950
sonder om te heen en weer, heen en weer, heen en weer.

435
00:26:01,950 --> 00:26:05,200
So dit is allerhande dinge wat jy wil om te dink oor wanneer jy die ontwerp van jou webwerf.

436
00:26:05,200 --> 00:26:08,930
Hoe kan ek dit baie effektief vir my gebruikers om te gaan deur middel van wat hulle werk op

437
00:26:08,930 --> 00:26:13,010
en te kry so gou as moontlik na hul uiteindelike doel?

438
00:26:13,010 --> 00:26:16,430
[Malan] En Josef se punt vroeër oor gebruikers nie noodwendig weet wat hulle wil hê,

439
00:26:16,430 --> 00:26:18,640
wat gebaseer is op wat julle nou weet oor HTML

440
00:26:18,640 --> 00:26:22,780
en jy het blok, radio knoppies, kies spyskaarte, velde en die wil,

441
00:26:22,780 --> 00:26:26,140
hoe sou jy die uitvoering van die idee van die pluk van 'n begin van die tyd vir 'n vlug?

442
00:26:26,140 --> 00:26:30,030
>> Watter een van daardie verskillende UI-meganismes sal jy gebruik?

443
00:26:30,030 --> 00:26:34,100
As jy net weet wat die bedrag van die HTML wat voor geleer

444
00:26:34,100 --> 00:26:39,070
en jy weet die insette is radio knoppies, blok, drop-downs, en Input box,

445
00:26:39,070 --> 00:26:43,320
wat sou jou natuurlike keuse vir die pluk van datums?

446
00:26:43,320 --> 00:26:48,670
[Student] Input. >> Input. Of miskien selfs 'n drop-down met al die datums, reg?

447
00:26:48,670 --> 00:26:53,170
So met 'n meer komplekse UI meganismes soos hierdie aan die linkerkant wat jy kan implementeer,

448
00:26:53,170 --> 00:26:55,500
kan jy maak hierdie proses baie meer intuïtief met 'n schuifbalk

449
00:26:55,500 --> 00:27:01,020
want die tyd is deurlopende, en mense gewoonlik dink nie dit in terme van diskrete stukke.

450
00:27:01,020 --> 00:27:04,950
Alles reg. Laaste ding.

451
00:27:04,950 --> 00:27:07,370
Tien bruikbaarheid heuristiek.

452
00:27:07,370 --> 00:27:10,820
Al die dinge wat ons oor gepraat het waarskynlik onder een van hierdie kategorieë val.

453
00:27:10,820 --> 00:27:14,420
As jy na hierdie skakel, wat die terreine sal aanlyn gepos word,

454
00:27:14,420 --> 00:27:18,900
sal jy eintlik in staat wees om as jy die ontwerp van jou webwerf, hou hierdie heuristiek in gedagte

455
00:27:18,900 --> 00:27:21,330
en hierdie reëls van die duim.

456
00:27:21,330 --> 00:27:26,610
Vir jou projekte, wat Ek stel voor jy doen om te ontwerp jou app beter

457
00:27:26,610 --> 00:27:28,850
papier prototyping om eerste te doen.

458
00:27:28,850 --> 00:27:32,150
Wanneer jy dink oor jou aansoek, baie vinnig skets wat jy wil dit lyk soos

459
00:27:32,150 --> 00:27:36,230
en seker maak dat al die bokse is gerangskik in 'n manier wat baie intuïtief vir die gebruiker om te gebruik

460
00:27:36,230 --> 00:27:39,820
en selfs wys hierdie vraestel prototipes aan jou vriende en begin fokusgroepe.

461
00:27:39,820 --> 00:27:44,230
Kry net 2 of 3 mense saam en vra hulle om net te tik op hierdie vraestel prototipes,

462
00:27:44,230 --> 00:27:47,650
en wys vir hulle nuwe skerms om te sien of hulle werklik verstaan ​​wat aangaan.

463
00:27:47,650 --> 00:27:50,680
>> Wat jy wil doen, is hulle 'n taak gee, dat die taak te motiveer,

464
00:27:50,680 --> 00:27:53,270
en gee hulle net die jeug en laat hulle dit gebruik.

465
00:27:53,270 --> 00:27:56,530
Gee hulle geen instruksies as dit.

466
00:27:56,530 --> 00:28:00,920
Jy wil eintlik laat hulle in 'n manier wat kan jy sien met jou app

467
00:28:00,920 --> 00:28:03,870
hoe hulle dit gebruik as jy nie langs hulle staan.

468
00:28:03,870 --> 00:28:05,250
En dit is baie belangrik.

469
00:28:05,250 --> 00:28:08,780
Wat gee jou baie van die insigte met betrekking tot mense wat rondom bepaalde dinge

470
00:28:08,780 --> 00:28:10,560
in 'n manier dat ek nie van plan om dit te?

471
00:28:10,560 --> 00:28:14,680
Is hulle met behulp veral UI meganismes op die skerm

472
00:28:14,680 --> 00:28:17,490
op 'n manier wat is 'n soort van mag nou wel?

473
00:28:17,490 --> 00:28:22,020
Ek het nie van plan om te doen dit so.

474
00:28:22,020 --> 00:28:23,940
En sodra jy klaar is met dit, doen wat jy wil om dit te doen?

475
00:28:23,940 --> 00:28:26,010
Jou ontwerp rotse, reg?

476
00:28:26,010 --> 00:28:29,600
Wat jy wil doen, is wat jy wil te ontwikkel en dan doen om die proses weer.

477
00:28:29,600 --> 00:28:32,110
So wys dit vir jou vriende wanneer jy dit ontwikkel, toets dit,

478
00:28:32,110 --> 00:28:36,630
ontwikkel, te toets, te ontwikkel, te toets, iteraat, op en op en vorentoe.

479
00:28:36,630 --> 00:28:39,720
Ontwerp is 'n iteratiewe proses in hierdie sin.

480
00:28:39,720 --> 00:28:43,280
Jy eintlik iets op te bou en dan dinge oor dit besef

481
00:28:43,280 --> 00:28:46,520
dat jy nie besef voor en terug te gaan en te verbeter van daardie.

482
00:28:46,520 --> 00:28:50,890
Nou, vir die ontwikkeling deel, dit is wat Tommy gaan om jou te wys na die breek

483
00:28:50,890 --> 00:28:53,220
en hoe jy dalk in staat wees om iets soos outomaties te implementeer

484
00:28:53,220 --> 00:28:56,610
op 'n manier wat is redelik eenvoudig.

485
00:28:57,440 --> 00:28:59,550
[Malan] As Tommy sit hier, 'n vraag dan.

486
00:28:59,550 --> 00:29:03,780
Daar is baie van die vroegste websites - en toe Josef het gesê 1990's styl webwerf,

487
00:29:03,780 --> 00:29:07,640
dit was implementasies waar as jy wou 'n aanvang van die tyd te kies en 'n einde van die tyd,

488
00:29:07,640 --> 00:29:10,380
eerlik te wees, terug in die dag en selfs op 'n paar webwerwe vandag,

489
00:29:10,380 --> 00:29:13,220
die manier waarop jy dit doen, is jy kies 'n uur van 'n drop-down,

490
00:29:13,220 --> 00:29:15,910
jy kies minute van 'n drop-down, miskien jy kies AM, PM,

491
00:29:15,910 --> 00:29:17,440
en dan kan jy doen dit 3 keer.

492
00:29:17,440 --> 00:29:19,920
En so met 6 kliek en miskien 'n bietjie te blaai

493
00:29:19,920 --> 00:29:24,000
jou gebruiker kan eintlik 'n soort van die datum en / of tyd verskeidenheid in hierdie sin.

494
00:29:24,000 --> 00:29:27,920
>> So beslis suboptimale en tog so ver het ons gesien geen ekspressiewe vermoëns

495
00:29:27,920 --> 00:29:30,330
in enige van die tale wat ons het gekyk na iets sexier te doen

496
00:29:30,330 --> 00:29:32,620
soos hierdie schuifbalk van die aanvang van die tyd en die einde van die tyd.

497
00:29:32,620 --> 00:29:36,290
Maar as jy dink terug na week 0 toe het ons gepraat oor Kras,

498
00:29:36,290 --> 00:29:39,080
ook daar was daar nie widgets wat net sekere dinge gedoen het.

499
00:29:39,080 --> 00:29:42,700
Jy moet regtig net het hierdie grondbeginsels soos lusse en voorwaardes en dies meer.

500
00:29:42,700 --> 00:29:46,910
So soort van net dink nou baie abstrak, onafhanklik van die besonderhede van HTML,

501
00:29:46,910 --> 00:29:51,260
wat werklik aangaan met iets soos die aanvang van die tyd en die eindtyd schuifbalk?

502
00:29:51,260 --> 00:29:54,960
Toe ek my muis beweeg, en ek kliek op daardie klein wortel simbool aan die linkerkant

503
00:29:54,960 --> 00:29:59,220
en begin sleep, programmaties, wat is dit wat jy wil in staat wees om te implementeer

504
00:29:59,220 --> 00:30:01,000
te maak dat gebeur?

505
00:30:01,000 --> 00:30:04,920
Watter vrae, wat Boolse uitdrukkings wat jy wil in staat wees om te vra?

506
00:30:04,920 --> 00:30:06,930
Wat is werklik aan die gang? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Student] Waar is die posisie van die muis? >> Goed. Waar is die posisie van die muis?

508
00:30:10,080 --> 00:30:11,970
Dit was iets wat ons nodig het om terug te druk in die Kras,

509
00:30:11,970 --> 00:30:14,690
of dit is gebaseer op die plek of selfs kleur of die wil.

510
00:30:14,690 --> 00:30:18,410
Jy al ooit so kortliks onthou op Maandag was daar al hierdie dinge genoem gebeure

511
00:30:18,410 --> 00:30:22,370
in die wêreld van die web, en so is daar dinge soos onclick en onkeypress

512
00:30:22,370 --> 00:30:25,960
en onkeyup en onMouseOver en onmouseout.

513
00:30:25,960 --> 00:30:29,130
So besef dat selfs hierdie dinge het ons neem vir toegestaan ​​op die web

514
00:30:29,130 --> 00:30:32,190
met webwerwe soos Facebook en Gmail, selfs as jy het geen idee

515
00:30:32,190 --> 00:30:34,890
hoe sou jy moontlik implementeer, want daar is niks soos dit in die lesing

516
00:30:34,890 --> 00:30:38,570
of probleem Stel 7, besef dat met hierdie presiese dieselfde grondbeginsels,

517
00:30:38,570 --> 00:30:41,090
met HTTP en parameters en AOO-en POST,

518
00:30:41,090 --> 00:30:44,010
met die basiese HTML insette wat ons het gekyk na dusver

519
00:30:44,010 --> 00:30:47,690
en in 'n oomblik met die programmatiese meganismes wat Tommy's in te voer

520
00:30:47,690 --> 00:30:51,300
kan jy begin om jouself uit te druk, net soos jy gedoen het in die week 0

521
00:30:51,300 --> 00:30:53,800
deur baie intuïtief te sleep.

522
00:30:53,800 --> 00:30:58,950
>> Dus met wat gesê het, Tommy MacWilliam en 'n paar nuwe stukke van die legkaart vir ons vir die web.

523
00:30:58,950 --> 00:31:03,450
Alles reg. My naam is Tommy en ek gaan om te praat oor JavaScript.

524
00:31:03,450 --> 00:31:07,150
Net 'n disclaimer: Ek is van mening dat JavaScript is die beste programmeertaal

525
00:31:07,150 --> 00:31:09,010
in die hele hele wêreld.

526
00:31:09,010 --> 00:31:11,940
Daar is baie van die mense wat nie met my saamstem nie, maar dit is net amazing.

527
00:31:11,940 --> 00:31:16,330
Sodra jy gaan terug na C, as jy C te skryf vir 'n ander klas of 'n paar ander tale,

528
00:31:16,330 --> 00:31:19,780
dit is net regtig frustrerend in al die lae-vlak details wat jy het om te kry vasgeval.

529
00:31:19,780 --> 00:31:23,050
So as jy ooit voel hartseer oor hoe irriterende C is om te skryf,

530
00:31:23,050 --> 00:31:25,130
net terug te gaan, skryf 'n paar JavaScript. Dit is nirvana.

531
00:31:25,130 --> 00:31:27,980
Jy sal baie beter voel oor jou slegte dag.

532
00:31:27,980 --> 00:31:31,900
'N baie van die magie van JavaScript kom van sy vermoë om dinge te manipuleer

533
00:31:31,900 --> 00:31:33,730
wat reeds op die bladsy.

534
00:31:33,730 --> 00:31:38,520
Wanneer ons ons PHP skrifte geskryf het, is hulle uitgevoer word op die bediener,

535
00:31:38,520 --> 00:31:42,270
en uiteindelik dat PHP script waarskynlik sommige HTML uitvoer.

536
00:31:42,270 --> 00:31:45,860
Dat HTML is gestuur aan die kliënt, en dan dit was dit.

537
00:31:45,860 --> 00:31:50,180
As PHP wou 'n knoppie by te voeg 'n bladsy, byvoorbeeld, kan dit nie regtig doen.

538
00:31:50,180 --> 00:31:54,350
Dit sou 'n hele nuwe HTML-lêer te lewer en wat stuur na die leser.

539
00:31:54,350 --> 00:31:57,840
Met JavaScript weet ons dat ons dinge kan werk terwyl hulle is reeds op die bladsy,

540
00:31:57,840 --> 00:32:00,840
en as gevolg van hierdie ons kan baie meer direkte terugvoer,

541
00:32:00,840 --> 00:32:06,150
wat sal regtig die gebruikers ervaring op ons webwerf te verbeter.

542
00:32:06,150 --> 00:32:09,330
Net 'n vinnige recap van JavaScript keurders.

543
00:32:09,330 --> 00:32:11,590
Ons weet dat wanneer ons 'n HTML-bladsy laai,

544
00:32:11,590 --> 00:32:13,890
wat gaan om verteenwoordig te word in die DOM.

545
00:32:13,890 --> 00:32:19,340
>> Die DOM is onthou net hierdie groot boom waar elemente in hierdie groot hiërargie verwant is.

546
00:32:19,340 --> 00:32:21,810
Toe het ons gewerk met databasisse in pset 7,

547
00:32:21,810 --> 00:32:26,280
een van die eerste dinge wat ons nodig het om te weet hoe om dit te doen was om die databasis navraag.

548
00:32:26,280 --> 00:32:29,060
Ons het hierdie groot gebruikers tafel, en soms wil ons net om te sê,

549
00:32:29,060 --> 00:32:33,260
"Ek wil net 'n paar van hierdie gebruikers wat ooreenstem met 'n paar toestand."

550
00:32:33,260 --> 00:32:36,020
Net so, as ons die DOM ons moet een of ander manier om dit te bevraagteken.

551
00:32:36,020 --> 00:32:39,490
Ons moet 'n manier om te sê, "Ek wil al die knoppies wat só lyk

552
00:32:39,490 --> 00:32:41,860
"Of al van die beelde op die bladsy."

553
00:32:41,860 --> 00:32:44,330
En hierdie keurders ons in staat stel om dit te doen.

554
00:32:44,330 --> 00:32:45,690
Sodat net 'n vinnige recap.

555
00:32:45,690 --> 00:32:50,770
Hierdie eerste een hier, hierdie # dien, wat is dit gaan om te kies? Is daar iemand onthou?

556
00:32:50,770 --> 00:32:54,880
[Onhoorbaar student reaksie] >> Ja, presies.

557
00:32:54,880 --> 00:32:59,510
Dit gaan om 'n element te kies op die bladsy wat 'n ID van dien.

558
00:32:59,510 --> 00:33:03,470
En sodat hash tag sê hierdie selector is gaan om te werk met ID's.

559
00:33:03,470 --> 00:33:07,630
Hoe gaan dit met die tweede een, dit gesentreerde, sal wat kies?

560
00:33:11,360 --> 00:33:15,180
Ja. >> [Student] Klas. >> Presies. Dit gaan nou om te kies deur die klas.

561
00:33:15,180 --> 00:33:18,840
Die verskil tussen die ID en klas hier is oor die algemeen die ID moet uniek wees

562
00:33:18,840 --> 00:33:20,820
binne watter ruimte wat jy soek.

563
00:33:20,820 --> 00:33:23,080
So as jy op soek was oor 'n hele web bladsy,

564
00:33:23,080 --> 00:33:27,740
jy moet regtig net 1 element dat sekere ID, so in hierdie geval van dien.

565
00:33:27,740 --> 00:33:31,330
Met klasse, aan die ander kant, kan ons meer as 1 element op dieselfde bladsy

566
00:33:31,330 --> 00:33:33,130
met dieselfde klas.

567
00:33:33,130 --> 00:33:36,580
Dit kan nuttig wees om te sê ek wil alles wat op die bladsy gesentreer te kies

568
00:33:36,580 --> 00:33:38,450
eerder as om net 1 ding.

569
00:33:38,450 --> 00:33:40,310
>> En ten slotte, hierdie laaste een hier is 'n bietjie meer ingewikkeld,

570
00:33:40,310 --> 00:33:43,890
maar wat gaan dit van die DOM te kies?

571
00:33:46,650 --> 00:33:48,810
[Onhoorbaar student reaksie] >> Wat is dit?

572
00:33:48,810 --> 00:33:53,250
[Student] Enigiets wat is 'n tag. >> Ons het 2 dele hier.

573
00:33:53,250 --> 00:33:58,070
Die tweede deel is gaan om te sê ek wil hierdie tags te kies met 'n merker van insette,

574
00:33:58,070 --> 00:34:00,730
so 'n element wat 'n inset-tag.

575
00:34:00,730 --> 00:34:03,080
Maar ek wil nie te kies al die insette

576
00:34:03,080 --> 00:34:05,170
omdat iets soos 'n submit knoppie kan 'n inset

577
00:34:05,170 --> 00:34:08,409
en iets soos 'n tekskassie 'n inset kon wees.

578
00:34:08,409 --> 00:34:11,909
So met hierdie vierkantige hakies ek sê Ek wil net om die elemente te kies

579
00:34:11,909 --> 00:34:14,110
wat van die soort teks.

580
00:34:14,110 --> 00:34:17,400
Iewers in my HTML tag Ek het 'n kenmerk genaamd tipe,

581
00:34:17,400 --> 00:34:19,750
en die waarde van die kenmerk teks te wees.

582
00:34:19,750 --> 00:34:21,340
So hoe het oor hierdie eerste deel hier?

583
00:34:21,340 --> 00:34:25,489
Die eerste woord van die selector is vorm dan het ek 'n spasie en dan is hierdie insette deel.

584
00:34:25,489 --> 00:34:29,620
Wat beteken dat jy doen, om die vorm in die voorkant van dit?

585
00:34:33,409 --> 00:34:35,860
Dit gaan basies beperk ons ​​navraag.

586
00:34:35,860 --> 00:34:38,510
Dit kan die geval dat ons het 'n paar insette op die bladsy

587
00:34:38,510 --> 00:34:41,080
wat nie afstammelinge van 'n vorm.

588
00:34:41,080 --> 00:34:46,150
Wat sal dit doen, is dit sal sê: Ek wil net die inset tags wat êrens bo hulle het

589
00:34:46,150 --> 00:34:49,030
sommige ouer element van 'n vorm.

590
00:34:49,030 --> 00:34:52,100
En so in hierdie manier kan ons hierdie hiërargiese navrae

591
00:34:52,100 --> 00:34:55,000
sodat ons nie net alles wat ooreenstem met 'n gegewe keurder te kies.

592
00:34:55,000 --> 00:35:00,760
Ons kan soort van beperking van die omvang van die soektog na iets anders.

593
00:35:00,760 --> 00:35:04,000
So nou dat ons weet hoe die elemente op die bladsy te kies,

594
00:35:04,000 --> 00:35:06,780
Kom ons praat 'n bietjie oor AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX is 'n nog baie nuwerwets akroniem wat staan ​​vir Asynchronous JavaScript and XML.

596
00:35:12,270 --> 00:35:15,640
Dit gebeur net so dat XML is net 'n manier om data voor te stel.

597
00:35:15,640 --> 00:35:20,920
>> Daardie soort van verlore gewildheid het onlangs, sodat die X in AJAX is nie gebruik om al die tyd.

598
00:35:20,920 --> 00:35:26,220
Basies, wat AJAX stel ons in staat om te doen HTTP-versoek

599
00:35:26,220 --> 00:35:28,620
uit die konteks van JavaScript.

600
00:35:28,620 --> 00:35:32,310
Wanneer ons in ons web browser en ons opgevolg rondom bladsye en ons op 'n skakel klik,

601
00:35:32,310 --> 00:35:37,790
wat ons leser gaan doen, is 'n HTTP-versoek na watter skakel ons kliek.

602
00:35:37,790 --> 00:35:41,670
Maar dit is nie altyd ideaal, want as dit die geval is, dan soos Dawid het gesê,

603
00:35:41,670 --> 00:35:45,220
ons het altyd om gebruikers 'n Submit knoppie klik of kliek op 'n skakel

604
00:35:45,220 --> 00:35:50,380
ten einde te maak iets gebeur wat gaan 'n HTTP-versoek te betrek.

605
00:35:50,380 --> 00:35:54,160
So met AJAX kan ons hierdie versoeke namens van JavaScript.

606
00:35:54,160 --> 00:35:57,020
Dit beteken dat wanneer die gebruiker interaksie met die bladsy of iets gebeur,

607
00:35:57,020 --> 00:36:01,780
ons kan eintlik maak 'n programmatiese versoek om 'n ander PHP lêer op ons webwerf

608
00:36:01,780 --> 00:36:06,280
of enigiets anders in die data dat lêer spoeg uit te haal.

609
00:36:06,280 --> 00:36:09,860
Kom ons neem 'n blik op 'n voorbeeld van AJAX.

610
00:36:09,860 --> 00:36:16,140
Dit is ons CS50 Finansies bladsy wat hopelik sommige van ons vertroud is.

611
00:36:16,140 --> 00:36:21,790
As ons kyk na die HTML-kode van hierdie bladsy, sien ons hier dat ek 'n paar dinge het bygevoeg,

612
00:36:21,790 --> 00:36:23,820
een wat ek gegee het hierdie vorm om 'n ID.

613
00:36:23,820 --> 00:36:26,480
Ek het gesê id = "vorm-quote".

614
00:36:26,480 --> 00:36:31,910
Ek het dit gedoen net omdat dit gaan om te maak dit 'n bietjie makliker om te kies uit die DOM

615
00:36:31,910 --> 00:36:35,090
want ek kan net 'n baie eenvoudige navraag.

616
00:36:35,090 --> 00:36:38,960
Wat ek hier wil doen is wil ek 'n probleem op te los met CS50 Finansies.

617
00:36:38,960 --> 00:36:41,550
So as ons gaan na finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
elke keer as ek wil 'n kwotasie te kry, ek het dit kry Quote knoppie te klik,

619
00:36:45,700 --> 00:36:48,960
en dat Kry Quote button neem my dan na 'n ander bladsy.

620
00:36:48,960 --> 00:36:52,400
En as ek wil 'n ander aanhaling, ek het die Back knoppie om te tref en dan het ek tik dit in,

621
00:36:52,400 --> 00:36:54,480
Ek kry 'n kwotasie, en ek druk die Terug-knoppie.

622
00:36:54,480 --> 00:36:56,840
Dit is regtig nie die beste gebruikers ervaring.

623
00:36:56,840 --> 00:37:01,570
Wie sou regtig gebruik van die werf as dit is wat stadig voorraad pryse te kry?

624
00:37:01,570 --> 00:37:05,630
So, wat ons wil doen met AJAX, is dat die stap gaan na 'n aparte bladsy te verwyder

625
00:37:05,630 --> 00:37:08,410
ten einde die resultate te sien.

626
00:37:08,410 --> 00:37:11,240
>> Wat ons eintlik net vra vir is dat baie klein prys,

627
00:37:11,240 --> 00:37:14,240
en dit is net 'n baie klein hoeveelheid data.

628
00:37:14,240 --> 00:37:17,400
Dus is daar geen noodsaaklikheid vir my nog 'n hele HTML-bladsy om te gaan,

629
00:37:17,400 --> 00:37:20,670
download 'n hele nuwe bondel van HTML, miskien n paar meer foto's aflaai,

630
00:37:20,670 --> 00:37:24,410
n paar ander CSS-lêers net vir my dat baie eenvoudige vraag te beantwoord

631
00:37:24,410 --> 00:37:27,810
van hoeveel hierdie voorraad koste.

632
00:37:27,810 --> 00:37:31,000
Met AJAX kan ons maak dit 'n baie makliker.

633
00:37:31,000 --> 00:37:36,400
Ons sien hier dat ek met 'n skakel in 'n JavaScript-lêer genaamd quote.js.

634
00:37:36,400 --> 00:37:40,140
Kom ons eintlik om die lêer oop te maak. Nie daar nie.

635
00:37:42,610 --> 00:37:45,860
Al van my JavaScript-lêers gaan word geleë in HTML

636
00:37:45,860 --> 00:37:47,630
sodat die webblaaier kan oopmaak.

637
00:37:47,630 --> 00:37:50,330
Dan het ons 'n aparte gids hier vir JavaScript,

638
00:37:50,330 --> 00:37:54,340
en nou is hier quote.js.

639
00:37:54,340 --> 00:38:00,930
Op die top van hierdie lêer hier sê wat ek wil om te wag vir die hele bladsy gelaai word

640
00:38:00,930 --> 00:38:04,830
voordat ek probeer om iets te doen. Hoekom is dit nodig?

641
00:38:04,830 --> 00:38:08,650
Dit blyk dat die volgende ding wat ek gaan doen is begin soek vir 'n element

642
00:38:08,650 --> 00:38:10,810
wat ooreenstem met n keurder.

643
00:38:10,810 --> 00:38:15,600
As dit JavaScript ooit uitgevoer word voordat hierdie element is op die bladsy gelaai,

644
00:38:15,600 --> 00:38:17,820
dan is alles wat ek probeer om te doen, is nie van plan om te werk

645
00:38:17,820 --> 00:38:20,580
want ek gaan om te probeer om iets wat nie daar is nie nog te kies.

646
00:38:20,580 --> 00:38:23,780
So hierdie lyn tot bo sê ek wil hê jy moet wag totdat alles is gelaai

647
00:38:23,780 --> 00:38:28,030
sodat ons gewaarborg dat enige elemente Ek is op soek na is eintlik op die bladsy.

648
00:38:29,730 --> 00:38:34,310
Hierdie dollar teken beteken hier Ek is die gebruik van die biblioteek genaamd jQuery.

649
00:38:34,310 --> 00:38:38,570
Hierdie jQuery biblioteek kan ons hierdie keurders dat ons net kyk na gebruik.

650
00:38:38,570 --> 00:38:44,010
Deur te sê $ dan verby in as 'n argument # vorm-aanhaling,

651
00:38:44,010 --> 00:38:47,910
Ek nou die keuse van daardie vorm dat ons het net 'n blik op.

652
00:38:47,910 --> 00:38:52,290
Ek het nou 'n voorstelling van die vorm in die geheue op een of ander manier.

653
00:38:52,290 --> 00:38:56,760
>> Op hierdie item nou, hierdie voorstelling van die vorm,

654
00:38:56,760 --> 00:38:58,890
Ek nou met 'n funksie genoem.

655
00:38:58,890 --> 00:39:02,710
Wat hierdie funksie doen, is dit gaan 'n event handler aan te heg.

656
00:39:02,710 --> 00:39:06,310
Die geval dat ons gaan om te luister is die submit gebeurtenis.

657
00:39:06,310 --> 00:39:08,890
So wanneer die gebruiker wat Submit knoppie of druk Enter,

658
00:39:08,890 --> 00:39:11,730
hierdie gebeurtenis gaan om te vuur.

659
00:39:11,730 --> 00:39:16,390
Deur die haak in hierdie, ek kan nou voorrang op die standaard gedrag van die vorm.

660
00:39:16,390 --> 00:39:19,770
Sonder hierdie JavaScript, sou die vorm aan watter PHP lêer

661
00:39:19,770 --> 00:39:22,110
wat ons gebruik in daardie optrede kenmerk.

662
00:39:22,110 --> 00:39:25,440
Maar in plaas ek nou sê, wag, wag, wag, ek wil nie hê jy eintlik doen.

663
00:39:25,440 --> 00:39:31,140
Ek wil dit om te gebeur voordat jy gaan en probeer om te dien tot 'n PHP-lêer.

664
00:39:31,140 --> 00:39:32,870
Nou wat ek wil om dit te doen?

665
00:39:32,870 --> 00:39:39,270
Op hierdie punt wil ek AJAX om een ​​of ander manier in wat die prys van die voorraad is gebruik om te laai.

666
00:39:39,270 --> 00:39:44,170
Die eerste ding wat ek nodig het om te weet wat die gebruiker is op soek na.

667
00:39:44,170 --> 00:39:46,760
Om te doen wat ek gaan nog 'n keurder te gebruik.

668
00:39:46,760 --> 00:39:49,020
Dit is die derde keurder het ons gekyk na voor.

669
00:39:49,020 --> 00:39:54,460
Dit sê wat ek wil om te begin hierdie vorm element met 'n ID-vorm-kwotasie.

670
00:39:54,460 --> 00:39:58,440
Dan iewers binnekant van daardie vorm moet daar 'n inset element

671
00:39:58,440 --> 00:40:01,270
wat het 'n naam van die simbool.

672
00:40:01,270 --> 00:40:05,460
As ons terugkyk op ons HTML, het ons gesien dat ons het 'n inset [naam = simbool].

673
00:40:05,460 --> 00:40:12,380
Dit beteken dat dit gaan dat die teks boks te kies wat die gebruiker tik in.

674
00:40:12,380 --> 00:40:13,870
Dit is lekker. Ons het die tekskassie.

675
00:40:13,870 --> 00:40:17,360
Nou het ons net nodig het om te weet wat is binnekant van dit.

676
00:40:17,360 --> 00:40:20,290
Te doen wat ons kan hierdie metode hier noem,. Val,

677
00:40:20,290 --> 00:40:23,240
en dit sê ek weet watter tekskassie jy.

678
00:40:23,240 --> 00:40:28,160
Ek wil hê dat jy my te vertel wat is dit die gebruiker in daardie teks boks getik.

679
00:40:28,160 --> 00:40:34,440
Nou het ons 'n string met die naam simbool wat is gelyk aan wat die gebruiker ingetik.

680
00:40:34,440 --> 00:40:39,820
Dit is lekker. Ons kan dit string nou gebruik om ons versoek te maak.

681
00:40:39,820 --> 00:40:42,450
Dit is 'n nuwe funksie hier, $,

682
00:40:42,450 --> 00:40:44,900
behalwe ons nie langer gaan word kies elemente,

683
00:40:44,900 --> 00:40:48,910
ons gaan die uitroep van 'n ander funksie wat aan ons verskaf is deur jQuery.

684
00:40:48,910 --> 00:40:54,810
Dit AJAX-funksie is wat eintlik gaan hierdie HTTP-versoek te maak.

685
00:40:54,810 --> 00:40:57,000
So ons het dit 'n paar dinge te vertel.

686
00:40:57,000 --> 00:41:01,410
Die eerste ding wat ons het om hierdie funksie te vertel, is waar ek wil die versoek om te gaan.

687
00:41:01,410 --> 00:41:08,910
Iewers in my projek Ek het hierdie lêer binnekant van die HTML-directory genaamd quote.php.

688
00:41:08,910 --> 00:41:15,150
Ek kan toegang tot hierdie lêer, ons gesien het, net soos hierdie, as ek gaan na localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Ek wil my JavaScript 'n versoek aan die bladsy te maak.

690
00:41:20,450 --> 00:41:22,920
Watter tipe versoek nou?

691
00:41:22,920 --> 00:41:27,210
Ons het gesien voor dat die vorm dat method = "post" kenmerk,

692
00:41:27,210 --> 00:41:29,270
en dit beteken dat dit gaan 'n POST versoek te maak,

693
00:41:29,270 --> 00:41:32,630
so dit is nie van plan om iets te maak in die URL, eerder as 'n GET-versoek,

694
00:41:32,630 --> 00:41:36,860
wat net afgedank sou word as ons net die bladsy met die webblaaier verkry, byvoorbeeld.

695
00:41:36,860 --> 00:41:41,260
Nou het ons het gesê ek wil 'n HTTP POST versoek te maak

696
00:41:41,260 --> 00:41:44,840
na 'n bladsy wat geleë op quote.php.

697
00:41:44,840 --> 00:41:51,490
Wanneer ons die vorm, onthou ons die inset-elemente binnekant van daardie vorm kan toegang

698
00:41:51,490 --> 00:41:54,430
met daardie $ _POST veranderlike.

699
00:41:54,430 --> 00:41:58,710
Tot dusver in die storie het ons eintlik nie langs enige data gestuur nie.

700
00:41:58,710 --> 00:42:00,640
Ons het net gesê ons maak 'n AJAX versoek

701
00:42:00,640 --> 00:42:03,200
en hier is die tipe versoek ons ​​maak.

702
00:42:03,200 --> 00:42:07,090
Nou het ons nodig het om werklik sommige data stuur na die bladsy.

703
00:42:07,090 --> 00:42:10,930
Te doen wat ons kan hierdie eienskap genoem data gebruik.

704
00:42:10,930 --> 00:42:14,950
Die waarde van hierdie eiendom is eintlik 'n associatieve array.

705
00:42:14,950 --> 00:42:19,390
Die rede hiervoor is dat dit stel ons in staat om meer as net 1 stukkie van data te stuur.

706
00:42:19,390 --> 00:42:24,750
Dit is waarom ons hierdie kode tussen krulhakies hier geneste binnekant van hierdie ander krullerige draadjies.

707
00:42:24,750 --> 00:42:29,680
Die sleutels in hierdie assosiatiewe skikkings gaan dieselfde ding

708
00:42:29,680 --> 00:42:32,630
as dié naam skryf in ons vorm elemente.

709
00:42:32,630 --> 00:42:35,740
Dit beteken dat as ek langs 'n sleutel van die simbool stuur,

710
00:42:35,740 --> 00:42:41,870
wat beteken dat my PHP hierdie data met $ _POST [simbool] kan toegang tot

711
00:42:41,870 --> 00:42:44,640
net soos ons gedoen het voor toe ons die indiening van 'n vorm.

712
00:42:44,640 --> 00:42:47,090
En nou die werklike data wat ons wil stuur

713
00:42:47,090 --> 00:42:50,790
gaan om die waarde binnekant van hierdie associatieve array.

714
00:42:50,790 --> 00:42:54,070
>> Ons gestoor hierdie teks in 'n veranderlike genoem simbool,

715
00:42:54,070 --> 00:42:57,380
en so ons stuur saam nou 'n sleutel van die simbool

716
00:42:57,380 --> 00:43:01,380
en 'n waarde wat die gebruiker ingetik.

717
00:43:01,380 --> 00:43:06,270
Nou het ons het hierdie HTTP-versoek, ons PHP lêer uitgevoer word,

718
00:43:06,270 --> 00:43:11,480
en dit gaan sommige data terug te stuur na die kliënt wat net hierdie versoek.

719
00:43:11,480 --> 00:43:15,220
Nou het ons nodig het om te reageer op wat die bediener het aan ons gesê.

720
00:43:15,220 --> 00:43:20,180
Te doen wat ons het hierdie laaste eiendom hier genoem sukses.

721
00:43:20,180 --> 00:43:24,240
Die waarde van hierdie sukses sleutel is eintlik van plan om 'n funksie te wees,

722
00:43:24,240 --> 00:43:26,910
en dit is een van die baie cool dinge wat jy kan doen met JavaScript.

723
00:43:26,910 --> 00:43:31,720
Nie net kan jy ints of skikkings as 'n waarde binnekant van 'n associatieve array,

724
00:43:31,720 --> 00:43:34,170
ons kan ook 'n funksie.

725
00:43:34,170 --> 00:43:36,380
Dus, deur te sê sukses, dit is my sleutel.

726
00:43:36,380 --> 00:43:38,830
'N dubbelpunt sê hier kom die waarde,

727
00:43:38,830 --> 00:43:41,810
en nou is die waarde van hierdie is eintlik 'n funksie.

728
00:43:41,810 --> 00:43:44,460
So ons hoef nie hierdie funksie gee 'n naam per se.

729
00:43:44,460 --> 00:43:48,820
Ons kan nie net sê dit gaan om 'n funksie te wees. Dit gaan 1 argument te neem.

730
00:43:48,820 --> 00:43:51,190
Die argument vir hierdie funksie gaan wees

731
00:43:51,190 --> 00:43:54,460
wat die bediener gestuur ons terug van die versoek.

732
00:43:54,460 --> 00:43:57,750
Net soos wanneer ons leser 'n versoek, die bediener stuur iets terug

733
00:43:57,750 --> 00:43:59,060
en die browser vertoon,

734
00:43:59,060 --> 00:44:03,030
in die konteks van AJAX ons net 'n versoek, die bediener gestuur om iets terug,

735
00:44:03,030 --> 00:44:07,110
en nou het ons as 'n string wat verteenwoordig.

736
00:44:07,110 --> 00:44:11,280
Met daardie string Ek wil net om dit te vertoon op die bladsy.

737
00:44:11,280 --> 00:44:14,040
Om te doen wat ek gaan 'n laaste selector te hê.

738
00:44:14,040 --> 00:44:17,570
Ek wil die element met die ID prys te kies.

739
00:44:17,570 --> 00:44:20,710
Dit is net 'n leë div wat ek gemaak het op die bladsy,

740
00:44:20,710 --> 00:44:26,640
en ek wil hê dat die inhoud van daardie div te wees wat die bediener gestuur ons terug te stel.

741
00:44:26,640 --> 00:44:30,280
Ek het eintlik verander quote.php 'n bietjie.

742
00:44:30,280 --> 00:44:33,460
>> Eerder as die roeping van die lewer en die lewering van 'n paar bladsy,

743
00:44:33,460 --> 00:44:38,100
quote.php nou net gaan om die waarde van die voorraad as 'n string uit te druk.

744
00:44:38,100 --> 00:44:41,880
So as jy die bladsy besoek, jy sal net sien dat klein string

745
00:44:41,880 --> 00:44:45,030
ongeag die aandeelprys is.

746
00:44:45,030 --> 00:44:50,170
Een laaste ding wat ons nodig het om hier te doen is maak net seker dat hierdie funksie gee vals.

747
00:44:50,170 --> 00:44:53,560
Wat dit sê, is dat as ek binnekant van 'n event handler

748
00:44:53,560 --> 00:44:57,300
en dat die event handler terug in plaas van die terugkeer van ware vals,

749
00:44:57,300 --> 00:45:01,510
dit beteken dat ek nie wil hê dat die oorspronklike gebeurtenis aan die brand.

750
00:45:01,510 --> 00:45:05,270
In hierdie geval, as ons het nie enige JavaScript en ons 'n vorm ingedien,

751
00:45:05,270 --> 00:45:08,280
ons web browser gaan om te sê, "Ek gaan dat die data saam te stuur,"

752
00:45:08,280 --> 00:45:10,130
en hulle gaan om jou te stuur na 'n ander bladsy.

753
00:45:10,130 --> 00:45:14,360
Want ons is met behulp van AJAX nou, daar is geen behoefte om die gebruiker te stuur na 'n ander bladsy.

754
00:45:14,360 --> 00:45:17,920
Ons is maar net gaan om die resultate te dinamies op hierdie bladsy vertoon.

755
00:45:17,920 --> 00:45:21,460
Ons wil regtig nie hulle om oral te gaan, en ek wil om te bly op dieselfde bladsy.

756
00:45:21,460 --> 00:45:27,060
So deur die terugkeer vals, het ons verseker dat die vorm nie doen wat vir ons.

757
00:45:27,060 --> 00:45:31,170
Kom ons neem 'n blik op wat dit eintlik lyk soos.

758
00:45:31,170 --> 00:45:34,180
Ons kwotasie bladsy lyk dieselfde.

759
00:45:34,180 --> 00:45:37,240
Laat my trek die inspekteur hier neer sodat ons kan sien wat aangaan.

760
00:45:37,240 --> 00:45:40,270
Maak dit 'n bietjie minder groot.

761
00:45:40,270 --> 00:45:44,590
Onthou, as ons die Netwerk blad oop te maak, dit is waar ons kan sien al die HTTP-versoek

762
00:45:44,590 --> 00:45:47,570
wat gebeur op die bladsy.

763
00:45:47,570 --> 00:45:52,890
>> Vir 'n simbool laat my tik in AAPL en klik Kry Kwotasie.

764
00:45:52,890 --> 00:45:56,720
Nou het ons gesien dat 'n deel van Apple n aantal dollars kos

765
00:45:56,720 --> 00:46:00,410
net op die bladsy verskyn, maar die URL het glad nie verander nie.

766
00:46:00,410 --> 00:46:04,570
In werklikheid, is hier om die HTTP-versoek dat ons nou net gemaak het.

767
00:46:04,570 --> 00:46:09,980
Ons het 'n POST-aanvraag tot quote.php. Dit maak sin.

768
00:46:09,980 --> 00:46:12,800
Dit is wat die bediener gestuur ons terug.

769
00:46:12,800 --> 00:46:16,320
Dit is nie meer hierdie groot HTML-dokument met beelde en dinge soos wat,

770
00:46:16,320 --> 00:46:20,920
dit is net 'n reël van die teks, en dan moet ons net die lyn van teks vertoon.

771
00:46:20,920 --> 00:46:26,290
As ons terug gaan na die headers en sien wat ons eintlik binnekant van die HTTP-versoek gestuur,

772
00:46:26,290 --> 00:46:33,950
kan ons sien hier dat ons langs 'n sleutel van die simbool en 'n waarde van AAPL gestuur,

773
00:46:33,950 --> 00:46:36,430
en dit is wat die gebruiker ingetik.

774
00:46:36,430 --> 00:46:39,230
Dit is mooi, maar dit is nog steeds 'n bietjie lastig.

775
00:46:39,230 --> 00:46:42,490
Ek het nog steeds hierdie knoppie te kliek op die voorraad kwotasie te kry.

776
00:46:42,490 --> 00:46:45,880
Ons is 'n besige mense en ons het nie tyd om knoppies te klik.

777
00:46:45,880 --> 00:46:49,910
Google besef dat dit 'n rukkie gelede wanneer hulle Google Instant geïmplementeer.

778
00:46:49,910 --> 00:46:53,590
Wat Google Instant is soos jy tik dit begin net die vertoon van die resultate vir jou

779
00:46:53,590 --> 00:46:56,520
sodat jy nie hoef te bekommer oor selfs kliek Soek.

780
00:46:56,520 --> 00:46:58,730
Eintlik is 'n prettige storie met betrekking tot daardie.

781
00:46:58,730 --> 00:47:01,100
Sodra Google Instant uitgekom, mense was soos, "Whoa, dit is super amazing."

782
00:47:01,100 --> 00:47:02,540
"Dit is so cool."

783
00:47:02,540 --> 00:47:05,950
En 'n student by Stanford wat was 19 by die tyd

784
00:47:05,950 --> 00:47:09,000
hierdie webwerf genaamd YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Alle YouTube Instant nie effektief Soek Youtube onmiddellik.

786
00:47:13,170 --> 00:47:17,020
So eerder as om te gaan na YouTube.com en druk Search,

787
00:47:17,020 --> 00:47:21,650
wanneer ek begin tik in YouTube Instant iets soos CS50,

788
00:47:21,650 --> 00:47:25,320
ons kan hier sien dat dit 'n poging om op 'n stadige internetkonneksie

789
00:47:25,320 --> 00:47:28,500
bevolk hierdie resultate leef.

790
00:47:28,500 --> 00:47:35,590
Te doen wat ons kan eintlik 'n baie eenvoudige verandering aan ons quote.js lêer.

791
00:47:35,590 --> 00:47:40,900
Reg nou is ons heg hierdie gebeurtenis wanneer die vorm ingedien word.

792
00:47:40,900 --> 00:47:43,760
Ons het nie regtig wil die gebruiker te maak daardie vorm indien meer,

793
00:47:43,760 --> 00:47:48,570
so laat hierdie gebeurtenis plaas brand elke keer as die gebruiker druk 'n sleutel.

794
00:47:48,570 --> 00:47:53,200
Om te doen wat jou laat se eerste verander die geval aan keyup.

795
00:47:53,200 --> 00:47:55,740
Dit beteken dat eerder as om te wag vir die vorm in te dien,

796
00:47:55,740 --> 00:47:58,490
elke keer as die sleutel gedruk word, is iets wat gaan gebeur nie.

797
00:47:58,490 --> 00:48:02,030
Dit maak nie meer sin om hierdie keyup gebeurtenis te heg aan die hele vorm.

798
00:48:02,030 --> 00:48:05,080
Ons het regtig net omgee dat die soekkassie.

799
00:48:05,080 --> 00:48:09,320
>> Te kies wat nou, kan ons verander om dit te wees, eerder as vorm-aanhaling,

800
00:48:09,320 --> 00:48:14,220
vorm-kwotasie en ons sal 'n inset (tik = teks) of ons kan sê (naam = simbool) -

801
00:48:14,220 --> 00:48:16,420
wat ons wil.

802
00:48:16,420 --> 00:48:18,650
Nou is daar 'n laaste ding wat ons moet doen.

803
00:48:18,650 --> 00:48:21,190
Onthou hier neer wanneer ons gesê return false

804
00:48:21,190 --> 00:48:24,370
ons het gesê dat ons nie wil hê dat die standaard geval aan die brand.

805
00:48:24,370 --> 00:48:26,390
Maar dit gebeur net so dat as ons wat nou afskakel,

806
00:48:26,390 --> 00:48:29,660
wat ons ook al tik is nie van plan om te wys in die leser nie

807
00:48:29,660 --> 00:48:33,000
want dit sou die standaard gedrag van tik in 'n tekskassie.

808
00:48:33,000 --> 00:48:38,660
Ons wil nie langer te omseil dat, so laat hierdie opgawe vernietig vals.

809
00:48:38,660 --> 00:48:44,800
As ons red en dan die bladsy te herlaai, nou wanneer ek begin tik AAPL

810
00:48:44,800 --> 00:48:50,160
sal jy sien dat die aandeelprys op die bodem hier outomaties voltooiing.

811
00:48:50,160 --> 00:48:53,150
So hier is CS50 Finansies Instant.

812
00:48:53,150 --> 00:48:55,860
Eintlik is 'n prettige storie oor die YouTube Instant

813
00:48:55,860 --> 00:48:59,420
word dat die student net soort van het dit geskryf as 'n 1-nag-projek,

814
00:48:59,420 --> 00:49:03,800
en die volgende dag is hy 'n werk aangebied deur die YouTube-uitvoerende hoof.

815
00:49:03,800 --> 00:49:10,610
So so eenvoudig soos dit, jy CS50 studente, jou finale projekte kan kry jy 'n werk by YouTube.

816
00:49:10,610 --> 00:49:14,720
Iets soos dit is 'n baie cool idee vir 'n finale projek, reg?

817
00:49:14,720 --> 00:49:18,170
Ons het 'n paar bestaande funksies wat ons wou om te integreer met.

818
00:49:18,170 --> 00:49:20,330
Ons het die gebruikers se ervaring te verbeter 'n bietjie,

819
00:49:20,330 --> 00:49:24,340
en skielik soek iets op YouTube Instant kan 'n baie makliker

820
00:49:24,340 --> 00:49:27,290
as op soek na dit op gereelde YouTube.

821
00:49:27,290 --> 00:49:30,790
So dit is AJAX in 'n neutedop.

822
00:49:30,790 --> 00:49:34,860
>> In die voorbeelde dat Josef wat ons gesien het 'n baie autocompletes,

823
00:49:34,860 --> 00:49:39,250
en die autocompletes is regtig, regtig handig, want ons hoef nie te onthou nie -

824
00:49:39,250 --> 00:49:41,770
Byvoorbeeld, as jy onthou nie die voorraad prys vir Apple

825
00:49:41,770 --> 00:49:45,110
en ons weet net dit is aa iets, eerder as om net vir my sê,

826
00:49:45,110 --> 00:49:48,740
"'N deel van hierdie ding kos dit baie geld,"

827
00:49:48,740 --> 00:49:52,540
Ek wil soort van soos om te weet wat die voorraad wat begin met aa.

828
00:49:52,540 --> 00:49:58,340
Ons kan dit doen regtig mooi met die Skoenlus biblioteek wat reeds ingesluit

829
00:49:58,340 --> 00:50:01,380
binnekant van CS50 Finansies.

830
00:50:01,380 --> 00:50:09,390
As jy kom hier om die JavaScript-kode en scroll af na Typeahead,

831
00:50:09,390 --> 00:50:13,730
dit is net 'n mooi plugin dat iemand reeds vir ons geskryf het,

832
00:50:13,730 --> 00:50:16,980
en ons kan maklik sy funksionaliteit soos hierdie gebruik.

833
00:50:16,980 --> 00:50:21,410
Ek getik in 'n A en hier is 'n lys van 'n paar lande wat begin met A

834
00:50:21,410 --> 00:50:25,360
Kom ons sê dat ek dink dit is regtig cool en dit is tyd vir my om dit te sluit op my bladsy.

835
00:50:25,360 --> 00:50:28,300
Dit blyk dat dit is regtig, regtig eenvoudig.

836
00:50:28,300 --> 00:50:32,810
Kom se spring oor hier om te quote3.js.

837
00:50:34,890 --> 00:50:37,380
My lêer lyk 'n bietjie anders.

838
00:50:37,380 --> 00:50:39,700
Down hier al van my AJAX dinge is dieselfde.

839
00:50:39,700 --> 00:50:43,170
Ek wil die voorraad data te laai sonder om te gaan na 'n ander bladsy.

840
00:50:43,170 --> 00:50:46,220
Maar nou wil ek hierdie plugin te gebruik.

841
00:50:46,220 --> 00:50:51,020
Die Skoenlus dokumentasie het groot voorbeelde van presies hoe ek dit kan doen.

842
00:50:51,020 --> 00:50:54,350
Ek wil om te sê, "Hier is die insette wat ek wil outomaties op,"

843
00:50:54,350 --> 00:50:56,640
en ek gaan hierdie funksie genoem typeahead te roep,

844
00:50:56,640 --> 00:50:59,730
en dit gaan al die Typeahead dinge vir ons om te hanteer.

845
00:50:59,730 --> 00:51:02,090
Dit sal die lys inisialiseer, en sal dit doen al van ons filter.

846
00:51:02,090 --> 00:51:06,680
Die enigste ding wat dit nodig het om te weet watter data ons autocompleting op.

847
00:51:06,680 --> 00:51:10,480
So het ek uitgevind hierdie sleutel net deur die lees van die dokumentasie en kyk na die voorbeelde.

848
00:51:10,480 --> 00:51:14,150
As ek gee dit 'n sleutel van die bron, die waarde van hierdie sleutel

849
00:51:14,150 --> 00:51:17,770
is net n verskeidenheid van dinge wat ek wil outomaties op.

850
00:51:17,770 --> 00:51:20,180
Hierdie veranderlike het van hierdie ander lêer.

851
00:51:20,180 --> 00:51:23,400
Ek oopmaak symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Dit symbols.js is net baie, baie groot skikking met stringe

853
00:51:27,980 --> 00:51:32,080
van alle van hierdie voorraad simbole van die NASDAQ.

854
00:51:32,080 --> 00:51:42,190
As ek wil om terug te spring na die HTML, so jharvard, vhosts, globalhost, html, templates,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Want dit is nou quote3.js genoem, laat my die JavaScript-lêer wat ek hier insluitende verander.

857
00:51:50,910 --> 00:51:55,110
Nou het ek quote3.js, so ek gaan in daardie afsonderlike JavaScript-lêer te laai,

858
00:51:55,110 --> 00:51:57,910
die een wat Skoenlus outomaties.

859
00:51:57,910 --> 00:52:04,430
Nou wanneer ek spring terug na die leser, dan die bladsy te herlaai, en ek begin tik aa,

860
00:52:04,430 --> 00:52:06,880
daar is my outovoltooiing. En dit was regtig so eenvoudig soos dit.

861
00:52:06,880 --> 00:52:11,400
Ek het 1 reël van die kode wat net gesê, "Hier is die dinge wat ek wil outomaties op,"

862
00:52:11,400 --> 00:52:16,590
en skielik het ek het dit regtig, regtig mooi funksionaliteit met nie 'n hele klomp van die poging om op al.

863
00:52:16,590 --> 00:52:19,810
As jy die ontwikkeling van webwerwe en veral die voorkant kant van dinge,

864
00:52:19,810 --> 00:52:21,840
jy gaan om uit te vind dit die geval is 'n baie.

865
00:52:21,840 --> 00:52:25,700
Daar is 'n baie, baie, baie werklik 'n koel gratis biblioteke daar buite

866
00:52:25,700 --> 00:52:30,190
wat maak dit super maklik om dinge te doen soos hierdie.

867
00:52:30,190 --> 00:52:37,230
Kan iemand dink van enige nadele van net autocompleting op hierdie groot lys van simbole?

868
00:52:37,230 --> 00:52:41,580
Wat kan iets wat is nie die beste met hierdie benadering wees?

869
00:52:42,790 --> 00:52:45,960
Ja. >> [Student] Tyd, as jy het 'n baie van [onhoorbaar]

870
00:52:45,960 --> 00:52:50,420
Ja. Reg nou is ons hierdie groot JavaScript-lêer te laai en daar is 'n baie van die simbole.

871
00:52:50,420 --> 00:52:54,360
En so, as ons het 'n ton van die dinge, kan hierdie soort van die latency van nie net soek verhoog

872
00:52:54,360 --> 00:52:56,600
maar ook die aflaai van die lêer.

873
00:52:56,600 --> 00:52:58,670
Groot. Enigiets anders?

874
00:53:01,950 --> 00:53:05,280
Reg nou is daar geen ware sin van die relevansie.

875
00:53:05,280 --> 00:53:08,190
As ek in 'n A, die maatskappye wat wys hier tik

876
00:53:08,190 --> 00:53:11,220
dalk nie die mees gewilde maatskappye wat begin met A

877
00:53:11,220 --> 00:53:17,130
>> Voordat ek na Apple, kan dit meer karakters te vind wat ek soek.

878
00:53:17,130 --> 00:53:20,420
Hierdie outomaties nie hierdie gevoel van relevansie.

879
00:53:20,420 --> 00:53:24,400
Dit is net gaan om te sê, "Enigiets wat ooreenstem met wat ek gaan om te vertoon."

880
00:53:24,400 --> 00:53:30,510
In plaas van dat, wil ek graag na een of ander manier te integreer relevansie in my soektogte.

881
00:53:30,510 --> 00:53:36,440
As ek gaan hier Yahoo! Finansies finance.yahoo.com

882
00:53:36,440 --> 00:53:42,100
As ek probeer om 'n simbool te voer op Yahoo! Finansies se bladsy

883
00:53:42,100 --> 00:53:52,310
en ek begin tik goog, ek het hierdie mooi lys van dinge.

884
00:53:52,310 --> 00:53:57,100
Duidelik, dit lyk soos Yahoo! Finansies is om iets te doen meer slim hier.

885
00:53:57,100 --> 00:53:59,790
Hulle het 'n paar relevansie en hulle het ook bykomende inligting

886
00:53:59,790 --> 00:54:01,430
soos die naam van die voorraad.

887
00:54:01,430 --> 00:54:05,850
Dit is iets wat ek regtig nie kan kry met net my voorraad lys van simbole.

888
00:54:05,850 --> 00:54:09,520
Ek wil dit en so ek gaan om dit in te neem.

889
00:54:09,520 --> 00:54:11,790
Om dit te doen Kom ons doen 'n paar dinge.

890
00:54:11,790 --> 00:54:15,580
Laat ons eers die inspekteur op hierdie bladsy

891
00:54:15,580 --> 00:54:18,100
want ons sien dat hierdie bladsy is nie op alle herlaai,

892
00:54:18,100 --> 00:54:21,960
so dit is waarskynlik die gebruik van AJAX een of ander manier word die laai van sy data.

893
00:54:21,960 --> 00:54:23,920
Ons kan uitvind watter data dit laai.

894
00:54:23,920 --> 00:54:28,390
As ek kliek op hierdie blad Netwerk, is hierdie gaan wees al die versoeke wat begin afgedank word.

895
00:54:28,390 --> 00:54:34,020
Nou as ek tik in trek, kan ons sien dat Ek het net 'n nuwe HTTP-versoek.

896
00:54:34,020 --> 00:54:37,490
Dit is waarskynlik waar die data vandaan kom.

897
00:54:37,490 --> 00:54:41,990
Seker genoeg, as ek kyk na hierdie URL, wat is 'n bietjie vreemd genoem,

898
00:54:41,990 --> 00:54:46,930
kan ons sien dat dit presies is waar Yahoo is die stuur van sy data uit.

899
00:54:46,930 --> 00:54:53,400
>> Ek het 'n aparte lêer genaamd suggest.php wat baie soortgelyk is in die gees na die soek funksie.

900
00:54:53,400 --> 00:54:57,730
Dit is basies 'n navraag te Yahoo se URL te maak, terug te kry sommige data,

901
00:54:57,730 --> 00:54:59,750
en stuur dit terug na my toe.

902
00:54:59,750 --> 00:55:02,570
Nou, eerder as die gebruik van hierdie groot, groot lys van simbole,

903
00:55:02,570 --> 00:55:05,280
Ek kan gebruik Yahoo se mooi relevansie dinge,

904
00:55:05,280 --> 00:55:08,150
en ek het nie daardie massiewe JavaScript-lêer af te laai.

905
00:55:08,150 --> 00:55:12,040
Ek gaan net die werklik relevante simbole vir aandele af te trek.

906
00:55:12,040 --> 00:55:13,960
Kom ons spring in daardie.

907
00:55:13,960 --> 00:55:17,360
So html, JS. Ons is nou in quote4.

908
00:55:17,360 --> 00:55:22,120
Nou is ons nie meer gebruik dat 'n groot lys van JavaScript-lêers.

909
00:55:22,120 --> 00:55:24,430
Maar daar is 'n klein soort van ontwerp probleem hier.

910
00:55:24,430 --> 00:55:28,200
Ons het gesê dat die A in AJAX is asynchrone.

911
00:55:28,200 --> 00:55:31,000
Wat dit beteken is dat wanneer ek maak 'n AJAX-versoek,

912
00:55:31,000 --> 00:55:36,490
so reg hier on line 8, dit is waar my AJAX-versoek eintlik afgedank.

913
00:55:36,490 --> 00:55:40,370
Kom ons sê nou Ek het 'n paar kode hier onder wat gaan 'n paar dinge om te doen

914
00:55:40,370 --> 00:55:43,930
graag waarsku die gebruiker of verandering iets op die bladsy.

915
00:55:43,930 --> 00:55:49,830
Wat nie gaan gebeur nie is die leser is nie van plan om te wag vir die versoek om voort te gaan

916
00:55:49,830 --> 00:55:53,480
voordat neerdaal en slaan hierdie lyn.

917
00:55:53,480 --> 00:55:55,900
Dit is die asynchrone deel.

918
00:55:55,900 --> 00:55:58,400
Dit gaan om die versoek te maak en sê, "Wanneer jy klaar is,

919
00:55:58,400 --> 00:56:03,080
"Terug te kom en noem dat die funksie wat ek vir jou gesê het om te bel binnekant van sukses."

920
00:56:03,080 --> 00:56:07,300
Dit beteken dat ons nie net kan aflaai al die voorrade vooraf.

921
00:56:07,300 --> 00:56:10,300
Ons moet die versoek te maak en wag vir iets om terug te kom.

922
00:56:10,300 --> 00:56:13,330
Dit beteken dat voor, ons kan net vertel Skoenlus,

923
00:56:13,330 --> 00:56:15,580
"Hier is die lys van die dinge wat ek wil hê jy moet outomaties op."

924
00:56:15,580 --> 00:56:18,950
Ons kan nie meer dit doen nie, want ons weet nie

925
00:56:18,950 --> 00:56:21,780
wat ons wil eintlik outovoltooiing op.

926
00:56:21,780 --> 00:56:25,190
Gelukkig Skoenlus gedink van hierdie, want dit is slim ouens daar,

927
00:56:25,190 --> 00:56:30,160
en hulle eintlik het ons ander manier om hierdie Typeahead plugin te laai.

928
00:56:30,160 --> 00:56:35,630
Voor, die waarde van hierdie bron eiendom was net hierdie groot verskeidenheid van dinge om te outomaties op.

929
00:56:35,630 --> 00:56:39,580
>> Nou is die bron eiendom is eintlik 'n funksie,

930
00:56:39,580 --> 00:56:44,580
en die doel van hierdie funksie is om uit te vind wat die dinge wat outomaties op.

931
00:56:44,580 --> 00:56:48,730
Die manier waarop dit gaan om dit uit te figuur is dit gaan Yahoo! Finansies vra

932
00:56:48,730 --> 00:56:51,750
wat die beste dinge om outomaties is.

933
00:56:51,750 --> 00:56:54,500
Om te doen wat ek gaan 'n baie soortgelyke AJAX versoek te maak.

934
00:56:54,500 --> 00:56:59,010
Ek gaan hierdie bladsy te versoek suggest.php.

935
00:56:59,010 --> 00:57:01,360
Ek wil nog steeds langs die simbole te stuur.

936
00:57:01,360 --> 00:57:05,570
En nou is my sukses, die Skoenlus dokumentasie het my vertel

937
00:57:05,570 --> 00:57:09,130
dat dit in orde dat die lys van dinge om te vul,

938
00:57:09,130 --> 00:57:14,370
al wat ek hoef te doen is om nou in hierdie skikking aan die callback funksie.

939
00:57:14,370 --> 00:57:15,660
Maar wag 'n minuut.

940
00:57:15,660 --> 00:57:20,240
As dit is veronderstel om 'n skikking te wees en AJAX stuur my terug teks,

941
00:57:20,240 --> 00:57:22,720
hoe is dit moontlik?

942
00:57:22,720 --> 00:57:27,910
Dit stel 'n nuwe manier van die uitruil van data genoem into.

943
00:57:27,910 --> 00:57:33,000
In hierdie geval het ons nie net die stuur van 'n eenvoudige string van die teks.

944
00:57:33,000 --> 00:57:37,670
Nou het ons te doen het met die meer komplekse lys voorraad simbole.

945
00:57:37,670 --> 00:57:41,730
Hierdie voorraad simbole kan ook dinge soos die maatskappy se naam of die huidige pryse.

946
00:57:41,730 --> 00:57:47,550
Net die gebruik van 'n groot lang string wat nie in 'n voorspelbare manier geformateer

947
00:57:47,550 --> 00:57:51,970
gaan nie die beste manier om hierdie inligting te kry van Yahoo se bediener vir my

948
00:57:51,970 --> 00:57:54,540
in 'n manier wat ek maklik kan verstaan.

949
00:57:54,540 --> 00:58:01,280
Into is 'n tegnologie wat maak gebruik van hoe skep ons assosiatiewe skikkings in JavaScript.

950
00:58:01,280 --> 00:58:04,510
Dit lyk 'n baie soos 'n JavaScript-associatieve array,

951
00:58:04,510 --> 00:58:06,600
en in die waarheid te sê, dit is omdat dit is.

952
00:58:06,600 --> 00:58:09,710
Into staan ​​vir JavaScript Object Nota Tion.

953
00:58:09,710 --> 00:58:15,020
Dit is basies 'n ooreengekome formaat vir die oordrag van data heen en weer.

954
00:58:15,020 --> 00:58:18,280
Hier hierdie into voorwerp of hierdie into assosiatiewe skikking

955
00:58:18,280 --> 00:58:21,010
stuur vir my 'n paar inligting oor 'n kursus.

956
00:58:21,010 --> 00:58:25,110
>> Die sleutels van die skikking is dinge soos die kursus wat 'n waarde van cs50,

957
00:58:25,110 --> 00:58:29,140
en af ​​hier kan ons sien dat ek kan 'n waarde wat 'n skikking.

958
00:58:29,140 --> 00:58:32,730
Ek het nie om dinge te doen soos parse uit stringe en kyk vir kommas

959
00:58:32,730 --> 00:58:35,330
en doen mal dinge soos dat.

960
00:58:35,330 --> 00:58:38,820
Want dit is in hierdie into formaat verklaar,

961
00:58:38,820 --> 00:58:43,510
JavaScript en jQuery funksies 'n string te omskep reeds

962
00:58:43,510 --> 00:58:48,140
wat lyk soos hierdie into in 'n werklike JavaScript associatieve array

963
00:58:48,140 --> 00:58:50,440
dat ons kan werk.

964
00:58:50,440 --> 00:58:56,660
Om dit te doen, is so eenvoudig as om te sê wat nie meer is hierdie lêer, suggest.php,

965
00:58:56,660 --> 00:58:59,040
stuur my terug net 'n string van die teks,

966
00:58:59,040 --> 00:59:01,950
maar ek weet dit gaan word, stuur my terug into.

967
00:59:01,950 --> 00:59:06,760
Dit beteken dat into kan omskep word in 'n JavaScript-associatieve array.

968
00:59:06,760 --> 00:59:10,830
En so jQuery, wil ek jou om dit te doen vir my.

969
00:59:10,830 --> 00:59:13,990
Dit beteken dat hierdie reaksie parameter hier,

970
00:59:13,990 --> 00:59:16,070
dit is nie meer net 'n string.

971
00:59:16,070 --> 00:59:19,860
Want ons het gesê jQuery wat hier kom 'n paar into,

972
00:59:19,860 --> 00:59:22,950
jQuery gaan wees slim genoeg om te sê, "Jy wou into?"

973
00:59:22,950 --> 00:59:26,890
"Ek gaan om dit te omskep in 'n assosiatiewe skikking vir jou."

974
00:59:26,890 --> 00:59:32,100
Kom ons neem 'n blik op die blad Netwerk wanneer ons quote4.js.

975
00:59:32,100 --> 00:59:35,400
Ons sal dit verander en herlaai die bladsy.

976
00:59:37,150 --> 00:59:41,250
Nou gaan ek te tik in 'n 'n weer.

977
00:59:41,250 --> 00:59:45,600
Ek het 'n paar versoeke te suggest.php, maar nou is hierdie reaksie,

978
00:59:45,600 --> 00:59:48,670
eerder as net die tou, dit is into.

979
00:59:48,670 --> 00:59:52,580
So ek het 'n oop krullerige stut gesê: "Hier kom 'n associatieve array."

980
00:59:52,580 --> 00:59:56,830
>> Die eerste en enigste sleutel van hierdie associatieve array genoem simbole,

981
00:59:56,830 --> 01:00:00,240
en dan is hier om 'n verskeidenheid van al die relevante simbole

982
01:00:00,240 --> 01:00:04,820
kom nou van Yahoo! Finansies, nie van dié reuse-lys.

983
01:00:06,110 --> 01:00:10,630
Dit is hoe ek kan eenvoudig vul hierdie outovoltooiing plugin

984
01:00:10,630 --> 01:00:14,280
met 'n paar data wat nie afkomstig is van 'n plaaslike lêer wat reeds voorafbepaalde

985
01:00:14,280 --> 01:00:17,490
maar van iets anders.

986
01:00:17,490 --> 01:00:21,160
Dit blyk dat ons eintlik kan neem voordeel van 'n tegnologie genaamd JSONP,

987
01:00:21,160 --> 01:00:27,420
of into met padding, sal hierdie suggest.php middelman uit te skakel.

988
01:00:27,420 --> 01:00:34,010
Maar in plaas van om dit te doen, laat ons plaas neem 'n blik op hoe ek kan verbeter selfs meer.

989
01:00:34,010 --> 01:00:36,040
Ek het regtig soos Skoenlus se Typeahead. Dit is regtig mooi.

990
01:00:36,040 --> 01:00:39,570
Maar ons is om goed in JavaScript en ons wil soort doen dit self,

991
01:00:39,570 --> 01:00:43,870
miskien neem 'n blik op wat hierdie plugin kan doen.

992
01:00:43,870 --> 01:00:46,500
Laat ons nie langer gebruik dat Typeahead ding,

993
01:00:46,500 --> 01:00:50,550
en laat ons probeer om hierdie lys van voorgestelde voorraad onsself te maak.

994
01:00:50,550 --> 01:00:53,790
Hier in quote6.php ons gaan op dieselfde manier af te begin.

995
01:00:53,790 --> 01:00:58,050
Elke keer as iemand tipes iets, ons wil 'n AJAX-versoek te maak.

996
01:00:58,050 --> 01:01:01,590
Dit is soortgelyk aan ons oorspronklike CS50 Finansies Instant.

997
01:01:01,590 --> 01:01:05,020
Eerder as om 'n versoek te quote.php,

998
01:01:05,020 --> 01:01:08,530
ons nou 'n versoek aan dat dieselfde lêer as voorheen, hierdie suggest.php,

999
01:01:08,530 --> 01:01:12,460
wat net gaan om data te trek vanaf Yahoo! Finansies.

1000
01:01:12,460 --> 01:01:19,480
>> Weereens, ons is nog steeds verwag into, maar nou sedert die Typeahead is nie om dit te doen vir ons,

1001
01:01:19,480 --> 01:01:24,850
ons ook nodig het om te stuur langs die waarde wat binnekant van die huidige teks boks.

1002
01:01:24,850 --> 01:01:28,120
Nou weet ons wat Yahoo! Finansies vra,

1003
01:01:28,120 --> 01:01:34,160
en so nou hier is die funksie wat ons wil uit te voer wanneer die versoek voltooi.

1004
01:01:34,160 --> 01:01:36,520
Ons het nie die plugin om die lys te maak vir ons,

1005
01:01:36,520 --> 01:01:40,630
so hier is waar ons eintlik gaan om 'n lys van voorstelle te bou.

1006
01:01:40,630 --> 01:01:44,850
Om dit te doen, net soos in PHP saamgevoeg ons hierdie groot snare van HTML

1007
01:01:44,850 --> 01:01:48,170
dan het ons gedruk het, kan ons die presies dieselfde ding doen in JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Eerstens gaan ons begin hierdie string genoem voorstelle,

1009
01:01:51,850 --> 01:01:54,590
en hierdie string is net gaan om HTML te bevat.

1010
01:01:54,590 --> 01:01:58,320
Ons wil dit op 'n lys van dinge wees, so ons gaan om te begin met hierdie lys tag,

1011
01:01:58,320 --> 01:02:03,340
en nou gaan ons itereer oor al die simbole wat teruggekeer het na ons.

1012
01:02:03,340 --> 01:02:06,500
Onthou, want ons het gesê data type: "into", is dit nie 'n string.

1013
01:02:06,500 --> 01:02:09,500
Dit is reeds 'n skikking vir ons. Dit is regtig cool.

1014
01:02:09,500 --> 01:02:13,790
Ons kan net sê, "Ek wil hê dat jy 'n lys element by te voeg."

1015
01:02:13,790 --> 01:02:16,000
Ons sal dit binne 'n element in die kant van die

1016
01:02:16,000 --> 01:02:19,030
ons sal dit gee 'n klas van voorstelle sodat ons weet wat dit is,

1017
01:02:19,030 --> 01:02:23,880
en nou is hier die simbool dat ons terug het vanaf Yahoo! Finansies.

1018
01:02:23,880 --> 01:02:27,230
>> Sodra ons het 'n element vir elk van die simbole wat ons het terug gekry het,

1019
01:02:27,230 --> 01:02:30,100
ons wil net om die lys af te sluit.

1020
01:02:30,100 --> 01:02:33,040
So nou voorstelle hierdie klein HTML fragment

1021
01:02:33,040 --> 01:02:37,860
dat wanneer dit op 'n bladsy geplaas word, gaan na die lys van dinge wat ons is op soek na.

1022
01:02:37,860 --> 01:02:41,070
Laat ons nou eintlik sit dit op die bladsy.

1023
01:02:41,070 --> 01:02:46,390
Om dit te doen dat ek eintlik nog 'n leë div gemaak het en ek het dit 'n ID voorstelle gegee.

1024
01:02:46,390 --> 01:02:52,520
Baie soos ons die inhoud van die div wat die prys van die voorraad data vertoon,

1025
01:02:52,520 --> 01:02:58,600
ons nou net wil om die inhoud van hierdie div te stel wat hierdie string is

1026
01:02:58,600 --> 01:03:00,290
wat bevat hierdie simbole.

1027
01:03:00,290 --> 01:03:07,650
Deur die gebruik van hierdie HTML-metode, hierdie voorstelle veranderlike, hierdie string, is 'n string van HTML.

1028
01:03:07,650 --> 01:03:13,490
Ek wil hê jy moet neem dat die HTML en sit dit binnekant van die div genoem voorstelle.

1029
01:03:13,490 --> 01:03:15,680
Ons het nou net aangeheg iets aan die DOM nou.

1030
01:03:15,680 --> 01:03:20,360
Ons het 'n paar nuwe elemente aan die DOM dat ons nou kan vertoon op die bladsy.

1031
01:03:20,360 --> 01:03:22,540
Kom ons kyk wat dit lyk soos.

1032
01:03:22,540 --> 01:03:29,110
As ons laai in quote6 en nou is ons terug te kom,

1033
01:03:29,110 --> 01:03:34,480
nou wanneer ek begin tik AAPL, ons het nie meer daardie Skoenlus outomaties,

1034
01:03:34,480 --> 01:03:38,470
maar nou het ons hierdie lys wat ons het onsself.

1035
01:03:38,470 --> 01:03:43,230
Dit is 'n bietjie leliker as die Skoenlus Typeahead, byvoorbeeld,

1036
01:03:43,230 --> 01:03:45,580
maar dit nie toelaat dat ons 'n ander ding om te doen.

1037
01:03:45,580 --> 01:03:48,660
Wanneer ons kyk na daardie Skoenlus plugin,

1038
01:03:48,660 --> 01:03:52,590
het ons gesien dat wanneer ons autocompleted, een van die outomaties waardes was AAPL.

1039
01:03:52,590 --> 01:03:54,820
Wat dalk nie so nuttig.

1040
01:03:54,820 --> 01:03:59,100
As 'n gebruiker, kan ek nie onmiddellik herken al die simbole vir aandele.

1041
01:03:59,100 --> 01:04:02,370
Wat ek waarskynlik meer geneig om te erken is die maatskappy se werklike name.

1042
01:04:02,370 --> 01:04:05,310
So dit sou nie werklik nuttig as eerder as sê AAPL

1043
01:04:05,310 --> 01:04:07,970
dit het iets gesê soos Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Want ons het gerol hierdie onsself, kan ons baie maklik doen.

1045
01:04:12,240 --> 01:04:17,630
Kom ons ons laaste kwotasie lêer hier oop te maak, so quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Dieselfde ding. Ek het net 'n ander PHP lêer wat ons sal terugkeer na meer as net die simbole.

1047
01:04:23,200 --> 01:04:25,550
Dit sal ook ons ​​terug die maatskappy se name.

1048
01:04:25,550 --> 01:04:28,150
En so sal ons doen dieselfde ding. Ons 'n AJAX versoek.

1049
01:04:28,150 --> 01:04:32,370
Sodra die versoek voltooi is, gaan ons hierdie funksie om hier uit te voer,

1050
01:04:32,370 --> 01:04:36,520
en hierdie funksie is gaan om te bou aan 'n groot string van elemente.

1051
01:04:36,520 --> 01:04:39,520
Maar die verskil hier is dat die waarde van hierdie lyste is nie meer net die simbool,

1052
01:04:39,520 --> 01:04:45,370
dit is nou die naam.

1053
01:04:45,370 --> 01:04:47,070
So ons het 'n klein probleem.

1054
01:04:47,070 --> 01:04:51,590
Wanneer ons ons lookup, ons nodig het om te slaag dit op een of ander manier die simbool.

1055
01:04:51,590 --> 01:04:54,950
Ons kan nie slaag soek iets soos Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Ons moet dit MSFT te slaag.

1057
01:04:57,900 --> 01:05:01,640
Wanneer ons HTML wil skryf, ons het 'n baie mooi ingeboude eienskappe.

1058
01:05:01,640 --> 01:05:05,440
'N A kan geassosieer het met dit 'n href of 'n klas.

1059
01:05:05,440 --> 01:05:08,230
Maar wat ons regtig nou nodig het, is vir elk van hierdie skakels

1060
01:05:08,230 --> 01:05:11,120
'n beurs simbool wat verband hou met dit te hê.

1061
01:05:11,120 --> 01:05:14,240
Daar is geen ingeboude in HTML-attribuut vir die beurs simbool,

1062
01:05:14,240 --> 01:05:21,010
maar gelukkig, HTML5 stel ons in staat om ons eie eienskappe te skep om te wees wat ons wil.

1063
01:05:21,010 --> 01:05:24,620
Deur sê data-simbool, het ek 'n nuwe kenmerk

1064
01:05:24,620 --> 01:05:29,350
wie se naam ek nou net gemaak het, en dit is okay, want ek voorafgegaan met hierdie data.

1065
01:05:29,350 --> 01:05:34,270
Ons gaan binne-in daar die simbool van die voorraad op te slaan nou.

1066
01:05:34,270 --> 01:05:39,590
Wat dit beteken, is dat alhoewel ons die waarde van die maatskappy se naam bêre

1067
01:05:39,590 --> 01:05:43,380
binnekant van ons outovoltooiing onthou, ons is nog steeds die simbool

1068
01:05:43,380 --> 01:05:47,110
wat verband hou met elke maatskappy.

1069
01:05:47,110 --> 01:05:50,350
Die manier waarop ons om dit te doen, is binnekant van hierdie element self.

1070
01:05:50,350 --> 01:05:52,930
Dus beteken dit dat ons moet een meer verandering te maak.

1071
01:05:52,930 --> 01:05:57,090
Wanneer ons op dit nou, ons nodig het om werklik te neem voordeel van die simbool kenmerk

1072
01:05:57,090 --> 01:06:00,220
eerder as om net die waarde daarvan.

1073
01:06:00,220 --> 01:06:05,010
As ons back-up, ons heg 'n event handler vir voorstelle.

1074
01:06:05,010 --> 01:06:09,280
Wanneer een van hierdie voorstelle is nou geklik word, ek wil om iets te doen.

1075
01:06:09,280 --> 01:06:13,160
Wat ek wil doen, is verander die waarde van daardie insette boks.

1076
01:06:13,160 --> 01:06:16,100
Nou wil ek hierdie selfde Val funksie te stel.

1077
01:06:16,100 --> 01:06:21,060
>> So sonder enige argumente val funksie terugkeer na wat is reeds in die teks boks,

1078
01:06:21,060 --> 01:06:27,070
maar as jy dit gee 'n string, gaan dit dat die string te neem en dit in die tekskassie.

1079
01:06:27,070 --> 01:06:28,980
Ek kies die tekskassie in die dieselfde manier.

1080
01:06:28,980 --> 01:06:31,230
Dit se naam is simbool binnekant van vorm-quote.

1081
01:06:31,230 --> 01:06:37,540
Nou is ek stuur dit die waarde van die attribuut-data-simbool.

1082
01:06:37,540 --> 01:06:41,560
Hierdie ding hier is 'n nuwe, die $ (hierdie).

1083
01:06:41,560 --> 01:06:46,850
Wat dit verwys na is die element wat gekliek.

1084
01:06:46,850 --> 01:06:50,880
Ons kan hier sien dat ons nie te heg 'n klik gebeurtenis

1085
01:06:50,880 --> 01:06:54,690
tot elke element met 'n klas van die voorstel individueel.

1086
01:06:54,690 --> 01:06:57,140
Inteendeel, ons nader dit 'n bietjie anders.

1087
01:06:57,140 --> 01:07:01,700
In plaas daarvan ons sê wanneer enigiets binnekant van hierdie voorstelle div,

1088
01:07:01,700 --> 01:07:04,080
wat onthou net die houer vir die lys,

1089
01:07:04,080 --> 01:07:10,150
as iets binnekant van hierdie div word gebruik en dit het 'n klas van die voorstel,

1090
01:07:10,150 --> 01:07:13,000
Ek wil hierdie geleentheid aan die brand.

1091
01:07:13,000 --> 01:07:17,490
Basies wat dit beteken ons kan doen is dat ons hierdie event handler kan hergebruik

1092
01:07:17,490 --> 01:07:20,000
vir al die dinge wat in die lys.

1093
01:07:20,000 --> 01:07:22,080
So ons het nie een event handler vir die eerste element

1094
01:07:22,080 --> 01:07:24,550
en 'n ander event handler vir die tweede element.

1095
01:07:24,550 --> 01:07:29,880
Ons kan eerder sê, "Ek wil die dieselfde event handler om aansoek te doen om alles in my lys."

1096
01:07:29,880 --> 01:07:34,420
Maar ons moet op een of ander manier weet watter element is gekliek.

1097
01:07:34,420 --> 01:07:38,450
Hierdie "hierdie" navraag verteenwoordig net dat.

1098
01:07:38,450 --> 01:07:42,360
Dit is die voorwerp wat net gekliek deur die gebruiker.

1099
01:07:42,360 --> 01:07:47,680
As ek net die 3de skakel gekliek het, dit verteenwoordig die element van daardie 3de skakel,

1100
01:07:47,680 --> 01:07:51,670
wat beteken dat ek kan sy kenmerk, data-simbool kry,

1101
01:07:51,670 --> 01:07:57,760
wat ons weet het die simbool te bevat wat verband hou met die maatskappy Ek het net gekliek.

1102
01:07:57,760 --> 01:08:04,550
As ons spring terug na ons finansiële,

1103
01:08:04,550 --> 01:08:08,580
ons kan nou sien dat wanneer ek begin tik iets soos MSFT,

1104
01:08:08,580 --> 01:08:11,220
ons nie meer om net die voorraad simbole,

1105
01:08:11,220 --> 01:08:13,720
ons is nou om die werklike maatskappye.

1106
01:08:13,720 --> 01:08:20,410
Maar wanneer ek kliek op een van hierdie maatskappye,

1107
01:08:20,410 --> 01:08:25,180
kan ons sien dat ons eintlik is die mense van die teks boks nie met die naam van die maatskappy

1108
01:08:25,180 --> 01:08:29,850
maar met alles wat is gestoor binnekant van daardie data eienskappe.

1109
01:08:29,850 --> 01:08:32,880
En so, as ek eintlik inspekteer een van hierdie elemente deur regs te klik

1110
01:08:32,880 --> 01:08:36,200
en kliek op Inspekteer Element, ons kan eintlik sien wat dit lyk soos.

1111
01:08:36,200 --> 01:08:40,290
>> Onthou, dit is iets wat ons geskep binnekant van die for-lus

1112
01:08:40,290 --> 01:08:42,649
wanneer ons die opbou van daardie string van HTML.

1113
01:08:42,649 --> 01:08:47,870
Ons kan hier sien dat hierdie data-simbool die waarde van MSFT, wat is 'n groot.

1114
01:08:47,870 --> 01:08:49,189
Dit is wat ons verwag het.

1115
01:08:49,189 --> 01:08:53,170
Dit is die simbool en dit is hoe ons die waarde wat ons nodig het om te gebruik

1116
01:08:53,170 --> 01:08:56,140
binnekant van hierdie teks boks.

1117
01:08:56,140 --> 01:08:58,850
Dit is genoeg vir die kwotasie vorm, want dit is soort van saai.

1118
01:08:58,850 --> 01:09:02,990
Kom ons maak 'n paar vinnige verbeterings aan ons portefeulje bladsy.

1119
01:09:02,990 --> 01:09:08,109
As jy gebruik CS50 Finansies vir 'n rukkie en jy begin met die koop en verkoop van 'n baie van die aandele,

1120
01:09:08,109 --> 01:09:11,300
uiteindelik hierdie tabel gaan kry redelik groot,

1121
01:09:11,300 --> 01:09:13,850
en jy gaan 'n aandelenkoers, natuurlik om te wil.

1122
01:09:13,850 --> 01:09:20,350
Sodra die tabel is baie, baie groot is, kan dit nuttig wees vir die gebruiker om te probeer om te soek meer as dit.

1123
01:09:20,350 --> 01:09:23,290
Binnekant van die soekkassie as ek begin tik iets soos Disney

1124
01:09:23,290 --> 01:09:26,359
en soek vir my Mickey Mouse voorraad, kan ons sien dat die tafel nou filter

1125
01:09:26,359 --> 01:09:28,189
wat gebaseer is op wat ek nou net getik.

1126
01:09:28,189 --> 01:09:31,640
Hierdie funksie lyk super ingewikkeld, maar dit is regtig, regtig maklik

1127
01:09:31,640 --> 01:09:33,859
met jQuery en JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Hierdie portfolio.php lêer bevat 'n JavaScript-lêer genaamd portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Kom ons neem 'n blik op dit.

1130
01:09:41,130 --> 01:09:44,890
So html, JS, portefeulje.

1131
01:09:44,890 --> 01:09:49,210
Hier is waar ons is om dit te doen soek op die tafel.

1132
01:09:49,210 --> 01:09:52,750
Die eerste ding wat ek nodig het om te doen is om heg 'n event handler dat die tekskassie

1133
01:09:52,750 --> 01:09:55,760
omdat ons weet dat ons wil ons filter funksie aan die brand

1134
01:09:55,760 --> 01:09:59,800
elke keer as die gebruiker druk iets omdat ons nie tyd vir Soek knoppies.

1135
01:09:59,800 --> 01:10:03,000
Die eerste ding wat ons nodig het om te doen, is om uit te vind wat die gebruiker is op soek na,

1136
01:10:03,000 --> 01:10:04,780
net soos ons tevore gedoen het.

1137
01:10:04,780 --> 01:10:11,320
Hierdie navraag verwys na die huidige element wat die gebruiker interaksie met.

1138
01:10:11,320 --> 01:10:14,070
>> Omdat die gebruiker interaksie met die soekkassie,

1139
01:10:14,070 --> 01:10:17,020
$ Hierdie verteenwoordig die soekkassie,

1140
01:10:17,020 --> 01:10:21,820
so this.val gee vir ons wat is binnekant van die soekkassie die gebruiker is tans tik.

1141
01:10:22,810 --> 01:10:27,320
So, nou wat ons wil doen, ons wil itereer oor al die rye

1142
01:10:27,320 --> 01:10:29,240
binnekant van ons tafel.

1143
01:10:29,240 --> 01:10:35,630
Al die rye in ons tafel te kies, Ek het 'n ID van tabel portefeulje,

1144
01:10:35,630 --> 01:10:39,060
en elke ry word verteenwoordig deur 'n TR element,

1145
01:10:39,060 --> 01:10:42,080
sodat hierdie selector gaan om terug te keer vir my 'n groot verskeidenheid

1146
01:10:42,080 --> 01:10:44,370
van al die rye in my tafel.

1147
01:10:44,370 --> 01:10:47,010
Nou wil ek om oor daardie skikking te itereer.

1148
01:10:47,010 --> 01:10:52,390
Ek kon jou 'n for-lus, maar jQuery eintlik bied ons die mooi funksie genaamd "elke."

1149
01:10:52,390 --> 01:10:55,220
Wat elkeen doen, is elkeen neem een ​​argument,

1150
01:10:55,220 --> 01:10:57,090
en dat die argument is 'n funksie.

1151
01:10:57,090 --> 01:11:02,760
Wat dit gaan doen, is dit gaan om daardie funksie van toepassing op elke element binnekant van hierdie lys.

1152
01:11:02,760 --> 01:11:05,550
Hierdie funksie neem een ​​argument wat e,

1153
01:11:05,550 --> 01:11:10,090
en wanneer hierdie funksie uitgevoer word, is hierdie e vervang gaan word met die eerste ry,

1154
01:11:10,090 --> 01:11:12,070
dan is die tweede ry, en dan die derde ry.

1155
01:11:12,070 --> 01:11:15,150
Deur hierdie manier, dit is die dieselfde ding as die bestuur van 'n for-lus

1156
01:11:15,150 --> 01:11:21,360
en dan uitzoeken die huidige element gebaseer op die indeks binnekant van jou loop.

1157
01:11:21,360 --> 01:11:24,750
Op elke iterasie, vir elk van hierdie elemente in die tabel,

1158
01:11:24,750 --> 01:11:30,560
Ek wil om te kyk of die teks van die element - die teks van die sel binnekant van die ry -

1159
01:11:30,560 --> 01:11:33,130
ooreenstem met wat ek soek.

1160
01:11:33,130 --> 01:11:36,390
Hierdie groot lang string van die opdragte is hoe ek dit kon doen.

1161
01:11:36,390 --> 01:11:40,900
Eerste, weer, dit verwys nou na - want dit is die binnekant van 'n nuwe funksie -

1162
01:11:40,900 --> 01:11:45,020
dit is nou die huidige ry in die tabel.

1163
01:11:45,020 --> 01:11:47,340
Ek wil die huidige ry in die tabel te neem,

1164
01:11:47,340 --> 01:11:49,950
en ek wil hê dat al sy kinders te kry.

1165
01:11:49,950 --> 01:11:51,940
Onthou, die DOM is 'n hiërargiese boom,

1166
01:11:51,940 --> 01:11:54,200
wat beteken dat elemente het 'n aantal kinders.

1167
01:11:54,200 --> 01:12:00,180
>> Hierdie kinders funksie. Gaan om terug te keer na my terug 'n verskeidenheid van al die elemente

1168
01:12:00,180 --> 01:12:03,240
wat die kinders van, in hierdie geval, 'n ry in die tabel.

1169
01:12:03,240 --> 01:12:07,150
Dit is eenvoudig net die selle binne-in van die ry.

1170
01:12:07,150 --> 01:12:09,230
Ek wil net om te soek oor die eerste sel.

1171
01:12:09,230 --> 01:12:13,090
Die eerste funksie. Sê gee my die eerste element in die skikking.

1172
01:12:13,090 --> 01:12:17,070
Toe het die teks funksie sê kry my presies wat is binnekant van die sel

1173
01:12:17,070 --> 01:12:19,530
want ek wil oor daardie teks te soek.

1174
01:12:19,530 --> 01:12:21,040
Ten slotte, laat ons skakel dit om na onderkas,

1175
01:12:21,040 --> 01:12:23,940
so ons kan doen teks geval onsensitiewe navrae.

1176
01:12:23,940 --> 01:12:29,990
Ten slotte, ons wil om te sien of daardie string binnekant van 'n tabel bevat die tou wat ons op soek is na.

1177
01:12:29,990 --> 01:12:32,980
Die indexOf funksie in JavaScript nie net dat.

1178
01:12:32,980 --> 01:12:37,060
Dit vertel ons of hierdie string bevat 'n ander string.

1179
01:12:37,060 --> 01:12:40,150
As dit waar is dat die sel bevat wat ek is op soek na,

1180
01:12:40,150 --> 01:12:42,140
dan sal ek wil om seker te maak dat dit getoon.

1181
01:12:42,140 --> 01:12:45,330
Die show metode sal sê, "Toon die element."

1182
01:12:45,330 --> 01:12:50,350
As dit nie die geval is, dan beteken dit alles wat ek soek is nie vervat

1183
01:12:50,350 --> 01:12:53,550
binne daardie ry, en ek wil om weg te steek van die gebruiker.

1184
01:12:53,550 --> 01:12:59,240
Dat daardie mooi filter effek bereik waar ons nie meer sien die hele tabel.

1185
01:12:59,240 --> 01:13:01,480
As jy belangstel in hoe om te maak hierdie ENKELE asook,

1186
01:13:01,480 --> 01:13:04,180
ons sal die bron online post. Maar dit is regtig eenvoudig.

1187
01:13:04,180 --> 01:13:09,860
JQuery het ontsagwekkende metodes vir hierdie animasies en manipuleer CSS eienskappe.

1188
01:13:09,860 --> 01:13:11,020
So, wat is dit vir my.

1189
01:13:11,020 --> 01:13:15,560
>> Wat lê dan voor? Soos u sal sien in 'n paar dae, die finale projekte voorstel is te danke.

1190
01:13:15,560 --> 01:13:17,730
Die finale projekte voorstel sal jou 'n paar vrae vra,

1191
01:13:17,730 --> 01:13:19,420
maar onder hulle sal drie mylpale -

1192
01:13:19,420 --> 01:13:22,840
een van 'n "goeie" mylpaal, een 'n beter mylpaal, en 'n mens 'n beste.

1193
01:13:22,840 --> 01:13:25,870
Die idee regtig julle ouens te help jou verwagtinge

1194
01:13:25,870 --> 01:13:29,160
sodat minimaal jy sal gelukkig wees met die opbrengs van jou finale projek

1195
01:13:29,160 --> 01:13:32,060
en dit sal "goed" so ver as jy bekommerd is.

1196
01:13:32,060 --> 01:13:34,540
Maar dan in die belang van die kry jy net 'n bietjie te bereik na iets beter

1197
01:13:34,540 --> 01:13:37,680
of iets beste, ons sal ook sorteer stoot jy die rigting wat as goed.

1198
01:13:37,680 --> 01:13:40,660
Die CS50 Hack-a-thon, intussen, is in 'n paar weke.

1199
01:13:40,660 --> 01:13:44,340
Tipies, doen ons dit op 'n lotery basis basis as gevolg van belang is,

1200
01:13:44,340 --> 01:13:47,680
maar die kans is ons 'n paar honderd van ons in shuttle bus neem van Harvard Square

1201
01:13:47,680 --> 01:13:51,540
Kendall Square waar Microsoft het 'n pragtige fasiliteit gepas genaamd "NERD" -

1202
01:13:51,540 --> 01:13:53,830
die New England Research and Development Center.

1203
01:13:53,830 --> 01:13:56,380
Ons sal daar om 20:00 Ons sal 'n paar kos.

1204
01:13:56,380 --> 01:13:58,160
Rondom 01:00 het ons sal 'n bietjie meer kos.

1205
01:13:58,160 --> 01:14:02,150
Omstreeks 05:00 as jy nog wakker is, sal ons kop bo aan IHOP of neem jou terug na die kampus.

1206
01:14:02,150 --> 01:14:04,380
Die doel daar is om te duik in die finale projekte

1207
01:14:04,380 --> 01:14:06,190
saam van klasmaats en personeel.

1208
01:14:06,190 --> 01:14:08,280
Dan is 'n paar dae later die CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
wat eintlik bedoel is om 'n geleentheid te wees vir julle om jou werk ten toon te stel

1210
01:14:10,990 --> 01:14:12,700
en prestasies vir die semester

1211
01:14:12,700 --> 01:14:15,610
terwyl vryf skouers met mekaar en kry 'n gevoel van wat almal gedoen het.

1212
01:14:15,610 --> 01:14:17,850
Met wat gesê het, baie dankie aan Tommy en aan Josef,

1213
01:14:17,850 --> 01:14:19,960
en ons sal sien wat jy op Maandag.

1214
01:14:19,960 --> 01:14:24,070
 [Applous]