1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Semajno 9, daŭrigis]

2
00:00:02,700 --> 00:00:05,160
[Davido J. Malan - Universitato Harvard]

3
00:00:05,160 --> 00:00:07,020
[Jen CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Ĉi tiu estas CS50. Ĉi tio estas la fino de semajno 9. Dankon tre multe.

5
00:00:13,340 --> 00:00:15,310
Fine. Semajno 9. Mi havas ĝin.

6
00:00:15,310 --> 00:00:18,590
Hodiaŭ ni daŭrigos nian konversacion pri ttt programado

7
00:00:18,590 --> 00:00:21,660
kun okulo al la fina projekto, ne ĉar vi devas fari ion ttt-bazita

8
00:00:21,660 --> 00:00:25,610
por fina projektoj sed ĉar jam estas por fina projektoj aŭ post CS50

9
00:00:25,610 --> 00:00:29,000
ĉi tiu estas certe la direkto en kiu moderna programaro tuj.

10
00:00:29,000 --> 00:00:31,770
Kaj tamen ĝi ne estas vere facila afero.

11
00:00:31,770 --> 00:00:35,040
Fakte, unu el la plej malfacilaj aĵoj fari estas la aspekto de dezajno.

12
00:00:35,040 --> 00:00:38,600
>> Ekzemple, per dezajno ni mean reale atingi la uzulinterfaco

13
00:00:38,600 --> 00:00:40,420
aŭ la uzanto sperto pravas.

14
00:00:40,420 --> 00:00:43,200
Mi daresay - kaj ni scias el freŝa problemo aro

15
00:00:43,200 --> 00:00:45,960
kiam kelkaj el vi elsendis vian gripes pri iu peco de programaro

16
00:00:45,960 --> 00:00:49,000
aŭ aparataro kiu enfurece vi, ĉu en la campus aŭ ekstere -

17
00:00:49,000 --> 00:00:51,930
ekzistas multaj lokoj tie, tie estas multa aparataro tie,

18
00:00:51,930 --> 00:00:53,900
tian sucks.

19
00:00:53,900 --> 00:00:58,730
Sed la realo estas ke farante tion, kio estas facila por uzi ankoraŭ estas tamen potenca

20
00:00:58,730 --> 00:01:00,550
Estas tre malfacila defio.

21
00:01:00,550 --> 00:01:03,680
Do hodiaŭ mi demandis Jozef kaj Tommy kunigi min tie

22
00:01:03,680 --> 00:01:06,680
tiel ke ni povas havi konversacion, ambaŭ pri dezajno

23
00:01:06,680 --> 00:01:09,090
kaj kion specoj de penso procezoj devas komenci tuj tra via kapo

24
00:01:09,090 --> 00:01:12,040
kiam vi desegni vian fino projektoj, via estonta klopodoj.

25
00:01:12,040 --> 00:01:15,040
Kaj tiam kun Tommy helpo ni rigardu kelkajn el la efektivigo detaloj.

26
00:01:15,040 --> 00:01:18,440
Kiel vi povas havi iu vidado sur papero aŭ en via menso

27
00:01:18,440 --> 00:01:20,760
ke vi povas tiam ekzekuti programmatically

28
00:01:20,760 --> 00:01:24,030
uzante iu de la teknologioj kaj teknikoj ni ĵus komencis paroli pri,

29
00:01:24,030 --> 00:01:29,080
nome JavaScript kaj iu eĉ pli novaj, nome AJAX, asíncronas JavaScript.

30
00:01:29,080 --> 00:01:32,950
Tio ebligas al vi krei des pli dinamika de interfaco

31
00:01:32,950 --> 00:01:35,780
per ricevado pli kaj pli datumoj progresive de servilo.

32
00:01:35,780 --> 00:01:38,560
Do ni vidos iujn el tiuj fragmentojn tiel hodiaŭ.

33
00:01:38,560 --> 00:01:41,800
Kiel flanken, se vi interesiĝas koncentrante en komputiko

34
00:01:41,800 --> 00:01:45,010
aŭ minoring en komputiko, scias ke ĉi vendredo tagmeze

35
00:01:45,010 --> 00:01:48,750
en Maxwell Dworkin 221 estos pico okazaĵo

36
00:01:48,750 --> 00:01:50,780
kie vi povas lerni iom pli pri komputiko.

37
00:01:50,780 --> 00:01:54,860
Sur via elirejo la pordo hodiaŭ vi povos repreni neoficiala gvidas CS ĉe Harvard.

38
00:01:54,860 --> 00:01:57,290
Ni metos gxin sur la rubo tedaĵoj ekstere ĉe talio alteco

39
00:01:57,290 --> 00:01:59,750
tiel ke se vi ŝatus kapti tion kaj lerni iom pli pri CS,

40
00:01:59,750 --> 00:02:02,480
ke estos tie por vi kiel estis en semajno 0.

41
00:02:02,480 --> 00:02:06,500
Ankaŭ se vi volas aliĝi nin pro CS50 tagmanĝo ĉi vendredo je 1:15 ptm,

42
00:02:06,500 --> 00:02:09,800
direkti al cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Sen pli enkonduko, mi donos al vi instruon ulo Jozef Ong.

44
00:02:13,260 --> 00:02:19,190
Saluton. [Aplaŭdo]

45
00:02:19,190 --> 00:02:20,770
Dankon.

46
00:02:20,770 --> 00:02:24,780
La unua fojo mi sciiĝis pri dezajno estis en klaso tie nomis CS179.

47
00:02:24,780 --> 00:02:28,040
>> La profesoro en la momento diris al ni la historion pri alia instruisto

48
00:02:28,040 --> 00:02:31,640
kiu iris al hotelo kaj uzis la kranoj.

49
00:02:31,640 --> 00:02:35,630
Ĉu iu povas diri al mi kion la 2 kapetoj maldekstre kaj dekstre fari?

50
00:02:35,630 --> 00:02:39,080
[Studento] Varma kaj malvarma. >> Varma kaj malvarma. Bona.

51
00:02:39,080 --> 00:02:41,430
Kion vi kutime atendas, ĉu ne?

52
00:02:41,430 --> 00:02:46,960
Tiu instruisto post uzi la krano volas preni duŝon, kaj li procedas por uzi ĉi.

53
00:02:46,960 --> 00:02:51,310
Li pensas la maldekstra kaj la dekstra flanko estas por varma kaj malvarma, ĉu ne?

54
00:02:51,310 --> 00:02:55,470
Sed vi povas paroli al mi, kio tio efektive fari?

55
00:02:55,470 --> 00:02:58,060
Ajna manoj?

56
00:02:58,060 --> 00:03:01,740
[Inaudible studento respondon] >> Unu sugesto estas?

57
00:03:01,740 --> 00:03:05,860
[Inaudible studento respondon] >> temperaturo?

58
00:03:05,860 --> 00:03:10,460
Do unu el ili kontrolas temperaturo kaj la aliaj kontroloj? >> [Studento] Akvo premo.

59
00:03:10,460 --> 00:03:12,350
Akvo premo. Bona.

60
00:03:12,350 --> 00:03:15,100
Ĉi profesoro tiam venos en tio kaj, pensante ke ili kontrolis varma kaj malvarma,

61
00:03:15,100 --> 00:03:21,470
Igas la dekstra, kiu li pensas estas por varmega, la tuta vojo supren

62
00:03:21,470 --> 00:03:23,560
ĉar li volas preni varma duŝo.

63
00:03:23,560 --> 00:03:28,100
Nu, tiuj ne vere kongruas supren, do li ricevas ĉi ne tre amuza sperto

64
00:03:28,100 --> 00:03:31,110
esti en malvarma duŝo, kaj ni ĉiuj scias kion tio sentas.

65
00:03:31,110 --> 00:03:33,620
Ĉi tio estas ekzemplo de dezajno difekto.

66
00:03:33,620 --> 00:03:37,040
Kion mi celas per tio estas lia atendo de la krano

67
00:03:37,040 --> 00:03:39,420
ne kongruas kio eliris el la duŝo,

68
00:03:39,420 --> 00:03:41,780
kiu estas speco de malfeliĉa por li.

69
00:03:41,780 --> 00:03:44,990
Do tiu estas ekzemplo de dezajno difekto kiu okazas en la reala vivo.

70
00:03:44,990 --> 00:03:48,020
Sed ni vidas ĉiaj aliaj aĵoj tiel.

71
00:03:48,020 --> 00:03:50,390
Ni probable ne ŝatantoj de la MBTA sistemo.

72
00:03:50,390 --> 00:03:55,560
Tio ĉi estas metro sistemon vere en Londono, kiu diras, "Ĉi tiu butono ne estas uzata."

73
00:03:55,560 --> 00:04:00,220
Kial eĉ tie? Kial ni eĉ zorgas?

74
00:04:00,220 --> 00:04:02,810
Kiam mi estis knabo, estante la teknologio savvy oni en la domo,

75
00:04:02,810 --> 00:04:05,050
ĉiufoje kiam la komputilo frakasus, mia panjo venus al mi,

76
00:04:05,050 --> 00:04:07,060
montrante al mi ĉi tiu ekrano kaj demandante min, kio okazis.

77
00:04:07,060 --> 00:04:09,210
>> Eĉ mi ne scias kion tio signifas.

78
00:04:11,890 --> 00:04:14,700
[Ridado] Kio?

79
00:04:16,950 --> 00:04:18,019
[Ridado]

80
00:04:18,720 --> 00:04:23,050
Kelkfoje ni sentas kiel programistoj simple trolling ni.

81
00:04:23,050 --> 00:04:28,460
Kiel uzantoj ni kiel, "Kio okazas? Iu diru al ni."

82
00:04:28,460 --> 00:04:32,140
Ĉio venas malsupren al temo de dezajno.

83
00:04:32,140 --> 00:04:34,650
Dezajno, kiel ni povas vidi, estas ne pure pri estetiko,

84
00:04:34,650 --> 00:04:37,230
ĝi ne estas pri kiel la aferoj rigardi.

85
00:04:37,230 --> 00:04:41,720
Ni vidas tie ĉi iom popo-super tie efektive aspektas bela agrabla.

86
00:04:41,720 --> 00:04:45,290
Ĝi havas guto ombro en la fono, ĝi havas limon radiuses okazas.

87
00:04:45,290 --> 00:04:47,550
Estas ia bela.

88
00:04:47,550 --> 00:04:51,480
Ĝi estas ne vere bone desegnita ĉar ĝi ne estas tre uzanto amikojn.

89
00:04:51,480 --> 00:04:54,920
Tio iom popo-up kiu venas supren ne vere donas min ajna informo

90
00:04:54,920 --> 00:04:58,450
pri kio okazas, ĝi ne diri al mi ion kiel la uzanto

91
00:04:58,450 --> 00:05:01,400
pri kiel reakiri de tiu eraro.

92
00:05:01,400 --> 00:05:05,190
Ni volas pensi tion ke dezajno ne.

93
00:05:05,190 --> 00:05:06,670
Unue, ne estetiko.

94
00:05:06,670 --> 00:05:10,800
Ĝi estas ankaŭ ne plenigaĵo vian programon kun tunoj de nenecesaj funkciojn.

95
00:05:10,800 --> 00:05:14,890
Se vi estas Tajlanda restoracio, vi probable ne volas esti dentisto samtempe.

96
00:05:14,890 --> 00:05:17,720
Kaj kun Facebook Demandoj, ne ke multaj homoj uzas ĝin

97
00:05:17,720 --> 00:05:21,130
kaj ne estis vere en la kerno de kion ili konstruas.

98
00:05:21,130 --> 00:05:24,200
Kaj tial ĝi estas bela pensi ne tiom la kvanto de la aĵoj

99
00:05:24,200 --> 00:05:26,390
ke vi metante vian kandidatiĝon sed la kvalito

100
00:05:26,390 --> 00:05:28,910
kaj kiel vi faras ke uzanto sperto bona

101
00:05:28,910 --> 00:05:32,540
per efektive plibonigi sur kion vi jam havas.

102
00:05:32,540 --> 00:05:37,040
>> En vortoj, dezajno diras al ni, kion ni devas konstrui.

103
00:05:37,040 --> 00:05:41,950
Ekzemple, se ni konstruas iun kiu ni serĉo aĵoj supren,

104
00:05:41,950 --> 00:05:45,970
kiel Google, ekzemple, ni faru tion en maniero

105
00:05:45,970 --> 00:05:48,950
kiu postulas la uzanto por preni multajn klakoj por atingi kion ili volas,

106
00:05:48,950 --> 00:05:52,580
aŭ ni faru ĝin en maniero, ekzemple, kun Google Instant aŭ autocomplete

107
00:05:52,580 --> 00:05:54,970
kiu lasas nin alveni al niaj rezultoj rapide?

108
00:05:54,970 --> 00:05:58,740
Teknikaj engaĝas, kiel Tommy montros al vi, efektive konstrui ĝin.

109
00:05:58,740 --> 00:06:01,890
Ekzistas multaj tipoj de desegno.

110
00:06:01,890 --> 00:06:06,070
Ekzemple, se vi konstruas ion por disfaldi ion

111
00:06:06,070 --> 00:06:09,770
en la Tria Mondo lando kie ne estas multa elektro aŭ kiu multe teknologio,

112
00:06:09,770 --> 00:06:11,440
vi devas desegni kion vi konstruas

113
00:06:11,440 --> 00:06:14,210
en maniero kiu facile donas aliron al la popolo tie.

114
00:06:14,210 --> 00:06:18,290
Sed kion specoj de aliaj decidoj de dezajno povus tie esti

115
00:06:18,290 --> 00:06:21,850
aŭ povus esti implikita en iu kiel tiu?

116
00:06:23,690 --> 00:06:25,660
Yeah. Mi vidas mano.

117
00:06:25,660 --> 00:06:37,200
[Inaudible studento respondon] >> Ĝuste. Ekzakte. Alireblo estas unu afero.

118
00:06:37,200 --> 00:06:40,870
Multaj homoj ne kredas pri, "Kio pri mia uzantoj?"

119
00:06:40,870 --> 00:06:43,160
kiel la ekstremoj de ĉu spektro.

120
00:06:43,160 --> 00:06:47,770
Mi havas uzantoj kiuj eble malkapabloj ke mi ne pensas

121
00:06:47,770 --> 00:06:50,590
kaj mi ĵus pensante pri desegni por la ĝenerala uzanto.

122
00:06:50,590 --> 00:06:52,630
La interreto estas alirebla de ĉiuj nuntempe,

123
00:06:52,630 --> 00:06:54,870
kaj mi devus desegni por tiuj homoj ankaŭ.

124
00:06:54,870 --> 00:06:58,620
Kio specoj de aliaj decidoj de dezajno povus vin fari?

125
00:06:58,620 --> 00:07:00,690
Jes. >> [Studento] Kosto.

126
00:07:00,690 --> 00:07:02,680
Kosti. Tre bona.

127
00:07:02,680 --> 00:07:08,060
Alia afero ni povus bazi niajn dezajno decidojn sur estas kosto.

128
00:07:08,060 --> 00:07:13,130
Se ni estas komercisto, vi volas konstrui iun kiu ne prenas multan koston por produkti

129
00:07:13,130 --> 00:07:17,720
sed povas vendi je aparte alta kosto aŭ povas akiri al ni profito.

130
00:07:17,720 --> 00:07:21,540
>> Ĉi tiuj estas ĉiuj malsamaj tipoj de dezajno, sed kiam ni konstrui ion sur la interreto

131
00:07:21,540 --> 00:07:25,120
aŭ kiam ni konstrui iun kiu probable ne kostas tiom da konstrui nun,

132
00:07:25,120 --> 00:07:28,630
kiel Interreto aplikoj - vi ne devas ĵeti multe ĉefurbo en ĝin

133
00:07:28,630 --> 00:07:30,900
por fari iun kiu vere funkcias -

134
00:07:30,900 --> 00:07:33,490
kion ni pli maltrankvila pri estas la sperto de la uzanto.

135
00:07:33,490 --> 00:07:36,390
Ni nomas ĉi tiu uzanto centrita dezajno.

136
00:07:36,390 --> 00:07:41,550
Esence kio uzanto centrita dezajno engaĝas metas vin en la ŝuojn de viaj uzantoj.

137
00:07:41,550 --> 00:07:44,870
Se iu signoj ĉe kion mi konstruas,

138
00:07:44,870 --> 00:07:48,250
ili jam evidente venis al mia aparta apliko kun golo en menso,

139
00:07:48,250 --> 00:07:50,280
kun tasko volas kompletigi.

140
00:07:50,280 --> 00:07:53,650
Kaj via laboro estas ne nur por helpi ilin plenumi tiun taskon

141
00:07:53,650 --> 00:07:57,930
sed por helpi ilin plenumi tiun taskon en maniero, kiu estas kompetenta, intuicia,

142
00:07:57,930 --> 00:08:01,900
kaj, kiel iu persono diris tie, atingebla.

143
00:08:01,900 --> 00:08:03,750
Kion efikeco signifas?

144
00:08:03,750 --> 00:08:08,050
Efikeco signifas kiel rapide do mia uzanto kompletigi la taskon donis mian interfaco.

145
00:08:08,050 --> 00:08:11,650
Ĉu ĝi prenas multajn klakoj por ili por ricevi de unu loko al la alia?

146
00:08:11,650 --> 00:08:14,630
Ĉu teda? Ĉu ili devas plenumi multajn repetitivos taskoj?

147
00:08:14,630 --> 00:08:17,140
Ni volas fari tiu procezo kiel efika kiel eble

148
00:08:17,140 --> 00:08:20,070
do ili ne devas fari tiujn varojn de aĵoj.

149
00:08:20,070 --> 00:08:24,230
Rilate intuitiveness, tio estas, ekzemple, se oni serĉas mian interfaco,

150
00:08:24,230 --> 00:08:27,240
Estas facila por ili por ricevi de loko al loko?

151
00:08:27,240 --> 00:08:30,390
Estas facila por ili elkompreni kiel ili devas klaki en mia interfaco

152
00:08:30,390 --> 00:08:33,770
en ordo por ilin atingi la celon aŭ tasko, ke ili volas atingi?

153
00:08:33,770 --> 00:08:37,520
>> Kaj fine, kiel unu homo diris tie, alirebleco estas tre grava.

154
00:08:37,520 --> 00:08:39,640
[Masklo parolanto] Ĝi venas al alirebleco por aĵoj kiel vizio,

155
00:08:39,640 --> 00:08:42,740
like how do I actually desegni ion por iu, kiu estas blinda?

156
00:08:42,740 --> 00:08:46,460
Oh. Por personoj, kiuj ne povas vidi, ni havas ion nomita ekrano legantoj.

157
00:08:46,460 --> 00:08:49,070
Kion vi devus fari estas vi devus konstrui retpagxon en maniero

158
00:08:49,070 --> 00:08:52,020
ke, ekzemple, apartan teknologioj kion ni nomas -

159
00:08:52,020 --> 00:08:53,590
Ekzistas multaj aĵoj nun.

160
00:08:53,590 --> 00:08:55,660
Mi kredas ke estas ekrano legantoj nomis JAWS.

161
00:08:55,660 --> 00:08:58,410
Multaj tion fidi kion ni nomas areo reguloj

162
00:08:58,410 --> 00:09:02,010
por legi al la uzanto, kio estas aktuala en la paĝo.

163
00:09:02,010 --> 00:09:05,480
Por tiuj personoj, kiuj ne povas vidi, vi devas certigi, ke tiuj legantoj de ekrano

164
00:09:05,480 --> 00:09:09,130
povas fakte repreni la enhavo de la paĝo kaj povas reale montras vian uzantoj,

165
00:09:09,130 --> 00:09:13,630
se vi ne povas vidi, almenaŭ vi povas ankoraŭ kompreni la enhavon de la paĝo.

166
00:09:13,630 --> 00:09:16,190
Yeah. Okay.

167
00:09:16,190 --> 00:09:23,410
Sufiĉe parolas pri bona dezajno. Ni parolas pri malbona dezajno.

168
00:09:23,410 --> 00:09:25,220
Ĉi tiuj estas aferoj kiujn vi ne faros.

169
00:09:25,220 --> 00:09:27,890
Ĉu iu povas diri al mi pri siaj spertoj kun Craigslist

170
00:09:27,890 --> 00:09:32,190
kaj kion ili pensas ne estas tiel granda pri ĉi dezajno?

171
00:09:33,690 --> 00:09:36,430
Jes. >> [Studento] Mi kredas ke estas tro multaj vortoj en unu regiono.

172
00:09:36,430 --> 00:09:39,350
Tro multaj vortoj, ĉu ne? Tute blindiga.

173
00:09:39,350 --> 00:09:42,400
Vi venis al ĉi tiu paĝo kaj vi salutis per tuta amaso de aferoj ĉi tien

174
00:09:42,400 --> 00:09:43,860
kiuj povus eĉ ne gravas al vi.

175
00:09:43,860 --> 00:09:47,010
Ekzemple, vi loĝas en unu ŝtato kiu ne komencas kun ĉi tiu letero.

176
00:09:47,010 --> 00:09:48,690
Imagu ke vi loĝas en Teksaso aŭ iu.

177
00:09:48,690 --> 00:09:53,790
>> Vi devas rulumi la tuta vojo malsupren la paĝon por atingi la lokon vi estas je.

178
00:09:53,790 --> 00:10:00,320
Mi estas el Bostono, do lasu min rigardi en Massachusetts. Kie estas Masaĉuseco?

179
00:10:00,320 --> 00:10:03,270
Ho, ĝi estas ĉi tie. Ho, estas Bostono. Okay.

180
00:10:03,270 --> 00:10:09,070
Ni rigardu Bostono. [Ridado]

181
00:10:09,070 --> 00:10:12,250
Bela blindigaj, ĉu ne?

182
00:10:12,250 --> 00:10:16,400
Mallerta aferojn tie. [Ridado]

183
00:10:17,320 --> 00:10:19,470
Diru Mi serĉas ie vivi.

184
00:10:19,470 --> 00:10:24,130
Kiom da homoj reale uzata Craigslist? Tunoj de vi.

185
00:10:24,130 --> 00:10:30,960
Estas sufiĉe malbone manieroj rigardi tion, sed ni rigardu tion ĉi.

186
00:10:35,130 --> 00:10:38,970
Kio estas la diferenco inter img kaj pic? Ĉu iu povas diri al mi?

187
00:10:41,350 --> 00:10:42,830
Tie efektive estas diferenco.

188
00:10:42,830 --> 00:10:47,710
Ili signifas precize la saman aferon, sed ili havas malsamajn etiketojn por ili ial.

189
00:10:48,980 --> 00:10:53,560
Se mi alklaku Has Bildo, nenio okazas en la paĝo.

190
00:10:53,560 --> 00:10:57,490
Mi vere devas klaki Serĉu denove por io okazos.

191
00:10:57,490 --> 00:11:02,430
Kio povus esti pli bona dezajno decido kiu povus fari tie?

192
00:11:03,820 --> 00:11:08,030
Se mi klakante sur tiu filtrilo, mi probable volas filtri per tiu aparta agado

193
00:11:08,030 --> 00:11:09,970
aŭ kiu aparta kategorio.

194
00:11:09,970 --> 00:11:14,450
Do anstataŭ havi por premi Serĉu denove, mi povus simple aŭtomate fari la filtrado

195
00:11:14,450 --> 00:11:17,060
speco de Google stilo kie fari tion tuj.

196
00:11:17,060 --> 00:11:20,440
[Malan] Sed ne formas kiel ni vidis ilin tiel multe devas esti fizike afiŝita

197
00:11:20,440 --> 00:11:23,170
per bati Entajpu almenaŭ aŭ klakante butonon?

198
00:11:23,170 --> 00:11:26,830
Kiel vi vidis ilin ĝis nun, vi vere devas klaki Submetu fari tion.

199
00:11:26,830 --> 00:11:30,090
>> Sed kiel Tommy montros al vi en dua, estas reale manieroj por vi

200
00:11:30,090 --> 00:11:33,010
tia, ke kiam vi alklakas tiun aĵon kiu povas aŭtomate sendi

201
00:11:33,010 --> 00:11:38,840
kion ni nomas AJAX peto kaj akiri datumoj dorso kaj filtri viajn rezultojn instantáneamente.

202
00:11:38,840 --> 00:11:41,340
Esas tunoj de aĵoj kiuj eraras kun tiu interfaco.

203
00:11:41,340 --> 00:11:43,530
[Malan] Ĉu vi povas serĉi Kembriĝo?

204
00:11:43,530 --> 00:11:47,030
Estas io iomete anómala tie, kie vi zorgas pri Kembriĝo

205
00:11:47,030 --> 00:11:54,790
kaj tamen vi ricevas Westford, printempo Hill, West Newton kaj similaj.

206
00:11:54,790 --> 00:11:57,930
Probable ne estas ideala. >> Probable ne ideala.

207
00:11:57,930 --> 00:12:03,900
Kiel povus mi povos fari la uzanto sperto bona en tiu aparta paĝo?

208
00:12:03,900 --> 00:12:07,340
Jes. >> [Studento] Instrukcioj.

209
00:12:07,340 --> 00:12:09,500
Okay. Instrukcioj en kia senco?

210
00:12:09,500 --> 00:12:14,630
[Studento] Ekzemple, aferon por unua fojo uzantoj kiuj eĉ ne scias kio Craigslist estas

211
00:12:14,630 --> 00:12:17,320
aŭ vi ne scias kion vi devis fari.

212
00:12:17,320 --> 00:12:20,150
Ĝuste. Do klarigante kion Craigslist estas sur ĉi tiu paĝo estas grava.

213
00:12:20,150 --> 00:12:23,490
Ni povas vere diri uzantoj kion ĉi paĝo estas vere por.

214
00:12:23,490 --> 00:12:27,090
Se mi nur vizitas tiun, mi vidas tutan faskon da lokoj. Mi ecx ne scias kion ili signifas.

215
00:12:27,090 --> 00:12:29,730
Sed pli grave, nur rigardante tiun interfacon,

216
00:12:29,730 --> 00:12:35,530
memoru, ke mi devis rulumi malsupren barelon da aĵoj por trovi apartan komunumon

217
00:12:35,530 --> 00:12:37,560
ke mi vere zorgis pri la ĉi.

218
00:12:37,560 --> 00:12:39,820
Kio estas pli rapida maniero mi povus fari? Jes.

219
00:12:39,820 --> 00:12:43,290
[Studento] Dividu ilin en oriento, okcidento regionoj. >> Bone.

220
00:12:43,290 --> 00:12:47,460
Mi povus dividi ilin en pli kategorioj kiu povus helpi min pli rapide difini

221
00:12:47,460 --> 00:12:49,820
kiel atingi tiun apartan lokon.

222
00:12:49,820 --> 00:12:54,510
[Studento] Metu fallisto. >> Ĝuste. Okay.

223
00:12:54,510 --> 00:12:58,240
Mi povus uzi falmenuo ĉar ni havas fiksan aro de aĵoj

224
00:12:58,240 --> 00:13:00,100
kaj ni povus montri ilin en falmenuo.

225
00:13:00,100 --> 00:13:02,240
Tiu vojo ne levu tiom da spaco en la ekrano.

226
00:13:02,240 --> 00:13:05,630
Sed eĉ pli bona ol tio, kion ni povas fari?

227
00:13:05,630 --> 00:13:09,220
Jes. >> [Inaudible studento respondon] >> Cxu vi povas rediri tion? >> [Studento] Serĉi skatolo.

228
00:13:09,220 --> 00:13:11,260
Yeah, serĉo skatolo. Tio estas granda.

229
00:13:11,260 --> 00:13:16,430
Kion ni povas efektive fari estas, se ni retrorigardas al la diapozitivoj, serĉo skatolo.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Tre facila maniero por sercxi tra rezultojn kiuj vi scias estas en aro.

231
00:13:21,520 --> 00:13:25,980
Se mi ektajpu BO, nur montri al mi ĉiujn rezultojn, kiuj havas BO interne de ili.

232
00:13:25,980 --> 00:13:29,030
Tiun vojon mi povas tre facile trovi la aparta Mi volas iri al

233
00:13:29,030 --> 00:13:32,390
anstataŭ devi rulumi tra tiu vere grandan liston.

234
00:13:32,390 --> 00:13:37,450
>> Ĉi tiuj estas ĉiaj vere malalta pendanta frukto ke iu kiu estas apliko Craigslist

235
00:13:37,450 --> 00:13:42,500
povas reale fari por fari la sperto en la retejo multe pli bone por lia aparta uzanto.

236
00:13:42,500 --> 00:13:46,370
Okay. Sufiĉe parolas pri malbonaj retejoj.

237
00:13:46,370 --> 00:13:49,410
Ni parolas pri Facebook.

238
00:13:50,880 --> 00:13:54,390
Kiam Facebook eliris, kaj aparte Facebook fotoj,

239
00:13:54,390 --> 00:13:57,870
estis multaj aliaj servoj en la momento kiu povus fari precize la samajn aferojn.

240
00:13:57,870 --> 00:14:00,740
Ili povus organizi viajn fotojn en albumoj.

241
00:14:00,740 --> 00:14:03,360
Kion vi povus fari estas vi povus organizi ilin en aroj kiel bone.

242
00:14:03,360 --> 00:14:06,070
Vi povus organizi ilin laŭ dato. Vi povus fari cxiujn tiujn apartajn aferojn.

243
00:14:06,070 --> 00:14:11,710
Sed ĉu iu scias kion faris Facebook fotoj eksplodas tiutempe estis eldonita?

244
00:14:11,710 --> 00:14:15,080
Jes. >> [Studento] Etikedoj. >> Etikedoj. Ekzakte.

245
00:14:15,080 --> 00:14:21,300
Ni havas Milo super tie, kiu estas nia hundo maskoto kun tiu CS50 bandana.

246
00:14:21,300 --> 00:14:24,810
Vi povas vidi, ke ni havas ĉi tagging trajto en la mezo.

247
00:14:24,810 --> 00:14:28,240
Kaj kion faris Facebook fotoj tiel interesa el usabilidad vidpunkto

248
00:14:28,240 --> 00:14:34,130
estas ke ĝi efektive permesis homoj tra tiu impliki siajn amikojn en liaj fotoj.

249
00:14:34,130 --> 00:14:37,680
Ĉe Facebook, ĉar ilia retejo estas aparte sociaj,

250
00:14:37,680 --> 00:14:40,750
temas pri konstruado ĉi speco de socia atmosfero.

251
00:14:40,750 --> 00:14:42,620
Kiu plibonigis la sperton de fotoj multe pli

252
00:14:42,620 --> 00:14:46,390
ĉar ili povis reale komenci dirante, "Tio estas rilatoj inter la homo,

253
00:14:46,390 --> 00:14:49,220
kaj jen estas fotoj pri homoj vi vere zorgas pri. "

254
00:14:49,220 --> 00:14:52,200
Parto de ĝi estas ankaŭ speco narcisismo.

255
00:14:52,200 --> 00:14:54,980
Homoj ŝatas esti tagged en fotoj kaj aĵoj tiel.

256
00:14:54,980 --> 00:14:58,510
Dum ke ne estas nepre bona homa trajto,

257
00:14:58,510 --> 00:15:01,910
samtempe ĝi estas bazita sur bona dezajno decidoj

258
00:15:01,910 --> 00:15:04,860
ĉar la homo vere zorgas pri aĵoj kiel ĉi tio.

259
00:15:04,860 --> 00:15:07,190
Do jen Facebook fotoj.

260
00:15:07,190 --> 00:15:09,800
>> Sed ni parolas Facebook pli ĝenerale.

261
00:15:09,800 --> 00:15:13,400
Mi certas ke multaj homoj ĉi tie havas opiniojn pri Facebook,

262
00:15:13,400 --> 00:15:16,430
ambaŭ bona dezajno decidoj kaj malbonaj decidoj de dezajno.

263
00:15:16,430 --> 00:15:20,270
Do ni elverŝado aŭ esti feliĉa.

264
00:15:23,480 --> 00:15:26,450
Venu. Mi scias vi ĉiuj uzu Facebook.

265
00:15:26,450 --> 00:15:30,970
Iu devas havi ion malbonan diri aŭ ion bonan por diri pri tio. Jes.

266
00:15:30,970 --> 00:15:35,060
[Studento] En la novaĵo-servo ekzistas multe da aferoj mi ne vere zorgas pri.

267
00:15:35,060 --> 00:15:37,740
La novaĵo-servo faras montri multon vi eble ne zorgas pri.

268
00:15:37,740 --> 00:15:41,660
Vi havas amikojn en Facebook kiu vi ne renkontis dum 2 aŭ 3 jaroj

269
00:15:41,660 --> 00:15:43,860
kaj vi vidos ilian novaĵoj rezultojn krevi supre en via novaĵo-servo

270
00:15:43,860 --> 00:15:45,870
kaj vi ne vere zorgas pri ĝi.

271
00:15:45,870 --> 00:15:48,700
Facebook efektive faris penadon por fari ĉi tiu bona,

272
00:15:48,700 --> 00:15:53,150
kaj ili jam vere provis peli rilatajn rezultojn al la supro de la novaĵo-servo ekde malfrua

273
00:15:53,150 --> 00:15:58,300
tiel vi efektive vidas aĵojn por geamikoj kiuj estas gravaj por vi aŭ via proksimaj amikoj.

274
00:15:58,300 --> 00:16:01,110
Io alia? Jes.

275
00:16:01,110 --> 00:16:06,400
[Inaudible studento respondon] >> Cxu vi povas rediri tion?

276
00:16:06,400 --> 00:16:10,140
[Studento] La anoncoj estas relative maltrudiĝema. >> En kiu senco?

277
00:16:10,140 --> 00:16:16,370
[Inaudible studento respondon] Ili ne havas lumon sur la ekrano, kiel standardoj.

278
00:16:16,370 --> 00:16:17,760
Okay. Tio estas bona.

279
00:16:17,760 --> 00:16:25,030
Se vi memoras la Interreto de la 90 - >> [Malan] mi estis tie. >> Li estis tie. [Ridado]

280
00:16:25,030 --> 00:16:29,210
Vi povus memori brilantaj gifs fonoj, sparkly aferojn,

281
00:16:29,210 --> 00:16:31,570
Geocities stilo speco de aferoj.

282
00:16:31,570 --> 00:16:34,080
Tio vere ne estas ekzemplo de bona dezajno

283
00:16:34,080 --> 00:16:36,690
ĉar ĝi estas vere distri de la enhavo.

284
00:16:36,690 --> 00:16:39,590
La Yale arto afiŝinto kutimis havi viglan gifs kiel ilia fono

285
00:16:39,590 --> 00:16:41,800
kaj vi ne povis legi nenion sur la paĝo,

286
00:16:41,800 --> 00:16:44,870
sed mi supozas ke iu efektive parolis al ili kaj nun ĝi estas iom malsama.

287
00:16:44,870 --> 00:16:48,940
[Malan] Estas multe pli bone nun. >> Estas multe pli bone nun, kiel vi povas vidi. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Simple genia, ĝuste - Yeah. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Parto de ĝi estas ankaŭ farante vian paĝon eble tre minimalista kaj tre komprenebla

290
00:17:00,560 --> 00:17:05,690
do aferojn de la paĝo fluo en maniero kiu estas tre logika kaj ne meti en la vojo de ĉiu alia.

291
00:17:05,690 --> 00:17:11,849
Kio specoj de aliaj aferoj estas bonaj pri Facebook aŭ malbone por Facebook?

292
00:17:11,849 --> 00:17:15,730
Ni nur havas dezajno konversacio tie.

293
00:17:19,470 --> 00:17:21,339
Oh. Kie? Yeah.

294
00:17:21,339 --> 00:17:25,640
[Studento] La nova Kronologio sistemo permesas vin serĉi la personon profilon de sur lia pasinteco.

295
00:17:25,640 --> 00:17:28,119
Ooh, Kronologio.

296
00:17:28,119 --> 00:17:30,280
Kronologio estas granda afero, ĉar ĝi ebligas tigo viaj amikoj

297
00:17:30,280 --> 00:17:33,300
reen kiam ili estis en la mezlernejo.

298
00:17:35,160 --> 00:17:38,060
Kronologio estas bona ĉar ĝi permesas filtri tra enhavo multe pli rapida,

299
00:17:38,060 --> 00:17:41,500
ĝi permesas trovi aĵojn kiuj estus alie prenita vi vere longa tempo por trovi

300
00:17:41,500 --> 00:17:45,840
nur movo tien kaj reen, supren, supren, supren, supren, supren, kiel iri malantaŭen en la tempo.

301
00:17:45,840 --> 00:17:48,910
Sed tiam ekzistas ankaŭ speco de malavantaĝo ke en terminoj de uzanto sperto.

302
00:17:48,910 --> 00:17:51,190
Kio povus esti tiu?

303
00:17:51,190 --> 00:17:56,780
Big vorto, kiu komenciĝas per P-R. >> [Studento] Privateco. >> Privateco, ĉu ne?

304
00:17:56,780 --> 00:17:59,970
Privateco estas grandega uzanto sperto temo.

305
00:17:59,970 --> 00:18:07,190
Tiu estas unu el la aferoj kiujn mi malamas plej pri Facebook nun. [Ridado]

306
00:18:07,190 --> 00:18:09,000
[Malan] Kiel fari mi nun.

307
00:18:09,000 --> 00:18:11,380
David ne realigi ĉi vere okazis ĝis hieraŭ.

308
00:18:11,380 --> 00:18:14,560
Do nun li scias, ke ĉiufoje kiam mi babili li mi scias ke li estis ignorante mi.

309
00:18:14,560 --> 00:18:16,880
[Malan] La mallerta parto estis mi efektive ignoras lin,

310
00:18:16,880 --> 00:18:21,040
kaj mi ne scias, ke li sciis Mi estis ignorante li. [Ridado]

311
00:18:21,040 --> 00:18:24,030
Privateco estas grandega problemo.

312
00:18:24,030 --> 00:18:28,670
Ĉu iu povas tie diru al mi kio povus esti malbona pri Facebook privateco

313
00:18:28,670 --> 00:18:32,270
krom la fakto ke ili faras tion tiel?

314
00:18:32,270 --> 00:18:37,240
Kio estas aparte malfacile fari kun respekto al Facebook privatecon?

315
00:18:37,240 --> 00:18:40,340
Tia estas elstare demando.

316
00:18:41,680 --> 00:18:43,930
Jes. >> [Studento] Kaŝi vian fotoj de iuj personoj.

317
00:18:43,930 --> 00:18:46,170
Ĝuste. Ekzakte, por kaŝi vian fotoj de iuj personoj.

318
00:18:46,170 --> 00:18:51,290
Ili havas ĉi malgranda, iom butonon en la supra dekstra kiu ebligas vin Baskuligi la intimeco de foto.

319
00:18:51,290 --> 00:18:56,360
Iliaj privatecon ebloj estas tre diversaj inter malsamaj specoj de menuoj.

320
00:18:56,360 --> 00:18:59,510
>> Ili jam atingis multe pli bone pri ĝi ĵus, sed kutimis esti la kazo

321
00:18:59,510 --> 00:19:04,870
ke kiam ajn vi volas malhelpi vian amikojn el vidi fotojn,

322
00:19:04,870 --> 00:19:08,280
vi devus iri tra tre komplika 5-paŝo procezo de esti kiel,

323
00:19:08,280 --> 00:19:11,150
lasu min klaku ĉi ligilon, nun mi premas denove, lasu min premas denove,

324
00:19:11,150 --> 00:19:13,420
lasu min specifi kiuj homoj ne povas vidi Mian fotoj.

325
00:19:13,420 --> 00:19:17,250
Tio ne estas aparte bone en Facebook La parto

326
00:19:17,250 --> 00:19:20,530
ĉar tiel pri uzanto sperto efektive donante al ili la liberecon

327
00:19:20,530 --> 00:19:22,460
kontroli, kion homoj povas vidi.

328
00:19:22,460 --> 00:19:25,550
Ni nomas ĉi tiu uzanto kontrolo kaj libereco.

329
00:19:25,550 --> 00:19:31,090
Se vi ne lasanta viaj uzantoj fari tion en maniero kiu estas efika kaj intuicia,

330
00:19:31,090 --> 00:19:34,570
tiam via uzanto sperto ne estas vere ke granda ajn.

331
00:19:34,570 --> 00:19:38,200
 Ĉu vi infanoj ŝatas diri ion pri Facebook?

332
00:19:38,700 --> 00:19:41,420
Kiel mi turnu ĉi ekstere?

333
00:19:41,420 --> 00:19:46,290
[Ong] Oni ne povas turni tiun for, kaj tio estas grandega usabilidad difekto fare de Facebook.

334
00:19:46,290 --> 00:19:49,410
Ĉi tiu funkcio - Mi vere rigardis ĝin hieraŭ -

335
00:19:49,410 --> 00:19:53,940
ĝi estas ĉu vi ne povas fari ĝin aŭ ĝi estas enterigita ie tre, tre profunda

336
00:19:53,940 --> 00:19:58,050
sur la fundo de Facebook ĉar mi ne povas diveni kiel malŝalti ĉi funcionalidad ajn.

337
00:19:58,050 --> 00:20:00,400
[Malan] Sed kelkfoje tiuj decidoj ne estas evidenta

338
00:20:00,400 --> 00:20:03,890
ĉar vi infanoj donis al ni multe da utilaj sugestoj pri diversaj CS50 aplikoj

339
00:20:03,890 --> 00:20:05,710
kaj retejoj ke la kurso uzas.

340
00:20:05,710 --> 00:20:10,260
Ni ne ankoraŭ realigita ĉiuj el tiuj petoj kaj sugestoj.

341
00:20:10,260 --> 00:20:14,550
>> Parto de tiu estas por atingi tiom da petoj ke ĝi estas funkcio de tempo,

342
00:20:14,550 --> 00:20:17,070
sed kelkfoje oni nur faras konscian decidon kiel,

343
00:20:17,070 --> 00:20:19,830
"Dankon pro la sugesto, sed ni malkonsentas."

344
00:20:19,830 --> 00:20:24,350
Do kiel vi reale decidi kion vi devas fari se viaj uzantoj opinias ke vi devus fari ion

345
00:20:24,350 --> 00:20:28,110
eĉ se vi ne nepre?

346
00:20:28,110 --> 00:20:32,360
Estas fajna ekvilibro inter reale aŭskulti kion viaj uzantoj diri

347
00:20:32,360 --> 00:20:35,840
kaj fakte esti ia linio kie vi diris,

348
00:20:35,840 --> 00:20:37,750
"Ni ne volas fari, kion ĉi tiuj uzantoj diras."

349
00:20:37,750 --> 00:20:42,520
Kaj precipe, mi kredas ke estis citaĵo de Henry Ford kiu resumas ĉi tion sufiĉe bone.

350
00:20:42,520 --> 00:20:47,130
"Se mi demandis homoj kion ili volis, ili dirus ke ili volis pli rapide ĉevaloj."

351
00:20:47,130 --> 00:20:51,840
Ĉu iu povas ordigi de tease krom kion tiu citaĵo vere signifas?

352
00:20:51,840 --> 00:20:56,060
Ne nur ke la uzantoj scias kion ili volas,

353
00:20:56,060 --> 00:20:59,180
sed ĝi estas pli ke -

354
00:20:59,180 --> 00:21:02,720
[Studento] Ili ne scias kio estas ebla.

355
00:21:02,720 --> 00:21:06,140
En parto ili ne scias kio estas ebla.

356
00:21:07,880 --> 00:21:11,440
Tease ke krom iom pli. Kion vi aludas per tio?

357
00:21:11,440 --> 00:21:21,340
[Inaudible studento respondon]

358
00:21:21,340 --> 00:21:25,770
Tio estas bona. Kion mi pensas, ke ni provas diri estas, ke homoj scias kion ili volas.

359
00:21:25,770 --> 00:21:28,050
Ili volas rapidan ĉevaloj.

360
00:21:28,050 --> 00:21:29,840
Kion ili vere volas estas la kapablon movi pli rapide,

361
00:21:29,840 --> 00:21:32,310
sed ili ne vere konas la mediumo, per kiu atingi tion.

362
00:21:32,310 --> 00:21:36,330
Kiam vi venos al viaj uzantoj kaj viaj uzantoj diri al vi ion

363
00:21:36,330 --> 00:21:39,700
kaj ili diros al vi, "Ni volas tiuj karakterizaĵoj kaj tiuj funkcioj kaj tiuj funkcioj,"

364
00:21:39,700 --> 00:21:42,650
vi ne volas nepre pensas, "Lasu min

365
00:21:42,650 --> 00:21:44,720
"Kaj efektivigu, kion ili eksplicite diras,"

366
00:21:44,720 --> 00:21:48,610
sed kion vi volas pensi estas, "Kia ideojn mi povas preni de tio?"

367
00:21:48,610 --> 00:21:50,450
Kion ili efektive volas?

368
00:21:50,450 --> 00:21:55,560
>> Kaj de tie kion vi povas fari estas desegni iun kiu kontentigas tiuj petoj

369
00:21:55,560 --> 00:22:00,340
sed ne nepre en la maniero ke la uzanto atendas ĝin por esti kontenta.

370
00:22:00,340 --> 00:22:03,830
Do por iu kiel fina projektoj, en tre reala terminoj,

371
00:22:03,830 --> 00:22:07,900
kio estas utila heŭristiko kiam temas pri fari ion pli bone,

372
00:22:07,900 --> 00:22:10,630
precipe se la diseñador havas ĉi aroganteco pri li

373
00:22:10,630 --> 00:22:14,360
per vi ia scias kio estas plej bona, vi povus preni enigo de via uzantoj,

374
00:22:14,360 --> 00:22:16,580
sed kiel vi reale iros sur atingi ke sugestoj?

375
00:22:16,580 --> 00:22:21,610
En fino projektoj, tre konkrete, kion produktas optimuma rezultoj tie?

376
00:22:21,610 --> 00:22:25,030
Kion produktas optimuma rezultoj - kaj mi iros super ĉi en dua -

377
00:22:25,030 --> 00:22:29,190
Estas ĉi tiu procezo de disvolviĝo kaj tiam provi kaj poste ripetanta.

378
00:22:29,190 --> 00:22:32,020
Kion mi celas per testado estas kutime kiam vi desegni ion

379
00:22:32,020 --> 00:22:36,970
vi pensas, ke estas sufiĉe bona, kiel, "Mi estas tiom granda konceptadisto. Ĉiuj tuj amas ĉi."

380
00:22:36,970 --> 00:22:41,600
Kaj tiam vi metis ĝin tie kaj homoj ne vere ŝatas ĝin ial.

381
00:22:41,600 --> 00:22:46,820
Kion vi devas fari estas vi devas preni la partoj de aĵoj kiujn homoj faras kiel

382
00:22:46,820 --> 00:22:49,180
kaj revamp la aĵoj kiuj oni ne ŝatas.

383
00:22:49,180 --> 00:22:53,080
Ĝi sonas kiel tre evidenta procezo, sed tiu procezo de senĉese ripetanta

384
00:22:53,080 --> 00:22:55,980
sur supro de kion vi jam konstruita estas procezo kiu helpas vin

385
00:22:55,980 --> 00:22:59,730
ne nur rafini vian propran dezajnon kapabloj sed ankaux helpas vin rafini la dezajno

386
00:22:59,730 --> 00:23:03,790
por ke homoj reale dankas vian produkton eĉ pli ol ili faris antaŭe.

387
00:23:03,790 --> 00:23:07,390
>> Mi tuj iros pli konkretaj ekzemploj de tio, kion vi povus reale fari.

388
00:23:07,390 --> 00:23:11,390
Kiel ia lasta ekzemplo de produkto, ni rigardu kajako.

389
00:23:11,390 --> 00:23:14,970
Kajako kiam eliris estis tre, tre populara.

390
00:23:14,970 --> 00:23:18,760
Ĉu iu povas diveni kial?

391
00:23:18,760 --> 00:23:20,950
Kio estas la varoj de aĵoj vi ŝatas pri tiu se vi uzas ĝin

392
00:23:20,950 --> 00:23:23,990
aŭ kio estas la varoj de aĵoj vi ne ŝatas?

393
00:23:23,990 --> 00:23:31,590
Jes. >> [Inaudible studento respondon] >> Bone.

394
00:23:31,590 --> 00:23:34,730
Tio estas parto de ĝi lasi la uzanton havi query ke estas pli expansiva

395
00:23:34,730 --> 00:23:38,150
ol tre limiga unu kiel, "Vi devas elekti vian komenca dato

396
00:23:38,150 --> 00:23:39,810
"Kaj vi devas elekti vian fino dato."

397
00:23:39,810 --> 00:23:44,910
Fakte, ĝi permesas esti fleksebla pri ĝi kaj ĝi donas vin ĉiujn el la fugoj en tiu gamo.

398
00:23:44,910 --> 00:23:46,730
Io alia?

399
00:23:46,730 --> 00:23:50,530
[Studento] Ili inkluzivas la kotizoj en la prezo.

400
00:23:50,530 --> 00:23:53,330
Ili faras inkluzivas la kotizoj en la prezo.

401
00:23:53,330 --> 00:23:56,720
La impostoj kaj aĵoj vere iru rekte en tiu prezo en la supra maldekstra

402
00:23:56,720 --> 00:24:00,710
tial vi ne trompis en pensante, ke vi efektive pagas por $ 240 flugo

403
00:24:00,710 --> 00:24:03,280
kiam estas vere $ 330.

404
00:24:03,280 --> 00:24:06,200
Io alia? Jes.

405
00:24:06,200 --> 00:24:10,140
[Inaudible studento respondon]

406
00:24:10,140 --> 00:24:14,610
Mi ne certas se ili vere lasu vin fari tion.

407
00:24:14,610 --> 00:24:18,310
Mi povus esti malĝusta.

408
00:24:18,310 --> 00:24:23,360
Tio povus esti interesa afero, se vi volas meti pli da pezo en aparta filtriloj

409
00:24:23,360 --> 00:24:27,000
por ke ili puŝi rezultojn rilataj al tiu filtrilo al la supro.

410
00:24:27,000 --> 00:24:31,920
Sed vi povas paroli al mi kio estas tiel speciala pri tiu maldekstra flanko?

411
00:24:31,920 --> 00:24:39,540
Kiel vi tradicie serĉi flugo sur Interreto servon antaux tio?

412
00:24:41,600 --> 00:24:44,650
>> Jes. >> [Inaudible studento respondon] >> Cxu vi povas diri, ke -

413
00:24:44,650 --> 00:24:47,530
[Studento] Ĉiu aera. >> Jes. Ĉiu kompanio havas sian propran retejon.

414
00:24:47,530 --> 00:24:50,110
Ĉi solidigas aĵoj. Kaj?

415
00:24:50,110 --> 00:24:52,190
[Studento] Vi scias precize kion tempo vi elirante.

416
00:24:52,190 --> 00:24:54,460
Vi scias precize kion tempo vi lasante,

417
00:24:54,460 --> 00:24:59,380
sed rilate al la filtriloj en aparta.

418
00:25:00,710 --> 00:25:03,540
Lasu min eltiri supren kajako.

419
00:25:11,490 --> 00:25:14,020
Ho Dio, popo-ups. Malbona uzanto sperto.

420
00:25:14,020 --> 00:25:17,230
Kio okazas kiam mi movas tiunĉiŝovilon?

421
00:25:17,230 --> 00:25:21,010
[Studento] Aŭtomata ĝisdatigoj. >> [Ong] Aŭtomata ĝisdatigoj.

422
00:25:21,010 --> 00:25:23,440
Tio estas iu kiu estas tre grava.

423
00:25:23,440 --> 00:25:25,380
Antaŭ tio, kiam ajn vi volas serĉi al flugo,

424
00:25:25,380 --> 00:25:28,410
vi devis meti en via enigo situo, via eliro situo, gazetaro Search,

425
00:25:28,410 --> 00:25:31,190
estus procesi tio kaj montri vian rezultoj.

426
00:25:31,190 --> 00:25:34,120
Se vi volas ŝanĝi vian konsulto, vi devus premi reen dufoje,

427
00:25:34,120 --> 00:25:39,770
eniri en nova konsulto de nulo, kaj poste fari tion denove kaj denove.

428
00:25:39,770 --> 00:25:43,910
La belan afero pri io tiamaniere estas ĝi uzas tre [nekompreneblaj] aĵo en la mezo.

429
00:25:43,910 --> 00:25:46,230
Kiam ajn vi faru ion kiel tiu, ĝi pafas ekstere peto

430
00:25:46,230 --> 00:25:48,420
kaj denove vi ĉiuj rezultoj tuj.

431
00:25:48,420 --> 00:25:51,680
Tiu speco de tuja sugestoj estas iu kiu faris kajako ekstreme populara

432
00:25:51,680 --> 00:25:55,910
ĉar ĝi estas vere facila por mi nur ŝanĝos mian query

433
00:25:55,910 --> 00:25:58,890
kaj eltrovi tion, kio estas ĉirkaŭ apartan gamo

434
00:25:58,890 --> 00:26:01,950
sen devi iri tien kaj reen, tien kaj reen, tien kaj reen.

435
00:26:01,950 --> 00:26:05,200
Do jen estas ĉiaj aferoj, kiujn vi volas pensi pri kiam vi desegni vian retejon.

436
00:26:05,200 --> 00:26:08,930
Kiel mi povas fari ĝin tre efika por mia uzantoj iri tra ajn ili estas laborante

437
00:26:08,930 --> 00:26:13,010
kaj alveni al ilia eventuala celo kiel eble plej rapide?

438
00:26:13,010 --> 00:26:16,430
[Malan] Kaj al Jozef punkto frua pri uzantoj ne nepre scii kion ili volas,

439
00:26:16,430 --> 00:26:18,640
surbaze de kio vi infanoj nun scias pri HTML

440
00:26:18,640 --> 00:26:22,780
kaj vi devas markobutonojn, radiaj butonoj, unuaranga menuoj, enigo kampoj kaj similaj,

441
00:26:22,780 --> 00:26:26,140
kiel vi apliki la nocio de plukante komenco tempo por flugo?

442
00:26:26,140 --> 00:26:30,030
>> Kiu el tiuj diversaj UI mekanismoj estus vi uzas?

443
00:26:30,030 --> 00:26:34,100
Se vi ĵus konas la kvanto de HTML kiu instruis antaŭe

444
00:26:34,100 --> 00:26:39,070
kaj vi konas la enigoj estas radioaparato butonoj, markobutonojn, guto-montetaro, kaj eniro skatolo,

445
00:26:39,070 --> 00:26:43,320
kio estus via natura elekto estis por pluki datoj?

446
00:26:43,320 --> 00:26:48,670
[Studento] Eniro. >> Eniro. Aŭ eble eĉ desplegable kun ĉiuj de la datoj, ĉu ne?

447
00:26:48,670 --> 00:26:53,170
Do kun pli kompleksa UI meĥanismoj kiel tiu de la maldekstra flanko kiu vi povas apliki,

448
00:26:53,170 --> 00:26:55,500
vi povas fari ĉi procezo multe pli intuicia kun slider

449
00:26:55,500 --> 00:27:01,020
ĉar la tempo estas kontinua, kaj homoj kutime ne pensas pri tio en terminoj de diskretaj buloj.

450
00:27:01,020 --> 00:27:04,950
Bone. Lasta afero.

451
00:27:04,950 --> 00:27:07,370
Dek usabilidad heurísticas.

452
00:27:07,370 --> 00:27:10,820
Ĉiuj aĵoj ni parolis pri probable fali sub unu el tiuj kategorioj.

453
00:27:10,820 --> 00:27:14,420
Se vi iras al tiu ligilo, kiun la lokoj estos eldonita en linio,

454
00:27:14,420 --> 00:27:18,900
vi fakte povos, kiel vi desegni via retejo, gardu tiujn heurísticas en menso

455
00:27:18,900 --> 00:27:21,330
kaj ĉi tiuj reguloj de dikfingro.

456
00:27:21,330 --> 00:27:26,610
Por viaj projektoj, kion mi rekomendas ke vi faru por desegni vian programon bona

457
00:27:26,610 --> 00:27:28,850
estas fari papero prototipado unua.

458
00:27:28,850 --> 00:27:32,150
Kiam vi pensas pri via aplikado, tre rapide skizi, kion vi volas rigardi kiel

459
00:27:32,150 --> 00:27:36,230
kaj certigi ĉiuj skatoloj estas aranĝitaj en maniero kiu estas tre intuicia por la uzanto uzi

460
00:27:36,230 --> 00:27:39,820
kaj eĉ montras tiujn papero prototipoj al viaj amikoj kaj komenci fokuso grupoj.

461
00:27:39,820 --> 00:27:44,230
Nur ricevas 2 aŭ 3 personoj kune kaj peti ilin nur tap sur tiuj papero prototipoj,

462
00:27:44,230 --> 00:27:47,650
kaj montri al ili novajn ekranoj por vidi se ili vere komprenis kio okazas.

463
00:27:47,650 --> 00:27:50,680
>> Kion vi volas fari estas doni al ili taskon, motivi tiu tasko,

464
00:27:50,680 --> 00:27:53,270
kaj nur donos al ili la app kaj lasu ilin uzi ĝin.

465
00:27:53,270 --> 00:27:56,530
Ne donu al ili instrukciojn preter tiu.

466
00:27:56,530 --> 00:28:00,920
Vi volas vere ili interagas kun via programo en maniero kiu ebligas vidi

467
00:28:00,920 --> 00:28:03,870
kiel ili uzus ĝin se vi ne staris apud ili.

468
00:28:03,870 --> 00:28:05,250
Kaj tio estas tre grava.

469
00:28:05,250 --> 00:28:08,780
Kiu donos al vi multajn komprenojn pri homoj ricevas ĉirkaŭ aparta aĵoj

470
00:28:08,780 --> 00:28:10,560
en maniero, ke mi ne intencas ilin?

471
00:28:10,560 --> 00:28:14,680
Ĉu ili uzante apartan UI mekanismoj en la ekrano

472
00:28:14,680 --> 00:28:17,490
laŭ maniero kiu estas speco de hacky?

473
00:28:17,490 --> 00:28:22,020
Mi ne intencas por ili fari ĝin tiel.

474
00:28:22,020 --> 00:28:23,940
Kaj iam vi faris kun tio, kion vi volas fari?

475
00:28:23,940 --> 00:28:26,010
Via dezajno rokoj, ĉu ne?

476
00:28:26,010 --> 00:28:29,600
Kion vi volas fari estas vi volas evoluigi kaj tiam fari tiu procezo denove.

477
00:28:29,600 --> 00:28:32,110
Do montri ĝin al amikoj iam vi disvolvis ĝin, testi ĝin,

478
00:28:32,110 --> 00:28:36,630
disvolvi, testi, evoluigi, testi, persisti, sur kaj en kaj antaŭen.

479
00:28:36,630 --> 00:28:39,720
Dezajno estas tre ripeta procezo en ĉi senso.

480
00:28:39,720 --> 00:28:43,280
Vi vere devas konstrui ion kaj poste rimarkas aferojn pri ĝi

481
00:28:43,280 --> 00:28:46,520
ke vi ne rimarkas antaŭ kaj reiri kaj plibonigi de tiu.

482
00:28:46,520 --> 00:28:50,890
Nun, kiel por la disvolviĝo parto, tio estas kio Tommy tuj montros al vi post la paŭzo

483
00:28:50,890 --> 00:28:53,220
kaj kiel vi eble povos apliki iun kiel autocomplete

484
00:28:53,220 --> 00:28:56,610
laŭ maniero kiu estas sufiĉe simpla.

485
00:28:57,440 --> 00:28:59,550
[Malan] Kiel Tommy establas tie, demando tiam.

486
00:28:59,550 --> 00:29:03,780
Multaj el la plej fruaj retejoj - kaj kiam Jozef diris 1990 stilo TTT-ejo,

487
00:29:03,780 --> 00:29:07,640
estis implementaciones kie se vi volas selekti komenco tempon kaj finiĝis la tempo,

488
00:29:07,640 --> 00:29:10,380
sincere, reen en la tago kaj ecx en iuj retejoj hodiaŭ,

489
00:29:10,380 --> 00:29:13,220
la vojo vi faras ĉi estas vi elektu unu horo el falmenuo,

490
00:29:13,220 --> 00:29:15,910
vi prenas minutoj de desplegable, eble vi elektos AM, PM,

491
00:29:15,910 --> 00:29:17,440
kaj poste vi faros tion ankoraŭ 3-foje.

492
00:29:17,440 --> 00:29:19,920
Kaj tial kun 6 klakoj kaj eble iuj movo

493
00:29:19,920 --> 00:29:24,000
vian uzanto povas reale havigi ian daton kaj / aŭ tempo gamo en ĉi senso.

494
00:29:24,000 --> 00:29:27,920
>> Do certe _suboptimal_ kaj tamen tiel malproksime ni vidis neniun esprima kapablojn

495
00:29:27,920 --> 00:29:30,330
en iu ajn el la lingvoj ni rigardis fari ion sexier

496
00:29:30,330 --> 00:29:32,620
kiel tiu slider de komenco kaj fino tempo tempo.

497
00:29:32,620 --> 00:29:36,290
Sed se vi pensas reen al semajno 0 kiam ni parolis pri Scratch,

498
00:29:36,290 --> 00:29:39,080
tie tro ne estis widgets kiu ĵus faris iujn aĵojn.

499
00:29:39,080 --> 00:29:42,700
Vi vere nur havis tiujn fundamentojn kiel maŝojn kaj kondiĉoj kaj similaj.

500
00:29:42,700 --> 00:29:46,910
Do ia nur pensante tre abstrakte nun, sendependa de la detaloj de HTML,

501
00:29:46,910 --> 00:29:51,260
kio vere okazas kun io tiamaniere komenco tempo kaj fino tempo slider?

502
00:29:51,260 --> 00:29:54,960
Kiam mi movi mian muson kaj mi alklaku ke iom karoto simbolo maldekstre

503
00:29:54,960 --> 00:29:59,220
kaj komenci trenante, programmatically, kio estas vi volas povi apliki

504
00:29:59,220 --> 00:30:01,000
fari kiuj okazas?

505
00:30:01,000 --> 00:30:04,920
Kio demandoj, kion Bulea esprimojn vi volas povi demandi?

506
00:30:04,920 --> 00:30:06,930
Kio vere okazas? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Studento] Kie estas la pozicio de la kursoro? >> Bona. Kie estas la pozicio de la kursoro?

508
00:30:10,080 --> 00:30:11,970
Tio estis io ni bezonis esprimi reen en Scratch,

509
00:30:11,970 --> 00:30:14,690
ĉu ĝi estis bazita sur loko aŭ eĉ koloro aŭ similaj.

510
00:30:14,690 --> 00:30:18,410
Vi povus memori iam tiom mallonge lundon tie estis ĉiuj de ĉi tiuj aĵoj nomata eventoj

511
00:30:18,410 --> 00:30:22,370
en la mondo de la TTT, kaj tial ekzistas aĵoj kiel onclick kaj onkeypress

512
00:30:22,370 --> 00:30:25,960
kaj onkeyup kaj onmouseover kaj onmouseout.

513
00:30:25,960 --> 00:30:29,130
Do rimarkas ke eĉ tion ni estis prenante por donita en la TTT

514
00:30:29,130 --> 00:30:32,190
kun lokoj kiel Facebook kaj Gmail, eĉ se vi ne havas ideon

515
00:30:32,190 --> 00:30:34,890
kiel vi eble planas akcepti ĉar tie estas nenio eĉ ŝatas ĝin en prelego

516
00:30:34,890 --> 00:30:38,570
aŭ Problemo Ŝanĝu 7, rimarkas ke kun ĉi tiuj ĝusta sama fundamentojn,

517
00:30:38,570 --> 00:30:41,090
kun HTTP kaj parametroj kaj GET kaj POST,

518
00:30:41,090 --> 00:30:44,010
kun la baza HTML enigoj ke ni rigardis tiel malproksime

519
00:30:44,010 --> 00:30:47,690
kaj post momento kun la programita mekanismoj kiuj Tommy pri enkonduki

520
00:30:47,690 --> 00:30:51,300
vi povas starti por esprimi vin kiel vi faris en semajno 0

521
00:30:51,300 --> 00:30:53,800
per intuitivamente trenante kaj faliginte.

522
00:30:53,800 --> 00:30:58,950
>> Do kun kiu diris, Tommy MacWilliam kaj iuj novaj puzlo pecoj por ni por Retejo.

523
00:30:58,950 --> 00:31:03,450
Bone. Mia nomo estas Tommy kaj mi tuj parolos pri JavaScript.

524
00:31:03,450 --> 00:31:07,150
Nur disclaimer: Mi estas de la opinio ke JavaScript estas la plej bona lingvo de programado

525
00:31:07,150 --> 00:31:09,010
en la tuta tuta mondo.

526
00:31:09,010 --> 00:31:11,940
Ekzistas multaj personoj kiuj malkonsentas kun mi, sed ĝi estas nur mirinda.

527
00:31:11,940 --> 00:31:16,330
Kiam vi reiru al C, se vi devas skribi C por alia klaso aŭ kelkaj aliaj lingvoj,

528
00:31:16,330 --> 00:31:19,780
estas nur vere frustra en la tuta malalta nivelo detalojn vi devas preni bogged malsupren in

529
00:31:19,780 --> 00:31:23,050
Do se vi iam sentis malĝoja pri kiel ĝena C estas skribi,

530
00:31:23,050 --> 00:31:25,130
nur reiri, skribi iujn JavaScript. Estas nirvana.

531
00:31:25,130 --> 00:31:27,980
Vi sentos multe pli bone pri via malbona tago.

532
00:31:27,980 --> 00:31:31,900
Multaj de la magio de JavaScript devenas ĝia kapablo manipuli aĵoj

533
00:31:31,900 --> 00:31:33,730
kiuj estas jam sur la paĝo.

534
00:31:33,730 --> 00:31:38,520
Kiam ni skribis niajn PHP skriptoj, estis ekzekutitaj en la servilo,

535
00:31:38,520 --> 00:31:42,270
kaj eventuale kiujn PHP script probable Eligo iuj HTML.

536
00:31:42,270 --> 00:31:45,860
Ke HTML estis sendita al la kliento, kaj tiam tio estis ĝi.

537
00:31:45,860 --> 00:31:50,180
Se PHP volis aldoni butonon al paĝo, ekzemple, ĝi ne povas vere fari tion.

538
00:31:50,180 --> 00:31:54,350
Ĝi devus redonu tute novan HTML-dosieron kaj sendi ke al la retumilo.

539
00:31:54,350 --> 00:31:57,840
Kun JavaScript ni scias, ke ni povas ĝisdatigi aĵoj dum ili estas jam sur la paĝo,

540
00:31:57,840 --> 00:32:00,840
kaj pro tio ni povas havigi multe pli tuja sugestoj,

541
00:32:00,840 --> 00:32:06,150
kiu estos vere plibonigi la uzanto sperto en nia retejo.

542
00:32:06,150 --> 00:32:09,330
Nur rapidan recap de JavaScript selectores.

543
00:32:09,330 --> 00:32:11,590
Ni scias, ke kiam ni malŝarĝi HTML-paĝo,

544
00:32:11,590 --> 00:32:13,890
ke tuj esti reprezentita en la DOM.

545
00:32:13,890 --> 00:32:19,340
>> La DOM memoru estas ĝuste ĉi tiu granda arbo, kie elementoj estas rilatanta en ĉi tiu granda hierarkio.

546
00:32:19,340 --> 00:32:21,810
Kiam ni laboris kun datumbazoj en pset 7,

547
00:32:21,810 --> 00:32:26,280
unu el la unuaj aferoj ni bezonis scii fari estis konsulti la datumbazo.

548
00:32:26,280 --> 00:32:29,060
Ni havas ĉi granda uzantoj tablo, kaj kelkfoje ni nur volas diri,

549
00:32:29,060 --> 00:32:33,260
"Mi nur volas iun el tiuj uzantoj kiuj kongruas iuj kondiĉo."

550
00:32:33,260 --> 00:32:36,020
Simile, kiam ni havas la DOM ni bezonas iel de informpeti ĝin.

551
00:32:36,020 --> 00:32:39,490
Ni bezonas iujn maniero diri, "Mi deziras, ke ĉiuj el la butonoj kiuj similas tiun

552
00:32:39,490 --> 00:32:41,860
"Aŭ ĉiu el la bildoj en la paĝo."

553
00:32:41,860 --> 00:32:44,330
Kaj jen selectores nin permesas fari tion.

554
00:32:44,330 --> 00:32:45,690
Do nur rapidan recap.

555
00:32:45,690 --> 00:32:50,770
Ĉi tiu unua ĉi tie, ĉi # submetiĝi, kio estas tuj elektu? Ĉu iu memoras?

556
00:32:50,770 --> 00:32:54,880
[Inaudible studento respondon] >> Jes, ĝuste.

557
00:32:54,880 --> 00:32:59,510
Tiu tuj elektu ero en la paĝo kiu havas ID de submetiĝi.

558
00:32:59,510 --> 00:33:03,470
Kaj por ke hash etikedo diras ĉi selector tuj labori kun IDs.

559
00:33:03,470 --> 00:33:07,630
Kion pri la dua, ĉi. Centrita, kion tiu elektu?

560
00:33:11,360 --> 00:33:15,180
Yeah. >> [Studento] Klaso. >> Ekzakte. Tiu estas nun tuj elektu de klaso.

561
00:33:15,180 --> 00:33:18,840
La diferenco inter ID kaj klaso tie estas ĝenerale la ID devas esti unika

562
00:33:18,840 --> 00:33:20,820
ene ajn spaco vi sercxas super.

563
00:33:20,820 --> 00:33:23,080
Do se vi serĉas super tutan retpaĝon,

564
00:33:23,080 --> 00:33:27,740
vi vere devus havi nur 1 elemento kun kiu iuj ID, do en tiu ĉi kazo de submetiĝi.

565
00:33:27,740 --> 00:33:31,330
Kun klasoj, aliflanke, oni povas havi pli ol 1 elemento en la sama paĝo

566
00:33:31,330 --> 00:33:33,130
kun la sama klaso.

567
00:33:33,130 --> 00:33:36,580
Tio povus esti utila por diri mi volas elekti ĉio ke tio centrita sur la paĝo

568
00:33:36,580 --> 00:33:38,450
anstataŭ nur 1 afero.

569
00:33:38,450 --> 00:33:40,310
>> Kaj fine, ĉi lasta tie estas iom pli komplika,

570
00:33:40,310 --> 00:33:43,890
sed kio estas tio tuj elekti el la DOM?

571
00:33:46,650 --> 00:33:48,810
[Inaudible studento respondon] >> Kio estas tio?

572
00:33:48,810 --> 00:33:53,250
[Studento] Anything tio estas etikedo. >> Ni havas 2 partojn tie.

573
00:33:53,250 --> 00:33:58,070
La dua parto estas dironta mi volas elekti tiujn etikedoj kun etikedo de eniro,

574
00:33:58,070 --> 00:34:00,730
tiel ajna elemento kiu estas enigo etikedo.

575
00:34:00,730 --> 00:34:03,080
Sed mi ne volas simple elektu ĉiuj enigoj

576
00:34:03,080 --> 00:34:05,170
ĉar iu kiel submeto-butonon eblis enigo

577
00:34:05,170 --> 00:34:08,409
kaj io kiel teksto skatolo eblis enigo.

578
00:34:08,409 --> 00:34:11,909
Do kun tiuj rektaj krampoj mi jene mi nur volas elekti tiujn elementojn

579
00:34:11,909 --> 00:34:14,110
kiu estas de tipo teksto.

580
00:34:14,110 --> 00:34:17,400
Ie en mia HTML tag Mi havas atributon nomata tipo,

581
00:34:17,400 --> 00:34:19,750
kaj la valoro de tiu atributo devas esti tekston.

582
00:34:19,750 --> 00:34:21,340
Do kiel pri tiu unua parto cxi tie?

583
00:34:21,340 --> 00:34:25,489
La unua vorto de ĉi selector estas formo tiam mi havas spacon kaj tiam ĉi enigo parto.

584
00:34:25,489 --> 00:34:29,620
Kion tio do, metante la formon antaŭ ĝi?

585
00:34:33,409 --> 00:34:35,860
Tiu tuj esence limigi nian demando.

586
00:34:35,860 --> 00:34:38,510
Ĝi povus esti la kazo, ke ni havas kelkajn enigoj en la paĝo

587
00:34:38,510 --> 00:34:41,080
kiuj ne estas posteuloj de formo.

588
00:34:41,080 --> 00:34:46,150
Kio ĉi faros estas ĉi diros mi nur volas ke la enigo etikedoj kiuj havas ie super ili

589
00:34:46,150 --> 00:34:49,030
iuj patro elemento de formo.

590
00:34:49,030 --> 00:34:52,100
Kaj tiel en tiu maniero ni povas fari tiujn pli hierarkia demandoj

591
00:34:52,100 --> 00:34:55,000
tial ni ne nur devas elekti ĉio matching donita selector.

592
00:34:55,000 --> 00:35:00,760
Ni povas ia limo la medio de tiu konsulto al io alia.

593
00:35:00,760 --> 00:35:04,000
Do nun ni scias kiel elekti elementojn en la paĝo,

594
00:35:04,000 --> 00:35:06,780
ni parolu iom pri AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX estas ankoraŭ tre laŭmoda acrónimo kiu staras por asíncronos JavaScript kaj XML.

596
00:35:12,270 --> 00:35:15,640
Simple tiel okazas ke XML estas nur iel reprezenti datumojn.

597
00:35:15,640 --> 00:35:20,920
>> Tia perdis popularecon lastatempe, do la X en AJAX ne uzas la tutan tempon.

598
00:35:20,920 --> 00:35:26,220
Esence, kio AJAX nin permesas fari estas fari HTTP petojn

599
00:35:26,220 --> 00:35:28,620
el la kunteksto de JavaScript.

600
00:35:28,620 --> 00:35:32,310
Kiam ni estas en nia TTT-legilo kaj ni navigi ĉirkaŭ paĝojn kaj ni klaku ligon,

601
00:35:32,310 --> 00:35:37,790
kion niaj retumilo tuj fari estas fari HTTP peto al kiom ligas nin premas.

602
00:35:37,790 --> 00:35:41,670
Sed tio ne estas ĉiam ideala ĉar se tio estas la kazo, tiam kiel David diris,

603
00:35:41,670 --> 00:35:45,220
ni ĉiam devas fari uzantoj alklaku submeto-butonon aŭ alklaki ligilon

604
00:35:45,220 --> 00:35:50,380
por fari ion okazi, ke tuj engaĝi an HTTP peto.

605
00:35:50,380 --> 00:35:54,160
Do kun AJAX ni povas fari tiujn petojn nome de JavaScript.

606
00:35:54,160 --> 00:35:57,020
Tio signifas ĉiam la uzanto interagas kun la paĝon aŭ io okazas,

607
00:35:57,020 --> 00:36:01,780
ni povas efektive fari programita peton al iuj aliaj PHP-dosiero en nia retpaĝaro

608
00:36:01,780 --> 00:36:06,280
aŭ io ajn alia kaj elsxuti la datumoj kiujn tiu dosiero kraĉas eksteren.

609
00:36:06,280 --> 00:36:09,860
Ni rigardu ekzemplon de AJAX.

610
00:36:09,860 --> 00:36:16,140
Ĉi tiu estas nia CS50 Financoj paĝo kun kiu espereble iuj el ni bone konas.

611
00:36:16,140 --> 00:36:21,790
Se ni rigardas la HTML de ĉi tiu paĝo, oni vidas tie mi aldonis kelkajn aferojn,

612
00:36:21,790 --> 00:36:23,820
unu el kiuj mi donis ĉi tiu formo ID.

613
00:36:23,820 --> 00:36:26,480
Mi diris id = "formo-citaĵo".

614
00:36:26,480 --> 00:36:31,910
Mi faris tion nur ĉar ĝi tuj fari tiun iom pli facile elekti el la DOM

615
00:36:31,910 --> 00:36:35,090
kiam mi povas nur fari tre simplan demando.

616
00:36:35,090 --> 00:36:38,960
Kion mi volas fari tie estas mi volas fiksi iun problemon kun CS50 Financoj.

617
00:36:38,960 --> 00:36:41,550
Do, se ni iros al finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
ĉiufoje mi volas akiri citaĵo, mi devas klaki ĉi GET Citaĵo butonon,

619
00:36:45,700 --> 00:36:48,960
kaj ke Get Citaĵo butonon tiam prenas min por alia tuta paĝo.

620
00:36:48,960 --> 00:36:52,400
Kaj se mi volas alia citaĵo, mi devas bati la Back butonon kaj tiam mi tajpu ĝin en,

621
00:36:52,400 --> 00:36:54,480
Mi ricevas citaĵo, kaj mi trafis Back butonon.

622
00:36:54,480 --> 00:36:56,840
Tiu vere estas ne la plej bona uzanto sperto.

623
00:36:56,840 --> 00:37:01,570
Kiu vere uzi la retejon se estas ke malrapidaj akiri stock prezoj?

624
00:37:01,570 --> 00:37:05,630
Do kion ni volas fari kun AJAX estas forigi tiun paŝon de iri al aparta paĝo

625
00:37:05,630 --> 00:37:08,410
por vidi la rezultojn.

626
00:37:08,410 --> 00:37:11,240
>> Kion ni vere nur petante estas kiu vere malgranda prezo,

627
00:37:11,240 --> 00:37:14,240
kaj tio estas nur vere malgranda kvanto de datumoj.

628
00:37:14,240 --> 00:37:17,400
Do ne necesas ke mi iru alia tuta HTML-paĝo,

629
00:37:17,400 --> 00:37:20,670
elŝuti tute nova parto de HTML, eble elŝuti iuj pli bildoj,

630
00:37:20,670 --> 00:37:24,410
iuj aliaj CSS-dosieroj nur por mi respondi al tiu tre simpla demando

631
00:37:24,410 --> 00:37:27,810
de kiom faras ĉi stock kosto.

632
00:37:27,810 --> 00:37:31,000
Kun AJAX ni povas fari ĉi multe pli facila.

633
00:37:31,000 --> 00:37:36,400
Ni vidas cxi tie ke mi kunigas en JavaScript dosiero nomata quote.js.

634
00:37:36,400 --> 00:37:40,140
Ni vere malfermi tiu dosiero. Ne ekzistas.

635
00:37:42,610 --> 00:37:45,860
Ĉiuj miaj JavaScript dosieroj tuj esti lokita en HTML

636
00:37:45,860 --> 00:37:47,630
tiel ke la retumilo povas aliri gxin.

637
00:37:47,630 --> 00:37:50,330
Tiam ni havas apartan dosierujon tie por JavaScript,

638
00:37:50,330 --> 00:37:54,340
kaj nun jen quote.js.

639
00:37:54,340 --> 00:38:00,930
Sur la supro de ĉi tiu dosiero ĉi diras ĉi tie, ke mi volas atendi la tutan paĝon esti ŝarĝitaj

640
00:38:00,930 --> 00:38:04,830
antaŭ ol mi provos fari ion. Kial estas ke necesas?

641
00:38:04,830 --> 00:38:08,650
Rezultas ke la sekva afero mi faros cxi tie estas komenco serĉas ero

642
00:38:08,650 --> 00:38:10,810
kiu kongruas iuj selector.

643
00:38:10,810 --> 00:38:15,600
Se ĉi tiu JavaScript estas iam ekzekutita antaŭ tiu elemento estas ŝarĝita en la paĝo,

644
00:38:15,600 --> 00:38:17,820
tiam ĉio mi provos fari ne tuj funkcias

645
00:38:17,820 --> 00:38:20,580
ĉar mi tuj provos elekti iun kiu ne estas tie ankoraŭ.

646
00:38:20,580 --> 00:38:23,780
Do ĉi tiu linio ĝis supro diras mi volas ke vi atendu gxis cxio estas ŝarĝita

647
00:38:23,780 --> 00:38:28,030
do ni garantias ke ajna elementoj Mi serĉas estas fakte en la paĝo.

648
00:38:29,730 --> 00:38:34,310
Ĉi dolaro signo tie signifas Mi uzas la biblioteko nomita jQuery.

649
00:38:34,310 --> 00:38:38,570
Ĉi jQuery biblioteko ni permesas uzi tiujn selectores ke ni nur rigardis.

650
00:38:38,570 --> 00:38:44,010
Dirante $ tiam pasante en kiel argumento ĉi # form-citaĵo,

651
00:38:44,010 --> 00:38:47,910
Mi nun elekti tiun formon, ke ni simple prenis rigardu.

652
00:38:47,910 --> 00:38:52,290
Nun mi havas reprezenton de tiu formo en memoro iel.

653
00:38:52,290 --> 00:38:56,760
>> En ĉi tiu objekto nun, ĉi tiu prezento de la formo,

654
00:38:56,760 --> 00:38:58,890
Mi nun uzas funkcio nomata plu.

655
00:38:58,890 --> 00:39:02,710
Kio ĉi tiu funkcio faras estas ĝi tuj alfiksi okazaĵo traktilo.

656
00:39:02,710 --> 00:39:06,310
La okazaĵo por ke ni tuj aŭskultos por estas la submeto-evento.

657
00:39:06,310 --> 00:39:08,890
Do kiam la uzanto klakoj kiuj Submetu butono aŭ premas Enter,

658
00:39:08,890 --> 00:39:11,730
ĉi tiu okazaĵo estas tuj fari fajron.

659
00:39:11,730 --> 00:39:16,390
Por hooking en tiun, mi povas nun nuligi la defaŭlta konduto de la formo.

660
00:39:16,390 --> 00:39:19,770
Sen tiu JavaScript, la formo estus submetiĝi al kiom PHP-dosiero

661
00:39:19,770 --> 00:39:22,110
ni uzis en tiu ago atributo.

662
00:39:22,110 --> 00:39:25,440
Sed anstataŭe, mi nun diras, atendu, atendu, atendu, mi ne volas ke vi efektive fari tion.

663
00:39:25,440 --> 00:39:31,140
Mi volas ke ĉi tio okazas al vi iru kaj provu sendi al iu PHP-dosiero.

664
00:39:31,140 --> 00:39:32,870
Nun kion mi volas fari?

665
00:39:32,870 --> 00:39:39,270
Je ĉi tiu punkto mi volas uzi AJAX iel ŝarĝi en kio la prezo de la sako estas.

666
00:39:39,270 --> 00:39:44,170
La unua afero Mi bezonas scii estas kio stock la uzanto serĉi.

667
00:39:44,170 --> 00:39:46,760
Por fari tion mi tuj uzos alian selector.

668
00:39:46,760 --> 00:39:49,020
Tio estas la tria selector ni rigardis antaŭe.

669
00:39:49,020 --> 00:39:54,460
Ĉi tio diras, ke mi volas dividi tiun formon elemento kun ID form-kurzo.

670
00:39:54,460 --> 00:39:58,440
Tiam ie ene de tiu formo ekzistas devas esti enigo elemento

671
00:39:58,440 --> 00:40:01,270
kiu havas nomo de simbolo.

672
00:40:01,270 --> 00:40:05,460
Se ni retrorigardas al nia HTML, ni vidis, ke ni havis enigo [nomo = simbolo].

673
00:40:05,460 --> 00:40:12,380
Tio signifas ke ĉi tiu tuj elekti tiun teksta kadro, ke la uzanto estas tajpi en.

674
00:40:12,380 --> 00:40:13,870
Tio estas agrabla. Ni havas la teksta kadro.

675
00:40:13,870 --> 00:40:17,360
Nun ni nur bezonas scii kio estas interne de ĝi.

676
00:40:17,360 --> 00:40:20,290
Por fari tion ni povas nomi ĉi metodo ĉi tie, ĉi. Val,

677
00:40:20,290 --> 00:40:23,240
kaj ĉi tio diras mi scias kion teksta kadro kiun vi havas.

678
00:40:23,240 --> 00:40:28,160
Mi volas ke vi diru al mi kio estas la uzanto tajpas en tiun teksta kadro.

679
00:40:28,160 --> 00:40:34,440
Nun ni havas ĉenon nomas simbolo kiu estas egala al kiom la uzanto tajpas in

680
00:40:34,440 --> 00:40:39,820
Tio estas agrabla. Ni povas uzi tiun ĉenon nun fari nian peton.

681
00:40:39,820 --> 00:40:42,450
Tio ĉi estas nova funkcio ĉi tie, ĉi $,

682
00:40:42,450 --> 00:40:44,900
krom ni ne plu tuj estos elektante elementojn,

683
00:40:44,900 --> 00:40:48,910
ni iras al nomante malsama funkcio ke tio havigis al ni per jQuery.

684
00:40:48,910 --> 00:40:54,810
Ĉi AJAX funkcio estas kio vere tuj faros ĉi HTTP peto.

685
00:40:54,810 --> 00:40:57,000
Do ni devas sciigi kelkajn aferojn.

686
00:40:57,000 --> 00:41:01,410
La unua afero ni devas diri al tiu funkcio estas kie mi deziras ke la peto iri.

687
00:41:01,410 --> 00:41:08,910
Ie en mia projekto mi havas ĉi tiun dosieron ene de la HTML dosierujon nomita quote.php.

688
00:41:08,910 --> 00:41:15,150
Mi povas aliri ĉi tiun dosieron, ni vidis, ĝuste kiel ĉi tiu, se mi iras al localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Mi volas mian JavaScript por fari peton al tiu paĝo.

690
00:41:20,450 --> 00:41:22,920
Kian peton nun?

691
00:41:22,920 --> 00:41:27,210
Ni vidis antaŭ ke la formo havas tiun metodon = "post" atributo,

692
00:41:27,210 --> 00:41:29,270
kaj tio signifas ke tuj fari POST peton,

693
00:41:29,270 --> 00:41:32,630
do ĝi estas ne tuj metis ion en la URL, prefere ol akiri peton,

694
00:41:32,630 --> 00:41:36,860
kiu estus nur esti pafitaj se ni nur Montrita la paĝo kun la retumilo, ekzemple.

695
00:41:36,860 --> 00:41:41,260
Nun ni diris, ke mi volas fari HTTP POST peto

696
00:41:41,260 --> 00:41:44,840
al paĝo jacas quote.php.

697
00:41:44,840 --> 00:41:51,490
Kiam ni prezentas la formon, memoru ni povis aliri la enigo elementoj ene de tiu formo

698
00:41:51,490 --> 00:41:54,430
kun tiu $ _POST variablo.

699
00:41:54,430 --> 00:41:58,710
Ĝis nun en la historio ni ne vere sendis kune ajna datumoj ankoraŭ.

700
00:41:58,710 --> 00:42:00,640
Ni ĵus diris ni fari AJAX peto

701
00:42:00,640 --> 00:42:03,200
kaj jen la tipo de peto ni fari.

702
00:42:03,200 --> 00:42:07,090
Nun ni bezonas vere sendi iujn datumojn por la paĝo.

703
00:42:07,090 --> 00:42:10,930
Por fari tion ni povas uzi ĉi tiu propraĵo nomata datumoj.

704
00:42:10,930 --> 00:42:14,950
La valoro de ĉi tiu propraĵo estas reale asocieca tabelo.

705
00:42:14,950 --> 00:42:19,390
La kialo estas tio ni permesas sendi pli ol nur 1 pecon de datumoj.

706
00:42:19,390 --> 00:42:24,750
Tial ni havas ĉi tiujn frizita krampoj tie anidado ene de tiuj aliaj frizita krampoj.

707
00:42:24,750 --> 00:42:29,680
La ŝlosiloj en tiuj asociaj tabeloj tuj estos la sama afero

708
00:42:29,680 --> 00:42:32,630
kiel tiuj nomo atribuas en nia formo elementoj.

709
00:42:32,630 --> 00:42:35,740
Tio signifas ke se mi sendas kune ŝlosilo de simbolo,

710
00:42:35,740 --> 00:42:41,870
kiu signifu mia PHP paĝo povas aliri tiun datumojn $ _POST [simbolo]

711
00:42:41,870 --> 00:42:44,640
samkiel ni faris antaux kiam ni submetas formo.

712
00:42:44,640 --> 00:42:47,090
Kaj nun la reala datumoj volas sendi

713
00:42:47,090 --> 00:42:50,790
tuj estos la valoron ene de ĉi asociaj tabelo.

714
00:42:50,790 --> 00:42:54,070
>> Ni stokas tiun tekston en variablo nomas simbolo,

715
00:42:54,070 --> 00:42:57,380
kaj tiel ni sendas kune nun ŝlosilon de simbolo

716
00:42:57,380 --> 00:43:01,380
kaj valoro de kiom la uzanto tajpas in

717
00:43:01,380 --> 00:43:06,270
Nun ni faris ĉi HTTP peto, nia PHP dosiero ekzekutitaj,

718
00:43:06,270 --> 00:43:11,480
kaj tuj sendi iuj datumoj reen do al la kliento, ke nur faris ĉi tiun peton.

719
00:43:11,480 --> 00:43:15,220
Nun ni bezonas por respondi al kiom la servilo diris al ni.

720
00:43:15,220 --> 00:43:20,180
Por fari tion ni havas ĉi lasta propraĵo tie nomata sukceso.

721
00:43:20,180 --> 00:43:24,240
La valoro de ĉi tiu sukceso ŝlosilo estas vere tuj esti funkcio,

722
00:43:24,240 --> 00:43:26,910
kaj ĉi tiu estas unu el la vere genia aĵoj vi povas fari kun JavaScript.

723
00:43:26,910 --> 00:43:31,720
Ne nur vi povas havi ints aŭ arrays kiel valoron ene de asocieca tabelo,

724
00:43:31,720 --> 00:43:34,170
ni povas ankaŭ havas funkcion.

725
00:43:34,170 --> 00:43:36,380
Do dirante sukceso, tiu estas mia ŝlosilo.

726
00:43:36,380 --> 00:43:38,830
Al dupunkto diras tie venas la valoro,

727
00:43:38,830 --> 00:43:41,810
kaj nun la valoron de ĉi tiu estas efektive funkcio.

728
00:43:41,810 --> 00:43:44,460
Do ni ne bezonas doni tiun funkcion nomon per si mem.

729
00:43:44,460 --> 00:43:48,820
Ni povas nur diri ĉi tiu tuj estos iu funkcio. Ĝi tuj prenu 1 argumento.

730
00:43:48,820 --> 00:43:51,190
La argumento por ĉi tiu funkcio tuj estos

731
00:43:51,190 --> 00:43:54,460
kion ajn la servilo sendis nin for de la peto.

732
00:43:54,460 --> 00:43:57,750
Ĝuste kiel kiam nia retumilo faras peton, la servilo sendas ion

733
00:43:57,750 --> 00:43:59,060
kaj la retumilo montras ĝin,

734
00:43:59,060 --> 00:44:03,030
en la kunteksto de AJAX ni ĵus faris peton, la servilo sendas ion,

735
00:44:03,030 --> 00:44:07,110
kaj nun ni kiu reprezentis kiel linio.

736
00:44:07,110 --> 00:44:11,280
Kun tiu ĉeno mi nur ŝatas montri, ke en la paĝo.

737
00:44:11,280 --> 00:44:14,040
Por fari tion mi tuj devos unu lasta selector.

738
00:44:14,040 --> 00:44:17,570
Mi volas elekti la elemento kun la ID prezo.

739
00:44:17,570 --> 00:44:20,710
Tiu estas nur malplena div ke mi kreis en la paĝo,

740
00:44:20,710 --> 00:44:26,640
kaj mi volas agordi la enhavon de tiu div esti kiaj ajn estu la servilo sendis nin reen.

741
00:44:26,640 --> 00:44:30,280
Mi fakte modifitaj quote.php iom.

742
00:44:30,280 --> 00:44:33,460
>> Anstataŭ nomante render kaj farante iun paĝon,

743
00:44:33,460 --> 00:44:38,100
quote.php nun estas simple tuj presi la valoro de la valoroj kiel linio.

744
00:44:38,100 --> 00:44:41,880
Do se vi estus al reale viziti la paĝon, vi simple vidas ke malgrandaj kordoj

745
00:44:41,880 --> 00:44:45,030
de kiom la stock prezo estas.

746
00:44:45,030 --> 00:44:50,170
Unu lasta afero kiun ni bezonas por fari ĉi tie estas nur certigi ĉi funkcio redonas falsaj.

747
00:44:50,170 --> 00:44:53,560
Kio ĉi diras, ke se mi interne de okazaĵo traktilo

748
00:44:53,560 --> 00:44:57,300
kaj ke eventa traktilo revenas falsa anstataŭ reveni vera,

749
00:44:57,300 --> 00:45:01,510
tio signifas, ke mi ne volas la originala okazaĵo por pafi.

750
00:45:01,510 --> 00:45:05,270
En ĉi tiu kazo, se ni ne havis neniun JavaScript kaj ni prezentis formo,

751
00:45:05,270 --> 00:45:08,280
nia retumilo tuj diri, "Mi tuj sendos tiu datumo kune,"

752
00:45:08,280 --> 00:45:10,130
kaj ili tuj sendos vin al alia paĝo.

753
00:45:10,130 --> 00:45:14,360
Ĉar ni uzas AJAX nun, ne necesas sendi al la uzanto al alia paĝo.

754
00:45:14,360 --> 00:45:17,920
Ni nur tuj montri la rezultojn dinamike sur ĉi tiu sama paĝo.

755
00:45:17,920 --> 00:45:21,460
Ni vere ne volas ilin iri ie ajn, kaj mi volas resti sur la sama paĝo.

756
00:45:21,460 --> 00:45:27,060
Do per reveni falsa, ni certigu ke la formo ne faras tion por ni.

757
00:45:27,060 --> 00:45:31,170
Ni rigardu, kio estas tiu fakte aspektas.

758
00:45:31,170 --> 00:45:34,180
Nia citaĵo paĝo aspektas same.

759
00:45:34,180 --> 00:45:37,240
Lasu min eltiri supren la inspektisto cxi tie do ni povas vidi kio okazas.

760
00:45:37,240 --> 00:45:40,270
Faru ĝin iom malpli granda.

761
00:45:40,270 --> 00:45:44,590
Memoru se ni malfermas la Reto langeto, ĉi tiu estas kie ni povas vidi ĉion de la HTTP-petoj

762
00:45:44,590 --> 00:45:47,570
kiuj okazas en la paĝo.

763
00:45:47,570 --> 00:45:52,890
>> Por simbolo lasu min entajpi aapl kaj klaku Get Quote.

764
00:45:52,890 --> 00:45:56,720
Nun ni vidis, ke parto de Apple kostas iom da dolarojn

765
00:45:56,720 --> 00:46:00,410
nur aperis en la paĝo, sed la URL ne ŝanĝis tute.

766
00:46:00,410 --> 00:46:04,570
Fakte, jen la HTTP peto ke ni ĵus faris.

767
00:46:04,570 --> 00:46:09,980
Ni faris POST peto al quote.php. Tio havas sencon.

768
00:46:09,980 --> 00:46:12,800
Ĉi tio estas kion la servilo sendis nin reen.

769
00:46:12,800 --> 00:46:16,320
Ĝi ne plu ĉi tiu giganta HTML dokumento kun bildoj kaj aĵoj kiel tiu,

770
00:46:16,320 --> 00:46:20,920
estas nur linio de teksto, kaj tiam ni nur montris la linio de teksto.

771
00:46:20,920 --> 00:46:26,290
Se ni reiru al la titolaj kaj vidi kion ni efektive sendis ene de ĉi HTTP peto,

772
00:46:26,290 --> 00:46:33,950
ni povas vidi ĉi tie ke ni sendis kune kun ŝlosilo de simbolo kaj valoron de aapl,

773
00:46:33,950 --> 00:46:36,430
kiu estas kiu la uzanto tajpas in

774
00:46:36,430 --> 00:46:39,230
Tio belas, sed ĝi estas ankoraŭ iom ĝena.

775
00:46:39,230 --> 00:46:42,490
Mi ankoraŭ devas klaki tiun butonon por atingi la stock citaĵo.

776
00:46:42,490 --> 00:46:45,880
Ni estas okupitaj homoj kaj ni ne havas tempon por klaku butonoj.

777
00:46:45,880 --> 00:46:49,910
Google realigita ĉi iom tempon kiam implementado de Google Instant.

778
00:46:49,910 --> 00:46:53,590
What Google Instant faras estas kiel vi tajpas ĝin ĝuste komencas montri rezultojn por vi

779
00:46:53,590 --> 00:46:56,520
tial vi ne devas maltrankviligi eĉ klakante Search.

780
00:46:56,520 --> 00:46:58,730
Vere, amuza rakonto rilate al tio.

781
00:46:58,730 --> 00:47:01,100
Iam Google Instant elvenis, personoj estis kiel, "Halt, ĉi tiu estas super amazing."

782
00:47:01,100 --> 00:47:02,540
"Ĉi tiu estas tiel malvarma."

783
00:47:02,540 --> 00:47:05,950
Kaj studento malsupren en Stanford kiu estis 19 en la momento

784
00:47:05,950 --> 00:47:09,000
faris ĉi tiun retejon nomata YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Ĉiuj YouTube Instant tio estas efektive serĉo YouTube momento.

786
00:47:13,170 --> 00:47:17,020
Do anstataŭ devi iri al YouTube.com kaj batis Search,

787
00:47:17,020 --> 00:47:21,650
kiam mi ektajpu en YouTube Instant iu kiel CS50,

788
00:47:21,650 --> 00:47:25,320
ni povis vidi ĉi tie ke ĝi estas provo sur malrapida interreta konekto

789
00:47:25,320 --> 00:47:28,500
popoli tiuj rezultoj vivi.

790
00:47:28,500 --> 00:47:35,590
Por fari tion ni povas efektive fari tre simplan modifo al nia quote.js dosiero.

791
00:47:35,590 --> 00:47:40,900
Nun ni alfiksanta tiu evento kiam la formo estas afiŝita.

792
00:47:40,900 --> 00:47:43,760
Ni ne vere volas fari la uzulo submetas tiun formon plu,

793
00:47:43,760 --> 00:47:48,570
do ni anstataŭ pafi tiun eventon ĉiufoje la uzanto premas klavon.

794
00:47:48,570 --> 00:47:53,200
Por fari tion estu la unua ŝanĝi la okazaĵo de submetiĝi al keyup.

795
00:47:53,200 --> 00:47:55,740
Tio signifas ke anstataŭ atendi la formon prezenti,

796
00:47:55,740 --> 00:47:58,490
ĉiufoje kiam la ŝlosilo estas premita, io tuj okazos.

797
00:47:58,490 --> 00:48:02,030
Ĝi jam ne havas sencon por ligi tiun keyup okazaĵo al la tuta formo.

798
00:48:02,030 --> 00:48:05,080
Ni vere nur zorgas pri tiu serĉo skatolo.

799
00:48:05,080 --> 00:48:09,320
>> Elekti ke nun, ni povas ŝanĝi ĉi tion al esti, anstataŭ formo-citaĵo,

800
00:48:09,320 --> 00:48:14,220
form-citaĵo kaj ni havas enigo (tajpi = teksto) aŭ ni povus diri (nomumita = simbolo) -

801
00:48:14,220 --> 00:48:16,420
kion ajn ni volas.

802
00:48:16,420 --> 00:48:18,650
Nun tie estas unu lastan aferon ni devas fari.

803
00:48:18,650 --> 00:48:21,190
Memoru cxi tie kiam ni diris reveno malvera

804
00:48:21,190 --> 00:48:24,370
ni diris ni ne volas ke defaŭlta okazaĵo por pafi.

805
00:48:24,370 --> 00:48:26,390
Sed ĝuste tial okazas, ke se ni malebligi, ke nun,

806
00:48:26,390 --> 00:48:29,660
kion ajn ni entajpi ne tuj aperas en la retumilo plu

807
00:48:29,660 --> 00:48:33,000
ĉar tio estus la defaŭlta konduto de tajpi en teksta kadro.

808
00:48:33,000 --> 00:48:38,660
Ni ne plu volas nuligi tion, do ni ekstermos cxi tiun revenon falsaj.

809
00:48:38,660 --> 00:48:44,800
Se ni savos ke kaj reŝarĝi la paĝon, nun kiam mi komencas tajpi aapl

810
00:48:44,800 --> 00:48:50,160
vi vidos, ke la prezo de la agoj ĉe la malsupro tie kompletigi aŭtomate.

811
00:48:50,160 --> 00:48:53,150
Do jen CS50 Financoj Instant.

812
00:48:53,150 --> 00:48:55,860
Fakte amuza rakonto pri la YouTube Instant

813
00:48:55,860 --> 00:48:59,420
estas ke studento nur ia skribis ĝin kiel 1-nokto projekto,

814
00:48:59,420 --> 00:49:03,800
kaj la sekvantan tagon li proponis laboron en la YouTube CEO.

815
00:49:03,800 --> 00:49:10,610
Do tiel simpla kiel tiu, vi CS50 studentoj, viaj lastaj projektoj povas akiri al vi laboron en YouTube.

816
00:49:10,610 --> 00:49:14,720
Io simila estas vere genia ideo por fina projekto, ĉu ne?

817
00:49:14,720 --> 00:49:18,170
Ni havis iun ekzistantan funcionalidad ke ni volis integri kun.

818
00:49:18,170 --> 00:49:20,330
Ni plibonigis la uzanto sperto iomete,

819
00:49:20,330 --> 00:49:24,340
kaj subite serĉas ion sur YouTube Instant estu multe pli facila

820
00:49:24,340 --> 00:49:27,290
ol serĉis ĝin sur regula YouTube.

821
00:49:27,290 --> 00:49:30,790
Do jen AJAX en vortoj.

822
00:49:30,790 --> 00:49:34,860
>> En la ekzemploj, ke Jozef estis montrante, ni vidis multajn autocompletes,

823
00:49:34,860 --> 00:49:39,250
kaj tiuj autocompletes estas vere, vere utila ĉar ni ne devas memori -

824
00:49:39,250 --> 00:49:41,770
Ekzemple, se vi ne memoras la stock prezo por Apple

825
00:49:41,770 --> 00:49:45,110
kaj ni nur scias ke estas aa io, anstataŭ nur diri al mi,

826
00:49:45,110 --> 00:49:48,740
"Al parto de tiu afero kostas ĉi multe da mono"

827
00:49:48,740 --> 00:49:52,540
Mi specon de ŝatus scii kion akcioj komencu per aa.

828
00:49:52,540 --> 00:49:58,340
Ni povas fari tion vere bele kun la Bootstrap biblioteko ke tio jam inkludis

829
00:49:58,340 --> 00:50:01,380
ene de CS50 Financoj.

830
00:50:01,380 --> 00:50:09,390
Se vi venis ĉi tien al la JavaScript etikedo kaj rulu suben ĝis Typeahead,

831
00:50:09,390 --> 00:50:13,730
ĉi tiu estas nur bela plugin ke iu jam skribis por ni,

832
00:50:13,730 --> 00:50:16,980
kaj ni povas facile uzi lian funcionalidad ŝatas tion.

833
00:50:16,980 --> 00:50:21,410
Mi tajpis en A kaj tie estas listo de iuj ŝtatoj kiuj komencas kun A.

834
00:50:21,410 --> 00:50:25,360
Diru, ke mi kredas ke tiu estas vere malvarmeta kaj estas momento por mi inkluzivi ĉi sur mia paĝo.

835
00:50:25,360 --> 00:50:28,300
Ĝi rezultas ke ĉi tio estas vere, vere simpla.

836
00:50:28,300 --> 00:50:32,810
Ni salti super cxi tien por quote3.js.

837
00:50:34,890 --> 00:50:37,380
Mia dosiero aspektas iom malsama.

838
00:50:37,380 --> 00:50:39,700
Cxi tie cxiuj miaj AJAX stuff estas la sama.

839
00:50:39,700 --> 00:50:43,170
Mi volas ŝarĝi la stock datumoj sen devi iri al alia paĝo.

840
00:50:43,170 --> 00:50:46,220
Sed nun mi volas uzi tiun kromaĵon.

841
00:50:46,220 --> 00:50:51,020
La Bootstrap dokumentado havas grandan ekzemploj de kiel ĝuste mi povas fari tion.

842
00:50:51,020 --> 00:50:54,350
Mi volas diri, "Jen la eniro, ke mi volas autocomplete sur,"

843
00:50:54,350 --> 00:50:56,640
kaj mi tuj nomas tiun funkcion nomita typeahead,

844
00:50:56,640 --> 00:50:59,730
kaj ke tuj manipuli ĉiujn Typeahead ajxojn ni.

845
00:50:59,730 --> 00:51:02,090
Ĝi pravalorizi la listo, ĝi faros ĉiuj niaj filtrita.

846
00:51:02,090 --> 00:51:06,680
La sola afero, kiun ĝi bezonas scii estas kion datumoj ni autocompleting plu.

847
00:51:06,680 --> 00:51:10,480
Do mi trovis ĉi tiun ŝlosilon nur legante la dokumentado kaj rigardante la ekzemploj.

848
00:51:10,480 --> 00:51:14,150
Se mi donas ĝin ŝlosilo de fonto, la valoro de ĉi ŝlosilon

849
00:51:14,150 --> 00:51:17,770
estas nur kelkaj tabelo de aferoj mi volas autocomplete plu.

850
00:51:17,770 --> 00:51:20,180
Tiu variablo venis de tiu alia dosiero.

851
00:51:20,180 --> 00:51:23,400
Mi malfermu symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Ĉi symbols.js estas ĝuste ĉi tiu vere, vere granda tabelo enhavas kordoj

853
00:51:27,980 --> 00:51:32,080
de ĉiuj tiuj valoroj simboloj de la NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Se mi volas salti reen al la HTML, do jharvard, vhosts, globalhost, html, ŝablonojn,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Ekde tiu nun nomata quote3.js, lasu min ŝanĝi la JavaScript-dosiero mi inkludante tie.

857
00:51:50,910 --> 00:51:55,110
Nun mi havas quote3.js, do mi tuj montru en kiuj disigas JavaScript-dosiero,

858
00:51:55,110 --> 00:51:57,910
kiu havas tiun Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Nun kiam mi saltas reen al la retumilo, reŝarĝi la paĝon, kaj mi ektajpu aa,

860
00:52:04,430 --> 00:52:06,880
tie estas mia autocomplete. Kaj estis vere tiel simpla kiel tiu.

861
00:52:06,880 --> 00:52:11,400
Mi havis 1 linio de kodo ke nur diris, "Jen la aferoj kiujn mi volas autocomplete sur,"

862
00:52:11,400 --> 00:52:16,590
kaj subite mi havas vere, vere agrabla funcionalidad kun ne tuta multe da penoj por nenio.

863
00:52:16,590 --> 00:52:19,810
Kiel vi evoluantaj retejojn kaj aparte la antaŭa fino flanko de aferoj,

864
00:52:19,810 --> 00:52:21,840
vi tuj trovos ĉi tiu estas la kazo multe.

865
00:52:21,840 --> 00:52:25,700
Estas multaj, multe, multe da vere freŝaj libera bibliotekoj tie

866
00:52:25,700 --> 00:52:30,190
kiuj faras ĝin super facile fari aferojn kiel ĉi tio.

867
00:52:30,190 --> 00:52:37,230
Ĉu iu povas imagi ian malavantaĝoj de simple autocompleting sur tiu granda listo de simboloj?

868
00:52:37,230 --> 00:52:41,580
Kio povus esti iu kiu ne estas la plej bona kun ĉi alproksimiĝo?

869
00:52:42,790 --> 00:52:45,960
Yeah. >> [Studento] Tempo, se vi havas multe da [inaudible]

870
00:52:45,960 --> 00:52:50,420
Yeah. Nun ni elŝuti ĉi grandega JavaScript dosiero kaj estas multe da simboloj.

871
00:52:50,420 --> 00:52:54,360
Kaj do se ni havas ton de aĵoj, ĉi povus ia pliigi la latencia de ne nur serĉado

872
00:52:54,360 --> 00:52:56,600
sed ankaŭ elŝuti la reala dosiero.

873
00:52:56,600 --> 00:52:58,670
Granda. Io alia?

874
00:53:01,950 --> 00:53:05,280
Nun ne estas reala senco de graveco.

875
00:53:05,280 --> 00:53:08,190
Se mi tajpas en A, la entreprenoj kiuj montras ĉi tien

876
00:53:08,190 --> 00:53:11,220
eble ne la plej populara kompanioj kiuj komencas kun A.

877
00:53:11,220 --> 00:53:17,130
>> Antaŭ mi alvenas al Apple, ĝi povus porti iun pli karakteroj por trovi kion mi serĉas.

878
00:53:17,130 --> 00:53:20,420
Ĉi autocomplete ne havas tiun senton de graveco.

879
00:53:20,420 --> 00:53:24,400
Ĝi estas nur intencis diri, "Anything kiu kongruas mi iros por montri."

880
00:53:24,400 --> 00:53:30,510
Anstataŭ tio, mi ŝatus iel integri iu graveco en mian serĉoj.

881
00:53:30,510 --> 00:53:36,440
Se mi transiru cxi tien por Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Se mi klopodas eniri simbolo sur Yahoo! Finance la paĝon

883
00:53:42,100 --> 00:53:52,310
kaj mi ektajpu goog, mi havas ĉi bela listo de aĵoj.

884
00:53:52,310 --> 00:53:57,100
Klare, ĝi aspektas kiel Yahoo! Finance faras ion pli ruza tie.

885
00:53:57,100 --> 00:53:59,790
Ili havas iujn graveco kaj ili ankaŭ havas pliajn informojn

886
00:53:59,790 --> 00:54:01,430
kiel la nomo de la stoko.

887
00:54:01,430 --> 00:54:05,850
Tio estas io, kiun mi ne povas vere akiri per nur miajn akciojn listo de simboloj.

888
00:54:05,850 --> 00:54:09,520
Mi volas ĉi tion kaj do mi tuj preni ĝin.

889
00:54:09,520 --> 00:54:11,790
Por fari tion ni faru kelkajn aferojn.

890
00:54:11,790 --> 00:54:15,580
Ni unue malfermi la inspektisto pri tiu pagxo

891
00:54:15,580 --> 00:54:18,100
ĉar ni vidis, ke tiu ĉi paĝo ne estas reloading tute ne,

892
00:54:18,100 --> 00:54:21,960
do ĝi estas probable uzas AJAX iel esti ŝarĝo lia datumoj.

893
00:54:21,960 --> 00:54:23,920
Ni povas eltrovi datumoj ĝi estas ŝarĝo.

894
00:54:23,920 --> 00:54:28,390
Se mi alklaku ĉi Reto langeto, tiuj tuj estos ĉiujn petojn ke komenci esti pafitaj.

895
00:54:28,390 --> 00:54:34,020
Nun, se mi tajpas en goo, ni povas vidi ke mi ĵus nova HTTP peto.

896
00:54:34,020 --> 00:54:37,490
Tio estas verŝajne kie tiu datumo estas devenante.

897
00:54:37,490 --> 00:54:41,990
Efektive, se mi rigardas tiun URL, kiu estas iom strange nomata,

898
00:54:41,990 --> 00:54:46,930
ni povas vidi ke ĉi tio estas ĝuste kie Yahoo estas sendi for lia datumoj de.

899
00:54:46,930 --> 00:54:53,400
>> Mi kreis aparta dosiero nomata suggest.php tio estas tre simila en spirito al la lookup funkcio.

900
00:54:53,400 --> 00:54:57,730
Ĝi estas esence tuj faros konsulto al Yahoo La URL, reiri iuj datumoj,

901
00:54:57,730 --> 00:54:59,750
kaj sendu gxin al mi.

902
00:54:59,750 --> 00:55:02,570
Nun, anstataŭ uzi ĉi granda, grandega listo de simboloj,

903
00:55:02,570 --> 00:55:05,280
Mi povas uzi Yahoo La belan graveco aferojn,

904
00:55:05,280 --> 00:55:08,150
kaj mi ne havas por elŝuti ke amasa JavaScript dosiero.

905
00:55:08,150 --> 00:55:12,040
Mi nur tuj disbatos la reale rilatajn stock simboloj.

906
00:55:12,040 --> 00:55:13,960
Ni salti en tio.

907
00:55:13,960 --> 00:55:17,360
Do html, js. Ni estas nun en quote4.

908
00:55:17,360 --> 00:55:22,120
Nun ni ne plu uzi tiun grandan liston de JavaScript dosierojn.

909
00:55:22,120 --> 00:55:24,430
Sed estas malgranda speco de dezajno problemon ĉi tie.

910
00:55:24,430 --> 00:55:28,200
Ni diris, ke la A en AJAX estas asíncronos.

911
00:55:28,200 --> 00:55:31,000
Kion tio signifas ke kiam mi fari AJAX peton,

912
00:55:31,000 --> 00:55:36,490
tiel ĝuste sur la linio 8, ĉi tiu estas kie mia AJAX peto estas vere pafis.

913
00:55:36,490 --> 00:55:40,370
Diru nun mi havas iom da kodo cxi tie ke okazas fari iujn aĵojn

914
00:55:40,370 --> 00:55:43,930
kiel alarmi la uzanton aŭ ŝanĝo ion sur la paĝo.

915
00:55:43,930 --> 00:55:49,830
Kio ne tuj okazos estas la retumilo ne tuj atendi tiun peton por daŭrigi

916
00:55:49,830 --> 00:55:53,480
antaŭ veni malsupren kaj bati tiun linion.

917
00:55:53,480 --> 00:55:55,900
Tio estas la asíncronos parto.

918
00:55:55,900 --> 00:55:58,400
Ĝi tuj fari tiun peton, kaj diros: "Kiam ajn vi finas,

919
00:55:58,400 --> 00:56:03,080
"Reveni kaj nomas tiun funkcion, kiun mi diris al vi nomi ene de sukceso."

920
00:56:03,080 --> 00:56:07,300
Tio signifas ke ni ne povas simple elŝuti ĉiujn akcioj antaŭe.

921
00:56:07,300 --> 00:56:10,300
Ni bezonas fari la peton kaj atendu ion por reveni.

922
00:56:10,300 --> 00:56:13,330
Tio signifas ke antaŭe, ni povus simple diri Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Jen la listo de aferoj kiujn mi volas ke vi autocomplete plu."

924
00:56:15,580 --> 00:56:18,950
Ni ne plu povas fari tion plu, ĉar ni ne scias

925
00:56:18,950 --> 00:56:21,780
kion ni volas vere autocomplete plu.

926
00:56:21,780 --> 00:56:25,190
Feliĉe, Bootstrap pripensis ĉi tion ĉar tiuj estas inteligentaj infanoj tie,

927
00:56:25,190 --> 00:56:30,160
kaj ili efektive donis al ni alian vojon por ŝarĝi ĉi Typeahead kromaĵon.

928
00:56:30,160 --> 00:56:35,630
Antaŭe, la valoro de ĉi tiu fonto proprieto estis nur tiun grandan varion de aĵoj al autocomplete plu.

929
00:56:35,630 --> 00:56:39,580
>> Nun la fonto propraĵo estas fakte funkcio,

930
00:56:39,580 --> 00:56:44,580
kaj la celo de ĉi tiu funkcio estas elkompreni kiel la aĵoj al autocomplete sur estas.

931
00:56:44,580 --> 00:56:48,730
La maniero ĝi tuj diveni kiun el estas tuj demandi Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
kion la bona aferojn autocomplete estas.

933
00:56:51,750 --> 00:56:54,500
Por fari tion mi tuj faros tre simila AJAX peton.

934
00:56:54,500 --> 00:56:59,010
Mi tuj petos ĉi paĝo ĉe suggest.php.

935
00:56:59,010 --> 00:57:01,360
Mi volas sendi kune la simboloj ankoraŭ.

936
00:57:01,360 --> 00:57:05,570
Kaj nun mia sukceso, la Bootstrap dokumentado diris al mi,

937
00:57:05,570 --> 00:57:09,130
ke por popoli ke listo de aferoj,

938
00:57:09,130 --> 00:57:14,370
ĉiuj mi bezonas fari estas pasi en ĉi tabelo nun al la callback funkcio.

939
00:57:14,370 --> 00:57:15,660
Sed atendu momenton.

940
00:57:15,660 --> 00:57:20,240
Se ĉi tiu estas supozita al esti aro kaj AJAX estas sendi al mi tekston,

941
00:57:20,240 --> 00:57:22,720
kiel estas ke eblas?

942
00:57:22,720 --> 00:57:27,910
Ĉi enkondukas novan manieron de interŝanĝi datumoj nomis JSON.

943
00:57:27,910 --> 00:57:33,000
En ĉi tiu kazo ni ne nur sendi reen simpla ĉeno de teksto.

944
00:57:33,000 --> 00:57:37,670
Nun ni pritraktas tiun pli kompleksa listo de stock simboloj.

945
00:57:37,670 --> 00:57:41,730
Tiuj valoroj simboloj povas ankaŭ inkluzivi aĵoj kiel la kompanio nomon aŭ la nuna prezoj.

946
00:57:41,730 --> 00:57:47,550
Nur uzante grandan longa ĉeno kiu ne estas formatita en ajna antaŭvidebla maniero

947
00:57:47,550 --> 00:57:51,970
ne tuj estos la plej bona maniero akiri tiun datumojn de Yahoo La servilo al mi

948
00:57:51,970 --> 00:57:54,540
en maniero, kiun mi povas facile kompreni.

949
00:57:54,540 --> 00:58:01,280
JSON estas teknologio kiu utiligas kiel ni kreas asociaj tabeloj en JavaScript.

950
00:58:01,280 --> 00:58:04,510
Ĉi aspektas multe kiel JavaScript asocieca tabelo,

951
00:58:04,510 --> 00:58:06,600
kaj fakte, ĝi estas ĉar ĝi estas.

952
00:58:06,600 --> 00:58:09,710
JSON staras por aktivigi Objekto Skribmaniero.

953
00:58:09,710 --> 00:58:15,020
Tio estas esence akordigita formato por trapasi datumoj tien kaj reen.

954
00:58:15,020 --> 00:58:18,280
Jen ĉi JSON objekto aŭ ĉi JSON asocieca tabelo

955
00:58:18,280 --> 00:58:21,010
estas sendi al mi iuj datumoj pri kurso.

956
00:58:21,010 --> 00:58:25,110
>> La ŝlosiloj de tiu tabelo estas aĵoj kiel kurson kiu havas valoro de cs50,

957
00:58:25,110 --> 00:58:29,140
kaj cxi tie ni povas vidi ke mi povas havi valoron kiu estas tabelo.

958
00:58:29,140 --> 00:58:32,730
Mi ne devas fari tion kiel parse el ŝnuroj kaj serĉi komoj

959
00:58:32,730 --> 00:58:35,330
kaj faru freneza aferojn tiel.

960
00:58:35,330 --> 00:58:38,820
Ĉar ĉi estas deklarita en ĉi JSON formato,

961
00:58:38,820 --> 00:58:43,510
JavaScript kaj jQuery jam havas funkciojn por konverti ĉeno

962
00:58:43,510 --> 00:58:48,140
kiu similas tiun JSON en reala JavaScript asocieca tabelo

963
00:58:48,140 --> 00:58:50,440
ke ni povas laboro kun.

964
00:58:50,440 --> 00:58:56,660
Farante tio estas tiel simpla kiel diri ke jam ne estas ĉi tiu dosiero, suggest.php,

965
00:58:56,660 --> 00:58:59,040
sendi al mi nur ĉeno de teksto,

966
00:58:59,040 --> 00:59:01,950
sed mi scias ĝin tuj estos sendi min JSON.

967
00:59:01,950 --> 00:59:06,760
Tio signifas, ke tiu JSON povas esti konvertita enen JavaScript asocieca tabelo.

968
00:59:06,760 --> 00:59:10,830
Kaj tiel jQuery, mi volus, ke vi faru tion por mi.

969
00:59:10,830 --> 00:59:13,990
Tio signifas ke ĉi tiu respondo parametro ĉi tie,

970
00:59:13,990 --> 00:59:16,070
ĉi tio jam ne estas nur ĉeno.

971
00:59:16,070 --> 00:59:19,860
Ĉar ni rakontis jQuery ke tie venas iu JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery tuj estos sufiĉe inteligenta por diri, "Vi volis JSON?"

973
00:59:22,950 --> 00:59:26,890
"Mi tuj konverti ke en asocieca tabelo por vi."

974
00:59:26,890 --> 00:59:32,100
Ni efektive rigardu la Reto langeto iam ni havos quote4.js.

975
00:59:32,100 --> 00:59:35,400
Ni ŝanĝi tion kaj reŝarĝi la paĝon.

976
00:59:37,150 --> 00:59:41,250
Nun mi iros por tajpi en-a fojo.

977
00:59:41,250 --> 00:59:45,600
Mi faris kelkajn petojn por suggest.php, sed nun tiu respondo,

978
00:59:45,600 --> 00:59:48,670
anstataŭ nur la kordoj, estas JSON.

979
00:59:48,670 --> 00:59:52,580
Do mi havas malfermitan frizita streĉa diris: "Jen venas asocieca tabelo."

980
00:59:52,580 --> 00:59:56,830
>> La unua kaj sola ŝlosilo de ĉi asociaj tabelo nomas simboloj,

981
00:59:56,830 --> 01:00:00,240
kaj tiam ĉi tie estas tabelo de ĉiuj gravaj simboloj

982
01:00:00,240 --> 01:00:04,820
venas nun de Yahoo! Finance, ne de tiu giganta listo.

983
01:00:06,110 --> 01:00:10,630
Tiel estas kiel mi povas simple popoli ĉi autocomplete kromaĵon

984
01:00:10,630 --> 01:00:14,280
kun iuj datumoj ke tio ne venas de loka dosiero ke tio jam antaŭdeterminita

985
01:00:14,280 --> 01:00:17,490
sed de io alia.

986
01:00:17,490 --> 01:00:21,160
Rezultas, ke ni povas efektive utiligi teknologio nomita JSONP,

987
01:00:21,160 --> 01:00:27,420
aŭ JSON kun Plenigado, ke forigos ĉi suggest.php middleman.

988
01:00:27,420 --> 01:00:34,010
Sed anstataŭ fari tion, ni anstataŭ rigardu kiel mi povas plibonigi ĉi eĉ pli.

989
01:00:34,010 --> 01:00:36,040
Mi vere ŝatas Bootstrap la Typeahead. Estas vere bela.

990
01:00:36,040 --> 01:00:39,570
Sed estas duumaj bona JavaScript kaj ni volas specon de fari tion mem,

991
01:00:39,570 --> 01:00:43,870
eble rigardu kion ĉi kromaĵo povus fari.

992
01:00:43,870 --> 01:00:46,500
Ni ne plu uzas tiun Typeahead aferon,

993
01:00:46,500 --> 01:00:50,550
kaj ni provu fari ĉi listo de sugestitaj akcioj ni mem.

994
01:00:50,550 --> 01:00:53,790
Tie en quote6.php nin tuj dividi la sama maniero.

995
01:00:53,790 --> 01:00:58,050
Ĉiufoje iu tipoj ion, ni volas fari AJAX peton.

996
01:00:58,050 --> 01:01:01,590
Ĉi tio estas simila al nia originala CS50 Financoj Instant.

997
01:01:01,590 --> 01:01:05,020
Anstataŭ fari peton al quote.php,

998
01:01:05,020 --> 01:01:08,530
ni nun fari peton al tiu sama dosiero kiel antaŭe, ĉi suggest.php,

999
01:01:08,530 --> 01:01:12,460
kio estas ĝuste tuj tiri datumoj de Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Denove, ni ankoraŭ atendas JSON, sed nun kiam la Typeahead ne faras tion por ni,

1001
01:01:19,480 --> 01:01:24,850
ni ankaŭ bezonas sendi kune la valoro kiu estas ene de la nuna teksto skatolo.

1002
01:01:24,850 --> 01:01:28,120
Nun ni scias kion peti Yahoo! Finance por,

1003
01:01:28,120 --> 01:01:34,160
kaj nun jen la funkcio kiun ni volas ekzekuti tuj la peton kompleta.

1004
01:01:34,160 --> 01:01:36,520
Ni ne havas la kromprogramon por fari la liston por ni,

1005
01:01:36,520 --> 01:01:40,630
do tie estas kie ni fakte tuj konstrui liston de sugestoj.

1006
01:01:40,630 --> 01:01:44,850
Por fari tion, tre ŝatus en PHP ni concatenados tiuj grandaj ĉenoj de HTML

1007
01:01:44,850 --> 01:01:48,170
tiam ni presas ilin, ni povas fari same ĝusta aĵo en JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Unue ni tuj dividi ĉi ŝnuro nomita sugestojn,

1009
01:01:51,850 --> 01:01:54,590
kaj ĉi linio estas ĝuste tuj enhavi iujn HTML.

1010
01:01:54,590 --> 01:01:58,320
Ni volas esti listo de aferoj, do ni tuj dividi kun tiu listo etikedo,

1011
01:01:58,320 --> 01:02:03,340
kaj nun ni iras ankaŭ persisti super ĉiuj el la simboloj kiuj revenis reen al ni.

1012
01:02:03,340 --> 01:02:06,500
Memoru, ĉar ni diris Datumtipo: JSON ', ĉi tio ne estas cxeno.

1013
01:02:06,500 --> 01:02:09,500
Tiu estas jam tabelo por ni. Tio estas vere genia.

1014
01:02:09,500 --> 01:02:13,790
Ni povas simple diri, "Mi volas ke vi aldonas liston elemento."

1015
01:02:13,790 --> 01:02:16,000
Ni metos ĝin interne oni al ero en flanko de tiu,

1016
01:02:16,000 --> 01:02:19,030
ni donos ĝin al klaso de sugestoj tiamaniere ni scias kio ĝi estas,

1017
01:02:19,030 --> 01:02:23,880
kaj nun jen estas la simbolo por ke ni revenis de Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Iam ni kreis ero por ĉiu el la simboloj ni alvenas reen,

1019
01:02:27,230 --> 01:02:30,100
ni nur volas fermi la listo.

1020
01:02:30,100 --> 01:02:33,040
Do nun sugestojn reprezentas tiu malgranda HTML fragmento

1021
01:02:33,040 --> 01:02:37,860
ke kiam metis sur paĝo tuj estos la listo de aferoj kiujn ni serĉas.

1022
01:02:37,860 --> 01:02:41,070
Nun ni efektive metis tiun sur la paĝo.

1023
01:02:41,070 --> 01:02:46,390
Por fari tion mi efektive kreis alian malplenan div kaj mi donis gxin al ID de sugestoj.

1024
01:02:46,390 --> 01:02:52,520
Same kiel ni starigis la enhavo de la div kiu montras la prezon de la stock datumoj,

1025
01:02:52,520 --> 01:02:58,600
ni nun volas nur metis la enhavon de ĉi div al kiom ĉi tiu linio estas

1026
01:02:58,600 --> 01:03:00,290
kiu enhavas tiujn simbolojn.

1027
01:03:00,290 --> 01:03:07,650
Per uzo de ĉi HTML metodon, ĉi sugestojn variablo, ĉi ŝnuro, estas ĉeno de HTML.

1028
01:03:07,650 --> 01:03:13,490
Mi volas ke vi prenas tiun HTML kaj metis ĝin interne de la div nomis sugestoj.

1029
01:03:13,490 --> 01:03:15,680
Ni ĵus aldonita ion por la DOM nun.

1030
01:03:15,680 --> 01:03:20,360
Ni aldonis kelkajn novajn elementojn al la DOM ke ni povas nun montri en la paĝo.

1031
01:03:20,360 --> 01:03:22,540
Ni vidu kion ĉi aspektas.

1032
01:03:22,540 --> 01:03:29,110
Se ni ŝarĝas en quote6 kaj nun ni revenos,

1033
01:03:29,110 --> 01:03:34,480
nun kiam mi ektajpu aapl, ni ne plu havas tiun Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
sed ni nun havas tiun liston por ke ni faris nin mem.

1035
01:03:38,470 --> 01:03:43,230
Tio estas iomete pli malbelaj ol la Bootstrap Typeahead, ekzemple,

1036
01:03:43,230 --> 01:03:45,580
sed ĝi permesas al ni fari unu alia afero.

1037
01:03:45,580 --> 01:03:48,660
Kiam ni serĉis en tiu Bootstrap kromaĵon,

1038
01:03:48,660 --> 01:03:52,590
ni vidis, ke kiam ni autocompleted, unu el la autocomplete valoroj estis aapl.

1039
01:03:52,590 --> 01:03:54,820
Tio eble ne estus tiel helpema.

1040
01:03:54,820 --> 01:03:59,100
Kiel uzanto, mi eble ne tuj rekonas ĉiujn stock simboloj.

1041
01:03:59,100 --> 01:04:02,370
Kion mi estas probable pli verŝajna por rekoni estas la kompanio reala nomoj.

1042
01:04:02,370 --> 01:04:05,310
Do ĉu ne estus vere utila se anstataŭ diri aapl

1043
01:04:05,310 --> 01:04:07,970
ĉi diris ion kiel Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Ĉar ni ruliĝis ĉi ni mem, ni povas vere facile fari tion.

1045
01:04:12,240 --> 01:04:17,630
Ni malfermu niajn lastajn citaĵo dosieron ĉi tie, do quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Sama afero. Mi ĵus kreis alian PHP-dosiero kiu revenos al ni pli ol nur la simboloj.

1047
01:04:23,200 --> 01:04:25,550
Ĝi ankaŭ donas al ni redonis la kompanio nomoj.

1048
01:04:25,550 --> 01:04:28,150
Kaj tial ni faras la samon. Ni farante AJAX peton.

1049
01:04:28,150 --> 01:04:32,370
Iam la peto kompletigis, ni tuj ekzekuti tiu funkcio ĉi tie,

1050
01:04:32,370 --> 01:04:36,520
kaj ĉi tiu funkcio tuj konstruos grandan ĉenon de elementoj.

1051
01:04:36,520 --> 01:04:39,520
Sed la diferenco estas, ke la valoro de tiuj listoj ne plu estas nur la simbolo,

1052
01:04:39,520 --> 01:04:45,370
ĝi estas nun la nomo.

1053
01:04:45,370 --> 01:04:47,070
Do ni havas unu malgrandan problemon.

1054
01:04:47,070 --> 01:04:51,590
Kiam ni uzas nian lookup, ni bezonas iel pasi ĝin la simbolon.

1055
01:04:51,590 --> 01:04:54,950
Ni ne povas pasi lookup ion kiel Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Ni devas pasi ĝin MSFT.

1057
01:04:57,900 --> 01:05:01,640
Kiam ni skribas HTML, ni havas multe da belaj korpigita atributoj.

1058
01:05:01,640 --> 01:05:05,440
An A eble asociita al ĝi href aŭ klaso.

1059
01:05:05,440 --> 01:05:08,230
Sed kion ni vere bezonas nun estas por ĉiu el tiuj ligiloj

1060
01:05:08,230 --> 01:05:11,120
havi stock simbolo asociita kun ĝi.

1061
01:05:11,120 --> 01:05:14,240
Ne enkonstruita en HTML atributo por stock simbolo,

1062
01:05:14,240 --> 01:05:21,010
sed bonŝance HTML5 nin permesas krei nian propran atributoj esti kion ajn ni volas.

1063
01:05:21,010 --> 01:05:24,620
Dirante datumoj-simbolo, kiun mi enkondukis novan atributon

1064
01:05:24,620 --> 01:05:29,350
kies nomon mi ĵus faris, kaj ĉi tiu estas bone ĉar mi prefaced ĝin kun la sama enhavo.

1065
01:05:29,350 --> 01:05:34,270
Ni tuj stoki ene de tie la simbolo de la borsa nun.

1066
01:05:34,270 --> 01:05:39,590
Kion tio signifas estas ke kvankam ni montri la valoron de la kompanio nomo

1067
01:05:39,590 --> 01:05:43,380
ene de nia autocomplete, ni ankoraŭ rememorante la simbolo

1068
01:05:43,380 --> 01:05:47,110
kiu asocias kun ĉiu entrepreno.

1069
01:05:47,110 --> 01:05:50,350
La maniero ni faras ĉi tio estas ene de ĉi elemento mem.

1070
01:05:50,350 --> 01:05:52,930
Do tio signifas ke ni bezonas por fari pli ŝanĝon.

1071
01:05:52,930 --> 01:05:57,090
Kiam ni alklaku ĝin nun, ni bezonas vere utiligi la simbolo atributo

1072
01:05:57,090 --> 01:06:00,220
anstataŭ nur ĝia valoro.

1073
01:06:00,220 --> 01:06:05,010
Se ni back up, ni alfiksi okazaĵo traktilo por sugestoj.

1074
01:06:05,010 --> 01:06:09,280
Kiam unu el tiuj sugestoj estas clicked nun, mi volas fari ion.

1075
01:06:09,280 --> 01:06:13,160
Kion mi volas fari estas ŝanĝi la valoron de tiu enigo skatolo.

1076
01:06:13,160 --> 01:06:16,100
Nun mi volas meti tiun saman val funkcio.

1077
01:06:16,100 --> 01:06:21,060
>> Do sen argumentoj ĉi val funkcio redonas al vi kio estas jam en la teksta kadro,

1078
01:06:21,060 --> 01:06:27,070
sed se vi donas ĝin ĉenon, ĝi tuj preni tiun ĉenon kaj metis ĝin en la teksta kadro.

1079
01:06:27,070 --> 01:06:28,980
Mi elektu lia teksto skatolo en la sama maniero.

1080
01:06:28,980 --> 01:06:31,230
Ĝi estas nomo estas simbolo ene de form-kurzo.

1081
01:06:31,230 --> 01:06:37,540
Nun mi sendas al ĝi la valoro de la atributo datumoj-simbolo.

1082
01:06:37,540 --> 01:06:41,560
Tion ĉi tie estas nova, ĉi $ (ĉi tiu).

1083
01:06:41,560 --> 01:06:46,850
Kio ĉi referencas al estas la elemento kiu klakis.

1084
01:06:46,850 --> 01:06:50,880
Ni povas vidi ĉi tie ke ni ne alfiksanta clic okazaĵo

1085
01:06:50,880 --> 01:06:54,690
al ĉiu elemento kun klaso de sugesto individue.

1086
01:06:54,690 --> 01:06:57,140
Pli ĝuste, ni proksimigas ĉi iom malsame.

1087
01:06:57,140 --> 01:07:01,700
Anstataŭe ni dirante kiam ajn io ene de ĉi sugestojn div,

1088
01:07:01,700 --> 01:07:04,080
kiu memoras estas nur la ujo por tiu listo,

1089
01:07:04,080 --> 01:07:10,150
se io ene de ĉi div estas klakis kaj ĝi havas klason de sugesto,

1090
01:07:10,150 --> 01:07:13,000
Mi volas ĉi evento por pafi.

1091
01:07:13,000 --> 01:07:17,490
Esence kion ĉi tio signifas ke ni povas fari estas ni povas reuzi tiun saman eventa traktilo

1092
01:07:17,490 --> 01:07:20,000
por ĉiuj la aĵoj en la listo.

1093
01:07:20,000 --> 01:07:22,080
Do ni ne devas havi unu eventa traktilo por la unua elemento

1094
01:07:22,080 --> 01:07:24,550
kaj malsama eventa traktilo por la dua elemento.

1095
01:07:24,550 --> 01:07:29,880
Ni povas anstataŭe diri, "Mi volas la saman eventa traktilo por apliki al ĉiu en mia listo."

1096
01:07:29,880 --> 01:07:34,420
Sed ni devas iel scias kion elemento estis klakis.

1097
01:07:34,420 --> 01:07:38,450
Ĉi tiu "tiu" ŝlosilvorto reprezentas ĝuste tio.

1098
01:07:38,450 --> 01:07:42,360
Ĉi tiu estas la celo kiu estis ĵus klakis de la uzanto.

1099
01:07:42,360 --> 01:07:47,680
Se mi nur klakis la 3a ligilo, ĉi tio reprezentas la elemento de tiu 3-a ligilo,

1100
01:07:47,680 --> 01:07:51,670
kio signifas ke mi povas trovi ĝian atributo, datumoj-simbolo,

1101
01:07:51,670 --> 01:07:57,760
kion ni scias devas enhavi la simbolon ke tio asociita kun la kompanio Mi nur klakis.

1102
01:07:57,760 --> 01:08:04,550
Se ni saltas reen al nia financoj paĝo,

1103
01:08:04,550 --> 01:08:08,580
ni povas vidi nun, ke iam mi ektajpu iu kiel msft,

1104
01:08:08,580 --> 01:08:11,220
ni ne plu komprenis nur la stock simboloj,

1105
01:08:11,220 --> 01:08:13,720
ni nun ricevas la realan kompanioj.

1106
01:08:13,720 --> 01:08:20,410
Sed kiam mi alklaku unu el tiuj kompanioj,

1107
01:08:20,410 --> 01:08:25,180
ni povas vidi ke ni reale popolante la teksta kadro ne kun la nomo de la entrepreno

1108
01:08:25,180 --> 01:08:29,850
sed kun ĉiu stokis ene de tiuj datumoj atributoj.

1109
01:08:29,850 --> 01:08:32,880
Kaj tial, se mi efektive inspekti unu el tiuj elementoj de dekstra klako ĝin

1110
01:08:32,880 --> 01:08:36,200
kaj klakante Esploru Elemento, ni povas vere vidi kion ĉi aspektas.

1111
01:08:36,200 --> 01:08:40,290
>> Memoru ĉi estas iu kiu nin kreis ene de tiu por buklo

1112
01:08:40,290 --> 01:08:42,649
kiam ni estis konstruante ke kordoj de HTML.

1113
01:08:42,649 --> 01:08:47,870
Ni povas vidi ĉi tie ke tiu datumo-simbolo havas la valoron de MSFT, kiu estas granda.

1114
01:08:47,870 --> 01:08:49,189
Tio estas kion ni atendis.

1115
01:08:49,189 --> 01:08:53,170
Tio estas la simbolo kaj tiel estas kiel ni atingis la valoron kiun ni bezonas por uzi

1116
01:08:53,170 --> 01:08:56,140
ene de tiu teksto skatolo.

1117
01:08:56,140 --> 01:08:58,850
Tio estas sufiĉa por la citaĵo formo ĉar tio estas speco de enuiga.

1118
01:08:58,850 --> 01:09:02,990
Ni simple fari iujn rapidajn plibonigoj al nia biletujo paĝo.

1119
01:09:02,990 --> 01:09:08,109
Se vi uzas CS50 Financoj por tempo kaj vi komencos aĉeti kaj vendi multajn karcero;

1120
01:09:08,109 --> 01:09:11,300
eventuale tiu tablo tuj akiri sufiĉe granda,

1121
01:09:11,300 --> 01:09:13,850
kaj vi tuj volas stock paperbenda, kompreneble.

1122
01:09:13,850 --> 01:09:20,350
Tuj la tablo estas vere, vere granda, ĝi povus esti utila por la uzanto por provi serĉi super ĝi.

1123
01:09:20,350 --> 01:09:23,290
Ene de la serĉo skatolo se mi ektajpu iu kiel Disney

1124
01:09:23,290 --> 01:09:26,359
kaj serĉas mian Mickey Mouse stock, ni povas vidi ke la tablo estas nun filtrado

1125
01:09:26,359 --> 01:09:28,189
surbaze de kion mi ĵus tajpis in

1126
01:09:28,189 --> 01:09:31,640
Ĉi funcionalidad aspektas super komplikitaj, sed estas vere, vere facila

1127
01:09:31,640 --> 01:09:33,859
kun jQuery kaj JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Ĉi portfolio.php dosieron inkludas JavaScript dosiero nomata portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Ni rigardu tion.

1130
01:09:41,130 --> 01:09:44,890
Do html, js, biletujo.

1131
01:09:44,890 --> 01:09:49,210
Jen kie ni faras ke serĉado sur la tablo.

1132
01:09:49,210 --> 01:09:52,750
La unua afero Mi bezonas fari estas alfiksi okazaĵo traktilo por tiu teksto skatolo

1133
01:09:52,750 --> 01:09:55,760
ĉar ni scias ke ni volas nian filtrado funkcio pafi

1134
01:09:55,760 --> 01:09:59,800
ĉiufoje kiam la uzanto premas ion ĉar ni ne havas tempon por Search butonoj.

1135
01:09:59,800 --> 01:10:03,000
La unua afero kiun ni bezonas por fari estas eltrovi, kion la uzanto sercxas,

1136
01:10:03,000 --> 01:10:04,780
samkiel ni faris antaŭe.

1137
01:10:04,780 --> 01:10:11,320
Tio cxi sxlosilvorto referencas al la aktuala elemento la uzanto interagas kun.

1138
01:10:11,320 --> 01:10:14,070
>> Ĉar la uzanto interagas kun la serĉo skatolo,

1139
01:10:14,070 --> 01:10:17,020
$ Ĉi reprezentas la serĉo skatolo,

1140
01:10:17,020 --> 01:10:21,820
tiel this.val donas al ni kio estas ene de la serĉo skatolo la uzanto estas aktuale tajpas.

1141
01:10:22,810 --> 01:10:27,320
Do, nun kion ni volas fari estas ni volas persisti super ĉiuj el la vicoj

1142
01:10:27,320 --> 01:10:29,240
ene de nia tablo.

1143
01:10:29,240 --> 01:10:35,630
Elekti ĉiujn vicojn en nia tablo, mi donis tiun tabelo de ID de tablo biletujo,

1144
01:10:35,630 --> 01:10:39,060
kaj ĉiu vico estas reprezentita de TR elemento,

1145
01:10:39,060 --> 01:10:42,080
tial ĉi selector tuj revenos al mi grandan tabelo

1146
01:10:42,080 --> 01:10:44,370
de ĉiuj vicoj en mia tablo.

1147
01:10:44,370 --> 01:10:47,010
Nun mi volas persisti super tiu tabelo.

1148
01:10:47,010 --> 01:10:52,390
Mi povis vin por ciklo, sed jQuery vere donas al ni la belan funkcio nomata "ĉiu".

1149
01:10:52,390 --> 01:10:55,220
Kion ĉiu faras estas ĉiu prenas unu argumenton,

1150
01:10:55,220 --> 01:10:57,090
kaj tiu argumento estas funkcio.

1151
01:10:57,090 --> 01:11:02,760
Kio okazas al fari estas tio okazas apliki tiun funkcion por ĉiu ero ene de tiu listo.

1152
01:11:02,760 --> 01:11:05,550
Ĉi tiu funkcio prenas unu argumento kiu estas e,

1153
01:11:05,550 --> 01:11:10,090
kaj kiam ĉi tiu funkcio estas ekzekutita, ĉi TTT tuj estos anstataŭita per la unua vico,

1154
01:11:10,090 --> 01:11:12,070
tiam la dua vico, kaj tiam la tria vico.

1155
01:11:12,070 --> 01:11:15,150
Per ĉi tiu maniero, ĉi tiu estas la sama afero kiel kuri por buklo

1156
01:11:15,150 --> 01:11:21,360
kaj tiam decidi la nuna ero bazita sur la indeksa ene de via por buklo.

1157
01:11:21,360 --> 01:11:24,750
Je ĉiu ripeto, por ĉiu el tiuj elementoj en la tablo,

1158
01:11:24,750 --> 01:11:30,560
Mi volas kontroli, ĉu la teksto de la elemento - la tekston de la ĉelo ene de la vico -

1159
01:11:30,560 --> 01:11:33,130
kongruas kion mi sercxas.

1160
01:11:33,130 --> 01:11:36,390
Tiu granda longa ĉeno da ordonoj estas kiel mi povis fari tion.

1161
01:11:36,390 --> 01:11:40,900
Unue, denove, ĉi nun raportas al - ĉar ĝi estas ene de nova funkcio -

1162
01:11:40,900 --> 01:11:45,020
ĉi tiu estas nun la aktuala vico en la tablon.

1163
01:11:45,020 --> 01:11:47,340
Mi volas preni la aktualan vicon en la tablo,

1164
01:11:47,340 --> 01:11:49,950
kaj mi volas akiri ĉiujn siajn filojn.

1165
01:11:49,950 --> 01:11:51,940
Memoru, la DOM estas hierarkia arbo,

1166
01:11:51,940 --> 01:11:54,200
kio signifas, ke elementoj havas numeron de infanoj.

1167
01:11:54,200 --> 01:12:00,180
>> Ĉi. Infanoj funkcio tuj revenos al mi reen tabelo de ĉiuj el la elementoj

1168
01:12:00,180 --> 01:12:03,240
kiuj estas la filoj de, en ĉi tiu kazo, vico en la tablon.

1169
01:12:03,240 --> 01:12:07,150
Tiu estas nur simple la ĉeloj ene de la vico.

1170
01:12:07,150 --> 01:12:09,230
Mi nur volas serĉi pri la unua ĉelo.

1171
01:12:09,230 --> 01:12:13,090
Ĉi. Unua funkcio diras al mi la unua elemento en tiu tabelo.

1172
01:12:13,090 --> 01:12:17,070
Tiam la teksto funkcio diras min ĝuste kio estas ene de tiu ĉelo

1173
01:12:17,070 --> 01:12:19,530
kiam mi volas sercxi super tiu teksto.

1174
01:12:19,530 --> 01:12:21,040
Fine, ni konverti ĝin al minuskla,

1175
01:12:21,040 --> 01:12:23,940
do ni povas fari tekston kazo sensenta demandoj.

1176
01:12:23,940 --> 01:12:29,990
Fine, ni deziras vidi se tiu linio ene de tablo enhavas la kordoj ni sercxas.

1177
01:12:29,990 --> 01:12:32,980
La indexOf funkcio en JavaScript faras ĝuste tion.

1178
01:12:32,980 --> 01:12:37,060
Ĝi diras al ni, ĉu aŭ ne tiu cxeno enhavas alian kordoj.

1179
01:12:37,060 --> 01:12:40,150
Se estas vere ke la ĉelo enhavas kion mi serĉas,

1180
01:12:40,150 --> 01:12:42,140
tiam mi volas certigi ke ĝi estos montrata.

1181
01:12:42,140 --> 01:12:45,330
La show metodo diros, "Montru la ero."

1182
01:12:45,330 --> 01:12:50,350
Se ĉi tio ne estas la kazo, tiam tiu signifas ajn mi serĉis ne enhavis

1183
01:12:50,350 --> 01:12:53,550
ene de tiu vico, kaj tiel mi volas kaŝi estas de la uzanto.

1184
01:12:53,550 --> 01:12:59,240
Kiu sukcesas ke bela filtrado efekto kie jam vidas la tutan tablon.

1185
01:12:59,240 --> 01:13:01,480
Se vi interesiĝas kiel fari ĉi paperbenda tiel,

1186
01:13:01,480 --> 01:13:04,180
ni afiŝi la fonto ensalutintaj. Sed estas vere simpla.

1187
01:13:04,180 --> 01:13:09,860
JQuery havas awesome metodoj por tiuj kuraĝigoj kaj manipulanta CSS propraĵoj.

1188
01:13:09,860 --> 01:13:11,020
Do, jen ĝin por mi.

1189
01:13:11,020 --> 01:13:15,560
>> Kio do kuŝas antaŭen? Kiel vi vidos post kelkaj tagoj, la fina projektoj propono estas pro.

1190
01:13:15,560 --> 01:13:17,730
La fina projektoj propono demandos al vi kelkajn demandojn,

1191
01:13:17,730 --> 01:13:19,420
sed inter ili estos tri limŝtonoj -

1192
01:13:19,420 --> 01:13:22,840
unu estis "bona" ​​mejloŝtono, unu pli bonan mejloŝtono, kaj unu pli bona.

1193
01:13:22,840 --> 01:13:25,870
La ideo estas vere helpi vin infanoj vian atendoj

1194
01:13:25,870 --> 01:13:29,160
por ke minimume vi estos feliĉa kun la rezulto de via fina projekto

1195
01:13:29,160 --> 01:13:32,060
kaj ĝi estos "bona" ​​Kiom vi raportas.

1196
01:13:32,060 --> 01:13:34,540
Sed tiam en la intereso de prenanta vi atingi malmulta ion pli bonan

1197
01:13:34,540 --> 01:13:37,680
aŭ io pli bona, ni ankaŭ ordigi de peli vin al tiu tiel.

1198
01:13:37,680 --> 01:13:40,660
La CS50 Hack-a-Thon, dume, estas post kelkaj semajnoj.

1199
01:13:40,660 --> 01:13:44,340
Tipe, ni faru tion en loterio bazo bazo pro intereso,

1200
01:13:44,340 --> 01:13:47,680
sed malakordo ni prenos kelkajn cent el ni en pramo busoj de Harvard Square

1201
01:13:47,680 --> 01:13:51,540
malsupren al Kendall Square kie Microsoft havas belan facilecon acertadamente nomita "nerd" -

1202
01:13:51,540 --> 01:13:53,830
la Nova Anglio Esploro kaj Disvolviĝo Centro.

1203
01:13:53,830 --> 01:13:56,380
Ni ricevos tie ĉirkaŭ 8 ptm Ni devos iom da manĝo.

1204
01:13:56,380 --> 01:13:58,160
Ĉirkaŭ 1-a horo matene ni havos iom pli da manĝaĵo.

1205
01:13:58,160 --> 01:14:02,150
Ĉirkaŭ 5 pm se vi estas ankoraŭ vigla ni estrus super al IHOP aŭ preni vin al universitatoj.

1206
01:14:02,150 --> 01:14:04,380
La objektivo estas bucear en fino projektoj

1207
01:14:04,380 --> 01:14:06,190
apud de kompanoj kaj bastono.

1208
01:14:06,190 --> 01:14:08,280
Tiam kelkaj tagoj poste estas la CS50 Foiro,

1209
01:14:08,280 --> 01:14:10,990
kiu estas vere signifis esti ŝanco por vi infanoj estas montrofenestro via laboro

1210
01:14:10,990 --> 01:14:12,700
kaj atingoj por la semestro

1211
01:14:12,700 --> 01:14:15,610
dum frotante ŝultroj unu kun aliaj kaj ekhavi senton de kio ĉiuj faris.

1212
01:14:15,610 --> 01:14:17,850
Kun kiu diris, multaj danke al Tommy kaj al Jozef,

1213
01:14:17,850 --> 01:14:19,960
kaj ni vidos vin lunde.

1214
01:14:19,960 --> 01:14:24,070
 [Aplaŭdo]