1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Седмица 9 Продължава]

2
00:00:02,700 --> 00:00:05,160
[Дейвид Дж. Малан - Харвардския университет

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
а именно JavaScript и нещо още по-нова, а именно AJAX, Asynchronous 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 обяд този петък в 13:15,

42
00:02:06,500 --> 00:02:09,800
главата да cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Без повече приказки, аз ви давам учение колега Джоузеф Ong.

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
Може ли някой да ми каже какви са две копчета на ляво и дясно?

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
COST. Много добре.

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
Ако кликнете върху Има Image, нищо не се случва на страницата.

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
[Малан] Може да търсите за Кеймбридж?

204
00:11:43,530 --> 00:11:47,030
Има нещо леко неправилно тук, където ви е грижа за Кеймбридж

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
[Студент ги разделят в Изток, регионите west. >> Добре.

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
Ако започнете да пишете БО, просто ми покаже резултатите, които имат БО вътре в тях.

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
Имаме Мило тук, който е нашето куче талисман с тази кърпа 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
Timeline е добре, защото това ви позволява да филтрирате на съдържание много по-бързо,

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
Big дума, която започва с P-R. >> Студент поверителност. >> Поверителност, нали?

304
00:17:56,780 --> 00:17:59,970
Поверителността е огромен проблем за потребителския опит.

305
00:17:59,970 --> 00:18:07,190
Това е едно от нещата, които мразя най-много за Facebook. [Смях]

306
00:18:07,190 --> 00:18:09,000
[Малан] Както правя сега.

307
00:18:09,000 --> 00:18:11,380
Давид не знаех, че това действително се е случило до вчера.

308
00:18:11,380 --> 00:18:14,560
Така че сега той знае, че всеки път, когато го говорите Знам, че той ми обръща внимание.

309
00:18:14,560 --> 00:18:16,880
[Малан] неловко част бях действително да му обръща внимание,

310
00:18:16,880 --> 00:18:21,040
и аз не знаех, че той знаеше, че го игнорира. [Смях]

311
00:18:21,040 --> 00:18:24,030
Поверителността е огромен проблем.

312
00:18:24,030 --> 00:18:28,670
Може ли някой да ми каже какво може да е лошо за поверителност на Facebook

313
00:18:28,670 --> 00:18:32,270
като оставим настрана факта, че те правят нещата по този начин?

314
00:18:32,270 --> 00:18:37,240
Какво е особено трудно да се направи по отношение на Facebook неприкосновеността на личния живот?

315
00:18:37,240 --> 00:18:40,340
Този вид е един от водещите въпрос.

316
00:18:41,680 --> 00:18:43,930
Да. >> Студент Скриване на вашите снимки от определени хора.

317
00:18:43,930 --> 00:18:46,170
Точно така. Точно така, да скриете вашите снимки от определени хора.

318
00:18:46,170 --> 00:18:51,290
Те имат този малък, малък бутон в горния десен ъгъл, който ви позволява да превключвате неприкосновеността на личния живот на снимката.

319
00:18:51,290 --> 00:18:56,360
Личния им живот са много разнообразни между различните видове менюта.

320
00:18:56,360 --> 00:18:59,510
>> Те са придобили много по-добре за него наскоро, но той да бъде използван в случай

321
00:18:59,510 --> 00:19:04,870
че всеки път, когато искат да попречат на приятелите си да видят на снимки,

322
00:19:04,870 --> 00:19:08,280
вие ще трябва да мине през много сложен 5-стъпка процес е като,

323
00:19:08,280 --> 00:19:11,150
нека кликнете върху тази връзка, сега нека щракнете отново, позволете ми да щракнете отново,

324
00:19:11,150 --> 00:19:13,420
нека ми посочете кои хора не могат да видят моите снимки.

325
00:19:13,420 --> 00:19:17,250
Това не е особено добра от страна на Facebook

326
00:19:17,250 --> 00:19:20,530
защото толкова много за потребителското изживяване всъщност им дава свободата

327
00:19:20,530 --> 00:19:22,460
да контролира това, което хората могат да видят.

328
00:19:22,460 --> 00:19:25,550
Ние наричаме този потребител контрол и свобода.

329
00:19:25,550 --> 00:19:31,090
Ако не сте отдаване под наем на потребителите си направите това по начин, който е ефективен и интуитивен,

330
00:19:31,090 --> 00:19:34,570
тогава вашето потребителско опит не е чак толкова голям на всички.

331
00:19:34,570 --> 00:19:38,200
 Бихте момчета искал да кажа нищо за Facebook?

332
00:19:38,700 --> 00:19:41,420
Как мога да изключите тази функция?

333
00:19:41,420 --> 00:19:46,290
Ong Вие не можете да изключите тази функция, и това е огромен недостатък използваемост от страна на Facebook.

334
00:19:46,290 --> 00:19:49,410
Тази функция - всъщност изглеждаше вчера в него -

335
00:19:49,410 --> 00:19:53,940
това е, че не можете да го направите или да е погребан някъде много, много дълбоко

336
00:19:53,940 --> 00:19:58,050
в дебрите на Facebook, защото аз не мога да разбера как да изключите тази функционалност.

337
00:19:58,050 --> 00:20:00,400
[Малан Но понякога тези решения не са очевидни

338
00:20:00,400 --> 00:20:03,890
защото вие момчета ни дадоха много полезна обратна информация на различни CS50 приложения

339
00:20:03,890 --> 00:20:05,710
и уебсайтове, които разбира се използва.

340
00:20:05,710 --> 00:20:10,260
Ние не са приложили всички тези искания и предложения.

341
00:20:10,260 --> 00:20:14,550
>> Част от това е за получаване на толкова много искания, че това е функция на времето,

342
00:20:14,550 --> 00:20:17,070
но понякога просто направи съзнателно решение като

343
00:20:17,070 --> 00:20:19,830
"Благодаря ви за предложението, но не сме съгласни."

344
00:20:19,830 --> 00:20:24,350
Е, как да действително да реши какво трябва да направите ако вашите потребители, че трябва да направим нещо

345
00:20:24,350 --> 00:20:28,110
дори и да не е задължително?

346
00:20:28,110 --> 00:20:32,360
Това е фин баланс между действително слушане на това, което потребителите си казват

347
00:20:32,360 --> 00:20:35,840
и всъщност като някаква линия, където вие казвате,

348
00:20:35,840 --> 00:20:37,750
"Ние няма да направи това, което казват тези потребители."

349
00:20:37,750 --> 00:20:42,520
И по-специално, мисля, че е цитат от Хенри Форд, който обобщава това доста добре.

350
00:20:42,520 --> 00:20:47,130
"Ако бях помолен хората това, което те искаха, те щяха да казват, че искат бързи коне".

351
00:20:47,130 --> 00:20:51,840
Може ли някой да сортирате дразни освен какво всъщност означава този цитат?

352
00:20:51,840 --> 00:20:56,060
Това не е точно, че потребителите знаят какво искат,

353
00:20:56,060 --> 00:20:59,180
но това е повече, че -

354
00:20:59,180 --> 00:21:02,720
[Ученик] Те не знаят какво е възможно.

355
00:21:02,720 --> 00:21:06,140
В част те не знаят какво е възможно.

356
00:21:07,880 --> 00:21:11,440
Tease, че освен малко повече. Какво искаш да кажеш с това?

357
00:21:11,440 --> 00:21:21,340
[Чува студент отговор]

358
00:21:21,340 --> 00:21:25,770
Това е добре. Мисля, че се опитвам да кажа, е, че хората знаят какво искат.

359
00:21:25,770 --> 00:21:28,050
Те искат бързи коне.

360
00:21:28,050 --> 00:21:29,840
Това, което те наистина искат, е способността да се движат по-бързо,

361
00:21:29,840 --> 00:21:32,310
но те наистина не знаят среда, чрез който да се постигне това.

362
00:21:32,310 --> 00:21:36,330
Когато стигнете до потребителите си и вашите потребители да ви кажа нещо

363
00:21:36,330 --> 00:21:39,700
и те ви кажа, "Искаме тези функции и тези функции и тези функции",

364
00:21:39,700 --> 00:21:42,650
не искате непременно да се мисли за "Нека да вървим напред

365
00:21:42,650 --> 00:21:44,720
"И прилагат това, което те изрично казват"

366
00:21:44,720 --> 00:21:48,610
но това, което искате да си помисля, "Какъв вид на идеи мога да получа от това?"

367
00:21:48,610 --> 00:21:50,450
Какво всъщност искаш?

368
00:21:50,450 --> 00:21:55,560
>> И от там какво можете да направите, е да проектира нещо, което отговаря на тези искания

369
00:21:55,560 --> 00:22:00,340
, но не непременно в начина, по който потребителят очаква тя да бъде изпълнено.

370
00:22:00,340 --> 00:22:03,830
Така че за нещо подобно крайните проекти, в много реално изражение,

371
00:22:03,830 --> 00:22:07,900
какво е полезно евристичен когато става дума за нещо по-добро,

372
00:22:07,900 --> 00:22:10,630
особено ако проектантът има тази арогантност за него

373
00:22:10,630 --> 00:22:14,360
, чрез която можете вид знам какво е най-добре, може да отнеме вход от вашите потребители,

374
00:22:14,360 --> 00:22:16,580
но как да отида за получаване на тази обратна връзка?

375
00:22:16,580 --> 00:22:21,610
В окончателния проекти, много конкретно, което произвежда оптимални резултати тук?

376
00:22:21,610 --> 00:22:25,030
Какво произвежда оптимални резултати - и аз ще отида в секунда -

377
00:22:25,030 --> 00:22:29,190
е този процес на разработване и след тестването и след това итерации.

378
00:22:29,190 --> 00:22:32,020
Какво искам да кажа чрез тестване обикновено е, когато проектирате нещо

379
00:22:32,020 --> 00:22:36,970
мисля, че е доста добра, като "Аз съм такъв велик дизайнер. Всеки ще обичам този."

380
00:22:36,970 --> 00:22:41,600
А после го сложи там и хората наистина не го харесва по някаква причина.

381
00:22:41,600 --> 00:22:46,820
Това, което трябва да направите, е, че трябва да се вземат части от неща, които хората обичат

382
00:22:46,820 --> 00:22:49,180
и реконструкция неща, които хората не харесват.

383
00:22:49,180 --> 00:22:53,080
Това звучи като много очевидно процес, но този процес на постоянно итерации

384
00:22:53,080 --> 00:22:55,980
на върха на това, което вече сте построен е процес, който ви помага

385
00:22:55,980 --> 00:22:59,730
не само усъвършенства собствените си умения за проектиране, но също така ви помага да усъвършенства дизайна

386
00:22:59,730 --> 00:23:03,790
така че хората, които всъщност Благодарим Ви за продукт, дори повече, отколкото преди.

387
00:23:03,790 --> 00:23:07,390
>> Аз ще отида в продължение на повече конкретни примери за това какво може да се прави.

388
00:23:07,390 --> 00:23:11,390
Като вид Последният пример за продукт, нека погледнем в каяк.

389
00:23:11,390 --> 00:23:14,970
Каяк, когато излезе, беше много, много популярна.

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
О, Боже, изскачащи прозорци. Bad потребителски опит.

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
трябваше да се сложи във вашия вход местоположение, местоположение за изход, натиснете Търсене,

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
Този вид незабавна обратна връзка е нещо, което каяк див народен

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
>> Кои от тези различни механизми на потребителския интерфейс ще използвате?

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
[Ученик] Входен. >> Вход. Или може би дори капка надолу с всички дати, нали?

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
по начин, който е вид хек?

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
И така с шест кликвания и може би някои превъртане

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
в света на уеб, така че има неща, като OnClick и onkeypress

512
00:30:22,370 --> 00:30:25,960
onkeyup и поставяне на показалеца и 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 и някои нови парчета пъзел за нас за уеб.

523
00:30:58,950 --> 00:31:03,450
Добре. Моето име е Томи, и аз отивам да се говори за JavaScript.

524
00:31:03,450 --> 00:31:07,150
Само отказ: Аз съм на мнение, че JavaScript е най-добрият език за програмиране

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
Това се случва, за да изберете елемент на страницата, която има ID на представи.

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
Да. >> [Ученик] Class. >> Точно така. Това сега е да изберете от класа.

561
00:33:15,180 --> 00:33:18,840
Разликата между ID и класа тук е като цяло 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
С класа, от друга страна, ние може да има повече от един елемент на същата страница

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
[Ученик] Всичко, което е етикет. >> Имаме две части тук.

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
защото нещо като бутон Submit може да бъде вход

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
В случай, че отива да слуша за Submit случай.

657
00:39:06,310 --> 00:39:08,890
Така че, когато потребителят кликне, които отправят бутон или преси 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
Може да има достъп до този файл, видяхме, точно като това, ако отида в Localhost / 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
Това е просто един празен DIV, че съм създал на страницата,

740
00:44:20,710 --> 00:44:26,640
и аз искам да се определят съдържанието на тази дивизия да бъде каквото ни изпраща обратно на сървъра.

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
току-що се появи на страницата, но адреса не се променя изобщо.

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
така че не е нужно да се притеснявате за дори щракнете на Търсене.

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 Instant се търси ефективно YouTube незабавно.

786
00:47:13,170 --> 00:47:17,020
Така че, вместо да се налага да отида до YouTube.com и натиснете Търсене,

787
00:47:17,020 --> 00:47:21,650
когато започнете да пишете в YouTube Instant нещо като 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
форма оферта и ще имат принос (тип = текст) или бихме могли да кажем (име = символ) -

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 Instant

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 Instant може да бъде много по-лесно

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
Ние можем да направим, че наистина добре с Bootstrap библиотека, която вече е включена

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
Аз напечатани в А и тук е списък на някои държави, които започват с А.

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
и аз ще се обадя на тази функция, наречена typeahead,

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
може да не е от най-популярните компании, които започват с А.

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! Finance

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
Разбира се, ако погледнете на този адрес, което е малко странно име,

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
Това е основно ще направи заявка към URL на 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!

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 Object Notation.

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
Аз наистина харесвам Bootstrap е 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!,

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
Да се ​​направя, че съм създал друг празен DIV и съм го дал ID предложения.

1024
01:02:46,390 --> 01:02:52,520
Много прилича определяне на съдържанието на DIV, които биха показване цената на данните за салдата,

1025
01:02:52,520 --> 01:02:58,600
сега просто искате да зададете съдържанието на тази дивизия какъвто и да е този низ е

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 и го сложи вътре на DIV нарича предложения.

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 Inc.

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
>> Така че, без никакви аргументи тази функция Вал се връща към това, което вече е в текстовото поле,

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
Вместо това, ние се казваш, когато нищо вътре на тази дивизия предложения,

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-ти връзка, това представлява елемент на тази 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-а-Thon, междувременно, е в рамките на няколко седмици.

1199
01:13:40,660 --> 01:13:44,340
Обикновено, ние правим това въз основа на лотария основа, защото на интереси,

1200
01:13:44,340 --> 01:13:47,680
но шансовете са, че ще отнеме няколко стотин от нас автобуси от Харвардския площад

1201
01:13:47,680 --> 01:13:51,540
Kendall Square, където Microsoft има красива съоръжение, уместно наречен "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England изследвания и Център за развитие.

1203
01:13:53,830 --> 01:13:56,380
Ние ще стигнем до там около 20:00 Ще имаме някаква храна.

1204
01:13:56,380 --> 01:13:58,160
Около 1 ч. ще имаме повече храна.

1205
01:13:58,160 --> 01:14:02,150
Около 5 часа сутринта, ако сте все още буден, ще минете през ИХОП или ви отведе обратно към колежа.

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
 [Аплодисменти]