1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Nädal 9, edasine]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Harvardi Ülikool]

3
00:00:05,160 --> 00:00:07,020
[See on CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> See on CS50. See on nädala lõpuks 9. Suur aitäh.

5
00:00:13,340 --> 00:00:15,310
Lõpuks. Nädal 9. Ma sain selle.

6
00:00:15,310 --> 00:00:18,590
Täna jätkame oma vestlust veebi programmeerimine

7
00:00:18,590 --> 00:00:21,660
silma suunas lõplik projekt, mitte sellepärast, et sa pead tegema midagi veebipõhine

8
00:00:21,660 --> 00:00:25,610
Lõpliku projektide kuid kuna kas lõplik projektide või pärast CS50

9
00:00:25,610 --> 00:00:29,000
see on kindlasti suunda, kuhu kaasaegse tarkvara läheb.

10
00:00:29,000 --> 00:00:31,770
Ja veel see ei ole tegelikult lihtne asi.

11
00:00:31,770 --> 00:00:35,040
Tegelikult üks raskemaid asju teha, on aspekt disain.

12
00:00:35,040 --> 00:00:38,600
>> Näiteks kavandatud mean tegelikult saada kasutajaliides

13
00:00:38,600 --> 00:00:40,420
või kasutaja kogemus parem.

14
00:00:40,420 --> 00:00:43,200
Julgen öelda - ja me teame viimastel probleem komplekt

15
00:00:43,200 --> 00:00:45,960
kui mõni teist eetris oma koolikud umbes mõned tarkvara

16
00:00:45,960 --> 00:00:49,000
või riistvara, mis ajab sind raevu, kas ülikooli või välja -

17
00:00:49,000 --> 00:00:51,930
seal on palju saite seal, seal on palju riistvara seal,

18
00:00:51,930 --> 00:00:53,900
Selline asi on jama.

19
00:00:53,900 --> 00:00:58,730
Aga reaalsus on see, et teha asju, mida on lihtne kasutada veel on sellegipoolest võimas

20
00:00:58,730 --> 00:01:00,550
on väga raske väljakutse.

21
00:01:00,550 --> 00:01:03,680
Nii et täna ma küsisin Joosep ja Tommy minuga liituda siin

22
00:01:03,680 --> 00:01:06,680
nii et meil on vestlust, nii umbes disain

23
00:01:06,680 --> 00:01:09,090
ja milliseid mõtte protsesse tuleks alustada läbimas oma peaga

24
00:01:09,090 --> 00:01:12,040
Kui disaini oma lõpliku projekti, oma tuleviku pürgib.

25
00:01:12,040 --> 00:01:15,040
Ja siis koos Tommy abi me vaatame mõned rakendamise üksikasjad.

26
00:01:15,040 --> 00:01:18,440
Kuidas teil on nägemus paberkandjal või meelt

27
00:01:18,440 --> 00:01:20,760
et saate seejärel käivitada programmiliselt

28
00:01:20,760 --> 00:01:24,030
kasutades mõned tehnoloogiad ja tehnikad oleme lihtsalt hakkas rääkima,

29
00:01:24,030 --> 00:01:29,080
nimelt JavaScript ja midagi isegi uuemad, nimelt AJAX, asünkroonne JavaScript.

30
00:01:29,080 --> 00:01:32,950
See võimaldab teil luua veelgi dünaamilisem kasutajaliides

31
00:01:32,950 --> 00:01:35,780
tõmbamist üha rohkem andmeid järk-järgult alates server.

32
00:01:35,780 --> 00:01:38,560
Nii et me näeme mõningaid selliseid klippe ka täna.

33
00:01:38,560 --> 00:01:41,800
Nagu kõrvale, kui olete huvitatud, keskendudes infotehnoloogia

34
00:01:41,800 --> 00:01:45,010
või minoring infotehnoloogia, tean, et see reede keskpäeval

35
00:01:45,010 --> 00:01:48,750
Maxwell Dworkin 221 tekib pitsa sündmus

36
00:01:48,750 --> 00:01:50,780
kus saab õppida veidi rohkem arvutiteadus.

37
00:01:50,780 --> 00:01:54,860
Oma viis uksest välja täna saate kiirenemist mitteametlik juhend CS Harvardi.

38
00:01:54,860 --> 00:01:57,290
Me paneme selle prügikaste väljaspool vöökõrgusel

39
00:01:57,290 --> 00:01:59,750
nii et kui soovite haarata seda ja õppida veidi rohkem CS,

40
00:01:59,750 --> 00:02:02,480
mis on sinu jaoks olemas, kui see oli nädal 0.

41
00:02:02,480 --> 00:02:06,500
Ka siis, kui soovite meiega liituda CS50 lõunasöögi sel reedel kell 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Ilma pikema jututa, ma annan teile õpetamise mehe Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Tere. [Aplaus]

45
00:02:19,190 --> 00:02:20,770
Aitäh.

46
00:02:20,770 --> 00:02:24,780
Esimest korda sain teada disain oli klassis siin nimetatakse CS179.

47
00:02:24,780 --> 00:02:28,040
>> Professor ajal ütles meile lugu teisest professor

48
00:02:28,040 --> 00:02:31,640
kes oli läinud hotelli ja kasutatud segistid.

49
00:02:31,640 --> 00:02:35,630
Kas keegi mulle öelda, mida 2 nupud vasakul ja paremal teha?

50
00:02:35,630 --> 00:02:39,080
[Üliõpilane] Soe ja külm. >> Soe ja külm. Hea.

51
00:02:39,080 --> 00:02:41,430
Mida sa tavaliselt oodata, eks?

52
00:02:41,430 --> 00:02:46,960
See professor pärast kasutades kraan tahab käia duši all, ja ta jätkab seda kasutada.

53
00:02:46,960 --> 00:02:51,310
Ta arvab, vasakul ja paremal küljel on kuuma ja külma, eks?

54
00:02:51,310 --> 00:02:55,470
Aga kas keegi mulle öelda, mida need teevad?

55
00:02:55,470 --> 00:02:58,060
Iga käsi?

56
00:02:58,060 --> 00:03:01,740
[Kuuldamatu õpilase vastus] >> Üks soovitus on?

57
00:03:01,740 --> 00:03:05,860
[Kuuldamatu õpilase vastus] >> Temperatuur?

58
00:03:05,860 --> 00:03:10,460
Nii et üks nendest kontrollib temperatuuri ja muude kontrollide? >> [Üliõpilane] Veesurve.

59
00:03:10,460 --> 00:03:12,350
Veesurve. Hea.

60
00:03:12,350 --> 00:03:15,100
See professor jalutab ja mõtlesin nad kontrollivad kuum ja külm,

61
00:03:15,100 --> 00:03:21,470
muutub õige, mis ta arvab, on kuum, kõik viis kuni

62
00:03:21,470 --> 00:03:23,560
sest ta tahab võtta soe dušš.

63
00:03:23,560 --> 00:03:28,100
Noh, need tõesti ei sobi omavahel, nii et ta saab seda mitte väga lõbus kogemus

64
00:03:28,100 --> 00:03:31,110
olemise külm dušš ja me kõik teame, mis tunne see on.

65
00:03:31,110 --> 00:03:33,620
See on näide disaini viga.

66
00:03:33,620 --> 00:03:37,040
Mida mõtlen, et on tema ootust kraan

67
00:03:37,040 --> 00:03:39,420
ei vasta sellele, mida tuli dušš,

68
00:03:39,420 --> 00:03:41,780
mis on selline kahetsusväärne talle.

69
00:03:41,780 --> 00:03:44,990
Nii et see on näide disaini viga, mis juhtub reaalses elus.

70
00:03:44,990 --> 00:03:48,020
Aga me näeme igasugu muid need samuti.

71
00:03:48,020 --> 00:03:50,390
Oleme ilmselt ei fännid MBTA süsteem.

72
00:03:50,390 --> 00:03:55,560
See on metroo süsteem tegelikult Londonis, mis ütleb: "See nupp ei ole kasutusel."

73
00:03:55,560 --> 00:04:00,220
Miks on see isegi olemas? Miks me isegi ei hooli?

74
00:04:00,220 --> 00:04:02,810
Kui ma olin laps, on tech Savvy üks maja,

75
00:04:02,810 --> 00:04:05,050
Kui arvuti oleks crash, mu ema oleks tulnud minu juurde,

76
00:04:05,050 --> 00:04:07,060
näitab mulle seda ekraani ja küsis minult, mis juhtus.

77
00:04:07,060 --> 00:04:09,210
>> Isegi mina ei tea, mida see tähendab.

78
00:04:11,890 --> 00:04:14,700
[Naer] Mida?

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

80
00:04:18,720 --> 00:04:23,050
Vahel me tunneme, nagu tarkvara arendajad on lihtsalt trall meile.

81
00:04:23,050 --> 00:04:28,460
Kuna kasutajate me oleme nagu "Mis siin toimub? Keegi meile öelda."

82
00:04:28,460 --> 00:04:32,140
See kõik taandub projekteerimistingimuste väljaandmisele.

83
00:04:32,140 --> 00:04:34,650
Disain, nagu me näeme, ei puuduta mitte ainult esteetika,

84
00:04:34,650 --> 00:04:37,230
Asi pole selles, kuidas asju vaadata.

85
00:04:37,230 --> 00:04:41,720
Me näeme siin, et see väike pop-up üle siin tegelikult tundub päris kena.

86
00:04:41,720 --> 00:04:45,290
See on varju taustal, see on piiri raadiused toimub.

87
00:04:45,290 --> 00:04:47,550
See on selline ilus.

88
00:04:47,550 --> 00:04:51,480
See ei ole tõesti hästi kavandatud, sest see ei ole väga kasutajasõbralik.

89
00:04:51,480 --> 00:04:54,920
See väike pop-up, mis kerkib tegelikult ei anna mulle mingit teavet

90
00:04:54,920 --> 00:04:58,450
umbes mis toimub, see ei ütle mulle midagi, kui kasutaja

91
00:04:58,450 --> 00:05:01,400
kuidas taastuda, et viga.

92
00:05:01,400 --> 00:05:05,190
Me tahame mõelda asju, disain ei ole.

93
00:05:05,190 --> 00:05:06,670
Esiteks, see ei ole esteetika.

94
00:05:06,670 --> 00:05:10,800
Samuti ei täitematerjaliks oma app koos tonni tarbetuid funktsioone.

95
00:05:10,800 --> 00:05:14,890
Kui oled Tai restoran, sa ilmselt ei taha olla hambaarst samal ajal.

96
00:05:14,890 --> 00:05:17,720
Ja Facebook Küsimused, mitte, et paljud inimesed kasutasid

97
00:05:17,720 --> 00:05:21,130
ja see ei olnud tõesti keskmes, mida nad ehitasid.

98
00:05:21,130 --> 00:05:24,200
Ja nii see on tore mõelda mitte niivõrd kogus asju

99
00:05:24,200 --> 00:05:26,390
et sa paned oma taotluse, kuid kvaliteet

100
00:05:26,390 --> 00:05:28,910
ja kuidas te teete, et kasutaja kogemus parem

101
00:05:28,910 --> 00:05:32,540
poolt tegelikult parandada sellega, mis teil juba on.

102
00:05:32,540 --> 00:05:37,040
>> Lühidalt, disain ütleb meile, mida me peame lähtuma.

103
00:05:37,040 --> 00:05:41,950
Näiteks, kui me ehitame midagi, andke meile otsida asju,

104
00:05:41,950 --> 00:05:45,970
nagu Google, näiteks peaks me asju nii,

105
00:05:45,970 --> 00:05:48,950
mis nõuab kasutajal võtta palju klikke saada, mida nad tahavad,

106
00:05:48,950 --> 00:05:52,580
või peaksime tegema seda viisil, näiteks Google Instant või automaatteksti

107
00:05:52,580 --> 00:05:54,970
mis võimaldab meil saada meie tulemusi kiiremini?

108
00:05:54,970 --> 00:05:58,740
Ehitus hõlmab, nagu Tommy näitan sulle, tegelikult hoone ta.

109
00:05:58,740 --> 00:06:01,890
Seal on palju liike disain.

110
00:06:01,890 --> 00:06:06,070
Näiteks, kui sa oled hoone midagi kasutada midagi

111
00:06:06,070 --> 00:06:09,770
kolmanda maailma riik, kus ei ole palju elektrit või et palju tehnoloogiat,

112
00:06:09,770 --> 00:06:11,440
sa pead konstruktsiooni, mida sa oled hoone

113
00:06:11,440 --> 00:06:14,210
viisil, mis kergesti võimaldab juurdepääsu inimesi.

114
00:06:14,210 --> 00:06:18,290
Aga mis sorti muid disaini otsuseid võib seal olla

115
00:06:18,290 --> 00:06:21,850
või võib olla seotud midagi sellist?

116
00:06:23,690 --> 00:06:25,660
Jah. Ma näen käsi.

117
00:06:25,660 --> 00:06:37,200
[Kuuldamatu õpilase vastus] >> Õigus. Täpselt. Ligipääsetavus on üks asi.

118
00:06:37,200 --> 00:06:40,870
Paljud inimesed ei mõtle, "Mis mu kasutajat?"

119
00:06:40,870 --> 00:06:43,160
nagu äärmisi kas spektrit.

120
00:06:43,160 --> 00:06:47,770
Mul on kasutajad, kes võis puudega, et ma ei mõelnud

121
00:06:47,770 --> 00:06:50,590
ja ma olen lihtsalt mõelnud projekteerimisel tavakasutajale.

122
00:06:50,590 --> 00:06:52,630
Internet on kättesaadav kõigile tänapäeval

123
00:06:52,630 --> 00:06:54,870
ja ma peaks kavandama neid inimesi samuti.

124
00:06:54,870 --> 00:06:58,620
Mis sorti muid disaini otsuseid võib teete?

125
00:06:58,620 --> 00:07:00,690
Jah. >> [Üliõpilane] Kulud.

126
00:07:00,690 --> 00:07:02,680
Maksumus. Väga hea.

127
00:07:02,680 --> 00:07:08,060
Teine asi, me võiksime toetuda meie disaini otsuseid on kulu.

128
00:07:08,060 --> 00:07:13,130
Kui me äri, sa tahad ehitada midagi, mis ei võta palju kulu toota

129
00:07:13,130 --> 00:07:17,720
kuid saab müüa eriti kõrge hind või saavad meile mõned kasumit.

130
00:07:17,720 --> 00:07:21,540
>> Need on kõik erinevat tüüpi disain, aga kui me ehitame midagi internetist

131
00:07:21,540 --> 00:07:25,120
või kui me ehitame midagi, mis ilmselt ei maksa nii palju üles ehitada nüüd,

132
00:07:25,120 --> 00:07:28,630
nagu Interneti-rakendused - sa ei pea viskama palju kapitali sinna

133
00:07:28,630 --> 00:07:30,900
et teha midagi, mis tõesti töötab -

134
00:07:30,900 --> 00:07:33,490
mida me oleme rohkem mures on kasutaja kogemus.

135
00:07:33,490 --> 00:07:36,390
Me nimetame seda kasutaja keskendunud disain.

136
00:07:36,390 --> 00:07:41,550
Sisuliselt, mida kasutaja keskendunud disain hõlmab paneb ennast ka kingad kasutajatele.

137
00:07:41,550 --> 00:07:44,870
Kui keegi registreerub mida ma hoone,

138
00:07:44,870 --> 00:07:48,250
nad ilmselt tulevad minu eriti taotluse eesmärki silmas pidades,

139
00:07:48,250 --> 00:07:50,280
koos ülesanne nad tahavad täita.

140
00:07:50,280 --> 00:07:53,650
Ja teie ülesanne on mitte ainult aidata neil täita seda ülesannet

141
00:07:53,650 --> 00:07:57,930
kuid et aidata neil täita seda ülesannet viisil, mis on tõhus, arusaadav

142
00:07:57,930 --> 00:08:01,900
ja, nagu mõned isik ütles seal, ligipääsetav.

143
00:08:01,900 --> 00:08:03,750
Mis kasutegur tähendab?

144
00:08:03,750 --> 00:08:08,050
Tõhusus tähendab, kui kiiresti ei oma kasutajanime ülesande täitmiseks andnud oma kasutajaliides.

145
00:08:08,050 --> 00:08:11,650
Kas see võtab palju klikke neid saada ühest kohast teise?

146
00:08:11,650 --> 00:08:14,630
Kas see tüütu? Kas neil on täita palju korduvaid ülesandeid?

147
00:08:14,630 --> 00:08:17,140
Me tahame, et see protsess võimalikult efektiivne

148
00:08:17,140 --> 00:08:20,070
et nad ei pea tegema neid erinevaid asju.

149
00:08:20,070 --> 00:08:24,230
Nagu intuitsiooni, st näiteks kui kasutaja vaatab mu liides,

150
00:08:24,230 --> 00:08:27,240
on neil lihtne saada ühest kohast teise?

151
00:08:27,240 --> 00:08:30,390
Kas neil lihtne aru saada, mida nad tuleb klõpsata minu liides

152
00:08:30,390 --> 00:08:33,770
et neid eesmärgi saavutamiseks või ülesande, et nad soovivad saavutada?

153
00:08:33,770 --> 00:08:37,520
>> Ja lõpuks, nagu üks inimene ütles seal, kättesaadavus on väga oluline.

154
00:08:37,520 --> 00:08:39,640
[Mees kõneleja] See puudutab juurdepääsu asjad nägemine,

155
00:08:39,640 --> 00:08:42,740
meeldib, kuidas ma tegelikult disaini midagi, keegi, kes on pimedad?

156
00:08:42,740 --> 00:08:46,460
Oh. Inimeste jaoks, kes ei näe üldse, meil on midagi, mida nimetatakse ekraanilugejad.

157
00:08:46,460 --> 00:08:49,070
Mida peaks tegema, on teil tuleks ehitada oma veebilehel nii

158
00:08:49,070 --> 00:08:52,020
et näiteks, eelkõige tehnoloogiaid, mida me nimetame -

159
00:08:52,020 --> 00:08:53,590
Seal on palju asju nüüd.

160
00:08:53,590 --> 00:08:55,660
Ma arvan, et ekraanilugejad nimetatakse lõuad.

161
00:08:55,660 --> 00:08:58,410
Palju neid asju tugineda mida me kutsume ala reeglid

162
00:08:58,410 --> 00:09:02,010
et luges kasutajale, mis on praegu lehel.

163
00:09:02,010 --> 00:09:05,480
Neile inimestele, kes ei näe, siis on vaja veendumaks, et need ekraanilugejad

164
00:09:05,480 --> 00:09:09,130
saab tegelikult kiirenemist lehe sisu ja võib tegelikult näidata oma kasutajatele,

165
00:09:09,130 --> 00:09:13,630
kui sa ei näe, vähemalt saab ikka aru lehe sisu.

166
00:09:13,630 --> 00:09:16,190
Jah. Okei.

167
00:09:16,190 --> 00:09:23,410
Aitab räägime hea disain. Räägime halb disain.

168
00:09:23,410 --> 00:09:25,220
Need on asjad, mida ei peaks tegema.

169
00:09:25,220 --> 00:09:27,890
Kas keegi mulle öelda oma kogemustest Craigslistissa

170
00:09:27,890 --> 00:09:32,190
ja mida nad arvavad ei ole nii suur umbes see kujundus?

171
00:09:33,690 --> 00:09:36,430
Jah. >> [Üliõpilane] Ma arvan, et seal on liiga palju sõnu ühes valdkonnas.

172
00:09:36,430 --> 00:09:39,350
Liiga palju sõnu, eks? Täiesti suur.

173
00:09:39,350 --> 00:09:42,400
Sa tuled sellele lehele ja sa oled tervitati terve hunnik asju siin

174
00:09:42,400 --> 00:09:43,860
mis ei pruugi isegi asja sulle.

175
00:09:43,860 --> 00:09:47,010
Näiteks sa elad ühes riigis, mis ei alga käesoleva kirja sisuga.

176
00:09:47,010 --> 00:09:48,690
Oletame, et elate Texas või midagi.

177
00:09:48,690 --> 00:09:53,790
>> Sa pead kerida kogu tee alla leht saada Asukoht olete.

178
00:09:53,790 --> 00:10:00,320
Ma olen Boston, nii et las ma vaatan Massachusettsis. Kus on Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, see on siin. Oh, see on Boston. Okei.

180
00:10:03,270 --> 00:10:09,070
Vaatame Boston. [Naer]

181
00:10:09,070 --> 00:10:12,250
Päris suur, eks?

182
00:10:12,250 --> 00:10:16,400
Ebamugav asju seal. [Naer]

183
00:10:17,320 --> 00:10:19,470
Oletame, et ma otsin kusagil elada.

184
00:10:19,470 --> 00:10:24,130
Kui palju inimesi on tegelikult kasutatud Craigslistissa? Põhjatu teile.

185
00:10:24,130 --> 00:10:30,960
Seal on päris halb võimaluse vaadata seda, kuid vaatame seda.

186
00:10:35,130 --> 00:10:38,970
Mis vahe on img ja pic? Kas keegi mulle öelda?

187
00:10:41,350 --> 00:10:42,830
Seal tegelikult ei ole vahet.

188
00:10:42,830 --> 00:10:47,710
Nad tähendavad täpselt sama asi, kuid neil on erinevad sildid nende jaoks mingil põhjusel.

189
00:10:48,980 --> 00:10:53,560
Kui ma vajutan on pilt, midagi ei juhtu lehel.

190
00:10:53,560 --> 00:10:57,490
Ma tegelikult pead klikkima Otsi uuesti, et midagi juhtuks.

191
00:10:57,490 --> 00:11:02,430
Mis võiks olla parem disain otsus, mida saaks teha seal?

192
00:11:03,820 --> 00:11:08,030
Kui ma olen klõpsates et filter, ma ilmselt soovite filtreerida, et konkreetne tegevus

193
00:11:08,030 --> 00:11:09,970
või et konkreetse kategooria.

194
00:11:09,970 --> 00:11:14,450
Nii et selle asemel, et vajutage uuesti nuppu Otsi, ma võiks lihtsalt automaatselt teha filtreerimine

195
00:11:14,450 --> 00:11:17,060
omamoodi Google stiilis, kus nad seda teha koheselt.

196
00:11:17,060 --> 00:11:20,440
[Malan] Aga ärge moodustab nagu oleme näinud neid siiani olema füüsiliselt esitatud

197
00:11:20,440 --> 00:11:23,170
lööb Sisesta vähemalt või klikkides nuppu?

198
00:11:23,170 --> 00:11:26,830
Nagu olete näinud neid nii palju, kui tegelikult on klikkima Esita teha neid asju.

199
00:11:26,830 --> 00:11:30,090
>> Aga nagu Tommy näitab teile teiseks on tegelikult viise, kuidas teil

200
00:11:30,090 --> 00:11:33,010
nii et kui klõpsate et asi võib automaatselt saata

201
00:11:33,010 --> 00:11:38,840
mida me nimetame AJAX taotlus ja saada andmeid tagasi ja filtreerida tulemusi silmapilkselt.

202
00:11:38,840 --> 00:11:41,340
On tonni asju, mis on valesti selle liidese.

203
00:11:41,340 --> 00:11:43,530
[Malan] Kas sa otsida Cambridge?

204
00:11:43,530 --> 00:11:47,030
Midagi on veidi ebaharilik siin kui sa hoolid Cambridge

205
00:11:47,030 --> 00:11:54,790
ja veel te saate Westford, Spring Hill, West Newton jms.

206
00:11:54,790 --> 00:11:57,930
Ilmselt mitte ideaalne. >> Ilmselt mitte ideaalne.

207
00:11:57,930 --> 00:12:03,900
Kuidas võiks ma saaks teha kasutaja kogemus parem selle konkreetse lehekülje?

208
00:12:03,900 --> 00:12:07,340
Jah. >> [Üliõpilane] Juhised.

209
00:12:07,340 --> 00:12:09,500
Okei. Juhised millist mõtet?

210
00:12:09,500 --> 00:12:14,630
[Üliõpilane] Näiteks asi esimest korda kasutajatele, kes ei tea isegi, mis Craigslistissa on

211
00:12:14,630 --> 00:12:17,320
või sa ei tea, mida sa peaksid tegema.

212
00:12:17,320 --> 00:12:20,150
Õigus. Nii selgitades, mida Craigslistissa on siin lehel on oluline.

213
00:12:20,150 --> 00:12:23,490
Me ei saa tegelikult öelda kasutajatele, mida see leht on tegelikult eest.

214
00:12:23,490 --> 00:12:27,090
Kui ma lihtsalt külastavad seda, ma näen terve hunnik kohtades. Ma isegi ei tea, mida need tähendavad.

215
00:12:27,090 --> 00:12:29,730
Kuid mis veel tähtsam, lihtsalt vaatab seda liidest,

216
00:12:29,730 --> 00:12:35,530
mäletan ma pidin keri ton asju leida konkreetne kogukond

217
00:12:35,530 --> 00:12:37,560
et ma tegelikult hoolis sellest.

218
00:12:37,560 --> 00:12:39,820
Mis on kiirem viis ma võiks teha? Jah.

219
00:12:39,820 --> 00:12:43,290
[Üliõpilane] neid lihtsalt jagada ida, lääs piirkondades. >> Okei.

220
00:12:43,290 --> 00:12:47,460
Ma võiks jagada nad veel kategooriaid mis võiks mind aidata kiiremini kindlaks

221
00:12:47,460 --> 00:12:49,820
kuidas saada, et kindla koha.

222
00:12:49,820 --> 00:12:54,510
[Üliõpilane] Pane ripploendist. >> Õigus. Okei.

223
00:12:54,510 --> 00:12:58,240
Ma võiks kasutada rippmenüüd, sest meil on fikseeritud komplekti asju

224
00:12:58,240 --> 00:13:00,100
ja me võiksime näidata neid rippmenüüst.

225
00:13:00,100 --> 00:13:02,240
Nii see ei võta nii palju ruumi ekraanil.

226
00:13:02,240 --> 00:13:05,630
Aga isegi parem kui see, mida me saame teha?

227
00:13:05,630 --> 00:13:09,220
Jah. >> [Kuuldamatu õpilase vastus] >> Kas oskate öelda, et jälle? >> [Üliõpilane] otsinguväljale.

228
00:13:09,220 --> 00:13:11,260
Jah, otsingukasti. See on tore.

229
00:13:11,260 --> 00:13:16,430
Mida me tegelikult saame teha, on kui me vaatame tagasi slaidide otsingukasti.

230
00:13:16,430 --> 00:13:21,520
Automaatteksti. Väga lihtne otsida tulemusi, mida sa tead on seatud.

231
00:13:21,520 --> 00:13:25,980
Kui ma hakkan kirjutama BO, lihtsalt näita mulle kõik tulemused, mis on BO sees neist.

232
00:13:25,980 --> 00:13:29,030
Nii saan väga lihtne leida eelkõige ühte ma tahan minna

233
00:13:29,030 --> 00:13:32,390
selle asemel, et kerida see tõesti suur nimekirja.

234
00:13:32,390 --> 00:13:37,450
>> Need on igasuguseid tõesti kergesti kättesaadavad viljad, et keegi, kes rakendab Craigslistissa

235
00:13:37,450 --> 00:13:42,500
võib tõesti teha kogemusi veebilehel palju parem oma konkreetse kasutaja.

236
00:13:42,500 --> 00:13:46,370
Okei. Aitab räägime halb veebilehed.

237
00:13:46,370 --> 00:13:49,410
Räägime Facebook.

238
00:13:50,880 --> 00:13:54,390
Kui Facebook tuli välja, ja eriti Facebookis fotosid,

239
00:13:54,390 --> 00:13:57,870
seal oli palju muid teenuseid ajal, mis võib teha täpselt samu asju.

240
00:13:57,870 --> 00:14:00,740
Nad võiksid korraldada oma fotosid albumitesse.

241
00:14:00,740 --> 00:14:03,360
Mida võiks teha, on siis võiks korraldada nende kogumid hästi.

242
00:14:03,360 --> 00:14:06,070
Sa võiksid korraldada neile kuupäevast. Sa võid teha kõiki neid eriti asju.

243
00:14:06,070 --> 00:14:11,710
Aga keegi ei tea, mida teha Facebook pildigalerii plahvatada ajal see ilmus?

244
00:14:11,710 --> 00:14:15,080
Jah. >> [Üliõpilane] Tags. >> Sildid. Täpselt.

245
00:14:15,080 --> 00:14:21,300
Meil on Milo siia, kes on meie koer maskott selle CS50 bandana.

246
00:14:21,300 --> 00:14:24,810
Te näete, et meil on see koodaustoiminto keskel.

247
00:14:24,810 --> 00:14:28,240
Ja mida tegi Facebookis fotosid nii huvitav kasutatavus seisukohalt

248
00:14:28,240 --> 00:14:34,130
on see, et tegelikult võimaldas inimestel selle kaudu kaasata oma sõpradega oma fotosid.

249
00:14:34,130 --> 00:14:37,680
Facebook, sest nende kodulehel on eelkõige sotsiaalseid

250
00:14:37,680 --> 00:14:40,750
see on umbes hoone selline ühiskondliku hoiaku.

251
00:14:40,750 --> 00:14:42,620
Et parem kogemus pildigalerii palju rohkem

252
00:14:42,620 --> 00:14:46,390
kuna nad võivad tegelikult alustada, öeldes: "Need on ühendusi inimeste vahel,

253
00:14:46,390 --> 00:14:49,220
ja need on fotod inimestest sa tegelikult hoolid. "

254
00:14:49,220 --> 00:14:52,200
Osa sellest on ka omamoodi nartsissismi.

255
00:14:52,200 --> 00:14:54,980
Inimestele meeldib olla fotodel ja asjad niimoodi.

256
00:14:54,980 --> 00:14:58,510
Kuigi see ei ole tingimata hea inimese tunnus,

257
00:14:58,510 --> 00:15:01,910
samal ajal see põhineb hea disaini otsuseid

258
00:15:01,910 --> 00:15:04,860
sest inimesed tegelikult hoolivad asjad niimoodi.

259
00:15:04,860 --> 00:15:07,190
Nii et Facebook fotod.

260
00:15:07,190 --> 00:15:09,800
>> Aga räägime Facebook üldisemalt.

261
00:15:09,800 --> 00:15:13,400
Olen kindel, et paljud inimesed siin on arvamusi Facebook,

262
00:15:13,400 --> 00:15:16,430
nii hea disaini otsuseid ja halb disaini otsuseid.

263
00:15:16,430 --> 00:15:20,270
Nii et olgem vent või olla õnnelik.

264
00:15:23,480 --> 00:15:26,450
Tule. Ma tean, te kõik kasutada Facebook.

265
00:15:26,450 --> 00:15:30,970
Keegi peab midagi halba öelda või midagi head öelda. Jah.

266
00:15:30,970 --> 00:15:35,060
[Üliõpilane] In Uudised Sööda seal on palju asju, mida ma tõesti ei hooli.

267
00:15:35,060 --> 00:15:37,740
Uudistevoo ei näita palju asju, mida ei pruugi hooli.

268
00:15:37,740 --> 00:15:41,660
Sul on sõbrad Facebookis kes te pole täidetud 2 või 3 aastat

269
00:15:41,660 --> 00:15:43,860
ja näed oma uudis tulemusi avanemise oma uudistevoo

270
00:15:43,860 --> 00:15:45,870
ja sa tõesti ei hooli sellest.

271
00:15:45,870 --> 00:15:48,700
Facebook on tegelikult tehtud jõupingutusi, et muuta see paremini,

272
00:15:48,700 --> 00:15:53,150
ja need olen tegelikult proovinud suruda asjakohased tulemused tippu uudistevoo kui hilja

273
00:15:53,150 --> 00:15:58,300
nii et sa tegelikult näed asju, mida sõbrad, mis on seotud teie või teie lähedased sõbrad.

274
00:15:58,300 --> 00:16:01,110
Midagi veel? Jah.

275
00:16:01,110 --> 00:16:06,400
[Kuuldamatu õpilase vastus] >> Kas oskate öelda, et jälle?

276
00:16:06,400 --> 00:16:10,140
[Üliõpilane] reklaamid on suhteliselt tagasihoidlikud. >> Mis mõttes?

277
00:16:10,140 --> 00:16:16,370
[Kuuldamatu õpilase vastus] Neil ei ole kerge ekraanil, nagu plakatid.

278
00:16:16,370 --> 00:16:17,760
Okei. See on hea.

279
00:16:17,760 --> 00:16:25,030
Kui te mäletate Interneti '90s - >> [Malan] Ma olin seal. >> Ta oli seal. [Naer]

280
00:16:25,030 --> 00:16:29,210
Võite mäleta vilkuv GIF taustaga, sädelevat asju,

281
00:16:29,210 --> 00:16:31,570
GeoCities stiil omamoodi asju.

282
00:16:31,570 --> 00:16:34,080
See on tõesti ei ole näiteks hea disain

283
00:16:34,080 --> 00:16:36,690
sest see on tõesti segavad sisu.

284
00:16:36,690 --> 00:16:39,590
Yale kunst veebilehel kasutada on animeeritud GIF kui nende taustast

285
00:16:39,590 --> 00:16:41,800
ja sa ei loe midagi lehel

286
00:16:41,800 --> 00:16:44,870
aga ma arvan, et keegi tegelikult kõneles nendega ja nüüd on see natuke erinev.

287
00:16:44,870 --> 00:16:48,940
[Malan] See on palju parem nüüd. >> See on palju parem nüüd, nagu näete. >> [Malan] Oh jah.

288
00:16:48,940 --> 00:16:56,020
Lihtsalt suurepärane, lihtsalt - Jah. Okei.

289
00:16:56,020 --> 00:17:00,560
>> Osa sellest teeb ka oma lehekülge võib väga minimalistlik ja väga arusaadav

290
00:17:00,560 --> 00:17:05,690
nii asjad lehel voolu nii, et on väga loogiline ja ei saa sel viisil üksteist.

291
00:17:05,690 --> 00:17:11,849
Mis sorti muid asju on hea umbes Facebook või halb umbes Facebook?

292
00:17:11,849 --> 00:17:15,730
Lähme lihtsalt disain vestlus siin.

293
00:17:19,470 --> 00:17:21,339
Oh. Kus? Jah.

294
00:17:21,339 --> 00:17:25,640
[Üliõpilane] uus Timeline süsteem võimaldab otsida isiku konto kohta oma minevikku.

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

296
00:17:28,119 --> 00:17:30,280
Timeline on suur asi, sest see võimaldab teil vars oma sõprade

297
00:17:30,280 --> 00:17:33,300
tagasi, kui nad olid keskkoolis.

298
00:17:35,160 --> 00:17:38,060
Timeline on hea, sest see võimaldab teil filtreerida läbi sisu palju kiiremini,

299
00:17:38,060 --> 00:17:41,500
see võimaldab leida asju, mis oleks muidu võtnud sa tõesti kaua aega, et leida

300
00:17:41,500 --> 00:17:45,840
lihtsalt kerida üles ja alla, üles, üles, üles, üles, üles, nagu läheb ajas tagasi.

301
00:17:45,840 --> 00:17:48,910
Aga seal on ka omamoodi negatiivne külg, et nii kasutaja kogemus.

302
00:17:48,910 --> 00:17:51,190
Mis see võiks olla?

303
00:17:51,190 --> 00:17:56,780
Big sõna, mis algab P-R. >> [Üliõpilane] Isikuandmete. >> Probleemid, eks?

304
00:17:56,780 --> 00:17:59,970
Privaatsus on tohutu kasutaja kogemus küsimus.

305
00:17:59,970 --> 00:18:07,190
See on üks asju, mida ma vihkan kõige rohkem Facebookis nüüd. [Naer]

306
00:18:07,190 --> 00:18:09,000
[Malan] Nagu ma nüüd.

307
00:18:09,000 --> 00:18:11,380
David ei teadnud seda tegelikult juhtus alles eile.

308
00:18:11,380 --> 00:18:14,560
Nii et nüüd ta teab, et iga kord kui ma vestelda temaga ma tean, et ta on olnud ignoreerides mind.

309
00:18:14,560 --> 00:18:16,880
[Malan] ebamugav osa oli mulle tegelikult ignoreerides teda,

310
00:18:16,880 --> 00:18:21,040
ja ma ei teadnud, et ta teadis, et ma ignoreerides teda. [Naer]

311
00:18:21,040 --> 00:18:24,030
Privaatsus on suur küsimus.

312
00:18:24,030 --> 00:18:28,670
Kas keegi siin mulle öelda, milline võiks olla halb umbes Facebook privaatsust

313
00:18:28,670 --> 00:18:32,270
Lisaks asjaolule, et nad teevad selliseid asju?

314
00:18:32,270 --> 00:18:37,240
Mis on see eriti raske teha seoses Facebook'i?

315
00:18:37,240 --> 00:18:40,340
See omamoodi on juhtiv küsimus.

316
00:18:41,680 --> 00:18:43,930
Jah. >> [Üliõpilane] Varja oma fotosid teatud inimesed.

317
00:18:43,930 --> 00:18:46,170
Õigus. Täpselt, et varjata oma fotosid teatud inimesed.

318
00:18:46,170 --> 00:18:51,290
Neil on see väike, vähe nuppu üleval paremas mis võimaldab teil lülitada privaatsust foto.

319
00:18:51,290 --> 00:18:56,360
Nende privaatsuse seaded on väga erinevad eri liiki menüüsid.

320
00:18:56,360 --> 00:18:59,510
>> Nad on saanud palju parem sellest hiljuti, kuid see oli varem nii

321
00:18:59,510 --> 00:19:04,870
et kui sa tahad, et vältida oma sõpru näha fotosid,

322
00:19:04,870 --> 00:19:08,280
sa pead läbi minema väga keeruline 5-astmeline protsess on nagu,

323
00:19:08,280 --> 00:19:11,150
andke mulle klõpsate seda linki, nüüd andke mulle klõpsake uuesti, andke mulle klõpsake uuesti,

324
00:19:11,150 --> 00:19:13,420
Lubage mul täpsustada, mida inimesed ei näe oma fotod.

325
00:19:13,420 --> 00:19:17,250
See ei ole eriti hea Facebookis oma osa

326
00:19:17,250 --> 00:19:20,530
sest nii palju kasutaja kogemus tegelikult, andes neile vabaduse

327
00:19:20,530 --> 00:19:22,460
kontrollida, mida inimesed näevad.

328
00:19:22,460 --> 00:19:25,550
Me nimetame seda kasutajate kontroll ja vabadus.

329
00:19:25,550 --> 00:19:31,090
Kui sa ei lase oma kasutajad seda teha viisil, mis on tõhus ja intuitiivne,

330
00:19:31,090 --> 00:19:34,570
siis teie kasutaja kogemus ei ole tegelikult nii suur üldse.

331
00:19:34,570 --> 00:19:38,200
 Kas te kutid meeldib öelda midagi Facebook?

332
00:19:38,700 --> 00:19:41,420
Kuidas sellest lahti saada?

333
00:19:41,420 --> 00:19:46,290
[Ong] Sa ei saa seda välja lülitada, ja see on suur kasutatavus viga poolse Facebook.

334
00:19:46,290 --> 00:19:49,410
See funktsioon - ma tegelikult vaatasin seda eile -

335
00:19:49,410 --> 00:19:53,940
see on nii, et te ei saa seda teha või ta on maetud kusagil väga sügaval

336
00:19:53,940 --> 00:19:58,050
süvendite Facebook, sest ma ei saa aru, kuidas seda funktsiooni üldse.

337
00:19:58,050 --> 00:20:00,400
[Malan] Aga mõnikord need otsused ei ole selge

338
00:20:00,400 --> 00:20:03,890
sest kutid on andnud meile palju kasulikku tagasisidet erinevate CS50 rakendused

339
00:20:03,890 --> 00:20:05,710
ja veebilehed, et loomulikult kasutab.

340
00:20:05,710 --> 00:20:10,260
Me ei ole rakendanud kõiki neid taotlusi ja ettepanekuid.

341
00:20:10,260 --> 00:20:14,550
>> Osa sellest on saada nii palju taotlusi, et see on ajas

342
00:20:14,550 --> 00:20:17,070
kuid mõnikord me lihtsalt teha teadlikku otsust nagu,

343
00:20:17,070 --> 00:20:19,830
"Tänan soovituse, kuid me ei nõustu."

344
00:20:19,830 --> 00:20:24,350
Niisiis, kuidas sa tegelikult otsustada, mida sa peaksid tegema, kui teie kasutajad arvan, et sa peaksid tegema midagi

345
00:20:24,350 --> 00:20:28,110
isegi kui sa ei ole tingimata?

346
00:20:28,110 --> 00:20:32,360
See on habras tasakaal tegelikult kuulata, mida oma kasutajatele öelda

347
00:20:32,360 --> 00:20:35,840
ja tegelikult kellel mingi rida, kus te ütlete,

348
00:20:35,840 --> 00:20:37,750
"Me ei kavatse teha seda, mida need kasutajad ütlevad."

349
00:20:37,750 --> 00:20:42,520
Ja eriti, ma arvan, et seal oli tsitaat Henry Ford, mis võtab selle üles päris hästi.

350
00:20:42,520 --> 00:20:47,130
"Kui ma palusin inimesi, mida nad tahtsid, oleksid nad ütlesid, et nad tahtsid kiiremini hobused."

351
00:20:47,130 --> 00:20:51,840
Kas keegi omamoodi tease peale, mida see tsitaat tegelikult tähendab?

352
00:20:51,840 --> 00:20:56,060
See ei ole lihtsalt, et kasutajad teavad, mida nad tahavad,

353
00:20:56,060 --> 00:20:59,180
aga see on rohkem, et -

354
00:20:59,180 --> 00:21:02,720
[Üliõpilane] Nad ei tea, mida on võimalik.

355
00:21:02,720 --> 00:21:06,140
Osalt nad ei tea, mis on võimalik.

356
00:21:07,880 --> 00:21:11,440
Tease, et peale natuke rohkem. Mida sa sellega mõtled?

357
00:21:11,440 --> 00:21:21,340
[Kuuldamatu õpilase vastus]

358
00:21:21,340 --> 00:21:25,770
See on hea. Mida ma arvan, et oleme püüdnud öelda, siin on see, et inimesed teavad, mida nad tahavad.

359
00:21:25,770 --> 00:21:28,050
Nad tahavad kiiremini hobused.

360
00:21:28,050 --> 00:21:29,840
Mida nad tegelikult tahavad on võime liikuda kiiremini,

361
00:21:29,840 --> 00:21:32,310
kuid nad ei tea keskmise millega seda teha.

362
00:21:32,310 --> 00:21:36,330
Kui sa tuled oma kasutajate ja oma kasutajate sulle midagi öelda

363
00:21:36,330 --> 00:21:39,700
ja nad ütlevad sulle: "Me tahame need funktsioonid ja nende funktsioonide ja nende funktsioonide"

364
00:21:39,700 --> 00:21:42,650
sa ei taha tingimata mõtlema: "Lase mind minna

365
00:21:42,650 --> 00:21:44,720
"Ja rakendada, mida nad selgesõnaliselt öelda,"

366
00:21:44,720 --> 00:21:48,610
aga mida sa tahad mõelda on, "Millist ideid ma saan sellest?"

367
00:21:48,610 --> 00:21:50,450
Mida nad tegelikult tahavad?

368
00:21:50,450 --> 00:21:55,560
>> Ja sealt see, mida saate teha, on luua midagi, mis vastab nendele taotlustele

369
00:21:55,560 --> 00:22:00,340
kuid mitte tingimata nii, et kasutaja loodab, et see saab täidetud.

370
00:22:00,340 --> 00:22:03,830
Nii midagi lõplikku projektid, väga reaalne,

371
00:22:03,830 --> 00:22:07,900
Mis on kasulik heuristiline kui tegemist teha midagi paremat,

372
00:22:07,900 --> 00:22:10,630
eriti siis, kui projekteerija on see ülbus temast

373
00:22:10,630 --> 00:22:14,360
millega sa omamoodi tean, mis on parim, võite võtta panus oma kasutajate,

374
00:22:14,360 --> 00:22:16,580
aga kuidas sa tegelikult minna saan, et tagasisidet?

375
00:22:16,580 --> 00:22:21,610
Finaalis projektid, väga konkreetselt, mida toodab optimaalsed tulemused siin?

376
00:22:21,610 --> 00:22:25,030
Mis tekitab optimaalsed tulemused - ja ma lähen üle käesoleva aasta teise -

377
00:22:25,030 --> 00:22:29,190
on see protsess arendada ja siis katsetamise ja siis itereerimise.

378
00:22:29,190 --> 00:22:32,020
Mida mõtlen, testimine on tavaliselt siis, kui sa disaini midagi

379
00:22:32,020 --> 00:22:36,970
sa arvad, et see on üsna hea, nagu: "Ma olen nii suur disainer. kõik läheb armastan seda."

380
00:22:36,970 --> 00:22:41,600
Ja siis paned ta sinna ja inimesed tõesti ei meeldi see mingil põhjusel.

381
00:22:41,600 --> 00:22:46,820
Mida sa pead tegema, on teil võtta osa asju, mida inimesed ei meeldi

382
00:22:46,820 --> 00:22:49,180
ja uuendada asju, mis inimestele ei meeldi.

383
00:22:49,180 --> 00:22:53,080
See kõlab väga selge protsess, kuid see protsess pidevalt itereerimise

384
00:22:53,080 --> 00:22:55,980
peal, mida olete juba ehitatud on protsess, mis aitab teil

385
00:22:55,980 --> 00:22:59,730
mitte ainult viimistleda oma disaini oskusi, vaid ka aitab teil täpsustada disain

386
00:22:59,730 --> 00:23:03,790
nii et inimesed tegelikult hindame oma toodet isegi rohkem, kui nad tegid enne.

387
00:23:03,790 --> 00:23:07,390
>> Ma lähen üle rohkem konkreetseid näiteid, mida sa võiksid tegelikult teevad.

388
00:23:07,390 --> 00:23:11,390
Nagu omamoodi viimane näide tootest, vaatame süst.

389
00:23:11,390 --> 00:23:14,970
SÜSTA kui ta tuli välja oli väga populaarne.

390
00:23:14,970 --> 00:23:18,760
Kas keegi arvata miks?

391
00:23:18,760 --> 00:23:20,950
Millised on igasuguseid asju, mida meeldib see, kui olete kasutanud seda

392
00:23:20,950 --> 00:23:23,990
või millised on igasuguseid asju sulle ei meeldi?

393
00:23:23,990 --> 00:23:31,590
Jah. >> [Kuuldamatu õpilase vastus] >> Okei.

394
00:23:31,590 --> 00:23:34,730
See on osa sellest on üürile kasutaja on päring, mis on rohkem ekspansiivne

395
00:23:34,730 --> 00:23:38,150
kui väga kitsalt ühe samasuguse, "Sa pead valima endale alguskuupäev

396
00:23:38,150 --> 00:23:39,810
"Ja teil on valida oma lõppkuupäeva."

397
00:23:39,810 --> 00:23:44,910
Tegelikult, see võimaldab teil olla paindlik umbes see ja see annab sulle kõik lennud, mis ulatuvad.

398
00:23:44,910 --> 00:23:46,730
Midagi veel?

399
00:23:46,730 --> 00:23:50,530
[Üliõpilane] Nende hulka kuuluvad tasud hind.

400
00:23:50,530 --> 00:23:53,330
Nad teevad sisaldama tasusid hind.

401
00:23:53,330 --> 00:23:56,720
Maksud ja asjad tegelikult minna otse, et hind ülemises vasakus

402
00:23:56,720 --> 00:24:00,710
seda sa ei ole ekslikult mõtlesin, et sa oled tegelikult maksab $ 240 lendu

403
00:24:00,710 --> 00:24:03,280
kui see on tõesti 330 $.

404
00:24:03,280 --> 00:24:06,200
Midagi veel? Jah.

405
00:24:06,200 --> 00:24:10,140
[Kuuldamatu õpilase vastus]

406
00:24:10,140 --> 00:24:14,610
Ma ei ole kindel, kas nad tegelikult sul seda teha lasta.

407
00:24:14,610 --> 00:24:18,310
Ma võiks olla vale.

408
00:24:18,310 --> 00:24:23,360
See võib olla huvitav asi kui sa tahad panna rohkem rõhku eelkõige filtrid

409
00:24:23,360 --> 00:24:27,000
et nad push seotud tulemused, mis filtreerivad üles.

410
00:24:27,000 --> 00:24:31,920
Aga kas keegi mulle öelda mis on nii erilist sellest vasakul?

411
00:24:31,920 --> 00:24:39,540
Kuidas sa traditsiooniliselt otsida lennuga internetiteenuse enne seda?

412
00:24:41,600 --> 00:24:44,650
>> Jah. >> [Kuuldamatu õpilase vastus] >> Kas oskate öelda, et -

413
00:24:44,650 --> 00:24:47,530
[Üliõpilane] Iga lennufirma. >> Jah. Kõik lennuettevõtjad on oma veebilehel.

414
00:24:47,530 --> 00:24:50,110
See kindlustab asju. Ja?

415
00:24:50,110 --> 00:24:52,190
[Üliõpilane] Sa tead täpselt, mis kell sa lahkud.

416
00:24:52,190 --> 00:24:54,460
Sa ei tea täpselt, mis kell sa lahkud,

417
00:24:54,460 --> 00:24:59,380
kuid on seotud filtreid eriti.

418
00:25:00,710 --> 00:25:03,540
Las ma tõmba süst.

419
00:25:11,490 --> 00:25:14,020
Oh Jumal, pop-ups. Bad kasutaja kogemus.

420
00:25:14,020 --> 00:25:17,230
Mis juhtub, kui ma liigutan seda liugurit?

421
00:25:17,230 --> 00:25:21,010
[Üliõpilane] Automaatne uuendamine. >> [Ong] Automaatne uuendamine.

422
00:25:21,010 --> 00:25:23,440
See on midagi, mis on väga oluline.

423
00:25:23,440 --> 00:25:25,380
Enne seda, kui sa tahad otsida lennu

424
00:25:25,380 --> 00:25:28,410
sa olid panna oma panuse asukoht, oma toodangu kohta, vajutage Otsi,

425
00:25:28,410 --> 00:25:31,190
ta töötleb seda ja näidata oma tulemusi.

426
00:25:31,190 --> 00:25:34,120
Kui sa tahad muuta oma päring, siis oleks vajutage kaks korda edasi,

427
00:25:34,120 --> 00:25:39,770
sisestada uus päring nullist, ja siis tee seda ikka ja jälle.

428
00:25:39,770 --> 00:25:43,910
Tore asi midagi sellist on ta kasutab väga [arusaamatu] asi keskel.

429
00:25:43,910 --> 00:25:46,230
Kui sa midagi sellist teha, see laseb välja taotluse

430
00:25:46,230 --> 00:25:48,420
ja ta naaseb teid kõiki tulemusi kohe.

431
00:25:48,420 --> 00:25:51,680
Selline vahetu tagasiside on midagi, mida teha SÜSTA metsikult populaarne

432
00:25:51,680 --> 00:25:55,910
sest see on tõesti lihtne minu jaoks lihtsalt muuta oma päring

433
00:25:55,910 --> 00:25:58,890
ja aru saada asjadest, mis on umbes erilist valikut

434
00:25:58,890 --> 00:26:01,950
ilma minna edasi ja tagasi, edasi ja tagasi, edasi ja tagasi.

435
00:26:01,950 --> 00:26:05,200
Nii et need on igasuguseid asju sa tahad mõelda, kui olete projekteerimisel oma veebilehel.

436
00:26:05,200 --> 00:26:08,930
Kuidas ma saan teha, on väga tõhus minu kasutajad läbima iganes nad töötavad

437
00:26:08,930 --> 00:26:13,010
ja saada oma Lõppeesmärk võimalikult kiiresti?

438
00:26:13,010 --> 00:26:16,430
[Malan] Ja Joosepi punkt varem umbes kasutajad ei pruugi teada, mida nad tahavad,

439
00:26:16,430 --> 00:26:18,640
selle põhjal, mida te nüüd teada HTML

440
00:26:18,640 --> 00:26:22,780
ja teil on ruudud, nööpe, valige menüüsid, sisestusväljad jms,

441
00:26:22,780 --> 00:26:26,140
kuidas te ellu mõiste korjamine algusaeg lend?

442
00:26:26,140 --> 00:26:30,030
>> Mis nende erinevate UI mehhanisme oleks te kasutate?

443
00:26:30,030 --> 00:26:34,100
Kui sa just teada summa HTML et õpetati enne

444
00:26:34,100 --> 00:26:39,070
ja sa tead sisendid on raadio nupud, ruudud, drop-mõõnad, ja sisend kasti,

445
00:26:39,070 --> 00:26:43,320
milline oleks teie loomulik valik olnud kuupäeva valimiseks?

446
00:26:43,320 --> 00:26:48,670
[Üliõpilane] lülitada. >> Sisend. Või äkki isegi rippmenüü kõigi kuupäevade, eks?

447
00:26:48,670 --> 00:26:53,170
Nii keerukam UI mehhanismid nagu see vasakul pool, mida saab rakendada,

448
00:26:53,170 --> 00:26:55,500
saad teha seda protsessi palju intuitiivsem liugurit

449
00:26:55,500 --> 00:27:01,020
sest aeg on pidev ja inimesed tavaliselt ei mõtle seda nii diskreetne tükkideks.

450
00:27:01,020 --> 00:27:04,950
Hea küll. Viimane asi.

451
00:27:04,950 --> 00:27:07,370
Kümme kasutatavus heuristika.

452
00:27:07,370 --> 00:27:10,820
Kõik asjad, mida me rääkisime ilmselt kuulu ühtegi neist kategooriatest.

453
00:27:10,820 --> 00:27:14,420
Kui te lähete seda linki, mis saidid pannakse online,

454
00:27:14,420 --> 00:27:18,900
teil tegelikult olema võimalik, nagu te disaini oma kodukale, hoida neid heuristika meeles

455
00:27:18,900 --> 00:27:21,330
ja need rusikareeglid.

456
00:27:21,330 --> 00:27:26,610
Oma projekte, mida ma soovitan teil teha, et töötada oma app parem

457
00:27:26,610 --> 00:27:28,850
on teha paberkandjal prototüüpide esimene.

458
00:27:28,850 --> 00:27:32,150
Kui sa mõtled oma taotluse, väga kiiresti visandada, mida sa tahad seda nägema

459
00:27:32,150 --> 00:27:36,230
ja veenduge, et kõik lahtrid on korraldatud viisil, mis on väga intuitiivne kasutaja kasutada

460
00:27:36,230 --> 00:27:39,820
ja isegi näidata neid paberile prototüüpe oma sõprade ja alustada fookusgrupid.

461
00:27:39,820 --> 00:27:44,230
Lihtsalt saada 2 või 3 inimest koos ja paluda neil lihtsalt puuduta need paberile prototüüpe,

462
00:27:44,230 --> 00:27:47,650
ja näidata neile uued ekraanid, et näha, kui nad tegelikult aru, mis toimub.

463
00:27:47,650 --> 00:27:50,680
>> Mida sa tahad teha, on anda neile ülesanne, motiveerida, et ülesanne,

464
00:27:50,680 --> 00:27:53,270
ja just neile rakendust ja lase neil seda kasutada.

465
00:27:53,270 --> 00:27:56,530
Ära anda neile juhiseid kaugemale.

466
00:27:56,530 --> 00:28:00,920
Sa tahad tegelikult lasta neil suhelda oma app viisil, mis võimaldab teil vaadata

467
00:28:00,920 --> 00:28:03,870
kuidas nad seda kasutada kui sa ei seisa kõrval.

468
00:28:03,870 --> 00:28:05,250
Ja see on väga oluline.

469
00:28:05,250 --> 00:28:08,780
See annab teile palju teadmisi, et on inimesi liikumisvahend eriti asju

470
00:28:08,780 --> 00:28:10,560
nii, et ma ei kavatse neid?

471
00:28:10,560 --> 00:28:14,680
Kas nad kasutavad eelkõige UI mehhanismid ekraanil

472
00:28:14,680 --> 00:28:17,490
viisil, mis on omamoodi hacky?

473
00:28:17,490 --> 00:28:22,020
Ma ei kavatse neid tee seda sel moel.

474
00:28:22,020 --> 00:28:23,940
Ja kui sa oled teinud selle, mida sa teha tahad?

475
00:28:23,940 --> 00:28:26,010
Sinu disain kivid, eks?

476
00:28:26,010 --> 00:28:29,600
Mida sa tahad teha, on soovid töötada ja siis tee seda protsessi uuesti.

477
00:28:29,600 --> 00:28:32,110
Nii näitavad, et sõbrad, kui olete töötanud see, test,

478
00:28:32,110 --> 00:28:36,630
arendada, testida, arendada, testida, itereerima, edasi ja edasi ja edasi.

479
00:28:36,630 --> 00:28:39,720
Disain on väga iteratiivne protsess selles mõttes.

480
00:28:39,720 --> 00:28:43,280
Sa tegelikult on ehitada midagi ja siis taipan asju see

481
00:28:43,280 --> 00:28:46,520
et sa ei teadnud varem ja minna tagasi ja parandada selle.

482
00:28:46,520 --> 00:28:50,890
Nüüd, kui arengu osa, see on, mida Tommy läheb näidata teile pärast vaheaega

483
00:28:50,890 --> 00:28:53,220
ja kuidas sa võiksid rakendada midagi automaatteksti

484
00:28:53,220 --> 00:28:56,610
viisil, mis on üsna lihtne.

485
00:28:57,440 --> 00:28:59,550
[Malan] Nagu Tommy luuakse siin, küsimus siis.

486
00:28:59,550 --> 00:29:03,780
Palju varem veebilehed - ja kui Joosep ütles 1990ndate stiilis koduleheküljel,

487
00:29:03,780 --> 00:29:07,640
see oli rakendusi kus kui sa tahad valida algus ja lõpp,

488
00:29:07,640 --> 00:29:10,380
ausalt öeldes juba järgmisel päeval ja isegi mõned veebilehed täna,

489
00:29:10,380 --> 00:29:13,220
kuidas sa seda teha on valite tund rippmenüüst,

490
00:29:13,220 --> 00:29:15,910
valid minuti kaugusel rippmenüüst, äkki sa valida AM, PM,

491
00:29:15,910 --> 00:29:17,440
ja siis sa seda veel 3 korda.

492
00:29:17,440 --> 00:29:19,920
Ja nii on 6 klikke ja võibolla mõned kerimine

493
00:29:19,920 --> 00:29:24,000
oma kasutaja võib tegelikult anda mingit kuupäeva ja / või kellaaja vahemik selles mõttes.

494
00:29:24,000 --> 00:29:27,920
>> Nii et kindlasti optimaalne ja veel siiani oleme näinud ühtegi väljendusrikas võimeid

495
00:29:27,920 --> 00:29:30,330
üheski keeles me vaatasime midagi seksikam

496
00:29:30,330 --> 00:29:32,620
nagu see liugur on algus ja lõpp.

497
00:29:32,620 --> 00:29:36,290
Aga kui sa arvad tagasi nädal 0, kui me rääkisime Scratch,

498
00:29:36,290 --> 00:29:39,080
ka seal ei olnud vidinate lihtsalt ei teatud asju.

499
00:29:39,080 --> 00:29:42,700
Sa tõesti lihtsalt pidin need põhialuste nagu silmad ja tingimused jms.

500
00:29:42,700 --> 00:29:46,910
Nii kena lihtsalt mõtlesin väga abstraktselt nüüd, sõltumatud andmed HTML,

501
00:29:46,910 --> 00:29:51,260
Mis tegelikult toimub koos midagi sellist algus-ja lõpuaeg liugur?

502
00:29:51,260 --> 00:29:54,960
Kui ma liikuda mu hiir ja ma vajutan et vähe porgand sümbol vasakul

503
00:29:54,960 --> 00:29:59,220
ja alustada tõmmates, programmiliselt, mis see on, mida soovite, et oleks võimalik rakendada

504
00:29:59,220 --> 00:30:01,000
see teoks saab?

505
00:30:01,000 --> 00:30:04,920
Milliseid küsimusi, mida Loogiline väljendeid sa tahad, et oleks võimalik küsida?

506
00:30:04,920 --> 00:30:06,930
Mis tegelikult toimub? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Üliõpilane] Kus kursori? >> Hea. Kus on kursori?

508
00:30:10,080 --> 00:30:11,970
See oli midagi, meil oli vaja väljendada tagasi Scratch,

509
00:30:11,970 --> 00:30:14,690
kas see põhineb asukoha või isegi värvi vms.

510
00:30:14,690 --> 00:30:18,410
Võite meenutada kunagi nii lühidalt esmaspäeval oli kõik need asjad mida nimetatakse sündmused

511
00:30:18,410 --> 00:30:22,370
maailma Web, ja nii pole asjad onclick ja onkeypress

512
00:30:22,370 --> 00:30:25,960
ja onkeyup ja onmouseover ja onMouseOut.

513
00:30:25,960 --> 00:30:29,130
Nii mõistad, et isegi need asjad oleme olnud võttes iseenesestmõistetavana veebis

514
00:30:29,130 --> 00:30:32,190
koos saidid nagu Facebook ja Gmail, isegi kui sul pole aimugi

515
00:30:32,190 --> 00:30:34,890
kuidas oleks võimalik rakendada, sest seal on midagi isegi nagu see loeng

516
00:30:34,890 --> 00:30:38,570
või Ülesanded 7, mõista, et neid täpselt sama alustele,

517
00:30:38,570 --> 00:30:41,090
HTTP ja parameetrid ja GET ja POST,

518
00:30:41,090 --> 00:30:44,010
koos lihtsa HTML sisendite et me vaatasime seni

519
00:30:44,010 --> 00:30:47,690
ja hetk programmiline mehhanismid, et Tommy umbes tutvustada

520
00:30:47,690 --> 00:30:51,300
Kas hakkate ennast väljendada nii nagu sa tegid nädal 0

521
00:30:51,300 --> 00:30:53,800
poolt väga intuitiivselt pukseerige.

522
00:30:53,800 --> 00:30:58,950
>> Nii et öelda, Tommy MacWilliam ja mõned uued puzzle tükki meie jaoks veebi.

523
00:30:58,950 --> 00:31:03,450
Hea küll. Minu nimi on Tommy ja ma lähen rääkima JavaScript.

524
00:31:03,450 --> 00:31:07,150
Lihtsalt disclaimer: ma olen arvamusel, et JavaScript on parim programmeerimiskeelt

525
00:31:07,150 --> 00:31:09,010
kogu kogu maailmas.

526
00:31:09,010 --> 00:31:11,940
Seal on palju inimesi, kes ei nõustu minuga, aga see on lihtsalt hämmastav.

527
00:31:11,940 --> 00:31:16,330
Kui sa lähed tagasi C, kui teil on kirjutada C teise klassi või mõne muu keele,

528
00:31:16,330 --> 00:31:19,780
see on lihtsalt masendav kõigis madala üksikasjad pead Tyssätä sisse

529
00:31:19,780 --> 00:31:23,050
Seega, kui olete kunagi tunne kurb, kuidas tüütu C on kirjutada,

530
00:31:23,050 --> 00:31:25,130
lihtsalt tagasi minna, kirjutada mõned JavaScript. See on nirvaana.

531
00:31:25,130 --> 00:31:27,980
Sul end palju paremini oma halb päev.

532
00:31:27,980 --> 00:31:31,900
Palju võlu JavaScript pärineb tema võime manipuleerida asjad

533
00:31:31,900 --> 00:31:33,730
mis on juba sellel lehel.

534
00:31:33,730 --> 00:31:38,520
Kui me kirjutas meie scripte, neid teostatakse serveris,

535
00:31:38,520 --> 00:31:42,270
ja lõpuks, et PHP skripti ilmselt väljastada mõned HTML.

536
00:31:42,270 --> 00:31:45,860
See HTML saadeti klient, ja siis oligi kõik.

537
00:31:45,860 --> 00:31:50,180
Kui PHP soovis lisada nuppu lehe, näiteks, ei saa tõesti teha.

538
00:31:50,180 --> 00:31:54,350
See oleks muuta täiesti uue HTML-faili ja saadab selle brauserile.

539
00:31:54,350 --> 00:31:57,840
Mis JavaScript me teame, et me saaksime uuendada asju, kui nad on juba lehel

540
00:31:57,840 --> 00:32:00,840
ja tänu sellele saame pakkuda palju kohest tagasisidet,

541
00:32:00,840 --> 00:32:06,150
mis tõesti parandada kasutaja kogemus meie veebilehel.

542
00:32:06,150 --> 00:32:09,330
Lihtsalt kiire sulgege JavaScript selektorid.

543
00:32:09,330 --> 00:32:11,590
Me teame, et kui me alla laadida HTML-lehe,

544
00:32:11,590 --> 00:32:13,890
et saab olema esindatud DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM meeles on ainult see suur puu, kus elemendid on seotud selle suure hierarhia.

546
00:32:19,340 --> 00:32:21,810
Kui me koos töötanud andmebaaside pset 7,

547
00:32:21,810 --> 00:32:26,280
üks esimesi asju meil vaja teada, kuidas seda teha oli päringuid andmebaasi.

548
00:32:26,280 --> 00:32:29,060
Meil on see suur kasutajate tabelis, ja mõnikord me lihtsalt tahan öelda,

549
00:32:29,060 --> 00:32:33,260
"Ma tahan ainult mõned neist kasutajate loend, kes vastavad teatud tingimus."

550
00:32:33,260 --> 00:32:36,020
Ka siis, kui meil on DOM peame mingi võimalus päringute ta.

551
00:32:36,020 --> 00:32:39,490
Me vajame viis öelda: "Ma tahan kõiki nuppe mis näeb välja selline

552
00:32:39,490 --> 00:32:41,860
"Või kõikide piltide lehel."

553
00:32:41,860 --> 00:32:44,330
Ja need valijad võimaldab meil seda teha.

554
00:32:44,330 --> 00:32:45,690
Nii lihtsalt kiire sulgege.

555
00:32:45,690 --> 00:32:50,770
See esimene siin, see # esitada, mis see läheb valima? Kas keegi mäletab?

556
00:32:50,770 --> 00:32:54,880
[Kuuldamatu õpilase vastus] >> Jah, täpselt.

557
00:32:54,880 --> 00:32:59,510
See saab valida element lehel, mis on ID esitama.

558
00:32:59,510 --> 00:33:03,470
Ja nii et räsi tag ütleb, et see valija läheb tööle koos IDd.

559
00:33:03,470 --> 00:33:07,630
Kuidas teine, see. Keskne, millised on, et valida?

560
00:33:11,360 --> 00:33:15,180
Jah. >> [Üliõpilane] Klass. >> Täpselt. See on nüüd valida kaupa.

561
00:33:15,180 --> 00:33:18,840
Vahe ID ja klassi siin on üldiselt ID peaks olema unikaalne

562
00:33:18,840 --> 00:33:20,820
jooksul mis tahes ruumi, mida te otsite üle.

563
00:33:20,820 --> 00:33:23,080
Nii et kui sa olid otsivad üle kogu veebilehe,

564
00:33:23,080 --> 00:33:27,740
sa tõesti peaks ainult 1 elementi, et teatud ID, nii et antud juhul esitama.

565
00:33:27,740 --> 00:33:31,330
Mis klassid, teisest küljest, meil on rohkem kui 1 osa samal lehel

566
00:33:31,330 --> 00:33:33,130
sama klassi.

567
00:33:33,130 --> 00:33:36,580
See võib olla kasulik öeldes ma tahan valida kõike, mis on keskendunud leht

568
00:33:36,580 --> 00:33:38,450
mitte ainult 1 asi.

569
00:33:38,450 --> 00:33:40,310
>> Ja lõpuks, see viimane siin on veidi keerulisem,

570
00:33:40,310 --> 00:33:43,890
aga mida see läheb valida DOM?

571
00:33:46,650 --> 00:33:48,810
[Kuuldamatu õpilase vastus] >> Mis see on?

572
00:33:48,810 --> 00:33:53,250
[Üliõpilane] Midagi, mis on silt. >> Meil ​​on 2 osa siin.

573
00:33:53,250 --> 00:33:58,070
Teine osa on öelda tahan valida need sildid sildi sisend,

574
00:33:58,070 --> 00:34:00,730
nii mõni säte, mis on sisend tag.

575
00:34:00,730 --> 00:34:03,080
Aga ma ei taha lihtsalt valida kõik sisendid

576
00:34:03,080 --> 00:34:05,170
sest midagi submit nupp võiks olla sisend

577
00:34:05,170 --> 00:34:08,409
ja midagi tekstiväljale võiks olla sisend.

578
00:34:08,409 --> 00:34:11,909
Nii et need nurksulud ma väidan ma tahan ainult valida need elemendid

579
00:34:11,909 --> 00:34:14,110
et tüübiks on tekst.

580
00:34:14,110 --> 00:34:17,400
Kuskil minu HTML teegid Mul on atribuut nimega tüüp,

581
00:34:17,400 --> 00:34:19,750
ja väärtus, et atribuut peab olema tekst.

582
00:34:19,750 --> 00:34:21,340
Niisiis, kuidas see esimene osa siin?

583
00:34:21,340 --> 00:34:25,489
Esimene sõna selle valijat on vormis, siis on mul ruumi ja siis selle sisendi osa.

584
00:34:25,489 --> 00:34:29,620
Mida see teeb, pannes vormi ees on?

585
00:34:33,409 --> 00:34:35,860
See saab põhimõtteliselt piirata oma päring.

586
00:34:35,860 --> 00:34:38,510
See võiks olla nii, et meil on mõned sisendid lehel

587
00:34:38,510 --> 00:34:41,080
mis ei ole järeltulijad vormi.

588
00:34:41,080 --> 00:34:46,150
Mis see teha on see öelda, et ma tahan ainult sisend sildid, mis on kusagil nende kohal

589
00:34:46,150 --> 00:34:49,030
mõned vanem element kujul.

590
00:34:49,030 --> 00:34:52,100
Ja nii sel viisil saame neid rohkem hierarhiline päringut

591
00:34:52,100 --> 00:34:55,000
nii et me ei ole lihtsalt valida kõik sobivad antud valijat.

592
00:34:55,000 --> 00:35:00,760
Saame liiki piirata, et päringu midagi muud.

593
00:35:00,760 --> 00:35:04,000
Nüüd, et me teame, kuidas valida elemendid lehel,

594
00:35:04,000 --> 00:35:06,780
Räägime natuke AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX on veel väga trendikas lühend, mis tähistab asünkroonne JavaScript ja XML.

596
00:35:12,270 --> 00:35:15,640
See lihtsalt nii juhtub, et XML on lihtsalt kuidagi andmete esitamiseks.

597
00:35:15,640 --> 00:35:20,920
>> Selline kaotanud populaarsust hiljuti, nii X AJAX ei kasutata kogu aeg.

598
00:35:20,920 --> 00:35:26,220
Põhimõtteliselt, mida AJAX võimaldab meil teha on teha HTTP päringuid

599
00:35:26,220 --> 00:35:28,620
kontekstist tulenevalt JavaScript.

600
00:35:28,620 --> 00:35:32,310
Kui me oleme oma veebibrauser ja me navigeerida ümber lehekülgedel ja me klõpsate linki,

601
00:35:32,310 --> 00:35:37,790
mida meie brauseri läheb selleks vaja on teha HTTP päringu mis iganes link me klõpsake.

602
00:35:37,790 --> 00:35:41,670
Aga see pole alati ideaalne, sest kui see on nii, siis nagu David ütles,

603
00:35:41,670 --> 00:35:45,220
meil on alati teha kasutaja klõpsab nuppu Esita või klõpsata linki

604
00:35:45,220 --> 00:35:50,380
et teha midagi juhtuda, et läheb kaasa HTTP taotluse.

605
00:35:50,380 --> 00:35:54,160
Nii AJAX me saame nende taotlused nimel JavaScript.

606
00:35:54,160 --> 00:35:57,020
See tähendab, et kui kasutaja suhtleb leht või midagi juhtub,

607
00:35:57,020 --> 00:36:01,780
saame tegelikult teha programmiline taotluse mõne muu PHP fail meie kodulehel

608
00:36:01,780 --> 00:36:06,280
või midagi muud ja otsida andmeid, et see fail sülitab välja.

609
00:36:06,280 --> 00:36:09,860
Võtame pilk näiteks AJAX.

610
00:36:09,860 --> 00:36:16,140
See on meie CS50 Finance lehele, mis loodetavasti mõned meist on tuttav.

611
00:36:16,140 --> 00:36:21,790
Kui me vaatame HTML sellest lehest, me näeme siin, et olen lisanud mõned asjad,

612
00:36:21,790 --> 00:36:23,820
üks, mida ma olen andnud selle vormi ID.

613
00:36:23,820 --> 00:36:26,480
Ma olen öelnud id = "vorm-quote".

614
00:36:26,480 --> 00:36:31,910
Olen teinud seda lihtsalt sellepärast, et ta läheb teeb see natuke lihtsam valida DOM

615
00:36:31,910 --> 00:36:35,090
kuna ma lihtsalt teha väga lihtsa päringu.

616
00:36:35,090 --> 00:36:38,960
Mida ma tahan teha siin ma tahan määrata mõned probleem CS50 rahandusministeerium.

617
00:36:38,960 --> 00:36:41,550
Nii et kui me läheme finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
iga kord kui ma tahan saada hinnapakkumist, pean klõpsama selle Saa Quote nuppu,

619
00:36:45,700 --> 00:36:48,960
ja mis Saa Quote nuppu siis võtab mind teise terve lehekülg.

620
00:36:48,960 --> 00:36:52,400
Ja kui ma tahan teist tsiteerida, mul on tabanud nuppu Tagasi ja siis ma kirjuta see,

621
00:36:52,400 --> 00:36:54,480
Ma saan tsiteerida, ja ma tabanud nuppu Back.

622
00:36:54,480 --> 00:36:56,840
See tõesti ei ole parim kasutaja kogemus.

623
00:36:56,840 --> 00:37:01,570
Kes oleks tõesti kasutada saidil, kui see on see aeglane, et saada aktsiate hinnad?

624
00:37:01,570 --> 00:37:05,630
Mida me tahame teha AJAX on eemaldada, et samm läheb eraldi lehele

625
00:37:05,630 --> 00:37:08,410
selleks et vaadata tulemusi.

626
00:37:08,410 --> 00:37:11,240
>> Mida me tegelikult ainult küsida on see, et tõesti väike hind,

627
00:37:11,240 --> 00:37:14,240
ja see on ainult väga väike hulk andmeid.

628
00:37:14,240 --> 00:37:17,400
Nii et pole mul vaja minna teise kogu HTML lehe,

629
00:37:17,400 --> 00:37:20,670
laadida kogu uus partii HTML, võibolla alla veel mõned pildid,

630
00:37:20,670 --> 00:37:24,410
mõned teised CSS faile ainult mulle vastata, et väga lihtne küsimus

631
00:37:24,410 --> 00:37:27,810
ja kui palju see varu maksumus.

632
00:37:27,810 --> 00:37:31,000
AJAX saame teha seda palju lihtsam.

633
00:37:31,000 --> 00:37:36,400
Me näeme siin all, et ma ühendamiseks JavaScript fail nimega quote.js.

634
00:37:36,400 --> 00:37:40,140
Olgem tegelikult avada selle faili. Mitte sinna.

635
00:37:42,610 --> 00:37:45,860
Kõik mu JavaScript failid hakkavad asuma HTML

636
00:37:45,860 --> 00:37:47,630
nii et veebibrauser on sellele juurdepääs.

637
00:37:47,630 --> 00:37:50,330
Siis on meil eraldi kataloog siia JavaScript,

638
00:37:50,330 --> 00:37:54,340
ja nüüd siin on quote.js.

639
00:37:54,340 --> 00:38:00,930
Ülaosas seda faili see siin ütleb, et ma tahan ootama terve leht laaditakse

640
00:38:00,930 --> 00:38:04,830
enne kui ma üritan teha midagi. Miks on see vajalik?

641
00:38:04,830 --> 00:38:08,650
Tuleb välja, et järgmine asi, mida ma teen siin hakata otsima element

642
00:38:08,650 --> 00:38:10,810
et leidub mõni valijat.

643
00:38:10,810 --> 00:38:15,600
Kui see on siis JavaScript kunagi täidetakse enne seda elementi on koormatud lehel

644
00:38:15,600 --> 00:38:17,820
siis kõik, mida ma üritan teha ei kavatse töötada

645
00:38:17,820 --> 00:38:20,580
sest ma lähen proovin, et valida midagi, mis ei ole seal veel.

646
00:38:20,580 --> 00:38:23,780
Nii et see rivistama top ütleb, et ma tahan, et sa ootama, kuni kõik on laetud

647
00:38:23,780 --> 00:38:28,030
nii me garanteerida, et kõik elemendid Otsin tegelikult lehel.

648
00:38:29,730 --> 00:38:34,310
See dollari märk tähendab siin ma kasutan raamatukogu nimetatakse jQuery.

649
00:38:34,310 --> 00:38:38,570
See jQuery library võimaldab meil kasutada neid selektorid, et me lihtsalt vaatasime.

650
00:38:38,570 --> 00:38:44,010
Öeldes $ seejärel läbivad argumendina see # vormi-viitega,

651
00:38:44,010 --> 00:38:47,910
Ma nüüd valida, et vorm, et me lihtsalt vaatasin.

652
00:38:47,910 --> 00:38:52,290
Nüüd on mul tähendab selle vorm mälu kuidagi.

653
00:38:52,290 --> 00:38:56,760
>> Selle objekti nüüd, see esitus kujul,

654
00:38:56,760 --> 00:38:58,890
Ma olen nüüd kasutades funktsiooni kutsunud.

655
00:38:58,890 --> 00:39:02,710
Mida see funktsioon teeb, on see läheb lisada sündmus.

656
00:39:02,710 --> 00:39:06,310
Kui me ei kavatse kuulata on submit sündmus.

657
00:39:06,310 --> 00:39:08,890
Nii et kui kasutaja klõpsab et Submit nuppu või vajutab Enter,

658
00:39:08,890 --> 00:39:11,730
Sellisel juhul läheb tulistamiseks.

659
00:39:11,730 --> 00:39:16,390
Pannes sinna saan nüüd vaike käitumise vorm.

660
00:39:16,390 --> 00:39:19,770
Ilma selleta JavaScript, vorm oleks esitada sõltumata PHP fail

661
00:39:19,770 --> 00:39:22,110
me kasutada, et hagi atribuut.

662
00:39:22,110 --> 00:39:25,440
Kuid selle asemel, ma nüüd öelda, oota, oota, oota, ma ei taha, et sa tegelikult seda teha.

663
00:39:25,440 --> 00:39:31,140
Ma tahan, et see juhtuks enne kui minna ja proovida esitada mõned PHP faili.

664
00:39:31,140 --> 00:39:32,870
Mida ma nüüd teha tahad?

665
00:39:32,870 --> 00:39:39,270
Sel hetkel ma tahan kasutada AJAX kuidagi laadida millises hind varu on.

666
00:39:39,270 --> 00:39:44,170
Esimene asi, mida ma pean teadma, mida laos kasutaja soojaks.

667
00:39:44,170 --> 00:39:46,760
Selleks, et ma lähen kasutada teise valiku.

668
00:39:46,760 --> 00:39:49,020
See on kolmas valijat me vaatasime enne.

669
00:39:49,020 --> 00:39:54,460
See ütleb, et ma tahan, et alustad seda vormi elemendi ID vormi-viitega.

670
00:39:54,460 --> 00:39:58,440
Siis kuskil sees, et vorm peab leiduma sisend element

671
00:39:58,440 --> 00:40:01,270
mis on nime sümbol.

672
00:40:01,270 --> 00:40:05,460
Kui me vaatame tagasi meie HTML nägime, et meil oli input [nimi = sümbol].

673
00:40:05,460 --> 00:40:12,380
See tähendab, et see saab valida, et teksti kasti et kasutaja on kirjutades.

674
00:40:12,380 --> 00:40:13,870
See on kena. Meil on tekstikasti.

675
00:40:13,870 --> 00:40:17,360
Nüüd me lihtsalt vaja teada, mis sees on.

676
00:40:17,360 --> 00:40:20,290
Selleks, et me nimetame seda meetodit siin see. Val,

677
00:40:20,290 --> 00:40:23,240
ja see ütleb, et ma tean, mida tekstikasti olete.

678
00:40:23,240 --> 00:40:28,160
Ma tahan, et sa mulle öelda, mis see on kasutaja kirjutati, et tekstikasti.

679
00:40:28,160 --> 00:40:34,440
Nüüd on meil string nimega sümbol, mis on võrdne olenemata kasutaja sisestatud sisse

680
00:40:34,440 --> 00:40:39,820
See on kena. Me saame kasutada, et string nüüd, et meie taotlus.

681
00:40:39,820 --> 00:40:42,450
See on uus funktsioon siin, see $,

682
00:40:42,450 --> 00:40:44,900
välja arvatud me enam ei kavatse valida elemente,

683
00:40:44,900 --> 00:40:48,910
me ei kavatse olla kutsudes erinevad funktsioonid, mis on annab meile meie jQuery.

684
00:40:48,910 --> 00:40:54,810
See AJAX funktsioon on see, mis tegelikult toimub, et muuta see HTTP taotluse.

685
00:40:54,810 --> 00:40:57,000
Nii et me peame ütlema seda mõned asjad.

686
00:40:57,000 --> 00:41:01,410
Esimene asi, mida peame rääkima seda funktsiooni on koht, kus ma tahan taotlusel minna.

687
00:41:01,410 --> 00:41:08,910
Kuskil minu projekt on mul seda faili sees html kataloogi nimega quote.php.

688
00:41:08,910 --> 00:41:15,150
Ma ei pääse seda pilti nägime, just nagu see, kui ma lähen localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Ma tahan, et mu JavaScript esitada taotluse sellele lehele.

690
00:41:20,450 --> 00:41:22,920
Mis tüüpi taotluse nüüd?

691
00:41:22,920 --> 00:41:27,210
Me nägime enne, et vorm on see meetod = "post" atribuut,

692
00:41:27,210 --> 00:41:29,270
ja see tähendab, et see saab teha POST-taotluse,

693
00:41:29,270 --> 00:41:32,630
nii et see ei kavatse panna midagi URL, mitte GET taotluse,

694
00:41:32,630 --> 00:41:36,860
mis oleks lihtsalt vallandati, kui me lihtsalt külastatud lehekülje veebilehitseja, näiteks.

695
00:41:36,860 --> 00:41:41,260
Nüüd olen öelnud ma tahan teha HTTP POST päring

696
00:41:41,260 --> 00:41:44,840
lehele, mis asub quote.php.

697
00:41:44,840 --> 00:41:51,490
Kui me esitada vorm, mäletad me võiks juurdepääs sisend elemendid sees, mis moodustavad

698
00:41:51,490 --> 00:41:54,430
selle $ _POST muutuja.

699
00:41:54,430 --> 00:41:58,710
Seni on lugu me ei ole tegelikult saadetakse mööda mingeid andmeid veel.

700
00:41:58,710 --> 00:42:00,640
Me oleme lihtsalt ütlesin, et me teeme AJAX taotlus

701
00:42:00,640 --> 00:42:03,200
ja siin on taotluse liik teeme.

702
00:42:03,200 --> 00:42:07,090
Nüüd peame tegelikult saata mõned andmed lehele.

703
00:42:07,090 --> 00:42:10,930
Selleks, et saame kasutada seda vara kutsus andmed.

704
00:42:10,930 --> 00:42:14,950
Vara väärtuse selles on tegelikult assotsiatiivne massiiv.

705
00:42:14,950 --> 00:42:19,390
Selle põhjuseks on see võimaldab meil saata rohkem kui vaid 1 tükk andmed.

706
00:42:19,390 --> 00:42:24,750
Sellepärast on meil need looksulg siin pesitses sees neid teisi looksulg.

707
00:42:24,750 --> 00:42:29,680
Võtmeid nende assotsiatiivse massiivi saab olema sama asja

708
00:42:29,680 --> 00:42:32,630
kui need nimetus omistatakse meie vormi elemendid.

709
00:42:32,630 --> 00:42:35,740
See tähendab, et kui ma saadan mööda võti sümbol,

710
00:42:35,740 --> 00:42:41,870
see tähendab, et minu PHP lehekülg pääseb neile andmetele $ _POST [sümbol]

711
00:42:41,870 --> 00:42:44,640
just nagu me tegime enne, kui olime plangil.

712
00:42:44,640 --> 00:42:47,090
Ja nüüd tegelikud andmed tahame saata

713
00:42:47,090 --> 00:42:50,790
saab olema väärtus sees see assotsiatiivne massiiv.

714
00:42:50,790 --> 00:42:54,070
>> Meil hoitakse seda teksti muutuja nimega sümbol,

715
00:42:54,070 --> 00:42:57,380
ja nii me saadame mööda nüüd võtme sümbol

716
00:42:57,380 --> 00:43:01,380
ja väärtus iganes kasutaja sisestatud sisse

717
00:43:01,380 --> 00:43:06,270
Nüüd oleme teinud seda HTTP taotluse, meie PHP fail on täidetud,

718
00:43:06,270 --> 00:43:11,480
ja see läheb saata mõned andmed nüüd tagasi klient, et just seda taotlust.

719
00:43:11,480 --> 00:43:15,220
Nüüd tuleb vastata mida iganes server ütles meile.

720
00:43:15,220 --> 00:43:20,180
Selleks, et meil on see viimane vara siin nimetatakse edu.

721
00:43:20,180 --> 00:43:24,240
Selle väärtus edu võti on tegelikult saab olema funktsioon,

722
00:43:24,240 --> 00:43:26,910
ja see on üks väga lahe asju, mida saate teha programmi JavaScript.

723
00:43:26,910 --> 00:43:31,720
Mitte ainult saate on ints või massiive kui väärtus sees assotsiatiivne massiiv,

724
00:43:31,720 --> 00:43:34,170
saame ka funktsioon.

725
00:43:34,170 --> 00:43:36,380
Nii öeldes edu, see on mu võti.

726
00:43:36,380 --> 00:43:38,830
Koolon ütleb siin on väärtus,

727
00:43:38,830 --> 00:43:41,810
ja nüüd väärtus on tegelikult funktsioon.

728
00:43:41,810 --> 00:43:44,460
Nii et me ei pea andma selle funktsiooni nimi iseenesest.

729
00:43:44,460 --> 00:43:48,820
Me ei saa lihtsalt öelda, et see saab olema mingi funktsioon. See saab võtta 1 argument.

730
00:43:48,820 --> 00:43:51,190
Argument, et seda funktsiooni saab olema

731
00:43:51,190 --> 00:43:54,460
mis iganes server saatis meid tagasi taotluse.

732
00:43:54,460 --> 00:43:57,750
Just nagu siis, kui meie brauser teeb taotluse server saadab midagi tagasi

733
00:43:57,750 --> 00:43:59,060
ja brauser kuvab selle,

734
00:43:59,060 --> 00:44:03,030
kontekstis AJAX me lihtsalt esitanud taotluse, server saatis midagi tagasi,

735
00:44:03,030 --> 00:44:07,110
ja nüüd oleme, et esindatud string.

736
00:44:07,110 --> 00:44:11,280
Seda stringi ma tahan näidata, et lehel.

737
00:44:11,280 --> 00:44:14,040
Selleks, et ma lähen on viimane valijat.

738
00:44:14,040 --> 00:44:17,570
Ma tahan valida elemendi ID hind.

739
00:44:17,570 --> 00:44:20,710
See on lihtsalt tühi div et olen loonud lehel

740
00:44:20,710 --> 00:44:26,640
ja ma tahan, et seada sisu, et div olla mis iganes server saatis meile tagasi.

741
00:44:26,640 --> 00:44:30,280
Olen tegelikult modifitseeritud quote.php natuke.

742
00:44:30,280 --> 00:44:33,460
>> Selle asemel, kutsudes krohvi ja muudavad mõningaid lehel

743
00:44:33,460 --> 00:44:38,100
quote.php nüüd lihtsalt läheb välja trükkida väärtus aktsia nagu string.

744
00:44:38,100 --> 00:44:41,880
Nii et kui sa olid tegelikult külastada lehekülge, siis oleks lihtsalt näha, et väike string

745
00:44:41,880 --> 00:44:45,030
olenemata aktsia hind on.

746
00:44:45,030 --> 00:44:50,170
Üks viimane asi, mida me peame tegema siin on lihtsalt veendumaks, et see funktsioon tagastab false.

747
00:44:50,170 --> 00:44:53,560
Mida see ütleb on, et kui ma olen sees sündmus

748
00:44:53,560 --> 00:44:57,300
ja et sündmus tagastab false tagasipöördumise asemel tõsi,

749
00:44:57,300 --> 00:45:01,510
see tähendab, et ma ei taha originaal sündmus tule.

750
00:45:01,510 --> 00:45:05,270
Sellisel juhul, kui me ei olnud JavaScript ja me esitatud kujul,

751
00:45:05,270 --> 00:45:08,280
meie veebibrauser on öelda: "Ma lähen Kirjuta et andmed koos"

752
00:45:08,280 --> 00:45:10,130
ja nad ei kavatse saata teisele lehele.

753
00:45:10,130 --> 00:45:14,360
Sest me AJAX nüüd, ei ole vaja saata kasutaja teisele lehele.

754
00:45:14,360 --> 00:45:17,920
Me lihtsalt näidata tulemusi dünaamiliselt samal lehel.

755
00:45:17,920 --> 00:45:21,460
Me tõesti ei taha neid kuhugi minna ja ma tahan jääda samale leheküljele.

756
00:45:21,460 --> 00:45:27,060
Nii et pannes vale, tagame, et vorm ei tee seda meie eest.

757
00:45:27,060 --> 00:45:31,170
Võtame pilk see tegelikult välja näeb.

758
00:45:31,170 --> 00:45:34,180
Meie quote lehekülg näeb sama.

759
00:45:34,180 --> 00:45:37,240
Las ma tõmba inspektor siia, et saaksime näha, mis toimub.

760
00:45:37,240 --> 00:45:40,270
Tee natuke vähem tohutu.

761
00:45:40,270 --> 00:45:44,590
Pea meeles, kui me avada vahekaarti Network, see on koht, kus saame näha kõiki HTTP päringuid

762
00:45:44,590 --> 00:45:47,570
mis on toimumas lehel.

763
00:45:47,570 --> 00:45:52,890
>> Sest sümbol lase mul kirjutad AAPL ja klõpsake Saa Quote.

764
00:45:52,890 --> 00:45:56,720
Nüüd nägin, et osa Apple maksab teatud arvu dollarit

765
00:45:56,720 --> 00:46:00,410
lihtsalt ilmus lehele, kuid link ei muutu üldse.

766
00:46:00,410 --> 00:46:04,570
Tegelikult siin on HTTP taotluse, et me just tehtud.

767
00:46:04,570 --> 00:46:09,980
Tegime POST taotluse quote.php. See on loogiline.

768
00:46:09,980 --> 00:46:12,800
See on see, mida server saatis meile tagasi.

769
00:46:12,800 --> 00:46:16,320
See ei ole enam see hiiglaslik HTML dokumendi pilte ja asju,

770
00:46:16,320 --> 00:46:20,920
see on lihtsalt rida teksti, ja siis me lihtsalt kuvatakse rida teksti.

771
00:46:20,920 --> 00:46:26,290
Kui me tagasi minna päised ja näha, mida me tegelikult saadetakse sees see HTTP taotluse,

772
00:46:26,290 --> 00:46:33,950
näeme siin all, et saatsime mööda võti sümbol ja väärtus AAPL,

773
00:46:33,950 --> 00:46:36,430
mis on see, mida kasutaja sisestatud sisse

774
00:46:36,430 --> 00:46:39,230
See on kena, kuid see on ikka natuke tüütu.

775
00:46:39,230 --> 00:46:42,490
Ma veel klõpsake seda nuppu, et saada laos tsiteerida.

776
00:46:42,490 --> 00:46:45,880
Oleme hõivatud inimesed ja meil ei ole aega klikkima nupud.

777
00:46:45,880 --> 00:46:49,910
Google mõistnud seda veidi aega tagasi, kui nad ellu Google Instant.

778
00:46:49,910 --> 00:46:53,590
Mida Google Instant ei ole nagu tipite see lihtsalt hakkab tulemused ilmuvad teie jaoks

779
00:46:53,590 --> 00:46:56,520
nii et sa ei pea muretsema isegi klikkides Otsi.

780
00:46:56,520 --> 00:46:58,730
Tegelikult, lõbus lugu on seotud selle.

781
00:46:58,730 --> 00:47:01,100
Kui Google Instant tuli välja, inimesed olid nagu: "Vau, see on super hämmastav."

782
00:47:01,100 --> 00:47:02,540
"See on nii lahe."

783
00:47:02,540 --> 00:47:05,950
Ja tudeng alla Stanfordi kes oli 19 ajal

784
00:47:05,950 --> 00:47:09,000
tegin selle saidi nimega YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Kõik YouTube Instant ei tegelikult YouTube'ist otsida koheselt.

786
00:47:13,170 --> 00:47:17,020
Nii et selle asemel, et minna YouTube.com ja vajuta Search,

787
00:47:17,020 --> 00:47:21,650
kui ma hakkan kirjutades YouTube Instant midagi CS50,

788
00:47:21,650 --> 00:47:25,320
me ei näe siin, et see üritab edasi aeglase internetiühenduse

789
00:47:25,320 --> 00:47:28,500
asustada need tulemused elada.

790
00:47:28,500 --> 00:47:35,590
Selleks, et me saame tegelikult teha väga lihtsate muudatuste meie quote.js faili.

791
00:47:35,590 --> 00:47:40,900
Praegu me lisades sellele sündmusele kui vorm esitatakse.

792
00:47:40,900 --> 00:47:43,760
Me ei taha teha kasutaja väidavad, et vorm enam

793
00:47:43,760 --> 00:47:48,570
niiet selle asemel tule see sündmus iga kord, kui kasutaja vajutab.

794
00:47:48,570 --> 00:47:53,200
Selleks, et Vaatame esmalt muuta sündmuse esitada keyup.

795
00:47:53,200 --> 00:47:55,740
See tähendab, et selle asemel et oodata vorm esitada,

796
00:47:55,740 --> 00:47:58,490
iga kord klahvi ei vajuta, midagi juhtub.

797
00:47:58,490 --> 00:48:02,030
See ei ole enam mõtet lisada see keyup sündmus kogu vorm.

798
00:48:02,030 --> 00:48:05,080
Me tõesti ainult hoolid, et otsingukasti.

799
00:48:05,080 --> 00:48:09,320
>> Et valida, et nüüd, me ei saa seda olla, mitte vormi-viitega,

800
00:48:09,320 --> 00:48:14,220
vormi-viitega ja me peame sisend (type = tekst) või me võiksime öelda (nimi = sümbol) -

801
00:48:14,220 --> 00:48:16,420
mida iganes me tahame.

802
00:48:16,420 --> 00:48:18,650
Nüüd on viimane asi, mida me peame tegema.

803
00:48:18,650 --> 00:48:21,190
Pea meeles, siin all, kui me ütlesime tagasi false

804
00:48:21,190 --> 00:48:24,370
ütlesime me ei taha, et maksejõuetusjuhuni tule.

805
00:48:24,370 --> 00:48:26,390
Aga see lihtsalt nii juhtub, et kui me keelata et nüüd,

806
00:48:26,390 --> 00:48:29,660
mida iganes me kirjuta ei kavatse näidata üles brauseri enam

807
00:48:29,660 --> 00:48:33,000
sest see oleks vaikimisi käitumist kirjutades tekstikasti.

808
00:48:33,000 --> 00:48:38,660
Me ei taha enam eirata, et nii teeme hävitada selle tagasi false.

809
00:48:38,660 --> 00:48:44,800
Kui me salvestada et ja asendusostu lehekülge, nüüd kui ma hakkan kirjutama AAPL

810
00:48:44,800 --> 00:48:50,160
näete, et aktsia hind allosas siin on lõpetamas automaatselt.

811
00:48:50,160 --> 00:48:53,150
Nii et siin on CS50 Finance Instant.

812
00:48:53,150 --> 00:48:55,860
Tegelikult lõbus lugu YouTube Instant

813
00:48:55,860 --> 00:48:59,420
on, et õpilane lihtsalt selline kirjutas seda 1 öö projekt,

814
00:48:59,420 --> 00:49:03,800
ja järgmisel päeval pakuti talle tööd, mida YouTube tegevjuht.

815
00:49:03,800 --> 00:49:10,610
Nii nii lihtne, sa CS50 õpilased, oma lõpliku projekti saan teid töö juures YouTube'i.

816
00:49:10,610 --> 00:49:14,720
Midagi sellist on väga lahe idee lõplik projekt, eks?

817
00:49:14,720 --> 00:49:18,170
Meil oli mõned olemasolevad funktsioonid, mis me tahtsime integreerida.

818
00:49:18,170 --> 00:49:20,330
Me parandada kasutaja kogemus natuke,

819
00:49:20,330 --> 00:49:24,340
ja äkki otsivad midagi YouTube Instant võiks olla palju lihtsam

820
00:49:24,340 --> 00:49:27,290
kui otsite seda regulaarselt YouTube.

821
00:49:27,290 --> 00:49:30,790
Nii et AJAX lühikokkuvõte.

822
00:49:30,790 --> 00:49:34,860
>> Näidetes, et Joosep oli näidata, nägime palju autocompletes,

823
00:49:34,860 --> 00:49:39,250
ja need autocompletes on tõesti väga mugav, sest me ei pea meeles -

824
00:49:39,250 --> 00:49:41,770
Näiteks, kui te ei mäleta, aktsia hind Apple

825
00:49:41,770 --> 00:49:45,110
ja me lihtsalt tean, et see aa midagi, mitte lihtsalt ütles mulle,

826
00:49:45,110 --> 00:49:48,740
"Osakaal see asi maksab see palju raha,"

827
00:49:48,740 --> 00:49:52,540
Ma mingi tahaks teada millised varud alustada aa.

828
00:49:52,540 --> 00:49:58,340
Me saame teha, et tõesti kenasti koos Bootstrap raamatukogu, mis on juba lisatud

829
00:49:58,340 --> 00:50:01,380
sees CS50 rahandusministeerium.

830
00:50:01,380 --> 00:50:09,390
Kui teil tulla siia, et JavaScript tag ja kerige Typeahead,

831
00:50:09,390 --> 00:50:13,730
see on lihtsalt tore plugin, et keegi juba kirjutas meile,

832
00:50:13,730 --> 00:50:16,980
ja me oskame kasutada oma funktsionaalsuse niimoodi.

833
00:50:16,980 --> 00:50:21,410
Ma tipitud ja siin on nimekiri mõned riigid, mis algavad A.

834
00:50:21,410 --> 00:50:25,360
Ütleme, et ma arvan, et see on väga lahe ja see on minu jaoks aega, et lisada see minu lehel.

835
00:50:25,360 --> 00:50:28,300
Selgub, et see on tõesti väga lihtne.

836
00:50:28,300 --> 00:50:32,810
Vaatame üle hüpata siin quote3.js.

837
00:50:34,890 --> 00:50:37,380
Minu fail näeb välja natuke teistsugune.

838
00:50:37,380 --> 00:50:39,700
Siia alla kõik minu AJAX stuff on sama.

839
00:50:39,700 --> 00:50:43,170
Tahan laadida seisud ilma minna teisele lehele.

840
00:50:43,170 --> 00:50:46,220
Aga nüüd ma tahan kasutada seda pluginat.

841
00:50:46,220 --> 00:50:51,020
Bootstrap dokumentatsioon on suurepärane näide sellest, kuidas täpselt ma ei tee seda.

842
00:50:51,020 --> 00:50:54,350
Ma tahan öelda: "Siin on sisend, et ma tahan automaatteksti kohta,"

843
00:50:54,350 --> 00:50:56,640
ja ma lähen kutsun seda funktsiooni nimetatakse typeahead,

844
00:50:56,640 --> 00:50:59,730
ja et läheb tegelema kõigi Typeahead kraami meile.

845
00:50:59,730 --> 00:51:02,090
See initsialiseerida nimekirja, siis teeme kõik meie filtreerimine.

846
00:51:02,090 --> 00:51:06,680
Ainuke asi, see peab teadma, milliseid andmeid me autocompleting kohta.

847
00:51:06,680 --> 00:51:10,480
Nii sain teada selle võtme lihtsalt lugedes dokumentatsioon ja vaadeldes näiteid.

848
00:51:10,480 --> 00:51:14,150
Kui ma annan see võti allikas, selle võtme väärtus

849
00:51:14,150 --> 00:51:17,770
on vaid mõned array asju ma tahan automaatteksti kohta.

850
00:51:17,770 --> 00:51:20,180
See muutuja tuli see teine ​​fail.

851
00:51:20,180 --> 00:51:23,400
Ma avada symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> See symbols.js on lihtsalt see tõesti suur massiiv sisaldab stringid

853
00:51:27,980 --> 00:51:32,080
Kõigi nende varude sümbolid NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Kui ma tahan hüpata tagasi HTML, nii jharvard, vhosts, globalhost, html, mallid,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Kuna see on nüüd nimega quote3.js, lubage mul muuta JavaScripti fail ma olen ka siin.

857
00:51:50,910 --> 00:51:55,110
Nüüd on mul quote3.js, nii et ma lähen laadida selles eraldi JavaScripti fail,

858
00:51:55,110 --> 00:51:57,910
üks, mis on, et Bootstrap automaattäitmine.

859
00:51:57,910 --> 00:52:04,430
Nüüd, kui ma hüpata tagasi brauser, asendusostu lehekülge, ja ma hakkan kirjutama aa,

860
00:52:04,430 --> 00:52:06,880
seal on minu automaattäitmine. Ja see oli tõesti nii lihtne.

861
00:52:06,880 --> 00:52:11,400
Mul oli 1 rida koodi, mis lihtsalt ütles: "Siin on asju, mida ma tahan automaatteksti kohta,"

862
00:52:11,400 --> 00:52:16,590
ja äkki mul on see tõesti, tõesti kena funktsionaalsus ei kogu palju jõupingutusi.

863
00:52:16,590 --> 00:52:19,810
Nagu te arendada veebisaidid ja eriti esiotsa pool asju,

864
00:52:19,810 --> 00:52:21,840
sa lähed, et leida see on nii palju.

865
00:52:21,840 --> 00:52:25,700
Seal on palju, palju, palju lahedaid vabad teegid seal

866
00:52:25,700 --> 00:52:30,190
et muuta see super lihtne teha asju niimoodi.

867
00:52:30,190 --> 00:52:37,230
Kas keegi mõelda iga puudusi lihtsalt autocompleting selle suure nimekirja sümboleid?

868
00:52:37,230 --> 00:52:41,580
Mis võiks olla midagi, mis ei ole parim selle lähenemisega?

869
00:52:42,790 --> 00:52:45,960
Jah. >> [Üliõpilane] Aeg, kui teil on palju [kuuldamatu]

870
00:52:45,960 --> 00:52:50,420
Jah. Praegu me allalaadimine see tohutu JavaScripti fail ja seal on palju sümboleid.

871
00:52:50,420 --> 00:52:54,360
Ja kui meil on ton kraami, see võiks omamoodi suurendada latency mitte ainult otsivad

872
00:52:54,360 --> 00:52:56,600
aga ka allalaadimise tegeliku faili.

873
00:52:56,600 --> 00:52:58,670
Suur. Midagi veel?

874
00:53:01,950 --> 00:53:05,280
Praegu pole mingit tõelist tähtsust.

875
00:53:05,280 --> 00:53:08,190
Kui ma kirjuta, ettevõtted, mis ilmub siin

876
00:53:08,190 --> 00:53:11,220
pruugi olla kõige populaarsem firmad, mis algavad A.

877
00:53:11,220 --> 00:53:17,130
>> Enne kui ma saan Apple, see võib võtta veel mõned tegelased leida, mida ma otsin.

878
00:53:17,130 --> 00:53:20,420
See automaatteksti ei ole selles mõttes olulised.

879
00:53:20,420 --> 00:53:24,400
See on lihtsalt ütlen, "Midagi, mis sobib ma lähen kuvada."

880
00:53:24,400 --> 00:53:30,510
Selle asemel, et tahaks kuidagi integreerida teataval määral seotud minu otsingud.

881
00:53:30,510 --> 00:53:36,440
Kui ma lähen siia, et Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Kui ma püüan sisestada sümbol Yahoo! Finance lehekülge

883
00:53:42,100 --> 00:53:52,310
ja ma hakkan kirjutama goog, mul on see kena nimekiri asjadest.

884
00:53:52,310 --> 00:53:57,100
On selge, et see näeb välja nagu Yahoo! Finance on midagi targem siin.

885
00:53:57,100 --> 00:53:59,790
Nad on mõned tekst ja neil on ka täiendavat teavet

886
00:53:59,790 --> 00:54:01,430
nagu nimi laost.

887
00:54:01,430 --> 00:54:05,850
See on midagi, mida ma ei saa tõesti vaid minu stock nimekirja sümboleid.

888
00:54:05,850 --> 00:54:09,520
Ma tahan seda ja ma lähen ta.

889
00:54:09,520 --> 00:54:11,790
Selleks, et teeme paar asja.

890
00:54:11,790 --> 00:54:15,580
Vaatame kõigepealt avada inspektor seda lehte

891
00:54:15,580 --> 00:54:18,100
sest me nägime, et see leht ei pealelaadimisel üldse

892
00:54:18,100 --> 00:54:21,960
nii et ilmselt AJAX kuidagi tuleb laadimist oma andmeid.

893
00:54:21,960 --> 00:54:23,920
Saame teada, milliseid andmeid see laeb.

894
00:54:23,920 --> 00:54:28,390
Kui ma vajutan seda vahekaarti Network, need hakkavad olema kõik taotlused, mis algavad nähtud leegiga kuumutamiseks.

895
00:54:28,390 --> 00:54:34,020
Nüüd, kui ma kirjuta goo, näeme, et ma just uue HTTP taotluse.

896
00:54:34,020 --> 00:54:37,490
See on ilmselt, kui see info on pärit.

897
00:54:37,490 --> 00:54:41,990
Muidugi jah, kui ma vaatan seda URL, mis on natuke imelikult nimega,

898
00:54:41,990 --> 00:54:46,930
näeme, et see on täpselt, kus Yahoo saadab välja oma andmeid.

899
00:54:46,930 --> 00:54:53,400
>> Olen loonud eraldi faili nimega suggest.php see on väga sarnase sisuga lookup funktsiooni.

900
00:54:53,400 --> 00:54:57,730
See on põhimõtteliselt kavatse teha päringu Yahoo link, saada tagasi mõned andmed,

901
00:54:57,730 --> 00:54:59,750
ja saatke see mulle tagasi.

902
00:54:59,750 --> 00:55:02,570
Nüüd, selle asemel et kasutada seda suur, tohutu nimekiri sümbolid,

903
00:55:02,570 --> 00:55:05,280
Oskan kasutada Yahoo kena tekst asjad,

904
00:55:05,280 --> 00:55:08,150
ja ma ei pea alla, et massilist JavaScripti fail.

905
00:55:08,150 --> 00:55:12,040
Ma olen ainult kavatse lammutama tegelikult vastava varu sümboleid.

906
00:55:12,040 --> 00:55:13,960
Olgem hüpata seda.

907
00:55:13,960 --> 00:55:17,360
Nii html, js. Oleme nüüd quote4.

908
00:55:17,360 --> 00:55:22,120
Nüüd me enam ei kasuta, et suur nimekiri JavaScript failid.

909
00:55:22,120 --> 00:55:24,430
Aga seal on väike tüüpi disaini probleem siin.

910
00:55:24,430 --> 00:55:28,200
Me oleme öelnud, et AJAX on asünkroonne.

911
00:55:28,200 --> 00:55:31,000
Mida see tähendab, et kui ma teen AJAX taotlus,

912
00:55:31,000 --> 00:55:36,490
nii siin on line 8, see on koht, kus minu AJAX taotlus tegelikult vallandati.

913
00:55:36,490 --> 00:55:40,370
Oletame, et nüüd on mul natuke koodi siia alla, et kavatseb teha mõned asjad

914
00:55:40,370 --> 00:55:43,930
meeldib kasutajale märku või midagi muuta lehel.

915
00:55:43,930 --> 00:55:49,830
Mida ei juhtu on brauser ei kavatse ootama sellele soovile jätkata

916
00:55:49,830 --> 00:55:53,480
enne tulevad alla ja tabab seda joont.

917
00:55:53,480 --> 00:55:55,900
See on asünkroonne osa.

918
00:55:55,900 --> 00:55:58,400
See saab teha seda taotlust ja öelda: "Kui olete lõpetanud,

919
00:55:58,400 --> 00:56:03,080
"Tagasi tulla ja helistada, et funktsioon, mis ma ütlesin sulle helistada sees edu."

920
00:56:03,080 --> 00:56:07,300
See tähendab, et me ei saa lihtsalt alla laadida kõik aktsiad varem.

921
00:56:07,300 --> 00:56:10,300
Me peame taotluse ja ootama, et midagi tagasi tulla.

922
00:56:10,300 --> 00:56:13,330
See tähendab, et enne, me võiks lihtsalt öelda Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Siin on nimekiri asjadest, mida ma tahan, et sa automaatteksti kohta."

924
00:56:15,580 --> 00:56:18,950
Me ei saa enam teha enam, sest me ei tea,

925
00:56:18,950 --> 00:56:21,780
mida me tahame tegelikult automaatteksti kohta.

926
00:56:21,780 --> 00:56:25,190
Õnneks Bootstrap mõelnud seda seetõttu, et need on targad poisid seal,

927
00:56:25,190 --> 00:56:30,160
ja nad tegelikult andis meile veel üks võimalus laadida selles Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Enne, kui kasulik oleks selline allikas vara oli lihtsalt selles suures valikus asjad automaatteksti kohta.

929
00:56:35,630 --> 00:56:39,580
>> Nüüd allikas vara on tegelikult funktsioon,

930
00:56:39,580 --> 00:56:44,580
ja selleks, et see funktsioon on välja selgitada, mis asjad automaatteksti kohta on.

931
00:56:44,580 --> 00:56:48,730
Kuidas see saab aru, et läbi on see saab küsida Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
Mis parimaid asju automaatteksti on.

933
00:56:51,750 --> 00:56:54,500
Selleks, et ma teen väga sarnane AJAX taotlus.

934
00:56:54,500 --> 00:56:59,010
Ma lähen paluda seda lehte kell suggest.php.

935
00:56:59,010 --> 00:57:01,360
Ma tahan saata mööda sümboleid veel.

936
00:57:01,360 --> 00:57:05,570
Ja nüüd minu edu, Bootstrap dokumentatsioon ütles mulle

937
00:57:05,570 --> 00:57:09,130
et selleks, et asustada, et nimekiri asjadest,

938
00:57:09,130 --> 00:57:14,370
kõik, mida ma vaja teha, on edasi antud massiivi nüüd tagasikutse funktsiooni.

939
00:57:14,370 --> 00:57:15,660
Kuid oodake minut.

940
00:57:15,660 --> 00:57:20,240
Kui see peaks olema massiiv ja AJAX saadab mulle tagasi teksti,

941
00:57:20,240 --> 00:57:22,720
kuidas on see võimalik?

942
00:57:22,720 --> 00:57:27,910
See tutvustab uut viisi Andmevahetuse nimega JSON.

943
00:57:27,910 --> 00:57:33,000
Sel juhul me ei ole just tagasisaatmise lihtne tekstistringi.

944
00:57:33,000 --> 00:57:37,670
Nüüd me tegeleme selle keerulisem nimekirja aktsiate sümboleid.

945
00:57:37,670 --> 00:57:41,730
Need börsisümbolid saab ka asjad firma nimi või jooksevhindades.

946
00:57:41,730 --> 00:57:47,550
Lihtsalt kasutades suur pikk string, mis pole vormindatud mõnes prognoositaval viisil

947
00:57:47,550 --> 00:57:51,970
ei kavatse olla parim viis saada see andmeid Yahoo server mulle

948
00:57:51,970 --> 00:57:54,540
nii et ma lihtsalt aru.

949
00:57:54,540 --> 00:58:01,280
JSON on tehnoloogia, mis kasutab ära kuidas me loome assotsiatiivne massiivid JavaScript.

950
00:58:01,280 --> 00:58:04,510
See näeb välja palju nagu JavaScript assotsiatiivne massiiv,

951
00:58:04,510 --> 00:58:06,600
ja tegelikult sellepärast, et see on.

952
00:58:06,600 --> 00:58:09,710
JSON tähistab JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
See on põhimõtteliselt kokku lepitud formaadis andmeedastusel edasi ja tagasi.

954
00:58:15,020 --> 00:58:18,280
Siin see JSON objekti või selle JSON assotsiatiivne massiiv

955
00:58:18,280 --> 00:58:21,010
saadab mulle mõned andmed muidugi.

956
00:58:21,010 --> 00:58:25,110
>> Võtmed see massiiv on asjad muidugi, et väärtus on cs50,

957
00:58:25,110 --> 00:58:29,140
ja siin all näeme, et saan raha, mis on massiiv.

958
00:58:29,140 --> 00:58:32,730
Ma ei pea tegema asju sõeluda välja stringid ja otsida komasid

959
00:58:32,730 --> 00:58:35,330
ja hulle asju niimoodi.

960
00:58:35,330 --> 00:58:38,820
Sest see on deklareeritud käesoleva JSON formaadis,

961
00:58:38,820 --> 00:58:43,510
JavaScript ja jQuery juba funktsioonid teisendada string

962
00:58:43,510 --> 00:58:48,140
mis näeb välja selline JSON arvesse tegelik JavaScript assotsiatiivne massiiv

963
00:58:48,140 --> 00:58:50,440
et saame koos töötada.

964
00:58:50,440 --> 00:58:56,660
Doing see on nii lihtne öelda, et ei ole enam seda pilti, suggest.php,

965
00:58:56,660 --> 00:58:59,040
saates mulle tagasi lihtsalt mingi teksti,

966
00:58:59,040 --> 00:59:01,950
aga ma tean, et see saab olema saates mulle tagasi JSON.

967
00:59:01,950 --> 00:59:06,760
See tähendab, et JSON on võimalik konverteerida JavaScript assotsiatiivne massiiv.

968
00:59:06,760 --> 00:59:10,830
Ja nii jQuery, ma tahaksin, et sa teeksid seda minu heaks.

969
00:59:10,830 --> 00:59:13,990
See tähendab, et vastuse parameeter siin,

970
00:59:13,990 --> 00:59:16,070
see ei ole enam lihtsalt stringi.

971
00:59:16,070 --> 00:59:19,860
Sest me oleme rääkinud jQuery et siin tuleb mõned JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery saab olema piisavalt tark, et öelda: "Sa tahtsid JSON?"

973
00:59:22,950 --> 00:59:26,890
"Ma lähen selle saaks ümber assotsiatiivne massiiv teile."

974
00:59:26,890 --> 00:59:32,100
Olgem tegelikult vaatleme Network sakk kui meil on quote4.js.

975
00:59:32,100 --> 00:59:35,400
Muudame seda ja asendusostu lehekülge.

976
00:59:37,150 --> 00:59:41,250
Nüüd ma lähen kirjuta-jälle.

977
00:59:41,250 --> 00:59:45,600
Olen teinud paar taotluste suggest.php, kuid nüüd seda vastust

978
00:59:45,600 --> 00:59:48,670
mitte ainult nöör, see on JSON.

979
00:59:48,670 --> 00:59:52,580
Nii et mul on avatud lokkis traksidega, öeldes: "Siin on assotsiatiivne massiiv."

980
00:59:52,580 --> 00:59:56,830
>> Esimene ja ainus võti selle assotsiatiivne massiiv nimetatakse sümbolid,

981
00:59:56,830 --> 01:00:00,240
ja siis siin on massiivi kõik asjaomased tähised

982
01:00:00,240 --> 01:00:04,820
tulevad nüüd Yahoo! Finance, mitte et hiiglaslik nimekirja.

983
01:00:06,110 --> 01:00:10,630
See, kuidas ma lihtsalt asustada see automaatteksti plugin

984
01:00:10,630 --> 01:00:14,280
mõned andmed, mis pole pärit kohalikku faili, mis on juba eelnevalt

985
01:00:14,280 --> 01:00:17,490
vaid midagi muud.

986
01:00:17,490 --> 01:00:21,160
Tuleb välja, et me saame tegelikult ära tehnoloogia nimega JSONP,

987
01:00:21,160 --> 01:00:27,420
või JSON ja polstrist, mis kõrvaldab selle suggest.php käsi.

988
01:00:27,420 --> 01:00:34,010
Aga selle asemel, et teeme seda, teeme selle asemel võtta pilk kuidas ma saan parandada seda isegi rohkem.

989
01:00:34,010 --> 01:00:36,040
Ma tõesti nagu Bootstrap on Typeahead. See on tõesti kena.

990
01:00:36,040 --> 01:00:39,570
Aga me läheme hea JavaScript ja tahame sellist teha seda ise,

991
01:00:39,570 --> 01:00:43,870
võibolla vaatleme, mida see plugin võiks teha.

992
01:00:43,870 --> 01:00:46,500
Olgem enam kasutada, et Typeahead asi,

993
01:00:46,500 --> 01:00:50,550
ja proovime teha seda nimekirja pakutud varude ise.

994
01:00:50,550 --> 01:00:53,790
Siin quote6.php läheme alustad samamoodi.

995
01:00:53,790 --> 01:00:58,050
Iga kord, kui keegi liigid midagi, me tahame teha AJAX taotlus.

996
01:00:58,050 --> 01:01:01,590
See on sarnane meie algne CS50 Finance Instant.

997
01:01:01,590 --> 01:01:05,020
Selle asemel et teha taotluse quote.php,

998
01:01:05,020 --> 01:01:08,530
me nüüd teha taotluse, et sama faili enne seda suggest.php,

999
01:01:08,530 --> 01:01:12,460
mis on lihtsalt läheb vedama andmeid Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Jällegi, me ikka ootame JSON, kuid nüüd kuna Typeahead ei tee seda meie eest,

1001
01:01:19,480 --> 01:01:24,850
meil ka on vaja saata mööda väärtus, mis on seestpoolt praeguse teksti kasti.

1002
01:01:24,850 --> 01:01:28,120
Nüüd me teame, mida küsida Yahoo! Finance,

1003
01:01:28,120 --> 01:01:34,160
ja nii nüüd siin on funktsioon, mida me tahame ellu pärast seda, kui lõpetab.

1004
01:01:34,160 --> 01:01:36,520
Meil ei ole plugin teha nimekiri meie jaoks,

1005
01:01:36,520 --> 01:01:40,630
nii siin, kus me tegelikult toimub ehitada terve rida ettepanekuid.

1006
01:01:40,630 --> 01:01:44,850
Selleks, et meelega PHP me liitsõnumeid need suured stringid HTML

1007
01:01:44,850 --> 01:01:48,170
siis prinditakse neid, mida me saame teha sama täpne asi JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Esiteks me läheme alustad see string nimega ettepanekuid,

1009
01:01:51,850 --> 01:01:54,590
ja see string lihtsalt läheb sisaldada HTML.

1010
01:01:54,590 --> 01:01:58,320
Me tahame seda nimekirja asjadest, nii et me läheme alustad seda nimekirja tag,

1011
01:01:58,320 --> 01:02:03,340
ja nüüd me ei kavatse itereerima üle kõik sümbolid, mis olid tagastatud meile tagasi.

1012
01:02:03,340 --> 01:02:06,500
Pea meeles, sest me oleme öelnud andmetüüp: "Jon", see ei ole string.

1013
01:02:06,500 --> 01:02:09,500
See on juba massiivi meile. See on väga lahe.

1014
01:02:09,500 --> 01:02:13,790
Me ei saa lihtsalt öelda: "Ma tahan, et sa lisada nimekirja element."

1015
01:02:13,790 --> 01:02:16,000
Me paneme selle sees element pool, et

1016
01:02:16,000 --> 01:02:19,030
anname selle klassi ettepanekuid nii et me teame, mis see on,

1017
01:02:19,030 --> 01:02:23,880
ja nüüd siin on sümbol, mis tagasi jõudsime Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Kui oleme loodud element iga sümbolid oleme saanud tagasi,

1019
01:02:27,230 --> 01:02:30,100
me lihtsalt tahame sulgeda nimekiri.

1020
01:02:30,100 --> 01:02:33,040
Nüüd ettepanekuid esindab see väike HTML fragment

1021
01:02:33,040 --> 01:02:37,860
et kui panna leht saab olema nimekiri asjadest, mida me otsime.

1022
01:02:37,860 --> 01:02:41,070
Nüüd aga panid selle lehel.

1023
01:02:41,070 --> 01:02:46,390
Selleks, et ma olen tegelikult loodud teise tühja div ja ma olen teinud selle ID ettepanekuid.

1024
01:02:46,390 --> 01:02:52,520
Palju nagu me seada sisu div, mis kuvab hind varude andmeid,

1025
01:02:52,520 --> 01:02:58,600
me nüüd tahan seada sisu div-mis iganes see string

1026
01:02:58,600 --> 01:03:00,290
mis sisaldab neid sümboleid.

1027
01:03:00,290 --> 01:03:07,650
Kasutades seda HTML meetod, seda ettepanekuid muutuja, see string, on string HTML.

1028
01:03:07,650 --> 01:03:13,490
Ma tahan, et sa selle HTML ja pane see sees div kutsus soovitusi.

1029
01:03:13,490 --> 01:03:15,680
Me oleme lihtsalt lisada midagi DOM nüüd.

1030
01:03:15,680 --> 01:03:20,360
Lisasime mõned uued elemendid DOM, et saame nüüd lehel kuvada.

1031
01:03:20,360 --> 01:03:22,540
Vaatame, mida see välja näeb.

1032
01:03:22,540 --> 01:03:29,110
Kui me koormus quote6 ja nüüd me tuleme tagasi,

1033
01:03:29,110 --> 01:03:34,480
nüüd kui ma hakkan kirjutama AAPL, me seda enam ei ole Bootstrap automaatteksti

1034
01:03:34,480 --> 01:03:38,470
kuid nüüd on meil see nimekiri, et tegime ise.

1035
01:03:38,470 --> 01:03:43,230
See on natuke koledam kui Bootstrap Typeahead, näiteks

1036
01:03:43,230 --> 01:03:45,580
kuid see ei võimalda meil teha veel üks asi.

1037
01:03:45,580 --> 01:03:48,660
Kui olime vaadates, et Bootstrap plugin,

1038
01:03:48,660 --> 01:03:52,590
nägime, et kui me autocompleted, üks automaatteksti väärtuste oli AAPL.

1039
01:03:52,590 --> 01:03:54,820
See ei pruugi olla nii kasulik.

1040
01:03:54,820 --> 01:03:59,100
Nagu kasutaja, ma ei pruugi kohe tunda kõik laos sümboleid.

1041
01:03:59,100 --> 01:04:02,370
Mida ma olen ilmselt tõenäolisem tunda on ettevõtte tegelikke nimesid.

1042
01:04:02,370 --> 01:04:05,310
Nii et kas ei oleks tõesti kasulik, kui mitte öelda AAPL

1043
01:04:05,310 --> 01:04:07,970
see ütles midagi Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Sest me oleme veeres seda ise, me tõesti lihtne teha.

1045
01:04:12,240 --> 01:04:17,630
Avame oma viimase quote fail siin, nii quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Sama asi. Ma olen lihtsalt loonud teise PHP faili, et naaseb meile midagi enamat kui lihtsalt sümbolitega.

1047
01:04:23,200 --> 01:04:25,550
Samuti annab meile tagasi ettevõtte nimed.

1048
01:04:25,550 --> 01:04:28,150
Ja nii me teeme sama asja. Me teeme AJAX taotlus.

1049
01:04:28,150 --> 01:04:32,370
Kui taotlus on täidetud, me ei kavatse täita seda funktsiooni siin,

1050
01:04:32,370 --> 01:04:36,520
ja seda funktsiooni saab ehitada suur jada elemendid.

1051
01:04:36,520 --> 01:04:39,520
Aga erinevus on selles, et raha nende nimekirjade ei ole enam pelgalt sümbol,

1052
01:04:39,520 --> 01:04:45,370
see on nüüd nimi.

1053
01:04:45,370 --> 01:04:47,070
Nii et meil on üks väike probleem.

1054
01:04:47,070 --> 01:04:51,590
Kui me kasutame oma lookup, me peame kuidagi edastada see sümbol.

1055
01:04:51,590 --> 01:04:54,950
Me ei saa edasi lookup midagi Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Meil on vaja läbida see MSFT.

1057
01:04:57,900 --> 01:05:01,640
Kui me kirjalikult HTML on meil palju toredaid sisseehitatud atribuute.

1058
01:05:01,640 --> 01:05:05,440
Oleks võinud sellega seotud href või klassi.

1059
01:05:05,440 --> 01:05:08,230
Aga mida me tegelikult vajame nüüd on kõik need lingid

1060
01:05:08,230 --> 01:05:11,120
on aktsia sümbol sellega seotud.

1061
01:05:11,120 --> 01:05:14,240
Ei ole sisseehitatud HTML atribuut aktsia sümbol,

1062
01:05:14,240 --> 01:05:21,010
kuid õnneks HTML5 võimaldab meil luua oma atribuute olla iganes me tahame.

1063
01:05:21,010 --> 01:05:24,620
Öeldes andmete sümbol, olen lisanud uue omaduse

1064
01:05:24,620 --> 01:05:29,350
kelle nime ma vaid koosneb, ja see on okei, sest mul eessõna seda need andmed.

1065
01:05:29,350 --> 01:05:34,270
Me läheme salvestamiseks sees seal märki laos nüüd.

1066
01:05:34,270 --> 01:05:39,590
Mida see tähendab, et kuigi me kuvad väärtus firma nimi

1067
01:05:39,590 --> 01:05:43,380
sees meie automaatteksti me ikka meeles sümbol

1068
01:05:43,380 --> 01:05:47,110
mis on seotud iga ettevõte.

1069
01:05:47,110 --> 01:05:50,350
Kuidas me teeme, mis on sees see element ise.

1070
01:05:50,350 --> 01:05:52,930
See tähendab, me peame tegema veel ühe muudatuse.

1071
01:05:52,930 --> 01:05:57,090
Kui me klõpsake seda nüüd, me peame tegelikult ära sümboli atribuut

1072
01:05:57,090 --> 01:06:00,220
mitte ainult selle väärtust.

1073
01:06:00,220 --> 01:06:05,010
Kui me varundada, me omistame sündmus ettepanekutele.

1074
01:06:05,010 --> 01:06:09,280
Kui üks nendest ettepanekutest on klõpsatud nüüd, ma tahan teha midagi.

1075
01:06:09,280 --> 01:06:13,160
Mida ma tahan teha, on muuta väärtust, et sisend kasti.

1076
01:06:13,160 --> 01:06:16,100
Nüüd tahan ma seada selle sama Val funktsioon.

1077
01:06:16,100 --> 01:06:21,060
>> Nii et ilma ühtegi argumenti selle val funktsioon tagastab teile, mida on juba tekstikasti,

1078
01:06:21,060 --> 01:06:27,070
aga kui annad talle stringi, see vőtab et string ja pane see tekstikasti.

1079
01:06:27,070 --> 01:06:28,980
Olen valides oma teksti kasti samamoodi.

1080
01:06:28,980 --> 01:06:31,230
See nimi on sümbol sees vormi-viitega.

1081
01:06:31,230 --> 01:06:37,540
Nüüd ma saadan ta atribuudi väärtuseks andmete sümbol.

1082
01:06:37,540 --> 01:06:41,560
See asi siin on uus, see $ (see).

1083
01:06:41,560 --> 01:06:46,850
Mida see tähendab on element, mis klõpsatud.

1084
01:06:46,850 --> 01:06:50,880
Me näeme siin, et me ei kinnitamise klõps

1085
01:06:50,880 --> 01:06:54,690
iga elemendi klassi ettepanek eraldi.

1086
01:06:54,690 --> 01:06:57,140
Pigem me oleme lähenemas seda natuke teistmoodi.

1087
01:06:57,140 --> 01:07:01,700
Selle asemel me ütleme alati, kui midagi sees käesoleva ettepanekud div,

1088
01:07:01,700 --> 01:07:04,080
mis meeles on lihtsalt konteiner sellesse loetellu

1089
01:07:04,080 --> 01:07:10,150
kui midagi sees see div on klõpsatud ja see on klassi ettepanekut,

1090
01:07:10,150 --> 01:07:13,000
Ma tahan seda sündmust tule.

1091
01:07:13,000 --> 01:07:17,490
Põhimõtteliselt, mida see tähendab, et me saame teha, on meil võimalik taaskasutada see sama sündmus käitleja

1092
01:07:17,490 --> 01:07:20,000
kõikide asjade nimekirjas.

1093
01:07:20,000 --> 01:07:22,080
Nii et me ei pea olema üks sündmus käitleja esimese elemendi eest

1094
01:07:22,080 --> 01:07:24,550
ja erinevate sündmus käitleja teise elemendi.

1095
01:07:24,550 --> 01:07:29,880
Me saame selle asemel öelda: "Ma tahan sama sündmus käitleja taotleda kõik, mis minu nimekirjas."

1096
01:07:29,880 --> 01:07:34,420
Aga me peame kuidagi teada, mis osa klõpsatud.

1097
01:07:34,420 --> 01:07:38,450
See "see" võtmesõna esindab just seda.

1098
01:07:38,450 --> 01:07:42,360
See on objekt, mis oli lihtsalt klõpsab kasutaja.

1099
01:07:42,360 --> 01:07:47,680
Kui ma lihtsalt klõpsatud 3. link, moodustab see osa, et 3. link,

1100
01:07:47,680 --> 01:07:51,670
mis tähendab, et ma saan selle atribuudi andmed-sümbol,

1101
01:07:51,670 --> 01:07:57,760
mis me teame peab sisaldama sümbolit, mis on seotud firma ma lihtsalt klõpsatud.

1102
01:07:57,760 --> 01:08:04,550
Kui me tagasi hüpata meie rahandusele lehel

1103
01:08:04,550 --> 01:08:08,580
näeme nüüd, et kui ma hakkan kirjutama midagi MSFT,

1104
01:08:08,580 --> 01:08:11,220
me ei saa enam lihtsalt aktsiate sümboleid,

1105
01:08:11,220 --> 01:08:13,720
me nüüd saada tegelik ettevõtted.

1106
01:08:13,720 --> 01:08:20,410
Aga kui ma vajutan üks nendest äriühingutest,

1107
01:08:20,410 --> 01:08:25,180
näeme, et me tegelikult populating tekstiväljale mitte ettevõtte nimi

1108
01:08:25,180 --> 01:08:29,850
aga mis iganes oli talletatud nende atribuute.

1109
01:08:29,850 --> 01:08:32,880
Ja nii kui ma tegelikult kontrollida ühe elemendi õigus klõpsates seda

1110
01:08:32,880 --> 01:08:36,200
ja klõpsates Kontrollige Element, me tegelikult saame näha, mida see välja näeb.

1111
01:08:36,200 --> 01:08:40,290
>> Pea meeles, see on midagi, mida me loodud sees, et silmuse

1112
01:08:40,290 --> 01:08:42,649
kui olime ülesehitamisel, et string HTML.

1113
01:08:42,649 --> 01:08:47,870
Me näeme siin, et need andmed-sümbol on väärtus MSFT, mis on suurepärane.

1114
01:08:47,870 --> 01:08:49,189
See, mida me ootasime.

1115
01:08:49,189 --> 01:08:53,170
See on sümbol ja see, kuidas me saime raha, et me peame kasutama

1116
01:08:53,170 --> 01:08:56,140
sees selle teksti kasti.

1117
01:08:56,140 --> 01:08:58,850
See on piisavalt päring sest see on selline igav.

1118
01:08:58,850 --> 01:09:02,990
Lihtsalt teha mõned kiired lisaseadmed meie portfelli leht.

1119
01:09:02,990 --> 01:09:08,109
Kui oled kasutanud CS50 Finance ajal ja hakkate müües ja ostes palju varusid,

1120
01:09:08,109 --> 01:09:11,300
lõpuks see tabel ei hakka päris suur,

1121
01:09:11,300 --> 01:09:13,850
ja sa lähed tahan börsisümbol, muidugi.

1122
01:09:13,850 --> 01:09:20,350
Kui tabel on tõesti väga suur, võib see olla kasulik kasutajal proovida otsida üle.

1123
01:09:20,350 --> 01:09:23,290
Toas otsingukasti, kui ma hakkan kirjutama midagi Disney

1124
01:09:23,290 --> 01:09:26,359
ja otsin oma Mickey Mouse laos, näeme, et see tabel nüüd filtreerimine

1125
01:09:26,359 --> 01:09:28,189
selle põhjal, mida ma lihtsalt kirjutada sisse

1126
01:09:28,189 --> 01:09:31,640
See funktsioon näeb välja super keeruline, kuid see on tõesti väga lihtne

1127
01:09:31,640 --> 01:09:33,859
koos jQuery ja JavaScript.

1128
01:09:33,859 --> 01:09:39,189
See portfolio.php fail sisaldab JavaScripti fail nimega portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Võtame pilk seda.

1130
01:09:41,130 --> 01:09:44,890
Nii html, js, portfell.

1131
01:09:44,890 --> 01:09:49,210
Siin, kus me teeme, et otsida lauale.

1132
01:09:49,210 --> 01:09:52,750
Esimene asi, mida ma pean tegema, on lisada sündmus käitleja et tekstikasti

1133
01:09:52,750 --> 01:09:55,760
sest me teame, et me tahame, et meie filtreerimise funktsioon tule

1134
01:09:55,760 --> 01:09:59,800
iga kord, kui kasutaja vajutab midagi, sest meil ei ole aega Otsi nuppe.

1135
01:09:59,800 --> 01:10:03,000
Esimene asi, mida peame tegema, on aru saada, mida kasutaja otsib,

1136
01:10:03,000 --> 01:10:04,780
just nagu me tegime enne.

1137
01:10:04,780 --> 01:10:11,320
See märksõna tähistab praegune element kasutaja suheldes.

1138
01:10:11,320 --> 01:10:14,070
>> Kuna kasutaja on suheldes otsingukasti,

1139
01:10:14,070 --> 01:10:17,020
$ Tähendab see otsingukasti,

1140
01:10:17,020 --> 01:10:21,820
nii this.val annab meile mis seal sees on otsingukasti kasutaja on hetkel kirjutades.

1141
01:10:22,810 --> 01:10:27,320
Nii, nüüd me tahame teha, on me tahame kinnitada, üle kõigi ridade

1142
01:10:27,320 --> 01:10:29,240
sees meie lauale.

1143
01:10:29,240 --> 01:10:35,630
Et valida kõik read meie tabelis, andsin selle tabeli ID tabelis portfelli

1144
01:10:35,630 --> 01:10:39,060
ja igas reas on esindatud TR element,

1145
01:10:39,060 --> 01:10:42,080
nii et see valija läheb tagasi minu suur massiiv

1146
01:10:42,080 --> 01:10:44,370
Kõigi ridade minu lauale.

1147
01:10:44,370 --> 01:10:47,010
Nüüd tahan ma kinnitada, üle selle massiivi.

1148
01:10:47,010 --> 01:10:52,390
Ma võiks sulle jaoks silmus, kuid jQuery tegelikult annab meile kena funktsioon nimega "iga."

1149
01:10:52,390 --> 01:10:55,220
Mida igaüks teeb on iga võtab ühe argumendina,

1150
01:10:55,220 --> 01:10:57,090
ja see argument on funktsioon.

1151
01:10:57,090 --> 01:11:02,760
Mis see saab teha, on see saab kohaldada, et funktsiooni iga element sees selle nimekirja.

1152
01:11:02,760 --> 01:11:05,550
See funktsioon võtab üks argument, mis on e,

1153
01:11:05,550 --> 01:11:10,090
ja kui see funktsioon on täidetud, seda e läheb asendada esimese rea,

1154
01:11:10,090 --> 01:11:12,070
siis teises reas, ja siis kolmas rida.

1155
01:11:12,070 --> 01:11:15,150
Selle, kuidas see on sama asi nagu jooksmine jaoks silmus

1156
01:11:15,150 --> 01:11:21,360
ja siis figuring praegune element põhineb indeks sees oma jaoks silmus.

1157
01:11:21,360 --> 01:11:24,750
Igal iteratsiooni, iga nende elementide tabelis,

1158
01:11:24,750 --> 01:11:30,560
Ma tahan vaadata, kas teksti element - teksti lahtri sees rida -

1159
01:11:30,560 --> 01:11:33,130
sobib, mida ma otsima.

1160
01:11:33,130 --> 01:11:36,390
See suur pikk jada käske, kuidas ma saaks seda teha.

1161
01:11:36,390 --> 01:11:40,900
Esiteks jälle see viitab nüüd - sest see on sees uus funktsioon -

1162
01:11:40,900 --> 01:11:45,020
see on nüüd praegune rida tabelis.

1163
01:11:45,020 --> 01:11:47,340
Ma tahan olla praegune rida tabelis,

1164
01:11:47,340 --> 01:11:49,950
ja ma tahan saada kõik oma lapsed.

1165
01:11:49,950 --> 01:11:51,940
Pea meeles, DOM on hierarhiline puu,

1166
01:11:51,940 --> 01:11:54,200
mis tähendab, et elemendid on laste arv.

1167
01:11:54,200 --> 01:12:00,180
>> See. Lapsed funktsioon läheb tagasi minu juurde tagasi massiivi kõik elemendid

1168
01:12:00,180 --> 01:12:03,240
et on lapsed, antud juhul rida tabelis.

1169
01:12:03,240 --> 01:12:07,150
See on vaid lihtsalt rakkude sees rida.

1170
01:12:07,150 --> 01:12:09,230
Tahan lihtsalt otsida üle esimese lahtri.

1171
01:12:09,230 --> 01:12:13,090
See. Esimene funktsioon ütleb mulle esimese osa selles massiivis.

1172
01:12:13,090 --> 01:12:17,070
Siis teksti funktsioon ütleb mulle täpselt, mis seal sees on, et raku

1173
01:12:17,070 --> 01:12:19,530
sest ma tahan, et otsida üle, et teksti.

1174
01:12:19,530 --> 01:12:21,040
Lõpuks, olgem teisendada see väiketähtedeks,

1175
01:12:21,040 --> 01:12:23,940
et saaksime teha teksti tõstutundetu päringut.

1176
01:12:23,940 --> 01:12:29,990
Lõpuks tahame näha, kui see string sees tabel sisaldab stringi me otsite.

1177
01:12:29,990 --> 01:12:32,980
IndexOf funktsiooni JavaScript teeb just seda.

1178
01:12:32,980 --> 01:12:37,060
See ütleb meile, kas see string sisaldab muu string.

1179
01:12:37,060 --> 01:12:40,150
Kui see on tõsi, et lahter sisaldab, mida ma otsima,

1180
01:12:40,150 --> 01:12:42,140
siis ma tahan veenduda, et teda näidatakse.

1181
01:12:42,140 --> 01:12:45,330
Näita meetod ütleb: "Näita element."

1182
01:12:45,330 --> 01:12:50,350
Kui see nii ei ole, siis see tähendab, olenemata Otsin ei sisaldu

1183
01:12:50,350 --> 01:12:53,550
jooksul, et rida, ja nii ma tahan peita on kasutaja.

1184
01:12:53,550 --> 01:12:59,240
See saavutab selle kena filtreerimise kus enam näeme kogu tabeli.

1185
01:12:59,240 --> 01:13:01,480
Kui olete huvitatud, kuidas teha see ticker samuti,

1186
01:13:01,480 --> 01:13:04,180
Saadame allikas online. Aga see on tõesti lihtne.

1187
01:13:04,180 --> 01:13:09,860
JQuery on fantastiline meetodeid nende animatsioone ja manipuleerimine CSS omadused.

1188
01:13:09,860 --> 01:13:11,020
Nii, et see on minu jaoks.

1189
01:13:11,020 --> 01:13:15,560
>> Mis siis ees ootab? Nagu te näete mõne päeva, lõpliku projekti ettepanek on tingitud.

1190
01:13:15,560 --> 01:13:17,730
Lõpliku projektide ettepaneku küsib mõned küsimused,

1191
01:13:17,730 --> 01:13:19,420
kuid nende hulgas on kolm vahe -

1192
01:13:19,420 --> 01:13:22,840
1 "hea" verstapost, üks parem verstapost, ja üks parimaid.

1193
01:13:22,840 --> 01:13:25,870
Idee on tõesti teid aidata määrata oma ootusi

1194
01:13:25,870 --> 01:13:29,160
nii et minimaalselt siis oleks rahul väljund oma lõpliku projekti

1195
01:13:29,160 --> 01:13:32,060
ja see "hea", kui olete mures.

1196
01:13:32,060 --> 01:13:34,540
Aga siis huvi saada jõuad natuke midagi paremat

1197
01:13:34,540 --> 01:13:37,680
või midagi paremini, siis me ka omamoodi push te suunas, et hästi.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-thon, vahepeal on paar nädalat.

1199
01:13:40,660 --> 01:13:44,340
Tavaliselt teeme seda loterii alusel alus, kuna huvi,

1200
01:13:44,340 --> 01:13:47,680
kuid koefitsiendid me võtame paarsada meist eribussid Harvardi väljakul

1201
01:13:47,680 --> 01:13:51,540
alla Kendall Square, kus Microsoft on ilus rajatis tabavalt nimetatakse "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England Teadus-ja Arenduskeskus.

1203
01:13:53,830 --> 01:13:56,380
Me saame seal umbes 8:00 Me peame natuke toitu.

1204
01:13:56,380 --> 01:13:58,160
Umbes 01:00 on meil mõned rohkem toitu.

1205
01:13:58,160 --> 01:14:02,150
Umbes 05:00 kui sa ikka ärkvel me pea üle IHOP või teid tagasi ülikooli.

1206
01:14:02,150 --> 01:14:04,380
Eesmärk on sukelduda lõplik projektide

1207
01:14:04,380 --> 01:14:06,190
koos klassikaaslastega ja personal.

1208
01:14:06,190 --> 01:14:08,280
Siis paar päeva hiljem on CS50 Näitused,

1209
01:14:08,280 --> 01:14:10,990
mis on tegelikult mõeldud võimaluse kutid esitleda oma tööd

1210
01:14:10,990 --> 01:14:12,700
ja saavutuste eest semestris

1211
01:14:12,700 --> 01:14:15,610
samas Puutudes omavahel ja saada tunnet, mida igaüks tegi.

1212
01:14:15,610 --> 01:14:17,850
Olles seda öelnud, palju tänu Tommy ja Joosep

1213
01:14:17,850 --> 01:14:19,960
ja me näeme esmaspäeval.

1214
01:14:19,960 --> 01:14:24,070
 [Aplaus]