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

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

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

4
00:00:07,940 --> 00:00:13,340
>> Ez CS50. Ez a vége a hét 9. Köszönöm szépen.

5
00:00:13,340 --> 00:00:15,310
Végre. 9. hét. Megvan.

6
00:00:15,310 --> 00:00:18,590
Ma folytatjuk a beszélgetést web programozás

7
00:00:18,590 --> 00:00:21,660
egy szem felé, a végleges projekt, nem azért van, hogy valamit csinálni web-alapú

8
00:00:21,660 --> 00:00:25,610
A végső projektek, hanem azért, mert sem a végső projektek vagy azt követően CS50

9
00:00:25,610 --> 00:00:29,000
ez minden bizonnyal az az irány, amelyben a modern szoftvert megy.

10
00:00:29,000 --> 00:00:31,770
És mégis, ez valójában nem egy egyszerű dolog.

11
00:00:31,770 --> 00:00:35,040
Tény, hogy az egyik legnehezebb dolog, hogy a szempont design.

12
00:00:35,040 --> 00:00:38,600
>> Például, a design is jelenti, ténylegesen is a felhasználói felület

13
00:00:38,600 --> 00:00:40,420
vagy a felhasználói élmény jobbra.

14
00:00:40,420 --> 00:00:43,200
Merem állítani - és tudjuk, hogy egy új probléma set

15
00:00:43,200 --> 00:00:45,960
amikor néhány közületek Sugárzás a hasfájás néhány szoftver

16
00:00:45,960 --> 00:00:49,000
vagy hardver, amely infuriates te, akár az egyetemen, vagy off -

17
00:00:49,000 --> 00:00:51,930
van egy csomó helyek ott, van egy csomó hardver odakinn,

18
00:00:51,930 --> 00:00:53,900
ez a fajta szar.

19
00:00:53,900 --> 00:00:58,730
De a valóság az, hogy a dolgok, amelyek könnyen használható, mégis ennek ellenére erőteljes

20
00:00:58,730 --> 00:01:00,550
egy nagyon nehéz kihívás.

21
00:01:00,550 --> 00:01:03,680
Így ma kértem József és Tommy, hogy csatlakozzon hozzám ide

22
00:01:03,680 --> 00:01:06,680
hogy mi lehet egy beszélgetést, mind a design

23
00:01:06,680 --> 00:01:09,090
és milyen gondolkodási folyamatait kell kezdeni megy keresztül a fejedben

24
00:01:09,090 --> 00:01:12,040
amikor tervezni a végső projektek, a jövőben törekvések.

25
00:01:12,040 --> 00:01:15,040
És majd Tommy segítségével fogjuk nézni néhány végrehajtási részletek.

26
00:01:15,040 --> 00:01:18,440
Hogyan lehet néhány elképzelés papíron vagy a fejedben

27
00:01:18,440 --> 00:01:20,760
hogy aztán végre algoritmikusan

28
00:01:20,760 --> 00:01:24,030
segítségével egyes technológiák és technikák épp most kezdett beszélni,

29
00:01:24,030 --> 00:01:29,080
nevezetesen a JavaScript és valami még újabb, nevezetesen AJAX, aszinkron JavaScript programot.

30
00:01:29,080 --> 00:01:32,950
Ez lehetővé teszi, hogy a dinamikusabb a felhasználói felület

31
00:01:32,950 --> 00:01:35,780
által letöltésekor több és több adatot fokozatosan a szerver.

32
00:01:35,780 --> 00:01:38,560
Szóval majd meglátjuk, néhány ilyen kódrészletet is ma.

33
00:01:38,560 --> 00:01:41,800
Mint félre, ha érdekli koncentrálási számítástechnika

34
00:01:41,800 --> 00:01:45,010
vagy minoring számítógép-tudomány, tudom, hogy ezen a héten pénteken délben

35
00:01:45,010 --> 00:01:48,750
A Maxwell Dworkin 221 lesz a pizza esemény

36
00:01:48,750 --> 00:01:50,780
ahol meg lehet tanulni egy kicsit többet számítástechnika.

37
00:01:50,780 --> 00:01:54,860
Az utat az ajtón ma Ön képes lesz arra, hogy vegye fel egy nem hivatalos útmutató CS Harvardon.

38
00:01:54,860 --> 00:01:57,290
Majd tedd a kukák ezen kívül a derék magasságban

39
00:01:57,290 --> 00:01:59,750
így ha azt szeretné, hogy fogd ezt, és tanulni egy kicsit többet CS,

40
00:01:59,750 --> 00:02:02,480
, hogy ott lesz az Ön számára, mint volt a 0. héten.

41
00:02:02,480 --> 00:02:06,500
Akkor is, ha szeretne csatlakozni hozzánk ebédre CS50 ezt pénteken 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Minden további nélkül, adok neked tanítást ember Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Szia. [Taps]

45
00:02:19,190 --> 00:02:20,770
Kösz.

46
00:02:20,770 --> 00:02:24,780
Az első alkalommal hallottam tervezés volt egy osztály van az úgynevezett CS179.

47
00:02:24,780 --> 00:02:28,040
>> A professzor abban az időben azt mondta nekünk a történetet egy másik tanár

48
00:02:28,040 --> 00:02:31,640
aki elment egy szállodába, és használta a csaptelepek.

49
00:02:31,640 --> 00:02:35,630
Tud valaki mondja meg, mi a 2 gombok a bal és a jobb csinálni?

50
00:02:35,630 --> 00:02:39,080
[Hallgató] Meleg és hideg. >> Meleg és hideg. Jó.

51
00:02:39,080 --> 00:02:41,430
Mit általában elvárható, igaz?

52
00:02:41,430 --> 00:02:46,960
Ez a tanár használata után a csapot akarja venni zuhanyozó, és azt, hogy ezt a bevételt.

53
00:02:46,960 --> 00:02:51,310
Azt hiszi, hogy a bal és a jobb oldalon a hideg és meleg, ugye?

54
00:02:51,310 --> 00:02:55,470
De tud valaki mondja meg, mit jelentenek ezek valójában?

55
00:02:55,470 --> 00:02:58,060
Bármely keze?

56
00:02:58,060 --> 00:03:01,740
[Hallhatatlan diák válasza] >> Az egyik javaslat az?

57
00:03:01,740 --> 00:03:05,860
[Hallhatatlan diák válasza] >> hőmérséklet?

58
00:03:05,860 --> 00:03:10,460
Tehát az egyik közülük ellenőrzi hőmérséklet és az egyéb ellenőrzések? >> [Hallgató] víznyomás.

59
00:03:10,460 --> 00:03:12,350
Víz nyomás. Jó.

60
00:03:12,350 --> 00:03:15,100
Ez a tanár belép ebbe, és azt gondolták, hogy a vezérlő a hideg és meleg,

61
00:03:15,100 --> 00:03:21,470
fordul az igazit, amely azt hiszi, ez a forró, egészen

62
00:03:21,470 --> 00:03:23,560
mert azt akarja, hogy egy meleg zuhany.

63
00:03:23,560 --> 00:03:28,100
Nos, ezek valójában nem egyeznek meg, így ő kapja ezt a nem túl szórakoztató élményt

64
00:03:28,100 --> 00:03:31,110
, hogy a hideg zuhany, és mindannyian tudjuk, milyen érzés.

65
00:03:31,110 --> 00:03:33,620
Ez egy példa a tervezési hiba.

66
00:03:33,620 --> 00:03:37,040
Mit jelent ez a várakozás a csapból

67
00:03:37,040 --> 00:03:39,420
nem egyeznek, mi jött ki a zuhany alatt,

68
00:03:39,420 --> 00:03:41,780
ami elég szerencsétlen neki.

69
00:03:41,780 --> 00:03:44,990
Tehát ez egy példa egy tervezési hiba, ami történik az életben.

70
00:03:44,990 --> 00:03:48,020
De azt látjuk, mindenféle más is is.

71
00:03:48,020 --> 00:03:50,390
Mi valószínűleg nem rajongók a MBTA rendszer.

72
00:03:50,390 --> 00:03:55,560
Ez a metró rendszer valóban Londonban, ami azt mondja: "Ez a gomb nem használható."

73
00:03:55,560 --> 00:04:00,220
Miért van még ott? Miért is érdekel?

74
00:04:00,220 --> 00:04:02,810
Amikor gyerek voltam, mivel a tech hozzáértés, egyet a házban,

75
00:04:02,810 --> 00:04:05,050
ha a számítógép is összeomolhat, anyám jön hozzám,

76
00:04:05,050 --> 00:04:07,060
megmutatta nekem ezt a képernyőt, és megkérdezte, mi történt.

77
00:04:07,060 --> 00:04:09,210
>> Még nem tudom, hogy ez mit jelent.

78
00:04:11,890 --> 00:04:14,700
[Nevetés] Mi az?

79
00:04:16,950 --> 00:04:18,019
[Nevetés]

80
00:04:18,720 --> 00:04:23,050
Néha úgy érezzük, mintha a szoftverfejlesztők csak pergetett minket.

81
00:04:23,050 --> 00:04:28,460
Amint a felhasználók vagyunk, mint a "Mi folyik itt? Valaki mondja el nekünk."

82
00:04:28,460 --> 00:04:32,140
Mindez jön le, hogy a kérdés a design.

83
00:04:32,140 --> 00:04:34,650
Design, mint látjuk, nem pusztán esztétikai,

84
00:04:34,650 --> 00:04:37,230
ez nem arról szól, hogy hogyan néz ki a dolgok.

85
00:04:37,230 --> 00:04:41,720
Látjuk itt, hogy ez a kis pop-up ide valóban úgy néz ki, nagyon szép.

86
00:04:41,720 --> 00:04:45,290
Ez egy árnyék a háttérben, azt átnyúló sugarú folyik.

87
00:04:45,290 --> 00:04:47,550
Ez olyan szép.

88
00:04:47,550 --> 00:04:51,480
Ez nem igazán jól megtervezett, mert nem nagyon felhasználóbarát.

89
00:04:51,480 --> 00:04:54,920
Ez a kis pop-up, hogy jön fel nem igazán nekem semmilyen információt

90
00:04:54,920 --> 00:04:58,450
arról, hogy mi folyik itt, ez nem mond nekem semmit, mint a felhasználói

91
00:04:58,450 --> 00:05:01,400
arról, hogyan lehet helyreállítani az említett hibát.

92
00:05:01,400 --> 00:05:05,190
Azt akarjuk, hogy gondolni a dolgokat, hogy a design nem.

93
00:05:05,190 --> 00:05:06,670
Először is, ez nem esztétika.

94
00:05:06,670 --> 00:05:10,800
Ez nem is a töltelék app tonnányi felesleges funkciót.

95
00:05:10,800 --> 00:05:14,890
Ha egy thai éttermet, akkor valószínűleg nem akarja, hogy egy fogorvos, ugyanabban az időben.

96
00:05:14,890 --> 00:05:17,720
És a Facebook Kérdések, nem az, hogy sok ember használta

97
00:05:17,720 --> 00:05:21,130
és ez nem volt a lényege, amit építettek.

98
00:05:21,130 --> 00:05:24,200
És ez így jó, hogy úgy gondolja, hogy nem annyira a mennyiség a dolgok

99
00:05:24,200 --> 00:05:26,390
hogy te üzembe az alkalmazás, de a minőség

100
00:05:26,390 --> 00:05:28,910
és hogyan csinálsz, hogy a jobb felhasználói élmény

101
00:05:28,910 --> 00:05:32,540
által ténylegesen javul, amit már van.

102
00:05:32,540 --> 00:05:37,040
>> Dióhéjban, design elmondja, mit kell építeni.

103
00:05:37,040 --> 00:05:41,950
Például, ha mi építünk valamit, ossza meg velünk keresni dolgokat,

104
00:05:41,950 --> 00:05:45,970
mint a Google, például, meg kell tennünk a dolgokat módon

105
00:05:45,970 --> 00:05:48,950
amely előírja, hogy a felhasználó számára, hogy sok kattintást kap, amit akarnak,

106
00:05:48,950 --> 00:05:52,580
vagy tegyünk meg olyan módon, például a Google Instant vagy autocomplete

107
00:05:52,580 --> 00:05:54,970
, amely lehetővé teszi számunkra, hogy a mi eredmények gyorsabb?

108
00:05:54,970 --> 00:05:58,740
Engineering magában foglalja, mint a Tommy megmutatja, valójában épület is.

109
00:05:58,740 --> 00:06:01,890
Sok fajta design.

110
00:06:01,890 --> 00:06:06,070
Például, ha építünk valamit telepíteni valamit

111
00:06:06,070 --> 00:06:09,770
Egy harmadik világbeli országban, ahol nincs sok villamos energia, illetve, hogy sok technológia

112
00:06:09,770 --> 00:06:11,440
meg kell tervezni, hogy mit építünk

113
00:06:11,440 --> 00:06:14,210
oly módon, hogy könnyen hozzáférést biztosít az emberek ott.

114
00:06:14,210 --> 00:06:18,290
De miféle más tervezési döntések meglehet van-e

115
00:06:18,290 --> 00:06:21,850
vagy lehet, hogy részt vesz valami ilyesmi?

116
00:06:23,690 --> 00:06:25,660
Igen. Látom a kezét.

117
00:06:25,660 --> 00:06:37,200
[Hallhatatlan diák válasza] >> Rendben. Pontosan. Kisegítő egy dolog.

118
00:06:37,200 --> 00:06:40,870
Sokan nem gondolnak: "Mi lesz a felhasználó?"

119
00:06:40,870 --> 00:06:43,160
mint a szélső sem spektrum.

120
00:06:43,160 --> 00:06:47,770
Van felhasználóknak, akik olyan fogyatékossággal, hogy nem vagyok gondolok

121
00:06:47,770 --> 00:06:50,590
és én csak gondoltam tervezése az általános felhasználó számára.

122
00:06:50,590 --> 00:06:52,630
Az internet elérhető mindenki manapság,

123
00:06:52,630 --> 00:06:54,870
és azt kell kidolgozniuk, azoknak az embereknek is.

124
00:06:54,870 --> 00:06:58,620
Milyen típusú más tervezési döntések is csinál?

125
00:06:58,620 --> 00:07:00,690
Igen. >> [Hallgató] Költségét.

126
00:07:00,690 --> 00:07:02,680
Költség. Nagyon jó.

127
00:07:02,680 --> 00:07:08,060
A másik dolog, talán alapozzuk tervezési döntések költség.

128
00:07:08,060 --> 00:07:13,130
Ha vagyunk olyan üzleti, szeretne építeni valamit, ami nem vesz sok költséget termelni

129
00:07:13,130 --> 00:07:17,720
de lehet eladni egy különösen magas költségek, vagy minket némi nyereséget.

130
00:07:17,720 --> 00:07:21,540
>> Ezek mind különböző design, de amikor építünk valamit az interneten

131
00:07:21,540 --> 00:07:25,120
vagy amikor építünk valamit, ami valószínűleg nem kerül, hogy sok felépíteni most

132
00:07:25,120 --> 00:07:28,630
mint például az Internet alkalmazások - nem kell, hogy dobja sok tőkét bele

133
00:07:28,630 --> 00:07:30,900
annak érdekében, hogy valamit, ami tényleg működik -

134
00:07:30,900 --> 00:07:33,490
mi vagyunk jobban aggódik a felhasználói élményt.

135
00:07:33,490 --> 00:07:36,390
Ezt hívjuk felhasználó központú design.

136
00:07:36,390 --> 00:07:41,550
Lényegében mi felhasználó központú design magában foglalja a napokban magatokat a cipő a felhasználók.

137
00:07:41,550 --> 00:07:44,870
Ha valaki feliratkozik, amit építek,

138
00:07:44,870 --> 00:07:48,250
ők már nyilvánvalóan az én különleges kérelmet egy célt szem előtt tartva,

139
00:07:48,250 --> 00:07:50,280
azzal a feladattal akarják befejezni.

140
00:07:50,280 --> 00:07:53,650
És a munka nem csak hogy segítsen nekik befejezni a feladatot

141
00:07:53,650 --> 00:07:57,930
hanem hogy segítsen nekik befejezni ezt a feladatot olyan módon, amely hatékony, intuitív,

142
00:07:57,930 --> 00:08:01,900
és, mint néhány ember azt mondta ott, hozzáférhető.

143
00:08:01,900 --> 00:08:03,750
Mit jelent a hatékonyság jelent?

144
00:08:03,750 --> 00:08:08,050
Hatékonyság: az, hogy milyen gyorsan jelent a felhasználói befejezni a feladatot adtam interfész.

145
00:08:08,050 --> 00:08:11,650
Vajon hogy sok kattintást őket, hogy egyik helyről a másikra?

146
00:08:11,650 --> 00:08:14,630
Ez unalmas? Vajon el kell végezni sok ismétlődő feladatok?

147
00:08:14,630 --> 00:08:17,140
Azt szeretnénk, hogy a folyamatot a lehető leghatékonyabban

148
00:08:17,140 --> 00:08:20,070
így nem kell csinálni a dolgot.

149
00:08:20,070 --> 00:08:24,230
Ami intuitiveness, azaz, például, ha egy felhasználó néz up my interfész,

150
00:08:24,230 --> 00:08:27,240
ez könnyű nekik, hogy egyik helyről a másikra?

151
00:08:27,240 --> 00:08:30,390
Vajon könnyű számukra, hogy kitaláljuk, mit kell kattintania az én felületen

152
00:08:30,390 --> 00:08:33,770
ahhoz, hogy elérjék a célt vagy feladatot akarnak elérni?

153
00:08:33,770 --> 00:08:37,520
>> És végül, az egyik ember azt mondta ott, a hozzáférhetőség nagyon fontos.

154
00:08:37,520 --> 00:08:39,640
[Férfi hangszóró] Jön a hozzáférhetőség a dolgok, mint a látás,

155
00:08:39,640 --> 00:08:42,740
mint hogyan tudom valójában tervezzen valamit valakinek, aki vak?

156
00:08:42,740 --> 00:08:46,460
Oh. Azok számára, akik nem lát egyáltalán, van egy úgynevezett képernyőolvasó.

157
00:08:46,460 --> 00:08:49,070
Mit kell tenned, hogy meg kell építeni a website olyan módon

158
00:08:49,070 --> 00:08:52,020
, hogy például, bizonyos technológiák hívjuk -

159
00:08:52,020 --> 00:08:53,590
Sok dolgot most.

160
00:08:53,590 --> 00:08:55,660
Úgy gondolom, hogy az úgynevezett JAWS képernyőolvasó.

161
00:08:55,660 --> 00:08:58,410
Egy csomó ilyen dolog hivatkozhat hívjuk terület szabályok

162
00:08:58,410 --> 00:09:02,010
annak érdekében, hogy felolvassa a felhasználónak, ami jelen van az oldalon.

163
00:09:02,010 --> 00:09:05,480
Azok számára, akik nem látják, meg kell győződnie arról, hogy ezek a képernyőolvasók

164
00:09:05,480 --> 00:09:09,130
ténylegesen vedd fel a tartalmat az oldalon, és valóban azt mutatják, hogy a felhasználók,

165
00:09:09,130 --> 00:09:13,630
Ha nem látod, legalább még mindig érti a tartalom az oldalon.

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

167
00:09:16,190 --> 00:09:23,410
Elég beszélünk jó design. Beszéljünk rossz design.

168
00:09:23,410 --> 00:09:25,220
Ezek olyan dolgok, amiket nem kellene.

169
00:09:25,220 --> 00:09:27,890
Tud valaki mondja meg tapasztalatait a Craigslist

170
00:09:27,890 --> 00:09:32,190
és mit gondolnak nem olyan nagyszerű ez a design?

171
00:09:33,690 --> 00:09:36,430
Igen. >> [Hallgató] Azt hiszem, túl sok szót az egyik területen.

172
00:09:36,430 --> 00:09:39,350
Túl sok szó, ugye? Teljesen elsöprő.

173
00:09:39,350 --> 00:09:42,400
Ha ezt az oldalt, és te köszöntötte egy csomó dolgot ide

174
00:09:42,400 --> 00:09:43,860
hogy talán nem is számít neked.

175
00:09:43,860 --> 00:09:47,010
Például, ha él az egyik kimondja, hogy nem úgy kezdődik, ezt a levelet.

176
00:09:47,010 --> 00:09:48,690
Tegyük fel, hogy él, Texas, vagy ilyesmi.

177
00:09:48,690 --> 00:09:53,790
>> Meg kell görgetni egészen a lap, hogy a hely, vannak.

178
00:09:53,790 --> 00:10:00,320
Én vagyok a Boston, hadd nézzen Massachusetts. Hol van Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Ó, itt van. Ó, Boston. Oké.

180
00:10:03,270 --> 00:10:09,070
Nézzük Boston. [Nevetés]

181
00:10:09,070 --> 00:10:12,250
Elég nyomasztó, ugye?

182
00:10:12,250 --> 00:10:16,400
Kínos dolog ott. [Nevetés]

183
00:10:17,320 --> 00:10:19,470
Mondjuk Ezt keresem valahol élni.

184
00:10:19,470 --> 00:10:24,130
Hány ember ténylegesen használt Craigslist? Rengeteg téged.

185
00:10:24,130 --> 00:10:30,960
Vannak nagyon rossz módon, hogy nézd meg, de nézzük meg ezt.

186
00:10:35,130 --> 00:10:38,970
Mi a különbség az img és a kép? Tud valaki mondani nekem?

187
00:10:41,350 --> 00:10:42,830
Ott valóban nincs különbség.

188
00:10:42,830 --> 00:10:47,710
Ők is jelent pontosan ugyanaz a dolog, de ezek különböző címkéket őket valamilyen okból.

189
00:10:48,980 --> 00:10:53,560
Ha kattintson a Has fényképek, semmi sem történik az oldalon.

190
00:10:53,560 --> 00:10:57,490
Igazából kell kattintania keresése újra, hogy történjen valami.

191
00:10:57,490 --> 00:11:02,430
Mi lehet a jobb tervezési döntést, hogy lehet tenni ott?

192
00:11:03,820 --> 00:11:08,030
Ha én vagyok kattint, hogy filter, én valószínűleg szeretne szűrni, hogy az adott intézkedés

193
00:11:08,030 --> 00:11:09,970
vagy az adott kategóriában.

194
00:11:09,970 --> 00:11:14,450
Tehát ahelyett, hogy nyomja meg a Keresés ismét tudtam csak automatikusan végzi a szűrést

195
00:11:14,450 --> 00:11:17,060
fajta Google stílusú amennyiben csinálni azonnal.

196
00:11:17,060 --> 00:11:20,440
[Malan] De nem képez, ahogy láttam őket eddig kell fizikailag benyújtani

197
00:11:20,440 --> 00:11:23,170
lenyomja az Enter legalább vagy kattintson a gombot?

198
00:11:23,170 --> 00:11:26,830
Ahogy láttam őket eddig, hogy tényleg kell kattintania Submit csinálni ezeket a dolgokat.

199
00:11:26,830 --> 00:11:30,090
>> De Tommy megmutatja a második, vannak valójában módon az Ön számára

200
00:11:30,090 --> 00:11:33,010
oly módon, hogy ha rákattint a dolog akkor automatikusan küld

201
00:11:33,010 --> 00:11:38,840
hívjuk egy AJAX kérés és kap adatokat vissza és szűrheti az eredményeket azonnal.

202
00:11:38,840 --> 00:11:41,340
Rengeteg dolog, ami rossz ezen a felületen.

203
00:11:41,340 --> 00:11:43,530
[Malan] Tud keresni Cambridge?

204
00:11:43,530 --> 00:11:47,030
Van valami kissé rendhagyó itt, ahol törődnek Cambridge

205
00:11:47,030 --> 00:11:54,790
és még kapsz Westford, Spring Hill, West Newton és hasonlók.

206
00:11:54,790 --> 00:11:57,930
Valószínűleg nem ideális. >> Valószínűleg nem ideális.

207
00:11:57,930 --> 00:12:03,900
Hogyan lehetne azt tenni, hogy a felhasználói élményt jobban az adott oldalon?

208
00:12:03,900 --> 00:12:07,340
Igen. >> [Hallgató] utasítások.

209
00:12:07,340 --> 00:12:09,500
Oké. Utasítások milyen értelemben?

210
00:12:09,500 --> 00:12:14,630
[Hallgató] Például, egy dolog, az első alkalommal felhasználók számára, akik még csak nem is tudom, mi Craigslist

211
00:12:14,630 --> 00:12:17,320
vagy nem tudom, mit kéne csinálni.

212
00:12:17,320 --> 00:12:20,150
Rendben. Tehát arról, hogy mi Craigslist ezen az oldalon fontos.

213
00:12:20,150 --> 00:12:23,490
Mi lehet valójában mondani, hogy mi ez az oldal a felhasználók valójában a.

214
00:12:23,490 --> 00:12:27,090
Ha én csak meglátogatta ezt látom, egy csomó helyen. Én nem is tudom, mit jelent.

215
00:12:27,090 --> 00:12:29,730
De ami még fontosabb, csak nézi most ezt a felületet,

216
00:12:29,730 --> 00:12:35,530
emlékszem kellett görgessen egy csomó dolog, hogy talál egy adott közösség

217
00:12:35,530 --> 00:12:37,560
hogy én valóban törődik ezzel.

218
00:12:37,560 --> 00:12:39,820
Mi egy gyorsabb módja, hogy ezt? Igen.

219
00:12:39,820 --> 00:12:43,290
[Hallgató] Oszd őket a keleti, nyugati régiókban. >> Oké.

220
00:12:43,290 --> 00:12:47,460
Tudnám osztani őket több kategóriában, amely segíthet nekem gyorsabb meghatározni

221
00:12:47,460 --> 00:12:49,820
hogyan lehet eljutni az adott helyre.

222
00:12:49,820 --> 00:12:54,510
[Hallgató] Tegyen egy legördülő listából. >> Rendben. Oké.

223
00:12:54,510 --> 00:12:58,240
Jól jönne egy legördülő menü, mert van egy fix sor dolgot

224
00:12:58,240 --> 00:13:00,100
és mi is megmutatom nekik a legördülő menüből.

225
00:13:00,100 --> 00:13:02,240
Így nem veszi fel ilyen sok helyet a képernyőn.

226
00:13:02,240 --> 00:13:05,630
De még jobb, mint az, hogy mit tehetünk?

227
00:13:05,630 --> 00:13:09,220
Igen. >> [Hallhatatlan tanulói válasz] >> tudja mondani, hogy egyszer? >> [Hallgató] Keresés mezőbe.

228
00:13:09,220 --> 00:13:11,260
Igen, egy keresőmező. Ez nagyszerű.

229
00:13:11,260 --> 00:13:16,430
Mit tehetünk, ha ténylegesen nézzük vissza a diák keresőmezőbe.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Nagyon egyszerű módja annak, hogy keresni eredményeket, hogy tudod, van egy sor.

231
00:13:21,520 --> 00:13:25,980
Ha elkezdek gépelni BO, csak mutasd meg nekem a találatokat, amelyek BO bennük.

232
00:13:25,980 --> 00:13:29,030
Így tudok nagyon könnyen megtalálja a különösen egy akarok menni

233
00:13:29,030 --> 00:13:32,390
ahelyett, hogy lapozhat ez valóban nagy listát.

234
00:13:32,390 --> 00:13:37,450
>> Ezek mindenféle valóban alacsonyan lógó gyümölcs, hogy valaki, aki a végrehajtó Craigslist

235
00:13:37,450 --> 00:13:42,500
ténylegesen tenni, hogy a tapasztalatok a honlapon sokkal jobban azok adott felhasználó.

236
00:13:42,500 --> 00:13:46,370
Oké. Elég beszél rossz weboldalak.

237
00:13:46,370 --> 00:13:49,410
Beszéljünk Facebook.

238
00:13:50,880 --> 00:13:54,390
Amikor a Facebook jött ki, és különösen a Facebook fotókat,

239
00:13:54,390 --> 00:13:57,870
voltak sok egyéb szolgáltatás abban az időben, ami nem pontosan ugyanazokat a dolgokat.

240
00:13:57,870 --> 00:14:00,740
Tudták szervezni a képeket albumokba.

241
00:14:00,740 --> 00:14:03,360
Mit tehet az meg tudná szervezni őket készletek is.

242
00:14:03,360 --> 00:14:06,070
Lehet szervezni őket dátum. Lehet csinálni ezeket a különös dolgokat.

243
00:14:06,070 --> 00:14:11,710
De vajon valaki tudja, mit tett Facebook fotók felrobban időpontjában megjelent?

244
00:14:11,710 --> 00:14:15,080
Igen. >> [Hallgató] Szavak. Szavak >>. Pontosan.

245
00:14:15,080 --> 00:14:21,300
Van Milo ide, aki a mi kutya kabala azzal CS50 bandanna.

246
00:14:21,300 --> 00:14:24,810
Láthatjuk, hogy itt van ez a címkézés funkciót a közepén.

247
00:14:24,810 --> 00:14:28,240
És mit tett Facebook fotók annyira érdekes egy használhatósági szempontból

248
00:14:28,240 --> 00:14:34,130
az, hogy ténylegesen lehetővé tette az emberek ezen keresztül bevonni a barátaikat a saját fotók.

249
00:14:34,130 --> 00:14:37,680
A Facebook, mivel a honlap különösen a szociális,

250
00:14:37,680 --> 00:14:40,750
ez körülbelül épület ezt a fajta társadalmi légkör.

251
00:14:40,750 --> 00:14:42,620
Ez javította a tapasztalat a képek sokkal

252
00:14:42,620 --> 00:14:46,390
mert ténylegesen kezdeni mondván: "Ezek az emberek közötti kapcsolatok,

253
00:14:46,390 --> 00:14:49,220
és ezek a fotók az emberek, hogy tényleg érdekli. "

254
00:14:49,220 --> 00:14:52,200
Része ez is egyfajta önimádat.

255
00:14:52,200 --> 00:14:54,980
Az emberek szeretnek kell jelölni a kép és ilyesmik.

256
00:14:54,980 --> 00:14:58,510
Bár ez nem feltétlenül jó emberi tulajdonság,

257
00:14:58,510 --> 00:15:01,910
ugyanakkor ez a jó tervezési döntések

258
00:15:01,910 --> 00:15:04,860
mert az emberek valóban törődnek a dolgok, mint ez.

259
00:15:04,860 --> 00:15:07,190
Szóval ez Facebook fotók.

260
00:15:07,190 --> 00:15:09,800
>> De beszéljünk Facebook általában.

261
00:15:09,800 --> 00:15:13,400
Biztos vagyok benne, sok ember itt van véleményük Facebook,

262
00:15:13,400 --> 00:15:16,430
mind a jó és a rossz tervezési döntések tervezési döntéseket.

263
00:15:16,430 --> 00:15:20,270
Szóval szellőző vagy boldog legyen.

264
00:15:23,480 --> 00:15:26,450
Gyerünk. Tudom, hogy az összes használt Facebook.

265
00:15:26,450 --> 00:15:30,970
Valakinek van valami rosszat mondani, vagy valami jót mondani róla. Igen.

266
00:15:30,970 --> 00:15:35,060
[Hallgató] A hírcsatorna van egy csomó dolog, amit nem igazán érdekel.

267
00:15:35,060 --> 00:15:37,740
A hírcsatorna nem mutatnak egy csomó dolog, amit lehet, hogy nem érdekel.

268
00:15:37,740 --> 00:15:41,660
Van barátaival a Facebook, akik még nem találkoztak, 2 vagy 3 év

269
00:15:41,660 --> 00:15:43,860
és látod a híreket eredményeket felbukkanó a news feed

270
00:15:43,860 --> 00:15:45,870
és nem igazán érdekli.

271
00:15:45,870 --> 00:15:48,700
Facebook valóban erőfeszítéseket tett, hogy ez jobb,

272
00:15:48,700 --> 00:15:53,150
és ők már valóban megpróbálták betolni releváns eredményeket a tetején a hírcsatorna, mint a késői

273
00:15:53,150 --> 00:15:58,300
így valóban látni a dolgokat, a barátok, amelyek relevánsak az Ön vagy közeli barátok.

274
00:15:58,300 --> 00:16:01,110
Még valami? Igen.

275
00:16:01,110 --> 00:16:06,400
[Hallhatatlan diák válasza] >> tudja mondani, hogy egyszer?

276
00:16:06,400 --> 00:16:10,140
[Hallgató] A hirdetések viszonylag feltűnő. >> Milyen értelemben?

277
00:16:10,140 --> 00:16:16,370
[Hallhatatlan diák válasza] Nem világos a képernyőn, mint a bannerek.

278
00:16:16,370 --> 00:16:17,760
Oké. Ez jó.

279
00:16:17,760 --> 00:16:25,030
Ha emlékszel az interneten a 90-es évek - >> [Malan] ott voltam. >> Ott volt. [Nevetés]

280
00:16:25,030 --> 00:16:29,210
Talán emlékszik villogó GIF háttereket, csillogó dolgokat,

281
00:16:29,210 --> 00:16:31,570
GeoCities stílusa fajta dolgokat.

282
00:16:31,570 --> 00:16:34,080
Ez tényleg nem egy példa a jó design

283
00:16:34,080 --> 00:16:36,690
mert tényleg zavaró a tartalom.

284
00:16:36,690 --> 00:16:39,590
A Yale art honlap hozzászokott volna animált GIF azok háttere

285
00:16:39,590 --> 00:16:41,800
és akkor nem tudott olvasni semmit az oldalon,

286
00:16:41,800 --> 00:16:44,870
de azt hiszem, hogy valaki tényleg beszéltem velük, és most ez egy kicsit más.

287
00:16:44,870 --> 00:16:48,940
[Malan] Sokkal jobb most. >> Sokkal jobb most, mint látod. >> [Malan] Oh igen.

288
00:16:48,940 --> 00:16:56,020
Csak jó, csak - Igen. Oké.

289
00:16:56,020 --> 00:17:00,560
>> Része az is, hogy az oldal valószínűleg nagyon minimalista és nagyon érthető

290
00:17:00,560 --> 00:17:05,690
így a dolgok az oldalon áramlását oly módon, hogy ez nagyon logikus és nem kap, ahogy egymást.

291
00:17:05,690 --> 00:17:11,849
Milyen típusú egyéb dolgok jó a Facebook, vagy rossz a Facebook?

292
00:17:11,849 --> 00:17:15,730
Nézzük csak meg a design beszélgetés itt.

293
00:17:19,470 --> 00:17:21,339
Oh. Hova? Igen.

294
00:17:21,339 --> 00:17:25,640
[Hallgató] Az új Timeline rendszer lehetővé teszi a keresést az illető profilját körülbelül múltjukat.

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

296
00:17:28,119 --> 00:17:30,280
Timeline egy nagyszerű dolog, mert lehetővé teszi, hogy tönk barátaid

297
00:17:30,280 --> 00:17:33,300
vissza, amikor ők voltak a középiskolában.

298
00:17:35,160 --> 00:17:38,060
Timeline jó, mert lehetővé teszi, hogy szűrjük tartalom sokkal gyorsabb,

299
00:17:38,060 --> 00:17:41,500
ez lehetővé teszi, hogy a dolgok, hogy az lett volna egyébként hozott egy nagyon hosszú ideig, hogy megtalálja

300
00:17:41,500 --> 00:17:45,840
Csak görgetés fel és le, fel, fel, fel, fel, fel, mint megy vissza az időben.

301
00:17:45,840 --> 00:17:48,910
De aztán ott van még egyfajta hátránya, hogy mind a felhasználói élményt.

302
00:17:48,910 --> 00:17:51,190
Mi lenne az?

303
00:17:51,190 --> 00:17:56,780
Nagy szó, hogy kezdődik a P-R. >> [Hallgató] Adatvédelmi. >> Privacy, ugye?

304
00:17:56,780 --> 00:17:59,970
Privacy hatalmas felhasználói élményt kérdés.

305
00:17:59,970 --> 00:18:07,190
Ez az egyik dolog, amit utálok legjobban Facebook most. [Nevetés]

306
00:18:07,190 --> 00:18:09,000
[Malan] Mivel tudom most.

307
00:18:09,000 --> 00:18:11,380
David nem vette észre ezt a valóban megtörtént egészen tegnapig.

308
00:18:11,380 --> 00:18:14,560
Szóval most már tudja, hogy minden egyes alkalommal, amikor beszélgetni vele tudom, ő is figyelmen kívül hagyva engem.

309
00:18:14,560 --> 00:18:16,880
[Malan] A kínos alkatrész Igazából figyelmen kívül hagyva őt,

310
00:18:16,880 --> 00:18:21,040
és én nem tudom, hogy tudtam, hogy figyelmen kívül hagyja őt. [Nevetés]

311
00:18:21,040 --> 00:18:24,030
Privacy egy hatalmas kérdés.

312
00:18:24,030 --> 00:18:28,670
Tud valaki itt mondani, mi lehet rossz a Facebook adatvédelmi

313
00:18:28,670 --> 00:18:32,270
amellett, hogy mennek a dolgok, mint ez?

314
00:18:32,270 --> 00:18:37,240
Mi az, hogy különösen nehéz megtenni tekintetében Facebook magánélet?

315
00:18:37,240 --> 00:18:40,340
Ez az a fajta vezető kérdés.

316
00:18:41,680 --> 00:18:43,930
Igen. >> [Hallgató] elrejtése képek bizonyos embereket.

317
00:18:43,930 --> 00:18:46,170
Rendben. Pontosan, hogy elrejtse a képek bizonyos embereket.

318
00:18:46,170 --> 00:18:51,290
Nekik van ez a kicsi, kis gombot a jobb felső sarokban, amely lehetővé teszi váltás a magánélet egy fényképet.

319
00:18:51,290 --> 00:18:56,360
A magánélet védelmét szolgáló funkciók igen változatos a különböző típusú menüket.

320
00:18:56,360 --> 00:18:59,510
>> Már ütött sokkal jobb, erről a közelmúltban, de ez szokott lenni a helyzet

321
00:18:59,510 --> 00:19:04,870
hogy amikor meg akarták akadályozni a barátaidnak lássa fotókat,

322
00:19:04,870 --> 00:19:08,280
meg kellett volna, hogy menjen át egy rendkívül bonyolult 5-lépéses folyamat, hogy hasonló,

323
00:19:08,280 --> 00:19:11,150
hadd kattints erre a linkre, most hadd kattintson újra, hadd kattintson újra,

324
00:19:11,150 --> 00:19:13,420
hadd adja, amelyben az emberek nem látom a képeket.

325
00:19:13,420 --> 00:19:17,250
Ez nem különösebben jó a Facebook részéről

326
00:19:17,250 --> 00:19:20,530
mert annyira felhasználói élmény valóban biztosítja számukra a szabadságot

327
00:19:20,530 --> 00:19:22,460
hogy ellenőrizzék, amit az emberek láthatják.

328
00:19:22,460 --> 00:19:25,550
Ezt hívjuk felhasználói ellenőrzést és a szabadság.

329
00:19:25,550 --> 00:19:31,090
Ha nem engedi a felhasználókat tenni oly módon, hogy hatékony és intuitív,

330
00:19:31,090 --> 00:19:34,570
akkor a felhasználói élmény, nem igazán jó egyáltalán.

331
00:19:34,570 --> 00:19:38,200
 Szeretnél srácok szeretnék mondani semmit Facebook?

332
00:19:38,700 --> 00:19:41,420
Hogyan kapcsolható ez ki?

333
00:19:41,420 --> 00:19:46,290
[Ong] Nem kapcsolja ki ezt ki, és ez egy hatalmas hiba használhatóság részéről a Facebook.

334
00:19:46,290 --> 00:19:49,410
Ez a funkció - Igazából belenézett tegnap -

335
00:19:49,410 --> 00:19:53,940
ez vagy az, hogy nem tudod, vagy ez eltemetve valahol nagyon-nagyon mély

336
00:19:53,940 --> 00:19:58,050
A mélyedések a Facebook, mert nem tudok rájönni, hogyan lehet letiltani ezt a funkciót egyáltalán.

337
00:19:58,050 --> 00:20:00,400
[Malan] De néha ezek a döntések nem nyilvánvaló

338
00:20:00,400 --> 00:20:03,890
mert ti adtak nekünk egy csomó hasznos visszajelzést különböző CS50 kérelmek

339
00:20:03,890 --> 00:20:05,710
és weboldalak, amelyek a kurzus használ.

340
00:20:05,710 --> 00:20:10,260
Mi nem hajtotta végre az összes ezeket a kéréseket és javaslatokat.

341
00:20:10,260 --> 00:20:14,550
>> Része, hogy a kiegészítő szerzés annyi kéri, hogy ez egy az idő függvényében,

342
00:20:14,550 --> 00:20:17,070
de néha csak, hogy egy tudatos döntés, mint,

343
00:20:17,070 --> 00:20:19,830
"Köszönjük a javaslatot, de nem értünk egyet."

344
00:20:19,830 --> 00:20:24,350
Szóval hogyan lehet valójában dönteni, mit kell tennie, ha a felhasználó úgy gondolja, meg kell csinálni valamit,

345
00:20:24,350 --> 00:20:28,110
akkor is, ha nem feltétlenül?

346
00:20:28,110 --> 00:20:32,360
Ez egy finom egyensúlyt ténylegesen hallgatni, amit a felhasználók mondják

347
00:20:32,360 --> 00:20:35,840
és valóban, amelyek valamilyen vonal, ahol azt mondja,

348
00:20:35,840 --> 00:20:37,750
"Nem fogjuk azt tenni, amit a felhasználók mondanak."

349
00:20:37,750 --> 00:20:42,520
És különösen az, azt hiszem, volt egy idézet Henry Ford, hogy összefoglalja ezt fel elég jól.

350
00:20:42,520 --> 00:20:47,130
"Ha én azt kérte az embereket, mit akarnak, akkor azt mondta volna, hogy gyorsabb lovakat akartak."

351
00:20:47,130 --> 00:20:51,840
Tud valaki egyfajta kötekedik eltekintve, hogy ez mit jelent valójában az idézet?

352
00:20:51,840 --> 00:20:56,060
Ez nem csak, hogy a felhasználók tudják, mit akarnak,

353
00:20:56,060 --> 00:20:59,180
de ez több, hogy -

354
00:20:59,180 --> 00:21:02,720
[Hallgató] Ők nem tudják, mi lehetséges.

355
00:21:02,720 --> 00:21:06,140
Részben nem tudják, mi lehetséges.

356
00:21:07,880 --> 00:21:11,440
Kötekedik, hogy szét egy kicsit. Mit értesz ez alatt?

357
00:21:11,440 --> 00:21:21,340
[Hallhatatlan hallgatói válasz]

358
00:21:21,340 --> 00:21:25,770
Ez jó. Azt gondolom, hogy próbáljuk elmondani, hogy az emberek tudják, mit akarnak.

359
00:21:25,770 --> 00:21:28,050
Azt akarják, hogy gyorsabb lovakat.

360
00:21:28,050 --> 00:21:29,840
Amit igazán szeretnék az a képesség, gyorsabb,

361
00:21:29,840 --> 00:21:32,310
de nem igazán tudom, a közeg, amellyel eléréséhez.

362
00:21:32,310 --> 00:21:36,330
Ha jön, hogy a felhasználók és a felhasználók mondjak valamit

363
00:21:36,330 --> 00:21:39,700
és azt mondom, "Azt szeretnénk, ezeket a funkciókat, és ezeket a funkciókat, és ezeket a szolgáltatásokat,"

364
00:21:39,700 --> 00:21:42,650
Ön nem akar feltétlenül gondolni, "Hadd menjek előre

365
00:21:42,650 --> 00:21:44,720
"És végrehajtása, amit kifejezetten mondják,"

366
00:21:44,720 --> 00:21:48,610
de mit akarsz gondolni: "Milyen gondolatok jutok ebből?"

367
00:21:48,610 --> 00:21:50,450
Mit akar valójában?

368
00:21:50,450 --> 00:21:55,560
>> És ott, hogy mit tehetünk, tervezni valamit, hogy megfelel-e kéréseket

369
00:21:55,560 --> 00:22:00,340
de nem szükségszerűen az is, hogy a felhasználó elvárja, hogy legyen elégedett.

370
00:22:00,340 --> 00:22:03,830
Tehát valami hasonló végleges projekteket, nagyon is valós értelemben

371
00:22:03,830 --> 00:22:07,900
mi hasznos heurisztikus, amikor ahhoz, hogy valami jobb,

372
00:22:07,900 --> 00:22:10,630
különösen, ha a tervező rendelkezik ezzel arrogancia róla

373
00:22:10,630 --> 00:22:14,360
ahol te fajta tudja, mi a legjobb, akkor is eltarthat bemenet a felhasználók,

374
00:22:14,360 --> 00:22:16,580
de hogyan, hogy tényleg megy a szerzés, hogy visszajelzést?

375
00:22:16,580 --> 00:22:21,610
Az utolsó projekt, nagyon konkrétan mit produkál optimális eredményt itt?

376
00:22:21,610 --> 00:22:25,030
Mi gyárt optimális eredményt - és megy át ez a második -

377
00:22:25,030 --> 00:22:29,190
ez a folyamat kidolgozása és tesztelése, majd, majd iterációjával.

378
00:22:29,190 --> 00:22:32,020
Mit jelent a tesztelés általában amikor tervezni valamit

379
00:22:32,020 --> 00:22:36,970
úgy gondolja, hogy ez elég jó, mint, "Én vagyok olyan nagy designer. Mindenki fogja szeretni ezt."

380
00:22:36,970 --> 00:22:41,600
És akkor tedd oda, és az emberek nem igazán tetszik valamilyen okból.

381
00:22:41,600 --> 00:22:46,820
Mit kell tennie, hogy van, hogy a részeket a dolgok, hogy az emberek, mint a

382
00:22:46,820 --> 00:22:49,180
és feljavítani a dolgokat, hogy az emberek nem szeretik.

383
00:22:49,180 --> 00:22:53,080
Úgy hangzik, mint egy nagyon nyilvánvaló folyamat, de ez a folyamat állandóan iterációjával

384
00:22:53,080 --> 00:22:55,980
a tetején, amit már épített egy olyan folyamat, amely segít

385
00:22:55,980 --> 00:22:59,730
nem csak szűkítheti a saját design készségek, hanem segít finomítani a tervezés

386
00:22:59,730 --> 00:23:03,790
annak érdekében, hogy az emberek valóban értékelik a terméket még több, mint korábban.

387
00:23:03,790 --> 00:23:07,390
>> Odamegyek több konkrét példát, hogy mit lehet ténylegesen.

388
00:23:07,390 --> 00:23:11,390
Mint egyfajta utolsó példa egy termék, nézzük meg kajak.

389
00:23:11,390 --> 00:23:14,970
KAJAK amikor kijött nagyon, nagyon népszerű.

390
00:23:14,970 --> 00:23:18,760
Tud valaki kitalálni miért?

391
00:23:18,760 --> 00:23:20,950
Melyek a dolgok tetszik erről, ha használták

392
00:23:20,950 --> 00:23:23,990
vagy mi a dolgok nem tetszik?

393
00:23:23,990 --> 00:23:31,590
Igen. >> [Hallhatatlan tanulói válasz] >> Oké.

394
00:23:31,590 --> 00:23:34,730
Ez része az, hogy a felhasználó olyan lekérdezést, amely sokkal kiterjedtebb

395
00:23:34,730 --> 00:23:38,150
mint egy igen szigorú 1, mint a "Meg kell felvenni a kezdési időpont

396
00:23:38,150 --> 00:23:39,810
", És meg kell, hogy vegye be a befejezés dátumát."

397
00:23:39,810 --> 00:23:44,910
Sőt, ez lehetővé teszi, hogy rugalmasan, és ez megadja az összes járat említett tartományban.

398
00:23:44,910 --> 00:23:46,730
Még valami?

399
00:23:46,730 --> 00:23:50,530
[Hallgató] Ezek közé tartozik a díjakat az ár.

400
00:23:50,530 --> 00:23:53,330
Ők magukban foglalják a díjakat az ár.

401
00:23:53,330 --> 00:23:56,720
Az adók és a dolgok valóban egyenesen bele ezt az árat a bal felső

402
00:23:56,720 --> 00:24:00,710
tehát nem becsapott gondoltam, hogy te tényleg fizet a $ 240 járat

403
00:24:00,710 --> 00:24:03,280
ha ez tényleg 330 $.

404
00:24:03,280 --> 00:24:06,200
Még valami? Igen.

405
00:24:06,200 --> 00:24:10,140
[Hallhatatlan hallgatói válasz]

406
00:24:10,140 --> 00:24:14,610
Nem vagyok biztos abban, hogy valóban segítségével csinálni.

407
00:24:14,610 --> 00:24:18,310
Lehet, hogy tévedek.

408
00:24:18,310 --> 00:24:23,360
Lehet, hogy egy érdekes dolog, ha azt szeretné, hogy nagyobb súlyt adott szűrők

409
00:24:23,360 --> 00:24:27,000
annak érdekében, hogy nyomja kapcsolatos eredményeket a szűrőt a csúcsra.

410
00:24:27,000 --> 00:24:31,920
De tudja valaki mondani, hogy mi olyan különleges ebben a bal oldalon?

411
00:24:31,920 --> 00:24:39,540
Hogyan hagyományosan felnézni egy járat egy internetes szolgáltatás, mielőtt ez?

412
00:24:41,600 --> 00:24:44,650
>> Igen. >> [Hallhatatlan tanulói válasz] >> tudja mondani, hogy -

413
00:24:44,650 --> 00:24:47,530
[Hallgató] Minden légitársaság. >> Igen. Minden légitársaság saját honlapján.

414
00:24:47,530 --> 00:24:50,110
Ez egységesíti a dolgokat. És?

415
00:24:50,110 --> 00:24:52,190
[Hallgató] Pontosan tudod, mennyi az idő, hogy elmész.

416
00:24:52,190 --> 00:24:54,460
Tudod, hogy pontosan mit alkalommal elmész,

417
00:24:54,460 --> 00:24:59,380
hanem kapcsolódó a szűrőket különösen.

418
00:25:00,710 --> 00:25:03,540
Hadd húzza fel KAJAK.

419
00:25:11,490 --> 00:25:14,020
Ó, Istenem, pop-up. Bad felhasználói élményt.

420
00:25:14,020 --> 00:25:17,230
Mi történik, ha mozog a csúszkát?

421
00:25:17,230 --> 00:25:21,010
[Hallgató] Automatikus frissítések. >> [Ong] Automatikus frissítések.

422
00:25:21,010 --> 00:25:23,440
Ez valami, ami nagyon fontos.

423
00:25:23,440 --> 00:25:25,380
Ezt megelőzően, amikor csak akart felnézni a repülés

424
00:25:25,380 --> 00:25:28,410
meg kellett tenni a bemeneti helyét, a kimenet helyét, nyomja meg a keresés,

425
00:25:28,410 --> 00:25:31,190
úgy feldolgozni, hogy az, és mutasd meg eredményeit.

426
00:25:31,190 --> 00:25:34,120
Ha meg akarod változtatni a lekérdezés, akkor meg kell nyomnia vissza kétszer

427
00:25:34,120 --> 00:25:39,770
lép egy új lekérdezést a semmiből, majd csinálni újra és újra.

428
00:25:39,770 --> 00:25:43,910
A szép dolog ilyet ez használ egy nagyon [érthetetlen] dolog a közepén.

429
00:25:43,910 --> 00:25:46,230
Ha csinálsz valamit, mint ez, akkor lő le egy kérés

430
00:25:46,230 --> 00:25:48,420
és ez visszaadja a találatokat azonnal.

431
00:25:48,420 --> 00:25:51,680
Ez a fajta közvetlen visszacsatolás van valami, amitől KAJAK vadul népszerű

432
00:25:51,680 --> 00:25:55,910
mert nagyon könnyű nekem, hogy csak megváltoztatni a query

433
00:25:55,910 --> 00:25:58,890
és az, hogy kitaláljuk a dolgokat, amelyek körül egy adott tartományban

434
00:25:58,890 --> 00:26:01,950
anélkül, hogy oda-vissza, oda-vissza, oda-vissza.

435
00:26:01,950 --> 00:26:05,200
Tehát ezek mindenféle dolgot akar gondolni, amikor tervezése webhelyére.

436
00:26:05,200 --> 00:26:08,930
Hogyan lehet, hogy nagyon hatékony az én felhasználóknak, hogy menjen át, amit ők dolgoznak

437
00:26:08,930 --> 00:26:13,010
és hogy azok végső cél a lehető leggyorsabban?

438
00:26:13,010 --> 00:26:16,430
[Malan] És József pontban korábban a felhasználók nem feltétlenül tudja, hogy mit akarnak,

439
00:26:16,430 --> 00:26:18,640
alapján, amit ti most tudni a HTML

440
00:26:18,640 --> 00:26:22,780
és van jelölőnégyzetek, rádiógombok, válasszuk a menük, beviteli mezők és hasonlók,

441
00:26:22,780 --> 00:26:26,140
hogyan kíván végrehajtani fogalma szedés indítási idő a repülés?

442
00:26:26,140 --> 00:26:30,030
>> Melyik e különböző UI mechanizmusokat kíván kezelhető?

443
00:26:30,030 --> 00:26:34,100
Ha csak tudja, az összeget a HTML tanították előtt

444
00:26:34,100 --> 00:26:39,070
és tudod, hogy a bemenetek rádió gombok, jelölőnégyzetek, legördülő menü, és a beviteli mezőbe,

445
00:26:39,070 --> 00:26:43,320
mi lenne a természetes választás volt a szedés dátumok?

446
00:26:43,320 --> 00:26:48,670
[Hallgató] bemenet. >> Bemenet. Vagy talán még egy legördülő minden a dátumok, nem igaz?

447
00:26:48,670 --> 00:26:53,170
Tehát bonyolultabb UI mechanizmusokat, mint ez a bal oldalon, hogy lehet végrehajtani,

448
00:26:53,170 --> 00:26:55,500
lehet, hogy ez a folyamat sokkal intuitívabb a csúszka

449
00:26:55,500 --> 00:27:01,020
mert az idő folyamatos, és az emberek általában nem gondolnak, hogy mind a diszkrét darabokban.

450
00:27:01,020 --> 00:27:04,950
Rendben van. Az utolsó dolog.

451
00:27:04,950 --> 00:27:07,370
Tíz használhatóság heurisztika.

452
00:27:07,370 --> 00:27:10,820
Minden, amit beszéltünk talán tartoznak e kategóriák valamelyikébe.

453
00:27:10,820 --> 00:27:14,420
Ha megy, hogy meg ezt a linket, ami a helyszínek felteszik online,

454
00:27:14,420 --> 00:27:18,900
akkor ténylegesen képes legyen, ahogy design a helyén, tartsa ezeket heurisztikus szem előtt

455
00:27:18,900 --> 00:27:21,330
és ezeket a szabályokat a hüvelykujj.

456
00:27:21,330 --> 00:27:26,610
Az a projekt, amit azt javaslom tenni annak érdekében, hogy tervezze meg a jobb app

457
00:27:26,610 --> 00:27:28,850
az, hogy nem papír prototípus először.

458
00:27:28,850 --> 00:27:32,150
Amikor gondolsz az alkalmazás, nagyon gyorsan felvázolni, mit szeretne, hogy néz ki, mint

459
00:27:32,150 --> 00:27:36,230
és győződjön meg róla, hogy a dobozok vannak elrendezve, oly módon, hogy nagyon intuitív, hogy a felhasználó használni

460
00:27:36,230 --> 00:27:39,820
és még azt mutatják, ezek a papír prototípus barátaid, és indítsa el a fókuszcsoportok.

461
00:27:39,820 --> 00:27:44,230
Csak kap 2 vagy 3 fő össze, és kérje meg őket, hogy csak érintse meg ezeket a papíron prototípusok,

462
00:27:44,230 --> 00:27:47,650
és megmutatja nekik, új képernyők, hogy ha valóban megértsék, mi folyik itt.

463
00:27:47,650 --> 00:27:50,680
>> Mit akarok, adni nekik egy feladatot, motiválni, hogy a feladat,

464
00:27:50,680 --> 00:27:53,270
és csak nekik az alkalmazást, és hagyja őket használni.

465
00:27:53,270 --> 00:27:56,530
Ne adj nekik utasításokat túl.

466
00:27:56,530 --> 00:28:00,920
Azt akarod, hogy tényleg hadd kölcsönhatásba az app olyan módon, hogy lehetővé teszi, hogy látni

467
00:28:00,920 --> 00:28:03,870
hogyan fogják használni, ha nem áll mellettük.

468
00:28:03,870 --> 00:28:05,250
És ez nagyon fontos.

469
00:28:05,250 --> 00:28:08,780
Hogy Önnek sok betekintést, hogy vannak emberek, szerzés körül különös dolgokat

470
00:28:08,780 --> 00:28:10,560
oly módon, hogy nem kívánják őket?

471
00:28:10,560 --> 00:28:14,680
Vajon a különös UI mechanizmusok a képernyőn

472
00:28:14,680 --> 00:28:17,490
oly módon, hogy a fajta Hacky?

473
00:28:17,490 --> 00:28:22,020
Nem akartam nekik csinálni így.

474
00:28:22,020 --> 00:28:23,940
És ha végeztél, hogy mit akarsz csinálni?

475
00:28:23,940 --> 00:28:26,010
A tervezés sziklák, ugye?

476
00:28:26,010 --> 00:28:29,600
Mit akarok, szeretne fejleszteni, és tegye ezt a folyamatot újra.

477
00:28:29,600 --> 00:28:32,110
Szóval mutasd meg a barátok, ha már kifejlesztette, tesztelni,

478
00:28:32,110 --> 00:28:36,630
fejlesztésére, tesztelésére, fejlesztésére, tesztelésére, navigálhat, tovább és tovább.

479
00:28:36,630 --> 00:28:39,720
Design egy nagyon iteratív folyamat ebben az értelemben.

480
00:28:39,720 --> 00:28:43,280
Te tényleg kell építeni valamit, majd észre dolgokat róla

481
00:28:43,280 --> 00:28:46,520
hogy nem vette észre, előtt és menj vissza és javítsa ettől.

482
00:28:46,520 --> 00:28:50,890
Most, mint a fejlesztési része, ez az, amit Tommy fog mutatni a szünet után

483
00:28:50,890 --> 00:28:53,220
és hogyan lehet, hogy végre valami hasonló autocomplete

484
00:28:53,220 --> 00:28:56,610
oly módon, hogy viszonylag egyszerű.

485
00:28:57,440 --> 00:28:59,550
[Malan] A Tommy hoz létre itt, a kérdés akkor.

486
00:28:59,550 --> 00:29:03,780
Sok a legkorábbi honlapok - és amikor József azt mondta, 1990-es évek stílusát honlapján,

487
00:29:03,780 --> 00:29:07,640
volt implementációk, ahol ha akarod, hogy kiválassza a kezdési és befejezési idő,

488
00:29:07,640 --> 00:29:10,380
őszintén szólva, vissza a nap, és még néhány weboldal ma,

489
00:29:10,380 --> 00:29:13,220
úgy, ahogy ezt te vagy válasszon egy óra egy legördülő,

490
00:29:13,220 --> 00:29:15,910
kiválasztotta percre egy legördülő, talán úgy dönt, AM, PM,

491
00:29:15,910 --> 00:29:17,440
és akkor csinálni még 3 alkalommal.

492
00:29:17,440 --> 00:29:19,920
És így, 6 kattintás és talán néhány görgetés

493
00:29:19,920 --> 00:29:24,000
Saját felhasználói ténylegesen biztosítani valamilyen dátum és / vagy idő tartomány ebben az értelemben.

494
00:29:24,000 --> 00:29:27,920
>> Szóval biztosan szuboptimális, mégis eddig láttunk semmilyen expresszív képességek

495
00:29:27,920 --> 00:29:30,330
bármely nyelven általunk nézett, hogy tegyen valamit szexisebb

496
00:29:30,330 --> 00:29:32,620
ilyen csúszkát a kezdési és befejezési idő.

497
00:29:32,620 --> 00:29:36,290
De ha úgy gondolja, vissza a 0. héten, amikor beszéltünk Scratch,

498
00:29:36,290 --> 00:29:39,080
is ott nem voltak hirdetések, hogy csak volt bizonyos dolgokat.

499
00:29:39,080 --> 00:29:42,700
Tényleg most volt ilyen fundamentumok, mint a hurkok és feltételek és hasonlók.

500
00:29:42,700 --> 00:29:46,910
Tehát a fajta csak nagyon elvont gondolkodás most, függetlenül a szóban HTML,

501
00:29:46,910 --> 00:29:51,260
hogy mi is történik valójában valami ilyesmit kezdési és befejezési idő csúszkát?

502
00:29:51,260 --> 00:29:54,960
Amikor mozog az egér, és rákattintok a kis sárgarépa jel a bal

503
00:29:54,960 --> 00:29:59,220
és indítsa húzva, algoritmikusan, mit akarsz, hogy képes legyen végrehajtani

504
00:29:59,220 --> 00:30:01,000
hogy történt?

505
00:30:01,000 --> 00:30:04,920
Milyen kérdéseket, mi a logikai kifejezések akarsz tudni kérdezni?

506
00:30:04,920 --> 00:30:06,930
Mi folyik itt? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Hallgató] Hol van a helyzetét a kurzor? >> Jó. Amennyiben a helyzet a kurzor?

508
00:30:10,080 --> 00:30:11,970
Ez olyasmi, amit szükséges kifejezni vissza Scratch,

509
00:30:11,970 --> 00:30:14,690
attól, hogy az adott hely vagy akár szín vagy a hasonló.

510
00:30:14,690 --> 00:30:18,410
Lehet, hogy emlékszem, hogy valaha így röviden, hétfőn volt az összes ezeket a dolgokat az úgynevezett események

511
00:30:18,410 --> 00:30:22,370
a világ az interneten, és így ott dolgok, mint onclick és onkeypress

512
00:30:22,370 --> 00:30:25,960
és onkeyup és onMouseOver és onMouseOut.

513
00:30:25,960 --> 00:30:29,130
Így észre, hogy még ezek a dolgok már vesz biztosra a weben

514
00:30:29,130 --> 00:30:32,190
az oldalak, mint a Facebook vagy a Gmail, akkor is, ha fogalmad sincs

515
00:30:32,190 --> 00:30:34,890
hogy akkor talán végre, mert nincs semmi, még hasonlót előadás

516
00:30:34,890 --> 00:30:38,570
vagy probléma Set 7, rájönnek, hogy ezekkel pontosan ugyanolyan alapjait,

517
00:30:38,570 --> 00:30:41,090
HTTP és paraméterek GET és POST,

518
00:30:41,090 --> 00:30:44,010
Az alap HTML bemenetek általunk nézett eddig

519
00:30:44,010 --> 00:30:47,690
és egy pillanatra a programszerű mechanizmusok Tommy bemutatni

520
00:30:47,690 --> 00:30:51,300
tud kezdeni, hogy kifejezze magát, mint te a 0. héten

521
00:30:51,300 --> 00:30:53,800
a nagyon ösztönösen húzással.

522
00:30:53,800 --> 00:30:58,950
>> Tehát azt mondta, Tommy MacWilliam és néhány új puzzle darabkái számunkra Web.

523
00:30:58,950 --> 00:31:03,450
Rendben van. A nevem Tommy és én fognak beszélni a JavaScript programot.

524
00:31:03,450 --> 00:31:07,150
Csak egy nyilatkozat: Én azon a véleményen vagyok, hogy a JavaScript a legjobb programozási nyelv

525
00:31:07,150 --> 00:31:09,010
az egész egész világon.

526
00:31:09,010 --> 00:31:11,940
Vannak sokan, akik nem értenek egyet velem, de ez egyszerűen lenyűgöző.

527
00:31:11,940 --> 00:31:16,330
Ha visszamegy a C, ha írni C másik osztály vagy más nyelven,

528
00:31:16,330 --> 00:31:19,780
ez csak nagyon frusztráló az összes alacsony szintű részleteket van, hogy megreked be

529
00:31:19,780 --> 00:31:23,050
Szóval, ha valaha is szomorú, hogyan bosszantó C írni,

530
00:31:23,050 --> 00:31:25,130
csak menj vissza, írj néhány JavaScript programot. Ez nirvána.

531
00:31:25,130 --> 00:31:27,980
Majd sokkal jobban érzi magát az Ön rossz nap.

532
00:31:27,980 --> 00:31:31,900
Sok a varázslatos JavaScript származik, hogy képes manipulálni a dolgokat

533
00:31:31,900 --> 00:31:33,730
, amelyek már az oldalon.

534
00:31:33,730 --> 00:31:38,520
Amikor írtam a PHP szkriptek, ők hajtották végre a szerveren,

535
00:31:38,520 --> 00:31:42,270
és végül, hogy a PHP szkript kimenete valószínűleg néhány HTML.

536
00:31:42,270 --> 00:31:45,860
Ezt a HTML küldtek a kliens, és ennyi volt.

537
00:31:45,860 --> 00:31:50,180
Ha a PHP volna hozzá egy gombot egy oldalon, például, hogy nem igazán csinálni.

538
00:31:50,180 --> 00:31:54,350
Meg kellett volna tenni egy teljesen új HTML fájlt, és elküldi azt a böngészőt.

539
00:31:54,350 --> 00:31:57,840
A JavaScript tudjuk, hogy lehet frissíteni a dolgokat, miközben ők már az oldalon,

540
00:31:57,840 --> 00:32:00,840
és emiatt tudunk sokkal többet azonnali visszajelzést,

541
00:32:00,840 --> 00:32:06,150
amely valóban javítja a felhasználói élményt honlapunkon.

542
00:32:06,150 --> 00:32:09,330
Csak egy gyors bedugni JavaScript választók.

543
00:32:09,330 --> 00:32:11,590
Tudjuk, hogy amikor letölt egy HTML oldal,

544
00:32:11,590 --> 00:32:13,890
ez lesz képviselve a DOM.

545
00:32:13,890 --> 00:32:19,340
>> A DOM emlékszik csak ez a nagy fa, ahol az elemek kapcsolódnak ebben a nagy hierarchiában.

546
00:32:19,340 --> 00:32:21,810
Amikor dolgoztunk adatbázisok Pset 7,

547
00:32:21,810 --> 00:32:26,280
az egyik első dolog, amit tudnunk kell, hogyan kell csinálni volt lekérdezni az adatbázist.

548
00:32:26,280 --> 00:32:29,060
Van ez a nagy felhasználók asztalra, és néha csak azt szeretném mondani,

549
00:32:29,060 --> 00:32:33,260
"Én csak azt akarom, néhány ilyen felhasználók számára, hogy megfeleljen bizonyos feltételt."

550
00:32:33,260 --> 00:32:36,020
Hasonlóképpen, amikor megvan a DOM szükségünk van valamilyen módon a lekérdező azt.

551
00:32:36,020 --> 00:32:39,490
Szükségünk van valamilyen módon a mondás: "Azt akarom, hogy a gombokat, hogy néz ki, mint ez

552
00:32:39,490 --> 00:32:41,860
"Vagy az összes kép az oldalon."

553
00:32:41,860 --> 00:32:44,330
És ezek a választók lehetővé teszi számunkra, hogy ezt tegyük.

554
00:32:44,330 --> 00:32:45,690
Tehát csak egy gyors bedugni.

555
00:32:45,690 --> 00:32:50,770
Ez az első, aki itt, a # előadják, mi ez fog válasszam? Tudja valaki, emlékszel?

556
00:32:50,770 --> 00:32:54,880
[Hallhatatlan diák válasza] >> Igen, pontosan.

557
00:32:54,880 --> 00:32:59,510
Ez megy válasszon egy elemet az oldalon, hogy van egy azonosítója kattintson.

558
00:32:59,510 --> 00:33:03,470
És így, hogy a hash tag azt mondja, ez a választó fog dolgozni azonosítók.

559
00:33:03,470 --> 00:33:07,630
Mi a helyzet a második, ez. Központú, mi lesz, hogy válasszon?

560
00:33:11,360 --> 00:33:15,180
Igen. >> [Hallgató] Class. >> Pontosan. Ez most megy, hogy kiválassza az osztályban.

561
00:33:15,180 --> 00:33:18,840
A különbség id és a class Itt általában az azonosító egyedinek kell lennie

562
00:33:18,840 --> 00:33:20,820
belül bármilyen térben, amit keres vége.

563
00:33:20,820 --> 00:33:23,080
Tehát, ha kerestek egy egész weboldal,

564
00:33:23,080 --> 00:33:27,740
tényleg csak van 1 elem, hogy egyes ID, így ebben az esetben a be.

565
00:33:27,740 --> 00:33:31,330
Osztályok, másrészt, mi lehet több mint 1 elem ugyanazon az oldalon

566
00:33:31,330 --> 00:33:33,130
az ugyanabba az osztályba.

567
00:33:33,130 --> 00:33:36,580
Ez hasznos lehet mondani akarok, hogy kiválassza mindent, ami az oldal közepére

568
00:33:36,580 --> 00:33:38,450
ahelyett, hogy csak 1 dolog.

569
00:33:38,450 --> 00:33:40,310
>> És végül, ez utóbbi itt egy kicsit bonyolultabb,

570
00:33:40,310 --> 00:33:43,890
de mit fog ez válassza ki a DOM?

571
00:33:46,650 --> 00:33:48,810
[Hallhatatlan diák válasza] >> Mi ez?

572
00:33:48,810 --> 00:33:53,250
[Hallgató] Bármi, ami egy tag. >> Jelenleg 2 rész van.

573
00:33:53,250 --> 00:33:58,070
A második rész fog mondani akar választani ezeket a címkéket a tag a bemeneti,

574
00:33:58,070 --> 00:34:00,730
így minden elem, amely egy input tag.

575
00:34:00,730 --> 00:34:03,080
De én nem akarom, hogy csak válassza ki az összes bemenet

576
00:34:03,080 --> 00:34:05,170
mert olyasmi, mint egy submit gomb lehetne bemenet

577
00:34:05,170 --> 00:34:08,409
és olyasmi, mint egy beviteli mező lehet egy bemenet.

578
00:34:08,409 --> 00:34:11,909
Tehát ezek a szögletes zárójelek Azt mondom, csak azt akarom, hogy kiválassza azokat az elemeket,

579
00:34:11,909 --> 00:34:14,110
melyek típusú szöveget.

580
00:34:14,110 --> 00:34:17,400
Valahol a HTML tag Nekem van egy attribútum nevű típus,

581
00:34:17,400 --> 00:34:19,750
és az értékét a attribútum kell lennie szöveg.

582
00:34:19,750 --> 00:34:21,340
Szóval, mi a helyzet az első rész itt?

583
00:34:21,340 --> 00:34:25,489
Az első szó, ennek a választó a forma, akkor van egy hely, és akkor ez a beviteli rész.

584
00:34:25,489 --> 00:34:29,620
Mit csinál, amivel formáját előtte?

585
00:34:33,409 --> 00:34:35,860
Ez lesz alapvetően korlátozzuk lekérdezést.

586
00:34:35,860 --> 00:34:38,510
Ez lehet a helyzet, hogy van néhány bemenetek az oldalon

587
00:34:38,510 --> 00:34:41,080
, amelyek nem leszármazottai formában.

588
00:34:41,080 --> 00:34:46,150
Mi ez fog tenni ez azt fogja mondani, csak azt akarom, a bemeneti címkéket, amelyek valahol felettük

589
00:34:46,150 --> 00:34:49,030
Néhány szülő eleme formában.

590
00:34:49,030 --> 00:34:52,100
És így tudjuk, hogy ezek a további hierarchikus lekérdezések

591
00:34:52,100 --> 00:34:55,000
így nem csak azt, hogy kiválassza mindent megfelelőek az adott választó.

592
00:34:55,000 --> 00:35:00,760
Mi lehet a fajta korlátozás hatálya alá, amely lekérdezés valami mást.

593
00:35:00,760 --> 00:35:04,000
Most, hogy tudjuk, hogyan válassza ki elemeket az oldalon,

594
00:35:04,000 --> 00:35:06,780
beszéljünk egy kicsit AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX egy még mindig nagyon divatos mozaikszó, hogy áll az aszinkron JavaScript és XML.

596
00:35:12,270 --> 00:35:15,640
Ez csak azért történik, hogy az XML csak valamilyen módon, hogy képviselje az adatokat.

597
00:35:15,640 --> 00:35:20,920
>> Ez a fajta elveszett népszerűség nemrégiben, tehát az X AJAX nem használják mindig.

598
00:35:20,920 --> 00:35:26,220
Alapvetően, mi AJAX lehetővé teszi számunkra, hogy tennie, hogy HTTP kérések

599
00:35:26,220 --> 00:35:28,620
az összefüggésben a JavaScript programot.

600
00:35:28,620 --> 00:35:32,310
Ha mi vagyunk a webböngészőt, és mi a navigációt az oldalak körül, és kattintson a linkre,

601
00:35:32,310 --> 00:35:37,790
mi a böngésző lesz tennie, hogy egy HTTP kérés, hogy bármilyen kapcsolat is kattintson.

602
00:35:37,790 --> 00:35:41,670
De ez nem mindig ideális, mert ha ez a helyzet, akkor David azt mondta,

603
00:35:41,670 --> 00:35:45,220
mindig van, hogy a felhasználók rákattintanak a Küldés gombot, vagy kattintson a linkre

604
00:35:45,220 --> 00:35:50,380
annak érdekében, hogy bármi megtörténhet, hogy fog vonni egy HTTP kérés.

605
00:35:50,380 --> 00:35:54,160
Tehát AJAX tudjuk, hogy ezeket a kérelmeket nevében a JavaScript programot.

606
00:35:54,160 --> 00:35:57,020
Ez azt jelenti, ha a felhasználó kölcsönhatásba lép az oldalon, vagy bármi történik,

607
00:35:57,020 --> 00:36:01,780
tudjuk valójában, hogy egy programadó kérelmet más PHP fájl honlapunkon

608
00:36:01,780 --> 00:36:06,280
vagy bármi mást, és letölteni az adatokat, hogy a fájl kiköpi.

609
00:36:06,280 --> 00:36:09,860
Vessünk egy pillantást egy példa AJAX.

610
00:36:09,860 --> 00:36:16,140
Ez a mi CS50 pénzügyi oldal, amely remélhetőleg néhányan közülünk nem ismerik.

611
00:36:16,140 --> 00:36:21,790
Ha megnézzük a HTML-oldal, azt látjuk, hogy itt adtam néhány dolgot,

612
00:36:21,790 --> 00:36:23,820
amelyek közül az egyik adtam ezt az űrlapot azonosító.

613
00:36:23,820 --> 00:36:26,480
Mondtam id = "forma-idézet."

614
00:36:26,480 --> 00:36:31,910
Tettem ezt azért, mert ez lesz, hogy ez egy kicsit könnyebb, válassza ki a DOM

615
00:36:31,910 --> 00:36:35,090
mert én is csak egy nagyon egyszerű lekérdezést.

616
00:36:35,090 --> 00:36:38,960
Mit akarok itt szeretnék kijavítani néhány problémát CS50 pénzügyminiszter.

617
00:36:38,960 --> 00:36:41,550
Tehát, ha megyünk finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
minden alkalommal, amikor szeretnénk, hogy egy idézet, azt kell kattintson erre a Get Idézet gomb,

619
00:36:45,700 --> 00:36:48,960
és hogy Árat lekérdez gombra, majd elvisz egy teljes oldalt.

620
00:36:48,960 --> 00:36:52,400
És ha azt akarom, egy idézet, azt kell, hogy elérje a Vissza gombot, és aztán azt írja,

621
00:36:52,400 --> 00:36:54,480
Kapok egy árajánlatot, és nyomja meg a Vissza gombot.

622
00:36:54,480 --> 00:36:56,840
Ez tényleg nem a legjobb felhasználói élményt.

623
00:36:56,840 --> 00:37:01,570
Ki igazán használom a helyszínen, ha ez lassan indul Stock árak?

624
00:37:01,570 --> 00:37:05,630
Szóval, mit akarunk kezdeni az AJAX távolítsa el, hogy a lépés lesz egy külön oldalon

625
00:37:05,630 --> 00:37:08,410
annak érdekében, hogy az eredményeket.

626
00:37:08,410 --> 00:37:11,240
>> Amit igazán csak kér, hogy valóban alacsony ár,

627
00:37:11,240 --> 00:37:14,240
és ez csak egy nagyon kis mennyiségű adat.

628
00:37:14,240 --> 00:37:17,400
Tehát nincs szükség, hogy menjek egy teljes HTML oldal,

629
00:37:17,400 --> 00:37:20,670
letölt egy teljesen új tétel HTML, talán le néhány képet,

630
00:37:20,670 --> 00:37:24,410
néhány egyéb CSS fájlokat csak nekem válaszolni, hogy igen egyszerű kérdést

631
00:37:24,410 --> 00:37:27,810
mennyi jelent ez állomány költségét.

632
00:37:27,810 --> 00:37:31,000
Az AJAX tudjuk, hogy ez egy sokkal könnyebb.

633
00:37:31,000 --> 00:37:36,400
Látjuk itt lent, hogy én vagyok összekapcsolása egy JavaScript nevű fájlt quote.js.

634
00:37:36,400 --> 00:37:40,140
Nézzük ténylegesen megnyitja a fájlt. Nem ott.

635
00:37:42,610 --> 00:37:45,860
Minden az én JavaScript fájlok lesznek található HTML

636
00:37:45,860 --> 00:37:47,630
úgy, hogy a böngésző elérheti.

637
00:37:47,630 --> 00:37:50,330
Aztán van egy külön könyvtárba itt JavaScript,

638
00:37:50,330 --> 00:37:54,340
és most itt quote.js.

639
00:37:54,340 --> 00:38:00,930
A tetején a fájl a azt mondja, hogy itt akarom várni a teljes oldal betöltése

640
00:38:00,930 --> 00:38:04,830
mielőtt megpróbálok semmit. Miért szükséges ez?

641
00:38:04,830 --> 00:38:08,650
Kiderül, hogy a következő dolog, fogok csinálni itt kezdeni egy elem

642
00:38:08,650 --> 00:38:10,810
amely megfelel bizonyos választó.

643
00:38:10,810 --> 00:38:15,600
Ha ez a JavaScript valaha is aláírni ezt az elemet betöltve az oldalon,

644
00:38:15,600 --> 00:38:17,820
akkor mindent megpróbálok csinálni nem fog működni

645
00:38:17,820 --> 00:38:20,580
mert én megpróbálom válassza ki valamit, ami nincs még.

646
00:38:20,580 --> 00:38:23,780
Szóval ez a felállás top mondja, azt akarom, hogy várjon, amíg minden be van töltve

647
00:38:23,780 --> 00:38:28,030
úgyhogy biztos, hogy minden olyan elemet, keresem valójában az oldalon.

648
00:38:29,730 --> 00:38:34,310
Ez a dollár jel itt azt jelenti, én vagyok a jQuery könyvtár neve.

649
00:38:34,310 --> 00:38:38,570
Ez a jQuery könyvtár lehetővé teszi számunkra, hogy ezeket a választókat, hogy csak nézett.

650
00:38:38,570 --> 00:38:44,010
Azáltal, mondván: $ aztán halad érvként az # form-idézet,

651
00:38:44,010 --> 00:38:47,910
Én most kiválasztása a formában, hogy csak volt egy pillantást.

652
00:38:47,910 --> 00:38:52,290
Most van egy képviselete a formában a memóriában valahogy.

653
00:38:52,290 --> 00:38:56,760
>> Ezen cél most e képviselet a forma,

654
00:38:56,760 --> 00:38:58,890
Én most egy függvényt felszólította.

655
00:38:58,890 --> 00:39:02,710
Mi ez a funkció nem ez fog csatolni eseménykezelő.

656
00:39:02,710 --> 00:39:06,310
Az esemény, hogy fogunk hallgatni a submit esemény.

657
00:39:06,310 --> 00:39:08,890
Tehát, ha a felhasználó rákattint, hogy a Küldés gombra, vagy megnyomja az Enter billentyűt,

658
00:39:08,890 --> 00:39:11,730
ez az esemény lesz a tüzet.

659
00:39:11,730 --> 00:39:16,390
Azáltal összejönni ebbe én most felülbírálja az alapértelmezett viselkedését az űrlapot.

660
00:39:16,390 --> 00:39:19,770
E nélkül a JavaScript, a nyomtatvány be bármilyen PHP fájl

661
00:39:19,770 --> 00:39:22,110
azt használják, hogy cselekvésre attribútum.

662
00:39:22,110 --> 00:39:25,440
De ahelyett, én most azt mondják, várj, várj, várj, én nem akarom, hogy tényleg csinálni.

663
00:39:25,440 --> 00:39:31,140
Azt akarom, hogy ez megtörténjen, mielőtt elmész, és próbálja nyújtson be néhány PHP fájlt.

664
00:39:31,140 --> 00:39:32,870
Most mit akarok csinálni?

665
00:39:32,870 --> 00:39:39,270
Ezen a ponton szeretném használni AJAX valahogy betölteni, amit az ár a készlet.

666
00:39:39,270 --> 00:39:44,170
Az első dolog, amit tudnod kell, amit készleten a felhasználó keresi fel.

667
00:39:44,170 --> 00:39:46,760
Ehhez fogom használni egy másik választó.

668
00:39:46,760 --> 00:39:49,020
Ez a harmadik választó néztük előtt.

669
00:39:49,020 --> 00:39:54,460
Ez azt mondja, hogy azt akarom, hogy elindul az űrlap elem egy ID-form-idézet.

670
00:39:54,460 --> 00:39:58,440
Aztán valahol az említett nyomtatvány lennie kell egy bemeneti elem

671
00:39:58,440 --> 00:40:01,270
hogy van egy név szimbólum.

672
00:40:01,270 --> 00:40:05,460
Ha visszatekintünk a mi HTML, láttuk, hogy volt egy input [name = symbol].

673
00:40:05,460 --> 00:40:12,380
Ez azt jelenti, hogy ez lesz, hogy kiválassza, hogy a szövegdoboz, hogy a felhasználó a gépelés.

674
00:40:12,380 --> 00:40:13,870
Ez szép. Megvan a szövegmezőbe.

675
00:40:13,870 --> 00:40:17,360
Most már csak meg kell tudni, hogy mi van benne.

676
00:40:17,360 --> 00:40:20,290
Ehhez nevezhetjük ezt a módszert itt ezt. Val,

677
00:40:20,290 --> 00:40:23,240
és ezt mondja, tudom, hogy mit szövegdoboz van.

678
00:40:23,240 --> 00:40:28,160
Azt akarom, hogy mondd el, mi ez a felhasználó beírt abba a mezőbe.

679
00:40:28,160 --> 00:40:34,440
Most van egy string nevű szimbólum, amely egyenlő amit a felhasználó beírt be

680
00:40:34,440 --> 00:40:39,820
Ez szép. Tudjuk használni, hogy a húr most, hogy kérésünkre.

681
00:40:39,820 --> 00:40:42,450
Ez egy új funkció van, ez a $,

682
00:40:42,450 --> 00:40:44,900
kivéve, mi már nem fognak kiválasztása elemet,

683
00:40:44,900 --> 00:40:48,910
fogunk hívni egy másik funkció, ami nyújtott nekünk jQuery.

684
00:40:48,910 --> 00:40:54,810
Ez a funkció AJAX mi valójában megy, hogy ezt a HTTP kérés.

685
00:40:54,810 --> 00:40:57,000
Tehát el kell mondani, hogy egy pár dolgot.

686
00:40:57,000 --> 00:41:01,410
Az első dolog, amit el kell mondani, ez a funkció, ha akarom a kérelem menni.

687
00:41:01,410 --> 00:41:08,910
Valahol a projektem van ez a fájl belsejében a HTML könyvtár nevű quote.php.

688
00:41:08,910 --> 00:41:15,150
Tudom elérni ezt a fájlt, láttuk, mint ez, ha elmegyek a localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Azt akarom, hogy JavaScript, hogy egy kérést az adott oldalra.

690
00:41:20,450 --> 00:41:22,920
Milyen típusú kérés most?

691
00:41:22,920 --> 00:41:27,210
Láttuk előtt, hogy a formának, hogy a method = "post" attribútumot,

692
00:41:27,210 --> 00:41:29,270
és ez azt jelenti, hogy megy, hogy a POST kérést,

693
00:41:29,270 --> 00:41:32,630
így nem fog tenni semmit az URL-címet, hanem a GET kérést,

694
00:41:32,630 --> 00:41:36,860
ami csak leadni, ha csak elérni az oldalt a böngésző, például.

695
00:41:36,860 --> 00:41:41,260
Most már azt mondta, szeretnék, hogy egy HTTP POST kérés

696
00:41:41,260 --> 00:41:44,840
egy oldalt található quote.php.

697
00:41:44,840 --> 00:41:51,490
Amikor az alábbi adatlapot, emlékszel tudtuk elérni a bemeneti elemek belsejében a formában

698
00:41:51,490 --> 00:41:54,430
az, hogy a $ _POST változó.

699
00:41:54,430 --> 00:41:58,710
Eddig a történet még nem ténylegesen elküldött mentén még adatok.

700
00:41:58,710 --> 00:42:00,640
Már csak annyit mondott tesszük egy AJAX kérés

701
00:42:00,640 --> 00:42:03,200
és itt van a kérés fajtája tesszük.

702
00:42:03,200 --> 00:42:07,090
Most arra van szükség, hogy ténylegesen küldeni néhány adatot az oldalra.

703
00:42:07,090 --> 00:42:10,930
Ehhez, hogy tudjuk használni ezt a tulajdonságot nevezett adatokat.

704
00:42:10,930 --> 00:42:14,950
A tulajdonság értéke valójában egy asszociatív tömb.

705
00:42:14,950 --> 00:42:19,390
Ennek az az oka az, hogy lehetővé teszi számunkra, hogy küldjön több, mint 1 darab adat.

706
00:42:19,390 --> 00:42:24,750
Ezért ezeket kapcsos zárójelek van beágyazva ezen egyéb kapcsos zárójelek.

707
00:42:24,750 --> 00:42:29,680
A kulcsokat e asszociatív tömbök lesz ugyanaz

708
00:42:29,680 --> 00:42:32,630
mint neve tulajdonítja a mi formában elemek.

709
00:42:32,630 --> 00:42:35,740
Ez azt jelenti, hogy ha küldök mentén kulcs szimbólum,

710
00:42:35,740 --> 00:42:41,870
azt jelenti, hogy a PHP oldalon érheti el az adatokat a $ _POST [szimbólum]

711
00:42:41,870 --> 00:42:44,640
mint tettük előtt, amikor mi voltunk benyújtása formában.

712
00:42:44,640 --> 00:42:47,090
És most a tényleges adatokat akarunk küldeni

713
00:42:47,090 --> 00:42:50,790
lesz értéke belsejében asszociatív tömb.

714
00:42:50,790 --> 00:42:54,070
>> Mi tárolt ez a szöveg egy változó nevű szimbólum,

715
00:42:54,070 --> 00:42:57,380
és így küldjük mentén mára kulcsfontosságú szimbólum

716
00:42:57,380 --> 00:43:01,380
és értéke függetlenül a felhasználó beírt be

717
00:43:01,380 --> 00:43:06,270
Most már tette ezt a HTTP kérés, a PHP fájl kivégezték,

718
00:43:06,270 --> 00:43:11,480
és ez fog küldeni néhány adatot most vissza az ügyfélnek, hogy csak tette ezt a kérést.

719
00:43:11,480 --> 00:43:15,220
Most meg kell válaszolni, amit a szerver mondott nekünk.

720
00:43:15,220 --> 00:43:20,180
Ehhez, hogy van ez utóbbi tulajdonság itt hívott siker.

721
00:43:20,180 --> 00:43:24,240
Az érték a siker kulcs valóban lesz egy függvény,

722
00:43:24,240 --> 00:43:26,910
és ez az egyik nagyon jó dolog, amit tehetünk a JavaScript programot.

723
00:43:26,910 --> 00:43:31,720
Nem csak, hogy ints, vagy tömbök értékként belsejében egy asszociatív tömb,

724
00:43:31,720 --> 00:43:34,170
mi is van egy funkciója.

725
00:43:34,170 --> 00:43:36,380
Tehát azzal, hogy siker, ez a kulcs.

726
00:43:36,380 --> 00:43:38,830
A kettőspont mondja itt jön az érték,

727
00:43:38,830 --> 00:43:41,810
és most az értéke ez valójában egy függvény.

728
00:43:41,810 --> 00:43:44,460
Tehát nem kell, hogy ezt a funkciót a nevet önmagában.

729
00:43:44,460 --> 00:43:48,820
Mi csak azt mondom ez lesz néhány funkciót. Ez fog tartani 1 érvet.

730
00:43:48,820 --> 00:43:51,190
Az az érv, hogy ez a funkció lesz

731
00:43:51,190 --> 00:43:54,460
függetlenül a szerver küldött minket vissza a kérelmet.

732
00:43:54,460 --> 00:43:57,750
Mint amikor a böngésző kér, a szerver küld valamit

733
00:43:57,750 --> 00:43:59,060
és a böngésző megjeleníti,

734
00:43:59,060 --> 00:44:03,030
összefüggésben AJAX már csak kérelmet, a szerver küldött valamit,

735
00:44:03,030 --> 00:44:07,110
és most már, hogy a képviselők, mint egy húr.

736
00:44:07,110 --> 00:44:11,280
Ezzel húr szeretném megjeleníteni, hogy az oldalon.

737
00:44:11,280 --> 00:44:14,040
Ehhez fogok még egy utolsó választó.

738
00:44:14,040 --> 00:44:17,570
Azt akarom, hogy jelölje ki az elemet az ID ár.

739
00:44:17,570 --> 00:44:20,710
Ez csak egy üres div, hogy már létrehozott az oldalon,

740
00:44:20,710 --> 00:44:26,640
és szeretném beállítani a tartalmát, div, hogy amit a szerver küldött minket vissza.

741
00:44:26,640 --> 00:44:30,280
Én tulajdonképpen módosított quote.php egy kicsit.

742
00:44:30,280 --> 00:44:33,460
>> Ahelyett, hogy hívó render, és teszi néhány oldal,

743
00:44:33,460 --> 00:44:38,100
quote.php most egyszerűen megy, hogy nyomtassa ki az értékét az állomány, mint egy húr.

744
00:44:38,100 --> 00:44:41,880
Tehát, ha úgy döntesz, hogy valóban látogassa meg az oldalt, akkor csak látni, hogy a kis húr

745
00:44:41,880 --> 00:44:45,030
bármilyen a részvény ára is.

746
00:44:45,030 --> 00:44:50,170
Még egy utolsó dolog, amit tennie kell, itt csak arról a függvény false.

747
00:44:50,170 --> 00:44:53,560
Mi ez azt mondja, hogy ha én vagyok belsejében egy eseménykezelő

748
00:44:53,560 --> 00:44:57,300
és eseménykezelő false visszatérés helyett igaz,

749
00:44:57,300 --> 00:45:01,510
azt jelenti, hogy nem akarom az eredeti eseményt a tüzet.

750
00:45:01,510 --> 00:45:05,270
Ebben az esetben, ha nem rendelkezik a JavaScript és adtunk be egy űrlapot,

751
00:45:05,270 --> 00:45:08,280
web böngésző fogja mondani: "Én fogom küldeni az adatokat együtt,"

752
00:45:08,280 --> 00:45:10,130
és ők fognak küldeni egy másik oldalra.

753
00:45:10,130 --> 00:45:14,360
Mert mi AJAX most nincs szükség, hogy küldjön a felhasználót egy másik oldalra.

754
00:45:14,360 --> 00:45:17,920
Mi csak megy, hogy megjelenítse a találatok dinamikus ezen az ugyanazon az oldalon.

755
00:45:17,920 --> 00:45:21,460
Tényleg nem akarom, hogy megy sehova, és szeretnék maradni ugyanazon az oldalon.

756
00:45:21,460 --> 00:45:27,060
Tehát visszatérve a hamis, mi biztosítja, hogy a forma nem teszi azt számunkra.

757
00:45:27,060 --> 00:45:31,170
Vessünk egy pillantást, hogy ez mit néznek ki.

758
00:45:31,170 --> 00:45:34,180
A quote oldal ugyanúgy néz ki.

759
00:45:34,180 --> 00:45:37,240
Hadd húzza fel az ellenőr le ide, hogy lássuk, mi történik.

760
00:45:37,240 --> 00:45:40,270
Legyen egy kicsit kevésbé nagy.

761
00:45:40,270 --> 00:45:44,590
Ne feledje, ha megnyitja a Hálózat fülre, ez az, ahol láthatjuk az összes HTTP kérések

762
00:45:44,590 --> 00:45:47,570
történnek az oldalon.

763
00:45:47,570 --> 00:45:52,890
>> Egy szimbólum hadd írja AAPL és kattintson Árat lekérdez.

764
00:45:52,890 --> 00:45:56,720
Most láttuk, hogy egy részét az Apple költségek bizonyos számú dollárt

765
00:45:56,720 --> 00:46:00,410
csak megjelent az oldalon, de az URL nem változott.

766
00:46:00,410 --> 00:46:04,570
Tény, hogy itt van a HTTP kérés, amit most tett.

767
00:46:04,570 --> 00:46:09,980
Készítettünk egy POST kérés quote.php. Ennek van értelme.

768
00:46:09,980 --> 00:46:12,800
Ez az, amit a szerver küldött minket vissza.

769
00:46:12,800 --> 00:46:16,320
Ez már nem a hatalmas HTML dokumentum képeket és ilyesmi,

770
00:46:16,320 --> 00:46:20,920
ez csak egy sor szöveget, majd mi csak megjelenik a sort.

771
00:46:20,920 --> 00:46:26,290
Ha visszamegyünk a fejlécek és látjuk meg azt amink valójában elküldött belsejében HTTP kérés,

772
00:46:26,290 --> 00:46:33,950
láthatjuk itt lent, hogy küldött mentén kulcs szimbólum és értéke AAPL,

773
00:46:33,950 --> 00:46:36,430
ami az, amit a felhasználó beírt be

774
00:46:36,430 --> 00:46:39,230
Ez szép és jó, de ez még mindig egy kicsit bosszantó.

775
00:46:39,230 --> 00:46:42,490
Még mindig van, hogy kattintson erre a gombra, hogy az állomány idézet.

776
00:46:42,490 --> 00:46:45,880
Vagyunk elfoglalt emberek, és nincs ideje, hogy kattintson a gombok.

777
00:46:45,880 --> 00:46:49,910
A Google felismerte ezt egy kicsit ezelőtt, amikor végre a Google Instant.

778
00:46:49,910 --> 00:46:53,590
Mit Google Instant csinál, mint te, hogy csak elkezd gépelés eredmények megjelenítéséhez Önnek

779
00:46:53,590 --> 00:46:56,520
így nem kell aggódnia, sőt kattintva Search.

780
00:46:56,520 --> 00:46:58,730
Igazából, egy jó történet kapcsolódik ehhez.

781
00:46:58,730 --> 00:47:01,100
Ha a Google Instant kijött, az emberek olyanok voltak, mint: "Hé, ez szuper lenyűgöző."

782
00:47:01,100 --> 00:47:02,540
"Ez annyira jó."

783
00:47:02,540 --> 00:47:05,950
És egy diák le Stanford, aki 19 éves volt abban az időben

784
00:47:05,950 --> 00:47:09,000
tette ezen az oldalon az úgynevezett YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Minden YouTube Instant nem hatékonyan keresni YouTube azonnal.

786
00:47:13,170 --> 00:47:17,020
Tehát ahelyett, hogy menjen a YouTube.com és megüt Search,

787
00:47:17,020 --> 00:47:21,650
ha elkezdek gépelni a YouTube Instant valami ilyesmit CS50,

788
00:47:21,650 --> 00:47:25,320
láttuk, hogy itt ez próbál egy lassú internetkapcsolat

789
00:47:25,320 --> 00:47:28,500
népességnövekedés ezeket az eredményeket él.

790
00:47:28,500 --> 00:47:35,590
Ehhez mi is valójában, hogy egy nagyon egyszerű módosítását a quote.js fájlt.

791
00:47:35,590 --> 00:47:40,900
Most vagyunk fűződő ez az esemény, ha az űrlap elküldése.

792
00:47:40,900 --> 00:47:43,760
Nem igazán akar, hogy a felhasználó azt állítják, hogy formában többé,

793
00:47:43,760 --> 00:47:48,570
úgyhogy inkább tüzet ez az esemény minden alkalommal, amikor a felhasználó megnyomja a gombot.

794
00:47:48,570 --> 00:47:53,200
Ehhez Nézzük először módosítsa az esemény be keyup.

795
00:47:53,200 --> 00:47:55,740
Ez azt jelenti, hogy ahelyett, hogy várja az űrlap benyújtására,

796
00:47:55,740 --> 00:47:58,490
minden alkalommal, amikor a gombot megnyomja, valami történni fog.

797
00:47:58,490 --> 00:48:02,030
Már nem értelme, hogy csatolja ezt keyup esemény az egész űrlapot.

798
00:48:02,030 --> 00:48:05,080
Igazán csak az érdekel, hogy a keresési mezőbe.

799
00:48:05,080 --> 00:48:09,320
>> Annak kiválasztásához, hogy most, meg tudjuk változtatni, hogy ez helyett form-idézet,

800
00:48:09,320 --> 00:48:14,220
form-idézet, és mi van egy input (type = text), vagy mondhatnánk (név = jel) -

801
00:48:14,220 --> 00:48:16,420
amit akarunk.

802
00:48:16,420 --> 00:48:18,650
Most van egy utolsó dolog, amit meg kell tennünk.

803
00:48:18,650 --> 00:48:21,190
Emlékszel le itt, amikor azt mondtuk, return false

804
00:48:21,190 --> 00:48:24,370
azt mondta, hogy nem akarja, hogy az alapértelmezett eseményt a tüzet.

805
00:48:24,370 --> 00:48:26,390
De ez csak azért történik, hogy ha letiltja, hogy most,

806
00:48:26,390 --> 00:48:29,660
bármit is írja nem fog megjelenni a böngészőben már

807
00:48:29,660 --> 00:48:33,000
mert ez az alapértelmezett viselkedését gépelés egy szövegmezőbe.

808
00:48:33,000 --> 00:48:38,660
Már nem szeretné felülírni, hogy úgyhogy elpusztítani ezt a return false.

809
00:48:38,660 --> 00:48:44,800
Ha azt kivéve, hogy és újratölti az oldalt, most, amikor elkezdek gépelni AAPL

810
00:48:44,800 --> 00:48:50,160
látni fogod, hogy a részvényárfolyam alján itt kitöltésével automatikusan.

811
00:48:50,160 --> 00:48:53,150
Tehát itt van CS50 Finance Instant.

812
00:48:53,150 --> 00:48:55,860
Valójában egy jó történetet, ami a YouTube Instant

813
00:48:55,860 --> 00:48:59,420
az, hogy a diákok csak egyfajta írt, mint egy 1-éjszakára projekt,

814
00:48:59,420 --> 00:49:03,800
és a következő napon, amikor állásajánlatot a YouTube vezérigazgatója.

815
00:49:03,800 --> 00:49:10,610
Szóval, olyan egyszerű, mint, te CS50 diákok, a végső projektek neked munkát YouTube.

816
00:49:10,610 --> 00:49:14,720
Valami ilyesmi ez egy nagyon klassz ötlet egy projekt végső, igaz?

817
00:49:14,720 --> 00:49:18,170
Volt néhány meglévő funkciókat akarunk integrálni.

818
00:49:18,170 --> 00:49:20,330
Mi javítja a felhasználói élményt egy kicsit,

819
00:49:20,330 --> 00:49:24,340
és hirtelen keres valamit a YouTube Instant lehet, hogy sokkal könnyebb

820
00:49:24,340 --> 00:49:27,290
mint keresni azt rendszeresen YouTube-on.

821
00:49:27,290 --> 00:49:30,790
Szóval ez AJAX dióhéjban.

822
00:49:30,790 --> 00:49:34,860
>> A példákban hogy Joseph mutatott, láttunk egy csomó automatikus kiegészítéshez,

823
00:49:34,860 --> 00:49:39,250
és az automatikus kiegészítéshez nagyon, nagyon praktikus, mert nem kell emlékezni -

824
00:49:39,250 --> 00:49:41,770
Például, ha nem emlékszik a részvényárfolyam az Apple

825
00:49:41,770 --> 00:49:45,110
és mi csak tudjuk, hogy ez aa valamit, ahelyett, hogy csak azt mondja nekem,

826
00:49:45,110 --> 00:49:48,740
"Egy részét ez a dolog kerül a sok pénz"

827
00:49:48,740 --> 00:49:52,540
Azt a fajta szeretném tudni, hogy mi állományok kezdődik aa.

828
00:49:52,540 --> 00:49:58,340
Meg tudjuk csinálni, hogy tényleg szépen a Bootstrap könyvtár, ami már szerepelt

829
00:49:58,340 --> 00:50:01,380
belül CS50 pénzügyminiszter.

830
00:50:01,380 --> 00:50:09,390
Ha jön ide, hogy a JavaScript tag, és görgessen Typeahead,

831
00:50:09,390 --> 00:50:13,730
ez csak egy szép plugin, hogy valaki már írt nekünk,

832
00:50:13,730 --> 00:50:16,980
, és könnyen használható a funkcionalitás, mint ez.

833
00:50:16,980 --> 00:50:21,410
I beírt egy A, és itt van egy lista egyes államok kezdődő A.

834
00:50:21,410 --> 00:50:25,360
Tegyük fel, hogy azt hiszem, ez nagyon jó, és itt az ideje, hogy ezt a az oldalamon.

835
00:50:25,360 --> 00:50:28,300
Kiderül, hogy ez nagyon, nagyon egyszerű.

836
00:50:28,300 --> 00:50:32,810
Nézzük átugrani ide quote3.js.

837
00:50:34,890 --> 00:50:37,380
A fájl így néz egy kicsit más.

838
00:50:37,380 --> 00:50:39,700
Itt lent minden az én AJAX cucc ugyanaz.

839
00:50:39,700 --> 00:50:43,170
Akarom tölteni az állomány adatokat anélkül, hogy menjen a másik oldalra.

840
00:50:43,170 --> 00:50:46,220
De most szeretném használni ezt a plugin.

841
00:50:46,220 --> 00:50:51,020
A Bootstrap dokumentáció nagy példa arra, hogyan pontosan meg tudom csinálni ezt.

842
00:50:51,020 --> 00:50:54,350
Azt akarom mondani, hogy "Itt a bemeneti hogy szeretnék autocomplete on"

843
00:50:54,350 --> 00:50:56,640
és én fogom hívni ezt a funkciót nevezik typeahead,

844
00:50:56,640 --> 00:50:59,730
és ez fog kezelni minden Typeahead dolgot nekünk.

845
00:50:59,730 --> 00:51:02,090
Ez inicializálja a listát, akkor mindent megtesz a mi szűrés.

846
00:51:02,090 --> 00:51:06,680
Az egyetlen dolog, amit meg kell tudni, milyen adatokat vagyunk automatikusan kiegészülő tovább.

847
00:51:06,680 --> 00:51:10,480
Szóval kiderült, ez a kulcs csak elolvassa a dokumentációt, és nézi a példákat.

848
00:51:10,480 --> 00:51:14,150
Ha én, hogy ez egy alapvető forrás az érték e kulcsfontosságú

849
00:51:14,150 --> 00:51:17,770
csak néhány tömb dolgot szeretnék autocomplete be.

850
00:51:17,770 --> 00:51:20,180
Ez a változó jött ez a másik fájlt.

851
00:51:20,180 --> 00:51:23,400
Én nyit symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Ez symbols.js csak ez tényleg, igazán nagy tömböt húrok

853
00:51:27,980 --> 00:51:32,080
Mindezen tőzsdei szimbólumokat a NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Ha azt szeretnénk, hogy ugrik vissza a HTML, ezért jharvard, vhostokat, globalhost, html, sablonok,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Mivel ez most hívott quote3.js, hadd módosítsa a JavaScript fájlt vagyok köztük van.

857
00:51:50,910 --> 00:51:55,110
Most már quote3.js, így fogom tölteni, hogy külön JavaScript fájl,

858
00:51:55,110 --> 00:51:57,910
Az egyik, hogy azt Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Most, mikor ugrik vissza a böngésző, töltse be újra az oldalt, majd elkezdek gépelni aa,

860
00:52:04,430 --> 00:52:06,880
ott van az én automatikus kiegészítés. És ez tényleg ennyire egyszerű.

861
00:52:06,880 --> 00:52:11,400
Volt 1 sor kódot, hogy csak azt mondta: "Itt van a dolog, szeretnék autocomplete on"

862
00:52:11,400 --> 00:52:16,590
és hirtelen én ezt nagyon, nagyon szép funkcionalitást nem egy csomó erőfeszítést egyáltalán.

863
00:52:16,590 --> 00:52:19,810
Ahogy te weboldalak fejlesztése és különösen az elülső oldala a dolgoknak,

864
00:52:19,810 --> 00:52:21,840
fogod találni ez a helyzet sokat.

865
00:52:21,840 --> 00:52:25,700
Sok, sok, sok nagyon klassz szabad könyvtárak ott

866
00:52:25,700 --> 00:52:30,190
hogy teszi szuper könnyű csinálni a dolgokat, mint ez.

867
00:52:30,190 --> 00:52:37,230
Tud valaki mondani olyan hátránya csupán automatikusan kiegészülő e nagy lista a szimbólumok?

868
00:52:37,230 --> 00:52:41,580
Mi lehet valami, hogy nem ez a legjobb ezt a megközelítést?

869
00:52:42,790 --> 00:52:45,960
Igen. >> [Hallgató] Idő, ha van egy csomó [hallható]

870
00:52:45,960 --> 00:52:50,420
Igen. Most mi le ezt a hatalmas JavaScript fájlt, és van egy csomó a szimbólumok.

871
00:52:50,420 --> 00:52:54,360
És ha van egy csomó dolog, ez a fajta növeli a látencia nem csak keres

872
00:52:54,360 --> 00:52:56,600
hanem le az aktuális fájlt.

873
00:52:56,600 --> 00:52:58,670
Remek. Még valami?

874
00:53:01,950 --> 00:53:05,280
Most nincs igazi értelemben vett jelentősége.

875
00:53:05,280 --> 00:53:08,190
Ha egy A típusú, a vállalatok, amelyek azt mutatják ide

876
00:53:08,190 --> 00:53:11,220
Lehet, hogy nem a legnépszerűbb cégek kezdeni A.

877
00:53:11,220 --> 00:53:17,130
>> Mielőtt kapok az Apple, ez eltart még néhány karaktert, hogy megtalálja, amit keresek.

878
00:53:17,130 --> 00:53:20,420
Ez autocomplete nem ebben az értelemben a jelentősége.

879
00:53:20,420 --> 00:53:24,400
Ez csak megy, azt mondja: "Bármi, ami megfelel fogok megjeleníteni."

880
00:53:24,400 --> 00:53:30,510
Ahelyett, hogy szeretnék valahogy integrálni némi relevanciával az én keresést.

881
00:53:30,510 --> 00:53:36,440
Ha elmegyek ide a Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Ha megpróbálom, adjon meg egy jel Yahoo! Finance oldalán

883
00:53:42,100 --> 00:53:52,310
és elkezdek gépelni goog, van ez a szép listát azokról a dolgokról.

884
00:53:52,310 --> 00:53:57,100
Egyértelmű, hogy úgy néz ki, mint a Yahoo! Finance csinál valami okos itt.

885
00:53:57,100 --> 00:53:59,790
Van néhány relevanciáját és ők is további információkat

886
00:53:59,790 --> 00:54:01,430
mint a neve az állomány.

887
00:54:01,430 --> 00:54:05,850
Ez olyasmi, amit nem lehet igazán az csak az én Stock szimbólumok listáját.

888
00:54:05,850 --> 00:54:09,520
Azt akarom, hogy ez így fogom, hogy vegye.

889
00:54:09,520 --> 00:54:11,790
Ehhez Csináljuk néhány dolgot.

890
00:54:11,790 --> 00:54:15,580
Nézzük először megnyitja az ellenőr ezen az oldalon

891
00:54:15,580 --> 00:54:18,100
mert láttuk, hogy ez az oldal nem átrakodás egyáltalán,

892
00:54:18,100 --> 00:54:21,960
így ez valószínűleg a AJAX valahogy be kell betölteni az adatokat.

893
00:54:21,960 --> 00:54:23,920
Tudjuk kideríteni milyen adatokat ez betöltődött.

894
00:54:23,920 --> 00:54:28,390
Ha kattintson erre a Network fülre, ezek lesznek az összes kéri, hogy indítsa be kell rúgni.

895
00:54:28,390 --> 00:54:34,020
Most, ha azt írja be a ragacs, azt látjuk, hogy most kaptam egy új HTTP-kérelmet.

896
00:54:34,020 --> 00:54:37,490
Ez valószínűleg, ha az adatok jön.

897
00:54:37,490 --> 00:54:41,990
Persze elég, ha megnézi az URL, ami egy kicsit furcsa nevű,

898
00:54:41,990 --> 00:54:46,930
láthatjuk, hogy ez pontosan hol Yahoo küld ki az adatokat.

899
00:54:46,930 --> 00:54:53,400
>> Létrehoztam egy külön fájlba nevű suggest.php ami nagyon hasonló szellemben, hogy a keresési funkciót.

900
00:54:53,400 --> 00:54:57,730
Ez alapvetően megy, hogy a lekérdezés Yahoo URL-jét, gyere vissza néhány adat,

901
00:54:57,730 --> 00:54:59,750
és küldje vissza nekem.

902
00:54:59,750 --> 00:55:02,570
Most ahelyett, hogy ezzel a nagy, hatalmas a szimbólumok listáját,

903
00:55:02,570 --> 00:55:05,280
Tudom használni a Yahoo szép vonatkozású dolgokat,

904
00:55:05,280 --> 00:55:08,150
és nem kell letölteni, hogy a tömeges JavaScript fájlt.

905
00:55:08,150 --> 00:55:12,040
Én csak megy húzza le a ténylegesen érintett tőzsdei szimbólumokat.

906
00:55:12,040 --> 00:55:13,960
Nézzük ugorj bele.

907
00:55:13,960 --> 00:55:17,360
Szóval html, js. Vagyunk most quote4.

908
00:55:17,360 --> 00:55:22,120
Most már nem használja azt a nagy listája JavaScript fájlokat.

909
00:55:22,120 --> 00:55:24,430
De van egy kis egyfajta tervezési probléma itt.

910
00:55:24,430 --> 00:55:28,200
Már mondta, hogy az A. AJAX aszinkron.

911
00:55:28,200 --> 00:55:31,000
Ez azt jelenti, hogy amikor én, hogy egy AJAX kérés,

912
00:55:31,000 --> 00:55:36,490
így itt a sorban 8, ez az, ahol én AJAX kérés valóban kirúgták.

913
00:55:36,490 --> 00:55:40,370
Tegyük fel, hogy most már van egy kódot le, hogy itt fog tenni néhány dolgot

914
00:55:40,370 --> 00:55:43,930
mint figyelmezteti a felhasználót, vagy valami változás az oldalon.

915
00:55:43,930 --> 00:55:49,830
Mi nem fog megtörténni a böngésző nem fog várni a kéréshez, hogy továbbra is

916
00:55:49,830 --> 00:55:53,480
mielőtt jön le, és üti ezt a sort.

917
00:55:53,480 --> 00:55:55,900
Ez az aszinkron része.

918
00:55:55,900 --> 00:55:58,400
Ez megy, hogy ezt a kérést, és azt mondja: "Amikor befejezte,

919
00:55:58,400 --> 00:56:03,080
"Gyere vissza, és hívja ezt a funkciót, hogy én mondtam, hogy hívja belül a siker."

920
00:56:03,080 --> 00:56:07,300
Ez azt jelenti, hogy nem lehet csak letölteni az összes állomány előre.

921
00:56:07,300 --> 00:56:10,300
Meg kell tenni a kérelmet, és várja, hogy valami jöjjön vissza.

922
00:56:10,300 --> 00:56:13,330
Ez azt jelenti, hogy mielőtt, akkor egyszerűen megmondani Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Itt van a lista azokról a dolgokról azt akarom, hogy autocomplete on."

924
00:56:15,580 --> 00:56:18,950
Azt már nem tudja csinálni, mert már nem tudjuk

925
00:56:18,950 --> 00:56:21,780
mit akarunk valójában autocomplete be.

926
00:56:21,780 --> 00:56:25,190
Szerencsére Bootstrap gondoltam, mert ezek okos srácok ott,

927
00:56:25,190 --> 00:56:30,160
és tényleg adtak egy másik módja betölteni ezt Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Előtt, az értéke forrás ingatlan csak a nagy tömb dolgokat autocomplete be.

929
00:56:35,630 --> 00:56:39,580
>> Most a forrás objektum valójában egy függvény,

930
00:56:39,580 --> 00:56:44,580
és a célja ennek a funkciónak, hogy kitaláljuk, mi a dolog, hogy autocomplete on vannak.

931
00:56:44,580 --> 00:56:48,730
Ez úgy megy, hogy kitaláljuk, hogy ki ez fog kérni Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
mi a legjobb dolog, hogy autocomplete vannak.

933
00:56:51,750 --> 00:56:54,500
Ehhez fogok, hogy egy nagyon hasonló AJAX kérés.

934
00:56:54,500 --> 00:56:59,010
Fogom kérni ezt az oldalt a suggest.php.

935
00:56:59,010 --> 00:57:01,360
Szeretném küldeni mentén a szimbólumok is.

936
00:57:01,360 --> 00:57:05,570
És most a siker, a Bootstrap dokumentáció mondta

937
00:57:05,570 --> 00:57:09,130
hogy annak érdekében, hogy a népességnövekedés listát azokról a dolgokról,

938
00:57:09,130 --> 00:57:14,370
csak annyit kell tennie, hogy adja át az e tömb most a visszahívási funkciót.

939
00:57:14,370 --> 00:57:15,660
De várjunk csak egy percet.

940
00:57:15,660 --> 00:57:20,240
Ha ez állítólag egy tömb, és AJAX küld vissza szöveget,

941
00:57:20,240 --> 00:57:22,720
hogyan lehetséges ez?

942
00:57:22,720 --> 00:57:27,910
Ez egy új módja adatcsere nevezett JSON.

943
00:57:27,910 --> 00:57:33,000
Ebben az esetben mi nem csak küld vissza egy egyszerű szöveges karakterláncot.

944
00:57:33,000 --> 00:57:37,670
Most már foglalkozik ezzel a bonyolultabb listát tőzsdei szimbólumokat.

945
00:57:37,670 --> 00:57:41,730
Ezek a tőzsdei szimbólumokat is, olyanok, mint a cég neve vagy az aktuális árakat.

946
00:57:41,730 --> 00:57:47,550
Csak egy nagy, hosszú karakterlánc, ami nem formázott semmilyen kiszámítható módon

947
00:57:47,550 --> 00:57:51,970
Nem lesz a legjobb módja annak, hogy ezen adatok Yahoo szerver nekem

948
00:57:51,970 --> 00:57:54,540
oly módon, hogy azt könnyen megértse.

949
00:57:54,540 --> 00:58:01,280
JSON olyan technológia, amely kihasználja, hogy hogyan hozunk létre asszociatív tömbök a JavaScript.

950
00:58:01,280 --> 00:58:04,510
Ez úgy néz ki, mint egy JavaScript asszociatív tömb,

951
00:58:04,510 --> 00:58:06,600
és valóban, ez azért van, mert van.

952
00:58:06,600 --> 00:58:09,710
JSON rövidítése JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Ez alapvetően egy egyeztetett formátumban adatátvitel oda-vissza.

954
00:58:15,020 --> 00:58:18,280
Itt a JSON objektumot vagy e JSON asszociatív tömb

955
00:58:18,280 --> 00:58:21,010
küld nekem néhány adatot egy tanfolyamot.

956
00:58:21,010 --> 00:58:25,110
>> A kulcsok Ennek a tömbnek ilyesmi persze, hogy van értéke CS50,

957
00:58:25,110 --> 00:58:29,140
és itt lent látjuk, hogy tudok olyan érték, amely egy tömb.

958
00:58:29,140 --> 00:58:32,730
Nem tudom, hogy a dolgokat, mint a parse ki húrok és keresse vessző

959
00:58:32,730 --> 00:58:35,330
és nem őrült ilyesmi.

960
00:58:35,330 --> 00:58:38,820
Mivel a bejelentett e JSON formátumban,

961
00:58:38,820 --> 00:58:43,510
JavaScript és jQuery már funkciókat konvertálni egy string

962
00:58:43,510 --> 00:58:48,140
úgy néz ki, mint ez JSON egy tényleges JavaScript asszociatív tömbben

963
00:58:48,140 --> 00:58:50,440
hogy tudunk együtt dolgozni.

964
00:58:50,440 --> 00:58:56,660
Doing, hogy olyan egyszerű, mint azt mondta, hogy már nem ez a fájl, suggest.php,

965
00:58:56,660 --> 00:58:59,040
küld vissza csupán egy sor szöveget,

966
00:58:59,040 --> 00:59:01,950
de tudom, hogy fog küldeni vissza JSON.

967
00:59:01,950 --> 00:59:06,760
Ez azt jelenti, hogy ez a JSON alakítható egy JavaScript asszociatív tömb.

968
00:59:06,760 --> 00:59:10,830
És így jQuery, szeretném ha megtennél nekem.

969
00:59:10,830 --> 00:59:13,990
Ez azt jelenti, hogy ez a válasz a paraméter van,

970
00:59:13,990 --> 00:59:16,070
ez már nem csak egy string.

971
00:59:16,070 --> 00:59:19,860
Mert mondtam jQuery, hogy itt jön néhány JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery lesz okos ahhoz, hogy azt mondják: "Te akartad JSON?"

973
00:59:22,950 --> 00:59:26,890
"Én fogom alakítani, hogy egy asszociatív tömb neked."

974
00:59:26,890 --> 00:59:32,100
Nézzünk ténylegesen vessünk egy pillantást a Hálózat fülre, ha van quote4.js.

975
00:59:32,100 --> 00:59:35,400
Fogjuk változtatni és újratölti az oldalt.

976
00:59:37,150 --> 00:59:41,250
Most megyek, hogy írja be egy-egy újra.

977
00:59:41,250 --> 00:59:45,600
Csináltam egy pár kérelmet suggest.php, de most ezt a választ,

978
00:59:45,600 --> 00:59:48,670
ahelyett, hogy csak a szöveg, ez JSON.

979
00:59:48,670 --> 00:59:52,580
Szóval van egy nyitott kapcsos zárójel mondván: "Itt jön egy asszociatív tömb."

980
00:59:52,580 --> 00:59:56,830
>> Az első és egyetlen kulcsfontosságú e asszociatív tömb hívják szimbólumok,

981
00:59:56,830 --> 01:00:00,240
és akkor itt van egy tömb összes releváns jelek

982
01:00:00,240 --> 01:00:04,820
jön most a Yahoo! Finance, nem pedig, hogy a gigantikus listáról.

983
01:00:06,110 --> 01:00:10,630
Így tudok csak feltölteni ezt autocomplete bővítmény

984
01:00:10,630 --> 01:00:14,280
bizonyos adatokat nem jön egy helyi fájlt, amely már előre

985
01:00:14,280 --> 01:00:17,490
hanem valami mást.

986
01:00:17,490 --> 01:00:21,160
Kiderül, hogy mi is valójában kihasználni a technológia az úgynevezett JSONP,

987
01:00:21,160 --> 01:00:27,420
vagy JSON béléssel, hogy megszünteti ezt suggest.php közvetítő.

988
01:00:27,420 --> 01:00:34,010
De ahelyett, hogy menjünk inkább nézd meg, hogyan lehet javítani ezen még.

989
01:00:34,010 --> 01:00:36,040
Nagyon szeretem a Bootstrap Typeahead. Ez tényleg szép.

990
01:00:36,040 --> 01:00:39,570
De mi megvagyunk jó JavaScript és azt akarjuk, hogy a fajta erre magunkat,

991
01:00:39,570 --> 01:00:43,870
talán nézd meg, mi ez a plugin lehet csinál.

992
01:00:43,870 --> 01:00:46,500
Nézzünk már nem használja azt Typeahead dolog,

993
01:00:46,500 --> 01:00:50,550
és próbáljuk meg, hogy ezt a listát a javasolt állományok magunkat.

994
01:00:50,550 --> 01:00:53,790
Itt quote6.php fogunk indulni, ugyanúgy.

995
01:00:53,790 --> 01:00:58,050
Minden alkalommal, amikor valaki beírja valamit, azt akarjuk, hogy egy AJAX kérés.

996
01:00:58,050 --> 01:01:01,590
Ez hasonló az eredeti CS50 Finance Instant.

997
01:01:01,590 --> 01:01:05,020
Ahelyett, hogy egy kérelmet quote.php,

998
01:01:05,020 --> 01:01:08,530
vagyunk most, hogy egy kérelmet nyújtott be ugyanabba a fájlba, mint korábban, ez suggest.php,

999
01:01:08,530 --> 01:01:12,460
amely csak megy, hogy húzza az adatokat Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Ismét, még mindig vár JSON, de most, mivel a Typeahead nem ezt nekünk,

1001
01:01:19,480 --> 01:01:24,850
azt is meg kell küldeni mentén, az érték, amely belül van az aktuális mezőbe.

1002
01:01:24,850 --> 01:01:28,120
Most már tudom, hogy mit kér a Yahoo! Finance,

1003
01:01:28,120 --> 01:01:34,160
és most itt van a funkció, hogy szeretnénk végrehajtani, ha a kérelmet befejeződik.

1004
01:01:34,160 --> 01:01:36,520
Nem kell a plugin, hogy a listát a számunkra,

1005
01:01:36,520 --> 01:01:40,630
így itt, ahol vagyunk valójában fog építeni egy listát a javaslatokat.

1006
01:01:40,630 --> 01:01:44,850
Ehhez nagyon hasonló a PHP-ben is láncolt ezek a nagy karakterláncok HTML

1007
01:01:44,850 --> 01:01:48,170
akkor nyomtatott őket, meg tudjuk csinálni pontosan ugyanolyan dolog a JavaScript programot.

1008
01:01:48,170 --> 01:01:51,850
Gyártási fogunk indulni a húr nevezett javaslatokat,

1009
01:01:51,850 --> 01:01:54,590
és ez a szöveg csak megy, tartalmaz néhány HTML.

1010
01:01:54,590 --> 01:01:58,320
Azt akarjuk, hogy legyen egy listát azokról a dolgokról, ezért fogunk elindul ez a lista tag,

1011
01:01:58,320 --> 01:02:03,340
és most megyünk navigálhat az összes a szimbólumok, amelyek visszatértek hozzánk.

1012
01:02:03,340 --> 01:02:06,500
Ne felejtse el, mert már azt mondta adattípus: "json", ez nem egy string.

1013
01:02:06,500 --> 01:02:09,500
Ez már egy tömb számunkra. Ez nagyon klassz.

1014
01:02:09,500 --> 01:02:13,790
Mi egyszerűen azt mondja: "Azt akarom, hogy hozzáfűzni egy listát elem."

1015
01:02:13,790 --> 01:02:16,000
Majd helyezze belül egy olyan elem oldalát, hogy a

1016
01:02:16,000 --> 01:02:19,030
fogjuk, hogy ez egy osztály a javaslatot, így tudjuk, hogy mi ez,

1017
01:02:19,030 --> 01:02:23,880
és most itt van a jel, hogy mi van vissza a Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Egyszer hoztunk létre eleme az egyes szimbólumok általunk ütött vissza,

1019
01:02:27,230 --> 01:02:30,100
mi csak szeretnénk, hogy zárja le a listáról.

1020
01:02:30,100 --> 01:02:33,040
Tehát most javaslatok képviseli ezt a kis HTML fragmens

1021
01:02:33,040 --> 01:02:37,860
hogy ha hozott egy oldal lesz a listát azokról a dolgokról, amit keresünk.

1022
01:02:37,860 --> 01:02:41,070
Most ténylegesen, hogy az oldalon.

1023
01:02:41,070 --> 01:02:46,390
Ehhez én már valóban létre egy üres div, és én adtam ez egy ID-javaslatokat.

1024
01:02:46,390 --> 01:02:52,520
Hasonlóan mi meg a tartalmát div, ami megjeleníti az ár a állományi adatok

1025
01:02:52,520 --> 01:02:58,600
most csak azt akarom állítani a tartalmát div, hogy bármilyen e karakterlánc

1026
01:02:58,600 --> 01:03:00,290
amely tartalmazza ezeket a szimbólumokat.

1027
01:03:00,290 --> 01:03:07,650
Ezzel a módszerrel a HTML e javaslatok változó, ez a húr, egy sor HTML.

1028
01:03:07,650 --> 01:03:13,490
Azt akarom, hogy ezt a HTML és helyezze belül a div nevezett javaslatot.

1029
01:03:13,490 --> 01:03:15,680
Épp csatolt valamit a DOM most.

1030
01:03:15,680 --> 01:03:20,360
Már hozzá néhány új elemet a DOM, hogy most már jelennek meg az oldalon.

1031
01:03:20,360 --> 01:03:22,540
Lássuk, mi ez néz ki.

1032
01:03:22,540 --> 01:03:29,110
Ha betölteni quote6 és most gyere vissza,

1033
01:03:29,110 --> 01:03:34,480
most, amikor elkezdek gépelni AAPL, már nincs, hogy Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
de most már ezt a listát, hogy mi történt magunkat.

1035
01:03:38,470 --> 01:03:43,230
Ez egy kicsit csúnyább mint a Bootstrap Typeahead, például,

1036
01:03:43,230 --> 01:03:45,580
de ez nem teszi lehetővé számunkra, hogy egy másik dolog.

1037
01:03:45,580 --> 01:03:48,660
Amikor néztek hogy Bootstrap plugin,

1038
01:03:48,660 --> 01:03:52,590
láttuk, hogy amikor autocompleted, az egyik autocomplete érték volt AAPL.

1039
01:03:52,590 --> 01:03:54,820
Ez talán nem lesz annyira hasznos.

1040
01:03:54,820 --> 01:03:59,100
Mint felhasználó, talán nem azonnal felismeri az összes tőzsdei szimbólumokat.

1041
01:03:59,100 --> 01:04:02,370
Amit én talán inkább elismerik a társaság tényleges neveket.

1042
01:04:02,370 --> 01:04:05,310
Tehát nem lenne igazán hasznos, ha ahelyett, mondván: AAPL

1043
01:04:05,310 --> 01:04:07,970
ez mondott valamit, mint az Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Mert mi már hengerelt e magunkat, valóban könnyen csinálni.

1045
01:04:12,240 --> 01:04:17,630
Nyissuk ki az utolsó idézet fájl van, így quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Ugyanaz. Épp most létrehozott egy PHP fájl, amely vissza fog térni hozzánk több, mint a szimbólumokat.

1047
01:04:23,200 --> 01:04:25,550
Azt is ad nekünk vissza a cég nevét.

1048
01:04:25,550 --> 01:04:28,150
És így csinálunk ugyanaz a dolog. Csinálunk egy AJAX kérés.

1049
01:04:28,150 --> 01:04:32,370
Ha a kérelem kitöltött, fogjuk végrehajtani ezt a funkciót itt,

1050
01:04:32,370 --> 01:04:36,520
, és ezt a funkciót fog felépíteni egy nagy string elemet.

1051
01:04:36,520 --> 01:04:39,520
De a különbség az, hogy az értéke e listák már nem csak a szimbólum,

1052
01:04:39,520 --> 01:04:45,370
ez most a nevet.

1053
01:04:45,370 --> 01:04:47,070
Tehát van egy kis probléma.

1054
01:04:47,070 --> 01:04:51,590
Amikor használja a keresés, meg kell valahogy átadni a szimbólumra.

1055
01:04:51,590 --> 01:04:54,950
Nem tudjuk átadni keresést ilyesmi Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Meg kell átadni MSFT.

1057
01:04:57,900 --> 01:05:01,640
Amikor írunk HTML, van sok szép beépített attribútumokat.

1058
01:05:01,640 --> 01:05:05,440
Az A talán társított egy href vagy egy osztály.

1059
01:05:05,440 --> 01:05:08,230
De amire igazán szükségünk van minden egyes ilyen kapcsolatok

1060
01:05:08,230 --> 01:05:11,120
van egy készlet jel társul hozzá.

1061
01:05:11,120 --> 01:05:14,240
Nincs beépített HTML attribútum állomány jelkép,

1062
01:05:14,240 --> 01:05:21,010
de szerencsére HTML5 lehetővé teszi számunkra, hogy hozzon létre saját attribútumokat is, amit mi akarunk.

1063
01:05:21,010 --> 01:05:24,620
Azáltal, mondván data-szimbólum, amit egy új attribútum

1064
01:05:24,620 --> 01:05:29,350
akinek a nevét csak készült, és ez rendben van, mert szerepel benne, hogy ezekkel az adatokkal.

1065
01:05:29,350 --> 01:05:34,270
Fogunk tárolni belsejében ott a szimbólum a készletből most.

1066
01:05:34,270 --> 01:05:39,590
Ez azt jelenti, hogy bár mi megjelenítésére értéke a cég neve

1067
01:05:39,590 --> 01:05:43,380
belül mi autocomplete, még mindig emlékezve a szimbólum

1068
01:05:43,380 --> 01:05:47,110
társított minden cég.

1069
01:05:47,110 --> 01:05:50,350
Ahogy mi csináljuk, hogy belül van ez az eleme is.

1070
01:05:50,350 --> 01:05:52,930
Tehát ez azt jelenti, meg kell még egy változás.

1071
01:05:52,930 --> 01:05:57,090
Amikor kattintson rá most kell ténylegesen kihasználják a szimbólum attribútum

1072
01:05:57,090 --> 01:06:00,220
ahelyett, hogy csak az értékét.

1073
01:06:00,220 --> 01:06:05,010
Ha vissza, akkor csatolni eseménykezelő javaslatokat.

1074
01:06:05,010 --> 01:06:09,280
Ha az egyik ilyen javaslatok kattint most akarok valamit.

1075
01:06:09,280 --> 01:06:13,160
Azt akarom, hogy megváltozik az értéke, hogy a beviteli mezőbe.

1076
01:06:13,160 --> 01:06:16,100
Most azt akarom állítani ugyanezt val a funkciót.

1077
01:06:16,100 --> 01:06:21,060
>> Így anélkül, hogy érveit e val függvény neked mi van már a szövegmezőbe,

1078
01:06:21,060 --> 01:06:27,070
de ha ad ez egy string, ez fog tartani, hogy a húr, és helyezze be a szövegmezőbe.

1079
01:06:27,070 --> 01:06:28,980
Én kiválasztja a beviteli mező azonos módon.

1080
01:06:28,980 --> 01:06:31,230
A neve szimbóluma belül form-idézet.

1081
01:06:31,230 --> 01:06:37,540
Most megküldésével az attribútum értékét adat-szimbólum.

1082
01:06:37,540 --> 01:06:41,560
Ez a dolog itt az új, a $ (this).

1083
01:06:41,560 --> 01:06:46,850
Mi ez utal az az elem, amit kattintott.

1084
01:06:46,850 --> 01:06:50,880
Láthatjuk, hogy itt nem vagyunk csatolva kattintás esemény

1085
01:06:50,880 --> 01:06:54,690
Minden elem egy osztály a javaslatot külön-külön.

1086
01:06:54,690 --> 01:06:57,140
Inkább mi közeledik ez egy kicsit másképp.

1087
01:06:57,140 --> 01:07:01,700
Ehelyett azt mondja, ha valami belül e javaslatok div,

1088
01:07:01,700 --> 01:07:04,080
amely emlékezz csak a tartály a listán,

1089
01:07:04,080 --> 01:07:10,150
ha valami belsejében div kattint, és azt egy osztály a javaslatot,

1090
01:07:10,150 --> 01:07:13,000
Szeretném ezt az eseményt a tüzet.

1091
01:07:13,000 --> 01:07:17,490
Alapvetően ez azt jelenti, hogy mit tehetünk, mi is újra ugyanezt az eseménykezelő

1092
01:07:17,490 --> 01:07:20,000
az összes dolog a listában.

1093
01:07:20,000 --> 01:07:22,080
Tehát nem kell egy eseménykezelő az első elem

1094
01:07:22,080 --> 01:07:24,550
és egy másik eseménykezelő a második elem.

1095
01:07:24,550 --> 01:07:29,880
Mi ehelyett azt mondja: "Azt akarom, hogy ugyanazt eseménykezelő alkalmazni mindent a listámon."

1096
01:07:29,880 --> 01:07:34,420
De meg kell valahogy tudni, hogy melyik elem kattintott.

1097
01:07:34,420 --> 01:07:38,450
Ez a "this" kulcsszót jelenti, hogy csak.

1098
01:07:38,450 --> 01:07:42,360
Ez az a tárgy, amelyet éppen kattint a felhasználó.

1099
01:07:42,360 --> 01:07:47,680
Ha rákattint a 3. linkre, ez képviseli az eleme, hogy 3. link,

1100
01:07:47,680 --> 01:07:51,670
ami azt jelenti, hogy lehet kapni az attribútum, adat-szimbólum,

1101
01:07:51,670 --> 01:07:57,760
amelyről tudjuk, tartalmaznia kell a szimbólumot, ami kapcsolatos a cég csak kattintott.

1102
01:07:57,760 --> 01:08:04,550
Ha ugrik vissza a finanszírozási oldalon,

1103
01:08:04,550 --> 01:08:08,580
láthatjuk most, hogy egyszer elkezdek gépelni valami ilyesmit msft,

1104
01:08:08,580 --> 01:08:11,220
vagyunk feltételei már nem csak a tőzsdei szimbólumokat,

1105
01:08:11,220 --> 01:08:13,720
vagyunk most kezd a tényleges vállalatok.

1106
01:08:13,720 --> 01:08:20,410
De amikor rákattintok az egyik ilyen társaság,

1107
01:08:20,410 --> 01:08:25,180
láthatjuk, hogy mi valójában feltölteni a szövegdoboz nem a cég neve

1108
01:08:25,180 --> 01:08:29,850
de bármi volt tárolt ezen adatok attribútumokat.

1109
01:08:29,850 --> 01:08:32,880
És ha tényleg vizsgálja egy ilyen elemek jobb kattintással

1110
01:08:32,880 --> 01:08:36,200
és kattintson Vizsgálja Element, azt lehet látni, hogy ez mit néz.

1111
01:08:36,200 --> 01:08:40,290
>> Ne feledje, ez olyasvalami, amit hoztunk létre belsejében, hogy a hurok

1112
01:08:40,290 --> 01:08:42,649
amikor mi voltunk kiépítése, hogy a húr a HTML.

1113
01:08:42,649 --> 01:08:47,870
Láthatjuk, hogy ezt a data-szimbólumnak értéke MSFT, ami nagyszerű.

1114
01:08:47,870 --> 01:08:49,189
Ez az, amit vártunk.

1115
01:08:49,189 --> 01:08:53,170
Ez a szimbólum, és ez hogyan van az érték, amit használatához szükséges

1116
01:08:53,170 --> 01:08:56,140
belsejében mezőbe.

1117
01:08:56,140 --> 01:08:58,850
Ennyi elég az idézet formájában, mert ez a fajta unalmas.

1118
01:08:58,850 --> 01:09:02,990
Nézzük csak, hogy néhány gyors fejlesztések portfóliónk oldalra.

1119
01:09:02,990 --> 01:09:08,109
Ha már használt CS50 Finance egy darabig, és elkezdi a vételi és eladási sok a készletek,

1120
01:09:08,109 --> 01:09:11,300
végül is ez a táblázat fog kapni elég nagy,

1121
01:09:11,300 --> 01:09:13,850
és te fogsz akar egy tőzsdei, természetesen.

1122
01:09:13,850 --> 01:09:20,350
Amint a táblázat is nagyon, nagyon nagy, hasznos lehet a felhasználó, hogy megpróbálja keresni rajta.

1123
01:09:20,350 --> 01:09:23,290
Belül a keresőmezőbe ha elkezdek gépelni valami ilyesmit Disney

1124
01:09:23,290 --> 01:09:26,359
és keresi az én Mickey Mouse raktáron, azt láthatjuk, hogy a táblázat most szűrés

1125
01:09:26,359 --> 01:09:28,189
alapján, amit én csak gépelt be

1126
01:09:28,189 --> 01:09:31,640
Ez a funkció úgy néz ki, szuper bonyolult, de ez nagyon, nagyon egyszerű

1127
01:09:31,640 --> 01:09:33,859
jQuery és JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Ez portfolio.php fájl tartalmazza a JavaScript nevű fájlt portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Vessünk egy pillantást.

1130
01:09:41,130 --> 01:09:44,890
Szóval html, js, portfólió.

1131
01:09:44,890 --> 01:09:49,210
Itt, ahol tesszük, hogy keres az asztalon.

1132
01:09:49,210 --> 01:09:52,750
Az első dolog, amit tennie kell csatolni eseménykezelő, hogy a szövegdoboz

1133
01:09:52,750 --> 01:09:55,760
mert tudjuk, hogy azt akarjuk, hogy szűrés funkció a tüzet

1134
01:09:55,760 --> 01:09:59,800
minden alkalommal, amikor a felhasználó megnyomja valamit, mert nincs ideje Search gombok.

1135
01:09:59,800 --> 01:10:03,000
Az első dolog, amit meg kell tennie, hogy kitaláljuk, mi a felhasználó keres,

1136
01:10:03,000 --> 01:10:04,780
mint tettük korábban.

1137
01:10:04,780 --> 01:10:11,320
Ez a kulcsszó hivatkozik az aktuális elem a felhasználó kölcsönhatásban áll.

1138
01:10:11,320 --> 01:10:14,070
>> Mivel a felhasználó kölcsönhatásba a keresőmezőbe,

1139
01:10:14,070 --> 01:10:17,020
$ This képviseli a keresési mezőbe,

1140
01:10:17,020 --> 01:10:21,820
így this.val ad nekünk, mi van benne a keresőmező a felhasználó éppen gépelni.

1141
01:10:22,810 --> 01:10:27,320
Szóval, most mit akarunk tenni az szeretnénk navigálhat egész sorát

1142
01:10:27,320 --> 01:10:29,240
belül a táblázat.

1143
01:10:29,240 --> 01:10:35,630
Ahhoz, hogy válassza ki az összes sort a táblázatban, adtam táblázat Az azonosító tábla portfólió

1144
01:10:35,630 --> 01:10:39,060
és minden sor képviseli TR elem,

1145
01:10:39,060 --> 01:10:42,080
így ez a választó fog visszatérni hozzám egy nagy tömb

1146
01:10:42,080 --> 01:10:44,370
az összes sort az én táblázatban.

1147
01:10:44,370 --> 01:10:47,010
Most azt akarom, hogy navigálhat fölé tömb.

1148
01:10:47,010 --> 01:10:52,390
Tudtam egy for ciklus, de a jQuery ténylegesen biztosítja számunkra a szép nevezett funkció "minden".

1149
01:10:52,390 --> 01:10:55,220
Mit csinál, minden egyes vesz egy érv,

1150
01:10:55,220 --> 01:10:57,090
és ez az érv egy olyan funkció.

1151
01:10:57,090 --> 01:11:02,760
Mit fog csinálni ez fog alkalmazni, hogy a funkció minden eleme belül ezt a listát.

1152
01:11:02,760 --> 01:11:05,550
Ez a függvény egy argumentummal, hogy ez e,

1153
01:11:05,550 --> 01:11:10,090
és ha ez a funkció végrehajtásra kerül, ezt az e fog helyettesíteni az első sorban,

1154
01:11:10,090 --> 01:11:12,070
majd a második sorban, és majd a harmadik sor.

1155
01:11:12,070 --> 01:11:15,150
Ily módon, ez ugyanaz, mint a futás egy for ciklus

1156
01:11:15,150 --> 01:11:21,360
majd kitalálni az aktuális elem index alapján belsejében a for ciklus.

1157
01:11:21,360 --> 01:11:24,750
Minden iterációs, minden egyes ilyen elemek a táblázatban,

1158
01:11:24,750 --> 01:11:30,560
Azt akarom, hogy ellenőrizze, ha a szöveg az elem - a szöveg a cella belsejében a sor -

1159
01:11:30,560 --> 01:11:33,130
egyezik mit keres.

1160
01:11:33,130 --> 01:11:36,390
Ez a nagy hosszú sora parancsok, hogyan tudnám csinálni.

1161
01:11:36,390 --> 01:11:40,900
Először is, ismét ezt most hivatkozik -, mert van benne egy új funkció -

1162
01:11:40,900 --> 01:11:45,020
ez most az aktuális sor a táblázatban.

1163
01:11:45,020 --> 01:11:47,340
Azt akarom, hogy az aktuális sor a táblázatban,

1164
01:11:47,340 --> 01:11:49,950
és azt akarom, hogy az összes gyerek.

1165
01:11:49,950 --> 01:11:51,940
Ne feledje, a DOM egy hierarchikus fa,

1166
01:11:51,940 --> 01:11:54,200
ami azt jelenti, hogy az elemek olyan gyermekek száma.

1167
01:11:54,200 --> 01:12:00,180
>> Ezt. Gyermekek funkcióban fog vissza engem egy tömb minden elemét

1168
01:12:00,180 --> 01:12:03,240
, amelyek a gyerekek az, ebben az esetben, egy sort a táblázatban.

1169
01:12:03,240 --> 01:12:07,150
Ez csak egyszerűen a sejtek belsejében a sor.

1170
01:12:07,150 --> 01:12:09,230
Csak azt akarom keresni az első sejt.

1171
01:12:09,230 --> 01:12:13,090
Ezt. Első függvény mondja nekem az első eleme, hogy a tömbben.

1172
01:12:13,090 --> 01:12:17,070
Ezután a szöveg funkció szerint értem pontosan, mi van benne az, hogy a sejtek

1173
01:12:17,070 --> 01:12:19,530
mert szeretnék keresni fölé szöveget.

1174
01:12:19,530 --> 01:12:21,040
Végezetül, hadd átalakítani, hogy kisbetűs,

1175
01:12:21,040 --> 01:12:23,940
így nem tehetünk szöveg kis-és nagybetűket lekérdezések.

1176
01:12:23,940 --> 01:12:29,990
Végezetül, szeretnénk látni, ha a karakterlánc belsejében egy táblázat tartalmazza a string amit keresett.

1177
01:12:29,990 --> 01:12:32,980
A indexOf funkció JavaScript pontosan ezt teszi.

1178
01:12:32,980 --> 01:12:37,060
Azt mondja nekünk, függetlenül attól, hogy ez a szöveg tartalmaz egy string.

1179
01:12:37,060 --> 01:12:40,150
Ha ez igaz, hogy a cellában mit keres,

1180
01:12:40,150 --> 01:12:42,140
akkor azt szeretnénk, hogy győződjön meg arról, hogy ez látható.

1181
01:12:42,140 --> 01:12:45,330
A show módszert fogja mondani: "Mutasd az elem."

1182
01:12:45,330 --> 01:12:50,350
Ha nem ez a helyzet, akkor azt jelenti, hogy bármit is keresem nem tartalmaz

1183
01:12:50,350 --> 01:12:53,550
ezen belül a sorban, és így azt akarom, hogy elrejtse az a felhasználó elől.

1184
01:12:53,550 --> 01:12:59,240
Ez megvalósítja a kedves szűrés hatása, ha nem látjuk a teljes táblázatot.

1185
01:12:59,240 --> 01:13:01,480
Ha érdekel, hogyan lehet ezt a ticker is,

1186
01:13:01,480 --> 01:13:04,180
feltesszük a forrás online. De ez tényleg egyszerű.

1187
01:13:04,180 --> 01:13:09,860
JQuery már félelmetes módszereit e animációk és manipulálni CSS tulajdonságok.

1188
01:13:09,860 --> 01:13:11,020
Szóval, ez nekem.

1189
01:13:11,020 --> 01:13:15,560
>> Mi hát előttünk? Mint látni fogod, néhány napon belül, a végleges projekt javaslat miatt.

1190
01:13:15,560 --> 01:13:17,730
A végleges projekt javaslat feltenni néhány kérdést,

1191
01:13:17,730 --> 01:13:19,420
de közülük lesz három mérföldkövek -

1192
01:13:19,420 --> 01:13:22,840
az egyik egy "jó" mérföldkő, egy jobb mérföldkő, és az egyik legjobb.

1193
01:13:22,840 --> 01:13:25,870
Az ötlet, hogy igazán segíteni nektek, állítsa be az elvárásokat

1194
01:13:25,870 --> 01:13:29,160
annak érdekében, hogy minimális lesz elégedett a termelés a projekt végső

1195
01:13:29,160 --> 01:13:32,060
és ez lesz "jó", amennyiben Ön érintett.

1196
01:13:32,060 --> 01:13:34,540
De aztán az az érdeke, szerzés, hogy elérje egy kicsit, hogy valami jobb

1197
01:13:34,540 --> 01:13:37,680
vagy valami a legjobb, akkor is egyfajta nyomja Ön felé, hogy az is.

1198
01:13:37,680 --> 01:13:40,660
A CS50 Hack-a-Thon, eközben van egy pár hét alatt.

1199
01:13:40,660 --> 01:13:44,340
Általában, mi ezt a lottón alapján alapja, mert a kamat,

1200
01:13:44,340 --> 01:13:47,680
de esély fogjuk, hogy csak néhány száz minket shuttle buszok Harvard Square

1201
01:13:47,680 --> 01:13:51,540
le Kendall tér, ahol a Microsoft szép létesítmény találó "NERD" -

1202
01:13:51,540 --> 01:13:53,830
A New England Kutatási és Fejlesztési Központ.

1203
01:13:53,830 --> 01:13:56,380
Majd oda 8 óra körül leszünk néhány ételt.

1204
01:13:56,380 --> 01:13:58,160
Körülbelül 01:00 fogunk még egy kis ételt.

1205
01:13:58,160 --> 01:14:02,150
Körülbelül 05:00 ha még mindig ébren leszünk feje fölött IHOP vagy vegye vissza campus.

1206
01:14:02,150 --> 01:14:04,380
A cél itt az, hogy belevetik magukat végső projektek

1207
01:14:04,380 --> 01:14:06,190
mellett az osztálytársak és a személyzet.

1208
01:14:06,190 --> 01:14:08,280
Aztán néhány nappal később a CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
ami valójában azt jelentette, hogy egy lehetőséget a srácok, hogy bemutassa a munkát

1210
01:14:10,990 --> 01:14:12,700
és elért a félév

1211
01:14:12,700 --> 01:14:15,610
míg a dörzsölés váll egymást, és kapok egy értelemben, amit mindenki tett.

1212
01:14:15,610 --> 01:14:17,850
Ezzel azt mondta, nagyon köszönöm, hogy Tommy és Joseph,

1213
01:14:17,850 --> 01:14:19,960
és mi találkozunk hétfőn.

1214
01:14:19,960 --> 01:14:24,070
 [Taps]