1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Тиждень 9, продовження]

2
00:00:02,700 --> 00:00:05,160
[David J. Малан - Гарвардський університет]

3
00:00:05,160 --> 00:00:07,020
[Це CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Це CS50. Це кінець тижня 9. Велике спасибі.

5
00:00:13,340 --> 00:00:15,310
Нарешті. 9-й тиждень. Я отримав його.

6
00:00:15,310 --> 00:00:18,590
Сьогодні ми продовжуємо нашу розмову про веб-програмуванні

7
00:00:18,590 --> 00:00:21,660
віч-на остаточний проект, а не тому, що ви повинні щось зробити веб-

8
00:00:21,660 --> 00:00:25,610
для остаточного проектів, але тому, що або для остаточного проекту або після CS50

9
00:00:25,610 --> 00:00:29,000
це, звичайно, напрямок, в якому сучасне програмне забезпечення не збирається.

10
00:00:29,000 --> 00:00:31,770
І все ж це насправді не легка річ.

11
00:00:31,770 --> 00:00:35,040
У самому справі, одна з найважчих речей, щоб зробити аспекті дизайну.

12
00:00:35,040 --> 00:00:38,600
>> Наприклад, дизайн ми маємо на увазі насправді отримати користувальницький інтерфейс

13
00:00:38,600 --> 00:00:40,420
або користувальницький досвід права.

14
00:00:40,420 --> 00:00:43,200
Наважуся сказати, - і ми знаємо з останніх поставленого завдання

15
00:00:43,200 --> 00:00:45,960
, Коли деякі з вас ефір ваші нарікання про деякі шматок програмного забезпечення

16
00:00:45,960 --> 00:00:49,000
або обладнання, яке дратує вас, як на кампусі або вимкнений -

17
00:00:49,000 --> 00:00:51,930
є багато сайтів там, є багато апаратних там,

18
00:00:51,930 --> 00:00:53,900
такий відстій.

19
00:00:53,900 --> 00:00:58,730
Але реальність така, що робить речі, які легкі у використанні, але, тим не менш потужні

20
00:00:58,730 --> 00:01:00,550
це дуже складне завдання.

21
00:01:00,550 --> 00:01:03,680
Таким чином, на сьогоднішній день я попросив Йосипа і Томмі приєднатися до мене тут

22
00:01:03,680 --> 00:01:06,680
так що ми можемо вести розмову, як про дизайн

23
00:01:06,680 --> 00:01:09,090
і які розумові процеси повинні почати рухатися через вашу голову

24
00:01:09,090 --> 00:01:12,040
При розробці остаточного проекту, ваших починаннях.

25
00:01:12,040 --> 00:01:15,040
А потім за допомогою Томмі ми будемо дивитися на деякі деталі реалізації.

26
00:01:15,040 --> 00:01:18,440
Як ви можете мати деякі бачення на папері або в умі

27
00:01:18,440 --> 00:01:20,760
, Який потім можна виконати програмно

28
00:01:20,760 --> 00:01:24,030
за допомогою деяких технологій і техніки ми тільки почали говорити про те,

29
00:01:24,030 --> 00:01:29,080
а саме наявність і щось ще більш нових, а саме AJAX, асинхронний JavaScript.

30
00:01:29,080 --> 00:01:32,950
Це дозволяє створювати все більш динамічним з інтерфейсу

31
00:01:32,950 --> 00:01:35,780
по вибірці більше і більше даних поступово з сервера.

32
00:01:35,780 --> 00:01:38,560
Таким чином, ми побачимо деякі з цих фрагментів, а сьогодні.

33
00:01:38,560 --> 00:01:41,800
Як осторонь, якщо ви зацікавлені в концентрації в області комп'ютерних наук

34
00:01:41,800 --> 00:01:45,010
або minoring в області комп'ютерної науки, знають, що в цю п'ятницю опівдні

35
00:01:45,010 --> 00:01:48,750
У Максвелла Дворкін 221 буде піца події

36
00:01:48,750 --> 00:01:50,780
де ви можете дізнатися трохи більше про комп'ютерних наук.

37
00:01:50,780 --> 00:01:54,860
На вашому шляху до дверей сьогодні ви зможете підібрати неофіційними керівництво CS в Гарварді.

38
00:01:54,860 --> 00:01:57,290
Ми помістимо його в сміттєві баки на вулиці в талії

39
00:01:57,290 --> 00:01:59,750
так що якщо ви хочете, щоб захопити це і дізнатися трохи більше про CS,

40
00:01:59,750 --> 00:02:02,480
що там буде для вас, як це було в тиждень 0.

41
00:02:02,480 --> 00:02:06,500
Крім того, якщо ви хочете приєднатися до нас на обід CS50 в цю п'ятницю в 1:15 вечора,

42
00:02:06,500 --> 00:02:09,800
попрямувати в cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Не мудруючи лукаво, я даю вам навчання колег Йосип Онг.

44
00:02:13,260 --> 00:02:19,190
Привіт. [Оплески]

45
00:02:19,190 --> 00:02:20,770
Спасибі.

46
00:02:20,770 --> 00:02:24,780
У перший раз я дізнався про дизайн був у класі тут називають CS179.

47
00:02:24,780 --> 00:02:28,040
>> Професор в той час, розповів нам історію про інше професором

48
00:02:28,040 --> 00:02:31,640
який виїхав в готель і використовувати крани.

49
00:02:31,640 --> 00:02:35,630
Чи може хто-небудь сказати мені, що на 2 кнопки на лівій і правій робити?

50
00:02:35,630 --> 00:02:39,080
[Студент] Гарячі і холодні. >> Гарячі і холодні. Добре.

51
00:02:39,080 --> 00:02:41,430
Те, що ви зазвичай очікуєте, чи не так?

52
00:02:41,430 --> 00:02:46,960
Цей професор після використання крана хоче, щоб прийняти душ, і він починає це використовувати.

53
00:02:46,960 --> 00:02:51,310
Він вважає, що ліва і права сторони для гарячого і холодного, вірно?

54
00:02:51,310 --> 00:02:55,470
Але хто може сказати мені, що це насправді?

55
00:02:55,470 --> 00:02:58,060
Будь руки?

56
00:02:58,060 --> 00:03:01,740
[Нерозбірливо відповідь студента] >> Одна з пропозицій полягає?

57
00:03:01,740 --> 00:03:05,860
[Нерозбірливо відповідь студента] >> температури?

58
00:03:05,860 --> 00:03:10,460
Таким чином, одна з них контролює температуру й інші елементи керування? >> [Студент] тиск води.

59
00:03:10,460 --> 00:03:12,350
Тиск води. Добре.

60
00:03:12,350 --> 00:03:15,100
Цей професор заходить в це і, думаючи, що вони контролюють гарячої та холодної,

61
00:03:15,100 --> 00:03:21,470
Виходить правильний, яке він вважає для гарячого, все, аж до

62
00:03:21,470 --> 00:03:23,560
тому що він хоче прийняти теплий душ.

63
00:03:23,560 --> 00:03:28,100
Ну, це насправді не збігаються, так що він отримує це не дуже весело досвідом

64
00:03:28,100 --> 00:03:31,110
бути в холодний душ, і всі ми знаємо, яке це.

65
00:03:31,110 --> 00:03:33,620
Це приклад помилки проектування.

66
00:03:33,620 --> 00:03:37,040
Що я маю на увазі, що це його очікування від крана

67
00:03:37,040 --> 00:03:39,420
не відповідають тому, що вийшла з душу,

68
00:03:39,420 --> 00:03:41,780
яка є своєрідною невдало для нього.

69
00:03:41,780 --> 00:03:44,990
Так що це приклад помилки проектування, що відбувається в реальному житті.

70
00:03:44,990 --> 00:03:48,020
Але ми бачимо, всякі інші, а також.

71
00:03:48,020 --> 00:03:50,390
Ми, ймовірно, не вентилятори системи MBTA.

72
00:03:50,390 --> 00:03:55,560
Це система метро насправді в Лондоні, який говорить: "Ця кнопка не використовується".

73
00:03:55,560 --> 00:04:00,220
Чому навіть там? Навіщо нам ще потрібно?

74
00:04:00,220 --> 00:04:02,810
Коли я був дитиною, будучи технічно просунутих в будинку,

75
00:04:02,810 --> 00:04:05,050
, Коли комп'ютер буде катастрофа, моя мама прийде до мене,

76
00:04:05,050 --> 00:04:07,060
показав мені цей екран і питає мене, що трапилося.

77
00:04:07,060 --> 00:04:09,210
>> Навіть не знаю, що це означає.

78
00:04:11,890 --> 00:04:14,700
[Сміється] Що?

79
00:04:16,950 --> 00:04:18,019
[Сміх]

80
00:04:18,720 --> 00:04:23,050
Іноді ми відчуваємо, що розробники програмного забезпечення просто троллінг нас.

81
00:04:23,050 --> 00:04:28,460
Так як користувачі ми кшталт: "Що відбувається? Хтось каже нам".

82
00:04:28,460 --> 00:04:32,140
Це все зводиться до питання дизайну.

83
00:04:32,140 --> 00:04:34,650
Дизайн, як ми бачимо, не є чисто про естетику,

84
00:04:34,650 --> 00:04:37,230
це не про те, як все виглядає.

85
00:04:37,230 --> 00:04:41,720
Ми бачимо тут, що це невелике спливаюче тут насправді виглядає досить добре.

86
00:04:41,720 --> 00:04:45,290
Він має тінь на задньому плані, вона має межу радіусів відбувається.

87
00:04:45,290 --> 00:04:47,550
Це свого роду красива.

88
00:04:47,550 --> 00:04:51,480
Це не дуже добре розроблена, тому що це не дуже зручно для користувача.

89
00:04:51,480 --> 00:04:54,920
Це маленьке спливаюче вікно, яке з'являється на самому ділі не дати мені будь-яку інформацію,

90
00:04:54,920 --> 00:04:58,450
Про те, що відбувається, вона не кажіть мені нічого, як користувач

91
00:04:58,450 --> 00:05:01,400
про те, щоб оправитися від цієї помилки.

92
00:05:01,400 --> 00:05:05,190
Ми хочемо, щоб думати про те, що дизайн це не так.

93
00:05:05,190 --> 00:05:06,670
По-перше, це не естетика.

94
00:05:06,670 --> 00:05:10,800
Він також не начинці вашого застосування з купою непотрібної функціональності.

95
00:05:10,800 --> 00:05:14,890
Якщо ви тайський ресторан, ви, ймовірно, не хочу бути стоматологом в той же час.

96
00:05:14,890 --> 00:05:17,720
І з Питань Facebook, не так багато людей використовували його

97
00:05:17,720 --> 00:05:21,130
і це було насправді не на основі того, що вони будували.

98
00:05:21,130 --> 00:05:24,200
І це так приємно думати не стільки кількістю речей

99
00:05:24,200 --> 00:05:26,390
що ви кладете в ваше додаток, але якість

100
00:05:26,390 --> 00:05:28,910
і як ви робите, що користувальницький досвід краще

101
00:05:28,910 --> 00:05:32,540
насправді поліпшення від того, що ви вже маєте.

102
00:05:32,540 --> 00:05:37,040
>> Загалом, дизайн говорить нам, що ми повинні будувати.

103
00:05:37,040 --> 00:05:41,950
Наприклад, якщо ми будуємо те, що давайте шукати речі,

104
00:05:41,950 --> 00:05:45,970
Google, як, наприклад, ми повинні робити речі, таким чином,

105
00:05:45,970 --> 00:05:48,950
, Що вимагає від користувача потрібно багато кліків, щоб отримати те, що вони хочуть,

106
00:05:48,950 --> 00:05:52,580
або ми повинні робити це таким чином, наприклад, з Google Instant, або автозаповнення

107
00:05:52,580 --> 00:05:54,970
, Що дозволяє нам дістатися до наших результатів швидше?

108
00:05:54,970 --> 00:05:58,740
Інженерні включає в себе, як Томмі покаже вам, насправді її створення.

109
00:05:58,740 --> 00:06:01,890
Є багато типів дизайну.

110
00:06:01,890 --> 00:06:06,070
Наприклад, якщо ви створюєте щось, щоб розвернути щось

111
00:06:06,070 --> 00:06:09,770
У країні третього світу, де існує не так багато електрики або, що набагато технології,

112
00:06:09,770 --> 00:06:11,440
Ви повинні проектувати те, що ви будуєте

113
00:06:11,440 --> 00:06:14,210
таким чином, що легко дає доступ до народу.

114
00:06:14,210 --> 00:06:18,290
Але те, що всякі інші дизайнерські рішення чи можуть бути

115
00:06:18,290 --> 00:06:21,850
або можуть бути залучені в щось подібне?

116
00:06:23,690 --> 00:06:25,660
Так. Я бачу руку.

117
00:06:25,660 --> 00:06:37,200
[Нерозбірливо відповідь студента] >> праві. Саме так. Доступність це одне.

118
00:06:37,200 --> 00:06:40,870
Багато людей не думають про те, "Як щодо моїх користувачів?"

119
00:06:40,870 --> 00:06:43,160
як крайності або спектру.

120
00:06:43,160 --> 00:06:47,770
У мене є користувачі, які можуть мати інвалідність, що я не думав про

121
00:06:47,770 --> 00:06:50,590
і я просто думав про проектування для звичайного користувача.

122
00:06:50,590 --> 00:06:52,630
Інтернет доступний кожному в наш час,

123
00:06:52,630 --> 00:06:54,870
і я повинна бути розробка для тих людей.

124
00:06:54,870 --> 00:06:58,620
Що всякі інші дизайнерські рішення ви могли б зробити?

125
00:06:58,620 --> 00:07:00,690
Так. >> [Студент] вартості.

126
00:07:00,690 --> 00:07:02,680
Варто. Дуже добре.

127
00:07:02,680 --> 00:07:08,060
Інша справа, ми могли б засновувати наші рішення дизайну на це витрат.

128
00:07:08,060 --> 00:07:13,130
Якщо ми бізнес, ви хочете побудувати щось, що не займе багато витрати на виробництво

129
00:07:13,130 --> 00:07:17,720
але може продати в особливо високої вартості або можете отримати нам деяку прибуток.

130
00:07:17,720 --> 00:07:21,540
>> Всі ці різні види дизайну, але, коли ми будуємо щось в інтернеті

131
00:07:21,540 --> 00:07:25,120
або коли ми будуємо те, що, ймовірно, не варто було б стільки будувати зараз,

132
00:07:25,120 --> 00:07:28,630
як інтернет-додатки - ви не повинні кидати багато капіталу в ній

133
00:07:28,630 --> 00:07:30,900
для того, щоб зробити щось, що насправді працює -

134
00:07:30,900 --> 00:07:33,490
те, що ми більше турбуються про те, користувальницький досвід.

135
00:07:33,490 --> 00:07:36,390
Ми називаємо цей користувач орієнтованого дизайну.

136
00:07:36,390 --> 00:07:41,550
По суті, користувач орієнтованого дизайну включає в себе ставить себе на місце ваших користувачів.

137
00:07:41,550 --> 00:07:44,870
Якщо хтось підпишеться на те, що я будую,

138
00:07:44,870 --> 00:07:48,250
Очевидно, вони приходять до мене конкретне застосування з метою,

139
00:07:48,250 --> 00:07:50,280
із завданням вони хочуть, щоб закінчити.

140
00:07:50,280 --> 00:07:53,650
І ваше завдання не тільки допомогти їм виконати це завдання

141
00:07:53,650 --> 00:07:57,930
але, щоб допомогти їм виконати це завдання таким чином, щоб ефективно, інтуїтивно,

142
00:07:57,930 --> 00:08:01,900
і, як кілька людей сказали там, доступною.

143
00:08:01,900 --> 00:08:03,750
Що ефективності значить?

144
00:08:03,750 --> 00:08:08,050
Ефективність означає, як швидко у мого користувачеві виконати завдання з огляду на мій інтерфейс.

145
00:08:08,050 --> 00:08:11,650
Займає багато кліків для них, щоб потрапити з одного місця в інше?

146
00:08:11,650 --> 00:08:14,630
Це утомливо? Чи повинні вони виконувати безліч завдань, що повторюються?

147
00:08:14,630 --> 00:08:17,140
Ми хочемо зробити цей процес якомога більш ефективної

148
00:08:17,140 --> 00:08:20,070
таким чином, вони не повинні робити ті види речей.

149
00:08:20,070 --> 00:08:24,230
Що стосується інтуїтивності, тобто, наприклад, якщо користувач дивиться мій інтерфейс,

150
00:08:24,230 --> 00:08:27,240
це легко для них, щоб дістатися з одного місця в інше?

151
00:08:27,240 --> 00:08:30,390
Це легко для них, щоб з'ясувати, що вони повинні натиснути на мій інтерфейс

152
00:08:30,390 --> 00:08:33,770
для них, для досягнення мети або завдання, які вони хочуть добитися?

153
00:08:33,770 --> 00:08:37,520
>> І, нарешті, як один чоловік сказав, що там, доступність дуже важлива.

154
00:08:37,520 --> 00:08:39,640
[Чоловік динамік] Воно приходить до доступності такі речі, як бачення,

155
00:08:39,640 --> 00:08:42,740
подобається, як я насправді створити щось для тих, хто сліпий?

156
00:08:42,740 --> 00:08:46,460
Ох. Для тих, хто не може бачити взагалі, у нас є те, що називається читання з екрану.

157
00:08:46,460 --> 00:08:49,070
Те, що ви повинні зробити, це ви повинні створити свій сайт таким чином,

158
00:08:49,070 --> 00:08:52,020
, Що, наприклад, конкретних технологій, що ми називаємо -

159
00:08:52,020 --> 00:08:53,590
Є багато речей зараз.

160
00:08:53,590 --> 00:08:55,660
Я думаю, що є програма читання з екрану JAWS називається.

161
00:08:55,660 --> 00:08:58,410
Багато з цих речей розраховувати на те, що ми називаємо області правил

162
00:08:58,410 --> 00:09:02,010
для того, щоб зачитати користувачеві, що присутня на сторінці.

163
00:09:02,010 --> 00:09:05,480
Для тих людей, хто не може бачити, ви повинні переконатися, що ці читання з екрану

164
00:09:05,480 --> 00:09:09,130
дійсно може забрати вміст на сторінці і може реально показати користувачам,

165
00:09:09,130 --> 00:09:13,630
Якщо ви не можете бачити, принаймні, ще можна зрозуміти зміст сторінки.

166
00:09:13,630 --> 00:09:16,190
Так. Добре.

167
00:09:16,190 --> 00:09:23,410
Вистачить говорити про хороше дизайні. Давайте поговоримо про поганий дизайн.

168
00:09:23,410 --> 00:09:25,220
Це речі, які ви не повинні робити.

169
00:09:25,220 --> 00:09:27,890
Може хто-небудь сказати мені про свій досвід з Craigslist

170
00:09:27,890 --> 00:09:32,190
і що вони думають не так великий цей дизайн?

171
00:09:33,690 --> 00:09:36,430
Так. >> [Студент] Я думаю, що занадто багато слів в одній області.

172
00:09:36,430 --> 00:09:39,350
Занадто багато слів, правильно? Повністю переважною.

173
00:09:39,350 --> 00:09:42,400
Ви прийшли на цю сторінку, і ви зустріли з цілою купою речей тут

174
00:09:42,400 --> 00:09:43,860
, Що може навіть не має значення для вас.

175
00:09:43,860 --> 00:09:47,010
Наприклад, ви живете в одну державу, яке не починається з цієї букви.

176
00:09:47,010 --> 00:09:48,690
Припустимо, ви живете в Техасі або щось.

177
00:09:48,690 --> 00:09:53,790
>> Ви повинні прокрутити весь шлях вниз сторінки, щоб дістатися до місця ви знаходитеся.

178
00:09:53,790 --> 00:10:00,320
Я з Бостона, тому дозвольте мені дивитися в штаті Массачусетс. Де Массачусетс?

179
00:10:00,320 --> 00:10:03,270
О, це прямо тут. О, це Бостоні. Добре.

180
00:10:03,270 --> 00:10:09,070
Давайте подивимося на Бостон. [Сміх]

181
00:10:09,070 --> 00:10:12,250
Досить переважною, чи не так?

182
00:10:12,250 --> 00:10:16,400
Незручні речі там. [Сміх]

183
00:10:17,320 --> 00:10:19,470
Скажімо, я шукаю десь жити.

184
00:10:19,470 --> 00:10:24,130
Скільки людей насправді використовували Craigslist? Тонни вас.

185
00:10:24,130 --> 00:10:30,960
Є досить погано способів дивитися на це, але давайте подивимося на це.

186
00:10:35,130 --> 00:10:38,970
У чому різниця між IMG і рис? Може хто-небудь сказати мені?

187
00:10:41,350 --> 00:10:42,830
Там насправді немає ніякої різниці.

188
00:10:42,830 --> 00:10:47,710
Вони мають на увазі одне і те ж, але у них різні ярлики для них з деяких причин.

189
00:10:48,980 --> 00:10:53,560
Якщо я натискаю на має образ, нічого не відбувається на сторінці.

190
00:10:53,560 --> 00:10:57,490
Я насправді потрібно натиснути пошук знову щось трапиться.

191
00:10:57,490 --> 00:11:02,430
Що може бути краще дизайн рішення, яке може бути зроблено там?

192
00:11:03,820 --> 00:11:08,030
Якщо я клікнувши на цю фільтра, я, ймовірно, хочете, щоб фільтр з тим, що певні дії

193
00:11:08,030 --> 00:11:09,970
чи інша категорія.

194
00:11:09,970 --> 00:11:14,450
Таким чином, замість того, щоб натиснути пошук знову, я міг би просто автоматично виконувати фільтрацію

195
00:11:14,450 --> 00:11:17,060
зразок Google стиль, в якому вони роблять це миттєво.

196
00:11:17,060 --> 00:11:20,440
[Малан] Але не утворює, як ми бачили їх досі мають бути фізично представлені

197
00:11:20,440 --> 00:11:23,170
натиснувши Enter або принаймні натискання кнопки?

198
00:11:23,170 --> 00:11:26,830
Як ви бачили їх так далеко, вам насправді потрібно натисніть кнопку Відправити, щоб зробити ці речі.

199
00:11:26,830 --> 00:11:30,090
>> Але, як Томмі покаже вам, на другому, насправді способів для Вас

200
00:11:30,090 --> 00:11:33,010
такі, що при натисканні на цю річ він може автоматично відправляти

201
00:11:33,010 --> 00:11:38,840
що ми називаємо запит AJAX і отримати дані назад і фільтрувати результати миттєво.

202
00:11:38,840 --> 00:11:41,340
Є купа речей, які не так з цим інтерфейсом.

203
00:11:41,340 --> 00:11:43,530
[Малан] Чи можете ви шукати Cambridge?

204
00:11:43,530 --> 00:11:47,030
Там-то трохи аномальна тут, де ви піклуєтеся про Cambridge

205
00:11:47,030 --> 00:11:54,790
і тим не менше ви отримуєте Westford, Spring Hill, West Newton тощо.

206
00:11:54,790 --> 00:11:57,930
Напевно, не ідеальні. >> Напевно, не ідеальні.

207
00:11:57,930 --> 00:12:03,900
Як я міг би бути в змозі зробити роботу користувачів краще на даній сторінці?

208
00:12:03,900 --> 00:12:07,340
Так. >> [Студент] Інструкції.

209
00:12:07,340 --> 00:12:09,500
Добре. Інструкції в який сенс?

210
00:12:09,500 --> 00:12:14,630
[Студент] Наприклад, річ для користувачів-новачків, які навіть не знають, що Craigslist є

211
00:12:14,630 --> 00:12:17,320
або ви не знаєте, що ви повинні робити.

212
00:12:17,320 --> 00:12:20,150
Право. Так, пояснюючи, що Craigslist на цій сторінці дуже важливо.

213
00:12:20,150 --> 00:12:23,490
Ми можемо дійсно сказати, що користувачі цієї сторінки насправді для.

214
00:12:23,490 --> 00:12:27,090
Якщо я просто відвідування цього, я бачу цілу купу місць. Я навіть не знаю, що вони означають.

215
00:12:27,090 --> 00:12:29,730
Але що більш важливо, просто дивлячись на цей інтерфейс,

216
00:12:29,730 --> 00:12:35,530
Пам'ятаєте, я була прокрутіть вниз тонни речей, щоб знайти конкретний співтовариство

217
00:12:35,530 --> 00:12:37,560
що я насправді дбав про про це.

218
00:12:37,560 --> 00:12:39,820
Що швидше, як я міг це зробити? Так.

219
00:12:39,820 --> 00:12:43,290
[Студент] Розділіть їх на схід, захід регіонах. >> Добре.

220
00:12:43,290 --> 00:12:47,460
Я міг би розділити їх на кілька категорій, які могли б мені допомогти швидше визначити

221
00:12:47,460 --> 00:12:49,820
як дістатися до конкретного місця.

222
00:12:49,820 --> 00:12:54,510
[Студент] Покласти в списку, що розкривається. >> Праві. Добре.

223
00:12:54,510 --> 00:12:58,240
Я міг би використовувати випадаюче меню, тому що у нас є певний набір речей

224
00:12:58,240 --> 00:13:00,100
і ми могли б показати їх у випадаючому меню.

225
00:13:00,100 --> 00:13:02,240
Таким чином, він не займає так багато місця на екрані.

226
00:13:02,240 --> 00:13:05,630
Але ще краще, ніж те, що ми можемо зробити?

227
00:13:05,630 --> 00:13:09,220
Так. >> [Нерозбірливо відповідь студента] >> Чи можете ви сказати це знову? >> [Студент] поле пошуку.

228
00:13:09,220 --> 00:13:11,260
Так, вікно пошуку. Це здорово.

229
00:13:11,260 --> 00:13:16,430
Що ми можемо зробити, це насправді, якщо ми подивимося назад, на слайдах, вікно пошуку.

230
00:13:16,430 --> 00:13:21,520
Автозаповнення. Дуже легкий спосіб пошуку з допомогою результати, які ви знаєте, в наборі.

231
00:13:21,520 --> 00:13:25,980
Якщо я починаю набирати BO, просто покажіть мені всі результати, які мають BO всередині них.

232
00:13:25,980 --> 00:13:29,030
Таким чином я можу дуже легко знайти Зокрема, одна я хочу, щоб

233
00:13:29,030 --> 00:13:32,390
замість того, щоб прокрутити це дійсно великий список.

234
00:13:32,390 --> 00:13:37,450
>> Всі ці види дуже низько висять плодів, що той, хто здійснює Craigslist

235
00:13:37,450 --> 00:13:42,500
реально можете зробити, щоб зробити досвід на веб-сайті набагато краще для їх конкретного користувача.

236
00:13:42,500 --> 00:13:46,370
Добре. Вистачить говорити про поганих сайтів.

237
00:13:46,370 --> 00:13:49,410
Давайте поговоримо про Facebook.

238
00:13:50,880 --> 00:13:54,390
При Facebook вийшов, і, зокрема Facebook фотографії,

239
00:13:54,390 --> 00:13:57,870
було багато інших послуг, в той час, які могли б зробити те ж саме.

240
00:13:57,870 --> 00:14:00,740
Вони можуть організувати свої фотографії в альбоми.

241
00:14:00,740 --> 00:14:03,360
Що ви можете зробити це можна організувати їх у набори, а також.

242
00:14:03,360 --> 00:14:06,070
Ви могли б організувати їх за датою. Ви можете робити всі ці конкретні речі.

243
00:14:06,070 --> 00:14:11,710
Але хто знає, що зробив Facebook фотографії вибухнути в той час він був випущений?

244
00:14:11,710 --> 00:14:15,080
Так. >> [Студент] Теги. >> Теги. Саме так.

245
00:14:15,080 --> 00:14:21,300
У нас є Milo тут, який є наша собака талісман з бандана CS50.

246
00:14:21,300 --> 00:14:24,810
Ви бачите, що у нас є ця позначки в середині.

247
00:14:24,810 --> 00:14:28,240
А те, що зробило Facebook фотографії так цікаво з точки зору юзабіліті

248
00:14:28,240 --> 00:14:34,130
є те, що вона насправді дозволив людям через цей залучати своїх друзів в їхніх фотографій.

249
00:14:34,130 --> 00:14:37,680
Для Facebook, так як їх веб-сайт є особливо соціальних,

250
00:14:37,680 --> 00:14:40,750
мова йде про створення такої соціальної атмосфері.

251
00:14:40,750 --> 00:14:42,620
Це поліпшило досвід фотографій набагато більше

252
00:14:42,620 --> 00:14:46,390
тому що вони можуть насправді починають говорити: «Це зв'язків між людьми,

253
00:14:46,390 --> 00:14:49,220
і ці фотографії людей, яких ви насправді хвилює ".

254
00:14:49,220 --> 00:14:52,200
Частина з них також роду нарцисизм.

255
00:14:52,200 --> 00:14:54,980
Людям подобається бути помічені у фотографіях тощо.

256
00:14:54,980 --> 00:14:58,510
Хоча це не обов'язково гарна людська риса,

257
00:14:58,510 --> 00:15:01,910
У той же час він заснований на хороших дизайнерських рішень

258
00:15:01,910 --> 00:15:04,860
тому що люди насправді дбає про такі речі.

259
00:15:04,860 --> 00:15:07,190
Так от Facebook фотографії.

260
00:15:07,190 --> 00:15:09,800
>> Але давайте поговоримо Facebook в цілому.

261
00:15:09,800 --> 00:15:13,400
Я впевнений, що тут багато людей мають думка про Facebook,

262
00:15:13,400 --> 00:15:16,430
і хороші дизайнерські рішення і поганих дизайнерських рішень.

263
00:15:16,430 --> 00:15:20,270
Так що давайте запобігти або бути щасливим.

264
00:15:23,480 --> 00:15:26,450
Підемо. Я знаю, що всі ви використовуєте Facebook.

265
00:15:26,450 --> 00:15:30,970
Хтось повинен мати щось погане сказати або щось хороше, щоб сказати про це. Так.

266
00:15:30,970 --> 00:15:35,060
[Студент] У стрічці новин є багато речей, які я насправді не хвилює.

267
00:15:35,060 --> 00:15:37,740
Стрічка новин дійсно показує багато речей, які ви, можливо, не хвилює.

268
00:15:37,740 --> 00:15:41,660
У вас є друзі на Facebook, кого ви не зустрічалися протягом 2 або 3 років

269
00:15:41,660 --> 00:15:43,860
і ви побачите їх результати новини з'являються у вашій стрічці новин

270
00:15:43,860 --> 00:15:45,870
і ви дійсно не піклуються про неї.

271
00:15:45,870 --> 00:15:48,700
Facebook фактично зробив зусилля, щоб зробити це краще,

272
00:15:48,700 --> 00:15:53,150
і вони дійсно намагалися проштовхнути релевантні результати в початок стрічки новин останнім часом

273
00:15:53,150 --> 00:15:58,300
так що ви насправді бачите речі друзями, які мають відношення до вам або вашим близьким друзям.

274
00:15:58,300 --> 00:16:01,110
Небудь ще? Так.

275
00:16:01,110 --> 00:16:06,400
[Нерозбірливо відповідь студента] >> Чи можете ви сказати це знову?

276
00:16:06,400 --> 00:16:10,140
[Студент] оголошення відносно непомітно. >> В якому сенсі?

277
00:16:10,140 --> 00:16:16,370
[Нерозбірливо відповідь студента] Вони не мають світла на екрані, як і банерів.

278
00:16:16,370 --> 00:16:17,760
Добре. Це добре.

279
00:16:17,760 --> 00:16:25,030
Якщо ви пам'ятаєте Інтернет з 90-х років - >> [Малан] Я був там. >> Він був там. [Сміх]

280
00:16:25,030 --> 00:16:29,210
Можливо, ви пам'ятаєте блимати GIF-фони, блискучі речі,

281
00:16:29,210 --> 00:16:31,570
GeoCities стилю роду речі.

282
00:16:31,570 --> 00:16:34,080
Це дійсно не є прикладом хорошого дизайну

283
00:16:34,080 --> 00:16:36,690
тому що це дійсно відволікає від змісту.

284
00:16:36,690 --> 00:16:39,590
На сайті Єльського мистецтва використовується для анімованих GIF-файлів мають в якості фону

285
00:16:39,590 --> 00:16:41,800
і ви не могли прочитати що-небудь на сторінці,

286
00:16:41,800 --> 00:16:44,870
але я думаю, хтось насправді говорив з ними, і тепер це трохи по-іншому.

287
00:16:44,870 --> 00:16:48,940
[Малан] Це набагато краще. >> Це набагато краще, як ви можете бачити. >> [Малан] О, так.

288
00:16:48,940 --> 00:16:56,020
Просто здорово, просто - Так. Добре.

289
00:16:56,020 --> 00:17:00,560
>> Частково це також робить ваші сторінки, можливо, вельми мінімалістський і дуже зрозумілі

290
00:17:00,560 --> 00:17:05,690
так що всі на сторінці потік таким чином, що дуже логічно і не заважати один від одного.

291
00:17:05,690 --> 00:17:11,849
Що всякі інші речі хорошого Facebook або погано про Facebook?

292
00:17:11,849 --> 00:17:15,730
Давайте просто є дизайн розмова тут.

293
00:17:19,470 --> 00:17:21,339
Ох. Де? Так.

294
00:17:21,339 --> 00:17:25,640
[Студент] Нова система Timeline дозволяє шукати профіль людини про своє минуле.

295
00:17:25,640 --> 00:17:28,119
Ох, Timeline.

296
00:17:28,119 --> 00:17:30,280
Timeline це велика річ, тому що вона дозволяє стебла друзів

297
00:17:30,280 --> 00:17:33,300
тому, коли вони були в середній школі.

298
00:17:35,160 --> 00:17:38,060
Терміни добре, тому що дозволяє фільтрувати через зміст набагато швидше,

299
00:17:38,060 --> 00:17:41,500
вона дозволяє знайти речі, які б в іншому випадку ви прийняті дуже довгий час, щоб знайти

300
00:17:41,500 --> 00:17:45,840
просто прокрутка вгору і вниз, вгору, вгору, вгору, вгору, вгору, як повернутися в часі.

301
00:17:45,840 --> 00:17:48,910
Але є також свого роду недолік, що з точки зору користувача.

302
00:17:48,910 --> 00:17:51,190
Що це може бути?

303
00:17:51,190 --> 00:17:56,780
Великі слова, які починаються з P-R. >> [Студент] Безпека. >> Privacy, вірно?

304
00:17:56,780 --> 00:17:59,970
Конфіденційність є великою проблемою взаємодії з користувачем.

305
00:17:59,970 --> 00:18:07,190
Це одна з речей, які я ненавиджу найбільше в Facebook зараз. [Сміх]

306
00:18:07,190 --> 00:18:09,000
[Малан] Як мені зараз.

307
00:18:09,000 --> 00:18:11,380
Давид не розумію, це сталося насправді до вчорашнього дня.

308
00:18:11,380 --> 00:18:14,560
Так що тепер він знає, що кожен раз, коли я спілкуватися йому, що я знаю, що він ігнорував мене.

309
00:18:14,560 --> 00:18:16,880
[Малан] ніяково частина була я на самом деле звертаючи на нього уваги,

310
00:18:16,880 --> 00:18:21,040
і я не знаю, що він знав, що я звертаючи на нього уваги. [Сміх]

311
00:18:21,040 --> 00:18:24,030
Конфіденційність є великою проблемою.

312
00:18:24,030 --> 00:18:28,670
Чи може хто-небудь тут, скажіть мені, що може бути поганого про конфіденційність Facebook

313
00:18:28,670 --> 00:18:32,270
крім того, що вони роблять такі речі?

314
00:18:32,270 --> 00:18:37,240
Що це особливо важко зробити по відношенню до Facebook приватне життя?

315
00:18:37,240 --> 00:18:40,340
Такого роду є однією з провідних питання.

316
00:18:41,680 --> 00:18:43,930
Так. >> [Студент] приховати фотографії від певних людей.

317
00:18:43,930 --> 00:18:46,170
Право. Саме, щоб приховати фотографії від певних людей.

318
00:18:46,170 --> 00:18:51,290
Вони мають цю маленьку, маленьку кнопку в правому верхньому куті, що дозволяє перемикати конфіденційності фото.

319
00:18:51,290 --> 00:18:56,360
Їх параметри конфіденційності дуже різноманітні між різними видами меню.

320
00:18:56,360 --> 00:18:59,510
>> Вони отримали багато краще про це недавно, але це була справа

321
00:18:59,510 --> 00:19:04,870
що всякий раз, коли ви хочете, щоб ваш друзів бачити фотографії,

322
00:19:04,870 --> 00:19:08,280
Вам доведеться пройти через дуже складний 5-ступінчастий процес буття, як,

323
00:19:08,280 --> 00:19:11,150
Дозвольте мені натисніть на це посилання, тепер дозвольте мені знову натисніть, дозвольте мені знову натисніть,

324
00:19:11,150 --> 00:19:13,420
Дозвольте мені вказати, які люди не можуть побачити мої фотографії.

325
00:19:13,420 --> 00:19:17,250
Це не особливо добре на участь у Facebook

326
00:19:17,250 --> 00:19:20,530
тому, що так багато про користувальницький досвід насправді дає їм свободу

327
00:19:20,530 --> 00:19:22,460
контролювати те, що люди можуть бачити.

328
00:19:22,460 --> 00:19:25,550
Ми називаємо це користувальницький контроль і свободи.

329
00:19:25,550 --> 00:19:31,090
Якщо ви не дозволяючи своїм користувачам зробити це таким чином, що є ефективним і інтуїтивно зрозумілим,

330
00:19:31,090 --> 00:19:34,570
, То ваш користувальницький досвід не дуже великий, що на всіх.

331
00:19:34,570 --> 00:19:38,200
 Хіба ви, хлопці, хотіли сказати що-небудь про Facebook?

332
00:19:38,700 --> 00:19:41,420
Як відключити?

333
00:19:41,420 --> 00:19:46,290
[Ong] Ви не можете відключити цю функцію, і це величезний недолік юзабіліті з боку Facebook.

334
00:19:46,290 --> 00:19:49,410
Ця функція - Я дійсно подивився на нього вчора -

335
00:19:49,410 --> 00:19:53,940
це або, що ви не можете зробити це або його поховали десь дуже, дуже глибоко

336
00:19:53,940 --> 00:19:58,050
в надрах Facebook, тому що я не можу зрозуміти, як відключити цю функцію взагалі.

337
00:19:58,050 --> 00:20:00,400
[Малан] Але іноді ці рішення не є очевидними

338
00:20:00,400 --> 00:20:03,890
тому що ви, хлопці дали нам багато корисної інформації про різних додатків CS50

339
00:20:03,890 --> 00:20:05,710
і веб-сайтах, в курсі використовуються.

340
00:20:05,710 --> 00:20:10,260
Ми ще не реалізували всі ці прохання і пропозиції.

341
00:20:10,260 --> 00:20:14,550
>> Частково це для отримання так багато запитів, що це функція часу,

342
00:20:14,550 --> 00:20:17,070
але іноді ми просто прийняти свідоме рішення, як,

343
00:20:17,070 --> 00:20:19,830
"Спасибі за пропозицію, але ми не згодні".

344
00:20:19,830 --> 00:20:24,350
Так як же насправді вирішити, що ви повинні робити, якщо ваші користувачі думаю, що ви повинні зробити щось

345
00:20:24,350 --> 00:20:28,110
навіть якщо ви не обов'язково?

346
00:20:28,110 --> 00:20:32,360
Це тонкий баланс між фактично слухати те, що говорять користувачі

347
00:20:32,360 --> 00:20:35,840
а насправді по якійсь лінії, де ви говорите,

348
00:20:35,840 --> 00:20:37,750
"Ми не збираємося робити те, що ці користувачі говорять".

349
00:20:37,750 --> 00:20:42,520
І зокрема, я думаю, що була цитата Генрі Форда, який підсумовує це досить добре.

350
00:20:42,520 --> 00:20:47,130
"Якби я запитав людей, чого вони хотіли, вони б сказали, що вони хотіли швидше коней".

351
00:20:47,130 --> 00:20:51,840
Чи може хто-небудь на зразок дражнять один від одного, що це цитата насправді означає?

352
00:20:51,840 --> 00:20:56,060
Справа не тільки в тому, що користувачі знають, чого хочуть,

353
00:20:56,060 --> 00:20:59,180
але більш того -

354
00:20:59,180 --> 00:21:02,720
[Студент] Вони не знають, що це можливо.

355
00:21:02,720 --> 00:21:06,140
У першій частині вони не знають, що це можливо.

356
00:21:07,880 --> 00:21:11,440
Tease, що крім трохи більше. Що ви маєте на увазі?

357
00:21:11,440 --> 00:21:21,340
[Нерозбірливо відповідь студента]

358
00:21:21,340 --> 00:21:25,770
Це добре. Те, що я думаю, що ми намагаємося сказати тут те, що люди знають, чого вони хочуть.

359
00:21:25,770 --> 00:21:28,050
Вони хочуть швидше коні.

360
00:21:28,050 --> 00:21:29,840
Те, що вони дійсно хочуть це вміння рухатися швидше,

361
00:21:29,840 --> 00:21:32,310
але вони дійсно не знаю середовища за допомогою якого можна домогтися.

362
00:21:32,310 --> 00:21:36,330
Коли ви приходите до своїх користувачам і користувачам розповісти вам дещо

363
00:21:36,330 --> 00:21:39,700
і вони скажуть вам: «Ми хочемо, щоб ці особливості і ці особливості і ці функції",

364
00:21:39,700 --> 00:21:42,650
Ви не хочете, щоб обов'язково думати про "Дозвольте мені йти вперед

365
00:21:42,650 --> 00:21:44,720
»І здійснити те, що вони явно говорять:"

366
00:21:44,720 --> 00:21:48,610
але те, що ви хочете думати про те, "Які ідеї я можу отримати від цього?"

367
00:21:48,610 --> 00:21:50,450
Чого вони дійсно хочуть?

368
00:21:50,450 --> 00:21:55,560
>> А звідти, що ви можете зробити, це створити щось, що задовольняє ці запити

369
00:21:55,560 --> 00:22:00,340
але не обов'язково в тому, що користувач очікує, що вона буде задоволена.

370
00:22:00,340 --> 00:22:03,830
Так, щось подібне до остаточного проекту, в дуже реальному вираженні,

371
00:22:03,830 --> 00:22:07,900
Що корисного евристичного, коли справа доходить до створення чогось кращого,

372
00:22:07,900 --> 00:22:10,630
особливо якщо дизайнер цього зарозумілості про нього

373
00:22:10,630 --> 00:22:14,360
, В якому ви начебто знаю, що краще, ви могли б отримувати з ваших користувачів,

374
00:22:14,360 --> 00:22:16,580
але як ви насправді йти про отримання, що зворотний зв'язок?

375
00:22:16,580 --> 00:22:21,610
У фіналі проекту, дуже конкретно, то, що виробляє оптимальні результати тут?

376
00:22:21,610 --> 00:22:25,030
Що дає оптимальні результати - і я піду з цього у другому -

377
00:22:25,030 --> 00:22:29,190
це процес розробки і тестування, а потім ітерації.

378
00:22:29,190 --> 00:22:32,020
Що я маю на увазі тестування, як правило, при створенні чогось

379
00:22:32,020 --> 00:22:36,970
Ви думаєте, що це досить добре, начебто, "я такий великий дизайнер. Кожен буде любити цього".

380
00:22:36,970 --> 00:22:41,600
І тоді ви поклали його там, і людям не дуже подобається, з деяких причин.

381
00:22:41,600 --> 00:22:46,820
Те, що ви повинні зробити, ви повинні прийняти частину речей, які люди роблять, як

382
00:22:46,820 --> 00:22:49,180
і переробити те, що люди не люблять.

383
00:22:49,180 --> 00:22:53,080
Це звучить як дуже очевидний процес, але цей процес постійно ітерації

384
00:22:53,080 --> 00:22:55,980
понад те, що ви вже побудували це процес, який допомагає вам

385
00:22:55,980 --> 00:22:59,730
не тільки удосконалювати власні навички дизайну, але також допомагає вам поліпшити дизайн

386
00:22:59,730 --> 00:23:03,790
так, що люди насправді цінують ваш продукт ще більше, ніж раніше.

387
00:23:03,790 --> 00:23:07,390
>> Я піду за більш конкретні приклади того, що ви могли б насправді.

388
00:23:07,390 --> 00:23:11,390
Як свого роду останній приклад продукту, давайте подивимося на байдарці.

389
00:23:11,390 --> 00:23:14,970
KAYAK, коли він вийшов було дуже, дуже популярні.

390
00:23:14,970 --> 00:23:18,760
Чи може хто-небудь здогадатися, чому?

391
00:23:18,760 --> 00:23:20,950
Які види речей, які ви хотіли про це, якщо ви використовували його

392
00:23:20,950 --> 00:23:23,990
або які види речей, які ви не любите?

393
00:23:23,990 --> 00:23:31,590
Так. >> [Нерозбірливо відповідь студента] >> Гаразд.

394
00:23:31,590 --> 00:23:34,730
Ось частина його дозволяючи користувачеві є запит, який є більш експансивної

395
00:23:34,730 --> 00:23:38,150
чим дуже обмежувальним кшталт: "Ви повинні вибрати дату початку

396
00:23:38,150 --> 00:23:39,810
», І ви повинні вибрати дату закінчення».

397
00:23:39,810 --> 00:23:44,910
Насправді, він дозволяє бути гнучкими про це, і це дає вам всі польоти в цьому діапазоні.

398
00:23:44,910 --> 00:23:46,730
Небудь ще?

399
00:23:46,730 --> 00:23:50,530
[Студент] Вони включають в себе збори в ціну.

400
00:23:50,530 --> 00:23:53,330
Вони включають збори у вартість.

401
00:23:53,330 --> 00:23:56,720
Податки та речі насправді йти прямо в цю ціну в лівому верхньому

402
00:23:56,720 --> 00:24:00,710
так що ви не обманули, думаючи, що ви насправді платите за $ 240 польотів

403
00:24:00,710 --> 00:24:03,280
коли це дійсно $ 330.

404
00:24:03,280 --> 00:24:06,200
Небудь ще? Так.

405
00:24:06,200 --> 00:24:10,140
[Нерозбірливо відповідь студента]

406
00:24:10,140 --> 00:24:14,610
Я не впевнений, якщо вони дійсно дозволяють це зробити.

407
00:24:14,610 --> 00:24:18,310
Я можу помилятися.

408
00:24:18,310 --> 00:24:23,360
Це може бути цікава річ, якщо ви хочете, щоб помістити більше ваги на певних фільтрів

409
00:24:23,360 --> 00:24:27,000
так що вони штовхають результати, пов'язані з цим фільтром на самому верху.

410
00:24:27,000 --> 00:24:31,920
Але хто може сказати мені, що такого особливого в цьому ліва сторона?

411
00:24:31,920 --> 00:24:39,540
Як ви традиційно подивитися політ на інтернет-послуг до цього?

412
00:24:41,600 --> 00:24:44,650
>> Так. >> [Нерозбірливо відповідь студента] >> Чи можете Ви сказати, що -

413
00:24:44,650 --> 00:24:47,530
[Студент] Кожна авіакомпанія. >> Да. Кожна авіакомпанія має свій власний веб-сайт.

414
00:24:47,530 --> 00:24:50,110
Це об'єднує речі. І?

415
00:24:50,110 --> 00:24:52,190
[Студент] Ви точно знаєте, в який час ти їдеш.

416
00:24:52,190 --> 00:24:54,460
Ви точно знаєте, що раз, коли ви їдете,

417
00:24:54,460 --> 00:24:59,380
але пов'язане з фільтрами, зокрема.

418
00:25:00,710 --> 00:25:03,540
Дозвольте мені підтягти каяк.

419
00:25:11,490 --> 00:25:14,020
О, Боже, спливаючих вікон. Невдалий досвід користувача.

420
00:25:14,020 --> 00:25:17,230
Що відбувається, коли я рухаю цей повзунок?

421
00:25:17,230 --> 00:25:21,010
[Студент] Автоматичні оновлення. >> [Ong] Автоматичні оновлення.

422
00:25:21,010 --> 00:25:23,440
Це те, що дуже важливо.

423
00:25:23,440 --> 00:25:25,380
До цього, коли ви хотіли, щоб подивитися польоту,

424
00:25:25,380 --> 00:25:28,410
Ви повинні були покласти в свій вхід місце розташування, місця виходу, натисніть Search,

425
00:25:28,410 --> 00:25:31,190
він буде обробляти, що і показати свої результати.

426
00:25:31,190 --> 00:25:34,120
Якщо ви хочете змінити ваш запит, вам доведеться натиснути назад двічі,

427
00:25:34,120 --> 00:25:39,770
увійти в новий запит з нуля, а потім робити це знову і знову.

428
00:25:39,770 --> 00:25:43,910
Гарна річ про щось, як це він використовує дуже [нерозбірливо] річ в середині.

429
00:25:43,910 --> 00:25:46,230
Всякий раз, коли ви робите щось на зразок цього, він стріляє з проханням

430
00:25:46,230 --> 00:25:48,420
і повертає вам всі результати відразу.

431
00:25:48,420 --> 00:25:51,680
Такого роду негайного зворотного зв'язку є те, що зробив KAYAK дико популярний

432
00:25:51,680 --> 00:25:55,910
тому що це дійсно легко для мене просто змінити мій запит

433
00:25:55,910 --> 00:25:58,890
і з'ясувати те, що навколо певного діапазону

434
00:25:58,890 --> 00:26:01,950
без того, щоб повернутися назад і вперед, взад і вперед, взад і вперед.

435
00:26:01,950 --> 00:26:05,200
Таким чином, ці всякі речі, які ви хочете думати про те, коли ви розробляєте ваш сайт.

436
00:26:05,200 --> 00:26:08,930
Як я можу зробити це дуже ефективно для моїх користувачів, щоб пройти через все, що вони працюють на

437
00:26:08,930 --> 00:26:13,010
і щоб дістатися до їх кінцевої мети якомога швидше?

438
00:26:13,010 --> 00:26:16,430
[Малан], і крапка Йосипа раніше про користувачів, не обов'язково знаючи, що вони хочуть,

439
00:26:16,430 --> 00:26:18,640
заснований на тому, що ви, хлопці, тепер знаємо про HTML

440
00:26:18,640 --> 00:26:22,780
і у вас є прапорці, радіо-кнопки, виберіть меню, поля вводу тощо,

441
00:26:22,780 --> 00:26:26,140
Як би реалізувати поняття вибору часу початку польоту?

442
00:26:26,140 --> 00:26:30,030
>> Який з цих різних механізмів UI ви б використовували?

443
00:26:30,030 --> 00:26:34,100
Якщо ви просто знати кількість HTML, який викладав до

444
00:26:34,100 --> 00:26:39,070
і ви знаєте, входи радіо-кнопки, прапорці, списки, що розкриваються, і поле введення,

445
00:26:39,070 --> 00:26:43,320
що б ваш природний вибір був для вибору дати?

446
00:26:43,320 --> 00:26:48,670
[Студент] вхід. >> Input. Або, може бути, навіть розкривається з усіма датами, вірно?

447
00:26:48,670 --> 00:26:53,170
Так і з більш складними механізмами користувальницького інтерфейсу, як це на лівій стороні, які можна реалізувати,

448
00:26:53,170 --> 00:26:55,500
Ви можете зробити цей процес набагато більш інтуїтивно за допомогою повзунка

449
00:26:55,500 --> 00:27:01,020
тому що час безперервно, і люди зазвичай не думають в термінах окремі частини.

450
00:27:01,020 --> 00:27:04,950
Добре. Остання річ.

451
00:27:04,950 --> 00:27:07,370
Десять евристики юзабіліті.

452
00:27:07,370 --> 00:27:10,820
Всі речі, про які ми говорили, ймовірно, підпадають під одну з цих категорій.

453
00:27:10,820 --> 00:27:14,420
Якщо ви йдете по цьому посиланню, яку сайтах буде розміщена в Інтернеті,

454
00:27:14,420 --> 00:27:18,900
Ви дійсно будете мати можливість, як створити свій сайт, щоб ці евристики на увазі,

455
00:27:18,900 --> 00:27:21,330
і ці правила великого пальця.

456
00:27:21,330 --> 00:27:26,610
Для ваших проектів, то, що я пропоную вам зробити для того, щоб проектувати ваш додаток краще

457
00:27:26,610 --> 00:27:28,850
це робити паперових прототипів в першу чергу.

458
00:27:28,850 --> 00:27:32,150
Коли ви думаєте про вашому додатку, дуже швидко накидати, що ви хочете, щоб вона виглядала, як

459
00:27:32,150 --> 00:27:36,230
і переконайтеся, що всі коробки розташовані таким чином, що є дуже інтуїтивним для користувача, щоб використовувати

460
00:27:36,230 --> 00:27:39,820
і навіть показати ці паперові прототипи ваших друзів і почати фокус-груп.

461
00:27:39,820 --> 00:27:44,230
Просто отримати 2 або 3 людини разом і попросіть їх просто натисніть на ці паперові прототипи,

462
00:27:44,230 --> 00:27:47,650
і показати їм нові екрани, щоб побачити, якщо вони дійсно розуміють, що відбувається.

463
00:27:47,650 --> 00:27:50,680
>> Те, що ви хочете зробити, це дати їм завдання, мотивувати цю задачу,

464
00:27:50,680 --> 00:27:53,270
і просто дати їм додатки і дозволити їм використовувати його.

465
00:27:53,270 --> 00:27:56,530
Не давати їм вказівки далі.

466
00:27:56,530 --> 00:28:00,920
Ви хочете, щоб насправді дати їм взаємодіяти з вашим додатком таким чином, що дозволяє вам бачити

467
00:28:00,920 --> 00:28:03,870
як вони будуть використовувати його, якщо ви не стояли поруч з ним.

468
00:28:03,870 --> 00:28:05,250
І це дуже важливо.

469
00:28:05,250 --> 00:28:08,780
Це дасть вам багато осяянь, щоб люди обійти конкретні речі

470
00:28:08,780 --> 00:28:10,560
таким чином, що я не збирався їх?

471
00:28:10,560 --> 00:28:14,680
Чи використовують вони конкретні механізми для користувача інтерфейсу на екрані

472
00:28:14,680 --> 00:28:17,490
таким чином, що це свого роду Hacky?

473
00:28:17,490 --> 00:28:22,020
Я не збирався для них зробити це таким чином.

474
00:28:22,020 --> 00:28:23,940
І як тільки ви закінчите з цим, що ви хочете зробити?

475
00:28:23,940 --> 00:28:26,010
Ваша порід дизайн, чи не так?

476
00:28:26,010 --> 00:28:29,600
Те, що ви хочете зробити, ви хочете розвинути, а потім зробити цей процес знову і знову.

477
00:28:29,600 --> 00:28:32,110
Так покажіть його друзям, як тільки ви створили його, протестувати його,

478
00:28:32,110 --> 00:28:36,630
розробки, тестування, розробки, тестування, ітерації, далі і далі і вперед.

479
00:28:36,630 --> 00:28:39,720
Дизайн дуже ітераційний процес в цьому сенсі.

480
00:28:39,720 --> 00:28:43,280
Ви насправді потрібно щось побудувати, а потім реалізувати речі про нього

481
00:28:43,280 --> 00:28:46,520
що ви не розумієте до і повернутися назад і поліпшення від цього.

482
00:28:46,520 --> 00:28:50,890
Тепер, що стосується розвитку частина, це те, що Томмі збираюся показати Вам, після перерви

483
00:28:50,890 --> 00:28:53,220
і як ви могли б реалізувати щось подібне автозаповнення

484
00:28:53,220 --> 00:28:56,610
таким чином, досить просто.

485
00:28:57,440 --> 00:28:59,550
[Малан] Як Томмі встановлює тут, питання тоді.

486
00:28:59,550 --> 00:29:03,780
Багато з перших сайтів - і коли сказав Йосип 1990-х років стиль сайту,

487
00:29:03,780 --> 00:29:07,640
це було реалізації, де, якщо ви хочете, щоб вибрати час початку і закінчення часу,

488
00:29:07,640 --> 00:29:10,380
чесно кажучи, ще в день і навіть на деяких веб-сайтах сьогодні,

489
00:29:10,380 --> 00:29:13,220
як ви робите це ви берете в годині їзди від списку, що розкривається

490
00:29:13,220 --> 00:29:15,910
Ви вибираєте хвилин від випадаючого, може бути, ви вибираєте AM, PM,

491
00:29:15,910 --> 00:29:17,440
а потім ви зробите це ще 3 рази.

492
00:29:17,440 --> 00:29:19,920
І так з 6 кліків і, можливо, деякі прокрутки

493
00:29:19,920 --> 00:29:24,000
користувачеві може реально забезпечити якусь дату і / або час діапазон в цьому сенсі.

494
00:29:24,000 --> 00:29:27,920
>> Так виразно оптимальним, і все ж досі ми не бачили ніяких виразних можливостей

495
00:29:27,920 --> 00:29:30,330
У будь-якому з мов, ми дивилися на щось сексуальніше

496
00:29:30,330 --> 00:29:32,620
як це слайдер час початку і час закінчення.

497
00:29:32,620 --> 00:29:36,290
Але якщо ви згадаєте тиждень 0, коли ми говорили про Scratch,

498
00:29:36,290 --> 00:29:39,080
там теж не було віджетів, які тільки що зробили певні речі.

499
00:29:39,080 --> 00:29:42,700
Ви дійсно тільки що ці основи, такі як цикли і умови тощо.

500
00:29:42,700 --> 00:29:46,910
Таким чином, вид просто думати дуже абстрактно зараз, незалежно від особливостей HTML,

501
00:29:46,910 --> 00:29:51,260
те, що відбувається насправді щось подібне до цього часу початку і кінця повзунок часу?

502
00:29:51,260 --> 00:29:54,960
Коли я рухаю мишею і я натискаю на цю маленьку моркву символ зліва

503
00:29:54,960 --> 00:29:59,220
і почати перетягування, програмним, що це ви хочете бути в змозі здійснити

504
00:29:59,220 --> 00:30:01,000
щоб це сталося?

505
00:30:01,000 --> 00:30:04,920
Які питання, які логічні вирази ви хочете, щоб мати можливість запитати?

506
00:30:04,920 --> 00:30:06,930
Що відбувається насправді? Семмі?

507
00:30:06,930 --> 00:30:10,080
[Студент] Де позицію курсора? >> Добре. Де позицію курсора?

508
00:30:10,080 --> 00:30:11,970
Це було те, в чому ми потребували, щоб висловити назад в Scratch,

509
00:30:11,970 --> 00:30:14,690
чи був він заснований на місці або навіть колір і т.п..

510
00:30:14,690 --> 00:30:18,410
Ви могли б пригадати дуже коротко в понеділок були всі ці речі називаються події

511
00:30:18,410 --> 00:30:22,370
У світі Web, і таким чином, є такі речі, як OnClick і OnKeyPress

512
00:30:22,370 --> 00:30:25,960
і OnKeyUp і OnMouseOver і onmouseout.

513
00:30:25,960 --> 00:30:29,130
Так розумію, що навіть ці речі, які ми приймали як належне на веб-

514
00:30:29,130 --> 00:30:32,190
з сайтів, як Facebook і Gmail, навіть якщо ви не знаєте,

515
00:30:32,190 --> 00:30:34,890
як ви, можливо, здійснювати, тому що немає нічого навіть подібного в лекції

516
00:30:34,890 --> 00:30:38,570
або задач 7, розумієш, що з цим точно такі ж основи,

517
00:30:38,570 --> 00:30:41,090
з HTTP і параметри GET і POST і,

518
00:30:41,090 --> 00:30:44,010
з основною HTML входів, які ми розглянули досі

519
00:30:44,010 --> 00:30:47,690
і в одну мить з програмними механізмами, Томмі збирається ввести

520
00:30:47,690 --> 00:30:51,300
Ви можете почати, щоб виразити себе так само, як ви робили в тиждень 0

521
00:30:51,300 --> 00:30:53,800
з дуже інтуїтивно перетягування.

522
00:30:53,800 --> 00:30:58,950
>> Таким чином, з урахуванням сказаного, Томмі MacWilliam і деякі нові шматочки головоломки для нас для Web.

523
00:30:58,950 --> 00:31:03,450
Добре. Мене звати Томмі, і я буду говорити про JavaScript.

524
00:31:03,450 --> 00:31:07,150
Просто обмовка: Я дотримуюся думки, що наявність є кращим мовою програмування

525
00:31:07,150 --> 00:31:09,010
В цілому весь світ.

526
00:31:09,010 --> 00:31:11,940
Є багато людей, які зі мною не погодяться, але це просто дивно.

527
00:31:11,940 --> 00:31:16,330
Як тільки ви повернетеся до C, якщо у вас є, щоб написати C для іншого класу або інших мов,

528
00:31:16,330 --> 00:31:19,780
Це просто дуже засмучує у всіх низькорівневих деталей ви повинні загрузнути дюйма

529
00:31:19,780 --> 00:31:23,050
Так що якщо ви ніколи не сумувати про те, як дратує C, щоб написати,

530
00:31:23,050 --> 00:31:25,130
просто повернутися, написати кілька JavaScript. Це нірвана.

531
00:31:25,130 --> 00:31:27,980
Ви будете почувати себе набагато краще про вашу поганий день.

532
00:31:27,980 --> 00:31:31,900
Багато магії JavaScript виходить від його здатності маніпулювати речами

533
00:31:31,900 --> 00:31:33,730
, Які вже знаходяться на сторінці.

534
00:31:33,730 --> 00:31:38,520
Коли ми писали нашу PHP скрипти, вони виконуються на сервері,

535
00:31:38,520 --> 00:31:42,270
і в кінці кінців, що PHP скрипт, ймовірно, виводити деякі HTML.

536
00:31:42,270 --> 00:31:45,860
Це HTML було відправлено клієнтові, а потім, що це було.

537
00:31:45,860 --> 00:31:50,180
Якщо PHP хотів додати кнопку на сторінці, наприклад, вона не може цього зробити.

538
00:31:50,180 --> 00:31:54,350
Це повинно було б зробити зовсім новий HTML файл і відправити його в браузер.

539
00:31:54,350 --> 00:31:57,840
За допомогою JavaScript ми знаємо, що ми можемо поновити речі, а вони вже на сторінці,

540
00:31:57,840 --> 00:32:00,840
і через це ми можемо надати набагато більш миттєвий зворотний зв'язок,

541
00:32:00,840 --> 00:32:06,150
, Який буде дійсно поліпшити користувальницький досвід на нашому сайті.

542
00:32:06,150 --> 00:32:09,330
Тільки швидке повторення селекторів JavaScript.

543
00:32:09,330 --> 00:32:11,590
Ми знаємо, що коли ми завантажити HTML-сторінку,

544
00:32:11,590 --> 00:32:13,890
який буде представлений в DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM пам'ятайте саме це велике дерево, де елементи пов'язані в цій великій ієрархії.

546
00:32:19,340 --> 00:32:21,810
Коли ми працювали з базами даних в PSET 7,

547
00:32:21,810 --> 00:32:26,280
одна з перших речей, яку ми повинні знати, як зробити, це запити до бази даних.

548
00:32:26,280 --> 00:32:29,060
У нас є велика таблиця користувачів, і іноді ми просто хочемо сказати,

549
00:32:29,060 --> 00:32:33,260
"Я хочу тільки деякі з цих користувачів, які відповідають певній умові."

550
00:32:33,260 --> 00:32:36,020
Точно так само, коли у нас є DOM ми повинні якимось чином запиті він.

551
00:32:36,020 --> 00:32:39,490
Нам потрібен якийсь спосіб сказати: "Я хочу, щоб всі кнопки, які виглядають так

552
00:32:39,490 --> 00:32:41,860
»Або все зображення на сторінці."

553
00:32:41,860 --> 00:32:44,330
І ці селектори дозволяють нам це зробити.

554
00:32:44,330 --> 00:32:45,690
Так що швидке резюме.

555
00:32:45,690 --> 00:32:50,770
Це перша тут, це # уявити, що це таке збираєтеся вибрати? Хтось пам'ятає?

556
00:32:50,770 --> 00:32:54,880
[Нерозбірливо відповідь студента] >> Так, саме так.

557
00:32:54,880 --> 00:32:59,510
Це буде вибрати елемент на сторінці, яка має ідентифікатор уявити.

558
00:32:59,510 --> 00:33:03,470
І так, що хеш-тег говорить, що це селектор буде працювати з ідентифікаторами.

559
00:33:03,470 --> 00:33:07,630
Як щодо другої, це. Центру, що буде, що вибрати?

560
00:33:11,360 --> 00:33:15,180
Так. >> [Студент] класу. >> Саме так. Це зараз збираєтеся вибрати по класу.

561
00:33:15,180 --> 00:33:18,840
Різниця між ID та класу тут, як правило, ідентифікатор повинен бути унікальним

562
00:33:18,840 --> 00:33:20,820
в будь-який простір, ви шукаєте більш.

563
00:33:20,820 --> 00:33:23,080
Так що, якщо ви шукали по всій веб-сторінки,

564
00:33:23,080 --> 00:33:27,740
Ви дійсно повинні мати тільки 1 елемент з, що деякі ID, тому в даному випадку уявити.

565
00:33:27,740 --> 00:33:31,330
З класами, з іншого боку, ми можемо мати більш ніж 1 елемент на одній сторінці

566
00:33:31,330 --> 00:33:33,130
з тим же класом.

567
00:33:33,130 --> 00:33:36,580
Це може бути корисно для говорячи, що я хочу, щоб вибрати все, що по центру сторінки

568
00:33:36,580 --> 00:33:38,450
, А не тільки 1 річ.

569
00:33:38,450 --> 00:33:40,310
>> І, нарешті, ця остання тут трохи складніше,

570
00:33:40,310 --> 00:33:43,890
Але що це буде вибрати з DOM?

571
00:33:46,650 --> 00:33:48,810
[Нерозбірливо відповідь студента] >> Що це таке?

572
00:33:48,810 --> 00:33:53,250
[Студент] нічого, що тег. >> У нас є 2-х частинах тут.

573
00:33:53,250 --> 00:33:58,070
Друга частина буде сказати, що я хочу, щоб вибрати ці мітки з тегом введення,

574
00:33:58,070 --> 00:34:00,730
так що будь-який елемент, який є введення тегов.

575
00:34:00,730 --> 00:34:03,080
Але я не хочу, щоб просто вибрати всі входи

576
00:34:03,080 --> 00:34:05,170
тому що те начебто кнопки відправки може бути вхід

577
00:34:05,170 --> 00:34:08,409
і щось на зразок текстового поля може бути вхід.

578
00:34:08,409 --> 00:34:11,909
Так що з цим квадратних дужках я кажу, я тільки хочу, щоб вибрати ті елементи,

579
00:34:11,909 --> 00:34:14,110
, Які мають тип тексту.

580
00:34:14,110 --> 00:34:17,400
Десь в моєму HTML-теги У мене є атрибут типу,

581
00:34:17,400 --> 00:34:19,750
і значення цього атрибута має бути текст.

582
00:34:19,750 --> 00:34:21,340
Так як про цю першій частині тут?

583
00:34:21,340 --> 00:34:25,489
Перше слово цього селектора формі, то у мене є простір, а потім це вхідної частини.

584
00:34:25,489 --> 00:34:29,620
Що це робити, поставивши форму перед ним?

585
00:34:33,409 --> 00:34:35,860
Це буде в основному обмежує наш запит.

586
00:34:35,860 --> 00:34:38,510
Це може бути так, що у нас є кілька входів на сторінці

587
00:34:38,510 --> 00:34:41,080
, Які не є нащадками форми.

588
00:34:41,080 --> 00:34:46,150
Що це буде зробити це буде сказати, що я тільки хочу вхідних тегів, які десь над ними

589
00:34:46,150 --> 00:34:49,030
деякі батьківський елемент форми.

590
00:34:49,030 --> 00:34:52,100
І ось таким чином ми можемо зробити їх більш ієрархічні запити

591
00:34:52,100 --> 00:34:55,000
так що ми не просто повинні вибрати всі відповідні даному селектору.

592
00:34:55,000 --> 00:35:00,760
Ми можемо виду граничного обсягу цього запиту на щось інше.

593
00:35:00,760 --> 00:35:04,000
Так що тепер ми знаємо, як вибрати елементи на сторінці,

594
00:35:04,000 --> 00:35:06,780
Давайте поговоримо трохи про AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX є все ще дуже модно абревіатурою, що розшифровується як Asynchronous JavaScript і XML.

596
00:35:12,270 --> 00:35:15,640
Просто так вийшло, що XML є лише деякі зі способів представлення даних.

597
00:35:15,640 --> 00:35:20,920
>> Таке втратив популярність останнім часом, так що X в AJAX не використовується весь час.

598
00:35:20,920 --> 00:35:26,220
Загалом, що AJAX дозволяє нам зробити, це HTTP запити

599
00:35:26,220 --> 00:35:28,620
З контексту JavaScript.

600
00:35:28,620 --> 00:35:32,310
Коли ми знаходимося в нашому веб-браузер, і ми навігації по сторінках і клацаємо по посиланню,

601
00:35:32,310 --> 00:35:37,790
що наш браузер буде зробити, це HTTP запит до того, що ми натискаємо посилання.

602
00:35:37,790 --> 00:35:41,670
Але це не завжди ідеальні, тому що якщо це так, то як Давид говорив:

603
00:35:41,670 --> 00:35:45,220
Ми завжди повинні зробити користувачі натискають кнопку Submit або натисніть посилання

604
00:35:45,220 --> 00:35:50,380
для того, щоб щось сталося, що збирається залучити запиту HTTP.

605
00:35:50,380 --> 00:35:54,160
Так що з AJAX ми можемо зробити ці запити від імені JavaScript.

606
00:35:54,160 --> 00:35:57,020
Це означає, що всякий раз, коли користувач взаємодіє зі сторінкою або що-небудь трапиться,

607
00:35:57,020 --> 00:36:01,780
ми дійсно можемо зробити програмний запит в інший файл PHP на нашому сайті

608
00:36:01,780 --> 00:36:06,280
або що-небудь ще, і отримати дані, що файл випльовує.

609
00:36:06,280 --> 00:36:09,860
Давайте подивимося на прикладі AJAX.

610
00:36:09,860 --> 00:36:16,140
Це наша CS50 сторінка фінансів, з яким, ми сподіваємося, що деякі з нас знайоме.

611
00:36:16,140 --> 00:36:21,790
Якщо ми подивимося на HTML цієї сторінки, ми бачимо тут, що я додав кілька речей,

612
00:36:21,790 --> 00:36:23,820
однією з яких я дав цю форму ID.

613
00:36:23,820 --> 00:36:26,480
Я вже говорив ID = "форм-цитату".

614
00:36:26,480 --> 00:36:31,910
Я зробив це тільки тому, що він збирається зробити це трохи легше вибрати з DOM

615
00:36:31,910 --> 00:36:35,090
так як я можу просто зробити дуже простий запит.

616
00:36:35,090 --> 00:36:38,960
Що я хочу зробити тут, я хочу, щоб виправити деякі проблеми з CS50 фінансів.

617
00:36:38,960 --> 00:36:41,550
Так що, якщо ми йдемо в finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
кожен раз, коли я хочу отримати цитату, я повинен натиснути цю кнопку Get Цитата

619
00:36:45,700 --> 00:36:48,960
і що Отримати спеціальна пропозиція кнопку, а потім бере мене в іншу цілу сторінку.

620
00:36:48,960 --> 00:36:52,400
А якщо я хочу ще однією цитатою, потрібно натискати кнопку Назад, а потім ввести його,

621
00:36:52,400 --> 00:36:54,480
Я отримую цитати, і я вдарив кнопку Назад.

622
00:36:54,480 --> 00:36:56,840
Це дійсно не кращий користувальницький досвід.

623
00:36:56,840 --> 00:37:01,570
Хто б реально використовувати сайт, якщо це так повільно, щоб ціни на акції?

624
00:37:01,570 --> 00:37:05,630
Отже, що ми хочемо зробити з AJAX, це видалити цей крок йти на окрему сторінку

625
00:37:05,630 --> 00:37:08,410
Для перегляду результатів.

626
00:37:08,410 --> 00:37:11,240
>> Те, що ми дійсно тільки просити, що насправді невелика ціна,

627
00:37:11,240 --> 00:37:14,240
і це тільки дуже мала кількість даних.

628
00:37:14,240 --> 00:37:17,400
Таким чином, немає необхідності, щоб я ще цілий HTML сторінки,

629
00:37:17,400 --> 00:37:20,670
Завантажити нову партію HTML, може бути, скачати деякі інші зображення,

630
00:37:20,670 --> 00:37:24,410
деякі інші файли CSS тільки для мене, щоб відповісти на це дуже просте питання

631
00:37:24,410 --> 00:37:27,810
про те, скільки робить цю вартості акцій.

632
00:37:27,810 --> 00:37:31,000
За допомогою AJAX ми можемо зробити це набагато простіше.

633
00:37:31,000 --> 00:37:36,400
Ми бачимо тут, що я компонування у файл JavaScript називають quote.js.

634
00:37:36,400 --> 00:37:40,140
Давайте насправді відкрити файл. Не там.

635
00:37:42,610 --> 00:37:45,860
Всі мої файли JavaScript будуть розташовані в HTML

636
00:37:45,860 --> 00:37:47,630
так що веб-браузер може отримати до нього доступ.

637
00:37:47,630 --> 00:37:50,330
Тоді у нас є окремий каталог тут для JavaScript,

638
00:37:50,330 --> 00:37:54,340
і тепер ось quote.js.

639
00:37:54,340 --> 00:38:00,930
У верхній частині цього файлу це говорить тут, що я хочу чекати цілу сторінку для завантаження

640
00:38:00,930 --> 00:38:04,830
перш, ніж я намагаюся робити. Чому це необхідно?

641
00:38:04,830 --> 00:38:08,650
Виявляється, що наступне, що я збираюся зробити, так це почати шукати елемент

642
00:38:08,650 --> 00:38:10,810
, Що відповідає деякий селектор.

643
00:38:10,810 --> 00:38:15,600
Якщо це буде коли-небудь JavaScript виконуються перед цим елементом завантажується на сторінку,

644
00:38:15,600 --> 00:38:17,820
Потім все, що я намагаюся зробити, це не буде працювати

645
00:38:17,820 --> 00:38:20,580
тому що я збираюся спробувати, щоб вибрати те, що поки не існує.

646
00:38:20,580 --> 00:38:23,780
Таким чином, ця лінія нагорі говорить, що я хочу, щоб ти почекай, поки всі не завантажуються

647
00:38:23,780 --> 00:38:28,030
так що ми гарантували, що будь-які елементи я шукаю насправді на цій сторінці.

648
00:38:29,730 --> 00:38:34,310
Цей знак долара означає тут я використовую бібліотеку під назвою jQuery.

649
00:38:34,310 --> 00:38:38,570
Це JQuery бібліотеки дозволяє нам використовувати ці селектори, які ми тільки що розглянули.

650
00:38:38,570 --> 00:38:44,010
Говорячи $ переходячи потім в якості аргументу ця форма # лапки,

651
00:38:44,010 --> 00:38:47,910
Я тепер вибрати цю форму, яку ми тільки поглянули на.

652
00:38:47,910 --> 00:38:52,290
Тепер у мене є уявлення, що форма в пам'яті якось.

653
00:38:52,290 --> 00:38:56,760
>> На цьому об'єкті зараз, це подання форми,

654
00:38:56,760 --> 00:38:58,890
Я тепер за допомогою функції закликали.

655
00:38:58,890 --> 00:39:02,710
Що ця функція робить це збирається приєднати обробник подій.

656
00:39:02,710 --> 00:39:06,310
Подія, яку ми збираємося прослуховувати цю подію відправки.

657
00:39:06,310 --> 00:39:08,890
Таким чином, коли користувач натискає кнопку Submit, що або натискає Enter,

658
00:39:08,890 --> 00:39:11,730
ця подія буде спрацьовувати.

659
00:39:11,730 --> 00:39:16,390
При викликах в це, я тепер можу перевизначити поведінку за замовчуванням форми.

660
00:39:16,390 --> 00:39:19,770
Без цього JavaScript, форма представить до того, що PHP файлів

661
00:39:19,770 --> 00:39:22,110
Ми використовували в тому, що дія атрибуту.

662
00:39:22,110 --> 00:39:25,440
Але замість цього, я зараз говорю, почекай, почекай, почекай, я не хочу, щоб ви насправді зробити це.

663
00:39:25,440 --> 00:39:31,140
Я хочу, щоб це відбулося, перш ніж піти і спробувати уявити деякі файли PHP.

664
00:39:31,140 --> 00:39:32,870
Тепер те, що я хочу робити?

665
00:39:32,870 --> 00:39:39,270
На даний момент я хочу використовувати AJAX якось завантажити в те, що ціни на акції.

666
00:39:39,270 --> 00:39:44,170
Перше, що мені потрібно знати, це те, що фондовий користувач дивиться вгору.

667
00:39:44,170 --> 00:39:46,760
Для цього я буду використовувати інший селектор.

668
00:39:46,760 --> 00:39:49,020
Це вже третій селектор ми дивилися раніше.

669
00:39:49,020 --> 00:39:54,460
Це говорить про те, що я хочу розпочати цю форму елемента з ID форм-цитати.

670
00:39:54,460 --> 00:39:58,440
Потім десь всередині, що форми там повинен бути вхід елемента

671
00:39:58,440 --> 00:40:01,270
, Який має назву символу.

672
00:40:01,270 --> 00:40:05,460
Якщо ми оглянемося на нашу HTML, ми побачили, що у нас був вхід [ім'я = символ].

673
00:40:05,460 --> 00:40:12,380
Це означає, що це буде вибрати, що текстове поле, яке користувач вводить в.

674
00:40:12,380 --> 00:40:13,870
Це добре. У нас є текстове поле.

675
00:40:13,870 --> 00:40:17,360
Тепер нам просто потрібно знати, що всередині нього.

676
00:40:17,360 --> 00:40:20,290
Для цього ми можемо назвати цей метод тут, це. Вал,

677
00:40:20,290 --> 00:40:23,240
і це говорить, що я знаю, що текстове поле у ​​вас є.

678
00:40:23,240 --> 00:40:28,160
Я хочу, щоб ти сказав мені, що це, введений користувачем в це поле.

679
00:40:28,160 --> 00:40:34,440
Тепер у нас є рядок називається символ, який дорівнює будь-який користувач ввели дюйма

680
00:40:34,440 --> 00:40:39,820
Це добре. Ми можемо використовувати цей рядок зараз, щоб зробити наше прохання.

681
00:40:39,820 --> 00:40:42,450
Це нова функція тут, це $,

682
00:40:42,450 --> 00:40:44,900
крім ми більше не буде вибору елементів,

683
00:40:44,900 --> 00:40:48,910
Ми збираємося виклику різних функцій, наданого нам JQuery.

684
00:40:48,910 --> 00:40:54,810
Ця функція AJAX є те, що насправді відбувається, щоб зробити цей запит HTTP.

685
00:40:54,810 --> 00:40:57,000
Таким чином, ми повинні сказати їй кілька речей.

686
00:40:57,000 --> 00:41:01,410
Перше, що ми повинні сказати це функція, де я хочу проханням піти.

687
00:41:01,410 --> 00:41:08,910
Десь в моєму проекті у мене є цей файл всередині HTML директорію з ім'ям quote.php.

688
00:41:08,910 --> 00:41:15,150
Я можу отримати доступ до цього файлу, ми бачили, саме так, якщо я йду на локальний / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Я хочу, щоб мої JavaScript, щоб зробити запит на цій сторінці.

690
00:41:20,450 --> 00:41:22,920
Який запит зараз?

691
00:41:22,920 --> 00:41:27,210
Ми бачили раніше, що форма має цей метод = "повідомлення" атрибут,

692
00:41:27,210 --> 00:41:29,270
і це означає, що він збирається зробити POST запит,

693
00:41:29,270 --> 00:41:32,630
так що не збирається небудь в URL, а не GET запит,

694
00:41:32,630 --> 00:41:36,860
який буде просто звільнений, якщо ми просто зверталися сторінки з веб-браузера, наприклад.

695
00:41:36,860 --> 00:41:41,260
Тепер, коли ми сказали, що я хочу зробити запит HTTP POST

696
00:41:41,260 --> 00:41:44,840
на сторінці розташований на quote.php.

697
00:41:44,840 --> 00:41:51,490
Коли ми дізнайтеся, пам'ятайте, що ми могли отримати доступ до елементів введення всередині цієї форми

698
00:41:51,490 --> 00:41:54,430
з $ _POST змінних.

699
00:41:54,430 --> 00:41:58,710
До цих пір в історії, яку ми, власне, не надіслали ніяких даних поки немає.

700
00:41:58,710 --> 00:42:00,640
Ми тільки що сказали, що ми робимо запит AJAX

701
00:42:00,640 --> 00:42:03,200
і ось тип запиту ми робимо.

702
00:42:03,200 --> 00:42:07,090
Тепер нам потрібно насправді відправити деякі дані на сторінку.

703
00:42:07,090 --> 00:42:10,930
Для цього ми можемо використовувати це властивість, зване даних.

704
00:42:10,930 --> 00:42:14,950
Значення цієї властивості насправді асоціативний масив.

705
00:42:14,950 --> 00:42:19,390
Причиною цього є це дозволяє нам направити більше всього в 1 порції даних.

706
00:42:19,390 --> 00:42:24,750
Ось чому у нас є ці фігурні дужки тут вкладений в ці інші фігурні дужки.

707
00:42:24,750 --> 00:42:29,680
Ключі в цих асоціативних масивів буде те ж саме

708
00:42:29,680 --> 00:42:32,630
як ті атрибути імені в нашій елементи форми.

709
00:42:32,630 --> 00:42:35,740
Це означає, що якщо я посилаю за ключовими символом,

710
00:42:35,740 --> 00:42:41,870
це означає, що моя сторінка PHP може отримати доступ до цих даних з $ _POST [символ]

711
00:42:41,870 --> 00:42:44,640
так само, як ми робили це раніше, коли ми були відправкою форми.

712
00:42:44,640 --> 00:42:47,090
А тепер фактичних даних ми хочемо послати

713
00:42:47,090 --> 00:42:50,790
буде значення всередині цієї асоціативний масив.

714
00:42:50,790 --> 00:42:54,070
>> Ми зберегли цей текст в змінній символ,

715
00:42:54,070 --> 00:42:57,380
і тому ми посилаємо по даний час ключовим символом

716
00:42:57,380 --> 00:43:01,380
і значення будь-який користувач ввели дюйма

717
00:43:01,380 --> 00:43:06,270
Зараз ми зробили цей запит HTTP, наш PHP файл виконується,

718
00:43:06,270 --> 00:43:11,480
і він збирається відправити деякі дані назад тепер до клієнта, який тільки що зробив це прохання.

719
00:43:11,480 --> 00:43:15,220
Тепер ми повинні реагувати на все, що офіціант сказав нам.

720
00:43:15,220 --> 00:43:20,180
Для цього у нас є це остання властивість називається тут успіху.

721
00:43:20,180 --> 00:43:24,240
Значення цього успіху ключ насправді буде функція,

722
00:43:24,240 --> 00:43:26,910
і це одна з дійсно цікавих речей можна зробити за допомогою JavaScript.

723
00:43:26,910 --> 00:43:31,720
Не тільки у вас є цілі масиви або як значення всередині асоціативний масив,

724
00:43:31,720 --> 00:43:34,170
Ми також може мати функцію.

725
00:43:34,170 --> 00:43:36,380
Так, кажучи, успіх, це мій ключ.

726
00:43:36,380 --> 00:43:38,830
Товстої кишки говорить тут йде значення,

727
00:43:38,830 --> 00:43:41,810
і в даний час значення цього насправді є функцією.

728
00:43:41,810 --> 00:43:44,460
Тому ми не повинні дати цієї функції ім'я саме по собі.

729
00:43:44,460 --> 00:43:48,820
Ми можемо тільки сказати, що це буде деяка функція. Це займе 1 аргумент.

730
00:43:48,820 --> 00:43:51,190
В якості аргументу цієї функції буде

731
00:43:51,190 --> 00:43:54,460
все, що сервер відправив нас назад із запиту.

732
00:43:54,460 --> 00:43:57,750
Так само, як коли наш браузер робить запит, сервер посилає щось натомість

733
00:43:57,750 --> 00:43:59,060
і браузер відображає його,

734
00:43:59,060 --> 00:44:03,030
У контексті AJAX ми просто зробили запит, сервер послав щось натомість,

735
00:44:03,030 --> 00:44:07,110
і тепер ми, що представлено у вигляді рядка.

736
00:44:07,110 --> 00:44:11,280
З цією рядком я б хотів, щоб побачити, що на сторінці.

737
00:44:11,280 --> 00:44:14,040
Для цього я буду мати одну останню селектора.

738
00:44:14,040 --> 00:44:17,570
Я хочу, щоб вибрати елемент з ID ціною.

739
00:44:17,570 --> 00:44:20,710
Це просто порожні справ, які я створив на сторінці,

740
00:44:20,710 --> 00:44:26,640
і я хочу, щоб встановити вміст цього DIV бути будь-який сервер відправив нас назад.

741
00:44:26,640 --> 00:44:30,280
Я насправді зміна quote.php небагато.

742
00:44:30,280 --> 00:44:33,460
>> Замість виклику візуалізації і рендеринга деякі сторінки,

743
00:44:33,460 --> 00:44:38,100
quote.php зараз просто збирається роздрукувати вартості акцій у вигляді рядка.

744
00:44:38,100 --> 00:44:41,880
Так що якщо ви були насправді відвідати сторінку, ви б просто бачити, що невеликі рядки

745
00:44:41,880 --> 00:44:45,030
все, що ціна акції.

746
00:44:45,030 --> 00:44:50,170
Останнє, що нам потрібно зробити, тут просто переконайтеся, що ця функція повертає брехня.

747
00:44:50,170 --> 00:44:53,560
Це говорить про те, що якщо я усередині обробника події

748
00:44:53,560 --> 00:44:57,300
і що обробник події повертає брехня замість повернення правда,

749
00:44:57,300 --> 00:45:01,510
це означає, що я не хочу початкове подія, щоб стріляти.

750
00:45:01,510 --> 00:45:05,270
У цьому випадку, якщо б ми не мали JavaScript, і ми представили форму,

751
00:45:05,270 --> 00:45:08,280
наш веб-браузера буде сказати: "Я збираюся відправити ці дані разом"

752
00:45:08,280 --> 00:45:10,130
і вони збираються послати вас на іншу сторінку.

753
00:45:10,130 --> 00:45:14,360
Оскільки ми використовуємо AJAX в даний час, немає необхідності відправляти користувача на іншу сторінку.

754
00:45:14,360 --> 00:45:17,920
Ми просто збираємося для відображення результатів динамічного на цій же сторінці.

755
00:45:17,920 --> 00:45:21,460
Ми дійсно не хочемо, щоб вони нікуди йти, і я хочу, щоб залишитися на тій же сторінці.

756
00:45:21,460 --> 00:45:27,060
Так що, повертаючись помилковим, ми гарантуємо, що форма не зробить це за нас.

757
00:45:27,060 --> 00:45:31,170
Давайте поглянемо на те, що це насправді виглядає.

758
00:45:31,170 --> 00:45:34,180
Наші цитати сторінки виглядає однаково.

759
00:45:34,180 --> 00:45:37,240
Дозвольте мені підтягти інспектор сюди, щоб ми могли бачити, що відбувається.

760
00:45:37,240 --> 00:45:40,270
Зробити це трохи менше, величезні.

761
00:45:40,270 --> 00:45:44,590
Пам'ятайте, що якщо ми відкриваємо вкладку Мережа, це де ми можемо бачити всі запити HTTP

762
00:45:44,590 --> 00:45:47,570
що відбувається на сторінці.

763
00:45:47,570 --> 00:45:52,890
>> Для символу дозвольте мені ввести AAPL і натисніть Отримати спеціальна пропозиція.

764
00:45:52,890 --> 00:45:56,720
Тепер ми побачили, що частка Apple, стоїть деяка кількість доларів

765
00:45:56,720 --> 00:46:00,410
тільки що з'явився на сторінці, але URL не зміниться.

766
00:46:00,410 --> 00:46:04,570
У самому справі, тут HTTP запиту, який ми тільки що зробили.

767
00:46:04,570 --> 00:46:09,980
Ми зробили POST запит quote.php. Це має сенс.

768
00:46:09,980 --> 00:46:12,800
Це те, що сервер відправив нас назад.

769
00:46:12,800 --> 00:46:16,320
Це вже не цієї гігантської HTML документа із зображеннями тощо,

770
00:46:16,320 --> 00:46:20,920
це просто рядок тексту, а потім ми просто відображаються рядки тексту.

771
00:46:20,920 --> 00:46:26,290
Якщо ми повернемося до заголовків і подивитися, що ми насправді посланий всередині цього запиту HTTP,

772
00:46:26,290 --> 00:46:33,950
Ми бачимо тут, що ми послали по ключовим символом і значенням AAPL,

773
00:46:33,950 --> 00:46:36,430
яких є те, що користувач ввів дюйма

774
00:46:36,430 --> 00:46:39,230
Це добре, але це все одно трохи дратує.

775
00:46:39,230 --> 00:46:42,490
Я все ще повинен натиснути цю кнопку, щоб одержати котирування акцій.

776
00:46:42,490 --> 00:46:45,880
Ми зайняті люди, і у нас немає часу, щоб натиснути кнопку.

777
00:46:45,880 --> 00:46:49,910
Google зрозумів, що це якийсь час назад, коли вони здійснюються Google Instant.

778
00:46:49,910 --> 00:46:53,590
Що Google Instant робить це, як ви друкуєте він просто починає показувати результати для вас

779
00:46:53,590 --> 00:46:56,520
так що вам не доведеться турбуватися про навіть натиснути Search.

780
00:46:56,520 --> 00:46:58,730
Насправді, кумедна історія пов'язана з цим.

781
00:46:58,730 --> 00:47:01,100
Як тільки Google Instant вийшов, люди на кшталт: "Вау, це супер дивним".

782
00:47:01,100 --> 00:47:02,540
"Це так здорово".

783
00:47:02,540 --> 00:47:05,950
І студент вниз в Стенфордському який був 19 в той час,

784
00:47:05,950 --> 00:47:09,000
Про цей сайт під назвою YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Всі миттєвих YouTube робить це ефективно шукати YouTube миттєво.

786
00:47:13,170 --> 00:47:17,020
Таким чином, замість того, щоб піти на YouTube.com і натисніть Search,

787
00:47:17,020 --> 00:47:21,650
коли я починаю набирати в YouTube миттєвих щось подібне CS50,

788
00:47:21,650 --> 00:47:25,320
ми могли бачити тут, що вона намагається на повільне підключення до Інтернету

789
00:47:25,320 --> 00:47:28,500
заповнити ці результати жити.

790
00:47:28,500 --> 00:47:35,590
Щоб це зробити, ми дійсно можемо зробити дуже простий модифікації нашого файлу quote.js.

791
00:47:35,590 --> 00:47:40,900
Зараз ми кріплення цю подію, коли форми.

792
00:47:40,900 --> 00:47:43,760
Ми не хочемо, щоб користувач стверджує, що форма більше,

793
00:47:43,760 --> 00:47:48,570
так що давайте замість вогонь цю подію кожен раз, коли користувач натискає клавішу.

794
00:47:48,570 --> 00:47:53,200
Для цього давайте спочатку змінити події з представить KeyUp.

795
00:47:53,200 --> 00:47:55,740
Це означає, що, не чекаючи вигляді представити

796
00:47:55,740 --> 00:47:58,490
кожен раз, коли натиснута клавіша, щось трапиться.

797
00:47:58,490 --> 00:48:02,030
Він більше не має сенс докласти цю KeyUp подій в цілому вигляді.

798
00:48:02,030 --> 00:48:05,080
Ми дійсно піклуються тільки про те, що вікно пошуку.

799
00:48:05,080 --> 00:48:09,320
>> Щоб вибрати, що зараз ми можемо змінити це, щоб бути, а не форма лапки,

800
00:48:09,320 --> 00:48:14,220
Форма лапки, і ми повинні вхід (тип = текст) або ми могли б сказати (Name = символ) -

801
00:48:14,220 --> 00:48:16,420
все, що ми хочемо.

802
00:48:16,420 --> 00:48:18,650
Тепер є ще одна річ, яку ми повинні зробити.

803
00:48:18,650 --> 00:48:21,190
Пам'ятайте, тут, коли ми сказали повернення хибним

804
00:48:21,190 --> 00:48:24,370
Ми сказали, що ми не хочемо, щоб події за замовчуванням, щоб стріляти.

805
00:48:24,370 --> 00:48:26,390
Але так уже сталося, що, якщо ми відключаємо, що зараз,

806
00:48:26,390 --> 00:48:29,660
все, що ми ввести не буде відображатися в браузері більше

807
00:48:29,660 --> 00:48:33,000
тому що це було б за умовчанням не вводити в текстове поле.

808
00:48:33,000 --> 00:48:38,660
Ми більше не хочемо, щоб перевизначити, так що давайте зруйнувати це повернення хибним.

809
00:48:38,660 --> 00:48:44,800
Якщо ми збережемо, що і перезавантажте сторінку, тепер, коли я починаю набирати AAPL

810
00:48:44,800 --> 00:48:50,160
Ви побачите, що ціна акції в нижній тут завершується автоматично.

811
00:48:50,160 --> 00:48:53,150
Так от CS50 фінансів Instant.

812
00:48:53,150 --> 00:48:55,860
Насправді кумедна історія про миттєвих YouTube

813
00:48:55,860 --> 00:48:59,420
є те, що студент просто якась написав це як 1-ночі проекту,

814
00:48:59,420 --> 00:49:03,800
і на наступний день він був запрошений на роботу в YouTube генеральний директор.

815
00:49:03,800 --> 00:49:10,610
Так само просто, як це, ви CS50 студентів, ваші остаточні проекти ви можете отримати роботу на YouTube.

816
00:49:10,610 --> 00:49:14,720
Щось в цьому роді це дійсно класна ідея для остаточного проекту, чи не так?

817
00:49:14,720 --> 00:49:18,170
У нас були деякі існуючі функції, які ми хотіли інтегрувати с.

818
00:49:18,170 --> 00:49:20,330
Ми поліпшення користувацького досвіду небагато,

819
00:49:20,330 --> 00:49:24,340
і раптом пошуку щось на YouTube миттєвих може бути набагато простіше

820
00:49:24,340 --> 00:49:27,290
ніж шукати його на регулярній YouTube.

821
00:49:27,290 --> 00:49:30,790
Так от AJAX в двох словах.

822
00:49:30,790 --> 00:49:34,860
>> У прикладах, що Йосип був показують, ми бачили багато autocompletes,

823
00:49:34,860 --> 00:49:39,250
і ті, autocompletes, дійсно, дуже зручно, тому що ми не маємо пам'ятати -

824
00:49:39,250 --> 00:49:41,770
Наприклад, якщо ви не пам'ятаєте ціну акцій для компанії Apple

825
00:49:41,770 --> 00:49:45,110
і ми просто знаємо, що це аа щось, а не просто говорив мені,

826
00:49:45,110 --> 00:49:48,740
"Частка ця річ коштує стільки-то грошей"

827
00:49:48,740 --> 00:49:52,540
Я ніби як знаємо, що акції починаються з аа.

828
00:49:52,540 --> 00:49:58,340
Ми можемо зробити це дійсно добре з початкового завантаження бібліотеки, яка вже включена

829
00:49:58,340 --> 00:50:01,380
Усередині CS50 фінансів.

830
00:50:01,380 --> 00:50:09,390
Якщо ви прийшли сюди, щоб теги JavaScript і Прокрутіть вниз до TYPEAHEAD,

831
00:50:09,390 --> 00:50:13,730
це просто хороший плагін, який хтось вже писав для нас,

832
00:50:13,730 --> 00:50:16,980
і ми можемо легко використовувати його функціональність, як це.

833
00:50:16,980 --> 00:50:21,410
Я набрав в і ось список деяких держав, які починаються з A.

834
00:50:21,410 --> 00:50:25,360
Давайте припустимо, що я думаю, що це дійсно здорово, і це час для мене, щоб включити це на моїй сторінці.

835
00:50:25,360 --> 00:50:28,300
Виявляється, що це дуже, дуже просте.

836
00:50:28,300 --> 00:50:32,810
Давайте перейдемо сюди, щоб quote3.js.

837
00:50:34,890 --> 00:50:37,380
Мій файл виглядає трохи по-іншому.

838
00:50:37,380 --> 00:50:39,700
Тут, внизу всі мої речі AJAX те ж саме.

839
00:50:39,700 --> 00:50:43,170
Я хочу, щоб завантажити дані про запаси без того, щоб перейти до іншої сторінки.

840
00:50:43,170 --> 00:50:46,220
Але зараз я хочу використовувати цей плагін.

841
00:50:46,220 --> 00:50:51,020
Bootstrap документації має велике прикладів того, як саме я можу це зробити.

842
00:50:51,020 --> 00:50:54,350
Я хочу сказати: "Ось входу, що я хочу автозаповнення"

843
00:50:54,350 --> 00:50:56,640
і Я буду називати цю функцію називають гарячих клавіш,

844
00:50:56,640 --> 00:50:59,730
і що збирається обробляти все TYPEAHEAD речі для нас.

845
00:50:59,730 --> 00:51:02,090
Це буде ініціалізувати список, він буде робити все наше фільтрації.

846
00:51:02,090 --> 00:51:06,680
Єдине, що він повинен знати, які дані ми autocompleting далі.

847
00:51:06,680 --> 00:51:10,480
Так я дізнався цю кнопку, просто читаючи документацію, і, дивлячись на приклади.

848
00:51:10,480 --> 00:51:14,150
Якщо я даю йому ключ джерела, значення цього ключового

849
00:51:14,150 --> 00:51:17,770
тільки деякі масив, що я хочу, щоб автозаповнення.

850
00:51:17,770 --> 00:51:20,180
Ця змінна прийшла з цього іншого файлу.

851
00:51:20,180 --> 00:51:23,400
Я відкриваю symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Це symbols.js саме це дуже, дуже великий масив, що містить рядки

853
00:51:27,980 --> 00:51:32,080
всіх цих символів акцій з NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Якщо я хочу, щоб повернутися до HTML, так jharvard, віртуальних доменів, globalhost, HTML, шаблони,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Так що тепер називається quote3.js, дозвольте мені змінити файл JavaScript я в тому числі тут.

857
00:51:50,910 --> 00:51:55,110
Тепер у мене є quote3.js, так що я збираюся завантажити в тому, що окремий файл JavaScript,

858
00:51:55,110 --> 00:51:57,910
той, який має, що Bootstrap автозаповнення.

859
00:51:57,910 --> 00:52:04,430
Тепер, коли я стрибаю назад в браузер, перезавантажте сторінку, і я починаю набирати А.А.,

860
00:52:04,430 --> 00:52:06,880
ось і мій автозаповнення. І це було дійсно так просто.

861
00:52:06,880 --> 00:52:11,400
Я був 1 рядок коду, який просто сказав: "Ось що я хочу автозаповнення"

862
00:52:11,400 --> 00:52:16,590
І раптом я це дуже, дуже гарна функціональність не так вже багато зусиль на всіх.

863
00:52:16,590 --> 00:52:19,810
Як ви розробляєте веб-сайтів і особливо лицьовій стороні кінці речей,

864
00:52:19,810 --> 00:52:21,840
Ви збираєтеся знайти це так багато.

865
00:52:21,840 --> 00:52:25,700
Є багато, багато, багато дійсно класних безкоштовних бібліотек там

866
00:52:25,700 --> 00:52:30,190
, Які роблять його супер легко робити такі речі.

867
00:52:30,190 --> 00:52:37,230
Чи можна думати про будь-які недоліки просто autocompleting на цьому великому списку символів?

868
00:52:37,230 --> 00:52:41,580
Що може бути те, що це не найкращий з таким підходом?

869
00:52:42,790 --> 00:52:45,960
Так. >> [Студент] час, якщо у вас є багато [нерозбірливо]

870
00:52:45,960 --> 00:52:50,420
Так. Зараз ми Завантажуючи великий файл JavaScript і там багато символів.

871
00:52:50,420 --> 00:52:54,360
І тому, якщо у нас є тонни речей, це могло вигляді збільшення латентності не тільки пошук

872
00:52:54,360 --> 00:52:56,600
але і завантаження сам файл.

873
00:52:56,600 --> 00:52:58,670
Великий. Небудь ще?

874
00:53:01,950 --> 00:53:05,280
Зараз немає ніяких реальних почуття актуальності.

875
00:53:05,280 --> 00:53:08,190
Якщо я ввожу, компанії, які показують тут

876
00:53:08,190 --> 00:53:11,220
Не може бути найбільш популярних компаній, які починаються з A.

877
00:53:11,220 --> 00:53:17,130
>> Перш ніж дістатися до Apple, це може зайняти кілька символів, щоб знайти те, що я шукав.

878
00:53:17,130 --> 00:53:20,420
Це автозаповнення не має цього почуття актуальності.

879
00:53:20,420 --> 00:53:24,400
Це просто буде сказати: "Все, що відповідає Я йду, щоб побачити".

880
00:53:24,400 --> 00:53:30,510
Замість цього, я хотів би, щоб хоч якось інтегрувати деякі актуальність в моєму пошуку.

881
00:53:30,510 --> 00:53:36,440
Якщо я йду сюди, щоб Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Якщо я намагаюся, щоб ввести символ на сторінці Yahoo! фінансів

883
00:53:42,100 --> 00:53:52,310
і я починаю набирати GOOG, у мене є хороший список речей.

884
00:53:52,310 --> 00:53:57,100
Очевидно, це виглядає як Yahoo! Finance робить щось більш розумне тут.

885
00:53:57,100 --> 00:53:59,790
Вони мають деяке відношення і у них також є додаткова інформація

886
00:53:59,790 --> 00:54:01,430
як назва акції.

887
00:54:01,430 --> 00:54:05,850
Це те, що я не можу отримати тільки з моєї складі список символів.

888
00:54:05,850 --> 00:54:09,520
Я хочу цього, і тому я збираюся взяти його.

889
00:54:09,520 --> 00:54:11,790
Щоб зробити це, давайте зробимо кілька речей.

890
00:54:11,790 --> 00:54:15,580
Давайте спочатку відкрити інспектору на цій сторінці

891
00:54:15,580 --> 00:54:18,100
тому що ми бачили, що ця сторінка не перезавантажуючи на всіх,

892
00:54:18,100 --> 00:54:21,960
так що це можливо, з використанням AJAX якось по навантаженню його дані.

893
00:54:21,960 --> 00:54:23,920
Ми можемо з'ясувати, які дані він завантажується.

894
00:54:23,920 --> 00:54:28,390
Якщо я натискаю на цій вкладці Мережа, вони буде всі запити, які починають бути звільнений.

895
00:54:28,390 --> 00:54:34,020
Тепер, якщо я набираю в слизу, ми можемо бачити, що я тільки що отримав новий запит HTTP.

896
00:54:34,020 --> 00:54:37,490
Це, напевно, де ці дані звідки.

897
00:54:37,490 --> 00:54:41,990
Звичайно ж, якщо я дивлюся на цей URL, який є трохи дивним ім'ям,

898
00:54:41,990 --> 00:54:46,930
ми бачимо, що це саме те, де Yahoo посилає від його дані.

899
00:54:46,930 --> 00:54:53,400
>> Я створив окремий файл під назвою suggest.php, що дуже схожий по духу до функції пошуку.

900
00:54:53,400 --> 00:54:57,730
Це в основному збирається зробити запит на адресу Yahoo, повернути деякими даними,

901
00:54:57,730 --> 00:54:59,750
і відправити його назад до мене.

902
00:54:59,750 --> 00:55:02,570
Тепер, замість того, щоб використовувати цей великий, величезний список символів,

903
00:55:02,570 --> 00:55:05,280
Я можу використовувати Yahoo, хороші речі актуальності,

904
00:55:05,280 --> 00:55:08,150
і я не потрібно завантажувати, що масові файл JavaScript.

905
00:55:08,150 --> 00:55:12,040
Я тільки збираюся знести насправді відповідні символи акцій.

906
00:55:12,040 --> 00:55:13,960
Давайте перейдемо до цих.

907
00:55:13,960 --> 00:55:17,360
Таким чином, HTML, JS. Ми зараз в quote4.

908
00:55:17,360 --> 00:55:22,120
Тепер ми більше не використовується, що великий список файлів JavaScript.

909
00:55:22,120 --> 00:55:24,430
Але є невелика вид дизайну проблема.

910
00:55:24,430 --> 00:55:28,200
Ми вже говорили про те, що в AJAX є асинхронним.

911
00:55:28,200 --> 00:55:31,000
Це означає, що, коли я роблю запит AJAX,

912
00:55:31,000 --> 00:55:36,490
так прямо тут, на лінії 8, це де мої AJAX запит насправді звільнили.

913
00:55:36,490 --> 00:55:40,370
Скажімо, зараз у мене є деякий код сюди, що збирається робити деякі речі

914
00:55:40,370 --> 00:55:43,930
хотів попередити користувача або змінити щось на сторінці.

915
00:55:43,930 --> 00:55:49,830
Що не відбудеться це тільки браузер, не збирається чекати це прохання продовжити

916
00:55:49,830 --> 00:55:53,480
до приходу вниз і натиснути цю лінію.

917
00:55:53,480 --> 00:55:55,900
Це асинхронна частина.

918
00:55:55,900 --> 00:55:58,400
Він збирається зробити це прохання і сказав: "Всякий раз, коли ви закінчите,

919
00:55:58,400 --> 00:56:03,080
«Повернутися і викликати цю функцію, що я сказав вам дзвонити всередині успіх".

920
00:56:03,080 --> 00:56:07,300
Це означає, що ми не можемо просто завантажити всі акції заздалегідь.

921
00:56:07,300 --> 00:56:10,300
Ми повинні зробити запит і чекати чогось повернутися.

922
00:56:10,300 --> 00:56:13,330
Це означає, що і раніше, ми могли б просто сказати Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Ось список речей, які я хочу, щоб ви автозаповнення".

924
00:56:15,580 --> 00:56:18,950
Ми більше не можемо цього робити, тому що ми не знаємо,

925
00:56:18,950 --> 00:56:21,780
чого ми хочемо насправді автозаповнення далі.

926
00:56:21,780 --> 00:56:25,190
На щастя, Bootstrap думав про це, тому що ці розумні хлопці там,

927
00:56:25,190 --> 00:56:30,160
і вони фактично дали нам інший спосіб завантажити цю TYPEAHEAD плагін.

928
00:56:30,160 --> 00:56:35,630
Перш, значення цієї властивості джерела Саме ця великий масив речей, щоб автозаповнення.

929
00:56:35,630 --> 00:56:39,580
>> Тепер властивості джерела насправді є функцією,

930
00:56:39,580 --> 00:56:44,580
і мета ця функція з'ясувати, що речі для автозаповнення на це.

931
00:56:44,580 --> 00:56:48,730
Як це відбувається, щоб зрозуміти це вона збирається запитати Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
що найкращі речі для автозаповнення є.

933
00:56:51,750 --> 00:56:54,500
Для цього я збираюся зробити дуже схожі AJAX запит.

934
00:56:54,500 --> 00:56:59,010
Я буду просити цю сторінку в suggest.php.

935
00:56:59,010 --> 00:57:01,360
Я хочу відправити символам досі.

936
00:57:01,360 --> 00:57:05,570
І тепер мій успіх, Bootstrap документації сказав мені,

937
00:57:05,570 --> 00:57:09,130
що для того, щоб заповнити цей список речей,

938
00:57:09,130 --> 00:57:14,370
все, що мені потрібно зробити, це передати цей масив тепер до функції зворотного виклику.

939
00:57:14,370 --> 00:57:15,660
Але почекайте хвилину.

940
00:57:15,660 --> 00:57:20,240
Якщо це повинен бути масив і AJAX відправляє мене назад текст,

941
00:57:20,240 --> 00:57:22,720
як це можливо?

942
00:57:22,720 --> 00:57:27,910
Це вводить новий спосіб обміну даними називається JSON.

943
00:57:27,910 --> 00:57:33,000
У цьому випадку ми не просто відправивши назад прості рядки тексту.

944
00:57:33,000 --> 00:57:37,670
Тепер ми маємо справу з більш складними список символів акцій.

945
00:57:37,670 --> 00:57:41,730
Ці символи акцій може також включати такі речі, як назва компанії або поточної ціни.

946
00:57:41,730 --> 00:57:47,550
Тільки за допомогою великого довгий рядок, яка не відформатований в будь передбачуваним чином

947
00:57:47,550 --> 00:57:51,970
Не буде кращий спосіб отримати ці дані з сервера Yahoo до мене

948
00:57:51,970 --> 00:57:54,540
таким чином, я можу легко зрозуміти.

949
00:57:54,540 --> 00:58:01,280
JSON це технологія, яка використовує в своїх інтересах, як ми створюємо асоціативні масиви в JavaScript.

950
00:58:01,280 --> 00:58:04,510
Це дуже схоже JavaScript асоціативний масив,

951
00:58:04,510 --> 00:58:06,600
а насправді, це тому, що вона є.

952
00:58:06,600 --> 00:58:09,710
JSON стоїть для позначення об'єкта JavaScript.

953
00:58:09,710 --> 00:58:15,020
Це, в основному узгоджений формат для передачі даних туди і назад.

954
00:58:15,020 --> 00:58:18,280
Ось цей об'єкт JSON JSON або це асоціативний масив

955
00:58:18,280 --> 00:58:21,010
посилає мене деякі дані про курс.

956
00:58:21,010 --> 00:58:25,110
>> Ключами цього масиву є такі речі, як, звичайно, що має значення CS50,

957
00:58:25,110 --> 00:58:29,140
і тут ми бачимо, що в мене може бути значення, яке є масивом.

958
00:58:29,140 --> 00:58:32,730
Я не повинен робити такі речі, як розібрати рядків і шукати коми

959
00:58:32,730 --> 00:58:35,330
і робити божевільні речі, як, що.

960
00:58:35,330 --> 00:58:38,820
Тому що ця оголошений в цьому форматі JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript і JQuery вже є функції для перетворення рядка

962
00:58:43,510 --> 00:58:48,140
, Який виглядає наступним JSON у фактичних JavaScript асоціативний масив

963
00:58:48,140 --> 00:58:50,440
що ми можемо працювати.

964
00:58:50,440 --> 00:58:56,660
Зробити це так само просто, як кажуть, що більше не є цей файл, suggest.php,

965
00:58:56,660 --> 00:58:59,040
відправивши мене просто рядок тексту,

966
00:58:59,040 --> 00:59:01,950
Але я знаю, що це збирається посилати мене назад JSON.

967
00:59:01,950 --> 00:59:06,760
Це означає, що JSON можуть бути перетворені в JavaScript асоціативний масив.

968
00:59:06,760 --> 00:59:10,830
І Jquery, я б хотів, щоб ви зробити це для мене.

969
00:59:10,830 --> 00:59:13,990
Це означає, що ця відповідь параметром тут,

970
00:59:13,990 --> 00:59:16,070
це вже не просто рядком.

971
00:59:16,070 --> 00:59:19,860
Тому що ми сказали JQuery, що тут відбувається деяке JSON,

972
00:59:19,860 --> 00:59:22,950
JQuery буде достатньо розумна, щоб сказати: "Ти хотів JSON?"

973
00:59:22,950 --> 00:59:26,890
"Я збираюся перетворити це в асоціативний масив для вас".

974
00:59:26,890 --> 00:59:32,100
Давайте насправді подивіться на вкладці Мережа, як тільки ми quote4.js.

975
00:59:32,100 --> 00:59:35,400
Ми змінимо це і перезавантажте сторінку.

976
00:59:37,150 --> 00:59:41,250
Тепер я збираюся набрати в-раз.

977
00:59:41,250 --> 00:59:45,600
Я зробив декілька запитів, щоб suggest.php, але тепер ця відповідь,

978
00:59:45,600 --> 00:59:48,670
а не просто рядок, це JSON.

979
00:59:48,670 --> 00:59:52,580
Так що у мене відкрита фігурна дужка говорить: "Ось йде асоціативний масив".

980
00:59:52,580 --> 00:59:56,830
>> Перший і єдиний ключ цього асоціативний масив називають символами,

981
00:59:56,830 --> 01:00:00,240
а то ось масив всіх відповідних символів

982
01:00:00,240 --> 01:00:04,820
приходить зараз з Yahoo! Finance, а не від гігантського списку.

983
01:00:06,110 --> 01:00:10,630
Ось як я можу просто заповнити цей плагін автозаповнення

984
01:00:10,630 --> 01:00:14,280
з деякими даними, які не походить від місцевих файл, який уже вирішений

985
01:00:14,280 --> 01:00:17,490
а від чогось іншого.

986
01:00:17,490 --> 01:00:21,160
Виходить, що ми дійсно можемо скористатися технологією називається JSONP,

987
01:00:21,160 --> 01:00:27,420
або JSON з доповненням, що дозволить усунути цю suggest.php посередників.

988
01:00:27,420 --> 01:00:34,010
Але замість того, щоб робити це, давайте замість цього поглянемо на те, як я можу поліпшити це навіть більше.

989
01:00:34,010 --> 01:00:36,040
Мені дуже подобається TYPEAHEAD завантажувача. Це дійсно хороший.

990
01:00:36,040 --> 01:00:39,570
Але ми отримуємо добре JavaScript, і ми хочемо, щоб частково це робити самим,

991
01:00:39,570 --> 01:00:43,870
Може бути, поглянемо на те, що цей плагін можна було б робити.

992
01:00:43,870 --> 01:00:46,500
Давайте більше не використовую, що TYPEAHEAD річ,

993
01:00:46,500 --> 01:00:50,550
і давайте спробуємо зробити цей список пропонованих акцій самих себе.

994
01:00:50,550 --> 01:00:53,790
Тут, в quote6.php ми збираємося почати таким же чином.

995
01:00:53,790 --> 01:00:58,050
Кожен раз, коли хтось типи щось, ми хочемо зробити запит AJAX.

996
01:00:58,050 --> 01:01:01,590
Це схоже на наш оригінальний CS50 фінансів Instant.

997
01:01:01,590 --> 01:01:05,020
Замість того, щоб запит на quote.php,

998
01:01:05,020 --> 01:01:08,530
Ми зараз робить запит на той же файл, як і раніше, це suggest.php,

999
01:01:08,530 --> 01:01:12,460
які тільки збираються витягувати дані з Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Знову ж таки, ми все ще очікуємо JSON, але з тих пір TYPEAHEAD не робить це для нас,

1001
01:01:19,480 --> 01:01:24,850
ми також повинні послати за значенням, яке знаходиться всередині поточного текстового поля.

1002
01:01:24,850 --> 01:01:28,120
Тепер ми знаємо, що запитати Yahoo! Finance для,

1003
01:01:28,120 --> 01:01:34,160
і тепер ось функції, які ми хочемо виконати після завершення запиту.

1004
01:01:34,160 --> 01:01:36,520
Ми не маємо плагін, щоб зробити список для нас,

1005
01:01:36,520 --> 01:01:40,630
так от, де ми насправді збираємося побудувати список пропозицій.

1006
01:01:40,630 --> 01:01:44,850
Щоб зробити це, багато подобається в PHP ми об'єднані цих великих рядків HTML

1007
01:01:44,850 --> 01:01:48,170
Потім ми надрукували їх, ми можемо зробити точно такий же річчю в JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Спочатку ми збираємося почати цей рядок називаються пропозиції,

1009
01:01:51,850 --> 01:01:54,590
і цей рядок просто буде містити деякі HTML.

1010
01:01:54,590 --> 01:01:58,320
Ми хочемо, щоб бути список речей, так що ми збираємося почати з цього списку тегів,

1011
01:01:58,320 --> 01:02:03,340
і тепер ми збираємося перебрати всі символи, які були повернуті назад до нас.

1012
01:02:03,340 --> 01:02:06,500
Пам'ятайте, тому що ми сказали Тип даних: 'JSON', це не рядок.

1013
01:02:06,500 --> 01:02:09,500
Це вже масив для нас. Ось це дійсно круто.

1014
01:02:09,500 --> 01:02:13,790
Ми можемо просто сказати: "Я хочу, щоб додати елемент списку".

1015
01:02:13,790 --> 01:02:16,000
Ми помістимо його всередину елемента в сторону, що,

1016
01:02:16,000 --> 01:02:19,030
ми дамо йому клас пропозицій, тому ми знаємо, що це таке,

1017
01:02:19,030 --> 01:02:23,880
а тепер ось символ того, що ми повернулися з Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Після того як ми створили елемент для кожного з символів ми отримали назад,

1019
01:02:27,230 --> 01:02:30,100
Ми просто хочемо, щоб закрити список.

1020
01:02:30,100 --> 01:02:33,040
Так що тепер пропозиції являє собою цей маленький фрагмент HTML

1021
01:02:33,040 --> 01:02:37,860
що якщо покласти на сторінці буде список речей, які ми шукаємо.

1022
01:02:37,860 --> 01:02:41,070
Тепер давайте насправді покласти, що на сторінці.

1023
01:02:41,070 --> 01:02:46,390
Для цього я насправді створив ще один порожній справ, і я дав йому ID пропозицій.

1024
01:02:46,390 --> 01:02:52,520
Багато чого, як ми встановили зміст справ, що буде відображатися ціна акцій даних,

1025
01:02:52,520 --> 01:02:58,600
тепер ми просто хочемо, щоб встановити зміст цього DIV до того, що цей рядок

1026
01:02:58,600 --> 01:03:00,290
, Який містить ці символи.

1027
01:03:00,290 --> 01:03:07,650
За допомогою цього методу HTML, це пропозиції змінної, цей рядок є рядком HTML.

1028
01:03:07,650 --> 01:03:13,490
Я хочу, щоб ви, що HTML і покласти його всередину справ називається пропозицій.

1029
01:03:13,490 --> 01:03:15,680
Ми лише запасною щось DOM зараз.

1030
01:03:15,680 --> 01:03:20,360
Ми додали деякі нові елементи в DOM, що ми можемо тепер відображаються на сторінці.

1031
01:03:20,360 --> 01:03:22,540
Давайте подивимося, як це виглядає.

1032
01:03:22,540 --> 01:03:29,110
Якщо ми завантажуємо в quote6 і тепер ми повертаємося,

1033
01:03:29,110 --> 01:03:34,480
Тепер, коли я починаю набирати AAPL, у нас більше немає, що Bootstrap автозаповнення,

1034
01:03:34,480 --> 01:03:38,470
але тепер у нас є цей список, який ми зробили самі.

1035
01:03:38,470 --> 01:03:43,230
Це трохи потворнішим, ніж трохи Bootstrap TYPEAHEAD, наприклад,

1036
01:03:43,230 --> 01:03:45,580
але це дозволить нам зробити ще одну річ.

1037
01:03:45,580 --> 01:03:48,660
Коли ми шукали в цьому Bootstrap плагін,

1038
01:03:48,660 --> 01:03:52,590
ми бачили, що, коли ми autocompleted, один з автозаповнення значень було AAPL.

1039
01:03:52,590 --> 01:03:54,820
Це може бути не таким корисним.

1040
01:03:54,820 --> 01:03:59,100
Як користувач, я не міг відразу розпізнати всі символи акцій.

1041
01:03:59,100 --> 01:04:02,370
Те, що я, ймовірно, більш імовірно, визнають є фактичні імена компанії.

1042
01:04:02,370 --> 01:04:05,310
Таким чином, не було б дійсно корисно, якби замість того, щоб говорити AAPL

1043
01:04:05,310 --> 01:04:07,970
це сказав щось на кшталт Apple,

1044
01:04:07,970 --> 01:04:12,240
Тому що ми прокату цьому самі, ми можемо дуже легко зробити.

1045
01:04:12,240 --> 01:04:17,630
Давайте відкриємо наш останній файл цитати тут, так quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Те ж саме. Я тільки що створив ще один PHP файл, який буде повертатися до нас більше, ніж просто символи.

1047
01:04:23,200 --> 01:04:25,550
Це також дасть нам назад імен компанії.

1048
01:04:25,550 --> 01:04:28,150
І тому ми робимо те ж саме. Ми робимо запит AJAX.

1049
01:04:28,150 --> 01:04:32,370
Після завершення запиту, ми збираємося виконати цю функцію тут,

1050
01:04:32,370 --> 01:04:36,520
і ця функція буде побудувати великий рядки елементів.

1051
01:04:36,520 --> 01:04:39,520
Але різниця в тому, що цінність цих списках вже не просто символ,

1052
01:04:39,520 --> 01:04:45,370
Тепер це ім'я.

1053
01:04:45,370 --> 01:04:47,070
Таким чином, у нас є одна невелика проблема.

1054
01:04:47,070 --> 01:04:51,590
Коли ми використовуємо наш пошук, ми повинні якимось чином передати її символом.

1055
01:04:51,590 --> 01:04:54,950
Ми не можемо пройти пошуку щось на зразок Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Ми повинні передати його MSFT.

1057
01:04:57,900 --> 01:05:01,640
Коли ми пишемо HTML, у нас є багато хороших вбудованих атрибутів.

1058
01:05:01,640 --> 01:05:05,440
Можливо, пов'язано з його HREF або класу.

1059
01:05:05,440 --> 01:05:08,230
Але що нам дійсно потрібно зараз для кожного з цих посилань

1060
01:05:08,230 --> 01:05:11,120
мати запас символ, пов'язаний з ним.

1061
01:05:11,120 --> 01:05:14,240
Там немає вбудованого HTML атрибут символ акції,

1062
01:05:14,240 --> 01:05:21,010
Але, на щастя, HTML5 дозволяє нам створювати наші власні атрибути, щоб бути все, що ми хочемо.

1063
01:05:21,010 --> 01:05:24,620
Говорячи даними символом, я представила новий атрибут

1064
01:05:24,620 --> 01:05:29,350
, Ім'я якого я тільки що зробив, і це добре, тому що я попередив його з цими даними.

1065
01:05:29,350 --> 01:05:34,270
Ми збираємося зберігати всередині є символ з фондового зараз.

1066
01:05:34,270 --> 01:05:39,590
Що це означає, що навіть якщо ми відображення значення назви компанії

1067
01:05:39,590 --> 01:05:43,380
Усередині нашого автозаповнення, ми все ще пам'ятаючи символ

1068
01:05:43,380 --> 01:05:47,110
, Пов'язане з кожною компанією.

1069
01:05:47,110 --> 01:05:50,350
Те, як ми робимо, що знаходиться всередині цього елемента.

1070
01:05:50,350 --> 01:05:52,930
Таким чином, це означає, що ми повинні зробити ще одну зміну.

1071
01:05:52,930 --> 01:05:57,090
Коли ми натискаємо це зараз, нам потрібно насправді скористатися символом атрибутом

1072
01:05:57,090 --> 01:06:00,220
, А не тільки його вартість.

1073
01:06:00,220 --> 01:06:05,010
Якщо резервне копіювання, яке ми надаємо обробник події для пропозицій.

1074
01:06:05,010 --> 01:06:09,280
Всякий раз, коли одна з цих пропозицій натиснута зараз, я хочу щось зробити.

1075
01:06:09,280 --> 01:06:13,160
Що я хочу зробити, це змінити значення цього поля введення.

1076
01:06:13,160 --> 01:06:16,100
Тепер я хочу встановити цю ж функцію знач.

1077
01:06:16,100 --> 01:06:21,060
>> Таким чином, без жодних аргументів ця функція Val повертає вам те, що вже в текстове поле,

1078
01:06:21,060 --> 01:06:27,070
але якщо ви даєте йому рядки, він збирається взяти цей рядок і помістити його в текстове поле.

1079
01:06:27,070 --> 01:06:28,980
Я вибравши його в текстове поле таким же чином.

1080
01:06:28,980 --> 01:06:31,230
Це ім'я є символом внутрішньої форми цитати.

1081
01:06:31,230 --> 01:06:37,540
Тепер я посилаю його значення атрибуту даними символом.

1082
01:06:37,540 --> 01:06:41,560
Ця річ тут нового, це $ (це).

1083
01:06:41,560 --> 01:06:46,850
Що це означає є елементом, який був вибраний.

1084
01:06:46,850 --> 01:06:50,880
Ми бачимо тут, що ми не підключаючи події клацання

1085
01:06:50,880 --> 01:06:54,690
до кожного елементу з класом пропозицію індивідуально.

1086
01:06:54,690 --> 01:06:57,140
Швидше, ми наближаємося до цього трохи по-іншому.

1087
01:06:57,140 --> 01:07:01,700
Замість цього ми говоримо, коли щось всередині цього DIV пропозиції,

1088
01:07:01,700 --> 01:07:04,080
, Які пам'ятають це просто контейнер для цього списку,

1089
01:07:04,080 --> 01:07:10,150
якщо щось усередині цієї справ натиснута і має клас пропозицію,

1090
01:07:10,150 --> 01:07:13,000
Я хочу, щоб ця подія до пожежі.

1091
01:07:13,000 --> 01:07:17,490
По суті, це означає, що ми можемо зробити, це ми можемо використовувати цей же обробник події

1092
01:07:17,490 --> 01:07:20,000
для всіх речей в списку.

1093
01:07:20,000 --> 01:07:22,080
Так що ми не повинні мати один обробник подій для першого елемента

1094
01:07:22,080 --> 01:07:24,550
і інший обробник події для другого елементу.

1095
01:07:24,550 --> 01:07:29,880
Ми можемо замість цього говорять: "Я хочу той же обробник події застосувати до всього в моєму списку".

1096
01:07:29,880 --> 01:07:34,420
Але ми повинні якимось чином дізнатися, який елемент був обраний.

1097
01:07:34,420 --> 01:07:38,450
Це "це" ключове слово представляє саме це.

1098
01:07:38,450 --> 01:07:42,360
Це об'єкт, який був просто натиснув користувач.

1099
01:07:42,360 --> 01:07:47,680
Якби я просто натиснув на третю посилання, це представляє елемент, що 3 посилання,

1100
01:07:47,680 --> 01:07:51,670
Це означає, що я можу отримати його атрибут, символ даних,

1101
01:07:51,670 --> 01:07:57,760
яких ми знаємо повинен містити символ, пов'язаний з компанією, я просто натиснув.

1102
01:07:57,760 --> 01:08:04,550
Якщо ми повернемося назад до нашого фінансів сторінки

1103
01:08:04,550 --> 01:08:08,580
Ми бачимо тепер, що як тільки я починаю вводити щось подібне MSFT,

1104
01:08:08,580 --> 01:08:11,220
Ми більше не отримуєте тільки символи акцій,

1105
01:08:11,220 --> 01:08:13,720
Ми зараз отримую реальних компаній.

1106
01:08:13,720 --> 01:08:20,410
Але коли я натискаю на одну з цих компаній,

1107
01:08:20,410 --> 01:08:25,180
ми бачимо, що ми насправді заповнення поле не з назвою компанії

1108
01:08:25,180 --> 01:08:29,850
але з тим, що зберігається всередині цих даних атрибутів.

1109
01:08:29,850 --> 01:08:32,880
І тому, якщо я насправді перевірити один із цих елементів клацнувши правою кнопкою миші

1110
01:08:32,880 --> 01:08:36,200
і натиснувши кнопку Перевірити елемент, ми можемо дійсно побачити, як це виглядає.

1111
01:08:36,200 --> 01:08:40,290
>> Пам'ятайте, що це те, що ми створили всередині цього циклу

1112
01:08:40,290 --> 01:08:42,649
Коли ми будували вгору, що рядок HTML.

1113
01:08:42,649 --> 01:08:47,870
Ми бачимо тут, що це дані символ має значення MSFT, що превосходно.

1114
01:08:47,870 --> 01:08:49,189
Це те, що ми очікували.

1115
01:08:49,189 --> 01:08:53,170
Це символ, і це, як ми отримали значення, яке ми повинні були використовувати

1116
01:08:53,170 --> 01:08:56,140
всередині цього текстового поля.

1117
01:08:56,140 --> 01:08:58,850
Цього достатньо для цитатою формі, тому що це нудно.

1118
01:08:58,850 --> 01:09:02,990
Давайте просто зробити декілька швидких поліпшень нашому портфоліо.

1119
01:09:02,990 --> 01:09:08,109
Якщо ви використовували CS50 фінансів на деякий час, і ви починаєте купувати і продавати багато акцій,

1120
01:09:08,109 --> 01:09:11,300
в кінці кінців ця таблиця буде отримати досить великий,

1121
01:09:11,300 --> 01:09:13,850
і ви будете хотіти, біржових зведень, звичайно.

1122
01:09:13,850 --> 01:09:20,350
Після того як таблиця дуже, дуже великий, вона може бути корисною для користувачів, щоб спробувати знайти їм.

1123
01:09:20,350 --> 01:09:23,290
Усередині вікно пошуку, якщо я почну вводити щось подібне Дісней

1124
01:09:23,290 --> 01:09:26,359
і, дивлячись на мої акції Міккі Мауса, ми бачимо, що таблиця зараз фільтрації

1125
01:09:26,359 --> 01:09:28,189
заснований на тому, що я тільки що ввели дюйма

1126
01:09:28,189 --> 01:09:31,640
Ця функція виглядає супер складним, але насправді, дуже легко

1127
01:09:31,640 --> 01:09:33,859
з JQuery і JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Це portfolio.php файл містить файл JavaScript називають portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Давайте подивимося на це.

1130
01:09:41,130 --> 01:09:44,890
Таким чином, HTML, JS, портфоліо.

1131
01:09:44,890 --> 01:09:49,210
Ось де ми робимо, що пошук на стіл.

1132
01:09:49,210 --> 01:09:52,750
Перше, що мені потрібно зробити, це прикріпити обробник події, що текстове поле

1133
01:09:52,750 --> 01:09:55,760
тому що ми знаємо, що ми хочемо, щоб наша функція фільтрації для стрільби

1134
01:09:55,760 --> 01:09:59,800
кожен раз, коли користувач натискає щось, тому що у нас немає часу для пошуку кнопки.

1135
01:09:59,800 --> 01:10:03,000
Перше, що потрібно зробити, це зрозуміти, що шукає користувач,

1136
01:10:03,000 --> 01:10:04,780
так само, як ми робили раніше.

1137
01:10:04,780 --> 01:10:11,320
Це ключове слово вказує на поточний елемент користувач взаємодіє з.

1138
01:10:11,320 --> 01:10:14,070
>> Тому що користувач взаємодіє з вікном пошуку,

1139
01:10:14,070 --> 01:10:17,020
$ Це являє поле пошуку

1140
01:10:17,020 --> 01:10:21,820
так this.val дає нам те, що всередині вікна пошуку користувач в даний час друкувати.

1141
01:10:22,810 --> 01:10:27,320
Отже, тепер, що ми хочемо зробити, ми хочемо перебрати всі рядки

1142
01:10:27,320 --> 01:10:29,240
Усередині нашого столу.

1143
01:10:29,240 --> 01:10:35,630
Щоб вибрати всі рядки в нашій таблиці, я дав цю таблицю ID таблиці портфеля,

1144
01:10:35,630 --> 01:10:39,060
і кожен рядок являє собою елемент TR,

1145
01:10:39,060 --> 01:10:42,080
так що це селектор збирається повернутися до мене великий масив

1146
01:10:42,080 --> 01:10:44,370
всіх рядків в моїй таблиці.

1147
01:10:44,370 --> 01:10:47,010
Тепер я хочу перебрати цей масив.

1148
01:10:47,010 --> 01:10:52,390
Я не могли б ви для циклу, але JQuery насправді дає нам хороші функція під назвою "кожен".

1149
01:10:52,390 --> 01:10:55,220
Що кожен робить це кожен приймає один аргумент,

1150
01:10:55,220 --> 01:10:57,090
і цей аргумент є функцією.

1151
01:10:57,090 --> 01:11:02,760
Що він збирається робити це вона збирається застосувати цю функцію до кожного елементу всередині цього списку.

1152
01:11:02,760 --> 01:11:05,550
Ця функція приймає один аргумент, що це е,

1153
01:11:05,550 --> 01:11:10,090
і коли ця функція буде виконана, ця адреса буде замінити перший рядок,

1154
01:11:10,090 --> 01:11:12,070
Потім другий ряд, а потім третій ряд.

1155
01:11:12,070 --> 01:11:15,150
По цьому шляху, це те ж саме, як працює цикл

1156
01:11:15,150 --> 01:11:21,360
, А потім з'ясувати поточний елемент на основі індексу всередині вашого циклу.

1157
01:11:21,360 --> 01:11:24,750
На кожній ітерації для кожного з цих елементів у таблиці,

1158
01:11:24,750 --> 01:11:30,560
Я хочу перевірити, якщо текст елемента - текст комірки всередині рядків -

1159
01:11:30,560 --> 01:11:33,130
відповідає тому, що я шукав.

1160
01:11:33,130 --> 01:11:36,390
Це велика довга рядок команд, як я міг це зробити.

1161
01:11:36,390 --> 01:11:40,900
По-перше, знову ж таки, це зараз називається - бо всередині нова функція -

1162
01:11:40,900 --> 01:11:45,020
це зараз поточний рядок у таблиці.

1163
01:11:45,020 --> 01:11:47,340
Я хочу взяти поточний рядок у таблиці,

1164
01:11:47,340 --> 01:11:49,950
і я хочу, щоб всі його діти.

1165
01:11:49,950 --> 01:11:51,940
Пам'ятайте, що DOM є ієрархічне дерево,

1166
01:11:51,940 --> 01:11:54,200
Це означає, що елементи мають кілька дітей.

1167
01:11:54,200 --> 01:12:00,180
>> Це. Дітей Функція збирається повернути мені назад масив з усіх елементів

1168
01:12:00,180 --> 01:12:03,240
, Які є діти, в даному випадку, рядок у таблиці.

1169
01:12:03,240 --> 01:12:07,150
Це просто клітини всередині рядка.

1170
01:12:07,150 --> 01:12:09,230
Я просто хочу, щоб здійснити пошук по першій клітинці.

1171
01:12:09,230 --> 01:12:13,090
Це. Перша функція говорить, дайте мені перший елемент у цьому масиві.

1172
01:12:13,090 --> 01:12:17,070
Потім текст функції говорить мені отримати саме те, що знаходиться всередині цієї комірки

1173
01:12:17,070 --> 01:12:19,530
так як я хочу, щоб здійснити пошук по цьому тексту.

1174
01:12:19,530 --> 01:12:21,040
Нарешті, давайте перетворити його в нижній регістр,

1175
01:12:21,040 --> 01:12:23,940
так що ми можемо зробити текст без урахування регістра запитів.

1176
01:12:23,940 --> 01:12:29,990
Нарешті, ми хочемо, щоб переконатися, що рядки всередині таблиці містить рядок, яку ми шукаємо.

1177
01:12:29,990 --> 01:12:32,980
IndexOf функції в JavaScript робить саме це.

1178
01:12:32,980 --> 01:12:37,060
Він говорить нам, чи ні ця рядок містить інший рядок.

1179
01:12:37,060 --> 01:12:40,150
Якщо це правда, що клітина містить те, що я шукаю,

1180
01:12:40,150 --> 01:12:42,140
Потім я хочу, щоб переконатися, що це показано на малюнку.

1181
01:12:42,140 --> 01:12:45,330
Показати метод скаже: "Самая елемент".

1182
01:12:45,330 --> 01:12:50,350
Якщо це не так, то це означає, що те, що я шукаю не міститься

1183
01:12:50,350 --> 01:12:53,550
в цьому ряду, і тому я хочу, щоб приховати від користувача.

1184
01:12:53,550 --> 01:12:59,240
Це досягається, що хороший ефект фільтрації, де вже не бачимо всієї таблиці.

1185
01:12:59,240 --> 01:13:01,480
Якщо ви зацікавлені в тому, щоб зробити цей тікер, а також,

1186
01:13:01,480 --> 01:13:04,180
ми розмістимо джерело в Інтернеті. Але це дійсно просто.

1187
01:13:04,180 --> 01:13:09,860
JQuery є дивовижні методи для цих анімації та роботи з CSS властивостями.

1188
01:13:09,860 --> 01:13:11,020
Отже, ось це для мене.

1189
01:13:11,020 --> 01:13:15,560
>> Що ж чекає нас попереду? Як ви побачите в протягом декількох днів, остаточну пропозицію проектів пов'язано.

1190
01:13:15,560 --> 01:13:17,730
Остаточне пропозицію проектів буде поставити вам кілька запитань,

1191
01:13:17,730 --> 01:13:19,420
але серед них буде три віхи -

1192
01:13:19,420 --> 01:13:22,840
один "гарний" віха, один краще віха, і один кращий.

1193
01:13:22,840 --> 01:13:25,870
Ідея в тому, щоб допомогти дійсно ви, хлопці, встановити ваші очікування

1194
01:13:25,870 --> 01:13:29,160
таким чином, щоб мінімально ви будете щасливі з виходом ваш остаточний проект

1195
01:13:29,160 --> 01:13:32,060
і це буде "добре" до цих пір, як ви стурбовані.

1196
01:13:32,060 --> 01:13:34,540
Але тоді в інтересах отримання вам досягти тільки трохи до чогось кращого

1197
01:13:34,540 --> 01:13:37,680
або щось краще, ми також сортувати підштовхнути вас до того, як добре.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-A-Thon, тим часом, протягом декількох тижнів.

1199
01:13:40,660 --> 01:13:44,340
Як правило, ми робимо це на основі основі лотерею, тому що інтерес,

1200
01:13:44,340 --> 01:13:47,680
але цілком імовірно, ми будемо приймати кілька сотень з нас в автобуси від Harvard Square

1201
01:13:47,680 --> 01:13:51,540
до Kendall Square, де Microsoft має красивий об'єкт влучно назвав "ботанік" -

1202
01:13:51,540 --> 01:13:53,830
Дослідження Нової Англії та Центру розвитку.

1203
01:13:53,830 --> 01:13:56,380
Ми доберемося туди близько 8 години вечора Нам доведеться трохи їжі.

1204
01:13:56,380 --> 01:13:58,160
Близько 1 ранку нам доведеться ще трохи їжі.

1205
01:13:58,160 --> 01:14:02,150
Близько 5 години ранку, якщо ви ще не спить ми попрямуємо до IHOP або прийняти вас назад в кампус.

1206
01:14:02,150 --> 01:14:04,380
Мета є, щоб зануритися в остаточному проектів

1207
01:14:04,380 --> 01:14:06,190
поряд з однокласниками і персоналу.

1208
01:14:06,190 --> 01:14:08,280
Потім через кілька днів це CS50 ярмарок,

1209
01:14:08,280 --> 01:14:10,990
яка насправді означає бути можливість для вас, хлопці, щоб продемонструвати свої роботи

1210
01:14:10,990 --> 01:14:12,700
і досягненнях за семестр

1211
01:14:12,700 --> 01:14:15,610
в той час як пліч-о-пліч один з одним і отримати відчуття того, що все зробили.

1212
01:14:15,610 --> 01:14:17,850
З урахуванням сказаного, велике спасибі Томмі і з Йосипом,

1213
01:14:17,850 --> 01:14:19,960
і ми будемо бачити Вас в понеділок.

1214
01:14:19,960 --> 01:14:24,070
 [Оплески]