1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Savaitė 9 Tęsinys]

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

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

4
00:00:07,940 --> 00:00:13,340
>> Tai CS50. Tai 9 savaitės pabaigos. Labai ačiū.

5
00:00:13,340 --> 00:00:15,310
Pagaliau. Savaitė 9. Aš jį.

6
00:00:15,310 --> 00:00:18,590
Šiandien mes ir toliau mūsų pokalbį apie interneto programavimo

7
00:00:18,590 --> 00:00:21,660
link galutinio projekto akis, ne todėl, kad turite kažką daryti, Web-based

8
00:00:21,660 --> 00:00:25,610
galutinius projektus, bet dėl ​​to, kad arba galutinių projektų arba po CS50

9
00:00:25,610 --> 00:00:29,000
tai tikrai moderni programinė įranga kryptis, kuria vyksta.

10
00:00:29,000 --> 00:00:31,770
Ir vis dėlto iš tikrųjų tai ne paprastas dalykas.

11
00:00:31,770 --> 00:00:35,040
Iš tiesų, vienas iš sudėtingiausių dalykų, kuriuos reikia padaryti yra projektavimo aspektas.

12
00:00:35,040 --> 00:00:38,600
>> Pavyzdžiui, pagal projektą turime omenyje faktiškai gauti vartotojo sąsaja

13
00:00:38,600 --> 00:00:40,420
arba vartotojo patirtį.

14
00:00:40,420 --> 00:00:43,200
Aš Manyti, ir mes žinome, iš neseniai problemą,

15
00:00:43,200 --> 00:00:45,960
, kai iš jūsų kelias eteryje savo diegliai apie kai programinė įranga,

16
00:00:45,960 --> 00:00:49,000
arba aparatinė įranga, kuri jums, ar dėl kampusie arba autonominis infuriates

17
00:00:49,000 --> 00:00:51,930
yra daug svetainių ten, yra daug aparatūros ten,

18
00:00:51,930 --> 00:00:53,900
kad šios rūšies sucks.

19
00:00:53,900 --> 00:00:58,730
Tačiau tikrovė yra tokia, kad siekį, kad būtų lengva naudotis, tačiau vis dėlto galinga

20
00:00:58,730 --> 00:01:00,550
yra labai sudėtingas uždavinys.

21
00:01:00,550 --> 00:01:03,680
Taigi, šiandien aš paklausiau Juozapas ir Tommy prisijungti prie manęs čia

22
00:01:03,680 --> 00:01:06,680
taip, kad mes galime turėti pokalbį, tiek dėl dizaino

23
00:01:06,680 --> 00:01:09,090
ir kokių mąstymo procesų turėtų pradėti išgyvena savo galva

24
00:01:09,090 --> 00:01:12,040
kai kuriate savo galutinius projektus, jūsų būsimos veiklos.

25
00:01:12,040 --> 00:01:15,040
Ir tada su Tommy pagalba mes pažvelgti į kai kurių įgyvendinimo detales.

26
00:01:15,040 --> 00:01:18,440
Kaip jūs galite turėti tam tikrą viziją ant popieriaus arba savo proto

27
00:01:18,440 --> 00:01:20,760
kad galite vykdyti programiškai

28
00:01:20,760 --> 00:01:24,030
naudojant kai kurias technologijas ir metodus, mes ką tik pradėjo kalbėti apie,

29
00:01:24,030 --> 00:01:29,080
ty "JavaScript" ir kažkas dar naujesnis, ty AJAX Asynchronous JavaScript.

30
00:01:29,080 --> 00:01:32,950
, Kuri leidžia jums sukurti labiau dinamiškas vartotojo sąsaja

31
00:01:32,950 --> 00:01:35,780
žavingas daugiau ir daugiau duomenų, palaipsniui iš serverio.

32
00:01:35,780 --> 00:01:38,560
Todėl mes pamatyti kai kuriuos iš šių fragmentus, taip pat šiandien.

33
00:01:38,560 --> 00:01:41,800
Kaip panaikinti, jei jus domina susikaupti informatikos

34
00:01:41,800 --> 00:01:45,010
arba minoring informatikos, žinau, kad šį penktadienį vidurdienį

35
00:01:45,010 --> 00:01:48,750
Dworkin Maxwell 221 bus pica įvykis

36
00:01:48,750 --> 00:01:50,780
kur Jūs galite sužinoti šiek tiek daugiau apie kompiuterių mokslo.

37
00:01:50,780 --> 00:01:54,860
Apie savo kelią pro duris šiandien galėsite pasiimti neoficialią vadovas CS Harvarde.

38
00:01:54,860 --> 00:01:57,290
Mes padėkite jį ant šiukšliadėžės ne juosmens aukštyje

39
00:01:57,290 --> 00:01:59,750
taip, kad jei norite patraukti ir sužinoti šiek tiek daugiau apie CS,

40
00:01:59,750 --> 00:02:02,480
, kad bus ten jums, kaip tai buvo savaitę 0.

41
00:02:02,480 --> 00:02:06,500
Taip pat, jei norite prisijungti prie mūsų CS50 pietų šį penktadienį 01:15,

42
00:02:06,500 --> 00:02:09,800
galvą į cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Be tolesnio ceremonija, aš tau mokymo kolegos Joseph Ong.

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

45
00:02:19,190 --> 00:02:20,770
Ačiū.

46
00:02:20,770 --> 00:02:24,780
Klasės čia vadinama CS179 buvo pirmas kartas, kai aš sužinojau apie dizainą.

47
00:02:24,780 --> 00:02:28,040
>> Tuo metu profesorius papasakojo istoriją apie kitą profesorius

48
00:02:28,040 --> 00:02:31,640
kuris buvo perregistruotas į viešbutį ir naudojo maišytuvai.

49
00:02:31,640 --> 00:02:35,630
Ar kas nors pasakykite man, ką 2 mygtukai kairėje ir teisę daryti?

50
00:02:35,630 --> 00:02:39,080
[Studentas] Karštas ir šaltas. >> Karštas ir šaltas. Geras.

51
00:02:39,080 --> 00:02:41,430
Tai, ką paprastai galima tikėtis, tiesa?

52
00:02:41,430 --> 00:02:46,960
Tai po to, naudojant maišytuvą profesorius nori nusiprausti po dušu, ir jis pajamos naudoti.

53
00:02:46,960 --> 00:02:51,310
Jis mano, kad kairėje ir dešinėje pusėse yra karšto ir šalto, tiesa?

54
00:02:51,310 --> 00:02:55,470
Bet ar gali kas nors pasakykite man, ką jie iš tikrųjų?

55
00:02:55,470 --> 00:02:58,060
Bet rankos?

56
00:02:58,060 --> 00:03:01,740
[Nesigirdi studentas atsakas] >> Vienas iš pasiūlymų yra?

57
00:03:01,740 --> 00:03:05,860
[Nesigirdi studentas atsakas] >> Temperatūra?

58
00:03:05,860 --> 00:03:10,460
Taigi, vienas iš jų kontroliuoja temperatūrą ir kitus kontrolę? >> [Studentas] Vandens slėgis.

59
00:03:10,460 --> 00:03:12,350
Vandens slėgis. Geras.

60
00:03:12,350 --> 00:03:15,100
Šis profesorius eina į tai, galvoju, jie yra kontroliuoti karšto ir šalto,

61
00:03:15,100 --> 00:03:21,470
paverčia tinkamą vieną, kuris, jo nuomone, yra karšta, visą kelią iki

62
00:03:21,470 --> 00:03:23,560
, nes jis nori imtis šiltas dušas.

63
00:03:23,560 --> 00:03:28,100
Na, jie tikrai ne rungtynių iki, todėl jis gauna tai nėra labai įdomus patirties

64
00:03:28,100 --> 00:03:31,110
šaltas dušas, ir mes visi žinome, ką tai jaučiasi.

65
00:03:31,110 --> 00:03:33,620
Tai yra dizaino škvalas pavyzdys.

66
00:03:33,620 --> 00:03:37,040
, Ką aš turiu galvoje, tai yra jo lūkesčiai iš čiaupo

67
00:03:37,040 --> 00:03:39,420
neatitiko, kas išėjo iš dušo,

68
00:03:39,420 --> 00:03:41,780
kuris yra tipo jam gaila.

69
00:03:41,780 --> 00:03:44,990
Taigi tai yra dizaino škvalas, kas vyksta realiame gyvenime pavyzdys.

70
00:03:44,990 --> 00:03:48,020
Tačiau matome, įvairių kitų, taip pat.

71
00:03:48,020 --> 00:03:50,390
Mes tikriausiai ne gerbėjai MBTA sistemos.

72
00:03:50,390 --> 00:03:55,560
Tai metro sistema iš tiesų Londone, kuris sako: "Šis mygtukas nėra naudojamas."

73
00:03:55,560 --> 00:04:00,220
Kodėl tai net ten? Kodėl mes net rūpėti?

74
00:04:00,220 --> 00:04:02,810
Kai aš buvau vaikas, yra tech išminties vienas namuose,

75
00:04:02,810 --> 00:04:05,050
kai kompiuteris genda, mano mama ateiti pas mane,

76
00:04:05,050 --> 00:04:07,060
rodo man šį ekraną ir klausia manęs, kas nutiko.

77
00:04:07,060 --> 00:04:09,210
>> Net aš nežinau, ką tai reiškia.

78
00:04:11,890 --> 00:04:14,700
[Juokas] Kas?

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

80
00:04:18,720 --> 00:04:23,050
Kartais jaučiamės kaip programinės įrangos kūrėjams yra tiesiog velkamosiomis mums.

81
00:04:23,050 --> 00:04:28,460
Būdami vartotojai, mes, pavyzdžiui, "Kas vyksta? Kažkas mums pasakyti."

82
00:04:28,460 --> 00:04:32,140
Tai viskas susiveda į dizaino klausimu.

83
00:04:32,140 --> 00:04:34,650
Dizainas, kaip matome, yra ne vien tik apie estetiką,

84
00:04:34,650 --> 00:04:37,230
tai ne apie tai, kaip viskas atrodo.

85
00:04:37,230 --> 00:04:41,720
Čia mes matome, kad tai šiek tiek pop-up čia iš tikrųjų atrodo labai gražus.

86
00:04:41,720 --> 00:04:45,290
Ji turi lašas šešėlis fone, ji sienos spindulys vyksta.

87
00:04:45,290 --> 00:04:47,550
Tai rūšies gana.

88
00:04:47,550 --> 00:04:51,480
Tai nėra labai gerai suprojektuoti, nes tai nėra labai patogi.

89
00:04:51,480 --> 00:04:54,920
Kad šiek tiek pop-up, kad ateina tikrai ne duoti man kokių nors informaciją

90
00:04:54,920 --> 00:04:58,450
apie tai, kas vyksta, jis negali pasakyti man nieko kaip vartotojas

91
00:04:58,450 --> 00:05:01,400
apie tai, kaip susigrąžinti nuo šios klaidos.

92
00:05:01,400 --> 00:05:05,190
Mes norime galvoti apie tokius dalykus, kad dizainas nėra.

93
00:05:05,190 --> 00:05:06,670
Pirma, tai ne estetika.

94
00:05:06,670 --> 00:05:10,800
Jis taip pat nėra įdaras su tonų nereikalingų funkcionalumą jūsų app.

95
00:05:10,800 --> 00:05:14,890
Jei esate Tailando restoranas, jūs tikriausiai ne nori būti tuo pačiu metu stomatologas.

96
00:05:14,890 --> 00:05:17,720
Ir su Facebook Klausimai, ne tai, kad daug žmonių jį naudojo

97
00:05:17,720 --> 00:05:21,130
ir tai buvo tikrai ne, ką jie statė pagrindas.

98
00:05:21,130 --> 00:05:24,200
Ir todėl malonu galvoti ne tiek daug dalykų kiekį

99
00:05:24,200 --> 00:05:26,390
kad jūs pateikėte į jūsų prašymą, tačiau jų kokybė

100
00:05:26,390 --> 00:05:28,910
ir kaip jūs darote, kad vartotojo patirtį geriau

101
00:05:28,910 --> 00:05:32,540
pagal faktiškai pagerinti nuo to, ką jau turite.

102
00:05:32,540 --> 00:05:37,040
>> Trumpai tariant, dizainas pasakoja mums, ką turėtume statyti.

103
00:05:37,040 --> 00:05:41,950
Pavyzdžiui, jei mes sukurti kažką, kad leido mus ieškoti dalykų, iki,

104
00:05:41,950 --> 00:05:45,970
kaip "Google", pavyzdžiui, mes turėtume daryti tai, ko tokiu būdu

105
00:05:45,970 --> 00:05:48,950
, kuri reikalauja, kad vartotojas galėtų gauti tai, ko jie nori imtis daug paspaudimų,

106
00:05:48,950 --> 00:05:52,580
ar turėtume tai padaryti tokiu būdu, pavyzdžiui, su "Google" Instant arba Automatinis užpildymas

107
00:05:52,580 --> 00:05:54,970
, kuri leidžia mums gauti į paieškos rezultatus greičiau?

108
00:05:54,970 --> 00:05:58,740
Inžinerija apima, pavyzdžiui, "Tommy jums parodysiu, iš tikrųjų ji yra.

109
00:05:58,740 --> 00:06:01,890
Yra daug tipų projektavimo.

110
00:06:01,890 --> 00:06:06,070
Pavyzdžiui, jei kuriate kažką įdiegti kažką

111
00:06:06,070 --> 00:06:09,770
į trečiojo pasaulio šalyje, kurioje yra ne daugiau elektros energijos arba, kad daug technologijų,

112
00:06:09,770 --> 00:06:11,440
turite sukurti tai, ką kuriate

113
00:06:11,440 --> 00:06:14,210
tokiu būdu, kuris lengvai suteikia prieigą prie su zmonemis.

114
00:06:14,210 --> 00:06:18,290
Bet kas, rūšių kitų dizaino sprendimus, ar gali būti

115
00:06:18,290 --> 00:06:21,850
arba gali būti įtraukti į kažką panašaus į tai?

116
00:06:23,690 --> 00:06:25,660
Taip. Matau ranką.

117
00:06:25,660 --> 00:06:37,200
[Nesigirdi studentas atsakas] >> Teisė. Tiksliai. Prieinamumas yra vienas dalykas.

118
00:06:37,200 --> 00:06:40,870
Daug žmonių neturi galvoti apie tai, "Ką apie mano naudotojams?"

119
00:06:40,870 --> 00:06:43,160
kaip ir bet kurios spektro kraštutinumų.

120
00:06:43,160 --> 00:06:47,770
Turiu klientams, kurie turi negalią, kad aš ne galvoti apie tai,

121
00:06:47,770 --> 00:06:50,590
ir aš tiesiog galvoju apie projektuojant bendrojo vartotojui.

122
00:06:50,590 --> 00:06:52,630
Internetas yra prieinamas visiems šiandien,

123
00:06:52,630 --> 00:06:54,870
ir aš turėtų rengti tiems žmonėms, taip pat.

124
00:06:54,870 --> 00:06:58,620
Kokios rūšies kitų dizaino sprendimus gali jums padaryti?

125
00:06:58,620 --> 00:07:00,690
Taip. >> [Studentas] Kurių išlaidos.

126
00:07:00,690 --> 00:07:02,680
Kainuos. Labai geras.

127
00:07:02,680 --> 00:07:08,060
Kitas dalykas, mes galėtume pagrįsti mūsų dizaino sprendimus dėl sąnaudų.

128
00:07:08,060 --> 00:07:13,130
Jei esate verslo, jūs norite sukurti kažką, kad neužima daug išlaidas gaminti

129
00:07:13,130 --> 00:07:17,720
bet gali parduoti yra labai didelė kaina, ar galite gauti mums tam tikrą pelną.

130
00:07:17,720 --> 00:07:21,540
>> Tai yra visų skirtingų tipų projektavimo, bet kai mes statome ką nors internete

131
00:07:21,540 --> 00:07:25,120
arba, kai mes sukurti kažką, kad tikriausiai neturi kainuoti, kad daug sukurti,

132
00:07:25,120 --> 00:07:28,630
kaip interneto programų - jūs neturite mesti daug kapitalo į jį

133
00:07:28,630 --> 00:07:30,900
tam, kad padaryti ką nors, kad tikrai veikia -

134
00:07:30,900 --> 00:07:33,490
ką mes labiau nerimauja yra vartotojo patirtis.

135
00:07:33,490 --> 00:07:36,390
Mes vadiname šį vartotoją orientuotą dizainą.

136
00:07:36,390 --> 00:07:41,550
Esmės, ką reiškia vartotojo orientuotas dizainas apima save, savo lankytojų batus.

137
00:07:41,550 --> 00:07:44,870
Jei kas nors prisiregistruos, ką aš pastato,

138
00:07:44,870 --> 00:07:48,250
jie akivaizdžiai mano pirma su tikslu,

139
00:07:48,250 --> 00:07:50,280
su užduotimi jie nori baigti.

140
00:07:50,280 --> 00:07:53,650
Ir jūsų darbas yra ne tik padėti jiems atlikti tą užduotį

141
00:07:53,650 --> 00:07:57,930
tačiau, siekiant padėti jiems atlikti tą užduotį tokiu būdu, kad yra efektyvus, intuityvus,

142
00:07:57,930 --> 00:08:01,900
ir, kaip sakė ten, kai asmuo prieinama.

143
00:08:01,900 --> 00:08:03,750
Ką efektyvumas reiškia?

144
00:08:03,750 --> 00:08:08,050
Efektyvumas rodo, kaip greitai mano vartotojo užbaigti užduotį, nes mano sąsaja.

145
00:08:08,050 --> 00:08:11,650
Užtrunka daug paspaudimų juos gauti iš vienos vietos į kitą?

146
00:08:11,650 --> 00:08:14,630
Ar tai varginantis? Ar jie turi atlikti daug kartojamų užduočių?

147
00:08:14,630 --> 00:08:17,140
Mes norime, kad šį procesą būtų kuo veiksmingesnė

148
00:08:17,140 --> 00:08:20,070
todėl jie neturi daryti tuos dalykus rūšių.

149
00:08:20,070 --> 00:08:24,230
Intuityvusis, tai, pavyzdžiui, jei vartotojas ieško savo sąsają,

150
00:08:24,230 --> 00:08:27,240
tai lengva juos gauti iš vietos į vietą?

151
00:08:27,240 --> 00:08:30,390
Ar lengva išsiaiškinti, ką jie turi paspausti mano sąsaja

152
00:08:30,390 --> 00:08:33,770
, kad jiems pasiekti tikslą ar užduotį, kad jie nori pasiekti?

153
00:08:33,770 --> 00:08:37,520
>> Ir galiausiai, kaip sakė vienas žmogus ten, prieinamumas yra labai svarbus.

154
00:08:37,520 --> 00:08:39,640
[Vyriška garsiakalbis] Jis ateina regėjimo dalykų, pavyzdžiui, prieinamumo,

155
00:08:39,640 --> 00:08:42,740
patinka, kaip aš iš tikrųjų kurti kažką, kad kas nors, kuris yra aklas?

156
00:08:42,740 --> 00:08:46,460
Oh. Žmonėms, kurie negali matyti ne visi mes turime kažką vadinama ekrano skaitytuvus.

157
00:08:46,460 --> 00:08:49,070
Ką jums reikia padaryti yra, kad jums reikia sukurti savo svetainę taip,

158
00:08:49,070 --> 00:08:52,020
, kad, pavyzdžiui, tam tikros technologijos, tai, ką mes vadiname

159
00:08:52,020 --> 00:08:53,590
Yra daug dalykų, kuriuos dabar.

160
00:08:53,590 --> 00:08:55,660
Manau, kad yra ekrano skaitytuvai vadinamas JAWS.

161
00:08:55,660 --> 00:08:58,410
Daug šių dalykų priklauso nuo, ką mes vadiname erdvės taisykles

162
00:08:58,410 --> 00:09:02,010
, kad skaityti iš vartotojo, kas yra puslapyje.

163
00:09:02,010 --> 00:09:05,480
Tiems žmonėms, kurie negali matyti, jums reikia įsitikinti, kad šie ekrano skaitytuvai

164
00:09:05,480 --> 00:09:09,130
iš tikrųjų galite pasiimti turinį į puslapį, o iš tikrųjų gali parodyti savo vartotojams,

165
00:09:09,130 --> 00:09:13,630
jei jūs negalite pamatyti, bent jau jūs vis dar gali suprasti turinį puslapyje.

166
00:09:13,630 --> 00:09:16,190
Taip. Gerai.

167
00:09:16,190 --> 00:09:23,410
Pakankamai kalbame apie gerą dizainą. Pakalbėkime apie netinkamą dizaino.

168
00:09:23,410 --> 00:09:25,220
Tai yra dalykų, kad jums neturėtų daryti.

169
00:09:25,220 --> 00:09:27,890
Can anyone tell me apie savo patirtį su Craigslist

170
00:09:27,890 --> 00:09:32,190
ir ką jie galvoja yra ne tiek daug apie šį dizainą?

171
00:09:33,690 --> 00:09:36,430
Taip. >> [Studentas] Manau, kad yra per daug žodžių vienoje srityje.

172
00:09:36,430 --> 00:09:39,350
Per daug žodžių, tiesa? Visiškai absoliuti.

173
00:09:39,350 --> 00:09:42,400
Jūs ateiti į šį puslapį ir jūs pasveikino su visa krūva dalykų čia

174
00:09:42,400 --> 00:09:43,860
kad gali net jums svarbūs.

175
00:09:43,860 --> 00:09:47,010
Pavyzdžiui, jūs gyvenate vienoje valstybėje, kad neprasideda su šiuo laišku.

176
00:09:47,010 --> 00:09:48,690
Tarkime, kad jūs gyvenate Teksase ar kažką.

177
00:09:48,690 --> 00:09:53,790
>> Turite slinkti žemyn puslapio kelią patekti į vietą, jūs esate.

178
00:09:53,790 --> 00:10:00,320
Aš esu iš Bostono, todėl leiskite man atrodo, Massachusetts. Kur yra Masačusetsas?

179
00:10:00,320 --> 00:10:03,270
O, tai čia. O, tai Boston. Gerai.

180
00:10:03,270 --> 00:10:09,070
Leiskite pažvelgti Bostone. [Juokas]

181
00:10:09,070 --> 00:10:12,250
Gana didele, tiesa?

182
00:10:12,250 --> 00:10:16,400
Nepatogi dalykų ten. [Juokas]

183
00:10:17,320 --> 00:10:19,470
Tarkime, aš ieškau kur gyventi.

184
00:10:19,470 --> 00:10:24,130
Kiek žmonių iš tikrųjų naudojamas Craigslist? Tonų su jumis.

185
00:10:24,130 --> 00:10:30,960
Yra gana blogų būdų pažvelgti į tai, bet pažiūrėkime į tai.

186
00:10:35,130 --> 00:10:38,970
Koks tarp img ir pic skirtumas? Can anyone tell me?

187
00:10:41,350 --> 00:10:42,830
Ten iš tikrųjų jokio skirtumo.

188
00:10:42,830 --> 00:10:47,710
Jie reiškia lygiai tą patį, tačiau jie turi skirtingas etiketes jiems dėl kažkokių priežasčių.

189
00:10:48,980 --> 00:10:53,560
Jei aš spustelėkite Turi Vaizdo, nieko neįvyksta puslapyje.

190
00:10:53,560 --> 00:10:57,490
Aš iš tikrųjų turi, spustelėkite Ieškoti vėl kažkas atsitiks.

191
00:10:57,490 --> 00:11:02,430
Kas gali būti geriau dizaino sprendimas, kuris gali būti padaryta?

192
00:11:03,820 --> 00:11:08,030
Jei aš paspaudę tą filtrą, aš tikriausiai norite filtruoti, kuriuos ta konkreti veiksmų

193
00:11:08,030 --> 00:11:09,970
arba kad pirma kategorija.

194
00:11:09,970 --> 00:11:14,450
Taigi vietoj to, paspauskite dar kartą atlikti paiešką, aš galėtų tiesiog automatiškai padaryti filtravimo

195
00:11:14,450 --> 00:11:17,060
tarsi "Google" stiliaus, kur jie tai akimirksniu.

196
00:11:17,060 --> 00:11:20,440
[Malan] Bet ne blankus mes matėme iki šiol turi būti fiziškai pateikiamas

197
00:11:20,440 --> 00:11:23,170
pataikyti Įveskite bent arba paspaudę mygtuką?

198
00:11:23,170 --> 00:11:26,830
Kaip jūs juos mačiau iki šiol, jūs iš tikrųjų turi, paspauskite mygtuką Siųsti daryti tuos dalykus.

199
00:11:26,830 --> 00:11:30,090
>> Bet, kaip Tommy jums parodysiu, per sekundės dalį, ten iš tikrųjų yra būdų jums

200
00:11:30,090 --> 00:11:33,010
toks, kad kai paspausite ant tą daiktą jis gali automatiškai siųsti

201
00:11:33,010 --> 00:11:38,840
ką mes vadiname AJAX prašymą ir gauti duomenis atgal ir filtruoti rezultatus akimirksniu.

202
00:11:38,840 --> 00:11:41,340
Yra tonų dalykų, kurie yra negerai su šią sąsają.

203
00:11:41,340 --> 00:11:43,530
[Malan] Ar jums ieškoti Cambridge?

204
00:11:43,530 --> 00:11:47,030
Čia yra kažkas šiek tiek nenormalu, jei jums rūpi Kembridžo

205
00:11:47,030 --> 00:11:54,790
ir dar jūs gaunate Westford, Spring Hill, West Newton ir panašiai.

206
00:11:54,790 --> 00:11:57,930
Tikriausiai ne idealus. >> Tikriausiai ne idealus.

207
00:11:57,930 --> 00:12:03,900
Kaip galėčiau galėti, kad vartotojo patirtis geriau šiuo konkrečiu puslapyje?

208
00:12:03,900 --> 00:12:07,340
Taip. >> [Studentas] instrukcijos.

209
00:12:07,340 --> 00:12:09,500
Gerai. Instrukcijas, kokios prasmės?

210
00:12:09,500 --> 00:12:14,630
[Studentas] Pavyzdžiui, pirmą kartą vartotojai, kurie net nežino, kas Craigslist yra dalykas

211
00:12:14,630 --> 00:12:17,320
ar jūs nežinote, ką jūs turėtų daryti.

212
00:12:17,320 --> 00:12:20,150
Į dešinę. Taigi, paaiškinti, ką Craigslist yra šiame puslapyje, yra labai svarbus.

213
00:12:20,150 --> 00:12:23,490
Mes iš tiesų gali pasakyti, naudotojus informuoti, už ką šis puslapis yra faktiškai už.

214
00:12:23,490 --> 00:12:27,090
Jei aš tiesiog aplankyti, matau visą ryšelyje vietų. Aš net nežinau, ką jie reiškia.

215
00:12:27,090 --> 00:12:29,730
Bet dar svarbiau, tiesiog žiūri į šią sąsają,

216
00:12:29,730 --> 00:12:35,530
atsimenu, aš turėjo slinkti žemyn dalykų toną rasti tam tikrą bendruomenę

217
00:12:35,530 --> 00:12:37,560
kad aš iš tikrųjų rūpinosi apie tai.

218
00:12:37,560 --> 00:12:39,820
, Kas greitesnis būdas galėčiau tai padaryti? Taip.

219
00:12:39,820 --> 00:12:43,290
[Studentas] padalyti į rytus, vakarus regionuose. >> Gerai.

220
00:12:43,290 --> 00:12:47,460
Aš suskirstyti jas į platesniam įvairių kategorijų asmenų, kurie galėtų man padėti greičiau nustatyti

221
00:12:47,460 --> 00:12:49,820
kaip nuvykti į toje konkrečioje vietoje.

222
00:12:49,820 --> 00:12:54,510
[Studentas] Patalpinkite išplečiamąjį sąrašą. >> Teisė. Gerai.

223
00:12:54,510 --> 00:12:58,240
Aš galėtų naudoti išskleidžiamajame meniu, nes mes turime nustatytą dalykų

224
00:12:58,240 --> 00:13:00,100
ir mes galime parodyti jiems, išskleidžiamajame meniu.

225
00:13:00,100 --> 00:13:02,240
Tokiu būdu ji nėra užimti tiek daug vietos ekrane.

226
00:13:02,240 --> 00:13:05,630
Bet dar geriau nei tai, ką mes galime padaryti?

227
00:13:05,630 --> 00:13:09,220
Taip. >> [Nesigirdi studento atsakymą] >> Ar galite pasakyti, kad dar kartą? >> [Studentas] Paieška dėžutė.

228
00:13:09,220 --> 00:13:11,260
Taip, paieškos laukelis. Tai puiku.

229
00:13:11,260 --> 00:13:16,430
Ką mes iš tikrųjų gali padaryti, jei mes žiūrime atgal skaidres, paieškos laukelį.

230
00:13:16,430 --> 00:13:21,520
Automatinis. Labai paprastas būdas ieškoti per rezultatus, kad jūs žinote, yra į rinkinį.

231
00:13:21,520 --> 00:13:25,980
Jei aš pradedu rašyti BO, tik parodyti man visus rezultatus, kurie BO viduje.

232
00:13:25,980 --> 00:13:29,030
Tokiu būdu aš galiu lengvai rasti ypač vienas, aš noriu eiti į

233
00:13:29,030 --> 00:13:32,390
vietoj to daryti slenkant per šį tikrai didelis sąrašą.

234
00:13:32,390 --> 00:13:37,450
>> Visi jie yra tikrai žemai kabančių vaisių rūšių, kad kažkas, kas vykdo Craigslist

235
00:13:37,450 --> 00:13:42,500
iš tikrųjų gali padaryti, kad apie svetainę patirtį daug geriau jų konkrečiam vartotojui.

236
00:13:42,500 --> 00:13:46,370
Gerai. Pakankamai kalbėti apie blogų tinklapis.

237
00:13:46,370 --> 00:13:49,410
Pakalbėkime apie "Facebook".

238
00:13:50,880 --> 00:13:54,390
Kai "Facebook" išėjo, ir ypač "Facebook" nuotraukos

239
00:13:54,390 --> 00:13:57,870
ten buvo daug kitų paslaugų, tuo metu, kuris galėtų padaryti lygiai tą patį, ką.

240
00:13:57,870 --> 00:14:00,740
Jie gali tvarkyti savo nuotraukas į albumus.

241
00:14:00,740 --> 00:14:03,360
, Ką galite padaryti, tai jums galėtų organizuoti juos į rinkinius, taip pat.

242
00:14:03,360 --> 00:14:06,070
Jūs galite tvarkyti juos pagal datą. Jūs galite tai padaryti visus šiuos konkrečius dalykus.

243
00:14:06,070 --> 00:14:11,710
Tačiau kiekvienas žino, ką padarė Facebook nuotraukos sprogti tuo metu, kai jis buvo išleistas?

244
00:14:11,710 --> 00:14:15,080
Taip. >> [Studentas] žymes. >> Žymos. Tiksliai.

245
00:14:15,080 --> 00:14:21,300
Mes turime Milo, kuris yra čia, mūsų šuo talismanas su tuo CS50 skara.

246
00:14:21,300 --> 00:14:24,810
Jūs galite pamatyti, kad mes turime šią funkciją viduryje.

247
00:14:24,810 --> 00:14:28,240
Ir tai, ką padarė "Facebook" nuotraukos taip įdomu iš praktiškumo požiūriu

248
00:14:28,240 --> 00:14:34,130
yra tai, kad ji iš tikrųjų leido žmonės per šį įtraukti savo draugus savo nuotraukas.

249
00:14:34,130 --> 00:14:37,680
"Facebook", nes savo tinklalapyje yra ypač socialines

250
00:14:37,680 --> 00:14:40,750
tai apie kuriant šį socialinį klimatą rūšiuoti.

251
00:14:40,750 --> 00:14:42,620
Kad pagerino nuotraukų patirties daug daugiau

252
00:14:42,620 --> 00:14:46,390
, nes jie iš tikrųjų galėtų pradėti sakydamas: "Tai yra jungtis tarp žmonių,

253
00:14:46,390 --> 00:14:49,220
ir tai yra nuotraukos apie žmones, jums iš tikrųjų rūpi. "

254
00:14:49,220 --> 00:14:52,200
Dalis tai pat rūšiuoti narcisizmą.

255
00:14:52,200 --> 00:14:54,980
Žmonės mėgsta būti pažymėti nuotraukų ir panašių dalykų.

256
00:14:54,980 --> 00:14:58,510
Nors tai nebūtinai yra geras žmogaus bruožas,

257
00:14:58,510 --> 00:15:01,910
tuo pačiu metu ji remiasi gerus dizaino sprendimus

258
00:15:01,910 --> 00:15:04,860
todėl, kad žmonės iš tikrųjų rūpi dalykų kaip šis.

259
00:15:04,860 --> 00:15:07,190
Taip, kad "Facebook" nuotraukos.

260
00:15:07,190 --> 00:15:09,800
>> Bet pakalbėkime Facebook apskritai.

261
00:15:09,800 --> 00:15:13,400
Aš tikiu, kad daug žmonių čia turi nuomonę apie "Facebook",

262
00:15:13,400 --> 00:15:16,430
abu geros dizaino sprendimus ir blogų dizaino sprendimai.

263
00:15:16,430 --> 00:15:20,270
Todėl galime išlieti arba būti laimingas.

264
00:15:23,480 --> 00:15:26,450
Come on. Aš žinau, jums visiems naudotis "Facebook".

265
00:15:26,450 --> 00:15:30,970
Kažkas turi kažką blogo pasakyti, ar kažką gero pasakyti apie tai. Taip.

266
00:15:30,970 --> 00:15:35,060
[Studentas] naujienų nėra daug dalykų, aš ne iš tikrųjų rūpi.

267
00:15:35,060 --> 00:15:37,740
Naujienų kanalas parodyti daug dalykų, kuriuos gali nesirūpina.

268
00:15:37,740 --> 00:15:41,660
Turite draugų "Facebook", kas jūs, kurie nevykdo 2 ar 3 metų

269
00:15:41,660 --> 00:15:43,860
ir pamatysite jų naujienų rezultatų Popping savo naujienų kanalą

270
00:15:43,860 --> 00:15:45,870
ir jums nereikia tikrai rūpi.

271
00:15:45,870 --> 00:15:48,700
"Facebook" iš tikrųjų stengėsi, kad tai geriau,

272
00:15:48,700 --> 00:15:53,150
ir jie iš tikrųjų bandė stumti atitinkamus rezultatus naujienų viršuje kaip vėlai

273
00:15:53,150 --> 00:15:58,300
kad jūs iš tikrųjų pamatyti dalykus draugų, kurie yra svarbūs jums ar savo artimų draugų.

274
00:15:58,300 --> 00:16:01,110
Dar ko nors? Taip.

275
00:16:01,110 --> 00:16:06,400
[Nesigirdi studento atsakymą] >> Ar galite pasakyti, kad vėl?

276
00:16:06,400 --> 00:16:10,140
[Studentas] Skelbimai yra gana nekrenta į akis. >> Kokia prasme?

277
00:16:10,140 --> 00:16:16,370
[Nesigirdi studentas atsakas] Jie neturi šviesos ekrane, pavyzdžiui, reklaminių antraščių.

278
00:16:16,370 --> 00:16:17,760
Gerai. Tai gerai.

279
00:16:17,760 --> 00:16:25,030
Jei prisimenate iš 90-ųjų interneto - >> [Malan] aš ten buvo. >> Jis buvo ten. [Juokas]

280
00:16:25,030 --> 00:16:29,210
Jūs galite prisiminti mirksi Gif foną, sparkly dalykus,

281
00:16:29,210 --> 00:16:31,570
"GeoCities" stiliaus rūšiuoti dalykų.

282
00:16:31,570 --> 00:16:34,080
Kad tikrai ne iš gero dizaino pavyzdys

283
00:16:34,080 --> 00:16:36,690
nes tai tikrai blaško dėmesį nuo turinio.

284
00:16:36,690 --> 00:16:39,590
Jeilio meno svetainė naudojamas animuotus GIF, jų kilmę,

285
00:16:39,590 --> 00:16:41,800
ir tu negali skaityti nieko puslapyje,

286
00:16:41,800 --> 00:16:44,870
bet aš manau, kas nors iš tikrųjų kalbėjosi su jais ir dabar jis šiek tiek skiriasi.

287
00:16:44,870 --> 00:16:48,940
[Malan] Tai daug geriau. >> Tai daug geriau dabar, kaip matote. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Tiesiog puikus, tiesiog - Taip. Gerai.

289
00:16:56,020 --> 00:17:00,560
>> Dalis jo, kad jūsų puslapis gali būti labai minimalistinis ir labai suprantama

290
00:17:00,560 --> 00:17:05,690
taip dalykų puslapio srauto taip, kad būtų labai logiška ir negaunate vienas kitą.

291
00:17:05,690 --> 00:17:11,849
Kokios rūšies kitų dalykų apie "Facebook" yra gera ar bloga apie "Facebook"?

292
00:17:11,849 --> 00:17:15,730
Tegul tik dizaino pokalbį čia.

293
00:17:19,470 --> 00:17:21,339
Oh. Kur? Taip.

294
00:17:21,339 --> 00:17:25,640
[Studentas] Naujas Chronologija sistema leidžia jums ieškoti asmens anketą apie savo praeitį.

295
00:17:25,640 --> 00:17:28,119
Ooh, Laiko planavimo juosta.

296
00:17:28,119 --> 00:17:30,280
Chronologija yra puikus dalykas, nes ji leidžia šakelių savo draugų

297
00:17:30,280 --> 00:17:33,300
atgal, kai jie buvo vidurinėje mokykloje.

298
00:17:35,160 --> 00:17:38,060
Laiko yra gerai, nes ji leidžia filtruoti per turinį daug greičiau,

299
00:17:38,060 --> 00:17:41,500
jis leidžia jums rasti dalykų, kad būtų kitaip, kurių buvo imtasi jums tikrai ilgai rasti

300
00:17:41,500 --> 00:17:45,840
tiesiog slinkti aukštyn ir žemyn, aukštyn, aukštyn, aukštyn, aukštyn, aukštyn, tarsi grįžta laiku.

301
00:17:45,840 --> 00:17:48,910
, Bet ten taip pat tarsi neigiama, kad vartotojo patirtį.

302
00:17:48,910 --> 00:17:51,190
Tai, kas gali būti?

303
00:17:51,190 --> 00:17:56,780
Didelis žodis, kuris prasideda P-R. >> [Studentas] Privatumo politika. >> Privatumo politika, tiesa?

304
00:17:56,780 --> 00:17:59,970
Privatumas yra didžiulis vartotojo patirtis klausimas.

305
00:17:59,970 --> 00:18:07,190
Tai yra vienas iš dalykų, kurių nekenčiu dauguma apie "Facebook" dabar. [Juokas]

306
00:18:07,190 --> 00:18:09,000
[Malan] Kaip aš dabar.

307
00:18:09,000 --> 00:18:11,380
Davidas nesuprato, tai iš tiesų vyko iki vakar.

308
00:18:11,380 --> 00:18:14,560
Taigi dabar jis žino, kad kiekvieną kartą aš kalbėtis jį, aš žinau, jis ignoruoja mane.

309
00:18:14,560 --> 00:18:16,880
[Malan] nepatogu dalis man buvo iš tikrųjų buvo ignoruojant jo,

310
00:18:16,880 --> 00:18:21,040
ir aš nežinojau, jis žinojo, kad aš buvo jį ignoruodama. [Juokas]

311
00:18:21,040 --> 00:18:24,030
Privatumas yra didžiulė problema.

312
00:18:24,030 --> 00:18:28,670
Ar kas nors čia man pasakyti, kas gali būti blogai apie Facebook privatumo

313
00:18:28,670 --> 00:18:32,270
be to, kad jie padaryti dalykus, kaip tai?

314
00:18:32,270 --> 00:18:37,240
Kas tai ypač sunku padaryti dėl "Facebook" privatumo?

315
00:18:37,240 --> 00:18:40,340
Kad tarsi yra pagrindinis klausimas.

316
00:18:41,680 --> 00:18:43,930
Taip. >> [Studentas] Slėpti nuotraukas iš tam tikrų žmonių.

317
00:18:43,930 --> 00:18:46,170
Į dešinę. Tiksliai, paslėpti savo nuotraukas iš tam tikrų žmonių.

318
00:18:46,170 --> 00:18:51,290
Jie turi šį mažą, nedidelį mygtuką viršutiniame dešiniajame kampe, kad leidžia perjungti nuotraukos privatumą.

319
00:18:51,290 --> 00:18:56,360
Jų privatumo parinktys yra labai įvairios skirtingų rūšių meniu.

320
00:18:56,360 --> 00:18:59,510
>> Jie Dotarłeś daug geriau apie tai visai neseniai, tačiau jis naudojamas tuo atveju,

321
00:18:59,510 --> 00:19:04,870
kad, kai jūs norėjo užkirsti kelią savo draugus iš matome nuotraukas,

322
00:19:04,870 --> 00:19:08,280
jums reikės eiti per labai sudėtingas 5 žingsnio procesas yra kaip,

323
00:19:08,280 --> 00:19:11,150
leiskite spauskite šią nuorodą, dabar leiskite man dar kartą spustelėkite, leiskite man dar kartą spustelėkite,

324
00:19:11,150 --> 00:19:13,420
leiskite nurodykite, kurie žmonės negali matyti mano nuotraukas.

325
00:19:13,420 --> 00:19:17,250
Tai nėra ypač gerai "Facebook"

326
00:19:17,250 --> 00:19:20,530
nes tiek daug apie vartotojų patirtį, suteikiant jiems laisvę

327
00:19:20,530 --> 00:19:22,460
kontroliuoti, ką žmonės gali pamatyti.

328
00:19:22,460 --> 00:19:25,550
Mes tai vadiname Vartotojo kontrolės ir laisvę.

329
00:19:25,550 --> 00:19:31,090
Jei nesate leisti savo vartotojams tai padaryti taip, kad būtų veiksmingas ir intuityvus,

330
00:19:31,090 --> 00:19:34,570
tada jūsų vartotojo patirtis yra tikrai ne tai, kad didelis ne visiems.

331
00:19:34,570 --> 00:19:38,200
 Ar jums, vaikinai, patinka pasakyti ką nors apie Facebook?

332
00:19:38,700 --> 00:19:41,420
Kaip įjungti šią funkciją?

333
00:19:41,420 --> 00:19:46,290
[Ong] Jūs galite išjungti šią funkciją, ir tai yra didžiulė praktiškumo "Facebook" trūkumas.

334
00:19:46,290 --> 00:19:49,410
Ši funkcija - Aš iš tikrųjų pažvelgė į jį vakar -

335
00:19:49,410 --> 00:19:53,940
tai, kad jūs negalite padaryti jį arba jis palaidotas kažkur labai, labai giliai

336
00:19:53,940 --> 00:19:58,050
Facebook įdubų, nes aš negali išsiaiškinti, kaip išjungti šią funkciją.

337
00:19:58,050 --> 00:20:00,400
[Malan] Bet kartais šie sprendimai nėra akivaizdus

338
00:20:00,400 --> 00:20:03,890
nes jus vaikinai mums davė daug naudingų atsiliepimų įvairių CS50 paraiškas

339
00:20:03,890 --> 00:20:05,710
svetainių, kurios kursas naudoja.

340
00:20:05,710 --> 00:20:10,260
Mes neįgyvendino visus šiuos prašymus ir pasiūlymus.

341
00:20:10,260 --> 00:20:14,550
>> Dalis, kad yra gauti tiek daug prašymų, kad tai yra laiko funkcija,

342
00:20:14,550 --> 00:20:17,070
bet kartais mes tiesiog padaryti sąmoningą sprendimą, pavyzdžiui,

343
00:20:17,070 --> 00:20:19,830
"Ačiū jums už sugaištą, bet mes nepritariame."

344
00:20:19,830 --> 00:20:24,350
Taigi, kaip jūs iš tikrųjų nuspręsti, ką reikėtų daryti, jei manote, kad jūsų vartotojai turi kažką daryti

345
00:20:24,350 --> 00:20:28,110
, net jei jūs nebūtinai?

346
00:20:28,110 --> 00:20:32,360
Tai puikus balansas tarp faktiškai klausytis, ką jūsų vartotojai teigė, kad

347
00:20:32,360 --> 00:20:35,840
ir iš tikrųjų kažkokią linijos, kur jūs sakote,

348
00:20:35,840 --> 00:20:37,750
"Mes neketiname daryti tai, ką šie vartotojai pasakyti."

349
00:20:37,750 --> 00:20:42,520
Ir visų pirma, aš manau, kad buvo Henris Fordas citata, kuris apibendrina tai padaryti gana gerai.

350
00:20:42,520 --> 00:20:47,130
"Jei aš paprašė žmonių, ką jie norėjo, jie sakė, jie norėjo greičiau arklius."

351
00:20:47,130 --> 00:20:51,840
Ar kas nors rūšiuoti erzinti išskyrus ką ta kaina iš tikrųjų reiškia?

352
00:20:51,840 --> 00:20:56,060
Tai ne tik, kad vartotojai žinotų, ką jie nori,

353
00:20:56,060 --> 00:20:59,180
bet tai daugiau nei -

354
00:20:59,180 --> 00:21:02,720
[Studentas] Jie nežino, kas įmanoma.

355
00:21:02,720 --> 00:21:06,140
Iš dalies jie nežino, kas yra įmanoma.

356
00:21:07,880 --> 00:21:11,440
Erzinti, kad, išskyrus šiek tiek daugiau. Ką visa tai reiškia?

357
00:21:11,440 --> 00:21:21,340
[Nesigirdi studentas atsakas]

358
00:21:21,340 --> 00:21:25,770
Tai gerai. Ką aš manau, mes stengiamės pasakyti, čia yra, kad žmonės žino, ko nori.

359
00:21:25,770 --> 00:21:28,050
Jie nori greičiau arklius.

360
00:21:28,050 --> 00:21:29,840
Ką jie tikrai nori, yra galimybė judėti greičiau,

361
00:21:29,840 --> 00:21:32,310
bet jie tikrai nežino, vidutinės trukmės, pagal kuriuos būtų pasiekti, kad.

362
00:21:32,310 --> 00:21:36,330
Kai atvyksi į savo vartotojų ir jūsų vartotojai jums kai ką pasakyti

363
00:21:36,330 --> 00:21:39,700
ir jie pasakys "Mes norime, kad šias funkcijas ir šių funkcijų ir šių funkcijų,"

364
00:21:39,700 --> 00:21:42,650
nenorite visada galvoti apie tai, "Leisk man eiti į priekį

365
00:21:42,650 --> 00:21:44,720
"Ir įgyvendinti tai, ką jie aiškiai pasakyti"

366
00:21:44,720 --> 00:21:48,610
bet tai, ką jūs norite galvoti apie yra "Kokios idėjų aš galiu gauti iš to?"

367
00:21:48,610 --> 00:21:50,450
Ką jie iš tikrųjų nori?

368
00:21:50,450 --> 00:21:55,560
>> , O iš ten tai, ką galite padaryti, tai kurti kažką, kad atitinka šiuos prašymus

369
00:21:55,560 --> 00:22:00,340
bet nebūtinai taip, kad vartotojas tikisi, kad jis būtų patenkintas.

370
00:22:00,340 --> 00:22:03,830
Taigi, kažką panašaus į galutinius projektus, labai realiai,

371
00:22:03,830 --> 00:22:07,900
kas naudinga euristinis, kai kalbama apie padaryti kažką geriau,

372
00:22:07,900 --> 00:22:10,630
ypač, jei dizaineris turi tokią aroganciją apie jį

373
00:22:10,630 --> 00:22:14,360
kuriuo tarsi žinoti, kas geriausia, jums gali prisidėti iš savo vartotojų,

374
00:22:14,360 --> 00:22:16,580
bet kaip jūs iš tikrųjų eiti apie tai, kaip, kad grįžtamasis ryšys?

375
00:22:16,580 --> 00:22:21,610
Galutiniai projektų, labai konkrečiai, ką gamina optimalius rezultatus?

376
00:22:21,610 --> 00:22:25,030
Ką gamina optimalius rezultatus - ir aš eisiu per tai per sekundę -

377
00:22:25,030 --> 00:22:29,190
yra tai kurti ir testując ir tada iteravimu procesas.

378
00:22:29,190 --> 00:22:32,020
Ką aš turiu galvoje atliekant bandymus paprastai, kai kuriate kažką

379
00:22:32,020 --> 00:22:36,970
manote, kad tai gana gera, pavyzdžiui, "Aš toks puikus dizaineris. Kiekvienas žmogus turi mylėti."

380
00:22:36,970 --> 00:22:41,600
Ir tada jūs jį ten ir žmonės nelabai patinka tai, kad tam tikrų priežasčių.

381
00:22:41,600 --> 00:22:46,820
Ką jūs turite padaryti, tai jūs turite imtis dalykų, kad žmonės patinka dalių

382
00:22:46,820 --> 00:22:49,180
ir pertvarkyti dalykų, kad žmonės nepatinka.

383
00:22:49,180 --> 00:22:53,080
Tai skamba kaip labai akivaizdus, ​​tačiau šis procesas nuolat iteravimu

384
00:22:53,080 --> 00:22:55,980
viršuje tai, ką jūs jau pastatyta yra procesas, kuris padeda jums

385
00:22:55,980 --> 00:22:59,730
ne tik patobulinti savo projektavimo įgūdžius, bet taip pat padės jums patobulinti dizainą

386
00:22:59,730 --> 00:23:03,790
taip, kad žmonės iš tiesų vertiname jūsų produktą, net daugiau, nei jie tai padarė anksčiau.

387
00:23:03,790 --> 00:23:07,390
>> Aš eisiu per daugiau konkrečių pavyzdžių, ką jūs iš tiesų gali padaryti.

388
00:23:07,390 --> 00:23:11,390
Jei kaip paskutiniame pavyzdyje produkto rūšies, galime pažvelgti į baidarių.

389
00:23:11,390 --> 00:23:14,970
Baidarių, kai jis išėjo, buvo labai, labai populiarus.

390
00:23:14,970 --> 00:23:18,760
Ar kas nors atspėti, kodėl?

391
00:23:18,760 --> 00:23:20,950
Kokie yra dalykų rūšių jums patinka apie tai, jei jūs naudojate jį

392
00:23:20,950 --> 00:23:23,990
ar kas yra rūšių dalykų, jums nepatinka?

393
00:23:23,990 --> 00:23:31,590
Taip. >> [Nesigirdi studentas atsakas] >> Gerai.

394
00:23:31,590 --> 00:23:34,730
Štai jo dalis, yra nuomos vartotojo užklausą, kuri yra labiau išsiplėtusi

395
00:23:34,730 --> 00:23:38,150
nei labai griežtesniu, kaip: "Jūs turite pasirinkti savo pradžios datą

396
00:23:38,150 --> 00:23:39,810
", Ir jūs turite pasirinkti pabaigos datą."

397
00:23:39,810 --> 00:23:44,910
Tiesą sakant, tai leidžia būti lankstus apie tai, ir ji suteikia jums visų tame diapazone skrydžių.

398
00:23:44,910 --> 00:23:46,730
Dar ko nors?

399
00:23:46,730 --> 00:23:50,530
[Studentas] Jie apima kainą, mokesčius.

400
00:23:50,530 --> 00:23:53,330
Jie kainą mokesčius.

401
00:23:53,330 --> 00:23:56,720
Mokesčiai ir ką iš tikrųjų eiti tiesiai į tą kainą, viršutinėje kairėje

402
00:23:56,720 --> 00:24:00,710
todėl jūs ne apgauti, priversti galvoti, kad jūs iš tikrųjų moka už $ 240 skrydžio

403
00:24:00,710 --> 00:24:03,280
tada, kai tai tikrai 330 $.

404
00:24:03,280 --> 00:24:06,200
Dar ko nors? Taip.

405
00:24:06,200 --> 00:24:10,140
[Nesigirdi studentas atsakas]

406
00:24:10,140 --> 00:24:14,610
Aš nesu įsitikinęs, jei jie iš tikrųjų jums tai padaryti.

407
00:24:14,610 --> 00:24:18,310
Aš galėtų būti negerai.

408
00:24:18,310 --> 00:24:23,360
Kad gali būti įdomus dalykas, jei jūs norite įdėti daugiau svorio ypač filtrų

409
00:24:23,360 --> 00:24:27,000
, kad jie stumti rezultatus, susijusius su šiuo filtru, viršuje.

410
00:24:27,000 --> 00:24:31,920
Bet ar gali kas nors pasakykite man, kas yra toks ypatingas apie šį kairėje pusėje?

411
00:24:31,920 --> 00:24:39,540
Kaip jūs tradiciškai ieškoti skrydį dėl interneto paslaugas prieš tai?

412
00:24:41,600 --> 00:24:44,650
>> Taip. >> [Nesigirdi studento atsakymą] >> Ar galite pasakyti, kad -

413
00:24:44,650 --> 00:24:47,530
[Studentas] Kiekviena oro susisiekimo bendrovė. >> Taip. Kiekviena oro susisiekimo bendrovė turi savo interneto svetainę.

414
00:24:47,530 --> 00:24:50,110
Tai stiprina dalykų. Ir?

415
00:24:50,110 --> 00:24:52,190
[Studentas] Jūs žinote tiksliai, kiek laiko jūs paliekate.

416
00:24:52,190 --> 00:24:54,460
Jūs žinote tiksliai, kiek laiko jūs paliekate,

417
00:24:54,460 --> 00:24:59,380
, bet ir su ypač filtrų.

418
00:25:00,710 --> 00:25:03,540
Leiskite man atsigriebti baidarių.

419
00:25:11,490 --> 00:25:14,020
Dieve, pop-up langus. Blogas vartotojo patirtį.

420
00:25:14,020 --> 00:25:17,230
Kas atsitinka, kai aš perkelti šį slankiklį?

421
00:25:17,230 --> 00:25:21,010
[Studentas] Automatiniai atnaujinimai. >> [Ong] Automatiniai atnaujinimai.

422
00:25:21,010 --> 00:25:23,440
, Kad kažkas, kad labai svarbu.

423
00:25:23,440 --> 00:25:25,380
Prieš tai, kai jūs norėjote ieškoti skrydį,

424
00:25:25,380 --> 00:25:28,410
jums teko įdėti įvesties vietą, savo produkciją vietą, paspauskite Search,

425
00:25:28,410 --> 00:25:31,190
ji būtų apdoroti, kad ir parodyti savo rezultatus.

426
00:25:31,190 --> 00:25:34,120
Jei norėjote pakeisti savo užklausą, jums reikės paspausti du kartus:

427
00:25:34,120 --> 00:25:39,770
nuo nulio įvesti naują užklausą, ir tada daryti vėl ir vėl.

428
00:25:39,770 --> 00:25:43,910
Gražus dalykas, apie kažką panašaus į tai, ji naudoja labai [nesuprantama] dalykas viduryje.

429
00:25:43,910 --> 00:25:46,230
Kai jums padaryti kažką panašaus į tai, šaunantis prašymą

430
00:25:46,230 --> 00:25:48,420
ir ji grąžina visus rezultatus iš karto.

431
00:25:48,420 --> 00:25:51,680
Tai yra kažkas, kad baidarių Wściekle populiarus nedelsiant atsiliepimai rūšiuoti

432
00:25:51,680 --> 00:25:55,910
nes tai tikrai lengva man tiesiog pakeisti savo užklausą

433
00:25:55,910 --> 00:25:58,890
ir išsiaiškinti dalykus, kurie yra maždaug tam tikrą intervalą

434
00:25:58,890 --> 00:26:01,950
be to, kad eiti į priekį ir atgal, pirmyn ir atgal, pirmyn ir atgal.

435
00:26:01,950 --> 00:26:05,200
Taigi tai yra visų dalykų rūšių, norite galvoti apie tai, kai jūs projektuojant savo svetainę.

436
00:26:05,200 --> 00:26:08,930
Kaip aš galiu padaryti, kad tai labai veiksminga mano vartotojai eiti per ką jie dirba

437
00:26:08,930 --> 00:26:13,010
ir gauti jų svarbiausias siekis kuo greičiau?

438
00:26:13,010 --> 00:26:16,430
[Malan] Ir Juozapo taško anksčiau apie vartotojus, nebūtinai žinoti, ko jie nori,

439
00:26:16,430 --> 00:26:18,640
apie tai, kas jus vaikinai žinoti apie HTML

440
00:26:18,640 --> 00:26:22,780
ir jūs turite žymės langelius, radijo mygtuką, pasirinkite meniu, įvedimo laukų ir panašūs,

441
00:26:22,780 --> 00:26:26,140
kaip norėtumėte įgyvendinti skinti pradžios laiką, skrydžio sąvoką?

442
00:26:26,140 --> 00:26:30,030
>> Kuris iš šių skirtingų UI mechanizmų jūs naudojate?

443
00:26:30,030 --> 00:26:34,100
Jei jūs tiesiog žinau, HTML sumą, kuri buvo mokoma iki

444
00:26:34,100 --> 00:26:39,070
ir jūs žinote, sąnaudos yra radijo mygtukus, žymės langelius, išskleidžiamųjų meniu, ir įvedimo laukas,

445
00:26:39,070 --> 00:26:43,320
, koks būtų jūsų pasirinkimas buvo skinti datas?

446
00:26:43,320 --> 00:26:48,670
[Studentas] Input. >> Įėjimo. Arba gal net lašas žemyn su visais apie datas, tiesa?

447
00:26:48,670 --> 00:26:53,170
Taigi sudėtingesnių UI mechanizmus kaip tai kairėje pusėje, kad būtų galima įgyvendinti,

448
00:26:53,170 --> 00:26:55,500
jūs galite padaryti šį procesą daug labiau intuityvus slankiklį

449
00:26:55,500 --> 00:27:01,020
nes laikas yra tęstinis, ir žmonės paprastai neturi galvoti apie tai, atskirų gabaliukus.

450
00:27:01,020 --> 00:27:04,950
Gerai. Paskutinis dalykas.

451
00:27:04,950 --> 00:27:07,370
Dešimt praktiškumo euristika.

452
00:27:07,370 --> 00:27:10,820
Viskas, ką mes kalbėjome apie tikriausiai patenka į vieną iš šių kategorijų.

453
00:27:10,820 --> 00:27:14,420
Jeigu jūs einate į šią nuorodą, svetaines bus paskelbtas internete,

454
00:27:14,420 --> 00:27:18,900
jūs iš tiesų gali, kaip jums sukurti savo svetainę, kad šių euristika omenyje

455
00:27:18,900 --> 00:27:21,330
ir šių nykščio taisykles.

456
00:27:21,330 --> 00:27:26,610
Savo projektus, ką aš siūlau jums padaryti siekiant geriau projektuoti jūsų app

457
00:27:26,610 --> 00:27:28,850
yra padaryti popieriaus prototipų.

458
00:27:28,850 --> 00:27:32,150
Kai jūs galvojate apie savo programą, labai greitai nupiešti, ką jūs norite atrodyti

459
00:27:32,150 --> 00:27:36,230
ir įsitikinkite, kad visi langeliai yra išdėstyti taip, kad būtų labai intuityvus vartotojui naudoti

460
00:27:36,230 --> 00:27:39,820
ir net parodyti šių popieriaus prototipus savo draugams ir pradėti tikslines grupes.

461
00:27:39,820 --> 00:27:44,230
Tiesiog gauti 2 arba 3 žmones ir paprašykite jų, tiesiog bakstelėkite šių popieriaus prototipų,

462
00:27:44,230 --> 00:27:47,650
ir parodyti jiems naujus ekranus, kad pamatyti, jei jie iš tikrųjų suprasti, kas vyksta.

463
00:27:47,650 --> 00:27:50,680
>> Ką jūs norite daryti yra suteikti jiems užduotis, motyvuoti vykdyti tą užduotį,

464
00:27:50,680 --> 00:27:53,270
ir tiesiog suteikti jiems app ir leisti juos naudoti.

465
00:27:53,270 --> 00:27:56,530
Neduokite jiems nurodymus ne tik, kad.

466
00:27:56,530 --> 00:28:00,920
Jūs norite, kad iš tikrųjų leiskite jiems sąveikauti su jūsų app tokiu būdu, kuris leidžia matyti

467
00:28:00,920 --> 00:28:03,870
kaip jie ją naudoti, jei nebuvo stovi šalia jų.

468
00:28:03,870 --> 00:28:05,250
Ir kad tai labai svarbu.

469
00:28:05,250 --> 00:28:08,780
Kad duos jums daug įžvalgų, kad yra žmonių, gauti apie konkrečias dalykų

470
00:28:08,780 --> 00:28:10,560
tokiu būdu, kad aš ne ketina juos?

471
00:28:10,560 --> 00:28:14,680
Jie naudoja tam tikras UI mechanizmus ekrane

472
00:28:14,680 --> 00:28:17,490
tokiu būdu, kuris yra rūšies Hacky?

473
00:28:17,490 --> 00:28:22,020
Aš neketina juos daryti, kad taip.

474
00:28:22,020 --> 00:28:23,940
Ir, kai jūs baigsite su, ką jūs norite daryti?

475
00:28:23,940 --> 00:28:26,010
Jūsų dizaino akmenys, tiesa?

476
00:28:26,010 --> 00:28:29,600
Ką jūs norite daryti yra, norite, o vėliau ir padaryti šį procesą vėl.

477
00:28:29,600 --> 00:28:32,110
Taigi, parodyti juos savo draugams, kai jums sukūrėme, jį išbandyti,

478
00:28:32,110 --> 00:28:36,630
kurti, išbandyti, plėtoti, išbandyti, pakartoti, ir ir pirmyn.

479
00:28:36,630 --> 00:28:39,720
Dizainas yra labai pasikartojantis procesas šiuo požiūriu.

480
00:28:39,720 --> 00:28:43,280
Jūs iš tikrųjų turite sukurti kažką ir tada realizuoti dalykų apie tai

481
00:28:43,280 --> 00:28:46,520
kad tu negali suprasti, prieš ir grįžti ir pagerinti nuo to.

482
00:28:46,520 --> 00:28:50,890
Dabar, kaip ir plėtros dalis, tai ką Tommy ketina parodyti jums, po pertraukos

483
00:28:50,890 --> 00:28:53,220
ir kaip jūs galėtų įgyvendinti kažką panašaus Automatinis užpildymas

484
00:28:53,220 --> 00:28:56,610
tokiu būdu, kad yra gana paprasta.

485
00:28:57,440 --> 00:28:59,550
[Malan] Kaip Tommy įkuria čia klausimas.

486
00:28:59,550 --> 00:29:03,780
Daug iš pirmųjų svetainių - ir kai Juozapas sakė 1990-ųjų stiliaus svetainę,

487
00:29:03,780 --> 00:29:07,640
tai buvo diegimas kur, jei jūs norėjo pasirinkti pradžios laiką ir pabaigos laiko,

488
00:29:07,640 --> 00:29:10,380
tiesą sakant, atgal per dieną, ir net kai kurių svetainių šiandien

489
00:29:10,380 --> 00:29:13,220
būdas tai padaryti visiškai jums pasirinkti valandą iš išskleidžiamojo,

490
00:29:13,220 --> 00:29:15,910
jums pasirinkti minučių iš išplečiamojo, gal jums pasirinkti AM, PM,

491
00:29:15,910 --> 00:29:17,440
ir tada jums padaryti, kad 3 ir daugiau kartų.

492
00:29:17,440 --> 00:29:19,920
Ir taip su 6 paspaudimų ir galbūt kai kurie SCROLLING

493
00:29:19,920 --> 00:29:24,000
jūsų vartotojas gali faktiškai teikti tam tikrą datą ir / arba laiko intervalas šia prasme.

494
00:29:24,000 --> 00:29:27,920
>> Taigi tikrai optimalu, ir dar iki šiol mes matėme nėra išraiškingas galimybes

495
00:29:27,920 --> 00:29:30,330
bet iš kalbų, mes pažvelgė padaryti kažką seksualesnis

496
00:29:30,330 --> 00:29:32,620
kaip šis pradžios laikas ir pabaigos laikas slankiklį.

497
00:29:32,620 --> 00:29:36,290
Tačiau jei manote, atgal į savaitę 0 kai mes kalbėjome apie nulio,

498
00:29:36,290 --> 00:29:39,080
ten taip pat ten buvo ne raštai, kad tik padarė tam tikrus dalykus.

499
00:29:39,080 --> 00:29:42,700
Jūs tikrai tik šiuos, pavyzdžiui, vietinių linijų ir vietinių sąlygų ir panašių pagrindų.

500
00:29:42,700 --> 00:29:46,910
Toks geras, tiesiog galvoju dabar labai abstrakčiai, nepriklausomas nuo HTML duomenis,

501
00:29:46,910 --> 00:29:51,260
tai, kas iš tikrųjų vyksta šį pradžios laiką kažką panašaus ir pabaigos laikas slankiklį?

502
00:29:51,260 --> 00:29:54,960
Kai aš perkelti savo pele ir aš spustelėkite, kad šiek tiek morkų simbolio kairėje

503
00:29:54,960 --> 00:29:59,220
ir pradėti vilkdami, programiškai, kas tai norite, kad būtų galima įgyvendinti

504
00:29:59,220 --> 00:30:01,000
padaryti, kad taip atsitiktų?

505
00:30:01,000 --> 00:30:04,920
Kokius klausimus, ką Būlio išraiškos norite, kad būtų galima paklausti?

506
00:30:04,920 --> 00:30:06,930
Tai, kas iš tikrųjų vyksta? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Studentas] Jeigu žymeklio pozicija? >> Gerai. Kur yra žymeklio pozicija?

508
00:30:10,080 --> 00:30:11,970
Tai buvo kažkas mums reikia išreikšti atgal nulio,

509
00:30:11,970 --> 00:30:14,690
ar jis buvo grindžiamas vietą ar net spalvą arba iš panašių medžiagų.

510
00:30:14,690 --> 00:30:18,410
Jūs tikriausiai pamenate, vis tiek trumpai, pirmadienį buvo visus šiuos dalykus, vadinamosios įvykių

511
00:30:18,410 --> 00:30:22,370
į interneto pasaulį, ir todėl yra dalykų, pavyzdžiui, onclick ir onkeypress

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

513
00:30:25,960 --> 00:30:29,130
Taigi suprasti, kad net šie dalykai, mes jau suteiktas internete

514
00:30:29,130 --> 00:30:32,190
su svetainių, kaip "Facebook" ir "Gmail", net jei jūs neturite idėjos,

515
00:30:32,190 --> 00:30:34,890
kaip jūs galbūt įgyvendinti, kad, nes ten nieko net kaip jį paskaitą

516
00:30:34,890 --> 00:30:38,570
ar problemą, 7, suprantame, kad šių tikslų pačių pagrindų,

517
00:30:38,570 --> 00:30:41,090
su HTTP ir parametrų ir GET ir POST,

518
00:30:41,090 --> 00:30:44,010
su pagrindinias HTML sąnaudų, kad mes pažvelgė iki šiol

519
00:30:44,010 --> 00:30:47,690
ir programinių priemonių, metu, kad Tommy įvesti

520
00:30:47,690 --> 00:30:51,300
galite pradėti išreikšti save, tiesiog kaip tu savaitę 0

521
00:30:51,300 --> 00:30:53,800
dėl labai intuityviai velkant ir numetant.

522
00:30:53,800 --> 00:30:58,950
>> Taigi, su ta sako, Tommy MacWilliam ir keletą naujų įspūdį mums dėl interneto.

523
00:30:58,950 --> 00:31:03,450
Gerai. My name is Tommy ir aš ruošiuosi kalbėti apie "JavaScript".

524
00:31:03,450 --> 00:31:07,150
Tiesiog atsisakymas: aš esu tos nuomonės, kad JavaScript yra geriausia programavimo kalba

525
00:31:07,150 --> 00:31:09,010
viso pasaulio.

526
00:31:09,010 --> 00:31:11,940
Yra daug žmonių, kurie nesutinka su manimi, bet tai tiesiog nuostabi.

527
00:31:11,940 --> 00:31:16,330
Kai jūs einate į C, jei turite rašyti C kitai klasei arba kai kuriomis kitomis kalbomis,

528
00:31:16,330 --> 00:31:19,780
tai tik labai varginantis visų žemo lygio detalių, jūs turite, įklimpsta in

529
00:31:19,780 --> 00:31:23,050
Taigi, jei jūs kada nors jausmas liūdna apie tai, kaip erzina C rašyti,

530
00:31:23,050 --> 00:31:25,130
tiesiog grįžti, parašyti šiek tiek "JavaScript". Tai nirvana.

531
00:31:25,130 --> 00:31:27,980
Jūs jausitės daug geriau apie savo blogų dienų.

532
00:31:27,980 --> 00:31:31,900
JavaScript magija daug ateina iš jo gebėjimas manipuliuoti dalykų

533
00:31:31,900 --> 00:31:33,730
, kurios jau yra puslapyje.

534
00:31:33,730 --> 00:31:38,520
Kai rašėme savo PHP skriptus, jie buvo atliekami serveryje,

535
00:31:38,520 --> 00:31:42,270
ir galiausiai, kad PHP scenarijų, tikriausiai wypisuje HTML.

536
00:31:42,270 --> 00:31:45,860
Kad HTML buvo siunčiama klientui, ir kad ji buvo.

537
00:31:45,860 --> 00:31:50,180
Jei PHP norėjau pridėti mygtuką į puslapį, pavyzdžiui, jis negali tikrai, kad.

538
00:31:50,180 --> 00:31:54,350
Ji turėtų teikti visiškai naują HTML failą ir išsiųsti ją į naršyklę.

539
00:31:54,350 --> 00:31:57,840
Su "JavaScript" mes žinome, kad mes galėtume atnaujinti dalykų, o jie jau puslapyje,

540
00:31:57,840 --> 00:32:00,840
ir dėl to mes galime pateikti daug daugiau trumpąją atsiliepimus,

541
00:32:00,840 --> 00:32:06,150
, kuri bus tikrai pagerinti vartotojų patirtį mūsų svetainėje.

542
00:32:06,150 --> 00:32:09,330
Tiesiog greitai Priminti JavaScript selektoriai.

543
00:32:09,330 --> 00:32:11,590
Mes žinome, kad, kai mes atsisiųsti HTML puslapį,

544
00:32:11,590 --> 00:32:13,890
, kad bus atstovaujama DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM atminkite tik tai didelis medis, kai elementai yra susiję su šio didelio hierarchijos.

546
00:32:19,340 --> 00:32:21,810
Kai dirbome su duomenų bazių pset 7,

547
00:32:21,810 --> 00:32:26,280
vienas iš pirmųjų dalykų, kuriuos reikia žinoti, kaip tai padaryti užklausą duomenų bazei.

548
00:32:26,280 --> 00:32:29,060
Mes šią didieji vartotojai lentelę, o kartais mes tiesiog noriu pasakyti,

549
00:32:29,060 --> 00:32:33,260
"Aš tik noriu, kai kurie iš šių vartotojų, kurie atitinka tam tikrą sąlygą."

550
00:32:33,260 --> 00:32:36,020
Be to, kai mes turime DOM mums reikia šiek tiek jį užklausų būdas.

551
00:32:36,020 --> 00:32:39,490
Mums reikia šiek tiek pasakyti, "Aš noriu visų mygtukų, kuris atrodo taip

552
00:32:39,490 --> 00:32:41,860
"Arba visus vaizdus puslapyje.

553
00:32:41,860 --> 00:32:44,330
Ir šie selektoriai leidžia mums tai padaryti.

554
00:32:44,330 --> 00:32:45,690
Taigi, tiesiog greitai Priminti.

555
00:32:45,690 --> 00:32:50,770
Tai pirmasis, tai # pateikti, kas yra, kad ketina pasirinkti? Ar kas nors prisimena?

556
00:32:50,770 --> 00:32:54,880
[Nesigirdi studentas atsakas] >> Taip, tiksliai.

557
00:32:54,880 --> 00:32:59,510
Tai vyksta, kad pasirinktumėte elementą į puslapį, kuriame yra pateikti ID.

558
00:32:59,510 --> 00:33:03,470
Ir taip, kad maišos tegus sako, tai selektorius ketina dirbti su ID.

559
00:33:03,470 --> 00:33:07,630
Kaip apie antrąjį. Centre, kas bus, kad pasirinkti?

560
00:33:11,360 --> 00:33:15,180
Taip. >> [Studentas] Klasė. >> Būtent. Tai dabar ketina pasirinkti pagal klases.

561
00:33:15,180 --> 00:33:18,840
Tarp ID ir klasės čia skirtumas paprastai turi būti unikalus ID

562
00:33:18,840 --> 00:33:20,820
per kokia erdvė jūs ieškote daugiau.

563
00:33:20,820 --> 00:33:23,080
Taigi, jei ieškote per visą interneto puslapį,

564
00:33:23,080 --> 00:33:27,740
jums tikrai turėtų turėti tik 1 elementas, kad tam tikros ID, todėl šiuo atveju pateikti.

565
00:33:27,740 --> 00:33:31,330
Su klasėmis, kita vertus, mes galime turėti daugiau nei 1 elementas tame pačiame puslapyje

566
00:33:31,330 --> 00:33:33,130
toje pačioje klasėje.

567
00:33:33,130 --> 00:33:36,580
Tai gali būti naudinga pasakyti, kad aš norite pasirinkti viską, kas centre puslapyje

568
00:33:36,580 --> 00:33:38,450
, o ne tik 1 dalykas.

569
00:33:38,450 --> 00:33:40,310
>> Ir, pagaliau, ši naujausia čia yra šiek tiek sudėtingesnis,

570
00:33:40,310 --> 00:33:43,890
bet ką tai vyksta pasirinkti iš DOM?

571
00:33:46,650 --> 00:33:48,810
[Nesigirdi studentas atsakas] >> Kas tai?

572
00:33:48,810 --> 00:33:53,250
[Studentas] Viskas, kas tegus. >> Mes turime 2 dalys.

573
00:33:53,250 --> 00:33:58,070
Antroji dalis ketinate pasakyti, noriu pasirinkti šiuos žodžius su žymelę įvesties,

574
00:33:58,070 --> 00:34:00,730
todėl bet koks elementas, kuris yra įvesties šablonas.

575
00:34:00,730 --> 00:34:03,080
Bet aš nenoriu tiesiog pasirinkti visus žaliavų,

576
00:34:03,080 --> 00:34:05,170
nes gali būti kažkas panašaus į mygtuką "Siųsti" įvesties

577
00:34:05,170 --> 00:34:08,409
ir galėtų būti kažkas panašaus į teksto laukelio įvesties.

578
00:34:08,409 --> 00:34:11,909
Taigi su šiais laužtiniuose skliaustuose aš sakau, aš norite pasirinkti tik tuos elementus,

579
00:34:11,909 --> 00:34:14,110
, kurie yra teksto formatą.

580
00:34:14,110 --> 00:34:17,400
Kažkur mano HTML tegus turiu tipo atributą "

581
00:34:17,400 --> 00:34:19,750
ir to atributo reikšmė turi būti tekstas.

582
00:34:19,750 --> 00:34:21,340
Taigi, kaip apie šio pirmojo čia?

583
00:34:21,340 --> 00:34:25,489
Pirmasis žodis šio selektoriaus yra forma, tada turiu tarpą ir tada šis įėjimas dalis.

584
00:34:25,489 --> 00:34:29,620
Ką tai padaryti, formą, prieš ją?

585
00:34:33,409 --> 00:34:35,860
Tai vyksta iš esmės apriboti savo užklausą.

586
00:34:35,860 --> 00:34:38,510
Tai gali būti atvejis, kad mes turime keletą įėjimai puslapio

587
00:34:38,510 --> 00:34:41,080
, yra ne forma palikuonys.

588
00:34:41,080 --> 00:34:46,150
Kas tai padarys, tai pasakys, aš tik noriu įvesties žodžius, kažkur virš jų

589
00:34:46,150 --> 00:34:49,030
kai tėvų elemento forma.

590
00:34:49,030 --> 00:34:52,100
Ir tokiu būdu mes galime padaryti šiuos hierarchinius užklausas

591
00:34:52,100 --> 00:34:55,000
todėl mes negalime tiesiog turite pasirinkti viską, atitinkančių tam tikrą selektorių.

592
00:34:55,000 --> 00:35:00,760
Mes galime rūšies apriboti taikymo sritį, šiai užklausai į ką nors kita.

593
00:35:00,760 --> 00:35:04,000
Taigi dabar, kad mes žinome, kaip pasirinkti elementus puslapyje,

594
00:35:04,000 --> 00:35:06,780
pakalbėkime šiek tiek apie AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX yra vis dar labai madinga akronimas, kuris reiškia Asynchronous JavaScript ir XML.

596
00:35:12,270 --> 00:35:15,640
Jis tiesiog taip atsitinka, kad XML yra tik tam tikru būdu pateikti duomenis.

597
00:35:15,640 --> 00:35:20,920
>> Neseniai natūra, kad prarado populiarumą, todėl X AJAX nėra naudojami visą laiką.

598
00:35:20,920 --> 00:35:26,220
Iš esmės, ką AJAX leidžia mums daryti HTTP užklausas

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

600
00:35:28,620 --> 00:35:32,310
Kai mes mūsų interneto naršyklėje ir mes naršyti aplink puslapiuose ir mes spustelėkite nuorodą,

601
00:35:32,310 --> 00:35:37,790
mūsų naršyklę ketinate daryti yra HTTP "užklausą kokia nuoroda mes spustelėkite.

602
00:35:37,790 --> 00:35:41,670
Bet tai ne visada idealus, nes jei tai toks atvejis, tada kaip Dovydas buvo sakydamas,

603
00:35:41,670 --> 00:35:45,220
mes visada turime, kad vartotojai spustelėkite mygtuką "Pateikti" arba spustelėkite nuorodą

604
00:35:45,220 --> 00:35:50,380
tam, kad kas nors atsitikti, kad ketina įtraukti "HTTP" užklausą.

605
00:35:50,380 --> 00:35:54,160
Taigi su AJAX mes galime padaryti šiuos prašymus vardu JavaScript.

606
00:35:54,160 --> 00:35:57,020
Tai reiškia, kad, kai vartotojas sąveikauja su puslapio ar kas nors atsitiks,

607
00:35:57,020 --> 00:36:01,780
mes iš tikrųjų galite atlikti programavimo prašymą kai kurių kitų mūsų svetainėje PHP failą

608
00:36:01,780 --> 00:36:06,280
ar dar ką nors ir gauti duomenis, kad ši byla išspjauna.

609
00:36:06,280 --> 00:36:09,860
Paimkime bent AJAX Pavyzdžiui išvaizdą.

610
00:36:09,860 --> 00:36:16,140
Tai yra mūsų CS50 Finansai puslapis, su kuria, tikiuosi, kai kurie iš mūsų yra susipažinę.

611
00:36:16,140 --> 00:36:21,790
Jei pažvelgsime į šio puslapio HTML, mes matome čia, kad aš pridėjo keletą dalykų,

612
00:36:21,790 --> 00:36:23,820
kurių aš ŠI FORMA ID.

613
00:36:23,820 --> 00:36:26,480
Jau sakiau id = "forma citata".

614
00:36:26,480 --> 00:36:31,910
Aš padariau tai tik todėl, kad vyksta, kad tai šiek tiek lengviau pasirinkti iš DOM

615
00:36:31,910 --> 00:36:35,090
nes aš galiu tik padaryti labai paprasta užklausa.

616
00:36:35,090 --> 00:36:38,960
Ką aš noriu padaryti, čia yra, aš noriu išspręsti tam tikrą problemą su CS50 Finansų.

617
00:36:38,960 --> 00:36:41,550
Taigi, jei mes einame į finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
kiekvieną kartą aš noriu gauti pasiūlymą, aš turiu spragtelėti šį Gauti citatą mygtuką,

619
00:36:45,700 --> 00:36:48,960
ir kad Gauk Citata mygtuką, tada priima mane į kitą visą puslapį.

620
00:36:48,960 --> 00:36:52,400
Ir jei aš noriu kitą pasiūlymą, turite paspausti mygtuką "Atgal" ir tada aš įveskite jį,

621
00:36:52,400 --> 00:36:54,480
Galiu gauti pasiūlymą, ir aš paspauskite mygtuką "Atgal".

622
00:36:54,480 --> 00:36:56,840
Tai tikrai nėra geriausias vartotojo patirtį.

623
00:36:56,840 --> 00:37:01,570
Kas tikrai naudotis svetaine, jei tai, kad lėtai gauti akcijų kainas?

624
00:37:01,570 --> 00:37:05,630
Taigi, tai, ką mes norime daryti su AJAX yra pašalinti, kad vyksta į atskirą puslapį žingsnis

625
00:37:05,630 --> 00:37:08,410
, kad galėtumėte peržiūrėti rezultatus.

626
00:37:08,410 --> 00:37:11,240
>> Ką mes iš tikrųjų tik prašo, kad tikrai maža kaina,

627
00:37:11,240 --> 00:37:14,240
ir tai tik tikrai nedidelis duomenų kiekis.

628
00:37:14,240 --> 00:37:17,400
Taigi čia ne man reikia eiti kitą visą HTML puslapį,

629
00:37:17,400 --> 00:37:20,670
atsisiųsti visą naują partiją HTML, atsisiųsti gal šiek tiek daugiau vaizdų,

630
00:37:20,670 --> 00:37:24,410
kai kurie kiti failai CSS tiesiog man atsakyti į šį labai paprastą klausimą

631
00:37:24,410 --> 00:37:27,810
kiek kainuoja Pateikta sandelio prieinamumo kaina.

632
00:37:27,810 --> 00:37:31,000
Su AJAX mes galime padaryti tai daug lengviau.

633
00:37:31,000 --> 00:37:36,400
Mes matome čia, kad aš susiejimas "JavaScript" failą pavadinimu quote.js.

634
00:37:36,400 --> 00:37:40,140
Tegul iš tikrųjų atverti tą failą. Nėra.

635
00:37:42,610 --> 00:37:45,860
Visi mano "JavaScript" failus bus įsikūrusi HTML

636
00:37:45,860 --> 00:37:47,630
kad interneto naršyklė gali jį pasiekti.

637
00:37:47,630 --> 00:37:50,330
Tada mes turime atskirą katalogą čia pagal JavaScript,

638
00:37:50,330 --> 00:37:54,340
ir dabar čia yra quote.js.

639
00:37:54,340 --> 00:38:00,930
Šio failo viršuje, tai sako čia, kad aš noriu laukti visą puslapį, turi būti kraunamos

640
00:38:00,930 --> 00:38:04,830
kol aš pabandyti ką nors padaryti. Kodėl tai, kad būtina?

641
00:38:04,830 --> 00:38:08,650
Pasirodo, kad Kitas dalykas, aš ruošiuosi padaryti čia yra pradėti ieškoti elemento

642
00:38:08,650 --> 00:38:10,810
, kuris atitinka tam tikrą selektorių.

643
00:38:10,810 --> 00:38:15,600
Jei tai "JavaScript" yra nuolat vykdoma, kol šis elementas yra pakrautas puslapyje,

644
00:38:15,600 --> 00:38:17,820
tada viskas, aš stengiuosi padaryti nesiruošia dirbti

645
00:38:17,820 --> 00:38:20,580
nes aš ruošiuosi pabandykite pasirinkti kažką, kad nėra ten dar.

646
00:38:20,580 --> 00:38:23,780
Taigi tai iki viršaus linija sako, kad aš noriu, kad laukti, kol viskas yra pakrautas

647
00:38:23,780 --> 00:38:28,030
todėl mes garantuojame, kad aš ieškote yra iš tikrųjų jų elementai puslapyje.

648
00:38:29,730 --> 00:38:34,310
Šis dolerio ženklas čia reiškia, aš naudoju biblioteką, vadinama JQuery.

649
00:38:34,310 --> 00:38:38,570
Šis JQuery biblioteka leidžia mums naudoti šias selektoriai, kad mes tiesiog žiūrint.

650
00:38:38,570 --> 00:38:44,010
Sakydamas $ tai einančios kaip argumentas šiuo # form-citata,

651
00:38:44,010 --> 00:38:47,910
Aš dabar pasirinkę šią formą, kad mes tiesiog paėmė pažvelgti.

652
00:38:47,910 --> 00:38:52,290
Dabar aš turiu kažkaip tos atminties atstovavimą.

653
00:38:52,290 --> 00:38:56,760
>> Dabar su tuo objektu, tai formos atstovavimas,

654
00:38:56,760 --> 00:38:58,890
Aš dabar naudojant funkcija vadinama.

655
00:38:58,890 --> 00:39:02,710
Ką ši funkcija daro ji ketina pridėti įvykio apdorojimo.

656
00:39:02,710 --> 00:39:06,310
Įvykis, kad mes ketiname klausytis Pateikti įvykis.

657
00:39:06,310 --> 00:39:08,890
Taigi, kai vartotojas paspaudžia mygtuką "Siųsti" arba paspaudžia "Enter",

658
00:39:08,890 --> 00:39:11,730
šis renginys vyksta į ugnį.

659
00:39:11,730 --> 00:39:16,390
Nedėkite į tai, dabar galiu pakeisti numatytąją elgesio formos.

660
00:39:16,390 --> 00:39:19,770
Be šios JavaScript, tai pateikti neatsižvelgiant į PHP failą

661
00:39:19,770 --> 00:39:22,110
mes naudojamas toje ACTION atributas.

662
00:39:22,110 --> 00:39:25,440
Bet vietoj to, aš dabar sako, palauk, palauk, palauk, aš nenoriu, kad jūs, kad iš tikrųjų tai padaryti.

663
00:39:25,440 --> 00:39:31,140
Aš noriu, kad tai įvyktų, prieš išvykdami, ir bando pateikti kai PHP failą.

664
00:39:31,140 --> 00:39:32,870
Dabar, ką aš noriu padaryti?

665
00:39:32,870 --> 00:39:39,270
Šiuo metu aš noriu naudoti AJAX kažkaip įkelti į, ką šių išteklių kaina yra.

666
00:39:39,270 --> 00:39:44,170
Pirmas dalykas, kurį reikia žinoti yra tai, ką akcijų vartotojas žiūrint.

667
00:39:44,170 --> 00:39:46,760
Tai, kad aš ruošiuosi naudoti kitą parinkiklį.

668
00:39:46,760 --> 00:39:49,020
Tai yra trečiasis selektorių, mes pažvelgė į prieš.

669
00:39:49,020 --> 00:39:54,460
Tai sako, kad aš noriu pradėti nuo šios formos elementas su form citata ID.

670
00:39:54,460 --> 00:39:58,440
Tada kažkur viduje šios formos turi būti įvesties elementas

671
00:39:58,440 --> 00:40:01,270
, kuri turi simbolio vardą.

672
00:40:01,270 --> 00:40:05,460
Jei pažvelgsime atgal mūsų HTML, pamatėme, kad mes turėjome įvestį [vardas = simbolis].

673
00:40:05,460 --> 00:40:12,380
Tai reiškia, kad tai vyksta pasirinkti tą teksto lauką, kad vartotojas būtų rašyti į.

674
00:40:12,380 --> 00:40:13,870
Tai gražus. Mes turime teksto lauką.

675
00:40:13,870 --> 00:40:17,360
Dabar mes tiesiog reikia žinoti, kas yra viduje ji.

676
00:40:17,360 --> 00:40:20,290
Norėdami tai padaryti, mes galime paskambinti šį metodą, tai. Val,

677
00:40:20,290 --> 00:40:23,240
ir tai sako, kad aš žinau, kokio teksto laukelį turite.

678
00:40:23,240 --> 00:40:28,160
Noriu pasakyti man, kur yra, vartotojas turi įvesti į šį teksto laukelį.

679
00:40:28,160 --> 00:40:34,440
Dabar mes turime eilutę vadinamas simbolis, kuris yra lygus tuo, ką vartotojas turi įvesti.

680
00:40:34,440 --> 00:40:39,820
Tai gražus. Mes galime naudoti šią eilutę dabar, kad mūsų prašymą.

681
00:40:39,820 --> 00:40:42,450
Tai čia, tai nauja funkcija $,

682
00:40:42,450 --> 00:40:44,900
išskyrus mes ne ilgiau bus pasirinkdami elementus,

683
00:40:44,900 --> 00:40:48,910
mes ketiname būti raginama kitą funkciją, kuri mums suteikta JQuery.

684
00:40:48,910 --> 00:40:54,810
Tai AJAX funkcija yra tai, kas iš tikrųjų vyksta, kad šis HTTP "užklausą.

685
00:40:54,810 --> 00:40:57,000
Taigi, mes turime pasakyti keletą dalykų.

686
00:40:57,000 --> 00:41:01,410
Pirmas dalykas, mes turime pasakyti šią funkciją, kur aš noriu, kad prašymas.

687
00:41:01,410 --> 00:41:08,910
Kažkur mano projektas Turiu šį failą viduje HTML katalogą vadinamas quote.php.

688
00:41:08,910 --> 00:41:15,150
Galiu atidaryti šį failą, mes matėme, kaip tai, jei aš einu į localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Aš noriu, kad mano "JavaScript" pateikti prašymą tame puslapyje.

690
00:41:20,450 --> 00:41:22,920
Kokio tipo prašymu šiuo metu?

691
00:41:22,920 --> 00:41:27,210
Mes matėme prieš tai forma, kad method = "post" atributas,

692
00:41:27,210 --> 00:41:29,270
, o tai reiškia, kad jis ketina padaryti POST užklausos,

693
00:41:29,270 --> 00:41:32,630
todėl ne įdėti ką nors į URL, o ne prašymą GET,

694
00:41:32,630 --> 00:41:36,860
kurie tiesiog būti atleistas, jei mes tiesiog prieiti puslapį su interneto naršykle, pvz.

695
00:41:36,860 --> 00:41:41,260
Dabar mes sakė, kad aš noriu padaryti HTTP POST užklausą

696
00:41:41,260 --> 00:41:44,840
į puslapį, esančio quote.php.

697
00:41:44,840 --> 00:41:51,490
Kai mes pateikti formą, nepamirškite, mes galime prieiti prie įvesties elementus, viduje šios formos

698
00:41:51,490 --> 00:41:54,430
su tuo $ _POST kintamojo.

699
00:41:54,430 --> 00:41:58,710
Iki šiol į istoriją mes ne iš tikrųjų bet kokių duomenų, siunčiami kartu.

700
00:41:58,710 --> 00:42:00,640
Mes ką tik sakė, kad mes darome AJAX prašymą

701
00:42:00,640 --> 00:42:03,200
ir čia: užklausos tipas, mes darome.

702
00:42:03,200 --> 00:42:07,090
Dabar mes turime iš tikrųjų siųsti kai kuriuos duomenis į puslapį.

703
00:42:07,090 --> 00:42:10,930
Norėdami tai padaryti, mes galime naudoti šį turtą, vadinama duomenų.

704
00:42:10,930 --> 00:42:14,950
Šio turto vertė iš tikrųjų yra masyvą.

705
00:42:14,950 --> 00:42:19,390
To priežastis yra tai leidžia mums atsiųsti daugiau nei tik 1 vnt. Duomenų.

706
00:42:19,390 --> 00:42:24,750
Štai kodėl mes turime šiuos garbanotieji petnešų čia įdėtos viduje šių kitų klamrami.

707
00:42:24,750 --> 00:42:29,680
Šiose Association masyvai raktai bus tas pats

708
00:42:29,680 --> 00:42:32,630
kaip ir pavadinimas atributus mūsų formos elementų.

709
00:42:32,630 --> 00:42:35,740
Tai reiškia, kad jei galiu siųsti išilgai simbolį raktas,

710
00:42:35,740 --> 00:42:41,870
tai reiškia, kad mano PHP puslapis gali prisijungti prie šios $ _POST [simbolis] duomenis

711
00:42:41,870 --> 00:42:44,640
tiesiog, kaip mes padarėme anksčiau, kai mes pateikdami formą.

712
00:42:44,640 --> 00:42:47,090
Ir dabar faktiniai duomenys norime siųsti

713
00:42:47,090 --> 00:42:50,790
bus vertė viduje šio Association masyvas.

714
00:42:50,790 --> 00:42:54,070
>> Mes saugomi šį tekstą kintamu vadinamas simbolis,

715
00:42:54,070 --> 00:42:57,380
, ir todėl mes Siunčiame kartu simbolis mygtuką

716
00:42:57,380 --> 00:43:01,380
ir bet kokio vartotojas turi įvesti. vertė

717
00:43:01,380 --> 00:43:06,270
Dabar mes padarė šį HTTP prašymą įvykdė mūsų PHP failas,

718
00:43:06,270 --> 00:43:11,480
ir jis ketina siųsti kai kuriuos duomenis dabar sugrįžote pas klientui, kad tik padarė šį prašymą.

719
00:43:11,480 --> 00:43:15,220
Dabar mes turime reaguoti į bet serverio mums pasakė.

720
00:43:15,220 --> 00:43:20,180
Norėdami tai padaryti, mes turime šį paskutinį turtą čia vadinama sėkmės.

721
00:43:20,180 --> 00:43:24,240
Šios sėkmės raktas vertė iš tikrųjų ketiname funkcija,

722
00:43:24,240 --> 00:43:26,910
ir tai yra vienas iš tikrai įdomių dalykų, kuriuos galite padaryti su JavaScript.

723
00:43:26,910 --> 00:43:31,720
Ne tik jūs galite turėti int arba kaip vertės viduje Association masyvas masyvus,

724
00:43:31,720 --> 00:43:34,170
mes taip pat gali turėti funkciją.

725
00:43:34,170 --> 00:43:36,380
Taigi, sakydamas, sėkmės, tai yra mano raktas.

726
00:43:36,380 --> 00:43:38,830
Dvitaškis sako čia ateina vertę,

727
00:43:38,830 --> 00:43:41,810
o dabar ši vertė yra iš tikrųjų funkcija.

728
00:43:41,810 --> 00:43:44,460
Taigi mums nereikia suteikti šią funkciją, per se pavadinimą.

729
00:43:44,460 --> 00:43:48,820
Mes galime tik pasakyti, kad tai bus kai funkcija. Ji ketina imtis 1 argumentą.

730
00:43:48,820 --> 00:43:51,190
Argumentas šiai funkcijai bus

731
00:43:51,190 --> 00:43:54,460
bet serveris atsiuntė mums atgal iš prašymo.

732
00:43:54,460 --> 00:43:57,750
Tiesiog patinka, kai mūsų naršyklė pateikia prašymą, serveris siunčia kažką atgal

733
00:43:57,750 --> 00:43:59,060
ir naršyklė rodo jį,

734
00:43:59,060 --> 00:44:03,030
, AJAX, mes ką tik pateikė prašymą, serveris atsiuntė kažką atgal,

735
00:44:03,030 --> 00:44:07,110
ir dabar mes turime, kad atstovavo eilutę.

736
00:44:07,110 --> 00:44:11,280
Su ta eilutę, aš tiesiog norėčiau parodyti, kad puslapyje.

737
00:44:11,280 --> 00:44:14,040
Tai, kad aš ruošiuosi turėti vieną paskutinį selektorių.

738
00:44:14,040 --> 00:44:17,570
Noriu, kad pasirinktumėte elementą ID kainą.

739
00:44:17,570 --> 00:44:20,710
Tai tik tuščias DIV, kad aš sukūriau puslapyje,

740
00:44:20,710 --> 00:44:26,640
ir aš noriu nustatyti tą div būti nepriklausomai serveris atsiuntė mums atgal turinį.

741
00:44:26,640 --> 00:44:30,280
Aš iš tikrųjų keistas quote.php šiek tiek.

742
00:44:30,280 --> 00:44:33,460
>> Užuot paskambinę teikimą ir teikti tam tikrą puslapį,

743
00:44:33,460 --> 00:44:38,100
quote.php dabar tiesiog vyksta, jei norite spausdinti akcijų vertę kaip eilutę.

744
00:44:38,100 --> 00:44:41,880
Taigi, jei jums buvo aplankyti puslapį, jūs tiesiog matyti, kad mažą eilutę

745
00:44:41,880 --> 00:44:45,030
kokia akcijų kaina yra.

746
00:44:45,030 --> 00:44:50,170
Vienas paskutinis dalykas, kurį turime padaryti čia tiesiog įsitikinkite, kad ši funkcija grąžina klaidinga.

747
00:44:50,170 --> 00:44:53,560
Ką tai sako, kad, jei aš viduje įvykių apdorojimo

748
00:44:53,560 --> 00:44:57,300
ir kad renginys prižiūrėtojas False, o ne grąžinant tiesa,

749
00:44:57,300 --> 00:45:01,510
tai reiškia, kad aš nenoriu originalų renginį į ugnį.

750
00:45:01,510 --> 00:45:05,270
Šiuo atveju, jei mes neturėjo "JavaScript" ir pateikė formą,

751
00:45:05,270 --> 00:45:08,280
mūsų interneto naršyklė ketina pasakyti: "Aš ruošiuosi siųsti kartu, kad duomenys,"

752
00:45:08,280 --> 00:45:10,130
ir jie nusiųs jus į kitą puslapį.

753
00:45:10,130 --> 00:45:14,360
Nes mes naudojant AJAX dabar nereikia siųsti vartotoją į kitą puslapį.

754
00:45:14,360 --> 00:45:17,920
Mes tik noriu matyti rezultatus dinamiškai, tame pačiame puslapyje.

755
00:45:17,920 --> 00:45:21,460
Mes tikrai nenoriu eiti bet kur, ir aš noriu likti tame pačiame puslapyje.

756
00:45:21,460 --> 00:45:27,060
Taigi, grįžtant klaidinga, mes užtikriname, kad forma nedaro, kad mums.

757
00:45:27,060 --> 00:45:31,170
Paimkime, ką tai iš tikrųjų atrodo kaip atrodo.

758
00:45:31,170 --> 00:45:34,180
Mūsų citata puslapis atrodo tas pats.

759
00:45:34,180 --> 00:45:37,240
Leiskite man atsigriebti inspektoriui žemyn čia, kad mes galėtume pamatyti, kas vyksta.

760
00:45:37,240 --> 00:45:40,270
Padaryti šiek tiek mažiau didžiulis.

761
00:45:40,270 --> 00:45:44,590
Atminkite, kad jeigu mes atverti skirtuką Network, tai kur mes galime pamatyti iš HTTP užklausos

762
00:45:44,590 --> 00:45:47,570
vyksta puslapyje.

763
00:45:47,570 --> 00:45:52,890
>> Reikalingas simbolis, leiskite man įvesti AAPL ir spustelėkite Gauti Citata.

764
00:45:52,890 --> 00:45:56,720
Dabar mes matome, kad "Apple" akcijų kaina šiek tiek dolerių

765
00:45:56,720 --> 00:46:00,410
tik pasirodė puslapyje, tačiau URL adresas nepasikeitė.

766
00:46:00,410 --> 00:46:04,570
Tiesą sakant, čia yra HTTP užklausa, kad mes tiesiog padarė.

767
00:46:04,570 --> 00:46:09,980
Mes padarėme POST užklausą į quote.php. Tai turi prasmę.

768
00:46:09,980 --> 00:46:12,800
Tai yra tai, ką serveris atsiuntė mums atgal.

769
00:46:12,800 --> 00:46:16,320
Tai nebėra Ši gigantiška HTML dokumentas su paveikslėliais ir panašių dalykų,

770
00:46:16,320 --> 00:46:20,920
tai tik teksto eilutė, ir tada mes tiesiog rodomas teksto eilutė.

771
00:46:20,920 --> 00:46:26,290
Jei mes einame atgal į antraštes ir pamatyti, ką mes iš tikrųjų perdavė viduje šio HTTP užklausa,

772
00:46:26,290 --> 00:46:33,950
mes galime matyti, kad čia mes išsiuntėme kartu rakto simboliu ir AAPL vertės,

773
00:46:33,950 --> 00:46:36,430
o tai, ką vartotojas turi įvesti.

774
00:46:36,430 --> 00:46:39,230
Tai yra gerai, bet ji vis dar šiek tiek erzina.

775
00:46:39,230 --> 00:46:42,490
Dar turiu spustelėkite šį mygtuką, jei norite gauti akcijų kursus.

776
00:46:42,490 --> 00:46:45,880
Mes užsiėmę žmonės ir mes neturime laiko paspausti mygtukus.

777
00:46:45,880 --> 00:46:49,910
"Google" suprato, kad tai šiek tiek atgal, kai jie įgyvendino intuityviąją "Google".

778
00:46:49,910 --> 00:46:53,590
Kas intuityvioji "Google", kaip įvedate jis tiesiog pradeda rodyti rezultatus jums

779
00:46:53,590 --> 00:46:56,520
todėl jūs neturite jaudintis, net spustelėdami Ieškoti.

780
00:46:56,520 --> 00:46:58,730
Tiesą sakant, istorija, susijusi su įdomus, kad.

781
00:46:58,730 --> 00:47:01,100
Kai išėjo intuityvioji "Google", žmonės buvo, pavyzdžiui, "Whoa, tai super nuostabi."

782
00:47:01,100 --> 00:47:02,540
"Tai so cool."

783
00:47:02,540 --> 00:47:05,950
Ir studentas Stanfordo universitete, kuris buvo 19 metu

784
00:47:05,950 --> 00:47:09,000
padarė šią svetainę vadinamas "YouTube" Momentiniai.

785
00:47:09,000 --> 00:47:13,170
Visi "YouTube" Instant nėra efektyviai ieškoti "YouTube" akimirksniu.

786
00:47:13,170 --> 00:47:17,020
Taip, o ne eiti į YouTube.com ir paspauskite "Ieškoti

787
00:47:17,020 --> 00:47:21,650
kai aš pradedu rašyti į "YouTube" Instant kažką kaip CS50,

788
00:47:21,650 --> 00:47:25,320
čia mes galime pamatyti, kad jis bando lėtas interneto ryšys

789
00:47:25,320 --> 00:47:28,500
gyventojų gyvena šie rezultatai.

790
00:47:28,500 --> 00:47:35,590
Padaryti, kad mes iš tikrųjų gali padaryti labai paprasta mūsų quote.js failo pakeitimus.

791
00:47:35,590 --> 00:47:40,900
Dabar mes pridedant šį įvykį, kai forma yra pateikta.

792
00:47:40,900 --> 00:47:43,760
Mes tikrai norite, kad vartotojas nebėra pateikti šią formą,

793
00:47:43,760 --> 00:47:48,570
tad vietoj ugnį Šis renginys kiekvieną kartą, kai vartotojas paspaudžia.

794
00:47:48,570 --> 00:47:53,200
Norėdami tai padaryti, tegul pirmas pakeisti įvykį iš pateikti keyup.

795
00:47:53,200 --> 00:47:55,740
Tai reiškia, kad, o ne laukti, kol forma pateikti,

796
00:47:55,740 --> 00:47:58,490
kiekvieną kartą, kai nuspaudžiamas klavišas, kažkas nutiks.

797
00:47:58,490 --> 00:48:02,030
Jis nebėra prasmės pridėti šį keyup įvykis visai forma.

798
00:48:02,030 --> 00:48:05,080
Mes tikrai rūpi tik tos paieškos laukelį.

799
00:48:05,080 --> 00:48:09,320
>> Norėdami pasirinkti, kad dabar, mes galime pakeisti tai, o ne forma-citata,

800
00:48:09,320 --> 00:48:14,220
forma citata ir mes turime prisidėti (įveskite = TEXT), ar mes galime pasakyti, (Name = simbolis) -

801
00:48:14,220 --> 00:48:16,420
ką mes norime.

802
00:48:16,420 --> 00:48:18,650
Dabar yra paskutinis dalykas, mes turime padaryti.

803
00:48:18,650 --> 00:48:21,190
Prisiminti žemyn čia, kai mes pasakėme Return FALSE

804
00:48:21,190 --> 00:48:24,370
mes sakėme, mes nenorime, kad pagal nutylėjimą įvykis į ugnį.

805
00:48:24,370 --> 00:48:26,390
Bet jis tiesiog taip atsitinka, kad jei mes išjungti, kad dabar,

806
00:48:26,390 --> 00:48:29,660
ką mes įvesti nesiruošia pasirodyti naršyklėje nebėra

807
00:48:29,660 --> 00:48:33,000
, nes tai būtų numatytieji veiksmai rašyti į teksto laukelį.

808
00:48:33,000 --> 00:48:38,660
Mes nebenori nepaisoma, todėl galime sunaikinti šis sugrįžimas klaidinga.

809
00:48:38,660 --> 00:48:44,800
Jei mes išgelbėti, kad ir perkraukite puslapį, dabar, kai aš pradedu rašyti AAPL

810
00:48:44,800 --> 00:48:50,160
pamatysite, kad akcijų kaina apačioje čia automatiškai baigia.

811
00:48:50,160 --> 00:48:53,150
Taigi čia yra CS50 Finansai patenkintų klientų.

812
00:48:53,150 --> 00:48:55,860
Iš tikrųjų įdomus pasakojimas apie "YouTube" Instant

813
00:48:55,860 --> 00:48:59,420
yra tai, kad studentas tiesiog rūšies parašiau kaip 1-naktį projekto,

814
00:48:59,420 --> 00:49:03,800
, o kitą dieną jis buvo pasiūlytas darbas "YouTube" generalinis direktorius.

815
00:49:03,800 --> 00:49:10,610
Taigi taip paprasta, jums CS50 studentai, jūsų galutiniai projektai gali jums "YouTube" darbas.

816
00:49:10,610 --> 00:49:14,720
Kažką panašaus, kad yra tikrai cool idėja, kad galutinė projekto, tiesa?

817
00:49:14,720 --> 00:49:18,170
Mes turėjome šiek tiek esamą funkcionalumą, kad mes norime integruoti su.

818
00:49:18,170 --> 00:49:20,330
Mes pagerinti vartotojų patirtį šiek tiek,

819
00:49:20,330 --> 00:49:24,340
ir staiga ieškoti kažką apie "YouTube" Instant gali būti daug lengviau

820
00:49:24,340 --> 00:49:27,290
nei ieškoti jo įprastą "YouTube".

821
00:49:27,290 --> 00:49:30,790
Taigi, kad AJAX trumpai.

822
00:49:30,790 --> 00:49:34,860
>> Pavyzdžių, kad Juozapas buvo parodyta, mes matėme daug autocompletes

823
00:49:34,860 --> 00:49:39,250
ir šie autocompletes yra tikrai, tikrai patogu, nes mes neturime prisiminti -

824
00:49:39,250 --> 00:49:41,770
Pavyzdžiui, jei jūs neturite prisiminti akcijų kainą Apple

825
00:49:41,770 --> 00:49:45,110
ir mes tiesiog žinau, kad aa kažkas, o ne tiesiog pasakyti man,

826
00:49:45,110 --> 00:49:48,740
"Šis dalykas akcija kainuoja tai daug pinigų,"

827
00:49:48,740 --> 00:49:52,540
Aš rūšies norėčiau žinoti, ką atsargos pradėti aa.

828
00:49:52,540 --> 00:49:58,340
Mes galime padaryti, kad tikrai gražiai su "Bootstrap" biblioteką, kuri jau įtraukta

829
00:49:58,340 --> 00:50:01,380
viduje CS50 Finansų.

830
00:50:01,380 --> 00:50:09,390
Jei atvykote čia "JavaScript" žyma ir slinkite žemyn į Typeahead,

831
00:50:09,390 --> 00:50:13,730
tai tik gražus įskiepiai, kad kažkas jau rašė mums,

832
00:50:13,730 --> 00:50:16,980
ir mes galime lengvai naudotis jos funkcionalumą, kaip šis.

833
00:50:16,980 --> 00:50:21,410
Įvedžiau, ir čia yra sąrašas kai kurių teigiama, kad prasideda su A.

834
00:50:21,410 --> 00:50:25,360
Galime pasakyti, kad manau, kad tai yra tikrai cool, ir atėjo laikas man tai mano puslapyje.

835
00:50:25,360 --> 00:50:28,300
Pasirodo, kad tai yra tikrai, tikrai paprasta.

836
00:50:28,300 --> 00:50:32,810
Tegul przeskakiwać Čia quote3.js.

837
00:50:34,890 --> 00:50:37,380
Mano failas atrodo šiek tiek skiriasi.

838
00:50:37,380 --> 00:50:39,700
Žemyn čia visi mano AJAX dalykų yra tas pats.

839
00:50:39,700 --> 00:50:43,170
Noriu įkelti atsargų duomenys, be to, kad eiti į kitą puslapį.

840
00:50:43,170 --> 00:50:46,220
Bet dabar noriu naudoti šį priedą.

841
00:50:46,220 --> 00:50:51,020
Bootstrap dokumentus puikūs pavyzdžiai, kaip tiksliai galiu tai padaryti.

842
00:50:51,020 --> 00:50:54,350
Noriu pasakyti: "Štai, kad aš noriu Automatinis užpildymas ant įvesties,

843
00:50:54,350 --> 00:50:56,640
ir aš ruošiuosi skambinti šią funkciją, vadinamą typeahead

844
00:50:56,640 --> 00:50:59,730
ir kad vyksta tvarkyti visus mums Typeahead stuff.

845
00:50:59,730 --> 00:51:02,090
Jis bus inicijuoti sąrašą, jis bus padaryti viską, mūsų filtravimas.

846
00:51:02,090 --> 00:51:06,680
Vienintelis dalykas, tai turi žinoti, kokius duomenis mes jūs autocompleting.

847
00:51:06,680 --> 00:51:10,480
Kad aš sužinojau šį klavišą, tiesiog skaitant dokumentus ir žiūri iš pavyzdžių.

848
00:51:10,480 --> 00:51:14,150
Jei aš tau šaltinio raktas, šio registro rakto

849
00:51:14,150 --> 00:51:17,770
yra tik keletas dalykų masyvas norite Automatinis užpildymas.

850
00:51:17,770 --> 00:51:20,180
Šis kintamasis atėjo iš šios kitos bylos.

851
00:51:20,180 --> 00:51:23,400
Aš atverti symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Ši symbols.js yra tik tai tikrai, tikrai didelis masyvas, kuriame eilutes

853
00:51:27,980 --> 00:51:32,080
Visų šių NASDAQ akcijų simbolių.

854
00:51:32,080 --> 00:51:42,190
Jei aš noriu šokti atgal į HTML, taigi jharvard, vhosts, globalhost, html, šablonai,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Nes tai dabar vadinama quote3.js, leiskite man pakeisti "JavaScript" failą, aš taip pat čia.

857
00:51:50,910 --> 00:51:55,110
Dabar turiu quote3.js, todėl aš ruošiuosi įkelti toje atskirą "JavaScript" failą,

858
00:51:55,110 --> 00:51:57,910
vienas, kad yra, kad "Bootstrap" Automatinis užpildymas.

859
00:51:57,910 --> 00:52:04,430
Dabar, kai aš šokinėti atgal į naršyklę, perkraukite puslapį ir aš pradėti rašyti aa,

860
00:52:04,430 --> 00:52:06,880
ten mano automatinį užbaigimą. Ir tai buvo tikrai taip paprasta, kaip kad.

861
00:52:06,880 --> 00:52:11,400
Aš turėjau 1 eilutę kodo, tik pasakė: "Čia yra dalykų, aš nori Automatinis užpildymas"

862
00:52:11,400 --> 00:52:16,590
ir staiga aš ne visai daug pastangų, ne visi turi tai tikrai, tikrai gražus funkcionalumą.

863
00:52:16,590 --> 00:52:19,810
Kaip jūs kurti svetaines ir ypač priekinės pusės dalykų,

864
00:52:19,810 --> 00:52:21,840
jūs ketinate rasti, tai yra daug.

865
00:52:21,840 --> 00:52:25,700
Yra daug, daug, daug ten tikrai cool laisvosios bibliotekose

866
00:52:25,700 --> 00:52:30,190
, kad padaryti tai super lengva padaryti kažką panašaus.

867
00:52:30,190 --> 00:52:37,230
Ar kas nors galvoja apie visus šio didelio sąrašo simbolių tiesiog autocompleting trūkumų?

868
00:52:37,230 --> 00:52:41,580
Kas gali būti kažkas, kad nėra geriausias šio požiūrio?

869
00:52:42,790 --> 00:52:45,960
Taip. >> [Studentas] Laikas, jei turite daug [nesigirdi]

870
00:52:45,960 --> 00:52:50,420
Taip. Dabar mes atsisiųsti šį didžiulį "JavaScript" failą, ir ten daug simbolių.

871
00:52:50,420 --> 00:52:54,360
Ir todėl, jei mes turime daiktų toną, tai gali rūšies padidinti ne tik ieškoti latency

872
00:52:54,360 --> 00:52:56,600
, bet taip pat atsisiųsti faktinis failą.

873
00:52:56,600 --> 00:52:58,670
Didysis. Dar ko nors?

874
00:53:01,950 --> 00:53:05,280
Dabar ne nesuprantamų EEE.

875
00:53:05,280 --> 00:53:08,190
Jei aš tipo A, įmonių, kurios pasirodys čia

876
00:53:08,190 --> 00:53:11,220
gali būti iš populiariausių bendrovių, kurių pavadinimai prasideda A

877
00:53:11,220 --> 00:53:17,130
>> Kol aš gauti "Apple", tai gali užtrukti šiek tiek daugiau simbolių, rasti tai, ko aš ieškau.

878
00:53:17,130 --> 00:53:20,420
Tai automatinio užbaigimo neturi šį EEE jausmą.

879
00:53:20,420 --> 00:53:24,400
Tai tiesiog pasakyti: "Viskas, kas atitinka aš ketinu parodyti."

880
00:53:24,400 --> 00:53:30,510
Vietoj to, aš norėčiau kažkaip svarbūs integruoti į mano paieškas.

881
00:53:30,510 --> 00:53:36,440
Jei aš einu per Yahoo! Finance ", finance.yahoo.com

882
00:53:36,440 --> 00:53:42,100
Jei aš pabandyti įvesti simbolį Yahoo! Finance puslapyje

883
00:53:42,100 --> 00:53:52,310
ir aš pradėti rašyti GOOG, turiu šią gražią sąrašą dalykų, kuriuos.

884
00:53:52,310 --> 00:53:57,100
Aiškiai, atrodo, Yahoo! Finance kažką daro protingas čia.

885
00:53:57,100 --> 00:53:59,790
Jie yra šiek tiek aktualios, ir jie taip pat gauti papildomos informacijos

886
00:53:59,790 --> 00:54:01,430
kaip sandėlyje vardu.

887
00:54:01,430 --> 00:54:05,850
, Kad kažkas, kad aš negaliu tikrai gauti tik mano vertybinių popierių simbolių sąrašą.

888
00:54:05,850 --> 00:54:09,520
Noriu, kad tai ir todėl aš jį priimti.

889
00:54:09,520 --> 00:54:11,790
Norėdami tai padaryti, kuris leidžia padaryti keletą dalykų.

890
00:54:11,790 --> 00:54:15,580
Tegul pirmasis atverti inspektoriui šiame puslapyje

891
00:54:15,580 --> 00:54:18,100
nes pamatėme, kad šis puslapis nėra perkrovimo ne visi,

892
00:54:18,100 --> 00:54:21,960
todėl tikriausiai naudojant AJAX kažkaip būti įkeliama savo duomenis.

893
00:54:21,960 --> 00:54:23,920
Mes galime išsiaiškinti, kokie duomenys krovos.

894
00:54:23,920 --> 00:54:28,390
Jei aš spustelėkite skirtuko Šis tinklas, jie bus visus prašymus, kurie pradeda būti atleistas.

895
00:54:28,390 --> 00:54:34,020
Dabar, jei aš įvesti goo, mes galime pamatyti, kad aš ką tik gavo naują HTTP užklausa.

896
00:54:34,020 --> 00:54:37,490
Tai turbūt, kad duomenys būtų tiekiamos iš.

897
00:54:37,490 --> 00:54:41,990
Be abejo, jei aš žiūriu į šį URL, kuris yra šiek tiek keistai pavadintas,

898
00:54:41,990 --> 00:54:46,930
mes galime matyti, kad tai, kur tiksliai Yahoo siunčia savo duomenis.

899
00:54:46,930 --> 00:54:53,400
>> Aš sukūriau atskirą failą vadinamas suggest.php, kad labai panašus dvasios paieškos funkcija.

900
00:54:53,400 --> 00:54:57,730
Tai iš esmės ketina padaryti užklausą į Yahoo URL, grįžti tam tikrus duomenis,

901
00:54:57,730 --> 00:54:59,750
ir siųsti jį atgal į mane.

902
00:54:59,750 --> 00:55:02,570
Dabar, o ne naudojant šią didelis, didžiulis sąrašas simbolių,

903
00:55:02,570 --> 00:55:05,280
Aš galiu naudoti "Yahoo" gražus aktualumo dalykų,

904
00:55:05,280 --> 00:55:08,150
ir aš neturiu atsisiųsti šį didžiulį "JavaScript" failą.

905
00:55:08,150 --> 00:55:12,040
Aš tik ketina nugriauti faktiškai atitinkamus simbolius akcijų.

906
00:55:12,040 --> 00:55:13,960
Peršokti į tai.

907
00:55:13,960 --> 00:55:17,360
Taigi, html, js. Mes dabar quote4.

908
00:55:17,360 --> 00:55:22,120
Dabar mes nebenaudojate, kad "JavaScript" failus didelį sąrašą.

909
00:55:22,120 --> 00:55:24,430
Tačiau yra nedidelė rūšies projektavimo problemos čia.

910
00:55:24,430 --> 00:55:28,200
Mes sakė, kad AJAX asinchroninis.

911
00:55:28,200 --> 00:55:31,000
, Ką tai reiškia, kad kai aš AJAX prašymą,

912
00:55:31,000 --> 00:55:36,490
8 on-line, kad čia, tai kur mano AJAX prašymas iš tiesų yra atleistas.

913
00:55:36,490 --> 00:55:40,370
Tarkime, kad dabar aš turiu tam tikrą kodą žemyn čia, kad ketina daryti kai kurių dalykų

914
00:55:40,370 --> 00:55:43,930
norėtų įspėti vartotoją ar ką nors keisti puslapio.

915
00:55:43,930 --> 00:55:49,830
Kas nesiruošia atsitikti naršyklė nesiruošia laukti šio prašymo toliau

916
00:55:49,830 --> 00:55:53,480
prieš nusileisdamas ir pataikyti į šią eilutę.

917
00:55:53,480 --> 00:55:55,900
Štai asinchroninis dalis.

918
00:55:55,900 --> 00:55:58,400
Jis ketina pateikti tokį prašymą, ir sako: "Kai baigsite,

919
00:55:58,400 --> 00:56:03,080
"Grįžti ir iškviesti šią funkciją, kad aš sakiau jums skambinti viduje sėkmės."

920
00:56:03,080 --> 00:56:07,300
Tai reiškia, kad mes galime ne tik parsisiųsti visas atsargas iš anksto.

921
00:56:07,300 --> 00:56:10,300
Mes turime padaryti prašymą ir laukti ko nors grįžti.

922
00:56:10,300 --> 00:56:13,330
Tai reiškia, kad prieš, galėtume tiesiog pasakyti Bootstrap

923
00:56:13,330 --> 00:56:15,580
"Štai sąrašas dalykų, aš noriu jus į Automatinis užpildymas".

924
00:56:15,580 --> 00:56:18,950
Mes nebegalime padaryti, kad nebėra, nes mes nežinome,

925
00:56:18,950 --> 00:56:21,780
ką mes norime iš tikrųjų automatinį užbaigimą,.

926
00:56:21,780 --> 00:56:25,190
Laimei, Bootstrap pagalvojau apie tai, nes yra protingas vaikinai ten,

927
00:56:25,190 --> 00:56:30,160
ir jie iš tikrųjų davė mums dar vienas būdas įkelti šį Typeahead įskiepį.

928
00:56:30,160 --> 00:56:35,630
Anksčiau, šio šaltinio turto vertė buvo tik tai didelis masyvas dalykų Automatinis užpildymas.

929
00:56:35,630 --> 00:56:39,580
>> Dabar šaltinis nuosavybė yra iš tikrųjų funkcija,

930
00:56:39,580 --> 00:56:44,580
ir šios funkcijos tikslas yra išsiaiškinti, kas dalykų, Automatinis užpildymas.

931
00:56:44,580 --> 00:56:48,730
Būdas, ji ketina išsiaiškinti, kad iš ta, kad jis ketina prašyti Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
ką iš geriausių dalykų Automatinis užpildymas.

933
00:56:51,750 --> 00:56:54,500
Tai, kad aš ruošiuosi labai panašus AJAX prašymą.

934
00:56:54,500 --> 00:56:59,010
Aš ruošiuosi paprašyti šį puslapį suggest.php.

935
00:56:59,010 --> 00:57:01,360
Noriu siųsti kartu simbolių.

936
00:57:01,360 --> 00:57:05,570
Ir dabar mano sėkmės, man pasakė, Bootstrap dokumentai

937
00:57:05,570 --> 00:57:09,130
, kad, siekiant užpildyti, kad iš sąrašo dalykų,

938
00:57:09,130 --> 00:57:14,370
viskas, ką reikia padaryti, yra išlaikyti šiame masyve su skambinimo funkcijas.

939
00:57:14,370 --> 00:57:15,660
Bet palaukit minutėlę.

940
00:57:15,660 --> 00:57:20,240
Jei tai turėtų būti masyvas ir AJAX siunčia man atgal tekstas,

941
00:57:20,240 --> 00:57:22,720
kaip tai įmanoma?

942
00:57:22,720 --> 00:57:27,910
Šis straipsnis yra naujas būdas keistis duomenimis, vadinamas JSON.

943
00:57:27,910 --> 00:57:33,000
Šiuo atveju mes ne tik išsiųsti atgal paprastą teksto eilutę.

944
00:57:33,000 --> 00:57:37,670
Dabar mes susiduriame su šiuo atveju daugiau akcijų simbolių sąrašą.

945
00:57:37,670 --> 00:57:41,730
Šie pradiniai simboliai taip pat gali būti dalykų, pavyzdžiui, įmonės pavadinimas arba šiuo metu galiojančias kainas.

946
00:57:41,730 --> 00:57:47,550
Tik naudojant didelį ilgą eilutę, kad ne, bet numatytu būdu suformatuotas

947
00:57:47,550 --> 00:57:51,970
nesiruošia būti geriausias būdas gauti šiuos duomenis iš "Yahoo" serverio man

948
00:57:51,970 --> 00:57:54,540
taip, kad aš galėtų lengvai suprasti.

949
00:57:54,540 --> 00:58:01,280
JSON yra technologija, kuri pasinaudoja kaip mes kuriame Association masyvų "JavaScript".

950
00:58:01,280 --> 00:58:04,510
Tai atrodo daug, pavyzdžiui, "JavaScript" Association masyvas,

951
00:58:04,510 --> 00:58:06,600
ir iš tiesų, tai, nes ji yra.

952
00:58:06,600 --> 00:58:09,710
JSON reiškia JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Tai iš esmės susitarta formatą perkelti duomenis ir atgal.

954
00:58:15,020 --> 00:58:18,280
Čia tai JSON objektas arba tai JSON asociatyvus masyvas

955
00:58:18,280 --> 00:58:21,010
siųsti man keletą klausimų apie duomenis žinoma.

956
00:58:21,010 --> 00:58:25,110
>> Šio masyvo raktus yra dalykų, pavyzdžiui, žinoma, kad turi CS50 vertė,

957
00:58:25,110 --> 00:58:29,140
ir žemyn, čia mes galime pamatyti, kad aš gali turėti vertę, kuri yra masyvas.

958
00:58:29,140 --> 00:58:32,730
Aš neturiu daryti dalykus, pavyzdžiui, parse iš stygos ir ieškoti kableliais

959
00:58:32,730 --> 00:58:35,330
ir elgiasi beprotiškai, kaip kad.

960
00:58:35,330 --> 00:58:38,820
Nes tai yra deklaruota šio JSON formatu,

961
00:58:38,820 --> 00:58:43,510
JavaScript ir jQuery jau turi funkcijas konvertuoti eilutę

962
00:58:43,510 --> 00:58:48,140
kad atrodo kaip šis JSON į faktinį JavaScript Association masyvas

963
00:58:48,140 --> 00:58:50,440
, kad mes galime dirbti su.

964
00:58:50,440 --> 00:58:56,660
Daro, kad yra taip paprasta, kaip sakydamas, kad jau nebėra šį failą, suggest.php

965
00:58:56,660 --> 00:58:59,040
siųsti man tiesiog teksto eilutę,

966
00:58:59,040 --> 00:59:01,950
bet aš žinau, ji ketina būti išsiųsti mane atgal JSON.

967
00:59:01,950 --> 00:59:06,760
Tai reiškia, kad kad JSON gali būti konvertuojamos į Association masyvas JavaScript.

968
00:59:06,760 --> 00:59:10,830
Ir taip JQuery, aš norėčiau, kad jūs padaryti, kad man.

969
00:59:10,830 --> 00:59:13,990
Tai reiškia, kad šis atsakas parametras čia,

970
00:59:13,990 --> 00:59:16,070
tai nėra tik eilutę.

971
00:59:16,070 --> 00:59:19,860
, Nes mes papasakojo jQuery, kad čia ateina kai JSON,

972
00:59:19,860 --> 00:59:22,950
JQuery bus pakankamai protingas, kad pasakyti, "Jūs norėjote JSON?"

973
00:59:22,950 --> 00:59:26,890
"Aš ruošiuosi konvertuoti į Association masyvas už jus."

974
00:59:26,890 --> 00:59:32,100
Tegul iš tikrųjų imtis bent skirtuką Network atrodo, kai mes quote4.js.

975
00:59:32,100 --> 00:59:35,400
Keisime, ir perkraukite puslapį.

976
00:59:37,150 --> 00:59:41,250
Dabar aš ruošiuosi vėl įvesti-.

977
00:59:41,250 --> 00:59:45,600
Aš atlikau keletą prašymus suggest.php, bet dabar šis atsakas,

978
00:59:45,600 --> 00:59:48,670
, o ne tik eilutę, tai JSON.

979
00:59:48,670 --> 00:59:52,580
Taigi, aš turiu atvirą garbanotas petnešomis, sakydamas: "Čia ateina masyvą.

980
00:59:52,580 --> 00:59:56,830
>> Pirmasis ir vienintelis raktas šio Association masyvas vadinamas simboliai,

981
00:59:56,830 --> 01:00:00,240
ir tada čia yra visų atitinkamų simbolių masyvas

982
01:00:00,240 --> 01:00:04,820
dabar iš Yahoo! Finance ", o ne iš milžiniškos sąrašo.

983
01:00:06,110 --> 01:00:10,630
Štai kaip aš galiu tiesiog užpildyti šią Automatinis užpildymas įskiepiai

984
01:00:10,630 --> 01:00:14,280
su kai kurių duomenų, kad neina į vietinį failą, kuris jau iš anksto

985
01:00:14,280 --> 01:00:17,490
bet nuo kažko kito.

986
01:00:17,490 --> 01:00:21,160
Pasirodo, kad iš tiesų galime pasinaudoti technologija, vadinama JSONP,

987
01:00:21,160 --> 01:00:27,420
arba JSON su kamšalu, kad bus pašalinti šį suggest.php jokių tarpininkų.

988
01:00:27,420 --> 01:00:34,010
Bet vietoj to, tai, kad, tegul vietoj to, kaip aš galiu pagerinti tai dar atrodo.

989
01:00:34,010 --> 01:00:36,040
Man tikrai patinka Bootstrap "Typeahead. Tai tikrai gražus.

990
01:00:36,040 --> 01:00:39,570
Bet mes vis gerai JavaScript ir mes norime rūšies padaryti tai patys,

991
01:00:39,570 --> 01:00:43,870
gal imtis pažvelgti į tai, ką šis priedas gali daryti.

992
01:00:43,870 --> 01:00:46,500
Tegul nebegali naudoti, kad Typeahead dalykas,

993
01:00:46,500 --> 01:00:50,550
ir pabandykime siūlomų išteklių sąrašą, kad šis patys.

994
01:00:50,550 --> 01:00:53,790
Čia quote6.php mes ketiname pradėti nuo tuo pačiu būdu.

995
01:00:53,790 --> 01:00:58,050
Kiekvieną kartą, kai kas nors įveda kažką, mes norime, kad AJAX prašymą.

996
01:00:58,050 --> 01:01:01,590
Tai yra panašus į mūsų pradinės CS50 Finansų Instant.

997
01:01:01,590 --> 01:01:05,020
Užuot Pateikdamas prašymą quote.php,

998
01:01:05,020 --> 01:01:08,530
mes dabar Pateikdamas prašymą į tą pačią bylą, kaip ir anksčiau, šį suggest.php,

999
01:01:08,530 --> 01:01:12,460
kuris yra tik ketina traukti duomenis iš "Yahoo! Finance".

1000
01:01:12,460 --> 01:01:19,480
>> Vėlgi, mes vis dar tikisi JSON, tačiau dabar, nes Typeahead nedaro tai mums,

1001
01:01:19,480 --> 01:01:24,850
mums taip pat reikia siųsti kartu vertę, kuri yra viduje dabartinio teksto laukelyje.

1002
01:01:24,850 --> 01:01:28,120
Dabar mes žinome, ką paprašyti Yahoo! Finance,

1003
01:01:28,120 --> 01:01:34,160
ir todėl dabar čia yra funkcija, kad mes norime atlikti, kai prašymas baigia.

1004
01:01:34,160 --> 01:01:36,520
Mes neturime įjungti į sąrašą,

1005
01:01:36,520 --> 01:01:40,630
kad čia, kur mes iš tikrųjų ketiname sukurti pasiūlymų sąrašo.

1006
01:01:40,630 --> 01:01:44,850
Norėdami tai padaryti, panašiai kaip PHP sudurtinius šių didelių eilutes HTML

1007
01:01:44,850 --> 01:01:48,170
tada mes spausdinami juos, mes galime padaryti tą patį tiksliai dalykas JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Pirma, mes ketiname pradėti šią eilutę, pavadintą pasiūlymai

1009
01:01:51,850 --> 01:01:54,590
ir ši eilutė yra tik ketina būti šiek tiek HTML.

1010
01:01:54,590 --> 01:01:58,320
Mes norime, kad ji būtų sąrašas dalykų, kad mes ketiname pradėti nuo šio sąrašo žyma,

1011
01:01:58,320 --> 01:02:03,340
ir dabar mes ketiname pakartoti per visus iš simbolių, kurie buvo grąžintos atgal į mus.

1012
01:02:03,340 --> 01:02:06,500
Prisiminti, nes mes sakė datatype: "JSON", tai yra ne eilutę.

1013
01:02:06,500 --> 01:02:09,500
Tai jau mums masyvo. Tai tikrai cool.

1014
01:02:09,500 --> 01:02:13,790
Mes galime tiesiog pasakyti, "aš noriu jums pridėti sąrašo elementą".

1015
01:02:13,790 --> 01:02:16,000
Mes įdėti jį viduje elemento pusės to,

1016
01:02:16,000 --> 01:02:19,030
mes suteiksime pasiūlymus klasę, todėl mes žinome, kas tai yra,

1017
01:02:19,030 --> 01:02:23,880
ir dabar čia yra simbolis, kad mes turime grįžti iš "Yahoo! Finance".

1018
01:02:23,880 --> 01:02:27,230
>> Kai mes sukūrėme elementas kiekvienam iš simbolių, mes Dotarłeś atgal

1019
01:02:27,230 --> 01:02:30,100
mes tiesiog nori uždaryti sąrašą.

1020
01:02:30,100 --> 01:02:33,040
Taigi, dabar pasiūlymus šį mažą HTML fragmentą

1021
01:02:33,040 --> 01:02:37,860
kai įdėti į puslapį, bus sąrašas dalykų, mes ieškome.

1022
01:02:37,860 --> 01:02:41,070
Dabar galime iš tikrųjų įdėti, kad puslapyje.

1023
01:02:41,070 --> 01:02:46,390
Norėdami tai padaryti, kad aš iš tikrųjų sukūrė kitą tuščią div ir aš jai pasiūlymus ID.

1024
01:02:46,390 --> 01:02:52,520
Panašiai kaip mes nustatyti div turinį, kad būtų galima parodyti, kad atsargų duomenų kainą,

1025
01:02:52,520 --> 01:02:58,600
dabar mes tiesiog norite nustatyti šio div turinį, kokia ši eilutė

1026
01:02:58,600 --> 01:03:00,290
kuriame yra šie simboliai.

1027
01:03:00,290 --> 01:03:07,650
Pagal naudodami šį HTML metodą, pasiūlymai kintamasis, ši eilutė yra HTML eilutę.

1028
01:03:07,650 --> 01:03:13,490
Aš noriu, kad jūs, kad HTML ir įdėti jį viduje div vadinamas pasiūlymai.

1029
01:03:13,490 --> 01:03:15,680
Mes tiesiog pridedama kažką į DOM.

1030
01:03:15,680 --> 01:03:20,360
Mes pridėjome keletą naujų elementų į DOM, kad dabar mes galime rodyti puslapyje.

1031
01:03:20,360 --> 01:03:22,540
Pažiūrėkime, kaip tai atrodo.

1032
01:03:22,540 --> 01:03:29,110
, Jei mes įkelti quote6 ir dabar mes grįžtame,

1033
01:03:29,110 --> 01:03:34,480
dabar, kai aš pradėti rašyti AAPL, mes jau nebeturi, kad "Bootstrap" Automatinis užpildymas,

1034
01:03:34,480 --> 01:03:38,470
bet dabar mes turime šį sąrašą, kad mes padarėme patys.

1035
01:03:38,470 --> 01:03:43,230
Tai yra šiek tiek atrodys prasčiau nei šis įkrovos Typeahead, pavyzdžiui,

1036
01:03:43,230 --> 01:03:45,580
bet ji neleidžia mums daryti vienas kitas dalykas.

1037
01:03:45,580 --> 01:03:48,660
Kai ieškojome tuo "Bootstrap" įskiepiai,

1038
01:03:48,660 --> 01:03:52,590
mes matėme, kad kai mes autocompleted, vienas iš AutoComplete reikšmių AAPL.

1039
01:03:52,590 --> 01:03:54,820
Kad gali būti ne taip naudinga.

1040
01:03:54,820 --> 01:03:59,100
Kaip vartotojas, aš gali ne iš karto pripažinti visų akcijų simbolių.

1041
01:03:59,100 --> 01:04:02,370
Ką aš turbūt labiau linkę pripažinti bendrovės faktinio pavadinimai.

1042
01:04:02,370 --> 01:04:05,310
Taigi ar nebūtų tai būtų tikrai naudinga, jei užuot sakydamas AAPL

1043
01:04:05,310 --> 01:04:07,970
tai sako kažką panašaus į "Apple Inc

1044
01:04:07,970 --> 01:04:12,240
, Nes mes valcavimo tai patys, mes tikrai gali lengvai tai padaryti.

1045
01:04:12,240 --> 01:04:17,630
Tegul atverti mūsų paskutinį citata failą čia, kad quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Tas pats. Aš ką tik sukūrė dar vieną PHP failą, kuris kreipiasi į mus daugiau nei tik simbolių.

1047
01:04:23,200 --> 01:04:25,550
Ji taip pat suteikia mums įmonės pavadinimą.

1048
01:04:25,550 --> 01:04:28,150
Ir taip mes darome tą patį. Mes darome AJAX prašymą.

1049
01:04:28,150 --> 01:04:32,370
Kai prašymas bus baigtas, mes ketiname čia galėtų vykdyti šią funkciją,

1050
01:04:32,370 --> 01:04:36,520
ir ši funkcija yra sukurti didelį elementų eilutę.

1051
01:04:36,520 --> 01:04:39,520
Bet skirtumas yra tas, kad iš šių sąrašų vertė nebėra vien tik simbolis,

1052
01:04:39,520 --> 01:04:45,370
tai dabar pavadinimas.

1053
01:04:45,370 --> 01:04:47,070
Taigi, mes turime vieną mažą problemą.

1054
01:04:47,070 --> 01:04:51,590
Kai mes naudojame mūsų peržvalgos, mums reikia kažkaip perduoti jį simbolį.

1055
01:04:51,590 --> 01:04:54,950
Mes negalime perduoti peržvalgos kažką panašaus į "Microsoft Corporation".

1056
01:04:54,950 --> 01:04:57,900
Mes turime perduoti jį MSFT.

1057
01:04:57,900 --> 01:05:01,640
Kai mes HTML rašymo, mes turime daug gražus built-in požymių.

1058
01:05:01,640 --> 01:05:05,440
Galėjo būti susijęs su juo href ar klasė.

1059
01:05:05,440 --> 01:05:08,230
Bet ką mes tikrai turime dabar, yra kiekvienos iš šių nuorodų

1060
01:05:08,230 --> 01:05:11,120
turėti akcijų simbolis, su juo susijusios.

1061
01:05:11,120 --> 01:05:14,240
Nėra jokios built-in HTML atributas akcijų simbolis,

1062
01:05:14,240 --> 01:05:21,010
bet, laimei, HTML5 leidžia mums kurti savo atributus, ką norime.

1063
01:05:21,010 --> 01:05:24,620
Duomenų simbolį, sakydamas, aš pristatė naują atributą

1064
01:05:24,620 --> 01:05:29,350
kurio pavadinimas aš ką tik padarė, ir tai yra gerai, nes aš ankstesnė su šiais duomenimis.

1065
01:05:29,350 --> 01:05:34,270
Mes ketiname laikyti viduje ten simboliu sandėlyje dabar.

1066
01:05:34,270 --> 01:05:39,590
Ką tai reiškia, kad nors mes rodote įmonės pavadinimą vertę

1067
01:05:39,590 --> 01:05:43,380
viduje mūsų automatinį užbaigimą, mes dar prisimena simbolis

1068
01:05:43,380 --> 01:05:47,110
kuri yra susijusi su kiekvienos bendrovės.

1069
01:05:47,110 --> 01:05:50,350
Būdas, ką mes darome, kad yra viduje šio elemento.

1070
01:05:50,350 --> 01:05:52,930
Taigi, tai reiškia, kad mes turime padaryti dar vieną kaita.

1071
01:05:52,930 --> 01:05:57,090
Kai mes spustelėkite jį dabar, mums reikia, kad iš tikrųjų pasinaudoti simbolio atributas

1072
01:05:57,090 --> 01:06:00,220
, o ne tik jo vertę.

1073
01:06:00,220 --> 01:06:05,010
Jei mes atgal į viršų, mes pridėti įvykio apdorojimo pasiūlymus.

1074
01:06:05,010 --> 01:06:09,280
Kai vienas iš šių pasiūlymų yra paspaudėte dabar, aš noriu kažką daryti.

1075
01:06:09,280 --> 01:06:13,160
Ką aš noriu padaryti, tai pakeisti tos įvesties langelį vertę.

1076
01:06:13,160 --> 01:06:16,100
Dabar aš noriu nustatyti tą patį Val funkciją.

1077
01:06:16,100 --> 01:06:21,060
>> Taigi, be jokių argumentų val funkcija grąžina jums, kas jau esančiame tekstiniame lauke,

1078
01:06:21,060 --> 01:06:27,070
bet jei jūs suteikiate jai eilutę, ji ketina imtis, kad eilutę, ir įdėti jį į teksto laukelį.

1079
01:06:27,070 --> 01:06:28,980
Aš pasirinkę teksto lauką tuo pačiu būdu.

1080
01:06:28,980 --> 01:06:31,230
Tai pavadinimas yra simbolis form citata viduje.

1081
01:06:31,230 --> 01:06:37,540
Dabar aš siunčiu atributo duomenų simbolis vertę.

1082
01:06:37,540 --> 01:06:41,560
Šis dalykas čia yra nauja, tai $ (this).

1083
01:06:41,560 --> 01:06:46,850
Ką tai reiškia yra elementas, kuris buvo paspaudėte.

1084
01:06:46,850 --> 01:06:50,880
Mes galite pamatyti čia, kad mes ne pridedant įvykis paspaudimus

1085
01:06:50,880 --> 01:06:54,690
kiekvieną elementą su klasės užuominos.

1086
01:06:54,690 --> 01:06:57,140
Atvirkščiai, mes artėja tai šiek tiek kitaip.

1087
01:06:57,140 --> 01:07:01,700
Vietoj to mes sakome, kai kas nors viduje šio PASIŪLYMAI div,

1088
01:07:01,700 --> 01:07:04,080
atminkite yra tik tame sąraše konteineris,

1089
01:07:04,080 --> 01:07:10,150
jei kažkas viduje div paspausti ir ji turi įtaigos klasė,

1090
01:07:10,150 --> 01:07:13,000
Noriu, šis įvykis į ugnį.

1091
01:07:13,000 --> 01:07:17,490
Iš esmės, ką tai reiškia, kad mes galime padaryti, mes galime panaudoti tą pačią aptarnavimo įvykio

1092
01:07:17,490 --> 01:07:20,000
visų sąraše esančių dalykų.

1093
01:07:20,000 --> 01:07:22,080
Taigi, mes neturime turėti vieną aptarnavimo įvykio pirmojo elemento

1094
01:07:22,080 --> 01:07:24,550
ir pats kaip antrojo elemento krautuvai.

1095
01:07:24,550 --> 01:07:29,880
Vietoj to mes galime pasakyti, "Aš noriu, dėl to paties įvykio prižiūrėtojas taikomos viskas mano sąraše".

1096
01:07:29,880 --> 01:07:34,420
Bet mes turime kažkaip žinoti, kuris elementas buvo paspaudėte.

1097
01:07:34,420 --> 01:07:38,450
Šis "šį" žodį reiškia tik tai.

1098
01:07:38,450 --> 01:07:42,360
Tai objektas, kuris buvo tiesiog spusteli naudotojas.

1099
01:07:42,360 --> 01:07:47,680
Jei aš tiesiog paspaudėte 3-ią nuorodą, tai yra tos 3 nuorodos elementas,

1100
01:07:47,680 --> 01:07:51,670
, o tai reiškia, kad aš galiu gauti savo atributą, duomenų simbolis,

1101
01:07:51,670 --> 01:07:57,760
kuriuos mes žinome, joje turi būti simbolis, kuris susietas su įmone, aš tiesiog paspaudėte.

1102
01:07:57,760 --> 01:08:04,550
Jei mes šuolis atgal į mūsų finansų puslapyje,

1103
01:08:04,550 --> 01:08:08,580
mes galime matyti, kad dabar, kai aš pradėti rašyti kažką panašaus į MSFT,

1104
01:08:08,580 --> 01:08:11,220
mes jau nebegauna tik simbolius akcijų,

1105
01:08:11,220 --> 01:08:13,720
mes dabar gauti faktinius bendrovių.

1106
01:08:13,720 --> 01:08:20,410
Bet kai aš spustelėkite vieną iš šių bendrovių,

1107
01:08:20,410 --> 01:08:25,180
matome, kad mes iš tikrųjų užpildant teksto laukelį su įmonės pavadinimu

1108
01:08:25,180 --> 01:08:29,850
bet kas buvo saugomi viduje šių duomenų atributų.

1109
01:08:29,850 --> 01:08:32,880
Ir todėl, jei aš iš tikrųjų patikrinti vieną iš šių elementų, paspaudę dešiniu klavišu

1110
01:08:32,880 --> 01:08:36,200
ir spustelėdami Tikrinti elementą, mes iš tikrųjų galite pamatyti, kaip tai atrodo.

1111
01:08:36,200 --> 01:08:40,290
>> Atminkite, kad tai yra kažkas, kad mes sukūrėme viduje už linijos

1112
01:08:40,290 --> 01:08:42,649
kai mes buvome sukurti, kad HTML eilutę.

1113
01:08:42,649 --> 01:08:47,870
Mes galime matyti, kad šie duomenys simbolis turi MSFT, kuris yra puikus vertę.

1114
01:08:47,870 --> 01:08:49,189
Štai ką mes tikėjosi.

1115
01:08:49,189 --> 01:08:53,170
Tai simbolis, ir tai, kaip mes turime vertę, mums reikia naudoti

1116
01:08:53,170 --> 01:08:56,140
viduje šio teksto laukas.

1117
01:08:56,140 --> 01:08:58,850
Kad pakankamai citata forma, todėl, kad tai rūšies nuobodu.

1118
01:08:58,850 --> 01:09:02,990
Leiskite tiesiog padaryti kai greitai patobulinimų mūsų portfelio puslapyje.

1119
01:09:02,990 --> 01:09:08,109
Jeigu jūs naudojotės CS50 Finansai, o ir pradėdami pirkti ir parduoti daug atsargų,

1120
01:09:08,109 --> 01:09:11,300
galiausiai ši lentelė ketina gauti gana didelis,

1121
01:09:11,300 --> 01:09:13,850
ir jūs ketinate norite biržos juosta, žinoma.

1122
01:09:13,850 --> 01:09:20,350
Kai lentelėje yra tikrai, tikrai didelis, tai vartotojui gali būti naudinga pabandyti ieškoti per jį.

1123
01:09:20,350 --> 01:09:23,290
Viduje paieškos laukelį, jei aš pradėti rašyti kažką panašaus į Disney

1124
01:09:23,290 --> 01:09:26,359
ir ieško mano Mickey Mouse sandėlyje, mes galime pamatyti, kad lentelės dabar filtravimas

1125
01:09:26,359 --> 01:09:28,189
pagal tai, ką aš tiesiog atspausdinti.

1126
01:09:28,189 --> 01:09:31,640
Ši funkcija atrodo itin sudėtinga, tačiau ji tikrai, tikrai paprasta

1127
01:09:31,640 --> 01:09:33,859
su JQuery ir "JavaScript".

1128
01:09:33,859 --> 01:09:39,189
Tai portfolio.php faile yra "JavaScript" failą pavadinimu portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Paimkime Tuo išvaizdą.

1130
01:09:41,130 --> 01:09:44,890
Taigi, html, js, portfelį.

1131
01:09:44,890 --> 01:09:49,210
Štai kur mes darome, kad ieško ant stalo.

1132
01:09:49,210 --> 01:09:52,750
Pirmas dalykas, kurį reikia padaryti, tai pridėti įvykio apdorojimo šio tekstinio laukelio

1133
01:09:52,750 --> 01:09:55,760
nes mes žinome, kad mes norime, kad mūsų filtravimo funkcija gaisro

1134
01:09:55,760 --> 01:09:59,800
Kiekvieną kartą, kai vartotojas paspaudžia kažką, nes mes neturime laiko Paieškos mygtukai.

1135
01:09:59,800 --> 01:10:03,000
Pirmas dalykas, kurį reikia padaryti, tai išsiaiškinti, ko ieško vartotojas,

1136
01:10:03,000 --> 01:10:04,780
kaip mes anksčiau.

1137
01:10:04,780 --> 01:10:11,320
Šis raktinis žodis - tai einamųjų elemento vartotojas bendrauja su.

1138
01:10:11,320 --> 01:10:14,070
>> Kadangi vartotojas bendrauja su paieškos laukeliu,

1139
01:10:14,070 --> 01:10:17,020
$, Tai reiškia, kad paieškos laukelį,

1140
01:10:17,020 --> 01:10:21,820
taip this.val suteikia mums, kas viduje paieškos laukelį vartotojas šiuo metu renkate.

1141
01:10:22,810 --> 01:10:27,320
Taigi, dabar, ką mes norime padaryti, tai mes norime pakartoti virš visų eilučių

1142
01:10:27,320 --> 01:10:29,240
viduje mūsų stalo.

1143
01:10:29,240 --> 01:10:35,630
Norėdami pasirinkti visų eilučių mūsų stalo, daviau tos lentelės, stalo portfelio ID

1144
01:10:35,630 --> 01:10:39,060
ir kiekvienoje eilutėje yra atstovaujama pagal TR elemento,

1145
01:10:39,060 --> 01:10:42,080
taip, tai selektorius ketina grįžti į mane didelis masyvo

1146
01:10:42,080 --> 01:10:44,370
visų eilučių mano stalo.

1147
01:10:44,370 --> 01:10:47,010
Dabar aš noriu, kad keistumėte, kad masyvas.

1148
01:10:47,010 --> 01:10:52,390
Aš galėtų jums kilpą, bet JQuery faktiškai teikia mums gražią funkcija vadinama "kiekvienas".

1149
01:10:52,390 --> 01:10:55,220
Tai, ką kiekvienas daro kiekvienas trunka vieną argumentą,

1150
01:10:55,220 --> 01:10:57,090
ir šis argumentas yra funkcija.

1151
01:10:57,090 --> 01:11:02,760
Tai, ką jis ketina daryti, ji ketina taikyti šią funkciją kiekvieno elemento viduje šio sąrašo.

1152
01:11:02,760 --> 01:11:05,550
Ši funkcija užima vieną argumentą, kad el,

1153
01:11:05,550 --> 01:11:10,090
Kai ši funkcija yra vykdoma, tai e bus pakeisti pirmoje eilutėje,

1154
01:11:10,090 --> 01:11:12,070
tada antra eilutė, o tada trečioje eilėje.

1155
01:11:12,070 --> 01:11:15,150
Šiuo būdu, tai yra tas pats, kaip veikia už linijos

1156
01:11:15,150 --> 01:11:21,360
ir tada suprasti esamą elementą, paremtą indekso viduje savo kilpą.

1157
01:11:21,360 --> 01:11:24,750
Kiekvienos iteracijos, kiekvienam iš šių elementų lentelėje,

1158
01:11:24,750 --> 01:11:30,560
Noriu patikrinti, ar elemento teksto viduje langelį eilutėje tekstą -

1159
01:11:30,560 --> 01:11:33,130
atitinka tai, ką aš ieškoti.

1160
01:11:33,130 --> 01:11:36,390
Tai didelis ilgą eilutę komandų, kaip galėčiau tai padaryti.

1161
01:11:36,390 --> 01:11:40,900
Pirma, dar kartą, tai dabar daroma nuoroda į, nes jis viduje nauja funkcija -

1162
01:11:40,900 --> 01:11:45,020
tai dabar dabartinę eilutę į lentelę.

1163
01:11:45,020 --> 01:11:47,340
Noriu pasinaudoti dabartinę eilutę lentelėje,

1164
01:11:47,340 --> 01:11:49,950
ir aš noriu gauti, visi jo vaikai.

1165
01:11:49,950 --> 01:11:51,940
Atminkite, kad DOM yra hierarchinė,

1166
01:11:51,940 --> 01:11:54,200
, o tai reiškia, kad elementai turi vaikų skaičių.

1167
01:11:54,200 --> 01:12:00,180
>> Tai vaikai funkcija ketina grįžti į mane atgal visus elementus, masyvas

1168
01:12:00,180 --> 01:12:03,240
kad tie vaikai, šiuo atveju, lentelės eilutė.

1169
01:12:03,240 --> 01:12:07,150
Tai yra tiesiog ląstelės viduje iš eilės.

1170
01:12:07,150 --> 01:12:09,230
Aš tik noriu ieškoti per pirmąjį langelį.

1171
01:12:09,230 --> 01:12:13,090
Tai pirmoji funkcija sako duok man pirmasis elementas masyvo,.

1172
01:12:13,090 --> 01:12:17,070
Tada tekstas funkcija sako, kad gauti man, ką tos ląstelės viduje

1173
01:12:17,070 --> 01:12:19,530
nes noriu ieškoti per šio teksto.

1174
01:12:19,530 --> 01:12:21,040
Galiausiai, leiskite konvertuoti jį į mažąsias,

1175
01:12:21,040 --> 01:12:23,940
todėl mes galime padaryti teksto didžiąsias ir mažąsias raides užklausas.

1176
01:12:23,940 --> 01:12:29,990
Galiausiai, mes norime pamatyti, jei, kad viduje lentelės eilutė yra eilutę mes ieškote.

1177
01:12:29,990 --> 01:12:32,980
IndexOf funkcija JavaScript daro tik tai.

1178
01:12:32,980 --> 01:12:37,060
Jis sako mums, ar ši eilutė yra dar viena eilutę.

1179
01:12:37,060 --> 01:12:40,150
Jei tai tiesa, kad langelyje yra tai, ką aš ieškoti,

1180
01:12:40,150 --> 01:12:42,140
tada aš noriu įsitikinti, kad jis rodomas.

1181
01:12:42,140 --> 01:12:45,330
Rodyti metodas bus pasakyti: "Parodyk elementą."

1182
01:12:45,330 --> 01:12:50,350
Jei tai ne tas atvejis, tai reiškia, ką aš ieškote neįtraukta

1183
01:12:50,350 --> 01:12:53,550
toje eilutėje, ir todėl aš noriu, kad paslėpti nuo vartotojo.

1184
01:12:53,550 --> 01:12:59,240
Kuri pasiekia, kad gražus filtravimo efektas, kai nebėra matome visą lentelę.

1185
01:12:59,240 --> 01:13:01,480
Jei jus domina, kad šis simbolis taip pat,

1186
01:13:01,480 --> 01:13:04,180
mes po šaltinį internete. Bet tai tikrai paprasta.

1187
01:13:04,180 --> 01:13:09,860
JQuery yra nuostabus šių animacija ir manipuliuoti CSS savybes metodus.

1188
01:13:09,860 --> 01:13:11,020
Taip, kad jį man.

1189
01:13:11,020 --> 01:13:15,560
>> Kas tada laukia ateityje? Kaip pamatysite po kelių dienų, galutinis projektai pasiūlymas yra mokamas.

1190
01:13:15,560 --> 01:13:17,730
Galutinis projektai pasiūlymas bus užduoti jums keletą klausimų,

1191
01:13:17,730 --> 01:13:19,420
, tačiau tarp jų bus trys etapai -

1192
01:13:19,420 --> 01:13:22,840
1 "gera" etapas, vienas geriau etapas, ir vienas geriausias.

1193
01:13:22,840 --> 01:13:25,870
Idėja iš tikrųjų yra padėti jus vaikinai nustatyti savo lūkesčius

1194
01:13:25,870 --> 01:13:29,160
taip, kad minimaliai jums bus laimingas su savo galutinio projekto rezultatų

1195
01:13:29,160 --> 01:13:32,060
ir ji bus "gera" tiek, kiek esate susirūpinęs.

1196
01:13:32,060 --> 01:13:34,540
Bet tada gauti jums pasiekti tik šiek tiek į kažką labui geriau

1197
01:13:34,540 --> 01:13:37,680
kažkas geriausia, mes taip pat rūšiuoti stumti jus link, kad taip pat.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-Thon, tuo tarpu, per kelias savaites.

1199
01:13:40,660 --> 01:13:44,340
Paprastai, mes tai loterijos pagrindu, nes interesų,

1200
01:13:44,340 --> 01:13:47,680
tačiau šansai yra, mes priimsime keli šimtai mus maršrutiniais autobusais iš Harvardo aikštėje

1201
01:13:47,680 --> 01:13:51,540
Kendall Square, kai "Microsoft" yra gražus objektas, taikliai pavadino "NERD" -

1202
01:13:51,540 --> 01:13:53,830
Naujosios Anglijos mokslinių tyrimų ir plėtros centras.

1203
01:13:53,830 --> 01:13:56,380
Mes siekiame, apie 8 val. Mes turime šiek tiek maisto.

1204
01:13:56,380 --> 01:13:58,160
Apie 01:00 mes turime šiek tiek daugiau maisto.

1205
01:13:58,160 --> 01:14:02,150
Apie 5 val. Jei jūs vis dar miega, mes per galvą IHOP arba priimti jus atgal į kampusie.

1206
01:14:02,150 --> 01:14:04,380
Tikslas yra pasinerti į galutinius projektus

1207
01:14:04,380 --> 01:14:06,190
kartu su klasiokais ir darbuotojų.

1208
01:14:06,190 --> 01:14:08,280
Tada po kelių dienų CS50 mugė,

1209
01:14:08,280 --> 01:14:10,990
, kuris iš tikrųjų reiškia būti galimybė jums, vaikinai, pristatyti savo darbą

1210
01:14:10,990 --> 01:14:12,700
ir pasiekimus už tą semestrą,

1211
01:14:12,700 --> 01:14:15,610
o trina pečių vieni su kitais ir gauti tai, ką kiekvienas padarė jausmą.

1212
01:14:15,610 --> 01:14:17,850
Turint tai sakė, labai ačiū Tommy ir Juozapui

1213
01:14:17,850 --> 01:14:19,960
ir mes matome, pirmadienį.

1214
01:14:19,960 --> 01:14:24,070
 [Plojimai]