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

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

3
00:00:05,160 --> 00:00:07,020
[To je CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> To je CS50. To je konec tedna 9. Najlepša hvala.

5
00:00:13,340 --> 00:00:15,310
Končno. Teden 9. Dobil sem ga.

6
00:00:15,310 --> 00:00:18,590
Danes smo nadaljevali pogovor o spletnem programiranju

7
00:00:18,590 --> 00:00:21,660
s pogledom proti končni projekt, ne zato, ker moraš nekaj narediti spletno

8
00:00:21,660 --> 00:00:25,610
Za končnih projektov, temveč zato, ker bodisi za končnih projektov ali po CS50

9
00:00:25,610 --> 00:00:29,000
To je gotovo smer, v katero se bo sodobna programska oprema.

10
00:00:29,000 --> 00:00:31,770
In vendar je to dejansko ni lahka stvar.

11
00:00:31,770 --> 00:00:35,040
Pravzaprav je eden od najtežjih stvari za početi, je vidik oblikovanja.

12
00:00:35,040 --> 00:00:38,600
>> Na primer, z zasnovo mislimo dejansko dobili uporabniški vmesnik

13
00:00:38,600 --> 00:00:40,420
ali uporabniško izkušnjo prav.

14
00:00:40,420 --> 00:00:43,200
Upam si reči - in vemo, od nedavnega niza problem

15
00:00:43,200 --> 00:00:45,960
ko nekaj vas je na sporedu vaših nezadovoljstva o neki kos programske opreme

16
00:00:45,960 --> 00:00:49,000
ali strojne opreme, ki vas razbesni, bodisi na univerzi ali off -

17
00:00:49,000 --> 00:00:51,930
obstaja veliko lokacij tam, tam je veliko strojne opreme tam,

18
00:00:51,930 --> 00:00:53,900
da nekako zanič.

19
00:00:53,900 --> 00:00:58,730
Ampak dejstvo je, da bi stvari, ki so preproste za uporabo, so še vseeno močan

20
00:00:58,730 --> 00:01:00,550
je zelo težko izziv.

21
00:01:00,550 --> 00:01:03,680
Torej, danes sem vprašal, Jožef in Tommy se mi pridruži tukaj

22
00:01:03,680 --> 00:01:06,680
tako da bomo imeli pogovor, tako glede oblikovanja

23
00:01:06,680 --> 00:01:09,090
in kaj bi morala vrste miselnih procesov začeti gre po glavi

24
00:01:09,090 --> 00:01:12,040
Ko oblikujete svoje končne projekte, bodoča prizadevanja.

25
00:01:12,040 --> 00:01:15,040
In potem s pomočjo Tommy je bomo pogled na nekatere od izvedbenih podrobnostih.

26
00:01:15,040 --> 00:01:18,440
Kako lahko nekaj vizijo na papirju ali v tvoji glavi

27
00:01:18,440 --> 00:01:20,760
, ki jih lahko izvedete programsko

28
00:01:20,760 --> 00:01:24,030
z uporabo nekaterih tehnik in tehnologij, kar smo pravkar začela govoriti o tem,

29
00:01:24,030 --> 00:01:29,080
sicer JavaScript in celo nekaj novejših, in sicer AJAX, asinhroni JavaScript.

30
00:01:29,080 --> 00:01:32,950
To vam omogoča, da ustvarite vse bolj dinamični uporabniškega vmesnika

31
00:01:32,950 --> 00:01:35,780
s pridobivanjem več podatkov postopoma od strežnika.

32
00:01:35,780 --> 00:01:38,560
Torej bomo videli nekatere od teh izrezkov, kot tudi danes.

33
00:01:38,560 --> 00:01:41,800
Kot prahi, če ste zainteresirani za koncentracijo v računalništvu

34
00:01:41,800 --> 00:01:45,010
ali minoring v računalništvu, vedo, da je ta petek opoldne

35
00:01:45,010 --> 00:01:48,750
Maxwell v Dworkin 221 bo pica dogodek

36
00:01:48,750 --> 00:01:50,780
kjer boste izvedeli kaj več o računalništvu.

37
00:01:50,780 --> 00:01:54,860
Na poti ven danes boste mogli pobrati neuradno navodila za DS na Harvardu.

38
00:01:54,860 --> 00:01:57,290
Bomo dal na smeti zunaj na višini pasu

39
00:01:57,290 --> 00:01:59,750
tako da, če želite, da zgrabite to in se naučite kaj več o CS,

40
00:01:59,750 --> 00:02:02,480
da bo za vas, kot je bilo v tednu 0.

41
00:02:02,480 --> 00:02:06,500
Tudi če bi želeli, da se nam pridružite za CS50 kosilo v petek ob 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Brez odlašanja, bom dal učno kolega Josepha Ong.

44
00:02:13,260 --> 00:02:19,190
Pozdravljeni. [Aplavz]

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

46
00:02:20,770 --> 00:02:24,780
Prvič sem se naučil o oblikovanju bil v razredu tu imenuje CS179.

47
00:02:24,780 --> 00:02:28,040
>> Profesor času nam je povedal zgodbo o drugi profesorja

48
00:02:28,040 --> 00:02:31,640
, ki so šli v hotel in se uporablja za pipe.

49
00:02:31,640 --> 00:02:35,630
Mi lahko kdo pove, kaj je 2 gumbi na levi in ​​desni storiti?

50
00:02:35,630 --> 00:02:39,080
[Študent] Vroče in hladno. >> Toplo in hladno. Dobro.

51
00:02:39,080 --> 00:02:41,430
Kaj vam je normalno pričakovati, kajne?

52
00:02:41,430 --> 00:02:46,960
Ta profesor po uporabi pipa želi stuširati, in on nadaljuje z uporabo tega.

53
00:02:46,960 --> 00:02:51,310
Misli na levi in ​​desni strani so za vroče in hladno, kajne?

54
00:02:51,310 --> 00:02:55,470
Vendar pa lahko kdorkoli povej mi, kaj ti pravzaprav storiti?

55
00:02:55,470 --> 00:02:58,060
Vse roke?

56
00:02:58,060 --> 00:03:01,740
[Neslišno študentski odziv] >> Eden od predlogov je?

57
00:03:01,740 --> 00:03:05,860
[Neslišno študentski odziv] >> Temperatura?

58
00:03:05,860 --> 00:03:10,460
Torej, eden od njih nadzira temperaturo in druge kontrole? >> [Študent] pritisk vode.

59
00:03:10,460 --> 00:03:12,350
Vodni tlak. Dobro.

60
00:03:12,350 --> 00:03:15,100
Ta profesor vstopi v to in, misleč, da se nadzor vročine in mraza,

61
00:03:15,100 --> 00:03:21,470
Izkazalo pravega, ki misli, da je za vroče, pa vse do

62
00:03:21,470 --> 00:03:23,560
ker želi, da topel tuš.

63
00:03:23,560 --> 00:03:28,100
No, to res ne ujemajo, tako da on dobi to ni zelo zabavno izkušnjo

64
00:03:28,100 --> 00:03:31,110
da so v hladno prho, in vsi vemo, kaj je občutek.

65
00:03:31,110 --> 00:03:33,620
To je primer oblikovanja pomanjkljivost.

66
00:03:33,620 --> 00:03:37,040
Kaj mislim s tem je njegova pričakovanja iz pipe

67
00:03:37,040 --> 00:03:39,420
se ne ujema, kar je izpod tuša,

68
00:03:39,420 --> 00:03:41,780
ki je nekako žalostno zanj.

69
00:03:41,780 --> 00:03:44,990
Torej, to je primer zasnovo pomanjkljivost, kar se dogaja v resničnem življenju.

70
00:03:44,990 --> 00:03:48,020
Vendar pa smo videli vse vrste drugih, ki so, kot dobro.

71
00:03:48,020 --> 00:03:50,390
Smo verjetno ne oboževalci sistema MBTA.

72
00:03:50,390 --> 00:03:55,560
To je podzemni sistem dejansko v Londonu, ki pravi: "Ta gumb ni v uporabi."

73
00:03:55,560 --> 00:04:00,220
Zakaj je sploh tam? Zakaj sploh briga?

74
00:04:00,220 --> 00:04:02,810
Ko sem bil otrok, pri čemer tech zdrava pamet 1 v hiši,

75
00:04:02,810 --> 00:04:05,050
ko bi se računalnik zruši, bi moja mama prišla k meni,

76
00:04:05,050 --> 00:04:07,060
Prikaz mi ta zaslon in me sprašuje, kaj se je zgodilo.

77
00:04:07,060 --> 00:04:09,210
>> Tudi jaz ne vem, kaj to pomeni.

78
00:04:11,890 --> 00:04:14,700
[Smeh] Kaj?

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

80
00:04:18,720 --> 00:04:23,050
Včasih se počutim kot razvijalci programske opreme so le panulo nas.

81
00:04:23,050 --> 00:04:28,460
Kot smo kot uporabniki, "Kaj se dogaja? Nekdo nam povej."

82
00:04:28,460 --> 00:04:32,140
To vse pride k vprašanju oblikovanja.

83
00:04:32,140 --> 00:04:34,650
Zasnova, kot lahko vidimo, ni zgolj stvar estetike,

84
00:04:34,650 --> 00:04:37,230
ni o tem, kako stvari videti.

85
00:04:37,230 --> 00:04:41,720
Vidimo tukaj, da to malo pop-up sem dejansko izgleda zelo lepo.

86
00:04:41,720 --> 00:04:45,290
To je padec senco v ozadju, je meja zaobljenimi dogaja.

87
00:04:45,290 --> 00:04:47,550
To je nekako lepo.

88
00:04:47,550 --> 00:04:51,480
Ni res dobro zasnovan, saj to ni zelo uporabniku prijazen.

89
00:04:51,480 --> 00:04:54,920
Ta mali pop-up, da pride v resnici ne daj mi nobenih informacij

90
00:04:54,920 --> 00:04:58,450
o tem, kaj se dogaja, ne povej mi kaj je uporabnik

91
00:04:58,450 --> 00:05:01,400
o tem, kako si opomore od te napake.

92
00:05:01,400 --> 00:05:05,190
Želimo, da razmišljajo o stvareh, ki zasnova ni.

93
00:05:05,190 --> 00:05:06,670
Prvič, to ni estetika.

94
00:05:06,670 --> 00:05:10,800
Prav tako je ni polnjenje vaš app s tonami nepotrebnih funkcij.

95
00:05:10,800 --> 00:05:14,890
Če ste tajsko restavracijo, si verjetno ne želite, da se zobozdravnik ob istem času.

96
00:05:14,890 --> 00:05:17,720
In z vprašanjem Facebook, ne da veliko ljudi ga uporablja

97
00:05:17,720 --> 00:05:21,130
in ni bilo res v ospredju, kar so gradili.

98
00:05:21,130 --> 00:05:24,200
In tako lepo je, da razmišljajo o ne toliko količino stvari

99
00:05:24,200 --> 00:05:26,390
da ste dajanje na vaš zahtevek, vendar je kakovost

100
00:05:26,390 --> 00:05:28,910
in kako delaš, da je boljše uporabniške izkušnje

101
00:05:28,910 --> 00:05:32,540
za dejansko izboljšanje na tem, kar že imate.

102
00:05:32,540 --> 00:05:37,040
>> Na kratko, design nam pove kaj moramo graditi.

103
00:05:37,040 --> 00:05:41,950
Na primer, če gradimo nekaj, kar vas, da nam iskati stvari,

104
00:05:41,950 --> 00:05:45,970
kot so Google, na primer, delamo na način,

105
00:05:45,970 --> 00:05:48,950
ki zahteva, da uporabnik lahko veliko klikov, da bi dobili, kar želijo,

106
00:05:48,950 --> 00:05:52,580
ali bi morali to storiti na način, na primer z Google Instant ali autocomplete

107
00:05:52,580 --> 00:05:54,970
ki nam omogoča priti do naših rezultatih hitreje?

108
00:05:54,970 --> 00:05:58,740
Tehnika gre, tako kot Tommy bo pokazal, dejansko gradnjo.

109
00:05:58,740 --> 00:06:01,890
Obstaja veliko vrst oblikovanja.

110
00:06:01,890 --> 00:06:06,070
Na primer, če ste izgradnjo nekaj, da se uporabi nekaj

111
00:06:06,070 --> 00:06:09,770
v tretji državi, svetu, kjer je ni veliko elektrike ali da je veliko tehnologije,

112
00:06:09,770 --> 00:06:11,440
morate oblikovati kaj ste gradnjo

113
00:06:11,440 --> 00:06:14,210
tako, da lahko daje dostop do ljudi tam.

114
00:06:14,210 --> 00:06:18,290
Toda kaj bi lahko vrste drugih odločitvah oblikovanja obstaja

115
00:06:18,290 --> 00:06:21,850
ali je morda vpleten v kaj takega?

116
00:06:23,690 --> 00:06:25,660
Ja. Vidim roko.

117
00:06:25,660 --> 00:06:37,200
[Neslišno študentski odziv] >> desno. Točno tako. Dostopnost je ena stvar.

118
00:06:37,200 --> 00:06:40,870
Veliko ljudi ne razmišljamo, "Kaj pa moje uporabnike?"

119
00:06:40,870 --> 00:06:43,160
kot skrajnosti obeh spektra.

120
00:06:43,160 --> 00:06:47,770
Imam uporabnike, ki bi jih invalidnosti, da nisem razmišljal

121
00:06:47,770 --> 00:06:50,590
in jaz sem samo razmišljal o načrtovanju za splošno uporabnika.

122
00:06:50,590 --> 00:06:52,630
Internet je dostopen vsem danes,

123
00:06:52,630 --> 00:06:54,870
in bi moral biti oblikovanje za tiste ljudi, kot dobro.

124
00:06:54,870 --> 00:06:58,620
Kakšne vrste drugih odločitev načrtovanja lahko naredite?

125
00:06:58,620 --> 00:07:00,690
Da. >> [Študent] Stroškov.

126
00:07:00,690 --> 00:07:02,680
Stroški. Zelo dobro.

127
00:07:02,680 --> 00:07:08,060
Še ena stvar, ki jo lahko utemelji svoje odločitve o oblikovanju na stroškovno.

128
00:07:08,060 --> 00:07:13,130
Če smo podjetja, ki jih želite zgraditi nekaj, da ne bo veliko stroškov za izdelavo

129
00:07:13,130 --> 00:07:17,720
lahko pa prodajajo v zelo visokih stroškov ali pa nam prinesla nekaj dobička.

130
00:07:17,720 --> 00:07:21,540
>> To so vse različne vrste oblikovanja, toda ko gradimo nekaj na internetu

131
00:07:21,540 --> 00:07:25,120
ali ko gradimo nekaj, kar verjetno ne stane toliko, da zgraditi zdaj,

132
00:07:25,120 --> 00:07:28,630
internetnih aplikacij, kot so - ne boste vrgli veliko kapitala v to

133
00:07:28,630 --> 00:07:30,900
da bi nekaj, kar dejansko deluje -

134
00:07:30,900 --> 00:07:33,490
kaj bomo bolj skrbi je uporabniška izkušnja.

135
00:07:33,490 --> 00:07:36,390
Temu pravimo si osredotočen na oblikovanje.

136
00:07:36,390 --> 00:07:41,550
V bistvu tisto, kar si je orientirano načrtovanje vključuje dajanje sebe v čevlje vaših uporabnikov.

137
00:07:41,550 --> 00:07:44,870
Če nekdo prijavi za tisto, kar sem gradnjo,

138
00:07:44,870 --> 00:07:48,250
ki so jih očitno prišel v mojo posebno uporabo s ciljem v mislih,

139
00:07:48,250 --> 00:07:50,280
z nalogo, da želijo dokončati.

140
00:07:50,280 --> 00:07:53,650
In vaša naloga je, ne samo, da bi jim pomagali izpolniti to nalogo

141
00:07:53,650 --> 00:07:57,930
ampak da bi jim pomagali izpolniti svojo nalogo na način, ki je učinkovit, intuitivno

142
00:07:57,930 --> 00:08:01,900
in, kot nekateri oseba, je dejal tam, dostopna.

143
00:08:01,900 --> 00:08:03,750
Kaj učinkovitost pomeni?

144
00:08:03,750 --> 00:08:08,050
Učinkovitost pomeni, kako hitro se moja dokončale Glede na moje vmesnik.

145
00:08:08,050 --> 00:08:11,650
Ali se veliko klikov za njih priti iz enega kraja v drugega?

146
00:08:11,650 --> 00:08:14,630
Je to dolgočasno? Ali imajo opraviti veliko ponavljajočih se nalog?

147
00:08:14,630 --> 00:08:17,140
Želimo, da bi ta proces čim bolj učinkovito

148
00:08:17,140 --> 00:08:20,070
tako da ne bi bilo treba narediti te vrste stvari.

149
00:08:20,070 --> 00:08:24,230
Kot je za intuitivnost, to je, na primer, če si poišče svoj vmesnik,

150
00:08:24,230 --> 00:08:27,240
je enostavno za njih, da bi dobili od kraja do kraja?

151
00:08:27,240 --> 00:08:30,390
Je enostavno za njih, da ugotovimo, kaj imajo še v mojem vmesniku

152
00:08:30,390 --> 00:08:33,770
da za njih za dosego cilja ali naloge, ki jih želite doseči?

153
00:08:33,770 --> 00:08:37,520
>> In končno, kot je tista oseba, je dejal tam, dostopnost je zelo pomembno.

154
00:08:37,520 --> 00:08:39,640
[Moški govorec] Na voljo je z dostopnostjo za stvari, kot so gledanje,

155
00:08:39,640 --> 00:08:42,740
všeč kako dejansko oblikovati nekaj za nekoga, ki je slep?

156
00:08:42,740 --> 00:08:46,460
Oh. Za ljudi, ki ne vidijo sploh imamo nekaj, kar ti bralniki zaslona.

157
00:08:46,460 --> 00:08:49,070
Kaj morate storiti, je, da bi moral graditi svojo spletno stran tako,

158
00:08:49,070 --> 00:08:52,020
da, na primer, posebne tehnologije, kar mi imenujemo -

159
00:08:52,020 --> 00:08:53,590
Obstaja veliko stvari zdaj.

160
00:08:53,590 --> 00:08:55,660
Mislim, da so bralniki zaslona, ​​imenovane JAWS.

161
00:08:55,660 --> 00:08:58,410
Veliko teh stvari, sklicuje na to, kar imenujemo območja pravila

162
00:08:58,410 --> 00:09:02,010
da bi prebral do uporabnika, kar je trenutno na strani.

163
00:09:02,010 --> 00:09:05,480
Za tiste ljudi, ki ne morejo videti, morate zagotoviti, da so ti bralniki zaslona

164
00:09:05,480 --> 00:09:09,130
dejansko lahko poberem vsebine na strani in lahko dejansko pokažejo svoje uporabnike,

165
00:09:09,130 --> 00:09:13,630
Če ne vidite, vsaj še vedno lahko razumeli vsebine na strani.

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

167
00:09:16,190 --> 00:09:23,410
Dovolj govorimo o dobrem oblikovanju. Pogovorimo se o slabem načrtovanju.

168
00:09:23,410 --> 00:09:25,220
To so stvari, ki jih ne bi smeli početi.

169
00:09:25,220 --> 00:09:27,890
Ali lahko kdorkoli povej mi kaj o svojih izkušnjah z Craigslist

170
00:09:27,890 --> 00:09:32,190
in kaj mislijo, da ni tako veliko o tem design?

171
00:09:33,690 --> 00:09:36,430
Da. >> [Študent] Mislim, da je preveč besed na enem področju.

172
00:09:36,430 --> 00:09:39,350
Preveč besed, kajne? Popolnoma prepričljivo.

173
00:09:39,350 --> 00:09:42,400
Si prišel na to stran in si pozdravili s kopico stvari tukaj

174
00:09:42,400 --> 00:09:43,860
da morda sploh ni pomembno za vas.

175
00:09:43,860 --> 00:09:47,010
Na primer, če živite v eni državi, ki se ne začne s to črko.

176
00:09:47,010 --> 00:09:48,690
Recimo, da živite v Teksasu ali kaj podobnega.

177
00:09:48,690 --> 00:09:53,790
>> Moraš se pomaknite vso pot navzdol na stran, da bi dobili na mestu, kjer ste na.

178
00:09:53,790 --> 00:10:00,320
Jaz sem iz Bostona, zato naj pogledam v Massachusettsu. Kje je Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, tukaj je. Oh, to je Boston. Ok.

180
00:10:03,270 --> 00:10:09,070
Oglejmo si Bostonu. [Smeh]

181
00:10:09,070 --> 00:10:12,250
Precej veliko, kajne?

182
00:10:12,250 --> 00:10:16,400
Nerodni stvari tam. [Smeh]

183
00:10:17,320 --> 00:10:19,470
Recimo, da iščem nekje živeti.

184
00:10:19,470 --> 00:10:24,130
Koliko ljudi dejansko uporablja Craigslist? Tone vas.

185
00:10:24,130 --> 00:10:30,960
Obstaja precej slab lahko pogledaš, ampak poglejmo to.

186
00:10:35,130 --> 00:10:38,970
Kakšna je razlika med img in pic? Mi lahko kdo pove?

187
00:10:41,350 --> 00:10:42,830
Obstaja dejansko ni razlike.

188
00:10:42,830 --> 00:10:47,710
Pomenijo natanko isto stvar, vendar imajo različne oznake za njih iz nekega razloga.

189
00:10:48,980 --> 00:10:53,560
Če kliknem na slika je, se ne zgodi nič na strani.

190
00:10:53,560 --> 00:10:57,490
Pravzaprav sem moral še enkrat za iskanje nečesa, da se zgodi.

191
00:10:57,490 --> 00:11:02,430
Kaj bi lahko bilo bolje odločitev modela, ki bi se lahko tam naredili?

192
00:11:03,820 --> 00:11:08,030
Če sem s klikom na ta filter, najbrž želite filtrirati ki jih je ta ukrep

193
00:11:08,030 --> 00:11:09,970
ali posebna kategorija.

194
00:11:09,970 --> 00:11:14,450
Torej, namesto da bi ponovno pritisnite Iskanje, lahko sem naredil samodejno filtriranje

195
00:11:14,450 --> 00:11:17,060
nekako v stilu Google če to stori takoj.

196
00:11:17,060 --> 00:11:20,440
[Malan] A ne tvori kot smo jih videl doslej je treba fizično predložiti

197
00:11:20,440 --> 00:11:23,170
s pritiskom Vpišite najmanj ali s klikom na gumb?

198
00:11:23,170 --> 00:11:26,830
Kot ste jih videli do sedaj, boste dejansko morali klikniti Pošlji, da bi počel take stvari.

199
00:11:26,830 --> 00:11:30,090
>> Vendar se bo Tommy ti pokažem na sekundo, dejansko obstajajo načini za vas

200
00:11:30,090 --> 00:11:33,010
tako da, ko boste kliknili na to stvar lahko samodejno pošlje

201
00:11:33,010 --> 00:11:38,840
pravimo zahtevek AJAX in dobili boste podatke nazaj in filtrirati rezultate takoj.

202
00:11:38,840 --> 00:11:41,340
Obstajajo ton stvari, ki so narobe s tem vmesnikom.

203
00:11:41,340 --> 00:11:43,530
[Malan] Lahko iščete Cambridge?

204
00:11:43,530 --> 00:11:47,030
Nekaj ​​je nekoliko nenavadno, tukaj, kjer vas skrbi Cambridge

205
00:11:47,030 --> 00:11:54,790
in vendar ste dobili Westford, Spring Hill, West Newton in podobno.

206
00:11:54,790 --> 00:11:57,930
Verjetno ni idealna. >> Verjetno ni idealna.

207
00:11:57,930 --> 00:12:03,900
Kako bom lahko, da uporabnikova izkušnja bolj na to posebno stran?

208
00:12:03,900 --> 00:12:07,340
Da. >> [Študent] Navodila.

209
00:12:07,340 --> 00:12:09,500
Ok. Navodila v kakšno smislu?

210
00:12:09,500 --> 00:12:14,630
[Študent] Na primer, stvar za začetnike, ki sploh ne vedo, kaj je Craigslist

211
00:12:14,630 --> 00:12:17,320
ali ne veš, kaj moraš storiti.

212
00:12:17,320 --> 00:12:20,150
Prav. Tako razlago, kaj Craigslist je na tej strani, je zelo pomembno.

213
00:12:20,150 --> 00:12:23,490
Mi lahko dejansko sporočite uporabnikom, kaj ta stran je dejansko za.

214
00:12:23,490 --> 00:12:27,090
Če sem samo na obisku to, sem videl cel kup lokacij. Sploh ne vem, kaj pomenijo.

215
00:12:27,090 --> 00:12:29,730
Toda še bolj pomembno, prav tako si ogleduje ta vmesnik,

216
00:12:29,730 --> 00:12:35,530
spomniš, ko sem imel, da se pomaknete navzdol tono stvari najti posebno skupnost

217
00:12:35,530 --> 00:12:37,560
da sem dejansko mar za to.

218
00:12:37,560 --> 00:12:39,820
Kaj je hitrejši način, da bi lahko to storil? Da.

219
00:12:39,820 --> 00:12:43,290
[Študent] jih razdelili v vzhodnih, zahodnih regijah. >> Redu.

220
00:12:43,290 --> 00:12:47,460
Lahko jih razdelimo v več kategorij, ki bi lahko pomagali mi hitreje določi

221
00:12:47,460 --> 00:12:49,820
kako priti do tega določeni lokaciji.

222
00:12:49,820 --> 00:12:54,510
[Študent] Put spustni seznam. >> Desno. Ok.

223
00:12:54,510 --> 00:12:58,240
Lahko uporabite spustni meni, ker imamo določeno vrsto stvari

224
00:12:58,240 --> 00:13:00,100
in smo jih prikazali v spustnem meniju.

225
00:13:00,100 --> 00:13:02,240
Tako pa ne bo tako veliko prostora na zaslonu.

226
00:13:02,240 --> 00:13:05,630
Toda še bolj kot to, kaj lahko storimo?

227
00:13:05,630 --> 00:13:09,220
Da. >> [Neslišno študentski odziv] >> Lahko to ponoviš? >> [Študent] polje za iskanje.

228
00:13:09,220 --> 00:13:11,260
Ja, polje za iskanje. To je super.

229
00:13:11,260 --> 00:13:16,430
Kaj dejansko lahko naredimo je, če se ozremo na diapozitivov, v iskalno polje.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Zelo enostaven način za iskanje z rezultati, ki jih poznate, so v kompletu.

231
00:13:21,520 --> 00:13:25,980
Če začnem tipkati BO, samo pokaži mi vse rezultate, ki so BO znotraj njih.

232
00:13:25,980 --> 00:13:29,030
Na ta način lahko zelo enostavno najti posebne 1 želim iti

233
00:13:29,030 --> 00:13:32,390
namesto da se pomaknete skozi to res velik seznam.

234
00:13:32,390 --> 00:13:37,450
>> To so vse vrste res nizko viseče sadje, da nekdo, ki ga izvaja Craigslist

235
00:13:37,450 --> 00:13:42,500
lahko dejansko narediti, da bi izkušnje na spletni strani veliko boljši za njihovo posameznega uporabnika.

236
00:13:42,500 --> 00:13:46,370
Ok. Dovolj govorjenja o slabih spletnih strani.

237
00:13:46,370 --> 00:13:49,410
Pogovorimo se o Facebooku.

238
00:13:50,880 --> 00:13:54,390
Ko je prišel ven Facebook, in zlasti Facebook fotografije,

239
00:13:54,390 --> 00:13:57,870
je bilo veliko drugih storitev v času, ki bi lahko natančno naredil iste stvari.

240
00:13:57,870 --> 00:14:00,740
Lahko organizirate fotografije v albume.

241
00:14:00,740 --> 00:14:03,360
Kaj lahko narediš, je, da bi jih lahko organizirali v skupine, kakor tudi.

242
00:14:03,360 --> 00:14:06,070
Lahko jih razvrstite po datumu. Lahko naredite vse te posebne stvari.

243
00:14:06,070 --> 00:14:11,710
Ampak, ali kdo ve, kaj je Facebook fotografij eksplodirala v času, ko je bila sproščena?

244
00:14:11,710 --> 00:14:15,080
Da. >> [Študentskih] Oznake. Tags >>. Točno tako.

245
00:14:15,080 --> 00:14:21,300
Imamo Milo sem, kdo je naš pes maskota s tem Ruta CS50.

246
00:14:21,300 --> 00:14:24,810
Vidite lahko, da imamo to funkcijo označevanja na sredini.

247
00:14:24,810 --> 00:14:28,240
In kaj je tako zanimivega Facebook fotografij z vidika uporabnosti

248
00:14:28,240 --> 00:14:34,130
je, da dejansko lahko ljudje preko tega, da vključijo svoje prijatelje v svoje fotografije.

249
00:14:34,130 --> 00:14:37,680
Za Facebooku, saj je njihova spletna stran je zlasti socialne

250
00:14:37,680 --> 00:14:40,750
gre za gradnjo tovrstnega družbenega ozračja.

251
00:14:40,750 --> 00:14:42,620
To izboljša izkušnjo fotografij veliko več

252
00:14:42,620 --> 00:14:46,390
ker lahko dejansko začeli rekel: »To so povezave med ljudmi,

253
00:14:46,390 --> 00:14:49,220
in to so fotografije o ljudeh, ki jih dejansko zanimajo. "

254
00:14:49,220 --> 00:14:52,200
Del tega je tudi neke vrste narcisizem.

255
00:14:52,200 --> 00:14:54,980
Ljudje radi, da se je označila na fotografijah in takih stvari.

256
00:14:54,980 --> 00:14:58,510
Čeprav to ni nujno dobra lastnost ljudi,

257
00:14:58,510 --> 00:15:01,910
Hkrati se je na podlagi dobre odločitve oblikovanja

258
00:15:01,910 --> 00:15:04,860
ker ljudje dejansko skrbi za stvari, kot je ta.

259
00:15:04,860 --> 00:15:07,190
Tako, da je Facebook fotografij.

260
00:15:07,190 --> 00:15:09,800
>> Toda kaj je govoril Facebook bolj na splošno.

261
00:15:09,800 --> 00:15:13,400
Prepričan sem, da veliko ljudi tukaj so mnenja o Facebooku

262
00:15:13,400 --> 00:15:16,430
tako dobre in slabe odločitve, oblikovanje sklepov design.

263
00:15:16,430 --> 00:15:20,270
Torej odprtine ali biti srečni.

264
00:15:23,480 --> 00:15:26,450
Daj no. Vem, da vas vse uporabljajo Facebook.

265
00:15:26,450 --> 00:15:30,970
Nekdo mora nekaj slabega za povedati ali kaj dobrega za povedati o tem. Da.

266
00:15:30,970 --> 00:15:35,060
[Študent] V novice krme obstaja veliko stvari, ki sem res ne skrbi.

267
00:15:35,060 --> 00:15:37,740
Novice krma ne pokaže veliko stvari, ki jih morda ne zanimajo.

268
00:15:37,740 --> 00:15:41,660
Imate prijatelje na Facebooku, ki ste jih niso izpolnjeni za 2 ali 3 leta

269
00:15:41,660 --> 00:15:43,860
in boste videli njihove rezultate, novice popping up v vašem novice krme

270
00:15:43,860 --> 00:15:45,870
in ti sploh ne briga.

271
00:15:45,870 --> 00:15:48,700
Facebook je dejansko prizadeval, da bi to bolje,

272
00:15:48,700 --> 00:15:53,150
in oni dejansko poskušali push ustrezne rezultate na vrh novice krme kot prepozne

273
00:15:53,150 --> 00:15:58,300
tako da boste dejansko videli stvari, ki jih prijatelji, ki so pomembne za vas in vaših bližnjih prijateljev.

274
00:15:58,300 --> 00:16:01,110
Še kaj? Da.

275
00:16:01,110 --> 00:16:06,400
[Neslišen odziv študentov] >> Lahko to ponoviš?

276
00:16:06,400 --> 00:16:10,140
[Študent] Oglasi so razmeroma nevsiljivo. >> V kakšnem smislu?

277
00:16:10,140 --> 00:16:16,370
[Neslišno študentski odziv] Nimajo luč na zaslonu, kot transparenti.

278
00:16:16,370 --> 00:16:17,760
Ok. To je dobro.

279
00:16:17,760 --> 00:16:25,030
Če se spomnite na internetu od 90 let - >> [Malan] sem bil tam. >> Bil je tam. [Smeh]

280
00:16:25,030 --> 00:16:29,210
Morda se spomnite utripajoče ozadje gif, sparkly stvari,

281
00:16:29,210 --> 00:16:31,570
GeoCities slog vrsta stvari.

282
00:16:31,570 --> 00:16:34,080
To res ni primer dobrega oblikovanja

283
00:16:34,080 --> 00:16:36,690
ker je res moteča od vsebine.

284
00:16:36,690 --> 00:16:39,590
Umetnost Yale spletna stran uporablja, da so animirane GIF kot njihov izvor

285
00:16:39,590 --> 00:16:41,800
in ne moreš ničesar prebral na strani,

286
00:16:41,800 --> 00:16:44,870
ampak mislim, da je nekdo dejansko govoril z njimi in zdaj je malce drugače.

287
00:16:44,870 --> 00:16:48,940
[Malan] To je veliko bolje. >> To je veliko bolje, kot lahko vidite. >> [Malan] Oh ja.

288
00:16:48,940 --> 00:16:56,020
Res super, samo - Ja. Ok.

289
00:16:56,020 --> 00:17:00,560
>> Del tega je tudi, da vaše strani lahko zelo minimalistično in zelo razumljivo

290
00:17:00,560 --> 00:17:05,690
Tako stvari na strani toka na način, ki je zelo logičen in ne v napoto drug drugega.

291
00:17:05,690 --> 00:17:11,849
Kakšne vrste drugih stvari, ki so dobre ali slabe o Facebook o Facebooku?

292
00:17:11,849 --> 00:17:15,730
Naj samo še oblikovanje pogovor.

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

294
00:17:21,339 --> 00:17:25,640
[Študent] Novi Timeline Sistem omogoča iskanje te osebe profila o svoji preteklosti.

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

296
00:17:28,119 --> 00:17:30,280
Časovnica je velika stvar, saj vam omogoča, da svojim prijateljem stebla

297
00:17:30,280 --> 00:17:33,300
nazaj, ko so bili v srednji šoli.

298
00:17:35,160 --> 00:17:38,060
Časovnica je dobro, saj to omogoča filtriranje po vsebini veliko hitreje,

299
00:17:38,060 --> 00:17:41,500
vam omogoča, da bi našli stvari, ki bi sicer bili sprejeti ti zelo dolgo časa, da bi našli

300
00:17:41,500 --> 00:17:45,840
Samo pomikate gor in dol, gor, gor, gor, gor, gor, kot bi šli nazaj v preteklost.

301
00:17:45,840 --> 00:17:48,910
Potem pa je tu še neke vrste negativna kot v smislu uporabniške izkušnje.

302
00:17:48,910 --> 00:17:51,190
Kaj bi to lahko bilo?

303
00:17:51,190 --> 00:17:56,780
Velika beseda, ki se začne s P-R. >> [Študent] zasebnosti. >> Zasebnosti, kajne?

304
00:17:56,780 --> 00:17:59,970
Zasebnost je veliko uporabniška izkušnja vprašanje.

305
00:17:59,970 --> 00:18:07,190
To je ena izmed stvari, sovražim o Facebooku zdaj. [Smeh]

306
00:18:07,190 --> 00:18:09,000
[Malan] Enako kot sem zdaj.

307
00:18:09,000 --> 00:18:11,380
David ni vedel, je to dejansko zgodilo šele včeraj.

308
00:18:11,380 --> 00:18:14,560
Torej, zdaj ve, da vsakič, ko sem ga čvek vem, da me je ignorirajo.

309
00:18:14,560 --> 00:18:16,880
[Malan] je nerodno del je pravzaprav sem ga ignorira,

310
00:18:16,880 --> 00:18:21,040
in nisem vedel, da je vedel, da ga ignorirajo. [Smeh]

311
00:18:21,040 --> 00:18:24,030
Zasebnost je veliko vprašanje.

312
00:18:24,030 --> 00:18:28,670
Ali lahko kdo tu povej mi, kaj bi lahko bilo slabo Facebook zasebnosti

313
00:18:28,670 --> 00:18:32,270
Poleg tega, da počnejo stvari, kot je ta?

314
00:18:32,270 --> 00:18:37,240
Kaj je še posebej težko narediti v zvezi s Facebookom zasebnosti?

315
00:18:37,240 --> 00:18:40,340
Ta vrsta je vodilno vprašanje.

316
00:18:41,680 --> 00:18:43,930
Da. >> [Študent] Skrij fotografije iz nekaterih ljudi.

317
00:18:43,930 --> 00:18:46,170
Prav. Točno tako, da skrijete svoje fotografije iz nekaterih ljudi.

318
00:18:46,170 --> 00:18:51,290
Imajo ta majhen, majhen gumb v zgornjem desnem kotu, ki vam omogoča, da preklopite zasebnost fotografije.

319
00:18:51,290 --> 00:18:56,360
Njihove možnosti za zasebnost so zelo različni med različnimi vrstami menijev.

320
00:18:56,360 --> 00:18:59,510
>> So gotten veliko bolje, o tem pred kratkim, vendar je nekoč veljalo

321
00:18:59,510 --> 00:19:04,870
da vsakič, ko je hotel preprečiti, da bi videli svoje prijatelje, fotografije,

322
00:19:04,870 --> 00:19:08,280
bi morali iti skozi zelo zapletene 5 korakih tega, ker, kot so,

323
00:19:08,280 --> 00:19:11,150
Naj kliknite na to povezavo, zdaj pa me še enkrat, mi še enkrat,

324
00:19:11,150 --> 00:19:13,420
Naj določiti, katere ljudje ne morejo videti mojih fotografij.

325
00:19:13,420 --> 00:19:17,250
To ni posebej dobra na strani Facebook

326
00:19:17,250 --> 00:19:20,530
ker toliko o uporabniški izkušnji, dejansko jim daje svobodo

327
00:19:20,530 --> 00:19:22,460
za nadzor nad tem, kaj lahko ljudje vidijo.

328
00:19:22,460 --> 00:19:25,550
Temu pravimo uporabniški nadzor in svobodo.

329
00:19:25,550 --> 00:19:31,090
Če ne dovolite, da vaši uporabniki storiti na način, ki je učinkovit in intuitiven

330
00:19:31,090 --> 00:19:34,570
potem vaša uporabniška izkušnja ni res, da je veliko na vseh.

331
00:19:34,570 --> 00:19:38,200
 Bi vi želeli povedati ničesar o Facebooku?

332
00:19:38,700 --> 00:19:41,420
Kako to izključite?

333
00:19:41,420 --> 00:19:46,290
[Ong] Ne, ne moreš je ta možnost izklopljena, in da je velika napaka uporabnost na strani Facebook.

334
00:19:46,290 --> 00:19:49,410
Ta funkcija - Pravzaprav sem pogledal vanj včeraj -

335
00:19:49,410 --> 00:19:53,940
da je bodisi, da ne morete narediti, ali pa je nekje zakopan zelo, zelo globoko

336
00:19:53,940 --> 00:19:58,050
V kotičku Facebook, ker ne morem ugotoviti, kako onemogočiti to funkcijo sploh.

337
00:19:58,050 --> 00:20:00,400
[Malan] Včasih pa ti sklepi niso očitne

338
00:20:00,400 --> 00:20:03,890
ker ste vi nam je dal veliko koristnih povratnih informacij o različnih aplikacij CS50

339
00:20:03,890 --> 00:20:05,710
in spletne strani, ki seveda uporablja.

340
00:20:05,710 --> 00:20:10,260
Nismo izvajali vse te zahteve in predloge.

341
00:20:10,260 --> 00:20:14,550
>> Del, ki je za pridobivanje toliko prošenj, da je to funkcija časa,

342
00:20:14,550 --> 00:20:17,070
ampak včasih smo le zavestno odločiti, kot so,

343
00:20:17,070 --> 00:20:19,830
"Hvala za predlog, vendar pa se ne strinjamo."

344
00:20:19,830 --> 00:20:24,350
Torej, kako se dejansko odločita, kaj morate storiti, če želite uporabnikom, da bi moral nekaj storiti

345
00:20:24,350 --> 00:20:28,110
tudi če ni nujno?

346
00:20:28,110 --> 00:20:32,360
To je dobro ravnovesje med dejansko posluša, kaj pravijo uporabniki

347
00:20:32,360 --> 00:20:35,840
in dejansko imajo neko progo navedeno, kje si rekel,

348
00:20:35,840 --> 00:20:37,750
"Ne bomo storiti vse, kar ti uporabniki povedati."

349
00:20:37,750 --> 00:20:42,520
In predvsem, mislim, da je bil citat Henryja Forda, ki povzema to gor kar dobro.

350
00:20:42,520 --> 00:20:47,130
"Če bi vprašal ljudi, kaj hočejo, bi rekel, da je želel hitrejše konje."

351
00:20:47,130 --> 00:20:51,840
Ali lahko kdo nekako draži narazen, kaj to v resnici pomeni citat?

352
00:20:51,840 --> 00:20:56,060
Ne samo, da uporabniki vedo, kaj hočejo,

353
00:20:56,060 --> 00:20:59,180
ampak to je bolj, da -

354
00:20:59,180 --> 00:21:02,720
[Študent] Ne vem, kaj je mogoče.

355
00:21:02,720 --> 00:21:06,140
V delu ne vedo, kaj je mogoče.

356
00:21:07,880 --> 00:21:11,440
Tease, da razen malo več. Kaj misliš s tem?

357
00:21:11,440 --> 00:21:21,340
[Neslišno študentski odziv]

358
00:21:21,340 --> 00:21:25,770
To je dobro. Kaj mislim, da poskušamo tukaj povedati je, da ljudje vedo, kaj hočejo.

359
00:21:25,770 --> 00:21:28,050
Želijo hitrejše konje.

360
00:21:28,050 --> 00:21:29,840
Kaj v resnici želijo, je možnost za hitrejše,

361
00:21:29,840 --> 00:21:32,310
ampak res ne vem, medij, s katerim se doseže to.

362
00:21:32,310 --> 00:21:36,330
Ko ste prišli na svoje uporabnike in uporabniki povem nekaj

363
00:21:36,330 --> 00:21:39,700
in ti rečejo: "Želimo, da te funkcije in te značilnosti in lastnosti teh"

364
00:21:39,700 --> 00:21:42,650
ne želite, da nujno razmišljati o tem, "Naj gredo naprej

365
00:21:42,650 --> 00:21:44,720
"In izvesti tisto, kar je izrecno rekel,"

366
00:21:44,720 --> 00:21:48,610
ampak kaj hočeš, da misliti je, "Kaj lahko vrsta idej dobim od tega?"

367
00:21:48,610 --> 00:21:50,450
Kaj so pravzaprav želeli?

368
00:21:50,450 --> 00:21:55,560
>> In od tam, kaj lahko naredite, je oblikovati nekaj, da izpolnjuje te zahteve

369
00:21:55,560 --> 00:22:00,340
vendar ne nujno na način, da uporabnik pričakuje, da bodo zadovoljni.

370
00:22:00,340 --> 00:22:03,830
Torej nekaj podobnega končnih projektov, v zelo realno,

371
00:22:03,830 --> 00:22:07,900
kaj je koristno, tolči, ko gre za kar nekaj boljšega,

372
00:22:07,900 --> 00:22:10,630
še posebej, če oblikovalec to aroganco o njem

373
00:22:10,630 --> 00:22:14,360
pri čemer si nekako ve, kaj je najbolje, boste morda lahko prispevek iz vaših uporabnikov,

374
00:22:14,360 --> 00:22:16,580
ampak kako si dejansko šel približno pridobivanje te povratne informacije?

375
00:22:16,580 --> 00:22:21,610
V končnih projektov, zelo konkretno, kar daje optimalne rezultate tukaj?

376
00:22:21,610 --> 00:22:25,030
Kaj daje optimalne rezultate - in bom šel čez to v 2. -

377
00:22:25,030 --> 00:22:29,190
je ta proces razvijanja in testiranja, nato pa ponavljanjem.

378
00:22:29,190 --> 00:22:32,020
Kaj mislim s testiranjem je ponavadi, ko načrtujete nekaj

379
00:22:32,020 --> 00:22:36,970
misliš, da je precej dobra, kot je: "Jaz sem tako dober oblikovalec. Vsakdo bo všeč."

380
00:22:36,970 --> 00:22:41,600
In potem ste jo dali ven in ljudje res ne bo všeč iz nekega razloga.

381
00:22:41,600 --> 00:22:46,820
Kaj morate storiti je, da moraš vzeti tiste dele, ki jih ljudje storijo, kot

382
00:22:46,820 --> 00:22:49,180
prenovo in stvari, ki jih ljudje ne marajo.

383
00:22:49,180 --> 00:22:53,080
Sliši se zelo očitno proces, vendar je to proces, ki se nenehno ponavljanjem

384
00:22:53,080 --> 00:22:55,980
na vrhu, kar ste že zgradili, je proces, ki pomaga

385
00:22:55,980 --> 00:22:59,730
ne samo izboljšati svoje sposobnosti načrtovanja, ampak tudi vam pomaga izboljšati zasnovo

386
00:22:59,730 --> 00:23:03,790
tako da ljudje dejansko cenijo svoj izdelek še bolj kot prej.

387
00:23:03,790 --> 00:23:07,390
>> Jaz bom šel v konkretne primere, kaj bi lahko dejansko narediti.

388
00:23:07,390 --> 00:23:11,390
Kot nekakšen zadnji primer izdelka, si oglejmo kajak.

389
00:23:11,390 --> 00:23:14,970
KAJAK ko je prišel ven bil zelo priljubljen.

390
00:23:14,970 --> 00:23:18,760
Ali lahko kdorkoli veš zakaj?

391
00:23:18,760 --> 00:23:20,950
Katere so vrste stvari, ki jih radi o tem, če ste ga uporabili

392
00:23:20,950 --> 00:23:23,990
ali kaj so vrste stvari, ki vam niso všeč?

393
00:23:23,990 --> 00:23:31,590
Da. >> [Neslišno študentski odziv] >> Ok.

394
00:23:31,590 --> 00:23:34,730
To je del tega je dajanje v najem uporabnik poizvedbo, ki je bolj zgovorni

395
00:23:34,730 --> 00:23:38,150
kot zelo omejevalno, kot so, "Moraš izbrati vaš začetni datum

396
00:23:38,150 --> 00:23:39,810
"In da boste morali izbrati vaš končni datum."

397
00:23:39,810 --> 00:23:44,910
Dejstvo je, da vam omogoča biti prožna o tem in vam daje vse lete v tem območju.

398
00:23:44,910 --> 00:23:46,730
Še kaj?

399
00:23:46,730 --> 00:23:50,530
[Študent] Ti vključujejo pristojbin v ceno.

400
00:23:50,530 --> 00:23:53,330
Oni so pristojbine v ceni.

401
00:23:53,330 --> 00:23:56,720
Davki in stvari dejansko šel naravnost v to ceno v zgornjem levem kotu

402
00:23:56,720 --> 00:24:00,710
da vam ne bo Prelisičil v razmišljanju, da ste dejansko plačuje za $ 240 let

403
00:24:00,710 --> 00:24:03,280
če je res 330 $.

404
00:24:03,280 --> 00:24:06,200
Še kaj? Da.

405
00:24:06,200 --> 00:24:10,140
[Neslišno študentski odziv]

406
00:24:10,140 --> 00:24:14,610
Nisem prepričan, če dejansko kaj narediš to.

407
00:24:14,610 --> 00:24:18,310
Mogoče sem narobe.

408
00:24:18,310 --> 00:24:23,360
To bi bilo zanimivo, če želite, da bi večjo težo od posebnih filtrov

409
00:24:23,360 --> 00:24:27,000
tako da jih potisnite rezultate v zvezi s tem filtrom do vrha.

410
00:24:27,000 --> 00:24:31,920
Ampak mi lahko kdo pove, kaj je tako posebnega na tej levi strani?

411
00:24:31,920 --> 00:24:39,540
Kako ste se tradicionalno poiskati let na internetne storitve pred tem?

412
00:24:41,600 --> 00:24:44,650
>> Da. >> [Neslišno študentski odziv] >> Lahko rečem, da -

413
00:24:44,650 --> 00:24:47,530
[Študent] Vsak prevoznik. >> Ja. Vsaka letalska družba ima svojo spletno stran.

414
00:24:47,530 --> 00:24:50,110
Ta združuje stvari. In?

415
00:24:50,110 --> 00:24:52,190
[Študent] Veste kaj, ko odhajaš.

416
00:24:52,190 --> 00:24:54,460
Veste kaj, ko odhajaš,

417
00:24:54,460 --> 00:24:59,380
vendar so povezani s filtri posebej.

418
00:25:00,710 --> 00:25:03,540
Naj potegnite navzgor kajak.

419
00:25:11,490 --> 00:25:14,020
Bog, pop-ups. Bad uporabniško izkušnjo.

420
00:25:14,020 --> 00:25:17,230
Kaj se zgodi, ko sem premakniti drsnik?

421
00:25:17,230 --> 00:25:21,010
[Študentskih] Samodejne posodobitve. >> [Ong] Samodejne posodobitve.

422
00:25:21,010 --> 00:25:23,440
To je nekaj, kar je zelo pomembno.

423
00:25:23,440 --> 00:25:25,380
Pred tem, ko boste želeli pogledati let,

424
00:25:25,380 --> 00:25:28,410
si moral dati v svoj vstopni lokaciji, tvoj izhod lokacijo, pritisnite Search,

425
00:25:28,410 --> 00:25:31,190
da bi proces, ki ter pokažite svoje rezultate.

426
00:25:31,190 --> 00:25:34,120
Če boste želeli spremeniti poizvedbo, bi morali pritisniti nazaj dvakrat

427
00:25:34,120 --> 00:25:39,770
vstop v novo poizvedbo iz nič, in potem to storiti znova in znova.

428
00:25:39,770 --> 00:25:43,910
Za lepo stvar o nečem, kot je to, ki jih uporablja zelo nerazumljiv] [stvar v sredini.

429
00:25:43,910 --> 00:25:46,230
Vsakič, ko kaj takega, da ustreli off zahtevo

430
00:25:46,230 --> 00:25:48,420
in vrne vam vse rezultate takoj.

431
00:25:48,420 --> 00:25:51,680
Ta vrsta takojšnjo povratno informacijo, da je nekaj, kar je KAJAK divje priljubljena

432
00:25:51,680 --> 00:25:55,910
zato, ker je enostavno za mene, da samo spremenite svojo poizvedbo

433
00:25:55,910 --> 00:25:58,890
in ugotoviti, stvari, ki so po določenem obsegu

434
00:25:58,890 --> 00:26:01,950
ne da bi morali iti naprej in nazaj, naprej in nazaj, naprej in nazaj.

435
00:26:01,950 --> 00:26:05,200
To so torej vse mogoče stvari, ki jih želite razmišljati o tem, ko ste oblikovanju vaše spletne strani.

436
00:26:05,200 --> 00:26:08,930
Kako lahko naredim, da je zelo učinkovito pri moji uporabniki, da gredo skozi, kar oni delajo na

437
00:26:08,930 --> 00:26:13,010
in da se k njihovi končni cilj, kakor hitro je to mogoče?

438
00:26:13,010 --> 00:26:16,430
[Malan] In s točko Jožefovi prej pa ni nujno, da uporabniki vedo, kaj hočejo,

439
00:26:16,430 --> 00:26:18,640
ki temelji na tisto, kar vi zdaj vem HTML

440
00:26:18,640 --> 00:26:22,780
in imate polja, radio gumbi, meniji, izberite vnosna polja in podobno,

441
00:26:22,780 --> 00:26:26,140
kako bi se izvajala pojem nabiranje začetni čas za polet?

442
00:26:26,140 --> 00:26:30,030
>> Katera od teh različnih mehanizmov vmesnika bi uporabili?

443
00:26:30,030 --> 00:26:34,100
Če ste samo vem, znesek HTML, ki je bil prej naučil

444
00:26:34,100 --> 00:26:39,070
in veš, vložki so izbirni gumbi, potrditvena polja, padec odpisi in vnosno polje,

445
00:26:39,070 --> 00:26:43,320
kakšna bi bila vaša naravna izbira je za obiranje bivanja?

446
00:26:43,320 --> 00:26:48,670
[Študent] vnosa. >> Vnosa. Ali morda celo s spustnim z vsemi datumi, kajne?

447
00:26:48,670 --> 00:26:53,170
Torej, z bolj zapletenimi mehanizmi uporabniškega vmesnika, kot je to na levi strani, ki jih lahko izvajajo,

448
00:26:53,170 --> 00:26:55,500
lahko bi bil ta proces bolj intuitivno z drsnikom

449
00:26:55,500 --> 00:27:01,020
ker čas je neprekinjeno, in ljudje ponavadi ne pomislim, da glede na diskretnih kose.

450
00:27:01,020 --> 00:27:04,950
V redu. Zadnja stvar.

451
00:27:04,950 --> 00:27:07,370
Deset uporabnosti hevristika.

452
00:27:07,370 --> 00:27:10,820
Vse tisto, kar smo govorili verjetno spadajo v eno od teh kategorij.

453
00:27:10,820 --> 00:27:14,420
Če greste na ta link, ki bodo objavljeni na spletu, spletne strani

454
00:27:14,420 --> 00:27:18,900
boste dejansko sposoben, kot ste design vaše spletne strani, da te hevristiko v mislih

455
00:27:18,900 --> 00:27:21,330
in ta pravila palca.

456
00:27:21,330 --> 00:27:26,610
Za svoje projekte, kaj jaz predlagam vam, da oblikujete svoje app bolje

457
00:27:26,610 --> 00:27:28,850
je storiti papirja prototipov prvi.

458
00:27:28,850 --> 00:27:32,150
Ko razmišljate o svoji vlogi, zelo hitro skico, kaj želite, da izgleda kot

459
00:27:32,150 --> 00:27:36,230
in poskrbite, vsa polja so razporejeni na način, ki je zelo intuitiven za uporabo uporabniku

460
00:27:36,230 --> 00:27:39,820
in celo pokažem papir prototipov s prijatelji in začeti fokusnih skupin.

461
00:27:39,820 --> 00:27:44,230
Samo dobil 2 ali 3 ljudi skupaj in jih prosili, naj preprosto dotaknete teh papirnih prototipov,

462
00:27:44,230 --> 00:27:47,650
in jim pokazati nove zaslone, da vidim, če jih dejansko razume, kaj se dogaja.

463
00:27:47,650 --> 00:27:50,680
>> Kaj želite storiti, je, da se jim nalogo, motivirati to nalogo

464
00:27:50,680 --> 00:27:53,270
in daj jim app in jim dovoliti, da ga uporabljajo.

465
00:27:53,270 --> 00:27:56,530
Ne dajejo navodil, ki presegajo.

466
00:27:56,530 --> 00:28:00,920
Hočeš, da dejansko pustili, da interakcijo z aplikacijo na način, ki omogoča prikaz

467
00:28:00,920 --> 00:28:03,870
kako bi jih lahko uporabljajo tudi, če ste bili ne stoji zraven njih.

468
00:28:03,870 --> 00:28:05,250
In to je zelo pomembno.

469
00:28:05,250 --> 00:28:08,780
To vam bo dala veliko spoznanj, da so ljudje dobili okrog določene stvari

470
00:28:08,780 --> 00:28:10,560
na način, ki jim nisem nameravajo?

471
00:28:10,560 --> 00:28:14,680
Ali so z uporabo posebnih mehanizmov uporabniškega vmesnika na zaslonu

472
00:28:14,680 --> 00:28:17,490
na način, ki je nekako Hacky?

473
00:28:17,490 --> 00:28:22,020
Nisem hotel, za njih, da to storite na ta način.

474
00:28:22,020 --> 00:28:23,940
In ko ste končali s tem, kaj želiš, da naredim?

475
00:28:23,940 --> 00:28:26,010
Vaš design kamenje, kajne?

476
00:28:26,010 --> 00:28:29,600
Kaj želite storiti, je, da želijo razvijati in naredite ta postopek znova.

477
00:28:29,600 --> 00:28:32,110
Torej, da pokažejo, da prijatelji, ko ste ga razvili, je test,

478
00:28:32,110 --> 00:28:36,630
razvijanje, testiranje, razvoj, testiranje, ponovitev, naprej in naprej in naprej.

479
00:28:36,630 --> 00:28:39,720
Dizajn je zelo iterativen proces v tem smislu.

480
00:28:39,720 --> 00:28:43,280
Vi dejansko morali zgraditi nekaj, nato pa spoznali stvari o njem

481
00:28:43,280 --> 00:28:46,520
da ni vedel, pred in iti nazaj in izboljšanje od tega.

482
00:28:46,520 --> 00:28:50,890
Zdaj pa, tako kot pri razvojnem delu, to je tisto, Tommy se dogaja, da vam pokažem po premoru

483
00:28:50,890 --> 00:28:53,220
in kako bi morali biti sposobni izvesti nekaj podobnega Samodokončaj

484
00:28:53,220 --> 00:28:56,610
na način, ki je dokaj preprost.

485
00:28:57,440 --> 00:28:59,550
[Malan] Kot določa Tommy tu gor, potem pa vprašanje.

486
00:28:59,550 --> 00:29:03,780
Veliko izmed prvih spletnih strani - in ko je Jožef rekel 1990 slog spletno stran,

487
00:29:03,780 --> 00:29:07,640
je bila izvedbe, kjer, če si hotel, da izberete začetni čas in končni čas,

488
00:29:07,640 --> 00:29:10,380
odkrito rečeno, nazaj v dan, in še na nekaterih spletnih straneh danes

489
00:29:10,380 --> 00:29:13,220
Tako vam je to izberete eno uro pred spustnem

490
00:29:13,220 --> 00:29:15,910
izberete minut od spustnem mogoče izbrati AM, PM,

491
00:29:15,910 --> 00:29:17,440
in potem narediš, da se 3-krat več.

492
00:29:17,440 --> 00:29:19,920
In tako s 6 klike in morda nekaj pomikati navzgor

493
00:29:19,920 --> 00:29:24,000
uporabniško dejansko lahko zagotovi neko datum in / ali časovni razpon v tem smislu.

494
00:29:24,000 --> 00:29:27,920
>> Torej, zagotovo ni optimalna, pa vendar tako daleč smo videli nobenih izrazne sposobnosti

495
00:29:27,920 --> 00:29:30,330
v katerem koli jeziku, smo si ogledali nekaj narediti bolj seksi

496
00:29:30,330 --> 00:29:32,620
kot je ta drsnik na čas začetka in konca časa.

497
00:29:32,620 --> 00:29:36,290
Ampak, če mislite, da nazaj v tednu 0, ko smo se pogovarjali o Scratch,

498
00:29:36,290 --> 00:29:39,080
Tudi tam ni bilo pripomočki, ki so pravkar naredil določene stvari.

499
00:29:39,080 --> 00:29:42,700
Si res samo osnove, kot so te zanke pogoji in podobno.

500
00:29:42,700 --> 00:29:46,910
Tako nekako samo razmišljanje zelo abstraktno zdaj, ne glede na podatke o HTML,

501
00:29:46,910 --> 00:29:51,260
Kaj se v resnici dogaja nekaj podobnega časa začetka in konca drsnik časa?

502
00:29:51,260 --> 00:29:54,960
Ko sem premakniti miško in kliknem na ta znak malo korenja na levi

503
00:29:54,960 --> 00:29:59,220
in začeti vleče, programsko, kaj je to želite biti sposoben izvajati

504
00:29:59,220 --> 00:30:01,000
da bi se to zgodilo?

505
00:30:01,000 --> 00:30:04,920
Katera vprašanja, kaj logični izrazi želiš, da bi lahko vprašam?

506
00:30:04,920 --> 00:30:06,930
Kaj se v resnici dogaja? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Študent] Kje je položaj kazalca? Dobro >>. Če je položaj kazalca?

508
00:30:10,080 --> 00:30:11,970
To je nekaj, kar smo potrebovali, da izrazijo nazaj Scratch,

509
00:30:11,970 --> 00:30:14,690
ali je bila na podlagi lokacije ali celo barvo ali podobnega.

510
00:30:14,690 --> 00:30:18,410
Morda se kdaj spomni, da na kratko v ponedeljek, je bilo vse to se imenuje dogodki

511
00:30:18,410 --> 00:30:22,370
v svetu na spletu, tako da je stvari, kot onclick in onkeypress

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

513
00:30:25,960 --> 00:30:29,130
Torej zavedati, da so tudi te stvari, ki smo jih bili pri tem samoumevno na spletu

514
00:30:29,130 --> 00:30:32,190
s strani kot so Facebook in Gmail, tudi če nimajo pojma

515
00:30:32,190 --> 00:30:34,890
kako bi lahko izvajala, ker ni nič všeč niti na predavanju

516
00:30:34,890 --> 00:30:38,570
ali Problem nastavite 7, zavedati, da s temi točno istem temeljih,

517
00:30:38,570 --> 00:30:41,090
s HTTP in parametrov in GET in POST,

518
00:30:41,090 --> 00:30:44,010
z osnovnimi HTML vložke, ki smo pogledal na doslej

519
00:30:44,010 --> 00:30:47,690
in v trenutku s programskimi mehanizmi, ki Tommy je nameraval uvesti

520
00:30:47,690 --> 00:30:51,300
lahko začnete, da izrazi sebe, tako kot si storil v tednu 0

521
00:30:51,300 --> 00:30:53,800
z zelo intuitivno povleci in spusti.

522
00:30:53,800 --> 00:30:58,950
>> Torej s tem je dejal, Tommy MacWilliam in nekaj novih kosov sestavljanke, za nas, za splet.

523
00:30:58,950 --> 00:31:03,450
V redu. Moje ime je Tommy in bom lahko govoril JavaScript.

524
00:31:03,450 --> 00:31:07,150
Samo disclaimer: jaz sem mnenja, da je JavaScript je najboljši programski jezik

525
00:31:07,150 --> 00:31:09,010
V celotnega sveta.

526
00:31:09,010 --> 00:31:11,940
Obstaja veliko ljudi, ki se ne strinjajo z mano, ampak to je neverjetno.

527
00:31:11,940 --> 00:31:16,330
Ko greš nazaj v C, če moraš napisati C za drugo vrsto ali nekaterih drugih jezikih,

528
00:31:16,330 --> 00:31:19,780
to je samo res frustrirajuće v vseh nizki ravni podrobnosti, ki ste jih dobili bogged noter

529
00:31:19,780 --> 00:31:23,050
Torej, če ste že kdaj občutek žalosti, kako nadležno je, da napišete C,

530
00:31:23,050 --> 00:31:25,130
pojdi nazaj, napisati nekaj, JavaScript. To je nirvana.

531
00:31:25,130 --> 00:31:27,980
Počutili se boste veliko bolje o vašem slab dan.

532
00:31:27,980 --> 00:31:31,900
Veliko čarobno JavaScript izhaja iz njene sposobnosti, da manipulira stvari

533
00:31:31,900 --> 00:31:33,730
ki so že na strani.

534
00:31:33,730 --> 00:31:38,520
Ko smo zapisali naše skripte PHP, so bili izvaja na strežniku,

535
00:31:38,520 --> 00:31:42,270
in navsezadnje, da PHP skripta verjetno oddajala nekaj HTML.

536
00:31:42,270 --> 00:31:45,860
Ta HTML je bilo poslano stranki, nato pa, da je bilo to.

537
00:31:45,860 --> 00:31:50,180
Če PHP želel dodati gumb na strani, na primer, ne morem storiti.

538
00:31:50,180 --> 00:31:54,350
Morala bi postala popolnoma novo datoteko HTML, in pošlje da v brskalniku.

539
00:31:54,350 --> 00:31:57,840
Z JavaScriptom vemo, da bomo lahko posodobite stvari, medtem ko oni so že na strani,

540
00:31:57,840 --> 00:32:00,840
in zaradi tega lahko nudimo veliko več takojšnjo povratno informacijo,

541
00:32:00,840 --> 00:32:06,150
ki bo resnično izboljšanje uporabniške izkušnje na naši spletni strani.

542
00:32:06,150 --> 00:32:09,330
Samo hitro Rekapitulacija selektorjev JavaScript.

543
00:32:09,330 --> 00:32:11,590
Vemo, da ko naložite stran HTML,

544
00:32:11,590 --> 00:32:13,890
da se dogaja, da je treba v DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM zapomni si le to veliko drevo, kjer so elementi povezani v tej veliki hierarhiji.

546
00:32:19,340 --> 00:32:21,810
Ko smo delali z bazami podatkov v pset 7,

547
00:32:21,810 --> 00:32:26,280
ena od prvih stvari, ki jih potreboval, da vem, kako to storiti je zbirko podatkov.

548
00:32:26,280 --> 00:32:29,060
Imamo to veliko uporabnikov mizo, včasih pa samo želim povedati,

549
00:32:29,060 --> 00:32:33,260
"Želim samo nekatere od teh uporabnikov, ki ustrezajo nekaj pogojev."

550
00:32:33,260 --> 00:32:36,020
Podobno je, ko imamo DOM moramo na nek način to iskanje.

551
00:32:36,020 --> 00:32:39,490
Potrebujemo nek način rekel, "Hočem vse gumbe, ki so videti takole

552
00:32:39,490 --> 00:32:41,860
"Ali vse slike na stran."

553
00:32:41,860 --> 00:32:44,330
In ti selektorji nam omogočajo, da to storim.

554
00:32:44,330 --> 00:32:45,690
Torej, samo hitro Rekapitulacija.

555
00:32:45,690 --> 00:32:50,770
Ta prva tu, to # predloži, kaj je, da gre za izbiro? Ali kdo spomnite?

556
00:32:50,770 --> 00:32:54,880
[Neslišno študentski odziv] >> Ja, točno.

557
00:32:54,880 --> 00:32:59,510
To se dogaja, da izberete element na strani, ki ima ID oddajte.

558
00:32:59,510 --> 00:33:03,470
In da hash tag pravi, da je selektor bo delo z ID.

559
00:33:03,470 --> 00:33:07,630
Kaj pa druga, ta sredina,. Kaj bo, da izberete?

560
00:33:11,360 --> 00:33:15,180
Ja. >> [Študent] Razred. >> Točno tako. To se zdaj dogaja, da izberete glede na razred.

561
00:33:15,180 --> 00:33:18,840
Razlika med ID in razred tu je običajno ID mora biti enoličen

562
00:33:18,840 --> 00:33:20,820
v prostor, kar iščete več.

563
00:33:20,820 --> 00:33:23,080
Torej, če ste iskali nad celotno spletno stran,

564
00:33:23,080 --> 00:33:27,740
res bi morali imeti 1 element s tem določene ID-ja, tako da v tem primeru predložiti.

565
00:33:27,740 --> 00:33:31,330
V razredih, na drugi strani pa imamo več kot 1 element na isti strani

566
00:33:31,330 --> 00:33:33,130
z istega razreda.

567
00:33:33,130 --> 00:33:36,580
To bi lahko bilo koristno, pravi hočem, da izberete vse, kar je osredotočen na strani

568
00:33:36,580 --> 00:33:38,450
namesto samo 1 stvar.

569
00:33:38,450 --> 00:33:40,310
>> In končno, ta zadnja tukaj je malo bolj zapletena,

570
00:33:40,310 --> 00:33:43,890
ampak kaj se bo to eno od DOM?

571
00:33:46,650 --> 00:33:48,810
[Neslišno študentski odziv] >> Kaj je to?

572
00:33:48,810 --> 00:33:53,250
[Študent] Vse to oznako. >> Imamo 2 delov tukaj.

573
00:33:53,250 --> 00:33:58,070
Drugi del je reči hočem, da izberete te oznake z oznako vnosa,

574
00:33:58,070 --> 00:34:00,730
tako da je vsak element, ki je input tag.

575
00:34:00,730 --> 00:34:03,080
Ampak jaz ne želim samo izbrati vse vložke

576
00:34:03,080 --> 00:34:05,170
ker bi nekaj podobnega na gumb submit biti vhod

577
00:34:05,170 --> 00:34:08,409
in bi lahko nekaj podobnega polje z besedilom je vhod.

578
00:34:08,409 --> 00:34:11,909
Torej s tem oklepaju Pravim le izbrati tiste elemente

579
00:34:11,909 --> 00:34:14,110
da so besedila tipa.

580
00:34:14,110 --> 00:34:17,400
Nekje v moji HTML oznake imam atribut z imenom vrste,

581
00:34:17,400 --> 00:34:19,750
in vrednost tega atributa mora biti besedilo.

582
00:34:19,750 --> 00:34:21,340
Torej, kako o tem prvem delu sem?

583
00:34:21,340 --> 00:34:25,489
Prva beseda, to je izbiro oblike potem imam presledek in nato še ta vložek dela.

584
00:34:25,489 --> 00:34:29,620
Kaj to storiti, s čimer je v obliki pred njim?

585
00:34:33,409 --> 00:34:35,860
To bo v bistvu omejuje našo poizvedbo.

586
00:34:35,860 --> 00:34:38,510
To bi se lahko zgodilo, da imamo nekaj vhodov na strani

587
00:34:38,510 --> 00:34:41,080
da niso potomci obliki.

588
00:34:41,080 --> 00:34:46,150
Kaj bo to storiti, je, da bo to povedati želim le vstopne oznake, ki imajo nekje nad njimi

589
00:34:46,150 --> 00:34:49,030
nekateri starši element obrazca.

590
00:34:49,030 --> 00:34:52,100
In tako se na ta način bomo lahko te bolj hierarhične poizvedbe

591
00:34:52,100 --> 00:34:55,000
da ne bomo samo še izbrati vse ustrezne določen selektor.

592
00:34:55,000 --> 00:35:00,760
Mi lahko nekako omejiti obseg te poizvedbe na nekaj drugega.

593
00:35:00,760 --> 00:35:04,000
Torej, zdaj, ko vemo, kako izbrati elementov na strani,

594
00:35:04,000 --> 00:35:06,780
kaj je govoril nekaj o AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX je še vedno zelo popularen kratica, ki stoji za asinhroni JavaScript in XML.

596
00:35:12,270 --> 00:35:15,640
Samo tako se zgodi, da XML je samo nek način predstaviti podatke.

597
00:35:15,640 --> 00:35:20,920
>> Takšen izgubil priljubljenost v zadnjem času, tako da je X v AJAX ne uporablja ves čas.

598
00:35:20,920 --> 00:35:26,220
V bistvu, kaj AJAX nam omogoča narediti je, da zahteve HTTP

599
00:35:26,220 --> 00:35:28,620
iz konteksta JavaScript.

600
00:35:28,620 --> 00:35:32,310
Ko smo v naši spletni brskalnik in smo krmarjenje po straneh in se s klikom na povezavo,

601
00:35:32,310 --> 00:35:37,790
kaj je naš brskalnik bo narediti je, da HTTP zahtevo glede povezave kliknemo.

602
00:35:37,790 --> 00:35:41,670
Ampak to ni vedno idealna, saj če je temu tako, potem je David rekel,

603
00:35:41,670 --> 00:35:45,220
smo vedno morali uporabniki klikniti gumb predloži ali s klikom na povezavo

604
00:35:45,220 --> 00:35:50,380
da bi se kaj zgodi, da se dogaja, da vključujejo zahtevo HTTP.

605
00:35:50,380 --> 00:35:54,160
Torej, z AJAX bomo lahko te zahteve v imenu JavaScript.

606
00:35:54,160 --> 00:35:57,020
To pomeni, da ko uporabnik komunicira s stranjo, ali kaj se zgodi,

607
00:35:57,020 --> 00:36:01,780
bomo lahko dejansko tudi programski zahtevo neke druge datoteke PHP na naši spletni strani

608
00:36:01,780 --> 00:36:06,280
ali karkoli drugega in pridobivanje podatkov, da ta spis izpljune.

609
00:36:06,280 --> 00:36:09,860
Oglejmo si na primer AJAX.

610
00:36:09,860 --> 00:36:16,140
To je naša CS50 Finance stran, s katero upam, da nekateri od nas že poznajo.

611
00:36:16,140 --> 00:36:21,790
Če pogledamo HTML tej strani vidimo tukaj, da sem dodal nekaj stvari,

612
00:36:21,790 --> 00:36:23,820
1, ki sem jih dal tej obliki ID-ja.

613
00:36:23,820 --> 00:36:26,480
Rekel sem id = "Obrazec-quote".

614
00:36:26,480 --> 00:36:31,910
Jaz sem to naredil samo zato, ker se dogaja, da bi to malo lažje, da izberete DOM

615
00:36:31,910 --> 00:36:35,090
saj sem ti zelo preprosto vprašanje.

616
00:36:35,090 --> 00:36:38,960
Kaj želim storiti, je tukaj želim popraviti nekatere težave z CS50 finance.

617
00:36:38,960 --> 00:36:41,550
Torej, če gremo na finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
vsakič, ko hočem, da bi dobili ponudbo, moram kliknite ta gumb Get citat,

619
00:36:45,700 --> 00:36:48,960
in da Get Quote potem me popelje v drugo celo stran.

620
00:36:48,960 --> 00:36:52,400
In če želim še eno ponudbo, moram zadeti gumb Nazaj, potem pa sem ga vnesite v,

621
00:36:52,400 --> 00:36:54,480
Sem dobil ponudbo, in sem udaril gumb Nazaj.

622
00:36:54,480 --> 00:36:56,840
To res ni najboljša uporabniška izkušnja.

623
00:36:56,840 --> 00:37:01,570
Kdo bi dejansko uporabljajo spletno stran, če je to tako počasi, da se cene delnic?

624
00:37:01,570 --> 00:37:05,630
Torej, kaj želimo storiti z AJAX je odstraniti ta korak, da bi šel na ločeno stran

625
00:37:05,630 --> 00:37:08,410
Za ogled rezultatov.

626
00:37:08,410 --> 00:37:11,240
>> Kaj smo res samo zahtevamo, je, da je res majhna cena,

627
00:37:11,240 --> 00:37:14,240
in da je samo zelo majhno količino podatkov.

628
00:37:14,240 --> 00:37:17,400
Torej ni potrebe za mene, da gredo še celo HTML strani,

629
00:37:17,400 --> 00:37:20,670
prenesete celotno novo serijo HTML, mogoče prenesti še nekaj slik,

630
00:37:20,670 --> 00:37:24,410
nekatere druge datoteke CSS samo za mene, da odgovor na to zelo preprosto vprašanje

631
00:37:24,410 --> 00:37:27,810
, koliko pa ta stalež stroškov.

632
00:37:27,810 --> 00:37:31,000
Z AJAX lahko naredimo to veliko lažje.

633
00:37:31,000 --> 00:37:36,400
Vidimo tukaj, da sem povezavo na datoteko, imenovano quote.js JavaScript.

634
00:37:36,400 --> 00:37:40,140
Naj se dejansko odpre to datoteko. Ne obstaja.

635
00:37:42,610 --> 00:37:45,860
Vse moje datoteke JavaScripta se bodo nahaja v HTML

636
00:37:45,860 --> 00:37:47,630
tako da lahko spletni brskalnik dostop.

637
00:37:47,630 --> 00:37:50,330
Potem imamo poseben imenik tukaj za JavaScript,

638
00:37:50,330 --> 00:37:54,340
in tukaj je zdaj quote.js.

639
00:37:54,340 --> 00:38:00,930
Na vrhu te datoteke je to tukaj piše, da želim čakati na celotno stran je naložen

640
00:38:00,930 --> 00:38:04,830
preden sem poskusil narediti ničesar. Zakaj je to potrebno?

641
00:38:04,830 --> 00:38:08,650
Izkazalo se je, da je naslednja stvar, bom tukaj storiti, je začetek išče elementa

642
00:38:08,650 --> 00:38:10,810
, ki se ujema nekaj selektor.

643
00:38:10,810 --> 00:38:15,600
Če je to Javascript vedno izvajajo, preden se ta element naložen na strani,

644
00:38:15,600 --> 00:38:17,820
potem pa vse, kar sem poskušal narediti je, da ne bo šlo

645
00:38:17,820 --> 00:38:20,580
ker bom poskusil, da izberete nekaj, kar je še tam.

646
00:38:20,580 --> 00:38:23,780
Torej, ta line up vrhu pravi, da želim si počakati, da se naloži vse

647
00:38:23,780 --> 00:38:28,030
zato smo zagotoviti, da so vsi elementi iščem so dejansko na strani.

648
00:38:29,730 --> 00:38:34,310
Ta znak za dolar tukaj pomeni, da sem uporabo knjižnice imenuje jQuery.

649
00:38:34,310 --> 00:38:38,570
Ta jQuery knjižnico nam omogoča, da uporabljajo te izbirnike, ki smo ga pravkar pogledal.

650
00:38:38,570 --> 00:38:44,010
Z besedami $, nato potujejo kot argument tega obrazca #-citat,

651
00:38:44,010 --> 00:38:47,910
Zdaj sem izbiro, da obrazec, ki smo ga pravkar si ogledal.

652
00:38:47,910 --> 00:38:52,290
Zdaj imam predstavitev te oblike v spomin nekako.

653
00:38:52,290 --> 00:38:56,760
>> Na tem objektu se zdaj ta predstavitev v obliki,

654
00:38:56,760 --> 00:38:58,890
Zdaj sem uporabo funkcije pozval.

655
00:38:58,890 --> 00:39:02,710
Kaj je ta funkcija pa je, da se bo priložiti za obravnavo dogodkov.

656
00:39:02,710 --> 00:39:06,310
V primeru, da bomo poslušal je dogodek, trdijo.

657
00:39:06,310 --> 00:39:08,890
Torej, ko uporabnik klikne gumb Pošlji, da ali pritisne Enter,

658
00:39:08,890 --> 00:39:11,730
Ta dogodek se bo na ogenj.

659
00:39:11,730 --> 00:39:16,390
Z spotikanje v to, lahko sedaj prepiše privzeto vedenje obrazca.

660
00:39:16,390 --> 00:39:19,770
Brez te JavaScript, bi obrazec predloži karkoli PHP datoteke

661
00:39:19,770 --> 00:39:22,110
smo v tem akcijskem atribut.

662
00:39:22,110 --> 00:39:25,440
Toda namesto, da sem zdaj rekel, čakaj, čakaj, čakaj, ne želim si, da bi dejansko storiti.

663
00:39:25,440 --> 00:39:31,140
Rada bi se to zgodilo, preden greš in poskusite, da predloži nekatere datoteke PHP.

664
00:39:31,140 --> 00:39:32,870
Zdaj, kaj hočem narediti?

665
00:39:32,870 --> 00:39:39,270
Na tem mestu želim uporabiti AJAX nekako naložiti v kakšni ceni staleža.

666
00:39:39,270 --> 00:39:44,170
Prva stvar, ki jo morate vedeti je, kaj parka uporabnik išče navzgor.

667
00:39:44,170 --> 00:39:46,760
Če želite to narediti, da bom uporabila drugo izbiro.

668
00:39:46,760 --> 00:39:49,020
To je tretji selektor smo si ogledali prej.

669
00:39:49,020 --> 00:39:54,460
Ta pravi, da želim, da začnete to obliko element z ID-jem obliko-ponudbo.

670
00:39:54,460 --> 00:39:58,440
Potem pa nekje v notranjosti tega obrazca mora obstajati vložek element

671
00:39:58,440 --> 00:40:01,270
, ki ima ime simbola.

672
00:40:01,270 --> 00:40:05,460
Če se ozremo na našo HTML, smo videli, da smo imeli prispevke [ime = symbol].

673
00:40:05,460 --> 00:40:12,380
To pomeni, da se to dogaja, da izberete besedilno polje, da uporabnik piše v.

674
00:40:12,380 --> 00:40:13,870
To je lepo. Imamo polje z besedilom.

675
00:40:13,870 --> 00:40:17,360
Zdaj smo samo vedeti, kaj je v njej.

676
00:40:17,360 --> 00:40:20,290
Za to lahko rečemo to metodo sem, to. Val,

677
00:40:20,290 --> 00:40:23,240
in ta pravi, da vem, kaj imate polje z besedilom.

678
00:40:23,240 --> 00:40:28,160
Hočem, da mi poveš, kaj je uporabnik vnesli v to polje z besedilom.

679
00:40:28,160 --> 00:40:34,440
Zdaj imamo niz, imenovano simbol, ki je enaka ne glede uporabnik vtipka

680
00:40:34,440 --> 00:40:39,820
To je lepo. Mi lahko uporabite, da se niz zdaj, da bi naše zahteve.

681
00:40:39,820 --> 00:40:42,450
To je nova funkcija, tukaj, ta $,

682
00:40:42,450 --> 00:40:44,900
razen bova več ne bo treba izbiro elementov,

683
00:40:44,900 --> 00:40:48,910
bomo lahko pokličete drugo funkcijo, ki je, ki nam jih jQuery.

684
00:40:48,910 --> 00:40:54,810
Ta funkcija je AJAX, kaj se dejansko dogaja, da te zahteve HTTP.

685
00:40:54,810 --> 00:40:57,000
Zato moramo to povedati nekaj stvari.

686
00:40:57,000 --> 00:41:01,410
Prva stvar, ki jo moram povedati to funkcijo je, če hočem, da zahteva, da gredo.

687
00:41:01,410 --> 00:41:08,910
Nekje v mojem projektu imam to sliko notranjosti HTML mapi quote.php.

688
00:41:08,910 --> 00:41:15,150
Ne morem dostopati do te datoteke, bomo videli, tako kot je to, če grem na localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Hočem JavaScript, da za to zahtevo strani.

690
00:41:20,450 --> 00:41:22,920
Kakšne vrste zahtevo zdaj?

691
00:41:22,920 --> 00:41:27,210
Videli smo, da je pred obliko, je ta način = "post" atributa,

692
00:41:27,210 --> 00:41:29,270
in to pomeni, da se dogaja, da bi zahteve POST,

693
00:41:29,270 --> 00:41:32,630
tako da ne bo dal nič v URL, namesto GET zahtevo,

694
00:41:32,630 --> 00:41:36,860
ki bi samo odpustil, če bi le pogledali stran s spletnim brskalnikom, na primer.

695
00:41:36,860 --> 00:41:41,260
Zdaj sva rekla, da želim, da bi zahtevek HTTP POST

696
00:41:41,260 --> 00:41:44,840
na stran, ki se nahaja na quote.php.

697
00:41:44,840 --> 00:41:51,490
Ko smo poslali obrazec, ne pozabite, da lahko dostopate do vhodnih elementov znotraj tega obrazca

698
00:41:51,490 --> 00:41:54,430
s tem $ _POST spremenljivko.

699
00:41:54,430 --> 00:41:58,710
Do sedaj je v zgodbi smo dejansko poslali skupaj z vsemi podatki, še ni.

700
00:41:58,710 --> 00:42:00,640
Pravkar smo rekli, da delaš zahtevek AJAX

701
00:42:00,640 --> 00:42:03,200
in tukaj je vrsta zahteve delamo.

702
00:42:03,200 --> 00:42:07,090
Zdaj moramo dejansko poslali nekaj podatkov na strani.

703
00:42:07,090 --> 00:42:10,930
Če želite to narediti, da lahko uporabite to lastnost, imenovano podatkov.

704
00:42:10,930 --> 00:42:14,950
Vrednost tega premoženja je dejansko asociativno polje.

705
00:42:14,950 --> 00:42:19,390
Razlog za to je, da nam pošljete več kot le 1 kos podatkov.

706
00:42:19,390 --> 00:42:24,750
Zato moramo te zavite oklepaje tukaj ugnezdeni znotraj teh drugih zavitih oklepajih.

707
00:42:24,750 --> 00:42:29,680
Tipke v teh asociativnih poljih se bo ista stvar

708
00:42:29,680 --> 00:42:32,630
kot so ime, atribute v naših obliki elementov.

709
00:42:32,630 --> 00:42:35,740
To pomeni, da če bom poslal po ključu simbolom,

710
00:42:35,740 --> 00:42:41,870
to pomeni, da se moje PHP stran lahko dostopajo do teh podatkov z $ _POST [Symbol]

711
00:42:41,870 --> 00:42:44,640
tako kot smo že naredili, ko smo se predloži obrazec.

712
00:42:44,640 --> 00:42:47,090
In zdaj so dejanski podatki, želimo poslati

713
00:42:47,090 --> 00:42:50,790
se bo vrednost znotraj tega asociativni array.

714
00:42:50,790 --> 00:42:54,070
>> Mi shrani to besedilo v spremenljivko, imenovano simbol,

715
00:42:54,070 --> 00:42:57,380
zato vam pošiljamo skupaj zdaj ključ za simbol

716
00:42:57,380 --> 00:43:01,380
in vrednost, kar si vtipka

717
00:43:01,380 --> 00:43:06,270
Zdaj smo naredili to zahtevo HTTP, naša PHP datoteko bil izveden,

718
00:43:06,270 --> 00:43:11,480
in to se dogaja, da pošljete nekaj podatkov nazaj, zdaj za stranko, ki pravkar ustvarili to zahtevo.

719
00:43:11,480 --> 00:43:15,220
Zdaj moramo odzvati na kateri koli strežnik je dejal, da nas.

720
00:43:15,220 --> 00:43:20,180
Za to imamo to zadnjo lastnost tukaj imenujejo uspeh.

721
00:43:20,180 --> 00:43:24,240
Vrednost tega uspeha ključu se dejansko dogaja, da je funkcija

722
00:43:24,240 --> 00:43:26,910
in to je eden od res kul stvari, ki jih lahko naredite z JavaScriptom.

723
00:43:26,910 --> 00:43:31,720
Ne samo, da lahko imate ints ali zaporedja kot vrednost notranji strani asociativni array,

724
00:43:31,720 --> 00:43:34,170
lahko imajo tudi funkcijo.

725
00:43:34,170 --> 00:43:36,380
Torej z besedami, uspeh, to je moj ključ.

726
00:43:36,380 --> 00:43:38,830
Dvopičje piše tukaj prihaja vrednosti,

727
00:43:38,830 --> 00:43:41,810
in zdaj je vrednost to je pravzaprav funkcija.

728
00:43:41,810 --> 00:43:44,460
Tako nam ni treba, da je ta funkcija ime po sebi.

729
00:43:44,460 --> 00:43:48,820
Lahko samo rečem to se dogaja, da se nekatere funkcije. To bo trajalo 1 argument.

730
00:43:48,820 --> 00:43:51,190
Argument za to funkcijo se bo

731
00:43:51,190 --> 00:43:54,460
ne glede na strežnik nam je poslal nazaj od zahteve.

732
00:43:54,460 --> 00:43:57,750
Tako kot takrat, ko smo brskalnik zaprosi, strežnik pošlje nekaj nazaj

733
00:43:57,750 --> 00:43:59,060
in brskalnik prikaže,

734
00:43:59,060 --> 00:44:03,030
v okviru AJAX smo le na zahtevo, je poslal nekaj nazaj,

735
00:44:03,030 --> 00:44:07,110
in zdaj smo, da je predstavljen kot niz.

736
00:44:07,110 --> 00:44:11,280
S tem nizu bi rad, da se prikaže, da so na strani.

737
00:44:11,280 --> 00:44:14,040
Če želite to narediti, da bom še eno zadnjo izbiro.

738
00:44:14,040 --> 00:44:17,570
Želim, da izberete element z ID ceno.

739
00:44:17,570 --> 00:44:20,710
To je samo prazen div, ki sem jih ustvaril na strani,

740
00:44:20,710 --> 00:44:26,640
in rad bi določila vsebino tega div, da se ne glede na strežnik nam je poslal nazaj.

741
00:44:26,640 --> 00:44:30,280
Sem dejansko spremenil quote.php malo.

742
00:44:30,280 --> 00:44:33,460
>> Namesto da bi omet in postanejo nekaj strani,

743
00:44:33,460 --> 00:44:38,100
quote.php zdaj preprosto bo izpisal vrednost zalog kot niz.

744
00:44:38,100 --> 00:44:41,880
Torej, če ste bili, da dejansko obiščete stran, boste videli, da je majhen niz

745
00:44:41,880 --> 00:44:45,030
ne glede na borzna cena je.

746
00:44:45,030 --> 00:44:50,170
Še zadnja stvar, ki jo morate storiti, je tu le poskrbite, da ta funkcija vrne false.

747
00:44:50,170 --> 00:44:53,560
Kaj to pove, da če sem v notranjosti za obravnavo dogodkov

748
00:44:53,560 --> 00:44:57,300
in da je dogodek trener vrne false namesto vračanja res,

749
00:44:57,300 --> 00:45:01,510
to pomeni, da ne želim prvotni dogodek na ogenj.

750
00:45:01,510 --> 00:45:05,270
V tem primeru, če ne bi imeli nobenega JavaScript in smo poslali obrazec,

751
00:45:05,270 --> 00:45:08,280
naš spletni brskalnik bo rekel: "Jaz bom poslal te podatke, skupaj"

752
00:45:08,280 --> 00:45:10,130
in da ti bomo poslali na drugo stran.

753
00:45:10,130 --> 00:45:14,360
Ker smo z uporabo AJAX zdaj, ni treba poslati uporabnika na drugo stran.

754
00:45:14,360 --> 00:45:17,920
Mi smo le, da bo prikaz rezultatov dinamično na isti strani.

755
00:45:17,920 --> 00:45:21,460
Mi res ne želite, da bi šel kamorkoli, in želim, da ostanete na isti strani.

756
00:45:21,460 --> 00:45:27,060
Torej, da ga vrne false, moramo zagotoviti, da se oblika ne naredi za nas.

757
00:45:27,060 --> 00:45:31,170
Oglejmo si, kaj to dejansko izgleda.

758
00:45:31,170 --> 00:45:34,180
Naše quote strani videti enako.

759
00:45:34,180 --> 00:45:37,240
Naj dvigni inšpektorja tukaj, da bomo lahko videli, kaj se dogaja.

760
00:45:37,240 --> 00:45:40,270
Naj bo malo manj velik.

761
00:45:40,270 --> 00:45:44,590
Ne pozabite, če bomo odprli zavihek Network, to je, če smo lahko videli vse zahteve HTTP

762
00:45:44,590 --> 00:45:47,570
, ki se dogajajo na strani.

763
00:45:47,570 --> 00:45:52,890
>> Za simbolom mi tip v AAPL in kliknite Pridobi ponudbo.

764
00:45:52,890 --> 00:45:56,720
Zdaj smo videli, da je delež Apple stane nekaj več dolarjev

765
00:45:56,720 --> 00:46:00,410
le pojavil na strani, vendar URL ni spremenilo.

766
00:46:00,410 --> 00:46:04,570
Dejstvo je, tukaj je HTTP zahtevo, da smo pravkar.

767
00:46:04,570 --> 00:46:09,980
Naredili smo POST zahtevek quote.php. To ima smisel.

768
00:46:09,980 --> 00:46:12,800
To je tisto, kar nas je strežnik poslal nazaj.

769
00:46:12,800 --> 00:46:16,320
To ni več to velikanski HTML dokument s sliko in stvari, kot je ta,

770
00:46:16,320 --> 00:46:20,920
to je samo vrstico besedila, nato pa sva se prikaže vrstico besedila.

771
00:46:20,920 --> 00:46:26,290
Če gremo nazaj na glavo in videti, kaj smo dejansko poslali znotraj tega HTTP zahtevo,

772
00:46:26,290 --> 00:46:33,950
lahko vidimo tukaj, da pošlje skupaj s ključem simbol in vrednost AAPL,

773
00:46:33,950 --> 00:46:36,430
, ki je tisto, kar uporabnik vtipka

774
00:46:36,430 --> 00:46:39,230
To je lepo, vendar je še vedno malo siten.

775
00:46:39,230 --> 00:46:42,490
Še vedno imam, da kliknete na ta gumb, da bi dobili osnovno ponudbo.

776
00:46:42,490 --> 00:46:45,880
Mi smo zaposleni ljudje in nimamo časa, da kliknete gumbe.

777
00:46:45,880 --> 00:46:49,910
Google spoznal, nekaj časa nazaj, ko so izvajale Google Dinamično.

778
00:46:49,910 --> 00:46:53,590
Kaj počne Google Instant je, kot ste vnesli to šele začne prikazovati rezultate za vas

779
00:46:53,590 --> 00:46:56,520
tako da vam ni treba skrbeti, tudi tako, da kliknete Išči.

780
00:46:56,520 --> 00:46:58,730
Pravzaprav zabavno zgodbo v zvezi s tem.

781
00:46:58,730 --> 00:47:01,100
Ko Google Instant prišel ven, ljudje so bili kot, "Vau, to je super neverjetno."

782
00:47:01,100 --> 00:47:02,540
"To je tako kul."

783
00:47:02,540 --> 00:47:05,950
In študent navzdol na Stanfordu, ki je bil 19 v času

784
00:47:05,950 --> 00:47:09,000
na to mesto imenovan YouTube trenutek.

785
00:47:09,000 --> 00:47:13,170
Vse Instant YouTube pa je učinkovito iskanje YouTube takoj.

786
00:47:13,170 --> 00:47:17,020
Torej, namesto da bi šel na YouTube.com in zadeti iskanja,

787
00:47:17,020 --> 00:47:21,650
Ko začnem tipkati v Instant nekaj YouTube kot CS50,

788
00:47:21,650 --> 00:47:25,320
smo lahko tukaj vidimo, da se poskuša s počasno internetno povezavo

789
00:47:25,320 --> 00:47:28,500
zapolnijo ti rezultati v živo.

790
00:47:28,500 --> 00:47:35,590
Da bi to lahko dejansko narediti zelo preprosto spremembo na našo datoteko quote.js.

791
00:47:35,590 --> 00:47:40,900
Zdaj smo pritrditev na ta dogodek, ko se predloži obrazec.

792
00:47:40,900 --> 00:47:43,760
Mi v resnici ne želijo, da bi uporabnik predloži obrazec, da več,

793
00:47:43,760 --> 00:47:48,570
tako da je namesto ogenj ta dogodek vsakič, ko uporabnik pritisne tipko.

794
00:47:48,570 --> 00:47:53,200
Za to lets 'najprej spremeniti dogodek iz predloži keyup.

795
00:47:53,200 --> 00:47:55,740
To pomeni, da namesto čakanja, da predloži obrazec,

796
00:47:55,740 --> 00:47:58,490
vsakič, ko pritisnete tipko, kaj se bo zgodilo.

797
00:47:58,490 --> 00:48:02,030
To ni več smiselno, da priložite ta keyup dogodek za celotno obliko.

798
00:48:02,030 --> 00:48:05,080
Smo res samo skrbi to polje za iskanje.

799
00:48:05,080 --> 00:48:09,320
>> Če želite izbrati, da zdaj, bomo lahko spremenili, da je to, ne pa obliko-kotacija,

800
00:48:09,320 --> 00:48:14,220
Obrazec-quote in bomo imeli moč (tip = besedilo) ali pa lahko rečemo (ime = simbol) -

801
00:48:14,220 --> 00:48:16,420
kar hočemo.

802
00:48:16,420 --> 00:48:18,650
Zdaj je zadnja stvar, kar moramo storiti.

803
00:48:18,650 --> 00:48:21,190
Se spomniš, ko smo tukaj dejal, vrne false

804
00:48:21,190 --> 00:48:24,370
smo rekli, da ne želimo, da neplačila na ogenj.

805
00:48:24,370 --> 00:48:26,390
Vendar je prav tako se zgodi, da če bomo onemogočili, da je zdaj,

806
00:48:26,390 --> 00:48:29,660
kar vpišemo v ne bo prikazal v brskalniku več

807
00:48:29,660 --> 00:48:33,000
ker bi bilo to privzeto vedenje vnesete v polje z besedilom.

808
00:48:33,000 --> 00:48:38,660
Mi ne želimo, da preglasijo, tako da je uničiti to vračanje napačen.

809
00:48:38,660 --> 00:48:44,800
Če želimo rešiti da in osvežite stran, zdaj, ko sem se začel tipkati AAPL

810
00:48:44,800 --> 00:48:50,160
boste videli, da cena delnice na dnu je samodejno dokončanje.

811
00:48:50,160 --> 00:48:53,150
Torej, tukaj je CS50 Finance Instant.

812
00:48:53,150 --> 00:48:55,860
Pravzaprav zabavno zgodbo o YouTube Instant

813
00:48:55,860 --> 00:48:59,420
je, da študent le nekako ga je napisal kot 1-nočno projekta,

814
00:48:59,420 --> 00:49:03,800
in naslednji dan so mu ponudili delo z YouTube direktorja.

815
00:49:03,800 --> 00:49:10,610
Tako preprosto je to, da CS50 študenti lahko vaš končni projekti dobili delo na YouTube.

816
00:49:10,610 --> 00:49:14,720
Nekaj ​​takega je res super ideja za končni projekt, kajne?

817
00:49:14,720 --> 00:49:18,170
Imeli smo nekaj obstoječih funkcionalnosti, ki smo želeli povezati z.

818
00:49:18,170 --> 00:49:20,330
Mi izboljšati uporabniško izkušnjo malo,

819
00:49:20,330 --> 00:49:24,340
in nenadoma bi iskali nekaj na YouTube Instant bilo veliko lažje

820
00:49:24,340 --> 00:49:27,290
kot iskanje za to na redni YouTube.

821
00:49:27,290 --> 00:49:30,790
Torej, to je AJAX na kratko.

822
00:49:30,790 --> 00:49:34,860
>> V primerih, da je Joseph kažejo, smo videli veliko autocompletes,

823
00:49:34,860 --> 00:49:39,250
in ti autocompletes so zelo, zelo priročen, saj nam ni treba zapomniti -

824
00:49:39,250 --> 00:49:41,770
Na primer, če se ne spomnite na ceno delnic za Apple

825
00:49:41,770 --> 00:49:45,110
in smo samo vedeti, da je aa nekaj, namesto da bi samo rekel, da mi,

826
00:49:45,110 --> 00:49:48,740
"Delež to stvar stane toliko denarja,"

827
00:49:48,740 --> 00:49:52,540
Jaz bi nekako rad vedel, kaj zaloge začeli z AA.

828
00:49:52,540 --> 00:49:58,340
To lahko storimo, da res lepo s Bootstrap knjižnico, ki je že vključen

829
00:49:58,340 --> 00:50:01,380
Notranjost CS50 finance.

830
00:50:01,380 --> 00:50:09,390
Če ste prišli sem, da bi oznake JavaScript in navzdol za Typeahead,

831
00:50:09,390 --> 00:50:13,730
to je samo lep plugin, da je nekdo že napisal za nas,

832
00:50:13,730 --> 00:50:16,980
in bomo lahko z lahkoto uporabi svojo funkcijo, kot je ta.

833
00:50:16,980 --> 00:50:21,410
Jaz ga vnesli v in tukaj je seznam nekaterih držav, ki se začnejo z A

834
00:50:21,410 --> 00:50:25,360
Recimo, da mislim, da je to res kul in da je čas, da tudi ta na moji strani.

835
00:50:25,360 --> 00:50:28,300
Izkazalo se je, da je to zelo, zelo preprost.

836
00:50:28,300 --> 00:50:32,810
Naj skok čez tukaj za quote3.js.

837
00:50:34,890 --> 00:50:37,380
Moja slika izgleda malo drugače.

838
00:50:37,380 --> 00:50:39,700
Tu spodaj vse moje stvari AJAX je isto.

839
00:50:39,700 --> 00:50:43,170
Želim, da naložite zaloge podatke, ne da bi morali iti na drugo stran.

840
00:50:43,170 --> 00:50:46,220
Ampak zdaj želim uporabljati ta vtičnik.

841
00:50:46,220 --> 00:50:51,020
The Bootstrap dokumentacija ima odlične primere, kako točno lahko to storim.

842
00:50:51,020 --> 00:50:54,350
Hočem reči, "Tukaj je vhod, ki ga želim Samodokončaj«

843
00:50:54,350 --> 00:50:56,640
in jaz bom poklical to funkcijo imenovan typeahead,

844
00:50:56,640 --> 00:50:59,730
in da se bo ravnanje z vso Typeahead stvari za nas.

845
00:50:59,730 --> 00:51:02,090
To bo inicializacijo seznam, bo to vse naše filtriranje.

846
00:51:02,090 --> 00:51:06,680
Edino, kar mora vedeti, je, katere podatke bomo autocompleting naprej.

847
00:51:06,680 --> 00:51:10,480
Tako sem ugotovil to tipko samo z branjem dokumentacije in si ogleduje primerov.

848
00:51:10,480 --> 00:51:14,150
Če sem dal to tipko vira, vrednost tega ključa

849
00:51:14,150 --> 00:51:17,770
je le nekaj množica stvari želim Samodokončaj.

850
00:51:17,770 --> 00:51:20,180
Ta spremenljivka je iz te druge datoteke.

851
00:51:20,180 --> 00:51:23,400
Sem odprla symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> To symbols.js je le to res, res velik niz, ki vsebuje nize

853
00:51:27,980 --> 00:51:32,080
vseh teh zalog simbolov iz NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Če želim, da vrnitev na HTML, tako jharvard, vhosts, globalhost, HTML, predloge,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Ker pa to zdaj imenuje quote3.js, naj spremeni datoteko JavaScript sem tukaj, vključno.

857
00:51:50,910 --> 00:51:55,110
Zdaj imam quote3.js, tako da bom mogoče naložiti v tej posebni datoteki JavaScript,

858
00:51:55,110 --> 00:51:57,910
tisti, ki ima to Samopodizanje Samodokončaj.

859
00:51:57,910 --> 00:52:04,430
Zdaj, ko sem skočil nazaj v brskalniku, osvežite stran, in sem začel tipkati AA,

860
00:52:04,430 --> 00:52:06,880
tukaj je moj samodokončanje. In res je bilo tako enostavno, kot to.

861
00:52:06,880 --> 00:52:11,400
Imel sem 1 vrstico kode, ki so pravkar rekel: »Tukaj so stvari, ki jih želim Samodokončaj«

862
00:52:11,400 --> 00:52:16,590
in nenadoma sem to res, res lepo funkcionalnost ne celo veliko truda sploh.

863
00:52:16,590 --> 00:52:19,810
Ker ste v razvoju spletnih strani in predvsem sprednji konec strani stvari,

864
00:52:19,810 --> 00:52:21,840
boste našli to je tako veliko.

865
00:52:21,840 --> 00:52:25,700
Obstaja veliko, veliko, veliko res kul proste knjižnice tam

866
00:52:25,700 --> 00:52:30,190
da bi bilo super enostavno narediti stvari, kot je ta.

867
00:52:30,190 --> 00:52:37,230
Ali lahko kdo misli o vseh slabih preprosto autocompleting na tem velikem seznamu simbolov?

868
00:52:37,230 --> 00:52:41,580
Kaj bi lahko bilo nekaj, kar ni najboljši pri tem pristopu?

869
00:52:42,790 --> 00:52:45,960
Ja. >> [Študent] Čas, če imate veliko [neslišno]

870
00:52:45,960 --> 00:52:50,420
Ja. Zdaj smo prenos te ogromne JavaScript datoteko in tam je veliko simbolov.

871
00:52:50,420 --> 00:52:54,360
In tako, če imamo tone stvari, to lahko nekako poveča latence ne samo iskanje

872
00:52:54,360 --> 00:52:56,600
ampak tudi prenos dejansko datoteko.

873
00:52:56,600 --> 00:52:58,670
Čudovito. Še kaj?

874
00:53:01,950 --> 00:53:05,280
Zdaj ni pravi občutek pomembnosti.

875
00:53:05,280 --> 00:53:08,190
Če vpišem v A, družbe, ki kažejo gor

876
00:53:08,190 --> 00:53:11,220
morda ni najbolj priljubljeni podjetij, ki se začnejo z A

877
00:53:11,220 --> 00:53:17,130
>> Preden sem dobil za Apple pa bo trajalo še nekaj znakov, da bi našli tisto, kar sem iskal.

878
00:53:17,130 --> 00:53:20,420
Ta autocomplete nima tega občutka pomembnosti.

879
00:53:20,420 --> 00:53:24,400
To je samo hotel reči: »Vse, kar se ujema bom prikazati."

880
00:53:24,400 --> 00:53:30,510
Namesto, da bi rad nekako vključiti nekatere pomembne v svojih iskanjih.

881
00:53:30,510 --> 00:53:36,440
Če grem tja Finance Yahoo!, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Če poskušam vnesti simbol na strani Yahoo! Finance je

883
00:53:42,100 --> 00:53:52,310
in začnem tipkati GOOG, imam lepo seznam stvari.

884
00:53:52,310 --> 00:53:57,100
Jasno je, da izgleda, Yahoo! Finance počne kaj bolj pameten tukaj.

885
00:53:57,100 --> 00:53:59,790
Imajo sicer pomembne, imajo pa tudi dodatne informacije

886
00:53:59,790 --> 00:54:01,430
kot je ime parka.

887
00:54:01,430 --> 00:54:05,850
To je nekaj, kar ne morem priti le z mojega seznama zalogi simbolov.

888
00:54:05,850 --> 00:54:09,520
Hočem, zato bom vzel.

889
00:54:09,520 --> 00:54:11,790
Za to Naredimo nekaj stvari.

890
00:54:11,790 --> 00:54:15,580
Naj najprej odpreti do inšpektorja na tej strani

891
00:54:15,580 --> 00:54:18,100
zato, ker smo videli, da ta stran ni natovarjanje na vse,

892
00:54:18,100 --> 00:54:21,960
tako da je verjetno z uporabo AJAX nekako se nakladanje svoje podatke.

893
00:54:21,960 --> 00:54:23,920
Mi lahko ugotovite, kateri podatki se je nakladanje.

894
00:54:23,920 --> 00:54:28,390
Če kliknem na ta omrežja kartici, se ti bo vse zahteve, ki se začnejo za kurjenje.

895
00:54:28,390 --> 00:54:34,020
Zdaj, če sem tip v goo, lahko vidimo, da sem dobil novo zahtevo HTTP.

896
00:54:34,020 --> 00:54:37,490
To je verjetno, da so podatki, kjer prihaja.

897
00:54:37,490 --> 00:54:41,990
Seveda dovolj, če gledam na tem URL-ju, ki je malce nenavadno ime,

898
00:54:41,990 --> 00:54:46,930
lahko vidimo, da je to točno tam, kjer Yahoo pošilja izven svoje podatke.

899
00:54:46,930 --> 00:54:53,400
>> Sem ustvaril ločeno datoteko z imenom suggest.php, ki je zelo podobna v duhu na iskanje funkcijo.

900
00:54:53,400 --> 00:54:57,730
To je v bistvu dogaja, da poizvedbo URL Yahoo, nazaj nekaj podatkov,

901
00:54:57,730 --> 00:54:59,750
in ga pošlje nazaj k meni.

902
00:54:59,750 --> 00:55:02,570
Zdaj, namesto da bi z uporabo tega velik, ogromen seznam simbolov,

903
00:55:02,570 --> 00:55:05,280
Lahko uporabite lepe relevantne Yahoo stvari,

904
00:55:05,280 --> 00:55:08,150
in mi ni treba prenesti, da veliko datoteko JavaScript.

905
00:55:08,150 --> 00:55:12,040
Jaz sem le, da bo podirajo se dejansko ustrezne simbole parka.

906
00:55:12,040 --> 00:55:13,960
Naj skok v to.

907
00:55:13,960 --> 00:55:17,360
Torej, html, js. Mi smo zdaj v quote4.

908
00:55:17,360 --> 00:55:22,120
Zdaj smo ne uporabljate več, da je velik seznam datotek, JavaScript.

909
00:55:22,120 --> 00:55:24,430
Ampak tam je majhen težavi projektiranja tukaj.

910
00:55:24,430 --> 00:55:28,200
Mi smo rekli, da je v AJAX asinhrono.

911
00:55:28,200 --> 00:55:31,000
Kaj to pomeni, da ko naredim zahtevo AJAX,

912
00:55:31,000 --> 00:55:36,490
tako da tukaj na liniji 8, to je, če je moja AJAX zahteva dejansko odpustili.

913
00:55:36,490 --> 00:55:40,370
Recimo, da zdaj imam kodo tukaj, da bo naredil nekaj stvari

914
00:55:40,370 --> 00:55:43,930
rad opozori uporabnika ali nekaj spremeniti na strani.

915
00:55:43,930 --> 00:55:49,830
Kaj se ne bo zgodilo, je brskalnik ne bo treba čakati na to zahtevo še naprej

916
00:55:49,830 --> 00:55:53,480
Pred spušča in hitting to vrstico.

917
00:55:53,480 --> 00:55:55,900
To je asinhrona del.

918
00:55:55,900 --> 00:55:58,400
To se dogaja, da bi to zahtevo in rekel: "Ko končate,

919
00:55:58,400 --> 00:56:03,080
"Vrnil in poklical te funkcije, ki sem ti rekel, da pokličete znotraj uspeh."

920
00:56:03,080 --> 00:56:07,300
To pomeni, da ne moremo preprosto prenesti vse zaloge vnaprej.

921
00:56:07,300 --> 00:56:10,300
Moramo, da bo zahtevo in počakajte nekaj, da se vrne.

922
00:56:10,300 --> 00:56:13,330
To pomeni, da prej, bi lahko preprosto povedati Bootstrapa,

923
00:56:13,330 --> 00:56:15,580
"Tukaj je seznam stvari, hočem, da Samodokončaj«.

924
00:56:15,580 --> 00:56:18,950
Ne moremo več narediti več, ker ne vemo,

925
00:56:18,950 --> 00:56:21,780
kaj želimo dejansko Samodokončaj.

926
00:56:21,780 --> 00:56:25,190
Na srečo, Bootstrap pomislil na to, ker ti so pametni fantje tam,

927
00:56:25,190 --> 00:56:30,160
in dejansko nam je dal še en način, da se bremena te Typeahead vtičnik.

928
00:56:30,160 --> 00:56:35,630
Preden se je vrednost tega vira premoženja je le ta velika množica stvari Samodokončaj.

929
00:56:35,630 --> 00:56:39,580
>> Sedaj vir lastnina je pravzaprav funkcija,

930
00:56:39,580 --> 00:56:44,580
in namen te naloge je, da ugotovimo, kaj so stvari za Samodokončaj so.

931
00:56:44,580 --> 00:56:48,730
Tako da se bo to ugotovil, je da se bo vprašati Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
kaj so najboljše stvari v funkciji za samodokončanje so.

933
00:56:51,750 --> 00:56:54,500
Če želite to narediti, da bom lahko zelo podobno zahtevo AJAX.

934
00:56:54,500 --> 00:56:59,010
Grem zahteva ta stran na suggest.php.

935
00:56:59,010 --> 00:57:01,360
Želim poslati skupaj s simboli miru.

936
00:57:01,360 --> 00:57:05,570
In zdaj moj uspeh, Bootstrap dokumentacija mi je povedal,

937
00:57:05,570 --> 00:57:09,130
da je za zapolnijo ta seznam stvari,

938
00:57:09,130 --> 00:57:14,370
vse, kar morate storiti, je minil v tem polju zdaj na povratni klic funkcije.

939
00:57:14,370 --> 00:57:15,660
Toda počakaj malo.

940
00:57:15,660 --> 00:57:20,240
Če naj bi to polje in AJAX me pošilja nazaj besedilo,

941
00:57:20,240 --> 00:57:22,720
Kako je to mogoče?

942
00:57:22,720 --> 00:57:27,910
Ta uvaja nov način izmenjave podatkov, imenovane JSON.

943
00:57:27,910 --> 00:57:33,000
V tem primeru ne bomo samo poslati nazaj preprosto niz besedila.

944
00:57:33,000 --> 00:57:37,670
Zdaj imamo opravka s tem bolj zapleten seznam kratic delnic.

945
00:57:37,670 --> 00:57:41,730
Te zaloge simboli lahko vključuje tudi stvari, kot so imena podjetja ali trenutnih cenah.

946
00:57:41,730 --> 00:57:47,550
Samo z veliko dolg niz, ki je ni oblikovano v nobenem predvidljiv način

947
00:57:47,550 --> 00:57:51,970
ne bo najboljši način, da bi dobili te podatke od strežnika Yahoo me

948
00:57:51,970 --> 00:57:54,540
na način, da sem lahko z lahkoto.

949
00:57:54,540 --> 00:58:01,280
JSON je tehnologija, ki izkorišča to, kako bomo ustvarili asociativne nize v JavaScript.

950
00:58:01,280 --> 00:58:04,510
To izgleda veliko kot na asociativno paleto JavaScript,

951
00:58:04,510 --> 00:58:06,600
in v resnici, je to zato, ker je.

952
00:58:06,600 --> 00:58:09,710
JSON je kratica za Object Notation JavaScript.

953
00:58:09,710 --> 00:58:15,020
To je v bistvu dogovorjeni obliki za prenos podatkov naprej in nazaj.

954
00:58:15,020 --> 00:58:18,280
Tukaj je ta predmet JSON ali to JSON asociativno polje

955
00:58:18,280 --> 00:58:21,010
se mi pošljete nekaj podatkov o tečaju.

956
00:58:21,010 --> 00:58:25,110
>> Tipke tem polju so stvari, kot pot, ki ima vrednost cs50,

957
00:58:25,110 --> 00:58:29,140
in tukaj lahko vidimo, da lahko dobim vrednost, ki je matrika.

958
00:58:29,140 --> 00:58:32,730
Nimam narediti stvari, kot izloči nizov in si za vejicami

959
00:58:32,730 --> 00:58:35,330
in naredil nore stvari, kot je ta.

960
00:58:35,330 --> 00:58:38,820
Ker je to vpisano v tej obliki JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript in jQuery že funkcije za pretvorbo niza

962
00:58:43,510 --> 00:58:48,140
Izgleda, da je to JSON v dejanski asociativnega niza JavaScript

963
00:58:48,140 --> 00:58:50,440
da lahko sodelujemo.

964
00:58:50,440 --> 00:58:56,660
S tem, da je tako enostavno, kot pravim, da ni več, je ta datoteka, suggest.php,

965
00:58:56,660 --> 00:58:59,040
me poslali nazaj le niz besedila,

966
00:58:59,040 --> 00:59:01,950
vendar vem, da se dogaja, da se me pošlje nazaj JSON.

967
00:59:01,950 --> 00:59:06,760
To pomeni, da je mogoče, da JSON pretvori v povezovalne matrike JavaScript.

968
00:59:06,760 --> 00:59:10,830
In tako jQuery, bi rad, da narediš to zame.

969
00:59:10,830 --> 00:59:13,990
To pomeni, da je ta parameter odgovora tukaj,

970
00:59:13,990 --> 00:59:16,070
To ni več le niz.

971
00:59:16,070 --> 00:59:19,860
Ker smo povedali, da jQuery prihaja nekaj JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery bo dovolj pameten, da reči, "Želeli JSON?"

973
00:59:22,950 --> 00:59:26,890
"Jaz bom za pretvorbo, ki je v asociativni niz za vas."

974
00:59:26,890 --> 00:59:32,100
Kaj je dejansko si oglejte na omrežno kartico, ko imamo quote4.js.

975
00:59:32,100 --> 00:59:35,400
Mi bomo to spremenili, in ponovno naložite stran.

976
00:59:37,150 --> 00:59:41,250
Zdaj bom, da tip v-znova.

977
00:59:41,250 --> 00:59:45,600
Naredil sem nekaj prošenj za suggest.php, zdaj pa je to odgovor,

978
00:59:45,600 --> 00:59:48,670
ne le v nizu, je JSON.

979
00:59:48,670 --> 00:59:52,580
Torej imam odprt kodraste opornico rekel: "Tukaj prihaja asociativno polje."

980
00:59:52,580 --> 00:59:56,830
>> Prvi in ​​edini ključ te povezovalne matrike se imenuje simboli,

981
00:59:56,830 --> 01:00:00,240
in potem je tukaj množica vseh ustreznih simbolov

982
01:00:00,240 --> 01:00:04,820
Zdaj prihajajo iz Yahoo! Finance, ne pa iz tega velikanskega seznama.

983
01:00:06,110 --> 01:00:10,630
Tako lahko enostavno zapolnijo ta autocomplete plugin

984
01:00:10,630 --> 01:00:14,280
z nekaterimi podatki, ki se niso šolali v lokalni datoteki, ki je že vnaprej

985
01:00:14,280 --> 01:00:17,490
ampak nekaj drugega.

986
01:00:17,490 --> 01:00:21,160
Izkazalo se je, da lahko dejansko izkoristijo tehnologije, imenovane JSONP,

987
01:00:21,160 --> 01:00:27,420
ali JSON s polnilom, da bo odpravila te suggest.php posrednik.

988
01:00:27,420 --> 01:00:34,010
Toda namesto da delaš, kaj je namesto tega si oglejte, kako je mogoče izboljšati to še toliko bolj.

989
01:00:34,010 --> 01:00:36,040
Res mi je všeč Bootstrap je Typeahead. To je res lepo.

990
01:00:36,040 --> 01:00:39,570
Vendar pa smo dobili dober v JavaScriptu in želimo, da nekako to sami,

991
01:00:39,570 --> 01:00:43,870
Mogoče si oglejte, kaj bi to lahko počel vtičnik.

992
01:00:43,870 --> 01:00:46,500
Naj se ne bodo več uporabljali, da Typeahead stvar,

993
01:00:46,500 --> 01:00:50,550
in kaj je prizadeval, da bi ta seznam predlaganih zalog sami.

994
01:00:50,550 --> 01:00:53,790
Tu v quote6.php bomo začeli na enak način.

995
01:00:53,790 --> 01:00:58,050
Vsakič, ko nekdo vrste nekaj, kar smo želeli, da bi zahtevek AJAX.

996
01:00:58,050 --> 01:01:01,590
To je podobno kot naš prvotni CS50 Instant finance.

997
01:01:01,590 --> 01:01:05,020
Namesto da vloži zahtevo za quote.php,

998
01:01:05,020 --> 01:01:08,530
smo zdaj vloži zahtevo za iste datoteke kot prej, to suggest.php,

999
01:01:08,530 --> 01:01:12,460
ki je le, da bo potegnite podatke iz Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Spet smo še vedno pričakujemo JSON, vendar pa sedaj, saj Typeahead ni to za nas,

1001
01:01:19,480 --> 01:01:24,850
moramo poslati po vrednosti, ki je znotraj sedanje polju.

1002
01:01:24,850 --> 01:01:28,120
Zdaj vemo, kaj vprašati Yahoo! Finance za,

1003
01:01:28,120 --> 01:01:34,160
in sedaj tukaj je naloga, ki ga želimo izvesti enkrat na zahtevo konča.

1004
01:01:34,160 --> 01:01:36,520
Nimamo vtičnik, da seznam za nas,

1005
01:01:36,520 --> 01:01:40,630
tako da tukaj kjer smo dejansko dogaja za izgradnjo seznam predlogov.

1006
01:01:40,630 --> 01:01:44,850
Da bi to dosegli, podobno kot v PHP, smo sestavljenim te velike nize HTML

1007
01:01:44,850 --> 01:01:48,170
potem smo jih natisnejo, lahko naredimo točno isto stvar JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Najprej bomo začeli ta niz se imenuje predlogov,

1009
01:01:51,850 --> 01:01:54,590
in ta niz je le, da bo vsebovati HTML.

1010
01:01:54,590 --> 01:01:58,320
Želimo, da je seznam stvari, tako da bomo začeli s to oznako seznam,

1011
01:01:58,320 --> 01:02:03,340
in zdaj bomo ponoviti čez vse simbole, ki so se vrnili nazaj k nam.

1012
01:02:03,340 --> 01:02:06,500
Ne pozabite, saj smo že rekel datatype: "JSON", to ni niz.

1013
01:02:06,500 --> 01:02:09,500
To je že zaporedje pri nas. To je res kul.

1014
01:02:09,500 --> 01:02:13,790
Mi lahko preprosto reči: "Želim, da priložite seznam element."

1015
01:02:13,790 --> 01:02:16,000
Bomo pa je v elementu je na strani, da

1016
01:02:16,000 --> 01:02:19,030
bomo izročiti to razred predlogov, da bomo vedeli, kaj je,

1017
01:02:19,030 --> 01:02:23,880
in tukaj je zdaj simbol, da smo prišli iz Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Ko smo ustvarili element vsakega od znakov, ki smo jih nazaj gotten,

1019
01:02:27,230 --> 01:02:30,100
hočemo samo zapreti seznam.

1020
01:02:30,100 --> 01:02:33,040
Torej, zdaj predlogov predstavlja ta mali košček HTML

1021
01:02:33,040 --> 01:02:37,860
da, kadar se odpravlja na strani, se bo seznam stvari, ki jih iščemo.

1022
01:02:37,860 --> 01:02:41,070
Zdaj pa je dejansko dal to na strani.

1023
01:02:41,070 --> 01:02:46,390
Če želite to narediti, da sem dejansko ustvaril še eno prazno div in sem mu dala ID predlogov.

1024
01:02:46,390 --> 01:02:52,520
Podobno kot smo si zastavili vsebino div, ki bi prikazujejo ceno podatke o stanjih,

1025
01:02:52,520 --> 01:02:58,600
sedaj samo želim, da določi vsebino tega div, da ne glede na to niz je

1026
01:02:58,600 --> 01:03:00,290
ki vsebuje te simbole.

1027
01:03:00,290 --> 01:03:07,650
Z uporabo te metode, HTML, to predlogov spremenljivka, ta niz je niz HTML.

1028
01:03:07,650 --> 01:03:13,490
Želim si, da to HTML-ja in ga znotraj div imenom predloge.

1029
01:03:13,490 --> 01:03:15,680
Pravkar smo priloženo nekaj DOM zdaj.

1030
01:03:15,680 --> 01:03:20,360
Dodali smo nekaj novih elementov v Domu, da lahko zdaj prikazati na strani.

1031
01:03:20,360 --> 01:03:22,540
Pa poglejmo, kako izgleda.

1032
01:03:22,540 --> 01:03:29,110
Če bomo naložili na quote6 in zdaj smo prišli nazaj,

1033
01:03:29,110 --> 01:03:34,480
Zdaj, ko sem začel tipkati AAPL, nimamo več, da Bootstrapa autocomplete,

1034
01:03:34,480 --> 01:03:38,470
vendar imamo zdaj ta seznam, ki smo si jih naredil.

1035
01:03:38,470 --> 01:03:43,230
To je malo grši kot Bootstrap Typeahead, na primer,

1036
01:03:43,230 --> 01:03:45,580
vendar pa nam omogočajo, da narediti še eno stvar.

1037
01:03:45,580 --> 01:03:48,660
Ko smo si ogleduje ta Bootstrap plugin,

1038
01:03:48,660 --> 01:03:52,590
smo videli, da ko smo autocompleted, eden za samodokončanje vrednosti je AAPL.

1039
01:03:52,590 --> 01:03:54,820
To morda ne bo tako v pomoč.

1040
01:03:54,820 --> 01:03:59,100
Kot uporabnik ne bi takoj prepoznali vse zaloge simbolov.

1041
01:03:59,100 --> 01:04:02,370
Kaj sem bolj verjetno, da priznajo, so družbe dejanska imena.

1042
01:04:02,370 --> 01:04:05,310
Torej ne bi bilo zelo koristno, če ne pravim AAPL

1043
01:04:05,310 --> 01:04:07,970
to je rekel nekaj podobnega Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Ker smo to zapakirano sebe, smo lahko res enostavno narediti.

1045
01:04:12,240 --> 01:04:17,630
Naj odpre svojo zadnjo datoteko quote tukaj, tako da quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Ista stvar. Pravkar sem ustvaril novo datoteko PHP, da bo poslal k nam več kot le simboli.

1047
01:04:23,200 --> 01:04:25,550
To bo tudi nam nazaj družbe imen.

1048
01:04:25,550 --> 01:04:28,150
In tako delamo isto stvar. Mi smo vložitev prošnje AJAX.

1049
01:04:28,150 --> 01:04:32,370
Ko je bila zahteva izpolnjena, bomo za izvedbo te funkcije tukaj,

1050
01:04:32,370 --> 01:04:36,520
in ta funkcija bo zgraditi velik niz elementov.

1051
01:04:36,520 --> 01:04:39,520
Vendar pa je razlika v tem, da je vrednost teh seznamih ni več samo simbol,

1052
01:04:39,520 --> 01:04:45,370
to je zdaj ime.

1053
01:04:45,370 --> 01:04:47,070
Torej imamo en majhen problem.

1054
01:04:47,070 --> 01:04:51,590
Ko bomo uporabili naš lookup, moramo nekako dajati simbol.

1055
01:04:51,590 --> 01:04:54,950
Ne moremo mimo iskanje nekaj podobnega Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Moramo opraviti to MSFT.

1057
01:04:57,900 --> 01:05:01,640
Ko smo pišete HTML, imamo veliko lepih vgrajenih lastnosti.

1058
01:05:01,640 --> 01:05:05,440
Morda povezano z njo href ali razred.

1059
01:05:05,440 --> 01:05:08,230
Toda tisto, kar resnično potrebujemo, je za vsako od teh povezav

1060
01:05:08,230 --> 01:05:11,120
da imajo zaloge simbol povezan z njo.

1061
01:05:11,120 --> 01:05:14,240
Ni vgrajen v HTML atributa za simbol parka,

1062
01:05:14,240 --> 01:05:21,010
ampak na srečo, HTML5 nam omogoča, da ustvarite lastne značilnosti, da postanejo, kar hočemo.

1063
01:05:21,010 --> 01:05:24,620
Z besedami podatkovno simbol, ki sem jih predstavil nov atribut

1064
01:05:24,620 --> 01:05:29,350
čigar ime Pravkar sem si izmislil, in to je v redu, ker sem jo predgovor s temi podatki.

1065
01:05:29,350 --> 01:05:34,270
Gremo za shranjevanje v notranjosti od tam simbola iz zaloge zdaj.

1066
01:05:34,270 --> 01:05:39,590
Kaj to pomeni, da kljub temu, da smo prikazuje vrednost imena podjetja

1067
01:05:39,590 --> 01:05:43,380
znotraj naše autocomplete, še vedno spominja simbol

1068
01:05:43,380 --> 01:05:47,110
, ki je povezan z vsako družbo.

1069
01:05:47,110 --> 01:05:50,350
Tako delamo, da je znotraj tega dela samega.

1070
01:05:50,350 --> 01:05:52,930
Torej to pomeni, da moramo narediti eno spremembo.

1071
01:05:52,930 --> 01:05:57,090
Ko smo ga še zdaj se moramo, da dejansko izkoristijo simbol atributa

1072
01:05:57,090 --> 01:06:00,220
ne le njegova vrednost.

1073
01:06:00,220 --> 01:06:05,010
Če smo nazaj, smo pripisujejo velik dogodek za obravnavo predloge.

1074
01:06:05,010 --> 01:06:09,280
Kadar se ena od teh predlogov kliknili zdaj, hočem nekaj narediti.

1075
01:06:09,280 --> 01:06:13,160
Kaj želim storiti, je spremeniti vrednost tega vnosno polje.

1076
01:06:13,160 --> 01:06:16,100
Zdaj hočem, naj to isto funkcijo val.

1077
01:06:16,100 --> 01:06:21,060
>> Torej, brez kakršnih koli argumentov, ta funkcija Val vrne v vas, kar je že v polju z besedilom,

1078
01:06:21,060 --> 01:06:27,070
če pa ji niz, ga bo trajalo, da se niz in ga v polje z besedilom.

1079
01:06:27,070 --> 01:06:28,980
Jaz sem svojo izbiro polja z besedilom na enak način.

1080
01:06:28,980 --> 01:06:31,230
To ime je simbol znotraj obrazca-ponudbo.

1081
01:06:31,230 --> 01:06:37,540
Zdaj sem da mu je poslala vrednost atributa podatkov simbolov.

1082
01:06:37,540 --> 01:06:41,560
To stvar tukaj je, nov, to $ (ta).

1083
01:06:41,560 --> 01:06:46,850
Kaj to pomeni, da je element, ki ga je uporabnik kliknil.

1084
01:06:46,850 --> 01:06:50,880
Tukaj lahko vidimo, da nismo pritrditev klik dogodek

1085
01:06:50,880 --> 01:06:54,690
za vsak element s skupino predlog posebej.

1086
01:06:54,690 --> 01:06:57,140
Namesto tega smo se tega lotiti nekoliko drugače.

1087
01:06:57,140 --> 01:07:01,700
Namesto da bi si rekel, ko karkoli znotraj te pobude div,

1088
01:07:01,700 --> 01:07:04,080
Zapomnite si, ki je le posoda za ta seznam,

1089
01:07:04,080 --> 01:07:10,150
če je nekaj v teh div kliknili in ima razred predlog,

1090
01:07:10,150 --> 01:07:13,000
Hočem ta dogodek na ogenj.

1091
01:07:13,000 --> 01:07:17,490
V bistvu, kaj to pomeni, kar lahko naredimo, je, da lahko ponovno ta isti trener dogodek

1092
01:07:17,490 --> 01:07:20,000
za vse stvari na seznamu.

1093
01:07:20,000 --> 01:07:22,080
Torej nimamo, da imajo eno obravnavo dogodkov za prvi element

1094
01:07:22,080 --> 01:07:24,550
in drugačno obravnavo dogodkov za drugi element.

1095
01:07:24,550 --> 01:07:29,880
Mi lahko namesto tega reči, "želim isto trener dogodek, ki se uporabljajo za vse v moj seznam."

1096
01:07:29,880 --> 01:07:34,420
Vendar moramo nekako vedeli, kateri element je kliknil.

1097
01:07:34,420 --> 01:07:38,450
Ta "to" ključna beseda pomeni prav to.

1098
01:07:38,450 --> 01:07:42,360
To je predmet, ki je bil pravkar kliknili s strani uporabnika.

1099
01:07:42,360 --> 01:07:47,680
Če sem kliknil na povezavo 3. to predstavlja element tega 3. člen,

1100
01:07:47,680 --> 01:07:51,670
kar pomeni, da lahko dobim svoj atribut, simbol podatkov,

1101
01:07:51,670 --> 01:07:57,760
kar vemo je, da vsebuje simbol, ki je povezan z družbo, sem kliknil.

1102
01:07:57,760 --> 01:08:04,550
Če skočimo nazaj na našo stran financ,

1103
01:08:04,550 --> 01:08:08,580
lahko vidimo, da sedaj, ko sem začel tipkati nekaj podobnega MSFT,

1104
01:08:08,580 --> 01:08:11,220
bomo več dobili le staležev, simbolov,

1105
01:08:11,220 --> 01:08:13,720
smo sedaj dobili konkretne družbe.

1106
01:08:13,720 --> 01:08:20,410
Toda, ko sem kliknite na eno od teh družb,

1107
01:08:20,410 --> 01:08:25,180
lahko vidimo, da smo dejansko poselitve polje z besedilom, ne z imenom podjetja

1108
01:08:25,180 --> 01:08:29,850
vendar je ne glede na shranjeni v teh podatkov atributov.

1109
01:08:29,850 --> 01:08:32,880
In tako, če bi dejansko pregled enega od teh elementov z desnim klikom

1110
01:08:32,880 --> 01:08:36,200
Preglejte in kliknete element, lahko dejansko videli, kako izgleda.

1111
01:08:36,200 --> 01:08:40,290
>> Ne pozabite, to je nekaj, kar smo ustvarili v notranjosti, ki za zanko

1112
01:08:40,290 --> 01:08:42,649
ko smo gradili ta niz HTML.

1113
01:08:42,649 --> 01:08:47,870
Tukaj lahko vidimo, da so ti podatki, simbol ima vrednost MSFT, kar je super.

1114
01:08:47,870 --> 01:08:49,189
To je tisto, kar smo pričakovali.

1115
01:08:49,189 --> 01:08:53,170
To je simbol in to je, kako smo dobili vrednosti, ki jih potrebujemo za uporabo

1116
01:08:53,170 --> 01:08:56,140
znotraj tega polja z besedilom.

1117
01:08:56,140 --> 01:08:58,850
To je dovolj za citatom obliki, ker to je nekako dolgočasno.

1118
01:08:58,850 --> 01:09:02,990
Reciva, da nekaj hitrih izboljšav za naše portfelja strani.

1119
01:09:02,990 --> 01:09:08,109
Če ste uporabljali CS50 Finance za nekaj časa in boste začeli nakupom in prodajo veliko zalog,

1120
01:09:08,109 --> 01:09:11,300
na koncu te tabele se bo dobil precej velik,

1121
01:09:11,300 --> 01:09:13,850
in boste želeli osnovno kartico, seveda.

1122
01:09:13,850 --> 01:09:20,350
Ko miza je zelo, zelo velika, bi bilo koristno za uporabnika, da poskusite poiskati nad njim.

1123
01:09:20,350 --> 01:09:23,290
Znotraj iskalno polje, če začnem tipkati nekaj podobnega Disney

1124
01:09:23,290 --> 01:09:26,359
in išče svoj vozni park Mickey Mouse, lahko vidimo, da je tabela zdaj filtriranje

1125
01:09:26,359 --> 01:09:28,189
na to, kaj sem pravkar vtipka

1126
01:09:28,189 --> 01:09:31,640
Ta funkcija izgleda super zapleteno, ampak to je res, enostavno

1127
01:09:31,640 --> 01:09:33,859
s jQuery in JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Ta portfolio.php datoteka vsebuje datoteko z imenom portfolio.js JavaScript.

1129
01:09:39,189 --> 01:09:41,130
Oglejmo pogled na to.

1130
01:09:41,130 --> 01:09:44,890
Torej, html, js, portfolio.

1131
01:09:44,890 --> 01:09:49,210
Tukaj, kjer delamo, da iščejo na mizi.

1132
01:09:49,210 --> 01:09:52,750
Prva stvar, kar morate storiti, je, priložiti obravnavo dogodkov v tem polju z besedilom

1133
01:09:52,750 --> 01:09:55,760
saj vemo, da želimo, da naši filtriranje funkcija na ogenj

1134
01:09:55,760 --> 01:09:59,800
vsakič, ko uporabnik pritisne nekaj, ker nimamo časa za iskanje gumbov.

1135
01:09:59,800 --> 01:10:03,000
Prva stvar, ki jo morate storiti, je ugotoviti, kaj uporabnik išče,

1136
01:10:03,000 --> 01:10:04,780
tako kot smo že naredili.

1137
01:10:04,780 --> 01:10:11,320
Ta ključna beseda se nanaša na trenutni element uporabnik stiku s.

1138
01:10:11,320 --> 01:10:14,070
>> Ker je uporabnik v stiku z iskalno polje

1139
01:10:14,070 --> 01:10:17,020
$ To pomeni polje za iskanje,

1140
01:10:17,020 --> 01:10:21,820
Tako this.val nam daje kaj je v iskalno polje uporabnik trenutno vnašate.

1141
01:10:22,810 --> 01:10:27,320
Torej, zdaj, kaj želimo narediti, je, da želimo ponoviti čez vse vrstice

1142
01:10:27,320 --> 01:10:29,240
znotraj naše mize.

1143
01:10:29,240 --> 01:10:35,630
Če želite izbrati vse vrstice v naši mizi, dal sem, da tabela ID portfelja tabele,

1144
01:10:35,630 --> 01:10:39,060
in je vsaka vrstica predstavlja element TR,

1145
01:10:39,060 --> 01:10:42,080
tako da to izbiro se bo vrnil k meni velika polja

1146
01:10:42,080 --> 01:10:44,370
vseh vrstic v moji mizi.

1147
01:10:44,370 --> 01:10:47,010
Sedaj želim ponoviti, da v matriko.

1148
01:10:47,010 --> 01:10:52,390
Jaz bi si za zanke, vendar jQuery dejansko določa, nam lepo funkcijo imenovano "vsak".

1149
01:10:52,390 --> 01:10:55,220
Kaj pa je vsak drug vzame en argument,

1150
01:10:55,220 --> 01:10:57,090
in da je argument funkcije.

1151
01:10:57,090 --> 01:11:02,760
Kaj bo naredil, je, da se dogaja, da uporabljajo to funkcijo, da bi vsak element znotraj tega seznama.

1152
01:11:02,760 --> 01:11:05,550
Ta funkcija vzame en argument, ki je e,

1153
01:11:05,550 --> 01:11:10,090
in ko se izvaja ta funkcija, to e bo treba nadomestiti s prvo vrstico,

1154
01:11:10,090 --> 01:11:12,070
potem druga vrstica, nato pa tretji vrsti.

1155
01:11:12,070 --> 01:11:15,150
Na ta način, je to isto, kot teče v zanki

1156
01:11:15,150 --> 01:11:21,360
in nato poskušal trenutni element, na podlagi indeksa notranji strani za zanke.

1157
01:11:21,360 --> 01:11:24,750
Pri vsaki ponovitvi za vsako od teh elementov v tabeli

1158
01:11:24,750 --> 01:11:30,560
Želim, da preverite, če je besedilo elementa - besedilo v celici notranjost zapored -

1159
01:11:30,560 --> 01:11:33,130
ujema s tisto, kar sem iskal.

1160
01:11:33,130 --> 01:11:36,390
Ta velik dolg niz ukazov, kako sem lahko to naredil.

1161
01:11:36,390 --> 01:11:40,900
Prvič, spet, to zdaj zadeva - saj je notranjost nove funkcije -

1162
01:11:40,900 --> 01:11:45,020
To je zdaj trenutna vrstica v tabeli.

1163
01:11:45,020 --> 01:11:47,340
Želim, da se trenutno vrstico v tabeli,

1164
01:11:47,340 --> 01:11:49,950
in želim, da bi dobili vse svoje otroke.

1165
01:11:49,950 --> 01:11:51,940
Ne pozabite, DOM je hierarhična drevo,

1166
01:11:51,940 --> 01:11:54,200
kar pomeni, da elementi imajo več otrok.

1167
01:11:54,200 --> 01:12:00,180
>> To. Otrok funkcija vrača nazaj k meni paleto vseh elementov

1168
01:12:00,180 --> 01:12:03,240
da so otroci, v tem primeru vrstice v tabeli.

1169
01:12:03,240 --> 01:12:07,150
To je preprosto celice v notranjosti na vrsti.

1170
01:12:07,150 --> 01:12:09,230
Želim poiskati v prvo celico.

1171
01:12:09,230 --> 01:12:13,090
To. Prva funkcija pravi, da mi prvi element v tem polju.

1172
01:12:13,090 --> 01:12:17,070
Nato besedilo funkcija pravi, da me točno kaj je v tej celici

1173
01:12:17,070 --> 01:12:19,530
ker želim iskati v tem besedilu.

1174
01:12:19,530 --> 01:12:21,040
Končno, kaj je to pretvoriti v male črke,

1175
01:12:21,040 --> 01:12:23,940
tako da lahko naredimo besedilne velikost črk poizvedbe.

1176
01:12:23,940 --> 01:12:29,990
Na koncu želimo, da vidim, če je ta niz znotraj tabele vsebuje niz smo iskali.

1177
01:12:29,990 --> 01:12:32,980
IndexOf funkcija v JavaScriptu ne samo to.

1178
01:12:32,980 --> 01:12:37,060
To nam pove, ali je ta niz vsebuje še niz.

1179
01:12:37,060 --> 01:12:40,150
Če je res, da celica vsebuje kar sem iskal,

1180
01:12:40,150 --> 01:12:42,140
potem pa želim, da poskrbite, da se izkaže.

1181
01:12:42,140 --> 01:12:45,330
Predstava način bodo rekli: "Pokaži element«.

1182
01:12:45,330 --> 01:12:50,350
Če to ni tako, potem to pomeni, da karkoli sem iskal, ni vsebovala

1183
01:12:50,350 --> 01:12:53,550
v tej vrstici, zato želim skrivati, je od uporabnika.

1184
01:12:53,550 --> 01:12:59,240
To dosežemo, da se lepo filtrirni učinek, če ne vidimo celotno tabelo.

1185
01:12:59,240 --> 01:13:01,480
Če vas zanima, kako bi to tika-taka, kot tudi,

1186
01:13:01,480 --> 01:13:04,180
bomo objavili vir na spletu. Ampak to je zelo preprosto.

1187
01:13:04,180 --> 01:13:09,860
JQuery je super metode za te animacije in manipuliranje lastnosti CSS.

1188
01:13:09,860 --> 01:13:11,020
Torej, to je to za mene.

1189
01:13:11,020 --> 01:13:15,560
>> Kaj potem nas čaka? Kot boste videli v nekaj dneh, končni predlog projekta je posledica.

1190
01:13:15,560 --> 01:13:17,730
Končni predlog projekta bo vam zastavil nekaj vprašanj,

1191
01:13:17,730 --> 01:13:19,420
vendar bo med njimi tri mejniki -

1192
01:13:19,420 --> 01:13:22,840
1 "dobro" mejnik, eden boljših mejnik, in eden najboljših.

1193
01:13:22,840 --> 01:13:25,870
Ideja je res, da bi fantje iz vaših pričakovanj

1194
01:13:25,870 --> 01:13:29,160
tako da se minimalno boste zadovoljni z močjo svojega končnega projekta

1195
01:13:29,160 --> 01:13:32,060
in bo "dobro", če ste zaskrbljeni.

1196
01:13:32,060 --> 01:13:34,540
Ampak potem je v interesu pridobivanje vas, da dosežejo samo malo k nečemu boljšemu

1197
01:13:34,540 --> 01:13:37,680
ali kaj najbolje, bomo tudi nekako porinil proti, kot dobro.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-Thon, medtem, je v nekaj tednih.

1199
01:13:40,660 --> 01:13:44,340
Značilno je, da to storimo na podlagi loterije posebej zaradi interesa,

1200
01:13:44,340 --> 01:13:47,680
vendar so možnosti, da bo trajalo nekaj sto nas avtobusi iz Harvard trga

1201
01:13:47,680 --> 01:13:51,540
do Kendall Square, kjer Microsoft ima lep objekt, aptly imenovan "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England raziskovalni in razvojni center.

1203
01:13:53,830 --> 01:13:56,380
Bomo tja okoli 8:00 bomo imeli nekaj hrane.

1204
01:13:56,380 --> 01:13:58,160
Okoli 01:00 bomo imeli nekaj več hrane.

1205
01:13:58,160 --> 01:14:02,150
Okoli 05:00, če si še vedno buden bomo čez glavo, da IHOP ali pa vas nazaj v kampusu.

1206
01:14:02,150 --> 01:14:04,380
Cilj je, da se potopite v končnih projektov

1207
01:14:04,380 --> 01:14:06,190
skupaj z sošolci in osebje.

1208
01:14:06,190 --> 01:14:08,280
Nato nekaj dni kasneje je CS50 sejem,

1209
01:14:08,280 --> 01:14:10,990
kar je res mišljeno, da bo priložnost za vama, da predstavijo svoje delo

1210
01:14:10,990 --> 01:14:12,700
in dosežki za semester

1211
01:14:12,700 --> 01:14:15,610
medtem ko drgnjenje ramena med seboj in dobili občutek, kaj vse naredil.

1212
01:14:15,610 --> 01:14:17,850
S tem je dejal, najlepša hvala Tommy in Jožefu

1213
01:14:17,850 --> 01:14:19,960
in vas bomo videli v ponedeljek.

1214
01:14:19,960 --> 01:14:24,070
 [Aplavz]