1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Tydzień 9 DALEJ]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Harvard University]

3
00:00:05,160 --> 00:00:07,020
[To jest CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> To CS50. To jest koniec tygodnia 9. Dziękuję bardzo.

5
00:00:13,340 --> 00:00:15,310
Wreszcie. Tydzień 9. Mam.

6
00:00:15,310 --> 00:00:18,590
Dziś kontynuujemy naszą rozmowę na temat programowania WWW

7
00:00:18,590 --> 00:00:21,660
z okiem w kierunku końcowego projektu, a nie dlatego, że masz coś zrobić, web-based

8
00:00:21,660 --> 00:00:25,610
dla końcowych projektów, ale ponieważ zarówno dla końcowych projektów lub po CS50

9
00:00:25,610 --> 00:00:29,000
z pewnością jest to kierunek, w którym nowoczesne oprogramowanie będzie.

10
00:00:29,000 --> 00:00:31,770
A przecież to nie jest faktycznie rzeczą łatwą.

11
00:00:31,770 --> 00:00:35,040
W rzeczywistości, jeden z najtrudniejszych rzeczy do zrobienia jest aspekt projektu.

12
00:00:35,040 --> 00:00:38,600
>> Na przykład, z założenia, że ​​w rzeczywistości oznacza się interfejs użytkownika

13
00:00:38,600 --> 00:00:40,420
lub doświadczenie użytkownika w prawo.

14
00:00:40,420 --> 00:00:43,200
Śmiem twierdzić - i wiemy, że z niedawnego zbioru problemowego

15
00:00:43,200 --> 00:00:45,960
gdy kilku z was antenie swoje zastrzeżenie o jakiś kawałek oprogramowania

16
00:00:45,960 --> 00:00:49,000
lub sprzęt irytuje cię, czy na uczelni lub poza -

17
00:00:49,000 --> 00:00:51,930
istnieje wiele stron tam, jest dużo sprzętu tam,

18
00:00:51,930 --> 00:00:53,900
tego rodzaju bani.

19
00:00:53,900 --> 00:00:58,730
Ale rzeczywistość jest taka, że ​​z rzeczy, które są łatwe w użyciu, ale są jednak potężne

20
00:00:58,730 --> 00:01:00,550
Jest to bardzo trudne wyzwanie.

21
00:01:00,550 --> 00:01:03,680
Więc na dzisiaj poprosiłem Józefa i Tommy dołączyć do mnie tutaj

22
00:01:03,680 --> 00:01:06,680
tak, że możemy mieć rozmowę, zarówno o projekt

23
00:01:06,680 --> 00:01:09,090
i jakiego rodzaju procesów myślowych powinien zacząć chodzić w Twojej głowie

24
00:01:09,090 --> 00:01:12,040
Podczas projektowania finałowych projektów, twoje przyszłych przedsięwzięciach.

25
00:01:12,040 --> 00:01:15,040
I wtedy z pomocą Tommy'ego przyjrzymy niektóre szczegóły realizacji.

26
00:01:15,040 --> 00:01:18,440
Jak możesz mieć wizję na papierze lub w głowie

27
00:01:18,440 --> 00:01:20,760
które następnie można wykonać programowo

28
00:01:20,760 --> 00:01:24,030
za pomocą niektórych technologii i technik, które właśnie zaczął mówić o,

29
00:01:24,030 --> 00:01:29,080
mianowicie JavaScript i coś jeszcze nowszego, czyli AJAX, asynchroniczny JavaScript.

30
00:01:29,080 --> 00:01:32,950
To pozwala na tworzenie jeszcze bardziej dynamiczne z interfejsem użytkownika

31
00:01:32,950 --> 00:01:35,780
przez pobieranie więcej danych stopniowo z serwera.

32
00:01:35,780 --> 00:01:38,560
Więc zobaczymy niektóre z tych fragmentów, jak również dzisiaj.

33
00:01:38,560 --> 00:01:41,800
Tak na marginesie, jeśli są Państwo zainteresowani w koncentracji w informatyce

34
00:01:41,800 --> 00:01:45,010
lub minoring w informatyce, wiedzą, że w ten piątek w południe

35
00:01:45,010 --> 00:01:48,750
w Maxwell Dworkin 221 będzie wydarzeniem pizzeria

36
00:01:48,750 --> 00:01:50,780
gdzie można dowiedzieć się nieco więcej na temat informatyki.

37
00:01:50,780 --> 00:01:54,860
Na swojej drodze do drzwi dzisiaj będziesz w stanie odebrać nieoficjalny przewodnik CS na Harvardzie.

38
00:01:54,860 --> 00:01:57,290
Umieścimy go na puszki na śmieci na zewnątrz na wysokości pasa

39
00:01:57,290 --> 00:01:59,750
tak, że jeśli chcesz, aby pobrać ten i dowiedzieć się nieco więcej o CS,

40
00:01:59,750 --> 00:02:02,480
że będzie tam dla ciebie, jak to było w tygodniu 0.

41
00:02:02,480 --> 00:02:06,500
Także, jeśli chcesz dołączyć do nas na obiad w piątek CS50 na 13:15,

42
00:02:06,500 --> 00:02:09,800
udać się do cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Bez zbędnych ceregieli, dam ci ucząc Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hi. [Oklaski]

45
00:02:19,190 --> 00:02:20,770
Dzięki.

46
00:02:20,770 --> 00:02:24,780
Gdy po raz pierwszy dowiedziałem się o projekcie był w klasie tutaj nazywa CS179.

47
00:02:24,780 --> 00:02:28,040
>> Profesor w czasie opowiedział nam historię o innego profesora

48
00:02:28,040 --> 00:02:31,640
który poszedł do hotelu i korzystali z kranów.

49
00:02:31,640 --> 00:02:35,630
Czy ktoś może mi powiedzieć, co 2 gałki na lewo i prawo to zrobić?

50
00:02:35,630 --> 00:02:39,080
[Uczeń] zimna. >> Zimna. Good.

51
00:02:39,080 --> 00:02:41,430
Co się normalnie spodziewać, prawda?

52
00:02:41,430 --> 00:02:46,960
Ten profesor po użyciu kranu chce wziąć prysznic, a on przechodzi do tego użyć.

53
00:02:46,960 --> 00:02:51,310
On myśli, lewej i prawej strony są na gorąco i na zimno, prawda?

54
00:02:51,310 --> 00:02:55,470
Ale może ktoś mi powiedzieć, co to właściwie zrobić?

55
00:02:55,470 --> 00:02:58,060
Wszelkie ręce?

56
00:02:58,060 --> 00:03:01,740
[Niesłyszalne reakcja studentów] >> Jedna z propozycji jest?

57
00:03:01,740 --> 00:03:05,860
[Niesłyszalne odpowiedź uczeń] Temperatura >>?

58
00:03:05,860 --> 00:03:10,460
Tak więc jednym z nich reguluje temperaturę i inne elementy sterujące? >> [Uczeń] ciśnienie wody.

59
00:03:10,460 --> 00:03:12,350
Ciśnienie wody. Good.

60
00:03:12,350 --> 00:03:15,100
Ten profesor wchodzi do tego i, myśląc, że kontrolują ciepło i zimno,

61
00:03:15,100 --> 00:03:21,470
włącza tę właściwą, która jego zdaniem jest gorąco, aż się

62
00:03:21,470 --> 00:03:23,560
bo chce wziąć ciepły prysznic.

63
00:03:23,560 --> 00:03:28,100
Cóż, to tak naprawdę nie pasują do siebie, więc dostaje to nie bardzo świetna zabawa

64
00:03:28,100 --> 00:03:31,110
bycia w zimnym prysznicem, a wszyscy wiemy, jakie to uczucie.

65
00:03:31,110 --> 00:03:33,620
To jest przykład wada projektu.

66
00:03:33,620 --> 00:03:37,040
Co mam na myśli, że to jego oczekiwanie z kranu

67
00:03:37,040 --> 00:03:39,420
nie pasuje do tego, co wyszło z prysznicem,

68
00:03:39,420 --> 00:03:41,780
co jest raczej niefortunne dla niego.

69
00:03:41,780 --> 00:03:44,990
Jest to więc przykład wada projektu, co dzieje się w prawdziwym życiu.

70
00:03:44,990 --> 00:03:48,020
Ale widzimy wszelkiego rodzaju inne te, jak również.

71
00:03:48,020 --> 00:03:50,390
Nie jesteśmy pewnie fani systemu MBTA.

72
00:03:50,390 --> 00:03:55,560
Jest to system metra rzeczywiście w Londynie, który mówi: "Ten przycisk nie jest w użyciu."

73
00:03:55,560 --> 00:04:00,220
Dlaczego jest to nawet tam? Dlaczego w ogóle obchodzi?

74
00:04:00,220 --> 00:04:02,810
Kiedy byłem dzieckiem, jest tech savvy jeden w domu,

75
00:04:02,810 --> 00:04:05,050
gdy komputer będzie katastrofy, mama przyjdzie do mnie,

76
00:04:05,050 --> 00:04:07,060
pokazano mi ten ekran i pyta mnie co się stało.

77
00:04:07,060 --> 00:04:09,210
>> Nawet nie wiem, co to oznacza.

78
00:04:11,890 --> 00:04:14,700
[Śmiech] Co?

79
00:04:16,950 --> 00:04:18,019
[Śmiech]

80
00:04:18,720 --> 00:04:23,050
Czasami czuję się jak programistów to tylko trolling nas.

81
00:04:23,050 --> 00:04:28,460
Jako użytkownicy jesteśmy jak "Co się dzieje? Ktoś nam powie."

82
00:04:28,460 --> 00:04:32,140
To wszystko sprowadza się do kwestii designu.

83
00:04:32,140 --> 00:04:34,650
Design, jak widać, nie jest czysto o estetykę,

84
00:04:34,650 --> 00:04:37,230
to nie jest o tym, jak wyglądają.

85
00:04:37,230 --> 00:04:41,720
Widzimy tutaj, że ten mały pop-up tutaj faktycznie wygląda całkiem ładnie.

86
00:04:41,720 --> 00:04:45,290
Ma cień w tle, ma granic promieni dzieje.

87
00:04:45,290 --> 00:04:47,550
To trochę dość.

88
00:04:47,550 --> 00:04:51,480
To nie jest bardzo dobrze zaprojektowany, bo to nie jest bardzo przyjazny dla użytkownika.

89
00:04:51,480 --> 00:04:54,920
To trochę pop-up, które pojawia się tak naprawdę nie dał mi żadnych informacji

90
00:04:54,920 --> 00:04:58,450
o tym, co się dzieje, to nie ma mi nic powiedzieć jako użytkownik

91
00:04:58,450 --> 00:05:01,400
o tym, jak wyjść z tego błędu.

92
00:05:01,400 --> 00:05:05,190
Chcemy myśleć o rzeczach, że projekt nie jest.

93
00:05:05,190 --> 00:05:06,670
Po pierwsze, nie jest estetyczne.

94
00:05:06,670 --> 00:05:10,800
To również nie farsz aplikację ton niepotrzebnych funkcji.

95
00:05:10,800 --> 00:05:14,890
Jeśli jesteś tajska restauracja, pewnie nie chce być dentystą w tym samym czasie.

96
00:05:14,890 --> 00:05:17,720
I pytania Facebook nie, że wiele osób go stosować

97
00:05:17,720 --> 00:05:21,130
i to nie było naprawdę w centrum tego, co budowali.

98
00:05:21,130 --> 00:05:24,200
I tak miło, że nie o tyle ilość rzeczy

99
00:05:24,200 --> 00:05:26,390
że jesteś wprowadzenie do aplikacji, ale jakość

100
00:05:26,390 --> 00:05:28,910
i jak robisz, że doświadczenie użytkownika lepiej

101
00:05:28,910 --> 00:05:32,540
przez faktycznie poprawę tego, co już masz.

102
00:05:32,540 --> 00:05:37,040
>> W skrócie, projekt mówi nam co powinniśmy budować.

103
00:05:37,040 --> 00:05:41,950
Na przykład, jeśli budujemy coś, co pozwoli nam szukać rzeczy,

104
00:05:41,950 --> 00:05:45,970
takich jak Google, na przykład, musimy robić rzeczy w sposób

105
00:05:45,970 --> 00:05:48,950
który wymaga, aby użytkownik podejmuje wiele kliknięć, aby dostać się, czego chcą,

106
00:05:48,950 --> 00:05:52,580
czy należy to zrobić w sposób, na przykład, z Google Instant lub autouzupełniania

107
00:05:52,580 --> 00:05:54,970
który pozwala nam dotrzeć do naszych wyników szybciej?

108
00:05:54,970 --> 00:05:58,740
Technika polega na jak Tommy pokaże, właściwie go budować.

109
00:05:58,740 --> 00:06:01,890
Istnieje wiele rodzajów konstrukcji.

110
00:06:01,890 --> 00:06:06,070
Na przykład, jeśli budujemy coś wdrożyć coś

111
00:06:06,070 --> 00:06:09,770
w kraju Trzeciego Świata, gdzie nie ma zbyt wiele energii elektrycznej lub, że wiele technologii,

112
00:06:09,770 --> 00:06:11,440
należy zaprojektować co budujesz

113
00:06:11,440 --> 00:06:14,210
w sposób, który łatwo daje dostęp do ludzi.

114
00:06:14,210 --> 00:06:18,290
Ale jakiego rodzaju innych decyzji projektowych może istnieć

115
00:06:18,290 --> 00:06:21,850
lub może być zamieszany w coś takiego?

116
00:06:23,690 --> 00:06:25,660
Tak. Widzę rękę.

117
00:06:25,660 --> 00:06:37,200
[Niesłyszalne odpowiedź uczeń] Prawo. >> Dokładnie. Dostępność jest jedna rzecz.

118
00:06:37,200 --> 00:06:40,870
Wielu ludzi nie myśli o "Co z moich użytkowników?"

119
00:06:40,870 --> 00:06:43,160
jak skrajnych zarówno widma.

120
00:06:43,160 --> 00:06:47,770
Mam użytkowników, którzy mogą mieć niepełnosprawności, że nie myślę o

121
00:06:47,770 --> 00:06:50,590
a ja na samą myśl o projektowaniu dla zwykłego użytkownika.

122
00:06:50,590 --> 00:06:52,630
Internet jest dostępny dla każdego, w dzisiejszych czasach,

123
00:06:52,630 --> 00:06:54,870
i powinienem być projektowania dla tych osób, jak również.

124
00:06:54,870 --> 00:06:58,620
Jakie rodzaje innych decyzji projektowych można zarobić?

125
00:06:58,620 --> 00:07:00,690
Tak. >> [Uczeń] Koszty.

126
00:07:00,690 --> 00:07:02,680
Kosztować. Bardzo dobrze.

127
00:07:02,680 --> 00:07:08,060
Inna rzecz, którą opieramy nasze decyzje projektowe na to koszty.

128
00:07:08,060 --> 00:07:13,130
Jeśli jesteśmy biznesu, chcesz zbudować coś, co nie zajmują dużo koszt wytworzenia

129
00:07:13,130 --> 00:07:17,720
ale można sprzedać kosztem szczególnie wysokim lub może uzyskać nam zysk.

130
00:07:17,720 --> 00:07:21,540
>> Są to wszystkie rodzaje konstrukcji, ale kiedy budujemy coś w Internecie

131
00:07:21,540 --> 00:07:25,120
lub gdy budujemy coś, co prawdopodobnie nie kosztuje zbyt wiele zbudować się,

132
00:07:25,120 --> 00:07:28,630
jak aplikacji internetowych - nie musisz rzucać w nią dużo kapitału

133
00:07:28,630 --> 00:07:30,900
, aby zrobić coś, co faktycznie działa -

134
00:07:30,900 --> 00:07:33,490
co jesteśmy bardziej martwi się o to doświadczenie użytkownika.

135
00:07:33,490 --> 00:07:36,390
Nazywamy to łatwość wyśrodkowany projekt.

136
00:07:36,390 --> 00:07:41,550
Zasadniczo co użytkownik centered projektowania obejmuje stawia siebie w buty swoich użytkowników.

137
00:07:41,550 --> 00:07:44,870
Jeśli ktoś zarejestruje się w to, co buduję,

138
00:07:44,870 --> 00:07:48,250
oni oczywiście przyjść do mojego konkretnego zastosowania z cel na uwadze,

139
00:07:48,250 --> 00:07:50,280
z zadaniem, że chcą, aby zakończyć.

140
00:07:50,280 --> 00:07:53,650
A naszym zadaniem jest nie tylko, aby pomóc im wypełnić to zadanie

141
00:07:53,650 --> 00:07:57,930
ale pomóc wykonać to zadanie w sposób, który jest skuteczny, intuicyjne

142
00:07:57,930 --> 00:08:01,900
i, jak jakaś osoba mówi tam, dostępne.

143
00:08:01,900 --> 00:08:03,750
Co wydajność oznacza?

144
00:08:03,750 --> 00:08:08,050
Efektywność oznacza, jak szybko ma moja instrukcja wykonania zadania podano mój interfejs.

145
00:08:08,050 --> 00:08:11,650
Zajmuje dużo kliknięć dla nich, aby dostać się z jednego miejsca do drugiego?

146
00:08:11,650 --> 00:08:14,630
Czy to jest nudne? Czy muszą wykonywać wiele powtarzających się zadań?

147
00:08:14,630 --> 00:08:17,140
Chcemy, aby ten proces był jak najbardziej skuteczny

148
00:08:17,140 --> 00:08:20,070
więc nie trzeba robić te różne rzeczy.

149
00:08:20,070 --> 00:08:24,230
Co do intuicyjności, to, na przykład, gdy użytkownik wyszukuje mój interfejs

150
00:08:24,230 --> 00:08:27,240
jest to łatwe dla nich, aby dostać się z miejsca na miejsce?

151
00:08:27,240 --> 00:08:30,390
Czy jest to dla nich łatwe, aby dowiedzieć się, co mają do kliknij w moim interfejsie

152
00:08:30,390 --> 00:08:33,770
aby dla nich, aby osiągnąć cel lub zadanie, które chcą osiągnąć?

153
00:08:33,770 --> 00:08:37,520
>> I wreszcie, jak jedna osoba mówi tam, dostępność jest bardzo ważna.

154
00:08:37,520 --> 00:08:39,640
[Mężczyzna głośnik] Chodzi o dostępności dla rzeczy takich jak widzenie,

155
00:08:39,640 --> 00:08:42,740
lubię jak mam rzeczywiście zaprojektować coś dla kogoś, kto jest ślepy?

156
00:08:42,740 --> 00:08:46,460
Oh. Dla ludzi, którzy nie widzą w ogóle, mamy coś, co nazywa czytniki ekranu.

157
00:08:46,460 --> 00:08:49,070
Co należy zrobić, to należy budować swoją stronę w sposób

158
00:08:49,070 --> 00:08:52,020
że, na przykład, poszczególne technologie, co nazywamy -

159
00:08:52,020 --> 00:08:53,590
Istnieje wiele rzeczy teraz.

160
00:08:53,590 --> 00:08:55,660
Myślę, że są czytniki ekranu nazywane JAWS.

161
00:08:55,660 --> 00:08:58,410
Wiele z tych rzeczy opierają się na to, co nazywamy zasady strefy

162
00:08:58,410 --> 00:09:02,010
w celu odczytu do użytkownika, co ma na stronie.

163
00:09:02,010 --> 00:09:05,480
Dla tych ludzi, którzy nie widzą, trzeba się upewnić, że te czytniki ekranu

164
00:09:05,480 --> 00:09:09,130
rzeczywiście może podnieść zawartość na stronie i może pokazać użytkownikom,

165
00:09:09,130 --> 00:09:13,630
jeśli nie można zobaczyć, a przynajmniej można jeszcze zrozumieć treść na stronie.

166
00:09:13,630 --> 00:09:16,190
Tak. Okay.

167
00:09:16,190 --> 00:09:23,410
Wystarczy mówić o dobrej konstrukcji. Porozmawiajmy o złej konstrukcji.

168
00:09:23,410 --> 00:09:25,220
Są rzeczy, których nie powinno się robić.

169
00:09:25,220 --> 00:09:27,890
Czy ktoś może mi powiedzieć o swoich doświadczeniach z Craigslist

170
00:09:27,890 --> 00:09:32,190
i to, co myślą, nie jest tak wielka, o tym projekcie?

171
00:09:33,690 --> 00:09:36,430
Tak. >> [Uczeń] Myślę, że jest zbyt wiele słów w jednym miejscu.

172
00:09:36,430 --> 00:09:39,350
Zbyt wiele słów, prawda? Całkowicie przytłaczające.

173
00:09:39,350 --> 00:09:42,400
Możesz przyjść do tej strony i jesteś witany z całą masę rzeczy tutaj

174
00:09:42,400 --> 00:09:43,860
że może nawet nie ma znaczenia dla Ciebie.

175
00:09:43,860 --> 00:09:47,010
Na przykład, że mieszkasz w jednym stanie, że nie zaczyna się od tej litery.

176
00:09:47,010 --> 00:09:48,690
Powiedzmy, że mieszka w Teksasie, czy coś.

177
00:09:48,690 --> 00:09:53,790
>> Musisz przewinąć w dół strony, aby dostać się do miejsca są.

178
00:09:53,790 --> 00:10:00,320
Jestem z Bostonu, więc pozwól mi patrzeć w Massachusetts. Gdzie jest Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Och, to właśnie tutaj. Och, to Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
Spójrzmy na Boston. [Śmiech]

181
00:10:09,070 --> 00:10:12,250
Dość przytłaczające, prawda?

182
00:10:12,250 --> 00:10:16,400
Niezgrabne rzeczy tam. [Śmiech]

183
00:10:17,320 --> 00:10:19,470
Powiedzmy, że szukam gdzieś mieszkać.

184
00:10:19,470 --> 00:10:24,130
Ile osób faktycznie wykorzystane Craigslist? Ton Ciebie.

185
00:10:24,130 --> 00:10:30,960
Istnieje całkiem złe sposoby obejrzysz, ale spójrzmy na to.

186
00:10:35,130 --> 00:10:38,970
Jaka jest różnica pomiędzy img i pic? Czy ktoś może mi powiedzieć?

187
00:10:41,350 --> 00:10:42,830
Tam faktycznie nie ma różnicy.

188
00:10:42,830 --> 00:10:47,710
Mają na myśli dokładnie to samo, ale mają różne etykiety dla nich z jakiegoś powodu.

189
00:10:48,980 --> 00:10:53,560
Jeśli kliknę Posiada pliku nic się nie dzieje na stronie.

190
00:10:53,560 --> 00:10:57,490
I rzeczywiście trzeba kliknąć Wyszukaj ponownie coś się wydarzy.

191
00:10:57,490 --> 00:11:02,430
Co może być lepszym projektu decyzji, że można zrobić tam?

192
00:11:03,820 --> 00:11:08,030
Jeśli jestem kliknięcie tego filtra, prawdopodobnie chcesz filtrować przez danego działania

193
00:11:08,030 --> 00:11:09,970
lub danej kategorii.

194
00:11:09,970 --> 00:11:14,450
Więc zamiast nacisnąć Wyszukaj ponownie, może po prostu automatycznie zrobić filtrowanie

195
00:11:14,450 --> 00:11:17,060
rodzaj stylu Google, gdzie to zrobić natychmiast.

196
00:11:17,060 --> 00:11:20,440
[Malan] Ale nie tworzy jak widzieliśmy je dotychczas musiały być fizycznie przekazywane

197
00:11:20,440 --> 00:11:23,170
naciskając Enter przynajmniej lub klikając przycisk?

198
00:11:23,170 --> 00:11:26,830
Jak widać ich tak daleko, trzeba rzeczywiście kliknij Submit robić te rzeczy.

199
00:11:26,830 --> 00:11:30,090
>> Ale jak Tommy pokaże w sekundy, tak naprawdę są sposoby,

200
00:11:30,090 --> 00:11:33,010
taki sposób, że po kliknięciu na tym czymś może automatycznie wysyłać

201
00:11:33,010 --> 00:11:38,840
co nazywamy żądania AJAX i uzyskać dane z powrotem i filtrować wyniki natychmiast.

202
00:11:38,840 --> 00:11:41,340
Jest mnóstwo rzeczy, które są w porządku z tym interfejsem.

203
00:11:41,340 --> 00:11:43,530
[Malan] możesz wyszukać Cambridge?

204
00:11:43,530 --> 00:11:47,030
Jest coś, co nieco nietypowe tutaj gdzie cię obchodzi Cambridge

205
00:11:47,030 --> 00:11:54,790
i jeszcze dostajesz Westford, Spring Hill, West Newton i jak.

206
00:11:54,790 --> 00:11:57,930
Prawdopodobnie nie idealny. >> Prawdopodobnie nie idealny.

207
00:11:57,930 --> 00:12:03,900
Jak mogę być w stanie dokonać doświadczenia użytkownika lepiej na tej konkretnej stronie?

208
00:12:03,900 --> 00:12:07,340
Tak. >> [Uczeń] Instrukcje.

209
00:12:07,340 --> 00:12:09,500
Okay. Instrukcje w jaki rodzaj sens?

210
00:12:09,500 --> 00:12:14,630
[Uczeń] Na przykład, co dla początkujących użytkowników, którzy nawet nie wiedzą, co jest Craigslist

211
00:12:14,630 --> 00:12:17,320
lub nie wiesz, co masz robić.

212
00:12:17,320 --> 00:12:20,150
Racja. Więc wyjaśniając Craigslist jest na tej stronie jest bardzo ważne.

213
00:12:20,150 --> 00:12:23,490
Rzeczywiście możemy powiedzieć użytkowników, co ta strona jest faktycznie dla.

214
00:12:23,490 --> 00:12:27,090
Jeśli mam tu tylko to, widzę całą masę miejsc. Ja nawet nie wiem, co one oznaczają.

215
00:12:27,090 --> 00:12:29,730
Ale co ważniejsze, po prostu patrząc na ten interfejs,

216
00:12:29,730 --> 00:12:35,530
pamiętam musiałem przewijać mnóstwo rzeczy do znalezienia konkretnego społeczności

217
00:12:35,530 --> 00:12:37,560
że rzeczywiście zależało na tym.

218
00:12:37,560 --> 00:12:39,820
Co jest szybszy sposób można to zrobić? Tak.

219
00:12:39,820 --> 00:12:43,290
[Uczeń] Podzielić je na Wschód, regionach zachodnich. >> Okay.

220
00:12:43,290 --> 00:12:47,460
Mógłbym podzielić je na więcej kategorii, które mogą pomóc mi szybciej ustalić

221
00:12:47,460 --> 00:12:49,820
jak dostać się do danego miejsca.

222
00:12:49,820 --> 00:12:54,510
[Uczeń] Umieść listę rozwijaną. >> Racja. Okay.

223
00:12:54,510 --> 00:12:58,240
Przydałby mi się menu rozwijane, ponieważ mamy stały zestaw rzeczy

224
00:12:58,240 --> 00:13:00,100
i będziemy mogli pokazać je w rozwijanym menu.

225
00:13:00,100 --> 00:13:02,240
W ten sposób to nie zajmuje dużo miejsca na ekranie.

226
00:13:02,240 --> 00:13:05,630
Ale nawet lepiej niż to, co możemy zrobić?

227
00:13:05,630 --> 00:13:09,220
Tak. >> [Niesłyszalne odpowiedzi studentów] >> Czy możesz powiedzieć to jeszcze raz? >> [Uczeń] polu wyszukiwania.

228
00:13:09,220 --> 00:13:11,260
Tak, pole wyszukiwania. To świetnie.

229
00:13:11,260 --> 00:13:16,430
Co możemy zrobić, to rzeczywiście, jeśli spojrzeć na slajdy, pola wyszukiwania.

230
00:13:16,430 --> 00:13:21,520
Autouzupełnianie. Bardzo łatwy sposób przeglądać wyniki, które wiesz, że są w zestawie.

231
00:13:21,520 --> 00:13:25,980
Jeśli zaczniesz wpisywać BO, tylko pokaż mi wszystkie wyniki, które mają BO wewnątrz nich.

232
00:13:25,980 --> 00:13:29,030
W ten sposób można bardzo łatwo znaleźć konkretny, którego chcę, aby przejść do

233
00:13:29,030 --> 00:13:32,390
zamiast przewijania tej listy naprawdę duże.

234
00:13:32,390 --> 00:13:37,450
>> Są to wszelkiego rodzaju naprawdę nisko wiszących owoców, które ktoś realizuje Craigslist

235
00:13:37,450 --> 00:13:42,500
może faktycznie zrobić, aby doświadczenia na stronie dużo lepiej dla ich użytkowników.

236
00:13:42,500 --> 00:13:46,370
Okay. Wystarczy mówić o złych stronach.

237
00:13:46,370 --> 00:13:49,410
Porozmawiajmy o Facebook.

238
00:13:50,880 --> 00:13:54,390
Kiedy Facebook wyszedł, a zwłaszcza zdjęcia Facebook,

239
00:13:54,390 --> 00:13:57,870
było wiele innych usług, w tym czasie, który mógłby zrobić dokładnie te same rzeczy.

240
00:13:57,870 --> 00:14:00,740
Mogli organizowanie zdjęć w albumach.

241
00:14:00,740 --> 00:14:03,360
Co można zrobić, to można zorganizować je w zestawy, jak również.

242
00:14:03,360 --> 00:14:06,070
Można organizować je według daty. Można zrobić wszystkie te szczególne rzeczy.

243
00:14:06,070 --> 00:14:11,710
Ale czy ktoś wie co się Facebook zdjęcia wybuchnąć w czasie gdy została wydana?

244
00:14:11,710 --> 00:14:15,080
Tak. >> [Studentów] Tagi. Tags. >> Dokładnie.

245
00:14:15,080 --> 00:14:21,300
Mamy Milo tu, który jest naszą maskotką pies z tego chustka CS50.

246
00:14:21,300 --> 00:14:24,810
Widać, że mamy tę funkcję tagowania w środku.

247
00:14:24,810 --> 00:14:28,240
I co się tak ciekawe zdjęcia Facebook, z punktu widzenia użyteczności

248
00:14:28,240 --> 00:14:34,130
jest to, że ludzie rzeczywiście mogą za pośrednictwem tego zaangażować swoich znajomych na zdjęciach.

249
00:14:34,130 --> 00:14:37,680
Na Facebooku, ponieważ ich strona jest szczególnie społecznym,

250
00:14:37,680 --> 00:14:40,750
chodzi o budowę tego rodzaju atmosfery społecznej.

251
00:14:40,750 --> 00:14:42,620
To poprawiło doświadczenia dużo więcej zdjęć

252
00:14:42,620 --> 00:14:46,390
ponieważ mogą one zacząć, mówiąc: "To są połączenia między ludźmi,

253
00:14:46,390 --> 00:14:49,220
i są to zdjęcia o ludziach rzeczywiście zależy. "

254
00:14:49,220 --> 00:14:52,200
Część z nich jest też narcyzm sort.

255
00:14:52,200 --> 00:14:54,980
Ludzie lubią być oznakowane w zdjęć i tego typu rzeczy.

256
00:14:54,980 --> 00:14:58,510
Mimo, że nie koniecznie dobrą ludzką cechę,

257
00:14:58,510 --> 00:15:01,910
w tym samym czasie, to w oparciu o dobrych decyzji projektowych

258
00:15:01,910 --> 00:15:04,860
bo ludzie faktycznie dbają o takie rzeczy.

259
00:15:04,860 --> 00:15:07,190
Więc to zdjęcia Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Ale porozmawiajmy Facebook bardziej ogólnie.

261
00:15:09,800 --> 00:15:13,400
Jestem pewien, że wiele osób tutaj ma opinii o Facebooku,

262
00:15:13,400 --> 00:15:16,430
zarówno dobre i złe decyzje projektowe decyzje projektowe.

263
00:15:16,430 --> 00:15:20,270
Więc odpowietrzyć lub być szczęśliwy.

264
00:15:23,480 --> 00:15:26,450
Chodź. Wiem wszystko o tobie użyć Facebook.

265
00:15:26,450 --> 00:15:30,970
Ktoś musi coś złego do powiedzenia lub coś dobrego do powiedzenia o nim. Tak.

266
00:15:30,970 --> 00:15:35,060
[Uczeń] W wiadomości RSS jest dużo rzeczy, których tak naprawdę nie obchodzi.

267
00:15:35,060 --> 00:15:37,740
Feed aktualności ma pokazać wiele rzeczy może nie zależy.

268
00:15:37,740 --> 00:15:41,660
Masz znajomych na Facebooku, którzy nie spotkali się na 2 lub 3 lata

269
00:15:41,660 --> 00:15:43,860
i widzisz ich wyniki nowości pojawiały się w kanale wiadomości

270
00:15:43,860 --> 00:15:45,870
i tak naprawdę nie dbam o to.

271
00:15:45,870 --> 00:15:48,700
Facebook rzeczywiście starał się zrobić to lepiej,

272
00:15:48,700 --> 00:15:53,150
a oni rzeczywiście próbowała wcisnąć odpowiednie wyniki na górze wiadomości RSS jak późno

273
00:15:53,150 --> 00:15:58,300
więc rzeczywiście zobaczyć rzeczy przez przyjaciół, które są odpowiednie dla Ciebie lub Twoich bliskich przyjaciół.

274
00:15:58,300 --> 00:16:01,110
Coś jeszcze? Tak.

275
00:16:01,110 --> 00:16:06,400
[Niesłyszalne odpowiedzi studentów] >> Czy możesz powiedzieć to jeszcze raz?

276
00:16:06,400 --> 00:16:10,140
[Uczeń] Reklamy są stosunkowo dyskretny. >> W jakim sensie?

277
00:16:10,140 --> 00:16:16,370
[Niesłyszalne odpowiedź uczeń] Oni nie mają światła na ekranie, jak banery.

278
00:16:16,370 --> 00:16:17,760
Okay. To dobrze.

279
00:16:17,760 --> 00:16:25,030
Jeśli pamiętasz Internetu z lat 90-tych - >> [Malan] I tam był. >> On tam był. [Śmiech]

280
00:16:25,030 --> 00:16:29,210
Możesz pamiętać Gify migające tła, sparkly rzeczy

281
00:16:29,210 --> 00:16:31,570
Sort stylu GeoCities rzeczy.

282
00:16:31,570 --> 00:16:34,080
To naprawdę nie jest przykładem dobrego projektu

283
00:16:34,080 --> 00:16:36,690
bo to naprawdę rozprasza od treści.

284
00:16:36,690 --> 00:16:39,590
Strona sztuka Yale użyte do animowanych plików GIF, jak ich tle

285
00:16:39,590 --> 00:16:41,800
i nie można było czytać niczego na stronie,

286
00:16:41,800 --> 00:16:44,870
ale myślę, że ktoś rzeczywiście rozmawiał z nimi i teraz jest nieco inaczej.

287
00:16:44,870 --> 00:16:48,940
[Malan] Jest dużo lepiej. >> Jest dużo lepiej, jak widać. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Po prostu super, po prostu - Tak. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Część jest również co Twoja strona prawdopodobnie bardzo minimalistyczny i bardzo zrozumiałe

290
00:17:00,560 --> 00:17:05,690
więc co na przepływie strony w sposób, który jest bardzo logiczne i nie dostać się w sposób od siebie.

291
00:17:05,690 --> 00:17:11,849
Jakiego rodzaju inne rzeczy są dobre o Facebook lub źle o Facebooku?

292
00:17:11,849 --> 00:17:15,730
Miejmy tylko mieć rozmowę projektu tutaj.

293
00:17:19,470 --> 00:17:21,339
Oh. Gdzie? Tak.

294
00:17:21,339 --> 00:17:25,640
[Uczeń] Nowy system Timeline pozwala wyszukać profil danej osoby o ich przeszłości.

295
00:17:25,640 --> 00:17:28,119
Ooh, Oś czasu.

296
00:17:28,119 --> 00:17:30,280
Timeline to świetna rzecz, ponieważ pozwala szypułka znajomym

297
00:17:30,280 --> 00:17:33,300
z powrotem, gdy byli w szkole średniej.

298
00:17:35,160 --> 00:17:38,060
Timeline jest dobre, ponieważ pozwala przefiltrować zawartość dużo szybciej,

299
00:17:38,060 --> 00:17:41,500
to pozwala znaleźć rzeczy, które w przeciwnym wypadku podjęte ci naprawdę dużo czasu, aby znaleźć

300
00:17:41,500 --> 00:17:45,840
tylko przewijanie w górę iw dół, w górę, w górę, w górę, w górę, w górę, tak jak dzieje się w czasie.

301
00:17:45,840 --> 00:17:48,910
Ale jest też coś w rodzaju minusem, że pod względem doświadczenia użytkownika.

302
00:17:48,910 --> 00:17:51,190
Co może być tego przyczyna?

303
00:17:51,190 --> 00:17:56,780
Wielkie słowo, które zaczyna się od P-R. >> [Uczeń] prywatności. Prywatność >>, prawda?

304
00:17:56,780 --> 00:17:59,970
Prywatność jest ogromny problem doświadczenie użytkownika.

305
00:17:59,970 --> 00:18:07,190
To jest jedna z rzeczy, których nienawidzę najbardziej o Facebook teraz. [Śmiech]

306
00:18:07,190 --> 00:18:09,000
[Malan] Jak mogę teraz.

307
00:18:09,000 --> 00:18:11,380
David nie wiedziałem, że to naprawdę się stało aż do wczoraj.

308
00:18:11,380 --> 00:18:14,560
Więc teraz wie, że za każdym razem, porozmawiać mu, że wiem, że został ignorując mnie.

309
00:18:14,560 --> 00:18:16,880
[Malan] niezręcznej część została I faktycznie ignorując go,

310
00:18:16,880 --> 00:18:21,040
a ja nie wiedziałam, że on wiedział, że ignorowanie go. [Śmiech]

311
00:18:21,040 --> 00:18:24,030
Prywatność jest ogromny problem.

312
00:18:24,030 --> 00:18:28,670
Czy ktoś może mi powiedzieć, co tu może być źle Facebook prywatności

313
00:18:28,670 --> 00:18:32,270
pomijając fakt, że robią takie rzeczy?

314
00:18:32,270 --> 00:18:37,240
Co to jest szczególnie trudne do zrobienia w odniesieniu do Facebooka prywatności?

315
00:18:37,240 --> 00:18:40,340
Ten rodzaj jest wiodącym pytanie.

316
00:18:41,680 --> 00:18:43,930
Tak. >> [Uczeń] Ukryj swoje zdjęcia od niektórych osób.

317
00:18:43,930 --> 00:18:46,170
Racja. Dokładnie, aby ukryć swoje zdjęcia od niektórych osób.

318
00:18:46,170 --> 00:18:51,290
Mają ten mały, mały przycisk w prawym górnym rogu, który pozwala przełączać prywatność zdjęciem.

319
00:18:51,290 --> 00:18:56,360
Ich opcje prywatności są bardzo zróżnicowane między różnymi rodzajami menu.

320
00:18:56,360 --> 00:18:59,510
>> Oni zdobyć dużo lepiej o tym niedawno, ale kiedyś przypadek

321
00:18:59,510 --> 00:19:04,870
że gdy chciał zapobiec znajomym ze zdjęć widząc,

322
00:19:04,870 --> 00:19:08,280
będziesz musiał przejść przez bardzo skomplikowaną 5-etapowy proces bycia jak,

323
00:19:08,280 --> 00:19:11,150
pozwól mi kliknij ten link, teraz pozwól mi kliknij ponownie, pozwól mi kliknij ponownie,

324
00:19:11,150 --> 00:19:13,420
pozwól mi określić, które ludzie nie mogą zobaczyć moje zdjęcia.

325
00:19:13,420 --> 00:19:17,250
To nie jest szczególnie dobry na części na Facebook

326
00:19:17,250 --> 00:19:20,530
bo tak wiele o doświadczenie użytkownika jest faktycznie dając im swobodę

327
00:19:20,530 --> 00:19:22,460
kontrolować, co ludzie widzą.

328
00:19:22,460 --> 00:19:25,550
Nazywamy to użytkownikowi kontrolę i wolność.

329
00:19:25,550 --> 00:19:31,090
Jeżeli nie chcesz pozwolić użytkownikom zrobić w sposób, który jest wydajny i intuicyjny,

330
00:19:31,090 --> 00:19:34,570
wówczas doświadczenie użytkownika nie jest aż tak wielki na wszystkich.

331
00:19:34,570 --> 00:19:38,200
 Czy faceci lubią mówić cokolwiek o Facebooku?

332
00:19:38,700 --> 00:19:41,420
Jak mogę to wyłączyć?

333
00:19:41,420 --> 00:19:46,290
[Ong] Nie można to wyłączyć, a to jest ogromna wada użyteczność ze strony Facebook.

334
00:19:46,290 --> 00:19:49,410
Ta cecha - I faktycznie wyglądał w nim wczoraj -

335
00:19:49,410 --> 00:19:53,940
to albo to, że nie może tego zrobić lub nie jest pochowany gdzieś bardzo, bardzo głęboko

336
00:19:53,940 --> 00:19:58,050
w zakamarkach Facebooku, ponieważ nie mogę dowiedzieć się, jak wyłączyć tę funkcję na wszystkich.

337
00:19:58,050 --> 00:20:00,400
[Malan] Ale czasami te decyzje nie są oczywiste

338
00:20:00,400 --> 00:20:03,890
bo chłopaki dali nam wiele cennych informacji na temat różnych zastosowań CS50

339
00:20:03,890 --> 00:20:05,710
i strony internetowe, które oczywiście używa.

340
00:20:05,710 --> 00:20:10,260
Nie wprowadziły wszystkie te wnioski i sugestie.

341
00:20:10,260 --> 00:20:14,550
>> Część to na uzyskanie tak wiele wniosków, że jest funkcją czasu,

342
00:20:14,550 --> 00:20:17,070
ale czasami po prostu świadomie zdecydować jak,

343
00:20:17,070 --> 00:20:19,830
"Dziękuję za sugestię, ale nie zgadzam."

344
00:20:19,830 --> 00:20:24,350
Więc w jaki sposób ostatecznie decydują, co należy zrobić, jeśli użytkownicy, że powinieneś coś zrobić

345
00:20:24,350 --> 00:20:28,110
nawet jeśli nie koniecznie?

346
00:20:28,110 --> 00:20:32,360
Jest delikatna równowaga pomiędzy faktycznie słuchanie tego, co użytkownicy mówią

347
00:20:32,360 --> 00:20:35,840
i rzeczywiście ma jakąś linię, gdzie mówisz,

348
00:20:35,840 --> 00:20:37,750
"Nie będziemy robić to, co użytkownicy ci powiedzieć."

349
00:20:37,750 --> 00:20:42,520
A w szczególności, myślę, że był to cytat Henry'ego Forda, które podsumowuje to całkiem nieźle.

350
00:20:42,520 --> 00:20:47,130
"Gdybym zapytał ludzi, co chcieli, to oni powiedzieli, że chcą szybszych koni."

351
00:20:47,130 --> 00:20:51,840
Czy ktoś może coś w rodzaju odciąć, co to naprawdę znaczy cytat?

352
00:20:51,840 --> 00:20:56,060
To nie jest tak, że użytkownicy wiedzą, czego chcą,

353
00:20:56,060 --> 00:20:59,180
ale to bardziej, że -

354
00:20:59,180 --> 00:21:02,720
[Uczeń] Nie wiem, co jest możliwe.

355
00:21:02,720 --> 00:21:06,140
W części nie wiedzą, co jest możliwe.

356
00:21:07,880 --> 00:21:11,440
Tease, że oprócz trochę więcej. Co pan przez to rozumie?

357
00:21:11,440 --> 00:21:21,340
[Niesłyszalne odpowiedź uczeń]

358
00:21:21,340 --> 00:21:25,770
To dobrze. Co myślę, że próbujesz powiedzieć jest to, że ludzie wiedzą, czego chcą.

359
00:21:25,770 --> 00:21:28,050
Chcą szybszych koni.

360
00:21:28,050 --> 00:21:29,840
Czego tak naprawdę chcę, to zdolność do poruszania się szybciej,

361
00:21:29,840 --> 00:21:32,310
ale naprawdę nie wiem, medium przez które do osiągnięcia tego.

362
00:21:32,310 --> 00:21:36,330
Kiedy przyjeżdżają do użytkowników i użytkownicy ci coś powiedzieć

363
00:21:36,330 --> 00:21:39,700
i mówią ci, "Chcemy te funkcje i te funkcje i cechy te"

364
00:21:39,700 --> 00:21:42,650
nie chcesz koniecznie pomyśleć o "Pozwól mi iść do przodu

365
00:21:42,650 --> 00:21:44,720
"I realizować to, co wyraźnie powiedzieć"

366
00:21:44,720 --> 00:21:48,610
ale to, co chcesz, aby myśleć o to, "Jakie pomysły można uzyskać z tego?"

367
00:21:48,610 --> 00:21:50,450
Czego naprawdę chcą?

368
00:21:50,450 --> 00:21:55,560
>> I tam, co można zrobić, to zaprojektować coś spełniającego te wnioski

369
00:21:55,560 --> 00:22:00,340
ale niekoniecznie w sposób, że użytkownik oczekuje, że będzie zadowolony.

370
00:22:00,340 --> 00:22:03,830
Więc na coś końcowych projektów, w bardzo realnym,

371
00:22:03,830 --> 00:22:07,900
co jest przydatne, heurystyczna, jeśli chodzi o zrobienie czegoś lepszego,

372
00:22:07,900 --> 00:22:10,630
zwłaszcza jeśli projektant ma tę arogancję o nim

373
00:22:10,630 --> 00:22:14,360
której jesteś rodzajem wiedzieć, co jest najlepsze, można pobierać dane od użytkowników,

374
00:22:14,360 --> 00:22:16,580
ale jak można faktycznie przejść o coraz to uwagi?

375
00:22:16,580 --> 00:22:21,610
W końcowych projektów, bardzo konkretnie, co wytwarza optymalne wyniki tutaj?

376
00:22:21,610 --> 00:22:25,030
Co daje optymalne wyniki - i pójdę na to w drugim -

377
00:22:25,030 --> 00:22:29,190
jest to proces tworzenia i testowania, a następnie iteracji.

378
00:22:29,190 --> 00:22:32,020
Co mam na myśli badania jest zwykle podczas projektowania coś

379
00:22:32,020 --> 00:22:36,970
myślisz, że to dość dobre, jak: "Jestem taki wielki projektant. Wszyscy pokochają to."

380
00:22:36,970 --> 00:22:41,600
A następnie umieścić go tam i ludzie naprawdę nie podoba z jakiegoś powodu.

381
00:22:41,600 --> 00:22:46,820
Co trzeba zrobić, to trzeba się części rzeczy, które ludzie robią, jak

382
00:22:46,820 --> 00:22:49,180
i reorganizacji rzeczy, że ludzie nie lubią.

383
00:22:49,180 --> 00:22:53,080
To brzmi jak proces bardzo oczywiste, ale ten proces stale iteracja

384
00:22:53,080 --> 00:22:55,980
na górze, co już zbudowane jest procesem, który pomaga

385
00:22:55,980 --> 00:22:59,730
nie tylko udoskonalić swoje umiejętności projektowania, ale także pomaga ulepszyć projekt

386
00:22:59,730 --> 00:23:03,790
tak, że ludzie rzeczywiście doceniają produkt jeszcze bardziej niż przedtem.

387
00:23:03,790 --> 00:23:07,390
>> Pójdę na bardziej konkretne przykłady tego, co można faktycznie zrobić.

388
00:23:07,390 --> 00:23:11,390
Jako swego rodzaju ostatnim przykładzie produktu, spójrzmy na kajaku.

389
00:23:11,390 --> 00:23:14,970
KAYAK kiedy wyszedł bardzo, bardzo popularne.

390
00:23:14,970 --> 00:23:18,760
Czy ktoś może odgadnąć, dlaczego?

391
00:23:18,760 --> 00:23:20,950
Co to są różne rzeczy chcesz o tym, jeśli używano go

392
00:23:20,950 --> 00:23:23,990
lub jakie są różne rzeczy, których nie lubisz?

393
00:23:23,990 --> 00:23:31,590
Tak. >> [Niesłyszalne reakcja studentów] >> Ok.

394
00:23:31,590 --> 00:23:34,730
To część jest najmu użytkownik ma kwerendę, która jest bardziej ekspansywna

395
00:23:34,730 --> 00:23:38,150
niż bardzo restrykcyjne, jak: "Musisz wybrać datę początkową

396
00:23:38,150 --> 00:23:39,810
"I musisz wybrać datę zakończenia."

397
00:23:39,810 --> 00:23:44,910
W rzeczywistości, pozwala być elastyczne o tym i to daje wszystkie loty w tym przedziale.

398
00:23:44,910 --> 00:23:46,730
Coś jeszcze?

399
00:23:46,730 --> 00:23:50,530
[Uczeń] Obejmują one opłaty w cenie.

400
00:23:50,530 --> 00:23:53,330
Robią to na opłaty w cenie.

401
00:23:53,330 --> 00:23:56,720
Podatki i miejscach rzeczywiście iść prosto do tej ceny w lewym górnym rogu

402
00:23:56,720 --> 00:24:00,710
więc nie jesteś nabrać myśląc, że jesteś rzeczywiście płaci za 240 dolarów lotu

403
00:24:00,710 --> 00:24:03,280
gdy jest to naprawdę 330 dolarów.

404
00:24:03,280 --> 00:24:06,200
Coś jeszcze? Tak.

405
00:24:06,200 --> 00:24:10,140
[Niesłyszalne odpowiedź uczeń]

406
00:24:10,140 --> 00:24:14,610
Nie jestem pewien, czy rzeczywiście na to pozwolić.

407
00:24:14,610 --> 00:24:18,310
Może się mylę.

408
00:24:18,310 --> 00:24:23,360
To może być ciekawe, jeśli chcesz położyć większy nacisk na poszczególnych filtrów

409
00:24:23,360 --> 00:24:27,000
, tak aby przesunąć wyniki dotyczące tego filtr do góry.

410
00:24:27,000 --> 00:24:31,920
Ale może ktoś mi powiedzieć, co jest takiego specjalnego w tym po lewej stronie?

411
00:24:31,920 --> 00:24:39,540
Jak tradycyjnie patrzeć lot na serwis internetowy przed tym?

412
00:24:41,600 --> 00:24:44,650
>> Tak. >> [Niesłyszalne odpowiedzi studentów] >> Czy można powiedzieć, że -

413
00:24:44,650 --> 00:24:47,530
[Uczeń] Każda linia lotnicza. >> Tak. Każda linia lotnicza ma swoją własną stronę internetową.

414
00:24:47,530 --> 00:24:50,110
Ten konsoliduje rzeczy. I?

415
00:24:50,110 --> 00:24:52,190
[Uczeń] Wiesz dokładnie co razem wychodzimy.

416
00:24:52,190 --> 00:24:54,460
Wiesz dokładnie, co razem, gdy odchodzisz,

417
00:24:54,460 --> 00:24:59,380
, ale związane z filtrów, w szczególności.

418
00:25:00,710 --> 00:25:03,540
Pozwól mi wyciągnąć kajak.

419
00:25:11,490 --> 00:25:14,020
Boże, pop-upy. Złe doświadczenia użytkownika.

420
00:25:14,020 --> 00:25:17,230
Co się dzieje, kiedy przenieść ten suwak?

421
00:25:17,230 --> 00:25:21,010
[Animacja] Automatyczne aktualizacje. >> [Ong] Automatyczne aktualizacje.

422
00:25:21,010 --> 00:25:23,440
To coś, co jest bardzo ważne.

423
00:25:23,440 --> 00:25:25,380
Przed tym, gdy chciał zajrzeć do lotu,

424
00:25:25,380 --> 00:25:28,410
trzeba było umieścić w miejscu wejścia, lokalizacja wyjściowa, Naciśnij Szukaj

425
00:25:28,410 --> 00:25:31,190
to proces, który i pokazywać wyniki.

426
00:25:31,190 --> 00:25:34,120
Jeżeli chcesz zmienić zapytanie, to musisz wcisnąć z powrotem dwa razy,

427
00:25:34,120 --> 00:25:39,770
wprowadzić w nowej kwerendy od podstaw, a następnie zrobić to w kółko.

428
00:25:39,770 --> 00:25:43,910
Ciekawą rzeczą jest to coś takiego, że używa bardzo [niezrozumiały] coś w środku.

429
00:25:43,910 --> 00:25:46,230
Zawsze można zrobić coś takiego, że strzela się z wnioskiem

430
00:25:46,230 --> 00:25:48,420
i zwraca wszystkie wyniki natychmiast.

431
00:25:48,420 --> 00:25:51,680
Ten rodzaj natychmiastowego razie jest coś, co się KAYAK szalenie popularny

432
00:25:51,680 --> 00:25:55,910
bo to bardzo proste dla mnie po prostu zmienić swoje zapytanie

433
00:25:55,910 --> 00:25:58,890
i dowiedzieć się rzeczy, które są wokół określonego zakresu

434
00:25:58,890 --> 00:26:01,950
bez iść tam iz powrotem, tam iz powrotem, tam iz powrotem.

435
00:26:01,950 --> 00:26:05,200
Więc to są różne rzeczy, które chcesz, aby myśleć o tym, kiedy jesteś projektowania witryny.

436
00:26:05,200 --> 00:26:08,930
Jak mogę to zrobić bardzo wydajne dla moich użytkowników, aby przejść przez co pracują na

437
00:26:08,930 --> 00:26:13,010
i dostać się do ich ostatecznego celu, tak szybko, jak to możliwe?

438
00:26:13,010 --> 00:26:16,430
[Malan] A do punktu Józefa wcześniejszego o użytkownikach niekoniecznie wiedząc, czego chcą,

439
00:26:16,430 --> 00:26:18,640
w oparciu o to, co wy teraz wiedzieć o HTML

440
00:26:18,640 --> 00:26:22,780
i masz pola wyboru, przyciski opcji, menu wybierz, pól wpisu i jak,

441
00:26:22,780 --> 00:26:26,140
jak można realizować ideę wybranie czasu rozpoczęcia lotu?

442
00:26:26,140 --> 00:26:30,030
>> Które z tych różnych mechanizmów UI byłoby użyć?

443
00:26:30,030 --> 00:26:34,100
Jeśli po prostu znać ilość HTML, który wcześniej uczono

444
00:26:34,100 --> 00:26:39,070
i wiesz, wejścia są przyciski opcji, pola wyboru, menu rozwijanych oraz pola wejściowego,

445
00:26:39,070 --> 00:26:43,320
co twój naturalny wybór był do zbierania dat?

446
00:26:43,320 --> 00:26:48,670
[Uczeń] Wejście. Wejście. >> A może nawet z rozwijanej wszystkie daty, prawda?

447
00:26:48,670 --> 00:26:53,170
Więc z bardziej skomplikowanych mechanizmów interfejsu użytkownika, takich jak ta po lewej stronie, które można wprowadzić w życie,

448
00:26:53,170 --> 00:26:55,500
można uczynić ten proces znacznie bardziej intuicyjny z suwakiem

449
00:26:55,500 --> 00:27:01,020
bo czas jest ciągły, a ludzie zwykle nie myślą o tym w kategoriach odrębnych kawałków.

450
00:27:01,020 --> 00:27:04,950
Dobrze. Ostatnia rzecz.

451
00:27:04,950 --> 00:27:07,370
Dziesięć usability heurystyki.

452
00:27:07,370 --> 00:27:10,820
Wszystkie rzeczy, rozmawialiśmy o prawdopodobnie należeć do jednej z tych kategorii.

453
00:27:10,820 --> 00:27:14,420
Jeśli pójdziesz do tego łącza, które tereny zostaną umieszczone w Internecie,

454
00:27:14,420 --> 00:27:18,900
będziesz faktycznie być w stanie, jak zaprojektować swoją witrynę, należy pamiętać o heurystykę na uwadze

455
00:27:18,900 --> 00:27:21,330
i te zasady kciuka.

456
00:27:21,330 --> 00:27:26,610
Dla swoich projektów, co ja proponuję zrobić, aby zaprojektować app lepiej

457
00:27:26,610 --> 00:27:28,850
jest wykonanie prototypów papierze.

458
00:27:28,850 --> 00:27:32,150
Kiedy myślisz o swojej aplikacji, bardzo szybko naszkicować to, co chcesz to wygladac

459
00:27:32,150 --> 00:27:36,230
i czy wszystkie pola są umieszczone w taki sposób, że jest bardzo łatwy w intuicyjny używać

460
00:27:36,230 --> 00:27:39,820
a nawet pokazać tych prototypów papierowych do znajomych i rozpocząć grupach fokusowych.

461
00:27:39,820 --> 00:27:44,230
Wystarczy dostać 2 lub 3 ludzi i poprosić ich, aby tylko dotknąć tych prototypów papierowych

462
00:27:44,230 --> 00:27:47,650
i pokazać im nowe ekrany, aby zobaczyć, czy rzeczywiście zrozumieć, co się dzieje.

463
00:27:47,650 --> 00:27:50,680
>> Co chcesz zrobić, to dać im zadanie motywować zadanie,

464
00:27:50,680 --> 00:27:53,270
i po prostu dać im app i pozwolić im korzystać.

465
00:27:53,270 --> 00:27:56,530
Nie dać im instrukcji poza tym.

466
00:27:56,530 --> 00:28:00,920
Chcesz faktycznie niech interakcji z aplikacji w sposób, który pozwala widzieć

467
00:28:00,920 --> 00:28:03,870
jak będą go używać, jeśli nie stoją obok nich.

468
00:28:03,870 --> 00:28:05,250
I to jest bardzo ważne.

469
00:28:05,250 --> 00:28:08,780
To da Ci wiele spostrzeżeń, aby ludzie coraz wokół poszczególnych rzeczy

470
00:28:08,780 --> 00:28:10,560
w taki sposób, że nie była przeznaczona do?

471
00:28:10,560 --> 00:28:14,680
Są one przy użyciu szczególnych mechanizmów interfejsu użytkownika na ekranie

472
00:28:14,680 --> 00:28:17,490
w taki sposób, że jest typu hacky?

473
00:28:17,490 --> 00:28:22,020
Nie chciałem im zrobić to w ten sposób.

474
00:28:22,020 --> 00:28:23,940
A kiedy skończysz z tym, co chcesz zrobić?

475
00:28:23,940 --> 00:28:26,010
Twoje skały projekt, prawda?

476
00:28:26,010 --> 00:28:29,600
Co chcesz zrobić, to chcesz się rozwijać, a następnie wykonaj ten proces od nowa.

477
00:28:29,600 --> 00:28:32,110
Więc pokaż to znajomym kiedy już opracowany, przetestuj,

478
00:28:32,110 --> 00:28:36,630
opracowywania, testowania, opracowywania, testowania, iteracyjne, dalej i dalej.

479
00:28:36,630 --> 00:28:39,720
Konstrukcja jest bardzo iteracyjny proces, w tym sensie.

480
00:28:39,720 --> 00:28:43,280
Trzeba rzeczywiście coś zbudować, a następnie zrealizować rzeczy o nim

481
00:28:43,280 --> 00:28:46,520
, że nie zdawałem sobie sprawy, przed jak i wrócić i poprawić z tego.

482
00:28:46,520 --> 00:28:50,890
Teraz, jak na część rozwoju, to właśnie Tommy pokaże ci po przerwie

483
00:28:50,890 --> 00:28:53,220
i jak może być w stanie wdrożyć coś autouzupełniania

484
00:28:53,220 --> 00:28:56,610
w taki sposób, że jest bardzo prosty.

485
00:28:57,440 --> 00:28:59,550
[Malan] Jak Tommy ustawia tu, więc pytanie.

486
00:28:59,550 --> 00:29:03,780
Wiele z pierwszych stron - i kiedy Józef powiedział 1990 styl strony internetowej,

487
00:29:03,780 --> 00:29:07,640
to implementacje gdzie jeśli chcieli, aby wybrać czas rozpoczęcia i czas zakończenia,

488
00:29:07,640 --> 00:29:10,380
szczerze mówiąc, już w dzień, a nawet na niektórych stronach internetowych dzisiaj,

489
00:29:10,380 --> 00:29:13,220
sposób można zrobić to wybrać godzinę od drop-down,

490
00:29:13,220 --> 00:29:15,910
wybrać minut od drop-down, może wybrać AM, PM,

491
00:29:15,910 --> 00:29:17,440
a potem to zrobić 3 razy więcej.

492
00:29:17,440 --> 00:29:19,920
I tak z 6 kliknięć i może jakiś przewijanie

493
00:29:19,920 --> 00:29:24,000
Twój użytkownik może rzeczywiście zapewnić jakieś daty i / lub przedziale czasowym, w tym sensie.

494
00:29:24,000 --> 00:29:27,920
>> Więc na pewno suboptimal i jeszcze do tej pory nie widzieliśmy możliwości ekspresyjne

495
00:29:27,920 --> 00:29:30,330
w jednym z języków, którymi Sprawdziliśmy zrobić coś seksownego

496
00:29:30,330 --> 00:29:32,620
jak tego suwaka czasu rozpoczęcia i zakończenia.

497
00:29:32,620 --> 00:29:36,290
Ale jeśli myślisz, że powrót do tygodnie 0, gdy rozmawialiśmy o Scratch,

498
00:29:36,290 --> 00:29:39,080
tam nie było, że po prostu nie widżety pewne rzeczy.

499
00:29:39,080 --> 00:29:42,700
Naprawdę tylko miał te podstawowe, jak pętle i warunki i jak.

500
00:29:42,700 --> 00:29:46,910
Więc niby tylko myśli bardzo abstrakcyjnie teraz, niezależnie od konkretów HTML,

501
00:29:46,910 --> 00:29:51,260
Co tak naprawdę dzieje się z czymś takim czasie rozpoczęcia i suwak czasu końcowego?

502
00:29:51,260 --> 00:29:54,960
Kiedy przenieść moje myszy i kliknij na tym małym symbolem marchwi na lewo

503
00:29:54,960 --> 00:29:59,220
i rozpocznij przeciąganie, programowo, co to chcesz być w stanie realizować

504
00:29:59,220 --> 00:30:01,000
aby to się stało?

505
00:30:01,000 --> 00:30:04,920
Jakie pytania, co wyrażeń logicznych chcesz móc zapytać?

506
00:30:04,920 --> 00:30:06,930
Co się naprawdę dzieje? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Uczeń] Gdzie jest pozycja kursora? >> Dobrze. W przypadku, gdy jest w pozycji kursora?

508
00:30:10,080 --> 00:30:11,970
To było coś, co potrzebne, aby wyrazić jeszcze w Scratch,

509
00:30:11,970 --> 00:30:14,690
czy był w zależności od lokalizacji, a nawet, jak kolor lub.

510
00:30:14,690 --> 00:30:18,410
Możesz przypominam sobie tak krótko w poniedziałek były wszystkie te rzeczy nazywane zdarzeniami

511
00:30:18,410 --> 00:30:22,370
w świecie w internecie, a więc nie takie rzeczy jak onclick i onkeypress

512
00:30:22,370 --> 00:30:25,960
i onkeyup i onmouseover i onmouseout.

513
00:30:25,960 --> 00:30:29,130
Więc sobie sprawę, że nawet te rzeczy, które już zostały biorąc za pewnik w internecie

514
00:30:29,130 --> 00:30:32,190
z witryn takich jak Facebook i Gmail, nawet jeśli nie masz pojęcia

515
00:30:32,190 --> 00:30:34,890
jak można ewentualnie realizować, bo nie ma nic, nawet jak to w wykładzie

516
00:30:34,890 --> 00:30:38,570
Zestaw 7 lub problem, uświadomić sobie, że z tych samych dokładnych podstaw,

517
00:30:38,570 --> 00:30:41,090
z HTTP i parametrów i GET i POST,

518
00:30:41,090 --> 00:30:44,010
z podstawowych wejść HTML które widzieliśmy do tej pory

519
00:30:44,010 --> 00:30:47,690
i za chwilę z programowych mechanizmów Tommy o wprowadzenie

520
00:30:47,690 --> 00:30:51,300
można rozpocząć, aby wyrazić siebie tak, jak to było w tygodniu 0

521
00:30:51,300 --> 00:30:53,800
przez bardzo intuicyjnie przeciąganie i upuszczanie.

522
00:30:53,800 --> 00:30:58,950
>> Więc z tym powiedział, Tommy MacWilliam i nowe kawałki układanki dla nas w internecie.

523
00:30:58,950 --> 00:31:03,450
Dobrze. Nazywam się Tommy i będę mówić o JavaScripcie.

524
00:31:03,450 --> 00:31:07,150
Wystarczy disclaimer: jestem zdania, że ​​JavaScript jest najlepszym językiem programowania

525
00:31:07,150 --> 00:31:09,010
w całym świecie całym.

526
00:31:09,010 --> 00:31:11,940
Jest wiele ludzi, którzy nie zgadzają się ze mną, ale to jest po prostu niesamowite.

527
00:31:11,940 --> 00:31:16,330
Gdy wrócisz do C, jeśli masz pisać C dla innej klasy lub innych języków,

528
00:31:16,330 --> 00:31:19,780
to jest po prostu naprawdę frustrujące we wszystkich niskopoziomowych szczegółów trzeba ugrzęznąć w.

529
00:31:19,780 --> 00:31:23,050
Więc jeśli kiedykolwiek czując smutek jak denerwujące C jest do pisania,

530
00:31:23,050 --> 00:31:25,130
po prostu wrócić, napisz coś JavaScript. To jest nirwana.

531
00:31:25,130 --> 00:31:27,980
Poczujesz się znacznie lepiej o swój zły dzień.

532
00:31:27,980 --> 00:31:31,900
Dużo magii JavaScript pochodzi od jego zdolności do manipulowania rzeczy

533
00:31:31,900 --> 00:31:33,730
, które są już na stronie.

534
00:31:33,730 --> 00:31:38,520
Kiedy pisaliśmy nasze skrypty, były wykonywane na serwerze,

535
00:31:38,520 --> 00:31:42,270
i ostatecznie, że skrypt PHP prawdopodobnie wyświetli niektóre HTML.

536
00:31:42,270 --> 00:31:45,860
Że HTML został wysłany do klienta, a następnie, że było to.

537
00:31:45,860 --> 00:31:50,180
Jeśli PHP chciał dodać przycisk do strony, na przykład, nie może naprawdę zrobić.

538
00:31:50,180 --> 00:31:54,350
Musiałby to uczynić zupełnie nowy plik HTML i wysłać, że w przeglądarce.

539
00:31:54,350 --> 00:31:57,840
Z JavaScript wiemy, że będziemy mogli zaktualizować rzeczy, kiedy są już na stronie,

540
00:31:57,840 --> 00:32:00,840
iz tego powodu możemy zapewnić wiele informacji zwrotnych,

541
00:32:00,840 --> 00:32:06,150
które naprawdę poprawić doświadczenia użytkownika na naszej stronie internetowej.

542
00:32:06,150 --> 00:32:09,330
Wystarczy szybkie podsumowanie selektorów JavaScript.

543
00:32:09,330 --> 00:32:11,590
Wiemy, że gdy się pobrać strony HTML,

544
00:32:11,590 --> 00:32:13,890
który będzie reprezentował w DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM pamiętaj jest właśnie to wielkie drzewo, gdzie elementy są powiązane w tym dużym hierarchii.

546
00:32:19,340 --> 00:32:21,810
Kiedy pracowałem z baz danych w zbior 7,

547
00:32:21,810 --> 00:32:26,280
jedną z pierwszych rzeczy, które powinien wiedzieć, jak zrobić to zapytanie do bazy danych.

548
00:32:26,280 --> 00:32:29,060
Mamy ten duży tabeli użytkowników, a czasami po prostu chcę powiedzieć,

549
00:32:29,060 --> 00:32:33,260
"Chcę tylko niektóre z tych użytkowników spełniających pewne warunki."

550
00:32:33,260 --> 00:32:36,020
Podobnie, gdy mamy DOM musimy jakiś sposób odpytywania go.

551
00:32:36,020 --> 00:32:39,490
Musimy jakiś sposób mówi: "Chcę, wszystkie przyciski, które wyglądają tak

552
00:32:39,490 --> 00:32:41,860
"Lub wszystkich obrazów na stronie."

553
00:32:41,860 --> 00:32:44,330
A te przełączniki pozwalają nam zrobić.

554
00:32:44,330 --> 00:32:45,690
Więc po prostu szybkie podsumowanie.

555
00:32:45,690 --> 00:32:50,770
Ten pierwszy tutaj, to # przedstawić, co to będzie wybrać? Czy ktoś pamięta?

556
00:32:50,770 --> 00:32:54,880
[Niesłyszalne reakcja studentów] >> Tak, dokładnie.

557
00:32:54,880 --> 00:32:59,510
To będzie wybrać element na stronie, który ma identyfikator kliknij.

558
00:32:59,510 --> 00:33:03,470
I tak, że hash tag mówi to selektor zadziała z identyfikatorami.

559
00:33:03,470 --> 00:33:07,630
Jak o drugim, to. Wyśrodkowany, co będzie, które wybrać?

560
00:33:11,360 --> 00:33:15,180
Tak. >> [Uczeń] Klasa. >> Dokładnie. To jest teraz do wyboru przez klasę.

561
00:33:15,180 --> 00:33:18,840
ID i różnica między klasy jest ogólnie powinny być unikalne ID

562
00:33:18,840 --> 00:33:20,820
w ciągu co przestrzeń szukacie koniec.

563
00:33:20,820 --> 00:33:23,080
Więc jeśli szukali nad całą stronę internetową,

564
00:33:23,080 --> 00:33:27,740
naprawdę powinien mieć tylko 1 element z tej pewnej tożsamości, a więc w tym przypadku kliknij.

565
00:33:27,740 --> 00:33:31,330
Z klasy, z drugiej strony, można mieć więcej niż 1 elementu na tej samej stronie

566
00:33:31,330 --> 00:33:33,130
z tej samej klasy.

567
00:33:33,130 --> 00:33:36,580
Może to być przydatne do stwierdzenia, chcę wybrać wszystko, co się na środku strony

568
00:33:36,580 --> 00:33:38,450
a nie tylko 1 rzecz.

569
00:33:38,450 --> 00:33:40,310
>> I w końcu, ta ostatnia o to nieco bardziej skomplikowane,

570
00:33:40,310 --> 00:33:43,890
Ale co to będzie wybrać z DOM?

571
00:33:46,650 --> 00:33:48,810
[Niesłyszalne reakcja studentów] >> Co to jest?

572
00:33:48,810 --> 00:33:53,250
[Uczeń] Wszystko, co znajduje się tag. >> Mamy 2 części tutaj.

573
00:33:53,250 --> 00:33:58,070
Druga część jest powiedzieć chcę wybrać te tagi z tagu wejściowych,

574
00:33:58,070 --> 00:34:00,730
więc każdy element, który jest tag input.

575
00:34:00,730 --> 00:34:03,080
Ale nie chcę, po prostu zaznaczyć wszystkie wejścia

576
00:34:03,080 --> 00:34:05,170
bo coś takiego jak przycisk przesyłania może być wejście

577
00:34:05,170 --> 00:34:08,409
i coś w polu tekstowym może być wejście.

578
00:34:08,409 --> 00:34:11,909
Więc z tych nawiasach kwadratowych mówię chcę tylko, aby wybrać te elementy,

579
00:34:11,909 --> 00:34:14,110
które są typu text.

580
00:34:14,110 --> 00:34:17,400
Gdzieś w moim tagu HTML mam atrybut o nazwie typu,

581
00:34:17,400 --> 00:34:19,750
a wartość atrybutu musi być tekst.

582
00:34:19,750 --> 00:34:21,340
Tak jak o tej pierwszej części tutaj?

583
00:34:21,340 --> 00:34:25,489
Pierwszy wyraz tego selektora jest forma to mam miejsce, a następnie ta część wejścia.

584
00:34:25,489 --> 00:34:29,620
Co to zrobić, umieszczając postać przed nim?

585
00:34:33,409 --> 00:34:35,860
To się w zasadzie ograniczyć nasze zapytanie.

586
00:34:35,860 --> 00:34:38,510
To może być tak, że mamy kilka wejść na stronie

587
00:34:38,510 --> 00:34:41,080
, które nie są potomkami formularza.

588
00:34:41,080 --> 00:34:46,150
Co to będzie zrobić to powiem tylko chcę znaczniki wejściowe, które mają gdzieś nad nimi

589
00:34:46,150 --> 00:34:49,030
jakiś element dominujący formie.

590
00:34:49,030 --> 00:34:52,100
I tak w ten sposób możemy uczynić je bardziej hierarchiczne zapytania

591
00:34:52,100 --> 00:34:55,000
więc nie tylko wybrać wszystko dopasowanie danego selektora.

592
00:34:55,000 --> 00:35:00,760
Możemy trochę ograniczyć zakres tej kwerendy do czegoś innego.

593
00:35:00,760 --> 00:35:04,000
Więc teraz, że wiemy, jak wybrać elementy na stronie,

594
00:35:04,000 --> 00:35:06,780
Porozmawiajmy trochę o AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX jest nadal bardzo modny akronimem dla Asynchronous JavaScript and XML.

596
00:35:12,270 --> 00:35:15,640
Tak się składa, że ​​XML jest jakimś sposobem reprezentowania danych.

597
00:35:15,640 --> 00:35:20,920
>> Takie stracił popularność Ostatnio, więc w AJAX X nie jest używany przez cały czas.

598
00:35:20,920 --> 00:35:26,220
Zasadniczo co AJAX pozwala nam zrobić, to żądania HTTP

599
00:35:26,220 --> 00:35:28,620
z kontekstu JavaScript.

600
00:35:28,620 --> 00:35:32,310
Kiedy jesteśmy w naszej przeglądarce i mamy nawigację po stronach i kliknij na link,

601
00:35:32,310 --> 00:35:37,790
co nasza przeglądarka ma zamiar zrobić to żądanie HTTP do tego, co my, kliknij łącze.

602
00:35:37,790 --> 00:35:41,670
Ale to nie zawsze jest idealne, bo jeśli tak jest, to jak Dawid mówił

603
00:35:41,670 --> 00:35:45,220
zawsze mamy do użytkowników kliknij przycisk Submit lub kliknąć łącze

604
00:35:45,220 --> 00:35:50,380
w celu zapewnienia, że ​​coś stało się dzieje zaangażować żądania HTTP.

605
00:35:50,380 --> 00:35:54,160
Więc z AJAX możemy te wnioski w imieniu JavaScript.

606
00:35:54,160 --> 00:35:57,020
Oznacza to, że gdy użytkownik oddziałuje na stronie lub coś się stanie,

607
00:35:57,020 --> 00:36:01,780
rzeczywiście możemy zrobić programowy wniosek do innego pliku PHP na naszej stronie internetowej

608
00:36:01,780 --> 00:36:06,280
lub cokolwiek innego i pobrać dane, że plik wypluwa.

609
00:36:06,280 --> 00:36:09,860
Rzućmy okiem na przykład AJAX.

610
00:36:09,860 --> 00:36:16,140
To jest nasz CS50 strona Finance, z którym mam nadzieję, że niektórzy z nas są znane.

611
00:36:16,140 --> 00:36:21,790
Jeśli spojrzymy na kodzie HTML strony, widzimy tutaj, że dodałem kilka rzeczy,

612
00:36:21,790 --> 00:36:23,820
z których jeden dałem ten formularz identyfikator.

613
00:36:23,820 --> 00:36:26,480
Powiedziałem, id = "form-quote".

614
00:36:26,480 --> 00:36:31,910
Zrobiłem to tylko dlatego, że się dzieje, aby to trochę łatwiej wybrać z DOM

615
00:36:31,910 --> 00:36:35,090
skoro można po prostu zrobić bardzo proste zapytanie.

616
00:36:35,090 --> 00:36:38,960
Co chcę zrobić, o to chcę naprawić jakiś problem z CS50 Finansów.

617
00:36:38,960 --> 00:36:41,550
Więc jeśli idziemy do finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
każdym razem, kiedy chcesz dostać ofertę, muszę kliknąć ten przycisk Get Quote,

619
00:36:45,700 --> 00:36:48,960
i że przycisk Get Quote potem zabiera mnie do innego całej strony.

620
00:36:48,960 --> 00:36:52,400
A jeśli chcę kolejny cytat, muszę uderzyć przycisk Wstecz, a potem wpisz je,

621
00:36:52,400 --> 00:36:54,480
Mogę dostać ofertę, i uderzyłem przycisk Wstecz.

622
00:36:54,480 --> 00:36:56,840
To naprawdę nie najlepsze doświadczenia użytkownika.

623
00:36:56,840 --> 00:37:01,570
Kto tak naprawdę korzystać z witryny, czy to, że powoli, aby uzyskać ceny akcji?

624
00:37:01,570 --> 00:37:05,630
Więc to, co chcemy zrobić z AJAX jest usunąć ten krok będzie oddzielnej stronie

625
00:37:05,630 --> 00:37:08,410
w celu wyświetlenia wyników.

626
00:37:08,410 --> 00:37:11,240
>> Co tak naprawdę tylko z prośbą o to, że naprawdę niewielka cena,

627
00:37:11,240 --> 00:37:14,240
i to tylko bardzo mała ilość danych.

628
00:37:14,240 --> 00:37:17,400
Więc nie ma potrzeby, dla mnie, aby przejść kolejny całe strony HTML,

629
00:37:17,400 --> 00:37:20,670
pobrać całą nową partię HTML, może pobrać niektóre więcej zdjęć,

630
00:37:20,670 --> 00:37:24,410
inne pliki CSS tylko dla mnie, aby odpowiedzieć na to bardzo proste pytanie

631
00:37:24,410 --> 00:37:27,810
od tego, ile to kosztuje akcji.

632
00:37:27,810 --> 00:37:31,000
Z AJAX możemy zrobić to o wiele łatwiejsze.

633
00:37:31,000 --> 00:37:36,400
Widzimy tu, że mam połączenie w pliku JavaScript nazwie quote.js.

634
00:37:36,400 --> 00:37:40,140
Miejmy faktycznie otworzyć ten plik. Nie tam.

635
00:37:42,610 --> 00:37:45,860
Wszystkie moje pliki JavaScript będą znajdować się w HTML

636
00:37:45,860 --> 00:37:47,630
tak, że przeglądarka internetowa może do niego dostęp.

637
00:37:47,630 --> 00:37:50,330
Następnie mamy osobny katalog tutaj na JavaScripcie

638
00:37:50,330 --> 00:37:54,340
a teraz jest quote.js.

639
00:37:54,340 --> 00:38:00,930
Na górze tego pliku to mówi tutaj, że chcesz czekać na całej stronie jest załadowanie

640
00:38:00,930 --> 00:38:04,830
zanim ja staram się robić wszystko. Dlaczego jest to konieczne?

641
00:38:04,830 --> 00:38:08,650
Okazuje się, że następną rzeczą zamierzam zrobić o to zacząć szukać elementu

642
00:38:08,650 --> 00:38:10,810
który pasuje jakiś selektor.

643
00:38:10,810 --> 00:38:15,600
Jeśli to jest obsługa JavaScript kiedykolwiek wykonywane przed element ten został umieszczony na stronie

644
00:38:15,600 --> 00:38:17,820
wtedy wszystko staram się robić nie będzie działać

645
00:38:17,820 --> 00:38:20,580
bo mam zamiar spróbować wybrać coś, co nie jest tam jeszcze.

646
00:38:20,580 --> 00:38:23,780
Więc to line up górze mówi chcę byś czekać aż wszystko zostanie załadowany

647
00:38:23,780 --> 00:38:28,030
więc mamy gwarancję, że wszelkie elementy szukam faktycznie są na stronie.

648
00:38:29,730 --> 00:38:34,310
Ten znak dolara oznacza tutaj używam biblioteki o nazwie jQuery.

649
00:38:34,310 --> 00:38:38,570
Ta biblioteka jQuery pozwala nam korzystać z tych selektorów, że po prostu sprawdzić.

650
00:38:38,570 --> 00:38:44,010
Mówiąc $ następnie przekazując jako argument ten # form-cytat,

651
00:38:44,010 --> 00:38:47,910
Jestem teraz wybierając tę ​​formę, że po prostu przyjrzał.

652
00:38:47,910 --> 00:38:52,290
Teraz mam reprezentację tej formie w pamięci jakoś.

653
00:38:52,290 --> 00:38:56,760
>> Obecnie tego obiektu, w tym w postaci reprezentacji,

654
00:38:56,760 --> 00:38:58,890
Obecnie używam funkcji o nazwie na.

655
00:38:58,890 --> 00:39:02,710
Co ta funkcja nie jest to będzie dołączyć obsługi zdarzeń.

656
00:39:02,710 --> 00:39:06,310
Wydarzenie, które będziemy słuchać jest zdarzenie submit.

657
00:39:06,310 --> 00:39:08,890
Tak więc, gdy użytkownik kliknie przycisk Prześlij, że lub naciśnięciu Enter,

658
00:39:08,890 --> 00:39:11,730
wydarzenie to będzie ogień.

659
00:39:11,730 --> 00:39:16,390
Podłączając do tego, mogę zastąpić domyślne zachowanie formularza.

660
00:39:16,390 --> 00:39:19,770
Bez tego JavaScriptu, forma będzie przedłożyć cokolwiek plik PHP

661
00:39:19,770 --> 00:39:22,110
użyliśmy w tym atrybucie działania.

662
00:39:22,110 --> 00:39:25,440
Ale zamiast tego, mam teraz powiedzieć, czekaj, czekaj, czekaj, nie chcę, abyś to w życie.

663
00:39:25,440 --> 00:39:31,140
Chcę, aby tak się stało przed wyjazdem i spróbuj złożyć w jakimś pliku PHP.

664
00:39:31,140 --> 00:39:32,870
Teraz to, co chcę zrobić?

665
00:39:32,870 --> 00:39:39,270
W tym miejscu chcę używać AJAX jakoś wczytać w to, co cena akcji jest.

666
00:39:39,270 --> 00:39:44,170
Pierwszą rzeczą, jaką trzeba wiedzieć, jest to, co zbiory użytkownik patrząc.

667
00:39:44,170 --> 00:39:46,760
Aby to zrobić, że będę korzystać z innego wyboru.

668
00:39:46,760 --> 00:39:49,020
Jest to trzeci selektor patrzyliśmy wcześniej.

669
00:39:49,020 --> 00:39:54,460
Ten mówi, że chcę, aby rozpocząć ten element formularza z identyfikatorem formularzy cytatu.

670
00:39:54,460 --> 00:39:58,440
Następnie gdzieś tej formy nie musi być elementem wejściowym

671
00:39:58,440 --> 00:40:01,270
który ma nazwę symbolu.

672
00:40:01,270 --> 00:40:05,460
Jeśli spojrzymy na nasz HTML, widzieliśmy, że mamy wejście [name = symbol].

673
00:40:05,460 --> 00:40:12,380
Oznacza to, że to się dzieje, aby wybrać to pole tekstowe, które użytkownik wpisując w.

674
00:40:12,380 --> 00:40:13,870
To miłe. Mamy pole tekstowe.

675
00:40:13,870 --> 00:40:17,360
Teraz tylko trzeba wiedzieć, co znajduje się w jej wnętrzu.

676
00:40:17,360 --> 00:40:20,290
Aby to zrobić, że możemy wywołać tę metodę tutaj, to. Val,

677
00:40:20,290 --> 00:40:23,240
a ten mówi, że wie, co masz pole tekstowe.

678
00:40:23,240 --> 00:40:28,160
Chcę, żebyś mi powiedział, co to jest użytkownik wpisze do tego pola tekstowego.

679
00:40:28,160 --> 00:40:34,440
Teraz mamy ciąg nazwie symbol, który jest równy co użytkownik wpisze w.

680
00:40:34,440 --> 00:40:39,820
To miłe. Możemy użyć tego ciągu, aby mieć naszą prośbę.

681
00:40:39,820 --> 00:40:42,450
Jest to nowy funkcji tutaj to $,

682
00:40:42,450 --> 00:40:44,900
chyba mamy już nie będzie wyboru elementów,

683
00:40:44,900 --> 00:40:48,910
mamy zamiar być wywołanie innej funkcji, która jest dostarczonych nam przez jQuery.

684
00:40:48,910 --> 00:40:54,810
Ta funkcja AJAX jest to, co naprawdę dzieje się do tego żądania HTTP.

685
00:40:54,810 --> 00:40:57,000
Musimy więc powiedzieć, że kilka rzeczy.

686
00:40:57,000 --> 00:41:01,410
Pierwszą rzeczą, jaką musimy powiedzieć tej funkcji jest gdzie chcę wniosek iść.

687
00:41:01,410 --> 00:41:08,910
Gdzieś w moim projekcie mam ten plik wewnątrz katalogu o nazwie quote.php HTML.

688
00:41:08,910 --> 00:41:15,150
Można uzyskać dostęp do tego pliku, widzieliśmy, jak to, jeśli pójdę do localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Chcę JavaScript, aby wysłać do tej strony.

690
00:41:20,450 --> 00:41:22,920
Jaki rodzaj wniosku teraz?

691
00:41:22,920 --> 00:41:27,210
Widzieliśmy wcześniej, że forma ma tę metodę = "post" atrybutu,

692
00:41:27,210 --> 00:41:29,270
a to oznacza, że ​​będzie do żądania POST,

693
00:41:29,270 --> 00:41:32,630
więc nie będzie umieścić coś w adresie URL, a nie żądanie GET,

694
00:41:32,630 --> 00:41:36,860
które po prostu być zwolniony, jeśli tylko dostęp do strony z przeglądarki, na przykład.

695
00:41:36,860 --> 00:41:41,260
Teraz mamy powiedział, że chcesz, aby żądania HTTP POST

696
00:41:41,260 --> 00:41:44,840
do strony znajdującej się quote.php.

697
00:41:44,840 --> 00:41:51,490
Kiedy przesłać formularz, pamiętaj, możemy uzyskać dostęp do elementów wejściowych wewnątrz tej formy

698
00:41:51,490 --> 00:41:54,430
z tym $ _POST zmiennej.

699
00:41:54,430 --> 00:41:58,710
Do tej pory w historii nie byliśmy rzeczywiście wysłany wraz jeszcze żadnych danych.

700
00:41:58,710 --> 00:42:00,640
Właśnie powiedział robimy żądania AJAX

701
00:42:00,640 --> 00:42:03,200
i tu jest rodzaj wniosku robimy.

702
00:42:03,200 --> 00:42:07,090
Teraz trzeba rzeczywiście wysłać jakieś dane do strony.

703
00:42:07,090 --> 00:42:10,930
Aby to zrobić możemy wykorzystać tę właściwość o nazwie dane.

704
00:42:10,930 --> 00:42:14,950
Wartość tej właściwości jest rzeczywiście asocjacyjną.

705
00:42:14,950 --> 00:42:19,390
Powodem tego jest to, że pozwala na nie tylko wyślij 1 części danych.

706
00:42:19,390 --> 00:42:24,750
Dlatego mamy te nawiasy klamrowe o zagnieżdżone wewnątrz innych klamrowych nawiasach.

707
00:42:24,750 --> 00:42:29,680
Klawisze te asocjacyjnych będą samo

708
00:42:29,680 --> 00:42:32,630
jak nazwa przypisuje w naszych elementów formularza.

709
00:42:32,630 --> 00:42:35,740
To oznacza, że ​​jeśli wysłać wzdłuż klucza symbol

710
00:42:35,740 --> 00:42:41,870
co oznacza, że ​​moja strona może uzyskać dostęp do PHP te dane z $ _POST [symbol]

711
00:42:41,870 --> 00:42:44,640
podobnie jak zrobiliśmy wcześniej, kiedy byliśmy złożenie formularza.

712
00:42:44,640 --> 00:42:47,090
A teraz rzeczywiste dane chcemy wysłać

713
00:42:47,090 --> 00:42:50,790
będzie wewnątrz wartość tego asocjacyjnej.

714
00:42:50,790 --> 00:42:54,070
>> Mamy zapisane ten tekst w zmiennej o nazwie symbolu,

715
00:42:54,070 --> 00:42:57,380
i tak wysyłamy wraz teraz klawisz z symbolem

716
00:42:57,380 --> 00:43:01,380
a wartość co użytkownik wpisze w.

717
00:43:01,380 --> 00:43:06,270
Teraz zrobiliśmy to żądanie HTTP, nasz plik PHP wykonywany,

718
00:43:06,270 --> 00:43:11,480
i to będzie wysłać jakieś dane z powrotem teraz do klienta, że ​​właśnie to żądanie.

719
00:43:11,480 --> 00:43:15,220
Teraz musimy odpowiedzieć na cokolwiek serwer powiedział do nas.

720
00:43:15,220 --> 00:43:20,180
Aby to zrobić, że mamy ten ostatni obiekt nazywający się sukcesem.

721
00:43:20,180 --> 00:43:24,240
Wartość klucza sukcesu jest faktycznie będzie funkcja,

722
00:43:24,240 --> 00:43:26,910
i jest to jeden z naprawdę fajnych rzeczy, które możesz zrobić z JavaScript.

723
00:43:26,910 --> 00:43:31,720
Nie tylko można mieć wskazówki lub tablic jako wartości wewnątrz tablicy asocjacyjnej,

724
00:43:31,720 --> 00:43:34,170
można również funkcję.

725
00:43:34,170 --> 00:43:36,380
Więc mówiąc, sukces, to jest mój klucz.

726
00:43:36,380 --> 00:43:38,830
Dwukropek mówi tutaj jest wartość,

727
00:43:38,830 --> 00:43:41,810
i teraz to wartość funkcji właściwie.

728
00:43:41,810 --> 00:43:44,460
Tak więc nie trzeba dać tę funkcję nazwę per se.

729
00:43:44,460 --> 00:43:48,820
Możemy tylko powiedzieć, że to ma być jakiś sposób. To zajmie 1 argument.

730
00:43:48,820 --> 00:43:51,190
Argumentem tej funkcji będzie

731
00:43:51,190 --> 00:43:54,460
cokolwiek serwer wysłał nas od wniosku.

732
00:43:54,460 --> 00:43:57,750
Podobnie jak wtedy, gdy nasza przeglądarka wysyła żądanie, serwer wysyła coś w zamian

733
00:43:57,750 --> 00:43:59,060
a przeglądarka wyświetli ją,

734
00:43:59,060 --> 00:44:03,030
w kontekście AJAX właśnie złożony wniosek, serwer wysłał coś z powrotem,

735
00:44:03,030 --> 00:44:07,110
a teraz mamy, że reprezentowany jako ciąg.

736
00:44:07,110 --> 00:44:11,280
Z tego łańcucha Chciałbym tylko, że do wyświetlania na stronie.

737
00:44:11,280 --> 00:44:14,040
Aby to zrobić, że będę mieć ostatni selektor.

738
00:44:14,040 --> 00:44:17,570
Chcę wybrać element z ceną ID.

739
00:44:17,570 --> 00:44:20,710
To jest po prostu pusty div, które stworzyłem na stronie,

740
00:44:20,710 --> 00:44:26,640
i chcę ustawić zawartość tego div, aby być cokolwiek serwer wysłał nas z powrotem.

741
00:44:26,640 --> 00:44:30,280
Mam faktycznie zmodyfikowane quote.php trochę.

742
00:44:30,280 --> 00:44:33,460
>> Zamiast wywoływania renderowania i renderowania jakąś stronę,

743
00:44:33,460 --> 00:44:38,100
quote.php teraz jest po prostu zamiar wydrukować wartość zapasów jako łańcuch.

744
00:44:38,100 --> 00:44:41,880
Więc jeśli były faktycznie odwiedzić stronę, by po prostu zobaczyć, że małe ciąg

745
00:44:41,880 --> 00:44:45,030
niezależnie od ceny akcji jest.

746
00:44:45,030 --> 00:44:50,170
Ostatnią rzeczą, jaką musimy zrobić, jest tu po prostu upewnić się, że funkcja zwraca false.

747
00:44:50,170 --> 00:44:53,560
Co to mówi się, że jeśli jestem w środku programu obsługi zdarzeń

748
00:44:53,560 --> 00:44:57,300
i obsługi zdarzeń zwraca false zamiast zwracać true,

749
00:44:57,300 --> 00:45:01,510
oznacza to, że nie chcę, oryginalne wydarzenie na ogień.

750
00:45:01,510 --> 00:45:05,270
W tym przypadku, jeśli nie ma żadnego JavaScript i złożone formy,

751
00:45:05,270 --> 00:45:08,280
nasza przeglądarka będzie powiedzieć: "Mam zamiar wysłać te dane razem"

752
00:45:08,280 --> 00:45:10,130
a oni zamiar wysłać cię do innej strony.

753
00:45:10,130 --> 00:45:14,360
Ponieważ używamy AJAX teraz, nie ma potrzeby, aby wysłać użytkownika do innej strony.

754
00:45:14,360 --> 00:45:17,920
Jesteśmy po prostu będzie wyświetlać wyniki dynamicznie na tej samej stronie.

755
00:45:17,920 --> 00:45:21,460
Naprawdę nie chcesz, aby przejść w dowolnym miejscu, a ja chcę, aby pozostać na tej samej stronie.

756
00:45:21,460 --> 00:45:27,060
Więc powracając fałszywe, możemy zapewnić, że forma nie robi dla nas.

757
00:45:27,060 --> 00:45:31,170
Rzućmy okiem na to, co to rzeczywiście wygląda.

758
00:45:31,170 --> 00:45:34,180
Nasza strona cytat wygląda tak samo.

759
00:45:34,180 --> 00:45:37,240
Pozwól mi wyciągnąć inspektora tu więc możemy zobaczyć, co się dzieje.

760
00:45:37,240 --> 00:45:40,270
Sprawiają, że trochę mniej ogromny.

761
00:45:40,270 --> 00:45:44,590
Pamiętaj, że jeśli otwieramy zakładkę Network, to gdzie można zobaczyć wszystkie żądania HTTP

762
00:45:44,590 --> 00:45:47,570
, że dzieje się na stronie.

763
00:45:47,570 --> 00:45:52,890
>> Dla symbolu pozwól wpisać AAPL i kliknij Get Quote.

764
00:45:52,890 --> 00:45:56,720
Teraz dowiedzieliśmy się, że akcja Apple kosztuje pewną ilość dolarów

765
00:45:56,720 --> 00:46:00,410
Właśnie ukazał się na stronie, ale nie zmienił URL w ogóle.

766
00:46:00,410 --> 00:46:04,570
W rzeczywistości, o to żądania HTTP, które po prostu wykonane.

767
00:46:04,570 --> 00:46:09,980
Zrobiliśmy żądanie POST do quote.php. To ma sens.

768
00:46:09,980 --> 00:46:12,800
To jest to, co serwer wysłał nas z powrotem.

769
00:46:12,800 --> 00:46:16,320
To już nie ten gigantyczny dokument HTML z obrazami i tego typu rzeczy,

770
00:46:16,320 --> 00:46:20,920
to tylko wiersz tekstu, a następnie po prostu wyświetlany wiersz tekstu.

771
00:46:20,920 --> 00:46:26,290
Jeśli wrócimy do nagłówków i zobaczyć, co rzeczywiście wysłany wewnątrz tego żądania HTTP,

772
00:46:26,290 --> 00:46:33,950
Widzimy tu, że wysłaliśmy wzdłuż klucza symbol i wartość AAPL,

773
00:46:33,950 --> 00:46:36,430
czyli to, co użytkownik wpisze w.

774
00:46:36,430 --> 00:46:39,230
To jest ładne, ale to jeszcze trochę denerwujące.

775
00:46:39,230 --> 00:46:42,490
Muszę jeszcze kliknij ten przycisk, aby uzyskać notowania.

776
00:46:42,490 --> 00:46:45,880
Jesteśmy zajęci ludzie, a my nie mamy czasu do kliknięcia przycisków.

777
00:46:45,880 --> 00:46:49,910
Google sobie sprawę z tego jakiś czas temu, kiedy realizowane Google Instant.

778
00:46:49,910 --> 00:46:53,590
Co Google Instant nie jest jak piszesz to po prostu zacznie wyświetlać wyniki dla Ciebie

779
00:46:53,590 --> 00:46:56,520
więc nie musisz się martwić o nawet klikając Szukaj.

780
00:46:56,520 --> 00:46:58,730
Właściwie historia zabawy związane z tym.

781
00:46:58,730 --> 00:47:01,100
Gdy Google Instant wyszedł, ludzie byli jak "Whoa, to jest super niesamowite."

782
00:47:01,100 --> 00:47:02,540
"To jest tak cool."

783
00:47:02,540 --> 00:47:05,950
I student w dół w Stanford, który był 19 w czasie

784
00:47:05,950 --> 00:47:09,000
wykonane z tej witryny o nazwie YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Wszystkie Natychmiastowe YouTube nie jest skutecznie wyszukiwać YouTube natychmiast.

786
00:47:13,170 --> 00:47:17,020
Więc zamiast iść do YouTube.com i uderzył Szukaj,

787
00:47:17,020 --> 00:47:21,650
Kiedy zaczniesz pisać na YouTube tanie coś jak CS50,

788
00:47:21,650 --> 00:47:25,320
możemy tu zobaczyć, że jest to próba na wolnym połączeniu internetowym

789
00:47:25,320 --> 00:47:28,500
wypełnić te wyniki na żywo.

790
00:47:28,500 --> 00:47:35,590
Aby to zrobić, że rzeczywiście możemy zrobić bardzo prostą modyfikację do naszego pliku quote.js.

791
00:47:35,590 --> 00:47:40,900
Teraz jesteśmy dołączenie tego zdarzenia, gdy formularz jest składany.

792
00:47:40,900 --> 00:47:43,760
Tak naprawdę nie chcesz, aby użytkownik przedstawia tę postać już,

793
00:47:43,760 --> 00:47:48,570
więc niech zamiast strzelać to wydarzenie za każdym razem, gdy użytkownik naciśnie klawisz.

794
00:47:48,570 --> 00:47:53,200
Aby to zrobić Niech najpierw zmienić zdarzenie z przedstawia keyup.

795
00:47:53,200 --> 00:47:55,740
To oznacza, że ​​zamiast czekać na formularz do przedłożenia

796
00:47:55,740 --> 00:47:58,490
każdym naciśnięciu przycisku, coś się stało.

797
00:47:58,490 --> 00:48:02,030
To nie ma sensu, aby dołączyć ten KeyUp wydarzenie w całej postaci.

798
00:48:02,030 --> 00:48:05,080
Naprawdę tylko o tym polu wyszukiwania.

799
00:48:05,080 --> 00:48:09,320
>> Aby zaznaczyć, że teraz możemy zmienić to być, a nie postaci-cytatem,

800
00:48:09,320 --> 00:48:14,220
Formularz-quote i będziemy mieć wkład (typ = tekst) lub możemy powiedzieć (nazwa symbolu =) -

801
00:48:14,220 --> 00:48:16,420
co chcemy.

802
00:48:16,420 --> 00:48:18,650
Teraz jest ostatnia rzecz, którą musimy zrobić.

803
00:48:18,650 --> 00:48:21,190
Pamiętaj tu kiedy powiedzieliśmy return false

804
00:48:21,190 --> 00:48:24,370
powiedzieliśmy, że nie chcemy, że zdarzenie domyślne na ogień.

805
00:48:24,370 --> 00:48:26,390
Ale tak się składa, że ​​jeśli możemy wyłączyć, że teraz,

806
00:48:26,390 --> 00:48:29,660
cokolwiek wpisać w nie będzie pojawiać się już w przeglądarce

807
00:48:29,660 --> 00:48:33,000
bo byłoby to domyślne zachowanie, wpisując w polu tekstowym.

808
00:48:33,000 --> 00:48:38,660
Nie chcemy już do zastąpienia, że, więc niech to zniszczyć to return false.

809
00:48:38,660 --> 00:48:44,800
Jeśli mamy z tym że i odświeżyć stronę, teraz gdy zaczynam wpisywać AAPL

810
00:48:44,800 --> 00:48:50,160
zobaczysz, że cena akcji na dole tutaj kończy się automatycznie.

811
00:48:50,160 --> 00:48:53,150
Więc tutaj jest CS50 Finance Instant.

812
00:48:53,150 --> 00:48:55,860
Właściwie zabawy opowieść o YouTube błyskawiczne

813
00:48:55,860 --> 00:48:59,420
jest to, że uczeń po prostu rodzaj napisał ją jako 1-noc projektu,

814
00:48:59,420 --> 00:49:03,800
a następnego dnia otrzymał propozycję pracy przez YouTube CEO.

815
00:49:03,800 --> 00:49:10,610
Tak proste, to CS50 studenci, twoje ostateczne projekty mogą Ci praca w serwisie YouTube.

816
00:49:10,610 --> 00:49:14,720
Coś w tym jest naprawdę fajny pomysł na projekt końcowy, prawda?

817
00:49:14,720 --> 00:49:18,170
Mieliśmy trochę istniejące funkcje, że chcieliśmy zintegrować z.

818
00:49:18,170 --> 00:49:20,330
Możemy poprawić doświadczenia użytkownika trochę,

819
00:49:20,330 --> 00:49:24,340
i nagle szukają czegoś na YouTube błyskawiczne może być dużo łatwiejsze

820
00:49:24,340 --> 00:49:27,290
niż szukając jej na regularnym YouTube.

821
00:49:27,290 --> 00:49:30,790
Więc to jest AJAX w pigułce.

822
00:49:30,790 --> 00:49:34,860
>> W przykładach, że Józef był wykazujących, widzieliśmy wiele autocompletes,

823
00:49:34,860 --> 00:49:39,250
i te autocompletes są naprawdę, naprawdę przydatny, ponieważ nie trzeba pamiętać -

824
00:49:39,250 --> 00:49:41,770
Na przykład, jeśli nie pamiętam cenę akcji dla Apple

825
00:49:41,770 --> 00:49:45,110
i po prostu wiem, że to aa coś, a nie tylko mówić do mnie,

826
00:49:45,110 --> 00:49:48,740
"Akcji tej rzeczy kosztuje tyle pieniędzy"

827
00:49:48,740 --> 00:49:52,540
Chciałbym trochę lubią wiedzieć, co zapasy zaczynają się aa.

828
00:49:52,540 --> 00:49:58,340
Możemy to zrobić, naprawdę ładnie z biblioteką Bootstrap, który jest już wliczone

829
00:49:58,340 --> 00:50:01,380
wewnątrz CS50 Finansów.

830
00:50:01,380 --> 00:50:09,390
Jeśli przyjdziesz tu do tagu JavaScript i przewiń do wpisywanie znaków z wyprzedzeniem,

831
00:50:09,390 --> 00:50:13,730
jest to po prostu fajny plugin, że ktoś już napisał dla nas,

832
00:50:13,730 --> 00:50:16,980
i możemy swobodnie korzystać z jego funkcjonalności takiego.

833
00:50:16,980 --> 00:50:21,410
Wpisałem w i tutaj jest lista niektórych państw, które rozpoczynają się od A.

834
00:50:21,410 --> 00:50:25,360
Powiedzmy, że myślę, że to jest naprawdę fajne i to jest czas dla mnie jak to na mojej stronie.

835
00:50:25,360 --> 00:50:28,300
Okazuje się, że jest to naprawdę proste.

836
00:50:28,300 --> 00:50:32,810
Miejmy przeskoczyć żeby quote3.js.

837
00:50:34,890 --> 00:50:37,380
Mój plik wygląda trochę inaczej.

838
00:50:37,380 --> 00:50:39,700
Tu wszystkie moje rzeczy AJAX jest to samo.

839
00:50:39,700 --> 00:50:43,170
Chcę, aby załadować dane zbiorów bez konieczności przechodzenia do innej strony.

840
00:50:43,170 --> 00:50:46,220
Ale teraz chcę, aby korzystać z tej wtyczki.

841
00:50:46,220 --> 00:50:51,020
Dokumentacja Bootstrap ma świetne przykłady jak dokładnie można to zrobić.

842
00:50:51,020 --> 00:50:54,350
Chcę powiedzieć: "Oto wejście że chcę Autouzupełnianie"

843
00:50:54,350 --> 00:50:56,640
i mam zamiar wywołać tę funkcję o nazwie wpisywanie znaków z wyprzedzeniem,

844
00:50:56,640 --> 00:50:59,730
i to będzie obsługiwać wszystkie wpisywanie znaków z wyprzedzeniem rzeczy dla nas.

845
00:50:59,730 --> 00:51:02,090
Będzie on zainicjować listy będzie zrobić wszystkie nasze filtrowania.

846
00:51:02,090 --> 00:51:06,680
Jedyną rzeczą, to musi wiedzieć, jakie dane mamy autocompleting dalej.

847
00:51:06,680 --> 00:51:10,480
Tak więc okazało się, ten klucz tylko poprzez czytanie dokumentacji i patrząc na przykładach.

848
00:51:10,480 --> 00:51:14,150
Jeśli dać mu klucz źródła, wartość tego klucza

849
00:51:14,150 --> 00:51:17,770
to tylko niektóre rzeczy, array Chcę Autouzupełnianie.

850
00:51:17,770 --> 00:51:20,180
Zmienna ta pochodzi z tego drugiego.

851
00:51:20,180 --> 00:51:23,400
I otworzyć symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> To symbols.js właśnie to naprawdę duża tablica zawierająca ciągi

853
00:51:27,980 --> 00:51:32,080
wszystkich tych symboli free z NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Jeśli chcę wrócić do HTML, tak jharvard, vhosts, globalhost, html, szablony,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Ponieważ jest to teraz nazywa quote3.js, pozwól mi zmienić plik JavaScript Jestem tym tutaj.

857
00:51:50,910 --> 00:51:55,110
Teraz mam quote3.js, więc mam zamiar ładować w tym oddzielnym pliku JavaScript

858
00:51:55,110 --> 00:51:57,910
taki, który ma tę Bootstrap autouzupełniania.

859
00:51:57,910 --> 00:52:04,430
Teraz, kiedy wrócić do przeglądarki, odświeżyć stronę, i rozpocząć wpisywanie AA,

860
00:52:04,430 --> 00:52:06,880
jest mój autocomplete. I to było naprawdę takie proste.

861
00:52:06,880 --> 00:52:11,400
Miałem 1 wiersz kodu po prostu powiedział: "Oto rzeczy, które chcę Autouzupełnianie"

862
00:52:11,400 --> 00:52:16,590
i nagle mam to naprawdę miły funkcjonalność z nie dużo całego wysiłku w ogóle.

863
00:52:16,590 --> 00:52:19,810
Jak jesteś rozwój stron internetowych, a szczególnie na przedniej stronie końca rzeczy,

864
00:52:19,810 --> 00:52:21,840
masz zamiar znaleźć tak jest dużo.

865
00:52:21,840 --> 00:52:25,700
Jest dużo, dużo, dużo naprawdę świetnych i darmowych bibliotek tam

866
00:52:25,700 --> 00:52:30,190
które sprawiają, że bardzo proste do zrobienia rzeczy, jak to.

867
00:52:30,190 --> 00:52:37,230
Czy ktoś może myśleć o żadnych wad po prostu na tym dużym autocompleting liście symboli?

868
00:52:37,230 --> 00:52:41,580
Co może być coś, co nie jest najlepsze z tego podejścia?

869
00:52:42,790 --> 00:52:45,960
Tak. >> [Uczeń] Czas, jeśli masz dużo [niesłyszalne]

870
00:52:45,960 --> 00:52:50,420
Tak. Teraz jesteśmy pobierania tego ogromny plik JavaScript i jest wiele symboli.

871
00:52:50,420 --> 00:52:54,360
I tak, jeśli mamy mnóstwo rzeczy, może to trochę zwiększyć opóźnienie nie tylko szukają

872
00:52:54,360 --> 00:52:56,600
ale również pobierając aktualny plik.

873
00:52:56,600 --> 00:52:58,670
Great. Coś jeszcze?

874
00:53:01,950 --> 00:53:05,280
Teraz nie ma prawdziwe poczucie znaczenia.

875
00:53:05,280 --> 00:53:08,190
Jeśli wpisać w kategorii A, firm, które pojawiają się tutaj

876
00:53:08,190 --> 00:53:11,220
może nie być najbardziej popularne firmy, które zaczynają się A.

877
00:53:11,220 --> 00:53:17,130
>> Zanim przejdę do Apple, to może zająć trochę więcej znaków, aby znaleźć to, co szukam.

878
00:53:17,130 --> 00:53:20,420
Ta druga nie ma tego poczucia znaczenia.

879
00:53:20,420 --> 00:53:24,400
To jest po prostu powiedzieć: "Wszystko, co pasuje idę do wyświetlania".

880
00:53:24,400 --> 00:53:30,510
Zamiast tego chciałbym jakoś zintegrować pewne znaczenie do moich poszukiwań.

881
00:53:30,510 --> 00:53:36,440
Jeśli pójdę tutaj do Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Gdy próbuję wprowadzić symbol na stronie Yahoo! Finansów

883
00:53:42,100 --> 00:53:52,310
i rozpocząć wpisywanie goog, mam ładny listę rzeczy.

884
00:53:52,310 --> 00:53:57,100
Oczywiste jest, że wygląda jak Yahoo! Finance robi coś bardziej sprytny tutaj.

885
00:53:57,100 --> 00:53:59,790
Mają pewne znaczenie, i mają też dodatkowe informacje

886
00:53:59,790 --> 00:54:01,430
jak nazwa akcji.

887
00:54:01,430 --> 00:54:05,850
To coś, co tak naprawdę nie można dostać tylko z mojej listy stanie symboli.

888
00:54:05,850 --> 00:54:09,520
Chcę to i tak mam zamiar go wziąć.

889
00:54:09,520 --> 00:54:11,790
Aby to zrobić zróbmy kilka rzeczy.

890
00:54:11,790 --> 00:54:15,580
Niech najpierw otworzyć Inspektora na tej stronie

891
00:54:15,580 --> 00:54:18,100
ponieważ widzieliśmy, że ta strona nie jest przeładunek na wszystkich,

892
00:54:18,100 --> 00:54:21,960
więc to pewnie jakoś za pomocą AJAX do ładowania jego danych.

893
00:54:21,960 --> 00:54:23,920
Możemy dowiedzieć się, co dane jest to ładowanie.

894
00:54:23,920 --> 00:54:28,390
Jeśli I kliknij na tej karcie sieciowej, to będą wszystkie wnioski, które zaczynają być zwolniony.

895
00:54:28,390 --> 00:54:34,020
Teraz jeśli wpisać w mazi, możemy zobaczyć, że właśnie dostałem nowe żądanie HTTP.

896
00:54:34,020 --> 00:54:37,490
Prawdopodobnie jest to w przypadku, gdy pochodzą dane.

897
00:54:37,490 --> 00:54:41,990
Rzeczywiście, jeśli spojrzeć na to zawartości, co jest nieco dziwne nazwy,

898
00:54:41,990 --> 00:54:46,930
widzimy, że to jest dokładnie tam, gdzie Yahoo wysyłając swoje dane.

899
00:54:46,930 --> 00:54:53,400
>> Został utworzony oddzielny plik o nazwie suggest.php to bardzo podobne w duchu do wyszukiwania funkcji.

900
00:54:53,400 --> 00:54:57,730
Jest to w zasadzie zamiar zrobić kwerendę do URL Yahoo, wrócić niektóre dane,

901
00:54:57,730 --> 00:54:59,750
i wysłać go z powrotem do mnie.

902
00:54:59,750 --> 00:55:02,570
Teraz, zamiast tego duży, ogromną listę symboli,

903
00:55:02,570 --> 00:55:05,280
Można używać miłych rzeczy Yahoo adekwatności,

904
00:55:05,280 --> 00:55:08,150
i nie trzeba pobierać ten ogromny plik JavaScript.

905
00:55:08,150 --> 00:55:12,040
Jestem tylko będzie ciągnąć w dół faktycznie odpowiednich symboli giełdowych.

906
00:55:12,040 --> 00:55:13,960
Miejmy wskoczyć do tego.

907
00:55:13,960 --> 00:55:17,360
Więc html, js. Jesteśmy teraz w quote4.

908
00:55:17,360 --> 00:55:22,120
Teraz jesteśmy już nie korzysta, że ​​duże listę plików JavaScript.

909
00:55:22,120 --> 00:55:24,430
Ale jest mały rodzaj problemu projektowania tutaj.

910
00:55:24,430 --> 00:55:28,200
Powiedzieliśmy, że w AJAX jest asynchroniczna.

911
00:55:28,200 --> 00:55:31,000
Co to oznacza to, że kiedy złożyć wniosek o AJAX,

912
00:55:31,000 --> 00:55:36,490
tak tu na linii 8, to gdzie moja prośba AJAX jest faktycznie zwolniony.

913
00:55:36,490 --> 00:55:40,370
Powiedzmy, że teraz mam jakiś kod tu, że zamierza zrobić kilka rzeczy

914
00:55:40,370 --> 00:55:43,930
jak ostrzega użytkownika, czy coś zmienić na stronie.

915
00:55:43,930 --> 00:55:49,830
Co nie wydarzy się to przeglądarka nie będzie czekać na to żądanie, aby kontynuować

916
00:55:49,830 --> 00:55:53,480
przed wejściem w dół i uderzając tę ​​linię.

917
00:55:53,480 --> 00:55:55,900
To asynchroniczny część.

918
00:55:55,900 --> 00:55:58,400
To będzie, aby ten wniosek i powiedzieć: "Kiedy skończysz,

919
00:55:58,400 --> 00:56:03,080
"Wrócić i nazywają tę funkcję, że powiedziałem wam, aby zadzwonić w środku sukcesu."

920
00:56:03,080 --> 00:56:07,300
To oznacza, że ​​nie można po prostu pobrać wszystkie zapasy wcześniej.

921
00:56:07,300 --> 00:56:10,300
Musimy sprawić, by wniosek i czekać na coś, aby wrócić.

922
00:56:10,300 --> 00:56:13,330
Oznacza to, że przed, możemy po prostu powiedzieć, Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Oto lista rzeczy, chcę żebyś Autouzupełnianie".

924
00:56:15,580 --> 00:56:18,950
Nie możemy już zrobić, ponieważ już nie wiemy

925
00:56:18,950 --> 00:56:21,780
co chcemy faktycznie autouzupełnianie na.

926
00:56:21,780 --> 00:56:25,190
Na szczęście, Bootstrap myśl o tym, bo to są inteligentnych facetów tam,

927
00:56:25,190 --> 00:56:30,160
i rzeczywiście dał nam inny sposób załadować to wpisywanie znaków z wyprzedzeniem plugin.

928
00:56:30,160 --> 00:56:35,630
Wcześniej, wartość tej właściwości source właśnie ta wielka tablica rzeczy Autouzupełnianie.

929
00:56:35,630 --> 00:56:39,580
>> Teraz właściwość source jest faktycznie funkcją,

930
00:56:39,580 --> 00:56:44,580
a celem tej funkcji jest, aby dowiedzieć się, jakie rzeczy do Autouzupełnianie są.

931
00:56:44,580 --> 00:56:48,730
Jak to się dzieje, aby to wyjaśnić to, że będzie prosić Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
co najlepsze rzeczy do autouzupełniania są.

933
00:56:51,750 --> 00:56:54,500
Aby to zrobić, że mam zamiar zrobić bardzo podobny wniosek AJAX.

934
00:56:54,500 --> 00:56:59,010
Zamierzam poprosić tę stronę w suggest.php.

935
00:56:59,010 --> 00:57:01,360
Chcę wysłać wraz symboli nadal.

936
00:57:01,360 --> 00:57:05,570
A teraz mój sukces, dokumentacja Bootstrap powiedział mi

937
00:57:05,570 --> 00:57:09,130
że w celu wypełnienia, że ​​lista rzeczy,

938
00:57:09,130 --> 00:57:14,370
wszystko co musisz zrobić, to przekazać w tej tablicy teraz do funkcji zwrotnej.

939
00:57:14,370 --> 00:57:15,660
Ale chwileczkę.

940
00:57:15,660 --> 00:57:20,240
Jeśli to ma być tablicą i AJAX wysyła mnie tekst,

941
00:57:20,240 --> 00:57:22,720
jak to możliwe?

942
00:57:22,720 --> 00:57:27,910
Wprowadza nowy sposób wymiany danych zwanych JSON.

943
00:57:27,910 --> 00:57:33,000
W tym przypadku nie jesteśmy tylko odesłanie prosty ciąg tekstu.

944
00:57:33,000 --> 00:57:37,670
Teraz mamy do czynienia z bardziej złożonym tej liście symboli giełdowych.

945
00:57:37,670 --> 00:57:41,730
Symbole te zbiory mogą obejmować takie rzeczy jak nazwy firmy lub ceny bieżące.

946
00:57:41,730 --> 00:57:47,550
Tylko przy użyciu duży długi ciąg, który nie jest sformatowany w jakiejkolwiek sposób przewidywalny

947
00:57:47,550 --> 00:57:51,970
nie będzie to najlepszy sposób, aby uzyskać te dane z serwera Yahoo do mnie

948
00:57:51,970 --> 00:57:54,540
w taki sposób, że można łatwo zrozumieć.

949
00:57:54,540 --> 00:58:01,280
JSON jest technologia, która wykorzystuje jak tworzymy tablice asocjacyjne w JavaScript.

950
00:58:01,280 --> 00:58:04,510
To wygląda trochę jak asocjacyjnej JavaScript tablicy

951
00:58:04,510 --> 00:58:06,600
w rzeczywistości, to dlatego, że są.

952
00:58:06,600 --> 00:58:09,710
JSON oznacza JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Jest to w zasadzie uzgodniono formatu przesyłania danych tam iz powrotem.

954
00:58:15,020 --> 00:58:18,280
Tutaj ten obiekt JSON lub ten JSON asocjacyjna

955
00:58:18,280 --> 00:58:21,010
wysyła mi jakieś dane na temat kursu.

956
00:58:21,010 --> 00:58:25,110
>> Kluczami tablicy są takie rzeczy oczywiście, że ma wartość CS50,

957
00:58:25,110 --> 00:58:29,140
i tu możemy zobaczyć, że mogę mieć wartość, która jest tablicą.

958
00:58:29,140 --> 00:58:32,730
I nie trzeba robić takie rzeczy jak pomijało strun i szukać przecinkami

959
00:58:32,730 --> 00:58:35,330
i robić szalone rzeczy, tak.

960
00:58:35,330 --> 00:58:38,820
Bo to jest zadeklarowany w tym formacie JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript i jQuery już funkcji do konwertowania ciągu znaków

962
00:58:43,510 --> 00:58:48,140
który wygląda jak ten JSON do rzeczywistej tablicy asocjacyjnej JavaScript

963
00:58:48,140 --> 00:58:50,440
że możemy pracować.

964
00:58:50,440 --> 00:58:56,660
Robi, że jest tak proste jak powiedzenie, że już nie jest ten plik, suggest.php,

965
00:58:56,660 --> 00:58:59,040
wysyłając do mnie po prostu ciąg tekstu,

966
00:58:59,040 --> 00:59:01,950
ale wiem, że to będzie wysyłać do mnie JSON.

967
00:59:01,950 --> 00:59:06,760
To oznacza, że ​​mogą być JSON przekształcona asocjacyjnej JavaScript tablicy.

968
00:59:06,760 --> 00:59:10,830
I tak jQuery, chciałbym by to zrobić dla mnie.

969
00:59:10,830 --> 00:59:13,990
To oznacza, że ​​parametr odpowiedzi tutaj

970
00:59:13,990 --> 00:59:16,070
nie jest to już tylko ciąg.

971
00:59:16,070 --> 00:59:19,860
Ponieważ mówiłem jQuery że nadchodzi jakiś JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery będzie na tyle sprytny, aby powiedzieć: "Chciałeś JSON?"

973
00:59:22,950 --> 00:59:26,890
"Idę do konwersji, że do tablicy asocjacyjnej dla Ciebie."

974
00:59:26,890 --> 00:59:32,100
Miejmy faktycznie przyjrzeć karcie Sieć raz mamy quote4.js.

975
00:59:32,100 --> 00:59:35,400
Będziemy to zmienić i odświeżyć stronę.

976
00:59:37,150 --> 00:59:41,250
Teraz mam zamiar wpisać-ponownie.

977
00:59:41,250 --> 00:59:45,600
Zrobiłem kilka wniosków do suggest.php, ale teraz ta odpowiedź,

978
00:59:45,600 --> 00:59:48,670
a nie tylko napisu, to JSON.

979
00:59:48,670 --> 00:59:52,580
Więc mam otwarty nawias klamrowy, mówiąc: "Oto nadchodzi asocjacyjna".

980
00:59:52,580 --> 00:59:56,830
>> Pierwszy, to klucz asocjacyjnej nazywa symbole,

981
00:59:56,830 --> 01:00:00,240
a następnie o to tablica wszystkich odpowiednich symboli

982
01:00:00,240 --> 01:00:04,820
tak teraz z Yahoo! Finance, nie z tej gigantycznej liście.

983
01:00:06,110 --> 01:00:10,630
W ten sposób można po prostu zapełnić ten plugin Autouzupełniania

984
01:00:10,630 --> 01:00:14,280
z niektórych danych, które nie pochodzi z lokalnego pliku, który już uprzednio

985
01:00:14,280 --> 01:00:17,490
ale od czegoś innego.

986
01:00:17,490 --> 01:00:21,160
Okazuje się, że rzeczywiście możemy skorzystać z technologii o nazwie JSONP,

987
01:00:21,160 --> 01:00:27,420
lub JSON z wyściółką, które eliminują ten suggest.php pośrednika.

988
01:00:27,420 --> 01:00:34,010
Ale zamiast to robić, niech zamiast przyjrzeć się w jaki sposób można poprawić to jeszcze bardziej.

989
01:00:34,010 --> 01:00:36,040
Bardzo podoba mi się wpisywanie znaków z wyprzedzeniem bootstrap. To bardzo miłe.

990
01:00:36,040 --> 01:00:39,570
Ale jesteśmy coraz dobry w JavaScripcie i chcemy trochę to zrobić sami,

991
01:00:39,570 --> 01:00:43,870
może spojrzeć na to, co ten plugin można robić.

992
01:00:43,870 --> 01:00:46,500
Niech już nie używać tego wpisywanie znaków z wyprzedzeniem rzecz,

993
01:00:46,500 --> 01:00:50,550
i niech starają się tę listę sugerowanych akcji sami.

994
01:00:50,550 --> 01:00:53,790
Tutaj w quote6.php zamierzamy rozpocząć w ten sam sposób.

995
01:00:53,790 --> 01:00:58,050
Za każdym razem ktoś wpisze coś, chcemy złożyć wniosek o AJAX.

996
01:00:58,050 --> 01:01:01,590
To jest podobne do naszego pierwotnego CS50 błyskawiczne Finansów.

997
01:01:01,590 --> 01:01:05,020
Niż zwrócenie się do quote.php,

998
01:01:05,020 --> 01:01:08,530
jesteśmy teraz składając wniosek do tego samego pliku, tak jak wcześniej, to suggest.php,

999
01:01:08,530 --> 01:01:12,460
który po prostu się do ściągania danych z Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Znowu jesteśmy nadal spodziewa JSON, ale teraz od wpisywanie znaków z wyprzedzeniem nie robi to dla nas,

1001
01:01:19,480 --> 01:01:24,850
musimy także wysłać wraz wartość, która jest w środku obecnego polu tekstowym.

1002
01:01:24,850 --> 01:01:28,120
Teraz już wiemy, o co pytać Yahoo! Finance dla,

1003
01:01:28,120 --> 01:01:34,160
a więc teraz tutaj jest funkcja, że ​​chcemy wykonać raz prośba kończy.

1004
01:01:34,160 --> 01:01:36,520
Nie mamy plugin do listy dla nas,

1005
01:01:36,520 --> 01:01:40,630
tak tutaj jest, dokąd faktycznie zbuduje listę sugestii.

1006
01:01:40,630 --> 01:01:44,850
Aby to zrobić, podobnie jak w PHP, możemy złączyć te duże ciągi HTML

1007
01:01:44,850 --> 01:01:48,170
następnie wydrukować je, możemy zrobić dokładnie taki sam coś w JavaScripcie.

1008
01:01:48,170 --> 01:01:51,850
Najpierw jedziemy na rozpoczęcie ten ciąg nazwie sugestie,

1009
01:01:51,850 --> 01:01:54,590
i ten napis jest po prostu będzie zawierać niektóre HTML.

1010
01:01:54,590 --> 01:01:58,320
Chcemy, aby być lista rzeczy, więc mamy zamiar zacząć od tego znacznika listy

1011
01:01:58,320 --> 01:02:03,340
a teraz idziemy do iterować wszystkie symbole, które zostały zwrócone do nas.

1012
01:02:03,340 --> 01:02:06,500
Zapamiętaj, bo mówiliśmy dataType: 'json', to nie jest ciągiem.

1013
01:02:06,500 --> 01:02:09,500
To jest już tablica dla nas. To jest naprawdę fajne.

1014
01:02:09,500 --> 01:02:13,790
Możemy po prostu powiedzieć: "Chcę, byś dołączyć element listy."

1015
01:02:13,790 --> 01:02:16,000
Umieścimy go wewnątrz elementu A w boku, że

1016
01:02:16,000 --> 01:02:19,030
dajemy klasę sugestie więc wiemy co to jest,

1017
01:02:19,030 --> 01:02:23,880
a teraz jest symbolem, że wróciliśmy z Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Po utworzeniu element dla każdego z symboli staliśmy z powrotem,

1019
01:02:27,230 --> 01:02:30,100
chcemy po prostu zamknąć listę.

1020
01:02:30,100 --> 01:02:33,040
Więc teraz sugestie reprezentuje ten mały fragment HTML

1021
01:02:33,040 --> 01:02:37,860
że kiedy umieścić na stronie będzie lista rzeczy szukamy.

1022
01:02:37,860 --> 01:02:41,070
Teraz rzeczywiście wprowadzone, że na stronie.

1023
01:02:41,070 --> 01:02:46,390
Aby to zrobić, że mam rzeczywiście stworzyła kolejną pustą div i dałem mu identyfikator sugestie.

1024
01:02:46,390 --> 01:02:52,520
Podobnie jak możemy ustawić zawartość div że wyświetlenia ceny danych giełdowych

1025
01:02:52,520 --> 01:02:58,600
teraz po prostu chcę, aby ustawić zawartość div do cokolwiek to ciąg jest

1026
01:02:58,600 --> 01:03:00,290
który zawiera te symbole.

1027
01:03:00,290 --> 01:03:07,650
Korzystając z tej metody HTML zmienna ta sugestie, ten ciąg jest ciągiem HTML.

1028
01:03:07,650 --> 01:03:13,490
Chcę, żebyś się, że HTML i umieścić go wewnątrz div nazwie sugestie.

1029
01:03:13,490 --> 01:03:15,680
Właśnie dołączane coś DOM teraz.

1030
01:03:15,680 --> 01:03:20,360
Dodaliśmy kilka nowych elementów do DOM że możemy wyświetlić na stronie.

1031
01:03:20,360 --> 01:03:22,540
Zobaczmy, jak to wygląda.

1032
01:03:22,540 --> 01:03:29,110
Jeśli załadować quote6 a teraz wracają,

1033
01:03:29,110 --> 01:03:34,480
teraz, kiedy zaczniesz pisać AAPL, nie mamy już tego Bootstrap autouzupełniania,

1034
01:03:34,480 --> 01:03:38,470
ale teraz mamy z tej listy, które zrobiliśmy sami.

1035
01:03:38,470 --> 01:03:43,230
To jest trochę brzydsze nieco niż wpisywanie znaków z wyprzedzeniem bootstrap np.

1036
01:03:43,230 --> 01:03:45,580
ale to nie pozwala nam na jeszcze jedną rzecz.

1037
01:03:45,580 --> 01:03:48,660
Kiedy szukaliśmy w tym pluginie bootstrap

1038
01:03:48,660 --> 01:03:52,590
widzieliśmy, że kiedy autocompleted, jeden z autouzupełniania wartości był AAPL.

1039
01:03:52,590 --> 01:03:54,820
To nie może być tak pomocny.

1040
01:03:54,820 --> 01:03:59,100
Jako użytkownik, nie może natychmiast rozpoznać wszystkie symbole akcji.

1041
01:03:59,100 --> 01:04:02,370
Co jestem chyba bardziej prawdopodobne uznają są spółki rzeczywiste nazwy.

1042
01:04:02,370 --> 01:04:05,310
Więc nie byłoby naprawdę przydatne, gdy zamiast mówić AAPL

1043
01:04:05,310 --> 01:04:07,970
to powiedział coś w stylu Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Bo mamy ten przewrócił się, czy naprawdę możemy to łatwo zrobić.

1045
01:04:12,240 --> 01:04:17,630
Otwórzmy nasze ostatni plik tu przytoczyć, więc quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Samo. Właśnie stworzyła kolejną plik PHP, który powróci do nas więcej niż tylko symboli.

1047
01:04:23,200 --> 01:04:25,550
Będzie on również dać nam powrót spółki imiona.

1048
01:04:25,550 --> 01:04:28,150
I tak robimy to samo. Robimy żądania AJAX.

1049
01:04:28,150 --> 01:04:32,370
Gdy wniosek jest zakończone, będziemy wykonywać tę funkcję, tu

1050
01:04:32,370 --> 01:04:36,520
i ta funkcja będzie budować wielki ciąg elementów.

1051
01:04:36,520 --> 01:04:39,520
Ale różnica jest to, że wartość tych list nie jest już tylko symbolem,

1052
01:04:39,520 --> 01:04:45,370
teraz jest nazwa.

1053
01:04:45,370 --> 01:04:47,070
Tak więc mamy jeden mały problem.

1054
01:04:47,070 --> 01:04:51,590
Kiedy używamy naszego odnośnika, musimy jakoś przekazać to symbol.

1055
01:04:51,590 --> 01:04:54,950
Nie możemy przejść odnośnika coś Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Musimy przekazać go MSFT.

1057
01:04:57,900 --> 01:05:01,640
Kiedy piszemy HTML, mamy wiele miłych cech wbudowanych.

1058
01:05:01,640 --> 01:05:05,440
Mógł z nim związane href lub klasy.

1059
01:05:05,440 --> 01:05:08,230
Ale to, co naprawdę potrzebne to dla każdego z tych linków

1060
01:05:08,230 --> 01:05:11,120
mają symbol giełdowy skojarzony.

1061
01:05:11,120 --> 01:05:14,240
Nie ma wbudowanego atrybutu HTML na symbol akcji,

1062
01:05:14,240 --> 01:05:21,010
ale na szczęście, HTML5 pozwala nam tworzyć własne cechy, by być, co chcemy.

1063
01:05:21,010 --> 01:05:24,620
Mówiąc danych symbol, już wprowadzono nowy atrybut

1064
01:05:24,620 --> 01:05:29,350
którego imię po prostu składa się, i to jest w porządku, bo poprzedził go z tymi danymi.

1065
01:05:29,350 --> 01:05:34,270
Będziemy przechowywać wewnątrz tam symbol z magazynu teraz.

1066
01:05:34,270 --> 01:05:39,590
Co to oznacza to, że nawet jeśli mamy do wyświetlania wartości nazwy spółki

1067
01:05:39,590 --> 01:05:43,380
wewnątrz nasz autouzupełnianie, wciąż pamiętając, symbol

1068
01:05:43,380 --> 01:05:47,110
, który jest związany z każdym firmy.

1069
01:05:47,110 --> 01:05:50,350
Sposób, w jaki to robisz jest wewnątrz tego samego elementu.

1070
01:05:50,350 --> 01:05:52,930
To znaczy, że musimy dokonać jeszcze jednej zmiany.

1071
01:05:52,930 --> 01:05:57,090
Kiedy kliknij go teraz, musimy faktycznie skorzystać z atrybutu symbolu

1072
01:05:57,090 --> 01:06:00,220
a nie tylko jego wartość.

1073
01:06:00,220 --> 01:06:05,010
Jeśli będziemy z powrotem w górę, przywiązujemy obsługi zdarzeń na sugestie.

1074
01:06:05,010 --> 01:06:09,280
Gdy jeden z tych sugestii kliknięciu teraz, chcę coś zrobić.

1075
01:06:09,280 --> 01:06:13,160
To, co chcę zrobić, to zmienić wartość tego pola.

1076
01:06:13,160 --> 01:06:16,100
Teraz chcę, aby ustawić tę samą funkcję Val.

1077
01:06:16,100 --> 01:06:21,060
>> Więc bez żadnych argumentów funkcja val zwraca do was, co jest już w polu tekstowym,

1078
01:06:21,060 --> 01:06:27,070
ale jeśli dać mu łańcuch, to zajmie ten ciąg i umieścić go w polu tekstowym.

1079
01:06:27,070 --> 01:06:28,980
Jestem zaznaczając jego pole tekstowe, w ten sam sposób.

1080
01:06:28,980 --> 01:06:31,230
Jego nazwa jest w środku symbol formularzy cytatu.

1081
01:06:31,230 --> 01:06:37,540
Teraz jestem przesyłając wartość atrybutu data-symbol.

1082
01:06:37,540 --> 01:06:41,560
To coś tu jest nowe, to $ (this).

1083
01:06:41,560 --> 01:06:46,850
Co dotyczy to jest element, który został kliknięty.

1084
01:06:46,850 --> 01:06:50,880
Widzimy tutaj, że nie jesteśmy załączając zdarzenie click

1085
01:06:50,880 --> 01:06:54,690
do każdego elementu, z klasy sugestii indywidualnie.

1086
01:06:54,690 --> 01:06:57,140
Raczej, zbliżamy się to trochę inaczej.

1087
01:06:57,140 --> 01:07:01,700
Zamiast tego mówimy, gdy w środku nic z tego div sugestie,

1088
01:07:01,700 --> 01:07:04,080
co pamiętam to tylko pojemnik na tej liście,

1089
01:07:04,080 --> 01:07:10,150
jeśli coś wewnątrz tego div kliknięciu i ma klasę sugestią

1090
01:07:10,150 --> 01:07:13,000
Chcę, aby ta impreza na ogień.

1091
01:07:13,000 --> 01:07:17,490
Zasadniczo, co to oznacza, że ​​możemy zrobić, to możemy wykorzystać ten sam obsługi zdarzeń

1092
01:07:17,490 --> 01:07:20,000
dla wszystkich rzeczy w liście.

1093
01:07:20,000 --> 01:07:22,080
Tak więc nie trzeba mieć jedno zdarzenie obsługi dla pierwszego elementu

1094
01:07:22,080 --> 01:07:24,550
i inna obsługa zdarzeń dla drugiego elementu.

1095
01:07:24,550 --> 01:07:29,880
Możemy natomiast powiedzieć: "Chcę sama obsługa zdarzeń stosuje się do wszystkiego w mojej liście."

1096
01:07:29,880 --> 01:07:34,420
Ale musimy jakoś wiedzieć, który element został kliknięty.

1097
01:07:34,420 --> 01:07:38,450
To "to" keyword oznacza tylko to.

1098
01:07:38,450 --> 01:07:42,360
Jest to obiekt, który został kliknięty przez użytkownika.

1099
01:07:42,360 --> 01:07:47,680
Jeżeli po prostu kliknął 3-te link, to reprezentuje element tego 3-gi link

1100
01:07:47,680 --> 01:07:51,670
co oznacza, że ​​można uzyskać jego atrybut, data-symbol,

1101
01:07:51,670 --> 01:07:57,760
co wiemy musi zawierać symbol, który jest związany z firmą właśnie kliknięty.

1102
01:07:57,760 --> 01:08:04,550
Jeśli mamy wrócić do naszej strony finansów

1103
01:08:04,550 --> 01:08:08,580
Widzimy teraz, że kiedyś mogę zacząć pisać coś jak MSFT,

1104
01:08:08,580 --> 01:08:11,220
Nie jesteśmy już coraz zaledwie symbole free,

1105
01:08:11,220 --> 01:08:13,720
mamy teraz coraz rzeczywistych przedsiębiorstw.

1106
01:08:13,720 --> 01:08:20,410
Ale po kliknięciu na jedną z tych firm,

1107
01:08:20,410 --> 01:08:25,180
widzimy, że jesteśmy rzeczywiście wypełnianie nie pole tekstowe z nazwą firmy

1108
01:08:25,180 --> 01:08:29,850
ale z tym, co zostało zapisane w środku tych atrybutów danych.

1109
01:08:29,850 --> 01:08:32,880
I tak, jeśli faktycznie sprawdzić jeden z tych elementów, klikając prawym przyciskiem myszy to

1110
01:08:32,880 --> 01:08:36,200
i klikając Sprawdzić element, możemy rzeczywiście zobaczyć, jak to wygląda.

1111
01:08:36,200 --> 01:08:40,290
>> Pamiętaj, to jest coś, co stworzyliśmy w środku, że dla pętli

1112
01:08:40,290 --> 01:08:42,649
kiedy byliśmy budując ten ciąg HTML.

1113
01:08:42,649 --> 01:08:47,870
Widzimy tutaj, że ta data-symbol ma wartość MSFT, co jest dobre.

1114
01:08:47,870 --> 01:08:49,189
To, czego się spodziewaliśmy.

1115
01:08:49,189 --> 01:08:53,170
To symbol i tak mamy wartość, co potrzebne do korzystania

1116
01:08:53,170 --> 01:08:56,140
wewnątrz tego pola.

1117
01:08:56,140 --> 01:08:58,850
To wystarczy na formularzu cytatem bo to trochę nudne.

1118
01:08:58,850 --> 01:09:02,990
Miejmy tylko zrobić kilka szybkich ulepszeń do naszej strony portfela.

1119
01:09:02,990 --> 01:09:08,109
Jeśli używany CS50 Finance na chwilę i rozpocząć kupna i sprzedaży wiele zasobów,

1120
01:09:08,109 --> 01:09:11,300
ostatecznie tabela ta będzie się dość duże,

1121
01:09:11,300 --> 01:09:13,850
i masz zamiar chcesz giełdowy, oczywiście.

1122
01:09:13,850 --> 01:09:20,350
Po tabeli jest naprawdę duża, to może być użyteczne dla użytkownika spróbować przeszukiwać nim.

1123
01:09:20,350 --> 01:09:23,290
Wewnątrz pola wyszukiwania, jeśli zaczniesz wpisywać coś jak Disney

1124
01:09:23,290 --> 01:09:26,359
i szuka mojej ręki Mickey Mouse, widzimy, że stół jest teraz filtrowania

1125
01:09:26,359 --> 01:09:28,189
w oparciu o to, co po prostu wpisane w.

1126
01:09:28,189 --> 01:09:31,640
Funkcja ta wygląda super skomplikowane, ale tak naprawdę, naprawdę łatwe

1127
01:09:31,640 --> 01:09:33,859
z jQuery i JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Ten portfolio.php plik zawiera plik JavaScript o nazwie portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Rzućmy okiem na to.

1130
01:09:41,130 --> 01:09:44,890
Więc html, js, portfolio.

1131
01:09:44,890 --> 01:09:49,210
Oto, gdzie robimy, że wyszukiwanie na stole.

1132
01:09:49,210 --> 01:09:52,750
Pierwszą rzeczą, którą musisz zrobić, to dołączyć obsługi zdarzeń do tego pola tekstowego

1133
01:09:52,750 --> 01:09:55,760
ponieważ wiemy, że chcemy, aby nasza funkcja filtrowania na ogień

1134
01:09:55,760 --> 01:09:59,800
za każdym razem użytkownik naciska coś, bo nie mam czasu na przyciski wyszukiwania.

1135
01:09:59,800 --> 01:10:03,000
Pierwszą rzeczą, którą musisz zrobić, to dowiedzieć się, co użytkownik szuka,

1136
01:10:03,000 --> 01:10:04,780
tak jak my kiedyś.

1137
01:10:04,780 --> 01:10:11,320
Ten parametr odnosi się do bieżącego elementu użytkownik jest interakcja z.

1138
01:10:11,320 --> 01:10:14,070
>> Ponieważ użytkownik jest interakcja z pola wyszukiwania

1139
01:10:14,070 --> 01:10:17,020
$ This reprezentuje pole wyszukiwania,

1140
01:10:17,020 --> 01:10:21,820
tak this.val daje nam to, co jest w środku pola wyszukiwania użytkownik jest aktualnie pisać.

1141
01:10:22,810 --> 01:10:27,320
Tak, teraz to, co chcemy zrobić, to chcemy iterować wszystkie wiersze

1142
01:10:27,320 --> 01:10:29,240
Wnętrze naszego stolika.

1143
01:10:29,240 --> 01:10:35,630
Aby zaznaczyć wszystkie wiersze w naszym stole, dałem tej tabeli identyfikator portfela tabeli

1144
01:10:35,630 --> 01:10:39,060
a każdy wiersz reprezentuje elementu TR,

1145
01:10:39,060 --> 01:10:42,080
więc wybór będzie powrócić do mnie tablicy duży

1146
01:10:42,080 --> 01:10:44,370
wszystkich wierszy w moim stole.

1147
01:10:44,370 --> 01:10:47,010
Teraz chcę iteracyjne nad tablicy.

1148
01:10:47,010 --> 01:10:52,390
I mogłeś dla pętli, ale jQuery faktycznie daje nam ładny funkcję o nazwie "każdy".

1149
01:10:52,390 --> 01:10:55,220
Co każdy robi, to każdy ma jeden argument,

1150
01:10:55,220 --> 01:10:57,090
i ten argument jest funkcją.

1151
01:10:57,090 --> 01:11:02,760
Co to będzie zrobić, to to będzie zastosowanie tej funkcji do każdego elementu wewnątrz tej listy.

1152
01:11:02,760 --> 01:11:05,550
Funkcja ta pobiera jeden argument, który jest e,

1153
01:11:05,550 --> 01:11:10,090
i kiedy funkcja ta jest wykonywana, to e zostanie zastąpiony pierwszym rzędzie,

1154
01:11:10,090 --> 01:11:12,070
a następnie w drugim rzędzie, a następnie w trzecim rzędzie.

1155
01:11:12,070 --> 01:11:15,150
W ten sposób, to jest to samo, co działa dla pętli

1156
01:11:15,150 --> 01:11:21,360
a potem zastanawianie bieżący element oparty na wewnętrznej indeksu Twojej pętli for.

1157
01:11:21,360 --> 01:11:24,750
W każdej iteracji, dla każdego z tych elementów w tabeli,

1158
01:11:24,750 --> 01:11:30,560
Chcę sprawdzić, czy w tekście elementu - tekst wewnątrz komórki w wierszu -

1159
01:11:30,560 --> 01:11:33,130
pasuje do tego, co szukam.

1160
01:11:33,130 --> 01:11:36,390
To wielkie długi ciąg komend jest jak można to zrobić.

1161
01:11:36,390 --> 01:11:40,900
Pierwszy, ponownie, to odnosi się obecnie - w środku, ponieważ jest nowej funkcji -

1162
01:11:40,900 --> 01:11:45,020
Ten prąd jest obecnie w wierszu tabeli.

1163
01:11:45,020 --> 01:11:47,340
Chcę podjąć bieżący wiersz w tabeli,

1164
01:11:47,340 --> 01:11:49,950
i chcę, aby wszystkie jego dzieci.

1165
01:11:49,950 --> 01:11:51,940
Pamiętaj, że DOM jest hierarchiczną drzewa,

1166
01:11:51,940 --> 01:11:54,200
Oznacza to, że elementy, które mają wiele dzieci.

1167
01:11:54,200 --> 01:12:00,180
>> This. Funkcja dzieci będzie wrócić do mnie z powrotem tablicę wszystkich elementów

1168
01:12:00,180 --> 01:12:03,240
że są dziećmi, w tym przypadku, wiersz w tabeli.

1169
01:12:03,240 --> 01:12:07,150
To jest po prostu komórki wewnątrz wiersza.

1170
01:12:07,150 --> 01:12:09,230
Chcę po prostu przeszukiwać pierwszej komórki.

1171
01:12:09,230 --> 01:12:13,090
Tego. Pierwsza funkcja mówi mi pierwszy element tej tablicy.

1172
01:12:13,090 --> 01:12:17,070
Wtedy funkcja tekst mówi, żebym dokładnie co znajduje się wewnątrz tej komórki

1173
01:12:17,070 --> 01:12:19,530
ponieważ chcę szukać nad tym tekstem.

1174
01:12:19,530 --> 01:12:21,040
Na koniec, przekonwertować go na małe litery,

1175
01:12:21,040 --> 01:12:23,940
więc możemy zrobić tekstowych wielkość liter zapytania.

1176
01:12:23,940 --> 01:12:29,990
Wreszcie, chcemy sprawdzić, czy ciąg wewnątrz tabeli zawiera ciąg jesteśmy szukasz.

1177
01:12:29,990 --> 01:12:32,980
Funkcja indexOf w JavaScript właśnie to robi.

1178
01:12:32,980 --> 01:12:37,060
Mówi nam, czy ten ciąg zawiera inny ciąg.

1179
01:12:37,060 --> 01:12:40,150
Jeśli prawdą jest, że komórka zawiera co szukam,

1180
01:12:40,150 --> 01:12:42,140
następnie chcę się upewnić, że to jest pokazane.

1181
01:12:42,140 --> 01:12:45,330
Metoda show powiedzieć: "Pokaż element."

1182
01:12:45,330 --> 01:12:50,350
Jeśli to nie jest przypadek, to znaczy, co szukam, nie jest zawarty

1183
01:12:50,350 --> 01:12:53,550
w tym wierszu, a więc chcę ukryć to od użytkownika.

1184
01:12:53,550 --> 01:12:59,240
Który osiąga ten ładny efekt filtrowania, gdzie nie widzimy całą tabelę.

1185
01:12:59,240 --> 01:13:01,480
Jeśli jesteś zainteresowany w jaki sposób dokonać tego giełdowy, jak również,

1186
01:13:01,480 --> 01:13:04,180
będziemy pisać źródła online. Ale to jest bardzo proste.

1187
01:13:04,180 --> 01:13:09,860
JQuery ma niesamowite metody te animacje i manipulowanie właściwości CSS.

1188
01:13:09,860 --> 01:13:11,020
Tak, to jest to dla mnie.

1189
01:13:11,020 --> 01:13:15,560
>> Co więc nas czeka? Jak zobaczysz w ciągu kilku dni, ostateczny projekt przedsięwzięcia jest należny.

1190
01:13:15,560 --> 01:13:17,730
Ostateczna propozycja projekty zadać kilka pytań,

1191
01:13:17,730 --> 01:13:19,420
ale wśród nich będzie trzy etapy -

1192
01:13:19,420 --> 01:13:22,840
jeden "dobry" kamień milowy, jeden lepiej kamień milowy, a jeden najlepszy.

1193
01:13:22,840 --> 01:13:25,870
Pomysł jest naprawdę, aby pomóc wam ustawić swoje oczekiwania

1194
01:13:25,870 --> 01:13:29,160
tak, aby w minimalnym stopniu będzie szczęśliwy z wyjściem ostatecznego projektu

1195
01:13:29,160 --> 01:13:32,060
i będzie to "dobra" jakim jesteś zainteresowany.

1196
01:13:32,060 --> 01:13:34,540
Ale wtedy w interesie coraz dotrzeć do tylko trochę do czegoś lepszego

1197
01:13:34,540 --> 01:13:37,680
czy coś najlepiej, będziemy również sortować z wcisnąć się w kierunku, że dobrze.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-Thon, w międzyczasie, w ciągu kilku tygodni.

1199
01:13:40,660 --> 01:13:44,340
Zwykle robimy to na zasadzie podstawa loterii z powodu zainteresowania,

1200
01:13:44,340 --> 01:13:47,680
ale kursy są weźmiemy kilkuset nas autobusy wahadłowe z Harvard Square

1201
01:13:47,680 --> 01:13:51,540
w dół, aby Kendall Square, gdzie Microsoft ma piękny obiekt wdzięcznej nazwie "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New Research Anglia i Development Center.

1203
01:13:53,830 --> 01:13:56,380
Dostaniemy tam około godzina dwudziesta Musimy trochę jedzenia.

1204
01:13:56,380 --> 01:13:58,160
Około 1 a.m. będziemy mieć trochę więcej jedzenia.

1205
01:13:58,160 --> 01:14:02,150
Około 5 rano, jeśli nadal nie śpisz my udać się IHOP lub zabierze Cię z powrotem do kampusu.

1206
01:14:02,150 --> 01:14:04,380
Celem jest do nurkowania w końcowych projektach

1207
01:14:04,380 --> 01:14:06,190
wraz z kolegami i personelem.

1208
01:14:06,190 --> 01:14:08,280
Następnie kilka dni później jest CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
których naprawdę ma być okazją do wy, aby zaprezentować swoje prace

1210
01:14:10,990 --> 01:14:12,700
i osiągnięć na semestr

1211
01:14:12,700 --> 01:14:15,610
gdy ramię w ramię z siebie i coraz poczucie tego, co każdy zrobił.

1212
01:14:15,610 --> 01:14:17,850
Z powiedział, że wiele dzięki Tommy i Józefa,

1213
01:14:17,850 --> 01:14:19,960
i zobaczymy w poniedziałek.

1214
01:14:19,960 --> 01:14:24,070
 [Oklaski]