1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Wiki 9, Inaendelea]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Chuo Kikuu cha Harvard]

3
00:00:05,160 --> 00:00:07,020
[Hii ni CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Hii ni CS50. Hii ni mwisho wa wiki 9. Asante sana.

5
00:00:13,340 --> 00:00:15,310
Hatimaye. Wiki 9. I got it.

6
00:00:15,310 --> 00:00:18,590
Leo tunaendelea mazungumzo yetu kuhusu programu mtandao

7
00:00:18,590 --> 00:00:21,660
kwa jicho kuelekea mradi wa mwisho, si kwa sababu una kufanya kitu mtandao msingi

8
00:00:21,660 --> 00:00:25,610
kwa ajili ya miradi ya mwisho lakini kwa sababu ama kwa ajili ya miradi ya mwisho au baada CS50

9
00:00:25,610 --> 00:00:29,000
hii ni hakika mwelekeo ambao programu ya kisasa ni kwenda.

10
00:00:29,000 --> 00:00:31,770
Na bado siyo kweli jambo rahisi.

11
00:00:31,770 --> 00:00:35,040
Kwa kweli, moja ya mambo ya gumu kufanya ni nyanja ya design.

12
00:00:35,040 --> 00:00:38,600
>> Kwa mfano, kwa kubuni sisi mean kweli kupata user interface

13
00:00:38,600 --> 00:00:40,420
au uzoefu wa mtumiaji wa kulia.

14
00:00:40,420 --> 00:00:43,200
Mimi daresay - na sisi kujua kutoka kuweka hivi karibuni tatizo

15
00:00:43,200 --> 00:00:45,960
wakati wachache wenu kurushwa gripes yako kuhusu baadhi kipande cha programu

16
00:00:45,960 --> 00:00:49,000
au vifaa kwamba infuriates wewe, iwe juu ya chuo au off -

17
00:00:49,000 --> 00:00:51,930
kuna mengi ya maeneo ya huko nje, kuna mengi ya vifaa huko nje,

18
00:00:51,930 --> 00:00:53,900
kwamba aina ya sucks.

19
00:00:53,900 --> 00:00:58,730
Lakini ukweli ni kwamba maamuzi ya mambo ambayo ni rahisi kutumia bado ni hata hivyo nguvu

20
00:00:58,730 --> 00:01:00,550
ni changamoto ngumu sana.

21
00:01:00,550 --> 00:01:03,680
Hivyo kwa leo nilimuuliza Joseph na Tommy kujiunga me up hapa

22
00:01:03,680 --> 00:01:06,680
ili tuweze kuwa na mazungumzo, wote juu ya kubuni

23
00:01:06,680 --> 00:01:09,090
na ni aina gani ya mchakato wa mawazo lazima kuanza kwenda kwa kichwa yako

24
00:01:09,090 --> 00:01:12,040
wakati wewe kubuni miradi yako ya mwisho, juhudi yako ya baadaye.

25
00:01:12,040 --> 00:01:15,040
Na kisha kwa msaada Tommy wa tutaangalia baadhi ya maelezo ya utekelezaji.

26
00:01:15,040 --> 00:01:18,440
Jinsi gani unaweza kuwa na baadhi ya maono kwenye karatasi au katika akili yako

27
00:01:18,440 --> 00:01:20,760
kwamba unaweza basi nitafanya programmatically

28
00:01:20,760 --> 00:01:24,030
kwa kutumia baadhi ya teknolojia na mbinu tumekuwa tu ya kuanza kuzungumza juu,

29
00:01:24,030 --> 00:01:29,080
yaani JavaScript na kitu hata karibu zaidi, yaani AJAX, Asynchronous JavaScript.

30
00:01:29,080 --> 00:01:32,950
Hiyo inaruhusu kujenga nguvu zote zaidi ya interface user

31
00:01:32,950 --> 00:01:35,780
na kuchota data zaidi na zaidi kuendelea kutoka kwa seva.

32
00:01:35,780 --> 00:01:38,560
Hivyo tutaweza kuona baadhi ya vijisehemu wale kama vizuri leo.

33
00:01:38,560 --> 00:01:41,800
Kama kando, kama una nia ya kuzingatia katika sayansi ya kompyuta

34
00:01:41,800 --> 00:01:45,010
au minoring katika sayansi ya kompyuta, tunajua kwamba huyu Ijumaa saa sita mchana

35
00:01:45,010 --> 00:01:48,750
katika Maxwell Dworkin 221 kutakuwa na tukio pizza

36
00:01:48,750 --> 00:01:50,780
ambapo unaweza kujifunza kidogo zaidi juu ya sayansi ya kompyuta.

37
00:01:50,780 --> 00:01:54,860
Juu ya njia yako leo nje ya mlango wewe utakuwa na uwezo wa kuchukua mwongozo yasiyokuwa rasmi ya CS katika Harvard.

38
00:01:54,860 --> 00:01:57,290
Tutaweza akaiweka juu cans takataka nje katika urefu kiuno

39
00:01:57,290 --> 00:01:59,750
ili kwamba kama wewe Ningependa kunyakua hii na kujifunza kidogo zaidi juu ya CS,

40
00:01:59,750 --> 00:02:02,480
kwamba atakuwa huko kwa ajili yenu, kama ilivyokuwa katika wiki 0.

41
00:02:02,480 --> 00:02:06,500
Pia kama ungependa kujiunga na sisi kwa chakula cha mchana CS50 hii Ijumaa saa 1:15,

42
00:02:06,500 --> 00:02:09,800
kichwa na cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Bila wasiwasi zaidi, mimi kuwapa mafunzo wenzake Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hi. [Applause]

45
00:02:19,190 --> 00:02:20,770
Shukrani.

46
00:02:20,770 --> 00:02:24,780
mara ya kwanza mimi kujifunza kuhusu kubuni alikuwa katika darasa hapa aitwaye CS179.

47
00:02:24,780 --> 00:02:28,040
>> profesa wakati walituambia hadithi kuhusu profesa mwingine

48
00:02:28,040 --> 00:02:31,640
ambao walikuwa wamekwenda hoteli na kutumika faucets.

49
00:02:31,640 --> 00:02:35,630
Je, mtu yeyote kuniambia nini knobs 2 juu ya kushoto na kulia nini?

50
00:02:35,630 --> 00:02:39,080
[Mwanafunzi] Moto na baridi. >> Moto na baridi. Nzuri.

51
00:02:39,080 --> 00:02:41,430
Nini wewe kawaida kutarajia, haki?

52
00:02:41,430 --> 00:02:46,960
Hii profesa baada ya kutumia bomba anataka kuchukua oga, na yeye kuendelea kutumia hii.

53
00:02:46,960 --> 00:02:51,310
Yeye anadhani kushoto na kulia ni kwa pande moto na baridi, sawa?

54
00:02:51,310 --> 00:02:55,470
Lakini yeyote anaweza kuniambia nini haya kwa kweli kufanya?

55
00:02:55,470 --> 00:02:58,060
Yoyote mikono?

56
00:02:58,060 --> 00:03:01,740
[Inaudible mwanafunzi majibu] >> Mojawapo ya mapendekezo ni?

57
00:03:01,740 --> 00:03:05,860
[Inaudible mwanafunzi majibu] >> Joto?

58
00:03:05,860 --> 00:03:10,460
Hivyo mmoja wao udhibiti joto na udhibiti nyingine? >> [Mwanafunzi] Maji ya shinikizo.

59
00:03:10,460 --> 00:03:12,350
Maji shinikizo. Nzuri.

60
00:03:12,350 --> 00:03:15,100
Profesa Hii anatembea katika hili na, wakidhani ni kudhibiti moto na baridi,

61
00:03:15,100 --> 00:03:21,470
anarudi moja ya haki, ambayo anadhani ni kwa moto, njia yote hadi

62
00:03:21,470 --> 00:03:23,560
kwa sababu yeye anataka kuchukua oga joto.

63
00:03:23,560 --> 00:03:28,100
Naam, haya si kweli match up, hivyo yeye anapata uzoefu huu si furaha sana

64
00:03:28,100 --> 00:03:31,110
ya kuwa katika oga baridi, na sisi wote kujua nini kwamba anahisi kama.

65
00:03:31,110 --> 00:03:33,620
Huu ni mfano wa flaw design.

66
00:03:33,620 --> 00:03:37,040
Nini maana na kwamba ni matumaini yake kutoka bomba

67
00:03:37,040 --> 00:03:39,420
haikulingana kile kitakachotoka oga,

68
00:03:39,420 --> 00:03:41,780
ambayo ni aina ya bahati mbaya kwa ajili yake.

69
00:03:41,780 --> 00:03:44,990
Hivyo hii ni mfano wa flaw kubuni kinachotokea katika maisha halisi.

70
00:03:44,990 --> 00:03:48,020
Lakini tunaona kila aina ya wale wengine pia.

71
00:03:48,020 --> 00:03:50,390
Sisi ni pengine si mashabiki wa mfumo MBTA.

72
00:03:50,390 --> 00:03:55,560
Hii ni mfumo Subway kweli katika London, ambayo anasema, "button Hii si katika matumizi."

73
00:03:55,560 --> 00:04:00,220
Kwa nini ni hata kwenye huko? Mbona sisi hata huduma?

74
00:04:00,220 --> 00:04:02,810
Nilipokuwa mtoto, kuwa tech savvy moja katika nyumba,

75
00:04:02,810 --> 00:04:05,050
kila kompyuta bila ajali, mama yangu kuja kwangu,

76
00:04:05,050 --> 00:04:07,060
kunionyeshea hii screen na kuuliza mimi nini kilichotokea.

77
00:04:07,060 --> 00:04:09,210
>> Hata mimi sijui nini maana ya hii.

78
00:04:11,890 --> 00:04:14,700
[Kicheko] Nini?

79
00:04:16,950 --> 00:04:18,019
[Kicheko]

80
00:04:18,720 --> 00:04:23,050
Wakati mwingine sisi kujisikia kama watengenezaji programu ni tu trolling yetu.

81
00:04:23,050 --> 00:04:28,460
Kama watumiaji sisi ni kama, "Ni nini kinachoendelea Mtu kutuambia?."

82
00:04:28,460 --> 00:04:32,140
Hii yote inakuja chini ya suala la kubuni.

83
00:04:32,140 --> 00:04:34,650
Design, kama tunavyoona, ni si rena kuhusu aesthetics,

84
00:04:34,650 --> 00:04:37,230
siyo kuhusu jinsi mambo ya kuangalia.

85
00:04:37,230 --> 00:04:41,720
Tunaona hapa kuwa kidogo pop-up juu hapa kweli inaonekana pretty nice.

86
00:04:41,720 --> 00:04:45,290
Ina kivuli tone katika background, ina radiuses mpaka kinachoendelea.

87
00:04:45,290 --> 00:04:47,550
Ni aina ya pretty.

88
00:04:47,550 --> 00:04:51,480
Ni kweli si vizuri iliyoundwa kwa sababu si sana user friendly.

89
00:04:51,480 --> 00:04:54,920
Hiyo kidogo pop-up kwamba anakuja juu kweli haina nipe taarifa yoyote

90
00:04:54,920 --> 00:04:58,450
kuhusu nini kinaendelea, haina niambie kitu chochote kama mtumiaji

91
00:04:58,450 --> 00:05:01,400
kuhusu jinsi ya kuokoa kutoka kosa hilo.

92
00:05:01,400 --> 00:05:05,190
Sisi nataka kufikiri kuhusu mambo ambayo si ya kubuni.

93
00:05:05,190 --> 00:05:06,670
Kwanza, si aesthetics.

94
00:05:06,670 --> 00:05:10,800
Ni pia si stuffing programu yako kwa tani ya utendaji usio wa lazima.

95
00:05:10,800 --> 00:05:14,890
Kama wewe ni mgahawa Thai, pengine hawataki kuwa daktari wa meno wakati huo huo.

96
00:05:14,890 --> 00:05:17,720
Na kwa Maswali Facebook, si kwamba watu wengi kutumika ni

97
00:05:17,720 --> 00:05:21,130
na ilikuwa si kweli katika msingi wa nini walikuwa kujenga.

98
00:05:21,130 --> 00:05:24,200
Na hivyo ni nzuri kufikiri juu hata kiasi wingi wa mambo

99
00:05:24,200 --> 00:05:26,390
kwamba wewe ni kuweka kwa maombi yako lakini ubora

100
00:05:26,390 --> 00:05:28,910
na jinsi wewe ni kufanya kuwa uzoefu user bora

101
00:05:28,910 --> 00:05:32,540
na kwa kweli kuboresha juu ya nini tayari.

102
00:05:32,540 --> 00:05:37,040
>> Kwa kifupi, design inatuambia nini tunapaswa kujenga.

103
00:05:37,040 --> 00:05:41,950
Kwa mfano, kama sisi ni kujenga kitu ambacho hebu kutafuta mambo up,

104
00:05:41,950 --> 00:05:45,970
kama Google, kwa mfano, tunapaswa kufanya mambo kwa namna

105
00:05:45,970 --> 00:05:48,950
ambayo inahitaji user kuchukua kura ya Clicks kupata wanataka nini,

106
00:05:48,950 --> 00:05:52,580
au lazima sisi kufanya hivyo kwa njia, kwa mfano, na Google Instant au oto kukamilisha

107
00:05:52,580 --> 00:05:54,970
kwamba lets sisi kupata matokeo yetu kwa kasi?

108
00:05:54,970 --> 00:05:58,740
Uhandisi inahusisha, kama Tommy nitakuonyeshea, kwa kweli kuijenga.

109
00:05:58,740 --> 00:06:01,890
Kuna kura ya aina ya design.

110
00:06:01,890 --> 00:06:06,070
Kwa mfano, kama wewe ni kujenga kitu fulani kupeleka kitu

111
00:06:06,070 --> 00:06:09,770
katika Dunia ya Tatu nchi ambapo kuna si mengi umeme au kwamba teknolojia sana,

112
00:06:09,770 --> 00:06:11,440
una kubuni nini wewe kujenga

113
00:06:11,440 --> 00:06:14,210
kwa njia ambayo inatoa urahisi upatikanaji wa watu hapo.

114
00:06:14,210 --> 00:06:18,290
Lakini nini aina ya maamuzi mengine kubuni ili kuwe na

115
00:06:18,290 --> 00:06:21,850
au inaweza kuwa wanaohusika katika kitu kama hiki?

116
00:06:23,690 --> 00:06:25,660
Yeah. Mimi naona mkono.

117
00:06:25,660 --> 00:06:37,200
[Inaudible mwanafunzi majibu] >> Haki. Hasa. Upatikanaji ni kitu kimoja.

118
00:06:37,200 --> 00:06:40,870
mengi ya watu sidhani juu, "Je kuhusu watumiaji yangu?"

119
00:06:40,870 --> 00:06:43,160
kama extremes ya wigo aidha.

120
00:06:43,160 --> 00:06:47,770
Nina watumiaji ambao wanaweza kuwa na ulemavu kwamba mimi si kufikiri juu ya

121
00:06:47,770 --> 00:06:50,590
na mimi nina tu kufikiri kuhusu kubuni kwa mtumiaji ujumla.

122
00:06:50,590 --> 00:06:52,630
Internet ni kupatikana kwa kila mtu siku hizi,

123
00:06:52,630 --> 00:06:54,870
na mimi lazima kubuni kwa watu wale pia.

124
00:06:54,870 --> 00:06:58,620
Nini aina ya maamuzi mengine kubuni ili kufanya?

125
00:06:58,620 --> 00:07:00,690
Ndiyo. >> [Mwanafunzi] Gharama.

126
00:07:00,690 --> 00:07:02,680
Gharama. Nzuri sana.

127
00:07:02,680 --> 00:07:08,060
Jambo jingine tupate msingi kubuni maamuzi yetu juu ya ni gharama.

128
00:07:08,060 --> 00:07:13,130
Kama sisi ni biashara, unataka kujenga kitu ambacho si kuchukua gharama sana kwa kuzalisha

129
00:07:13,130 --> 00:07:17,720
lakini unaweza kuuza kwa gharama hasa juu au wanaweza kupata sisi baadhi ya faida.

130
00:07:17,720 --> 00:07:21,540
>> Haya yote ni aina tofauti ya kubuni, lakini wakati sisi ni kujenga kitu fulani kwenye mtandao

131
00:07:21,540 --> 00:07:25,120
au wakati sisi ni kujenga kitu ambacho pengine haina gharama kwamba mengi ya kujenga sasa,

132
00:07:25,120 --> 00:07:28,630
kama maombi Internet - huna kutupa mtaji kiasi ndani yake

133
00:07:28,630 --> 00:07:30,900
ili kufanya kitu ambacho kwa kweli kazi -

134
00:07:30,900 --> 00:07:33,490
nini sisi ni wasiwasi zaidi kuhusu ni uzoefu wa mtumiaji.

135
00:07:33,490 --> 00:07:36,390
Sisi wito mtumiaji unaozingatia design.

136
00:07:36,390 --> 00:07:41,550
Kimsingi nini mtumiaji kubuni unaozingatia inahusisha ni kuweka wenyewe katika viatu ya watumiaji.

137
00:07:41,550 --> 00:07:44,870
Kama mtu ishara up kwa nini mimi kujenga,

138
00:07:44,870 --> 00:07:48,250
wameweza wazi kuja maombi yangu hasa kwa lengo katika akili,

139
00:07:48,250 --> 00:07:50,280
na kazi wanataka kukamilisha.

140
00:07:50,280 --> 00:07:53,650
Na kazi yako si tu kwa kuwasaidia kumaliza kazi hiyo

141
00:07:53,650 --> 00:07:57,930
lakini watu kuwasaidia kumaliza kazi hiyo kwa namna ambayo ni bora, angavu,

142
00:07:57,930 --> 00:08:01,900
na, kama mtu fulani alisema juu huko, kupatikana.

143
00:08:01,900 --> 00:08:03,750
Nini maana ya ufanisi?

144
00:08:03,750 --> 00:08:08,050
Ufanisi maana jinsi haraka haina mtumiaji wangu kukamilisha kazi aliyopewa interface yangu.

145
00:08:08,050 --> 00:08:11,650
Je, ni kuchukua kura ya Clicks kwa wao kupata kutoka sehemu moja hadi nyingine?

146
00:08:11,650 --> 00:08:14,630
Je, ni tedious? Je, wao inabidi kufanya kura ya kazi repetitive?

147
00:08:14,630 --> 00:08:17,140
Tunataka kufanya mchakato kama ufanisi kama iwezekanavyo

148
00:08:17,140 --> 00:08:20,070
hivyo hawana kufanya aina wale wa mambo.

149
00:08:20,070 --> 00:08:24,230
Kama kwa intuitiveness, kwamba ni, kwa mfano, kama mtumiaji inaonekana hadi interface yangu,

150
00:08:24,230 --> 00:08:27,240
ni rahisi kwa wao kupata kutoka mahali hadi mahali?

151
00:08:27,240 --> 00:08:30,390
Je, ni rahisi kwa wao kufikiri nini wao bonyeza katika interface yangu

152
00:08:30,390 --> 00:08:33,770
ili kwa wao ili kufikia lengo au kazi ambayo wanataka kufikia?

153
00:08:33,770 --> 00:08:37,520
>> Na hatimaye, kama mtu mmoja alisema zaidi ya hapo, upatikanaji ni muhimu sana.

154
00:08:37,520 --> 00:08:39,640
[Kiume msemaji] Ni huja na upatikanaji kwa mambo kama maono,

155
00:08:39,640 --> 00:08:42,740
kama jinsi gani mimi kwa kweli kubuni kitu kwa mtu ambaye ni kipofu?

156
00:08:42,740 --> 00:08:46,460
Oh. Kwa watu ambao hawawezi kuona katika yote, tuna kitu kinachoitwa screen wasomaji.

157
00:08:46,460 --> 00:08:49,070
Unachotakiwa kufanya ni lazima kujenga tovuti yako katika njia

158
00:08:49,070 --> 00:08:52,020
kwamba, kwa mfano, hasa teknolojia nini tunaita -

159
00:08:52,020 --> 00:08:53,590
Kuna mambo mengi ya sasa.

160
00:08:53,590 --> 00:08:55,660
Nadhani kuna screen wasomaji inayoitwa Jaws.

161
00:08:55,660 --> 00:08:58,410
mengi ya mambo haya wanategemea nini tunaita sheria eneo

162
00:08:58,410 --> 00:09:02,010
ili kusoma nje kwa mtumiaji ni nini sasa juu ya ukurasa.

163
00:09:02,010 --> 00:09:05,480
Kwa watu wale ambao hawawezi kuona, unahitaji kuhakikisha kwamba wasomaji screen hizi

164
00:09:05,480 --> 00:09:09,130
unaweza kweli kuchukua yaliyomo kwenye ukurasa na kweli anaweza kuonyesha watumiaji wako,

165
00:09:09,130 --> 00:09:13,630
ikiwa huwezi kuona, angalau bado unaweza kuelewa maudhui juu ya ukurasa.

166
00:09:13,630 --> 00:09:16,190
Yeah. Sawa.

167
00:09:16,190 --> 00:09:23,410
Kutosha kuzungumza juu ya design nzuri. Hebu majadiliano kuhusu kubuni mbaya.

168
00:09:23,410 --> 00:09:25,220
Haya ni mambo ambayo unapaswa kufanya.

169
00:09:25,220 --> 00:09:27,890
Je, mtu yeyote kuniambia kuhusu uzoefu wao na Craigslist

170
00:09:27,890 --> 00:09:32,190
na nini wanafikiri si kubwa sana kuhusu design hii?

171
00:09:33,690 --> 00:09:36,430
Ndiyo. >> [Mwanafunzi] Nadhani kuna mengi mno maneno katika eneo moja.

172
00:09:36,430 --> 00:09:39,350
Wengi mno maneno, haki? Kabisa balaa.

173
00:09:39,350 --> 00:09:42,400
Wewe kuja ukurasa huu na wewe greeted na rundo zima la mambo juu hapa

174
00:09:42,400 --> 00:09:43,860
kwamba wanaweza hata jambo na wewe.

175
00:09:43,860 --> 00:09:47,010
Kwa mfano, wewe kuishi katika moja hali ya kuwa haina kuanza na barua hii.

176
00:09:47,010 --> 00:09:48,690
Hebu sema wewe kuishi katika Texas au kitu.

177
00:09:48,690 --> 00:09:53,790
>> Una kitabu njia yote chini ya ukurasa wa kupata mahali wewe ni saa.

178
00:09:53,790 --> 00:10:00,320
Mimi nina kutoka Boston, hivyo basi mimi kuangalia katika Massachusetts. Ambapo ni Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, ni haki hapa. Oh, ni Boston. Sawa.

180
00:10:03,270 --> 00:10:09,070
Hebu tuangalie Boston. [Kicheko]

181
00:10:09,070 --> 00:10:12,250
Pretty balaa, haki?

182
00:10:12,250 --> 00:10:16,400
Awkward mambo zaidi ya hapo. [Kicheko]

183
00:10:17,320 --> 00:10:19,470
Hebu sema mimi nina kuangalia kwa mahali fulani kwa kuishi.

184
00:10:19,470 --> 00:10:24,130
Jinsi watu wengi kweli kutumika Craigslist? Tani ya wewe.

185
00:10:24,130 --> 00:10:30,960
Kuna pretty mbaya njia ya kuangalia hii, lakini hebu tuangalie hii.

186
00:10:35,130 --> 00:10:38,970
Nini tofauti kati ya img na pic? Je, mtu yeyote kuniambia?

187
00:10:41,350 --> 00:10:42,830
Kuna kweli ni tofauti hakuna.

188
00:10:42,830 --> 00:10:47,710
Wao maana hasa kitu kimoja, lakini wao wana tofauti maandiko kwa ajili yao kwa sababu fulani.

189
00:10:48,980 --> 00:10:53,560
Kama mimi bonyeza Ina Image, hakuna kinachotokea juu ya ukurasa.

190
00:10:53,560 --> 00:10:57,490
Mimi kwa kweli kuwa na bonyeza Tafuta tena kwa kitu kutokea.

191
00:10:57,490 --> 00:11:02,430
Nini kinaweza kuwa bora kubuni uamuzi kwamba inaweza kufanyika huko?

192
00:11:03,820 --> 00:11:08,030
Kama mimi nina kubonyeza chujio kwamba, mimi pengine wanataka kuchuja na hatua fulani

193
00:11:08,030 --> 00:11:09,970
au kwamba jamii fulani.

194
00:11:09,970 --> 00:11:14,450
Hivyo badala ya kuwa na vyombo vya habari Tafuta tena, mimi nilikuwa tu moja kwa moja kufanya uchujaji

195
00:11:14,450 --> 00:11:17,060
aina ya Google style ambapo wao kufanya hivyo mara moja.

196
00:11:17,060 --> 00:11:20,440
[Malan] Lakini si hutengeneza kama tumeona yao hivi sasa kuwa kimwili in

197
00:11:20,440 --> 00:11:23,170
kwa kupiga Ingiza angalau au kubonyeza kifungo?

198
00:11:23,170 --> 00:11:26,830
Kama wewe ve kuonekana yao hadi sasa, kwa kweli kuwa na bonyeza Kuwasilisha kwa kufanya mambo hayo.

199
00:11:26,830 --> 00:11:30,090
>> Lakini kama Tommy nitakuonyesha katika pili, kuna njia kweli kwa wewe

200
00:11:30,090 --> 00:11:33,010
vile kwamba wakati bonyeza juu ya jambo kwamba inaweza kutuma moja kwa moja

201
00:11:33,010 --> 00:11:38,840
tunaita ombi AJAX na kupata data nyuma na kuchuja matokeo yako mara moja.

202
00:11:38,840 --> 00:11:41,340
Kuna tani ya mambo ambayo ni makosa na interface hii.

203
00:11:41,340 --> 00:11:43,530
[Malan] Je, unaweza kutafuta Cambridge?

204
00:11:43,530 --> 00:11:47,030
Kuna kitu kidogo anomalous hapa ambapo huduma kuhusu Cambridge

205
00:11:47,030 --> 00:11:54,790
na bado wewe ni kupata Westford, Spring Hill, West Newton na kama.

206
00:11:54,790 --> 00:11:57,930
Pengine si bora. >> Pengine si bora.

207
00:11:57,930 --> 00:12:03,900
Jinsi gani mimi kuwa na uwezo wa kufanya uzoefu wa mtumiaji bora katika ukurasa huu?

208
00:12:03,900 --> 00:12:07,340
Ndiyo. >> [Mwanafunzi] Maelekezo.

209
00:12:07,340 --> 00:12:09,500
Sawa. Maelekezo katika aina gani ya hisia?

210
00:12:09,500 --> 00:12:14,630
[Mwanafunzi] Kwa mfano, kitu kwa watumiaji wa kwanza wakati ambao hawana hata kujua nini Craigslist ni

211
00:12:14,630 --> 00:12:17,320
au huna kujua nini wewe zinatakiwa kufanya.

212
00:12:17,320 --> 00:12:20,150
Haki. Hivyo kuelezea ni nini Craigslist ni juu ya ukurasa huu ni muhimu.

213
00:12:20,150 --> 00:12:23,490
Tunaweza kweli kuwaambia watumiaji nini ukurasa huu ni kweli kwa.

214
00:12:23,490 --> 00:12:27,090
Kama mimi tu kutembelea hii, naona rundo zima ya maeneo. Mimi wala hata kujua maana yake.

215
00:12:27,090 --> 00:12:29,730
Lakini muhimu zaidi, tu kuangalia interface hii,

216
00:12:29,730 --> 00:12:35,530
kumbuka nilikuwa na kitabu chini ya tani ya mambo ya kupata jamii fulani

217
00:12:35,530 --> 00:12:37,560
kwamba mimi kwa kweli kumjali kuhusu juu ya hili.

218
00:12:37,560 --> 00:12:39,820
Nini njia ya haraka mimi naweza kufanya hivyo? Ndiyo.

219
00:12:39,820 --> 00:12:43,290
[Mwanafunzi] Wagawe yao juu katika mashariki, magharibi ya mikoa. >> Sawa.

220
00:12:43,290 --> 00:12:47,460
Mimi naweza wagawe katika makundi zaidi ambayo inaweza kusaidia yangu kasi kuamua

221
00:12:47,460 --> 00:12:49,820
jinsi ya kupata mahali fulani.

222
00:12:49,820 --> 00:12:54,510
[Mwanafunzi] Weka orodha kunjuzi. >> Haki. Sawa.

223
00:12:54,510 --> 00:12:58,240
Mimi naweza kutumia drop-down menu kwa sababu tuna seti ya kudumu ya mambo

224
00:12:58,240 --> 00:13:00,100
na tunaweza kuwaonyesha katika drop-down menu.

225
00:13:00,100 --> 00:13:02,240
Kwa njia hiyo haina kuchukua nafasi sana kwenye screen.

226
00:13:02,240 --> 00:13:05,630
Lakini hata bora zaidi ya kwamba, tutafanya nini?

227
00:13:05,630 --> 00:13:09,220
Ndiyo. >> [Inaudible mwanafunzi majibu] >> Je, unaweza kusema kwamba tena? >> [Mwanafunzi] Tafuta sanduku.

228
00:13:09,220 --> 00:13:11,260
Yeah, sanduku ya utafutaji. Hiyo ni kubwa.

229
00:13:11,260 --> 00:13:16,430
Nini tunaweza kweli kufanya ni kama sisi kuangalia nyuma katika sanduku slides, tafuta.

230
00:13:16,430 --> 00:13:21,520
Oto kukamilisha. Rahisi sana kutafuta njia kupitia matokeo ya kuwa wewe unajua ni katika kuweka.

231
00:13:21,520 --> 00:13:25,980
Kama mimi kuanza kuandika BO, nionyeshe matokeo yote ambayo ndani BO yao.

232
00:13:25,980 --> 00:13:29,030
Hiyo njia naweza sana kupata urahisi wa mtu fulani Nataka kwenda kwa

233
00:13:29,030 --> 00:13:32,390
badala ya kuwa na kitabu kupitia orodha hii kubwa kweli kweli.

234
00:13:32,390 --> 00:13:37,450
>> Haya yote ni aina ya matunda kweli chini-kunyongwa kwamba mtu ambaye ni kutekeleza Craigslist

235
00:13:37,450 --> 00:13:42,500
unaweza kweli kufanya ili kufanya uzoefu kwenye tovuti mengi zaidi kwa mtumiaji yao maalum.

236
00:13:42,500 --> 00:13:46,370
Sawa. Kutosha kuzungumza juu ya Nje mbaya.

237
00:13:46,370 --> 00:13:49,410
Hebu majadiliano kuhusu Facebook.

238
00:13:50,880 --> 00:13:54,390
Wakati Facebook akatoka, na hasa photos Facebook,

239
00:13:54,390 --> 00:13:57,870
kulikuwa na kura ya huduma nyingine kwa wakati ambayo inaweza kufanya hasa mambo sawa.

240
00:13:57,870 --> 00:14:00,740
Wangeweza kuandaa photos yako katika albamu.

241
00:14:00,740 --> 00:14:03,360
Nini unaweza kufanya ni unaweza kupanga nao katika seti kama vizuri.

242
00:14:03,360 --> 00:14:06,070
Unaweza kupanga nao kwa sasa. Unaweza kufanya mambo haya yote fulani.

243
00:14:06,070 --> 00:14:11,710
Lakini haina mtu yeyote kujua nini alifanya Facebook photos kulipuka wakati hiyo ilitolewa?

244
00:14:11,710 --> 00:14:15,080
Ndiyo. >> [Mwanafunzi] Tags. Tags >>. Hasa.

245
00:14:15,080 --> 00:14:21,300
Tuna Milo zaidi ya hapa, ambao ni mbwa wetu mascot na kwamba bandana CS50.

246
00:14:21,300 --> 00:14:24,810
Unaweza kuona kwamba tuna kipengele tagging katikati.

247
00:14:24,810 --> 00:14:28,240
Na nini alifanya Facebook photos ili kuvutia kutoka kwa upande usability

248
00:14:28,240 --> 00:14:34,130
ni kwamba ni kweli kuruhusiwa watu kupitia hii kwa kuhusisha marafiki zao katika picha zao.

249
00:14:34,130 --> 00:14:37,680
Kwa Facebook, tangu tovuti yao ni hasa ya kijamii,

250
00:14:37,680 --> 00:14:40,750
ni kuhusu ujenzi wa aina hii ya anga ya kijamii.

251
00:14:40,750 --> 00:14:42,620
Hiyo kuboreshwa uzoefu wa photos mengi zaidi

252
00:14:42,620 --> 00:14:46,390
kwa sababu hawakuweza kweli kuanza kusema, "Hawa ni uhusiano kati ya watu,

253
00:14:46,390 --> 00:14:49,220
na haya ni photos kuhusu watu kweli huduma ya juu. "

254
00:14:49,220 --> 00:14:52,200
Sehemu yake ni pia aina narcissism.

255
00:14:52,200 --> 00:14:54,980
Watu kama kuwa tagi katika picha na vitu kama hivyo.

256
00:14:54,980 --> 00:14:58,510
Wakati kwamba si lazima nzuri binadamu bainishi,

257
00:14:58,510 --> 00:15:01,910
wakati huo huo ni msingi maamuzi mazuri kubuni

258
00:15:01,910 --> 00:15:04,860
kwa sababu watu kweli huduma kuhusu mambo kama hayo.

259
00:15:04,860 --> 00:15:07,190
Basi hiyo ni Facebook photos.

260
00:15:07,190 --> 00:15:09,800
>> Lakini hebu majadiliano Picha zaidi kwa ujumla.

261
00:15:09,800 --> 00:15:13,400
Mimi nina uhakika kura ya watu hapa kuwa na maoni kuhusu Facebook,

262
00:15:13,400 --> 00:15:16,430
wote mema kubuni maamuzi na maamuzi mabaya design.

263
00:15:16,430 --> 00:15:20,270
Basi hebu vent au kuwa na furaha.

264
00:15:23,480 --> 00:15:26,450
Kuja juu. Mimi najua yote ya wewe kutumia Facebook.

265
00:15:26,450 --> 00:15:30,970
Mtu ana kuwa na kitu kibaya cha kusema au kitu kizuri kwa kusema juu yake. Ndiyo.

266
00:15:30,970 --> 00:15:35,060
[Mwanafunzi] Katika kulisha habari kuna mambo mengi mimi si kweli huduma ya juu.

267
00:15:35,060 --> 00:15:37,740
kulisha habari gani kuonyesha mambo mengi unaweza huduma ya juu.

268
00:15:37,740 --> 00:15:41,660
Wewe una marafiki katika Facebook ambao una kukutana kwa miaka 2 au 3

269
00:15:41,660 --> 00:15:43,860
na unaweza kuona habari matokeo yao yanajitokeza habari kulisha yako

270
00:15:43,860 --> 00:15:45,870
na wewe si kweli huduma kuhusu hilo.

271
00:15:45,870 --> 00:15:48,700
Facebook ina kweli alifanya jitihada ya kufanya vizuri zaidi,

272
00:15:48,700 --> 00:15:53,150
na wameweza kweli walijaribu kushinikiza matokeo husika juu ya kulisha habari kama ya marehemu

273
00:15:53,150 --> 00:15:58,300
hivyo kweli kuona mambo kwa rafiki ambayo ni muhimu kwa wewe au rafiki yako wa karibu.

274
00:15:58,300 --> 00:16:01,110
Kitu kingine? Ndiyo.

275
00:16:01,110 --> 00:16:06,400
[Inaudible mwanafunzi majibu] >> Je, unaweza kusema kwamba tena?

276
00:16:06,400 --> 00:16:10,140
[Mwanafunzi] matangazo ni kiasi unobtrusive. >> Namna gani?

277
00:16:10,140 --> 00:16:16,370
[Inaudible mwanafunzi majibu] Wao hawana mwanga juu ya screen, kama vilima.

278
00:16:16,370 --> 00:16:17,760
Sawa. Hiyo ni nzuri.

279
00:16:17,760 --> 00:16:25,030
Kama unakumbuka Internet kutoka '90s - >> [Malan] nilikuwa huko. >> Alikuwa huko. [Kicheko]

280
00:16:25,030 --> 00:16:29,210
Unaweza kukumbuka GIFs flashing asili, sparkly mambo,

281
00:16:29,210 --> 00:16:31,570
Geocities style aina ya mambo.

282
00:16:31,570 --> 00:16:34,080
Hiyo ni kweli si mfano wa design nzuri

283
00:16:34,080 --> 00:16:36,690
kwa sababu ni kweli bughudha kutoka maudhui.

284
00:16:36,690 --> 00:16:39,590
Sanaa Yale tovuti kutumika kwa kuwa GIFs animated kama background zao

285
00:16:39,590 --> 00:16:41,800
na wewe hakuweza kusoma chochote kwenye ukurasa,

286
00:16:41,800 --> 00:16:44,870
lakini mimi nadhani mtu kweli waliongea nao, sasa ni tofauti kidogo.

287
00:16:44,870 --> 00:16:48,940
[Malan] Ni bora sasa. >> Ni bora sasa, kama unaweza kuona. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Kubwa tu, tu - Yeah. Sawa.

289
00:16:56,020 --> 00:17:00,560
>> Sehemu ya pia ni kufanya ukurasa wako uwezekano sana minimalist na sana kueleweka

290
00:17:00,560 --> 00:17:05,690
hivyo mambo ya mtiririko ukurasa katika njia ambayo ni mantiki sana na wala kupata katika njia ya kila mmoja.

291
00:17:05,690 --> 00:17:11,849
Aina gani ya mambo mengine ni mazuri kuhusu Facebook au mabaya kuhusu kuungana?

292
00:17:11,849 --> 00:17:15,730
Hebu tu kuwa na mazungumzo kubuni hapa.

293
00:17:19,470 --> 00:17:21,339
Oh. Wapi? Yeah.

294
00:17:21,339 --> 00:17:25,640
[Mwanafunzi] mpya Timeline mfumo utapata kutafuta profile ya mtu kuhusu nyuma yao.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Timeline ni jambo kubwa kwa sababu inakuwezesha rafiki yako bua

297
00:17:30,280 --> 00:17:33,300
nyuma wakati wao walikuwa katika shule ya sekondari.

298
00:17:35,160 --> 00:17:38,060
Timeline ni nzuri kwa sababu inakuwezesha kuchuja kupitia maudhui mengi kasi,

299
00:17:38,060 --> 00:17:41,500
inakuwezesha kupata mambo ambayo ingekuwa vinginevyo kuchukuliwa wewe kweli wakati muda mrefu kupata

300
00:17:41,500 --> 00:17:45,840
tu scrolling juu na chini, juu, juu, juu, juu, juu, kama kwenda nyuma wakati.

301
00:17:45,840 --> 00:17:48,910
Lakini basi kuna pia aina ya upande wa chini kwa kuwa katika suala la uzoefu mtumiaji.

302
00:17:48,910 --> 00:17:51,190
Nini kinaweza kuwa ni nani?

303
00:17:51,190 --> 00:17:56,780
Big neno kwamba huanza na P-R. >> [Mwanafunzi] faragha. >> Faragha, haki?

304
00:17:56,780 --> 00:17:59,970
Privacy ni kubwa user uzoefu suala hilo.

305
00:17:59,970 --> 00:18:07,190
Hii ni moja ya mambo I hate zaidi kuhusu Facebook sasa. [Kicheko]

306
00:18:07,190 --> 00:18:09,000
[Malan] Kama mimi kufanya sasa.

307
00:18:09,000 --> 00:18:11,380
Daudi hakuwa kutambua hii hasa kilichotokea hadi jana.

308
00:18:11,380 --> 00:18:14,560
Hivyo sasa yeye anajua kwamba kila wakati mimi kuzungumza naye najua amekuwa kupuuza yangu.

309
00:18:14,560 --> 00:18:16,880
[Malan] sehemu Awkward alikuwa Mimi kwa kweli kupuuza yake,

310
00:18:16,880 --> 00:18:21,040
na sikujua alijua nilikuwa kupuuza naye. [Kicheko]

311
00:18:21,040 --> 00:18:24,030
Privacy ni suala kubwa.

312
00:18:24,030 --> 00:18:28,670
Je, mtu yeyote hapa kuniambia nini inaweza kuwa mbaya kuhusu Facebook faragha

313
00:18:28,670 --> 00:18:32,270
badala ya ukweli kwamba wao kufanya mambo kama haya?

314
00:18:32,270 --> 00:18:37,240
Ni nini hasa kwa bidii na kufanya na heshima kwa Facebook faragha?

315
00:18:37,240 --> 00:18:40,340
Kwamba aina ya swali ni kuongoza.

316
00:18:41,680 --> 00:18:43,930
Ndiyo. >> [Mwanafunzi] Ficha picha yako kutoka kwa watu fulani.

317
00:18:43,930 --> 00:18:46,170
Haki. Hasa, kuficha picha yako kutoka kwa watu fulani.

318
00:18:46,170 --> 00:18:51,290
Wao wana hii ndogo, kidogo kifungo katika haki juu ambayo inakuwezesha kugeuza faragha ya picha.

319
00:18:51,290 --> 00:18:56,360
Faragha chaguzi zao ni sana mbalimbali kati ya aina tofauti ya menus.

320
00:18:56,360 --> 00:18:59,510
>> Wameweza wamezipata mengi zaidi kuhusu hilo hivi karibuni, lakini kutumika kuwa kesi

321
00:18:59,510 --> 00:19:04,870
kwamba kila wewe alitaka kuzuia rafiki yako kutoka photos kuona,

322
00:19:04,870 --> 00:19:08,280
ungependa kwenda kupitia mchakato ngumu sana 5-hatua ya kuwa kama,

323
00:19:08,280 --> 00:19:11,150
basi mimi bonyeza link hii, sasa napenda bonyeza tena, basi mimi bonyeza tena,

324
00:19:11,150 --> 00:19:13,420
napenda kutaja watu hawawezi kuona picha yangu.

325
00:19:13,420 --> 00:19:17,250
Hiyo siyo hasa nzuri kwa upande wa Facebook

326
00:19:17,250 --> 00:19:20,530
kwa sababu sana kuhusu uzoefu user ni kweli kuwapa uhuru

327
00:19:20,530 --> 00:19:22,460
kudhibiti kile watu wanaweza kuona.

328
00:19:22,460 --> 00:19:25,550
Sisi wito kudhibiti mtumiaji na uhuru.

329
00:19:25,550 --> 00:19:31,090
Kama wewe si kuruhusu watumiaji yako kufanya hivyo kwa njia ambayo ni ya ufanisi na Intuitive,

330
00:19:31,090 --> 00:19:34,570
kisha user uzoefu wako si kweli kwamba kubwa wakati wote.

331
00:19:34,570 --> 00:19:38,200
 Je, wewe guys kama kusema chochote kuhusu kuungana?

332
00:19:38,700 --> 00:19:41,420
Ninawezaje kuzima hii?

333
00:19:41,420 --> 00:19:46,290
[Ong] Huwezi kuzima hii, na kwamba ni kubwa usability flaw juu ya sehemu ya Facebook.

334
00:19:46,290 --> 00:19:49,410
Hii kipengele - Mimi kwa kweli inaonekana katika hayo jana -

335
00:19:49,410 --> 00:19:53,940
ni aidha kwamba huwezi kufanya hivyo au ni kuzikwa mahali fulani sana, na kina kirefu sana

336
00:19:53,940 --> 00:19:58,050
katika pande za Facebook sababu siwezi kufikiri jinsi ya kulemaza hii funktionalitet wakati wote.

337
00:19:58,050 --> 00:20:00,400
[Malan] Lakini wakati mwingine maamuzi haya ni dhahiri si

338
00:20:00,400 --> 00:20:03,890
kwa sababu wewe guys wameshatoa maoni mengi ya muhimu juu ya matumizi mbalimbali CS50

339
00:20:03,890 --> 00:20:05,710
na tovuti ambazo bila shaka anatumia.

340
00:20:05,710 --> 00:20:10,260
Sisi si kutekelezwa yote ya maombi hayo na mapendekezo.

341
00:20:10,260 --> 00:20:14,550
>> Sehemu ya kwamba ni kwa ajili ya kupata maombi mengi ambayo ni kazi ya muda,

342
00:20:14,550 --> 00:20:17,070
lakini wakati mwingine sisi tu kufanya uamuzi kama,

343
00:20:17,070 --> 00:20:19,830
"Asante kwa maoni, lakini sisi hawakubaliani."

344
00:20:19,830 --> 00:20:24,350
Hivyo ni jinsi gani wewe kweli kuamua nini unapaswa kufanya kama watumiaji yako kufikiri ni lazima kufanya kitu

345
00:20:24,350 --> 00:20:28,110
hata kama wewe kufanya si lazima?

346
00:20:28,110 --> 00:20:32,360
Ni uwiano mzuri kati ya kweli kusikiliza watumiaji nini wanasema wako

347
00:20:32,360 --> 00:20:35,840
na kweli kuwa baadhi ya aina ya mstari ambapo unaweza kusema,

348
00:20:35,840 --> 00:20:37,750
"Sisi siyo kwenda kufanya nini hawa watumiaji kusema."

349
00:20:37,750 --> 00:20:42,520
Na hasa, nadhani kulikuwa na quote Henry Ford kwamba sums up hii pretty vizuri.

350
00:20:42,520 --> 00:20:47,130
"Kama mimi aliwataka watu nini walitaka, wangeli walisema walitaka farasi kwa kasi zaidi."

351
00:20:47,130 --> 00:20:51,840
Je, mtu yeyote aina ya tease mbali kile quote kwamba kweli ina maana?

352
00:20:51,840 --> 00:20:56,060
Siyo tu kwamba watumiaji kujua nini wanataka,

353
00:20:56,060 --> 00:20:59,180
lakini ni zaidi ya kuwa -

354
00:20:59,180 --> 00:21:02,720
[Mwanafunzi] Wao hawajui nini iwezekanavyo.

355
00:21:02,720 --> 00:21:06,140
Katika sehemu ya wao hawajui nini inawezekana.

356
00:21:07,880 --> 00:21:11,440
Tease kuwa mbali kidogo zaidi. Nini maana na kwamba?

357
00:21:11,440 --> 00:21:21,340
[Inaudible mwanafunzi majibu]

358
00:21:21,340 --> 00:21:25,770
Hiyo ni nzuri. Nadhani nini sisi ni kujaribu kusema hapa ni kwamba watu kujua nini wanataka.

359
00:21:25,770 --> 00:21:28,050
Wanataka farasi kwa kasi zaidi.

360
00:21:28,050 --> 00:21:29,840
Nini kweli unataka ni uwezo wa kusonga kwa kasi,

361
00:21:29,840 --> 00:21:32,310
lakini wao si kweli kujua kati ambayo kwa kufikia hiyo.

362
00:21:32,310 --> 00:21:36,330
Wakati umefika kwa watumiaji yako na watumiaji yako kukuambia kitu

363
00:21:36,330 --> 00:21:39,700
na wakiwaambieni, "Tunataka makala haya na makala haya na makala haya,"

364
00:21:39,700 --> 00:21:42,650
wewe hawataki lazima kufikiri juu, "Hebu kwenda mbele

365
00:21:42,650 --> 00:21:44,720
"Na kutekeleza kile waziwazi kusema,"

366
00:21:44,720 --> 00:21:48,610
lakini nini nataka kufikiri kuhusu ni, "Ni aina gani ya mawazo ninaweza kupata kutoka kwamba?"

367
00:21:48,610 --> 00:21:50,450
Nini kweli unataka?

368
00:21:50,450 --> 00:21:55,560
>> Na kutoka huko nini unaweza kufanya ni kubuni kitu utakaokubalika maombi wale

369
00:21:55,560 --> 00:22:00,340
lakini si lazima katika njia kwamba mtumiaji anatarajia kuwa ameridhika.

370
00:22:00,340 --> 00:22:03,830
Hivyo kwa kitu kama miradi ya mwisho, katika suala halisi,

371
00:22:03,830 --> 00:22:07,900
nini heuristic muhimu linapokuja kufanya kitu bora,

372
00:22:07,900 --> 00:22:10,630
hasa kama designer ana hili kiburi kuhusu yeye

373
00:22:10,630 --> 00:22:14,360
ambapo wewe aina ya kujua nini bora, unaweza kuchukua maoni kutoka watumiaji wako,

374
00:22:14,360 --> 00:22:16,580
lakini jinsi gani unaweza kweli kwenda juu ya kupata maoni kwamba?

375
00:22:16,580 --> 00:22:21,610
Katika miradi ya mwisho, sana concretely, nini hutoa matokeo mojawapo hapa?

376
00:22:21,610 --> 00:22:25,030
Nini hutoa matokeo mojawapo - na mimi kwenda juu ya hili katika pili -

377
00:22:25,030 --> 00:22:29,190
hii ni mchakato wa kuandaa na kisha kupima na kisha iterating.

378
00:22:29,190 --> 00:22:32,020
Nini maana na kupima ni kawaida wakati wewe kubuni kitu

379
00:22:32,020 --> 00:22:36,970
unafikiri ni haki nzuri, kama, "Nina designer mkubwa Kila mtu anaenda upendo huu.".

380
00:22:36,970 --> 00:22:41,600
Na kisha kuiweka huko nje na watu si kweli kama ni kwa sababu fulani.

381
00:22:41,600 --> 00:22:46,820
Nini wewe kufanya ni wewe kuwa na kuchukua sehemu ya mambo ambayo watu kufanya kama

382
00:22:46,820 --> 00:22:49,180
na kufufua mambo ambayo watu hawapendi.

383
00:22:49,180 --> 00:22:53,080
Inaonekana kama mchakato dhahiri sana, lakini utaratibu huu wa mara kwa mara iterating

384
00:22:53,080 --> 00:22:55,980
juu ya nini wewe ve tayari kujengwa ni mchakato kwamba husaidia

385
00:22:55,980 --> 00:22:59,730
si tu kuboresha ujuzi wako mwenyewe kubuni lakini pia husaidia kuboresha kubuni

386
00:22:59,730 --> 00:23:03,790
hivyo kwamba watu kweli kufahamu bidhaa yako hata zaidi kuliko walivyofanya kabla.

387
00:23:03,790 --> 00:23:07,390
>> Nitakwenda juu zaidi mifano halisi ya nini unaweza kweli kufanya.

388
00:23:07,390 --> 00:23:11,390
Kama aina ya mfano wa mwisho wa bidhaa, hebu tuangalie Kayak.

389
00:23:11,390 --> 00:23:14,970
Kayak wakati alikuja nje ilikuwa sana, maarufu sana.

390
00:23:14,970 --> 00:23:18,760
Je, mtu yeyote nadhani kwa nini?

391
00:23:18,760 --> 00:23:20,950
Je, ni aina ya mambo, wewe kama kuhusu hili kama una kutumika ni

392
00:23:20,950 --> 00:23:23,990
au nini ni aina ya mambo kama huna?

393
00:23:23,990 --> 00:23:31,590
Ndiyo. >> [Inaudible mwanafunzi majibu] >> Sawa.

394
00:23:31,590 --> 00:23:34,730
Hiyo ni sehemu yake ni kuruhusu mtumiaji kuwa na hoja kwamba ni zaidi ya kujitanua

395
00:23:34,730 --> 00:23:38,150
ya moja restriktiva sana kama, "Una kuchukua kuanza tarehe yako ya

396
00:23:38,150 --> 00:23:39,810
"Na una pick mwisho tarehe yako."

397
00:23:39,810 --> 00:23:44,910
Kwa kweli, inakuwezesha kuwa rahisi kubadilika kuhusu hilo na inakupa yote ya ndege katika mbalimbali.

398
00:23:44,910 --> 00:23:46,730
Kitu kingine?

399
00:23:46,730 --> 00:23:50,530
[Mwanafunzi] Wao ni pamoja na ada katika bei.

400
00:23:50,530 --> 00:23:53,330
Wao kufanya ni pamoja na ada katika bei.

401
00:23:53,330 --> 00:23:56,720
kodi na mambo kweli kwenda moja kwa moja katika bei ya kwamba katika kushoto juu

402
00:23:56,720 --> 00:24:00,710
hivyo wewe si mkadanganywa katika kufikiri kwamba wewe ni kweli kulipa kwa ajili ya ndege $ 240

403
00:24:00,710 --> 00:24:03,280
wakati ni kweli $ 330.

404
00:24:03,280 --> 00:24:06,200
Kitu kingine? Ndiyo.

405
00:24:06,200 --> 00:24:10,140
[Inaudible mwanafunzi majibu]

406
00:24:10,140 --> 00:24:14,610
Mimi nina uhakika kama kweli basi wewe kufanya hivyo.

407
00:24:14,610 --> 00:24:18,310
Nipate kuwa na makosa.

408
00:24:18,310 --> 00:24:23,360
Hiyo inaweza kuwa kitu ya kuvutia kama unataka kuweka uzito zaidi juu ya filters fulani

409
00:24:23,360 --> 00:24:27,000
ili kushinikiza matokeo kuhusiana na kwamba chujio hadi juu.

410
00:24:27,000 --> 00:24:31,920
Lakini yeyote anaweza kuniambia nini ili maalum kuhusu upande huu wa kushoto?

411
00:24:31,920 --> 00:24:39,540
Jinsi gani jadi kuangalia juu ya ndege juu ya huduma ya Internet kabla ya hii?

412
00:24:41,600 --> 00:24:44,650
>> Ndiyo. >> [Inaudible mwanafunzi majibu] >> Je, unaweza kusema kwamba -

413
00:24:44,650 --> 00:24:47,530
[Mwanafunzi] Kila ndege. >> Yeah. Ndege kila ina tovuti yake mwenyewe.

414
00:24:47,530 --> 00:24:50,110
Hii konsoliderar mambo. Na?

415
00:24:50,110 --> 00:24:52,190
[Mwanafunzi] Unajua nini hasa wakati wewe ni kuondoka.

416
00:24:52,190 --> 00:24:54,460
Huwezi kujua nini hasa wakati wewe ni kuondoka,

417
00:24:54,460 --> 00:24:59,380
lakini kuhusiana na filters hasa.

418
00:25:00,710 --> 00:25:03,540
Hebu vuta hadi Kayak.

419
00:25:11,490 --> 00:25:14,020
Ee Mungu, pop-ups. Bad user uzoefu.

420
00:25:14,020 --> 00:25:17,230
Nini kinatokea wakati mimi hoja hii slider?

421
00:25:17,230 --> 00:25:21,010
[Mwanafunzi] Automatic updates. >> [Ong] Automatic updates.

422
00:25:21,010 --> 00:25:23,440
Hiyo ni kitu ambacho ni muhimu sana.

423
00:25:23,440 --> 00:25:25,380
Kabla ya hii, kila alitaka kuangalia juu ya ndege,

424
00:25:25,380 --> 00:25:28,410
wewe alikuwa na kuweka katika mahali mchango wako, pato yako mahali, vyombo vya habari Search,

425
00:25:28,410 --> 00:25:31,190
ingekuwa mchakato huo na kuonyesha matokeo yako.

426
00:25:31,190 --> 00:25:34,120
Kama alitaka kubadili hoja yako, ungependa kuwa na vyombo vya habari nyuma mara mbili,

427
00:25:34,120 --> 00:25:39,770
kuingia katika swala mpya kutoka mwanzo, na kisha kufanya hivyo tena na tena.

428
00:25:39,770 --> 00:25:43,910
Jambo zuri kuhusu kitu kama hii ni inatumia sana [unintelligible] kitu katikati.

429
00:25:43,910 --> 00:25:46,230
Kila wewe kufanya kitu kama hii, ni shina mbali ombi

430
00:25:46,230 --> 00:25:48,420
na kuirudisha wewe matokeo yote mara moja.

431
00:25:48,420 --> 00:25:51,680
Hii aina ya maoni ya haraka ni kitu ambacho alifanya Kayak wildly maarufu

432
00:25:51,680 --> 00:25:55,910
kwa sababu ni kweli rahisi kwa mimi kubadili tu hoja yangu

433
00:25:55,910 --> 00:25:58,890
na kufikiri mambo ambayo ni karibu mbalimbali hasa

434
00:25:58,890 --> 00:26:01,950
bila ya kwenda na kurudi, na kurudi, na kurudi.

435
00:26:01,950 --> 00:26:05,200
Basi hizi ni kila aina ya mambo wewe nataka kufikiri kuhusu wakati wewe ni kubuni tovuti yako.

436
00:26:05,200 --> 00:26:08,930
Nawezaje kufanya hivyo ufanisi sana kwa watumiaji yangu kupitia chochote ni kazi ya

437
00:26:08,930 --> 00:26:13,010
na kupata lengo lao eventual haraka iwezekanavyo?

438
00:26:13,010 --> 00:26:16,430
[Malan] Na kwa uhakika wa Yusufu mapema kuhusu watumiaji si lazima kujua nini wanataka,

439
00:26:16,430 --> 00:26:18,640
kulingana na kile wewe guys sasa kujua kuhusu HTML

440
00:26:18,640 --> 00:26:22,780
na una checkboxes, redio vifungo, chagua menus, mashamba ya pembejeo na kama,

441
00:26:22,780 --> 00:26:26,140
jinsi gani unaweza kutekeleza dhana ya kuokota muda kuanza kwa ndege?

442
00:26:26,140 --> 00:26:30,030
>> Ambayo ya taratibu hizo mbalimbali UI utakazotumia?

443
00:26:30,030 --> 00:26:34,100
Kama wewe tu kujua kiasi cha HTML kwamba alikuwa akifundisha kabla

444
00:26:34,100 --> 00:26:39,070
na unajua pembejeo ni redio vifungo, checkboxes, kushuka Downs, na sanduku pembejeo,

445
00:26:39,070 --> 00:26:43,320
gani uchaguzi wako asili zimekuwa kwa kuokota tarehe?

446
00:26:43,320 --> 00:26:48,670
[Mwanafunzi] Pembejeo. >> Pembejeo. Au labda hata tone-chini na wote wa tarehe, sahihi?

447
00:26:48,670 --> 00:26:53,170
Hivyo, pamoja na ngumu zaidi UI taratibu kama hii ya upande wa kushoto kwamba unaweza kutekeleza,

448
00:26:53,170 --> 00:26:55,500
unaweza kufanya mchakato huu zaidi Intuitive na slider

449
00:26:55,500 --> 00:27:01,020
kwa sababu muda ni kuendelea, na watu kwa kawaida si kufikiria hivyo katika suala la chunks Diskret.

450
00:27:01,020 --> 00:27:04,950
Wote haki. Jambo la mwisho.

451
00:27:04,950 --> 00:27:07,370
Kumi usability heuristics.

452
00:27:07,370 --> 00:27:10,820
Mambo yote kuongelea pengine kuanguka chini ya moja ya makundi haya.

453
00:27:10,820 --> 00:27:14,420
Kama wewe kwenda link hii, ambayo maeneo itakuwa posted online,

454
00:27:14,420 --> 00:27:18,900
utasikia kweli kuwa na uwezo wa, kama wewe kubuni tovuti yako, keep heuristics haya katika akili

455
00:27:18,900 --> 00:27:21,330
na sheria hizi za thumb.

456
00:27:21,330 --> 00:27:26,610
Ajili ya miradi yako, nini mimi zinaonyesha kufanya ili kubuni programu yako bora

457
00:27:26,610 --> 00:27:28,850
ni kufanya karatasi prototyping kwanza.

458
00:27:28,850 --> 00:27:32,150
Wakati wewe ni kufikiri kuhusu maombi yako, kwa haraka sana mchoro nini unataka kuangalia kama

459
00:27:32,150 --> 00:27:36,230
na kuhakikisha masanduku yote ni kupangwa katika njia ambayo ni Intuitive sana kwa mtumiaji kwa kutumia

460
00:27:36,230 --> 00:27:39,820
na hata kuonyesha prototypes haya karatasi kwa rafiki yako na kuanza makundi mwelekeo.

461
00:27:39,820 --> 00:27:44,230
Kupata tu watu 2 au 3 pamoja na kuwaomba tu bomba kwenye prototypes haya karatasi,

462
00:27:44,230 --> 00:27:47,650
na kuwaonyesha skrini mpya ili kuona kama kweli kuelewa nini kinaendelea.

463
00:27:47,650 --> 00:27:50,680
>> Nini unataka kufanya ni kuwapa kazi, kuwahamasisha kwamba kazi,

464
00:27:50,680 --> 00:27:53,270
na tu kuwapa programu na waache matumizi yake.

465
00:27:53,270 --> 00:27:56,530
Usiwape maelekezo zaidi ya hapo.

466
00:27:56,530 --> 00:28:00,920
Unataka kweli waache kuingiliana na programu yako kwa njia ambayo inakuwezesha kuona

467
00:28:00,920 --> 00:28:03,870
jinsi gani wangeweza kuitumia kama haukuwa amesimama karibu nao.

468
00:28:03,870 --> 00:28:05,250
Na kwamba ni muhimu sana.

469
00:28:05,250 --> 00:28:08,780
Kwamba nitakupa kura ya ufahamu kama ni watu kupata kuzunguka mambo fulani fulani kwa

470
00:28:08,780 --> 00:28:10,560
kwa njia ambayo sikuwa na nia yao?

471
00:28:10,560 --> 00:28:14,680
Je, wao kutumia utaratibu wa UI hasa kwenye screen

472
00:28:14,680 --> 00:28:17,490
katika njia ambayo ni aina ya hacky?

473
00:28:17,490 --> 00:28:22,020
Sikuwa na nia kwa wao kufanya hivyo.

474
00:28:22,020 --> 00:28:23,940
Na mara moja wewe ni kosa na kwamba, unataka nini cha kufanya?

475
00:28:23,940 --> 00:28:26,010
Design yako miamba, haki?

476
00:28:26,010 --> 00:28:29,600
Nini unataka kufanya ni unataka kuendeleza na kisha kufanya kwamba mchakato juu tena.

477
00:28:29,600 --> 00:28:32,110
Hivyo kuonyesha kuwa na marafiki mara moja umefanya maendeleo yake, mtihani,

478
00:28:32,110 --> 00:28:36,630
kuendeleza, mtihani, kuendeleza, mtihani, iterate, juu na juu na mbele.

479
00:28:36,630 --> 00:28:39,720
Design ni sana iterative mchakato katika maana hii.

480
00:28:39,720 --> 00:28:43,280
Wewe kweli kuwa na kujenga kitu fulani na kisha kutambua mambo kuhusu hilo

481
00:28:43,280 --> 00:28:46,520
kwamba hawakujua kabla na kwenda nyuma na kuboresha kutoka hilo.

482
00:28:46,520 --> 00:28:50,890
Sasa, kama kwa sehemu ya maendeleo, kwamba ni nini Tommy ni kwenda kuonyesha baada ya mapumziko

483
00:28:50,890 --> 00:28:53,220
na jinsi ya unavyoweza kuwa na uwezo wa kutekeleza kitu kama oto kukamilisha

484
00:28:53,220 --> 00:28:56,610
katika njia ambayo ni haki rahisi.

485
00:28:57,440 --> 00:28:59,550
[Malan] Kama Tommy kuwamilikisha hapa, swali basi.

486
00:28:59,550 --> 00:29:03,780
mengi ya Nje mwanzo - na wakati Joseph alisema miaka ya 1990 style tovuti,

487
00:29:03,780 --> 00:29:07,640
ilikuwa utekelezaji ambapo kama alitaka kuchagua muda kuanza na wakati wa mwisho,

488
00:29:07,640 --> 00:29:10,380
kusema ukweli, nyuma katika siku na hata kwenye baadhi ya tovuti ya leo,

489
00:29:10,380 --> 00:29:13,220
njia ya kufanya hili ni pick saa kutoka tone-chini,

490
00:29:13,220 --> 00:29:15,910
pick dakika kwa tone-chini, labda wewe kuchagua AM, PM,

491
00:29:15,910 --> 00:29:17,440
na kisha wewe kufanya hivyo mara 3 zaidi.

492
00:29:17,440 --> 00:29:19,920
Na hivyo na 6 Clicks na labda baadhi scrolling

493
00:29:19,920 --> 00:29:24,000
user yako kweli anaweza kutoa baadhi ya aina ya tarehe na / au mbalimbali wakati katika maana hii.

494
00:29:24,000 --> 00:29:27,920
>> Hivyo dhahiri suboptimal na bado hivi sasa tumeona uwezo hakuna expressive

495
00:29:27,920 --> 00:29:30,330
yoyote ya lugha sisi Tumeangalia katika kufanya kitu sexier

496
00:29:30,330 --> 00:29:32,620
kama hii slider ya kuanza muda na wakati wa mwisho.

497
00:29:32,620 --> 00:29:36,290
Lakini kama unadhani nyuma wiki 0 wakati kuongelea Scratch,

498
00:29:36,290 --> 00:29:39,080
kuna pia kulikuwa na si vilivyoandikwa kwamba tu walifanya mambo fulani.

499
00:29:39,080 --> 00:29:42,700
Wewe kweli tu alikuwa misingi hizi kama matanzi na hali na kama.

500
00:29:42,700 --> 00:29:46,910
Hivyo aina ya tu kufikiri sana abstractly sasa, huru wa maelezo ya HTML,

501
00:29:46,910 --> 00:29:51,260
ni nini hasa kinachoendelea na kitu kama hii wakati mwanzo na mwisho slider muda?

502
00:29:51,260 --> 00:29:54,960
Wakati mimi hoja mouse yangu na mimi bonyeza ishara kwamba kidogo karoti upande wa kushoto

503
00:29:54,960 --> 00:29:59,220
na kuanza akawatoa, programmatically, ni nini unataka kuwa na uwezo wa kutekeleza

504
00:29:59,220 --> 00:30:01,000
kufanya kutokea?

505
00:30:01,000 --> 00:30:04,920
Ni maswali gani, nini Boolean misemo gani unataka kuwa na uwezo wa kuuliza?

506
00:30:04,920 --> 00:30:06,930
Nini kweli kinachoendelea? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Mwanafunzi] wapi msimamo wa mshale? >> Good. Ambapo ni msimamo wa mshale?

508
00:30:10,080 --> 00:30:11,970
Hiki ni kitu ambacho sisi zinahitajika kueleza nyuma katika Scratch,

509
00:30:11,970 --> 00:30:14,690
kama ni mara ya msingi ya eneo au hata rangi au kama.

510
00:30:14,690 --> 00:30:18,410
Unaweza kukumbuka milele hivyo kwa ufupi juu ya Jumatatu kulikuwa mambo yote haya kuitwa matukio

511
00:30:18,410 --> 00:30:22,370
katika dunia ya mtandao, na hivyo kuna mambo kama onclick na onkeypress

512
00:30:22,370 --> 00:30:25,960
na onkeyup na onmouseover na onmouseout.

513
00:30:25,960 --> 00:30:29,130
Hivyo kutambua kwamba hata mambo haya tumekuwa kuchukua kwa nafasi ya juu ya Mtandao

514
00:30:29,130 --> 00:30:32,190
pamoja na maeneo kama Facebook na Gmail, hata kama huna wazo

515
00:30:32,190 --> 00:30:34,890
jinsi gani uwezekano kutekeleza kwamba kwa sababu kuna kitu hata kama ni katika hotuba

516
00:30:34,890 --> 00:30:38,570
Tatizo au Set 7, kutambua kwamba kwa misingi haya exact,

517
00:30:38,570 --> 00:30:41,090
na HTTP na vigezo na GET na POST,

518
00:30:41,090 --> 00:30:44,010
kwa msingi pembejeo HTML kwamba sisi Tumeangalia katika hivi sasa

519
00:30:44,010 --> 00:30:47,690
na katika wakati huu na mifumo ya programu kwamba Tommy kuhusu kuanzisha

520
00:30:47,690 --> 00:30:51,300
unaweza kuanza kueleza mwenyewe tu kama alivyofanya katika wiki 0

521
00:30:51,300 --> 00:30:53,800
kwa sana intuitively dragging na kuacha.

522
00:30:53,800 --> 00:30:58,950
>> Hivyo kwa kuwa alisema, Tommy MacWilliam na baadhi ya vipande puzzle mpya kwa ajili yetu kwa ajili ya mtandao.

523
00:30:58,950 --> 00:31:03,450
Wote haki. Jina langu ni Tommy na mimi nina kwenda kuzungumza kuhusu JavaScript.

524
00:31:03,450 --> 00:31:07,150
Tu disclaimer: Nina mawazo kuwa JavaScript ni bora programu lugha

525
00:31:07,150 --> 00:31:09,010
katika dunia nzima nzima.

526
00:31:09,010 --> 00:31:11,940
Kuna kura ya watu ambao hawakubaliani na mimi, lakini ni ajabu tu.

527
00:31:11,940 --> 00:31:16,330
Mara baada ya kurudi nyuma na C, kama una kuandika C kwa darasa lingine au lugha nyingine,

528
00:31:16,330 --> 00:31:19,780
ni kweli tu frustrating katika maelezo yote ngazi ya chini una kupata bogged chini in

529
00:31:19,780 --> 00:31:23,050
Hivyo kama wewe ni milele huzuni kuhusu jinsi annoying C ni kuandika,

530
00:31:23,050 --> 00:31:25,130
tu kwenda nyuma, kuandika baadhi JavaScript. Ni nirvana.

531
00:31:25,130 --> 00:31:27,980
Wewe utakuwa kujisikia vizuri zaidi kuhusu siku yako mbaya.

532
00:31:27,980 --> 00:31:31,900
mengi ya uchawi wa JavaScript linatokana na uwezo wake wa kuendesha mambo

533
00:31:31,900 --> 00:31:33,730
kwamba tayari juu ya ukurasa.

534
00:31:33,730 --> 00:31:38,520
Wakati sisi aliandika wetu scripts PHP, wao waliuawa katika server,

535
00:31:38,520 --> 00:31:42,270
na hatimaye kwamba PHP script pengine pato baadhi HTML.

536
00:31:42,270 --> 00:31:45,860
Hiyo HTML alitumwa kwa mteja, na kisha kwamba alikuwa ni.

537
00:31:45,860 --> 00:31:50,180
Kama PHP alitaka kuongeza kifungo kwa ukurasa, kwa mfano, ni kweli hawezi kufanya hivyo.

538
00:31:50,180 --> 00:31:54,350
Ingekuwa kwa kutoa mpya nzima HTML faili na kutuma kwa kivinjari.

539
00:31:54,350 --> 00:31:57,840
Kwa JavaScript tunajua kwamba tunaweza update mambo wakati wao uko tayari kwenye ukurasa,

540
00:31:57,840 --> 00:32:00,840
na kwa sababu hii tunaweza kutoa zaidi ya papo maoni,

541
00:32:00,840 --> 00:32:06,150
ambayo itakuwa kweli kuboresha uzoefu user kwenye tovuti yetu.

542
00:32:06,150 --> 00:32:09,330
Tu recap ya haraka ya selectors JavaScript.

543
00:32:09,330 --> 00:32:11,590
Sisi tunajua kwamba wakati sisi download ukurasa HTML,

544
00:32:11,590 --> 00:32:13,890
ambayo inaenda kuwakilishwa katika DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM kumbuka ni mti huu kubwa ambapo mambo ni kuhusiana katika Hierarkia hii kubwa.

546
00:32:19,340 --> 00:32:21,810
Wakati sisi kazi na database katika pset 7,

547
00:32:21,810 --> 00:32:26,280
moja ya mambo ya kwanza sisi alihitaji kujua jinsi ya kufanya ni swala database.

548
00:32:26,280 --> 00:32:29,060
Sisi tuna hii watumiaji wakubwa meza, na wakati mwingine sisi nataka tu kusema,

549
00:32:29,060 --> 00:32:33,260
"Mimi nataka tu baadhi ya watumiaji hawa wanaofanana baadhi ya hali."

550
00:32:33,260 --> 00:32:36,020
Vile vile, wakati tuna DOM tunahitaji baadhi ya njia ya querying yake.

551
00:32:36,020 --> 00:32:39,490
Tunahitaji baadhi ya njia ya kusema, "Nataka wote wa vifungo ili kuangalia kama hii

552
00:32:39,490 --> 00:32:41,860
"Au yote ya picha kwenye ukurasa."

553
00:32:41,860 --> 00:32:44,330
Na hawa selectors kuruhusu sisi kufanya hivyo.

554
00:32:44,330 --> 00:32:45,690
Hivyo tu recap haraka.

555
00:32:45,690 --> 00:32:50,770
Hii moja ya kwanza hapa, hii # kuwasilisha, kile ni kwamba anaenda kuchagua? Je, mtu yeyote kumbuka?

556
00:32:50,770 --> 00:32:54,880
[Inaudible mwanafunzi majibu] >> Yeah, kwa uhakika.

557
00:32:54,880 --> 00:32:59,510
Hii ni kwenda kuchagua kipengele kwenye ukurasa kuwa ana ID ya kuwasilisha.

558
00:32:59,510 --> 00:33:03,470
Na ili tag hash anasema selector hii ni ya kwenda kufanya kazi na Vitambulisho.

559
00:33:03,470 --> 00:33:07,630
Vipi kuhusu moja ya pili, hii kujivuna., Itakuwaje kwamba kuchagua?

560
00:33:11,360 --> 00:33:15,180
Yeah. >> [Mwanafunzi] Hatari. >> Hasa. Hii sasa ni kwenda kuchagua na darasa.

561
00:33:15,180 --> 00:33:18,840
tofauti kati ya ID na darasa hapa ni ujumla ID lazima ziwe za kipekee

562
00:33:18,840 --> 00:33:20,820
ndani ya kila nafasi juu ya wewe ni kutafuta.

563
00:33:20,820 --> 00:33:23,080
Hivyo kama wewe walikuwa searching juu ya mtandao ukurasa mzima,

564
00:33:23,080 --> 00:33:27,740
wewe kweli lazima tu kuwa kipengele 1 na ID kwamba fulani, hivyo katika kesi hii ya kuwasilisha.

565
00:33:27,740 --> 00:33:31,330
Pamoja na madarasa, kwa upande mwingine, tunaweza kuwa na zaidi ya 1 ya kipengele katika ukurasa huo huo

566
00:33:31,330 --> 00:33:33,130
kwa darasa moja.

567
00:33:33,130 --> 00:33:36,580
Hii inaweza kuwa na manufaa kwa kusema nataka kuchagua kila kitu ambacho katikati juu ya ukurasa

568
00:33:36,580 --> 00:33:38,450
badala tu ya 1 kitu.

569
00:33:38,450 --> 00:33:40,310
>> Na hatimaye, hii moja ya mwisho hapa ni ngumu zaidi kidogo,

570
00:33:40,310 --> 00:33:43,890
lakini ni nini hii kwenda kuchagua kutoka DOM?

571
00:33:46,650 --> 00:33:48,810
[Inaudible mwanafunzi majibu] >> gani hiyo?

572
00:33:48,810 --> 00:33:53,250
[Mwanafunzi] Chochote kwamba tag. >> Tuna sehemu 2 hapa.

573
00:33:53,250 --> 00:33:58,070
sehemu ya pili ni kwenda kusema nataka kuchagua tags hizi na tag ya pembejeo,

574
00:33:58,070 --> 00:34:00,730
hivyo kipengele yoyote kwamba ni tag pembejeo.

575
00:34:00,730 --> 00:34:03,080
Lakini mimi sitaki tu kuchagua wote wa pembejeo

576
00:34:03,080 --> 00:34:05,170
kwa sababu kitu kama button kuwasilisha inaweza kuwa pembejeo

577
00:34:05,170 --> 00:34:08,409
na kitu kama sanduku Nakala inaweza kuwa pembejeo.

578
00:34:08,409 --> 00:34:11,909
Hivyo, pamoja na mabano mraba haya mimi kusema mimi nataka tu kuchagua vipengele wale

579
00:34:11,909 --> 00:34:14,110
ambayo ni ya maandishi aina.

580
00:34:14,110 --> 00:34:17,400
Mahali fulani katika lebo yangu HTML nina sifa kuitwa aina,

581
00:34:17,400 --> 00:34:19,750
na thamani ya sifa ya kuwa ina kuwa maandishi.

582
00:34:19,750 --> 00:34:21,340
Hivyo vipi kuhusu sehemu hii ya kwanza hapa?

583
00:34:21,340 --> 00:34:25,489
neno la kwanza la selector hii ni aina basi nina nafasi na kisha sehemu hii pembejeo.

584
00:34:25,489 --> 00:34:29,620
Je, hiyo kufanya, kuweka sura mbele yake?

585
00:34:33,409 --> 00:34:35,860
Hii ni kwenda kimsingi kikomo swala yetu.

586
00:34:35,860 --> 00:34:38,510
Inaweza kuwa kesi kwamba tuna baadhi ya pembejeo kwa ukurasa

587
00:34:38,510 --> 00:34:41,080
ambayo si wana wa fomu.

588
00:34:41,080 --> 00:34:46,150
Nini hii kufanya ni hii watasema mimi nataka tu tags pembejeo kwamba kuwa mahali fulani juu yao

589
00:34:46,150 --> 00:34:49,030
baadhi ya kipengele mzazi wa fomu.

590
00:34:49,030 --> 00:34:52,100
Na hivyo kwa njia hii tunaweza kufanya maswali haya zaidi kihierarkia

591
00:34:52,100 --> 00:34:55,000
hivyo hatuna tu kuchagua kila kitu vinavyolingana selector aliyopewa.

592
00:34:55,000 --> 00:35:00,760
Tunaweza aina ya kikomo upeo wa swala ambalo kwa kitu kingine.

593
00:35:00,760 --> 00:35:04,000
Hivyo sasa kwamba sisi kujua jinsi ya kuchagua vipengele kwenye ukurasa,

594
00:35:04,000 --> 00:35:06,780
hebu majadiliano kidogo kuhusu AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX ni kifupi bado trendy sana kwamba anasimama kwa JavaScript Asynchronous na XML.

596
00:35:12,270 --> 00:35:15,640
Ni hivyo tu hutokea kwamba XML ni baadhi tu ya njia ya kuwakilisha data.

597
00:35:15,640 --> 00:35:20,920
>> Kwamba aina ya umaarufu waliopotea hivi karibuni, hivyo X katika AJAX si kutumika wakati wote.

598
00:35:20,920 --> 00:35:26,220
Kimsingi, nini AJAX unaturuhusu kufanya ni kufanya maombi HTTP

599
00:35:26,220 --> 00:35:28,620
kutoka muktadha wa JavaScript.

600
00:35:28,620 --> 00:35:32,310
Wakati tuko katika kivinjari wetu na sisi ni navigering kuzunguka kurasa na sisi bonyeza kiungo,

601
00:35:32,310 --> 00:35:37,790
nini browser yetu ni kwenda kufanya ni kufanya ombi HTTP chochote kiungo sisi bonyeza.

602
00:35:37,790 --> 00:35:41,670
Lakini si kwamba daima bora kwa sababu kama hiyo kesi, basi kama Daudi alikuwa akisema,

603
00:35:41,670 --> 00:35:45,220
sisi daima na kufanya watumiaji bonyeza kifungo kuwasilisha au bonyeza kiungo

604
00:35:45,220 --> 00:35:50,380
ili kufanya kitu chochote kutokea ambayo inaenda kuhusisha ombi HTTP.

605
00:35:50,380 --> 00:35:54,160
Hivyo, pamoja na AJAX tunaweza kufanya maombi hayo kwa niaba ya JavaScript.

606
00:35:54,160 --> 00:35:57,020
Hiyo ina maana kila mtumiaji inaingiliana na ukurasa au kitu chochote kinachotokea,

607
00:35:57,020 --> 00:36:01,780
tunaweza kweli kufanya ombi kimpango na faili nyingine PHP kwenye tovuti yetu

608
00:36:01,780 --> 00:36:06,280
au kitu kingine chochote na kupata data kwamba faili kwamba mtemi.

609
00:36:06,280 --> 00:36:09,860
Hebu tuangalie mfano wa AJAX.

610
00:36:09,860 --> 00:36:16,140
Hii ni Fedha zetu CS50 ukurasa ambayo hopefully baadhi yetu ni ukoo.

611
00:36:16,140 --> 00:36:21,790
Tukiangalia HTML ya ukurasa huu, tunaona hapa kwamba nimepata aliongeza mambo machache,

612
00:36:21,790 --> 00:36:23,820
moja ambayo Nimekupa fomu hii ID.

613
00:36:23,820 --> 00:36:26,480
Nilivyosema id = "fomu-quote".

614
00:36:26,480 --> 00:36:31,910
Nimekuwa kufanyika hii kwa sababu tu ni kwenda kufanya hii kidogo rahisi kuchagua kutoka DOM

615
00:36:31,910 --> 00:36:35,090
tangu siwezi kufanya tu hoja rahisi sana.

616
00:36:35,090 --> 00:36:38,960
Nini nataka kufanya hapa ni nataka kurekebisha baadhi tatizo na Fedha CS50.

617
00:36:38,960 --> 00:36:41,550
Hivyo kama sisi kwenda finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
kila wakati nataka kupata quote, nina bonyeza hii Get Quote kifungo,

619
00:36:45,700 --> 00:36:48,960
na kwamba Kupata Quote kifungo basi inachukua yangu kwenye ukurasa mwingine nzima.

620
00:36:48,960 --> 00:36:52,400
Na kama nataka mwingine quote, nina hit button Nyuma na kisha ninapoandika katika,

621
00:36:52,400 --> 00:36:54,480
Mimi kupata quote, na mimi hit button Back.

622
00:36:54,480 --> 00:36:56,840
Hii kweli ni si bora user uzoefu.

623
00:36:56,840 --> 00:37:01,570
Nani ingekuwa kweli kutumia tovuti kama ni kuwa mwepesi wa kupata bei ya hisa?

624
00:37:01,570 --> 00:37:05,630
Basi nini tunataka kufanya na AJAX ni kuondoa kwamba hatua ya kwenda tofauti ukurasa

625
00:37:05,630 --> 00:37:08,410
ili kuona matokeo.

626
00:37:08,410 --> 00:37:11,240
>> Nini sisi ni kweli tu kuomba ni kwamba bei kweli ndogo,

627
00:37:11,240 --> 00:37:14,240
na kwamba tu kiasi kidogo cha kweli data.

628
00:37:14,240 --> 00:37:17,400
Hivyo hakuna haja ya mimi kwenda mwingine mzima HTML ukurasa,

629
00:37:17,400 --> 00:37:20,670
download nzima mwezi kundi ya HTML, labda download baadhi ya picha zaidi,

630
00:37:20,670 --> 00:37:24,410
baadhi nyingine CSS files tu kwa ajili yangu na kujibu swali rahisi sana

631
00:37:24,410 --> 00:37:27,810
ya jinsi ya kiasi gani hii gharama ya hisa.

632
00:37:27,810 --> 00:37:31,000
Pamoja na AJAX tunaweza kufanya hii rahisi sana.

633
00:37:31,000 --> 00:37:36,400
Tunaona hapa chini kwamba mimi nina kuunganisha katika faili JavaScript kuitwa quote.js.

634
00:37:36,400 --> 00:37:40,140
Hebu kweli kufungua faili. Si huko.

635
00:37:42,610 --> 00:37:45,860
Wote wa files yangu JavaScript ni kwenda kuwa iko katika HTML

636
00:37:45,860 --> 00:37:47,630
hivyo kwamba browser mtandao unaweza kupata hiyo.

637
00:37:47,630 --> 00:37:50,330
Kisha sisi kuwa directory tofauti hapa kwa JavaScript,

638
00:37:50,330 --> 00:37:54,340
na sasa hapa ni quote.js.

639
00:37:54,340 --> 00:38:00,930
Katika juu ya faili hii hii anasema hapa kwamba mimi nataka kusubiri kwa ukurasa mzima kwa kupakiwa

640
00:38:00,930 --> 00:38:04,830
kabla ya mimi kujaribu kufanya kitu chochote. Kwa nini ni kwamba lazima?

641
00:38:04,830 --> 00:38:08,650
Ni zinageuka kuwa Kilichofuata naenda kufanya hapa ni kuanza kuangalia kwa kipengele

642
00:38:08,650 --> 00:38:10,810
kwamba mechi baadhi selector.

643
00:38:10,810 --> 00:38:15,600
Kama JavaScript hii ni milele kunyongwa kabla ya kipengele hiki ni kubeba juu ya ukurasa,

644
00:38:15,600 --> 00:38:17,820
basi kila kitu mimi kujaribu kufanya ni si kwenda kufanya kazi

645
00:38:17,820 --> 00:38:20,580
kwa sababu mimi naenda kujaribu kuchagua kitu ambacho si huko bado.

646
00:38:20,580 --> 00:38:23,780
Hivyo hii line up juu anasema mimi nataka wewe kusubiri mpaka kila kitu ni kubeba

647
00:38:23,780 --> 00:38:28,030
hivyo sisi ni uhakika kwamba yeyote mambo nina kuangalia kwa kweli ni juu ya ukurasa.

648
00:38:29,730 --> 00:38:34,310
Hii ishara ya dola hapa ina maana mimi nina kutumia maktaba kuitwa jQuery.

649
00:38:34,310 --> 00:38:38,570
Hii maktaba jQuery kuturuhusu kutumia selectors haya kwamba sisi alimwangalia.

650
00:38:38,570 --> 00:38:44,010
Kwa kusema $ kisha kupita katika hoja hii kama # fomu-quote,

651
00:38:44,010 --> 00:38:47,910
Mimi sasa kuchagua kuwa fomu kuwa sisi tu alichukua kuangalia.

652
00:38:47,910 --> 00:38:52,290
Sasa mimi kuwa na uwakilishi wa kwamba fomu katika kumbukumbu kwa namna fulani.

653
00:38:52,290 --> 00:38:56,760
>> Kwenye kitu hiki sasa, hii ya uwakilishi wa fomu,

654
00:38:56,760 --> 00:38:58,890
Mimi sasa kutumia kazi wito kwa.

655
00:38:58,890 --> 00:39:02,710
Nini kazi hii haina ni itakavyo ambatisha handler tukio hilo.

656
00:39:02,710 --> 00:39:06,310
tukio kwamba sisi ni kwenda kusikiliza kwa ni tukio kuwasilisha.

657
00:39:06,310 --> 00:39:08,890
Hivyo wakati Clicks mtumiaji Kuwasilisha kifungo au mashinikizo Ingieni,

658
00:39:08,890 --> 00:39:11,730
tukio hili ni kwenda kwa moto.

659
00:39:11,730 --> 00:39:16,390
Kwa hooking katika hili, mimi sasa wanaweza override tabia default ya fomu.

660
00:39:16,390 --> 00:39:19,770
Bila hii JavaScript, fomu bila kuwasilisha kwa chochote PHP faili

661
00:39:19,770 --> 00:39:22,110
sisi kutumika katika sifa kwamba hatua.

662
00:39:22,110 --> 00:39:25,440
Lakini badala yake, mimi nina sasa akisema, ngoja, ngoja, ngoja, sitaki wewe kwa kweli kufanya hivyo.

663
00:39:25,440 --> 00:39:31,140
Nataka hii kutokea kabla ya kwenda na kujaribu kuwasilisha kwa baadhi faili PHP.

664
00:39:31,140 --> 00:39:32,870
Sasa nini nataka kufanya?

665
00:39:32,870 --> 00:39:39,270
Katika hatua hii mimi nataka kutumia AJAX namna fulani shehena katika kile bei ya hisa ni.

666
00:39:39,270 --> 00:39:44,170
Jambo la kwanza mimi haja ya kujua ni nini hisa user ni kuangalia juu.

667
00:39:44,170 --> 00:39:46,760
Ili kufanya hivyo mimi naenda kutumia mwingine selector.

668
00:39:46,760 --> 00:39:49,020
Hii ni selector tatu tuliyoyaangalia kabla.

669
00:39:49,020 --> 00:39:54,460
Hii inasema kwamba nataka kuanza mbali hii kipengele fomu na ID ya fomu quote-.

670
00:39:54,460 --> 00:39:58,440
Ndipo mahali fulani ndani ya fomu kuwa inabidi kuwe na kipengele pembejeo

671
00:39:58,440 --> 00:40:01,270
kwamba ina jina la alama.

672
00:40:01,270 --> 00:40:05,460
Kama sisi kuangalia nyuma katika HTML yetu, tumeona kwamba sisi alikuwa na mchango [jina = alama].

673
00:40:05,460 --> 00:40:12,380
Hiyo ina maana kwamba hii ni kwenda kuchagua kwamba sanduku Nakala kwamba mtumiaji anachapa ndani.

674
00:40:12,380 --> 00:40:13,870
Hiyo ni nzuri. Tuna Nakala sanduku.

675
00:40:13,870 --> 00:40:17,360
Sasa sisi tu haja ya kujua nini ndani yake.

676
00:40:17,360 --> 00:40:20,290
Ili kufanya hivyo tunaweza kuwaita njia hii hapa, hii Val.,

677
00:40:20,290 --> 00:40:23,240
na hii anasema mimi kujua nini Nakala sanduku wewe.

678
00:40:23,240 --> 00:40:28,160
Mimi nataka wewe uniambie nini ni mtumiaji typed katika sanduku kwamba maandishi.

679
00:40:28,160 --> 00:40:34,440
Sasa tuna string kuitwa ishara kwamba ni sawa kwa kila mtumiaji typed in

680
00:40:34,440 --> 00:40:39,820
Hiyo ni nzuri. Tunaweza kutumia kamba sasa kufanya maombi yetu.

681
00:40:39,820 --> 00:40:42,450
Hii ni kazi mpya hapa, hii $,

682
00:40:42,450 --> 00:40:44,900
ila tuko tena kwenda kuchagua vipengele,

683
00:40:44,900 --> 00:40:48,910
tunakwenda kuwa wito kazi tofauti ambao zinazotolewa kwetu na jQuery.

684
00:40:48,910 --> 00:40:54,810
Hii kazi AJAX ni nini kweli kwenda kufanya ombi hili HTTP.

685
00:40:54,810 --> 00:40:57,000
Hivyo tuna kuiambia mambo machache.

686
00:40:57,000 --> 00:41:01,410
Jambo la kwanza tuna kuwaambia kazi huu ni ambapo nataka ombi kwenda.

687
00:41:01,410 --> 00:41:08,910
Mahali fulani katika mradi wangu nina faili hii ndani ya saraka ya HTML kuitwa quote.php.

688
00:41:08,910 --> 00:41:15,150
Mimi wanaweza kupata faili hii, tuliona, tu namna hii, kama mimi kwenda kwenye localhost quote.php /.

689
00:41:15,150 --> 00:41:20,450
>> Mimi nataka JavaScript wangu kufanya ombi kwa ukurasa.

690
00:41:20,450 --> 00:41:22,920
Ni aina gani ya ombi sasa?

691
00:41:22,920 --> 00:41:27,210
Tuliona mbele ya kwamba fomu ina kuwa njia = "post" sifa,

692
00:41:27,210 --> 00:41:29,270
na hiyo ina maana ni kwenda kufanya ombi POST,

693
00:41:29,270 --> 00:41:32,630
hivyo si kwenda kuweka kitu chochote katika URL, badala ya kupata ombi,

694
00:41:32,630 --> 00:41:36,860
ambayo ingekuwa tu kuwa fired kama sisi tu kupatikana ukurasa kwa browser mtandao, kwa mfano.

695
00:41:36,860 --> 00:41:41,260
Sasa tumekuwa alisema nataka kufanya POST HTTP ombi

696
00:41:41,260 --> 00:41:44,840
kwa ukurasa iko katika quote.php.

697
00:41:44,840 --> 00:41:51,490
Wakati sisi kuwasilisha fomu, kumbuka tunaweza kupata pembejeo vipengele ndani ya fomu kuwa

698
00:41:51,490 --> 00:41:54,430
na kwamba kutofautiana $ _POST.

699
00:41:54,430 --> 00:41:58,710
Hadi sasa katika hadithi sisi si kweli alimtuma pamoja data yoyote.

700
00:41:58,710 --> 00:42:00,640
Tumekuwa tu alisema sisi ni kufanya ombi AJAX

701
00:42:00,640 --> 00:42:03,200
na hapa ni aina ya ombi sisi ni kufanya.

702
00:42:03,200 --> 00:42:07,090
Sasa tunahitaji kweli kutuma data baadhi ya ukurasa.

703
00:42:07,090 --> 00:42:10,930
Ili kufanya hivyo tunaweza kutumia mali hii inaitwa data.

704
00:42:10,930 --> 00:42:14,950
thamani ya mali hii ni kweli safu associative.

705
00:42:14,950 --> 00:42:19,390
Sababu hii ni inaruhusu sisi kutuma zaidi ya kipande tu 1 ya data.

706
00:42:19,390 --> 00:42:24,750
Hiyo ndiyo sababu tuna hizi braces curly hapa nested ndani ya hizi nyingine braces curly.

707
00:42:24,750 --> 00:42:29,680
funguo katika arrays haya associative ni kwenda kuwa kitu kimoja

708
00:42:29,680 --> 00:42:32,630
kama jina wale anahusisha katika mambo yetu ya fomu.

709
00:42:32,630 --> 00:42:35,740
Hiyo ina maana kwamba kama mimi kutuma pamoja na ufunguo wa ishara,

710
00:42:35,740 --> 00:42:41,870
kwamba maana ya ukurasa wangu PHP wanaweza kupata data hii kwa $ _POST [alama]

711
00:42:41,870 --> 00:42:44,640
tu kama sisi alifanya kabla tulipokuwa kuwasilisha fomu.

712
00:42:44,640 --> 00:42:47,090
Na sasa data halisi tunataka kutuma

713
00:42:47,090 --> 00:42:50,790
ni kwenda kuwa ndani ya thamani ya safu hii associative.

714
00:42:50,790 --> 00:42:54,070
>> Sisi kuhifadhiwa na andiko hili katika ishara variable walioitwa,

715
00:42:54,070 --> 00:42:57,380
na hivyo sisi ni kutuma pamoja sasa muhimu ya alama ya

716
00:42:57,380 --> 00:43:01,380
na thamani ya kila mtumiaji typed in

717
00:43:01,380 --> 00:43:06,270
Sasa tumekuwa kufanywa ombi hili HTTP, faili wetu PHP ina kunyongwa,

718
00:43:06,270 --> 00:43:11,480
na ni kwenda kutuma data baadhi ya nyuma sasa kwa mteja kwamba tu alifanya ombi hili.

719
00:43:11,480 --> 00:43:15,220
Sasa tunahitaji kujibu chochote server alisema kwetu.

720
00:43:15,220 --> 00:43:20,180
Ili kufanya hivyo tuna mali hii ya mwisho hapa aitwaye mafanikio.

721
00:43:20,180 --> 00:43:24,240
thamani ya muhimu hii ya mafanikio ni kweli kwenda kuwa kazi,

722
00:43:24,240 --> 00:43:26,910
na hii ni moja ya mambo ya kweli cool unaweza kufanya na javascript.

723
00:43:26,910 --> 00:43:31,720
Si tu unaweza kuwa na ints au arrays kama ndani ya thamani ya safu associative,

724
00:43:31,720 --> 00:43:34,170
tunaweza pia kuwa na kazi.

725
00:43:34,170 --> 00:43:36,380
Hivyo kwa kusema mafanikio, hii ni ufunguo wangu.

726
00:43:36,380 --> 00:43:38,830
koloni anasema hapa inakuja thamani,

727
00:43:38,830 --> 00:43:41,810
na sasa thamani ya hii ni kweli kazi.

728
00:43:41,810 --> 00:43:44,460
Hivyo hatuna haja ya kutoa kazi hii jina per se.

729
00:43:44,460 --> 00:43:48,820
Tunaweza tu kusema hii ni kwenda kuwa baadhi ya kazi. Ni kwenda kuchukua 1 hoja.

730
00:43:48,820 --> 00:43:51,190
hoja kwa kazi hii ni kwenda kuwa

731
00:43:51,190 --> 00:43:54,460
chochote server waliotutuma nyuma kutoka ombi.

732
00:43:54,460 --> 00:43:57,750
Kama wakati browser yetu inafanya ombi, server zituma kitu nyuma

733
00:43:57,750 --> 00:43:59,060
na browser lidhihirisha!

734
00:43:59,060 --> 00:44:03,030
katika mazingira ya AJAX sisi tu alifanya ombi, server alimtuma kitu nyuma,

735
00:44:03,030 --> 00:44:07,110
na sasa tuna kuwa kuwakilishwa kama kamba.

736
00:44:07,110 --> 00:44:11,280
Pamoja na kamba ya kwamba napenda tu kama kuonyesha kwamba katika ukurasa.

737
00:44:11,280 --> 00:44:14,040
Ili kufanya hivyo mimi naenda kuwa moja ya mwisho selector.

738
00:44:14,040 --> 00:44:17,570
Nataka kuchagua kipengele kwa bei ya ID.

739
00:44:17,570 --> 00:44:20,710
Hii ni div tupu kwamba nimepata umba kwenye ukurasa,

740
00:44:20,710 --> 00:44:26,640
na mimi nataka kuweka maudhui ya kwamba div kuwa chochote server waliotutuma nyuma.

741
00:44:26,640 --> 00:44:30,280
Nimekuwa kwa kweli iliyopita quote.php kidogo.

742
00:44:30,280 --> 00:44:33,460
>> Badala ya wito asimlipe na utoaji baadhi ukurasa,

743
00:44:33,460 --> 00:44:38,100
quote.php sasa ni tu kwenda magazeti nje thamani ya hisa kama kamba.

744
00:44:38,100 --> 00:44:41,880
Hivyo kama ungekuwa kwa kweli kutembelea ukurasa, ungekuwa tu kuona kwamba ile kamba ndogo

745
00:44:41,880 --> 00:44:45,030
ya kila bei ya hisa ni.

746
00:44:45,030 --> 00:44:50,170
Jambo la mwisho tunahitaji kufanya hapa ni tu kuhakikisha kazi hii anarudi uongo.

747
00:44:50,170 --> 00:44:53,560
Nini hii inasema ni kwamba kama nina ndani ya handler tukio

748
00:44:53,560 --> 00:44:57,300
na kwamba tukio handler anarudi uongo badala ya kurudi kweli,

749
00:44:57,300 --> 00:45:01,510
hiyo ina maana kwamba sitaki tukio awali kwa moto.

750
00:45:01,510 --> 00:45:05,270
Katika kesi hiyo, kama sisi hawakuwa na JavaScript na sisi in fomu,

751
00:45:05,270 --> 00:45:08,280
mtandao wetu Kivinjari kwenda kusema, "Mimi naenda kutuma data kwamba pamoja,"

752
00:45:08,280 --> 00:45:10,130
na wao wanaenda kukutumia kwenye ukurasa mwingine.

753
00:45:10,130 --> 00:45:14,360
Kwa sababu sisi ni kutumia AJAX sasa, hakuna haja ya kutuma mtumiaji kwenye ukurasa mwingine.

754
00:45:14,360 --> 00:45:17,920
Sisi ni kwenda tu kuonyesha matokeo dynamically katika ukurasa huu huu.

755
00:45:17,920 --> 00:45:21,460
Sisi kweli si unataka waende popote, na mimi wanataka kukaa juu ya ukurasa huo.

756
00:45:21,460 --> 00:45:27,060
Hivyo kwa kurudi uongo, sisi kuhakikisha kwamba fomu haina kufanya hivyo kwa ajili yetu.

757
00:45:27,060 --> 00:45:31,170
Hebu kuangalia nini hii kwa kweli inaonekana kama.

758
00:45:31,170 --> 00:45:34,180
Quote yetu ukurasa inaonekana sawa.

759
00:45:34,180 --> 00:45:37,240
Hebu vuta hadi mkaguzi chini hapa ili tuweze kuona nini kinaendelea.

760
00:45:37,240 --> 00:45:40,270
Matokeo yake ni kidogo kidogo kubwa.

761
00:45:40,270 --> 00:45:44,590
Kumbuka kama sisi kufungua tabo Network, hii ni mahali ambapo tunaweza kuona yote ya maombi HTTP

762
00:45:44,590 --> 00:45:47,570
yanayotokea juu ya ukurasa.

763
00:45:47,570 --> 00:45:52,890
>> Kwa mfano napenda aina katika aapl na bonyeza Kupata Quote.

764
00:45:52,890 --> 00:45:56,720
Sasa tumeona kwamba sehemu ya Apple gharama baadhi idadi ya dola

765
00:45:56,720 --> 00:46:00,410
tu alionekana kwenye ukurasa, lakini URL hakubadili wakati wote.

766
00:46:00,410 --> 00:46:04,570
Kwa kweli, hapa ni ombi HTTP kwamba sisi tu alifanya.

767
00:46:04,570 --> 00:46:09,980
Tulimsihi POST kwa quote.php. Kwamba hufanya akili.

768
00:46:09,980 --> 00:46:12,800
Hii ni nini server waliotutuma nyuma.

769
00:46:12,800 --> 00:46:16,320
Ni tena hivi vikubwa HTML hati na picha na vitu kama hivyo,

770
00:46:16,320 --> 00:46:20,920
ni tu mstari wa maandishi, na kisha sisi tu visas mstari wa maandishi.

771
00:46:20,920 --> 00:46:26,290
Kama sisi kurudi nyuma kwa headers na kuona nini sisi kweli alimtuma ndani ya ombi hili HTTP,

772
00:46:26,290 --> 00:46:33,950
tunaweza kuona chini hapa kwamba sisi alimtuma pamoja na ufunguo wa ishara na thamani ya aapl,

773
00:46:33,950 --> 00:46:36,430
ambayo ni nini mtumiaji typed in

774
00:46:36,430 --> 00:46:39,230
Hii ni nzuri, lakini bado ni kidogo annoying.

775
00:46:39,230 --> 00:46:42,490
Mimi bado kuwa na bonyeza button hii ya kupata quote hisa.

776
00:46:42,490 --> 00:46:45,880
Sisi ni busy watu na hatuna muda wa bonyeza kifungo.

777
00:46:45,880 --> 00:46:49,910
Google barabara hii kidogo iliyopita wakati wao kutekelezwa Google Instant.

778
00:46:49,910 --> 00:46:53,590
Nini Google Instant gani ni kama wewe ni kuandika tu kuanza kuonyesha matokeo kwa wewe

779
00:46:53,590 --> 00:46:56,520
hivyo huna kuwa na wasiwasi juu hata kubonyeza Search.

780
00:46:56,520 --> 00:46:58,730
Kweli, hadithi fun kuhusiana na hilo.

781
00:46:58,730 --> 00:47:01,100
Mara Google Instant akatoka nje, watu walikuwa kama, "Ho, hii ni super ajabu."

782
00:47:01,100 --> 00:47:02,540
"Hii ni hivyo baridi."

783
00:47:02,540 --> 00:47:05,950
Na mwanafunzi chini saa Stanford ambaye alikuwa 19 wakati

784
00:47:05,950 --> 00:47:09,000
alifanya tovuti hii inaitwa YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Zote Instant YouTube huwa ni ufanisi kutafuta YouTube mara.

786
00:47:13,170 --> 00:47:17,020
Hivyo badala ya kuwa na kwenda kwa YouTube.com na hit Search,

787
00:47:17,020 --> 00:47:21,650
wakati mimi kuanza kuandika katika kitu YouTube Instant kama CS50,

788
00:47:21,650 --> 00:47:25,320
tunaweza kuona hapa kwamba ni kujaribu juu ya uhusiano polepole Internet

789
00:47:25,320 --> 00:47:28,500
populate matokeo haya kuishi.

790
00:47:28,500 --> 00:47:35,590
Ili kufanya hivyo tunaweza kweli kufanya muundo rahisi sana na faili wetu quote.js.

791
00:47:35,590 --> 00:47:40,900
Hivi sasa tuko attaching tukio hili wakati fomu ni kuwasilishwa.

792
00:47:40,900 --> 00:47:43,760
Sisi si kweli wanataka kufanya mtumiaji kuwasilisha kwamba fomu tena,

793
00:47:43,760 --> 00:47:48,570
hivyo hebu badala moto tukio hili kila wakati mtumiaji presses muhimu.

794
00:47:48,570 --> 00:47:53,200
Ili kufanya hivyo hebu kwanza kubadili tukio kutoka kuwasilisha keyup.

795
00:47:53,200 --> 00:47:55,740
Hiyo ina maana kwamba badala ya kusubiri kwa ajili ya kuwasilisha,

796
00:47:55,740 --> 00:47:58,490
kila wakati muhimu ni taabu, kitu kinaenda kutokea.

797
00:47:58,490 --> 00:48:02,030
Ni hakuna tena mantiki ambatisha tukio hili keyup kwa ajili ya wote.

798
00:48:02,030 --> 00:48:05,080
Sisi kwa kweli tu huduma ya juu sanduku kwamba search.

799
00:48:05,080 --> 00:48:09,320
>> Kuchagua kwamba sasa, tunaweza kubadili hili kuwa, badala ya fomu quote-,

800
00:48:09,320 --> 00:48:14,220
fomu-quote na sisi itabidi pembejeo (aina = asilia) au tunaweza kusema (jina = alama) -

801
00:48:14,220 --> 00:48:16,420
chochote tunataka.

802
00:48:16,420 --> 00:48:18,650
Sasa kuna moja ya mwisho kitu sisi kufanya.

803
00:48:18,650 --> 00:48:21,190
Kumbuka hapa chini wakati sisi alisema kurudi uongo

804
00:48:21,190 --> 00:48:24,370
sisi alisema hatutaki kuwa tukio default kwa moto.

805
00:48:24,370 --> 00:48:26,390
Lakini tu hivyo hutokea kwamba kama sisi Disable kwamba sasa,

806
00:48:26,390 --> 00:48:29,660
chochote sisi aina katika si kwenda kuonyesha juu katika browser tena

807
00:48:29,660 --> 00:48:33,000
kwa sababu hiyo itakuwa tabia default ya kuandika ndani ya sanduku asilia.

808
00:48:33,000 --> 00:48:38,660
Sisi tena wanataka override kwamba, hivyo hebu kuharibu kurudi hii ya uongo.

809
00:48:38,660 --> 00:48:44,800
Kama sisi ila na pakia ukurasa, sasa wakati mimi kuanza kuandika aapl

810
00:48:44,800 --> 00:48:50,160
utaona kwamba bei ya hisa chini hapa ni kumaliza moja kwa moja.

811
00:48:50,160 --> 00:48:53,150
Hivyo hapa ni CS50 Fedha Instant.

812
00:48:53,150 --> 00:48:55,860
Kweli hadithi kuhusu fun Instant YouTube

813
00:48:55,860 --> 00:48:59,420
ni mwanafunzi kuwa aina tu ya aliandika kama mradi 1-usiku,

814
00:48:59,420 --> 00:49:03,800
na siku ya pili alipewa kazi na Mkurugenzi Mtendaji wa YouTube.

815
00:49:03,800 --> 00:49:10,610
Hivyo kama rahisi kama kwamba, wewe CS50 wanafunzi, miradi yako ya mwisho wanaweza kupata kazi katika YouTube.

816
00:49:10,610 --> 00:49:14,720
Kitu kama hicho ni wazo kweli baridi kwa ajili ya mradi wa mwisho, haki?

817
00:49:14,720 --> 00:49:18,170
Tulikuwa na baadhi funktionalitet zilizopo kwamba sisi alitaka kuunganisha pamoja.

818
00:49:18,170 --> 00:49:20,330
Sisi kuboresha uzoefu user kidogo,

819
00:49:20,330 --> 00:49:24,340
na ghafla kutafuta kitu kwenye YouTube Instant inaweza kuwa rahisi sana

820
00:49:24,340 --> 00:49:27,290
kuliko kwa ajili ya kutafuta kwenye YouTube mara kwa mara.

821
00:49:27,290 --> 00:49:30,790
Basi hiyo ni AJAX kwa kifupi.

822
00:49:30,790 --> 00:49:34,860
>> Katika mifano ya kwamba Joseph alikuwa kuonyesha, tuliona mengi ya autocompletes,

823
00:49:34,860 --> 00:49:39,250
na wale autocompletes ni kweli, kweli Handy kwa sababu hatuna kukumbuka -

824
00:49:39,250 --> 00:49:41,770
Kwa mfano, kama huna kumbuka bei ya hisa kwa ajili ya Apple

825
00:49:41,770 --> 00:49:45,110
na sisi tu kujua ni aa kitu, badala ya kusema tu kwangu,

826
00:49:45,110 --> 00:49:48,740
"Sehemu ya jambo hili gharama hii fedha nyingi,"

827
00:49:48,740 --> 00:49:52,540
Ningependa aina ya kama kujua nini hifadhi kuanza na aa.

828
00:49:52,540 --> 00:49:58,340
Tunaweza kufanya hivyo kwa kweli nicely na maktaba bootstrap ambayo tayari ni pamoja na

829
00:49:58,340 --> 00:50:01,380
ndani ya Fedha CS50.

830
00:50:01,380 --> 00:50:09,390
Kama wewe kuja hapa tag JavaScript na kitabu chini Typeahead,

831
00:50:09,390 --> 00:50:13,730
hii ni Plugin nzuri kwamba mtu tayari aliandika kwa ajili yetu,

832
00:50:13,730 --> 00:50:16,980
na sisi urahisi kutumia utendaji wake kama hii.

833
00:50:16,980 --> 00:50:21,410
Mimi typed katika na hapa ni orodha ya baadhi ya mataifa kwamba kuanza na A.

834
00:50:21,410 --> 00:50:25,360
Hebu kusema kwamba nadhani hii ni kweli baridi na ni wakati kwa ajili yangu na pamoja na hii katika ukurasa wangu.

835
00:50:25,360 --> 00:50:28,300
Ni zinageuka kuwa hii ni kweli, kweli rahisi.

836
00:50:28,300 --> 00:50:32,810
Hebu wanaruka juu hapa quote3.js.

837
00:50:34,890 --> 00:50:37,380
File yangu inaonekana tofauti kidogo.

838
00:50:37,380 --> 00:50:39,700
Chini hapa yote ya mambo yangu AJAX ni sawa.

839
00:50:39,700 --> 00:50:43,170
Nataka mzigo data hisa bila ya kwenda kwenye ukurasa mwingine.

840
00:50:43,170 --> 00:50:46,220
Lakini sasa mimi nataka kutumia Plugin.

841
00:50:46,220 --> 00:50:51,020
Nyaraka bootstrap ina mifano kubwa ya jinsi gani hasa naweza kufanya hivyo.

842
00:50:51,020 --> 00:50:54,350
Mimi nataka kusema, "Hapa ni pembejeo kwamba nataka oto kukamilisha juu,"

843
00:50:54,350 --> 00:50:56,640
na mimi naenda kuwaita kazi hii inaitwa typeahead,

844
00:50:56,640 --> 00:50:59,730
na kwamba kinaendelea kushughulikia yote ya stuff Typeahead kwa ajili yetu.

845
00:50:59,730 --> 00:51:02,090
Itakuwa initialize orodha, ni kufanya yote ya filtering yetu.

846
00:51:02,090 --> 00:51:06,680
Kitu pekee inahitaji kujua ni nini data tuko autocompleting juu.

847
00:51:06,680 --> 00:51:10,480
Hivyo nimeona hii muhimu tu kwa kusoma nyaraka na kuangalia mifano.

848
00:51:10,480 --> 00:51:14,150
Kama mimi kutoa ufunguo wa chanzo, thamani ya muhimu hii

849
00:51:14,150 --> 00:51:17,770
ni baadhi tu ya safu ya mambo nataka oto kukamilisha juu.

850
00:51:17,770 --> 00:51:20,180
Variable Hii ilikuja kutoka faili hii nyingine.

851
00:51:20,180 --> 00:51:23,400
Mimi kufungua symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Hii ni symbols.js tu hii safu kweli, kweli kubwa zenye masharti

853
00:51:27,980 --> 00:51:32,080
wa wote wa ishara hizi hisa kutoka NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Kama mimi nataka kuruka nyuma ya HTML, hivyo jharvard, vhosts, globalhost, html, templates,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Tangu hiyo sasa inaitwa quote3.js, basi mimi kubadili faili JavaScript mimi nina ikiwa ni pamoja na hapa.

857
00:51:50,910 --> 00:51:55,110
Sasa nina quote3.js, hivyo mimi nina kwenda kupakia katika faili kwamba tofauti JavaScript,

858
00:51:55,110 --> 00:51:57,910
moja ambayo ina kuwa oto kukamilisha bootstrap.

859
00:51:57,910 --> 00:52:04,430
Sasa wakati mimi kuruka nyuma browser, pakia ukurasa, na mimi kuanza kuandika aa,

860
00:52:04,430 --> 00:52:06,880
kuna oto kukamilisha yangu. Na ni kweli kama rahisi kama hayo.

861
00:52:06,880 --> 00:52:11,400
Mimi nilikuwa 1 mstari wa kanuni kwamba alisema tu, "Hapa ni mambo nataka oto kukamilisha juu,"

862
00:52:11,400 --> 00:52:16,590
na ghafla nina hii funktionalitet kweli, kweli nzuri na mengi si wote wa juhudi wakati wote.

863
00:52:16,590 --> 00:52:19,810
Kama wewe ni kuendeleza tovuti na hasa mbele upande wa mwisho wa mambo,

864
00:52:19,810 --> 00:52:21,840
utaenda kupata hii ni kesi nyingi.

865
00:52:21,840 --> 00:52:25,700
Kuna mengi, mengi, mengi ya maktaba kweli cool bure huko nje

866
00:52:25,700 --> 00:52:30,190
kwamba kufanya hivyo ni super rahisi kufanya mambo kama hayo.

867
00:52:30,190 --> 00:52:37,230
Je, mtu yeyote kufikiri ya vikwazo yoyote ya tu autocompleting katika orodha hii kubwa ya alama?

868
00:52:37,230 --> 00:52:41,580
Je, inaweza kuwa kitu ambacho si bora na mfumo huu?

869
00:52:42,790 --> 00:52:45,960
Yeah. >> [Mwanafunzi] Muda, kama una mengi ya [inaudible]

870
00:52:45,960 --> 00:52:50,420
Yeah. Hivi sasa tuko kushusha huu mkubwa JavaScript faili na kuna mengi ya alama.

871
00:52:50,420 --> 00:52:54,360
Na hivyo kama sisi kuwa na tani ya mambo, aina hii inaweza kuongeza ya latency ya si tu kutafuta

872
00:52:54,360 --> 00:52:56,600
lakini pia kushusha faili halisi.

873
00:52:56,600 --> 00:52:58,670
Mkuu. Kitu kingine?

874
00:53:01,950 --> 00:53:05,280
Hivi sasa hakuna hali halisi ya umuhimu.

875
00:53:05,280 --> 00:53:08,190
Kama mimi aina katika, makampuni ambayo show up hapa

876
00:53:08,190 --> 00:53:11,220
wanaweza kuwa makampuni maarufu ya kwamba kuanza na A.

877
00:53:11,220 --> 00:53:17,130
>> Kabla ya mimi kupata Apple, inaweza kuchukua baadhi ya wahusika zaidi ili kupata nini nina kuangalia kwa.

878
00:53:17,130 --> 00:53:20,420
Hii oto kukamilisha haina maana hii ya umuhimu.

879
00:53:20,420 --> 00:53:24,400
Ni tu kwenda kusema, "Chochote kwamba mechi nitakacho kuonyesha."

880
00:53:24,400 --> 00:53:30,510
Badala ya kuwa, Ningependa namna fulani kuunganisha baadhi umuhimu katika upekuzi wangu.

881
00:53:30,510 --> 00:53:36,440
Kama mimi kwenda juu hapa Fedha Yahoo!, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Kama mimi kujaribu kuingia alama juu ya ukurasa Yahoo! Fedha

883
00:53:42,100 --> 00:53:52,310
na mimi kuanza kuandika GOOG, nina orodha hii nzuri ya mambo.

884
00:53:52,310 --> 00:53:57,100
Wazi, inaonekana kama Yahoo! Finance ni kufanya kitu zaidi wajanja hapa.

885
00:53:57,100 --> 00:53:59,790
Wana baadhi ya umuhimu na wao pia wana maelezo ya ziada

886
00:53:59,790 --> 00:54:01,430
kama jina la hisa.

887
00:54:01,430 --> 00:54:05,850
Hiyo ni kitu ambacho siwezi kupata na tu orodha yangu ya hisa ya alama.

888
00:54:05,850 --> 00:54:09,520
Nataka hii na hivyo mimi nina kwenda kuchukua hiyo.

889
00:54:09,520 --> 00:54:11,790
Ili kufanya hivyo wacha kufanya mambo kadhaa.

890
00:54:11,790 --> 00:54:15,580
Hebu kwanza kufungua mkaguzi kwenye ukurasa huu

891
00:54:15,580 --> 00:54:18,100
kwa sababu tuliona kuwa ukurasa huu si reloading wakati wote,

892
00:54:18,100 --> 00:54:21,960
hivyo ni pengine kwa kutumia AJAX namna fulani kuwa upakiaji data zake.

893
00:54:21,960 --> 00:54:23,920
Tunaweza kujua nini data ni upakiaji.

894
00:54:23,920 --> 00:54:28,390
Kama mimi bonyeza tab hii Network, haya ni kwenda kuwa yote ya maombi kwamba kuanza kuwa fired.

895
00:54:28,390 --> 00:54:34,020
Sasa kama mimi aina katika goo, tunaweza kuona kwamba mimi tu got mpya HTTP ombi.

896
00:54:34,020 --> 00:54:37,490
Hii ni pengine ambapo data kwamba anakuja kutoka.

897
00:54:37,490 --> 00:54:41,990
Uhakika wa kutosha, ikiwa mimi kuangalia URL hii, ambayo ni kidogo strangely aitwaye,

898
00:54:41,990 --> 00:54:46,930
tunaweza kuona kwamba hii ni hasa ambapo Yahoo ni kutuma mbali data yake kutoka.

899
00:54:46,930 --> 00:54:53,400
>> Nimekuwa umba faili tofauti inayoitwa suggest.php kwamba sawa sana katika roho na kazi Luke.

900
00:54:53,400 --> 00:54:57,730
Ni kimsingi kwenda kufanya swala kwa URL Yahoo, kupata tena baadhi ya data,

901
00:54:57,730 --> 00:54:59,750
na kutuma nyuma yangu.

902
00:54:59,750 --> 00:55:02,570
Sasa, badala ya kutumia hii kubwa, kubwa orodha ya alama,

903
00:55:02,570 --> 00:55:05,280
Naweza kutumia Yahoo mambo umuhimu nice,

904
00:55:05,280 --> 00:55:08,150
na mimi hawana download kuwa mkubwa JavaScript faili.

905
00:55:08,150 --> 00:55:12,040
Mimi nina kwenda tu kubomoa alama hisa kweli husika.

906
00:55:12,040 --> 00:55:13,960
Hebu tuzame kwenye hilo.

907
00:55:13,960 --> 00:55:17,360
Hivyo html, JS. Sisi ni sasa katika quote4.

908
00:55:17,360 --> 00:55:22,120
Sasa sisi ni tena kutumia orodha kubwa ya files JavaScript.

909
00:55:22,120 --> 00:55:24,430
Lakini kuna aina ndogo ya tatizo kubuni hapa.

910
00:55:24,430 --> 00:55:28,200
Tumekuwa alisema kuwa katika AJAX ni Asynchronous.

911
00:55:28,200 --> 00:55:31,000
Nini maana ni kwamba wakati mimi kufanya ombi AJAX,

912
00:55:31,000 --> 00:55:36,490
hivyo hapa hapa kwenye mstari 8, hii ni wapi yangu ombi AJAX ni kweli fired.

913
00:55:36,490 --> 00:55:40,370
Hebu sema sasa mimi na baadhi ya kanuni chini hapa kwamba kinaendelea kufanya baadhi ya mambo

914
00:55:40,370 --> 00:55:43,930
kama tahadhari ya mtumiaji au kitu mabadiliko juu ya ukurasa.

915
00:55:43,930 --> 00:55:49,830
Nini haitaweza kutokea ni browser si kwenda kusubiri kwa ombi hili kuendelea

916
00:55:49,830 --> 00:55:53,480
kabla ya kuja chini na kupiga mstari huu.

917
00:55:53,480 --> 00:55:55,900
Hiyo sehemu Asynchronous.

918
00:55:55,900 --> 00:55:58,400
Ni kwenda kufanya ombi hili na kusema, "Kila wewe kumaliza,

919
00:55:58,400 --> 00:56:03,080
"Kurudi na wito kwamba kazi ambayo nilikuambia kuwaita ndani ya mafanikio."

920
00:56:03,080 --> 00:56:07,300
Hiyo ina maana hatuwezi tu download hifadhi yote kabla.

921
00:56:07,300 --> 00:56:10,300
Tunahitaji kufanya ombi na kusubiri kwa kitu kuja nyuma.

922
00:56:10,300 --> 00:56:13,330
Hiyo ina maana kwamba kabla, tunaweza tu kuwaambia bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Hapa ni orodha ya mambo ya Mimi nataka wewe oto kukamilisha juu."

924
00:56:15,580 --> 00:56:18,950
Hatuwezi tena kufanya hivyo tena kwa sababu hatujui

925
00:56:18,950 --> 00:56:21,780
nini tunataka kweli oto kukamilisha juu.

926
00:56:21,780 --> 00:56:25,190
Kwa bahati, bootstrap mawazo ya hii kwa sababu wale ni smart guys zaidi ya hapo,

927
00:56:25,190 --> 00:56:30,160
na kwa kweli alitupa njia nyingine ya kupakia hii Plugin Typeahead.

928
00:56:30,160 --> 00:56:35,630
Kabla ya hapo, thamani ya mali hii chanzo mara tu hii safu kubwa ya mambo ya oto kukamilisha juu.

929
00:56:35,630 --> 00:56:39,580
>> Sasa mali chanzo ni kweli kazi,

930
00:56:39,580 --> 00:56:44,580
na madhumuni ya kazi hii ni kufikiri nini mambo oto kukamilisha juu ya ni.

931
00:56:44,580 --> 00:56:48,730
ndivyo itakavyo na takwimu kwamba ni nje ni kwenda kuuliza Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
nini mambo bora oto kukamilisha ni.

933
00:56:51,750 --> 00:56:54,500
Kwa kufanya kwamba mimi nina kwenda kufanya sawa sana AJAX ombi.

934
00:56:54,500 --> 00:56:59,010
Mimi naenda kuomba ukurasa huu katika suggest.php.

935
00:56:59,010 --> 00:57:01,360
Nataka kupeleka pamoja ishara bado.

936
00:57:01,360 --> 00:57:05,570
Na sasa mafanikio yangu, nyaraka bootstrap aliniambia

937
00:57:05,570 --> 00:57:09,130
kwamba ili populate kwamba orodha ya mambo,

938
00:57:09,130 --> 00:57:14,370
wote mimi haja ya kufanya ni kupita katika safu hii kwa sasa kazi callback.

939
00:57:14,370 --> 00:57:15,660
Lakini kusubiri dakika.

940
00:57:15,660 --> 00:57:20,240
Kama hii ni walidhani kuwa safu na AJAX ni kutuma mimi nyuma maandishi,

941
00:57:20,240 --> 00:57:22,720
jinsi ni kwamba inawezekana?

942
00:57:22,720 --> 00:57:27,910
Hii ni utangulizi njia mpya ya kubadilishana data kuitwa JSON.

943
00:57:27,910 --> 00:57:33,000
Katika kesi hii sisi siyo tu kutuma nyuma string rahisi ya maandishi.

944
00:57:33,000 --> 00:57:37,670
Sasa sisi ni kushughulika na orodha hii ngumu zaidi ya alama ya hisa.

945
00:57:37,670 --> 00:57:41,730
Alama hisa hizi pia ni pamoja na mambo kama jina la kampuni au bei ya sasa.

946
00:57:41,730 --> 00:57:47,550
Tu kwa kutumia kamba kubwa ya muda si kwamba formatted kwa njia yoyote kutabirika

947
00:57:47,550 --> 00:57:51,970
si kwenda kuwa njia bora ya kupata data hii kutoka server Yahoo kwangu

948
00:57:51,970 --> 00:57:54,540
katika njia ambayo mimi urahisi kuelewa.

949
00:57:54,540 --> 00:58:01,280
JSON ni teknolojia ambayo inachukua fursa ya jinsi sisi kujenga arrays associative katika JavaScript.

950
00:58:01,280 --> 00:58:04,510
Hii inaonekana mengi kama safu JavaScript associative,

951
00:58:04,510 --> 00:58:06,600
na kwa kweli, ni kwa sababu ni.

952
00:58:06,600 --> 00:58:09,710
JSON anasimama kwa JavaScript nukuu Object.

953
00:58:09,710 --> 00:58:15,020
Hii ni kimsingi walikubaliana juu format kwa ajili ya kuhamisha data na kurudi.

954
00:58:15,020 --> 00:58:18,280
Hapa hii JSON kitu au hii JSON associative safu

955
00:58:18,280 --> 00:58:21,010
ni kutuma yangu baadhi ya data kuhusu kozi.

956
00:58:21,010 --> 00:58:25,110
>> funguo wa safu hii ni mambo kama kozi ambayo ina thamani ya cs50,

957
00:58:25,110 --> 00:58:29,140
na chini hapa tunaweza kuona kwamba ninaweza kuwa thamani ambayo ni safu.

958
00:58:29,140 --> 00:58:32,730
Sina kufanya mambo kama Hazrat nje masharti na kuangalia kwa koma

959
00:58:32,730 --> 00:58:35,330
na kufanya mambo mambo kama hayo.

960
00:58:35,330 --> 00:58:38,820
Kwa sababu hii ni alitangaza katika hii format JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript na jQuery tayari wana kazi ya kubadilisha string

962
00:58:43,510 --> 00:58:48,140
kwamba inaonekana kama hii JSON katika safu halisi JavaScript associative

963
00:58:48,140 --> 00:58:50,440
kwamba tunaweza kufanya kazi pamoja.

964
00:58:50,440 --> 00:58:56,660
Kufanya hivyo ni rahisi kama kusema kwamba hakuna tena ni faili hii, suggest.php,

965
00:58:56,660 --> 00:58:59,040
kutuma mimi nyuma tu kamba ya maandishi,

966
00:58:59,040 --> 00:59:01,950
lakini najua ni kwenda kuwa na kutuma mimi nyuma JSON.

967
00:59:01,950 --> 00:59:06,760
Hiyo ina maana kwamba JSON kwamba inaweza kuwa waongofu katika safu JavaScript associative.

968
00:59:06,760 --> 00:59:10,830
Na hivyo jQuery, napenda wewe kufanya hivyo kwa ajili yangu.

969
00:59:10,830 --> 00:59:13,990
Hiyo ina maana kwamba hii parameter majibu hapa,

970
00:59:13,990 --> 00:59:16,070
hii ni tena tu kamba.

971
00:59:16,070 --> 00:59:19,860
Kwa sababu tumekuwa aliiambia jQuery kuwa inakuja baadhi JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery ni kwenda kuwa smart kutosha kusema, "Wewe alitaka JSON?"

973
00:59:22,950 --> 00:59:26,890
"Mimi naenda kubadili kwamba katika safu associative kwa ajili yenu."

974
00:59:26,890 --> 00:59:32,100
Hebu kweli kuangalia tab Mtandao mara moja tuna quote4.js.

975
00:59:32,100 --> 00:59:35,400
Tutaweza kubadili hili na pakia ukurasa.

976
00:59:37,150 --> 00:59:41,250
Sasa mimi nina kwenda aina katika-tena.

977
00:59:41,250 --> 00:59:45,600
Nimekuwa alifanya maombi wanandoa suggest.php, lakini sasa hii majibu,

978
00:59:45,600 --> 00:59:48,670
badala ya kamba tu, ni JSON.

979
00:59:48,670 --> 00:59:52,580
Hivyo nina wazi curly brace akisema, "Hiyo inakuja safu associative."

980
00:59:52,580 --> 00:59:56,830
>> ufunguo wa kwanza na pekee ya safu hii associative inaitwa alama,

981
00:59:56,830 --> 01:00:00,240
na kisha hapa ni safu ya yote ya alama husika

982
01:00:00,240 --> 01:00:04,820
kuja sasa kutoka Fedha Yahoo!, si kutoka orodha kwamba gigantic.

983
01:00:06,110 --> 01:00:10,630
Hiyo ni jinsi gani naweza tu populate Plugin oto kukamilisha

984
01:00:10,630 --> 01:00:14,280
pamoja na baadhi ya data kwamba si kuja kutoka faili mtaa ambayo tayari predetermined

985
01:00:14,280 --> 01:00:17,490
lakini kutoka kitu kingine.

986
01:00:17,490 --> 01:00:21,160
Ni zinageuka kuwa tunaweza kweli kuchukua faida ya teknolojia iitwayo JSONP,

987
01:00:21,160 --> 01:00:27,420
au JSON na padding, kwamba kuondokana hii middleman suggest.php.

988
01:00:27,420 --> 01:00:34,010
Lakini badala ya kufanya hivyo, hebu badala ya kuangalia jinsi gani naweza kuboresha hii hata zaidi.

989
01:00:34,010 --> 01:00:36,040
Mimi kwa kweli kama Typeahead bootstrap ya. Ni kweli nice.

990
01:00:36,040 --> 01:00:39,570
Lakini sisi ni kupata bora katika JavaScript na tunataka aina ya kufanya hili sisi wenyewe,

991
01:00:39,570 --> 01:00:43,870
labda kuangalia nini Plugin hii inaweza kufanya.

992
01:00:43,870 --> 01:00:46,500
Hebu tena kutumia kitu Typeahead,

993
01:00:46,500 --> 01:00:50,550
na hebu jaribu kufanya orodha hii ya hifadhi ya alipendekeza wenyewe.

994
01:00:50,550 --> 01:00:53,790
Hapa katika quote6.php tunakwenda kuanza mbali kwa njia hiyo hiyo.

995
01:00:53,790 --> 01:00:58,050
Kila wakati mtu aina fulani, tunataka kufanya ombi AJAX.

996
01:00:58,050 --> 01:01:01,590
Hii ni sawa na Instant yetu ya awali CS50 Fedha.

997
01:01:01,590 --> 01:01:05,020
Badala ya kufanya ombi quote.php,

998
01:01:05,020 --> 01:01:08,530
sisi ni sasa na kufanya ombi faili kwamba sawa kama kabla, hii suggest.php,

999
01:01:08,530 --> 01:01:12,460
ambayo ni haki kwenda kuvuta data kutoka Fedha Yahoo!.

1000
01:01:12,460 --> 01:01:19,480
>> Tena, bado tuko wanatarajia JSON, lakini sasa tangu Typeahead si kufanya hili kwa ajili yetu,

1001
01:01:19,480 --> 01:01:24,850
sisi pia haja ya kutuma pamoja thamani kwamba ni ndani ya boksi sasa Nakala.

1002
01:01:24,850 --> 01:01:28,120
Sasa sisi kujua nini kuuliza Yahoo! Finance kwa,

1003
01:01:28,120 --> 01:01:34,160
na hivyo sasa hapa ni kazi ambayo tunataka kutekeleza mara moja ombi tamati.

1004
01:01:34,160 --> 01:01:36,520
Hatuna Plugin kufanya orodha kwa ajili yetu,

1005
01:01:36,520 --> 01:01:40,630
hivyo hapa ambapo sisi ni kweli kwenda kujenga orodha ya mapendekezo.

1006
01:01:40,630 --> 01:01:44,850
Ili kufanya hivyo, kiasi kama katika PHP sisi concatenated masharti haya makubwa ya HTML

1007
01:01:44,850 --> 01:01:48,170
kisha sisi kuchapishwa yao, tunaweza kufanya hivyo halisi kitu katika JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Kwanza tunakwenda kuanza mbali hii string kuitwa mapendekezo,

1009
01:01:51,850 --> 01:01:54,590
na kamba hii ni kwenda tu na vyenye baadhi HTML.

1010
01:01:54,590 --> 01:01:58,320
Sisi unataka kuwa katika orodha ya mambo, hivyo sisi ni kwenda kuanza mbali na tag orodha hii,

1011
01:01:58,320 --> 01:02:03,340
na sasa tunakwenda iterate juu ya wote wa ishara waliokuwa wamerudi nyuma yetu.

1012
01:02:03,340 --> 01:02:06,500
Kumbuka, kwa sababu tumekuwa alisema dataType: 'json', hii si kamba.

1013
01:02:06,500 --> 01:02:09,500
Hii ni tayari safu kwa ajili yetu. Hiyo ni kweli cool.

1014
01:02:09,500 --> 01:02:13,790
Tunaweza tu kusema, "Nataka append kipengele orodha."

1015
01:02:13,790 --> 01:02:16,000
Tutaweza kuiweka ndani ya kipengele katika upande wa kwamba,

1016
01:02:16,000 --> 01:02:19,030
tutaweza kuwapa darasa ya mapendekezo hivyo tunajua ni nini,

1017
01:02:19,030 --> 01:02:23,880
na sasa hapa ni ishara kwamba sisi got nyuma kutoka Fedha Yahoo!.

1018
01:02:23,880 --> 01:02:27,230
>> Mara tumekuwa umba kipengele kwa kila moja ya alama tumekuwa Gotten nyuma,

1019
01:02:27,230 --> 01:02:30,100
sisi tu unataka karibu mbali orodha.

1020
01:02:30,100 --> 01:02:33,040
Hivyo sasa mapendekezo inawakilisha hii kidogo HTML fragment

1021
01:02:33,040 --> 01:02:37,860
kwamba wakati kuweka kwenye ukurasa ni kwenda kuwa orodha ya mambo ya sisi ni kuangalia kwa.

1022
01:02:37,860 --> 01:02:41,070
Sasa hebu kweli kuweka kwamba kwenye ukurasa.

1023
01:02:41,070 --> 01:02:46,390
Ili kufanya hivyo Nimekuwa kwa kweli umba mwingine div tupu na Nimekupa ni ID ya mapendekezo.

1024
01:02:46,390 --> 01:02:52,520
Kiasi kama sisi kuweka yaliyomo div kwamba itakuwa kuonyesha bei ya data hisa,

1025
01:02:52,520 --> 01:02:58,600
sisi sasa nataka tu kuweka yaliyomo div hii kwa kila kamba hii ni

1026
01:02:58,600 --> 01:03:00,290
ambayo ina alama hizi.

1027
01:03:00,290 --> 01:03:07,650
Kwa kutumia njia hii HTML, hii variable mapendekezo, hii kamba, ni kamba ya HTML.

1028
01:03:07,650 --> 01:03:13,490
Mimi nataka wewe kuchukua HTML na kuiweka ndani ya div aitwaye mapendekezo.

1029
01:03:13,490 --> 01:03:15,680
Tumekuwa tu umeongezewa kitu DOM sasa.

1030
01:03:15,680 --> 01:03:20,360
Tumekuwa aliongeza baadhi ya vipengele mpya DOM kwamba sasa tunaweza kuonyesha kwenye ukurasa.

1031
01:03:20,360 --> 01:03:22,540
Hebu kuona nini hii inaonekana kama.

1032
01:03:22,540 --> 01:03:29,110
Kama sisi shehena katika quote6 na sasa sisi kuja nyuma,

1033
01:03:29,110 --> 01:03:34,480
sasa wakati mimi kuanza kuandika aapl, hatuna tena kwamba bootstrap oto kukamilisha,

1034
01:03:34,480 --> 01:03:38,470
lakini sisi sasa kuwa na orodha hii kwamba sisi alifanya wenyewe.

1035
01:03:38,470 --> 01:03:43,230
Hii ni kidogo kidogo kuliko uglier Typeahead bootstrap, kwa mfano,

1036
01:03:43,230 --> 01:03:45,580
lakini haina kuruhusu sisi kufanya kitu kimoja nyingine.

1037
01:03:45,580 --> 01:03:48,660
Wakati sisi walikuwa kuangalia Plugin kwamba bootstrap,

1038
01:03:48,660 --> 01:03:52,590
tuliona kwamba wakati sisi autocompleted, moja ya maadili oto kukamilisha ilikuwa aapl.

1039
01:03:52,590 --> 01:03:54,820
Hiyo inaweza kuwa hivyo kusaidia.

1040
01:03:54,820 --> 01:03:59,100
Kama mtumiaji, nipate si mara moja kutambua wote wa ishara ya hisa.

1041
01:03:59,100 --> 01:04:02,370
Nini mimi pengine zaidi uwezekano wa kutambua ni kampuni ya majina halisi.

1042
01:04:02,370 --> 01:04:05,310
Hivyo bila kuwa kweli kusaidia ikiwa badala ya kusema aapl

1043
01:04:05,310 --> 01:04:07,970
hii alisema kitu kama Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Kwa sababu tumekuwa akavingirisha hii sisi wenyewe, tunaweza kweli kwa urahisi kufanya hivyo.

1045
01:04:12,240 --> 01:04:17,630
Hebu kufungua quote yetu ya mwisho faili hapa, hivyo quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Same kitu. Nimekuwa tu umba faili nyingine PHP kwamba atarudi kwetu zaidi kuliko tu alama.

1047
01:04:23,200 --> 01:04:25,550
Itakuwa pia kutupa nyuma majina ya kampuni.

1048
01:04:25,550 --> 01:04:28,150
Na hivyo sisi ni kufanya kitu kimoja. Sisi ni kufanya ombi AJAX.

1049
01:04:28,150 --> 01:04:32,370
Mara ombi amekamilisha, tunakwenda nitafanya kazi hii hapa,

1050
01:04:32,370 --> 01:04:36,520
na kazi hii ni kwenda kujenga string kubwa ya vipengele.

1051
01:04:36,520 --> 01:04:39,520
Lakini tofauti hapa ni kwamba thamani ya orodha hizi ni tena tu ishara,

1052
01:04:39,520 --> 01:04:45,370
ni sasa jina.

1053
01:04:45,370 --> 01:04:47,070
Hivyo tuna moja ndogo tatizo.

1054
01:04:47,070 --> 01:04:51,590
Tunapotumia lookup yetu, tunahitaji kwa namna fulani kupita mfano.

1055
01:04:51,590 --> 01:04:54,950
Hatuwezi kupitisha kitu lookup kama Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Tunahitaji kupita MSFT.

1057
01:04:57,900 --> 01:05:01,640
Wakati sisi ni kuandika HTML, tuna kura ya sifa nzuri kujengwa katika.

1058
01:05:01,640 --> 01:05:05,440
wanaweza kuwa na yanayohusiana na hayo href au darasa.

1059
01:05:05,440 --> 01:05:08,230
Lakini nini sisi kweli wanahitaji sasa ni kwa kila moja ya viungo hivi

1060
01:05:08,230 --> 01:05:11,120
kuwa ishara ya hisa yanayohusiana na hayo.

1061
01:05:11,120 --> 01:05:14,240
Hakuna kujengwa katika sifa HTML kwa alama ya hisa,

1062
01:05:14,240 --> 01:05:21,010
lakini bahati, HTML5 inaruhusu sisi kujenga wetu sifa mwenyewe kuwa chochote tunataka.

1063
01:05:21,010 --> 01:05:24,620
Kwa kusema data-alama, nimekuwa ilianzisha sifa mpya

1064
01:05:24,620 --> 01:05:29,350
ambaye jina mimi tu alifanya juu, na hii ni sawa kwa sababu mimi prefaced kwa data hii.

1065
01:05:29,350 --> 01:05:34,270
Sisi ni kwenda kuhifadhi ndani ya huko ishara kutoka hisa sasa.

1066
01:05:34,270 --> 01:05:39,590
Nini maana ya ni kwamba hata kama sisi ni kuonyesha thamani ya jina la kampuni

1067
01:05:39,590 --> 01:05:43,380
ndani ya oto kukamilisha wetu, bado tuko kukumbuka alama

1068
01:05:43,380 --> 01:05:47,110
kwamba ni kuhusishwa na kila kampuni.

1069
01:05:47,110 --> 01:05:50,350
njia ya sisi ni kufanya kwamba ni ndani ya hii kipengele yenyewe.

1070
01:05:50,350 --> 01:05:52,930
Hivyo kwamba maana tunahitaji kufanya moja zaidi mabadiliko.

1071
01:05:52,930 --> 01:05:57,090
Wakati sisi bonyeza yake sasa, tunahitaji kweli kuchukua faida ya sifa ishara

1072
01:05:57,090 --> 01:06:00,220
badala tu ya thamani yake.

1073
01:06:00,220 --> 01:06:05,010
Kama sisi nyuma juu, sisi ambatisha handler tukio mapendekezo.

1074
01:06:05,010 --> 01:06:09,280
Kila moja ya mapendekezo haya ni clicked sasa, nataka kufanya kitu.

1075
01:06:09,280 --> 01:06:13,160
Nini nataka kufanya ni kubadilisha thamani ya sanduku kwamba pembejeo.

1076
01:06:13,160 --> 01:06:16,100
Sasa nataka kuweka hiyo Val kazi.

1077
01:06:16,100 --> 01:06:21,060
>> Hivyo bila hoja yoyote kazi hii Val anarudi wewe kile ambacho tayari katika sanduku asilia,

1078
01:06:21,060 --> 01:06:27,070
lakini kama wewe kuwapa kamba, ni kwenda kuchukua kamba na kuiweka katika sanduku asilia.

1079
01:06:27,070 --> 01:06:28,980
Mimi nina kuchagua matini yake sanduku kwa njia sawa.

1080
01:06:28,980 --> 01:06:31,230
Jina Ni ni ishara ya ndani ya fomu quote-.

1081
01:06:31,230 --> 01:06:37,540
Sasa mimi nina kupeleka thamani ya sifa data-mfano.

1082
01:06:37,540 --> 01:06:41,560
Hii kitu hapa ni mpya, hii $ (hii).

1083
01:06:41,560 --> 01:06:46,850
Nini hii inahusu ni kipengele kwamba alikuwa clicked.

1084
01:06:46,850 --> 01:06:50,880
Tunaweza kuona hapa kwamba sisi siyo attaching tukio click

1085
01:06:50,880 --> 01:06:54,690
kwa kila kipengele na darasa ya pendekezo binafsi.

1086
01:06:54,690 --> 01:06:57,140
Badala yake, sisi ni wakikaribia tofauti kidogo.

1087
01:06:57,140 --> 01:07:01,700
Badala yake sisi ni kusema kila kitu ndani ya hii div mapendekezo,

1088
01:07:01,700 --> 01:07:04,080
ambayo kumbuka ni chombo tu kwa orodha hiyo,

1089
01:07:04,080 --> 01:07:10,150
kama kitu ndani div hii ni clicked na ina darasa la pendekezo,

1090
01:07:10,150 --> 01:07:13,000
Mimi nataka tukio hili kwa moto.

1091
01:07:13,000 --> 01:07:17,490
Kimsingi nini maana ya hii tunaweza kufanya ni tunaweza kutumia tena hiyo tukio handler

1092
01:07:17,490 --> 01:07:20,000
kwa mambo yote katika orodha.

1093
01:07:20,000 --> 01:07:22,080
Hivyo hatuna kuwa tukio moja handler kwa kipengele kwanza

1094
01:07:22,080 --> 01:07:24,550
na tofauti tukio handler kwa kipengele cha pili.

1095
01:07:24,550 --> 01:07:29,880
Tunaweza kusema badala, "Nataka huo tukio handler yanahusu kila kitu katika orodha yangu."

1096
01:07:29,880 --> 01:07:34,420
Lakini tunahitaji kujua namna fulani ambayo ilikuwa kipengele clicked.

1097
01:07:34,420 --> 01:07:38,450
Hii "hii" keyword inawakilisha tu.

1098
01:07:38,450 --> 01:07:42,360
Hii ni kifaa kwamba mara tu clicked kwa mtumiaji.

1099
01:07:42,360 --> 01:07:47,680
Kama mimi tu clicked kiungo 3, hii inawakilisha kipengele cha kiungo kwamba 3,

1100
01:07:47,680 --> 01:07:51,670
ambayo ina maana kwamba naweza kupata sifa yake, data-alama,

1101
01:07:51,670 --> 01:07:57,760
ambayo tunajua ina vyenye alama hiyo kuhusishwa na kampuni mimi tu clicked.

1102
01:07:57,760 --> 01:08:04,550
Kama sisi kuruka nyuma ya kupata fedha ukurasa wetu,

1103
01:08:04,550 --> 01:08:08,580
tunaweza kuona kwamba mara sasa mimi kuanza kuandika kitu kama MSFT,

1104
01:08:08,580 --> 01:08:11,220
sisi ni tena tu kupata alama ya hisa,

1105
01:08:11,220 --> 01:08:13,720
sisi ni sasa kupata makampuni halisi.

1106
01:08:13,720 --> 01:08:20,410
Lakini wakati mimi bonyeza mmoja wa makampuni haya,

1107
01:08:20,410 --> 01:08:25,180
tunaweza kuona kwamba sisi ni kweli populating sanduku Nakala si kwa jina la kampuni

1108
01:08:25,180 --> 01:08:29,850
lakini alikuwa na chochote kuhifadhiwa ndani ya sifa data hizo.

1109
01:08:29,850 --> 01:08:32,880
Na hivyo kama mimi kweli kukagua moja ya mambo haya kwa haki kubonyeza ni

1110
01:08:32,880 --> 01:08:36,200
na kubonyeza Kagua Element, tunaweza kweli kuona nini hii inaonekana kama.

1111
01:08:36,200 --> 01:08:40,290
>> Kumbuka hili ni jambo ambalo sisi aliumba ndani ya kwamba kwa kitanzi

1112
01:08:40,290 --> 01:08:42,649
tulipokuwa kujenga kwamba kamba ya HTML.

1113
01:08:42,649 --> 01:08:47,870
Tunaweza kuona hapa kwamba hii data-ishara ina thamani ya MSFT, ambayo ni kubwa.

1114
01:08:47,870 --> 01:08:49,189
Hiyo ni nini sisi walikuwa wanatarajia.

1115
01:08:49,189 --> 01:08:53,170
Hiyo ni ishara na kwamba ni jinsi gani sisi got thamani ya kwamba sisi zinahitajika kutumia

1116
01:08:53,170 --> 01:08:56,140
ndani ya sanduku hili asilia.

1117
01:08:56,140 --> 01:08:58,850
Hiyo inatosha kwa ajili ya quote sababu hiyo ni aina ya boring.

1118
01:08:58,850 --> 01:09:02,990
Hebu tu kufanya nyongeza baadhi ya haraka na kwingineko ukurasa wetu.

1119
01:09:02,990 --> 01:09:08,109
Ikiwa umetumia CS50 Fedha kwa wakati na kuanza kununua na kuuza mengi ya hifadhi,

1120
01:09:08,109 --> 01:09:11,300
hatimaye meza hii ni ya kwenda kupata pretty kubwa,

1121
01:09:11,300 --> 01:09:13,850
na wewe ni kwenda kutaka ticker hisa, bila shaka.

1122
01:09:13,850 --> 01:09:20,350
Mara meza ni kweli, kweli kubwa, inaweza kuwa na manufaa kwa mtumiaji kujaribu kutafuta juu yake.

1123
01:09:20,350 --> 01:09:23,290
Ndani ya sanduku tafuta kama mimi kuanza kuandika kitu kama Disney

1124
01:09:23,290 --> 01:09:26,359
na kuangalia kwa hisa wangu Mickey Mouse, tunaweza kuona kwamba meza sasa kuchuja

1125
01:09:26,359 --> 01:09:28,189
kulingana na kile mimi tu typed in

1126
01:09:28,189 --> 01:09:31,640
Utendakazi huu inaonekana super ngumu, lakini ni kweli, kweli rahisi

1127
01:09:31,640 --> 01:09:33,859
na jQuery na javascript.

1128
01:09:33,859 --> 01:09:39,189
Faili hii ni pamoja na faili portfolio.php JavaScript kuitwa portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Hebu tuangalie kwamba.

1130
01:09:41,130 --> 01:09:44,890
Hivyo html, JS, na kwingineko.

1131
01:09:44,890 --> 01:09:49,210
Hapa ni mahali ambapo sisi ni kufanya kwamba kutafuta kwenye meza.

1132
01:09:49,210 --> 01:09:52,750
Jambo la kwanza mimi haja ya kufanya ni ambatisha handler tukio sanduku kwamba Nakala

1133
01:09:52,750 --> 01:09:55,760
kwa sababu tunajua kwamba tunataka kazi yetu kuchuja kwa moto

1134
01:09:55,760 --> 01:09:59,800
wakati kila kitu kwa sababu mtumiaji mashinikizo hatuna wakati kwa vifungo Search.

1135
01:09:59,800 --> 01:10:03,000
Jambo la kwanza tunahitaji kufanya ni kufikiri nini user ni kwa ajili ya kutafuta,

1136
01:10:03,000 --> 01:10:04,780
tu kama sisi alifanya mbele.

1137
01:10:04,780 --> 01:10:11,320
Hii inahusu Keyword kipengele sasa user ni mazungumzo na.

1138
01:10:11,320 --> 01:10:14,070
>> Kwa sababu user ni mazungumzo na sanduku ya utafutaji,

1139
01:10:14,070 --> 01:10:17,020
$ Hii inawakilisha sanduku utafutaji,

1140
01:10:17,020 --> 01:10:21,820
hivyo this.val inatupa nini ndani ya sanduku tafuta mtumiaji sasa ni kuandika.

1141
01:10:22,810 --> 01:10:27,320
Hivyo, sasa ni nini tunataka kufanya ni tunataka iterate juu ya yote ya mistari

1142
01:10:27,320 --> 01:10:29,240
ndani ya meza yetu.

1143
01:10:29,240 --> 01:10:35,630
Kuchagua aina ya safu katika meza yetu, mimi alitoa kwamba meza ID ya kwingineko meza,

1144
01:10:35,630 --> 01:10:39,060
na kila mstari ni kuwakilishwa na kipengele TR,

1145
01:10:39,060 --> 01:10:42,080
hivyo selector hii ni ya kwenda na kurudi kwangu safu kubwa

1146
01:10:42,080 --> 01:10:44,370
ya mistari yote katika meza yangu.

1147
01:10:44,370 --> 01:10:47,010
Sasa nataka iterate juu ya kwamba safu.

1148
01:10:47,010 --> 01:10:52,390
Mimi naweza wewe kwa kitanzi, lakini jQuery kweli hutoa sisi kazi nzuri iitwayo "kila mmoja."

1149
01:10:52,390 --> 01:10:55,220
Nini kila gani ni ya kila mmoja anachukua hoja,

1150
01:10:55,220 --> 01:10:57,090
na hoja kuwa ni kazi.

1151
01:10:57,090 --> 01:11:02,760
Nini ni kwenda kufanya ni itakavyo kuomba kwamba kazi kwa kipengele kila ndani ya orodha hii.

1152
01:11:02,760 --> 01:11:05,550
Kazi hii inachukua moja hoja hiyo ni e,

1153
01:11:05,550 --> 01:11:10,090
na wakati kazi hii ni kunyongwa, e hii ni kwenda kubadilishwa na safu ya kwanza,

1154
01:11:10,090 --> 01:11:12,070
basi safu ya pili, na kisha safu ya tatu.

1155
01:11:12,070 --> 01:11:15,150
Kwa njia hii, hii ni kitu kimoja kama mbio kwa kitanzi

1156
01:11:15,150 --> 01:11:21,360
na kisha kuhesabia kipengele sasa msingi ndani ya index ya yako kwa kitanzi.

1157
01:11:21,360 --> 01:11:24,750
Katika kila iteration, kwa kila moja ya mambo haya katika meza,

1158
01:11:24,750 --> 01:11:30,560
Nataka kuangalia kama Nakala ya kipengele - Nakala ya kiini ndani ya safu -

1159
01:11:30,560 --> 01:11:33,130
mechi nini mimi kwa ajili ya kutafuta.

1160
01:11:33,130 --> 01:11:36,390
Hii kubwa ya muda mrefu ya kamba ya amri ni jinsi mimi naweza kufanya hivyo.

1161
01:11:36,390 --> 01:11:40,900
Kwanza, tena, hii sasa inahusu - kwa sababu ni ya ndani ya kazi mpya -

1162
01:11:40,900 --> 01:11:45,020
hii ni sasa mstari wa sasa katika meza.

1163
01:11:45,020 --> 01:11:47,340
Nataka kuchukua mstari wa sasa katika meza,

1164
01:11:47,340 --> 01:11:49,950
na mimi nataka kupata yote ya watoto wake.

1165
01:11:49,950 --> 01:11:51,940
Kumbuka, DOM ni mti wa kihierarkia,

1166
01:11:51,940 --> 01:11:54,200
ambayo ina maana kwamba mambo kuwa na idadi ya watoto.

1167
01:11:54,200 --> 01:12:00,180
>> Hili watoto. Kazi anaenda kurudi mimi nyuma ya safu ya wote wa mambo

1168
01:12:00,180 --> 01:12:03,240
kwamba ni watoto wa, katika kesi hii, mfululizo katika meza.

1169
01:12:03,240 --> 01:12:07,150
Hii ni tu tu seli ndani ya mstari.

1170
01:12:07,150 --> 01:12:09,230
Mimi nataka tu tafuta juu ya kiini kwanza.

1171
01:12:09,230 --> 01:12:13,090
Kazi huu. Kwanza anasema nipe kipengele kwanza katika safu hiyo.

1172
01:12:13,090 --> 01:12:17,070
Kisha kazi Nakala anasema kupata yangu hasa nini ndani ya kiini kwamba

1173
01:12:17,070 --> 01:12:19,530
tangu mimi unataka kutafuta juu ya maandishi kwamba.

1174
01:12:19,530 --> 01:12:21,040
Hatimaye, hebu kubadilisha kwa Herufi za chini,

1175
01:12:21,040 --> 01:12:23,940
ili tuweze kufanya Nakala kesi maswali insensitive.

1176
01:12:23,940 --> 01:12:29,990
Hatimaye, tunataka kuona kama kwamba kamba ndani ya meza ina string tuko kwa ajili ya kutafuta.

1177
01:12:29,990 --> 01:12:32,980
kazi indexOf katika JavaScript anafanya tu.

1178
01:12:32,980 --> 01:12:37,060
Inatuambia kama au kamba hii ina mwingine kamba.

1179
01:12:37,060 --> 01:12:40,150
Kama ni kweli kwamba kiini ina nini mimi kwa ajili ya kutafuta,

1180
01:12:40,150 --> 01:12:42,140
basi mimi nataka kuhakikisha kwamba ni umeonyesha.

1181
01:12:42,140 --> 01:12:45,330
Njia show watasema, "Onyesha kipengele."

1182
01:12:45,330 --> 01:12:50,350
Kama hii si kesi, basi hiyo ina maana chochote mimi nina kwa ajili ya kutafuta haipo

1183
01:12:50,350 --> 01:12:53,550
ndani ya safu ya kwamba, na hivyo nataka kujificha ni kutoka kwa mtumiaji.

1184
01:12:53,550 --> 01:12:59,240
Kinafikia kwamba nzuri ya kuchuja athari ambapo hakuna tena tunaona meza nzima.

1185
01:12:59,240 --> 01:13:01,480
Kama wewe ni nia ya jinsi ya kufanya hii ticker kama vile,

1186
01:13:01,480 --> 01:13:04,180
tutaweza post chanzo online. Lakini ni kweli rahisi.

1187
01:13:04,180 --> 01:13:09,860
JQuery ina mbinu kushangaza kwa michoro haya na manipulating mali CSS.

1188
01:13:09,860 --> 01:13:11,020
Hivyo, hiyo ni kwa ajili yangu.

1189
01:13:11,020 --> 01:13:15,560
>> Nini basi uongo mbele? Kama utaona katika siku chache, mwisho miradi pendekezo ni kutokana.

1190
01:13:15,560 --> 01:13:17,730
mwisho miradi pendekezo mapenzi ya kuuliza maswali machache,

1191
01:13:17,730 --> 01:13:19,420
lakini kati yao itakuwa tatu Milestones -

1192
01:13:19,420 --> 01:13:22,840
mmoja "nzuri" hatua, moja hatua bora, na bora.

1193
01:13:22,840 --> 01:13:25,870
wazo kuwa kweli kusaidia guys kuweka matarajio yako

1194
01:13:25,870 --> 01:13:29,160
ili minimally utakuwa na furaha na pato la mradi wako wa mwisho

1195
01:13:29,160 --> 01:13:32,060
na itakuwa "nzuri" hadi sasa kama wewe ni wasiwasi.

1196
01:13:32,060 --> 01:13:34,540
Lakini basi kwa maslahi ya kupata wewe kufikia kidogo tu kwa kitu bora

1197
01:13:34,540 --> 01:13:37,680
au kitu bora, tutaweza pia aina ya kushinikiza wewe kuelekea kuwa vilevile.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-Thon, wakati huo huo, ni katika wiki chache.

1199
01:13:40,660 --> 01:13:44,340
Kawaida, sisi kufanya hivyo kwa misingi basis bahati nasibu kwa sababu ya riba,

1200
01:13:44,340 --> 01:13:47,680
lakini ni tabia mbaya tutaweza kuchukua mia wachache wetu katika mabasi kuhamisha kutoka Harvard Square

1201
01:13:47,680 --> 01:13:51,540
chini Kendall Square ambapo Microsoft ina kituo nzuri aptly inayoitwa "Nerd" -

1202
01:13:51,540 --> 01:13:53,830
New England Utafiti na Maendeleo ya Center.

1203
01:13:53,830 --> 01:13:56,380
Tutaweza kupata huko karibu pm 8 Tutaweza kuwa na baadhi ya chakula.

1204
01:13:56,380 --> 01:13:58,160
Around var kl 1 tutaweza kuwa na baadhi ya chakula zaidi.

1205
01:13:58,160 --> 01:14:02,150
Around 5:00 ikiwa bado uko ari tutaweza kichwa juu IHOP au kuchukua wewe nyuma ya chuo.

1206
01:14:02,150 --> 01:14:04,380
Lengo kuna kupiga mbizi katika miradi ya mwisho

1207
01:14:04,380 --> 01:14:06,190
pamoja ya wanafunzi na wafanyakazi.

1208
01:14:06,190 --> 01:14:08,280
Kisha siku chache baadaye ni Fair CS50,

1209
01:14:08,280 --> 01:14:10,990
ambayo ni kweli maana ya kuwa fursa kwa wewe guys ya kuonyesha kazi yako

1210
01:14:10,990 --> 01:14:12,700
na mafanikio kwa muhula

1211
01:14:12,700 --> 01:14:15,610
wakati rubbing mabega na kila mmoja na kupata hisia ya kile kila mtu alifanya.

1212
01:14:15,610 --> 01:14:17,850
Kwa kuwa alisema, wengi shukrani kwa Tommy na Yusufu,

1213
01:14:17,850 --> 01:14:19,960
na sisi kuona juu ya Jumatatu.

1214
01:14:19,960 --> 01:14:24,070
 [Applause]