1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Viikko 9, jatkuu]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Harvardin yliopisto]

3
00:00:05,160 --> 00:00:07,020
[Tämä on CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Tämä on CS50. Tämä on loppuviikosta 9. Paljon kiitoksia.

5
00:00:13,340 --> 00:00:15,310
Lopuksi. Viikko 9. Sain sen.

6
00:00:15,310 --> 00:00:18,590
Tänään jatkamme keskustelua web ohjelmointi

7
00:00:18,590 --> 00:00:21,660
silmä kohti opinnäytetyö, ei siksi sinun täytyy tehdä jotakin web-pohjainen

8
00:00:21,660 --> 00:00:25,610
lopullisen hankkeita vaan joko opinnäytetyöt tai jälkeen CS50

9
00:00:25,610 --> 00:00:29,000
tämä on varmasti suuntaan, jossa moderni ohjelmisto on menossa.

10
00:00:29,000 --> 00:00:31,770
Ja silti se ei ole oikeastaan ​​helppo juttu.

11
00:00:31,770 --> 00:00:35,040
Itse asiassa yksi vaikeimmista asioista tehdä, on osa suunnittelua.

12
00:00:35,040 --> 00:00:38,600
>> Esimerkiksi suunnittelun me tarkoitamme todella saada käyttöliittymä

13
00:00:38,600 --> 00:00:40,420
tai käyttökokemuksen oikea.

14
00:00:40,420 --> 00:00:43,200
I daresay - ja me tiedämme viime Harjoitus

15
00:00:43,200 --> 00:00:45,960
kun muutama teistä esiin oman vatsanväänteet joitakin ohjelmisto

16
00:00:45,960 --> 00:00:49,000
tai laitteisto, infuriates teitä, joko kampuksella tai off -

17
00:00:49,000 --> 00:00:51,930
siellä on paljon sivustoja siellä, siellä on paljon laitteita siellä,

18
00:00:51,930 --> 00:00:53,900
sellainen perseestä.

19
00:00:53,900 --> 00:00:58,730
Mutta tosiasia on, että tekee asioita, joita on helppo käyttää vielä ovat kuitenkin tehokkaita

20
00:00:58,730 --> 00:01:00,550
on erittäin vaikea haaste.

21
00:01:00,550 --> 00:01:03,680
Joten tänään kysyin Joseph ja Tommy liittyä minua täällä

22
00:01:03,680 --> 00:01:06,680
jotta voimme keskustella, molemmat noin suunnittelu

23
00:01:06,680 --> 00:01:09,090
ja millaisia ​​ajattelun prosessien tulisi aloittaa läpi pään

24
00:01:09,090 --> 00:01:12,040
kun voit suunnitella lopullinen projekteja, teidän tulevissa haasteissa.

25
00:01:12,040 --> 00:01:15,040
Ja sitten Tommyn apua me tarkastelemme joitakin täytäntöönpanon yksityiskohtia.

26
00:01:15,040 --> 00:01:18,440
Miten voit olla joitakin visio paperilla tai mielessäsi

27
00:01:18,440 --> 00:01:20,760
että voit suorittaa ohjelmallisesti

28
00:01:20,760 --> 00:01:24,030
käyttämällä joitakin teknologioiden ja tekniikoiden olemme juuri alkaneet puhua,

29
00:01:24,030 --> 00:01:29,080
nimittäin JavaScript ja jotain vielä uudempaa, eli AJAX, asynkroninen JavaScript.

30
00:01:29,080 --> 00:01:32,950
Jonka avulla voit luoda kaikki dynaamisen käyttöliittymän

31
00:01:32,950 --> 00:01:35,780
hakemalla enemmän ja enemmän dataa vähitellen palvelimelta.

32
00:01:35,780 --> 00:01:38,560
Joten näemme joidenkin katkelmia myös tänään.

33
00:01:38,560 --> 00:01:41,800
Sivuhuomautuksena, jos olet kiinnostunut keskittyvät tietotekniikassa

34
00:01:41,800 --> 00:01:45,010
tai sivuaineina tietojenkäsittelytiede, tiedämme, että tänä perjantaina keskipäivällä

35
00:01:45,010 --> 00:01:48,750
vuonna Maxwell Dworkin 221 tulee olemaan pizza tapahtuma

36
00:01:48,750 --> 00:01:50,780
jossa voit oppia hieman lisää tietojenkäsittelytiede.

37
00:01:50,780 --> 00:01:54,860
Matkalla ulos ovesta tänään voit poimia epävirallinen opas CS Harvardissa.

38
00:01:54,860 --> 00:01:57,290
Laitamme sen roskapönttöjä ulkopuolella klo vyötärön korkeudelle

39
00:01:57,290 --> 00:01:59,750
joten jos haluat napata tämä ja oppia hieman lisää CS,

40
00:01:59,750 --> 00:02:02,480
että tulee olemaan siellä sinua se oli viikolla 0.

41
00:02:02,480 --> 00:02:06,500
Myös jos haluat liittyä meihin CS50 lounas perjantaina klo 13:15,

42
00:02:06,500 --> 00:02:09,800
pää cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Pitemmittä puheitta, annan teille opetuksen kaveri Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hei. [Aplodit]

45
00:02:19,190 --> 00:02:20,770
Kiitos.

46
00:02:20,770 --> 00:02:24,780
Ensimmäistä kertaa kuulin suunnittelu oli luokassa täällä kutsutaan CS179.

47
00:02:24,780 --> 00:02:28,040
>> Professori aikaan kertoi meille tarinan toisen professorin

48
00:02:28,040 --> 00:02:31,640
joka oli mennyt hotellin ja käytetään hanat.

49
00:02:31,640 --> 00:02:35,630
Voiko joku kertoa minulle, mitä 2 nupit vasemmalla ja oikealla tehdä?

50
00:02:35,630 --> 00:02:39,080
[Opiskelija] Kuuma ja kylmä. >> Kuuma ja kylmä. Hyvä.

51
00:02:39,080 --> 00:02:41,430
Mitä normaalisti odottaa, eikö?

52
00:02:41,430 --> 00:02:46,960
Tämä professori käytön jälkeen hana haluaa käydä suihkussa, ja hän etenee käyttää tätä.

53
00:02:46,960 --> 00:02:51,310
Hän ajattelee vasemmalle ja oikealle puolelle on kuuma ja kylmä, eikö?

54
00:02:51,310 --> 00:02:55,470
Mutta voiko joku kertoa minulle, mitä nämä todella tehdä?

55
00:02:55,470 --> 00:02:58,060
Käsiä?

56
00:02:58,060 --> 00:03:01,740
[Äänetön opiskelija vastausta] >> Yksi ehdotus on?

57
00:03:01,740 --> 00:03:05,860
[Äänetön opiskelija vastausta] >> Lämpötila?

58
00:03:05,860 --> 00:03:10,460
Joten yksi heistä valvoo lämpötilaa ja muut tarkastukset? >> [Opiskelija] Vedenpaine.

59
00:03:10,460 --> 00:03:12,350
Veden paine. Hyvä.

60
00:03:12,350 --> 00:03:15,100
Tämä professori kävelee tämän ja ajatellen niitä valvoa kuuma ja kylmä,

61
00:03:15,100 --> 00:03:21,470
kääntyy oikea, mikä hänen mielestään on kuuma, koko matkan ylös

62
00:03:21,470 --> 00:03:23,560
koska hän haluaa ottaa lämmin suihku.

63
00:03:23,560 --> 00:03:28,100
No, ne eivät todellakaan täsmää, niin hän saa tätä kovin hauska kokemus

64
00:03:28,100 --> 00:03:31,110
olemisen kylmä suihku, ja me kaikki tiedämme, miltä se tuntuu.

65
00:03:31,110 --> 00:03:33,620
Tämä on esimerkki suunnittelun puute.

66
00:03:33,620 --> 00:03:37,040
Mitä tarkoitan, että on hänen odotus hanasta

67
00:03:37,040 --> 00:03:39,420
ei vastaa mitä tuli ulos suihku,

68
00:03:39,420 --> 00:03:41,780
joka on eräänlainen valitettavaa hänelle.

69
00:03:41,780 --> 00:03:44,990
Joten tämä on esimerkki suunnittelun puute, joka tapahtuu tosielämässä.

70
00:03:44,990 --> 00:03:48,020
Mutta me näemme kaikenlaisia ​​toisilla samoin.

71
00:03:48,020 --> 00:03:50,390
Emme ehkä ole faneja MBTA järjestelmän.

72
00:03:50,390 --> 00:03:55,560
Tämä on metro järjestelmä todella Lontoossa, joka sanoo: "Tämä painike ei ole käytössä."

73
00:03:55,560 --> 00:04:00,220
Miksi se edes siellä? Miksi edes välitä?

74
00:04:00,220 --> 00:04:02,810
Kun olin lapsi, joka tech savvy yksi talo,

75
00:04:02,810 --> 00:04:05,050
kun tietokone olisi kaatua, äitini olisi tullut minulle,

76
00:04:05,050 --> 00:04:07,060
näyttää minulle näytön ja kysyy mitä tapahtui.

77
00:04:07,060 --> 00:04:09,210
>> Edes En tiedä, mitä tämä tarkoittaa.

78
00:04:11,890 --> 00:04:14,700
[Naurua] Mitä?

79
00:04:16,950 --> 00:04:18,019
[Naurua]

80
00:04:18,720 --> 00:04:23,050
Joskus meistä tuntuu ohjelmistojen kehittäjät ovat vain vetouistelu meitä.

81
00:04:23,050 --> 00:04:28,460
Kun käyttäjät olemme kuin, "Mitä on tekeillä? Joku kertoa."

82
00:04:28,460 --> 00:04:32,140
Tämä kaikki tulee alas kysymys suunnittelun.

83
00:04:32,140 --> 00:04:34,650
Suunnittelu, kuten voimme nähdä, ei ole pelkästään siitä estetiikkaa,

84
00:04:34,650 --> 00:04:37,230
se ei ole siitä, miten asiat näyttävät.

85
00:04:37,230 --> 00:04:41,720
Näemme tässä, että tämä pieni pop-up täällä oikeastaan ​​näyttää aika hyvältä.

86
00:04:41,720 --> 00:04:45,290
Se on varjon taustalla, se on raja säteet menossa.

87
00:04:45,290 --> 00:04:47,550
Se on tavallaan aika.

88
00:04:47,550 --> 00:04:51,480
Se ei oikeastaan ​​hyvin suunniteltu, koska se ei ole kovin käyttäjäystävällinen.

89
00:04:51,480 --> 00:04:54,920
Tuo pieni pop-up, joka tulee esille ei oikeastaan ​​anna minulle mitään tietoja

90
00:04:54,920 --> 00:04:58,450
mitä tapahtuu, se ei kerro mitään koska käyttäjä

91
00:04:58,450 --> 00:05:01,400
miten toipua tämän virheen.

92
00:05:01,400 --> 00:05:05,190
Haluamme ajatella asioita muotoilu ei ole.

93
00:05:05,190 --> 00:05:06,670
Ensinnäkin, se ei ole estetiikkaa.

94
00:05:06,670 --> 00:05:10,800
Se ei myöskään täytteenä App kanssa tonnia tarpeettomat toiminnot.

95
00:05:10,800 --> 00:05:14,890
Jos olet thaimaalainen ravintola, et luultavasti halua olla hammaslääkäri samanaikaisesti.

96
00:05:14,890 --> 00:05:17,720
Ja Facebook Kysymykset, ei että monet ihmiset käyttää sitä

97
00:05:17,720 --> 00:05:21,130
ja se ei todellakaan ytimessä, mitä he rakensivat.

98
00:05:21,130 --> 00:05:24,200
Ja niin se on mukava ajatella niinkään määrä asioita

99
00:05:24,200 --> 00:05:26,390
että olet laskemisesta hakemuksesi vaan laatu

100
00:05:26,390 --> 00:05:28,910
ja miten teet että käyttökokemuksen parantamiseksi

101
00:05:28,910 --> 00:05:32,540
by oikeastaan ​​paranna mitä sinulla jo on.

102
00:05:32,540 --> 00:05:37,040
>> Lyhyesti sanottuna, muotoilu kertoo meille, mitä meidän pitäisi rakentaa.

103
00:05:37,040 --> 00:05:41,950
Esimerkiksi, jos olemme rakentamassa jotain, että meidän etsiä asioita,

104
00:05:41,950 --> 00:05:45,970
kuten Google, esimerkiksi meidän pitäisi tehdä asioita tavalla

105
00:05:45,970 --> 00:05:48,950
joka edellyttää käyttäjän ottamaan paljon napsautuksia saada mitä he haluavat,

106
00:05:48,950 --> 00:05:52,580
vai pitäisikö meidän tehdä se tavalla, esimerkiksi Googlen Instant tai autocomplete

107
00:05:52,580 --> 00:05:54,970
jonka avulla voimme päästä meidän tuloksia nopeammin?

108
00:05:54,970 --> 00:05:58,740
Engineering liittyy, kuten Tommy näyttää, itse rakentaa sitä.

109
00:05:58,740 --> 00:06:01,890
On olemassa paljon erilaisia ​​design.

110
00:06:01,890 --> 00:06:06,070
Jos esimerkiksi olet rakentamassa jotain käyttöön jotain

111
00:06:06,070 --> 00:06:09,770
kolmannen maailman maassa, jossa ei ole paljon sähköä tai niin paljon tekniikkaa,

112
00:06:09,770 --> 00:06:11,440
sinun täytyy suunnitella, mitä olet rakentamassa

113
00:06:11,440 --> 00:06:14,210
tavalla, joka helposti antaa pääsy ihmisiä.

114
00:06:14,210 --> 00:06:18,290
Mutta minkälaisia ​​muita suunnittelun päätöksiä, joita ei olisi

115
00:06:18,290 --> 00:06:21,850
tai voi olla mukana jotain tällaista?

116
00:06:23,690 --> 00:06:25,660
Joo. Näen käden.

117
00:06:25,660 --> 00:06:37,200
[Äänetön opiskelija vastausta] >> Oikea. Aivan. Esteettömyys on yksi asia.

118
00:06:37,200 --> 00:06:40,870
Monet ihmiset eivät ajattele, "Entä käyttäjille?"

119
00:06:40,870 --> 00:06:43,160
kuten ääripään joko spektrin.

120
00:06:43,160 --> 00:06:47,770
Olen käyttäjät, joilla saattaa olla vamma, että en ole ajatellut

121
00:06:47,770 --> 00:06:50,590
ja olen vain ajatellut suunnittelemalla yleisen käyttäjän.

122
00:06:50,590 --> 00:06:52,630
Internet pääsee kaikkien nykyään,

123
00:06:52,630 --> 00:06:54,870
ja minun pitäisi suunnitella niille ihmisille samoin.

124
00:06:54,870 --> 00:06:58,620
Millaisia ​​muita suunnittelun päätöksiä, joita teet?

125
00:06:58,620 --> 00:07:00,690
Kyllä. >> [Opiskelija] Cost.

126
00:07:00,690 --> 00:07:02,680
Maksaa. Erittäin hyvä.

127
00:07:02,680 --> 00:07:08,060
Toinen asia, voisimme perustamme suunnittelu päätöksiä ovat kustannustehokkaita.

128
00:07:08,060 --> 00:07:13,130
Jos olemme liiketoimintaa, haluat rakentaa jotain, joka ei vie paljon kustannuksia tuottaa

129
00:07:13,130 --> 00:07:17,720
mutta voi myydä erityisen suuria kustannuksia tai saada meille voittoa.

130
00:07:17,720 --> 00:07:21,540
>> Nämä ovat kaikki erilaisia ​​suunnittelu, mutta kun olemme rakentamassa jotain Internetissä

131
00:07:21,540 --> 00:07:25,120
tai kun olemme rakentamassa jotain joka luultavasti ei maksa niin paljon rakentaa nyt,

132
00:07:25,120 --> 00:07:28,630
kuten Internet-sovellukset - sinun ei tarvitse heittää paljon pääomaa se

133
00:07:28,630 --> 00:07:30,900
jotta jotain, joka todella toimii -

134
00:07:30,900 --> 00:07:33,490
Mitä olemme enemmän huolissani on käyttökokemusta.

135
00:07:33,490 --> 00:07:36,390
Kutsumme tätä käyttäjäkeskeisen suunnittelun.

136
00:07:36,390 --> 00:07:41,550
Pohjimmiltaan mitä käyttäjäkeskeisen suunnittelun liittyy on nostamassa itsenne kengät käyttäjät.

137
00:07:41,550 --> 00:07:44,870
Jos joku kirjautuu mitä olen rakennus,

138
00:07:44,870 --> 00:07:48,250
he ilmeisesti tulleet minun erityisesti hakemuksen tavoite mielessään,

139
00:07:48,250 --> 00:07:50,280
kanssa tehtävän he haluavat suorittaa.

140
00:07:50,280 --> 00:07:53,650
Ja sinun tehtäväsi ei ole vain auttaa heitä täyttämään tätä tehtävää

141
00:07:53,650 --> 00:07:57,930
vaan auttaa heitä täyttämään se tehtävä tavalla, joka on tehokas, intuitiivinen,

142
00:07:57,930 --> 00:08:01,900
ja, kuten jotkut henkilö sanoi tuolla, saatavilla.

143
00:08:01,900 --> 00:08:03,750
Mitä tehokkuus tarkoittaa?

144
00:08:03,750 --> 00:08:08,050
Tehokkuus tarkoittaa kuinka nopeasti se minun käyttäjä suorittaa tehtävän antanut minun käyttöliittymä.

145
00:08:08,050 --> 00:08:11,650
Kestääkö paljon napsautuksia niitä saada paikasta toiseen?

146
00:08:11,650 --> 00:08:14,630
Onko se ikävä? Onko heillä suorittaa paljon toistuvia tehtäviä?

147
00:08:14,630 --> 00:08:17,140
Haluamme tehdä tämän prosessin mahdollisimman tehokas

148
00:08:17,140 --> 00:08:20,070
joten he eivät tarvitse tehdä tuollaiset asiat.

149
00:08:20,070 --> 00:08:24,230
Kuten intuitiivisuus, joka on, esimerkiksi, jos käyttäjä hakee minun liitäntä,

150
00:08:24,230 --> 00:08:27,240
on se helppo niitä saada paikasta toiseen?

151
00:08:27,240 --> 00:08:30,390
Onko se helppo ne selvittää, mitä heillä on sitten minun liitäntä

152
00:08:30,390 --> 00:08:33,770
jotta ne voivat saavuttaa tavoitteen tai tehtävän he haluavat saavuttaa?

153
00:08:33,770 --> 00:08:37,520
>> Ja lopuksi, yksi henkilö sanoi tuolla saavutettavuus on erittäin tärkeää.

154
00:08:37,520 --> 00:08:39,640
[Uros kaiutin] Se tulee esteettömyyden asioita, kuten vision,

155
00:08:39,640 --> 00:08:42,740
kuten miten voin itse suunnitella jotain jonkun joka on sokea?

156
00:08:42,740 --> 00:08:46,460
Oh. Ihmisille, jotka eivät näe ollenkaan, meillä on jotain kutsutaan näytönlukuohjelmia.

157
00:08:46,460 --> 00:08:49,070
Mitä sinun pitäisi tehdä, on sinun pitäisi rakentaa sivustosi tavalla

158
00:08:49,070 --> 00:08:52,020
että, esimerkiksi, erityisesti teknologiat mitä me kutsumme -

159
00:08:52,020 --> 00:08:53,590
On paljon asioita nyt.

160
00:08:53,590 --> 00:08:55,660
Mielestäni on olemassa näytönlukijoiden kutsutaan JAWS.

161
00:08:55,660 --> 00:08:58,410
Monet näistä asioista luottaa siihen, mitä me kutsumme alueen säännöt

162
00:08:58,410 --> 00:09:02,010
jotta luki käyttäjälle mikä on läsnä sivulla.

163
00:09:02,010 --> 00:09:05,480
Niille ihmisille, jotka eivät näe, sinun täytyy varmistaa, että nämä näytönlukijat

164
00:09:05,480 --> 00:09:09,130
voi todella poimia sivun sisällön ja voi todella näyttää käyttäjille,

165
00:09:09,130 --> 00:09:13,630
Jos et näe, ainakin voit silti ymmärtää sivun sisällön.

166
00:09:13,630 --> 00:09:16,190
Joo. Okei.

167
00:09:16,190 --> 00:09:23,410
Tarpeeksi puhua hyvää suunnittelua. Puhutaanpa huono suunnittelu.

168
00:09:23,410 --> 00:09:25,220
Nämä ovat asioita, joita sinun pitäisi tehdä.

169
00:09:25,220 --> 00:09:27,890
Voiko joku kertoa minulle kokemuksistaan ​​Craigslist

170
00:09:27,890 --> 00:09:32,190
ja mitä he ajattelevat ei ole niin hienoa tämä malli?

171
00:09:33,690 --> 00:09:36,430
Kyllä. >> [Opiskelija] mielestäni liian monta sanaa yhdellä alueella.

172
00:09:36,430 --> 00:09:39,350
Liian monta sanaa, eikö? Täysin ylivoimainen.

173
00:09:39,350 --> 00:09:42,400
Tulette tälle sivulle ja olet tervehditään koko joukko asioita täällä

174
00:09:42,400 --> 00:09:43,860
että ei ehkä edes väliä sinulle.

175
00:09:43,860 --> 00:09:47,010
Esimerkiksi asut yhdessä valtiossa, joka ei ala tämän kirjeen.

176
00:09:47,010 --> 00:09:48,690
Sanotaan asut Texasissa tai jotain.

177
00:09:48,690 --> 00:09:53,790
>> Sinun täytyy selata kaikki alas sivun päästä paikkaan olet.

178
00:09:53,790 --> 00:10:00,320
Olen Boston, joten haluan näyttää Massachusettsissa. Missä on Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Voi, se on täällä. Voi, se on Boston. Okei.

180
00:10:03,270 --> 00:10:09,070
Katsotaanpa Boston. [Naurua]

181
00:10:09,070 --> 00:10:12,250
Melko ylivoimainen, eikö?

182
00:10:12,250 --> 00:10:16,400
Hankalat asiat siellä. [Naurua]

183
00:10:17,320 --> 00:10:19,470
Sanotaan Etsin asuntoa.

184
00:10:19,470 --> 00:10:24,130
Kuinka moni on todella käytetty Craigslist? Tonnia sinua.

185
00:10:24,130 --> 00:10:30,960
On melko huonoja tapoja tarkastella tätä, mutta katsotaanpa tätä.

186
00:10:35,130 --> 00:10:38,970
Mitä eroa img ja kuva? Voiko joku kertoa minulle?

187
00:10:41,350 --> 00:10:42,830
Ei oikeastaan ​​ole mitään eroa.

188
00:10:42,830 --> 00:10:47,710
Ne tarkoittavat täsmälleen samaa asiaa, mutta niillä on erilaisia ​​tarroja niitä jostain syystä.

189
00:10:48,980 --> 00:10:53,560
Jos minä klikkaa Has Image, mitään ei tapahdu sivulla.

190
00:10:53,560 --> 00:10:57,490
Minulla on oikeastaan ​​klikkaa Hae uudelleen, että jotakin tapahtuisi.

191
00:10:57,490 --> 00:11:02,430
Mikä voisi olla parempi muotoilu päätös, joka voitaisiin tehdä siellä?

192
00:11:03,820 --> 00:11:08,030
Jos olen klikkaamalla että suodatin, en luultavasti halua suodattaa kyseisen toiminnan

193
00:11:08,030 --> 00:11:09,970
tai tiettyyn luokkaan.

194
00:11:09,970 --> 00:11:14,450
Joten sen sijaan, paina Etsi uudestaan, voisin vain automaattisesti tehdä suodatus

195
00:11:14,450 --> 00:11:17,060
eräänlainen Google tyyli, jossa he tekevät sen heti.

196
00:11:17,060 --> 00:11:20,440
[Malan] Mutta älä muodostaa kuten olemme nähneet niitä toistaiseksi on fyysisesti toimitettava

197
00:11:20,440 --> 00:11:23,170
lyömällä Anna vähintään tai klikkaamalla painiketta?

198
00:11:23,170 --> 00:11:26,830
Kuten olet nähnyt niitä toistaiseksi, sinun todella täytyy klikkaa Submit tekemään niitä asioita.

199
00:11:26,830 --> 00:11:30,090
>> Mutta kuten Tommy näyttää toiseen, on todella miten voit

200
00:11:30,090 --> 00:11:33,010
sellainen, että kun napsautat että asia se voi automaattisesti lähettää

201
00:11:33,010 --> 00:11:38,840
mitä kutsumme AJAX pyynnöstä saada tiedot takaisin ja suodattaa tulokset välittömästi.

202
00:11:38,840 --> 00:11:41,340
On tonnia asioita, jotka ovat väärin tämän rajapinnan.

203
00:11:41,340 --> 00:11:43,530
[Malan] Voitteko etsiä Cambridge?

204
00:11:43,530 --> 00:11:47,030
Siinä on jotain hieman epätavallista täällä missä välität Cambridge

205
00:11:47,030 --> 00:11:54,790
ja silti olet saada Westford, Spring Hill, West Newton ja vastaavat.

206
00:11:54,790 --> 00:11:57,930
Luultavasti ei ole ihanteellinen. >> Luultavasti ei ole ihanteellinen.

207
00:11:57,930 --> 00:12:03,900
Kuinka saattaisin pystyä tekemään käyttäjän kokemuksia paremmin tässä sivulla?

208
00:12:03,900 --> 00:12:07,340
Kyllä. >> [Opiskelija] Ohjeet.

209
00:12:07,340 --> 00:12:09,500
Okei. Ohjeet millaisia ​​järkeä?

210
00:12:09,500 --> 00:12:14,630
[Opiskelija] Esimerkiksi asia ensimmäistä kertaa käyttäjille, jotka eivät edes tiedä mitä Craigslist on

211
00:12:14,630 --> 00:12:17,320
tai et tiedä mitä sinun pitäisi tehdä.

212
00:12:17,320 --> 00:12:20,150
Oikea. Joten selittää mitä craigslist on tällä sivulla on tärkeää.

213
00:12:20,150 --> 00:12:23,490
Voimme todella sanoa käyttäjille, mitä tämä sivu on oikeastaan.

214
00:12:23,490 --> 00:12:27,090
Jos olen vain käymässä tässä, näen koko joukko paikkoja. En edes tiedä, mitä ne tarkoittavat.

215
00:12:27,090 --> 00:12:29,730
Mutta mikä tärkeintä, vain katsomalla tämän rajapinnan,

216
00:12:29,730 --> 00:12:35,530
Muistan piti selaa ton asioita löytää tietty yhteisö

217
00:12:35,530 --> 00:12:37,560
että olen oikeastaan ​​välittänyt tästä.

218
00:12:37,560 --> 00:12:39,820
Mikä nopeampi tapa voisin tehdä? Kyllä.

219
00:12:39,820 --> 00:12:43,290
[Opiskelija] jakaa ne osaksi itään, länteen alueilla. >> Okei.

220
00:12:43,290 --> 00:12:47,460
Voisin jakaa ne kategoriat, jotka voisivat auttaa minua nopeammin määrittämään

221
00:12:47,460 --> 00:12:49,820
miten saada tähän kohteeseen.

222
00:12:49,820 --> 00:12:54,510
[Opiskelija] Laita pudotusvalikosta. >> Oikea. Okei.

223
00:12:54,510 --> 00:12:58,240
Voisin käyttää pudotusvalikosta koska meillä on kiinteä joukko asioita

224
00:12:58,240 --> 00:13:00,100
ja voisimme näyttää niitä pudotusvalikosta.

225
00:13:00,100 --> 00:13:02,240
Näin se ei vie niin paljon tilaa ruudulla.

226
00:13:02,240 --> 00:13:05,630
Mutta vielä parempaa, mitä voimme tehdä?

227
00:13:05,630 --> 00:13:09,220
Kyllä. >> [Äänetön opiskelijan vastausta] >> Voitteko sanoa uudestaan? >> [Opiskelija] hakukenttään.

228
00:13:09,220 --> 00:13:11,260
Joo, hakukenttä. Se on hienoa.

229
00:13:11,260 --> 00:13:16,430
Mitä voimme itse tehdä on, jos me katsomme taaksepäin dioja, hakukenttä.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Erittäin helppo tapa etsiä tuloksia, jotka tiedät ovat asetettu.

231
00:13:21,520 --> 00:13:25,980
Jos aloitan kirjoittamisen BO, vain näytä kaikki tulokset ovat BO sisällä niitä.

232
00:13:25,980 --> 00:13:29,030
Näin voin helposti löytää erityisesti yhden haluan mennä

233
00:13:29,030 --> 00:13:32,390
sijaan, voit selata tämän todella iso lista.

234
00:13:32,390 --> 00:13:37,450
>> Nämä ovat kaikenlaisia ​​todella matalalla roikkuvat hedelmät että joku toteuttaa Craigslist

235
00:13:37,450 --> 00:13:42,500
voi itse tehdä, jotta kokemus verkkosivuilla paljon paremmin heidän tietylle käyttäjälle.

236
00:13:42,500 --> 00:13:46,370
Okei. Tarpeeksi puhu huono verkkosivustoja.

237
00:13:46,370 --> 00:13:49,410
Puhutaanpa Facebook.

238
00:13:50,880 --> 00:13:54,390
Kun Facebook tuli ulos, ja erityisesti Facebook-valokuvia,

239
00:13:54,390 --> 00:13:57,870
siellä oli paljon muita palveluita hetkellä joka voisi tehdä täsmälleen samoja asioita.

240
00:13:57,870 --> 00:14:00,740
Ne voisivat järjestää valokuvia albumeihin.

241
00:14:00,740 --> 00:14:03,360
Mitä voisit tehdä, on voisit järjestää ne ryhmiksi samoin.

242
00:14:03,360 --> 00:14:06,070
Voit järjestää ne päivämäärän. Voisit tehdä kaikki nämä erityisesti asiat.

243
00:14:06,070 --> 00:14:11,710
Mutta ei kukaan tiedä, mitä tehdä Facebook-valokuvia räjähtää kun se julkaistiin?

244
00:14:11,710 --> 00:14:15,080
Kyllä. >> [Opiskelija] Tags. >> Tags. Aivan.

245
00:14:15,080 --> 00:14:21,300
Meillä on Milo täällä, joka on meidän koira maskotti kanssa CS50 huivi.

246
00:14:21,300 --> 00:14:24,810
Voit nähdä, että meillä on tämä koodaus ominaisuus keskellä.

247
00:14:24,810 --> 00:14:28,240
Ja mitä teki Facebook kuvia niin mielenkiintoinen käytettävyyden kannalta

248
00:14:28,240 --> 00:14:34,130
on, että se todella saa ihmiset tätä kautta ottamaan heidän ystäviään kuviaan.

249
00:14:34,130 --> 00:14:37,680
Facebook, koska niiden verkkosivuilla on erityisen sosiaalinen,

250
00:14:37,680 --> 00:14:40,750
se on noin rakentaa tällaista sosiaalisen ilmapiirin.

251
00:14:40,750 --> 00:14:42,620
Että paransi kokemusta valokuvia paljon enemmän

252
00:14:42,620 --> 00:14:46,390
koska he voisivat itse aloittaa sanomalla: "Nämä ovat ihmisten välisiä yhteyksiä,

253
00:14:46,390 --> 00:14:49,220
ja nämä ovat kuvia ihmisistä sinä todella välität. "

254
00:14:49,220 --> 00:14:52,200
Osa on myös eräänlainen narsismi.

255
00:14:52,200 --> 00:14:54,980
Ihmiset haluavat tulla nimetyksi kuvia ja tuollaista.

256
00:14:54,980 --> 00:14:58,510
Vaikka tämä ei ole välttämättä hyvä ihmisen piirre,

257
00:14:58,510 --> 00:15:01,910
Samalla se perustuu hyvään suunnitteluun päätöksistä

258
00:15:01,910 --> 00:15:04,860
koska ihmiset todella kiinnostaa asioita, kuten tämä.

259
00:15:04,860 --> 00:15:07,190
Joten se Facebook-valokuvia.

260
00:15:07,190 --> 00:15:09,800
>> Mutta puhutaanpa Facebook yleisemmin.

261
00:15:09,800 --> 00:15:13,400
Olen varma paljon ihmisiä täällä on mielipiteitä Facebook,

262
00:15:13,400 --> 00:15:16,430
sekä hyvä suunnittelu päätöksistä ja huonosta suunnittelusta päätöksiä.

263
00:15:16,430 --> 00:15:20,270
Joten purkaa tai olla onnellinen.

264
00:15:23,480 --> 00:15:26,450
Tule. Tiedän kaikki käytät Facebook.

265
00:15:26,450 --> 00:15:30,970
Jonkun täytyy olla jotain pahaa sanottavaa tai jotain hyvää sanottavaa. Kyllä.

266
00:15:30,970 --> 00:15:35,060
[Opiskelija] Vuonna uutisvirrasta siellä on paljon asioita, joita en oikeasti välitä.

267
00:15:35,060 --> 00:15:37,740
Uutissyötteen ei näytä paljon asioita et ehkä välitä.

268
00:15:37,740 --> 00:15:41,660
Sinulla on ystäviä Facebookissa joka et ole tavannut 2 tai 3 vuotta

269
00:15:41,660 --> 00:15:43,860
ja näet heidän uutistulokset avautumisen teidän uutissyöte

270
00:15:43,860 --> 00:15:45,870
ja et todellakaan välitä siitä.

271
00:15:45,870 --> 00:15:48,700
Facebook on todella pyrkinyt tekemään tämän paremmin,

272
00:15:48,700 --> 00:15:53,150
ja he todella yrittivät työntää asianmukaisia ​​tuloksia alkuun uutissyötteen kuin myöhään

273
00:15:53,150 --> 00:15:58,300
joten voit itse nähdä mitä ystävät, jotka ovat merkityksellisiä sinulle tai läheisiä ystäviä.

274
00:15:58,300 --> 00:16:01,110
Mitään muuta? Kyllä.

275
00:16:01,110 --> 00:16:06,400
[Äänetön opiskelija vastausta] >> Voitteko sanoa uudestaan?

276
00:16:06,400 --> 00:16:10,140
[Opiskelija] mainokset ovat melko huomaamattomia. >> Missä mielessä?

277
00:16:10,140 --> 00:16:16,370
[Äänetön opiskelija vastausta] Heillä ei ole valoa ruudulla, kuten bannereita.

278
00:16:16,370 --> 00:16:17,760
Okei. Se on hyvä.

279
00:16:17,760 --> 00:16:25,030
Jos muistat Internetin 90-luvun - >> [Malan] olin siellä. >> Hän oli siellä. [Naurua]

280
00:16:25,030 --> 00:16:29,210
Muistatte ehkä vilkkuu GIF taustat, sparkly asioita,

281
00:16:29,210 --> 00:16:31,570
GeoCities tyyli tavallaan asioita.

282
00:16:31,570 --> 00:16:34,080
Se ei todellakaan ole esimerkki hyvän suunnittelun

283
00:16:34,080 --> 00:16:36,690
koska se on todella häiritsevää sisällöstä.

284
00:16:36,690 --> 00:16:39,590
Yale art verkkosivuilla käytetään olla animoituja GIF niiden taustalla

285
00:16:39,590 --> 00:16:41,800
ja et voinut lukea mitään sivulla,

286
00:16:41,800 --> 00:16:44,870
mutta kai joku todella puhui heille ja nyt se on hieman erilainen.

287
00:16:44,870 --> 00:16:48,940
[Malan] Se on paljon parempi nyt. >> Se on paljon parempi nyt, kuten näette. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Aivan loistava, vain - Joo. Okei.

289
00:16:56,020 --> 00:17:00,560
>> Osa on myös tehden sivulla mahdollisesti hyvin minimalistinen ja erittäin ymmärrettävää

290
00:17:00,560 --> 00:17:05,690
joten asiat sivulla virtauksen tavalla, joka on hyvin looginen ja ei saada tavalla toisistaan.

291
00:17:05,690 --> 00:17:11,849
Millaisia ​​muita asioita ovat hyviä noin Facebookissa tai huonoa Facebook?

292
00:17:11,849 --> 00:17:15,730
Mennään vain muotoilu keskustelua täällä.

293
00:17:19,470 --> 00:17:21,339
Oh. Minne? Joo.

294
00:17:21,339 --> 00:17:25,640
[Opiskelija] Uusi Aikajana järjestelmän avulla voit etsiä henkilön profiilia menneisyydestään.

295
00:17:25,640 --> 00:17:28,119
Ooh, Aikajana.

296
00:17:28,119 --> 00:17:30,280
Aikajana on hyvä asia, koska sen avulla voit väijyä ystävillesi

297
00:17:30,280 --> 00:17:33,300
takaisin, kun ne olivat lukiossa.

298
00:17:35,160 --> 00:17:38,060
Aikajana on hyvä, koska sen avulla voit suodattaa läpi sisältöä paljon nopeammin,

299
00:17:38,060 --> 00:17:41,500
sen avulla voit löytää asioita, jotka olisivat muuten vienyt todella kauan löytää

300
00:17:41,500 --> 00:17:45,840
vain rullata ylös ja alas, ylös, ylös, ylös, ylös, ylös, kuin mennä ajassa taaksepäin.

301
00:17:45,840 --> 00:17:48,910
Mutta sitten on myös eräänlainen haittapuoli, että mitä käyttökokemuksen.

302
00:17:48,910 --> 00:17:51,190
Mikä se voisi olla?

303
00:17:51,190 --> 00:17:56,780
Iso sana, joka alkaa P-R. >> [Opiskelija] Yksityisyys. >> Privacy, eikö?

304
00:17:56,780 --> 00:17:59,970
Yksityisyys on valtava käyttökokemuksen ongelman.

305
00:17:59,970 --> 00:18:07,190
Tämä on yksi niistä asioista, inhoan eniten Facebook nyt. [Naurua]

306
00:18:07,190 --> 00:18:09,000
[Malan] Kuten minulla nyt.

307
00:18:09,000 --> 00:18:11,380
David ei ymmärrä tätä todella tapahtunut vasta eilen.

308
00:18:11,380 --> 00:18:14,560
Joten nyt hän tietää, että joka kerta kun chat hänelle Tiedän, että hän on ollut piittaamatta minua.

309
00:18:14,560 --> 00:18:16,880
[Malan] hankala osa oli minulle todella välittämättä hänestä,

310
00:18:16,880 --> 00:18:21,040
enkä tiennyt hän tiesi minun välittämättä hänestä. [Naurua]

311
00:18:21,040 --> 00:18:24,030
Yksityisyys on valtava ongelma.

312
00:18:24,030 --> 00:18:28,670
Voiko joku täällä kertoa minulle, mitä voisi olla huonoa Facebook yksityisyys

313
00:18:28,670 --> 00:18:32,270
Sen lisäksi, että he tekevät asioita, kuten tämä?

314
00:18:32,270 --> 00:18:37,240
Mikä on se erityisen vaikea tehdä suhteen Facebook yksityisyyttä?

315
00:18:37,240 --> 00:18:40,340
Että sellainen on johtava kysymys.

316
00:18:41,680 --> 00:18:43,930
Kyllä. >> [Opiskelija] Piilota kuviasi tietyt ihmiset.

317
00:18:43,930 --> 00:18:46,170
Oikea. Aivan, piilottaa valokuvia tietyiltä henkilöiltä.

318
00:18:46,170 --> 00:18:51,290
Heillä on pieni, vähän painiketta oikeassa yläkulmassa, jonka avulla voit vaihtaa yksityisyyden kuva.

319
00:18:51,290 --> 00:18:56,360
Yksityisyyttään vaihtoehdot hyvin vaihteli erilaisia ​​valikoita.

320
00:18:56,360 --> 00:18:59,510
>> He ovat saaneet paljon paremmin siitä hiljattain, mutta sitä käytetään silloin,

321
00:18:59,510 --> 00:19:04,870
että aina kun halusi estää ystävillesi näkemästä kuvia,

322
00:19:04,870 --> 00:19:08,280
sinun pitäisi mennä läpi hyvin monimutkainen 5-askeleelta prosessi on kuin,

323
00:19:08,280 --> 00:19:11,150
Saanen klikkaa tätä linkkiä, nyt haluan napsauta uudelleen, saanen valitse uudelleen

324
00:19:11,150 --> 00:19:13,420
Saanen mitkä ihmiset eivät näe kuvia.

325
00:19:13,420 --> 00:19:17,250
Se ei ole erityisen hyvä Facebookissa puolelta

326
00:19:17,250 --> 00:19:20,530
koska niin paljon käyttökokemus on todella heille vapauden

327
00:19:20,530 --> 00:19:22,460
valvoa, mitä ihmiset näkevät.

328
00:19:22,460 --> 00:19:25,550
Kutsumme tätä käyttäjän kontrolli ja vapaus.

329
00:19:25,550 --> 00:19:31,090
Jos et kerroit käyttäjät tehdä tavalla, joka on tehokas ja intuitiivinen,

330
00:19:31,090 --> 00:19:34,570
Sitten käyttökokemusta ei ole kovinkaan suurta ollenkaan.

331
00:19:34,570 --> 00:19:38,200
 Olisiko teillä sanoa mitään Facebook?

332
00:19:38,700 --> 00:19:41,420
Miten poistan tämän käytöstä?

333
00:19:41,420 --> 00:19:46,290
[Ong] ei voi kytkeä tämän pois, ja se on valtava käytettävyys virhe puolelta Facebook.

334
00:19:46,290 --> 00:19:49,410
Tämä ominaisuus - Olen itse tutkinut sitä eilen -

335
00:19:49,410 --> 00:19:53,940
se on joko, että et voi tehdä sitä tai se on haudattu jonnekin hyvin, hyvin syvällä

336
00:19:53,940 --> 00:19:58,050
syvennyksiin Facebook koska en voi selvittää, miten poistaa tämän toiminnon ollenkaan.

337
00:19:58,050 --> 00:20:00,400
[Malan] Mutta joskus nämä päätökset eivät ole ilmeisiä

338
00:20:00,400 --> 00:20:03,890
koska te olette antanut meille paljon hyödyllistä palautetta eri CS50 sovelluksiin

339
00:20:03,890 --> 00:20:05,710
ja sivustot, käyttää tietysti.

340
00:20:05,710 --> 00:20:10,260
Emme ole toteuttanut kaikkia näitä pyyntöjä ja ehdotuksia.

341
00:20:10,260 --> 00:20:14,550
>> Osa, joka on saada niin paljon pyytää, että se on ajan funktiona,

342
00:20:14,550 --> 00:20:17,070
mutta joskus me vain tehdä tietoisen päätöksen kaltainen,

343
00:20:17,070 --> 00:20:19,830
"Kiitos ehdotuksesta, mutta emme hyväksy."

344
00:20:19,830 --> 00:20:24,350
Joten miten voit itse päättää, mitä sinun pitäisi tehdä, jos käyttäjät ajattelevat sinun pitäisi tehdä jotain

345
00:20:24,350 --> 00:20:28,110
vaikka et välttämättä?

346
00:20:28,110 --> 00:20:32,360
Se on hieno tasapaino todella kuunnella mitä käyttäjät sanovat

347
00:20:32,360 --> 00:20:35,840
ja todella ottaa jonkinlainen linja, jossa sanot,

348
00:20:35,840 --> 00:20:37,750
"Emme aio tehdä mitä nämä käyttäjät sanovat."

349
00:20:37,750 --> 00:20:42,520
Ja erityisesti, mielestäni oli lainaus Henry Ford, joka summaa tähän asti melko hyvin.

350
00:20:42,520 --> 00:20:47,130
"Jos olisin pyytänyt ihmisiä mitä he halusivat, he olisivat sanoneet haluavansa nopeammin hevosia."

351
00:20:47,130 --> 00:20:51,840
Voiko kukaan tavallaan erottaa toisistaan, mitä tämä lainaus todella tarkoittaa?

352
00:20:51,840 --> 00:20:56,060
Kyse ei ole vain siitä, että käyttäjät tietävät, mitä he haluavat,

353
00:20:56,060 --> 00:20:59,180
mutta se on enemmän kuin -

354
00:20:59,180 --> 00:21:02,720
[Opiskelija] He eivät tiedä, mitä on mahdollista.

355
00:21:02,720 --> 00:21:06,140
Osittain he eivät tiedä, mikä on mahdollista.

356
00:21:07,880 --> 00:21:11,440
Tease että toisistaan ​​hieman. Mitä tarkoitat?

357
00:21:11,440 --> 00:21:21,340
[Äänetön opiskelija vastausta]

358
00:21:21,340 --> 00:21:25,770
Se on hyvä. Mielestäni yritämme sanoa on, että ihmiset tietävät, mitä he haluavat.

359
00:21:25,770 --> 00:21:28,050
He haluavat nopeammin hevosia.

360
00:21:28,050 --> 00:21:29,840
Mitä he todella haluavat on kyky liikkua nopeammin,

361
00:21:29,840 --> 00:21:32,310
mutta he eivät todellakaan tiedä keskipitkällä jonka saavuttamiseksi.

362
00:21:32,310 --> 00:21:36,330
Kun tulet käyttäjät ja käyttäjät kertovat jotain

363
00:21:36,330 --> 00:21:39,700
ja he kertovat teille, "Haluamme näitä ominaisuuksia ja näitä ominaisuuksia ja näitä ominaisuuksia"

364
00:21:39,700 --> 00:21:42,650
et halua välttämättä ajatella, "Anna minun mennä eteenpäin

365
00:21:42,650 --> 00:21:44,720
"Ja toteuttaa mitä he nimenomaan sanovat,"

366
00:21:44,720 --> 00:21:48,610
mutta mitä haluat ajatella on, "Millaisia ​​ajatuksia saan tuosta?"

367
00:21:48,610 --> 00:21:50,450
Mitä he oikeastaan ​​haluavat?

368
00:21:50,450 --> 00:21:55,560
>> Ja sieltä mitä voit tehdä on suunnitella jotain, joka täyttää nämä pyynnöt

369
00:21:55,560 --> 00:22:00,340
mutta ei välttämättä niin, että käyttäjä odottaa, että se täyttyy.

370
00:22:00,340 --> 00:22:03,830
Joten jotain lopullista hankkeita, hyvin reaalisesti

371
00:22:03,830 --> 00:22:07,900
mitä hyötyä heuristista kun ruvetaan tekemään jotain parempaa,

372
00:22:07,900 --> 00:22:10,630
varsinkin jos suunnittelija on tämä ylimielisyys hänestä

373
00:22:10,630 --> 00:22:14,360
jolloin te tavallaan tietää, mikä on parasta, saatat ottaa panosta käyttäjille,

374
00:22:14,360 --> 00:22:16,580
mutta miten te todella mennä noin saada että palautetta?

375
00:22:16,580 --> 00:22:21,610
Vuonna opinnäytetyöt hyvin konkreettisesti, mitä tuottaa parhaat tulokset täällä?

376
00:22:21,610 --> 00:22:25,030
Mikä tuottaa optimaaliset tulokset - ja aion mennä yli tämän toisessa -

377
00:22:25,030 --> 00:22:29,190
tämä kehittämässä ja sitten testaamalla ja sitten iteroimalla.

378
00:22:29,190 --> 00:22:32,020
Mitä tarkoitan testaus on yleensä kun suunnittelet jotain

379
00:22:32,020 --> 00:22:36,970
luulet se on melko hyvä, kuten "olen niin hyvä suunnittelija. Jokaisella on menossa rakastamaan tätä."

380
00:22:36,970 --> 00:22:41,600
Ja sitten laitat sen siellä ja ihmiset eivät todellakaan pidä siitä jostain syystä.

381
00:22:41,600 --> 00:22:46,820
Mitä sinun täytyy tehdä, on sinun täytyy ottaa osaa asioita, joita ihmiset tekevät kuten

382
00:22:46,820 --> 00:22:49,180
ja uudistaa asioita, joita ihmiset eivät pidä.

383
00:22:49,180 --> 00:22:53,080
Se kuulostaa hyvin ilmeinen prosessi, mutta tämä prosessi jatkuvasti iteroimalla

384
00:22:53,080 --> 00:22:55,980
päälle mitä olet jo rakentanut on prosessi, joka auttaa sinua

385
00:22:55,980 --> 00:22:59,730
ei vain tarkentaa oman suunnittelun taitoja, mutta myös auttaa sinua tarkentaa suunnittelun

386
00:22:59,730 --> 00:23:03,790
niin että ihmiset todella arvostavat tuotteen vieläkin kuin ennen.

387
00:23:03,790 --> 00:23:07,390
>> Menen aikana enemmän konkreettisia esimerkkejä, mitä voisi itse tehdä.

388
00:23:07,390 --> 00:23:11,390
Koska tavallaan viimeinen esimerkki tuotteesta, katsotaanpa KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK kun se tuli ulos oli erittäin suosittu.

390
00:23:14,970 --> 00:23:18,760
Voiko kukaan arvata miksi?

391
00:23:18,760 --> 00:23:20,950
Mitkä ovat monenlaisia ​​asioita pidät tästä, jos olet käyttänyt sitä

392
00:23:20,950 --> 00:23:23,990
tai mitä ovat monenlaisia ​​asioita et pidä?

393
00:23:23,990 --> 00:23:31,590
Kyllä. >> [Äänetön opiskelijan vastausta] >> Okei.

394
00:23:31,590 --> 00:23:34,730
Se on osa sitä kerroit käyttäjä on kysely, joka on entistä monimuotoisempaa

395
00:23:34,730 --> 00:23:38,150
kuin hyvin rajoittava yhden samankaltaisen, "Sinun täytyy valita aloituspäivä

396
00:23:38,150 --> 00:23:39,810
"Ja sinun täytyy valita oman päättymispäivää."

397
00:23:39,810 --> 00:23:44,910
Itse asiassa se voit olla joustava siitä ja se antaa sinulle kaikki lennot tällä alueella.

398
00:23:44,910 --> 00:23:46,730
Mitään muuta?

399
00:23:46,730 --> 00:23:50,530
[Opiskelija] Ne sisältävät maksut hintaan.

400
00:23:50,530 --> 00:23:53,330
He tekevät ovat maksuja hinnan.

401
00:23:53,330 --> 00:23:56,720
Verot ja asiat todellisuudessa menevät suoraan että hinta vasemmassa yläkulmassa

402
00:23:56,720 --> 00:24:00,710
joten et huijata luulemaan, että olet itse maksaa 240 dollaria lento

403
00:24:00,710 --> 00:24:03,280
kun se on todella 330 dollaria.

404
00:24:03,280 --> 00:24:06,200
Mitään muuta? Kyllä.

405
00:24:06,200 --> 00:24:10,140
[Äänetön opiskelija vastausta]

406
00:24:10,140 --> 00:24:14,610
En ole varma, jos he itse voit tehdä.

407
00:24:14,610 --> 00:24:18,310
Saatan olla väärässä.

408
00:24:18,310 --> 00:24:23,360
Se voisi olla mielenkiintoista jos haluat laittaa enemmän painoa erityisesti suodattimien

409
00:24:23,360 --> 00:24:27,000
niin, että se työntää liittyvät tulokset, että suodatin alkuun.

410
00:24:27,000 --> 00:24:31,920
Mutta voiko joku kertoa minulle mikä on niin erikoista tässä vasemmalla puolella?

411
00:24:31,920 --> 00:24:39,540
Miten te perinteisesti etsiä lennon Internetissä ennen tämän?

412
00:24:41,600 --> 00:24:44,650
>> Kyllä. >> [Äänetön opiskelijan vastausta] >> Voitteko sanoa, että -

413
00:24:44,650 --> 00:24:47,530
[Opiskelija] Kukin lentoyhtiö. >> Joo. Kukin lentoyhtiö on omat verkkosivut.

414
00:24:47,530 --> 00:24:50,110
Tämä vahvistaa asiaa. Ja?

415
00:24:50,110 --> 00:24:52,190
[Opiskelija] Tiedät tarkalleen mihin aikaan olet lähdössä.

416
00:24:52,190 --> 00:24:54,460
Et tiedä tarkalleen mihin aikaan olet lähdössä,

417
00:24:54,460 --> 00:24:59,380
mutta jotka liittyvät erityisesti suodattimien.

418
00:25:00,710 --> 00:25:03,540
Saanen vetää ylös KAYAK.

419
00:25:11,490 --> 00:25:14,020
Oi Jumala, pop-ups. Huonon käyttökokemuksen.

420
00:25:14,020 --> 00:25:17,230
Mitä tapahtuu kun siirrän tätä liukusäädintä?

421
00:25:17,230 --> 00:25:21,010
[Opiskelija] Automaattiset päivitykset. >> [Ong] Automaattiset päivitykset.

422
00:25:21,010 --> 00:25:23,440
Se on jotain, joka on hyvin tärkeää.

423
00:25:23,440 --> 00:25:25,380
Ennen tätä, aina kun halusi etsiä lennon,

424
00:25:25,380 --> 00:25:28,410
sinun piti laittaa syöttää paikkaan, oman tuotannon sijaintiin, paina Etsi-

425
00:25:28,410 --> 00:25:31,190
se käsittelee sen ja näyttää tulokset.

426
00:25:31,190 --> 00:25:34,120
Jos haluat muuttaa hakua, sinun pitäisi painaa kahdesti,

427
00:25:34,120 --> 00:25:39,770
syöttää uuden kyselyn tyhjästä, ja sitten tehdä se uudestaan ​​ja uudestaan.

428
00:25:39,770 --> 00:25:43,910
Kiva juttu jotain tästä on se käyttää hyvin [käsittämättömällä] juttu keskellä.

429
00:25:43,910 --> 00:25:46,230
Aina, kun teet jotain tällaista, se ampuu pois pyyntö

430
00:25:46,230 --> 00:25:48,420
ja se palaa teille kaikki tulokset välittömästi.

431
00:25:48,420 --> 00:25:51,680
Tällainen välitön palaute on jotakin, joka sai KAYAK hurjan suosittu

432
00:25:51,680 --> 00:25:55,910
koska se on todella helppoa minulle vain muuttaa kyselyä

433
00:25:55,910 --> 00:25:58,890
ja selvittää asioita, jotka ovat noin erityinen alue

434
00:25:58,890 --> 00:26:01,950
ilman mennä edestakaisin, edestakaisin, edestakaisin.

435
00:26:01,950 --> 00:26:05,200
Nämä ovat siis kaikenlaisia ​​asioita haluat ajatella, kun olet suunnitella sivuston.

436
00:26:05,200 --> 00:26:08,930
Miten voin tehdä sitä hyvin suorituskykyisenä minun käyttäjille käydä läpi mitä he työskentelevät

437
00:26:08,930 --> 00:26:13,010
ja saada heidän Perimmäisenä tavoitteena mahdollisimman nopeasti?

438
00:26:13,010 --> 00:26:16,430
[Malan] Ja Joosefin kohtaan aiemmin käyttäjistä ei välttämättä tiedä, mitä he haluavat,

439
00:26:16,430 --> 00:26:18,640
perusteella, mitä te nyt tietää HTML

440
00:26:18,640 --> 00:26:22,780
ja olet valintaruudut, valintapainikkeet, valitse valikot, syöttökenttien ja vastaavat,

441
00:26:22,780 --> 00:26:26,140
Miten toteuttaisit käsite poiminta aloitusaika lennon?

442
00:26:26,140 --> 00:26:30,030
>> Mitkä näistä eri UI mekanismien käytät?

443
00:26:30,030 --> 00:26:34,100
Jos vain tiedät määrää HTML opetettiin ennen

444
00:26:34,100 --> 00:26:39,070
ja tiedät tulot ovat radion painikkeita, valintaruutuja, avattavia ja syötekentästä

445
00:26:39,070 --> 00:26:43,320
mitä teidän luonnollinen valinta on poiminta päivämääriä?

446
00:26:43,320 --> 00:26:48,670
[Opiskelija] Input. >> Input. Tai ehkä jopa avattavan kaikkien päivämääriä, eikö?

447
00:26:48,670 --> 00:26:53,170
Joten monimutkaisempia UI mekanismeja näin vasemmalla puolella, että voit toteuttaa,

448
00:26:53,170 --> 00:26:55,500
voit tehdä tämän prosessin paljon enemmän intuitiivinen kanssa liukusäädintä

449
00:26:55,500 --> 00:27:01,020
koska aika on jatkuva, ja ihmiset eivät yleensä ajattele sitä kannalta diskreetti paloina.

450
00:27:01,020 --> 00:27:04,950
Selvä. Viimeinen asia.

451
00:27:04,950 --> 00:27:07,370
Kymmenen käytettävyyden heuristiikkaa.

452
00:27:07,370 --> 00:27:10,820
Kaikki asiat puhuimme luultavasti kuulu johonkin näistä luokista.

453
00:27:10,820 --> 00:27:14,420
Jos menet tätä linkkiä, joka sivustojen lähetetty verkossa,

454
00:27:14,420 --> 00:27:18,900
voit itse pystyä, sillä voit suunnitella sivuston, pitää nämä heuristiikka mielessä

455
00:27:18,900 --> 00:27:21,330
ja nämä nyrkkisäännöt.

456
00:27:21,330 --> 00:27:26,610
Projekteihin, mitä ehdotan teet voidakseen suunnitella app paremmin

457
00:27:26,610 --> 00:27:28,850
on tehdä paperia prototyyppien ensin.

458
00:27:28,850 --> 00:27:32,150
Kun olet ajatellut hakemuksesi, nopeasti hahmotella mitä haluat näyttää

459
00:27:32,150 --> 00:27:36,230
ja varmista, että kaikki laatikot on järjestetty siten, että se on erittäin intuitiivinen, että käyttäjä käyttää

460
00:27:36,230 --> 00:27:39,820
ja jopa näyttää nämä paperille prototyyppejä ystävillesi ja aloita kohderyhmiä.

461
00:27:39,820 --> 00:27:44,230
Hommaa 2 tai 3 ihmiset yhteen ja pyytää heitä juuri kosketa näitä paperille prototyyppejä,

462
00:27:44,230 --> 00:27:47,650
ja näyttää heille uusia näyttöjä nähdä, jos he todella ymmärtävät, mitä on tekeillä.

463
00:27:47,650 --> 00:27:50,680
>> Mitä haluat tehdä, on antaa heille tehtävän, motivoida tähän tehtävään,

464
00:27:50,680 --> 00:27:53,270
ja vain antaa heille sovellus ja anna heidän käyttää sitä.

465
00:27:53,270 --> 00:27:56,530
Älä anna heille ohjeita pidemmälle.

466
00:27:56,530 --> 00:28:00,920
Haluat todella antaa heidän olla vuorovaikutuksessa teidän app niin, että näet

467
00:28:00,920 --> 00:28:03,870
kuinka he käyttävät sitä, jos et ole seisoi vieressä.

468
00:28:03,870 --> 00:28:05,250
Ja se on erittäin tärkeää.

469
00:28:05,250 --> 00:28:08,780
Se antaa sinulle paljon oivalluksia siitä ovat ihmisiä liikkuminen erityisesti asioita

470
00:28:08,780 --> 00:28:10,560
siten, että en aio niitä?

471
00:28:10,560 --> 00:28:14,680
Ovatko he käyttävät erityisesti UI mekanismeja ruudulla

472
00:28:14,680 --> 00:28:17,490
tavalla, joka on eräänlainen hacky?

473
00:28:17,490 --> 00:28:22,020
En aio niitä tehdä niin.

474
00:28:22,020 --> 00:28:23,940
Ja kun olet tehnyt, että mitä haluat tehdä?

475
00:28:23,940 --> 00:28:26,010
Suunnittelua kiviä, eikö?

476
00:28:26,010 --> 00:28:29,600
Mitä haluat tehdä on haluat kehittää ja tehdä prosessi uudestaan.

477
00:28:29,600 --> 00:28:32,110
Joten näyttää sen ystäville kun olet kehittänyt sitä, testata sitä,

478
00:28:32,110 --> 00:28:36,630
kehittää, testata, kehittää, testata, toistaa, ja jatkuu ja eteenpäin.

479
00:28:36,630 --> 00:28:39,720
Muotoilu on hyvin iteratiivinen prosessi tässä mielessä.

480
00:28:39,720 --> 00:28:43,280
Sinulla on todellakin rakentaa jotain ja sitten ymmärtää asioita siitä

481
00:28:43,280 --> 00:28:46,520
että et tiennyt ennen ja mennä takaisin ja parantaa tuosta.

482
00:28:46,520 --> 00:28:50,890
Nyt, kuten kehityksen osa, sitähän Tommy on menossa näyttämään tauon jälkeen

483
00:28:50,890 --> 00:28:53,220
ja miten voit ehkä toteuttaa jotain autocomplete

484
00:28:53,220 --> 00:28:56,610
tavalla, joka on melko yksinkertainen.

485
00:28:57,440 --> 00:28:59,550
[Malan] Kuten Tommy perustaa tänne, kysymys sitten.

486
00:28:59,550 --> 00:29:03,780
Paljon pian sivustot - ja kun Joosef sanoi 1990 tyyli verkkosivuilla,

487
00:29:03,780 --> 00:29:07,640
se oli toteutuksia missä jos halusi valita alkamisaika ja päättymisaika,

488
00:29:07,640 --> 00:29:10,380
rehellisesti, takaisin päivän ja jopa joitakin sivustoja tänään,

489
00:29:10,380 --> 00:29:13,220
miten teet tämän on nostat tunti avattavasta

490
00:29:13,220 --> 00:29:15,910
nostat minuuttia avattavasta, ehkä voit valita AM, PM,

491
00:29:15,910 --> 00:29:17,440
ja sitten tehdä vielä 3 kertaa.

492
00:29:17,440 --> 00:29:19,920
Ja niin 6 napsautuksia ja ehkä vieritys

493
00:29:19,920 --> 00:29:24,000
käyttäjän voi todella tarjota jonkinlaista päivämäärä ja / tai aika-alue tässä mielessä.

494
00:29:24,000 --> 00:29:27,920
>> Niin varmasti optimaalinen ja vielä toistaiseksi olemme nähneet mitään ilmeikäs ominaisuuksia

495
00:29:27,920 --> 00:29:30,330
jollakin kielellä teimme tehdä jotain seksikkäämpää

496
00:29:30,330 --> 00:29:32,620
näin liukusäätimellä alkamisaika ja päättymisaika.

497
00:29:32,620 --> 00:29:36,290
Mutta jos luulet takaisin viikon 0, kun puhuimme Scratch,

498
00:29:36,290 --> 00:29:39,080
siellä ei ollut widgetit vain teki tiettyjä asioita.

499
00:29:39,080 --> 00:29:42,700
Olet todella vain oli nämä perustekijät kuten silmukoita ja edellytykset ja vastaavat.

500
00:29:42,700 --> 00:29:46,910
Eli tavallaan vain ajatella hyvin abstraktisti nyt riippumaton tiedot HTML,

501
00:29:46,910 --> 00:29:51,260
Mitä todella tapahtuu jotain tällaista alkamisaika ja päättymisaika liukusäädintä?

502
00:29:51,260 --> 00:29:54,960
Kun voin siirtää hiirtä ja osoitan, että pieni porkkana symboli vasemmalla

503
00:29:54,960 --> 00:29:59,220
ja aloita vetäminen, ohjelmallisesti, mitä sinä haluat pystyä toteuttamaan

504
00:29:59,220 --> 00:30:01,000
tehdä tämän tapahtua?

505
00:30:01,000 --> 00:30:04,920
Mitä kysymyksiä, mitä Boolen haluat pystyä kysymään?

506
00:30:04,920 --> 00:30:06,930
Mitä todella tapahtuu? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Opiskelija] Missä kursorin paikan? >> Hyvä. Missä on kursorin paikan?

508
00:30:10,080 --> 00:30:11,970
Tämä oli jotain meidän piti ilmaista takaisin Scratch,

509
00:30:11,970 --> 00:30:14,690
onko se perustuu sijaintiin tai jopa väri tai vastaava.

510
00:30:14,690 --> 00:30:18,410
Saatat muistaa koskaan niin lyhyesti maanantaina oli kaikki nämä asiat nimeltään tapahtumia

511
00:30:18,410 --> 00:30:22,370
maailmassa Web, joten siellä on asioita, kuten onclick ja onkeypress

512
00:30:22,370 --> 00:30:25,960
ja onkeyup ja onmouseover ja onmouseout.

513
00:30:25,960 --> 00:30:29,130
Niin ymmärtää, että vaikka nämä asiat olemme ottaneet itsestäänselvyytenä Webissä

514
00:30:29,130 --> 00:30:32,190
kanssa sivustot kuten Facebook ja Gmail, vaikka sinulla ei ole aavistustakaan

515
00:30:32,190 --> 00:30:34,890
miten olisi mahdollisesti toteuttaa, että koska ei ole mitään edes pidä sitä luento

516
00:30:34,890 --> 00:30:38,570
tai Harjoitus 7, ymmärtää, että juuri nämä samat perusteet,

517
00:30:38,570 --> 00:30:41,090
HTTP ja parametrit ja GET ja POST,

518
00:30:41,090 --> 00:30:44,010
kanssa HTML tuotantopanosten teimme tähän asti

519
00:30:44,010 --> 00:30:47,690
ja hetki ohjelmallisen mekanismit Tommyn ottamassa käyttöön

520
00:30:47,690 --> 00:30:51,300
voit alkaa ilmaista itseäsi aivan kuten teit viikolla 0

521
00:30:51,300 --> 00:30:53,800
by hyvin intuitiivisesti vetämällä ja pudottamalla.

522
00:30:53,800 --> 00:30:58,950
>> Niin, että sanoi, Tommy MacWilliam ja uusia palapelin palaset meidän Web.

523
00:30:58,950 --> 00:31:03,450
Selvä. Nimeni on Tommy ja aion puhua JavaScript.

524
00:31:03,450 --> 00:31:07,150
Vain Disclaimer: Olen sitä mieltä, että JavaScript on paras ohjelmointikieli

525
00:31:07,150 --> 00:31:09,010
koko koko maailma.

526
00:31:09,010 --> 00:31:11,940
On olemassa paljon ihmisiä, jotka ovat eri mieltä kanssani, mutta se on mahtavaa.

527
00:31:11,940 --> 00:31:16,330
Kun palaat C, jos sinulla on kirjoittaa C toisen luokan tai joillakin muilla kielillä,

528
00:31:16,330 --> 00:31:19,780
se on vain todella turhauttavaa kaikissa matalan tason yksityiskohdat sinun täytyy juuttua tuumaa

529
00:31:19,780 --> 00:31:23,050
Joten jos olet joskus surullinen siitä, kuinka ärsyttävää C kirjoittaa,

530
00:31:23,050 --> 00:31:25,130
vain mennä takaisin, kirjoittamaan JavaScript. Se on nirvana.

531
00:31:25,130 --> 00:31:27,980
Tunnet paljon paremmin about your huono päivä.

532
00:31:27,980 --> 00:31:31,900
Paljon taika JavaScript on sen kyky manipuloida asioita

533
00:31:31,900 --> 00:31:33,730
jotka ovat jo sivulla.

534
00:31:33,730 --> 00:31:38,520
Kun me kirjoitimme PHP-skriptit, he teloitettiin palvelimelle,

535
00:31:38,520 --> 00:31:42,270
ja lopulta, että PHP script luultavasti tulostaa joitakin HTML.

536
00:31:42,270 --> 00:31:45,860
Tämä HTML lähetettiin asiakkaalle, ja sitten se oli siinä.

537
00:31:45,860 --> 00:31:50,180
Jos PHP halusi lisätä painike sivulle, esimerkiksi, ei todellakaan voi tehdä sitä.

538
00:31:50,180 --> 00:31:54,350
Se olisi tehdä kokonaan uuden HTML-tiedoston ja lähettää sen selaimelle.

539
00:31:54,350 --> 00:31:57,840
JavaScript me tiedämme, että voimme päivittää asioita, kun he ovat jo sivulla,

540
00:31:57,840 --> 00:32:00,840
ja tämän vuoksi voimme tarjota paljon enemmän välitöntä palautetta,

541
00:32:00,840 --> 00:32:06,150
joka todella parantaa käyttäjäkokemusta sivuillamme.

542
00:32:06,150 --> 00:32:09,330
Vain nopea kertaus JavaScript valitsimia.

543
00:32:09,330 --> 00:32:11,590
Tiedämme, että kun me ladata HTML-sivu,

544
00:32:11,590 --> 00:32:13,890
että tulee olemaan edustettuna DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM muistakaa vain tämä iso puu, jossa elementit liittyvät tässä suuressa hierarkiassa.

546
00:32:19,340 --> 00:32:21,810
Kun me työskennelleet tietokantojen PSET 7,

547
00:32:21,810 --> 00:32:26,280
yksi ensimmäisiä asioita, joita tarvitaan tietää miten oli kyselyn tietokantaan.

548
00:32:26,280 --> 00:32:29,060
Meillä on tämä suuri käyttäjiä pöytä, ja joskus me vain haluamme sanoa,

549
00:32:29,060 --> 00:32:33,260
"Haluan vain joitakin näistä käyttäjistä, jotka vastaavat joidenkin kunnossa."

550
00:32:33,260 --> 00:32:36,020
Samoin kun meillä DOM tarvitsemme jotenkin istä sitä.

551
00:32:36,020 --> 00:32:39,490
Tarvitsemme tapa sanoa, "Haluan kaikki painikkeet, jotka näyttävät tältä

552
00:32:39,490 --> 00:32:41,860
"Tai kaikki sivulla olevat kuvat."

553
00:32:41,860 --> 00:32:44,330
Ja nämä valitsimet antaa meille mahdollisuuden tehdä niin.

554
00:32:44,330 --> 00:32:45,690
Joten nopea kertaus.

555
00:32:45,690 --> 00:32:50,770
Tämä ensimmäinen täällä, tämä # esittää, mitä se aikoo valita? Muistaako kukaan?

556
00:32:50,770 --> 00:32:54,880
[Äänetön opiskelija vastausta] >> Aivan.

557
00:32:54,880 --> 00:32:59,510
Tämä tulee valita elementti sivun on ID lähetä.

558
00:32:59,510 --> 00:33:03,470
Ja jotta hash tag sanoo valitsin tulee työskennellä tunnukset.

559
00:33:03,470 --> 00:33:07,630
Entä toinen, tämä. Centered, mitä se valita?

560
00:33:11,360 --> 00:33:15,180
Joo. >> [Opiskelija] Class. >> Aivan. Tämä on nyt menossa valitse luokittain.

561
00:33:15,180 --> 00:33:18,840
Ero ID ja luokka tässä on yleensä tunnus on oltava ainutkertainen

562
00:33:18,840 --> 00:33:20,820
sisällä mitä tilaa etsit yli.

563
00:33:20,820 --> 00:33:23,080
Joten jos olit etsivät yli koko sivun,

564
00:33:23,080 --> 00:33:27,740
sinun todella pitäisi olla vain 1 elementti, että tietyt ID, joten tässä tapauksessa esittää.

565
00:33:27,740 --> 00:33:31,330
Oppilasryhmien kanssa, toisaalta, meillä voi olla enemmän kuin 1 elementti samalla sivulla

566
00:33:31,330 --> 00:33:33,130
kanssa samaan luokkaan.

567
00:33:33,130 --> 00:33:36,580
Tämä voi olla hyödyllistä sanoa haluan valita kaiken, mitä keskittynyt sivulla

568
00:33:36,580 --> 00:33:38,450
eikä vain 1 juttu.

569
00:33:38,450 --> 00:33:40,310
>> Ja lopuksi, tämä viimeisin täällä on hieman monimutkaisempi,

570
00:33:40,310 --> 00:33:43,890
mutta mitä tämä aikoo valita DOM?

571
00:33:46,650 --> 00:33:48,810
[Äänetön opiskelija vastausta] >> Mikä tuo on?

572
00:33:48,810 --> 00:33:53,250
[Opiskelija] Kaikki se tag. >> Meillä on 2 osaa täällä.

573
00:33:53,250 --> 00:33:58,070
Toinen osa on menossa sanoa haluan valita nämä tunnisteet tunnisteen panos,

574
00:33:58,070 --> 00:34:00,730
joten kaikki elementin, joka on tulo tag.

575
00:34:00,730 --> 00:34:03,080
Mutta en halua vain valita kaikki tulot

576
00:34:03,080 --> 00:34:05,170
koska jotain submit-painike voisi syöttää

577
00:34:05,170 --> 00:34:08,409
ja jotain tekstikenttään voisi syöttää.

578
00:34:08,409 --> 00:34:11,909
Joten nämä hakasulkeilla sanon haluan vain valita niistä

579
00:34:11,909 --> 00:34:14,110
jotka ovat tyyppiä tekstiä.

580
00:34:14,110 --> 00:34:17,400
Jossain minun HTML tag olen määreen tyyppiä,

581
00:34:17,400 --> 00:34:19,750
ja arvo, joka ominaisuus on tekstiä.

582
00:34:19,750 --> 00:34:21,340
Joten miten tästä ensimmäisen osan tänne?

583
00:34:21,340 --> 00:34:25,489
Ensimmäinen sana Tämän valitsimen on lomake sitten on tilaa ja sitten tämän tulon osasta.

584
00:34:25,489 --> 00:34:29,620
Mitä tämä tehdä, mikä muoto sen edessä?

585
00:34:33,409 --> 00:34:35,860
Tämä tulee periaatteessa rajoittaa meidän kyselyn.

586
00:34:35,860 --> 00:34:38,510
Se voisi olla, että meillä on joitakin tuloja sivulla

587
00:34:38,510 --> 00:34:41,080
jotka eivät ole jälkeläisiä muodossa.

588
00:34:41,080 --> 00:34:46,150
Mitä tämä tekee tämä sanovat Haluan vain tulo tageja, jotka ovat jossain niiden yläpuolella

589
00:34:46,150 --> 00:34:49,030
jotkut vanhemman elementti muodossa.

590
00:34:49,030 --> 00:34:52,100
Ja niin tällä tavoin voimme tehdä näitä lisää hierarkkinen kyselyt

591
00:34:52,100 --> 00:34:55,000
joten meidän ei vain tarvitse valita kaiken vastaavat tietyn valitsin.

592
00:34:55,000 --> 00:35:00,760
Voimme tavallaan rajoittaa tämän kyselyn jotain muuta.

593
00:35:00,760 --> 00:35:04,000
Joten nyt me tiedämme, miten valita elementtejä sivulla,

594
00:35:04,000 --> 00:35:06,780
Puhutaanpa vähän siitä AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX on edelleen erittäin trendikäs lyhenne, joka tulee sanoista Asynchronous JavaScript ja XML.

596
00:35:12,270 --> 00:35:15,640
Se vain on niin, että XML on vain jotenkin edustamaan tietoihin.

597
00:35:15,640 --> 00:35:20,920
>> Sellainen menettänyt suosiotaan viime aikoina, joten X AJAX ei käytetä koko ajan.

598
00:35:20,920 --> 00:35:26,220
Periaatteessa, mitä AJAX voimme tehdä, on tehdä HTTP-pyyntöjä

599
00:35:26,220 --> 00:35:28,620
kontekstista JavaScript.

600
00:35:28,620 --> 00:35:32,310
Kun olemme meidän selain ja olemme navigointia sivuilla ja me sitten linkkiä,

601
00:35:32,310 --> 00:35:37,790
mitä selainta aikoo tehdä, on HTTP-pyynnön tahansa linkin me sitten.

602
00:35:37,790 --> 00:35:41,670
Mutta se ei ole aina ihanteellinen, sillä jos näin on, niin kuin Daavid sanoi,

603
00:35:41,670 --> 00:35:45,220
meidän on aina tehtävä käyttäjä napsauttaa Lähetä-painiketta tai napsauttamalla linkkiä

604
00:35:45,220 --> 00:35:50,380
jotta jotain tapahtuisi että menee ottamaan HTTP-pyynnön.

605
00:35:50,380 --> 00:35:54,160
Joten AJAX voimme tehdä näitä pyyntöjä puolesta JavaScript.

606
00:35:54,160 --> 00:35:57,020
Tämä tarkoittaa aina käyttäjän vuorovaikutuksessa sivun tai jotain tapahtuu,

607
00:35:57,020 --> 00:36:01,780
voimme itse tehdä ohjelmallista pyynnön jonkin muun PHP tiedosto sivuillamme

608
00:36:01,780 --> 00:36:06,280
tai jotain muuta ja hakea tietoja, että tiedosto sylkee.

609
00:36:06,280 --> 00:36:09,860
Katsotaanpa katsomaan esimerkki AJAX.

610
00:36:09,860 --> 00:36:16,140
Tämä on meidän CS50 Finance sivu joka toivottavasti jotkut meistä ovat tuttuja.

611
00:36:16,140 --> 00:36:21,790
Jos katsomme HTML Tämän sivun näemme täällä, että olen lisännyt muutamia asioita,

612
00:36:21,790 --> 00:36:23,820
joista olen antanut tämän lomakkeen tunnus.

613
00:36:23,820 --> 00:36:26,480
Olen sanonut id = "muoto-lainaus".

614
00:36:26,480 --> 00:36:31,910
Olen tehnyt tämän vain koska se tulee tehdä tästä hieman helpompi valita DOM

615
00:36:31,910 --> 00:36:35,090
sillä voin vain tehdä hyvin yksinkertainen kysely.

616
00:36:35,090 --> 00:36:38,960
Mitä haluan tehdä tässä haluan korjata joitakin ongelmia CS50 Finance.

617
00:36:38,960 --> 00:36:41,550
Joten jos menemme finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
aina kun haluan saada lainaan, minun täytyy sitten tätä Get Quote,

619
00:36:45,700 --> 00:36:48,960
ja että Get Quote sitten vie minut toiseen koko sivun.

620
00:36:48,960 --> 00:36:52,400
Ja jos haluan toisen lainaan, minun täytyy lyödä takaisin-painiketta ja sitten kirjoita se,

621
00:36:52,400 --> 00:36:54,480
Saan lainaan, ja osuin Back-painiketta.

622
00:36:54,480 --> 00:36:56,840
Tämä ei todellakaan ole paras käyttäjäkokemus.

623
00:36:56,840 --> 00:37:01,570
Kuka oikeastaan ​​käyttää sivustoa, jos se on niin hidas saada osakekursseja?

624
00:37:01,570 --> 00:37:05,630
Joten mitä me haluamme tehdä AJAX on poistaa se vaihe menossa erilliselle sivulle

625
00:37:05,630 --> 00:37:08,410
jotta nähdäksesi tulokset.

626
00:37:08,410 --> 00:37:11,240
>> Mitä me oikeastaan ​​vain pyytävät on todella pieni hinta,

627
00:37:11,240 --> 00:37:14,240
ja se on vain todella pieni määrä dataa.

628
00:37:14,240 --> 00:37:17,400
Joten ei tarvitse minun mennä toiseen koko HTML-sivun

629
00:37:17,400 --> 00:37:20,670
lataa kokonaan uuden erän HTML, ehkä ladata joitakin kuvia,

630
00:37:20,670 --> 00:37:24,410
joitakin muita CSS-tiedostoja vain minun vastata tähän hyvin yksinkertaiseen kysymykseen

631
00:37:24,410 --> 00:37:27,810
kuinka paljon tämä varastossa kustannukset.

632
00:37:27,810 --> 00:37:31,000
AJAX voimme tehdä tästä paljon helpompaa.

633
00:37:31,000 --> 00:37:36,400
Näemme täällä, että olen linkittämisen JavaScript-tiedoston nimeltä quote.js.

634
00:37:36,400 --> 00:37:40,140
Katsotaanpa todella avata tiedoston. Ei sinne.

635
00:37:42,610 --> 00:37:45,860
Kaikki minun JavaScript-tiedostot aiotaan sijaitsevat HTML

636
00:37:45,860 --> 00:37:47,630
jotta selain voi käyttää sitä.

637
00:37:47,630 --> 00:37:50,330
Sitten meillä on erillinen hakemisto täällä JavaScript,

638
00:37:50,330 --> 00:37:54,340
ja nyt on quote.js.

639
00:37:54,340 --> 00:38:00,930
Ylimpänä tämän tiedoston tämä sanoo, että haluan odottaa koko sivu voidaan ladata

640
00:38:00,930 --> 00:38:04,830
ennen Yritän tehdä mitään. Miksi se välttämätöntä?

641
00:38:04,830 --> 00:38:08,650
On käynyt ilmi, että seuraava asia aion tehdä tässä alkaa etsiä elementti

642
00:38:08,650 --> 00:38:10,810
joka vastaa joidenkin valitsin.

643
00:38:10,810 --> 00:38:15,600
Jos tämä JavaScript on koskaan tehty ennen tämän elementti on ladattu sivulle,

644
00:38:15,600 --> 00:38:17,820
Sitten kaiken yritän tehdä ei tule toimimaan

645
00:38:17,820 --> 00:38:20,580
koska aion yrittää valita jotain, joka ei ole siellä vielä.

646
00:38:20,580 --> 00:38:23,780
Joten tämä rivi ylös sanoo Haluan odottaa kunnes kaikki on ladattu

647
00:38:23,780 --> 00:38:28,030
joten olemme taata, että kaikki elementit Etsin todella sivulla.

648
00:38:29,730 --> 00:38:34,310
Tämä dollarimerkki tarkoittaa tässä Käytän kirjastoa nimeltään jQuery.

649
00:38:34,310 --> 00:38:38,570
Tämä jQuery kirjastoa ansiosta voimme käyttää näitä valitsimia että me vain katsoin.

650
00:38:38,570 --> 00:38:44,010
Sanomalla $ sitten kulkee niin argumentti tämä # form-lainaus,

651
00:38:44,010 --> 00:38:47,910
Olen nyt valita, että muoto, että me vain vei katsomaan.

652
00:38:47,910 --> 00:38:52,290
Nyt minulla on edustus kyseisessä muodossa muistiin jotenkin.

653
00:38:52,290 --> 00:38:56,760
>> Tämän objektin nyt, tämä esitys muodossa,

654
00:38:56,760 --> 00:38:58,890
Olen nyt käyttää toimintoa kehotti.

655
00:38:58,890 --> 00:39:02,710
Mitä tämä toiminto ei se aikoo liittää tapahtumakäsittelijän.

656
00:39:02,710 --> 00:39:06,310
Jos aiomme kuunnella on submit tapahtuma.

657
00:39:06,310 --> 00:39:08,890
Joten kun käyttäjä napsauttaa että Lähetä-painiketta tai painaa Enter,

658
00:39:08,890 --> 00:39:11,730
Tämä tapahtuma on menossa ampumaan.

659
00:39:11,730 --> 00:39:16,390
Koukkaaminen tähän, voin nyt ohittaa oletusarvoisesti muotoa.

660
00:39:16,390 --> 00:39:19,770
Ilman tätä JavaScript, muoto olisi toimitettava tahansa PHP-tiedoston

661
00:39:19,770 --> 00:39:22,110
käytimme että toiminta määrite.

662
00:39:22,110 --> 00:39:25,440
Mutta sen sijaan, olen nyt sanoa, odota, odota, odota, en halua sinun todella tehdä.

663
00:39:25,440 --> 00:39:31,140
Haluan tämän tapahtuvan ennen lähtöä, ja yrittää esittää joitakin PHP-tiedosto.

664
00:39:31,140 --> 00:39:32,870
Nyt mitä haluan tehdä?

665
00:39:32,870 --> 00:39:39,270
Tässä vaiheessa haluan käyttää AJAX jotenkin ladata missä hinta varastossa on.

666
00:39:39,270 --> 00:39:44,170
Ensimmäinen asia minun täytyy tietää mitä varastossa käyttäjä etsii.

667
00:39:44,170 --> 00:39:46,760
Voit tehdä, että aion käyttää toista valitsin.

668
00:39:46,760 --> 00:39:49,020
Tämä on kolmas valitsin tarkastelimme ennen.

669
00:39:49,020 --> 00:39:54,460
Tämä sanoo, että haluan aloittaa tämän lomakkeen elementin ID muodon-lainaus.

670
00:39:54,460 --> 00:39:58,440
Sitten jossain sisällä, jotka muodostavat siellä on oltava syöttöosassa

671
00:39:58,440 --> 00:40:01,270
että on nimi symbolin.

672
00:40:01,270 --> 00:40:05,460
Jos katsomme taaksepäin meidän HTML, näimme, että meillä oli input [name = symbol].

673
00:40:05,460 --> 00:40:12,380
Tämä tarkoittaa, että tämä tulee valita, että tekstikehys että käyttäjä on kirjoittaa osaksi.

674
00:40:12,380 --> 00:40:13,870
Se on mukavaa. Meillä tekstikenttään.

675
00:40:13,870 --> 00:40:17,360
Nyt meidän täytyy vain tietää mitä sen sisälle.

676
00:40:17,360 --> 00:40:20,290
Voit tehdä, että me voimme kutsua tätä menetelmää täällä, tässä. Val-

677
00:40:20,290 --> 00:40:23,240
ja tämä sanoo tiedän mitä tekstikenttään olet.

678
00:40:23,240 --> 00:40:28,160
Haluan sinun kertovan minulle, mitä se on käyttäjä kirjoittaa tuohon tekstikenttään.

679
00:40:28,160 --> 00:40:34,440
Nyt meillä on merkkijono kutsutaan symboli, joka on yhtä suuri riippumatta käyttäjä kirjoittaa sisään

680
00:40:34,440 --> 00:40:39,820
Se on mukavaa. Voimme käyttää merkkijonon nyt tekevät pyynnöstä.

681
00:40:39,820 --> 00:40:42,450
Tämä on uusi toiminto, tällä $,

682
00:40:42,450 --> 00:40:44,900
paitsi me enää olemaan valittaessa elementtejä,

683
00:40:44,900 --> 00:40:48,910
aiomme olla kutsumassa eri funktio, joka on toimitettu meille jQuery.

684
00:40:48,910 --> 00:40:54,810
Tämä AJAX toiminto on mitä todella aikoo tehdä tämän HTTP-pyyntöön.

685
00:40:54,810 --> 00:40:57,000
Joten meidän on sanottava niin muutamia asioita.

686
00:40:57,000 --> 00:41:01,410
Ensimmäinen asia, joka meidän täytyy kertoa tämä toiminto on, jos haluan pyynnön mennä.

687
00:41:01,410 --> 00:41:08,910
Jossain projektin olen tämän tiedoston sisällä HTML hakemistoon quote.php.

688
00:41:08,910 --> 00:41:15,150
Voin käyttää tätä tiedostoa, näimme, aivan kuten tämä, jos menen localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Haluan JavaScript esittää pyynnön, että sivulle.

690
00:41:20,450 --> 00:41:22,920
Millaista pyynnön nyt?

691
00:41:22,920 --> 00:41:27,210
Näimme ennen lomakkeen on, että menetelmä = "post"-määrite,

692
00:41:27,210 --> 00:41:29,270
ja se tarkoittaa sitä tulee tehdä POST pyynnön,

693
00:41:29,270 --> 00:41:32,630
joten se ei tule laittaa mitään URL, eikä GET-pyyntöä,

694
00:41:32,630 --> 00:41:36,860
joka olisi vain potkut, jos me vain pääsee sivulle selaimen, esimerkiksi.

695
00:41:36,860 --> 00:41:41,260
Nyt olemme sanoneet Haluan tehdä HTTP POST pyyntö

696
00:41:41,260 --> 00:41:44,840
sivulle, joka sijaitsee quote.php.

697
00:41:44,840 --> 00:41:51,490
Kun lähetät lomakkeen, muista voisimme käyttää tulo Sisällä tämän lomakkeen

698
00:41:51,490 --> 00:41:54,430
kanssa, että $ _POST muuttuja.

699
00:41:54,430 --> 00:41:58,710
Toistaiseksi tarina emme ole lähettänyt pitkin mitään tietoja vielä.

700
00:41:58,710 --> 00:42:00,640
Olemme juuri sanoi Teemme AJAX pyyntö

701
00:42:00,640 --> 00:42:03,200
ja tässä on pyynnön tyyppi Teemme.

702
00:42:03,200 --> 00:42:07,090
Nyt meidän on todella lähettää joitakin tietoja sivulle.

703
00:42:07,090 --> 00:42:10,930
Voit tehdä, että voimme käyttää tätä ominaisuutta kutsutaan tietoja.

704
00:42:10,930 --> 00:42:14,950
Tämän ominaisuuden arvo on todella assosiatiivinen array.

705
00:42:14,950 --> 00:42:19,390
Syynä tähän on se antaa meille mahdollisuuden lähettää enemmän kuin vain 1 datalohko.

706
00:42:19,390 --> 00:42:24,750
Siksi meillä on nämä aaltosulkeita täällä sisäkkäin näistä muista aaltosulkeita.

707
00:42:24,750 --> 00:42:29,680
Avaimet näitä assosiatiiviset taulukot tulevat olemaan sama asia

708
00:42:29,680 --> 00:42:32,630
kuin nimi määritteitä meidän lomake-elementtejä.

709
00:42:32,630 --> 00:42:35,740
Tämä tarkoittaa, että jos lähetän pitkin keskeinen symboli,

710
00:42:35,740 --> 00:42:41,870
Tämä tarkoittaa minun PHP-sivu voi käyttää näitä tietoja $ _POST [symbol]

711
00:42:41,870 --> 00:42:44,640
aivan kuten teimme ennen kun olimme lähettämällä lomake.

712
00:42:44,640 --> 00:42:47,090
Ja nyt varsinainen data haluamme lähettää

713
00:42:47,090 --> 00:42:50,790
tulee olemaan arvo sisäosat assosiatiivisia array.

714
00:42:50,790 --> 00:42:54,070
>> Me varastoidaan tätä tekstiä muuttuja nimeltä symboli,

715
00:42:54,070 --> 00:42:57,380
ja niin me lähetämme pitkin nyt avain symboli

716
00:42:57,380 --> 00:43:01,380
ja arvo riippumatta käyttäjän kirjoitettu sisään

717
00:43:01,380 --> 00:43:06,270
Nyt olemme tehneet tämän HTTP-pyyntö, meidän PHP tiedosto on suoritettu,

718
00:43:06,270 --> 00:43:11,480
ja se tulee lähettää joitakin tietoja takaisin nyt asiakkaalle että juuri teki tämän pyynnön.

719
00:43:11,480 --> 00:43:15,220
Nyt meidän täytyy vastata mitä palvelimelle sanoi meille.

720
00:43:15,220 --> 00:43:20,180
Voit tehdä, että meillä on tämä viimeinen omaisuuden täällä kutsutaan menestystä.

721
00:43:20,180 --> 00:43:24,240
Arvo Menestyksen avain on todellakin olemaan funktio,

722
00:43:24,240 --> 00:43:26,910
ja tämä on yksi todella hienoja asioita voit tehdä JavaScript.

723
00:43:26,910 --> 00:43:31,720
Ei vain voit olla ints tai taulukoita arvona sisällä assosiatiivisia array,

724
00:43:31,720 --> 00:43:34,170
voimme myös olla toiminto.

725
00:43:34,170 --> 00:43:36,380
Joten sanomalla menestys, tämä on minun avain.

726
00:43:36,380 --> 00:43:38,830
Kaksoispiste sanoo tässä tulee arvo

727
00:43:38,830 --> 00:43:41,810
ja nyt arvo on itse asiassa funktio.

728
00:43:41,810 --> 00:43:44,460
Joten meidän ei tarvitse antaa tämän toiminnon nimi sinänsä.

729
00:43:44,460 --> 00:43:48,820
Voimme vain sanoa tämä tulee olemaan jokin funktio. Se tulee ottaa 1 väitettä.

730
00:43:48,820 --> 00:43:51,190
Argumentti tämä toiminto tulee olemaan

731
00:43:51,190 --> 00:43:54,460
mitä palvelin lähetti meidät takaisin pyynnön.

732
00:43:54,460 --> 00:43:57,750
Aivan kuten kun meidän selain tekee pyynnön, palvelin lähettää jotain takaisin

733
00:43:57,750 --> 00:43:59,060
ja selain näyttää sen,

734
00:43:59,060 --> 00:44:03,030
yhteydessä AJAX me vain teki pyynnön, palvelin lähetti jotain takaisin,

735
00:44:03,030 --> 00:44:07,110
ja nyt olemme, että edustettuina merkkijono.

736
00:44:07,110 --> 00:44:11,280
Kanssa, että merkkijono haluan näyttää, että sivulla.

737
00:44:11,280 --> 00:44:14,040
Voit tehdä, että aion olla viimeinen valitsin.

738
00:44:14,040 --> 00:44:17,570
Haluan valita elementti tunnus hintaan.

739
00:44:17,570 --> 00:44:20,710
Tämä on vain tyhjä div, että olen luonut sivun,

740
00:44:20,710 --> 00:44:26,640
ja haluan asettaa sisällön jotka div olla mitä palvelin lähetti meidät takaisin.

741
00:44:26,640 --> 00:44:30,280
Olen oikeastaan ​​muutettu quote.php hieman.

742
00:44:30,280 --> 00:44:33,460
>> Sen sijaan kutsuvan render ja tekee jonkin sivun,

743
00:44:33,460 --> 00:44:38,100
quote.php nyt yksinkertaisesti menossa tulostaa arvon kalustoon merkkijono.

744
00:44:38,100 --> 00:44:41,880
Joten jos olit todella käydä sivulla, voit vain nähdä, että pienet merkkijono

745
00:44:41,880 --> 00:44:45,030
riippumatta osakekurssi on.

746
00:44:45,030 --> 00:44:50,170
Viimeinen asia, meidän täytyy tehdä tässä vain varmista tämä funktio palauttaa false.

747
00:44:50,170 --> 00:44:53,560
Mitä tämä kertoo, että jos olen sisällä tapahtumakäsittelijän

748
00:44:53,560 --> 00:44:57,300
ja että tapahtumakäsittely palauttaa false sijaan palata totta,

749
00:44:57,300 --> 00:45:01,510
tämä tarkoittaa, että en halua alkuperäisen tapahtuman tuleen.

750
00:45:01,510 --> 00:45:05,270
Tässä tapauksessa, jos meillä ei ole JavaScript ja esitimme muodossa,

751
00:45:05,270 --> 00:45:08,280
Web-selain on menossa sanoa, "Minä aion lähettää että tiedot yhdessä"

752
00:45:08,280 --> 00:45:10,130
ja he aikovat lähettää sinut toiselle sivulle.

753
00:45:10,130 --> 00:45:14,360
Koska me AJAX nyt ei tarvitse lähettää käyttäjän toiselle sivulle.

754
00:45:14,360 --> 00:45:17,920
Olemme juuri menossa näyttämään tulokset dynaamisesti tällä samalla sivulla.

755
00:45:17,920 --> 00:45:21,460
Emme todellakaan halua niitä lähteä minnekään, ja haluan pysyä samalla sivulla.

756
00:45:21,460 --> 00:45:27,060
Joten palauttamalla vääriä, voimme varmistaa, että lomake ei tee sitä meille.

757
00:45:27,060 --> 00:45:31,170
Katsotaanpa katsomaan mitä tämä todella näyttää.

758
00:45:31,170 --> 00:45:34,180
Meidän quote sivu näyttää samalta.

759
00:45:34,180 --> 00:45:37,240
Saanen vedä tarkastaja täällä, jotta voimme nähdä, mitä on tekeillä.

760
00:45:37,240 --> 00:45:40,270
Tee se hieman vähemmän valtava.

761
00:45:40,270 --> 00:45:44,590
Muista, jos avaamme Verkko-välilehti, tämä on jossa voimme nähdä kaikki HTTP-pyyntöjä

762
00:45:44,590 --> 00:45:47,570
joita tapahtuu sivulla.

763
00:45:47,570 --> 00:45:52,890
>> Saat tunnuksen haluan kirjoittaa AAPL ja napsauta Hae Quote.

764
00:45:52,890 --> 00:45:56,720
Nyt näimme, että osa Apple maksaa noin monta dollaria

765
00:45:56,720 --> 00:46:00,410
Juuri ilmestynyt sivulla, mutta URL ei muutu lainkaan.

766
00:46:00,410 --> 00:46:04,570
Itse asiassa tässä on HTTP-pyynnön, että me juuri tehty.

767
00:46:04,570 --> 00:46:09,980
Teimme POST pyynnön quote.php. Siinä on järkeä.

768
00:46:09,980 --> 00:46:12,800
Tämä on mitä palvelin lähetti meidät takaisin.

769
00:46:12,800 --> 00:46:16,320
Se ei ole enää tätä valtavaa HTML dokumentti kuvineen ja tuollaista,

770
00:46:16,320 --> 00:46:20,920
se on vain rivi tekstiä, ja sitten me vain näkyy rivi tekstiä.

771
00:46:20,920 --> 00:46:26,290
Jos menemme takaisin otsikot ja mitä me oikeastaan ​​lähetti sisäosat HTTP-pyynnön,

772
00:46:26,290 --> 00:46:33,950
voimme nähdä, alas, että me lähetetään pitkin avaimen symboli ja arvo AAPL,

773
00:46:33,950 --> 00:46:36,430
joka on mitä käyttäjä kirjoittaa sisään

774
00:46:36,430 --> 00:46:39,230
Tämä on mukavaa, mutta se on silti vähän harmittaa.

775
00:46:39,230 --> 00:46:42,490
Olen vielä napsauttaa tätä painiketta saat osakenoteeraus.

776
00:46:42,490 --> 00:46:45,880
Olemme kiireisiä ihmisiä ja meillä ei ole aikaa napsauttaa painikkeita.

777
00:46:45,880 --> 00:46:49,910
Google ymmärsi tämän vähän aikaa sitten, kun ne toteutetaan Google Instant.

778
00:46:49,910 --> 00:46:53,590
Mitä Google Instant ei on kuin kirjoitat se vain alkaa näyttämään tulokset sinulle

779
00:46:53,590 --> 00:46:56,520
joten sinun ei tarvitse huolehtia edes klikkaamalla Hae.

780
00:46:56,520 --> 00:46:58,730
Oikeastaan ​​hauska tarina liittyy siihen.

781
00:46:58,730 --> 00:47:01,100
Kun Google Instant tuli ulos, ihmiset olivat kuin, "Vau, tämä on super hämmästyttävä."

782
00:47:01,100 --> 00:47:02,540
"Tämä on niin siistiä."

783
00:47:02,540 --> 00:47:05,950
Ja opiskelija alas Stanford, joka oli 19 tuolloin

784
00:47:05,950 --> 00:47:09,000
teki tämän sivuston nimeltä YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Kaikki YouTube Instant ei tosiasiallisesti etsiä YouTube hetkessä.

786
00:47:13,170 --> 00:47:17,020
Joten sen sijaan mennä YouTube.com ja lyödä Search,

787
00:47:17,020 --> 00:47:21,650
kun alkaa kirjoittaa YouTubeen Instant jotain CS50,

788
00:47:21,650 --> 00:47:25,320
voisimme nähdä täällä, että se yrittää on hidas internet-yhteys

789
00:47:25,320 --> 00:47:28,500
asuttaa näitä tuloksia elää.

790
00:47:28,500 --> 00:47:35,590
Voit tehdä, että voimme itse tehdä hyvin yksinkertainen muutos meidän quote.js tiedostoon.

791
00:47:35,590 --> 00:47:40,900
Juuri nyt me liittää tähän tapahtumaan kun lomake lähetetään.

792
00:47:40,900 --> 00:47:43,760
Emme todellakaan halua tehdä käyttäjälle väittävät lomake enää,

793
00:47:43,760 --> 00:47:48,570
joten katsotaanpa sen sijaan ampua tämän tapahtuman aina käyttäjä painaa näppäintä.

794
00:47:48,570 --> 00:47:53,200
Voit tehdä sen Katsotaanpa ensin muuttaa tapahtuman esittää keyup.

795
00:47:53,200 --> 00:47:55,740
Tämä tarkoittaa, että sen sijaan odottaa lomakkeen esittämään

796
00:47:55,740 --> 00:47:58,490
joka kerta näppäintä painetaan, jotain tulee tapahtumaan.

797
00:47:58,490 --> 00:48:02,030
Se ei ole enää järkevää liittää nämä keyup tapahtuman koko lomakkeen.

798
00:48:02,030 --> 00:48:05,080
Meillä oikeastaan ​​vain välitä siitä hakukenttään.

799
00:48:05,080 --> 00:48:09,320
>> Voit valita, että nyt voimme muuttaa tämän olevan pikemminkin kuin muoto-lainaus,

800
00:48:09,320 --> 00:48:14,220
muoto-lainaan ja saamme tulo (type = text) tai voimme sanoa (nimi = symboli) -

801
00:48:14,220 --> 00:48:16,420
mitä me haluamme.

802
00:48:16,420 --> 00:48:18,650
Nyt on olemassa yksi asia meidän on tehtävä.

803
00:48:18,650 --> 00:48:21,190
Muista tänne kun sanoimme palauttaa false

804
00:48:21,190 --> 00:48:24,370
sanoimme emme halua, että maksukyvyttömyyden tuleen.

805
00:48:24,370 --> 00:48:26,390
Mutta se vain niin, että jos me poistaa nyt,

806
00:48:26,390 --> 00:48:29,660
mitä me kirjoittaa aio näy selaimessa enää

807
00:48:29,660 --> 00:48:33,000
koska se olisi oletustoimintaa kirjoittamalla osaksi tekstikenttään.

808
00:48:33,000 --> 00:48:38,660
Emme enää halua ohittaa, että niin katsotaanpa tuhota tätä paluuta väärä.

809
00:48:38,660 --> 00:48:44,800
Jos me paitsi että ja lataa sivu, nyt kun alat kirjoittaa AAPL

810
00:48:44,800 --> 00:48:50,160
näet, että osakekurssi alareunassa täällä loppuun automaattisesti.

811
00:48:50,160 --> 00:48:53,150
Joten tässä on CS50 Finance Instant.

812
00:48:53,150 --> 00:48:55,860
Oikeastaan ​​hauska tarina YouTube Instant

813
00:48:55,860 --> 00:48:59,420
on, että opiskelija juuri sellainen kirjoitti sen 1-yön projekti,

814
00:48:59,420 --> 00:49:03,800
ja seuraavana päivänä hän tarjosi työpaikka YouTube toimitusjohtaja.

815
00:49:03,800 --> 00:49:10,610
Niin yksinkertaista, te CS50 opiskelijoita, lopullinen hankkeet voivat saada sinut työtä YouTube.

816
00:49:10,610 --> 00:49:14,720
Jotain sellaista on todella viileä idea opinnäytetyön, eikö?

817
00:49:14,720 --> 00:49:18,170
Meillä oli joitakin nykyisiä toimintoja, että halusimme integroida.

818
00:49:18,170 --> 00:49:20,330
Parannamme käyttäjäkokemusta hieman,

819
00:49:20,330 --> 00:49:24,340
ja yhtäkkiä etsivät jotain YouTubessa Instant voisi olla paljon helpompaa

820
00:49:24,340 --> 00:49:27,290
kuin etsiä sitä säännöllisesti YouTube.

821
00:49:27,290 --> 00:49:30,790
Niin, että AJAX pähkinänkuoressa.

822
00:49:30,790 --> 00:49:34,860
>> Esimerkeissä että Joseph oli osoittaa, näimme paljon autocompletes,

823
00:49:34,860 --> 00:49:39,250
ja nuo autocompletes ovat todella kätevä, koska meidän ei tarvitse muistaa -

824
00:49:39,250 --> 00:49:41,770
Esimerkiksi, jos et muista osakekurssi Apple

825
00:49:41,770 --> 00:49:45,110
ja me vain tiedämme sen AA jotain, eikä vain sanoa minulle,

826
00:49:45,110 --> 00:49:48,740
"Osuus tästä juttu maksaa näin paljon rahaa"

827
00:49:48,740 --> 00:49:52,540
Olin tavallaan tietää mitä varastoja aloittaa aa.

828
00:49:52,540 --> 00:49:58,340
Voimme tehdä sen todella hienosti Bootstrap kirjasto, joka on jo sisällytetty

829
00:49:58,340 --> 00:50:01,380
sisällä CS50 Finance.

830
00:50:01,380 --> 00:50:09,390
Jos tulet tänne JavaScript tag ja selaa Typeahead,

831
00:50:09,390 --> 00:50:13,730
tämä on vain mukava plugin että joku jo kirjoitti meille,

832
00:50:13,730 --> 00:50:16,980
ja voimme helposti käyttää toimintoja tällä tavoin.

833
00:50:16,980 --> 00:50:21,410
Olen kirjoittanut ja tässä on luettelo joistakin todetaan alkavat A.

834
00:50:21,410 --> 00:50:25,360
Sanotaan, että tämä on mielestäni todella cool ja se on aika minun sisällyttää tämä sivuni.

835
00:50:25,360 --> 00:50:28,300
On käynyt ilmi, että tämä on todella, todella yksinkertaista.

836
00:50:28,300 --> 00:50:32,810
Mennään hypätä tänne quote3.js.

837
00:50:34,890 --> 00:50:37,380
My tiedosto näyttää hieman erilainen.

838
00:50:37,380 --> 00:50:39,700
Tänne kaikki minun AJAX kamaa on sama.

839
00:50:39,700 --> 00:50:43,170
Haluan ladata kantatietojen ilman mennä toiselle sivulle.

840
00:50:43,170 --> 00:50:46,220
Mutta nyt haluan käyttää tätä plugin.

841
00:50:46,220 --> 00:50:51,020
Bootstrap dokumentaatio on hyviä esimerkkejä siitä, miten tarkalleen voin tehdä sen.

842
00:50:51,020 --> 00:50:54,350
Haluan sanoa, "Tässä on tulon että haluan autocomplete päällä"

843
00:50:54,350 --> 00:50:56,640
ja aion kutsua tätä toimintoa kutsutaan typeahead,

844
00:50:56,640 --> 00:50:59,730
ja että menee hoitaa kaikki Typeahead tavaraa meille.

845
00:50:59,730 --> 00:51:02,090
Se alustaa listan, se tekee kaiken meidän suodatus.

846
00:51:02,090 --> 00:51:06,680
Ainoa asia, se täytyy tietää, mitä tietoja olemme autocompleting päälle.

847
00:51:06,680 --> 00:51:10,480
Löysin tätä näppäintä vain lukemalla asiakirjat ja katsot esimerkkejä.

848
00:51:10,480 --> 00:51:14,150
Jos annan sen avaimen lähteen, tämän avaimen arvo

849
00:51:14,150 --> 00:51:17,770
on vain muutamia erilaisia ​​asioita haluan autocomplete päälle.

850
00:51:17,770 --> 00:51:20,180
Tämä muuttuja tuli tästä muu tiedosto.

851
00:51:20,180 --> 00:51:23,400
En avaa symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Tämä symbols.js on vain tämä todella, todella iso joukko sisältävät merkkijonot

853
00:51:27,980 --> 00:51:32,080
Kaikkien näiden varastossa symboleja NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Jos haluan hypätä takaisin HTML, joten jharvard, vhosts, globalhost, html, malleja,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Koska tämä on nyt nimeltään quote3.js, haluan muuttaa JavaScript-tiedosto Olen myös täällä.

857
00:51:50,910 --> 00:51:55,110
Nyt minulla on quote3.js, joten aion ladata että erillisessä JavaScript-tiedoston,

858
00:51:55,110 --> 00:51:57,910
joka on joka Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Nyt kun hypätä takaisin selaimen, lataa sivun, ja aloitan kirjoittamalla aa,

860
00:52:04,430 --> 00:52:06,880
siellä minun autocomplete. Ja se oli todella niin yksinkertaista.

861
00:52:06,880 --> 00:52:11,400
Minulla oli 1 rivi koodia, joka juuri sanoi, "Tässä on asioita haluan autocomplete päällä"

862
00:52:11,400 --> 00:52:16,590
ja yhtäkkiä olen tästä todella, todella mukava toiminnallisuus ei paljon vaivaa ollenkaan.

863
00:52:16,590 --> 00:52:19,810
Kuten olet kehittää sivustoja ja varsinkin etupään puolta,

864
00:52:19,810 --> 00:52:21,840
olet menossa löytää näin on paljon.

865
00:52:21,840 --> 00:52:25,700
On paljon, paljon, paljon todella hienoja vapaata kirjastojen siellä

866
00:52:25,700 --> 00:52:30,190
joiden avulla on erittäin helppoa tehdä asioita, kuten tämä.

867
00:52:30,190 --> 00:52:37,230
Voiko kukaan ajatella mitään haittoja yksinkertaisesti autocompleting tässä suuri lista symbolit?

868
00:52:37,230 --> 00:52:41,580
Mikä voisi olla jotain, joka ei ole paras tätä lähestymistapaa?

869
00:52:42,790 --> 00:52:45,960
Joo. >> [Opiskelija] aika, jos sinulla on paljon [kuulumattomissa]

870
00:52:45,960 --> 00:52:50,420
Joo. Juuri nyt olemme lataat tämän valtavan JavaScript-tiedoston, ja siellä on paljon symboleja.

871
00:52:50,420 --> 00:52:54,360
Ja niin, jos meillä on tonneittain tavaraa, tämä voisi tavallaan lisätä latenssi paitsi hakuja

872
00:52:54,360 --> 00:52:56,600
mutta myös ladata tiedoston todellinen.

873
00:52:56,600 --> 00:52:58,670
Suuri. Mitään muuta?

874
00:53:01,950 --> 00:53:05,280
Juuri nyt ei ole mitään todellista merkitystä.

875
00:53:05,280 --> 00:53:08,190
Jos minä kirjoita, yritykset näkyvät täällä

876
00:53:08,190 --> 00:53:11,220
ehkä ole kaikkein suosituin yritykset alkavat A.

877
00:53:11,220 --> 00:53:17,130
>> Ennen saan Applen, se voi kestää joitakin merkkejä löytää mitä etsin.

878
00:53:17,130 --> 00:53:20,420
Tämä automaattinen täydennys ei ole tässä mielessä merkitystä.

879
00:53:20,420 --> 00:53:24,400
Se juuri menossa sanoa, "Kaikki mikä vastaa aion näyttää."

880
00:53:24,400 --> 00:53:30,510
Sen sijaan, että haluaisin jotenkin yhdistää jotain merkitystä minun hakuja.

881
00:53:30,510 --> 00:53:36,440
Jos menen tänne Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Jos yritän tulla symboli Yahoo! Finance sivulla

883
00:53:42,100 --> 00:53:52,310
ja olen aloittanut kirjoittamisen goog, minulla on mukava lista asioista.

884
00:53:52,310 --> 00:53:57,100
On selvää, se näyttää Yahoo! Finance tekee jotain fiksu täällä.

885
00:53:57,100 --> 00:53:59,790
Heillä on jotain merkitystä, ja niillä on myös lisätietoja

886
00:53:59,790 --> 00:54:01,430
kuten nimi varastosta.

887
00:54:01,430 --> 00:54:05,850
Se on jotain, en voi oikeastaan ​​saada vain minun varastossa luettelo symboleista.

888
00:54:05,850 --> 00:54:09,520
Haluan tämän, ja niin aion tehdä sen.

889
00:54:09,520 --> 00:54:11,790
Voit tehdä sen Tehdään muutamia asioita.

890
00:54:11,790 --> 00:54:15,580
Katsotaanpa ensin avata tarkastaja tällä sivulla

891
00:54:15,580 --> 00:54:18,100
koska näimme, että tämä sivu ei uudelleenlastausta ollenkaan,

892
00:54:18,100 --> 00:54:21,960
joten se on luultavasti AJAX jotenkin latautuu sen tiedot.

893
00:54:21,960 --> 00:54:23,920
Voimme selvittää, mitä tietoja se latautuu.

894
00:54:23,920 --> 00:54:28,390
Jos minä klikkaa tästä Network välilehden nämä tulevat olemaan kaikki pyynnöt, jotka alkavat tulla potkut.

895
00:54:28,390 --> 00:54:34,020
Nyt jos kirjoitat Goo, voimme nähdä, että Sain uuden HTTP-pyyntö.

896
00:54:34,020 --> 00:54:37,490
Tämä on luultavasti kun tämä tieto on peräisin.

897
00:54:37,490 --> 00:54:41,990
Tosiaan, jos katson tätä URL, joka on vähän oudosti nimetty,

898
00:54:41,990 --> 00:54:46,930
Voimme nähdä, että juuri tässä Yahoo lähettää pois sen tietoja.

899
00:54:46,930 --> 00:54:53,400
>> Olen luonut erillinen tiedosto nimeltä suggest.php joka on hyvin samanlainen henki lookup toiminto.

900
00:54:53,400 --> 00:54:57,730
Se on pohjimmiltaan aikoo tehdä kyselyn Yahoo URL, saada takaisin joitakin tietoja,

901
00:54:57,730 --> 00:54:59,750
ja lähettää sen takaisin minulle.

902
00:54:59,750 --> 00:55:02,570
Nyt sen sijaan käyttävät tätä iso, valtava luettelo symboleja,

903
00:55:02,570 --> 00:55:05,280
Voin käyttää Yahoo kiva merkitystä asioita,

904
00:55:05,280 --> 00:55:08,150
enkä tarvitse ladata, että massiivinen JavaScript-tiedosto.

905
00:55:08,150 --> 00:55:12,040
Olen vain menossa kaatamaan itse asiaa osakesymboleja.

906
00:55:12,040 --> 00:55:13,960
Mennään hypätä tuohon.

907
00:55:13,960 --> 00:55:17,360
Joten html, js. Olemme nyt quote4.

908
00:55:17,360 --> 00:55:22,120
Nyt emme enää käyttää, että iso lista JavaScript-tiedostot.

909
00:55:22,120 --> 00:55:24,430
Mutta on pieni eräänlainen suunnittelun ongelma.

910
00:55:24,430 --> 00:55:28,200
Olemme sanoneet, että AJAX on asynkroninen.

911
00:55:28,200 --> 00:55:31,000
Tämä tarkoittaa, että kun teen AJAX pyynnöstä

912
00:55:31,000 --> 00:55:36,490
joten täällä on line 8, tämä on silloin minun AJAX pyyntö on todella ammuttu.

913
00:55:36,490 --> 00:55:40,370
Sanotaan nyt minulla on joitakin koodi tänne joka aikoo tehdä joitakin juttuja

914
00:55:40,370 --> 00:55:43,930
kuten ilmoittaa käyttäjälle tai muuttaa jotain sivulla.

915
00:55:43,930 --> 00:55:49,830
Mitä ei tule tapahtumaan on selain ei aio odottaa tätä pyyntöä jatkaa

916
00:55:49,830 --> 00:55:53,480
ennen tulossa alas ja lyödä tätä linjaa.

917
00:55:53,480 --> 00:55:55,900
Se asynkroninen osa.

918
00:55:55,900 --> 00:55:58,400
Se tulee tekemään tähän pyyntöön, ja sanovat: "Aina olet valmis,

919
00:55:58,400 --> 00:56:03,080
"Tulkaa takaisin ja soita, jotka toimivat joka Käskin soittaa sisällä menestystä."

920
00:56:03,080 --> 00:56:07,300
Tämä tarkoittaa, ettemme voi vain ladata kaikki varastot etukäteen.

921
00:56:07,300 --> 00:56:10,300
Meidän täytyy tehdä pyynnön ja odottaa jotain palata.

922
00:56:10,300 --> 00:56:13,330
Tämä tarkoittaa, että ennen, voisimme yksinkertaisesti sanoa Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Tässä lista asioista haluan sinun AutoComplete päälle."

924
00:56:15,580 --> 00:56:18,950
Emme voi enää tehdä niin enää, koska emme tiedä

925
00:56:18,950 --> 00:56:21,780
mitä haluamme todella autocomplete päälle.

926
00:56:21,780 --> 00:56:25,190
Onneksi Bootstrap ajatellut tätä, koska ne ovat älykkäitä kaverit siellä,

927
00:56:25,190 --> 00:56:30,160
ja he todella antoi meille uuden tavan ladata tähän Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Ennen arvo tämän lähteen kiinteistö oli juuri tämä iso joukko asioita autocomplete päälle.

929
00:56:35,630 --> 00:56:39,580
>> Nyt lähde ominaisuus on itse asiassa funktio,

930
00:56:39,580 --> 00:56:44,580
ja tässä tehtävänä on selvittää, mitä asioita AutoComplete päällä ovat.

931
00:56:44,580 --> 00:56:48,730
Miten se tulee selvittää, että ulos on se aio kysyä Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
Mikä parasta asioita autocomplete ovat.

933
00:56:51,750 --> 00:56:54,500
Voit tehdä, että aion tehdä hyvin samankaltainen AJAX pyynnöstä.

934
00:56:54,500 --> 00:56:59,010
Aion pyytää tämän sivun osoitteessa suggest.php.

935
00:56:59,010 --> 00:57:01,360
Haluan lähettää pitkin symbolien.

936
00:57:01,360 --> 00:57:05,570
Ja nyt minun menestys, Bootstrap asiakirjat kertoi

937
00:57:05,570 --> 00:57:09,130
että jotta asuttamaan että luettelo asioista,

938
00:57:09,130 --> 00:57:14,370
kaikki minun täytyy tehdä on siirtää tässä array nyt on takaisinkutsufunktio.

939
00:57:14,370 --> 00:57:15,660
Mutta hetkinen.

940
00:57:15,660 --> 00:57:20,240
Jos tämä on tarkoitus olla jono ja AJAX lähettää minut takaisin tekstiin,

941
00:57:20,240 --> 00:57:22,720
Miten se on mahdollista?

942
00:57:22,720 --> 00:57:27,910
Tämä tuo uusi tapa vaihtaa tietoja kutsutaan JSON.

943
00:57:27,910 --> 00:57:33,000
Tässä tapauksessa emme ole vain lähettää takaisin yksinkertainen merkkijono.

944
00:57:33,000 --> 00:57:37,670
Nyt olemme tekemisissä tämän monimutkaisempi lista osakesymboleja.

945
00:57:37,670 --> 00:57:41,730
Nämä osakesymboleja voivat myös sisältää asioita, kuten yrityksen nimi tai nykyiset hinnat.

946
00:57:41,730 --> 00:57:47,550
Vain käyttämällä iso pitkä merkkijono, joka ei ole alustettu millään ennakoidulla tavalla

947
00:57:47,550 --> 00:57:51,970
ei tule olemaan paras tapa saada tämä tieto Yahoo palvelimelta minulle

948
00:57:51,970 --> 00:57:54,540
siten, että voin helposti ymmärtää.

949
00:57:54,540 --> 00:58:01,280
JSON on tekniikka, joka hyödyntää miten luomme assosiatiiviset taulukot JavaScript.

950
00:58:01,280 --> 00:58:04,510
Tämä muistuttaa paljon JavaScript assosiatiivisia array,

951
00:58:04,510 --> 00:58:06,600
ja itse asiassa, se on koska se on.

952
00:58:06,600 --> 00:58:09,710
JSON sanoista JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Tämä on pohjimmiltaan sovittu muoto siirtää tietoja edestakaisin.

954
00:58:15,020 --> 00:58:18,280
Täällä tämä JSON esine tai tämän JSON assosiatiivisia array

955
00:58:18,280 --> 00:58:21,010
lähettää minulle tietoja kurssin.

956
00:58:21,010 --> 00:58:25,110
>> Avaimet Tämän array ovat asioita, kuten tietenkin, että arvo on cs50,

957
00:58:25,110 --> 00:58:29,140
ja täällä voimme nähdä, että voin olla arvo on matriisi.

958
00:58:29,140 --> 00:58:32,730
Minun ei tarvitse tehdä asioita, kuten jäsentää jousille ja etsiä pilkkuja

959
00:58:32,730 --> 00:58:35,330
ja tehdä hulluja asioita.

960
00:58:35,330 --> 00:58:38,820
Koska tämä on ilmoitettu tässä JSON-muodossa,

961
00:58:38,820 --> 00:58:43,510
JavaScript ja jQuery jo toimintoja muuntaa merkkijonon

962
00:58:43,510 --> 00:58:48,140
joka näyttää tältä JSON tulee todellinen JavaScript assosiatiivinen array

963
00:58:48,140 --> 00:58:50,440
että voimme työskennellä.

964
00:58:50,440 --> 00:58:56,660
Doing että on niin yksinkertainen kuin sanomalla, että ei ole enää tämän tiedoston, suggest.php,

965
00:58:56,660 --> 00:58:59,040
lähetä minua takaisin vain merkkijono,

966
00:58:59,040 --> 00:59:01,950
mutta tiedän, että se aikoo lähettää minut takaisin JSON.

967
00:59:01,950 --> 00:59:06,760
Tämä tarkoittaa sitä, että JSON voidaan muuntaa JavaScript-assosiatiivisia array.

968
00:59:06,760 --> 00:59:10,830
Ja niin jQuery, haluan sinun tekevän sen minulle.

969
00:59:10,830 --> 00:59:13,990
Tämä tarkoittaa sitä, että tämä vaste parametri tässä,

970
00:59:13,990 --> 00:59:16,070
Tämä ei ole enää pelkkä merkkijono.

971
00:59:16,070 --> 00:59:19,860
Koska olemme kertoneet jQuery että tässä tulee joitakin JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery tulee olemaan fiksu sanoa, "Halusit JSON?"

973
00:59:22,950 --> 00:59:26,890
"Aion muuttaa sen osaksi assosiatiivisia array sinulle."

974
00:59:26,890 --> 00:59:32,100
Mennään itse katsomaan Verkko-välilehdessä kerran meillä quote4.js.

975
00:59:32,100 --> 00:59:35,400
Me muuttaa ja lataa sivu.

976
00:59:37,150 --> 00:59:41,250
Nyt aion kirjoittaa-taas.

977
00:59:41,250 --> 00:59:45,600
Olen tehnyt pari pyyntöjä suggest.php, mutta nyt tämä vastaus,

978
00:59:45,600 --> 00:59:48,670
eikä vain merkkijono, se JSON.

979
00:59:48,670 --> 00:59:52,580
Joten olen avoin kihara ahdin sanomalla, "Täältä tulee assosiatiivinen array."

980
00:59:52,580 --> 00:59:56,830
>> Ensimmäinen ja ainoa avain tämän assosiatiivisia array kutsutaan symboleja,

981
00:59:56,830 --> 01:00:00,240
ja sitten tässä on joukko kaikki asianmukaiset varoitusmerkit

982
01:00:00,240 --> 01:00:04,820
tulevat nyt Yahoo! Finance, eikä se jättimäinen luettelosta.

983
01:00:06,110 --> 01:00:10,630
Näin voin helposti asuttaa tätä autocomplete plugin

984
01:00:10,630 --> 01:00:14,280
joitakin tietoja, ei ole lähtöisin paikallisen tiedoston, joka on jo ennalta

985
01:00:14,280 --> 01:00:17,490
vaan jotain muuta.

986
01:00:17,490 --> 01:00:21,160
On käynyt ilmi, että voimme todella hyödyntää tekniikkaa kutsutaan JSONP,

987
01:00:21,160 --> 01:00:27,420
tai JSON pehmuste, joka poistaa tämän suggest.php välikäsi.

988
01:00:27,420 --> 01:00:34,010
Mutta sen sijaan tehdä, että mennään vaan katsomaan miten voin parantaa entisestään.

989
01:00:34,010 --> 01:00:36,040
Pidän todella Bootstrap n Typeahead. Se on todella mukavaa.

990
01:00:36,040 --> 01:00:39,570
Mutta me lähdemme hyviä JavaScript ja haluamme sellaista tehdä tämän itse,

991
01:00:39,570 --> 01:00:43,870
ehkä katsomaan mitä tämä plugin voisi tehdä.

992
01:00:43,870 --> 01:00:46,500
Katsotaanpa enää käyttää kyseistä Typeahead juttu,

993
01:00:46,500 --> 01:00:50,550
ja yritetään tehdä tämän luettelon suositelluista varastot itseämme.

994
01:00:50,550 --> 01:00:53,790
Täällä quote6.php aiomme aloittaa samalla tavalla.

995
01:00:53,790 --> 01:00:58,050
Joka kerta, kun joku tyypit jotain, haluamme tehdä AJAX pyyntö.

996
01:00:58,050 --> 01:01:01,590
Tämä on samanlainen kuin meidän alkuperäinen CS50 Finance Instant.

997
01:01:01,590 --> 01:01:05,020
Sen sijaan, että pyyntö quote.php,

998
01:01:05,020 --> 01:01:08,530
olemme nyt tekemässä pyyntöä samaan tiedostoon kuin ennen, tämä suggest.php,

999
01:01:08,530 --> 01:01:12,460
joka on juuri menossa vetämään tietoja Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Jälleen olemme yhä odottaa JSON, mutta nyt sillä Typeahead ei tee tätä meille,

1001
01:01:19,480 --> 01:01:24,850
meidän on myös lähetettävä pitkin arvo on sisällä nykyisen tekstikenttään.

1002
01:01:24,850 --> 01:01:28,120
Nyt tiedämme mitä kysyä Yahoo! Finance,

1003
01:01:28,120 --> 01:01:34,160
joten nyt on toiminto, että haluamme toteuttaa, kun pyyntö on valmis.

1004
01:01:34,160 --> 01:01:36,520
Meillä ei ole plugin tehdä listan meille,

1005
01:01:36,520 --> 01:01:40,630
joten tässä missä olemme todella menossa rakentaa listan ehdotuksia.

1006
01:01:40,630 --> 01:01:44,850
Voit tehdä, että mielelläni PHP me ketjuttaa nämä isot jouset HTML

1007
01:01:44,850 --> 01:01:48,170
sitten tulostaa ne, voimme tehdä täsmälleen sama asia JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Ensin aiomme aloittaa tämä merkkijono kutsutaan ehdotuksia,

1009
01:01:51,850 --> 01:01:54,590
ja tämä merkkijono on juuri menossa sisältää joitakin HTML.

1010
01:01:54,590 --> 01:01:58,320
Haluamme sen olevan luettelon asioista, joten aiomme aloittaa tämän luettelon tunniste,

1011
01:01:58,320 --> 01:02:03,340
ja nyt aiomme toistaa yli kaikkien symbolien palautettiin takaisin meille.

1012
01:02:03,340 --> 01:02:06,500
Muista, että olemme sanoneet tietotyyppi: "JSON", tämä ei ole merkkijono.

1013
01:02:06,500 --> 01:02:09,500
Tämä on jo array meille. Se on todella siistiä.

1014
01:02:09,500 --> 01:02:13,790
Voimme yksinkertaisesti sanoa, "Haluan sinun liittää listan elementti."

1015
01:02:13,790 --> 01:02:16,000
Laitamme sen sisällä osa puoli, että

1016
01:02:16,000 --> 01:02:19,030
annamme sen luokan ehdotuksia joten tiedämme, mitä se on,

1017
01:02:19,030 --> 01:02:23,880
ja nyt on symboli, että saimme takaisin Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Kun olemme luoneet osa kunkin symbolien olemme saaneet takaisin,

1019
01:02:27,230 --> 01:02:30,100
haluamme vain sulkea pois luettelosta.

1020
01:02:30,100 --> 01:02:33,040
Joten nyt ehdotuksia edustaa tätä pikku HTML fragmentti

1021
01:02:33,040 --> 01:02:37,860
että kun laittaa sivun tulee olemaan lista asioita etsimme.

1022
01:02:37,860 --> 01:02:41,070
Nyt todella laittaa että sivulla.

1023
01:02:41,070 --> 01:02:46,390
Voit tehdä, että olen oikeastaan ​​luonut toinen tyhjä div ja olen antanut sen ID ehdotuksia.

1024
01:02:46,390 --> 01:02:52,520
Aivan kuten asetamme sisällön div joka näyttää hinta kantatiedot,

1025
01:02:52,520 --> 01:02:58,600
nyt vain halua asettaa sisältö div mitä tämä merkkijono on

1026
01:02:58,600 --> 01:03:00,290
joka sisältää nämä symbolit.

1027
01:03:00,290 --> 01:03:07,650
Käyttämällä tätä HTML menetelmää, tätä ehdotuksia muuttuja, tämä merkkijono on merkkijono HTML.

1028
01:03:07,650 --> 01:03:13,490
Haluan ottaa että HTML ja laita se sisällä div nimeltään ehdotuksia.

1029
01:03:13,490 --> 01:03:15,680
Olemme vain liitetään jotain DOM nyt.

1030
01:03:15,680 --> 01:03:20,360
Olemme lisänneet joitakin uusia elementtejä DOM että voimme nyt näyttää sivulla.

1031
01:03:20,360 --> 01:03:22,540
Katsotaan mitä tämä näyttää.

1032
01:03:22,540 --> 01:03:29,110
Jos me latautuu quote6 ja nyt palaamme,

1033
01:03:29,110 --> 01:03:34,480
nyt kun olen aloittanut kirjoittamisen AAPL, meillä ei enää ole, että Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
mutta meillä on nyt tämä lista, teimme itse.

1035
01:03:38,470 --> 01:03:43,230
Tämä on hieman rumempi kuin Bootstrap Typeahead, esimerkiksi

1036
01:03:43,230 --> 01:03:45,580
mutta se antaa meille mahdollisuuden tehdä yksi asia.

1037
01:03:45,580 --> 01:03:48,660
Kun olimme katsot että Bootstrap plugin,

1038
01:03:48,660 --> 01:03:52,590
näimme, että kun me autocompleted, yksi AutoComplete arvoista oli AAPL.

1039
01:03:52,590 --> 01:03:54,820
Se ei ehkä ole niin hyödyllistä.

1040
01:03:54,820 --> 01:03:59,100
Koska käyttäjä, en ehkä heti tunnista kaikkia osakesymboleja.

1041
01:03:59,100 --> 01:04:02,370
Mitä olen luultavasti todennäköisemmin tunnistaa ovat yrityksen todelliset nimet.

1042
01:04:02,370 --> 01:04:05,310
Joten eikö olisi todella hyödyllistä, jos mieluummin kuin sanomalla AAPL

1043
01:04:05,310 --> 01:04:07,970
Tämä sanoi jotain Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Koska olemme valssatut tätä itsellemme, voimme todella helposti tehdä.

1045
01:04:12,240 --> 01:04:17,630
Katsotaanpa avaamaan viimeinen quote tiedosto täällä, niin quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Sama juttu. Olen juuri luonut toinen PHP-tiedosto, joka palaa meille enemmän kuin vain symboleja.

1047
01:04:23,200 --> 01:04:25,550
Se myös antaa meille takaisin yhtiön nimet.

1048
01:04:25,550 --> 01:04:28,150
Ja niin me teemme samoin. Teemme AJAX pyynnön.

1049
01:04:28,150 --> 01:04:32,370
Kun pyyntö on valmis, me aiomme suorittaa tämän toiminnon täällä,

1050
01:04:32,370 --> 01:04:36,520
ja tämä toiminto on menossa rakentaa iso merkkijono elementtejä.

1051
01:04:36,520 --> 01:04:39,520
Mutta ero on, että arvo näiden luetteloiden ei enää ole vain symboli,

1052
01:04:39,520 --> 01:04:45,370
se on nyt nimi.

1053
01:04:45,370 --> 01:04:47,070
Joten meillä on yksi pieni ongelma.

1054
01:04:47,070 --> 01:04:51,590
Kun käytämme lookup, meidän täytyy jotenkin siirtää sen symboli.

1055
01:04:51,590 --> 01:04:54,950
Emme voi siirtää lookup jotain Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Meidän siirtää sitä MSFT.

1057
01:04:57,900 --> 01:05:01,640
Kun kirjoitat HTML, meillä on paljon mukavia sisäänrakennettu ominaisuuksia.

1058
01:05:01,640 --> 01:05:05,440
Saattanut liittyä se href tai luokka.

1059
01:05:05,440 --> 01:05:08,230
Mutta mitä me todella tarvitsemme nyt jokaisen näistä linkeistä

1060
01:05:08,230 --> 01:05:11,120
olla osakesymboli liittyy siihen.

1061
01:05:11,120 --> 01:05:14,240
Ei ole sisäänrakennettu HTML määritteen osakesymboli,

1062
01:05:14,240 --> 01:05:21,010
mutta onneksi, HTML5 antaa meille mahdollisuuden luoda omia määritteitä olla mitä haluamme.

1063
01:05:21,010 --> 01:05:24,620
Sanomalla data-symboli, olen otettu käyttöön uusi attribuutti

1064
01:05:24,620 --> 01:05:29,350
jonka nimeä en juuri koostuu, ja tämä on ok, koska olen edeltää sitä tämän tiedon.

1065
01:05:29,350 --> 01:05:34,270
Aiomme säilyttää sisällä siellä symboli varastosta nyt.

1066
01:05:34,270 --> 01:05:39,590
Tämä tarkoittaa, että vaikka me näytetään arvo yhtiön nimi

1067
01:05:39,590 --> 01:05:43,380
sisällä meidän autocomplete, olemme silti muistaa symboli

1068
01:05:43,380 --> 01:05:47,110
, joka liittyy kunkin yrityksen.

1069
01:05:47,110 --> 01:05:50,350
Miten teemme, että on sisällä tämän elementin itse.

1070
01:05:50,350 --> 01:05:52,930
Joten se tarkoittaa, että meidän täytyy tehdä vielä yksi muutos.

1071
01:05:52,930 --> 01:05:57,090
Kun me sitten nyt, meidän täytyy todellakin hyödyntää symbolin ominaisuuden

1072
01:05:57,090 --> 01:06:00,220
eikä vain sen arvo.

1073
01:06:00,220 --> 01:06:05,010
Jos me back up, pidämme tapahtumakäsittely ehdotuksiin.

1074
01:06:05,010 --> 01:06:09,280
Kun yksi näistä ehdotuksista napsautetaan nyt, haluan tehdä jotain.

1075
01:06:09,280 --> 01:06:13,160
Mitä haluan tehdä, on muuttaa arvoa, joka kenttään.

1076
01:06:13,160 --> 01:06:16,100
Nyt haluan asettaa tämän saman val toimintoa.

1077
01:06:16,100 --> 01:06:21,060
>> Joten ilman argumentteja tätä Val-funktio palauttaa sinulle mitä jo tekstikenttään

1078
01:06:21,060 --> 01:06:27,070
mutta jos annat sille merkkijono, se tulee ottaa merkkijonon ja laita se tekstikenttään.

1079
01:06:27,070 --> 01:06:28,980
Olen valinnut sen tekstikenttään samalla tavalla.

1080
01:06:28,980 --> 01:06:31,230
Se nimi on symboli sisällä muodon-lainaus.

1081
01:06:31,230 --> 01:06:37,540
Nyt olen lähettämistä arvo attribuutin data-symboli.

1082
01:06:37,540 --> 01:06:41,560
Tämä juttu tässä on uusi, tämä $ (tämä).

1083
01:06:41,560 --> 01:06:46,850
Mitä tämä tarkoittaa on elementti, joka on napsautettu.

1084
01:06:46,850 --> 01:06:50,880
Voimme nähdä, että me emme liittämällä napsautuksen

1085
01:06:50,880 --> 01:06:54,690
kullekin elementille, jossa on luokan ehdotus erikseen.

1086
01:06:54,690 --> 01:06:57,140
Pikemminkin olemme lähestymässä tätä hieman eri.

1087
01:06:57,140 --> 01:07:01,700
Sen sijaan sanomme aina jotain sisäosat ehdotuksia div,

1088
01:07:01,700 --> 01:07:04,080
joka muistaa vain säiliö luetteloon,

1089
01:07:04,080 --> 01:07:10,150
jos jotain sisällä tämän div napsautetaan ja se on luokan ehdotus,

1090
01:07:10,150 --> 01:07:13,000
Haluan tämän tapahtuman tuleen.

1091
01:07:13,000 --> 01:07:17,490
Periaatteessa mitä tämä tarkoittaa, että voimme tehdä on, voimme uudelleen saman tapahtumakäsittelijää

1092
01:07:17,490 --> 01:07:20,000
kaikkien asioiden luettelossa.

1093
01:07:20,000 --> 01:07:22,080
Joten meillä ei tarvitse olla yhden tapahtuman käsittelijä ensimmäinen osa

1094
01:07:22,080 --> 01:07:24,550
ja eri tapahtumakäsittely toisen elementin.

1095
01:07:24,550 --> 01:07:29,880
Voimme sen sijaan sanoa, "Haluan samaa tapahtumakäsittely sovelletaan kaikkeen listallani."

1096
01:07:29,880 --> 01:07:34,420
Mutta meidän täytyy jotenkin tietää, mikä osa on napsautettu.

1097
01:07:34,420 --> 01:07:38,450
Tämä "tämä" avainsanan edustaa juuri sitä.

1098
01:07:38,450 --> 01:07:42,360
Tämä on esine, joka oli juuri napsautettu käyttäjä.

1099
01:07:42,360 --> 01:07:47,680
Jos minä vain napsauttaa 3. linkkiä, tämä on osa tätä kolmas lenkki,

1100
01:07:47,680 --> 01:07:51,670
mikä tarkoittaa, että saan sen attribuutti, data-symboli,

1101
01:07:51,670 --> 01:07:57,760
jonka tiedämme on sisällettävä symboli, joka on liitetty yhtiön juuri napsautetaan.

1102
01:07:57,760 --> 01:08:04,550
Jos me hypätä takaisin meidän Finance,

1103
01:08:04,550 --> 01:08:08,580
voimme nähdä nyt, että kun olen aloittanut kirjoittamisen jotain MSFT,

1104
01:08:08,580 --> 01:08:11,220
emme enää saada vain osakesymboleja,

1105
01:08:11,220 --> 01:08:13,720
olemme nyt saada todellista yritystä.

1106
01:08:13,720 --> 01:08:20,410
Mutta kun klikkaa jotakin näistä yrityksistä,

1107
01:08:20,410 --> 01:08:25,180
Voimme nähdä, että olemme todella asuttavat tekstikenttään eikä yrityksen nimi

1108
01:08:25,180 --> 01:08:29,850
mutta mitä oli varastoitu sisällä näiden tietojen ominaisuuksia.

1109
01:08:29,850 --> 01:08:32,880
Ja niin jos olen itse tarkastaa näistä tekijöistä oikealla klikkaamalla sitä

1110
01:08:32,880 --> 01:08:36,200
ja valitsemalla Tarkasta Element, voimme itse nähdä mitä tämä näyttää.

1111
01:08:36,200 --> 01:08:40,290
>> Muista tämä on jotain, että olemme luoneet sisällä että silmukka

1112
01:08:40,290 --> 01:08:42,649
kun olimme rakentamassa merkkijonon HTML.

1113
01:08:42,649 --> 01:08:47,870
Voimme nähdä tässä, että tämä tieto-symboli on arvo MSFT, mikä on hienoa.

1114
01:08:47,870 --> 01:08:49,189
Sitähän me odotimme.

1115
01:08:49,189 --> 01:08:53,170
Tuo merkki ja näin saimme arvon että meidän piti käyttää

1116
01:08:53,170 --> 01:08:56,140
sisällä tähän tekstiruutuun.

1117
01:08:56,140 --> 01:08:58,850
Se riittää quote muoto, koska se on tavallaan tylsää.

1118
01:08:58,850 --> 01:09:02,990
Toivotaan vain tehdä joitakin nopeita parannuksia meidän salkun sivulle.

1119
01:09:02,990 --> 01:09:08,109
Jos olet käyttänyt CS50 Finance jonkin aikaa ja aloitat ostaa ja myydä paljon varastoja,

1120
01:09:08,109 --> 01:09:11,300
Lopulta tämä taulukko on menossa aika iso,

1121
01:09:11,300 --> 01:09:13,850
ja olet menossa halua pörssikursseja, tietenkin.

1122
01:09:13,850 --> 01:09:20,350
Kun pöytä on todella suuri, se voisi olla hyödyllistä, että käyttäjä yrittää etsiä sen yli.

1123
01:09:20,350 --> 01:09:23,290
Sisällä hakukentän jos aloitan kirjoittaa jotain Disney

1124
01:09:23,290 --> 01:09:26,359
ja etsivät minun Mikki Hiiri varastossa, voimme nähdä, että taulukko on nyt suodatus

1125
01:09:26,359 --> 01:09:28,189
perusteella, mitä olen juuri kirjoittanut tuumaa

1126
01:09:28,189 --> 01:09:31,640
Tämä toiminto näyttää erittäin monimutkainen, mutta se on todella, todella helppoa

1127
01:09:31,640 --> 01:09:33,859
kanssa jQuery ja JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Tämä portfolio.php tiedosto sisältää JavaScript-tiedoston nimeltä portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Katsotaanpa katsomaan sitä.

1130
01:09:41,130 --> 01:09:44,890
Joten html, js, portfolio.

1131
01:09:44,890 --> 01:09:49,210
Tässä jos me teemme, että haku pöydällä.

1132
01:09:49,210 --> 01:09:52,750
Ensimmäinen asia mitä tarvitsee tehdä on liittää tapahtumakäsittely tähän tekstikenttään

1133
01:09:52,750 --> 01:09:55,760
sillä me tiedämme, että me haluamme suodatustoiminto tuleen

1134
01:09:55,760 --> 01:09:59,800
joka kerta, kun käyttäjä painaa jotakin, koska meillä ei ole aikaa Haku painikkeita.

1135
01:09:59,800 --> 01:10:03,000
Ensimmäinen asia, joka meidän täytyy tehdä, on selvittää, mitä käyttäjä etsii,

1136
01:10:03,000 --> 01:10:04,780
aivan kuten teimme ennen.

1137
01:10:04,780 --> 01:10:11,320
Tämä avainsana viittaa nykyisen elementin käyttäjä on vuorovaikutuksessa.

1138
01:10:11,320 --> 01:10:14,070
>> Koska käyttäjä on vuorovaikutuksessa hakukenttään,

1139
01:10:14,070 --> 01:10:17,020
$ Tämä edustaa hakukenttään,

1140
01:10:17,020 --> 01:10:21,820
joten this.val antaa meille mitä sisällä hakukentän käyttäjä tällä hetkellä kirjoittaa.

1141
01:10:22,810 --> 01:10:27,320
Joten, nyt mitä haluamme tehdä, on haluamme toistaa kaikkien rivien

1142
01:10:27,320 --> 01:10:29,240
sisällä meidän pöytään.

1143
01:10:29,240 --> 01:10:35,630
Voit valita kaikki rivit meidän pöytään, annoin että taulukon ID taulukon salkun,

1144
01:10:35,630 --> 01:10:39,060
ja kukin rivi edustaa TR elementti,

1145
01:10:39,060 --> 01:10:42,080
joten valitsin aikoo palata minulle iso joukko

1146
01:10:42,080 --> 01:10:44,370
Kaikkien rivien minun taulukossa.

1147
01:10:44,370 --> 01:10:47,010
Nyt haluan toistaa yli että array.

1148
01:10:47,010 --> 01:10:52,390
Voisin teitä varten silmukka, mutta jQuery oikeastaan ​​antaa meille mukava toiminto nimeltä "jokainen."

1149
01:10:52,390 --> 01:10:55,220
Mitä kukin tekee, on jokainen kestää yhden argumentin

1150
01:10:55,220 --> 01:10:57,090
ja tämä väite on funktio.

1151
01:10:57,090 --> 01:11:02,760
Mitä se aikoo tehdä, on se tulee soveltaa tätä toimintoa jokainen elementti sisällä tämän luettelon.

1152
01:11:02,760 --> 01:11:05,550
Tämä toiminto yksi argumentti, joka on e-

1153
01:11:05,550 --> 01:11:10,090
ja kun tämä toiminto on suoritettu, tämä e aiotaan korvata ensimmäinen rivi,

1154
01:11:10,090 --> 01:11:12,070
Sitten toinen rivi, ja sitten kolmannessa rivissä.

1155
01:11:12,070 --> 01:11:15,150
Tällä tavalla tämä on sama asia kuin käynnissä varten silmukka

1156
01:11:15,150 --> 01:11:21,360
ja sitten mietitään nykyisen elementin perustuu indeksiin sisäpuolelle varten silmukka.

1157
01:11:21,360 --> 01:11:24,750
Kussakin iteraatiossa, kunkin näiden elementtien taulukossa,

1158
01:11:24,750 --> 01:11:30,560
Haluan tarkistaa, jos tekstin elementin - tekstin solun sisällä rivi -

1159
01:11:30,560 --> 01:11:33,130
vastaa mitä Etsin.

1160
01:11:33,130 --> 01:11:36,390
Tämä iso pitkä jono komentoja miten voisin tehdä sen.

1161
01:11:36,390 --> 01:11:40,900
Ensinnäkin, jälleen, tämä viittaa nyt - koska se on sisällä uusi toiminto -

1162
01:11:40,900 --> 01:11:45,020
tämä on nyt nykyinen rivi taulukossa.

1163
01:11:45,020 --> 01:11:47,340
Haluan ottaa nykyisen rivin taulukossa

1164
01:11:47,340 --> 01:11:49,950
ja haluan saada kaiken sen lapsia.

1165
01:11:49,950 --> 01:11:51,940
Muista, DOM on hierarkkinen puu,

1166
01:11:51,940 --> 01:11:54,200
mikä tarkoittaa, että elementeissä on lasten lukumäärä.

1167
01:11:54,200 --> 01:12:00,180
>> Tämän. Lapset toiminto tulee palata minulle takaisin joukko kaikki elementit

1168
01:12:00,180 --> 01:12:03,240
, jotka ovat lapsia, tässä tapauksessa, rivin taulukossa.

1169
01:12:03,240 --> 01:12:07,150
Tämä on yksinkertaisesti solujen sisällä rivi.

1170
01:12:07,150 --> 01:12:09,230
Haluan vain tehdä hakuja ensimmäinen solu.

1171
01:12:09,230 --> 01:12:13,090
Tämä. Ensimmäinen funktio sanoo anna minulle ensimmäinen osa, joka array.

1172
01:12:13,090 --> 01:12:17,070
Sitten tekstin funktion sanotaan ymmärtäkö minua juuri mitä sisällä että solun

1173
01:12:17,070 --> 01:12:19,530
koska haluan etsiä yli että tekstiä.

1174
01:12:19,530 --> 01:12:21,040
Lopuksi, nyt muuntaa sen pieniksi,

1175
01:12:21,040 --> 01:12:23,940
jotta voimme tehdä tekstin kirjaimia kyselyitä.

1176
01:12:23,940 --> 01:12:29,990
Lopuksi haluamme nähdä jos merkkijono sisällä taulukko sisältää merkkijonon olemme etsimässä.

1177
01:12:29,990 --> 01:12:32,980
IndexOf toiminto Javascriptin tekee juuri sen.

1178
01:12:32,980 --> 01:12:37,060
Se kertoo meille, onko tämä merkkijono sisältää toisen merkkijonon.

1179
01:12:37,060 --> 01:12:40,150
Jos se on totta, että solu sisältää mitä etsin,

1180
01:12:40,150 --> 01:12:42,140
sitten haluan varmistaa, että se on osoitettu.

1181
01:12:42,140 --> 01:12:45,330
Show menetelmä sanoo, "Show elementti."

1182
01:12:45,330 --> 01:12:50,350
Jos näin ei tapahdu, niin se tarkoittaa, että mitä olen etsimässä ei sisälly

1183
01:12:50,350 --> 01:12:53,550
kyseisessä rivi, ja niin haluan piilottaa on käyttäjältä.

1184
01:12:53,550 --> 01:12:59,240
Tämä saavutetaan tuo mukavaa suodattamisen vaikutukset jossa ei enää näemme koko taulukon.

1185
01:12:59,240 --> 01:13:01,480
Jos olet kiinnostunut, miten tämä pumppu samoin,

1186
01:13:01,480 --> 01:13:04,180
Lähetämme lähde verkossa. Mutta se on todella yksinkertaista.

1187
01:13:04,180 --> 01:13:09,860
JQuery on mahtava menetelmiä näiden animaatioita ja manipuloida CSS-ominaisuuksia.

1188
01:13:09,860 --> 01:13:11,020
Niin, siinäpä se minulle.

1189
01:13:11,020 --> 01:13:15,560
>> Mikä sitten on edessä? Kuten näet muutaman päivän, viimeisten hankkeiden ehdotus johtuu.

1190
01:13:15,560 --> 01:13:17,730
Lopullisen hankkeet Ehdotus kysyy muutamia kysymyksiä,

1191
01:13:17,730 --> 01:13:19,420
mutta joukossa on kolme virstanpylväitä -

1192
01:13:19,420 --> 01:13:22,840
yksi on "hyvä" virstanpylväs, yksi parempi virstanpylväs, ja yksi parhaista.

1193
01:13:22,840 --> 01:13:25,870
Ajatuksena on todella auttaa teitä asettaa odotukset

1194
01:13:25,870 --> 01:13:29,160
niin että vähän olet tyytyväinen tuotoksen teidän opinnäytetyön

1195
01:13:29,160 --> 01:13:32,060
ja se on "hyvä", niin pitkälle kuin on kyseessä.

1196
01:13:32,060 --> 01:13:34,540
Mutta sitten kiinnostus saada sinut tavoittaa vain vähän jotain parempaa

1197
01:13:34,540 --> 01:13:37,680
tai jotain parasta, me myös tavallaan työntää sinua kohti, että samoin.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-thon puolestaan ​​on muutaman viikon.

1199
01:13:40,660 --> 01:13:44,340
Yleensä teemme tämä arpajaiset pohjalta perusta kiinnostuksen ansiosta,

1200
01:13:44,340 --> 01:13:47,680
mutta kertoimet ovat otamme muutaman sadan meistä bussikuljetus Harvard Square

1201
01:13:47,680 --> 01:13:51,540
alas Kendall Square joissa Microsoft on kaunis laitos osuvasti sanottu "nörtti" -

1202
01:13:51,540 --> 01:13:53,830
New England tutkimus-ja kehittämiskeskus.

1203
01:13:53,830 --> 01:13:56,380
Saamme sinne noin kaksikymmentä Saamme ruokaa.

1204
01:13:56,380 --> 01:13:58,160
Noin 1 a.m. saamme hieman ruokaa.

1205
01:13:58,160 --> 01:14:02,150
Noin 5 pm jos olet vielä hereillä me pään yli IHOP tai viedä sinut takaisin kampukselle.

1206
01:14:02,150 --> 01:14:04,380
Tavoitteena on sukeltaa opinnäytetöiden

1207
01:14:04,380 --> 01:14:06,190
rinnalla luokkatoverit ja henkilökunnan.

1208
01:14:06,190 --> 01:14:08,280
Sitten muutamaa päivää myöhemmin on CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
joka on todella tarkoitus olla tilaisuus te esitellä työsi

1210
01:14:10,990 --> 01:14:12,700
ja saavutukset varten lukukauden

1211
01:14:12,700 --> 01:14:15,610
taas hankausta hartioiden keskenään ja saada tunteen mitä kaikki tekivät.

1212
01:14:15,610 --> 01:14:17,850
Tämän sanoi, monet kiitokset Tommy ja Joseph,

1213
01:14:17,850 --> 01:14:19,960
ja näemme sinut maanantaina.

1214
01:14:19,960 --> 01:14:24,070
 [Aplodit]