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
Ці можа хто-небудзь тут, скажыце мне, што можа быць дрэннага аб канфiдэнцыяльнасцi 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
 [Апладысменты]