1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Недела 9, Продолжува]

2
00:00:02,700 --> 00:00:05,160
[Дејвид Џ Malan - Универзитетот Харвард]

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
Јас daresay - и знаеме од неодамнешниот проблем сет

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
А потоа со помош на Tommy ние ќе разгледаме некои од имплементација детали.

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, асинхрони вклучите 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 ручек овој петок во 01:15,

42
00:02:06,500 --> 00:02:09,800
се упатат кон cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Без натамошно одложување, јас ви даде настава колеги Џозеф Онг.

44
00:02:13,260 --> 00:02:19,190
Здраво. [Аплауз]

45
00:02:19,190 --> 00:02:20,770
Благодарам.

46
00:02:20,770 --> 00:02:24,780
Прв пат дознав за дизајн е во класа тука се нарекува CS179.

47
00:02:24,780 --> 00:02:28,040
>> Професорот во времето ни ја раскажа приказната за еден друг професор

48
00:02:28,040 --> 00:02:31,640
кои отишле во хотел и се користи чешми.

49
00:02:31,640 --> 00:02:35,630
Може ли некој да ми каже што на 2 копчиња за лево и десно направам?

50
00:02:35,630 --> 00:02:39,080
[Студент] Жешка и ладна. >> Топла и ладна. Добро.

51
00:02:39,080 --> 00:02:41,430
Она што вообичаено се очекува, нели?

52
00:02:41,430 --> 00:02:46,960
Овој професор по употреба на тапа сака да се истуширам, и тој продолжува да го користи ова.

53
00:02:46,960 --> 00:02:51,310
Тој смета дека на левата и десната страна се за топла и ладна, нели?

54
00:02:51,310 --> 00:02:55,470
Но, секој може да ми кажете што овие всушност прават?

55
00:02:55,470 --> 00:02:58,060
Секое раце?

56
00:02:58,060 --> 00:03:01,740
[Нечујни студент одговор] >> Еден предлог е?

57
00:03:01,740 --> 00:03:05,860
[Нечујни студент одговор] >> Температура?

58
00:03:05,860 --> 00:03:10,460
Па еден од нив го контролира температурата и други контроли? >> [Студент] притисокот на водата.

59
00:03:10,460 --> 00:03:12,350
Притисокот на водата. Добро.

60
00:03:12,350 --> 00:03:15,100
Овој професор оди во овој и, мислејќи дека се контролира топло и студено,

61
00:03:15,100 --> 00:03:21,470
се врти на десната, што тој мисли дека е жешко, па сè до

62
00:03:21,470 --> 00:03:23,560
бидејќи тој сака да ги преземе топол туш.

63
00:03:23,560 --> 00:03:28,100
Па, овие навистина не се совпаѓаат, така што тој добива ова не е многу забавно искуство

64
00:03:28,100 --> 00:03:31,110
да се биде во ладна туш, и сите знаеме што тоа се чувствува како.

65
00:03:31,110 --> 00:03:33,620
Ова е пример на еден дизајн мааната.

66
00:03:33,620 --> 00:03:37,040
Што мислам со тоа е неговата очекување од тапа

67
00:03:37,040 --> 00:03:39,420
не се поклопува со она што излезе од туш,

68
00:03:39,420 --> 00:03:41,780
кој е вид на жално за него.

69
00:03:41,780 --> 00:03:44,990
Значи ова е пример на еден дизајн пропустот што се случува во реалниот живот.

70
00:03:44,990 --> 00:03:48,020
Но, можеме да видиме сите видови на други, како и.

71
00:03:48,020 --> 00:03:50,390
Ние не сме веројатно фанови на системот MBTA.

72
00:03:50,390 --> 00:03:55,560
Ова е метрото систем, всушност, во Лондон, кој вели: "Ова копче не е во употреба."

73
00:03:55,560 --> 00:04:00,220
Зошто е дури и таму? Зошто ние дури и се грижи?

74
00:04:00,220 --> 00:04:02,810
Кога бев дете, се технолошки такт еден во куќата,

75
00:04:02,810 --> 00:04:05,050
секогаш кога компјутерот ќе се сруши, мајка ми ќе дојде до мене,

76
00:04:05,050 --> 00:04:07,060
ме покажува овој екран и ме прашуваа што се случило.

77
00:04:07,060 --> 00:04:09,210
>> Дури и јас не знам што тоа значи.

78
00:04:11,890 --> 00:04:14,700
[Смеа] Што?

79
00:04:16,950 --> 00:04:18,019
[Смеа]

80
00:04:18,720 --> 00:04:23,050
Понекогаш се чувствуваме како развивачите на софтвер се само trolling нас.

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
Гледаме дека овде овој мал pop-up овде всушност изгледа прилично убаво.

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
Тоа малку pop-up што доаѓа до навистина не ми даде какви било информации

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 Инстант или AutoComplete

107
00:05:52,580 --> 00:05:54,970
која ни овозможува да дојдеме до нашите резултати побрзо?

108
00:05:54,970 --> 00:05:58,740
Инженеринг вклучува, како Томи ќе ти покажам, всушност градење.

109
00:05:58,740 --> 00:06:01,890
Постојат многу видови на дизајн.

110
00:06:01,890 --> 00:06:06,070
На пример, ако сте градење нешто за распоредување на нешто

111
00:06:06,070 --> 00:06:09,770
во трета земја во светот каде што не е многу електрична енергија или дека многу технологија,

112
00:06:09,770 --> 00:06:11,440
треба да дизајн она што го градиме

113
00:06:11,440 --> 00:06:14,210
на начин на кој лесно дава пристап до луѓето таму.

114
00:06:14,210 --> 00:06:18,290
Но, она што видови на други дизајн одлуки може да има

115
00:06:18,290 --> 00:06:21,850
или би можеле да бидат вклучени во нешто како ова?

116
00:06:23,690 --> 00:06:25,660
Да. Гледам рака.

117
00:06:25,660 --> 00:06:37,200
[Нечујни студент одговор] >> Право. Точно. Пристапноста не е една работа.

118
00:06:37,200 --> 00:06:40,870
Многу луѓе не размислуваат за "Што е со моите корисници?"

119
00:06:40,870 --> 00:06:43,160
како крајности на било спектар.

120
00:06:43,160 --> 00:06:47,770
Имам корисници кои би можеле да имаат посебни дека јас не сум размислување за

121
00:06:47,770 --> 00:06:50,590
и јас сум само размислување за дизајнирање за општата корисник.

122
00:06:50,590 --> 00:06:52,630
Интернетот е достапен од сите во денешно време,

123
00:06:52,630 --> 00:06:54,870
и јас треба да се дизајнирање за оние луѓе, како и.

124
00:06:54,870 --> 00:06:58,620
Какви видови на другите дизајн одлуки може да се направи?

125
00:06:58,620 --> 00:07:00,690
Да. >> [Студент] трошоци.

126
00:07:00,690 --> 00:07:02,680
Чини. Многу добар.

127
00:07:02,680 --> 00:07:08,060
Друга работа е што ние би можеле да ги базираме нашите дизајн одлуки за се исплатливи.

128
00:07:08,060 --> 00:07:13,130
Ако ние сме бизнис, сакате да се изгради нешто што не им треба многу трошоци за производство

129
00:07:13,130 --> 00:07:17,720
но може да се продаваат на особено високи цени или да не добие некоја добивка.

130
00:07:17,720 --> 00:07:21,540
>> Овие се сите различни видови на дизајн, но кога градиме нешто на интернет

131
00:07:21,540 --> 00:07:25,120
или кога градиме нешто што најверојатно не чини толку многу да се изгради до сега,

132
00:07:25,120 --> 00:07:28,630
како Интернет апликации - вие не мора да се фрли многу капитал во неа

133
00:07:28,630 --> 00:07:30,900
со цел да се направи нешто што всушност работи -

134
00:07:30,900 --> 00:07:33,490
она што ние сме повеќе загрижени за е корисничко искуство.

135
00:07:33,490 --> 00:07:36,390
Ние го нарекуваме овој корисник дизајн центриран.

136
00:07:36,390 --> 00:07:41,550
Во суштина она што корисникот дизајн центриран вклучува се себе си стави во чевлите на вашите корисници.

137
00:07:41,550 --> 00:07:44,870
Ако некој знаци се за она што јас сум градење,

138
00:07:44,870 --> 00:07:48,250
тие очигледно дојде до мојата одредена апликација со цел во умот,

139
00:07:48,250 --> 00:07:50,280
со задача тие сакаат да се заврши.

140
00:07:50,280 --> 00:07:53,650
И вашата работа е не само да им помогне да ја заврши таа задача

141
00:07:53,650 --> 00:07:57,930
но да им помогне да ја заврши оваа задача на начин кој е ефикасен, интуитивен,

142
00:07:57,930 --> 00:08:01,900
и, како што некои лице, рече таму, достапни.

143
00:08:01,900 --> 00:08:03,750
Што значи ефикасност значи?

144
00:08:03,750 --> 00:08:08,050
Ефикасност значи колку брзо го моето корисничко заврши задачата дадена мојот интерфејс.

145
00:08:08,050 --> 00:08:11,650
Е потребно многу кликне за нив да се добие од едно место до друго?

146
00:08:11,650 --> 00:08:14,630
Тоа е мачна? Дали тие мора да се изврши многу повторливи задачи?

147
00:08:14,630 --> 00:08:17,140
Ние сакаме да се направи овој процес како ефикасна е можно

148
00:08:17,140 --> 00:08:20,070
така што тие не треба да направите оние видови на нештата.

149
00:08:20,070 --> 00:08:24,230
Како и за intuitiveness, што е, на пример, ако корисникот изгледа мојот интерфејс,

150
00:08:24,230 --> 00:08:27,240
тоа е лесно за нив да се добие од место до место?

151
00:08:27,240 --> 00:08:30,390
Тоа е лесно за нив да дознаам што тие мора да кликнете во мојот интерфејс

152
00:08:30,390 --> 00:08:33,770
со цел за нив да се постигне целта или задача што тие сакаат да се постигне?

153
00:08:33,770 --> 00:08:37,520
>> И, конечно, како еден човек рече таму, пристапност е многу важна.

154
00:08:37,520 --> 00:08:39,640
[Машки звучник] Станува збор за пристапност за нешта како визија,

155
00:08:39,640 --> 00:08:42,740
како како можам да всушност дизајнира нешто за некој кој е слеп?

156
00:08:42,740 --> 00:08:46,460
О. За луѓето кои не може да се види на сите, имаме нешто што се нарекува читачи на екран.

157
00:08:46,460 --> 00:08:49,070
Што треба да направите е да треба да се изгради својата веб-страница на начин

158
00:08:49,070 --> 00:08:52,020
дека, на пример, особено технологии она што го нарекуваме -

159
00:08:52,020 --> 00:08:53,590
Постојат многу работи сега.

160
00:08:53,590 --> 00:08:55,660
Мислам дека има читачи на екран наречен JAWS.

161
00:08:55,660 --> 00:08:58,410
Многу од овие работи се потпира на она што ние го нарекуваме област правила

162
00:08:58,410 --> 00:09:02,010
со цел да се прочита на корисникот она што е присутно на оваа страница.

163
00:09:02,010 --> 00:09:05,480
За оние луѓе кои не може да се види, треба да бидете сигурни дека овие читачи на екран

164
00:09:05,480 --> 00:09:09,130
всушност може да ги собереш на содржината на страницата и всушност може да се покаже вашите корисници,

165
00:09:09,130 --> 00:09:13,630
ако не може да се види, барем сеуште можете да се разбере содржината на оваа страница.

166
00:09:13,630 --> 00:09:16,190
Да. Во ред.

167
00:09:16,190 --> 00:09:23,410
Доволно зборува за добар дизајн. Ајде да зборуваме за лоши дизајн.

168
00:09:23,410 --> 00:09:25,220
Тоа се работи што не треба да прават.

169
00:09:25,220 --> 00:09:27,890
Може ли некој да ми каже за нивните искуства со Craigslist

170
00:09:27,890 --> 00:09:32,190
и она што тие мислат дека не е толку голема за овој дизајн?

171
00:09:33,690 --> 00:09:36,430
Да. >> [Студент] Мислам дека има премногу зборови во една област.

172
00:09:36,430 --> 00:09:39,350
Премногу зборови, нели? Целосно огромно.

173
00:09:39,350 --> 00:09:42,400
Ќе дојде до оваа страница и вие ќе бидете поздравени со целиот куп на работите тука

174
00:09:42,400 --> 00:09:43,860
дека дури и да не е важно за вас.

175
00:09:43,860 --> 00:09:47,010
На пример, можете да живеат во една држава која не започне со ова писмо.

176
00:09:47,010 --> 00:09:48,690
Да речеме дека живеете во Тексас или нешто.

177
00:09:48,690 --> 00:09:53,790
>> Мора да дојдете сите на патот надолу на страницата за да стигнете до локацијата што се во.

178
00:09:53,790 --> 00:10:00,320
Јас сум од Бостон, па нека ме погледне во Масачусетс. Каде е Масачусетс?

179
00:10:00,320 --> 00:10:03,270
Ох, тој е во право тука. Ох, тоа е Бостон. Во ред.

180
00:10:03,270 --> 00:10:09,070
Ајде да погледнеме во Бостон. [Смеа]

181
00:10:09,070 --> 00:10:12,250
Прилично големо, нели?

182
00:10:12,250 --> 00:10:16,400
Непријатна работи таму. [Смеа]

183
00:10:17,320 --> 00:10:19,470
Да речеме дека јас сум во потрага по некаде да живеат.

184
00:10:19,470 --> 00:10:24,130
Колку луѓе, всушност, се користи Craigslist? Тони на вас.

185
00:10:24,130 --> 00:10:30,960
Постојат многу лоши начини да се погледне во тоа, но ајде да погледнеме ова.

186
00:10:35,130 --> 00:10:38,970
Која е разликата помеѓу img и слика? Може ли некој да ми каже?

187
00:10:41,350 --> 00:10:42,830
Има всушност е никаква разлика.

188
00:10:42,830 --> 00:10:47,710
Тие значат иста работа, но тие имаат различни етикети за нив поради некоја причина.

189
00:10:48,980 --> 00:10:53,560
Ако јас кликнете на Има слика, ништо не се случува на оваа страница.

190
00:10:53,560 --> 00:10:57,490
Јас всушност треба да кликнете на Барај повторно за нешто да се случи.

191
00:10:57,490 --> 00:11:02,430
Што може да биде подобро дизајн одлука дека може да се направи таму?

192
00:11:03,820 --> 00:11:08,030
Ако сум притискањето на ова филтер, веројатно сакате да филтрирање од страна на таа одредена акција

193
00:11:08,030 --> 00:11:09,970
или дека одредена категорија.

194
00:11:09,970 --> 00:11:14,450
Значи наместо да притиснете Барај повторно, јас само автоматски може да направи за филтрирање

195
00:11:14,450 --> 00:11:17,060
вид на Google стил, каде што тие го прават тоа веднаш.

196
00:11:17,060 --> 00:11:20,440
[Malan] Но, не формира како што ние ги видовме досега мора да биде физички поднесени

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
[Malan] Можете да пребарувате за Кембриџ?

204
00:11:43,530 --> 00:11:47,030
Има нешто малку аномално тука каде што се грижат за Кембриџ

205
00:11:47,030 --> 00:11:54,790
а сепак сте добивање Westford, Пролет Хил, West Newton и слично.

206
00:11:54,790 --> 00:11:57,930
Веројатно не е идеален. >> Веројатно не е идеален.

207
00:11:57,930 --> 00:12:03,900
Како би можел да бидам во можност да се направи искуство на корисникот подобро на оваа страница?

208
00:12:03,900 --> 00:12:07,340
Да. >> [Студент] инструкции.

209
00:12:07,340 --> 00:12:09,500
Во ред. Инструкции во каква смисла?

210
00:12:09,500 --> 00:12:14,630
[Студент] На пример, нешто што за прв пат корисници кои дури и не знаат што Craigslist е

211
00:12:14,630 --> 00:12:17,320
или ако не знаете што сте би требало да се направи.

212
00:12:17,320 --> 00:12:20,150
Право. Па објасни она што Craigslist е на оваа страница е важно.

213
00:12:20,150 --> 00:12:23,490
Ние всушност може да каже корисници што оваа страница е всушност за.

214
00:12:23,490 --> 00:12:27,090
Ако јас сум само посета на овој, гледам еден куп на локации. Јас дури и не знаат што тие значат.

215
00:12:27,090 --> 00:12:29,730
Но, уште поважно, само гледајќи во овој интерфејс,

216
00:12:29,730 --> 00:12:35,530
се сеќавам морав да дојдете долу еден тон работи да се најде одредена заедница

217
00:12:35,530 --> 00:12:37,560
дека јас всушност се грижи за ова.

218
00:12:37,560 --> 00:12:39,820
Што е побрз начин да го направите тоа? Да.

219
00:12:39,820 --> 00:12:43,290
[Студент] Поделете ги нагоре во исток, запад региони. >> Океј.

220
00:12:43,290 --> 00:12:47,460
Можев да ги делат во повеќе категории кои може да ми помогне побрзо се утврди

221
00:12:47,460 --> 00:12:49,820
како да стигнете до таа одредена локација.

222
00:12:49,820 --> 00:12:54,510
[Студент] Ставете паѓачката листа. >> Право. Во ред.

223
00:12:54,510 --> 00:12:58,240
Јас може да се користи опаѓачкото мени затоа што имаат фиксен сет на работите

224
00:12:58,240 --> 00:13:00,100
и ние би можеле да ги покаже во опаѓачкото мени.

225
00:13:00,100 --> 00:13:02,240
На тој начин не заземаат многу простор на екранот.

226
00:13:02,240 --> 00:13:05,630
Но, дури и подобро од тоа, што да правиме?

227
00:13:05,630 --> 00:13:09,220
Да. >> [Нечујни студент одговор] >> Може да се каже дека повторно? >> [Студент] полето за пребарување.

228
00:13:09,220 --> 00:13:11,260
Да, поле за пребарување. Тоа е одлично.

229
00:13:11,260 --> 00:13:16,430
Она што всушност може да направи е ако се погледне назад на слајдови, поле за пребарување.

230
00:13:16,430 --> 00:13:21,520
Автоматско. Многу лесен начин да пребарувате низ резултатите кои знаете дека се во собата.

231
00:13:21,520 --> 00:13:25,980
Ако почнам пишување фотогалерии, само ми покаже сите резултати кои имаат BO внатрешноста на нив.

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
Ајде да зборуваме за Фејсбук.

238
00:13:50,880 --> 00:13:54,390
Кога Фејсбук излезе, а особено Фејсбук слики,

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
Но, дали некој знае она што го направи Фејсбук слики експлодираат во тоа време не беше ослободен?

244
00:14:11,710 --> 00:14:15,080
Да. >> [Студент] Тагови. >> Тагови. Точно.

245
00:14:15,080 --> 00:14:21,300
Имаме Мило овде, кој е наш куче маскота со тоа bandana CS50.

246
00:14:21,300 --> 00:14:24,810
Можете да видите дека имаме оваа означување функција во средината.

247
00:14:24,810 --> 00:14:28,240
И она што го направи Фејсбук слики, така интересна од употребливост гледна точка

248
00:14:28,240 --> 00:14:34,130
е тоа што всушност е дозволено на луѓето преку овој да се вклучат своите пријатели во нивните слики.

249
00:14:34,130 --> 00:14:37,680
За Фејсбук, бидејќи нивниот веб-сајт е особено социјалните,

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
Значи тоа е Фејсбук фотографии.

260
00:15:07,190 --> 00:15:09,800
>> Но, ајде да зборуваме Фејсбук поопшто.

261
00:15:09,800 --> 00:15:13,400
Сигурен сум дека многу луѓе тука имаат мислење за Фејсбук,

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
Ајде. Знам дека сите од вас го користат Фејсбук.

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
Имате пријатели на Фејсбук кои не се сретнале за 2 или 3 години

269
00:15:41,660 --> 00:15:43,860
и ќе видите нивните вести резултати никнуваат во вашиот News Feed

270
00:15:43,860 --> 00:15:45,870
и не навистина се грижат за неа.

271
00:15:45,870 --> 00:15:48,700
Фејсбук всушност направен обид да се направи ова подобро,

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-тите - >> [Malan] Јас бев таму. >> Тој беше таму. [Смеа]

280
00:16:25,030 --> 00:16:29,210
Може да се сеќавам трепка GIFs средини, светликаво работи,

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
Уметноста Јеил веб-сајт користи за да имаат анимирани GIFs како нивното потекло

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
[Malan] Тоа е многу подобро сега. >> Тоа е многу подобро сега, како може да се види. >> [Malan] Oh yeah.

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
Какви видови на други работи се добри за Фејсбук или лошо за Фејсбук?

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
[Студент] Новиот Хронологија на системот ви овозможува да пребарувате профилот на лицето за нивното минато.

295
00:17:25,640 --> 00:17:28,119
Ooh, временската линија.

296
00:17:28,119 --> 00:17:30,280
Хронологија е голема работа, бидејќи тоа ви овозможува труп вашите пријатели

297
00:17:30,280 --> 00:17:33,300
назад, кога тие биле во средно училиште.

298
00:17:35,160 --> 00:17:38,060
Хронологија е добро, бидејќи тоа ви овозможува да се филтрира низ содржината многу побрзо,

299
00:17:38,060 --> 00:17:41,500
што ви овозможува да најдете работи кои инаку би ви земе навистина долго време да се најде

300
00:17:41,500 --> 00:17:45,840
само лизгање нагоре и надолу, нагоре, нагоре, нагоре, нагоре, нагоре, како враќање во времето.

301
00:17:45,840 --> 00:17:48,910
Но, потоа, тука е исто така еден вид на недостатоци дека во однос на корисничкото искуство.

302
00:17:48,910 --> 00:17:51,190
Она што би можело да биде?

303
00:17:51,190 --> 00:17:56,780
Голем збор, која започнува со П-Р. >> [Студент] приватност. >> Приватност, нели?

304
00:17:56,780 --> 00:17:59,970
Приватноста е голем корисник искуство прашање.

305
00:17:59,970 --> 00:18:07,190
Ова е една од работите мразам најмногу за Фејсбук. [Смеа]

306
00:18:07,190 --> 00:18:09,000
[Malan] Како можам сега.

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
[Malan] Незгодната дел беше бев всушност го игнорира,

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
Некој тука може да ми каже што би можело да биде лошо за Фејсбук приватност

313
00:18:28,670 --> 00:18:32,270
и покрај тоа што тие го прават вакви работи?

314
00:18:32,270 --> 00:18:37,240
Што е тоа особено тешко да се направи во однос на Фејсбук приватност?

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
Тоа не е особено добро на дел Фејсбук

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
 Ќе ви момци сакал да кажам нешто за Фејсбук?

332
00:19:38,700 --> 00:19:41,420
Како да ја исклучам овој одмор?

333
00:19:41,420 --> 00:19:46,290
[Ong] Вие не може да се претвори овој исклучи, а тоа е огромен употребливост мааната од страна на Фејсбук.

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
во вдлабнатини на Фејсбук бидејќи не можам да дознаам како да го исклучите оваа функција на сите.

337
00:19:58,050 --> 00:20:00,400
[Malan] Но понекогаш овие одлуки не се очигледни

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
Душманке дека освен малку повеќе. Што сакаш да кажеш со тоа?

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
О, Боже, pop-up прозорци. Лошо корисничко искуство.

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
[Malan] И до точка на Joseph порано за корисниците не мора да знаат што сакаат,

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
Се тие користат одредена UI механизми на екранот

472
00:28:14,680 --> 00:28:17,490
на начин кој е вид на hacky?

473
00:28:17,490 --> 00:28:22,020
Немав намера за нив да го направи тоа на тој начин.

474
00:28:22,020 --> 00:28:23,940
И откако ќе завршиш со тоа, што сакаш да направам?

475
00:28:23,940 --> 00:28:26,010
Вашиот дизајн карпи, нели?

476
00:28:26,010 --> 00:28:29,600
Што сакате да направите е да сакате да се развие, а потоа направи тој процес одново.

477
00:28:29,600 --> 00:28:32,110
Така покажуваат дека во пријатели еднаш сте го развива, го тестот,

478
00:28:32,110 --> 00:28:36,630
развој, тестирање, развој, тестирање, iterate, и натаму и напред.

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
и како може да биде во можност да се спроведе вакво нешто AutoComplete

484
00:28:53,220 --> 00:28:56,610
на начин кој е прилично едноставна.

485
00:28:57,440 --> 00:28:59,550
[Malan] Како Томи поставува тука, прашање тогаш.

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, премиерот,

491
00:29:15,910 --> 00:29:17,440
а потоа да го направите тоа 3 пати.

492
00:29:17,440 --> 00:29:19,920
И така со 6 кликне а можеби и некои лизгање

493
00:29:19,920 --> 00:29:24,000
Вашето корисничко всушност може да обезбеди некој вид на датум и / или време опсег во оваа смисла.

494
00:29:24,000 --> 00:29:27,920
>> Значи дефинитивно неоптимална а сепак досега видовме нема експресивен способности

495
00:29:27,920 --> 00:29:30,330
во која било од јазиците ние погледна да се направи нешто sexier

496
00:29:30,330 --> 00:29:32,620
како овој лизгач на проектот време и крајот на времето.

497
00:29:32,620 --> 00:29:36,290
Но, ако се сетам на недела 0 кога ние разговаравме за гребење,

498
00:29:36,290 --> 00:29:39,080
таму немаше Widgets, што го направија некои работи.

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
Што навистина се случува? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Студент] Каде е позицијата на покажувачот? >> Добро. Каде е позицијата на покажувачот?

508
00:30:10,080 --> 00:30:11,970
Ова беше нешто што ни е потребно да го изразат назад во нула,

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 и onmouseover и onmouseout.

513
00:30:25,960 --> 00:30:29,130
Така сфаќаат дека дури и овие нешта ние сме биле преземање здраво за готово на интернет

514
00:30:29,130 --> 00:30:32,190
со сајтови како Фејсбук и 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
и во еден момент со програмски механизми кои на Tommy за да се воведе

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 за друга класа или некои други јазици,

528
00:31:16,330 --> 00:31:19,780
тоа е само навистина фрустрирачки во сите ниско ниво детали што треба да се заглави внатре

529
00:31:19,780 --> 00:31:23,050
Значи, ако сте некогаш чувствува тажна за тоа како досадни Ц е да се напише,

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
тоа ќе биде претставен во ДОМ.

545
00:32:13,890 --> 00:32:19,340
>> ДОМ запамети е само овој голем дрво каде елементите се поврзани во оваа голема хиерархија.

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
Слично на тоа, кога имаме ДОМ ние треба некој начин на доведување во прашање тоа.

551
00:32:36,020 --> 00:32:39,490
Ние треба некој начин да се каже: "Сакам сите копчиња кои изгледаат вака

552
00:32:39,490 --> 00:32:41,860
"Или сите на сликите на оваа страница."

553
00:32:41,860 --> 00:32:44,330
И овие селектори ни овозможи да го сторат тоа.

554
00:32:44,330 --> 00:32:45,690
Значи само еден брз повториме.

555
00:32:45,690 --> 00:32:50,770
Оваа прва овде, овој # поднесе, што е тоа што ќе изберете? Дали некој се сеќавам?

556
00:32:50,770 --> 00:32:54,880
[Нечујни студент одговор] >> Да, точно.

557
00:32:54,880 --> 00:32:59,510
Ова се случува да изберете елемент на страница, која има број на покорат.

558
00:32:59,510 --> 00:33:03,470
И така што хаш таг вели дека ова селектор ќе работат со лични карти.

559
00:33:03,470 --> 00:33:07,630
Како за вториот, ова. Центриран, она што ќе изберете?

560
00:33:11,360 --> 00:33:15,180
Да. >> [Студент] класа. >> Токму така. Ова што сега се случува да изберете од класа.

561
00:33:15,180 --> 00:33:18,840
Разликата меѓу ID и класа тука е генерално проект треба да биде уникатен

562
00:33:18,840 --> 00:33:20,820
во рамките на она што просторот сте во потрага завршена.

563
00:33:20,820 --> 00:33:23,080
Значи, ако сте биле во потрага во текот на целиот веб страница,

564
00:33:23,080 --> 00:33:27,740
Дали навистина само треба да имаат 1 елемент со одредени проект, така што во овој случај на покорат.

565
00:33:27,740 --> 00:33:31,330
Со часови, од друга страна, може да имаме повеќе од 1 елементи на истата страница

566
00:33:31,330 --> 00:33:33,130
со истата класа.

567
00:33:33,130 --> 00:33:36,580
Ова може да биде корисно за велејќи дека сакате да го изберете она што е центриран на страница

568
00:33:36,580 --> 00:33:38,450
наместо само 1 работа.

569
00:33:38,450 --> 00:33:40,310
>> И, конечно, оваа последната тука е малку повеќе комплицирано,

570
00:33:40,310 --> 00:33:43,890
но она што е ова се случува да изберете од ДОМ?

571
00:33:46,650 --> 00:33:48,810
[Нечујни студент одговор] >> Што е тоа?

572
00:33:48,810 --> 00:33:53,250
[Студент] Нешто што е таг. >> Имаме 2 дела тука.

573
00:33:53,250 --> 00:33:58,070
Во вториот дел се случува да се каже Сакам да изберете овие тагови со ознака на влез,

574
00:33:58,070 --> 00:34:00,730
па секој елемент кој е влезен таг.

575
00:34:00,730 --> 00:34:03,080
Но јас не сакаат да само да одбереш сите влезови

576
00:34:03,080 --> 00:34:05,170
затоа што нешто како копче Прати може да биде влез

577
00:34:05,170 --> 00:34:08,409
и нешто како поле за текст може да биде влез.

578
00:34:08,409 --> 00:34:11,909
Така да со овие загради јас велам дека само сакате да изберете оние елементи

579
00:34:11,909 --> 00:34:14,110
кои се од тип текст.

580
00:34:14,110 --> 00:34:17,400
Некаде во мојот HTML таг Имам атрибут наречен тип,

581
00:34:17,400 --> 00:34:19,750
и вредноста на тој атрибут треба да биде текстот.

582
00:34:19,750 --> 00:34:21,340
Па, како за овој прв дел овде?

583
00:34:21,340 --> 00:34:25,489
Првиот збор на овој селектор е форма тогаш имам простор, а потоа овој влез дел.

584
00:34:25,489 --> 00:34:29,620
Што значи дека направи, ставање на форма пред тоа?

585
00:34:33,409 --> 00:34:35,860
Ова се случува да во основа ограничување на нашите пребарување.

586
00:34:35,860 --> 00:34:38,510
Тоа може да биде случај дека имаме некои влезови на страница

587
00:34:38,510 --> 00:34:41,080
кои не се потомци на форма.

588
00:34:41,080 --> 00:34:46,150
Што тоа ќе го направите ова е да се каже дека само сакаат влез тагови кои имаат некаде над нив

589
00:34:46,150 --> 00:34:49,030
некои родител елемент на формата.

590
00:34:49,030 --> 00:34:52,100
И така на овој начин можеме да ја направиме овие повеќе хиерархиска кверија

591
00:34:52,100 --> 00:34:55,000
па ние не само треба да изберете што појавување на дадена селектор.

592
00:34:55,000 --> 00:35:00,760
Ние можеме да вид на ограничување на обемот на таа пребарување на нешто друго.

593
00:35:00,760 --> 00:35:04,000
Па сега дека знаеме како да изберете елементи на страницата,

594
00:35:04,000 --> 00:35:06,780
ајде да разговараме малку за AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX е сеуште многу трендовски акроним кој се залага за асинхрони JavaScript и XML.

596
00:35:12,270 --> 00:35:15,640
Тоа само така се случува, дека XML е само некој начин да се претставуваат податоци.

597
00:35:15,640 --> 00:35:20,920
>> Овој вид на изгубени популарност во последно време, па Х во 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
ние секогаш треба да се направи корисници кликнете на копчето достави или кликнете на линкот

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
од кои јас сум дал овој формулар за идентификација.

613
00:36:23,820 --> 00:36:26,480
Сум рече id = "форма понуда".

614
00:36:26,480 --> 00:36:31,910
Јас го направив тоа само затоа што тоа се случува да се направи ова е малку полесно да изберете од ДОМ

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
Гледаме долу тука дека јас сум поврзување во датотека вклучите наречен quote.js.

634
00:37:36,400 --> 00:37:40,140
Да, всушност се отвори таа датотека. Не постои.

635
00:37:42,610 --> 00:37:45,860
Сите мои JavaScript датотеки ќе бидат лоцирани во HTML

636
00:37:45,860 --> 00:37:47,630
така што на веб прелистувачот може да го пристап.

637
00:37:47,630 --> 00:37:50,330
Тогаш имаме посебен директориум тука за JavaScript,

638
00:37:50,330 --> 00:37:54,340
а сега тука е quote.js.

639
00:37:54,340 --> 00:38:00,930
На врвот на оваа датотека ова вели дека овде сакам да се чека за целата страница да се вчита

640
00:38:00,930 --> 00:38:04,830
пред да се обиде да направи нешто. Зошто е тоа потребно?

641
00:38:04,830 --> 00:38:08,650
Излегува дека следното нешто, ќе одам да направите тука е да почнат да бараат за елемент

642
00:38:08,650 --> 00:38:10,810
која одговара на некои селектор.

643
00:38:10,810 --> 00:38:15,600
Ако ова го вклучите Javascript-се некогаш извршени пред овој елемент е оптоварена на страницата,

644
00:38:15,600 --> 00:38:17,820
тогаш сè јас се обидувам да не се оди на работа

645
00:38:17,820 --> 00:38:20,580
затоа што јас ќе одам да се обиде да избере нешто што не е таму.

646
00:38:20,580 --> 00:38:23,780
Значи оваа линија до врвот вели Сакам да почека додека сè е преполн

647
00:38:23,780 --> 00:38:28,030
па ние сме гарантира дека секој елементи Јас сум во потрага по се всушност на оваа страница.

648
00:38:29,730 --> 00:38:34,310
Ова знакот за долар тука значи јас сум со користење на библиотека наречена jQuery.

649
00:38:34,310 --> 00:38:38,570
Ова jQuery библиотеката ни овозможува да ги користат овие селектори дека ние само ја погледна.

650
00:38:38,570 --> 00:38:44,010
Велејќи $ потоа поминува како аргумент овој # форма понуда,

651
00:38:44,010 --> 00:38:47,910
Јас сум сега изборот таа форма што ние едноставно се погледне во.

652
00:38:47,910 --> 00:38:52,290
Сега имам застапеност на таа форма во меморијата некако.

653
00:38:52,290 --> 00:38:56,760
>> На овој објект сега, оваа претстава на формата,

654
00:38:56,760 --> 00:38:58,890
Јас сум сега користење на функцијата повика.

655
00:38:58,890 --> 00:39:02,710
Што оваа функција не е тоа се случува да се закачите на некој настан управувачот.

656
00:39:02,710 --> 00:39:06,310
Случај ние ќе слуша за е случај поднесе.

657
00:39:06,310 --> 00:39:08,890
Па кога корисникот ќе кликне дека копчето Submit или притиска Enter,

658
00:39:08,890 --> 00:39:11,730
овој настан ќе оган.

659
00:39:11,730 --> 00:39:16,390
Од hooking во ова, јас сега може да ја замени стандардно однесување на формата.

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
Ова се вели дека сакам да започнете оваа форма елемент со проект на образец-понуда.

670
00:39:54,460 --> 00:39:58,440
Потоа некаде во внатрешноста на таа форма треба да има влезен елемент

671
00:39:58,440 --> 00:40:01,270
што има име на симбол.

672
00:40:01,270 --> 00:40:05,460
Ако ги погледнеме назад во нашите HTML, видовме дека имавме влез [име = симбол].

673
00:40:05,460 --> 00:40:12,380
Тоа значи дека ова ќе го избере тој текст дека корисникот пишува во.

674
00:40:12,380 --> 00:40:13,870
Тоа е убаво. Имаме полето за текст.

675
00:40:13,870 --> 00:40:17,360
Сега ние само треба да знаеш што е внатре во неа.

676
00:40:17,360 --> 00:40:20,290
Да го стори тоа можеме да го наречеме овој метод тука, ова. Вредност,

677
00:40:20,290 --> 00:40:23,240
и овој вели знам што полето за текст кој го имате.

678
00:40:23,240 --> 00:40:28,160
Сакам да ми кажете што е тоа на корисникот внесе во тој текст кутија.

679
00:40:28,160 --> 00:40:34,440
Сега имаме низа наречен симбол кој е еднаков на она што корисникот внесе внатре

680
00:40:34,440 --> 00:40:39,820
Тоа е убаво. Можеме да го користиме тој стринг сега да ја направиме нашата барање.

681
00:40:39,820 --> 00:40:42,450
Ова е нова функција тука, оваа $,

682
00:40:42,450 --> 00:40:44,900
освен ние повеќе нема да биде изборот елементи,

683
00:40:44,900 --> 00:40:48,910
ние ќе се повикуваат различна функција која е предвидено да ни jQuery.

684
00:40:48,910 --> 00:40:54,810
Оваа функција AJAX е она што всушност се случува да се направи овој HTTP барање.

685
00:40:54,810 --> 00:40:57,000
Значи ние треба да го кажам неколку работи.

686
00:40:57,000 --> 00:41:01,410
Првото нешто што ние треба да каже на оваа функција е местото каде што сакате барањето да се оди.

687
00:41:01,410 --> 00:41:08,910
Некаде во мојот проект имам оваа датотека внатрешноста на HTML директориумот наречен quote.php.

688
00:41:08,910 --> 00:41:15,150
Можам да пристапите до оваа датотека, видовме, само вака, ако одам на локалниот компјутер / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Сакам моите JavaScript за да направи барање на оваа страница.

690
00:41:20,450 --> 00:41:22,920
Каков вид на барање сега?

691
00:41:22,920 --> 00:41:27,210
Видовме пред тоа во форма има тој метод = "пост" атрибут,

692
00:41:27,210 --> 00:41:29,270
а тоа значи дека ќе направи еден пост барање,

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 барањето

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
Не само што може да има ints или низи како вредност во внатрешноста на асоцијативна низа,

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
и јас сакам да го поставите содржината на таа div да биде она на серверот ни испрати назад.

741
00:44:26,640 --> 00:44:30,280
Јас сум всушност изменета quote.php малку.

742
00:44:30,280 --> 00:44:33,460
>> Наместо нарекувајќи рендерирање и прикажување на некои страница,

743
00:44:33,460 --> 00:44:38,100
quote.php сега е едноставно се случува да се печати вредноста на акциите како стринг.

744
00:44:38,100 --> 00:44:41,880
Значи, ако сте во ситуација да всушност ја посетите страницата, само ќе видите дека малите низа

745
00:44:41,880 --> 00:44:45,030
на она што цената на акциите е.

746
00:44:45,030 --> 00:44:50,170
Едно последно нешто што треба да направите тука е само бидете сигурни дека оваа функција враќа false.

747
00:44:50,170 --> 00:44:53,560
Што ова кажува е дека ако јас сум во внатрешноста на еден настан управувачот

748
00:44:53,560 --> 00:44:57,300
и тој настан управувачот се враќа false наместо враќање вистина,

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 и кликнете Get Изрека.

764
00:45:52,890 --> 00:45:56,720
Сега видовме дека дел од Епл чини околу бројот на долари

765
00:45:56,720 --> 00:46:00,410
само се појави на страницата, но URL не се промени на сите.

766
00:46:00,410 --> 00:46:04,570
Всушност, тука е HTTP барање дека ние само го направи.

767
00:46:04,570 --> 00:46:09,980
Ние направивме POST барањето до quote.php. Тоа има смисла.

768
00:46:09,980 --> 00:46:12,800
Тоа е она што на серверот ни испрати назад.

769
00:46:12,800 --> 00:46:16,320
Тоа веќе не оваа гигантска HTML документ со слики и работи како што,

770
00:46:16,320 --> 00:46:20,920
тоа е само линија на текстот, а потоа ние едноставно се прикажани линија на текстот.

771
00:46:20,920 --> 00:46:26,290
Ако се вратиме на заглавија и да видиме што всушност пратени во внатрешноста на ова барање HTTP,

772
00:46:26,290 --> 00:46:33,950
можеме да видиме овде дека сме испратени заедно со клучот на симбол и вредноста на AAPL,

773
00:46:33,950 --> 00:46:36,430
што е она што корисникот внесе внатре

774
00:46:36,430 --> 00:46:39,230
Ова е убаво, но тоа е уште малку досадни.

775
00:46:39,230 --> 00:46:42,490
Јас се уште треба да кликнете на ова копче за да го добиете акции цитат.

776
00:46:42,490 --> 00:46:45,880
Ние сме зафатени со луѓе и ние немаме време да кликнете на копчињата.

777
00:46:45,880 --> 00:46:49,910
Google реализира ова малку време пред кога тие ги применија Google Инстант.

778
00:46:49,910 --> 00:46:53,590
Што Google Инстант не е како што го пишувате тоа само почнува прикажување на резултатите за Вас

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 Инстант излезе, луѓето беа како, "Леле, ова е супер неверојатен."

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 инстант.

785
00:47:09,000 --> 00:47:13,170
Сите Инстант YouTube не е ефикасно пребарување на YouTube веднаш.

786
00:47:13,170 --> 00:47:17,020
Така, наместо да одат на YouTube.com и хит пребарување,

787
00:47:17,020 --> 00:47:21,650
кога ќе почнете да пишувате во ЈуТјуб инстант нешто како 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 финансии Инстант.

812
00:48:53,150 --> 00:48:55,860
Всушност забава приказна за YouTube Инстант

813
00:48:55,860 --> 00:48:59,420
е дека студентските само вид на го напишал како 1 ноќ проект,

814
00:48:59,420 --> 00:49:03,800
а следниот ден тој беше понудена работа од страна на YouTube извршен директор.

815
00:49:03,800 --> 00:49:10,610
Значи толку едноставно како што, можете CS50 студенти, вашата крајна проекти може да ви работа на YouTube.

816
00:49:10,610 --> 00:49:14,720
Такво нешто е навистина кул идеја за финалниот проект, нели?

817
00:49:14,720 --> 00:49:18,170
Имавме некои постоечки функционалност која сакавме да се интегрираат со.

818
00:49:18,170 --> 00:49:20,330
Ние се подобри корисничкото искуство малку,

819
00:49:20,330 --> 00:49:24,340
и одеднаш бараат нешто на YouTube Инстант може да биде многу полесно

820
00:49:24,340 --> 00:49:27,290
од пребарувањето за тоа на редовна Јутјуб.

821
00:49:27,290 --> 00:49:30,790
Значи тоа е AJAX во мало.

822
00:49:30,790 --> 00:49:34,860
>> Во примерите дека Јосиф бил да ги покажувате, видовме многу autocompletes,

823
00:49:34,860 --> 00:49:39,250
и оние autocompletes се, навистина, навистина корисна, бидејќи ние не треба да се сеќавам -

824
00:49:39,250 --> 00:49:41,770
На пример, ако не се сеќавам на цената на акциите на Apple

825
00:49:41,770 --> 00:49:45,110
а ние само знам дека е аа нешто, отколку само велејќи дека за мене,

826
00:49:45,110 --> 00:49:48,740
"А дел од оваа работа чини ова многу пари"

827
00:49:48,740 --> 00:49:52,540
Јас вид на Би сакал да знам што акции се започне со аа.

828
00:49:52,540 --> 00:49:58,340
Ние можеме да правиме што навистина убаво со подигање библиотека која е веќе вклучена

829
00:49:58,340 --> 00:50:01,380
внатрешноста на CS50 финансии.

830
00:50:01,380 --> 00:50:09,390
Ако дојде до тука за да таг JavaScript и дојдете до Typeahead,

831
00:50:09,390 --> 00:50:13,730
ова е само еден убав додаток дека некој веќе пишуваше за нас,

832
00:50:13,730 --> 00:50:16,980
и можеме лесно да го користите неговата функционалност се допаѓа ова.

833
00:50:16,980 --> 00:50:21,410
Јас ја внеле во А и тука е листа на некои држави што почнуваат со А

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
На подигање документација има голема примери за тоа како точно можам да го направите тоа.

842
00:50:51,020 --> 00:50:54,350
Сакам да кажам "Тука е влез што сакам да AutoComplete на"

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
само некои низа на работи што сакам да AutoComplete натаму.

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, vhosts, globalhost, HTML, шаблони,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Бидејќи тоа е сега се нарекува quote3.js, дозволете ми промена на датотеката вклучите сум вклучувајќи тука.

857
00:51:50,910 --> 00:51:55,110
Сега имам quote3.js, па ќе одам да се вчита во таа посебна вклучите Javascript-датотека,

858
00:51:55,110 --> 00:51:57,910
оној кој вели дека подигање Автоматско комплетирање.

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 линија на кодот кој само рече: "Еве работите што сакате да AutoComplete на"

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
Ова AutoComplete не ја имаат оваа чувство на важност.

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.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Ако се обидам да внесете симбол на страница Yahoo! Финансии

883
00:53:42,100 --> 00:53:52,310
и јас почнете да пишувате GOOG, имам оваа убава листа на работи.

884
00:53:52,310 --> 00:53:57,100
Јасно, тоа изгледа како Yahoo! финансии прави нешто повеќе умен тука.

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
можеме да видиме дека тоа е токму каде што Јаху е испраќање во близина на нејзиниот податоци од.

899
00:54:46,930 --> 00:54:53,400
>> Јас направивме посебен фајл наречен suggest.php тоа е многу слични во духот со пребарување функција.

900
00:54:53,400 --> 00:54:57,730
Тоа е во основа ќе се направи пребарување на URL Јаху, се врати некои податоци,

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
Можам да користам убав релевантност работи Јаху,

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
Тоа значи дека пред тоа, ние едноставно може да каже подигање,

923
00:56:13,330 --> 00:56:15,580
"Тука е листа на работи кои сакам да AutoComplete натаму."

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
За среќа, подигање мислев на ова, бидејќи тие се паметни момци таму,

927
00:56:25,190 --> 00:56:30,160
и тие всушност ни даде уште еден начин да се вчита оваа Typeahead приклучок.

928
00:56:30,160 --> 00:56:35,630
Пред, вредноста на овој извор на имотот е само овој голем спектар на работи кои треба да AutoComplete натаму.

929
00:56:35,630 --> 00:56:39,580
>> Сега извор на имотот е всушност функција,

930
00:56:39,580 --> 00:56:44,580
и целта на оваа функција е да дознаам што работи да AutoComplete на се.

931
00:56:44,580 --> 00:56:48,730
Начинот на кој таа се случува да дознаам дека надвор е дека ќе побара Yahoo! финансии

932
00:56:48,730 --> 00:56:51,750
што најдобро работи кои треба да AutoComplete се.

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
И сега ми успех, подигање документација ми кажа

937
00:57:05,570 --> 00:57:09,130
дека со цел да се населуваат таа листа на нештата,

938
00:57:09,130 --> 00:57:14,370
сите што треба да направите е да помине во оваа низа сега на повратен повик функција.

939
00:57:14,370 --> 00:57:15,660
Но, чекајте.

940
00:57:15,660 --> 00:57:20,240
Ако ова треба да биде низа и AJAX ме испрати назад текст,

941
00:57:20,240 --> 00:57:22,720
како е тоа можно?

942
00:57:22,720 --> 00:57:27,910
Ова се воведува нов начин на размена на податоци наречена JSON.

943
00:57:27,910 --> 00:57:33,000
Во овој случај ние не сме само испраќање назад едноставен низа на текст.

944
00:57:33,000 --> 00:57:37,670
Сега ние сме се занимаваат со оваа покомплексни листа на акции симболи.

945
00:57:37,670 --> 00:57:41,730
Овие акции симболи, исто така може да вклучува работи како името на компанијата или тековни цени.

946
00:57:41,730 --> 00:57:47,550
Само со користење на голем долга низа тоа не е форматирана во било предвидлив начин

947
00:57:47,550 --> 00:57:51,970
е нема да биде најдобар начин да се добие овие податоци од серверот Yahoo до мене

948
00:57:51,970 --> 00:57:54,540
на начин на кој лесно може да се разбере.

949
00:57:54,540 --> 00:58:01,280
JSON е технологија која носи предност на тоа како ние создаваме асоцијативни низи во JavaScript.

950
00:58:01,280 --> 00:58:04,510
Ова изгледа многу како го вклучите Javascript-асоцијативна низа,

951
00:58:04,510 --> 00:58:06,600
и во Всушност, тоа е поради тоа што е.

952
00:58:06,600 --> 00:58:09,710
JSON стои за JavaScript Цел Нотација.

953
00:58:09,710 --> 00:58:15,020
Ова е во основа на договорени формат за пренос на податоци и назад.

954
00:58:15,020 --> 00:58:18,280
Еве овој објект JSON или овој JSON асоцијативна низа

955
00:58:18,280 --> 00:58:21,010
е ме испраќање на некои податоци за курсот.

956
00:58:21,010 --> 00:58:25,110
>> Клучевите од оваа низа се работи како се разбира дека има вредност од cs50,

957
00:58:25,110 --> 00:58:29,140
и овде можеме да видиме дека јас може да има вредност, која е низа.

958
00:58:29,140 --> 00:58:32,730
Јас не треба да ги правите нештата како анализирам од жици и барате запирки

959
00:58:32,730 --> 00:58:35,330
и направи луди работи како што.

960
00:58:35,330 --> 00:58:38,820
Бидејќи ова е прогласена во овој формат JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript и jQuery веќе имаат функции да конвертирате стринг

962
00:58:43,510 --> 00:58:48,140
што личи ова JSON во вистински вклучите асоцијативна низа

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! финансии не, од тој гигантски листа.

983
01:00:06,110 --> 01:00:10,630
Тоа е како јас едноставно може да се доверат оваа AutoComplete приклучок

984
01:00:10,630 --> 01:00:14,280
со некои податоци што не излегува од локална датотека која веќе однапред

985
01:00:14,280 --> 01:00:17,490
но од нешто друго.

986
01:00:17,490 --> 01:00:21,160
Излегува дека ние всушност може да ги искористат предностите на технологијата наречена JSONP,

987
01:00:21,160 --> 01:00:27,420
или JSON со баласт, што ќе се елиминира овој suggest.php посредник.

988
01:00:27,420 --> 01:00:34,010
Но, наместо тоа да го направам, ајде, наместо да ги разгледаме во тоа како можам да се подобри ова уште повеќе.

989
01:00:34,010 --> 01:00:36,040
Навистина ми се допаѓа Typeahead подигање на. Тоа е навистина убаво.

990
01:00:36,040 --> 01:00:39,570
Но, ние сме добивање на добри во JavaScript и ние сакаме да се вид на направите тоа самите себеси,

991
01:00:39,570 --> 01:00:43,870
можеби ги разгледаме во она што овој приклучок може да се прави.

992
01:00:43,870 --> 01:00:46,500
Ајде веќе не ја користат таа Typeahead работа,

993
01:00:46,500 --> 01:00:50,550
и ајде да се обидеме да се направи оваа листа на предложени акции нас самите.

994
01:00:50,550 --> 01:00:53,790
Тука во quote6.php ние ќе започнете на ист начин.

995
01:00:53,790 --> 01:00:58,050
Секој пат кога некој тип нешто, ние сакаме да се направи барање AJAX.

996
01:00:58,050 --> 01:01:01,590
Ова е слично на нашата изворна CS50 финансии Инстант.

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! Финансии.

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 ние concatenated овие големи низи на 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
и сега ние ќе iterate во текот на сите симболи кои беа вратени назад кон нас.

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! Финансии.

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 и сум го дал проект на предлози.

1024
01:02:46,390 --> 01:02:52,520
Слично како ние во собата на содржината на div што ќе се прикаже цената на акциите податоци,

1025
01:02:52,520 --> 01:02:58,600
ние сега само сакате да го поставите на содржината на овој div на она што овој стринг е

1026
01:02:58,600 --> 01:03:00,290
која ги содржи овие симболи.

1027
01:03:00,290 --> 01:03:07,650
Со користење на овој HTML метод, овој предлози променлива, овој стринг е низа на HTML.

1028
01:03:07,650 --> 01:03:13,490
Сакам да се земе дека HTML и стави го во внатрешноста на div наречен предлози.

1029
01:03:13,490 --> 01:03:15,680
Ние само додава нешто на ДОМ сега.

1030
01:03:15,680 --> 01:03:20,360
Додадовме некои нови елементи на ДОМ што ние сега може да се прикаже на оваа страница.

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, ние веќе не имаат тоа подигање AutoComplete,

1034
01:03:34,480 --> 01:03:38,470
но сега имаме оваа листа која ние самите се направени.

1035
01:03:38,470 --> 01:03:43,230
Ова е малку погрда од подигање Typeahead, на пример,

1036
01:03:43,230 --> 01:03:45,580
но тоа не ни дозволуваат да направат една друга работа.

1037
01:03:45,580 --> 01:03:48,660
Кога бевме во потрага во тоа подигање приклучок,

1038
01:03:48,660 --> 01:03:52,590
видовме дека кога ние autocompleted, еден од AutoComplete вредности беше AAPL.

1039
01:03:52,590 --> 01:03:54,820
Тоа не може да биде така корисни.

1040
01:03:54,820 --> 01:03:59,100
Како корисник, не веднаш да го признае сите на симболите на акции.

1041
01:03:59,100 --> 01:04:02,370
Она што јас сум веројатно со поголема веројатност да се признае се вистинските имиња на компанијата.

1042
01:04:02,370 --> 01:04:05,310
Па не би било навистина од голема помош ако наместо велејќи AAPL

1043
01:04:05,310 --> 01:04:07,970
оваа рече нешто како Apple АД

1044
01:04:07,970 --> 01:04:12,240
Бидејќи ние сме валани оваа нас самите, ние навистина лесно да го направите тоа.

1045
01:04:12,240 --> 01:04:17,630
Да се ​​отвори нашата последна понуда датотека тука, па quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Истото. Јас сум само создаде друг PHP датотеката која ќе се врати на нас повеќе отколку само симболи.

1047
01:04:23,200 --> 01:04:25,550
Исто така, ќе ни даде назад имиња на компанијата.

1048
01:04:25,550 --> 01:04:28,150
И така ние сме прави истото. Ние сме прави барање AJAX.

1049
01:04:28,150 --> 01:04:32,370
Откако барањето има завршено, ние ќе треба да се изврши оваа функција овде,

1050
01:04:32,370 --> 01:04:36,520
и оваа функција ќе се изгради голема низа на елементи.

1051
01:04:36,520 --> 01:04:39,520
Но, разликата тука е дека вредноста на овие листи не е само симбол,

1052
01:04:39,520 --> 01:04:45,370
тоа е сега името.

1053
01:04:45,370 --> 01:04:47,070
Значи имаме еден мал проблем.

1054
01:04:47,070 --> 01:04:51,590
Кога ние ги користиме нашите збор, ние треба некако да го положат симбол.

1055
01:04:51,590 --> 01:04:54,950
Ние не може да помине збор нешто како што е Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Ние треба да помине тоа MSFT.

1057
01:04:57,900 --> 01:05:01,640
Кога сме пишување HTML, имаме многу убаво вграден атрибути.

1058
01:05:01,640 --> 01:05:05,440
А можеби се поврзани со него на href или класа.

1059
01:05:05,440 --> 01:05:08,230
Но, она што навистина треба сега е за секој од овие линкови

1060
01:05:08,230 --> 01:05:11,120
да имаат акции симбол поврзани со неа.

1061
01:05:11,120 --> 01:05:14,240
Нема вграден за акции симбол HTML атрибут,

1062
01:05:14,240 --> 01:05:21,010
но за среќа, HTML5 ни овозможува да се создаде нашата сопствена атрибути да биде она што сакаме.

1063
01:05:21,010 --> 01:05:24,620
Велејќи податоци симбол, јас сум воведе нов атрибут

1064
01:05:24,620 --> 01:05:29,350
чие име јас само составен, и ова е во ред затоа што тоа упатувајќи со овие податоци.

1065
01:05:29,350 --> 01:05:34,270
Ние ќе се складира во внатрешноста на таму симбол од акции сега.

1066
01:05:34,270 --> 01:05:39,590
Што значи тоа е дека иако ние сме прикажување на вредноста на името на компанијата

1067
01:05:39,590 --> 01:05:43,380
внатрешноста на нашите AutoComplete, ние сме сè уште сеќавајќи се на симболот

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
Наместо тоа, ние велиме секогаш кога нешто внатре од овој div предлози,

1088
01:07:01,700 --> 01:07:04,080
што се сеќавам е само сад за таа листа,

1089
01:07:04,080 --> 01:07:10,150
ако нешто внатре од овој div е кликнато и има класа на предлог,

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 линк, ова претставува елемент на таа 3rd линк,

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 датотека вклучува датотека вклучите наречен 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
Значи, сега што сакаме да направите е да сакаме да iterate во текот на сите редови

1142
01:10:27,320 --> 01:10:29,240
внатрешноста на нашата маса.

1143
01:10:29,240 --> 01:10:35,630
За да изберете сите редови во нашата маса, дадов таа табела лична карта на табелата портфолио,

1144
01:10:35,630 --> 01:10:39,060
и секој ред е претставена со елемент ТР,

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
Сега сакам да iterate преку таа низа.

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
Оваа функција зема еден аргумент дека е e,

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
Запомнете, ДОМ е хиерархиска дрво,

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 плоштад каде што Мајкрософт има убава објект во потполност се нарекува "nerd" -

1202
01:13:51,540 --> 01:13:53,830
Нова Англија истражувачки и развоен центар.

1203
01:13:53,830 --> 01:13:56,380
Ќе одам таму околу 20:00 Ќе имаат некоја храна.

1204
01:13:56,380 --> 01:13:58,160
Околу 01:00 ќе имаме малку повеќе храна.

1205
01:13:58,160 --> 01:14:02,150
Околу 5:00 ако сте сеуште будна ќе минете во текот IHOP или да ве однесе назад во кампусот.

1206
01:14:02,150 --> 01:14:04,380
Целта не е да се нурне во финалето проекти

1207
01:14:04,380 --> 01:14:06,190
заедно на соучениците на персоналот.

1208
01:14:06,190 --> 01:14:08,280
Потоа неколку дена подоцна е CS50 саем,

1209
01:14:08,280 --> 01:14:10,990
која е навистина значи да се биде можност за вас момци да ја покажат својата работа

1210
01:14:10,990 --> 01:14:12,700
и достигнувања за семестар

1211
01:14:12,700 --> 01:14:15,610
додека триење рамениците едни со други и добивање на чувство за она што сите би го правеле.

1212
01:14:15,610 --> 01:14:17,850
Со тоа, вели, многу благодарение на Томи и на Јосиф,

1213
01:14:17,850 --> 01:14:19,960
и ние ќе се видиме в понеделник.

1214
01:14:19,960 --> 01:14:24,070
 [Аплауз]