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

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Universiteti i Harvardit]

3
00:00:05,160 --> 00:00:07,020
[Kjo është CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Kjo është CS50. Ky është fundi i javës 9. Shumë falemnderit.

5
00:00:13,340 --> 00:00:15,310
Në fund. Java 9. I got it.

6
00:00:15,310 --> 00:00:18,590
Sot ne vazhdojmë bisedën tonë në lidhje me programimin e web

7
00:00:18,590 --> 00:00:21,660
me një sy drejt e projektit përfundimtar, jo për shkak se ju duhet të bëni diçka të web-based

8
00:00:21,660 --> 00:00:25,610
për projekte finale, por për shkak se as për projekte finale ose pas CS50

9
00:00:25,610 --> 00:00:29,000
kjo është sigurisht drejtimi në të cilën software moderne po ndodh.

10
00:00:29,000 --> 00:00:31,770
Dhe ende nuk është në fakt një gjë e lehtë.

11
00:00:31,770 --> 00:00:35,040
Në fakt, një nga gjërat më të vështira për të bërë është aspekti i dizajnit.

12
00:00:35,040 --> 00:00:38,600
>> Për shembull, me dashje ne do të thotë në të vërtetë marrjen e ndërfaqen e përdoruesit

13
00:00:38,600 --> 00:00:40,420
ose përvojë përdorues të drejtë.

14
00:00:40,420 --> 00:00:43,200
Unë guxoj të them - dhe ne e dimë nga një sërë problemeve të kohëve të fundit

15
00:00:43,200 --> 00:00:45,960
kur një pakice prej jush transmetuar dhembje në bark tuaj në lidhje me disa pjesë e software

16
00:00:45,960 --> 00:00:49,000
ose hardware që ju zemëron, qoftë në kampus ose off -

17
00:00:49,000 --> 00:00:51,930
ka një shumë vende atje, ka një shumë të pajisjeve atje,

18
00:00:51,930 --> 00:00:53,900
se lloji i sucks.

19
00:00:53,900 --> 00:00:58,730
Por realiteti është se duke bërë gjëra që janë të lehta për t'u përdorur ende janë megjithatë të fuqishme

20
00:00:58,730 --> 00:01:00,550
është një sfidë shumë e vështirë.

21
00:01:00,550 --> 00:01:03,680
Pra, për sot e pyeta Jozefi dhe Tommy bashkohet me mua për të deri këtu

22
00:01:03,680 --> 00:01:06,680
kështu që ne mund të kemi një bisedë, si për dizajn

23
00:01:06,680 --> 00:01:09,090
dhe çfarë lloje të proceseve të mendimit duhet të fillojë duke kaluar nëpër kokën tuaj

24
00:01:09,090 --> 00:01:12,040
kur ju design projektet tuaja përfundimtare, përpjekjet tuaja për të ardhmen.

25
00:01:12,040 --> 00:01:15,040
Dhe pastaj me ndihmën e Tommy ne do të shikojmë disa nga detajet e zbatimit.

26
00:01:15,040 --> 00:01:18,440
Si mund të ketë disa vizion në letër apo në mendjen tuaj

27
00:01:18,440 --> 00:01:20,760
që atëherë ju mund të ekzekutojë programatikisht

28
00:01:20,760 --> 00:01:24,030
duke përdorur disa prej teknologjive dhe teknikave ne kemi filluar vetëm duke folur rreth,

29
00:01:24,030 --> 00:01:29,080
dmth JavaScript dhe diçka edhe më të reja, domethënë AJAX, JavaScript asinkron.

30
00:01:29,080 --> 00:01:32,950
Kjo ju lejon të krijoni të gjitha më dinamik e një ndërfaqe të përdoruesit të

31
00:01:32,950 --> 00:01:35,780
nga ngarkuar më shumë të dhëna dhe më shumë në mënyrë progresive nga një server.

32
00:01:35,780 --> 00:01:38,560
Pra, ne do të shohim disa nga ato copra, si edhe sot.

33
00:01:38,560 --> 00:01:41,800
Si një mënjanë, në qoftë se jeni të interesuar në përqëndruar në shkenca kompjuterike

34
00:01:41,800 --> 00:01:45,010
ose minoring në shkenca kompjuterike, e dinë se kjo e premte në mesditë

35
00:01:45,010 --> 00:01:48,750
Maxwell në Dworkin 221 nuk do të jetë një ngjarje pica

36
00:01:48,750 --> 00:01:50,780
ku ju mund të mësoni pak më shumë në lidhje me shkenca kompjuterike.

37
00:01:50,780 --> 00:01:54,860
Në rrugën tuaj nga dera sot ju do të jetë në gjendje të marr një udhëzues jozyrtare të SHC në Harvard.

38
00:01:54,860 --> 00:01:57,290
Ne do të vënë atë në kanaçe plehra jashtë në lartësi bel

39
00:01:57,290 --> 00:01:59,750
kështu që nëse ju dëshironi për të rrëmbyer këtë dhe të mësojnë pak më shumë rreth CS,

40
00:01:59,750 --> 00:02:02,480
që do të jetë atje për ju, ashtu siç ishte në javën 0.

41
00:02:02,480 --> 00:02:06,500
Gjithashtu nëse ju do të donte të bashkohet me ne për drekë CS50 këtë të premte në 01:15,

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

43
00:02:09,800 --> 00:02:13,260
Pa zhurmë më tej, unë jap mësim shokët Joseph Ong.

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

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

46
00:02:20,770 --> 00:02:24,780
Hera e parë që kam mësuar në lidhje me dizajnin ishte në një klasë të quajtur CS179 këtu.

47
00:02:24,780 --> 00:02:28,040
>> Profesori në kohën na tha historinë për një tjetër profesor

48
00:02:28,040 --> 00:02:31,640
i cili kishte shkuar në një hotel dhe të përdorura në faucets.

49
00:02:31,640 --> 00:02:35,630
Dikush mund të më thoni se çfarë 2 pullat në të majtë dhe të djathtë të bëni?

50
00:02:35,630 --> 00:02:39,080
[Student] Nxehtë dhe të ftohtë. Hot >> dhe të ftohtë. Mirë.

51
00:02:39,080 --> 00:02:41,430
Çfarë ju normalisht presin, apo jo?

52
00:02:41,430 --> 00:02:46,960
Ky profesor pas përdorimit rakord dëshiron të marrë një dush, dhe ai vazhdon për të përdorur këtë.

53
00:02:46,960 --> 00:02:51,310
Ai mendon të majtë dhe të djathtë palët janë për të nxehtë dhe të ftohtë, e drejtë?

54
00:02:51,310 --> 00:02:55,470
Por dikush mund të më tregoni se çfarë të bëjë në fakt këto?

55
00:02:55,470 --> 00:02:58,060
Çdo duart?

56
00:02:58,060 --> 00:03:01,740
[Përgjigja e padëgjueshme Studenti] >> Një sugjerim është?

57
00:03:01,740 --> 00:03:05,860
[Përgjigja e padëgjueshme Studenti] Temperatura >>?

58
00:03:05,860 --> 00:03:10,460
Kështu njëri prej tyre kontrollon temperaturën dhe kontrollet e tjera? >> [Student] presionin e ujit.

59
00:03:10,460 --> 00:03:12,350
Presioni i ujit. Mirë.

60
00:03:12,350 --> 00:03:15,100
Ky profesor ecën në këtë dhe, duke menduar se ata janë të nxehtë dhe të ftohtë kontrollin,

61
00:03:15,100 --> 00:03:21,470
kthen një të drejtë, të cilën ai mendon se është për të nxehtë, të gjithë rrugën deri

62
00:03:21,470 --> 00:03:23,560
sepse ai dëshiron të marrë një dush të ngrohtë.

63
00:03:23,560 --> 00:03:28,100
E pra, këto nuk përputhen me të vërtetë lart, kështu që ai merr këtë përvojë jo shumë të fun

64
00:03:28,100 --> 00:03:31,110
për të qenë në një dush të ftohtë, dhe ne të gjithë e dimë se çfarë ndjehet si.

65
00:03:31,110 --> 00:03:33,620
Ky është një shembull i një krisje të projektimit.

66
00:03:33,620 --> 00:03:37,040
Çfarë dua të them me këtë është shpresa e tij nga rakord

67
00:03:37,040 --> 00:03:39,420
nuk përputhen me atë që doli nga dush,

68
00:03:39,420 --> 00:03:41,780
që është lloj i pafat për të.

69
00:03:41,780 --> 00:03:44,990
Pra, ky është një shembull i një krisje të projektimit që ndodh në jetën reale.

70
00:03:44,990 --> 00:03:48,020
Por ne shohim të gjitha llojet e tjera si ato.

71
00:03:48,020 --> 00:03:50,390
Ne nuk jemi ndoshta tifozët e sistemit MBTA.

72
00:03:50,390 --> 00:03:55,560
Ky është një sistem metroje në fakt në Londër, i cili thotë: "Ky buton nuk është në përdorim."

73
00:03:55,560 --> 00:04:00,220
Pse është ajo edhe në atje? Pse nuk kemi edhe kujdes?

74
00:04:00,220 --> 00:04:02,810
Kur unë isha një fëmijë, duke qenë një teknologjisë tru në shtëpi,

75
00:04:02,810 --> 00:04:05,050
kur kompjuteri do të rrëzimit, nëna ime do të vijë tek unë,

76
00:04:05,050 --> 00:04:07,060
treguar mua këtë ekran dhe duke i kërkuar se çfarë ka ndodhur.

77
00:04:07,060 --> 00:04:09,210
>> Edhe unë nuk e di se çfarë do të thotë kjo.

78
00:04:11,890 --> 00:04:14,700
[Qeshur] Çfarë?

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

80
00:04:18,720 --> 00:04:23,050
Ndonjëherë ne ndjehemi si zhvilluesit e programeve janë vetëm trolling na.

81
00:04:23,050 --> 00:04:28,460
Si përdorues jemi si, "Çfarë po ndodh? Dikush na tregoni."

82
00:04:28,460 --> 00:04:32,140
Kjo gjitha vjen poshtë për një çështje të projektimit.

83
00:04:32,140 --> 00:04:34,650
Projektimit, si ne mund të shohim, nuk është thjesht në lidhje me estetikë,

84
00:04:34,650 --> 00:04:37,230
kjo nuk është se si gjërat duken.

85
00:04:37,230 --> 00:04:41,720
Ne shohim këtu se kjo pak pop-up gjatë këtu në fakt duket shumë e bukur.

86
00:04:41,720 --> 00:04:45,290
Ajo ka një hije rënie në sfond, ajo ka radiuses kufitare në vazhdim e sipër.

87
00:04:45,290 --> 00:04:47,550
Kjo është lloj i bukur.

88
00:04:47,550 --> 00:04:51,480
Kjo nuk është me të vërtetë mirë të dizajnuara për shkak se ajo nuk është shumë përdorues miqësore.

89
00:04:51,480 --> 00:04:54,920
Se pak pop-up që vjen deri nuk ka të vërtetë të më jepni ndonjë informacion

90
00:04:54,920 --> 00:04:58,450
për atë që po ndodh, kjo nuk thoni asgjë si përdorues

91
00:04:58,450 --> 00:05:01,400
se si të shërohet nga ajo gabim.

92
00:05:01,400 --> 00:05:05,190
Ne duam të mendojmë për gjëra që dizajni nuk është.

93
00:05:05,190 --> 00:05:06,670
Së pari, nuk është estetikë.

94
00:05:06,670 --> 00:05:10,800
Kjo nuk është edhe mbushje app tuaj me ton të funksionalitetit të panevojshme.

95
00:05:10,800 --> 00:05:14,890
Nëse ju jeni një restorant Thai, ju ndoshta nuk dëshironi të jetë një dentisti në të njëjtën kohë.

96
00:05:14,890 --> 00:05:17,720
Pyetjet dhe me Facebook, jo se shumë njerëz e përdorën atë

97
00:05:17,720 --> 00:05:21,130
dhe kjo nuk ishte me të vërtetë në thelbin e asaj që ata ishin duke ndërtuar.

98
00:05:21,130 --> 00:05:24,200
Dhe kështu është mirë të mendoni se nuk ka të bëjë aq shumë sasinë e gjërave

99
00:05:24,200 --> 00:05:26,390
se ju jeni vënë në aplikimin tuaj, por cilësinë

100
00:05:26,390 --> 00:05:28,910
dhe se si ju jeni duke bërë atë user experience më të mirë

101
00:05:28,910 --> 00:05:32,540
me të vërtetë përmirësuar mbi atë që ju tashmë e keni.

102
00:05:32,540 --> 00:05:37,040
>> Në pak fjalë, dizajn na tregon se çfarë ne duhet të ndërtojmë.

103
00:05:37,040 --> 00:05:41,950
Për shembull, në qoftë se ne jemi duke ndërtuar diçka që na le kërkoni gjërat,

104
00:05:41,950 --> 00:05:45,970
si Google, për shembull, duhet të bëjmë gjërat në një mënyrë të

105
00:05:45,970 --> 00:05:48,950
që kërkon përdoruesin të marrë shumë klikime për të marrë atë që ata duan,

106
00:05:48,950 --> 00:05:52,580
apo duhet të bëjmë atë në një mënyrë, për shembull, me Google çastit ose Autocomplete

107
00:05:52,580 --> 00:05:54,970
që lejon të na marrë në rezultatet tona të shpejtë?

108
00:05:54,970 --> 00:05:58,740
Inxhinieri përfshin, si Tommy do të ju tregojnë se, në të vërtetë ndërtuar atë.

109
00:05:58,740 --> 00:06:01,890
Ka shumë lloje të projektimit.

110
00:06:01,890 --> 00:06:06,070
Për shembull, nëse ju jeni ndërtimin e diçka për të vendosur diçka

111
00:06:06,070 --> 00:06:09,770
në një vend të tretë botërore, ku nuk ka energji elektrike më shumë ose më shumë se teknologjia,

112
00:06:09,770 --> 00:06:11,440
ju keni për të hartuar atë që ju jeni të ndërtimit

113
00:06:11,440 --> 00:06:14,210
në një mënyrë që të lehtë jep qasje në njerëz atje.

114
00:06:14,210 --> 00:06:18,290
Por ajo që llojet e vendimeve të projektimit të tjera mund të ketë

115
00:06:18,290 --> 00:06:21,850
ose mund të jetë përfshirë në diçka si kjo?

116
00:06:23,690 --> 00:06:25,660
Po. Unë shoh një dorë.

117
00:06:25,660 --> 00:06:37,200
[Përgjigja e padëgjueshme Student] E drejta. >> Saktësisht. Accessibility është një gjë.

118
00:06:37,200 --> 00:06:40,870
Shumë njerëz nuk mendojnë rreth, "Po në lidhje me përdoruesit e mia?"

119
00:06:40,870 --> 00:06:43,160
si ekstremet e spektrit të dyja.

120
00:06:43,160 --> 00:06:47,770
Unë kam përdoruesit të cilët mund të kenë aftësi të kufizuara që unë nuk jam duke menduar për

121
00:06:47,770 --> 00:06:50,590
dhe unë jam vetëm duke menduar për dizajnimin për përdoruesit e përgjithshme.

122
00:06:50,590 --> 00:06:52,630
Interneti është i arritshëm nga të gjithë në ditët e sotme,

123
00:06:52,630 --> 00:06:54,870
dhe unë duhet të projektimit për ata njerëz si.

124
00:06:54,870 --> 00:06:58,620
Çfarë llojet e vendimeve të projektimit të tjera mund të bëni?

125
00:06:58,620 --> 00:07:00,690
Po. >> [Student] Kosto.

126
00:07:00,690 --> 00:07:02,680
Kosto. Shumë mirë.

127
00:07:02,680 --> 00:07:08,060
Një tjetër gjë që ne mund të bazojmë vendimet tona të projektimit janë në kosto.

128
00:07:08,060 --> 00:07:13,130
Nëse ne jemi një biznes, ju doni për të ndërtuar diçka që nuk ka marrë kosto shumë për të prodhuar

129
00:07:13,130 --> 00:07:17,720
por mund të shesë në një kosto të lartë në veçanti, ose mund të merrni të na disa fitim.

130
00:07:17,720 --> 00:07:21,540
>> Këto janë të gjitha llojet e ndryshme të projektimit, por kur ne jemi duke ndërtuar diçka në internet

131
00:07:21,540 --> 00:07:25,120
ose kur ne jemi duke ndërtuar diçka që ndoshta nuk kushton aq shumë për të ndërtuar deri tani,

132
00:07:25,120 --> 00:07:28,630
si aplikacioneve të internetit - ju nuk keni për të hedhur në atë kapital shumë

133
00:07:28,630 --> 00:07:30,900
në mënyrë që të bëjë diçka që në fakt punon -

134
00:07:30,900 --> 00:07:33,490
ajo që ne jemi më të shqetësuar rreth është user experience.

135
00:07:33,490 --> 00:07:36,390
Ne e quajmë këtë dizajn përdorues në qendër.

136
00:07:36,390 --> 00:07:41,550
Në thelb ajo dizajn përdorues në qendër të bëjë është vënë veten në këpucë e përdoruesve tuaj.

137
00:07:41,550 --> 00:07:44,870
Nëse dikush shenjat për atë që unë jam ndërtimin,

138
00:07:44,870 --> 00:07:48,250
ata kanë ardhur padyshim me aplikimin tim të veçantë me një qëllim në mendje,

139
00:07:48,250 --> 00:07:50,280
me një detyrë që ata duan për të përfunduar.

140
00:07:50,280 --> 00:07:53,650
Dhe puna juaj nuk është vetëm për të ndihmuar ata të përfunduar këtë detyrë

141
00:07:53,650 --> 00:07:57,930
por për të ndihmuar ata të përfunduar këtë detyrë në një mënyrë që është efikas, intuitive,

142
00:07:57,930 --> 00:08:01,900
dhe, si një person i tha atje, të arritshme.

143
00:08:01,900 --> 00:08:03,750
Çfarë do të thotë efikasitet?

144
00:08:03,750 --> 00:08:08,050
Efikasitetit të thotë se sa shpejt e bën përdoruesin e mia përfunduar detyrën e dhënë ndërfaqe tim.

145
00:08:08,050 --> 00:08:11,650
E bën atë të marrë shumë klikime për ata për të marrë nga një vend në tjetrin?

146
00:08:11,650 --> 00:08:14,630
Është ajo e lodhshme? A kanë për të kryer shumë detyrave të përsëritura?

147
00:08:14,630 --> 00:08:17,140
Ne duam ta bërë këtë proces sa më efikas të jetë e mundur

148
00:08:17,140 --> 00:08:20,070
kështu që ata nuk duhet të bëjnë ato llojet e gjërave.

149
00:08:20,070 --> 00:08:24,230
Sa për intuitiveness, që është, për shembull, nëse një përdorues duket deri ndërfaqe tim,

150
00:08:24,230 --> 00:08:27,240
është e lehtë për ta për të marrë nga një vend në tjetrin?

151
00:08:27,240 --> 00:08:30,390
Është e lehtë për ta që të kuptoj se çfarë ata kanë për të klikoni në ndërfaqen e mia

152
00:08:30,390 --> 00:08:33,770
në mënyrë që ata të arritur qëllimin ose detyrën që ata duan të arrijnë?

153
00:08:33,770 --> 00:08:37,520
>> Dhe së fundi, si një person i tha atje, qasja është shumë e rëndësishme.

154
00:08:37,520 --> 00:08:39,640
[Gjuha mashkull] Ajo vjen me aksesueshmërinë për gjëra të tilla si vizion,

155
00:08:39,640 --> 00:08:42,740
pëlqen se si mund të vërtetë të hartuar diçka për dikë që është i verbër?

156
00:08:42,740 --> 00:08:46,460
Oh. Për njerëzit të cilët nuk mund të shohin në të gjitha, ne kemi diçka që quhet lexues ekran.

157
00:08:46,460 --> 00:08:49,070
Çfarë ju duhet të bëni është që ju duhet të ndërtojë faqen tuaj te internetit në një mënyrë të

158
00:08:49,070 --> 00:08:52,020
se, për shembull, teknologjitë e veçanta ajo që ne e quajmë -

159
00:08:52,020 --> 00:08:53,590
Ka shumë gjëra tani.

160
00:08:53,590 --> 00:08:55,660
Unë mendoj se ka lexues ekran quajtur JAWS.

161
00:08:55,660 --> 00:08:58,410
Një shumë prej këtyre gjërave të mbështetet në atë që ne e quajmë rregullat zonë

162
00:08:58,410 --> 00:09:02,010
në mënyrë që të lexohet nga të përdoruesit se çfarë është i pranishëm në faqe.

163
00:09:02,010 --> 00:09:05,480
Për ata njerëz që nuk mund të shohin, ju duhet të bëni të sigurtë që këto lexuesit ekran

164
00:09:05,480 --> 00:09:09,130
në fakt mund të marr përmbajtjen në faqe dhe në fakt mund të tregojë përdoruesit tuaj,

165
00:09:09,130 --> 00:09:13,630
në qoftë se ju nuk mund të shihni, të paktën ju mund të kuptoni përmbajtjen në faqe.

166
00:09:13,630 --> 00:09:16,190
Po. Rregull.

167
00:09:16,190 --> 00:09:23,410
Mjaft duke folur për dizajn të mirë. Le të flasim për dizajn keqe.

168
00:09:23,410 --> 00:09:25,220
Këto janë gjëra që ju nuk duhet të bëni.

169
00:09:25,220 --> 00:09:27,890
Dikush mund të më thoni në lidhje me përvojat e tyre me Craigslist

170
00:09:27,890 --> 00:09:32,190
dhe atë që ata mendojnë se nuk është aq e madhe në lidhje me këtë dizajn?

171
00:09:33,690 --> 00:09:36,430
Po. >> [Student] Unë mendoj se ka shumë fjalë në një fushë.

172
00:09:36,430 --> 00:09:39,350
Fjalë shumë, apo jo? Plotësisht e madhe.

173
00:09:39,350 --> 00:09:42,400
Ju vijnë në këtë faqe dhe ju jeni prit me një bandë e tërë e gjërave deri këtu

174
00:09:42,400 --> 00:09:43,860
që nuk mund edhe rëndësi për ju.

175
00:09:43,860 --> 00:09:47,010
Për shembull, ju jetoni në një shtet që nuk fillon me këtë letër.

176
00:09:47,010 --> 00:09:48,690
Le të thonë se ju jetoni në Teksas apo diçka.

177
00:09:48,690 --> 00:09:53,790
>> Ju duhet të shkoni të gjithë rrugën poshtë të faqes për të shkuar në vendin që ju jeni në.

178
00:09:53,790 --> 00:10:00,320
Unë jam nga Bostoni, kështu që më lejoni të shohim në Massachusetts. Ku është Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, kjo është e drejtë këtu. Oh, kjo është Boston. Rregull.

180
00:10:03,270 --> 00:10:09,070
Le të shikojmë në Boston. [Qeshura]

181
00:10:09,070 --> 00:10:12,250
Pretty madhe, apo jo?

182
00:10:12,250 --> 00:10:16,400
Gjëra të vështirë atje. [Qeshura]

183
00:10:17,320 --> 00:10:19,470
Le të thonë se unë jam duke kërkuar për diku për të jetuar.

184
00:10:19,470 --> 00:10:24,130
Sa shumë njerëz kanë përdorur në fakt Craigslist? Ton prej jush.

185
00:10:24,130 --> 00:10:30,960
Ka shumë mënyra mjaft të këqija për të parë në këtë, por le të shohim në këtë.

186
00:10:35,130 --> 00:10:38,970
Çfarë është dallimi në mes img dhe pic? Dikush mund të më thoni?

187
00:10:41,350 --> 00:10:42,830
Nuk ka asnjë ndryshim të vërtetë.

188
00:10:42,830 --> 00:10:47,710
Ata do të thotë të njëjtën gjë, por ata kanë etiketa të ndryshme për ta për disa arsye.

189
00:10:48,980 --> 00:10:53,560
Nëse unë klikoni mbi Has Image, asgjë nuk ndodh në faqe.

190
00:10:53,560 --> 00:10:57,490
Unë në fakt duhet të klikoni Kërko përsëri për diçka të ndodhë.

191
00:10:57,490 --> 00:11:02,430
Çfarë mund të jetë një vendim i mirë i projektimit që mund të bëhet atje?

192
00:11:03,820 --> 00:11:08,030
Nëse unë jam duke klikuar në këtë filtër, unë ndoshta do të duan për të filtruar nga ky veprim të caktuar

193
00:11:08,030 --> 00:11:09,970
ose kategori të veçantë.

194
00:11:09,970 --> 00:11:14,450
Pra, në vend që të shtypni Kërko përsëri, unë mund të bëjë vetëm automatikisht filtrim

195
00:11:14,450 --> 00:11:17,060
lloj i stilit të Google, ku ata e bëjnë atë në çast.

196
00:11:17,060 --> 00:11:20,440
[Malan] Por nuk formon siç kemi parë deri më tani ato duhet të dorëzohen fizikisht

197
00:11:20,440 --> 00:11:23,170
duke e goditur Shkruani të paktën ose duke klikuar një buton?

198
00:11:23,170 --> 00:11:26,830
Si ju kam parë ato deri tani, ju në të vërtetë duhet të klikoni Submit për të bërë ato gjëra.

199
00:11:26,830 --> 00:11:30,090
>> Por si Tommy do të ju tregojnë në një të dytë, nuk janë në fakt mënyra për ju

200
00:11:30,090 --> 00:11:33,010
tillë që kur ju klikoni në këtë gjë ajo mund të dërgojë automatikisht

201
00:11:33,010 --> 00:11:38,840
ajo që ne e quajmë një kërkesë AJAX dhe për të marrë të dhëna mbrapa dhe të filtruar rezultatet tuaja menjëherë.

202
00:11:38,840 --> 00:11:41,340
Ka ton e gjëra që janë të gabuar me këtë interface.

203
00:11:41,340 --> 00:11:43,530
[Malan] Mund të kërkoni për Kembrixh?

204
00:11:43,530 --> 00:11:47,030
Ka diçka pak anormal këtu ku ju intereson Kembrixh

205
00:11:47,030 --> 00:11:54,790
dhe ende jeni duke marrë Westford, Spring Hill, West Newton dhe si.

206
00:11:54,790 --> 00:11:57,930
Ndoshta jo ideale. Ndoshta nuk >> ideale.

207
00:11:57,930 --> 00:12:03,900
Si mund të jem në gjendje për të bërë përvojën e përdoruesit të mirë në këtë faqe të veçantë?

208
00:12:03,900 --> 00:12:07,340
Po. >> [Student] Udhëzimet.

209
00:12:07,340 --> 00:12:09,500
Rregull. Udhëzime në çfarë lloj kuptim?

210
00:12:09,500 --> 00:12:14,630
[Student] Për shembull, një gjë për herë të parë përdoruesit të cilët as nuk dinë se çfarë është Craigslist

211
00:12:14,630 --> 00:12:17,320
apo ju nuk e dini se çfarë jeni duke menduar për të bërë.

212
00:12:17,320 --> 00:12:20,150
Drejtë. Pra, duke shpjeguar se çfarë Craigslist është në këtë faqe është e rëndësishme.

213
00:12:20,150 --> 00:12:23,490
Ne fakt mund të tregojë se çfarë përdoruesit kjo faqe është në të vërtetë për të.

214
00:12:23,490 --> 00:12:27,090
Në qoftë se unë jam vetëm duke vizituar këtë, unë shoh një bandë e tërë e vende. Unë nuk e di edhe atë që thotë.

215
00:12:27,090 --> 00:12:29,730
Por më e rëndësishmja, vetëm duke kërkuar në këtë ndërfaqe,

216
00:12:29,730 --> 00:12:35,530
mos harroni Unë kisha për të lëvizni poshtë një ton të gjëra për të gjetur një komunitet të veçantë

217
00:12:35,530 --> 00:12:37,560
se unë në fakt kujdesej për për këtë.

218
00:12:37,560 --> 00:12:39,820
Çfarë është një mënyrë të shpejtë unë mund ta bëjë këtë? Po.

219
00:12:39,820 --> 00:12:43,290
[Student] Ndani ato deri në lindje, në perëndim rajone. Mirë >>.

220
00:12:43,290 --> 00:12:47,460
Unë mund të ndajnë ato në kategori më të cilat mund të ndihmojnë më të shpejtë të përcaktojë

221
00:12:47,460 --> 00:12:49,820
se si të merrni në atë vend të veçantë.

222
00:12:49,820 --> 00:12:54,510
[Student] Vendos një drop-down list. E drejta >>. Rregull.

223
00:12:54,510 --> 00:12:58,240
Unë mund të përdorin një drop-down menu, sepse ne kemi një grup të caktuar të gjërave

224
00:12:58,240 --> 00:13:00,100
dhe ne mund të tregojnë ato në një drop-down menu.

225
00:13:00,100 --> 00:13:02,240
Në këtë mënyrë ajo nuk ka marrë deri hapësirë ​​aq shumë në ekran.

226
00:13:02,240 --> 00:13:05,630
Por edhe më mirë se kaq, çfarë mund të bëjmë?

227
00:13:05,630 --> 00:13:09,220
Po. >> [Student] përgjigje padëgjueshme >> Mund të them se përsëri? >> [Student] kutinë e kërkimit.

228
00:13:09,220 --> 00:13:11,260
Po, një kuti kërkimi. Kjo është e madhe.

229
00:13:11,260 --> 00:13:16,430
Ajo që ne mund të bëjë në fakt është nëse ne shikojmë prapa në kutinë e kërkimit, slides.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Mënyrë shumë e lehtë për të kërkuar përmes rezultateve që ju e dini jeni në një grup.

231
00:13:21,520 --> 00:13:25,980
Nëse unë filloni të shtypni buxhetore, vetëm më tregoni të gjitha rezultatet që kanë brenda BO prej tyre.

232
00:13:25,980 --> 00:13:29,030
Në këtë mënyrë unë mund shumë lehtë të gjeni një të veçantë unë dua të shkoj në

233
00:13:29,030 --> 00:13:32,390
në vend që të lëvizni nëpër këtë listë me të vërtetë e madhe.

234
00:13:32,390 --> 00:13:37,450
>> Këto janë të gjitha llojet e frutave të vërtetë në lartësi të ulët se dikush që është duke zbatuar Craigslist

235
00:13:37,450 --> 00:13:42,500
në fakt mund të bëni për të bërë përvojë në faqen e internetit shumë të mirë për përdoruesit e tyre të veçantë.

236
00:13:42,500 --> 00:13:46,370
Rregull. Mjaft duke folur për faqet e internetit të këqija.

237
00:13:46,370 --> 00:13:49,410
Le të flasim për Facebook.

238
00:13:50,880 --> 00:13:54,390
Kur doli Facebook, dhe veçanërisht foto Facebook,

239
00:13:54,390 --> 00:13:57,870
ka qenë shumë e shërbimeve të tjera në kohën që mund të bëjë pikërisht të njëjtat gjëra.

240
00:13:57,870 --> 00:14:00,740
Ata mund të organizojnë fotografitë tuaja në albume.

241
00:14:00,740 --> 00:14:03,360
Çfarë ju mund të bëni është që ju mund të organizojë ato në grupe si.

242
00:14:03,360 --> 00:14:06,070
Ju mund të organizojë ato sipas datës. Ju mund të bëni të gjitha këto gjëra të veçanta.

243
00:14:06,070 --> 00:14:11,710
Por nuk e di ndokush se çfarë bëri Facebook fotot shpërthejnë në kohën kur u lirua?

244
00:14:11,710 --> 00:14:15,080
Po. >> [Student] Tags. Tags >>. Saktësisht.

245
00:14:15,080 --> 00:14:21,300
Ne kemi Milo gjatë këtu, i cili është nuskë tonë qeni me atë bandana CS50.

246
00:14:21,300 --> 00:14:24,810
Ju mund të shihni se ne kemi këtë funksion tagging në mes.

247
00:14:24,810 --> 00:14:28,240
Dhe çfarë bëri photos Facebook kaq interesante nga pikëpamja e përdorshmërisë

248
00:14:28,240 --> 00:14:34,130
është se ai në fakt lejuar njerëzit me anë të kësaj të përfshijë miqtë e tyre në fotot e tyre.

249
00:14:34,130 --> 00:14:37,680
Për Facebook, pasi website i tyre është veçanërisht sociale,

250
00:14:37,680 --> 00:14:40,750
kjo është në lidhje me ndërtimin e këtij lloj atmosfere sociale.

251
00:14:40,750 --> 00:14:42,620
Kjo përmirësuar përvojën e fotografive më shumë

252
00:14:42,620 --> 00:14:46,390
sepse ata në fakt mund të fillojnë duke thënë, "Këto janë lidhjet midis njerëzve,

253
00:14:46,390 --> 00:14:49,220
dhe këto janë fotot për njerëzit që ju intereson në të vërtetë. "

254
00:14:49,220 --> 00:14:52,200
Pjesë e saj është edhe narcisizëm lloj.

255
00:14:52,200 --> 00:14:54,980
Njerëzit si për të etiketuar në fotografi dhe gjëra të tilla si kjo.

256
00:14:54,980 --> 00:14:58,510
Ndërkohë që nuk është domosdoshmërisht një tipar të mirë të njeriut,

257
00:14:58,510 --> 00:15:01,910
në të njëjtën kohë është e bazuar në vendimet e projektimit të mirë

258
00:15:01,910 --> 00:15:04,860
sepse njerëz të vërtetë kujdeset për gjëra të tilla si kjo.

259
00:15:04,860 --> 00:15:07,190
Pra, kjo është foto Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Por le të flasim më gjerësisht në Facebook.

261
00:15:09,800 --> 00:15:13,400
Unë jam i sigurt se shumë njerëz këtu kanë mendime rreth Facebook,

262
00:15:13,400 --> 00:15:16,430
dy vendime të mira të projektimit dhe vendimet e këqija të projektimit.

263
00:15:16,430 --> 00:15:20,270
Pra, le të çarë e xhaketës apo të jenë të lumtur.

264
00:15:23,480 --> 00:15:26,450
Come on. Unë e di të gjithë ju përdorni Facebook.

265
00:15:26,450 --> 00:15:30,970
Dikush duhet të ketë diçka të keqe për të thënë apo diçka të mirë për të thënë në lidhje me të. Po.

266
00:15:30,970 --> 00:15:35,060
[Student] Në News Feed ka një shumë gjëra që unë nuk mund të vërtetë kujdesen rreth.

267
00:15:35,060 --> 00:15:37,740
News Feed ka treguar shumë gjëra që ju nuk mund të kujdeset për të.

268
00:15:37,740 --> 00:15:41,660
Ju keni miq në Facebook të cilët ju nuk e keni takuar për 2 ose 3 vjet

269
00:15:41,660 --> 00:15:43,860
dhe ju të shihni rezultatet e tyre të lajmeve popping deri në feed tuaj lajme

270
00:15:43,860 --> 00:15:45,870
dhe ju të vërtetë nuk kujdesen për të.

271
00:15:45,870 --> 00:15:48,700
Facebook ka bërë të vërtetë një përpjekje për të bërë këtë të mirë,

272
00:15:48,700 --> 00:15:53,150
dhe ata në fakt e kam provuar për të nxitur rezultatet përkatëse në krye të ushqyer lajme si kohët e fundit

273
00:15:53,150 --> 00:15:58,300
kështu që ju të vërtetë të shihni gjërat nga miqtë që janë të rëndësishme për ju apo miqtë tuaj të ngushtë.

274
00:15:58,300 --> 00:16:01,110
Çdo gjë tjetër? Po.

275
00:16:01,110 --> 00:16:06,400
[Student] përgjigje padëgjueshëm >> Mund të them se përsëri?

276
00:16:06,400 --> 00:16:10,140
[Student] Reklama janë relativisht modest. Në çfarë kuptimi >>?

277
00:16:10,140 --> 00:16:16,370
[Përgjigja e padëgjueshme Studenti] Ata nuk kanë dritë në ekran, si parulla.

278
00:16:16,370 --> 00:16:17,760
Rregull. Kjo është e mirë.

279
00:16:17,760 --> 00:16:25,030
Nëse ju kujtohet në internet nga vitet '90 - >> [Malan] Unë kam qenë atje. Ai ishte aty >>. [Qeshura]

280
00:16:25,030 --> 00:16:29,210
Ju mund të mbani mend ndezje gifs prejardhje, sparkly gjëra,

281
00:16:29,210 --> 00:16:31,570
GeoCities lloj stili i gjërave.

282
00:16:31,570 --> 00:16:34,080
Kjo nuk është me të vërtetë një shembull i një dizajn të mirë

283
00:16:34,080 --> 00:16:36,690
sepse ajo është me të vërtetë vëmendjen nga përmbajtja.

284
00:16:36,690 --> 00:16:39,590
Website artit Yale përdorur të ketë animuar si sfond tyre

285
00:16:39,590 --> 00:16:41,800
dhe ju nuk mund të lexoni çdo gjë në faqe,

286
00:16:41,800 --> 00:16:44,870
por unë mendoj se dikush në fakt bisedoi me ta dhe tani është pak më ndryshe.

287
00:16:44,870 --> 00:16:48,940
[Malan] Është shumë më mirë tani. >> Është shumë më mirë tani, si ju mund të shihni. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Vetëm madh, vetëm - Po. Rregull.

289
00:16:56,020 --> 00:17:00,560
>> Pjesë e tij është bërë edhe faqja juaj ndoshta shumë minimalist dhe shumë e kuptueshme

290
00:17:00,560 --> 00:17:05,690
kështu gjërat në rrjedhën e faqes në një mënyrë që është shumë logjike dhe të mos merrni në rrugën e njëri-tjetrit.

291
00:17:05,690 --> 00:17:11,849
Cilat llojet e gjërave të tjera janë të mira në lidhje me Facebook apo i keq për Facebook?

292
00:17:11,849 --> 00:17:15,730
Le të ketë një bisedë të projektimit këtu.

293
00:17:19,470 --> 00:17:21,339
Oh. Ku? Po.

294
00:17:21,339 --> 00:17:25,640
[Student] Sistemi i ri Timeline ju lejon të kërkoni profilin e personit për të kaluarën e tyre.

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

296
00:17:28,119 --> 00:17:30,280
Timeline është një gjë e madhe, sepse kjo ju lejon të kërcell miqtë tuaj

297
00:17:30,280 --> 00:17:33,300
mbrapa, kur ata ishin në shkollë të mesme.

298
00:17:35,160 --> 00:17:38,060
Timeline është e mirë sepse ajo ju lejon të filtruar përmes përmbajtjes një shumë të shpejtë,

299
00:17:38,060 --> 00:17:41,500
kjo ju lejon të gjeni gjëra që do të kishte marrë ndryshe ju një kohë vërtet të gjatë për të gjetur

300
00:17:41,500 --> 00:17:45,840
vetëm Scroll lart dhe poshtë, lart, lart, lart, lart, lart, si kthim prapa në kohë.

301
00:17:45,840 --> 00:17:48,910
Por pastaj ka edhe një lloj dobësitë të cilat në aspektin e user experience.

302
00:17:48,910 --> 00:17:51,190
Çfarë mund që të jetë?

303
00:17:51,190 --> 00:17:56,780
Fjala e madhe që fillon me P-R. >> [Student] Privacy. Privacy >>, e drejtë?

304
00:17:56,780 --> 00:17:59,970
Privacy është një i madh user experience çështje.

305
00:17:59,970 --> 00:18:07,190
Kjo është një nga gjërat që unë urrej më për Facebook tani. [Qeshura]

306
00:18:07,190 --> 00:18:09,000
[Malan] Si bëj unë tani.

307
00:18:09,000 --> 00:18:11,380
David nuk e kuptojnë këtë fakt ka ndodhur deri dje.

308
00:18:11,380 --> 00:18:14,560
Kështu që tani ai e di se çdo herë që unë chat atë unë e di që ai është duke injoruar mua.

309
00:18:14,560 --> 00:18:16,880
[Malan] Pjesa e vështirë ishte që unë ishte në fakt duke injoruar atë,

310
00:18:16,880 --> 00:18:21,040
dhe unë nuk e di se ai e dinte se unë isha duke injoruar atë. [Qeshura]

311
00:18:21,040 --> 00:18:24,030
Privacy është një çështje e madhe.

312
00:18:24,030 --> 00:18:28,670
Mund dikush këtu më tregoni se çfarë mund të jetë e keqe për privatësinë në Facebook

313
00:18:28,670 --> 00:18:32,270
përveç faktit se ata bëjnë gjëra të tilla si kjo?

314
00:18:32,270 --> 00:18:37,240
Çfarë është ajo veçanërisht e vështirë për të bërë në lidhje me privatësinë Facebook?

315
00:18:37,240 --> 00:18:40,340
Kjo lloj është një pyetje kryesor.

316
00:18:41,680 --> 00:18:43,930
Po. >> [Student] Hide fotot tuaja nga njerëz të caktuar.

317
00:18:43,930 --> 00:18:46,170
Drejtë. Pikërisht, për të fshehur fotot tuaja nga njerëz të caktuar.

318
00:18:46,170 --> 00:18:51,290
Ata e kanë këtë buton të vogël, pak në të drejtën e sipërme që ju lejon të toggle privatësinë e një foto.

319
00:18:51,290 --> 00:18:56,360
Mundësitë e tyre janë të ndryshme shumë të privatësisë mes llojet e ndryshme të menutë.

320
00:18:56,360 --> 00:18:59,510
>> Ata kanë marrë një shumë të mirë në lidhje me atë kohët e fundit, por ajo përdoret për të jetë rasti

321
00:18:59,510 --> 00:19:04,870
se sa herë që ju të kërkuar për të parandaluar miqtë tuaj nga fotot shohin,

322
00:19:04,870 --> 00:19:08,280
ju do të duhet të kalojnë nëpër një proces shumë i komplikuar 5-hapi për të qenë si,

323
00:19:08,280 --> 00:19:11,150
më lejoni të klikoni këtë link, tani më lejoni të klikoni përsëri, më lejoni të klikoni përsëri,

324
00:19:11,150 --> 00:19:13,420
më lejoni të specifikojë cilat njerëzit nuk mund të shihni fotografitë e mia.

325
00:19:13,420 --> 00:19:17,250
Kjo nuk është veçanërisht i mirë nga ana e Facebook

326
00:19:17,250 --> 00:19:20,530
sepse aq shumë në lidhje me përvojën e përdoruesit është në të vërtetë duke u dhënë atyre lirinë

327
00:19:20,530 --> 00:19:22,460
për të kontrolluar atë që njerëzit mund ta shohin.

328
00:19:22,460 --> 00:19:25,550
Ne e quajmë këtë kontroll përdoruesit dhe lirinë.

329
00:19:25,550 --> 00:19:31,090
Nëse ju nuk jeni të lejuar përdoruesit tuaj të bëjë që në një mënyrë që është efikas dhe intuitive,

330
00:19:31,090 --> 00:19:34,570
atëherë përvoja juaj përdoruesi nuk është me të vërtetë e madhe se në të gjitha.

331
00:19:34,570 --> 00:19:38,200
 Do të ju djema të doja të them asgjë rreth Facebook?

332
00:19:38,700 --> 00:19:41,420
Si mund ta kthyer këtë off?

333
00:19:41,420 --> 00:19:46,290
[Ong] Ju nuk mund të kthehet këtë off, dhe kjo është një e metë e madhe përdorshmërisë nga ana e Facebook.

334
00:19:46,290 --> 00:19:49,410
Ky tipar - Unë në fakt shikuar në atë dje -

335
00:19:49,410 --> 00:19:53,940
është ose që ju nuk mund ta bëjë atë apo kjo është varrosur diku shumë, shumë thellë

336
00:19:53,940 --> 00:19:58,050
në skutat e Facebook, sepse unë nuk mund ta kuptoj se si për të çaktivizoni këtë funksionalitet në të gjitha.

337
00:19:58,050 --> 00:20:00,400
[Malan] Por ndonjëherë këto vendime nuk janë të dukshme

338
00:20:00,400 --> 00:20:03,890
sepse ju djema na kanë dhënë shumë reagime të dobishme në CS50 aplikacione të ndryshme

339
00:20:03,890 --> 00:20:05,710
dhe faqet e internetit që përdor kurs.

340
00:20:05,710 --> 00:20:10,260
Ne nuk kemi zbatuar të gjitha këto kërkesa dhe sugjerime.

341
00:20:10,260 --> 00:20:14,550
>> Pjesë e që është për të marrë kaq shumë kërkesa se kjo është një funksion i kohës,

342
00:20:14,550 --> 00:20:17,070
por ndonjëherë ne vetëm të bëjë një vendim të ndërgjegjshëm si,

343
00:20:17,070 --> 00:20:19,830
"Faleminderit për sugjerimin, por nuk pajtohemi."

344
00:20:19,830 --> 00:20:24,350
Pra, si mendoni ju në fakt të vendosni se çfarë ju duhet të bëni nëse përdoruesit tuaj mendoj se ju duhet të bëni diçka

345
00:20:24,350 --> 00:20:28,110
edhe në qoftë se ju nuk bëni domosdoshmërisht?

346
00:20:28,110 --> 00:20:32,360
Kjo është një bilanc gjobë në mes të vërtetë të dëgjuar se çfarë thonë përdoruesit tuaj

347
00:20:32,360 --> 00:20:35,840
dhe në fakt ka disa lloj të linjës ku ju them,

348
00:20:35,840 --> 00:20:37,750
"Ne nuk jemi duke shkuar për të bërë atë që thonë këto përdoruesit."

349
00:20:37,750 --> 00:20:42,520
Dhe në veçanti, unë mendoj se ka qenë një citim nga Henry Ford që përmbledh këtë ide mjaft mirë.

350
00:20:42,520 --> 00:20:47,130
"Nëse do të kisha pyetur njerëzit se çfarë ata donin, ata do të kanë thënë se ata donin kuaj të shpejtë."

351
00:20:47,130 --> 00:20:51,840
Dikush mund të lloj të vë në lojë përveç asaj që quote vërtetë do të thotë?

352
00:20:51,840 --> 00:20:56,060
Kjo nuk është vetëm se përdoruesit e di se çfarë ata duan,

353
00:20:56,060 --> 00:20:59,180
por kjo është më shumë se -

354
00:20:59,180 --> 00:21:02,720
[Student] Ata nuk e dinë se çfarë është e mundur.

355
00:21:02,720 --> 00:21:06,140
Në pjesën ata nuk e dinë se çfarë është e mundur.

356
00:21:07,880 --> 00:21:11,440
Tease se përveç pak më shumë. Çfarë doni të thoni me këtë?

357
00:21:11,440 --> 00:21:21,340
[Përgjigja e padëgjueshme Student]

358
00:21:21,340 --> 00:21:25,770
Kjo është e mirë. Ajo që unë mendoj se ne jemi duke u përpjekur për të thënë këtu është se njerëzit e dinë se çfarë ata duan.

359
00:21:25,770 --> 00:21:28,050
Ata duan kuaj të shpejtë.

360
00:21:28,050 --> 00:21:29,840
Çfarë ata me të vërtetë duan është aftësia për të lëvizur më shpejt,

361
00:21:29,840 --> 00:21:32,310
por ata vërtetë nuk e di të mesme nga të cilat për të arritur këtë.

362
00:21:32,310 --> 00:21:36,330
Kur keni ardhur për përdoruesit tuaj dhe përdoruesit tuaj ju tregoj diçka

363
00:21:36,330 --> 00:21:39,700
dhe ata ju them, "Ne duam këto karakteristika dhe këto karakteristika dhe këto karakteristika,"

364
00:21:39,700 --> 00:21:42,650
ju nuk doni të mendoni rreth domosdoshmërisht, "Lërmë të shkoj përpara

365
00:21:42,650 --> 00:21:44,720
"Dhe të zbatojë atë që ata në mënyrë eksplicite thotë:"

366
00:21:44,720 --> 00:21:48,610
por çfarë ju doni të mendoni për është, "Çfarë lloj ideve mund të merrni nga kjo?"

367
00:21:48,610 --> 00:21:50,450
Çfarë bëjnë ata në fakt duan?

368
00:21:50,450 --> 00:21:55,560
>> Dhe nga atje atë që ju mund të bëni është të projektimit diçka që kënaq këto kërkesa

369
00:21:55,560 --> 00:22:00,340
por jo domosdoshmërisht në mënyrë që përdoruesit pret që ajo të jetë e kënaqur.

370
00:22:00,340 --> 00:22:03,830
Pra, për diçka si projekte përfundimtare, në terma shumë të vërteta,

371
00:22:03,830 --> 00:22:07,900
çfarë është një orientues i dobishëm kur është fjala për të bërë diçka të mirë,

372
00:22:07,900 --> 00:22:10,630
veçanërisht në qoftë se projektuesi ka këtë arrogancë rreth tij

373
00:22:10,630 --> 00:22:14,360
ku ju e dini se çfarë lloj e mirë, ju mund të marrë të dhëna nga përdoruesit e tuaj,

374
00:22:14,360 --> 00:22:16,580
por si mendoni ju në fakt të shkoni në lidhje me marrjen atë reagime?

375
00:22:16,580 --> 00:22:21,610
Në projektet e fundit, shumë konkretisht, çfarë prodhon rezultate optimale këtu?

376
00:22:21,610 --> 00:22:25,030
Çfarë prodhon rezultate optimale - dhe unë do të shkoj për këtë në një të dytë -

377
00:22:25,030 --> 00:22:29,190
është ky proces i zhvillimit dhe pastaj testimin dhe pastaj iterating.

378
00:22:29,190 --> 00:22:32,020
Çfarë dua të them me anë të testimeve është zakonisht kur ju design diçka

379
00:22:32,020 --> 00:22:36,970
ju mendoni se është mjaft e mirë, si, "Unë jam e tillë një projektuesi i madh. Gjithkush do të duan këtë".

380
00:22:36,970 --> 00:22:41,600
Dhe pastaj ju vënë atë atje dhe njerëz të vërtetë nuk e pëlqen atë për disa arsye.

381
00:22:41,600 --> 00:22:46,820
Çfarë ju duhet të bëni është që ju keni për të marrë pjesë e gjërave që njerëzit kanë dëshirë

382
00:22:46,820 --> 00:22:49,180
dhe riorganizimit gjërat që njerëzit nuk më pëlqen.

383
00:22:49,180 --> 00:22:53,080
Kjo tingëllon si një proces shumë të qartë, por ky proces i vazhdueshëm iterating

384
00:22:53,080 --> 00:22:55,980
në krye të asaj që ju keni ndërtuar tashmë është një proces që ju ndihmon

385
00:22:55,980 --> 00:22:59,730
jo vetëm që përsosin aftësitë tuaja të projektimit, por edhe ju ndihmon të përsosin dizajn

386
00:22:59,730 --> 00:23:03,790
në mënyrë që njerëzit të vërtetë e vlerësojmë produktin tuaj edhe më shumë se ata më parë.

387
00:23:03,790 --> 00:23:07,390
>> Unë do të shkoj për më shumë shembuj konkretë të asaj që ju mund të bëjë në fakt.

388
00:23:07,390 --> 00:23:11,390
Si lloj i një shembull të fundit të një produkti, le të shohim në kajak.

389
00:23:11,390 --> 00:23:14,970
Kajak kur ajo doli jashtë ishte shumë, shumë e famshme.

390
00:23:14,970 --> 00:23:18,760
Mund dikush me mend pse?

391
00:23:18,760 --> 00:23:20,950
Cilat janë llojet e gjërave që ju pëlqen në lidhje me këtë nëse keni përdorur atë

392
00:23:20,950 --> 00:23:23,990
apo çfarë janë llojet e gjërave që ju nuk më pëlqen?

393
00:23:23,990 --> 00:23:31,590
Po. >> [Përgjigja e padëgjueshme Student] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Kjo është pjesë e saj është lënë përdoruesit kanë një pyetje që është më e shtrirë

395
00:23:34,730 --> 00:23:38,150
se një shumë e kufizuar si, "Ju duhet të marr datën tuaj të fillojë

396
00:23:38,150 --> 00:23:39,810
"Dhe ju duhet të marr datën tuaj në fund."

397
00:23:39,810 --> 00:23:44,910
Në fakt, kjo ju lejon të jetë fleksibël në lidhje me të dhe kjo ju jep të gjitha fluturimet në atë varg.

398
00:23:44,910 --> 00:23:46,730
Çdo gjë tjetër?

399
00:23:46,730 --> 00:23:50,530
[Student] Ato përfshijnë tarifat në çmim.

400
00:23:50,530 --> 00:23:53,330
Ato nuk përfshijnë taksat në çmim.

401
00:23:53,330 --> 00:23:56,720
Taksat dhe gjëra të vërtetë të shkojnë direkt në këtë çmim në të majtë e sipërme

402
00:23:56,720 --> 00:24:00,710
kështu që ju nuk jeni të mashtruar në duke menduar se ju jeni në të vërtetë duke paguar për një fluturim $ 240

403
00:24:00,710 --> 00:24:03,280
kur ajo është me të vërtetë 330 $.

404
00:24:03,280 --> 00:24:06,200
Çdo gjë tjetër? Po.

405
00:24:06,200 --> 00:24:10,140
[Përgjigja e padëgjueshme Student]

406
00:24:10,140 --> 00:24:14,610
Unë nuk jam i sigurt nëse ata në fakt të ju lejojnë të bëni këtë.

407
00:24:14,610 --> 00:24:18,310
Unë mund të jetë i gabuar.

408
00:24:18,310 --> 00:24:23,360
Kjo mund të jetë një gjë interesante në qoftë se ju doni të vënë më shumë peshë në filtra të veçanta

409
00:24:23,360 --> 00:24:27,000
në mënyrë që ata të shtyjë rezultatet që lidhen me këtë filtër në krye.

410
00:24:27,000 --> 00:24:31,920
Por dikush mund të më thoni se çfarë është aq e veçantë në lidhje me këtë anën e majtë?

411
00:24:31,920 --> 00:24:39,540
Si e keni tradicionalisht kërkoni një fluturim në një shërbim në internet para se kjo?

412
00:24:41,600 --> 00:24:44,650
>> Po. >> [Student] përgjigje padëgjueshme >> Mund të ju them se -

413
00:24:44,650 --> 00:24:47,530
[Student] Çdo ajrore. Po >>. Çdo linjë ajrore ka faqen e vet.

414
00:24:47,530 --> 00:24:50,110
Kjo konsolidon gjëra. Dhe?

415
00:24:50,110 --> 00:24:52,190
[Student] Ju e dini saktësisht çfarë ju jeni duke lënë kohë.

416
00:24:52,190 --> 00:24:54,460
Ju nuk e dini saktësisht çfarë ju jeni duke lënë kohë,

417
00:24:54,460 --> 00:24:59,380
por lidhur me filtra në veçanti.

418
00:25:00,710 --> 00:25:03,540
Më lejoni të tërheq lart kajak.

419
00:25:11,490 --> 00:25:14,020
O Zot, pop-ups. Përvoja Bad përdoruesit.

420
00:25:14,020 --> 00:25:17,230
Çfarë ndodh kur unë të lëvizë këtë slider?

421
00:25:17,230 --> 00:25:21,010
[Student] përditësimet automatike. >> [] Ong përditësimet automatike.

422
00:25:21,010 --> 00:25:23,440
Kjo është diçka që është shumë e rëndësishme.

423
00:25:23,440 --> 00:25:25,380
Para kësaj, sa herë që ju të kërkuar për të parë një fluturim,

424
00:25:25,380 --> 00:25:28,410
keni pasur për të vënë në vendin tuaj input, output lokacionit tuaj, Kërko Press,

425
00:25:28,410 --> 00:25:31,190
ajo do të përpunojë dhe të tregojnë se rezultatet tuaja.

426
00:25:31,190 --> 00:25:34,120
Nëse dëshironi të ndryshoni pyetjen tuaj, ju do të duhet të shtypni përsëri dy herë,

427
00:25:34,120 --> 00:25:39,770
të hyjë në një pyetje të ri nga e para, dhe pastaj të bëjë atë pa pushim.

428
00:25:39,770 --> 00:25:43,910
Gjë e bukur për diçka si kjo është ajo përdor një shumë [] pakuptueshëm gjë në mes.

429
00:25:43,910 --> 00:25:46,230
Kurdo që ju të bëni diçka si kjo, ajo shoots off një kërkesë

430
00:25:46,230 --> 00:25:48,420
dhe të kthehet të gjitha rezultatet menjëherë.

431
00:25:48,420 --> 00:25:51,680
Ky lloj reagime të menjëhershme është diçka që e bëri kajak wildly popullore

432
00:25:51,680 --> 00:25:55,910
sepse ajo është me të vërtetë e lehtë për mua të vetëm të ndryshojë query time

433
00:25:55,910 --> 00:25:58,890
dhe të kuptoj se gjërat që janë rreth një gamë të veçantë

434
00:25:58,890 --> 00:26:01,950
pa pasur nevojë për të shkuar mbrapa dhe me radhë, mbrapa dhe me radhë, mbrapa dhe me radhë.

435
00:26:01,950 --> 00:26:05,200
Pra, këto janë të gjitha llojet e gjërave që ju doni të mendoni për kur ju jeni dizajnimin e web faqen tuaj.

436
00:26:05,200 --> 00:26:08,930
Si mund ta bëjë atë shumë të efektshme për përdoruesit e mi të shkojnë nëpër çdo gjë që ata janë duke punuar në

437
00:26:08,930 --> 00:26:13,010
dhe për të marrë në qëllimin e tyre përfundimtar sa më shpejt të jetë e mundur?

438
00:26:13,010 --> 00:26:16,430
[Malan] Dhe në pikën e Jozefit më parë për përdoruesit e jo domosdoshmërisht ditur se çfarë ata duan,

439
00:26:16,430 --> 00:26:18,640
bazuar në atë që ju djema tani dini rreth HTML

440
00:26:18,640 --> 00:26:22,780
dhe ju keni kutitë, butonat e radios, menutë, zgjidhni fushat e inputeve dhe si,

441
00:26:22,780 --> 00:26:26,140
si do ta zbatojë nocionin e zgjedhjen e një kohën e fillimit për një fluturim?

442
00:26:26,140 --> 00:26:30,030
>> Cili prej këtyre mekanizmave UI të ndryshme do të ju përdorni?

443
00:26:30,030 --> 00:26:34,100
Nëse ju vetëm e di sasinë e HTML që u mësoi parë

444
00:26:34,100 --> 00:26:39,070
dhe ju e dini se inputet janë butonat e radios, kutitë, rënie-ngritje, dhe kuti input,

445
00:26:39,070 --> 00:26:43,320
çfarë do të zgjedhja juaj e natyrshme kanë qenë për datat ringjallet?

446
00:26:43,320 --> 00:26:48,670
[Student] Input. Input. >> Apo ndoshta edhe një drop-down me të gjitha datat, apo jo?

447
00:26:48,670 --> 00:26:53,170
Pra, me mekanizmat më komplekse UI si kjo në anën e majtë që ju mund të zbatojë,

448
00:26:53,170 --> 00:26:55,500
ju mund të bëni këtë proces shumë më intuitive me një slider

449
00:26:55,500 --> 00:27:01,020
sepse koha është e vazhdueshme, dhe njerëzit zakonisht nuk mendojnë për atë në drejtim të chunks diskrete.

450
00:27:01,020 --> 00:27:04,950
Dakord. Gjëja e fundit.

451
00:27:04,950 --> 00:27:07,370
Dhjetë heuristics përdorshmërisë.

452
00:27:07,370 --> 00:27:10,820
Të gjitha gjërat që ne folëm ndoshta bien në një nga këto kategori.

453
00:27:10,820 --> 00:27:14,420
Nëse ju shkoni në këtë link, cilat vende do të postuar në internet,

454
00:27:14,420 --> 00:27:18,900
ju do të vërtetë të jetë në gjendje për të, si ju design faqen tuaj, mbani në mend këto heuristics

455
00:27:18,900 --> 00:27:21,330
dhe këto rregulla e gishtit.

456
00:27:21,330 --> 00:27:26,610
Për projektet tuaja, çfarë unë sugjeroj që ju të bëni në mënyrë për të hartuar app tuaj më të mirë

457
00:27:26,610 --> 00:27:28,850
është që të bëjë prototyping letër parë.

458
00:27:28,850 --> 00:27:32,150
Kur ju jeni duke menduar në lidhje me aplikimin tuaj, shumë shpejt skemë atë që ju dëshironi që ajo të duket si

459
00:27:32,150 --> 00:27:36,230
dhe sigurohuni që të gjitha kutitë janë të rregulluar në një mënyrë që është shumë intuitiv për përdoruesit për të përdorur

460
00:27:36,230 --> 00:27:39,820
dhe madje edhe të tregojë këto prototipa letër për miqtë tuaj dhe të fillojnë fokus grupe.

461
00:27:39,820 --> 00:27:44,230
Vetëm të marrë 2 ose 3 persona së bashku dhe i pyet ata për të vetëm trokitje e lehtë në këto prototipa letër,

462
00:27:44,230 --> 00:27:47,650
dhe tregoni atyre ekranet reja për të parë nëse ata vërtetë kuptojnë se çfarë po ndodh.

463
00:27:47,650 --> 00:27:50,680
>> Çfarë doni të bëni është dhënë atyre një detyrë, të motivuar këtë detyrë,

464
00:27:50,680 --> 00:27:53,270
dhe vetëm për t'u dhënë atyre app dhe le ta përdorin atë.

465
00:27:53,270 --> 00:27:56,530
A nuk jep atyre udhëzime përtej kësaj.

466
00:27:56,530 --> 00:28:00,920
Ju dëshironi që në fakt le ta ndërveprojnë me app tuaj në një mënyrë që ju lejon të shihni

467
00:28:00,920 --> 00:28:03,870
se si ata do të përdorin atë në qoftë se ju nuk ishin në këmbë pranë tyre.

468
00:28:03,870 --> 00:28:05,250
Dhe kjo është shumë e rëndësishme.

469
00:28:05,250 --> 00:28:08,780
Kjo do t'ju japë shumë njohuritë për të janë njerëz të marrë rreth gjërave të caktuara

470
00:28:08,780 --> 00:28:10,560
në një mënyrë që nuk e kam ndërmend atyre të?

471
00:28:10,560 --> 00:28:14,680
Janë përdorur mekanizma të veçantë UI në ekran

472
00:28:14,680 --> 00:28:17,490
në një mënyrë që është lloj i hacky?

473
00:28:17,490 --> 00:28:22,020
Unë nuk e kam ndërmend për ta bërë atë në këtë mënyrë.

474
00:28:22,020 --> 00:28:23,940
Dhe një herë ju jeni bërë me këtë, çfarë ju doni të bëni?

475
00:28:23,940 --> 00:28:26,010
Shkëmbinj tuaj design, e drejtë?

476
00:28:26,010 --> 00:28:29,600
Çfarë doni të bëni është që ju doni të zhvillojë dhe pastaj të bëjë atë proces përsëri.

477
00:28:29,600 --> 00:28:32,110
Kështu tregojnë atë me miqtë një herë ju keni zhvilluar atë, të provuar atë,

478
00:28:32,110 --> 00:28:36,630
zhvilluar, test, të zhvilluar, test, iterate, dhe mbi dhe përpara.

479
00:28:36,630 --> 00:28:39,720
Design është një shumë proces përsëritës në këtë kuptim.

480
00:28:39,720 --> 00:28:43,280
Ju në fakt keni për të ndërtuar diçka dhe pastaj të kuptojë gjëra në lidhje me të

481
00:28:43,280 --> 00:28:46,520
që ju nuk e kuptojnë përpara dhe të shkuar mbrapa dhe për të përmirësuar nga ajo.

482
00:28:46,520 --> 00:28:50,890
Tani, si për pjesën e zhvillimit, kjo është ajo që Tommy do të ju tregojnë se pas shpërbërjes

483
00:28:50,890 --> 00:28:53,220
dhe se si ju mund të jetë në gjendje të zbatojë diçka si Autocomplete

484
00:28:53,220 --> 00:28:56,610
në një mënyrë që është mjaft e thjeshtë.

485
00:28:57,440 --> 00:28:59,550
[Malan] Si Tommy vendos këtu, një pyetje pastaj.

486
00:28:59,550 --> 00:29:03,780
Shumë nga faqet e internetit më të hershme - dhe kur Jozefi i tha 1990 website stil,

487
00:29:03,780 --> 00:29:07,640
ajo ishte Implementimi ku nëse do të donit të përzgjidhni një kohën e fillimit dhe një herë në fund,

488
00:29:07,640 --> 00:29:10,380
sinqerisht, mbrapa në ditë dhe madje edhe në disa faqet e internetit sot,

489
00:29:10,380 --> 00:29:13,220
mënyrë që ju të bëni këtë është që ju të vini një orë nga një drop-down,

490
00:29:13,220 --> 00:29:15,910
ju të vini minuta nga një drop-down, ndoshta ju zgjidhni AM, PD,

491
00:29:15,910 --> 00:29:17,440
dhe pastaj ju bëni që 3 herë më shumë.

492
00:29:17,440 --> 00:29:19,920
Dhe kështu me 6 klikimeve dhe ndoshta disa scrolling

493
00:29:19,920 --> 00:29:24,000
përdoruesit tuaj në fakt mund të japin disa lloj datën dhe / ose varg kohë në këtë kuptim.

494
00:29:24,000 --> 00:29:27,920
>> Pra, patjetër optimale dhe akoma deri më tani kemi parë asnjë aftësitë shprehëse

495
00:29:27,920 --> 00:29:30,330
në ndonjë nga gjuhët e kemi shikuar për të bërë diçka sexier

496
00:29:30,330 --> 00:29:32,620
si ky slider kohe fillimit dhe kohën fund.

497
00:29:32,620 --> 00:29:36,290
Por në qoftë se ju mendoni përsëri në javën 0 kur kemi biseduar për Scratch,

498
00:29:36,290 --> 00:29:39,080
atje nuk ka pasur Widgets që vetëm e bëri gjëra të caktuara.

499
00:29:39,080 --> 00:29:42,700
Ju me të vërtetë kishte vetëm këto themele si sythe dhe kushtet dhe si.

500
00:29:42,700 --> 00:29:46,910
Pra, lloji i vetëm duke menduar shumë abstrakte tani, pavarësisht nga veçoritë e HTML,

501
00:29:46,910 --> 00:29:51,260
Çfarë është me të vërtetë ndodh me diçka si kjo kohë e fillimit dhe kohën fund slider?

502
00:29:51,260 --> 00:29:54,960
Kur unë të lëvizin mausin tim dhe unë klikoni mbi atë simbol karrota pak në të majtë

503
00:29:54,960 --> 00:29:59,220
dhe të fillojnë zvarritje, programuar, çfarë është ajo që ju doni të jenë në gjendje të zbatojnë

504
00:29:59,220 --> 00:30:01,000
për të bërë që të ndodhë?

505
00:30:01,000 --> 00:30:04,920
Çfarë pyetje, çfarë shprehjet Boolean nuk ju duan të jenë në gjendje të kërkoni?

506
00:30:04,920 --> 00:30:06,930
Çfarë është me të vërtetë ndodh? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Student] Ku është pozicioni i kursorit? Mirë >>. Ku është pozita e kursorit?

508
00:30:10,080 --> 00:30:11,970
Kjo ishte diçka që ne e nevojshme për të shprehur përsëri në Scratch,

509
00:30:11,970 --> 00:30:14,690
nëse ajo është bazuar në vendndodhjen apo edhe ngjyra ose si.

510
00:30:14,690 --> 00:30:18,410
Ju mund të kujtojnë ndonjëherë kaq pak kohë të hënën ka pasur të gjitha këto gjëra quhet ngjarje

511
00:30:18,410 --> 00:30:22,370
në botën e Web, dhe kështu që nuk ka gjëra të tilla si OnClick dhe çelësi shtyp në linjë

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

513
00:30:25,960 --> 00:30:29,130
Pra, të kuptojnë se edhe këto gjëra ne kemi qenë duke marrë për të dhënë në Web

514
00:30:29,130 --> 00:30:32,190
me faqet si Facebook dhe Gmail, edhe nëse ju nuk kanë idenë

515
00:30:32,190 --> 00:30:34,890
si ju ndoshta do të zbatojë se për shkak se nuk ka asgjë si ai, edhe në leksionin

516
00:30:34,890 --> 00:30:38,570
ose Problem Set 7, të kuptojnë se me këto bazat e saktë të njëjta,

517
00:30:38,570 --> 00:30:41,090
me HTTP dhe parametrat dhe GET dhe PAS,

518
00:30:41,090 --> 00:30:44,010
me inpute themelore HTML që ne i kemi shikuar deri tani

519
00:30:44,010 --> 00:30:47,690
dhe në një moment me mekanizmat programatike që të Tommy gati për të futur

520
00:30:47,690 --> 00:30:51,300
ju mund të filloni për të shprehur veten ashtu si ju e bëri në javë 0

521
00:30:51,300 --> 00:30:53,800
nga shumë intuitive zvarritje dhe në rënie.

522
00:30:53,800 --> 00:30:58,950
>> Pra, me tha se, Tommy MacWilliam dhe disa copa mister të reja për ne për Web.

523
00:30:58,950 --> 00:31:03,450
Dakord. Emri im është Tommy dhe unë jam duke shkuar për të folur në lidhje me JavaScript.

524
00:31:03,450 --> 00:31:07,150
Vetëm një mohim: Unë jam i mendimit se JavaScript është gjuhë programimi mirë

525
00:31:07,150 --> 00:31:09,010
në të gjithë botën të tërë.

526
00:31:09,010 --> 00:31:11,940
Ka shumë njerëz që nuk pajtohen me mua, por kjo është vetëm amazing.

527
00:31:11,940 --> 00:31:16,330
Pasi ju shkoni përsëri në C, në qoftë se ju duhet të shkruani C për një klasë apo disa gjuhë të tjera,

528
00:31:16,330 --> 00:31:19,780
kjo është vetëm të vërtetë zhgënjyese në të gjitha nivelit të ulët detaje ju duhet të merrni bogged poshtë in

529
00:31:19,780 --> 00:31:23,050
Kështu që nëse ju jeni ndjeheni ndonjëherë i trishtuar për mënyrën se si i bezdisshëm C është për të shkruar,

530
00:31:23,050 --> 00:31:25,130
thjesht shkoni mbrapa, shkruajnë disa JavaScript. Kjo është Nirvana.

531
00:31:25,130 --> 00:31:27,980
Ju do të ndiheni shumë më mirë për ditën tuaj të keqe.

532
00:31:27,980 --> 00:31:31,900
Një shumë e magjinë e JavaScript vjen nga aftësia e saj për të manipuluar gjërat

533
00:31:31,900 --> 00:31:33,730
që janë tashmë në faqe.

534
00:31:33,730 --> 00:31:38,520
Kur ne shkroi Scripts PHP tona, ata u ekzekutuan në server,

535
00:31:38,520 --> 00:31:42,270
dhe përfundimisht se PHP script ndoshta disa prodhimit HTML.

536
00:31:42,270 --> 00:31:45,860
Kjo HTML është dërguar të klientit, dhe pastaj se ishte ajo.

537
00:31:45,860 --> 00:31:50,180
Nëse PHP kërkuar për të shtuar një buton në një faqe, për shembull, ajo nuk mund të vërtetë të bëjë atë.

538
00:31:50,180 --> 00:31:54,350
Ajo do të duhet të bëjë një skedar HTML krejt të re dhe për të dërguar që të shfletuesit.

539
00:31:54,350 --> 00:31:57,840
Me JavaScript ne e dimë që ne mund update gjëra, ndërsa ata janë tashmë në faqe,

540
00:31:57,840 --> 00:32:00,840
dhe për shkak të kësaj ne mund të japin reagime shumë më të menjëhershme,

541
00:32:00,840 --> 00:32:06,150
i cili do me të vërtetë të përmirësuar përvojën e përdoruesit në faqen tonë të internetit.

542
00:32:06,150 --> 00:32:09,330
Vetëm një radhitje të shpejtë të selectors JavaScript.

543
00:32:09,330 --> 00:32:11,590
Ne e dimë se kur ne të shkarkoni një faqe HTML,

544
00:32:11,590 --> 00:32:13,890
që do të jenë të përfaqësuara në DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM mos harroni kjo është vetëm pemë e madhe ku elementet janë të lidhura në këtë hierarki të madhe.

546
00:32:19,340 --> 00:32:21,810
Kur ne kemi punuar me bazat e të dhënave në pset 7,

547
00:32:21,810 --> 00:32:26,280
një nga gjërat e para që ne të nevojshme për të dini se si për të bërë ishte query bazës së të dhënave.

548
00:32:26,280 --> 00:32:29,060
Ne kemi këtë tryezë të madhe përdoruesit, dhe nganjëherë ne vetëm duam të themi,

549
00:32:29,060 --> 00:32:33,260
"Unë vetëm dua disa prej këtyre përdoruesve që përputhen me disa kushte."

550
00:32:33,260 --> 00:32:36,020
Në mënyrë të ngjashme, kur ne kemi nevojë për disa DOM ne rrugën e querying atë.

551
00:32:36,020 --> 00:32:39,490
Ne kemi nevojë për një mënyrë për të thënë, "Unë dua të gjithë butonat që duken si kjo

552
00:32:39,490 --> 00:32:41,860
"Ose të gjitha imazhet në faqe."

553
00:32:41,860 --> 00:32:44,330
Dhe këto selectors të na lejojë për të bërë këtë.

554
00:32:44,330 --> 00:32:45,690
Pra, vetëm një radhitje të shpejtë.

555
00:32:45,690 --> 00:32:50,770
Ky i fundit e parë këtu, kjo # paraqesë, çka është se do të zgjidhni? A ka dikush kujtohet?

556
00:32:50,770 --> 00:32:54,880
[Përgjigja e padëgjueshme Studenti] >> Po, pikërisht.

557
00:32:54,880 --> 00:32:59,510
Kjo do të zgjidhni një element në faqe që ka një ID të dorëzojë.

558
00:32:59,510 --> 00:33:03,470
Dhe kështu që tag hash thotë se kjo zgjedhësi do të punojë me kartat e identitetit.

559
00:33:03,470 --> 00:33:07,630
Si në lidhje me një të dytë, kjo. Qendër, çfarë do që të zgjidhni?

560
00:33:11,360 --> 00:33:15,180
Po. >> [Student] Class. Pikërisht >>. Kjo është tani do të zgjidhni nga klasa.

561
00:33:15,180 --> 00:33:18,840
Dallimi midis identitetit dhe klasës këtu është përgjithësisht ID duhet të jetë unik

562
00:33:18,840 --> 00:33:20,820
brenda çfarëdo hapësirë ​​që ju jeni në kërkim gjatë.

563
00:33:20,820 --> 00:33:23,080
Pra, nëse ju jeni në kërkim mbi një faqe të tërë web,

564
00:33:23,080 --> 00:33:27,740
ju me të vërtetë duhet të ketë vetëm 1 element me atë ID të caktuar, kështu që në këtë rast të dorëzojë.

565
00:33:27,740 --> 00:33:31,330
Me klasat, në anën tjetër, ne mund të kemi më shumë se 1 element në të njëjtën faqe

566
00:33:31,330 --> 00:33:33,130
me të njëjtën klasë.

567
00:33:33,130 --> 00:33:36,580
Kjo mund të jetë e dobishme për të thënë se unë dua të zgjidhni çdo gjë që është përqëndruar në faqen

568
00:33:36,580 --> 00:33:38,450
në vend se vetëm 1 gjë.

569
00:33:38,450 --> 00:33:40,310
>> Dhe së fundi, kjo e fundit këtu është pak më e komplikuar,

570
00:33:40,310 --> 00:33:43,890
por çfarë është kjo do të zgjidhni nga DOM?

571
00:33:46,650 --> 00:33:48,810
[Përgjigja e padëgjueshme Studenti] >> Çfarë është ajo?

572
00:33:48,810 --> 00:33:53,250
[Student] Çdo gjë që është një tag. Ne kemi 2 >> pjesë këtu.

573
00:33:53,250 --> 00:33:58,070
Pjesa e dytë do të thonë se unë dua të zgjidhni këto tags me një tag të dhëna,

574
00:33:58,070 --> 00:34:00,730
kështu që çdo element që është një tag input.

575
00:34:00,730 --> 00:34:03,080
Por unë nuk dua të vetëm të zgjidhni të gjitha inputeve

576
00:34:03,080 --> 00:34:05,170
sepse diçka si një buton submit mund të jetë një input

577
00:34:05,170 --> 00:34:08,409
dhe diçka si një kuti teksti mund të jetë një input.

578
00:34:08,409 --> 00:34:11,909
Pra, me këto kllapa katrore që unë jam duke thënë se unë vetëm dua të zgjidhni ato elemente

579
00:34:11,909 --> 00:34:14,110
që janë të tipit tekst.

580
00:34:14,110 --> 00:34:17,400
Diku në tag HTML time Unë kam një atribut quajtur lloji,

581
00:34:17,400 --> 00:34:19,750
dhe vlera e kësaj duhet të jetë atribut tekst.

582
00:34:19,750 --> 00:34:21,340
Pra, si në lidhje me këtë pjesë të parë këtu?

583
00:34:21,340 --> 00:34:25,489
Fjala e parë e këtij përzgjedhës është formë atëherë unë kam një hapësirë ​​dhe pastaj kjo pjesë input.

584
00:34:25,489 --> 00:34:29,620
Çfarë do të bëjë, duke formularin në frontin e tij?

585
00:34:33,409 --> 00:34:35,860
Kjo është në thelb do të kufizojnë kërkesën tonë.

586
00:34:35,860 --> 00:34:38,510
Kjo mund të jetë rast që ne kemi disa inpute në faqe

587
00:34:38,510 --> 00:34:41,080
që nuk janë pasardhës të një formë.

588
00:34:41,080 --> 00:34:46,150
Çfarë kjo do të bëjë është kjo do të thonë se unë vetëm dua tags dhëna që kanë diku mbi ta

589
00:34:46,150 --> 00:34:49,030
disa element prind i një forme.

590
00:34:49,030 --> 00:34:52,100
Dhe kështu në këtë mënyrë ne mund të bëjë këto pyetje më hierarkike

591
00:34:52,100 --> 00:34:55,000
kështu që ne nuk do të vetëm duhet të zgjidhni gjithçka që përputhen një përzgjedhës dhënë.

592
00:34:55,000 --> 00:35:00,760
Ne mund të lloj kufiri fushës së kësaj pyetje me diçka tjetër.

593
00:35:00,760 --> 00:35:04,000
Pra, tani që ne e dimë se si për të zgjedhur elemente në faqe,

594
00:35:04,000 --> 00:35:06,780
le të flasim pak për AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX është një akronim ende shumë të modës që qëndron për josinkronik JavaScript dhe XML.

596
00:35:12,270 --> 00:35:15,640
Kjo ndodh pikërisht kështu që XML është vetëm një mënyrë për të përfaqësuar të dhënave.

597
00:35:15,640 --> 00:35:20,920
>> Kjo lloj e popullaritetit të humbur kohët e fundit, kështu që X në AJAX nuk është përdorur gjatë gjithë kohës.

598
00:35:20,920 --> 00:35:26,220
Në thelb, ajo që AJAX na lejon të bëni është të bëjë kërkesa HTTP

599
00:35:26,220 --> 00:35:28,620
nga kuadrin e JavaScript.

600
00:35:28,620 --> 00:35:32,310
Kur ne jemi në shfletuesin tonë të internetit dhe ne jemi të lundrimit nëpër faqet dhe ne të klikoni një lidhje,

601
00:35:32,310 --> 00:35:37,790
çfarë shfletuesi ynë do të bëni është të bëjë një kërkesë HTTP në çfarëdo Link Ne click.

602
00:35:37,790 --> 00:35:41,670
Por kjo nuk është gjithmonë ideale, sepse në qoftë se është rasti, atëherë si Davidi u thënë:

603
00:35:41,670 --> 00:35:45,220
ne gjithmonë kemi për të bërë përdoruesit klikoni një buton ose klikoni Submit një lidhje

604
00:35:45,220 --> 00:35:50,380
në mënyrë që të bëjë çdo gjë të ndodhë që do të përfshijë një kërkesë HTTP.

605
00:35:50,380 --> 00:35:54,160
Pra, me AJAX, ne mund të bëjë këto kërkesa në emër të JavaScript.

606
00:35:54,160 --> 00:35:57,020
Kjo do të thotë sa herë që përdoruesi ndërvepron me faqe ose ndodh diçka,

607
00:35:57,020 --> 00:36:01,780
ne fakt mund të bëjë një kërkesë programatike për disa dosje tjetër PHP në faqen tonë të internetit

608
00:36:01,780 --> 00:36:06,280
apo ndonjë gjë tjetër dhe të rifitoj të dhënave që se dosja pështyn jashtë.

609
00:36:06,280 --> 00:36:09,860
Le të marrin një vështrim në një shembull të AJAX.

610
00:36:09,860 --> 00:36:16,140
Kjo është faqja jonë e Financave CS50, me të cilat shpresojmë se disa prej nesh janë të njohur.

611
00:36:16,140 --> 00:36:21,790
Nëse ne shikojmë në HTML të kësaj faqeje, ne shohim këtu se unë kam shtuar disa gjëra,

612
00:36:21,790 --> 00:36:23,820
një nga të cilat unë kam dhënë këtë formë një ID.

613
00:36:23,820 --> 00:36:26,480
Unë e kam thënë id = "formë-quote".

614
00:36:26,480 --> 00:36:31,910
Unë e kam bërë këtë vetëm për shkak se ajo do të bëjë këtë një pak më e lehtë për të zgjedhur nga DOM

615
00:36:31,910 --> 00:36:35,090
pasi që unë mund të bëjë vetëm një pyetje shumë të thjeshtë.

616
00:36:35,090 --> 00:36:38,960
Ajo që unë dua të bëj këtu është që unë dua të zgjidhur disa probleme me CS50 Financave.

617
00:36:38,960 --> 00:36:41,550
Pra, nëse ne do të shkojmë për të finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
çdo herë që unë dua të të marrë një kuotë, unë duhet të klikoni këtë buton të marrë kuotë,

619
00:36:45,700 --> 00:36:48,960
dhe se Get butonin Cituar pastaj merr mua për një faqe të tërë.

620
00:36:48,960 --> 00:36:52,400
Dhe në qoftë se unë dua një tjetër kuotën, unë kam për të goditur butonin mbrapa dhe pastaj shtypni atë në,

621
00:36:52,400 --> 00:36:54,480
Kam marrë një kuotë, dhe unë goditi butonin Back.

622
00:36:54,480 --> 00:36:56,840
Kjo me të vërtetë nuk është përvoja më e mirë përdoruesi.

623
00:36:56,840 --> 00:37:01,570
Kush do të vërtetë të përdorni faqen e internetit në qoftë se është i ngadalshëm që të marrë çmimet e aksioneve?

624
00:37:01,570 --> 00:37:05,630
Kështu që ajo që ne duam të bëjmë me AJAX është hequr atë hap të shkuar në një faqe të veçantë

625
00:37:05,630 --> 00:37:08,410
në mënyrë për të parë rezultatet.

626
00:37:08,410 --> 00:37:11,240
>> Ajo që ne jemi me të vërtetë vetëm duke i kërkuar për të është se çmimi me të vërtetë të vogël,

627
00:37:11,240 --> 00:37:14,240
dhe kjo është vetëm një sasi të vogël e të dhënave me të vërtetë.

628
00:37:14,240 --> 00:37:17,400
Kështu që nuk ka nevojë për mua për të shkuar një tjetër faqe të tërë HTML,

629
00:37:17,400 --> 00:37:20,670
shkarkoni një grumbull të tërë të re e HTML, ndoshta shkarko imazhe disa më shumë,

630
00:37:20,670 --> 00:37:24,410
disa fotografi të tjera CSS vetëm për mua që të përgjigjem në këtë pyetje shumë e thjeshtë

631
00:37:24,410 --> 00:37:27,810
se sa e bën këtë kosto aksioneve.

632
00:37:27,810 --> 00:37:31,000
Me AJAX ne mund të bëjë këtë një shumë më e lehtë.

633
00:37:31,000 --> 00:37:36,400
Ne shohim këtu poshtë se unë jam i lidhur në një skedar të quajtur JavaScript quote.js.

634
00:37:36,400 --> 00:37:40,140
Le të vërtetë të hapur atë file. Nuk ka.

635
00:37:42,610 --> 00:37:45,860
Të gjitha dosjet e mia JavaScript do të jenë të vendosura në HTML

636
00:37:45,860 --> 00:37:47,630
kështu që shfletuesi web mund të përdorni atë.

637
00:37:47,630 --> 00:37:50,330
Pastaj ne kemi një drejtori të veçantë këtu për JavaScript,

638
00:37:50,330 --> 00:37:54,340
dhe tani këtu është quote.js.

639
00:37:54,340 --> 00:38:00,930
Në krye të këtij file këtë thotë këtu që unë dua të presin për faqe të tërë të jenë të ngarkuar

640
00:38:00,930 --> 00:38:04,830
para se unë të përpiqet të bëjë asgjë. Pse është se e nevojshme?

641
00:38:04,830 --> 00:38:08,650
Ajo rezulton se gjë tjetër që unë jam duke shkuar për të bërë këtu është të fillojmë të shikojmë për një element

642
00:38:08,650 --> 00:38:10,810
që përputhet me disa përzgjedhës.

643
00:38:10,810 --> 00:38:15,600
Nëse kjo JavaScript është ekzekutuar kurrë më parë ky element është i ngarkuar në faqe,

644
00:38:15,600 --> 00:38:17,820
atëherë gjithçka unë të përpiqet të bëjë nuk do të punojë

645
00:38:17,820 --> 00:38:20,580
sepse unë jam do të përpiqen të zgjidhni diçka që nuk është ende atje.

646
00:38:20,580 --> 00:38:23,780
Pra, kjo vijë deri krye thotë se unë dua që ju të prisni derisa çdo gjë është ngarkuar

647
00:38:23,780 --> 00:38:28,030
kështu që ne jemi të garantuar se çdo elementë që unë jam duke kërkuar për të vërtetë janë në faqe.

648
00:38:29,730 --> 00:38:34,310
Kjo shenjë dollar këtu do të thotë që unë jam duke përdorur bibliotekën e quajtur jQuery.

649
00:38:34,310 --> 00:38:38,570
Kjo bibliotekë jQuery na lejon të përdorni këto selectors se ne vetëm dukej në.

650
00:38:38,570 --> 00:38:44,010
Duke thënë $ pastaj kalon si një argument këtë formë # quote-,

651
00:38:44,010 --> 00:38:47,910
Unë tani jam zgjedhur atë formë që ne vetëm mori një vështrim në.

652
00:38:47,910 --> 00:38:52,290
Tani unë kam një përfaqësim të kësaj forme në kujtim disi.

653
00:38:52,290 --> 00:38:56,760
>> Në këtë objekt tani, ky përfaqësim i formës,

654
00:38:56,760 --> 00:38:58,890
Unë jam tani duke përdorur një funksion të quajtur në.

655
00:38:58,890 --> 00:39:02,710
Çfarë ky funksion nuk është se do të lidhni një mbajtës ngjarje.

656
00:39:02,710 --> 00:39:06,310
Ngjarja që ne jemi duke shkuar për të dëgjuar për të është ngjarja submit.

657
00:39:06,310 --> 00:39:08,890
Kështu që kur përdoruesi klikon butonin Submit që shtyn ose Enter,

658
00:39:08,890 --> 00:39:11,730
kjo ngjarje do të zjarrit.

659
00:39:11,730 --> 00:39:16,390
Nga hooking në këtë, unë tani mund të pranoj sjelljen e parazgjedhur të formularit.

660
00:39:16,390 --> 00:39:19,770
Pa këtë JavaScript, formë do të paraqesë në çfarëdo skedar PHP

661
00:39:19,770 --> 00:39:22,110
kemi përdorur në atë atribut veprimit.

662
00:39:22,110 --> 00:39:25,440
Por në vend, unë jam tani duke thënë, prisni, prisni, prisni, unë nuk dua që ju të vërtetë të bërë këtë.

663
00:39:25,440 --> 00:39:31,140
Unë dua që kjo të ndodhë para se të shkoni dhe të përpiqet të paraqesë një skedar PHP.

664
00:39:31,140 --> 00:39:32,870
Tani çfarë unë dua të bëj?

665
00:39:32,870 --> 00:39:39,270
Në këtë pikë unë dua të përdorni AJAX disi të ngarkesës në atë që çmimi i aksioneve është.

666
00:39:39,270 --> 00:39:44,170
Gjëja e parë që duhet të dini është se çfarë aksioneve përdoruesi është duke kërkuar deri.

667
00:39:44,170 --> 00:39:46,760
Për të bërë që unë jam duke shkuar për të përdorur një tjetër përzgjedhës.

668
00:39:46,760 --> 00:39:49,020
Kjo është përzgjedhës i tretë kemi shikuar në para.

669
00:39:49,020 --> 00:39:54,460
Kjo thotë se unë dua të nisem këtë element formë me një ID të formës kuotë.

670
00:39:54,460 --> 00:39:58,440
Pastaj diku brenda kësaj forme nuk duhet të jetë një element input

671
00:39:58,440 --> 00:40:01,270
që ka një emër të simbolit.

672
00:40:01,270 --> 00:40:05,460
Nëse ne shikojmë prapa në HTML tonë, ne pamë se kemi pasur një kontribut [name = simboli].

673
00:40:05,460 --> 00:40:12,380
Kjo do të thotë se kjo do të zgjidhni atë kutinë e tekstit që përdoruesi është shtypur në.

674
00:40:12,380 --> 00:40:13,870
Kjo është e bukur. Ne kemi kutinë e tekstit.

675
00:40:13,870 --> 00:40:17,360
Tani ne vetëm duhet të dini se çfarë është në brendësi të saj.

676
00:40:17,360 --> 00:40:20,290
Për ta bërë këtë ne mund të quajmë këtë metodë këtu, kjo. Val,

677
00:40:20,290 --> 00:40:23,240
dhe kjo thotë se unë e di se çfarë kuti teksti që keni.

678
00:40:23,240 --> 00:40:28,160
Unë dua që ju të më thoni se çfarë është përdorues shtypur në atë kutinë e tekstit.

679
00:40:28,160 --> 00:40:34,440
Tani ne kemi një varg të quajtur simbol që është e barabartë me çdo gjë që përdoruesit typed in

680
00:40:34,440 --> 00:40:39,820
Kjo është e bukur. Ne mund të përdorim atë varg tani për të bërë kërkesën tonë.

681
00:40:39,820 --> 00:40:42,450
Ky është një funksion i ri këtu, kjo $,

682
00:40:42,450 --> 00:40:44,900
përveç ne jemi nuk do të përzgjedhjen e elementeve,

683
00:40:44,900 --> 00:40:48,910
ne jemi duke shkuar për të thirrur një funksion të ndryshëm që është dhënë për ne nga jQuery.

684
00:40:48,910 --> 00:40:54,810
Ky funksion AJAX është ajo që është në të vërtetë do të bëjë këtë kërkesë HTTP.

685
00:40:54,810 --> 00:40:57,000
Pra, ne duhet të tregoni atë disa gjëra.

686
00:40:57,000 --> 00:41:01,410
Gjëja e parë që ne duhet të them këtë funksion është vendi ku unë dua kërkesa për të shkuar.

687
00:41:01,410 --> 00:41:08,910
Diku në projektin tim unë kam këtë fotografi në brendësi të directory HTML quajtur quote.php.

688
00:41:08,910 --> 00:41:15,150
Unë mund të hyni në këtë skedar, ne pamë, ashtu si ky, nëse unë shkoj në localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Unë dua JavaScript time për të bërë një kërkesë në atë faqe.

690
00:41:20,450 --> 00:41:22,920
Çfarë lloji i kërkesës tani?

691
00:41:22,920 --> 00:41:27,210
Ne e pamë më parë se forma e ka atë metodë = "post" atribut,

692
00:41:27,210 --> 00:41:29,270
dhe kjo do të thotë se do të bëjë një kërkesë PAS,

693
00:41:29,270 --> 00:41:32,630
kështu që ajo nuk do të vënë asgjë në URL, më tepër se një kërkesë të marrë,

694
00:41:32,630 --> 00:41:36,860
i cili vetëm do të pushohen nga puna në qoftë se ne të arrihen vetëm faqe me shfletuesin web, për shembull.

695
00:41:36,860 --> 00:41:41,260
Tani ne kemi thënë që unë dua të bëj një kërkesë PAS HTTP

696
00:41:41,260 --> 00:41:44,840
tek një faqe të vendosura në quote.php.

697
00:41:44,840 --> 00:41:51,490
Kur ne të dorëzojë formularin, mos harroni ne mund të hyni në elementet e dhëna brenda e kësaj forme

698
00:41:51,490 --> 00:41:54,430
me atë variabël $ _POST.

699
00:41:54,430 --> 00:41:58,710
Deri më tani në histori nuk kemi dërguar ndonjë të vërtetë së bashku dhënave ende.

700
00:41:58,710 --> 00:42:00,640
Ne kemi vetëm tha se ne jemi duke e bërë një kërkesë AJAX

701
00:42:00,640 --> 00:42:03,200
dhe këtu është lloji i kërkesës që ne jemi duke e bërë.

702
00:42:03,200 --> 00:42:07,090
Tani ne kemi nevojë që në fakt të dërguar disa të dhëna në faqe.

703
00:42:07,090 --> 00:42:10,930
Për ta bërë këtë ne mund të përdorim këtë pronë të quajtur dhënave.

704
00:42:10,930 --> 00:42:14,950
Vlera e kësaj prone është në fakt një grup shoqerues.

705
00:42:14,950 --> 00:42:19,390
Arsyeja për këtë është se na lejon që të dërgojë më shumë se vetëm një pjesë e të dhënave 1.

706
00:42:19,390 --> 00:42:24,750
Kjo është arsyeja pse ne kemi këto formatimin e teksteve kaçurrel mbivendosur këtu brenda këtyre formatimin e teksteve kaçurrel tjera.

707
00:42:24,750 --> 00:42:29,680
Çelësat në këto vargjeve associative do të jetë e njëjta gjë

708
00:42:29,680 --> 00:42:32,630
si ato Emri atribuon elementet tona në formë.

709
00:42:32,630 --> 00:42:35,740
Kjo do të thotë se në qoftë se unë po dërgoj përgjatë një çelës të simbolit,

710
00:42:35,740 --> 00:42:41,870
që do të thotë faqja ime PHP mund të hyni në këto të dhëna me $ _POST [simbolin]

711
00:42:41,870 --> 00:42:44,640
ashtu si ne e bëmë më parë, kur ne ishim dorëzuar një formular.

712
00:42:44,640 --> 00:42:47,090
Dhe tani të dhënat aktuale ne duam të dërgoni

713
00:42:47,090 --> 00:42:50,790
do të jetë brenda vlera e këtij grup asociative.

714
00:42:50,790 --> 00:42:54,070
>> Ne ruajtur këtë tekst në një simbol ndryshueshme quajtur,

715
00:42:54,070 --> 00:42:57,380
dhe kështu që ne jemi të dërguar së bashku tani një çelës të simbolit

716
00:42:57,380 --> 00:43:01,380
dhe një vlerë të çfarëdo përdoruesi typed in

717
00:43:01,380 --> 00:43:06,270
Tani ne kemi bërë këtë kërkesë HTTP, fotografi PHP ynë ka ekzekutuar,

718
00:43:06,270 --> 00:43:11,480
dhe ai do të dërgojë disa të dhëna mbrapa tani për klientin se vetëm e bëri këtë kërkesë.

719
00:43:11,480 --> 00:43:15,220
Tani ne kemi nevojë për t'iu përgjigjur çfarëdo server na tha.

720
00:43:15,220 --> 00:43:20,180
Për ta bërë këtë ne kemi këtë pronë fundit këtu quhet sukses.

721
00:43:20,180 --> 00:43:24,240
Vlera e këtij çelësi suksesit është në të vërtetë do të jetë një funksion,

722
00:43:24,240 --> 00:43:26,910
dhe kjo është një nga gjërat me të vërtetë e ftohtë që ju mund të bëni me JavaScript.

723
00:43:26,910 --> 00:43:31,720
Jo vetëm që mund të keni ints ose vargjeve si brenda vlerës së një grup asociativ

724
00:43:31,720 --> 00:43:34,170
ne gjithashtu mund të ketë një funksion.

725
00:43:34,170 --> 00:43:36,380
Pra, duke thënë sukses, ky është çelësi im.

726
00:43:36,380 --> 00:43:38,830
Një zorrës së trashë thotë se këtu vjen vlerën,

727
00:43:38,830 --> 00:43:41,810
dhe tani vlera e kjo është në fakt një funksion.

728
00:43:41,810 --> 00:43:44,460
Pra, ne nuk kemi nevojë për t'i dhënë këtij funksioni një emër në vetvete.

729
00:43:44,460 --> 00:43:48,820
Ne vetëm mund të thonë se kjo do të jetë një funksion. Ajo do të marrë 1 argument.

730
00:43:48,820 --> 00:43:51,190
Argumenti për këtë funksion do të jetë

731
00:43:51,190 --> 00:43:54,460
çfarëdo server na dërgoi përsëri nga kërkesa.

732
00:43:54,460 --> 00:43:57,750
Ashtu si kur shfletuesi jonë bën një kërkesë, serveri dërgon diçka mbrapa

733
00:43:57,750 --> 00:43:59,060
dhe shfletuesi shfaq atë,

734
00:43:59,060 --> 00:44:03,030
në kontekstin e AJAX ne vetëm bërë një kërkesë, serveri dërguar diçka mbrapa,

735
00:44:03,030 --> 00:44:07,110
dhe tani ne kemi përfaqësuar se si një varg.

736
00:44:07,110 --> 00:44:11,280
Me këtë varg Unë vetëm do të doja për të shfaqur që në faqe.

737
00:44:11,280 --> 00:44:14,040
Për të bërë që unë jam do të ketë një përzgjedhës të fundit.

738
00:44:14,040 --> 00:44:17,570
Unë dua për të zgjedhur elementin me çmim ID.

739
00:44:17,570 --> 00:44:20,710
Kjo është vetëm një div zbrazët që unë kam krijuar në faqe,

740
00:44:20,710 --> 00:44:26,640
dhe unë dua të vendosur përmbajtjen e atij div të jetë çfarëdo server na dërguan përsëri.

741
00:44:26,640 --> 00:44:30,280
Unë kam modifikuar fakt quote.php pak.

742
00:44:30,280 --> 00:44:33,460
>> Në vend se të kryejë detyrën e quajtur dhe pasqyrim disa faqe,

743
00:44:33,460 --> 00:44:38,100
quote.php tani është thjesht do të shtypura nga vlera e aksioneve si një varg.

744
00:44:38,100 --> 00:44:41,880
Pra, nëse ju keni qenë në fakt vizitoni faqe, ju vetëm do të shihni se vargut të vogël

745
00:44:41,880 --> 00:44:45,030
e çfarëdo çmimi i aksioneve është.

746
00:44:45,030 --> 00:44:50,170
Një gjë e fundit që ne duhet të bëjmë këtu është vetëm sigurohuni këtë funksion të kthimit të rreme.

747
00:44:50,170 --> 00:44:53,560
Çfarë kjo do të thotë është se në qoftë se unë jam në brendësi të një mbajtës ngjarje

748
00:44:53,560 --> 00:44:57,300
dhe se mbajtës ngjarje kthen rreme në vend të kthimit të vërteta,

749
00:44:57,300 --> 00:45:01,510
që do të thotë se unë nuk dua ngjarje origjinale të zjarrit.

750
00:45:01,510 --> 00:45:05,270
Në këtë rast, në qoftë se ne nuk kemi ndonjë JavaScript dhe ne dorëzuar një formular,

751
00:45:05,270 --> 00:45:08,280
shfletuesi tonë të internetit do të thotë, "Unë jam duke shkuar për të dërguar të dhëna se bashku",

752
00:45:08,280 --> 00:45:10,130
dhe ata do të ju dërgojnë në një tjetër faqe.

753
00:45:10,130 --> 00:45:14,360
Sepse ne jemi duke përdorur AJAX tani, nuk ka nevojë për të dërguar përdoruesit në një faqe.

754
00:45:14,360 --> 00:45:17,920
Ne jemi vetëm duke shkuar për të shfaqur rezultatet dinamike në këtë faqe njëjtë.

755
00:45:17,920 --> 00:45:21,460
Ne me të vërtetë nuk duan ata të shkojnë kudo, dhe unë dua të qëndrojnë në të njëjtën faqe.

756
00:45:21,460 --> 00:45:27,060
Pra, duke u kthyer rreme, ne sigurohemi se forma nuk ka bërë që për ne.

757
00:45:27,060 --> 00:45:31,170
Le të marrin një vështrim në atë që ky fakt duket si.

758
00:45:31,170 --> 00:45:34,180
Faqja jonë quote duket njëjtë.

759
00:45:34,180 --> 00:45:37,240
Më lejoni të tërheq lart inspektorin këtu poshtë kështu që ne mund të shohim se çfarë po ndodh.

760
00:45:37,240 --> 00:45:40,270
Bëjnë atë një pak më pak i madh.

761
00:45:40,270 --> 00:45:44,590
Mos harroni, nëse kemi hapur deri tab Rrjetit, ky është vendi ku ne mund të shohim të gjitha kërkesat HTTP

762
00:45:44,590 --> 00:45:47,570
që po ndodhin në faqe.

763
00:45:47,570 --> 00:45:52,890
>> Për një simbol më lejoni të shkruani në AAPL dhe kliko Get kuotë.

764
00:45:52,890 --> 00:45:56,720
Tani ne pamë se një pjesë e Apple kushton një numër dollarë

765
00:45:56,720 --> 00:46:00,410
vetëm u shfaq në faqe, por URL nuk ka ndryshuar fare.

766
00:46:00,410 --> 00:46:04,570
Në fakt, këtu është kërkesa HTTP që kemi bërë vetëm.

767
00:46:04,570 --> 00:46:09,980
Ne kemi bërë një kërkesë të postoni në quote.php. Që e bën kuptim.

768
00:46:09,980 --> 00:46:12,800
Kjo është ajo që na dërgoi server prapa.

769
00:46:12,800 --> 00:46:16,320
Ajo nuk është më ky dokument HTML gjigant me imazhe dhe gjëra si kjo,

770
00:46:16,320 --> 00:46:20,920
kjo është vetëm një linjë të tekstit, dhe pastaj ne thjesht shfaqet linjën e tekstit.

771
00:46:20,920 --> 00:46:26,290
Nëse ne do të shkojmë përsëri në headers dhe të shohim se çfarë ne fakt ka dërguar në brendësi të kësaj kërkese HTTP,

772
00:46:26,290 --> 00:46:33,950
ne mund të shohim këtu poshtë që kemi dërguar përgjatë një kyç dhe një simbol i vlerës së AAPL,

773
00:46:33,950 --> 00:46:36,430
e cila është ajo përdorues shtypen in

774
00:46:36,430 --> 00:46:39,230
Kjo është e mirë, por kjo është ende pak i bezdisshëm.

775
00:46:39,230 --> 00:46:42,490
Unë ende duhet të klikoni këtë buton për të marrë të japin kuotën e aksioneve.

776
00:46:42,490 --> 00:46:45,880
Ne jemi njerëz të zënë dhe ne nuk kemi kohë për të klikoni butonat.

777
00:46:45,880 --> 00:46:49,910
Google realizuar këtë pak kohë më parë, kur ata implementuar Google Instant.

778
00:46:49,910 --> 00:46:53,590
Çfarë e bën Google Instant është si ju jeni të shtypni vetëm ajo fillon shfaqja e rezultateve për ju

779
00:46:53,590 --> 00:46:56,520
kështu që ju nuk duhet të shqetësohen për madje klikuar Kërko.

780
00:46:56,520 --> 00:46:58,730
Në fakt, një histori fun lidhur me këtë.

781
00:46:58,730 --> 00:47:01,100
Pasi Google Instant doli, njerëzit ishin si, "Whoa, kjo është super e mahnitshme."

782
00:47:01,100 --> 00:47:02,540
"Kjo është kaq i ftohtë."

783
00:47:02,540 --> 00:47:05,950
Dhe një student në Stanford poshtë cili ishte në atë kohë 19

784
00:47:05,950 --> 00:47:09,000
bërë këtë vend të quajtur YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Të gjitha Instant YouTube nuk është efektive kërkoni YouTube çast.

786
00:47:13,170 --> 00:47:17,020
Pra, në vend që të shkojnë në YouTube.com dhe e goditi Kërko,

787
00:47:17,020 --> 00:47:21,650
kur filloni të shtypni në diçka si YouTube Instant CS50,

788
00:47:21,650 --> 00:47:25,320
ne mund të shohim këtu se ajo është duke u përpjekur për të në një lidhje të ngadaltë të internetit

789
00:47:25,320 --> 00:47:28,500
populloj këto rezultate jetojnë.

790
00:47:28,500 --> 00:47:35,590
Për të bërë që ne mund të bëjë në fakt një modifikim shumë e thjeshtë për quote.js dosjen tonë.

791
00:47:35,590 --> 00:47:40,900
Tani për tani ne jemi bashkëngjitur kësaj ngjarje, kur forma është dorëzuar.

792
00:47:40,900 --> 00:47:43,760
Ne nuk të vërtetë duan të bëjnë përdoruesit paraqesë atë formë më,

793
00:47:43,760 --> 00:47:48,570
kështu që le të zjarrit në vend këtë ngjarje çdo herë përdoruesi shtyn një kyç.

794
00:47:48,570 --> 00:47:53,200
Për ta bërë këtë le të parë të ndryshojë nga ngjarje të paraqesë në keyup.

795
00:47:53,200 --> 00:47:55,740
Kjo do të thotë se në vend se duke pritur për forma të paraqesë,

796
00:47:55,740 --> 00:47:58,490
çdo herë kyç është ngritur, diçka do të ndodhë.

797
00:47:58,490 --> 00:48:02,030
Kjo nuk ka kuptim të bashkëngjitni këtë ngjarje keyup në formën e tërë.

798
00:48:02,030 --> 00:48:05,080
Ne me të vërtetë vetëm kujdeset për atë kutinë e kërkimit.

799
00:48:05,080 --> 00:48:09,320
>> Për të zgjedhur që tani, ne mund të ndryshojmë këtë jetë, në vend se të japin kuotën e-formë,

800
00:48:09,320 --> 00:48:14,220
formë-kuotë dhe ne do të kemi një kontribut (type = text) ose ne mund të themi (name = simbol) -

801
00:48:14,220 --> 00:48:16,420
çfarëdo që ne duam.

802
00:48:16,420 --> 00:48:18,650
Tani ka një gjë e fundit që ne duhet të bëjmë.

803
00:48:18,650 --> 00:48:21,190
Kujtojmë këtu poshtë, kur kemi thënë kthimi rreme

804
00:48:21,190 --> 00:48:24,370
kemi thënë ne nuk duam që ngjarje parazgjedhur të zjarrit.

805
00:48:24,370 --> 00:48:26,390
Por kjo ndodh pikërisht kështu që nëse ne disable që tani,

806
00:48:26,390 --> 00:48:29,660
çdo gjë që ne shkruani në nuk do të shfaqen në shfletuesin më

807
00:48:29,660 --> 00:48:33,000
sepse kjo do të jetë sjellja e parazgjedhur të shtypni në një kuti teksti.

808
00:48:33,000 --> 00:48:38,660
Ne nuk duam të refuzo atë, kështu që le të shkatërroj ky kthim rreme.

809
00:48:38,660 --> 00:48:44,800
Nëse ne të shpëtuar atë dhe rifreskoni faqen, tani kur filloni të shtypni AAPL

810
00:48:44,800 --> 00:48:50,160
ju do të shihni se çmimi i aksioneve në fund këtu është duke përfunduar automatikisht.

811
00:48:50,160 --> 00:48:53,150
Kështu që këtu është CS50 Instant Financave.

812
00:48:53,150 --> 00:48:55,860
Në fakt një histori në lidhje me fun çast YouTube

813
00:48:55,860 --> 00:48:59,420
është se nxënësi vetëm lloj i shkroi atë si një projekt 1-nate,

814
00:48:59,420 --> 00:49:03,800
dhe ditën tjetër ai u ofrua një punë nga CEO YouTube.

815
00:49:03,800 --> 00:49:10,610
Pra, aq e thjeshtë sa që, ju CS50 studentët, projektet tuaja përfundimtare mund të merrni ju një punë në YouTube.

816
00:49:10,610 --> 00:49:14,720
Diçka si kjo është një ide me të vërtetë e ftohtë për një projekt përfundimtar, e drejtë?

817
00:49:14,720 --> 00:49:18,170
Ne kemi pasur disa funksionalitetin ekzistuese që kemi dashur të integrohen me të.

818
00:49:18,170 --> 00:49:20,330
Ne të përmirësuar user experience pak,

819
00:49:20,330 --> 00:49:24,340
dhe papritmas kërkoni diçka në YouTube çast mund të jetë shumë më e lehtë

820
00:49:24,340 --> 00:49:27,290
se të kërkoni për atë në YouTube rregullt.

821
00:49:27,290 --> 00:49:30,790
Pra, kjo është AJAX në një fjalë.

822
00:49:30,790 --> 00:49:34,860
>> Në shembujt që Jozefi u treguar, ne pamë një shumë të autocompletes,

823
00:49:34,860 --> 00:49:39,250
dhe ato janë autocompletes vërtetë, të vërtetë i dobishëm për shkak se ne nuk duhet të mbani mend -

824
00:49:39,250 --> 00:49:41,770
Për shembull, nëse ju nuk e mbani mend çmimin aksioneve për Apple

825
00:49:41,770 --> 00:49:45,110
dhe ne vetëm e di se është diçka aa, në vend se vetëm duke thënë për mua,

826
00:49:45,110 --> 00:49:48,740
"Një pjesë e kësaj gjë kushton shumë para këtë",

827
00:49:48,740 --> 00:49:52,540
Unë do lloj të doja të di se çfarë aksione të fillojë me AA.

828
00:49:52,540 --> 00:49:58,340
Ne mund të bëjmë që me të vërtetë mirë me bibliotekën bootstrap që është përfshirë tashmë

829
00:49:58,340 --> 00:50:01,380
brenda CS50 Financave.

830
00:50:01,380 --> 00:50:09,390
Nëse keni ardhur deri këtu me tag JavaScript dhe lëvizni poshtë për të Typeahead,

831
00:50:09,390 --> 00:50:13,730
kjo është vetëm një plugin bukur se dikush tashmë ka shkruar për ne,

832
00:50:13,730 --> 00:50:16,980
dhe ne lehtë mund të përdorni funksionet e saj si kjo.

833
00:50:16,980 --> 00:50:21,410
I shtypur në një A dhe këtu është një listë e disa shteteve që fillojnë me A.

834
00:50:21,410 --> 00:50:25,360
Le të thonë se unë mendoj se kjo është me të vërtetë të qetë dhe kjo është koha për mua që të përfshijë këtë në faqen time.

835
00:50:25,360 --> 00:50:28,300
Ajo rezulton se kjo është me të vërtetë, të vërtetë të thjeshtë.

836
00:50:28,300 --> 00:50:32,810
Le të hidhen mbi këtu për quote3.js.

837
00:50:34,890 --> 00:50:37,380
Fotografi tim duket pak më ndryshe.

838
00:50:37,380 --> 00:50:39,700
Këtu poshtë të gjitha AJAX gjëra sime është njëjtë.

839
00:50:39,700 --> 00:50:43,170
Unë dua të ngarkesës e të dhënave të aksioneve pa pasur nevojë të shkoni në një faqe tjetër.

840
00:50:43,170 --> 00:50:46,220
Por tani unë dua të përdorni këtë plugin.

841
00:50:46,220 --> 00:50:51,020
Dokumentacioni Bootstrap ka shembuj e madhe e pikërisht si unë mund ta bëjë këtë.

842
00:50:51,020 --> 00:50:54,350
Unë dua të them, "Ja input që unë dua të Autocomplete në,"

843
00:50:54,350 --> 00:50:56,640
dhe unë jam duke shkuar për të thirrur këtë funksion të quajtur typeahead,

844
00:50:56,640 --> 00:50:59,730
dhe që do të trajtojë të gjitha stuff Typeahead për ne.

845
00:50:59,730 --> 00:51:02,090
Ajo do të nisja listën, ajo do të bëjë të gjitha filtrim tona.

846
00:51:02,090 --> 00:51:06,680
E vetmja gjë që duhet të dini është se çfarë të dhënat që ne jemi në autocompleting.

847
00:51:06,680 --> 00:51:10,480
Pra, kam gjetur këtë çelës vetëm duke lexuar dokumentacionin dhe duke kërkuar në shembujt.

848
00:51:10,480 --> 00:51:14,150
Nëse unë jap një çelës të burimit, vlera e këtij kyçe

849
00:51:14,150 --> 00:51:17,770
është vetëm disa grup të gjëra unë dua të Autocomplete në.

850
00:51:17,770 --> 00:51:20,180
Ky variabël erdhi nga kjo skedë tjetër.

851
00:51:20,180 --> 00:51:23,400
I hapur deri symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Kjo është vetëm symbols.js këtë koleksion të vërtetë, të vërtetë e madhe që përmbajnë strings

853
00:51:27,980 --> 00:51:32,080
e të gjitha këtyre simboleve të aksioneve nga NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Nëse unë dua të hidhen përsëri në HTML, kështu jharvard, vhosts, globalhost, HTML, templates,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Që nga ajo është quajtur tani quote3.js, më lejoni të ndryshojë skedarin JavaScript unë jam përfshirë këtu.

857
00:51:50,910 --> 00:51:55,110
Tani unë kam quote3.js, kështu që unë jam duke shkuar për të ngarkuar në atë dosje JavaScript veçantë,

858
00:51:55,110 --> 00:51:57,910
ai që ka atë Autocomplete bootstrap.

859
00:51:57,910 --> 00:52:04,430
Tani kur unë hidhen përsëri në shfletuesin, rifreskoni faqen, dhe unë filloni të shtypni AA,

860
00:52:04,430 --> 00:52:06,880
ka autocomplete ime. Dhe kjo ishte me të vërtetë të thjeshtë si ajo.

861
00:52:06,880 --> 00:52:11,400
I kishte 1 linjë të kodit që sapo tha, "Këtu janë gjërat që unë dua të Autocomplete në,"

862
00:52:11,400 --> 00:52:16,590
dhe papritmas unë kam këtë funksionalitet të vërtetë, të vërtetë të bukur me një shumë jo të tërë përpjekje në të gjitha.

863
00:52:16,590 --> 00:52:19,810
Si ju jeni zhvillimin e faqet e internetit dhe veçanërisht anën e përparme fund të gjërave,

864
00:52:19,810 --> 00:52:21,840
ju do të jeni për të gjetur këtë është rasti shumë.

865
00:52:21,840 --> 00:52:25,700
Nuk janë një, shumë shumë, shumë e bibliotekave të vërtetë cool lirë atje

866
00:52:25,700 --> 00:52:30,190
që e bëjnë atë super të lehtë për të bërë gjëra të tilla si kjo.

867
00:52:30,190 --> 00:52:37,230
Dikush mund të mendoj për ndonjë meta e thjesht autocompleting në këtë listë të madhe të simboleve?

868
00:52:37,230 --> 00:52:41,580
Çfarë mund të jetë diçka që nuk është e mirë me këtë qasje?

869
00:52:42,790 --> 00:52:45,960
Po. >> [Student] Time, në qoftë se ju keni një shumë të [padëgjueshme]

870
00:52:45,960 --> 00:52:50,420
Po. Tani për tani ne jemi shkarkoni këtë skedar të madh JavaScript dhe ka një shumë e simboleve.

871
00:52:50,420 --> 00:52:54,360
Dhe kështu që nëse ne kemi një ton të gjëra, ky lloj mund të rrisë latente e jo vetëm në kërkim

872
00:52:54,360 --> 00:52:56,600
por edhe shkarkimit skedarin aktual.

873
00:52:56,600 --> 00:52:58,670
Madhe. Çdo gjë tjetër?

874
00:53:01,950 --> 00:53:05,280
Tani për tani nuk ka asnjë kuptim të vërtetë rëndësi.

875
00:53:05,280 --> 00:53:08,190
Nëse unë të shkruani në një një, kompanitë që shfaqen këtu

876
00:53:08,190 --> 00:53:11,220
nuk mund të jetë kompanitë më të njohura që fillojnë me A.

877
00:53:11,220 --> 00:53:17,130
>> Para se të shkoj për të Apple, ajo mund të marrë disa karaktere më shumë për të gjetur atë që unë jam duke kërkuar për të.

878
00:53:17,130 --> 00:53:20,420
Kjo autocomplete nuk e ka këtë ndjenjë të rëndësisë.

879
00:53:20,420 --> 00:53:24,400
Është vetëm do të thotë: "Çdo gjë që përputhet unë jam duke shkuar për të shfaqur."

880
00:53:24,400 --> 00:53:30,510
Në vend të kësaj, unë do të doja të integrohen disi njëfarë rëndësie në kërkimet e mia.

881
00:53:30,510 --> 00:53:36,440
Nëse unë shkoj këtu për Yahoo! Financave, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Në qoftë se unë të përpiqet për të hyrë në një simbol në faqen Yahoo! Financave

883
00:53:42,100 --> 00:53:52,310
dhe unë filloni të shtypni GOOG, unë kam këtë listë bukur të gjërave.

884
00:53:52,310 --> 00:53:57,100
Qartë, kjo duket si Yahoo! Financave është duke bërë diçka më të zgjuar këtu.

885
00:53:57,100 --> 00:53:59,790
Ata kanë njëfarë rëndësie dhe ata gjithashtu kanë informacion shtesë

886
00:53:59,790 --> 00:54:01,430
si emrin e aksioneve.

887
00:54:01,430 --> 00:54:05,850
Kjo është diçka që unë nuk mund të vërtetë të merrni vetëm me listën time të aksioneve të simboleve.

888
00:54:05,850 --> 00:54:09,520
Unë dua këtë dhe kështu që unë jam duke shkuar për të marrë atë.

889
00:54:09,520 --> 00:54:11,790
Për ta bërë këtë le të bëjnë disa gjëra.

890
00:54:11,790 --> 00:54:15,580
Le të parë të hapur deri inspektorin në këtë faqe

891
00:54:15,580 --> 00:54:18,100
sepse ne pamë se kjo faqe nuk është e ngarkimit në të gjitha,

892
00:54:18,100 --> 00:54:21,960
kështu që ajo është ndoshta duke përdorur AJAX disi të ngarkimit të dhënat e saj.

893
00:54:21,960 --> 00:54:23,920
Ne mund të gjeni se çfarë të dhënave është e ngarkimit.

894
00:54:23,920 --> 00:54:28,390
Në qoftë se unë klikoni në këtë tab Network, këto do të jenë të gjitha kërkesat që fillojnë të shkarkuar.

895
00:54:28,390 --> 00:54:34,020
Tani, nëse unë lloji në goo, ne mund të shohim se Unë kam vetëm një kërkesë të re HTTP.

896
00:54:34,020 --> 00:54:37,490
Kjo është ndoshta ku se të dhënat po vjen nga.

897
00:54:37,490 --> 00:54:41,990
Pa dyshim, në qoftë se unë shoh këtë URL, e cila është pak i quajtur cuditerisht,

898
00:54:41,990 --> 00:54:46,930
ne mund të shohim se kjo është saktësisht ku Yahoo është dërguar të dhënat e saj nga jashtë.

899
00:54:46,930 --> 00:54:53,400
>> Unë kam krijuar një skedar të veçantë të quajtur suggest.php që është shumë e ngjashme në frymë të funksionit lookup.

900
00:54:53,400 --> 00:54:57,730
Kjo është në thelb do të bëjë një pyetje në URL Yahoo, kthehet disa të dhëna,

901
00:54:57,730 --> 00:54:59,750
dhe dërgoni atë për mua.

902
00:54:59,750 --> 00:55:02,570
Tani, në vend se duke përdorur këtë listë të madhe, të madhe të simboleve,

903
00:55:02,570 --> 00:55:05,280
Unë mund të përdorin gjëra të këndshme Yahoo rëndësia,

904
00:55:05,280 --> 00:55:08,150
dhe unë nuk kanë për ta shkarkuar këtë dosje masiv JavaScript.

905
00:55:08,150 --> 00:55:12,040
Unë jam vetëm duke shkuar për të tërhequr poshtë në fakt simbolet përkatëse të aksioneve.

906
00:55:12,040 --> 00:55:13,960
Le të hidhen në këtë.

907
00:55:13,960 --> 00:55:17,360
Pra html, js. Ne jemi tani në quote4.

908
00:55:17,360 --> 00:55:22,120
Tani ne jemi duke përdorur këtë nuk listë e madhe e dosjeve JavaScript.

909
00:55:22,120 --> 00:55:24,430
Por ka një lloj i vogël i problemit të projektimit këtu.

910
00:55:24,430 --> 00:55:28,200
Ne kemi thënë se në një AJAX është asinkron.

911
00:55:28,200 --> 00:55:31,000
Çfarë do të thotë është se kur unë të bëjë një kërkesë AJAX,

912
00:55:31,000 --> 00:55:36,490
në mënyrë të drejtë këtu në linjë 8, ky është vendi ku kërkesë AJAX im është qëlluar në të vërtetë.

913
00:55:36,490 --> 00:55:40,370
Le të thonë se tani kam disa kodin këtu poshtë se do të bëjë disa gjëra

914
00:55:40,370 --> 00:55:43,930
doja të paralajmërojë përdoruesit apo diçka të ndryshojë në faqe.

915
00:55:43,930 --> 00:55:49,830
Çfarë nuk do të ndodhë është shfletuesi nuk do të presë për këtë kërkesë për të vazhduar

916
00:55:49,830 --> 00:55:53,480
para se të vijnë poshtë dhe goditur këtë linjë.

917
00:55:53,480 --> 00:55:55,900
Kjo është pjesa asinkron.

918
00:55:55,900 --> 00:55:58,400
Ajo do të bëjë këtë kërkesë dhe thonë: "Kur të keni mbaruar,

919
00:55:58,400 --> 00:56:03,080
"Kthehen dhe të thërrasë atë funksion që ju thashë për të thirrur në brendësi të suksesit."

920
00:56:03,080 --> 00:56:07,300
Kjo do të thotë që ne nuk mund të shkarkoni të gjitha rezervat paraprakisht.

921
00:56:07,300 --> 00:56:10,300
Ne kemi nevojë për të bërë kërkesën dhe prisni për diçka që do të vijnë përsëri.

922
00:56:10,300 --> 00:56:13,330
Kjo do të thotë se para se, ne thjesht mund të them bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Ja lista e gjërave që unë dua që ju të Autocomplete në."

924
00:56:15,580 --> 00:56:18,950
Ne nuk mund ta bëjë këtë më, sepse ne nuk e dimë

925
00:56:18,950 --> 00:56:21,780
ajo që ne duam në fakt autocomplete në.

926
00:56:21,780 --> 00:56:25,190
Për fat të mirë, Bootstrap menduar për këtë, sepse ata janë njerëz të zgjuar atje,

927
00:56:25,190 --> 00:56:30,160
dhe ata në fakt na dha një tjetër mënyrë për të ngarkuar këtë plugin Typeahead.

928
00:56:30,160 --> 00:56:35,630
Para, vlera e kësaj prone burim ishte vetëm ky grup i madh i gjërave për Autocomplete në.

929
00:56:35,630 --> 00:56:39,580
>> Tani prona burimi është në fakt një funksion,

930
00:56:39,580 --> 00:56:44,580
dhe qëllimi i këtij funksioni është që të kuptoj se çfarë gjërat për Autocomplete në janë.

931
00:56:44,580 --> 00:56:48,730
Mënyra se si do të kuptoj se nga është ai do të kërkojë Financave Yahoo!

932
00:56:48,730 --> 00:56:51,750
çfarë gjërat më të mira për Autocomplete janë.

933
00:56:51,750 --> 00:56:54,500
Për të bërë këtë unë jam duke shkuar për të bërë një kërkesë shumë të ngjashme AJAX.

934
00:56:54,500 --> 00:56:59,010
Unë jam duke shkuar për të kërkuar këtë faqe në suggest.php.

935
00:56:59,010 --> 00:57:01,360
Unë dua të dërgoj përgjatë simbolet ende.

936
00:57:01,360 --> 00:57:05,570
Dhe tani suksesi im, dokumentacioni Bootstrap më tha

937
00:57:05,570 --> 00:57:09,130
që në mënyrë të populloj se lista e gjërave,

938
00:57:09,130 --> 00:57:14,370
të gjitha unë duhet të bëni është të kalojë në këtë grup tani në funksion callback.

939
00:57:14,370 --> 00:57:15,660
Por prisni një minutë.

940
00:57:15,660 --> 00:57:20,240
Nëse kjo është menduar të jetë një grup dhe AJAX është dërguar mua mbrapa tekst,

941
00:57:20,240 --> 00:57:22,720
si është e mundur kjo?

942
00:57:22,720 --> 00:57:27,910
Kjo paraqet një mënyrë të re të shkëmbimit të të dhënave JSON quajtur.

943
00:57:27,910 --> 00:57:33,000
Në këtë rast ne nuk jemi vetëm duke dërguar përsëri një varg të thjeshtë të tekstit.

944
00:57:33,000 --> 00:57:37,670
Tani ne jemi që kanë të bëjnë me këtë listë më kompleks të simboleve të aksioneve.

945
00:57:37,670 --> 00:57:41,730
Këto simbole aksioneve gjithashtu mund të përfshijnë gjëra të tilla si emri i kompanisë ose çmimet aktuale.

946
00:57:41,730 --> 00:57:47,550
Vetëm duke përdorur një varg të madh të gjatë që nuk është formatuar në asnjë mënyrë të parashikueshme

947
00:57:47,550 --> 00:57:51,970
nuk do të jetë mënyra më e mirë për të marrë këto të dhëna nga serveri Yahoo tek unë

948
00:57:51,970 --> 00:57:54,540
në një mënyrë që unë mund të lehtë të kuptojnë.

949
00:57:54,540 --> 00:58:01,280
JSON është një teknologji që merr përparësi se si ne krijojmë vargjeve associative në JavaScript.

950
00:58:01,280 --> 00:58:04,510
Kjo duket shumë si një grup JavaScript asociative,

951
00:58:04,510 --> 00:58:06,600
dhe në fakt, kjo është për shkak se ajo është.

952
00:58:06,600 --> 00:58:09,710
JSON qëndron për simbol JavaScript Object.

953
00:58:09,710 --> 00:58:15,020
Kjo është në thelb një format rënë dakord për transferimin e të dhënave mbrapa dhe me radhë.

954
00:58:15,020 --> 00:58:18,280
Ja ky objekt JSON JSON ose ky grup shoqerues

955
00:58:18,280 --> 00:58:21,010
është dërguar me disa të dhëna në lidhje me një kurs.

956
00:58:21,010 --> 00:58:25,110
>> Çelësat e kësaj grup janë gjëra të tilla si Natyrisht që ka një vlerë prej CS50,

957
00:58:25,110 --> 00:58:29,140
dhe këtu poshtë mund të shihni se unë mund të ketë një vlerë që është një grup.

958
00:58:29,140 --> 00:58:32,730
Unë nuk kam për të bërë gjëra të tilla si kuptoj nga vargjet dhe të kërkoni për presje

959
00:58:32,730 --> 00:58:35,330
dhe të bëjë gjëra të çmendur si kjo.

960
00:58:35,330 --> 00:58:38,820
Sepse kjo është deklaruar në këtë format JSON,

961
00:58:38,820 --> 00:58:43,510
JQuery JavaScript dhe tashmë kanë funksione për të kthyer një varg

962
00:58:43,510 --> 00:58:48,140
që duket si ky JSON në një grup aktuale JavaScript associative

963
00:58:48,140 --> 00:58:50,440
që ne mund të punojnë me të.

964
00:58:50,440 --> 00:58:56,660
Duke bërë që është aq e thjeshtë sa duke thënë se nuk është kjo, fotografi suggest.php,

965
00:58:56,660 --> 00:58:59,040
dërguar mua mbrapa thjesht një varg të tekstit,

966
00:58:59,040 --> 00:59:01,950
por unë e di se do të jetë dërguar mua mbrapa JSON.

967
00:59:01,950 --> 00:59:06,760
Kjo do të thotë se kjo JSON mund të konvertohet në një koleksion JavaScript asociative.

968
00:59:06,760 --> 00:59:10,830
Dhe kështu jQuery, unë do të doja që ju të bëni këtë për mua.

969
00:59:10,830 --> 00:59:13,990
Kjo do të thotë që ky parametër përgjigje këtu,

970
00:59:13,990 --> 00:59:16,070
kjo nuk është më vetëm një varg.

971
00:59:16,070 --> 00:59:19,860
Sepse ne kemi thënë se këtu vjen jQuery JSON disa,

972
00:59:19,860 --> 00:59:22,950
jQuery do të jetë mjaft i zgjuar për të thënë, "Ti kërkuar JSON?"

973
00:59:22,950 --> 00:59:26,890
"Unë jam duke shkuar për të kthyer atë në një grup shoqëruese për ju."

974
00:59:26,890 --> 00:59:32,100
Le të vërtetë të marrë një vështrim në skedën e rrjetit herë kemi quote4.js.

975
00:59:32,100 --> 00:59:35,400
Ne do të ndryshojë këtë dhe ringarkoni faqes.

976
00:59:37,150 --> 00:59:41,250
Tani unë jam duke shkuar për të shkruani në një-a përsëri.

977
00:59:41,250 --> 00:59:45,600
Unë kam bërë një çift të suggest.php kërkesa, por tani kjo përgjigje,

978
00:59:45,600 --> 00:59:48,670
në vend se vetëm të vargut, është JSON.

979
00:59:48,670 --> 00:59:52,580
Pra, unë kam një mbajtëse të hapur kaçurrel duke thënë: "Ja ku po vjen një grup shoqerues."

980
00:59:52,580 --> 00:59:56,830
>> Çelësi i parë dhe i vetëm i këtij grup associative quhet simbolet,

981
00:59:56,830 --> 01:00:00,240
dhe atëherë këtu është një grup i të gjitha simboleve përkatëse

982
01:00:00,240 --> 01:00:04,820
vijnë tani nga Yahoo! Financave, jo nga ajo lista gjigant.

983
01:00:06,110 --> 01:00:10,630
Kjo është se si unë thjesht mund të populloj këtë plugin Autocomplete

984
01:00:10,630 --> 01:00:14,280
me disa të dhëna që nuk vjen nga një skedar lokale që është paracaktuar tashmë

985
01:00:14,280 --> 01:00:17,490
por nga diçka tjetër.

986
01:00:17,490 --> 01:00:21,160
Ajo rezulton se ne në fakt mund të përfitojnë nga një teknologji të quajtur JSONP,

987
01:00:21,160 --> 01:00:27,420
ose JSON me mbushje, që do të eliminojë këtë ndërmjetës suggest.php.

988
01:00:27,420 --> 01:00:34,010
Por në vend që të bëjnë këtë, le të në vend të marrin një sy se si unë mund të përmirësojë këtë edhe më shumë.

989
01:00:34,010 --> 01:00:36,040
I really like Typeahead bootstrap së. Është me të vërtetë bukur.

990
01:00:36,040 --> 01:00:39,570
Por ne jemi duke marrë të mirë në JavaScript dhe ne duam të bërë këtë lloj të veten,

991
01:00:39,570 --> 01:00:43,870
ndoshta të marrë një vështrim në atë që ky plugin mund të jetë bërë.

992
01:00:43,870 --> 01:00:46,500
Le të më nuk përdorin këtë gjë Typeahead,

993
01:00:46,500 --> 01:00:50,550
dhe le të përpiqet të bëjë këtë listë të rezervave të sugjeruara veten.

994
01:00:50,550 --> 01:00:53,790
Këtu në quote6.php ne jemi duke shkuar për të filluar jashtë në të njëjtën mënyrë.

995
01:00:53,790 --> 01:00:58,050
Çdo kohë lloje dikush diçka, ne duam të bëjë një kërkesë AJAX.

996
01:00:58,050 --> 01:01:01,590
Kjo është e ngjashme me origjinale çast tonë CS50 Financave.

997
01:01:01,590 --> 01:01:05,020
Në vend se të bërë një kërkesë për quote.php,

998
01:01:05,020 --> 01:01:08,530
ne jemi tani duke bërë një kërkesë për këtë dosje të njëjtë si më parë, ky suggest.php,

999
01:01:08,530 --> 01:01:12,460
e cila është vetëm do të tërheqë të dhëna nga Yahoo! Financave.

1000
01:01:12,460 --> 01:01:19,480
>> Përsëri, ne jemi ende duke pritur JSON, por tani pasi Typeahead nuk po e bën këtë për ne,

1001
01:01:19,480 --> 01:01:24,850
ne gjithashtu duhet të dërgojë së bashku vlerën që është brenda kutinë e tekstit aktual.

1002
01:01:24,850 --> 01:01:28,120
Tani ne e dimë se çfarë duhet të kërkojnë Financave Yahoo! për të,

1003
01:01:28,120 --> 01:01:34,160
dhe kështu që tani këtu është funksioni që ne duam për të ekzekutuar një herë kërkesa kompleton.

1004
01:01:34,160 --> 01:01:36,520
Ne nuk kemi plugin për të bërë listë për ne,

1005
01:01:36,520 --> 01:01:40,630
kështu që këtu është ajo ku ne jemi në të vërtetë do të ndërtojë një listë e sugjerime.

1006
01:01:40,630 --> 01:01:44,850
Për ta bërë këtë, ashtu si në PHP ne concatenated këto vargje të mëdha të HTML

1007
01:01:44,850 --> 01:01:48,170
pastaj ne të shtypura e tyre, ne mund të bëjmë të njëjtën gjë e saktë në JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Së pari ne do të nisem varg quajtur këtë sugjerimet,

1009
01:01:51,850 --> 01:01:54,590
dhe kjo është vetëm string do të përmbajë disa HTML.

1010
01:01:54,590 --> 01:01:58,320
Ne duam që ajo të jetë një listë e gjërave, kështu që ne jemi duke shkuar për të nisem me këtë tag listë,

1011
01:01:58,320 --> 01:02:03,340
dhe tani ne jemi duke shkuar për iterate mbi të gjitha simbolet që janë kthyer prapa ke ne.

1012
01:02:03,340 --> 01:02:06,500
Mbani mend, sepse ne kemi thënë tipi: 'JSON', kjo nuk është një varg.

1013
01:02:06,500 --> 01:02:09,500
Kjo është tashmë një grup për ne. Kjo është me të vërtetë cool.

1014
01:02:09,500 --> 01:02:13,790
Ne thjesht mund të themi: "Unë dua që ju të append një element listë."

1015
01:02:13,790 --> 01:02:16,000
Ne do të vënë atë brenda një element një në anën e që,

1016
01:02:16,000 --> 01:02:19,030
ne do t'i jepte një klasë e sugjerime kështu që ne e dimë se çfarë është,

1017
01:02:19,030 --> 01:02:23,880
dhe tani këtu është simboli që kemi marrë prapa nga Yahoo! Financave.

1018
01:02:23,880 --> 01:02:27,230
>> Pasi ne kemi krijuar një element për secilin prej simboleve kemi marrë prapa,

1019
01:02:27,230 --> 01:02:30,100
ne vetëm duam të mbyllur jashtë listës.

1020
01:02:30,100 --> 01:02:33,040
Deri tani sugjerime përfaqëson këtë fragment të vogël HTML

1021
01:02:33,040 --> 01:02:37,860
se kur vihet në një faqe do të jetë në listën e gjërave që ne jemi duke kërkuar për të.

1022
01:02:37,860 --> 01:02:41,070
Tani le të vërtetë vënë atë në faqe.

1023
01:02:41,070 --> 01:02:46,390
Të bëjë që unë kam krijuar në fakt një tjetër div bosh dhe unë kam dhënë atë një ID të sugjerimeve.

1024
01:02:46,390 --> 01:02:52,520
Ashtu si ne kemi vendosur përmbajtjen e që do shfaqin div çmimin e të dhënave të aksioneve,

1025
01:02:52,520 --> 01:02:58,600
Ne tani thjesht duan për të vendosur përmbajtjen e këtij div në çfarëdo ky varg është

1026
01:02:58,600 --> 01:03:00,290
i cili përmban këto simbole.

1027
01:03:00,290 --> 01:03:07,650
Duke përdorur këtë metodë HTML, ky variabël sugjerime, ky varg, është një varg i HTML.

1028
01:03:07,650 --> 01:03:13,490
Unë dua që ju të merrni atë HTML dhe e vënë atë në brendësi të quajtur div sugjerime.

1029
01:03:13,490 --> 01:03:15,680
Ne kemi bashkangjitur vetëm diçka për DOM tani.

1030
01:03:15,680 --> 01:03:20,360
Ne kemi shtuar disa elemente të reja për DOM që ne tani mund të shfaqin në faqe.

1031
01:03:20,360 --> 01:03:22,540
Le të shohim se çfarë kjo duket si.

1032
01:03:22,540 --> 01:03:29,110
Nëse ne të ngarkesës në quote6 dhe tani kemi ardhur përsëri,

1033
01:03:29,110 --> 01:03:34,480
tani kur kam filluar të shtypni AAPL, ne nuk kemi atë bootstrap Autocomplete,

1034
01:03:34,480 --> 01:03:38,470
por ne tani kemi këtë listë që kemi bërë veten.

1035
01:03:38,470 --> 01:03:43,230
Kjo është pak më shëmtuar se Typeahead bootstrap, për shembull,

1036
01:03:43,230 --> 01:03:45,580
por kjo nuk na lejon që të bëjmë një gjë tjetër.

1037
01:03:45,580 --> 01:03:48,660
Kur ne ishim duke kërkuar në atë plugin bootstrap,

1038
01:03:48,660 --> 01:03:52,590
ne pamë se kur ne autocompleted, një nga vlerat autocomplete ishte AAPL.

1039
01:03:52,590 --> 01:03:54,820
Kjo nuk mund të jetë aq e dobishme.

1040
01:03:54,820 --> 01:03:59,100
Si përdorues, unë nuk mund të njohin menjëherë të gjitha simboleve të aksioneve.

1041
01:03:59,100 --> 01:04:02,370
Ajo që unë jam ndoshta më shumë gjasa për të njohur janë emrat aktuale të kompanisë.

1042
01:04:02,370 --> 01:04:05,310
Pra, nuk do të jetë me të vërtetë e dobishme në qoftë se në vend se duke thënë AAPL

1043
01:04:05,310 --> 01:04:07,970
këtë tha diçka si Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Sepse ne kemi mbështjellë këtë veten, ne mund të vërtetë të lehtë ta bëjë këtë.

1045
01:04:12,240 --> 01:04:17,630
Le të hapë dosjen tonë të fundit quote këtu, kështu që quote7.

1046
01:04:17,630 --> 01:04:23,200
>> E njëjta gjë. Unë kam krijuar vetëm një skedar PHP që do të kthehet tek ne më shumë se vetëm simbole.

1047
01:04:23,200 --> 01:04:25,550
Ai gjithashtu do të na japë përsëri emra të kompanisë.

1048
01:04:25,550 --> 01:04:28,150
Dhe kështu që ne jemi duke bërë të njëjtën gjë. Ne jemi duke e bërë një kërkesë AJAX.

1049
01:04:28,150 --> 01:04:32,370
Pasi kërkesa ka përfunduar, ne jemi duke shkuar për të ekzekutuar këtë funksion këtu,

1050
01:04:32,370 --> 01:04:36,520
dhe kjo funksion do të ndërtojë një varg të madhe të elementeve.

1051
01:04:36,520 --> 01:04:39,520
Por ndryshimi këtu është se vlera e këtyre listave nuk është më vetëm simbol,

1052
01:04:39,520 --> 01:04:45,370
kjo është tani emri.

1053
01:04:45,370 --> 01:04:47,070
Pra, ne kemi një problem të vogël.

1054
01:04:47,070 --> 01:04:51,590
Kur ne përdorim lookup tonë, ne kemi nevojë për të kaluar disi atë simbol.

1055
01:04:51,590 --> 01:04:54,950
Ne nuk mund të kalojë diçka lookup si Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Ne duhet të kalojë atë MSFT.

1057
01:04:57,900 --> 01:05:01,640
Kur ne jemi me shkrim HTML, ne kemi shumë të ndërtuar në atributet e bukur.

1058
01:05:01,640 --> 01:05:05,440
Një A mund të ketë lidhur me një href apo një klasë.

1059
01:05:05,440 --> 01:05:08,230
Por ajo që ne duhet të vërtetë tani është për secilin prej këtyre lidhjeve

1060
01:05:08,230 --> 01:05:11,120
të ketë një simbol të aksioneve të lidhur me të.

1061
01:05:11,120 --> 01:05:14,240
Nuk ka built-in HTML atribut për simbol të aksioneve,

1062
01:05:14,240 --> 01:05:21,010
por për fat të mirë, HTML5 na lejon të krijoni atributet tona të jetë çdo gjë që ne duam.

1063
01:05:21,010 --> 01:05:24,620
Duke thënë të dhënave simbol-, unë kam futur një atribut të ri

1064
01:05:24,620 --> 01:05:29,350
Unë bëra vetëm emri i të cilit deri, dhe kjo është në rregull, sepse unë prefaced atë me këto të dhëna.

1065
01:05:29,350 --> 01:05:34,270
Ne jemi duke shkuar për të ruajtur brenda e ka simbol nga të aksioneve tani.

1066
01:05:34,270 --> 01:05:39,590
Çfarë kjo do të thotë është se edhe pse ne jemi shfaqur vlerën e emrit të kompanisë

1067
01:05:39,590 --> 01:05:43,380
brenda autocomplete tonë, ne jemi ende duke kujtuar simbolin

1068
01:05:43,380 --> 01:05:47,110
që është e lidhur me çdo kompani.

1069
01:05:47,110 --> 01:05:50,350
Mënyra që ne jemi duke bërë që është brenda e këtij elementi vetë.

1070
01:05:50,350 --> 01:05:52,930
Kështu që do të thotë ne kemi nevojë për të bërë një ndryshim shumë.

1071
01:05:52,930 --> 01:05:57,090
Kur ne click it tani, ne kemi nevojë të vërtetë të përfitojnë nga atributi simbol

1072
01:05:57,090 --> 01:06:00,220
në vend se vetëm vlera e tij.

1073
01:06:00,220 --> 01:06:05,010
Nëse ne back up, ne i japim një mbajtës ngjarje për sugjerimet.

1074
01:06:05,010 --> 01:06:09,280
Kurdo që një nga këto sugjerime është klikuar tani, unë dua të bëj diçka.

1075
01:06:09,280 --> 01:06:13,160
Ajo që unë dua të bëj është të ndryshojë vlerën e asaj kutinë e input.

1076
01:06:13,160 --> 01:06:16,100
Tani unë dua të vendosur këtë funksion njëjtin val.

1077
01:06:16,100 --> 01:06:21,060
>> Pra, pa argumente këtë funksion val kthehet tek ju atë që është tashmë në kutinë e tekstit,

1078
01:06:21,060 --> 01:06:27,070
por në qoftë se ju t'i jepte një varg, ajo do të marrë atë varg dhe e vënë atë në kutinë e tekstit.

1079
01:06:27,070 --> 01:06:28,980
Unë jam zgjedhur kutinë e tekstit në të njëjtën mënyrë.

1080
01:06:28,980 --> 01:06:31,230
Është emri është brenda simbol i formës kuotë.

1081
01:06:31,230 --> 01:06:37,540
Tani unë jam i dërguar atë vlerën e atributit të dhënave-simbol.

1082
01:06:37,540 --> 01:06:41,560
Kjo gjë këtu është e re, kjo $ (këtë).

1083
01:06:41,560 --> 01:06:46,850
Çfarë kjo i referohet është element që u klikuar.

1084
01:06:46,850 --> 01:06:50,880
Ne mund të shohim këtu se ne nuk jemi bashkëngjitur një ngjarje click

1085
01:06:50,880 --> 01:06:54,690
për secilin element me një klasë të sugjerim individualisht.

1086
01:06:54,690 --> 01:06:57,140
Përkundrazi, ne jemi duke iu afruar këtë një pak ndryshe.

1087
01:06:57,140 --> 01:07:01,700
Në vend të kësaj ne jemi duke thënë se sa herë brenda asgjë e kësaj div sugjerime,

1088
01:07:01,700 --> 01:07:04,080
Mos harroni që është vetëm enë për atë listë,

1089
01:07:04,080 --> 01:07:10,150
nëse diçka brenda këtij div klikohet dhe ajo ka një klasë e sugjerim,

1090
01:07:10,150 --> 01:07:13,000
Unë dua që kjo ngjarje të zjarrit.

1091
01:07:13,000 --> 01:07:17,490
Në thelb kjo do të thotë se çfarë ne mund të bëjmë është që ne mund të ripërdorimin këtë mbajtës të njëjtën ngjarje

1092
01:07:17,490 --> 01:07:20,000
për të gjitha gjërat në listë.

1093
01:07:20,000 --> 01:07:22,080
Pra, ne nuk duhet të ketë një mbajtës ngjarje për elementin e parë

1094
01:07:22,080 --> 01:07:24,550
dhe një mbajtës i ndryshëm ngjarje për të elementit të dytë.

1095
01:07:24,550 --> 01:07:29,880
Ne mund të themi në vend të kësaj, "Unë dua handler njëjta ngjarje të zbatohet për çdo gjë në listën time."

1096
01:07:29,880 --> 01:07:34,420
Por ne duhet të dimë se cili element disi u klikuar.

1097
01:07:34,420 --> 01:07:38,450
Kjo "kjo" fjalen përfaqëson vetëm se.

1098
01:07:38,450 --> 01:07:42,360
Ky është objekti që është klikuar vetëm nga përdoruesit.

1099
01:07:42,360 --> 01:07:47,680
Në qoftë se unë vetëm klikuar lidhjen 3, kjo paraqet elementin e asaj lidhje 3,

1100
01:07:47,680 --> 01:07:51,670
që do të thotë se unë mund të merrni atributin e vet, të dhënat e-simbol,

1101
01:07:51,670 --> 01:07:57,760
të cilat ne e dimë duhet të përmbajë simbolin që është lidhur me kompaninë e unë vetëm klikuar.

1102
01:07:57,760 --> 01:08:04,550
Nëse ne hidhen përsëri në faqen tonë të financave,

1103
01:08:04,550 --> 01:08:08,580
ne mund të shohim tani se dikur kam filloni të shtypni diçka si MSFT,

1104
01:08:08,580 --> 01:08:11,220
ne jemi nuk marrë vetëm simbole të aksioneve,

1105
01:08:11,220 --> 01:08:13,720
ne jemi tani duke kompanitë aktuale.

1106
01:08:13,720 --> 01:08:20,410
Por kur unë klikoni mbi një nga këto kompani,

1107
01:08:20,410 --> 01:08:25,180
ne mund të shohim se ne jemi në të vërtetë nuk e popullimit kutinë e tekstit me emrin e kompanisë

1108
01:08:25,180 --> 01:08:29,850
por me çdo gjë që është ruajtur në brendësi të këtyre atributeve të dhënave.

1109
01:08:29,850 --> 01:08:32,880
Dhe kështu që nëse unë në fakt të inspektuar një nga këto elemente duke klikuar drejtë atë

1110
01:08:32,880 --> 01:08:36,200
dhe duke klikuar Inspect Element, ne fakt mund të shohim se çfarë kjo duket si.

1111
01:08:36,200 --> 01:08:40,290
>> Mos harroni kjo është diçka që ne kemi krijuar brenda se për lak

1112
01:08:40,290 --> 01:08:42,649
kur ne u ndërtuar atë varg të HTML.

1113
01:08:42,649 --> 01:08:47,870
Ne mund të shohim këtu se këto të dhëna-simbol ka vlerën e MSFT, e cila është e madhe.

1114
01:08:47,870 --> 01:08:49,189
Kjo është ajo që ne prisnim.

1115
01:08:49,189 --> 01:08:53,170
Kjo është simbol dhe kjo është se si ne të marrë vlerën që ne e nevojshme për të përdorur

1116
01:08:53,170 --> 01:08:56,140
brenda këtij kutinë e tekstit.

1117
01:08:56,140 --> 01:08:58,850
Kjo është e mjaftueshme për formën kuotë, sepse kjo është lloj i mërzitshëm.

1118
01:08:58,850 --> 01:09:02,990
Le të vetëm të bëjë disa përmirësime të shpejta në faqen tonë të portofolit.

1119
01:09:02,990 --> 01:09:08,109
Nëse e keni përdorur CS50 Financave për një kohë dhe ju filloni blerjen dhe shitjen e një shumë të rezervave,

1120
01:09:08,109 --> 01:09:11,300
përfundimisht kjo tabelë do të marrë goxha i madh,

1121
01:09:11,300 --> 01:09:13,850
dhe ju do të jeni të duan një ticker aksioneve, natyrisht.

1122
01:09:13,850 --> 01:09:20,350
Pasi tryezë është me të vërtetë, të vërtetë e madhe, ajo mund të jetë e dobishme për përdoruesit që të përpiqen për të kërkuar mbi të.

1123
01:09:20,350 --> 01:09:23,290
Brenda kutinë e kërkimit në qoftë se unë të fillojë të shtypni diçka si Disney

1124
01:09:23,290 --> 01:09:26,359
dhe duke kërkuar për Mickey Mouse aksioneve tim, ne mund të shohim se në tryezë tani është filtrim

1125
01:09:26,359 --> 01:09:28,189
bazuar në atë që unë shtypur vetëm in

1126
01:09:28,189 --> 01:09:31,640
Ky funksionalitet duket e komplikuar super, por është e vërtetë, të vërtetë e lehtë

1127
01:09:31,640 --> 01:09:33,859
me jQuery dhe JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Kjo skedë portfolio.php përfshin një skedar të quajtur JavaScript portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Le të marrin një vështrim në atë.

1130
01:09:41,130 --> 01:09:44,890
Pra html, js, portofoli.

1131
01:09:44,890 --> 01:09:49,210
Ja ku ne jemi duke bërë që në kërkim në tryezë.

1132
01:09:49,210 --> 01:09:52,750
Gjëja e parë që duhet të bëni është të lidhni një mbajtës ngjarje në atë kutinë e tekstit

1133
01:09:52,750 --> 01:09:55,760
sepse ne e dimë që ne duam funksioni tonë filtrim të zjarrit

1134
01:09:55,760 --> 01:09:59,800
çdo herë që përdoruesi shtyn diçka, sepse ne nuk kemi kohë për butonat kërkim.

1135
01:09:59,800 --> 01:10:03,000
Gjëja e parë që ne duhet të bëni është të kuptoj se çfarë është në kërkim për përdoruesit,

1136
01:10:03,000 --> 01:10:04,780
ashtu si ne e bëmë më parë.

1137
01:10:04,780 --> 01:10:11,320
Kjo fjalen referohet elementit aktual përdoruesi është bashkëveprojmë me.

1138
01:10:11,320 --> 01:10:14,070
>> Sepse përdoruesi është bashkëveprojmë me kutinë e kërkimit,

1139
01:10:14,070 --> 01:10:17,020
$ Kjo paraqet kutinë e kërkimit,

1140
01:10:17,020 --> 01:10:21,820
kështu this.val na jep atë që është brenda kutinë e kërkimit përdorues aktualisht është shtypur.

1141
01:10:22,810 --> 01:10:27,320
Pra, tani ajo që ne duam të bëjmë është që ne duam të iterate mbi të gjitha rreshtave

1142
01:10:27,320 --> 01:10:29,240
brenda tryezën tonë.

1143
01:10:29,240 --> 01:10:35,630
Për të zgjedhur të gjitha rreshtave në tabelën tonë, unë i dha atë tryezë një ID të portofolit tavolinë,

1144
01:10:35,630 --> 01:10:39,060
dhe secili rresht është përfaqësuara nga një element TR,

1145
01:10:39,060 --> 01:10:42,080
kështu që kjo përzgjedhës do të kthehet tek unë një grup i madh

1146
01:10:42,080 --> 01:10:44,370
të gjitha rreshtave në tryezën time.

1147
01:10:44,370 --> 01:10:47,010
Tani unë dua të iterate mbi këtë koleksion.

1148
01:10:47,010 --> 01:10:52,390
Unë mund të ju një për lak, por jQuery fakt na ofron funksionin e bukur të quajtur "njeri".

1149
01:10:52,390 --> 01:10:55,220
Atë që çdo njeri nuk është një argument i merr,

1150
01:10:55,220 --> 01:10:57,090
dhe që argumenti është një funksion.

1151
01:10:57,090 --> 01:11:02,760
Atë që do të bëjë është se do të aplikojë atë funksion për çdo element brenda e kësaj liste.

1152
01:11:02,760 --> 01:11:05,550
Ky funksion merr një argument që është e,

1153
01:11:05,550 --> 01:11:10,090
dhe kur ky funksion është ekzekutuar, kjo e do të zëvendësohet me rreshtin e parë,

1154
01:11:10,090 --> 01:11:12,070
atëherë radhën e dytë, dhe pastaj radhën e tretë.

1155
01:11:12,070 --> 01:11:15,150
Me këtë mënyrë, kjo është e njëjta gjë si drejtimin e një për lak

1156
01:11:15,150 --> 01:11:21,360
dhe pastaj parafytyruar elementin aktual bazuar në brendësi indeksin e tuaj për lak.

1157
01:11:21,360 --> 01:11:24,750
Në çdo përsëritje, sepse secili prej këtyre elementeve në tabelën,

1158
01:11:24,750 --> 01:11:30,560
Unë dua për të kontrolluar nëse në tekstin e elementit - tekstin e qelizave brenda të rresht -

1159
01:11:30,560 --> 01:11:33,130
përputhet me atë që unë jam duke kërkuar për të.

1160
01:11:33,130 --> 01:11:36,390
Ky varg i madh e gjatë e komandave është se si unë mund ta bëjë këtë.

1161
01:11:36,390 --> 01:11:40,900
Së pari, përsëri, kjo i referohet tani - sepse kjo është në brendësi të një funksioni të ri -

1162
01:11:40,900 --> 01:11:45,020
ky është tani në radhën e tanishme në tabelë.

1163
01:11:45,020 --> 01:11:47,340
Unë dua të të marrë rresht aktuale në tabelë,

1164
01:11:47,340 --> 01:11:49,950
dhe unë dua të të marrë të gjithë fëmijët e saj.

1165
01:11:49,950 --> 01:11:51,940
Mos harroni, është një pemë DOM hierarkike,

1166
01:11:51,940 --> 01:11:54,200
që do të thotë se elementet të ketë një numër të fëmijëve.

1167
01:11:54,200 --> 01:12:00,180
>> Këtë. Fëmijët funksion do të kthehet tek unë përsëri një rrjet të gjitha elementet e

1168
01:12:00,180 --> 01:12:03,240
që janë bijtë e, në këtë rast, një rresht në tabelë.

1169
01:12:03,240 --> 01:12:07,150
Kjo është thjesht qelizat brenda të rresht.

1170
01:12:07,150 --> 01:12:09,230
Unë vetëm dua të kërkoni mbi qeliza e parë.

1171
01:12:09,230 --> 01:12:13,090
Këtë. Funksioni i parë thotë jepni elementin e parë në këtë grup.

1172
01:12:13,090 --> 01:12:17,070
Atëherë funksioni teksti thotë merrni mua saktësisht se çfarë ka brenda e atë qelizë

1173
01:12:17,070 --> 01:12:19,530
pasi që unë dua të kërkoni mbi atë tekst.

1174
01:12:19,530 --> 01:12:21,040
Së fundi, le të kthyer atë në vogle,

1175
01:12:21,040 --> 01:12:23,940
kështu që ne mund të bëjmë pyetje rast tekst pandjeshëm.

1176
01:12:23,940 --> 01:12:29,990
Së fundi, ne duam të shohim në qoftë se string brenda një tabelë përmban vargun ne jemi në kërkim për të.

1177
01:12:29,990 --> 01:12:32,980
Funksioni indexOf në JavaScript bën vetëm se.

1178
01:12:32,980 --> 01:12:37,060
Ajo na tregon nëse janë apo jo këtë varg përmban një varg.

1179
01:12:37,060 --> 01:12:40,150
Nëse është e vërtetë se qeliza përmban atë që unë jam duke kërkuar për të,

1180
01:12:40,150 --> 01:12:42,140
atëherë unë dua të bëni të sigurtë që ajo është treguar.

1181
01:12:42,140 --> 01:12:45,330
Metoda shfaqje do të thonë: "Trego elementin".

1182
01:12:45,330 --> 01:12:50,350
Nëse kjo nuk është rasti, atëherë kjo do të thotë çdo gjë që unë jam duke kërkuar për të është që nuk përfshihen

1183
01:12:50,350 --> 01:12:53,550
brenda asaj rresht, dhe kështu që unë dua të fshehur është nga përdoruesit.

1184
01:12:53,550 --> 01:12:59,240
Që të arrijë efekt të bukur se filtrim, ku nuk shohim tabelën tërë.

1185
01:12:59,240 --> 01:13:01,480
Nëse jeni të interesuar në atë se si për të bërë këtë Ticker, si edhe,

1186
01:13:01,480 --> 01:13:04,180
Ne do të postoj burimin online. Por është e vërtetë e thjeshtë.

1187
01:13:04,180 --> 01:13:09,860
JQuery ka metoda të tmerrshme për këto animacione dhe manipulimin pronat CSS.

1188
01:13:09,860 --> 01:13:11,020
Pra, kjo është ajo për mua.

1189
01:13:11,020 --> 01:13:15,560
>> Çka pastaj shtrihet përpara? Si ju do të shihni në disa ditë, në finale projektet propozimi është për shkak.

1190
01:13:15,560 --> 01:13:17,730
Propozimi përfundimtar projekte do t'ju kërkojë disa pyetje,

1191
01:13:17,730 --> 01:13:19,420
por në mesin e tyre do të jenë tre piketa -

1192
01:13:19,420 --> 01:13:22,840
një një "mirë" moment historik, një një moment historik të mirë, dhe një një më të mirë.

1193
01:13:22,840 --> 01:13:25,870
Ideja qenë me të vërtetë për të ndihmuar ju djema vendosur pritjet tuaja

1194
01:13:25,870 --> 01:13:29,160
kështu që ju do të jetë minimalisht i kënaqur me prodhimin e projektit tuaj përfundimtar

1195
01:13:29,160 --> 01:13:32,060
dhe ajo do të jetë "mirë" për aq sa ju janë të shqetësuar.

1196
01:13:32,060 --> 01:13:34,540
Por pastaj në interes të gjetjes ju për të arritur vetëm pak për diçka më të mirë

1197
01:13:34,540 --> 01:13:37,680
apo diçka të mirë, ne gjithashtu do lloj të shtyjë ju drejt se si.

1198
01:13:37,680 --> 01:13:40,660
The CS50 Hack-a-thon, ndërkohë, është në disa javë.

1199
01:13:40,660 --> 01:13:44,340
Në mënyrë tipike, ne bëjmë këtë në një bazë të bazë të shortit për shkak të interesit,

1200
01:13:44,340 --> 01:13:47,680
por shanset janë që ne do të marrin disa qindra prej nesh në autobusët anijes nga Harvard Square

1201
01:13:47,680 --> 01:13:51,540
poshtë për Kendall Square ku Microsoft ka një strukturë të bukur të quajtur me vend "NERD" -

1202
01:13:51,540 --> 01:13:53,830
i Kërkimeve New England dhe Qendra e Zhvillimit.

1203
01:13:53,830 --> 01:13:56,380
Ne do të merrni atje rreth 8:00 Ne do të kemi pak ushqim.

1204
01:13:56,380 --> 01:13:58,160
Rreth 01:00 ne do të kemi ushqim disa më shumë.

1205
01:13:58,160 --> 01:14:02,150
Rreth 5:00 në qoftë se ju jeni ende zgjuar ne do të kryesojë mbi të IHOP ose të marrë të ju kthejnë në kampus.

1206
01:14:02,150 --> 01:14:04,380
Objektivi nuk është që të zhyten në projekte finale

1207
01:14:04,380 --> 01:14:06,190
së bashku me shokët e klasës dhe stafit.

1208
01:14:06,190 --> 01:14:08,280
Pastaj një ditë më vonë është Panairi CS50,

1209
01:14:08,280 --> 01:14:10,990
i cili ka për qëllim të vërtetë të jetë një mundësi për ju djema në vitrinë punën tuaj

1210
01:14:10,990 --> 01:14:12,700
dhe arritjet për gjashtëmujorin e

1211
01:14:12,700 --> 01:14:15,610
ndërsa fërkim supet me njëri-tjetrin dhe për të gjetur një kuptim të asaj që të gjithë e bëri.

1212
01:14:15,610 --> 01:14:17,850
Me tha se, falë shumë për Tommy dhe të Jozefit,

1213
01:14:17,850 --> 01:14:19,960
dhe ne do të shohim ju në hënën.

1214
01:14:19,960 --> 01:14:24,070
 [Duartrokitje]