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

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

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

4
00:00:07,940 --> 00:00:13,340
>> Ito ay CS50. Ito ang katapusan ng linggo 9. Maraming salamat sa inyo.

5
00:00:13,340 --> 00:00:15,310
Wakas. Linggo 9. Nakatanggap ako ito.

6
00:00:15,310 --> 00:00:18,590
Ngayon ipagpapatuloy namin ang aming pag-uusap tungkol sa web programming

7
00:00:18,590 --> 00:00:21,660
may isang mata patungo sa huling proyekto, hindi dahil mayroon kang upang gawin ang isang bagay na web-based

8
00:00:21,660 --> 00:00:25,610
para sa pangwakas na proyekto ngunit dahil sa alinman sa para sa panghuling proyekto o pagkatapos CS50

9
00:00:25,610 --> 00:00:29,000
ito ay tiyak na direksyon kung saan modernong software ay pagpunta.

10
00:00:29,000 --> 00:00:31,770
At pa ito ay hindi talagang isang madaling bagay.

11
00:00:31,770 --> 00:00:35,040
Sa katunayan, isa ng ang hardest bagay na gawin ay ang aspeto ng disenyo.

12
00:00:35,040 --> 00:00:38,600
>> Halimbawa, sa pamamagitan ng disenyo aktwal na namin ibig sabihin ng pagkuha ng user interface

13
00:00:38,600 --> 00:00:40,420
o ang karanasan ng gumagamit sa kanan.

14
00:00:40,420 --> 00:00:43,200
Ako sa palagay - at alam namin mula sa isang kamakailan-lamang na hanay ng problema

15
00:00:43,200 --> 00:00:45,960
kapag ng ilang mo ang naisahimpapawid sa iyong mga hinaing tungkol sa ilang piraso ng software

16
00:00:45,960 --> 00:00:49,000
o hardware na infuriates, kung sa campus o off -

17
00:00:49,000 --> 00:00:51,930
may maraming mga site out doon, ng maraming ng hardware out doon,

18
00:00:51,930 --> 00:00:53,900
na uri ng sucks.

19
00:00:53,900 --> 00:00:58,730
Ngunit ang katotohanan ay na ang paggawa ng mga bagay na madaling gamitin pa gayunman makapangyarihang

20
00:00:58,730 --> 00:01:00,550
ay mahirap na hamon.

21
00:01:00,550 --> 00:01:03,680
Kaya para sa araw na Tinanong ko Joseph at Tommy sa samahan ako dito

22
00:01:03,680 --> 00:01:06,680
upang maaari naming magkaroon ng isang pag-uusap, parehong tungkol sa disenyo

23
00:01:06,680 --> 00:01:09,090
at kung ano ang mga uri ng mga proseso ng pag-iisip ay dapat simulan ang pagpunta sa pamamagitan ng iyong ulo

24
00:01:09,090 --> 00:01:12,040
kapag ikaw idisenyo ang iyong panghuling proyekto, ang iyong mga hinaharap na pagsusumikap.

25
00:01:12,040 --> 00:01:15,040
At pagkatapos ay sa Tommy ng tulong titingnan namin sa ilang ng ang mga detalye ng pagpapatupad.

26
00:01:15,040 --> 00:01:18,440
Paano maaari kang magkaroon ng ilang pangitain sa papel o sa iyong isip

27
00:01:18,440 --> 00:01:20,760
na maaari mo nang isagawa ang programa

28
00:01:20,760 --> 00:01:24,030
sa pamamagitan ng paggamit ng ilan sa ang mga teknolohiya at diskarte Sinimulan na namin ang pinag-uusapan,

29
00:01:24,030 --> 00:01:29,080
lalo JavaScript at isang bagay kahit mas bagong, lalo na ang AJAX, asynchronous JavaScript.

30
00:01:29,080 --> 00:01:32,950
Na pinapayagan ka na lumikha ng lahat ng mga mas dynamic ng isang user interface

31
00:01:32,950 --> 00:01:35,780
sa pamamagitan ng sa pagkuha ng higit pa at mas maraming data progressively mula sa isang server.

32
00:01:35,780 --> 00:01:38,560
Kaya makikita namin makita ang ilang mga snippet pati na rin ngayon.

33
00:01:38,560 --> 00:01:41,800
Bilang isang bukod, kung ikaw ay interesado sa pagtuon sa computer science

34
00:01:41,800 --> 00:01:45,010
o minoring sa computer science, alam na ito Biyernes sa tanghali

35
00:01:45,010 --> 00:01:48,750
sa Maxwell Dworkin 221 ay isang kaganapan ng pizza

36
00:01:48,750 --> 00:01:50,780
kung saan maaari kang matuto nang kaunti pa tungkol sa computer science.

37
00:01:50,780 --> 00:01:54,860
Sa iyong paraan out ang pinto ngayon, magagawa mong upang kunin ang isang hindi opisyal na gabay sa CS sa Harvard.

38
00:01:54,860 --> 00:01:57,290
Namin itong ilagay sa mga lata ng basura sa labas sa taas ng baywang

39
00:01:57,290 --> 00:01:59,750
upang kung nais mong i-grab ang mga ito at matuto nang kaunti pa tungkol CS,

40
00:01:59,750 --> 00:02:02,480
na doon para sa iyo ang mga ito sa linggo 0.

41
00:02:02,480 --> 00:02:06,500
Din kung nais mong upang sumali sa amin para sa CS50 tanghalian ito Biyernes sa 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Nang walang karagdagang linggal, bigyan mo ako kapwa ng pagtuturo Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hi. [Palakpakan]

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

46
00:02:20,770 --> 00:02:24,780
Ang unang pagkakataon ko natutunan ang tungkol sa disenyo sa isang klase dito tinatawag CS179.

47
00:02:24,780 --> 00:02:28,040
>> Ang propesor sa oras na sinabi sa amin ang kuwento tungkol sa isa pang propesor

48
00:02:28,040 --> 00:02:31,640
na nawala sa hotel at ginamit ang Gripo.

49
00:02:31,640 --> 00:02:35,630
Maaari sinuman sabihin sa akin kung ano ang 2 knobs sa kaliwa at kanang gawin?

50
00:02:35,630 --> 00:02:39,080
[Mag-aaral] Hot at malamig. >> Hot at malamig. Mabuti.

51
00:02:39,080 --> 00:02:41,430
Ano ang inaasahan mo normal, tama?

52
00:02:41,430 --> 00:02:46,960
Ito propesor pagkatapos gamit ang gripo gustong shower, at siya naaayos upang magamit ang.

53
00:02:46,960 --> 00:02:51,310
Iniisip niya ang kaliwa at sa kanan gilid para sa mainit at malamig na, i-right?

54
00:02:51,310 --> 00:02:55,470
Ngunit maaari sinuman sabihin sa akin kung ano ang mga aktwal na gawin?

55
00:02:55,470 --> 00:02:58,060
Anumang mga kamay?

56
00:02:58,060 --> 00:03:01,740
[Hindi marinig na mag-aaral ng tugon] >> isang mungkahi ay?

57
00:03:01,740 --> 00:03:05,860
[Hindi marinig na tugon ng mag-aaral] >> Temperatura?

58
00:03:05,860 --> 00:03:10,460
Kaya ang isa sa kanila ay kumokontrol temperatura at ang iba pang mga kontrol? >> [Mag-aaral] Tubig presyon.

59
00:03:10,460 --> 00:03:12,350
Tubig presyon. Mabuti.

60
00:03:12,350 --> 00:03:15,100
Propesor na ito ay nagtuturo sa ito at, iniisip ang pagkontrol sa mga ito ay mainit at malamig,

61
00:03:15,100 --> 00:03:21,470
lumiliko sa kanan, kung saan siya palagay ni ay mainit, ang lahat ng mga paraan up

62
00:03:21,470 --> 00:03:23,560
dahil siya gustong kumuha ng maligamgam na shower.

63
00:03:23,560 --> 00:03:28,100
Well, ang mga ito ay hindi talaga tutugma, kaya siya ay nakakakuha ng ito hindi masyadong masaya na karanasan

64
00:03:28,100 --> 00:03:31,110
ng pagiging sa isang malamig na shower, at namin ang lahat ng malaman kung ano na nararamdaman tulad ng.

65
00:03:31,110 --> 00:03:33,620
Ito ay isang halimbawa ng isang disenyo kapintasan.

66
00:03:33,620 --> 00:03:37,040
Ano ang ibig sabihin ko sa pamamagitan ng na ang kanyang inaasahan mula sa gripo

67
00:03:37,040 --> 00:03:39,420
ay hindi tumugma sa kung ano ang dumating ng shower,

68
00:03:39,420 --> 00:03:41,780
na uri ng kapus-palad para sa kanya.

69
00:03:41,780 --> 00:03:44,990
Kaya ito ay isang halimbawa ng isang disenyo kapintasan na mangyayari sa tunay na buhay.

70
00:03:44,990 --> 00:03:48,020
Ngunit nakita namin ang lahat ng mga uri ng iba pang mga pati na rin.

71
00:03:48,020 --> 00:03:50,390
Humihingi kami malamang na hindi mga tagahanga ng MBTA ng system.

72
00:03:50,390 --> 00:03:55,560
Ito ay isang sistema ng subway sa aktwal na sa London, na nagsasabing, "Ang pindutan na ito ay hindi ginagamit."

73
00:03:55,560 --> 00:04:00,220
Bakit ito kahit sa may? Bakit namin kahit pinapahalagahan?

74
00:04:00,220 --> 00:04:02,810
Kapag ako ay isang kid, ang tech savvy isa sa bahay,

75
00:04:02,810 --> 00:04:05,050
kapag ang computer ay pag-crash ng, ang aking ina ay dumating sa akin,

76
00:04:05,050 --> 00:04:07,060
nagpapakita sa akin ang screen na ito at humihiling sa akin kung ano ang nangyari.

77
00:04:07,060 --> 00:04:09,210
>> Kahit na hindi ko alam kung ano ang ibig sabihin nito ay.

78
00:04:11,890 --> 00:04:14,700
[Tawa] Ano?

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

80
00:04:18,720 --> 00:04:23,050
Minsan pakiramdam namin tulad ng mga software developers lamang trolling sa amin.

81
00:04:23,050 --> 00:04:28,460
Tulad ng mga gumagamit na hindi namin tulad ng, "Ano ang nangyayari? May sabihin sa amin."

82
00:04:28,460 --> 00:04:32,140
Ito ang lahat ng pagdating down sa isang isyu ng disenyo.

83
00:04:32,140 --> 00:04:34,650
Disenyo, bilang maaari naming makita, ay hindi pulos tungkol sa mga aesthetics,

84
00:04:34,650 --> 00:04:37,230
ito ay hindi tungkol sa kung paano bagay tumingin.

85
00:04:37,230 --> 00:04:41,720
Nakikita namin dito na ito maliit na pop-up sa paglipas dito ay aktwal na hitsura medyo magaling.

86
00:04:41,720 --> 00:04:45,290
Ito ay may isang drop anino sa background, ito ay may hangganan radiuses pagpunta sa.

87
00:04:45,290 --> 00:04:47,550
Uri ng medyo.

88
00:04:47,550 --> 00:04:51,480
Hindi ito talagang mahusay na dinisenyo dahil ito ay hindi masyadong user friendly na.

89
00:04:51,480 --> 00:04:54,920
Na maliit na pop-up na ay lumalabas ay hindi talaga ninyo akong bigyan ng anumang impormasyon

90
00:04:54,920 --> 00:04:58,450
tungkol sa kung anong nangyayari sa, hindi ito sabihin sa akin anumang bagay tulad ng gumagamit

91
00:04:58,450 --> 00:05:01,400
tungkol sa kung paano upang mabawi mula sa na error.

92
00:05:01,400 --> 00:05:05,190
Gusto naming mag-isip tungkol sa mga bagay na disenyo ay hindi.

93
00:05:05,190 --> 00:05:06,670
Una, hindi aesthetics.

94
00:05:06,670 --> 00:05:10,800
Din ito hindi Pagpupuno iyong app sa tonelada ng mga hindi kinakailangang pag-andar.

95
00:05:10,800 --> 00:05:14,890
Kung ikaw ay isang Thai restaurant, marahil ay hindi nais na maging isang dentista sa parehong oras.

96
00:05:14,890 --> 00:05:17,720
At sa Facebook Tanong, hindi na ang maraming tao ay ginamit ito

97
00:05:17,720 --> 00:05:21,130
at ito ay hindi talagang sa core ng kung ano ang kanilang pagbuo.

98
00:05:21,130 --> 00:05:24,200
At kaya ito mabait sa tingin tungkol sa hindi kaya magkano ang dami ng mga bagay

99
00:05:24,200 --> 00:05:26,390
na naglalagay ka ng sa iyong application ngunit ang kalidad

100
00:05:26,390 --> 00:05:28,910
at kung paano ka sa paggawa ng mas mahusay na karanasan ng gumagamit

101
00:05:28,910 --> 00:05:32,540
pamamagitan ng aktwal na pagpapabuti kapag kung ano ang mayroon ka nang.

102
00:05:32,540 --> 00:05:37,040
>> Sa maikling sabi, ang disenyo ay nagsasabi sa amin kung ano ang dapat naming bumuo.

103
00:05:37,040 --> 00:05:41,950
Halimbawa, kung kami ay pagbuo ng isang bagay na ipaalam sa amin maghanap ng mga bagay up,

104
00:05:41,950 --> 00:05:45,970
tulad ng Google, halimbawa, ay dapat namin gawin ang mga bagay sa isang paraan

105
00:05:45,970 --> 00:05:48,950
na nangangailangan ng gumagamit na tumagal ng maraming ng mga pag-click upang makakuha ng sa kung ano ang gusto nilang,

106
00:05:48,950 --> 00:05:52,580
o dapat naming gawin ito sa isang paraan, halimbawa, gamit ang Google Instant o autocomplete

107
00:05:52,580 --> 00:05:54,970
na ay nagbibigay-daan sa amin sa aming mga resulta sa mas mabilis?

108
00:05:54,970 --> 00:05:58,740
Engineering nagsasangkot, tulad ng Tommy ay magpapakita sa iyo, aktwal na pagbuo ng ito.

109
00:05:58,740 --> 00:06:01,890
May maraming uri ng mga disenyo.

110
00:06:01,890 --> 00:06:06,070
Halimbawa, kung ikaw ay pagbuo ng isang bagay sa deploy ng isang bagay

111
00:06:06,070 --> 00:06:09,770
sa Third World bansa kung saan mayroong hindi magkano ang koryente o ang ganoong karaming mga teknolohiya,

112
00:06:09,770 --> 00:06:11,440
mayroon kang magdisenyo ng kung ano ang iyong pagbuo

113
00:06:11,440 --> 00:06:14,210
sa isang paraan na madali na nagbibigay ng access sa mga tao doon.

114
00:06:14,210 --> 00:06:18,290
Ngunit kung ano ang mga uri ng iba pang mga desisyon ng disenyo ay maaaring mayroong

115
00:06:18,290 --> 00:06:21,850
o maaaring maging kasangkot sa isang bagay tulad nito?

116
00:06:23,690 --> 00:06:25,660
Oo. Makita ko ang isang kamay.

117
00:06:25,660 --> 00:06:37,200
[Hindi marinig na tugon ng mag-aaral] >> Karapatan. Eksakto. Accessibility ay isang bagay.

118
00:06:37,200 --> 00:06:40,870
Isang maraming ng mga tao ay hindi isipin ang tungkol, "Ano ang tungkol sa aking mga user?"

119
00:06:40,870 --> 00:06:43,160
tulad ng mga extremes ng alinman sa spectrum.

120
00:06:43,160 --> 00:06:47,770
Mayroon akong mga gumagamit na maaaring magkaroon ng mga kapansanan na hindi ako nag-iisip tungkol sa

121
00:06:47,770 --> 00:06:50,590
at ako iniisip tungkol sa pagdidisenyo para sa pangkalahatang user.

122
00:06:50,590 --> 00:06:52,630
Internet ay naa-access ng lahat sa panahong ito,

123
00:06:52,630 --> 00:06:54,870
at dapat kong pagdidisenyo para sa mga tao pati na rin.

124
00:06:54,870 --> 00:06:58,620
Anong mga uri ng iba pang mga desisyon disenyo ang maaari mong gawin?

125
00:06:58,620 --> 00:07:00,690
Oo. >> [Mag-aaral] Gastos.

126
00:07:00,690 --> 00:07:02,680
Halaga. Napakabuti.

127
00:07:02,680 --> 00:07:08,060
Ang isa pang bagay na maaari naming ibabase ang aming mga pagpapasyang sa disenyo sa gastos.

128
00:07:08,060 --> 00:07:13,130
Kung hindi namin ang isang negosyo, nais mong bumuo ng isang bagay na hindi magkano ang gastos upang makabuo ng

129
00:07:13,130 --> 00:07:17,720
ngunit maaari magbenta sa isang partikular na mataas na gastos o maaaring makakuha ng sa amin ang ilang mga kita.

130
00:07:17,720 --> 00:07:21,540
>> Ito ang lahat ng mga iba't ibang mga uri ng disenyo, ngunit kapag kami ay pagbuo ng isang bagay sa Internet

131
00:07:21,540 --> 00:07:25,120
o kapag kami ay pagbuo ng isang bagay na malamang ay hindi gastos na magkano na bumuo ng up ngayon,

132
00:07:25,120 --> 00:07:28,630
tulad ng mga application sa Internet - hindi mo na kailangang magtapon magkano kabisera ito

133
00:07:28,630 --> 00:07:30,900
upang gawin ang isang bagay na aktwal na gumagana -

134
00:07:30,900 --> 00:07:33,490
kung ano ang hindi namin mas nag-aalala tungkol sa ang karanasan ng gumagamit.

135
00:07:33,490 --> 00:07:36,390
Tinatawag namin ito user Iginitna disenyo.

136
00:07:36,390 --> 00:07:41,550
Mahalaga kung ano ang user Iginitna disenyo ay nagsasangkot ng paglalagay sarili sa sapatos ng iyong mga gumagamit.

137
00:07:41,550 --> 00:07:44,870
Kung may isang taong nag-sign up para sa kung ano ang ako sa pagbuo,

138
00:07:44,870 --> 00:07:48,250
malinaw naman nila na darating sa aking partikular na application na may isang layunin sa isip,

139
00:07:48,250 --> 00:07:50,280
may isang gawain na gusto nila upang makumpleto.

140
00:07:50,280 --> 00:07:53,650
At ang iyong trabaho ay hindi lamang upang makatulong na makumpleto ang mga ito na gawain

141
00:07:53,650 --> 00:07:57,930
ngunit upang makatulong na makumpleto ang mga ito na gawain sa isang paraan na ay mahusay, madaling maunawaan,

142
00:07:57,930 --> 00:08:01,900
at, pati na ang ilang mga tao sinabi banda roon, naa-access.

143
00:08:01,900 --> 00:08:03,750
Ano ang ibig sabihin ay ang kahusayan?

144
00:08:03,750 --> 00:08:08,050
Kahusayan nangangahulugan kung gaano kabilis ang aking user kumpletuhin ang gawain na ibinigay na aking interface.

145
00:08:08,050 --> 00:08:11,650
Ba itong tumagal ng maraming ng mga pag-click para sa kanila upang makakuha ng mula sa isang lugar sa iba pang?

146
00:08:11,650 --> 00:08:14,630
Ito nakakapagod? Ba sila upang isagawa ang maraming ng mga paulit-ulit na gawain?

147
00:08:14,630 --> 00:08:17,140
Gusto naming gawing na proseso bilang mahusay hangga't maaari

148
00:08:17,140 --> 00:08:20,070
kaya hindi sila upang gawin ang mga uri ng mga bagay.

149
00:08:20,070 --> 00:08:24,230
Tulad para sa intuitiveness, na, halimbawa, kung ang isang gumagamit ay mukhang ang aking interface,

150
00:08:24,230 --> 00:08:27,240
madali para sa kanila upang makakuha ng mula sa lugar sa lugar?

151
00:08:27,240 --> 00:08:30,390
Madali para sa kanila upang malaman kung ano ang mayroon silang i-click sa aking interface

152
00:08:30,390 --> 00:08:33,770
sa order para sa kanila upang makamit ang layunin o gawain na gusto nila upang makamit?

153
00:08:33,770 --> 00:08:37,520
>> At sa wakas, ng isang tao sinabi banda roon, accessibility ay napakahalaga.

154
00:08:37,520 --> 00:08:39,640
[Lalaki speaker] Nagmumula ito sa accessibility para sa mga bagay tulad ng paningin,

155
00:08:39,640 --> 00:08:42,740
i paano ko aktwal na magdisenyo ng isang bagay para sa isang taong bulag?

156
00:08:42,740 --> 00:08:46,460
Oh. Para sa mga tao na hindi maaaring makita sa lahat, mayroon kaming isang bagay na tinatawag na screen mambabasa.

157
00:08:46,460 --> 00:08:49,070
Ano ang dapat mong gawin ay dapat mong bumuo ng iyong website sa isang paraan

158
00:08:49,070 --> 00:08:52,020
na, halimbawa, partikular na teknolohiya sa kung ano ang tinatawag naming -

159
00:08:52,020 --> 00:08:53,590
Mayroong maraming mga bagay na ngayon.

160
00:08:53,590 --> 00:08:55,660
Tingin ko may mga mambabasa ng screen na tinatawag na JAWS.

161
00:08:55,660 --> 00:08:58,410
Maraming ng mga bagay na ito ay umaasa sa kung ano ang tinatawag naming panuntunan lugar

162
00:08:58,410 --> 00:09:02,010
upang basahin sa user kung ano ang sa pahina.

163
00:09:02,010 --> 00:09:05,480
Para sa mga tao na hindi maaaring makita, kailangan mong tiyakin na ang mga mga mambabasa ng screen

164
00:09:05,480 --> 00:09:09,130
aktwal na pick-up ng nilalaman sa pahina at maaaring aktwal na ipakita ang iyong mga gumagamit,

165
00:09:09,130 --> 00:09:13,630
kung hindi mo makita, hindi bababa sa maaari mong pa rin maunawaan ang nilalaman sa pahina.

166
00:09:13,630 --> 00:09:16,190
Oo. Okay.

167
00:09:16,190 --> 00:09:23,410
Sapat na pakikipag-usap tungkol sa magandang disenyo. Natin makipag-usap tungkol sa masamang disenyo.

168
00:09:23,410 --> 00:09:25,220
Ito ang mga bagay na hindi mo dapat gawin.

169
00:09:25,220 --> 00:09:27,890
Maaari sinuman sabihin sa akin tungkol sa kanilang mga karanasan sa Craigslist

170
00:09:27,890 --> 00:09:32,190
at kung ano ang sa tingin nila ay hindi kaya mahusay na tungkol sa disenyo?

171
00:09:33,690 --> 00:09:36,430
Oo. >> [Mag-aaral] tingin ko may masyadong maraming mga salita sa isang lugar.

172
00:09:36,430 --> 00:09:39,350
Masyadong maraming mga salita, i-right? Ganap napakalaki.

173
00:09:39,350 --> 00:09:42,400
Pumunta ka sa pahinang ito at ikaw ay greeted na may isang buong grupo ng mga bagay up dito

174
00:09:42,400 --> 00:09:43,860
na maaaring hindi kahit na mahalaga sa iyo.

175
00:09:43,860 --> 00:09:47,010
Halimbawa, kayo ay nakatira sa isang estado na ay hindi nagsisimula sa ang sulat na ito.

176
00:09:47,010 --> 00:09:48,690
Ipagpalagay natin na nakatira sa Texas o isang bagay.

177
00:09:48,690 --> 00:09:53,790
>> Mayroon kang mag-scroll ang lahat ng mga paraan pababa sa pahina upang makakuha ng sa lokasyon ikaw ay sa.

178
00:09:53,790 --> 00:10:00,320
Ako mula sa Boston, kaya hayaan mo akong tumingin sa Massachusetts. Saan Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, dito mismo. Oh, ito ang Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
Hayaan ang mga tumingin sa Boston. [Tawa]

181
00:10:09,070 --> 00:10:12,250
Pretty napakalaki, i-right?

182
00:10:12,250 --> 00:10:16,400
Mahirap na mga bagay doon. [Tawa]

183
00:10:17,320 --> 00:10:19,470
Sabihin nating Naghahanap ako para sa isang lugar upang manirahan.

184
00:10:19,470 --> 00:10:24,130
Gaano karaming mga tao ang aktwal na ginagamit Craigslist? Ton mo.

185
00:10:24,130 --> 00:10:30,960
May mga medyo masamang paraan upang tumingin sa ito, ngunit tingnan natin sa.

186
00:10:35,130 --> 00:10:38,970
Ano ang pagkakaiba sa pagitan ng img at pic? Maaari sinuman sabihin sa akin?

187
00:10:41,350 --> 00:10:42,830
May aktwal ay walang pagkakaiba.

188
00:10:42,830 --> 00:10:47,710
Ibig sabihin ng mga ito ay eksakto ang parehong bagay, ngunit mayroon silang iba't ibang mga label para sa mga ito para sa ilang mga kadahilanan.

189
00:10:48,980 --> 00:10:53,560
Kung nag-click ako sa May Imahe, walang mangyayari sa pahina.

190
00:10:53,560 --> 00:10:57,490
Aktwal na ako ay i-click ang Search muli para sa isang bagay na mangyayari.

191
00:10:57,490 --> 00:11:02,430
Ano ang maaaring maging isang mas mahusay na desisyon ng disenyo na maaaring gawin doon?

192
00:11:03,820 --> 00:11:08,030
Kung ako ng pag-click sa na filter, ako marahil ay gusto mo upang i-filter sa pamamagitan ng partikular na pagkilos

193
00:11:08,030 --> 00:11:09,970
o sa partikular na kategorya.

194
00:11:09,970 --> 00:11:14,450
Kaya sa halip na pindutin ang Search muli, maaari ko lang awtomatikong gawin ang pag-filter

195
00:11:14,450 --> 00:11:17,060
uri ng estilo ng Google kung saan ginagawa nila ito agad.

196
00:11:17,060 --> 00:11:20,440
[Malan] Ngunit hindi bumubuo bilang nasaksihan namin ito sa gayon ay malayo na pisikal na isinumite

197
00:11:20,440 --> 00:11:23,170
pamamagitan ng pagpindot sa Ipasok ang hindi bababa sa o ng pag-click sa isang pindutan?

198
00:11:23,170 --> 00:11:26,830
Tulad ng nakita mo ang mga ito sa ngayon, aktwal mong i-click ang Isumite upang gawin ang mga bagay.

199
00:11:26,830 --> 00:11:30,090
>> Ngunit bilang Tommy ay magpapakita sa iyo sa isang segundo, may mga aktwal na paraan para sa iyo

200
00:11:30,090 --> 00:11:33,010
tulad na kapag ikaw ay mag-click sa bagay na ito ay awtomatikong ipadala

201
00:11:33,010 --> 00:11:38,840
kung ano ang tinatawag naming isang AJAX kahilingan at makakuha ng mga data bumalik at i-filter ang iyong mga resulta ay agad na.

202
00:11:38,840 --> 00:11:41,340
May mga tonelada ng mga bagay na mali sa interface na ito.

203
00:11:41,340 --> 00:11:43,530
[Malan] Maaari kang maghanap para sa Cambridge?

204
00:11:43,530 --> 00:11:47,030
Mayroong isang bagay na bahagyang iregular dito kung saan mahalaga sa iyo tungkol sa Cambridge

205
00:11:47,030 --> 00:11:54,790
at pa nakakakuha ka ng Westford, Spring Hill, West Newton at ang mga tulad ng.

206
00:11:54,790 --> 00:11:57,930
Marahil hindi perpekto. >> Marahil hindi perpekto.

207
00:11:57,930 --> 00:12:03,900
Kung paano ko magagawang upang gumawa ng ang karanasan ng gumagamit mas mahusay sa ang partikular na pahina na ito?

208
00:12:03,900 --> 00:12:07,340
Oo. >> [Mag-aaral] Tagubilin.

209
00:12:07,340 --> 00:12:09,500
Okay. Mga tagubilin sa kung anong uri ng pakiramdam?

210
00:12:09,500 --> 00:12:14,630
[Mag-aaral] Halimbawa, ang isang bagay para sa unang mga gumagamit ng oras na hindi kahit na malaman kung ano ang Craigslist ay

211
00:12:14,630 --> 00:12:17,320
o hindi mo alam kung ano ang dapat gawin.

212
00:12:17,320 --> 00:12:20,150
Kanan. Kaya pagpapaliwanag kung ano ang Craigslist sa pahinang ito ay mahalaga.

213
00:12:20,150 --> 00:12:23,490
Maaaring aktwal na namin sabihin sa mga gumagamit kung ano ang pahinang ito ay talagang para sa.

214
00:12:23,490 --> 00:12:27,090
Kung ako pagbisita ito, nakikita ko ang isang buong grupo ng mga lokasyon. Hindi ko kahit na malaman kung ano ang ibig sabihin nila.

215
00:12:27,090 --> 00:12:29,730
Ngunit mas mahalaga, lamang ng pagtingin sa interface na ito,

216
00:12:29,730 --> 00:12:35,530
natatandaan ko ay mag-scroll pababa ng isang tonelada ng mga bagay upang mahanap ang isang partikular na komunidad

217
00:12:35,530 --> 00:12:37,560
na aktwal na ako cared tungkol dito.

218
00:12:37,560 --> 00:12:39,820
Ano ang isang mas mabilis na paraan maaari kong gawin na? Oo.

219
00:12:39,820 --> 00:12:43,290
[Mag-aaral] Hatiin ang mga ito sa silangan, rehiyon kanluran. >> Okay.

220
00:12:43,290 --> 00:12:47,460
Maaari kong hatiin ang mga ito sa higit pang mga kategorya na maaaring makatulong sa akin mas mabilis na matukoy

221
00:12:47,460 --> 00:12:49,820
kung paano upang makakuha ng na partikular na lokasyon.

222
00:12:49,820 --> 00:12:54,510
[Mag-aaral] Maglagay ng drop-down na listahan. >> Karapatan. Okay.

223
00:12:54,510 --> 00:12:58,240
Maaari ko bang gamitin ang drop-down menu dahil mayroon kaming isang nakapirming hanay ng mga bagay

224
00:12:58,240 --> 00:13:00,100
at maaari naming ipakita ang mga ito sa isang drop-down menu.

225
00:13:00,100 --> 00:13:02,240
Na paraan hindi ito ay tumagal ng hanggang kaya magkano na espasyo sa screen.

226
00:13:02,240 --> 00:13:05,630
Ngunit mas mahusay kaysa sa, kung ano ang maaari naming gawin?

227
00:13:05,630 --> 00:13:09,220
Oo. >> [Hindi marinig tugon ng mag-aaral] >> Maaari mong sabihin na muli? >> [Mag-aaral] Search box.

228
00:13:09,220 --> 00:13:11,260
Oo, isang kahon sa paghahanap. Mabuti iyan.

229
00:13:11,260 --> 00:13:16,430
Ano ang maaari naming aktwal gawin kung tinitingnan namin sa mga slide, search box.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Napaka-madaling paraan upang maghanap sa pamamagitan ng mga resulta na alam mo sa isang hanay.

231
00:13:21,520 --> 00:13:25,980
Kung sisimulan ko ang pag-type Bo, lang ipakita sa akin ang lahat ng mga resulta na may Bo sa loob ng mga ito.

232
00:13:25,980 --> 00:13:29,030
Na paraan ang maaari kong napaka madaling mahanap ang partikular na Gusto kong pumunta sa

233
00:13:29,030 --> 00:13:32,390
sa halip ng pagkakaroon upang mag-scroll sa pamamagitan ng ito talagang malaking listahan.

234
00:13:32,390 --> 00:13:37,450
>> Ito ang lahat ng mga uri ng talagang mababang-nagha-hang prutas na ang isang taong pagpapatupad Craigslist

235
00:13:37,450 --> 00:13:42,500
maaaring aktwal na gawin upang gawin ang karanasan sa website ng maraming mas mahusay para sa kanilang partikular na user.

236
00:13:42,500 --> 00:13:46,370
Okay. Sapat na pakikipag-usap tungkol sa masamang website.

237
00:13:46,370 --> 00:13:49,410
Natin makipag-usap tungkol sa Facebook.

238
00:13:50,880 --> 00:13:54,390
Kapag dumating ng Facebook, at partikular Facebook larawan,

239
00:13:54,390 --> 00:13:57,870
mayroong ng maraming iba pang mga serbisyo sa oras na maaaring gawin eksakto ang parehong bagay.

240
00:13:57,870 --> 00:14:00,740
Sila ay maaaring ayusin ang iyong mga larawan sa mga album.

241
00:14:00,740 --> 00:14:03,360
Ano ang maaari mong gawin ay maaari mong ayusin ang mga ito sa mga hanay ng pati na rin.

242
00:14:03,360 --> 00:14:06,070
Maaari mong ayusin ang mga ito sa pamamagitan ng petsa. Maaari mong gawin ang lahat ng mga partikular na mga bagay.

243
00:14:06,070 --> 00:14:11,710
Ngunit ang sinuman malaman kung ano ang Facebook larawan sumabog sa oras na ito ay inilabas?

244
00:14:11,710 --> 00:14:15,080
Oo. >> [Mag-aaral] Tag. >> Tag. Eksakto.

245
00:14:15,080 --> 00:14:21,300
Mayroon kaming Milo sa paglipas dito, na aming aso maskot may na bandana ng CS50.

246
00:14:21,300 --> 00:14:24,810
Maaari mong makita na mayroon kaming ang pag-tag ng tampok na ito sa gitna.

247
00:14:24,810 --> 00:14:28,240
At kung ano ang ginawa Facebook larawan upang kawili-wiling mula sa kakayahang magamit ng kinatatayuan

248
00:14:28,240 --> 00:14:34,130
ay na ito aktwal na pinapayagan ang mga tao sa pamamagitan ng ito upang makasali ang kanilang mga kaibigan sa kanilang mga larawan.

249
00:14:34,130 --> 00:14:37,680
Para sa Facebook, dahil ang kanilang website ay partikular na panlipunan,

250
00:14:37,680 --> 00:14:40,750
ito ay tungkol sa pagbuo ng ganitong uri ng panlipunang kapaligiran.

251
00:14:40,750 --> 00:14:42,620
Na napabuti ang karanasan ng mga larawan ng maraming mas

252
00:14:42,620 --> 00:14:46,390
dahil maaaring sila aktwal na simulan ang sinasabi, "Ito ang mga koneksyon sa pagitan ng mga tao,

253
00:14:46,390 --> 00:14:49,220
at ang mga ito ay mga larawan tungkol sa mga tao ka talagang pakialam tungkol sa. "

254
00:14:49,220 --> 00:14:52,200
Bahagi nito ay din-uuri paggalan sa sarili.

255
00:14:52,200 --> 00:14:54,980
Mga tao na gusto-tag sa mga larawan at mga bagay tulad na.

256
00:14:54,980 --> 00:14:58,510
Habang na hindi kinakailangan ng isang mabuting tao na kaugalian,

257
00:14:58,510 --> 00:15:01,910
sa parehong oras na ito batay sa magandang disenyo desisyon

258
00:15:01,910 --> 00:15:04,860
dahil ang mga tao ay aktwal na mahalaga sa tungkol sa mga bagay na tulad nito.

259
00:15:04,860 --> 00:15:07,190
Kaya na Facebook larawan.

260
00:15:07,190 --> 00:15:09,800
>> Ngunit sabihin makipag-usap Facebook sa mas pangkalahatang.

261
00:15:09,800 --> 00:15:13,400
Ako bang maraming ng mga tao dito ay may opinyon tungkol sa Facebook,

262
00:15:13,400 --> 00:15:16,430
parehong mahusay na disenyo ng mga desisyon at masamang disenyo desisyon.

263
00:15:16,430 --> 00:15:20,270
Kaya sabihin magbulalas o maging masaya.

264
00:15:23,480 --> 00:15:26,450
Halika sa. Alam ko ang lahat ng iyong gamitin Facebook.

265
00:15:26,450 --> 00:15:30,970
Isang tao ay magkaroon ng masamang sasabihin o magandang bagay upang sabihin ang tungkol dito. Oo.

266
00:15:30,970 --> 00:15:35,060
[Mag-aaral] Sa mga feed ng balita ng maraming mga bagay na hindi ko talagang pakialam tungkol sa.

267
00:15:35,060 --> 00:15:37,740
Ang balita feed ay ang ipakita ng maraming mga bagay na hindi mo maaaring pakialam tungkol sa.

268
00:15:37,740 --> 00:15:41,660
Mayroon kang mga kaibigan sa Facebook na hindi mo pa nakikilala para sa 2 o 3 taon

269
00:15:41,660 --> 00:15:43,860
at makita ang kanilang mga resulta ng balita popping sa iyong feed ng balita

270
00:15:43,860 --> 00:15:45,870
at hindi mo talagang pakialam tungkol dito.

271
00:15:45,870 --> 00:15:48,700
Facebook ay aktwal na ginawa ng isang pagsisikap upang gawin itong mas mahusay,

272
00:15:48,700 --> 00:15:53,150
at aktwal na sinubukan upang itulak ang mga may-katuturang resulta sa tuktok ng feed ng balita bilang ng late

273
00:15:53,150 --> 00:15:58,300
upang iyong aktwal na makita ang mga bagay sa pamamagitan ng mga kaibigan na may-katuturan sa iyo o sa iyong mga malapit na kaibigan.

274
00:15:58,300 --> 00:16:01,110
Anumang bagay? Oo.

275
00:16:01,110 --> 00:16:06,400
[Hindi marinig na mag-aaral ng tugon] >> Maaari mong sabihin na muli?

276
00:16:06,400 --> 00:16:10,140
[Mag-aaral] Ang mga ad ay medyo mahinhin. >> Sa anong kahulugan?

277
00:16:10,140 --> 00:16:16,370
[Hindi marinig na mag-aaral ng tugon] Hindi sila magkaroon ng ilaw sa screen, tulad ng mga banner.

278
00:16:16,370 --> 00:16:17,760
Okay. Iyon ay mabuti.

279
00:16:17,760 --> 00:16:25,030
Kung tandaan mo ang Internet mula sa '90s - >> [Malan] ako ay doon. >> Siya ay doon. [Tawa]

280
00:16:25,030 --> 00:16:29,210
Maaari mong tandaan ang mga kumikislap na background GIF, sparkly bagay,

281
00:16:29,210 --> 00:16:31,570
Mga GeoCities estilo ng uri ng bagay.

282
00:16:31,570 --> 00:16:34,080
Iyon ay talagang hindi isang halimbawa ng isang mahusay na disenyo

283
00:16:34,080 --> 00:16:36,690
dahil talagang ito ay distracting mula sa nilalaman.

284
00:16:36,690 --> 00:16:39,590
Ang website ng Yale art na ginamit upang magkaroon ng animated na GIF bilang kanilang background

285
00:16:39,590 --> 00:16:41,800
at hindi mo maaaring basahin ang anumang sa pahina,

286
00:16:41,800 --> 00:16:44,870
ngunit hulaan ko may aktwal uusapang sa kanila at ngayon ng kaunti ibang.

287
00:16:44,870 --> 00:16:48,940
[Malan] magkano ang mas mahusay na ngayon. >> Magkano ang mas mahusay na ngayon, tulad ng maaari mong makita. >> [Malan] Oh oo.

288
00:16:48,940 --> 00:16:56,020
Lamang mahusay, lamang - Oo. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Bahagi ng iyong pahina posibleng napaka minimalist at napaka naiintindihan

290
00:17:00,560 --> 00:17:05,690
kaya ang mga bagay sa pahina ng daloy sa isang paraan na napaka lohikal at hindi makakuha ng sa paraan ng bawat isa.

291
00:17:05,690 --> 00:17:11,849
Ano ang mga uri ng iba pang mga bagay ang mga magandang tungkol sa Facebook o hindi magandang tungkol sa Facebook?

292
00:17:11,849 --> 00:17:15,730
Sabihin lamang magkaroon ng isang pag-uusap na disenyo dito.

293
00:17:19,470 --> 00:17:21,339
Oh. Saan? Oo.

294
00:17:21,339 --> 00:17:25,640
[Mag-aaral] Ang bagong sistema ng Timeline ay nagbibigay-daan sa iyo upang maghanap ng profile ng tao tungkol sa kanilang nakaraan.

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

296
00:17:28,119 --> 00:17:30,280
Timeline ay isang magandang bagay dahil ito ay nagbibigay-daan sa iyo unti-unting kumalat sa iyong mga kaibigan

297
00:17:30,280 --> 00:17:33,300
pabalik kapag sila ay sa mataas na paaralan.

298
00:17:35,160 --> 00:17:38,060
Timeline ay mabuti dahil ito ay nagbibigay-daan sa iyong filter sa pamamagitan ng nilalaman ng maraming mas mabilis,

299
00:17:38,060 --> 00:17:41,500
ito ay nagbibigay-daan sa iyo upang mahanap ang mga bagay na kung hindi man ay kinuha ka ng isang talagang mahabang panahon upang mahanap ang

300
00:17:41,500 --> 00:17:45,840
lamang scroll pataas at pababa, pataas, up, up, up, up, tulad ng pagpunta pabalik sa panahon.

301
00:17:45,840 --> 00:17:48,910
Ngunit mayroon ding uri ng isang downside sa mga tuntunin ng karanasan ng user.

302
00:17:48,910 --> 00:17:51,190
Ano ang maaaring na maging?

303
00:17:51,190 --> 00:17:56,780
Big salita na nagsisimula sa P-R. >> [Mag-aaral] Privacy. >> Privacy, tama?

304
00:17:56,780 --> 00:17:59,970
Privacy ay isang malaking isyu sa karanasan ng gumagamit.

305
00:17:59,970 --> 00:18:07,190
Ito ay isa ng mga bagay na mapoot ko ang karamihan tungkol sa Facebook ngayon. [Tawa]

306
00:18:07,190 --> 00:18:09,000
[Malan] Tulad ng gagawin ko ngayon.

307
00:18:09,000 --> 00:18:11,380
David ay hindi mapagtanto na ito aktwal na naganap hanggang kahapon.

308
00:18:11,380 --> 00:18:14,560
Kaya ngayon alam niya na ang bawat oras chat ko sa kanya alam ko niya pagbalewala sa akin.

309
00:18:14,560 --> 00:18:16,880
[Malan] Ang mahirap bahagi ay aktwal na ako pagbalewala sa kanya,

310
00:18:16,880 --> 00:18:21,040
at hindi ko alam kung alam niya ako ay pagbalewala sa kanya. [Tawa]

311
00:18:21,040 --> 00:18:24,030
Privacy ay isang malaking isyu.

312
00:18:24,030 --> 00:18:28,670
Maaari sinuman dito sabihin sa akin kung ano ang maaaring masamang tungkol sa Facebook privacy

313
00:18:28,670 --> 00:18:32,270
maliban sa katotohanan na gawin nila ang mga bagay na tulad nito?

314
00:18:32,270 --> 00:18:37,240
Ano ang partikular na mahirap na may paggalang sa Facebook privacy?

315
00:18:37,240 --> 00:18:40,340
Na uri ng tanong.

316
00:18:41,680 --> 00:18:43,930
Oo. >> [Mag-aaral] Itago ang iyong mga larawan mula sa ilang mga tao.

317
00:18:43,930 --> 00:18:46,170
Kanan. Eksakto, upang itago ang iyong mga larawan mula sa ilang mga tao.

318
00:18:46,170 --> 00:18:51,290
Ang mga ito ay may ito maliit, maliit na pindutan sa kanang itaas na hinahayaan i-toggle ang privacy ng isang larawan.

319
00:18:51,290 --> 00:18:56,360
Ang kanilang privacy pagpipilian ay napaka-iba-iba sa pagitan ng iba't-ibang uri ng menu.

320
00:18:56,360 --> 00:18:59,510
>> Nakuha nila na ng maraming mas mahusay na tungkol dito kamakailan, ngunit ginamit ang kaso

321
00:18:59,510 --> 00:19:04,870
na tuwing nais upang maiwasan ang iyong mga kaibigan mula sa nakikita ng mga larawan,

322
00:19:04,870 --> 00:19:08,280
mayroon kang pumunta sa pamamagitan ng isang napaka-komplikadong 5-hakbang na proseso ng pagiging tulad ng,

323
00:19:08,280 --> 00:19:11,150
hayaan mo akong i-click ang link na ito, ngayon ay ipaalam sa akin na i-click muli, hayaan mo akong i-click muli,

324
00:19:11,150 --> 00:19:13,420
hayaan mo akong tukuyin kung saan ang mga tao ay hindi maaaring makita ang aking mga larawan.

325
00:19:13,420 --> 00:19:17,250
Ito ay hindi partikular na mahusay sa Facebook ay bahagi

326
00:19:17,250 --> 00:19:20,530
dahil kaya magkano ang tungkol sa karanasan ng gumagamit ay aktwal na nagbibigay sa kanila ang kalayaan

327
00:19:20,530 --> 00:19:22,460
upang kontrolin kung ano ang tao ang maaaring makakita.

328
00:19:22,460 --> 00:19:25,550
Tinatawag namin itong user control at kalayaan.

329
00:19:25,550 --> 00:19:31,090
Kung hindi ka pagpapaalam gawin ang iyong mga gumagamit na sa isang paraan na ay mahusay at madaling maunawaan,

330
00:19:31,090 --> 00:19:34,570
ang iyong karanasan ng gumagamit ay hindi talaga ang mahusay na sa lahat.

331
00:19:34,570 --> 00:19:38,200
 Gusto mo guys nais na sabihin ang anumang bagay tungkol sa Facebook?

332
00:19:38,700 --> 00:19:41,420
Paano ko itong i-off?

333
00:19:41,420 --> 00:19:46,290
[Ong] Hindi mo itong i-off, at iyon ay isang malaking kasiraan sa kakayahang magamit sa bahagi ng Facebook.

334
00:19:46,290 --> 00:19:49,410
Ang tampok na ito - aktwal na ako ay tumingin sa ito kahapon -

335
00:19:49,410 --> 00:19:53,940
ito ay alinman na hindi mo maaaring gawin ito o ito ay buried sa isang lugar napaka, mahimbing

336
00:19:53,940 --> 00:19:58,050
sa recesses ng Facebook dahil hindi ko maaaring malaman kung paano huwag paganahin ang pag-andar na ito sa lahat ng.

337
00:19:58,050 --> 00:20:00,400
[Malan] Ngunit minsan ang mga desisyon na ito ay hindi halata

338
00:20:00,400 --> 00:20:03,890
dahil ikaw guys ibinigay sa amin ng maraming kapaki-pakinabang na feedback sa iba't ibang CS50 application

339
00:20:03,890 --> 00:20:05,710
at mga website na ginagamit ng kurso.

340
00:20:05,710 --> 00:20:10,260
Hindi namin ipinapatupad ang lahat ng mga kahilingan at mga suhestiyon.

341
00:20:10,260 --> 00:20:14,550
>> Bahagi ng na para sa pagkuha kaya maraming hiling na ito ay isang katangian ng oras,

342
00:20:14,550 --> 00:20:17,070
pero minsan lang namin gumawa ng isang nakakamalay desisyon tulad ng,

343
00:20:17,070 --> 00:20:19,830
"Salamat sa iyo para sa mga mungkahi, ngunit hindi sumasang-ayon kami."

344
00:20:19,830 --> 00:20:24,350
Kaya paano aktwal mong magpasya kung ano ang dapat mong gawin kung ang iyong mga gumagamit sa tingin dapat mong gawin ang isang bagay

345
00:20:24,350 --> 00:20:28,110
kahit na hindi mo pag kinakailangan?

346
00:20:28,110 --> 00:20:32,360
Ito ay isang masarap na balanse sa pagitan ng aktwal na nakikinig sa kung ano sabihin ang iyong mga gumagamit

347
00:20:32,360 --> 00:20:35,840
at aktwal na pagkakaroon ng ilang mga uri ng linya kung saan sinabi mong,

348
00:20:35,840 --> 00:20:37,750
"Hindi namin ay pagpunta sa gawin kung ano ang mga gumagamit sabihin."

349
00:20:37,750 --> 00:20:42,520
At sa partikular, sa tingin ko nagkaroon ng isang quote sa pamamagitan ng Henry Ford na sums up ito medyo na rin.

350
00:20:42,520 --> 00:20:47,130
"Kung ako ay tinanong mga tao kung ano ang nais nila, sila ay sinabi nais nila ang mas mabilis na kabayo."

351
00:20:47,130 --> 00:20:51,840
Maaari sinuman ayusin manunudyo bukod sa kung ano ang quote na talagang ay nangangahulugan?

352
00:20:51,840 --> 00:20:56,060
Ito ay hindi lamang na alam ng mga gumagamit kung ano ang gusto nilang,

353
00:20:56,060 --> 00:20:59,180
ngunit higit pa na -

354
00:20:59,180 --> 00:21:02,720
[Mag-aaral] Hindi nila alam kung ano posible.

355
00:21:02,720 --> 00:21:06,140
Sa bahagi ay hindi nila alam kung ano ay posible.

356
00:21:07,880 --> 00:21:11,440
Manunudyo na bukod kaunti mas. Ano ang ibig mong sabihin sa pamamagitan ng na?

357
00:21:11,440 --> 00:21:21,340
[Hindi marinig na mag-aaral ng tugon]

358
00:21:21,340 --> 00:21:25,770
Iyon ay mabuti. Ano sa tingin ko kami ay sinusubukan upang sabihin dito na alam ng mga tao kung ano ang gusto nilang.

359
00:21:25,770 --> 00:21:28,050
Gusto nilang mas mabilis na kabayo.

360
00:21:28,050 --> 00:21:29,840
Kung ano ang kanilang talagang gusto ay ang kakayahan upang ilipat ang mas mabilis,

361
00:21:29,840 --> 00:21:32,310
ngunit hindi sila talaga alam ang medium kung saan upang makamit na.

362
00:21:32,310 --> 00:21:36,330
Kapag dumating ka sa iyong mga gumagamit at sabihin ang iyong mga gumagamit ka ng isang bagay

363
00:21:36,330 --> 00:21:39,700
at sila sabihin sa iyo, "Gusto naming mga tampok na ito at ang mga tampok na ito at ang mga tampok na ito,"

364
00:21:39,700 --> 00:21:42,650
hindi mo nais na kailangang isipin ang tungkol, "Hayaan akong magpatuloy

365
00:21:42,650 --> 00:21:44,720
"At ipatupad kung ano ang sinasabi nila tahasang,"

366
00:21:44,720 --> 00:21:48,610
ngunit kung ano ang gusto mong isipin ang tungkol ay, "Anong uri ng mga ideya ko maaaring makuha mula sa?"

367
00:21:48,610 --> 00:21:50,450
Ano ang aktwal nila gusto?

368
00:21:50,450 --> 00:21:55,560
>> At mula doon kung ano ang maaari mong gawin ay magdisenyo ng isang bagay na natutugunan ng mga kahilingan

369
00:21:55,560 --> 00:22:00,340
ngunit hindi kinakailangan sa paraan na ang gumagamit inaasahan ito sa nasiyahan.

370
00:22:00,340 --> 00:22:03,830
Kaya para sa isang bagay tulad ng panghuling proyekto, sa tunay mga tuntunin,

371
00:22:03,830 --> 00:22:07,900
kung ano ang isang kapaki-pakinabang na hyuristiko pagdating sa paggawa ng isang bagay na mas mahusay,

372
00:22:07,900 --> 00:22:10,630
lalo na kung ang designer ang may ito kayabangan tungkol sa kanya

373
00:22:10,630 --> 00:22:14,360
kung saan ang uri ng malaman kung ano ang pinakamahusay na, maaari mong input mula sa iyong mga gumagamit,

374
00:22:14,360 --> 00:22:16,580
ngunit kung paano ang iyong aktwal na pumunta tungkol sa pagkuha na feedback?

375
00:22:16,580 --> 00:22:21,610
Sa panghuling proyekto, napaka concretely, kung ano ang gumagawa ng pinakamainam na mga resulta dito?

376
00:22:21,610 --> 00:22:25,030
Ano gumagawa pinakamainam na mga resulta - at ako pumunta sa paglipas ng ito sa isang segundo -

377
00:22:25,030 --> 00:22:29,190
ay ang proseso ng pagbuo at pagkatapos ay pagsubok at pagkatapos iterating.

378
00:22:29,190 --> 00:22:32,020
Ano ang ibig sabihin ko sa pamamagitan ng pagsubok ay karaniwang kapag ikaw magdisenyo ng isang bagay

379
00:22:32,020 --> 00:22:36,970
sa tingin mo ito ay medyo magandang, tulad ng, "ako tulad ng mahusay na designer bawat tao'y ay pagpunta sa ibigin ito."

380
00:22:36,970 --> 00:22:41,600
At pagkatapos mong ilagay ito doon at ang mga tao ay hindi talagang gusto ang mga ito para sa ilang mga kadahilanan.

381
00:22:41,600 --> 00:22:46,820
Ang kailangan mo lang gawin ay mayroon kang upang makuha ang mga bahagi ng mga bagay na gawin ng mga tao tulad ng

382
00:22:46,820 --> 00:22:49,180
at ayusin ang mga bagay na ang mga tao ay hindi gusto.

383
00:22:49,180 --> 00:22:53,080
Mukhang halata proseso, ngunit ang prosesong ito ng patuloy iterating

384
00:22:53,080 --> 00:22:55,980
sa tuktok ng kung ano na binuo ay isang proseso na tumutulong sa iyo

385
00:22:55,980 --> 00:22:59,730
hindi lamang pinuhin ang iyong sariling mga kasanayan sa disenyo ngunit din tumutulong sa iyo na pinuhin ang disenyo

386
00:22:59,730 --> 00:23:03,790
kaya na ang mga tao ay aktwal na pinahahalagahan ang iyong produkto mas kaysa sa dati.

387
00:23:03,790 --> 00:23:07,390
>> Makikita ko pumunta sa paglipas ng mas kongkreto halimbawa ng kung ano ang iyong aktwal na gawin.

388
00:23:07,390 --> 00:23:11,390
Bilang uri ng ng huling halimbawa ng isang produkto, tingnan natin sa kayak.

389
00:23:11,390 --> 00:23:14,970
Kayak kapag ito ay dumating out ay napaka, napaka-tanyag.

390
00:23:14,970 --> 00:23:18,760
Maaari sinuman hulaan kung bakit?

391
00:23:18,760 --> 00:23:20,950
Ano ang mga uri ng mga bagay na gusto mo tungkol sa kung ginamit mo ito

392
00:23:20,950 --> 00:23:23,990
o kung ano ang mga uri ng mga bagay na hindi mo gusto?

393
00:23:23,990 --> 00:23:31,590
Oo. >> [Hindi marinig na mag-aaral ng tugon] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Na bahagi nito ay pagpapaalam ang user ay may isang query na mas malawak na

395
00:23:34,730 --> 00:23:38,150
kaysa sa isang mahigpit na isa tulad ng, "Mayroon kang pumili ng iyong petsa ng pagsisimula

396
00:23:38,150 --> 00:23:39,810
"At mayroon kang upang piliin ang iyong mga petsa ng pagtatapos."

397
00:23:39,810 --> 00:23:44,910
Sa katunayan, ito ay nagbibigay-daan sa iyo upang kakayahang umangkop tungkol dito at ito ay nagbibigay sa iyo ng lahat ng flight sa ang saklaw na iyon.

398
00:23:44,910 --> 00:23:46,730
Anumang bagay?

399
00:23:46,730 --> 00:23:50,530
[Mag-aaral] Kasama sa mga ito ang mga bayarin sa presyo.

400
00:23:50,530 --> 00:23:53,330
Gawin nila isama ang mga bayarin sa presyo.

401
00:23:53,330 --> 00:23:56,720
Ang mga buwis at mga bagay aktwal na dumiretso sa na presyo sa itaas na kaliwang

402
00:23:56,720 --> 00:24:00,710
kaya hindi ka tricked sa pag-iisip na aktwal na nagbabayad ka para sa isang $ 240 na flight

403
00:24:00,710 --> 00:24:03,280
kapag ito ay talagang $ 330.

404
00:24:03,280 --> 00:24:06,200
Anumang bagay? Oo.

405
00:24:06,200 --> 00:24:10,140
[Hindi marinig na mag-aaral ng tugon]

406
00:24:10,140 --> 00:24:14,610
Hindi ako sigurado kung sila aktwal na sabihin gawin mo na.

407
00:24:14,610 --> 00:24:18,310
Baka ako mali.

408
00:24:18,310 --> 00:24:23,360
Na maaaring maging isang kawili-wiling bagay kung gusto mong maglagay ng karagdagang bigat sa partikular na mga filter

409
00:24:23,360 --> 00:24:27,000
kaya na itulak sila ng mga resulta na may kaugnayan sa na filter sa itaas.

410
00:24:27,000 --> 00:24:31,920
Ngunit maaari sinuman sabihin sa akin kung ano ang kaya espesyal na tungkol sa kaliwang bahagi na ito?

411
00:24:31,920 --> 00:24:39,540
Paano mo tradisyonal maghanap ng flight sa isang serbisyo ng Internet bago ito?

412
00:24:41,600 --> 00:24:44,650
>> Oo. >> [Hindi marinig tugon ng mag-aaral] >> Maaari mong sabihin na -

413
00:24:44,650 --> 00:24:47,530
[Mag-aaral] bawat airline. >> Oo. Airline bawat isa ay may sariling website nito.

414
00:24:47,530 --> 00:24:50,110
Ito consolidates mga bagay. At?

415
00:24:50,110 --> 00:24:52,190
[Mag-aaral] alam mo kung ano mismo ang oras Aalis ka.

416
00:24:52,190 --> 00:24:54,460
Mo alam kung ano mismo ang oras Aalis ka,

417
00:24:54,460 --> 00:24:59,380
ngunit may kaugnayan sa mga filter sa partikular.

418
00:25:00,710 --> 00:25:03,540
Hayaan akong makuha ang kayak.

419
00:25:11,490 --> 00:25:14,020
Oh Diyos, pop-ups. Hindi magandang karanasan ng user.

420
00:25:14,020 --> 00:25:17,230
Ano ang mangyayari kapag nilipat ko ang slider na ito?

421
00:25:17,230 --> 00:25:21,010
[Mag-aaral] Awtomatikong update. >> [Ong] Awtomatikong update.

422
00:25:21,010 --> 00:25:23,440
Iyon ay isang bagay na napakahalaga.

423
00:25:23,440 --> 00:25:25,380
Bago ito, tuwing nais upang maghanap ng flight,

424
00:25:25,380 --> 00:25:28,410
mayroon kang upang ilagay sa iyong input na lokasyon, ang iyong output lokasyon, pindutin ang Search,

425
00:25:28,410 --> 00:25:31,190
ito iproseso na at ipakita ang iyong mga resulta.

426
00:25:31,190 --> 00:25:34,120
Kung nais mong baguhin ang iyong query, gusto mo pindutin muli nang dalawang beses,

427
00:25:34,120 --> 00:25:39,770
pumasok sa isang bagong query mula sa simula, at pagkatapos ay gawin ito nang paulit-ulit.

428
00:25:39,770 --> 00:25:43,910
Ang gandang bagay tungkol sa isang bagay tulad nito ay ito ay gumagamit ng isang napaka [hindi maintindihan] bagay sa gitna.

429
00:25:43,910 --> 00:25:46,230
Tuwing gagawin mo ang isang bagay tulad nito, ito shoots off ang isang kahilingan

430
00:25:46,230 --> 00:25:48,420
at nagbabalik mo ang lahat ng mga resulta kaagad.

431
00:25:48,420 --> 00:25:51,680
Ay isang bagay na ginawa kayak wildly popular na ang ganitong uri ng agarang feedback

432
00:25:51,680 --> 00:25:55,910
dahil ito ay talagang madali para lamang sa akin baguhin ang aking query

433
00:25:55,910 --> 00:25:58,890
at upang malaman kung ang mga bagay na sa paligid ng isang partikular na hanay

434
00:25:58,890 --> 00:26:01,950
nang hindi na kinakailangang upang bumalik-balik, papunta at pabalik, papunta at pabalik.

435
00:26:01,950 --> 00:26:05,200
Kaya ito ay ang lahat ng mga uri ng mga bagay na gusto mong mag-isip tungkol sa kung kailan ka pagdidisenyo ng iyong website.

436
00:26:05,200 --> 00:26:08,930
Paano ko mapapalitaw ang mas mahusay para sa aking mga gumagamit upang pumunta sa pamamagitan ng anumang sila ay nagtatrabaho sa

437
00:26:08,930 --> 00:26:13,010
at upang makakuha ng sa kanilang sa wakas layunin nang mabilis hangga't maaari?

438
00:26:13,010 --> 00:26:16,430
[Malan] At sa punto ng Joseph ng mas maaga tungkol sa mga gumagamit na hindi kinakailangang alam kung ano ang gusto nilang,

439
00:26:16,430 --> 00:26:18,640
batay sa kung ano ang iyong guys ngayon alam tungkol sa HTML

440
00:26:18,640 --> 00:26:22,780
at mayroon kang checkbox, mga pindutan ng radyo, piliin ang menu, mga patlang ng input at ang tulad,

441
00:26:22,780 --> 00:26:26,140
kung paano mo ipatupad ang paniwala ng pagpili ng isang oras ng simula para sa isang flight?

442
00:26:26,140 --> 00:26:30,030
>> Alin sa mga iba't ibang mga mekanismo ng UI ang gusto mong gamitin?

443
00:26:30,030 --> 00:26:34,100
Kung kamakailan mo lamang malaman ang halaga ng HTML na ay itinuro bago

444
00:26:34,100 --> 00:26:39,070
at alam mo ang mga input ang radio button, checkbox, drop-down, at input box,

445
00:26:39,070 --> 00:26:43,320
kung ano ang iyong natural na pagpili para sa pagpili ng petsa?

446
00:26:43,320 --> 00:26:48,670
[Mag-aaral] Input. >> Input. O maaari ring maging isang drop-down sa lahat ng ang mga petsa, i-right?

447
00:26:48,670 --> 00:26:53,170
Kaya sa mga mas kumplikadong mekanismo ng UI tulad nito sa kaliwang bahagi na maaari mong ipatupad,

448
00:26:53,170 --> 00:26:55,500
maaari kang gumawa ng prosesong ito mas intuitive na may isang slider

449
00:26:55,500 --> 00:27:01,020
dahil oras ay tuloy-tuloy, at mga taong karaniwang hindi nag-iisip ng mga ito sa mga tuntunin ng hiwalay chunks.

450
00:27:01,020 --> 00:27:04,950
Ayos lang. Huling bagay.

451
00:27:04,950 --> 00:27:07,370
Sampung heuristics sa usability.

452
00:27:07,370 --> 00:27:10,820
Ang lahat ng mga bagay na usapan natin ang tungkol malamang na mahulog sa ilalim ng isa sa mga kategoryang ito.

453
00:27:10,820 --> 00:27:14,420
Kung pupunta ka sa ang link na ito, kung saan ang site ay ipo-post online,

454
00:27:14,420 --> 00:27:18,900
iyong aktwal na magagawang, idisenyo ang iyong site, panatilihin ang mga heuristics na ito sa isip

455
00:27:18,900 --> 00:27:21,330
at ang mga panuntunang ito ng thumb.

456
00:27:21,330 --> 00:27:26,610
Para sa iyong mga proyekto, kung ano ang iminumungkahi kong gawin upang disenyo ng iyong app ng mas mahusay na

457
00:27:26,610 --> 00:27:28,850
ay gawin muna ang papel prototyping.

458
00:27:28,850 --> 00:27:32,150
Kapag ikaw ay nag-iisip tungkol sa iyong application, masyadong mabilis Sketch kung ano ang gusto mong ito sa hitsura

459
00:27:32,150 --> 00:27:36,230
at tiyakin na ang lahat ng mga kahon ay isagawa sa isang paraan na ay lubos na madaling maunawaan para sa gumagamit na gamitin ang

460
00:27:36,230 --> 00:27:39,820
at kahit na ipakita ang mga modelo ng papel sa iyong mga kaibigan at simulan ang focus group.

461
00:27:39,820 --> 00:27:44,230
Lamang makakuha ng 2 o 3 tao at hilingin sa kanila na pumindot lang sa mga modelo ng papel,

462
00:27:44,230 --> 00:27:47,650
at ipakita ang mga ito bagong screen upang makita kung sila aktwal na maunawaan kung ano ang nangyayari sa.

463
00:27:47,650 --> 00:27:50,680
>> Ano ang gusto mong gawin ay bigyan sila ng isang gawain, umudyok na gawain,

464
00:27:50,680 --> 00:27:53,270
at bigyan sila ng app at hayaan silang gamitin ito.

465
00:27:53,270 --> 00:27:56,530
Huwag bigyan ang mga ito ng mga tagubilin lampas na.

466
00:27:56,530 --> 00:28:00,920
Gusto mong aktwal na hayaan silang makipag-ugnay sa iyong app sa isang paraan na hinahayaan kang makita

467
00:28:00,920 --> 00:28:03,870
kung paano nila gamitin ito kung hindi ikaw ay nakatayo sa tabi sa kanila.

468
00:28:03,870 --> 00:28:05,250
At na napakahalaga.

469
00:28:05,250 --> 00:28:08,780
Na ay magbibigay sa iyo ng maraming pananaw bilang sa mga taong pagkuha sa paligid sa mga partikular na bagay

470
00:28:08,780 --> 00:28:10,560
sa isang paraan na hindi ko nilayong mga ito sa?

471
00:28:10,560 --> 00:28:14,680
Mga ito ang paggamit ng partikular na mga mekanismo ng UI sa screen

472
00:28:14,680 --> 00:28:17,490
sa isang paraan na uri ng hacky?

473
00:28:17,490 --> 00:28:22,020
Hindi ko nilayon para sa kanila na gawin ito na paraan.

474
00:28:22,020 --> 00:28:23,940
At sa sandaling tapos ka na sa na, kung ano ang gusto mong gawin?

475
00:28:23,940 --> 00:28:26,010
Ang iyong mga disenyo bato, i-right?

476
00:28:26,010 --> 00:28:29,600
Ano ang gusto mong gawin na gusto mo upang bumuo at pagkatapos ay gawin ang proseso muli.

477
00:28:29,600 --> 00:28:32,110
Kaya ipakita ito sa mga kaibigan sa oras na iyong binuo ito, subukan ito,

478
00:28:32,110 --> 00:28:36,630
bumuo, subukan, bumuo, subukan, umulit, sa at sa at ipasa.

479
00:28:36,630 --> 00:28:39,720
Disenyo ay isang napaka-umuulit proseso sa puntong ito.

480
00:28:39,720 --> 00:28:43,280
Aktwal mong upang bumuo ng isang bagay at pagkatapos ay mapagtanto ang mga bagay tungkol dito

481
00:28:43,280 --> 00:28:46,520
na hindi mo mapagtanto bago at bumalik at mapabuti ang mula sa.

482
00:28:46,520 --> 00:28:50,890
Ngayon, bilang para sa bahagi ng pag-unlad, na ang Tommy ay pagpunta upang ipakita sa iyo pagkatapos ng pahinga

483
00:28:50,890 --> 00:28:53,220
at kung paano mo maaaring ipatupad ang isang bagay tulad ng autocomplete

484
00:28:53,220 --> 00:28:56,610
sa isang paraan na ay medyo simple.

485
00:28:57,440 --> 00:28:59,550
[Malan] Bilang Tommy set up dito, ang isang tanong pagkatapos.

486
00:28:59,550 --> 00:29:03,780
Isang maraming pinakamaagang website - at kapag Joseph sinabi 1990s estilo website,

487
00:29:03,780 --> 00:29:07,640
ito ay ang pagpapatupad kung saan kung nais mong pumili ng isang oras ng simula at oras ng pagtatapos,

488
00:29:07,640 --> 00:29:10,380
lantaran, bumalik sa araw at kahit na sa ilang mga website na ngayon,

489
00:29:10,380 --> 00:29:13,220
ang paraan na gagawin mo ito ay mong pumili ng isang oras mula sa drop-down,

490
00:29:13,220 --> 00:29:15,910
pumili ka ng mga minuto mula sa drop-down, maaaring pinili mong AM, PM,

491
00:29:15,910 --> 00:29:17,440
at pagkatapos ay gawin mo na 3 higit pang mga beses.

492
00:29:17,440 --> 00:29:19,920
At ito na may 6 na mga pag-click at maaaring ilang scroll

493
00:29:19,920 --> 00:29:24,000
ang iyong user ay maaaring aktwal na magbigay ng ilang mga uri ng petsa at / o hanay ng oras sa puntong ito.

494
00:29:24,000 --> 00:29:27,920
>> Kaya tiyak suboptimal at pa sa gayon ay malayo nakakita kami ng hindi nagpapakilala kakayahan

495
00:29:27,920 --> 00:29:30,330
sa anuman sa mga wikang kami ay tumingin sa upang gawin ang isang bagay sexier

496
00:29:30,330 --> 00:29:32,620
tulad ng ito slider ng oras ng simula at oras ng pagtatapos.

497
00:29:32,620 --> 00:29:36,290
Ngunit kung sa tingin mo bumalik sa linggo 0 kapag usapan natin ang tungkol sa simula,

498
00:29:36,290 --> 00:29:39,080
doon may mga widget na lang ginawa ang ilang mga bagay.

499
00:29:39,080 --> 00:29:42,700
Mo ba talagang lamang ay may mga batayan tulad ng mga loop at kundisyon at ang mga tulad ng.

500
00:29:42,700 --> 00:29:46,910
Kaya uri ng pag-iisip napaka abstractly ngayon, hiwalay ng particular ng HTML,

501
00:29:46,910 --> 00:29:51,260
kung ano ang talagang pagpunta sa may isang bagay tulad ng ang oras ng simula at wakas slider ng oras?

502
00:29:51,260 --> 00:29:54,960
Kapag ko bang ilipat ang aking mouse at ako mag-click sa na maliit na karot simbolo sa kaliwa

503
00:29:54,960 --> 00:29:59,220
at simulan ang pag-drag, programa, kung ano ang nais mong ipatupad

504
00:29:59,220 --> 00:30:01,000
na nangyari?

505
00:30:01,000 --> 00:30:04,920
Ano ang tanong, ano ang Boolean expression ang gusto mong upang humingi?

506
00:30:04,920 --> 00:30:06,930
Kung ano talaga ang nangyayari sa? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Mag-aaral] Saan ang posisyon ng cursor? >> Mahusay. Saan ang posisyon ng cursor?

508
00:30:10,080 --> 00:30:11,970
Ito ay isang bagay na kailangan namin upang ipahayag ang pabalik sa simula,

509
00:30:11,970 --> 00:30:14,690
kung ito ay batay sa lokasyon o kahit kulay o tulad ng.

510
00:30:14,690 --> 00:30:18,410
Maaari mong isipin ang kailanman kaya maikling sa Lunes mayroong lahat ng mga bagay na ito na tinatawag na mga kaganapan

511
00:30:18,410 --> 00:30:22,370
sa mundo ng Web, at kaya may mga bagay na tulad ng onclick at onkeypress

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

513
00:30:25,960 --> 00:30:29,130
Napagtanto Kaya na kahit ang mga bagay na namin ang paglalaan para sa ipinagkaloob sa Web

514
00:30:29,130 --> 00:30:32,190
sa mga site tulad ng Facebook at Gmail, kahit na kung mayroon kang mga ideya

515
00:30:32,190 --> 00:30:34,890
kung paano mo posibleng ipatupad na dahil walang kahit tulad ito sa panayam

516
00:30:34,890 --> 00:30:38,570
o Problema Itakda 7, nauunawaan natin na may mga eksaktong parehong batayan,

517
00:30:38,570 --> 00:30:41,090
may HTTP at mga parameter at GET at POST,

518
00:30:41,090 --> 00:30:44,010
gamit ang basic HTML input na kami ay tumingin sa sa gayon ay malayo

519
00:30:44,010 --> 00:30:47,690
at sa ilang sandali na may ang program na mekanismo na Tommy ay upang ipakilala

520
00:30:47,690 --> 00:30:51,300
maaari mong simulan upang ipahayag ang iyong sarili tulad lang ng ginawa mo sa linggo 0

521
00:30:51,300 --> 00:30:53,800
sa pamamagitan ng napaka intuitively ng pag-drag at pag-drop.

522
00:30:53,800 --> 00:30:58,950
>> Kaya na sinabi, Tommy MacWilliam at ilang mga bagong piraso ng puzzle para sa amin para sa Web.

523
00:30:58,950 --> 00:31:03,450
Ayos lang. Ang pangalan ko ay Tommy at ako pagpunta sa pakikipag-usap tungkol sa JavaScript.

524
00:31:03,450 --> 00:31:07,150
Lang ang disclaimer: Ako ng opinyon na JavaScript ay ang pinakamahusay na wika ng programming

525
00:31:07,150 --> 00:31:09,010
sa buong buong mundo.

526
00:31:09,010 --> 00:31:11,940
Mayroong maraming mga tao na hindi sumasang-ayon sa akin, ngunit ito lamang ang mga kamangha-manghang.

527
00:31:11,940 --> 00:31:16,330
Kapag pumunta ka pabalik sa C, kung mayroon kang magsulat C para sa isa pang klase o ilang iba pang mga wika,

528
00:31:16,330 --> 00:31:19,780
lang talaga nakakadismaya sa lahat ng mga mababang antas na mga detalye na mayroon ka upang nabalaho sa putik.

529
00:31:19,780 --> 00:31:23,050
Kaya kung ka pakiramdam malungkot tungkol sa kung paano nakakainis C ay na magsulat,

530
00:31:23,050 --> 00:31:25,130
lang bumalik, sumulat ng ilang JavaScript. Ito ay nirvana.

531
00:31:25,130 --> 00:31:27,980
Makikita mo pakiramdam magkano ang mas mahusay na tungkol sa iyong masamang araw.

532
00:31:27,980 --> 00:31:31,900
Isang maraming ng magic ng JavaScript ay mula sa kakayahan upang manipulahin ang mga bagay

533
00:31:31,900 --> 00:31:33,730
na nasa pahina.

534
00:31:33,730 --> 00:31:38,520
Kapag sinulat ni namin ang aming PHP script, sila ay isinasagawa sa server,

535
00:31:38,520 --> 00:31:42,270
at kalaunan na PHP marahil output ng script ilang HTML.

536
00:31:42,270 --> 00:31:45,860
Na HTML ay ipinadala sa client, at pagkatapos na ito.

537
00:31:45,860 --> 00:31:50,180
Kung nais mong magdagdag ng isang pindutan sa isang pahina ng PHP, halimbawa, hindi talaga ito maaaring gawin iyon.

538
00:31:50,180 --> 00:31:54,350
Na ito upang mag-render ng isang buong bagong file na HTML at ipadala na sa browser.

539
00:31:54,350 --> 00:31:57,840
Gamit ang JavaScript alam namin na maaari naming i-update ang mga bagay na habang sila ay sa pahina,

540
00:31:57,840 --> 00:32:00,840
at dahil dito maaari naming magbigay ng mas instant na feedback,

541
00:32:00,840 --> 00:32:06,150
na talagang mapabuti ang karanasan ng gumagamit sa aming website.

542
00:32:06,150 --> 00:32:09,330
Lamang ng isang mabilis na pagbabalik-tanaw ng JavaScript tagapili.

543
00:32:09,330 --> 00:32:11,590
Alam namin na kapag kami i-download ang isang HTML na pahina,

544
00:32:11,590 --> 00:32:13,890
na pagpunta kinakatawan sa DOM.

545
00:32:13,890 --> 00:32:19,340
>> Tandaan ang DOM ito malaking puno kung saan ang mga elemento ay may kaugnayan sa malaking hierarchy.

546
00:32:19,340 --> 00:32:21,810
Kapag namin nagtrabaho sa database sa pset 7,

547
00:32:21,810 --> 00:32:26,280
isa sa mga unang bagay na kailangan namin upang malaman kung paano gawin ay query sa database.

548
00:32:26,280 --> 00:32:29,060
Mayroon kaming ang malaking mga gumagamit ng talahanayan, at minsan gusto lang namin sasabihin,

549
00:32:29,060 --> 00:32:33,260
"Gusto ko lang ilan sa mga user na tumutugma sa ilang mga kundisyon."

550
00:32:33,260 --> 00:32:36,020
Katulad nito, kapag mayroon namin ang DOM kailangan namin ilang paraan ng querying ito.

551
00:32:36,020 --> 00:32:39,490
Kailangan namin ang ilang paraan ng pagsabi, "Gusto kong lahat ng mga pindutan na ganito ang hitsura ng

552
00:32:39,490 --> 00:32:41,860
"O lahat ng mga imahe sa pahina."

553
00:32:41,860 --> 00:32:44,330
At ang mga tagapili na ito ay nagbibigay-daan sa amin upang gawin iyon.

554
00:32:44,330 --> 00:32:45,690
Kaya lamang ng isang mabilis na pagbabalik-tanaw.

555
00:32:45,690 --> 00:32:50,770
Ito unang isa dito, ito # isumite, kung ano ay na upang piliin? Ba ang sinuman tandaan?

556
00:32:50,770 --> 00:32:54,880
[Hindi marinig na mag-aaral ng tugon] >> Oo, eksakto.

557
00:32:54,880 --> 00:32:59,510
Na ito ay upang pumili ng isang elemento sa pahina na may isang ID ng isumite.

558
00:32:59,510 --> 00:33:03,470
At sa gayon ay hash tag sabi ni selector na ito ay upang gumana sa mga ID.

559
00:33:03,470 --> 00:33:07,630
Paano tungkol sa ikalawang isa, ito. Iginitna, kung ano ang na piliin?

560
00:33:11,360 --> 00:33:15,180
Oo. >> [Mag-aaral] Class. >> Mismong. Na ito ay upang piliin sa pamamagitan ng klase.

561
00:33:15,180 --> 00:33:18,840
Ang pagkakaiba sa pagitan ng ID at klase dito ay ang ID ay dapat natatangi

562
00:33:18,840 --> 00:33:20,820
sa loob ng anumang espasyo naghahanap ka.

563
00:33:20,820 --> 00:33:23,080
Kaya kung ikaw ay naghahanap sa isang buong web page,

564
00:33:23,080 --> 00:33:27,740
mo ba talagang dapat lamang magkaroon ng 1 elemento na may ID na ilang, kaya sa kasong ito ng isumite.

565
00:33:27,740 --> 00:33:31,330
Sa mga klase, sa kabilang banda, maaari naming magkaroon ng higit sa 1 elemento sa parehong pahina

566
00:33:31,330 --> 00:33:33,130
na may parehong klase.

567
00:33:33,130 --> 00:33:36,580
Ito ay maaaring maging kapaki-pakinabang sa sinasabi gusto kong piliin ang lahat ng bagay na nakasentro sa pahina

568
00:33:36,580 --> 00:33:38,450
kaysa sa 1 bagay lang.

569
00:33:38,450 --> 00:33:40,310
>> At sa wakas, ang huling isa dito ng kaunti pa kumplikadong,

570
00:33:40,310 --> 00:33:43,890
ngunit kung ano ang ito upang pumili mula sa DOM?

571
00:33:46,650 --> 00:33:48,810
[Hindi marinig na mag-aaral ng tugon] >> Ano iyon?

572
00:33:48,810 --> 00:33:53,250
[Mag-aaral] anumang na ng tag. >> Mayroon kaming 2 bahagi dito.

573
00:33:53,250 --> 00:33:58,070
Ang ikalawang bahagi ay upang sabihin na gusto kong piliin ang mga tag na ito na may tag ng input,

574
00:33:58,070 --> 00:34:00,730
kaya elemento anumang na isang input tag.

575
00:34:00,730 --> 00:34:03,080
Ngunit hindi ko nais na lamang piliin ang lahat ng input

576
00:34:03,080 --> 00:34:05,170
dahil ang isang bagay tulad ng isang pindutan ng isumite isang input

577
00:34:05,170 --> 00:34:08,409
at ang isang bagay tulad ng isang kahon ng teksto ay maaaring maging isang input.

578
00:34:08,409 --> 00:34:11,909
Kaya may mga square bracket ako sinasabi gusto ko lang upang piliin ang mga elementong iyon

579
00:34:11,909 --> 00:34:14,110
na ng uri ng teksto.

580
00:34:14,110 --> 00:34:17,400
Sa isang lugar sa aking HTML tag na mayroon akong isang katangian na tinatawag na uri,

581
00:34:17,400 --> 00:34:19,750
at ang halaga ng katangiang iyon na teksto.

582
00:34:19,750 --> 00:34:21,340
Kaya kung paano tungkol sa unang bahagi na ito dito?

583
00:34:21,340 --> 00:34:25,489
Ang unang salita ng selector na ito ay form na mayroon akong isang espasyo at pagkatapos ay ang input bahagi.

584
00:34:25,489 --> 00:34:29,620
Ano ang na gawin, paglalagay ng form sa harap nito?

585
00:34:33,409 --> 00:34:35,860
Ito ay pagpunta sa isa lamang na limitahan ang aming query.

586
00:34:35,860 --> 00:34:38,510
Ito ay maaaring maging kaso na mayroon kaming ilang mga input sa pahina

587
00:34:38,510 --> 00:34:41,080
na hindi kaapu-apuhan ng isang form.

588
00:34:41,080 --> 00:34:46,150
Ano ito ay gawin ito ay sabihin gusto ko lang ang input tag na may isang lugar sa itaas sa kanila

589
00:34:46,150 --> 00:34:49,030
ilang elemento ng magulang ng isang form.

590
00:34:49,030 --> 00:34:52,100
At kaya sa ganitong paraan maaari naming gumawa ng mga mas hierarchical mga query sa

591
00:34:52,100 --> 00:34:55,000
kaya hindi namin na lang ay upang piliin ang lahat na tumutugma sa isang ibinigay na tagapili.

592
00:34:55,000 --> 00:35:00,760
Maaari namin ang uri ng limitasyon ang saklaw ng query na iyon sa iba pa.

593
00:35:00,760 --> 00:35:04,000
Kaya ngayon na alam namin kung paano piliin ang mga elemento sa pahina,

594
00:35:04,000 --> 00:35:06,780
sabihin makipag-usap ng kaunti tungkol sa AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX ay pa rin lubhang naka-istilong acronym na nakatayo para sa asynchronous na JavaScript at XML.

596
00:35:12,270 --> 00:35:15,640
Lamang kaya mangyayari na XML lamang ang ilang mga paraan upang kumatawan ng data.

597
00:35:15,640 --> 00:35:20,920
>> Na uri ng nawala katanyagan kamakailan, kaya ang X sa AJAX ay hindi ginamit ang lahat ng oras.

598
00:35:20,920 --> 00:35:26,220
Talaga, ano ang AJAX ay nagbibigay-daan sa amin upang gawin ay gumawa ng mga HTTP kahilingan

599
00:35:26,220 --> 00:35:28,620
mula sa konteksto ng JavaScript.

600
00:35:28,620 --> 00:35:32,310
Kapag hindi namin sa aming web browser at kami ay-navigate sa paligid ng mga pahina at i-click kami ng link,

601
00:35:32,310 --> 00:35:37,790
kung ano ang aming browser gawin ay gumawa ng HTTP na kahilingan sa anumang link na namin i-click.

602
00:35:37,790 --> 00:35:41,670
Ngunit na hindi laging perpekto dahil kung iyon ang kaso, pagkatapos ay bilang David ay sinasabi,

603
00:35:41,670 --> 00:35:45,220
lagi naming upang gumawa ng mga gumagamit na i-click ang Isumite ang pindutan o i-click ang link

604
00:35:45,220 --> 00:35:50,380
upang gumawa ng anumang mangyayari na may kasangkot na HTTP na kahilingan.

605
00:35:50,380 --> 00:35:54,160
Kaya sa AJAX maaari naming gumawa ng mga kahilingan na ito sa ngalan ng JavaScript.

606
00:35:54,160 --> 00:35:57,020
Iyon ay nangangahulugang tuwing may gumagamit sa makipag-ugnay ang pahina o anumang mangyayari,

607
00:35:57,020 --> 00:36:01,780
maaari naming aktwal na gumawa ng isang program kahilingan sa ilang iba pang mga file ng PHP sa aming website

608
00:36:01,780 --> 00:36:06,280
o anumang bagay at makuha ang mga data na file na spits ang.

609
00:36:06,280 --> 00:36:09,860
Natin tingnan ang isang halimbawa ng AJAX.

610
00:36:09,860 --> 00:36:16,140
Ito ay aming CS50 Finance pahina na sana ang ilan sa atin ay pamilyar.

611
00:36:16,140 --> 00:36:21,790
Kung titingnan namin sa HTML ng pahinang ito, tingnan namin dito na Idinagdag ko na ang ilang mga bagay,

612
00:36:21,790 --> 00:36:23,820
kung saan Ibinigay ko ang form na ito ng ID.

613
00:36:23,820 --> 00:36:26,480
Ko ang sinabi id = "form na-quote".

614
00:36:26,480 --> 00:36:31,910
Nagawa ko na ito dahil lang sa ito upang gumawa ito ng kaunti mas madali upang pumili mula sa DOM

615
00:36:31,910 --> 00:36:35,090
dahil ko lamang gumawa ng isang simpleng query.

616
00:36:35,090 --> 00:36:38,960
Kung ano ang gusto kong gawin dito ay gusto ko upang ayusin ang ilang problema sa CS50 Finance.

617
00:36:38,960 --> 00:36:41,550
Kaya kung pumunta kami sa finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
sa bawat oras na nais ko upang makakuha ng isang quote, mayroon akong i-click ang Kumuha ng Quote pindutan,

619
00:36:45,700 --> 00:36:48,960
at na Kumuha ng Quote pindutan at pagkatapos ay dadalhin ako sa isa pang buong pahina.

620
00:36:48,960 --> 00:36:52,400
At kung gusto ko ng isa pang quote, mayroon akong upang pindutin ang pindutang Bumalik at pagkatapos ko i-type ito sa,

621
00:36:52,400 --> 00:36:54,480
Nakakuha ako ng quote, at ako pindutin ang pindutang Bumalik.

622
00:36:54,480 --> 00:36:56,840
Ito ay talagang hindi ang pinakamahusay na karanasan ng user.

623
00:36:56,840 --> 00:37:01,570
Sino ang gusto talagang gamitin ang site kung ito ay na mabagal upang makakuha ng mga presyo ng stock?

624
00:37:01,570 --> 00:37:05,630
Kaya kung ano ang gusto naming gawin sa AJAX ay alisin na hakbang ng pagpunta sa isang hiwalay na pahina

625
00:37:05,630 --> 00:37:08,410
upang tingnan ang mga resulta.

626
00:37:08,410 --> 00:37:11,240
>> Ano talaga namin ka lamang humihingi ng na talagang maliit na presyo,

627
00:37:11,240 --> 00:37:14,240
at ito lamang ay isang talagang maliit na halaga ng data.

628
00:37:14,240 --> 00:37:17,400
Kaya walang pangangailangan para sa akin upang pumunta sa isa pang buong HTML na pahina,

629
00:37:17,400 --> 00:37:20,670
i-download ang isang buong bagong batch ng HTML, maaaring i-download ang ilang higit pang mga larawan,

630
00:37:20,670 --> 00:37:24,410
ilang iba pang mga CSS file para sa akin lamang upang sagutin na napaka-simpleng tanong

631
00:37:24,410 --> 00:37:27,810
kung magkano ang stock gastos na ito.

632
00:37:27,810 --> 00:37:31,000
Gamit ang AJAX namin ito ng maraming mas madali.

633
00:37:31,000 --> 00:37:36,400
Nakikita namin pababa dito na ako sa pagli-link sa JavaScript file na tinatawag na quote.js.

634
00:37:36,400 --> 00:37:40,140
Natin ang aktwal na buksan ang file na iyon. Hindi doon.

635
00:37:42,610 --> 00:37:45,860
Lahat ng aking mga file sa JavaScript ay pagpunta sa matatagpuan sa HTML

636
00:37:45,860 --> 00:37:47,630
kaya na web browser ay maaaring ma-access ito.

637
00:37:47,630 --> 00:37:50,330
Pagkatapos mayroon kaming isang hiwalay na direktoryo dito para sa JavaScript,

638
00:37:50,330 --> 00:37:54,340
at ngayon dito ay quote.js.

639
00:37:54,340 --> 00:38:00,930
Sa tuktok ng file na ito ito sabi dito na gusto kong maghintay para sa buong pahina-load

640
00:38:00,930 --> 00:38:04,830
bago sinusubukan kong gawin. Bakit ay na kinakailangan?

641
00:38:04,830 --> 00:38:08,650
Ito lumiliko out na ang susunod na bagay na ako pagpunta sa gawin dito simula ng pagtingin para sa isang elemento

642
00:38:08,650 --> 00:38:10,810
na tumutugma sa ilang tagapili.

643
00:38:10,810 --> 00:38:15,600
Kung ang JavaScript ito ay kailanman pinaandar bago ang elementong ito ay load sa pahina,

644
00:38:15,600 --> 00:38:17,820
ang lahat ng sinusubukan kong gawin ay hindi pagpunta sa trabaho

645
00:38:17,820 --> 00:38:20,580
dahil ako pagpunta sa subukan upang pumili ng isang bagay na hindi doon pa.

646
00:38:20,580 --> 00:38:23,780
Kaya ito line up tuktok na gusto kong mong maghintay hanggang lahat ay load

647
00:38:23,780 --> 00:38:28,030
kaya kami ay katiyakan na ang anumang mga elemento Naghahanap ako ng aktwal na sa pahina.

648
00:38:29,730 --> 00:38:34,310
Ito dollar sign dito ay nangangahulugan na ang gumagamit ako sa library na tinatawag na jQuery.

649
00:38:34,310 --> 00:38:38,570
JQuery library na ito ay nagbibigay-daan sa amin upang gamitin ang mga tagapili na lang namin ay tumingin sa.

650
00:38:38,570 --> 00:38:44,010
Sa pamamagitan ng sinasabi $ pagkatapos pagpasa sa bilang isang argument na ito # form na-quote,

651
00:38:44,010 --> 00:38:47,910
Ako ngayon ng pagpili ng form na iyon na lang namin kinuha ng isang pagtingin sa.

652
00:38:47,910 --> 00:38:52,290
Ngayon Mayroon akong isang representasyon ng form na iyon sa memorya sa paanuman.

653
00:38:52,290 --> 00:38:56,760
>> Sa ngayon sa bagay na ito, ang representasyon ng form,

654
00:38:56,760 --> 00:38:58,890
Ngayon gumagamit ako ng isang function na tinatawag na sa.

655
00:38:58,890 --> 00:39:02,710
Ano ang function na ito ginagawa ito upang i-attach ang isang kaganapan handler.

656
00:39:02,710 --> 00:39:06,310
Ang kaganapan na kami ay pagpunta sa makinig para sa ang isumite kaganapan.

657
00:39:06,310 --> 00:39:08,890
Kaya kapag ang user ay nag-click na Magsumite ng pindutan o pagpindot sa Ipasok,

658
00:39:08,890 --> 00:39:11,730
Ang kaganapan na ito ay pagpunta sa sunog.

659
00:39:11,730 --> 00:39:16,390
Sa pamamagitan ng hooking sa ito, maaari ko ngayon sasapaw sa default na pag-uugali ng form.

660
00:39:16,390 --> 00:39:19,770
Wala ang JavaScript, ang form ay isinumite sa anumang PHP file

661
00:39:19,770 --> 00:39:22,110
ginamit namin sa katangiang iyon ng pagkilos.

662
00:39:22,110 --> 00:39:25,440
Ngunit sa halip, ngayon ako sinasabi, maghintay, maghintay, maghintay, hindi ko nais na aktwal mong gawin na.

663
00:39:25,440 --> 00:39:31,140
Gusto ko ito mangyari bago ka pumunta at subukan upang isumite sa ilang PHP file.

664
00:39:31,140 --> 00:39:32,870
Ngayon kung ano ang gusto kong gawin?

665
00:39:32,870 --> 00:39:39,270
Sa puntong ito, gusto kong gamitin ang AJAX sa paanuman upang i-load sa kung ano ang presyo ng stock.

666
00:39:39,270 --> 00:39:44,170
Ang unang bagay na kailangan kong malaman kung ano stock ang user hinahanap.

667
00:39:44,170 --> 00:39:46,760
Upang gawin na ako pagpunta sa gumamit ng ibang selector.

668
00:39:46,760 --> 00:39:49,020
Ito ang pangatlong tagapili na namin tumingin sa bago.

669
00:39:49,020 --> 00:39:54,460
Ito ay sinasabi na gusto ko upang simulan-off ang form na ito ng elemento sa isang ID ng form na-quote.

670
00:39:54,460 --> 00:39:58,440
Pagkatapos sa isang lugar sa loob ng form na iyon na isang elemento ng input

671
00:39:58,440 --> 00:40:01,270
na may pangalan ng simbolo.

672
00:40:01,270 --> 00:40:05,460
Kung titingnan namin sa aming HTML, nakita namin na nagkaroon kami ng input [pangalan = simbolo].

673
00:40:05,460 --> 00:40:12,380
Na nangangahulugan na ito ay upang piliin ang text box na ang gumagamit ay nagta-type sa.

674
00:40:12,380 --> 00:40:13,870
Na ang magaling. Mayroon kaming text box.

675
00:40:13,870 --> 00:40:17,360
Ngayon kailangan lang namin malaman kung ano ang sa loob nito.

676
00:40:17,360 --> 00:40:20,290
Upang gawin na maaari naming tawagan ang pamamaraan na ito dito, ito. Val,

677
00:40:20,290 --> 00:40:23,240
at ito sabi ni Alam ko kung ano ang text box na mayroon kang.

678
00:40:23,240 --> 00:40:28,160
Gusto ko mong sabihin sa akin kung ano ang gumagamit na nai-type sa text box na iyon.

679
00:40:28,160 --> 00:40:34,440
Ngayon kami ay may isang string na tinatawag na simbolo na katumbas sa anumang user-type.

680
00:40:34,440 --> 00:40:39,820
Na ang magaling. Maaari naming gamitin na string ngayon upang gawin ang aming kahilingan.

681
00:40:39,820 --> 00:40:42,450
Ito ay isang bagong function na dito, ang $,

682
00:40:42,450 --> 00:40:44,900
maliban sa hindi na kami ay pagpunta sa ay ang pagpili ng mga elemento,

683
00:40:44,900 --> 00:40:48,910
kami ay pagpunta sa ay pagtawag ng ibang function na ibinigay sa amin sa pamamagitan ng jQuery.

684
00:40:48,910 --> 00:40:54,810
Ang AJAX function na ay kung ano ang aktwal na pagpunta sa gawin ang kahilingang HTTP.

685
00:40:54,810 --> 00:40:57,000
Kaya mayroon kaming upang sabihin dito ang ilang mga bagay.

686
00:40:57,000 --> 00:41:01,410
Ang unang bagay na mayroon kami upang sabihin na ito function na kung saan Gusto kong pumunta ang kahilingan.

687
00:41:01,410 --> 00:41:08,910
Sa isang lugar sa aking proyekto ko ang file na ito sa loob ng HTML na direktoryo na tinatawag na quote.php.

688
00:41:08,910 --> 00:41:15,150
Ko ma-access ang file na ito, nakita namin, tulad ng ito, kung pumunta ako sa localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Gusto ko ang aking JavaScript upang gumawa ng kahilingan sa pahinang iyon.

690
00:41:20,450 --> 00:41:22,920
Anong uri ng kahilingan ngayon?

691
00:41:22,920 --> 00:41:27,210
Nakita namin bago form na iyon ay may na paraan ng = "post" na attribute,

692
00:41:27,210 --> 00:41:29,270
at ito ay nangangahulugan na ito upang gumawa ng POST kahilingan,

693
00:41:29,270 --> 00:41:32,630
kaya hindi ito upang ilagay ang anumang bagay sa URL, kaysa sa isang Kumuha ng kahilingan,

694
00:41:32,630 --> 00:41:36,860
na nais lamang na fired kung lamang namin access ang pahina gamit ang web browser, halimbawa.

695
00:41:36,860 --> 00:41:41,260
Na namin ngayon ang sinabi Gusto kong gumawa ng isang kahilingan ng HTTP POST

696
00:41:41,260 --> 00:41:44,840
sa isang pahina na matatagpuan sa quote.php.

697
00:41:44,840 --> 00:41:51,490
Kapag naming isumite ang form, tandaan kami maaaring ma-access ang mga elemento ng input sa loob ng form na iyon

698
00:41:51,490 --> 00:41:54,430
may variable na $ _POST.

699
00:41:54,430 --> 00:41:58,710
Sa ngayon sa kuwento ay hindi namin aktwal na ipinadala sa kahabaan ng anumang data.

700
00:41:58,710 --> 00:42:00,640
Namin ang sinabi ginagawa namin ng isang AJAX kahilingan

701
00:42:00,640 --> 00:42:03,200
at narito ang uri ng kahilingan ginagawa namin.

702
00:42:03,200 --> 00:42:07,090
Ngayon kailangan namin upang aktwal na magpadala ng mga ilang data sa pahina.

703
00:42:07,090 --> 00:42:10,930
Upang gawin na maaari naming gamitin ang ari-arian na tinatawag na data.

704
00:42:10,930 --> 00:42:14,950
Ang halaga ng ari-arian na ito ay talagang isang nag-uugnay array.

705
00:42:14,950 --> 00:42:19,390
Ang dahilan para sa ay nagbibigay-daan sa amin upang magpadala ng higit pa kaysa sa may 1 piraso ng data.

706
00:42:19,390 --> 00:42:24,750
Iyon ay kung bakit mayroon kaming mga kulot tirante dito nested sa loob ng iba pang mga kulot tirante.

707
00:42:24,750 --> 00:42:29,680
Ang mga susi sa mga nag-uugnay array ay ang parehong bagay

708
00:42:29,680 --> 00:42:32,630
ng pangalan ng mga nagdudulot sa aming mga elemento sa form na.

709
00:42:32,630 --> 00:42:35,740
Nangangahulugan iyon na kung ako magpadala sa kahabaan ng key ng simbolo,

710
00:42:35,740 --> 00:42:41,870
na nangangahulugan na ang aking PHP pahina ay maaaring ma-access ang data na ito sa $ _POST [simbolo]

711
00:42:41,870 --> 00:42:44,640
lamang tulad ng ginawa namin bago kapag kami ng pagsusumite ng form.

712
00:42:44,640 --> 00:42:47,090
At ngayon ang aktwal na data na gusto naming magpadala ng

713
00:42:47,090 --> 00:42:50,790
ay ang halaga sa loob ng mga ito nag-uugnay array.

714
00:42:50,790 --> 00:42:54,070
>> Namin ang naka-imbak na teksto na ito sa isang variable na tinatawag na simbolo,

715
00:42:54,070 --> 00:42:57,380
at kaya namin ipinapadala sa kahabaan ng key ng simbolo na ngayon

716
00:42:57,380 --> 00:43:01,380
at isang halaga ng anumang user-type.

717
00:43:01,380 --> 00:43:06,270
Na namin ngayon ang HTTP na kahilingan na ito, aming PHP file ay pinaandar,

718
00:43:06,270 --> 00:43:11,480
at ito upang magpadala ng ilang data bumalik ngayon sa client na ginawa ang hiling na ito.

719
00:43:11,480 --> 00:43:15,220
Ngayon kailangan namin upang tumugon sa anumang server ang sinabi sa amin.

720
00:43:15,220 --> 00:43:20,180
Upang gawin na namin ito huling na ari-arian dito tinatawag na tagumpay.

721
00:43:20,180 --> 00:43:24,240
Ang halaga ng tagumpay ang key na ito ay aktwal na pagpunta sa isang function,

722
00:43:24,240 --> 00:43:26,910
at ito ay isa sa mga talagang cool na mga bagay na maaari mong gawin sa JavaScript.

723
00:43:26,910 --> 00:43:31,720
Hindi lamang maaari kang magkaroon ng mga ints o array bilang isang halaga sa loob ng isang nag-uugnay array,

724
00:43:31,720 --> 00:43:34,170
Maaari rin naming magkaroon ng isang function.

725
00:43:34,170 --> 00:43:36,380
Kaya sa pamamagitan ng sinasabi tagumpay, ito ay ang aking key.

726
00:43:36,380 --> 00:43:38,830
Tutuldok sinasabi dito ay ang halaga,

727
00:43:38,830 --> 00:43:41,810
at ngayon ang halaga ng mga ito ay talagang isang function.

728
00:43:41,810 --> 00:43:44,460
Kaya hindi namin kailangan upang bigyan ang function na ito ng pangalan per se.

729
00:43:44,460 --> 00:43:48,820
Maaari lang namin sabihin na ito ay pagpunta sa ilang function na. Ito ng 1 argumento.

730
00:43:48,820 --> 00:43:51,190
Ang argumento sa function na ito ay magiging

731
00:43:51,190 --> 00:43:54,460
anumang server ay nagpadala sa amin pabalik mula sa kahilingan.

732
00:43:54,460 --> 00:43:57,750
Tulad kapag ang aming browser gumagawa ng isang kahilingan, ang server ay nagpapadala ng isang bagay na bumalik

733
00:43:57,750 --> 00:43:59,060
at ang browser ay nagpapakita ng ito,

734
00:43:59,060 --> 00:44:03,030
sa konteksto ng AJAX ginawa namin ng isang kahilingan, ang server ay nagpadala ng isang bagay sa likod,

735
00:44:03,030 --> 00:44:07,110
at ngayon na aming kinakatawan bilang isang string.

736
00:44:07,110 --> 00:44:11,280
Gamit na string gusto ko lang i upang ipakita na sa pahina.

737
00:44:11,280 --> 00:44:14,040
Upang gawin na ako pagpunta sa magkaroon ng isa huling tagapili.

738
00:44:14,040 --> 00:44:17,570
Gusto kong piliin ang elemento ang presyo ng ID.

739
00:44:17,570 --> 00:44:20,710
Ito ay isang walang laman na div na aking nilikha sa pahina,

740
00:44:20,710 --> 00:44:26,640
at gusto ko upang itakda ang mga nilalaman ng na div sa anumang server ay nagpadala sa amin pabalik.

741
00:44:26,640 --> 00:44:30,280
Tunay ko na binagong quote.php bit ng.

742
00:44:30,280 --> 00:44:33,460
>> Kaysa sa pagtawag render at nagre-render ng ilang mga pahina,

743
00:44:33,460 --> 00:44:38,100
quote.php ngayon ay simpleng upang i-print ang halaga ng stock bilang isang string.

744
00:44:38,100 --> 00:44:41,880
Kaya't kung ikaw ay aktwal na bisitahin ang pahina, nais mong lang makita na maliit na string

745
00:44:41,880 --> 00:44:45,030
anuman ang presyo ng stock ay.

746
00:44:45,030 --> 00:44:50,170
Isang huling bagay na kailangan namin upang gawin dito ay tiyakin lamang na function na ito ay nagbabalik ng maling.

747
00:44:50,170 --> 00:44:53,560
Kung ano ang sinasabi ay na kung ako sa loob ng isang handler ng kaganapan

748
00:44:53,560 --> 00:44:57,300
at na ang handler ng kaganapan nagbabalik maling sa halip ng bumabalik totoo,

749
00:44:57,300 --> 00:45:01,510
na nangangahulugan na hindi ko gusto ang orihinal na kaganapan sa sunog.

750
00:45:01,510 --> 00:45:05,270
Sa kasong ito, kung hindi namin magkaroon ng anumang JavaScript at aming naisumite ang isang form,

751
00:45:05,270 --> 00:45:08,280
aming web browser upang sabihin, "ako pagpunta sa ipadala ang data na iyon kasama,"

752
00:45:08,280 --> 00:45:10,130
at sila ay pagpunta sa magpadala sa iyo sa isa pang pahina.

753
00:45:10,130 --> 00:45:14,360
Dahil kami ay gamit ang AJAX ngayon, hindi na kailangan upang ipadala ang gumagamit sa isa pang pahina.

754
00:45:14,360 --> 00:45:17,920
Kami ay pagpunta upang ipakita ang mga resulta sa dynamic na sa parehong pahina na ito.

755
00:45:17,920 --> 00:45:21,460
Hindi namin talagang gusto sa kanila upang pumunta saanman, at gusto kong manatili sa parehong pahina.

756
00:45:21,460 --> 00:45:27,060
Kaya sa pamamagitan ng pagbalik maling, namin matiyak na ang form ay hindi gawin iyon para sa amin.

757
00:45:27,060 --> 00:45:31,170
Natin ng isang pagtingin sa kung ano ang aktwal na kamukha.

758
00:45:31,170 --> 00:45:34,180
Aming pahina ng quote hitsura ang parehong.

759
00:45:34,180 --> 00:45:37,240
Hayaan akong makuha ang down na ang inspector dito upang maaari naming makita kung ano ang nangyayari sa.

760
00:45:37,240 --> 00:45:40,270
Gawin itong isang maliit na mas mababa malaking.

761
00:45:40,270 --> 00:45:44,590
Tandaan kung namin buksan ang tab na Network, ito ay kung saan maaari naming makita ang lahat ng mga kahilingan ng HTTP

762
00:45:44,590 --> 00:45:47,570
na nangyayari sa pahina.

763
00:45:47,570 --> 00:45:52,890
>> Para sa isang simbolo ipaalam sa akin type sa aapl at i-click ang Kumuha ng Quote.

764
00:45:52,890 --> 00:45:56,720
Ngayon Nakita namin na ang isang bahagi ng Apple ay nagkakahalaga ng ilang bilang ng mga dolyar

765
00:45:56,720 --> 00:46:00,410
lamang lumitaw sa pahina, ngunit ang URL ay hindi nagbabago sa lahat.

766
00:46:00,410 --> 00:46:04,570
Sa katunayan, narito ang HTTP na kahilingan na aming ginawa.

767
00:46:04,570 --> 00:46:09,980
Ginawa namin ang kahilingan ng POST sa quote.php. Na saysay.

768
00:46:09,980 --> 00:46:12,800
Ito ay kung ano ang server ay nagpadala sa amin pabalik.

769
00:46:12,800 --> 00:46:16,320
Ito ay hindi na ito parang higante na HTML na dokumento na may mga imahe at mga bagay tulad na,

770
00:46:16,320 --> 00:46:20,920
ito ay isang linya ng teksto, at pagkatapos ay ipinapakita lamang namin ang linya ng teksto.

771
00:46:20,920 --> 00:46:26,290
Kung pumunta namin pabalik sa header at makita kung ano ang aming aktwal na ay nagpadala sa loob ng ang HTTP na kahilingan na ito,

772
00:46:26,290 --> 00:46:33,950
maaari naming makita ang dito na ipinadala namin sa kahabaan ng key ng simbolo at halaga ng aapl,

773
00:46:33,950 --> 00:46:36,430
na kung ano ang user-type.

774
00:46:36,430 --> 00:46:39,230
Ito maganda, ngunit ito ay pa rin ng kaunti nakakainis.

775
00:46:39,230 --> 00:46:42,490
Mayroon pa akong i-click ang pindutang ito upang makuha ang mga stock quote.

776
00:46:42,490 --> 00:46:45,880
Humihingi kami ng mga abalang tao at wala kaming oras na i-click ang pindutan.

777
00:46:45,880 --> 00:46:49,910
Google maisasakatuparan ito ng ilang sandali ang nakalipas kapag sila ay ipinatupad ang Google Instant.

778
00:46:49,910 --> 00:46:53,590
Ano ang Google Instant ginagawa bilang iyong tina-type ito lamang nagsisimula pagpapakita ng mga resulta para sa iyo

779
00:46:53,590 --> 00:46:56,520
kaya hindi mo kailangang mag-alala tungkol sa kahit ng pag-click sa Paghahanap.

780
00:46:56,520 --> 00:46:58,730
Aktwal, masaya kuwento na may kaugnayan sa na.

781
00:46:58,730 --> 00:47:01,100
Sandaling Google Instant ay dumating out, ang mga tao ay tulad ng, "Whoa, ito sobrang kamangha-manghang."

782
00:47:01,100 --> 00:47:02,540
"Ito ay kaya cool na."

783
00:47:02,540 --> 00:47:05,950
At isang mag-aaral sa Stanford na 19 sa oras

784
00:47:05,950 --> 00:47:09,000
gumawa site na ito na tinatawag na YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Lahat ng YouTube Instant na ang ay epektibo maghanap sa YouTube agad.

786
00:47:13,170 --> 00:47:17,020
Kaya sa halip ng pagkakaroon upang pumunta sa YouTube.com at pindutin ang Search,

787
00:47:17,020 --> 00:47:21,650
kapag nagsimula ako mag-type sa YouTube Instant na isang bagay tulad ng CS50,

788
00:47:21,650 --> 00:47:25,320
maaari naming makita dito na ito sinusubukang sa isang mabagal na koneksyon sa Internet

789
00:47:25,320 --> 00:47:28,500
populate nakatira ang mga resultang ito.

790
00:47:28,500 --> 00:47:35,590
Upang gawin na maaari namin ang aktwal na gumawa ng isang simpleng pagbabago sa aming quote.js file.

791
00:47:35,590 --> 00:47:40,900
Sa ngayon kami ay naglalakip ng kaganapang ito kapag ang form ay isinumite.

792
00:47:40,900 --> 00:47:43,760
Hindi namin talagang gusto ang user isumite ang form na iyon na ito,

793
00:47:43,760 --> 00:47:48,570
kaya sabihin sa halip sunog ang kaganapang ito sa bawat oras na ang user pagpindot sa isang susi.

794
00:47:48,570 --> 00:47:53,200
Upang gawin na natin ang unang baguhin ang mga kaganapan mula sa isinumite sa keyup.

795
00:47:53,200 --> 00:47:55,740
Na nangangahulugan na sa halip na naghihintay para sa form upang isumite ang,

796
00:47:55,740 --> 00:47:58,490
tuwing key ay pinindot, ang isang bagay ay pagpunta sa mangyayari.

797
00:47:58,490 --> 00:48:02,030
Ito ay hindi na saysay upang i-attach ang keyup kaganapan ang buong form.

798
00:48:02,030 --> 00:48:05,080
Namin lamang talagang pakialam tungkol sa box para sa paghahanap na iyon.

799
00:48:05,080 --> 00:48:09,320
>> Upang piliin na ngayon, maaari naming baguhin ito upang maging, sa halip na form-quote,

800
00:48:09,320 --> 00:48:14,220
form na-quote at magpapadala kami ng isang input (type = text) o maaari naming sabihin (pangalanan = simbolo) -

801
00:48:14,220 --> 00:48:16,420
anumang gusto naming.

802
00:48:16,420 --> 00:48:18,650
Ngayon ay mayroong isang huling bagay na kami ay may sa gawin.

803
00:48:18,650 --> 00:48:21,190
Tandaan pababa dito kapag sinabi namin ang return false

804
00:48:21,190 --> 00:48:24,370
sinabi namin na hindi namin nais na default kaganapan sa sunog.

805
00:48:24,370 --> 00:48:26,390
Ngunit ito lamang kaya mangyayari na kung hindi paganahin namin na ngayon,

806
00:48:26,390 --> 00:48:29,660
anumang type namin sa ay hindi pagpunta upang ipakita sa browser

807
00:48:29,660 --> 00:48:33,000
dahil iyon ay ang default na pag-uugali ng pag-type sa isang kahon ng teksto.

808
00:48:33,000 --> 00:48:38,660
Hindi na namin nais upang i-override na, kaya hayaan sirain return ito maling.

809
00:48:38,660 --> 00:48:44,800
Kung namin i-save na at i-reload ang pahina, ngayon kapag ako magsisimulang mag-type ng aapl

810
00:48:44,800 --> 00:48:50,160
makikita mo na ang mga presyo ng stock sa ibaba dito ay pagkumpleto awtomatikong.

811
00:48:50,160 --> 00:48:53,150
Kaya dito ay CS50 Finance Instant na.

812
00:48:53,150 --> 00:48:55,860
Talagang isang masayang kwento tungkol sa YouTube Instant

813
00:48:55,860 --> 00:48:59,420
ang mag-aaral na ang uri ng sinulat ni ito bilang isang 1-gabi na proyekto,

814
00:48:59,420 --> 00:49:03,800
at ang susunod na araw siya ay Inaalok trabaho ng YouTube CEO.

815
00:49:03,800 --> 00:49:10,610
Kaya bilang simpleng bilang na, CS50 mga mag-aaral, ang iyong panghuling proyekto makakuha ka ng trabaho sa YouTube.

816
00:49:10,610 --> 00:49:14,720
Ang isang bagay tulad na isang talagang cool na ideya para sa isang pangwakas na proyekto, i-right?

817
00:49:14,720 --> 00:49:18,170
Nagkaroon kami ng ilang mga umiiral na pag-andar na namin nais na isama ang.

818
00:49:18,170 --> 00:49:20,330
Naming mapabuti ang karanasan ng gumagamit ng kaunti,

819
00:49:20,330 --> 00:49:24,340
at biglang naghahanap ng isang bagay sa YouTube Instant ay maaaring maging isang maraming mas madali

820
00:49:24,340 --> 00:49:27,290
kaysa sa naghahanap para sa ito sa regular na YouTube.

821
00:49:27,290 --> 00:49:30,790
Kaya na AJAX sa maikling sabi.

822
00:49:30,790 --> 00:49:34,860
>> Sa halimbawa na Joseph ay nagpapakita, nakita namin ng maraming mga autocompletes,

823
00:49:34,860 --> 00:49:39,250
at mga autocompletes talaga, talagang madaling gamiting dahil hindi namin kailangang tandaan -

824
00:49:39,250 --> 00:49:41,770
Halimbawa, kung hindi mo matandaan ang presyo ng stock para sa Apple

825
00:49:41,770 --> 00:49:45,110
at lamang namin alam aa isang bagay, sa halip na lang sinasabi sa akin,

826
00:49:45,110 --> 00:49:48,740
"Isang bahagi ng bagay na ito ay nagkakahalaga ng ganito karami pera,"

827
00:49:48,740 --> 00:49:52,540
Gusto ko uri ng bang malaman kung ano ang mga stock magsimula sa aa.

828
00:49:52,540 --> 00:49:58,340
Maaari naming gawin na talagang mahusay ang Bootstrap library pa kasama

829
00:49:58,340 --> 00:50:01,380
loob ng CS50 Finance.

830
00:50:01,380 --> 00:50:09,390
Kung dumating ka dito sa tag ng JavaScript at mag-scroll pababa sa Typeahead,

831
00:50:09,390 --> 00:50:13,730
ito ay isang magaling na plugin na isang tao na sinulat ni para sa amin,

832
00:50:13,730 --> 00:50:16,980
at maaari naming madaling gamitin ang pag-andar nito tulad nito.

833
00:50:16,980 --> 00:50:21,410
Ko na nai-type sa isang A at dito ay isang listahan ng ilang mga estado na nagsisimula sa A.

834
00:50:21,410 --> 00:50:25,360
Sabihin natin na sa tingin ko ito ay talagang cool na at ito ay oras para sa akin upang isama ito sa aking pahina.

835
00:50:25,360 --> 00:50:28,300
Ito lumiliko out na talaga ito, talagang simple.

836
00:50:28,300 --> 00:50:32,810
Natin lundagan dito upang quote3.js.

837
00:50:34,890 --> 00:50:37,380
Medyo naiiba ang hitsura ng aking file.

838
00:50:37,380 --> 00:50:39,700
Down dito lahat ng aking AJAX bagay ay ang parehong.

839
00:50:39,700 --> 00:50:43,170
Gusto ko upang i-load ang data ng stock nang hindi na kinakailangang pumunta sa isa pang pahina.

840
00:50:43,170 --> 00:50:46,220
Ngunit ngayon Gusto kong gamitin ito plugin.

841
00:50:46,220 --> 00:50:51,020
Ang Bootstrap dokumentasyon ay may mahusay na halimbawa ng kung paano eksakto ang maaari kong gawin na.

842
00:50:51,020 --> 00:50:54,350
Gusto kong sabihin, "Narito ang input na gusto ko sa autocomplete sa,"

843
00:50:54,350 --> 00:50:56,640
at ako pagpunta upang tawagan ang function na ito na tinatawag na typeahead,

844
00:50:56,640 --> 00:50:59,730
at na upang pangasiwaan ang lahat ng ang Typeahead bagay-bagay para sa amin.

845
00:50:59,730 --> 00:51:02,090
Ito ay initialize sa listahan, ito ay gawin ang lahat ng aming-filter.

846
00:51:02,090 --> 00:51:06,680
Ang tanging bagay na kailangang malaman kung ano ang data na kami ay autocompleting sa.

847
00:51:06,680 --> 00:51:10,480
Kaya nakita ko ang key na ito sa pamamagitan lamang ng pagbabasa sa dokumentasyon at pagtingin sa mga halimbawa.

848
00:51:10,480 --> 00:51:14,150
Kung ako bigyan ito ng isang key ng source, ang halaga ng key na ito

849
00:51:14,150 --> 00:51:17,770
ilan lang na hanay ng mga bagay na gusto ko sa autocomplete sa.

850
00:51:17,770 --> 00:51:20,180
Ang variable na ito ay nagmula mula sa iba pang mga file.

851
00:51:20,180 --> 00:51:23,400
Buksan ko symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Ito mga symbols.js lang ito talaga, talagang malaking array na naglalaman ng string

853
00:51:27,980 --> 00:51:32,080
ng lahat ng mga simbolo ng stock mula sa NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Kung gusto ko upang lumipat pabalik sa ang HTML, kaya jharvard, vhosts, globalhost, html, mga template,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Dahil na tinatawag na ngayong quote3.js, hayaan mo akong baguhin ang JavaScript file ako kabilang dito.

857
00:51:50,910 --> 00:51:55,110
Ngayon ay mayroon akong mga quote3.js, kaya ako pagpunta upang i-load sa na hiwalay na file ng JavaScript,

858
00:51:55,110 --> 00:51:57,910
ang isa na may na Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Ngayon kapag tumalon ako pabalik sa browser, i-reload ang pahina, at simulan ang pag-type ko aa,

860
00:52:04,430 --> 00:52:06,880
may aking autocomplete. At ito ay talagang bilang simpleng bilang na.

861
00:52:06,880 --> 00:52:11,400
Nagkaroon ako ng 1 linya ng code na lang sinabi, "Narito ang mga bagay na gusto kong sa autocomplete sa,"

862
00:52:11,400 --> 00:52:16,590
at biglang mayroon akong ito talaga, talagang maganda ang pag-andar na may hindi isang buong maraming pagsisikap sa lahat.

863
00:52:16,590 --> 00:52:19,810
Habang ikaw ay pagbuo ng mga website at lalo na front bahagi ng pagtatapos ng bagay,

864
00:52:19,810 --> 00:52:21,840
ka pagpunta upang mahanap ito ang kaso ng maraming.

865
00:52:21,840 --> 00:52:25,700
May ng maraming, maraming, maraming ng mga talagang cool na libreng aklatan out doon

866
00:52:25,700 --> 00:52:30,190
na gawin itong napakadaling upang gawin ang mga bagay tulad nito.

867
00:52:30,190 --> 00:52:37,230
Maaari sinuman na sa tingin ng anumang mga drawbacks ng simpleng autocompleting ito malaking listahan ng mga simbolo?

868
00:52:37,230 --> 00:52:41,580
Ano ang maaaring maging isang bagay na hindi ang pinakamahusay na gamit ang diskarteng ito?

869
00:52:42,790 --> 00:52:45,960
Oo. >> [Mag-aaral] Time, kung mayroon kang maraming ng [hindi marinig]

870
00:52:45,960 --> 00:52:50,420
Oo. Sa ngayon nagda-download ka namin ito malaking file ng JavaScript at may maraming ng mga simbolo.

871
00:52:50,420 --> 00:52:54,360
At kaya kung kami ay may isang tonelada ng mga bagay-bagay, ito ay ma-uri ng taasan ang latency ng hindi lamang paghahanap

872
00:52:54,360 --> 00:52:56,600
ngunit din-download ang aktwal na file.

873
00:52:56,600 --> 00:52:58,670
Mahusay. Anumang bagay?

874
00:53:01,950 --> 00:53:05,280
Sa ngayon walang tunay na kahulugan ng kaugnayan.

875
00:53:05,280 --> 00:53:08,190
Kung type ko sa isang A, ang mga kumpanya na ipakita dito

876
00:53:08,190 --> 00:53:11,220
ay maaaring hindi ang pinaka-popular na mga kumpanya na nagsisimula sa A.

877
00:53:11,220 --> 00:53:17,130
>> Bago nakukuha ko sa Apple, maaaring tumagal ng ilang higit pang mga character upang makita kung ano ang Naghahanap ako.

878
00:53:17,130 --> 00:53:20,420
Ito autocomplete ay hindi ang pakiramdam na ito ng kaugnayan.

879
00:53:20,420 --> 00:53:24,400
Lamang ito ng pagpunta sa sabihin, "Anumang bagay na tumutugma sa ako pagpunta upang ipakita."

880
00:53:24,400 --> 00:53:30,510
Sa halip na, Gusto ko sa paanuman isama ang ilang kaugnayan sa aking mga paghahanap.

881
00:53:30,510 --> 00:53:36,440
Kung pumunta ako sa paglipas dito upang Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Kung sinusubukan kong ipasok ang isang simbolo sa pahina ng Yahoo! Finance

883
00:53:42,100 --> 00:53:52,310
at sisimulan ko ang pag-type ng GOOG, mayroon akong ito magaling listahan ng mga bagay.

884
00:53:52,310 --> 00:53:57,100
Malinaw, mukhang Yahoo! Finance paggawa ng isang bagay mas matalino dito.

885
00:53:57,100 --> 00:53:59,790
Ang mga ito ay may ilang mga kaugnayan at sila ay mayroon ding karagdagang impormasyon

886
00:53:59,790 --> 00:54:01,430
tulad ng pangalan ng stock.

887
00:54:01,430 --> 00:54:05,850
Na ang isang bagay na hindi talaga ko maaaring may lamang ang aking stock listahan ng mga simbolo.

888
00:54:05,850 --> 00:54:09,520
Gusto ko ito at kaya ako pagpunta sa dalhin ito.

889
00:54:09,520 --> 00:54:11,790
Upang gawin na natin gawin ang ilang mga bagay.

890
00:54:11,790 --> 00:54:15,580
Sabihin unang buksan ang inspector sa pahinang ito

891
00:54:15,580 --> 00:54:18,100
dahil nakita namin na ang pahinang ito ay hindi i-reload sa lahat,

892
00:54:18,100 --> 00:54:21,960
kaya marahil ito gamit ang AJAX sa paanuman na naglo-load ng mga data nito.

893
00:54:21,960 --> 00:54:23,920
Maaari naming malaman kung ano ang data na ito sa paglo-load.

894
00:54:23,920 --> 00:54:28,390
Kung ako i-click ang sa Network tab na ito, ang mga ito na ang lahat ng mga kahilingan na simulan na fired.

895
00:54:28,390 --> 00:54:34,020
Ngayon kung type ko sa goo, maaari naming makita na Nakakuha ako ng bagong kahilingan ng HTTP.

896
00:54:34,020 --> 00:54:37,490
Marahil ito ay kung saan ang data na nagmumula.

897
00:54:37,490 --> 00:54:41,990
Bang sapat, kung tiningnan ko sa URL na ito, na kung saan ay isang bit na kakaiba na may pangalang,

898
00:54:41,990 --> 00:54:46,930
maaari naming makita na ito ay eksaktong kung saan ang Yahoo ay pagpapadala ng off nito ang data mula sa.

899
00:54:46,930 --> 00:54:53,400
>> Lumikha ako ng isang hiwalay na file na tinatawag na suggest.php na katulad na katulad sa espiritu sa lookup function na.

900
00:54:53,400 --> 00:54:57,730
Talaga Ito ay pagpunta sa gumawa ng isang query sa Yahoo URL, bumalik ilang mga data,

901
00:54:57,730 --> 00:54:59,750
at ipadala ito pabalik sa akin.

902
00:54:59,750 --> 00:55:02,570
Ngayon, sa halip na gamitin ito malaking, malaking listahan ng mga simbolo,

903
00:55:02,570 --> 00:55:05,280
Maaari ko bang gamitin ang Yahoo maganda ang mga bagay ng kaugnayan,

904
00:55:05,280 --> 00:55:08,150
at hindi ko upang i-download na napakalaking file ng JavaScript.

905
00:55:08,150 --> 00:55:12,040
Lamang ako pagpunta sa pull down ang aktwal na may-katuturang mga simbolo ng stock.

906
00:55:12,040 --> 00:55:13,960
Natin tumalon sa na.

907
00:55:13,960 --> 00:55:17,360
Kaya html, js. Humihingi kami ngayon sa quote4.

908
00:55:17,360 --> 00:55:22,120
Ngayon kami ay hindi na ginagamit na malaking listahan ng mga file sa JavaScript.

909
00:55:22,120 --> 00:55:24,430
Ngunit may isang maliit na uri ng mga problema sa disenyo dito.

910
00:55:24,430 --> 00:55:28,200
Namin ang sinabi na ang A sa AJAX ay asynchronous.

911
00:55:28,200 --> 00:55:31,000
Ano na ay nangangahulugan na kapag gumawa ako ng isang AJAX kahilingan,

912
00:55:31,000 --> 00:55:36,490
kaya dito mismo sa linya 8, ito ay kung saan ang aking AJAX kahilingan aktwal fired.

913
00:55:36,490 --> 00:55:40,370
Sabihin nating ngayon Mayroon akong ilang code dito na pagpunta sa gawin ang ilang mga bagay-bagay

914
00:55:40,370 --> 00:55:43,930
i alertuhan ang user o pagbabago ng isang bagay sa pahina.

915
00:55:43,930 --> 00:55:49,830
Ano ang hindi mangyari browser ay hindi na maghintay para sa kahilingang ito upang magpatuloy

916
00:55:49,830 --> 00:55:53,480
bago darating down at pagpindot sa linyang ito.

917
00:55:53,480 --> 00:55:55,900
Iyon ang asynchronous na bahagi.

918
00:55:55,900 --> 00:55:58,400
Ito ay ang hiling na ito at sabihin, "Tuwing mong tapusin,

919
00:55:58,400 --> 00:56:03,080
"Bumalik at tumawag na function na na sinabi ko sa mong tawagan sa loob ng tagumpay."

920
00:56:03,080 --> 00:56:07,300
Nangangahulugan iyon na hindi lamang namin ay maaaring i-download ang lahat ng mga stock muna.

921
00:56:07,300 --> 00:56:10,300
Kailangan namin upang gawin ang kahilingan at maghintay para sa isang bagay na bumalik.

922
00:56:10,300 --> 00:56:13,330
Nangangahulugan iyon na bago, maaari lamang namin sabihin Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Narito ang listahan ng mga bagay na gusto kong ka sa autocomplete sa."

924
00:56:15,580 --> 00:56:18,950
Maaari naming hindi na gawin na ito dahil hindi namin alam

925
00:56:18,950 --> 00:56:21,780
kung ano ang gusto namin sa aktwal na autocomplete sa.

926
00:56:21,780 --> 00:56:25,190
Sa kabutihang-palad, ang Bootstrap naisip ito dahil sa mga na smart guys banda roon,

927
00:56:25,190 --> 00:56:30,160
at sila aktwal na nagbigay sa amin ang isa pang paraan upang i-load ito Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Bago, ang halaga ng ari-arian pinagmulan na ito ay lamang ang malaking hanay ng mga bagay sa autocomplete sa.

929
00:56:35,630 --> 00:56:39,580
>> Ngayon ang pinagmulan ari-arian ay talagang isang function,

930
00:56:39,580 --> 00:56:44,580
at ang layunin ng function na ito ay upang malaman kung ano ang mga bagay sa autocomplete sa.

931
00:56:44,580 --> 00:56:48,730
Ang paraan na ito upang malaman na out ito ay pagpunta sa hilingin sa Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
kung ano ang pinakamahusay na bagay sa autocomplete ay.

933
00:56:51,750 --> 00:56:54,500
Upang gawin na ako pagpunta sa gumawa ng isang katulad na kahilingan AJAX.

934
00:56:54,500 --> 00:56:59,010
Ako humiling ng pahinang ito sa suggest.php.

935
00:56:59,010 --> 00:57:01,360
Gusto kong magpadala kahabaan ng simbolo pa rin.

936
00:57:01,360 --> 00:57:05,570
At ngayon ang aking tagumpay, ang Bootstrap dokumentasyon Sinabi sa akin

937
00:57:05,570 --> 00:57:09,130
na upang populate na listahan ng mga bagay,

938
00:57:09,130 --> 00:57:14,370
lahat ng kailangan kong gawin ay ipasa ang array na ito ngayon sa function na callback.

939
00:57:14,370 --> 00:57:15,660
Ngunit maghintay ng isang minuto.

940
00:57:15,660 --> 00:57:20,240
Kung ito ay dapat na isang array at AJAX ay pagpapadala ng ako pabalik teksto,

941
00:57:20,240 --> 00:57:22,720
kung paano ay na posible?

942
00:57:22,720 --> 00:57:27,910
Ito introduces isang bagong paraan ng pakikipagpalitan ng mga data na tinatawag JSON.

943
00:57:27,910 --> 00:57:33,000
Sa kasong ito, hindi namin lamang pagpapadala ng isang simpleng string ng teksto.

944
00:57:33,000 --> 00:57:37,670
Ngayon kami ay pagharap sa mga ito mas kumplikadong listahan ng mga simbolo ng stock.

945
00:57:37,670 --> 00:57:41,730
Mga stock symbol ay maaari ring isama ang mga bagay tulad ng pangalan ng kumpanya o ang kasalukuyang presyo.

946
00:57:41,730 --> 00:57:47,550
Gamit lamang ang isang malaking mahabang string na hindi format sa anumang predictable paraan

947
00:57:47,550 --> 00:57:51,970
ay hindi ang pinakamahusay na paraan upang makuha ang mga data mula sa server ng Yahoo sa akin

948
00:57:51,970 --> 00:57:54,540
sa isang paraan na madali kong maunawaan.

949
00:57:54,540 --> 00:58:01,280
JSON ay isang teknolohiya na tumatagal ng bentahe ng kung paano lumikha kami ng mga nag-uugnay array sa JavaScript.

950
00:58:01,280 --> 00:58:04,510
Ito hitsura ng maraming tulad ng JavaScript nag-uugnay array,

951
00:58:04,510 --> 00:58:06,600
at sa katunayan, ito ay dahil ito ay.

952
00:58:06,600 --> 00:58:09,710
JSON ay nakatayo para sa JavaScript Bagay pagtatanda.

953
00:58:09,710 --> 00:58:15,020
Ito ay isa lamang napagkasunduang format para sa paglilipat ng data papunta at pabalik.

954
00:58:15,020 --> 00:58:18,280
Narito ito JSON object o ito JSON nag-uugnay array

955
00:58:18,280 --> 00:58:21,010
ay pagpapadala sa akin ang ilang data tungkol sa isang kurso.

956
00:58:21,010 --> 00:58:25,110
>> Ang mga key ng array na ito ang mga bagay tulad ng kurso na may isang halaga ng cs50,

957
00:58:25,110 --> 00:58:29,140
at pababa dito maaari naming makita na maaari ba akong magkaroon ng isang halaga na ay isang array.

958
00:58:29,140 --> 00:58:32,730
Hindi ko upang gumawa ng mga bagay tulad parse out sa mga string at hanapin para sa mga kuwit

959
00:58:32,730 --> 00:58:35,330
at gawin ang mga nakatutuwang mga bagay tulad na.

960
00:58:35,330 --> 00:58:38,820
Dahil ito ay ipinahayag sa JSON format na ito,

961
00:58:38,820 --> 00:58:43,510
JavaScript at jQuery na mayroon ng mga function na i-convert ng isang string

962
00:58:43,510 --> 00:58:48,140
na kamukha ito JSON sa isang aktwal na JavaScript nag-uugnay array

963
00:58:48,140 --> 00:58:50,440
na maaari naming gawin.

964
00:58:50,440 --> 00:58:56,660
Paggawa na ay kasing simple ng nagsasabi na hindi na ang file na ito, suggest.php,

965
00:58:56,660 --> 00:58:59,040
pagpapadala ng ako pabalik lamang ng isang string ng teksto,

966
00:58:59,040 --> 00:59:01,950
ngunit alam ko ito ay pagpunta sa nagpapadala ako pabalik JSON.

967
00:59:01,950 --> 00:59:06,760
Na nangangahulugan na na JSON ay maaaring ma-convert sa isang JavaScript nag-uugnay array.

968
00:59:06,760 --> 00:59:10,830
At kaya jQuery, Gusto ko mo bang gawin iyon para sa akin.

969
00:59:10,830 --> 00:59:13,990
Nangangahulugan iyon na ang parameter ng tugon na ito dito,

970
00:59:13,990 --> 00:59:16,070
ito ay hindi na lamang ang string.

971
00:59:16,070 --> 00:59:19,860
Dahil kami Sinabi jQuery na dito ay ilang JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery na smart sapat na upang sabihin, "gusto mong JSON?"

973
00:59:22,950 --> 00:59:26,890
"Pupunta ako sa na-convert sa isang nag-uugnay array para sa iyo."

974
00:59:26,890 --> 00:59:32,100
Natin ang aktwal na kumuha ng hitsura sa tab na Mga Network sa sandaling mayroon kaming quote4.js.

975
00:59:32,100 --> 00:59:35,400
Babaguhin namin ito at i-reload ang pahina.

976
00:59:37,150 --> 00:59:41,250
Ngayon ako i-type muli sa isang.

977
00:59:41,250 --> 00:59:45,600
Ginawa ko ang isang kahilingan ng ilang sa suggest.php, ngunit ngayon tugon na ito,

978
00:59:45,600 --> 00:59:48,670
sa halip na ang string lamang, JSON.

979
00:59:48,670 --> 00:59:52,580
Kaya Mayroon akong isang bukas na kulot suhay na nagsasabi, "Ito ay isang nag-uugnay array."

980
00:59:52,580 --> 00:59:56,830
>> Ang unang at lamang na key ng nag-uugnay array na ito ay tinatawag na simbolo,

981
00:59:56,830 --> 01:00:00,240
at pagkatapos dito ay isang hanay ng lahat ng may-katuturang simbolo

982
01:00:00,240 --> 01:00:04,820
darating ngayon mula sa Yahoo! Finance, hindi mula sa listahan na parang higante.

983
01:00:06,110 --> 01:00:10,630
Iyon ay kung paano ko lang populate na ito autocomplete plugin

984
01:00:10,630 --> 01:00:14,280
may ilang mga data na hindi pagdating mula sa isang lokal na file na na paunang natukoy na

985
01:00:14,280 --> 01:00:17,490
ngunit mula sa iba pa.

986
01:00:17,490 --> 01:00:21,160
Ito lumiliko out na maaari naming aktwal na samantalahin ng isang teknolohiya na tinatawag na JSONP,

987
01:00:21,160 --> 01:00:27,420
o JSON sa padding, na maalis ang suggest.php mamamakyaw.

988
01:00:27,420 --> 01:00:34,010
Ngunit sa halip ng paggawa na, sabihin sa halip tumagal ng isang pagtingin sa kung paano ko mapapabuti ito ng mas maraming.

989
01:00:34,010 --> 01:00:36,040
Gusto ko talagang Typeahead Bootstrap. Talagang magaling.

990
01:00:36,040 --> 01:00:39,570
Ngunit kami ay nakakakuha ng mahusay na sa JavaScript at gusto naming uri ng gawin ito ating sarili,

991
01:00:39,570 --> 01:00:43,870
maaaring tumagal ng isang pagtingin sa kung ano ang plugin na ito ay maaaring paggawa.

992
01:00:43,870 --> 01:00:46,500
Hayaan ang mga ay hindi na gamitin na Typeahead bagay,

993
01:00:46,500 --> 01:00:50,550
at sabihin subukan upang gawin ang listahan ng mga iminungkahing mga stock ating sarili.

994
01:00:50,550 --> 01:00:53,790
Narito sa quote6.php namin ay pagpunta sa magsimula sa parehong paraan.

995
01:00:53,790 --> 01:00:58,050
Sa tuwing may isang bagay na uri, nais naming gumawa ng AJAX kahilingan.

996
01:00:58,050 --> 01:01:01,590
Ito ay katulad sa aming orihinal na CS50 Finance Instant na.

997
01:01:01,590 --> 01:01:05,020
Kaysa sa paggawa ng isang kahilingan sa quote.php,

998
01:01:05,020 --> 01:01:08,530
ginagawa namin ngayon ng isang kahilingan na parehong file tulad ng dati, ang suggest.php na ito,

999
01:01:08,530 --> 01:01:12,460
na lamang upang makuha ang mga data mula sa Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Muli, pa rin namin ang umaasa JSON, ngunit ngayon dahil Typeahead ay hindi ginagawa ito para sa amin,

1001
01:01:19,480 --> 01:01:24,850
kailangan din namin na magpadala ng kahabaan ng halaga na sa loob ng kasalukuyang text box.

1002
01:01:24,850 --> 01:01:28,120
Ngayon alam namin kung ano ang itatanong Yahoo! Finance para sa,

1003
01:01:28,120 --> 01:01:34,160
at kaya ngayon narito ang pag-andar na gusto naming upang maisagawa sa sandaling makumpleto ang kahilingan.

1004
01:01:34,160 --> 01:01:36,520
Hindi namin ang plugin upang gawin ang listahan para sa amin,

1005
01:01:36,520 --> 01:01:40,630
kaya narito kung saan aktwal na kami ay pagpunta sa bumuo ng isang listahan ng mga mungkahi.

1006
01:01:40,630 --> 01:01:44,850
Upang gawin iyon, mas gusto sa PHP concatenated namin mga malaking string ng HTML

1007
01:01:44,850 --> 01:01:48,170
pagkatapos ay naka-print na namin ang mga ito, maaari naming gawin ang parehong eksaktong bagay sa JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Una kami ay pagpunta sa magsimula ang string na ito na tinatawag na mga mungkahi,

1009
01:01:51,850 --> 01:01:54,590
at ang string na ito ay lamang maglaman ng ilang mga HTML.

1010
01:01:54,590 --> 01:01:58,320
Gusto namin ang mga ito sa isang listahan ng mga bagay, kaya kami ay pagpunta upang magsimula sa tag listahan na ito,

1011
01:01:58,320 --> 01:02:03,340
at ngayon kami ay pagpunta upang umulit sa lahat ng mga simbolo na ibinalik pabalik sa amin.

1012
01:02:03,340 --> 01:02:06,500
Tandaan, dahil kami sinabi datatype: 'json', ito ay hindi isang string.

1013
01:02:06,500 --> 01:02:09,500
Ito ay isang array para sa amin. Na talagang cool na.

1014
01:02:09,500 --> 01:02:13,790
Maaari lang namin sabihin, "gusto ko sa iyo upang isama ang isang listahan ng elemento."

1015
01:02:13,790 --> 01:02:16,000
Susubukan naming ilagay ang mga ito sa loob ng isang elemento ng bahagi ng na,

1016
01:02:16,000 --> 01:02:19,030
bibigyan namin ito sa isang klase ng mga mungkahi upang malaman namin kung ano ito ay,

1017
01:02:19,030 --> 01:02:23,880
at ngayon dito ay ang simbolo na nakuha namin mula sa Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Kapag lumikha kami ng isang elemento para sa bawat isa ng mga simbolo na nakuha namin pabalik,

1019
01:02:27,230 --> 01:02:30,100
gusto lang namin upang isara off ang listahan.

1020
01:02:30,100 --> 01:02:33,040
Kaya ngayon mga mungkahi kumakatawan ito maliit na HTML fragment

1021
01:02:33,040 --> 01:02:37,860
na kapag ilagay sa isang pahina ay ang listahan ng mga bagay na kaming naghahanap ng mga.

1022
01:02:37,860 --> 01:02:41,070
Ngayon ipaalam sa aktwal na ilagay sa pahina.

1023
01:02:41,070 --> 01:02:46,390
Upang gawin na aktwal ko na ng isa pang walang laman div at Ibinigay ko ito ng isang ID ng mga mungkahi.

1024
01:02:46,390 --> 01:02:52,520
Karamihan tulad namin itakda ang mga nilalaman ng div na ipakita ang presyo ng data ng stock,

1025
01:02:52,520 --> 01:02:58,600
namin ngayon lamang nais na itakda ang mga nilalaman ng div na ito sa anumang string na ito ay

1026
01:02:58,600 --> 01:03:00,290
na naglalaman ng mga simbolong ito.

1027
01:03:00,290 --> 01:03:07,650
Sa pamamagitan ng paggamit ng ang HTML pamamaraan, ang mga mungkahi ng variable, ang string na ito, ay isang string ng HTML.

1028
01:03:07,650 --> 01:03:13,490
Gusto kong mong gawin na HTML at ilagay ito sa loob ng div na tinatawag na mga mungkahi.

1029
01:03:13,490 --> 01:03:15,680
Namin ang ikinakabit ang isang bagay na ngayon sa DOM.

1030
01:03:15,680 --> 01:03:20,360
Nagdagdag kami ng ilang bagong elemento sa DOM na namin ngayon ipakita sa pahina.

1031
01:03:20,360 --> 01:03:22,540
Natin makita kung ano ito mukhang.

1032
01:03:22,540 --> 01:03:29,110
Kung-load namin sa sa quote6 at ngayon kami ay bumalik,

1033
01:03:29,110 --> 01:03:34,480
ngayon kapag nagsimula ako mag-type aapl, hindi na namin na Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
ngunit ngayon namin ay ang listahang ito na ginawa namin sa aming sarili.

1035
01:03:38,470 --> 01:03:43,230
Ito ay isang maliit na bit hindi maganda kaysa sa Typeahead Bootstrap, halimbawa,

1036
01:03:43,230 --> 01:03:45,580
ngunit-daan sa amin upang gawin ang isa sa iba pang mga bagay.

1037
01:03:45,580 --> 01:03:48,660
Kapag tayo ay naghahanap sa Bootstrap na plugin,

1038
01:03:48,660 --> 01:03:52,590
Nakita namin na kapag namin autocompleted, isa sa mga autocomplete halaga ay aapl.

1039
01:03:52,590 --> 01:03:54,820
Na hindi maaaring kapaki-pakinabang.

1040
01:03:54,820 --> 01:03:59,100
Bilang isang gumagamit, hindi agad ako maaaring makilala ang lahat ng mga stock symbol.

1041
01:03:59,100 --> 01:04:02,370
Ano ako marahil mas malamang na makilala ang aktwal na pangalan ng kumpanya.

1042
01:04:02,370 --> 01:04:05,310
Kaya hindi ito ay talagang kapaki-pakinabang na kung sa halip na sinasabi aapl

1043
01:04:05,310 --> 01:04:07,970
ito sinabi ng isang bagay tulad ng Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Dahil kami pinagsama ito ating sarili, maaari naming talagang madaling gawin na.

1045
01:04:12,240 --> 01:04:17,630
Natin buksan ang aming huling quote file dito, kaya quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Parehong bagay. Lang ako ng isa pang PHP file na bumalik sa amin higit pa sa simbolo.

1047
01:04:23,200 --> 01:04:25,550
Mayroon din bigyan kami ng pangalan ng kumpanya.

1048
01:04:25,550 --> 01:04:28,150
At kaya ginagawa namin ang parehong bagay. Kami ay ang paggawa ng isang AJAX kahilingan.

1049
01:04:28,150 --> 01:04:32,370
Kapag ang kahilingan ay nakumpleto, kami ay pagpunta upang maisagawa ang function na ito dito,

1050
01:04:32,370 --> 01:04:36,520
at ang function na ito ay upang bumuo ng isang malaking string ng mga elemento.

1051
01:04:36,520 --> 01:04:39,520
Ngunit ang pagkakaiba dito ay na ang halaga ng mga listahan ay hindi na lamang ang simbolo,

1052
01:04:39,520 --> 01:04:45,370
ito ngayon ang pangalan.

1053
01:04:45,370 --> 01:04:47,070
Kaya kami ay may isang maliit na problema.

1054
01:04:47,070 --> 01:04:51,590
Kapag ginagamit namin ang aming lookup, kailangan namin upang pumasa ito sa paanuman simbolo.

1055
01:04:51,590 --> 01:04:54,950
Hindi namin maaaring ipasa ng paghahanap ng isang bagay tulad ng Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Kailangan namin upang pumasa ito MSFT.

1057
01:04:57,900 --> 01:05:01,640
Kapag kami ay sumusulat HTML, mayroon kaming maraming ng magaling built-in na mga katangian.

1058
01:05:01,640 --> 01:05:05,440
Isang ay maaaring nauugnay sa isang href o isang klase.

1059
01:05:05,440 --> 01:05:08,230
Ngunit ano ang namin talagang kailangan ngayon ay para sa bawat isa sa mga link na ito

1060
01:05:08,230 --> 01:05:11,120
isang simbolo ng stock na nauugnay dito.

1061
01:05:11,120 --> 01:05:14,240
Walang built-in na HTML attribute para sa simbolo ng stock,

1062
01:05:14,240 --> 01:05:21,010
ngunit sa kabutihang-palad, HTML5 ay nagbibigay-daan sa amin upang lumikha ng aming sariling mga katangian sa anumang nais naming.

1063
01:05:21,010 --> 01:05:24,620
Sa pamamagitan ng sinasabi ng data simbolo, ko na ipinakilala ng isang bagong attribute

1064
01:05:24,620 --> 01:05:29,350
na ang pangalan ko lang ginawa up, at ito ay okay dahil prefaced ko ito gamit ang data na ito.

1065
01:05:29,350 --> 01:05:34,270
Kami ay pagpunta upang mag-imbak sa loob ng doon ang simbolo mula sa stock ngayon.

1066
01:05:34,270 --> 01:05:39,590
Ano nangangahulugan iyon na kahit na namin ang pagpapakita ng halaga ng pangalan ng kumpanya

1067
01:05:39,590 --> 01:05:43,380
sa loob ng aming mga autocomplete, alala pa namin ang simbolo

1068
01:05:43,380 --> 01:05:47,110
na nauugnay sa bawat kumpanya.

1069
01:05:47,110 --> 01:05:50,350
Ang paraan na ginagawa namin na sa loob ng ito elemento mismo.

1070
01:05:50,350 --> 01:05:52,930
Sa gayon ay nangangahulugan na kailangan namin upang magsagawa ng isa pang pagbabago.

1071
01:05:52,930 --> 01:05:57,090
Kapag namin i-click ito ngayon, kailangan namin upang aktwal na kalamangan ng katangian ng simbolo

1072
01:05:57,090 --> 01:06:00,220
sa halip na halaga nito.

1073
01:06:00,220 --> 01:06:05,010
Kung tayo back up, namin maglakip ng isang kaganapan handler sa mga mungkahi.

1074
01:06:05,010 --> 01:06:09,280
Tuwing isa sa mga mungkahing ito ay nag-click sa ngayon, gusto kong gawin ang isang bagay.

1075
01:06:09,280 --> 01:06:13,160
Kung ano ang nais kong gawin ay baguhin ang halaga ng input box na iyon.

1076
01:06:13,160 --> 01:06:16,100
Ngayon gusto ko upang i-set ang parehong function na Val.

1077
01:06:16,100 --> 01:06:21,060
>> Kaya nang walang anumang argumento ito Val function na nagbabalik sa iyo kung ano ang na sa kahon ng teksto,

1078
01:06:21,060 --> 01:06:27,070
ngunit kung ikaw ay bigyan ito ng isang string, na string at ilagay ang mga ito sa kahon ng teksto.

1079
01:06:27,070 --> 01:06:28,980
Ako pagpili sa text box nito sa parehong paraan.

1080
01:06:28,980 --> 01:06:31,230
Pangalan ng simbolo loob ng form na-quote.

1081
01:06:31,230 --> 01:06:37,540
Ngayon ako pagpapadala nito ang halaga ng attribute data simbolo.

1082
01:06:37,540 --> 01:06:41,560
Ito bagay dito ay bago, ito $ ().

1083
01:06:41,560 --> 01:06:46,850
Ano ang tumutukoy sa elemento na click.

1084
01:06:46,850 --> 01:06:50,880
Maaari naming makita dito na hindi namin naka-attach ang isang pag-click ng kaganapan

1085
01:06:50,880 --> 01:06:54,690
sa bawat elemento na may isang klase ng mungkahi indibidwal.

1086
01:06:54,690 --> 01:06:57,140
Sa halip, kami ay papalapit na ito ng kaunti naiiba.

1087
01:06:57,140 --> 01:07:01,700
Sa halip namin sinasabi na kailanman ang anumang bagay sa loob ng div mga mungkahi na ito,

1088
01:07:01,700 --> 01:07:04,080
kung saan Tandaan lamang ang lalagyan para sa listahan,

1089
01:07:04,080 --> 01:07:10,150
kung ang isang bagay sa loob ng div na ito ay nag-click at ito ay isang klase ng mungkahi,

1090
01:07:10,150 --> 01:07:13,000
Gusto ko ang kaganapan na ito sa sunog.

1091
01:07:13,000 --> 01:07:17,490
Talaga kung ano ang ibig sabihin nito ay maaari naming gawin ay maaari naming muling gamitin ang parehong handler ng kaganapan

1092
01:07:17,490 --> 01:07:20,000
para sa lahat ng mga bagay sa listahan.

1093
01:07:20,000 --> 01:07:22,080
Kaya hindi namin isang kaganapan handler para sa unang elemento

1094
01:07:22,080 --> 01:07:24,550
at ng ibang handler ng kaganapan para sa pangalawang elemento.

1095
01:07:24,550 --> 01:07:29,880
Maaari namin sa halip sabihin, "gusto ko ang parehong handler ng kaganapan upang ilapat sa lahat ng bagay sa aking listahan."

1096
01:07:29,880 --> 01:07:34,420
Ngunit kailangan namin sa sa paanuman na malaman kung aling mga elemento ay nag-click.

1097
01:07:34,420 --> 01:07:38,450
Ito "ito" keyword ay kumakatawan lamang na.

1098
01:07:38,450 --> 01:07:42,360
Ito ay ang mga bagay na na-click ng user.

1099
01:07:42,360 --> 01:07:47,680
Kung ko lang click ang 3rd link, ito ay kumakatawan sa elemento ng link na 3rd,

1100
01:07:47,680 --> 01:07:51,670
na nangangahulugan na ako makakakuha nito attribute, data simbolo,

1101
01:07:51,670 --> 01:07:57,760
kung saan alam namin ay naglalaman ng simbolo na nauugnay sa mga kumpanya na click ko lang.

1102
01:07:57,760 --> 01:08:04,550
Kung tumalon namin pabalik sa aming pahina ng pananalapi,

1103
01:08:04,550 --> 01:08:08,580
maaari naming makita na ngayon na sa sandaling sisimulan ko ang pag-type ng isang bagay tulad ng msft,

1104
01:08:08,580 --> 01:08:11,220
kami ay hindi na pagkuha lamang ang mga simbolo ng stock,

1105
01:08:11,220 --> 01:08:13,720
ngayon kami ay pagkuha ng aktwal na mga kumpanya.

1106
01:08:13,720 --> 01:08:20,410
Ngunit kapag ako mag-click sa isa sa mga kumpanyang ito,

1107
01:08:20,410 --> 01:08:25,180
maaari naming makita na aktwal na namin populating nang text box ay hindi kasama ang pangalan ng kumpanya

1108
01:08:25,180 --> 01:08:29,850
ngunit may anumang ay naka-imbak sa loob ng mga mga katangian ng data.

1109
01:08:29,850 --> 01:08:32,880
At kaya kung ako aktwal na siyasatin ang isa sa mga sangkap na ito sa pamamagitan ng pag-right click ito

1110
01:08:32,880 --> 01:08:36,200
at ng pag-click sa Siyasatin Element, maaari naming aktwal makita kung ano ito mukhang.

1111
01:08:36,200 --> 01:08:40,290
>> Tandaan na ito ay isang bagay na nilikha namin sa loob na para sa loop

1112
01:08:40,290 --> 01:08:42,649
kapag kami ay pagbuo na string ng HTML.

1113
01:08:42,649 --> 01:08:47,870
Maaari naming makita dito na ang data na ito simbolo ay ang halaga ng MSFT, kung saan ay mahusay.

1114
01:08:47,870 --> 01:08:49,189
Iyon ay kung ano ang aming inaasahan.

1115
01:08:49,189 --> 01:08:53,170
Na simbolo at na kung paano namin nakuha ang halaga na kailangan namin upang gamitin ang

1116
01:08:53,170 --> 01:08:56,140
sa loob ng text box na ito.

1117
01:08:56,140 --> 01:08:58,850
Sapat na para sa form na quote dahil na uri ng pagbubutas.

1118
01:08:58,850 --> 01:09:02,990
Sabihin lang gumawa ng ilang mabilis na mga pagpapahusay sa aming pahina ng portfolio.

1119
01:09:02,990 --> 01:09:08,109
Kung ginamit mo ang CS50 Finance para sa isang habang at simulan mo ang pagbili at pagbenta ng maraming ng mga stock,

1120
01:09:08,109 --> 01:09:11,300
kalaunan ang talahanayan na ito ay upang makakuha ng medyo malaki,

1121
01:09:11,300 --> 01:09:13,850
at ikaw ay pagpunta sa gusto ng stock ticker, siyempre.

1122
01:09:13,850 --> 01:09:20,350
Kapag ang talahanayan ay talagang, talagang malaking, maaaring maging kapaki-pakinabang para sa mga gumagamit upang subukan upang maghanap sa.

1123
01:09:20,350 --> 01:09:23,290
Inside ng search box na kung sisimulan ko ang pag-type ng isang bagay tulad ng Disney

1124
01:09:23,290 --> 01:09:26,359
at naghahanap para sa aking Mickey Mouse stock, maaari naming makita na talahanayan ang na ngayon ang

1125
01:09:26,359 --> 01:09:28,189
batay sa kung ano-type ko lang.

1126
01:09:28,189 --> 01:09:31,640
Ang pagpapaandar na ito ay mukhang sobrang kumplikado, ngunit ito ay talagang, talagang madali

1127
01:09:31,640 --> 01:09:33,859
may jQuery at JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Ito portfolio.php file kabilang ang JavaScript file na tinatawag na portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Natin kumuha ng isang pagtingin sa na.

1130
01:09:41,130 --> 01:09:44,890
Kaya html, js, portfolio.

1131
01:09:44,890 --> 01:09:49,210
Narito ang kung saan ginagawa namin na naghahanap sa mesa.

1132
01:09:49,210 --> 01:09:52,750
Ang unang bagay na kailangan kong gawin ay maglakip ng isang kaganapan handler na text box

1133
01:09:52,750 --> 01:09:55,760
dahil alam namin na gusto namin ang aming filter ng function na sa sunog

1134
01:09:55,760 --> 01:09:59,800
tuwing ang user pagpindot sa isang bagay dahil hindi namin magkaroon ng panahon para sa mga pindutan ng Paghahanap.

1135
01:09:59,800 --> 01:10:03,000
Ang unang bagay na kailangan naming gawin ay malaman kung ano ang user ay naghahanap para sa,

1136
01:10:03,000 --> 01:10:04,780
tulad ng ginawa namin bago.

1137
01:10:04,780 --> 01:10:11,320
Ang keyword na ito ay tumutukoy sa kasalukuyang elemento ang user ay nakikipag-ugnayan sa.

1138
01:10:11,320 --> 01:10:14,070
>> Dahil ang gumagamit ay nakikipag-ugnayan sa box para sa paghahanap,

1139
01:10:14,070 --> 01:10:17,020
$ Kumakatawan sa search box na ito,

1140
01:10:17,020 --> 01:10:21,820
kaya nagbibigay ng this.val sa amin kung ano ang sa loob ng search box na gumagamit ay kasalukuyang pag-type.

1141
01:10:22,810 --> 01:10:27,320
Kaya, ngayon kung ano ang gusto naming gawin ay gusto naming upang umulit sa lahat ng mga hilera

1142
01:10:27,320 --> 01:10:29,240
sa loob ng aming mga talahanayan.

1143
01:10:29,240 --> 01:10:35,630
Upang piliin ang lahat ng mga hilera sa aming mga talahanayan, ibinigay ko na talahanayan isang ID ng portfolio ng talahanayan,

1144
01:10:35,630 --> 01:10:39,060
at ang bawat hanay ay kinakatawan sa pamamagitan ng isang elemento ng tr,

1145
01:10:39,060 --> 01:10:42,080
kaya't ang tagapili na ito ay bumalik sa akin isang malaking array

1146
01:10:42,080 --> 01:10:44,370
ng lahat ng mga hilera sa aking mga talahanayan.

1147
01:10:44,370 --> 01:10:47,010
Ngayon gusto ko upang umulit na array.

1148
01:10:47,010 --> 01:10:52,390
Maaari ko sa iyo ng loop, ngunit jQuery sa aktwal na nagbibigay sa amin ang magaling na function na tinatawag na "bawat."

1149
01:10:52,390 --> 01:10:55,220
Ano ang bawat ginagawa bawat tumatagal ng isang argument,

1150
01:10:55,220 --> 01:10:57,090
at ang argument na ay isang function.

1151
01:10:57,090 --> 01:11:02,760
Ano ito gawin ito mag-aplay na function na sa bawat elemento sa loob ng listahang ito.

1152
01:11:02,760 --> 01:11:05,550
Ang function na ito ay magtatagal ng isang argument na e,

1153
01:11:05,550 --> 01:11:10,090
at kapag ang function na ito ay pinaandar, e ito ay pagpunta sa pinalitan ng ang unang hilera,

1154
01:11:10,090 --> 01:11:12,070
pagkatapos ang pangalawang hilera, at pagkatapos ay sa ikatlong hilera.

1155
01:11:12,070 --> 01:11:15,150
Sa pamamagitan ng ang paraan na ito, ito ay ang parehong bagay bilang ng pagpapatakbo ng isang para sa loop

1156
01:11:15,150 --> 01:11:21,360
at pagkatapos ay pag-uunawa sa kasalukuyang elemento na batay sa index sa loob ng iyong para sa loop.

1157
01:11:21,360 --> 01:11:24,750
Sa bawat pag-ulit, para sa bawat isa sa mga elemento na ito sa table,

1158
01:11:24,750 --> 01:11:30,560
Gusto kong suriin kung ang teksto ng elemento - ang teksto ng cell sa loob ng hilera -

1159
01:11:30,560 --> 01:11:33,130
tumutugma sa kung ano ako naghahanap.

1160
01:11:33,130 --> 01:11:36,390
Ito malaki mahabang string ng mga utos ay kung paano maaari kong gawin na.

1161
01:11:36,390 --> 01:11:40,900
Una, muli, ito ngayon ay tumutukoy sa - dahil ito sa loob ng isang bagong function na -

1162
01:11:40,900 --> 01:11:45,020
ngayon ito ay ang kasalukuyang hilera sa talahanayan.

1163
01:11:45,020 --> 01:11:47,340
Gusto kong gawin ang kasalukuyang hilera sa talahanayan,

1164
01:11:47,340 --> 01:11:49,950
at gusto ko upang makuha ang lahat ng kanyang mga anak.

1165
01:11:49,950 --> 01:11:51,940
Tandaan, ang DOM ay isang hierarchical puno,

1166
01:11:51,940 --> 01:11:54,200
na nangangahulugan na may isang bilang ng mga bata ang mga elemento.

1167
01:11:54,200 --> 01:12:00,180
>> Ito function na bata ay bumalik sa akin likod ng isang hanay ng lahat ng mga elemento

1168
01:12:00,180 --> 01:12:03,240
na ang mga anak ng, sa kasong ito, isang hilera sa talahanayan.

1169
01:12:03,240 --> 01:12:07,150
Ito lamang ang lamang ang mga cell sa loob ng hilera.

1170
01:12:07,150 --> 01:12:09,230
Gusto ko lang upang maghanap sa ang unang cell.

1171
01:12:09,230 --> 01:12:13,090
Ito. Unang function na sinasabi ninyo sa akin ang unang elemento sa array na.

1172
01:12:13,090 --> 01:12:17,070
Pagkatapos teksto ng function na nagsasabing makakuha sa akin kung ano mismo ang loob ng cell na

1173
01:12:17,070 --> 01:12:19,530
dahil gusto ko upang maghanap sa na teksto.

1174
01:12:19,530 --> 01:12:21,040
Sa wakas, sabihin-convert ito sa lowercase,

1175
01:12:21,040 --> 01:12:23,940
upang maaari naming gawin ang mga text case insensitive mga query.

1176
01:12:23,940 --> 01:12:29,990
Panghuli, nais namin upang makita kung na string sa loob ng isang talahanayan na naglalaman ng string na kami ay naghahanap para sa.

1177
01:12:29,990 --> 01:12:32,980
Ginagawa lang na Ang indexOf function sa JavaScript.

1178
01:12:32,980 --> 01:12:37,060
Sinasabi sa atin man o hindi ang string na ito ay naglalaman ng isa pang string.

1179
01:12:37,060 --> 01:12:40,150
Kung ito ay totoo na cell ay naglalaman ng kung ano ako naghahanap para sa,

1180
01:12:40,150 --> 01:12:42,140
Gusto kong upang matiyak na ipinapakita.

1181
01:12:42,140 --> 01:12:45,330
Ang ipakita ang paraan ng sabihing, "Ipakita ang elemento."

1182
01:12:45,330 --> 01:12:50,350
Kung hindi ito ang kaso, pagkatapos ay nangangahulugan na ang anumang ako naghahanap para sa ay hindi na nilalaman

1183
01:12:50,350 --> 01:12:53,550
sa loob ng hilera, at sa gayon gusto ko upang itago mula sa user.

1184
01:12:53,550 --> 01:12:59,240
Na Nakakamit na magaling filter ng epekto kung saan hindi na nakikita namin ang buong table.

1185
01:12:59,240 --> 01:13:01,480
Kung ikaw ay interesado sa kung paano ito ticker pati na rin,

1186
01:13:01,480 --> 01:13:04,180
post kami ng online ang pinagmulan. Ngunit talagang simple.

1187
01:13:04,180 --> 01:13:09,860
JQuery ay may kahanga-hangang mga pamamaraan para sa mga animation at pagmamanipula ng CSS mga katangian.

1188
01:13:09,860 --> 01:13:11,020
Kaya, na ito para sa akin.

1189
01:13:11,020 --> 01:13:15,560
>> Ano pagkatapos ay namamalagi magpatuloy? Tulad ng makikita mo sa loob ng ilang araw, ang panghuling proyekto panukala ay dahil.

1190
01:13:15,560 --> 01:13:17,730
Ang huling panukala proyekto ay hihilingin sa iyo ng ilang mga katanungan,

1191
01:13:17,730 --> 01:13:19,420
ngunit kasama ng mga ito ay tatlong milestones -

1192
01:13:19,420 --> 01:13:22,840
isa ng "maganda" milestone, isa ng mas mahusay na milestone, at isa isang pinakamahusay na.

1193
01:13:22,840 --> 01:13:25,870
Ang ideya sa pagiging talagang upang matulungan kang guys itakda ang iyong mga inaasahan

1194
01:13:25,870 --> 01:13:29,160
kaya na Nagnais ng pinakamababang ikaw ay masaya sa output ng iyong huling proyekto

1195
01:13:29,160 --> 01:13:32,060
at ito ay "maganda" sa ngayon habang ikaw ay nag-aalala.

1196
01:13:32,060 --> 01:13:34,540
Ngunit sa interes ng pagkuha mong maabot lamang ng kaunti sa isang bagay mas mahusay na

1197
01:13:34,540 --> 01:13:37,680
o isang bagay na pinakamahusay na, makikita rin naming ayusin itulak mo papunta sa na pati na rin.

1198
01:13:37,680 --> 01:13:40,660
Ang CS50 Hack-a-Thon, samantala, ay sa loob ng ilang linggo.

1199
01:13:40,660 --> 01:13:44,340
Karaniwan, gawin namin ito sa isang batayan ng batayan ng lottery dahil sa interes,

1200
01:13:44,340 --> 01:13:47,680
ngunit logro ay isasaalang-alang namin ng ilang daang sa amin sa shuttle bus mula sa Harvard Square

1201
01:13:47,680 --> 01:13:51,540
pababa sa Kendall Square kung saan ang Microsoft ay may magandang pasilidad aptly tinatawag na "nerd" -

1202
01:13:51,540 --> 01:13:53,830
ang New England Research at Development Center.

1203
01:13:53,830 --> 01:13:56,380
Namin doon sa paligid ng 8 pm Magkakaroon kami ng ilang pagkain.

1204
01:13:56,380 --> 01:13:58,160
Sa paligid ng 1 a.m. kami ng ilang higit pang mga pagkain.

1205
01:13:58,160 --> 01:14:02,150
Ng 5 am kung hindi ka pa rin gising magpapadala kami magtungo sa IHOP o dadalhin ka pabalik sa campus.

1206
01:14:02,150 --> 01:14:04,380
Ang layunin ay upang sumisid sa panghuling proyekto

1207
01:14:04,380 --> 01:14:06,190
sa tabi ng mga kaklase at kawani.

1208
01:14:06,190 --> 01:14:08,280
Pagkatapos ng ilang araw mamaya ang CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
na talaga nilalayong maging isang pagkakataon para sa iyo guys upang ipakita ang iyong trabaho

1210
01:14:10,990 --> 01:14:12,700
at kabutihan para sa semestre

1211
01:14:12,700 --> 01:14:15,610
habang hudhod balikat sa bawat isa at pagkuha ng ideya ng kung ano ang lahat ginawa.

1212
01:14:15,610 --> 01:14:17,850
Gamit na sinabi, maraming salamat sa Tommy at Joseph,

1213
01:14:17,850 --> 01:14:19,960
at kami ay nakikita mo sa Lunes.

1214
01:14:19,960 --> 01:14:24,070
 [Palakpakan]