1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [9 недеља, наставак]

2
00:00:02,700 --> 00:00:05,160
[Давид Ј. Малан - Универзитет Харвард]

3
00:00:05,160 --> 00:00:07,020
[Ово је ЦС50. - ЦС50.ТВ]

4
00:00:07,940 --> 00:00:13,340
>> Ово је ЦС50. Ово је крај недеље 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
за завршне пројекте, али зато ни за коначних пројекте или након ЦС50

9
00:00:25,610 --> 00:00:29,000
ово је свакако правац у коме модерни софтвер иде.

10
00:00:29,000 --> 00:00:31,770
А ипак то није стварно лако.

11
00:00:31,770 --> 00:00:35,040
У ствари, једна од најтежих ствари које треба урадити је аспект дизајна.

12
00:00:35,040 --> 00:00:38,600
>> На пример, по дизајну ми заправо значи добијање кориснички интерфејс

13
00:00:38,600 --> 00:00:40,420
или корисничко искуство у праву.

14
00:00:40,420 --> 00:00:43,200
Ја претпостављам - а ми знамо из недавног проблем сету

15
00:00:43,200 --> 00:00:45,960
када је неколико вас емитован своје замерке о неком комаду софтвера

16
00:00:45,960 --> 00:00:49,000
или хардвер који вас инфуриатес, било на кампусу или ван -

17
00:00:49,000 --> 00:00:51,930
има доста сајтова тамо, има доста хардвера тамо,

18
00:00:51,930 --> 00:00:53,900
такав је срање.

19
00:00:53,900 --> 00:00:58,730
Али реалност је да измишља ствари које се лако коришћење, али су ипак моћне

20
00:00:58,730 --> 00:01:00,550
је веома тежак изазов.

21
00:01:00,550 --> 00:01:03,680
Дакле, за данас сам питао Јосиф и Томи да ми се придружи овде

22
00:01:03,680 --> 00:01:06,680
тако да можемо да разговарамо, како о дизајн

23
00:01:06,680 --> 00:01:09,090
и какве мисаоних процеса треба кренути кроз главу

24
00:01:09,090 --> 00:01:12,040
када дизајнирате своје завршне пројекте, будућа настојања.

25
00:01:12,040 --> 00:01:15,040
А онда, уз помоћ Томијеву ћемо погледати неке од детаље имплементације.

26
00:01:15,040 --> 00:01:18,440
Како можете имати неку визију на папиру или у вашем уму

27
00:01:18,440 --> 00:01:20,760
које затим можете извршити програмски

28
00:01:20,760 --> 00:01:24,030
користећи неке од технологија и техника управо смо почели да разговарамо о томе,

29
00:01:24,030 --> 00:01:29,080
наиме ЈаваСцрипт и нешто још новије, наиме АЈАКС, асинхрони ЈаваСцрипт.

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

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
На свом путу од врата данас ћете бити у стању да покупи незванични водич за ЦС на Харварду.

38
00:01:54,860 --> 00:01:57,290
Ми ћемо то ставити на канте за смеће ван у висини струка

39
00:01:57,290 --> 00:01:59,750
тако да ако желите да ухватите то и науче нешто више о ЦС

40
00:01:59,750 --> 00:02:02,480
да ће бити ту за вас, како је то било у недељу 0.

41
00:02:02,480 --> 00:02:06,500
Такође, ако желите да нам се придружите на ЦС50 ручак у петак у 1:15 часова,

42
00:02:06,500 --> 00:02:09,800
главе до цс50.нет/лунцх.

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
Први пут сам сазнао о дизајну је у класи овде зове ЦС179.

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
Ми вероватно нисте љубитељи МБТА система.

72
00:03:50,390 --> 00:03:55,560
Ово је метро систем заправо у Лондону, који каже: "Ово дугме није у употреби."

73
00:03:55,560 --> 00:04:00,220
Зашто је уопште тамо? Зашто смо чак брига?

74
00:04:00,220 --> 00:04:02,810
Кад сам био клинац, пошто је технички потковани један у кући,

75
00:04:02,810 --> 00:04:05,050
кад год рачунар би се слупао, моја мама би дошао до мене,

76
00:04:05,050 --> 00:04:07,060
показујући ми овај екран и пита ме шта се десило.

77
00:04:07,060 --> 00:04:09,210
>> Чак ни ја не знам шта то значи.

78
00:04:11,890 --> 00:04:14,700
[Смех] Шта?

79
00:04:16,950 --> 00:04:18,019
[Смех]

80
00:04:18,720 --> 00:04:23,050
Понекад се осећамо као да програмери су само троллинг нас.

81
00:04:23,050 --> 00:04:28,460
Као корисници смо као, "Шта се дешава Неко нам кажеш?".

82
00:04:28,460 --> 00:04:32,140
То све се своди на питање дизајна.

83
00:04:32,140 --> 00:04:34,650
Дизајн, као што можемо видети, не само о естетици,

84
00:04:34,650 --> 00:04:37,230
не ради се о томе како ствари изгледају.

85
00:04:37,230 --> 00:04:41,720
Ми овде видимо да је овај мали поп-уп овде заправо изгледа прилично лепо.

86
00:04:41,720 --> 00:04:45,290
Она има дроп сенке у позадини, има граница радијуса дешава.

87
00:04:45,290 --> 00:04:47,550
То је врста лепо.

88
00:04:47,550 --> 00:04:51,480
То није баш добро осмишљен, јер то није врло корисник пријатан.

89
00:04:51,480 --> 00:04:54,920
Тај мали поп-уп који се појављује заиста не дај било какву информацију

90
00:04:54,920 --> 00:04:58,450
о томе шта се дешава, то ми не говори ништа као корисник

91
00:04:58,450 --> 00:05:01,400
о томе како да се опорави од тог грешке.

92
00:05:01,400 --> 00:05:05,190
Желимо да размишљамо о стварима које дизајн није.

93
00:05:05,190 --> 00:05:06,670
Прво, то није естетика.

94
00:05:06,670 --> 00:05:10,800
Такође, није надев апликацију са тона непотребног функционалности.

95
00:05:10,800 --> 00:05:14,890
Ако сте Тајландски ресторан, вероватно не желите да буде зубар у исто време.

96
00:05:14,890 --> 00:05:17,720
И са Фацебоок Куестионс, а не да се многи људи користе

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

105
00:05:45,970 --> 00:05:48,950
који захтева корисник преузме много кликова доћи до онога што желе,

106
00:05:48,950 --> 00:05:52,580
или да то радимо на неки начин, на пример, Гоогле Инстант, или аутоматско довршавање

107
00:05:52,580 --> 00:05:54,970
који нам омогућава да дођете до наших резултата брже?

108
00:05:54,970 --> 00:05:58,740
Инжењеринг подразумева, као и Томи ће вам показати, заправо гради.

109
00:05:58,740 --> 00:06:01,890
Постоји много врста дизајна.

110
00:06:01,890 --> 00:06:06,070
На пример, ако правите нешто да размести нешто

111
00:06:06,070 --> 00:06:09,770
у земљу трећег света, где нема много струје и толико технологије,

112
00:06:09,770 --> 00:06:11,440
морате да дизајнирате шта изградњи

113
00:06:11,440 --> 00:06:14,210
на начин који лако даје приступ тамошњих људи.

114
00:06:14,210 --> 00:06:18,290
Али шта врсте других дизајнерских решења могу бити

115
00:06:18,290 --> 00:06:21,850
или могу бити укључени у нешто овако?

116
00:06:23,690 --> 00:06:25,660
Да. Видим руку.

117
00:06:25,660 --> 00:06:37,200
[Нечујан ученик одговор] >> реду. Управо тако. Приступачност је једна ствар.

118
00:06:37,200 --> 00:06:40,870
Многи људи не размишљају о томе, "Шта је са мојим корисницима?"

119
00:06:40,870 --> 00:06:43,160
као крајности било спектра.

120
00:06:43,160 --> 00:06:47,770
Имам кориснике који могу да имају сметње у развоју да не размишљам о томе

121
00:06:47,770 --> 00:06:50,590
и ја само размишљам о пројектовању за опште корисника.

122
00:06:50,590 --> 00:06:52,630
Интернет је доступан свима данас,

123
00:06:52,630 --> 00:06:54,870
и ја треба да се изради тих људи, као добро.

124
00:06:54,870 --> 00:06:58,620
Које друге одлуке о дизајну можда правите?

125
00:06:58,620 --> 00:07:00,690
Да. >> [Ученик] трошкова.

126
00:07:00,690 --> 00:07:02,680
Трошкови. Врло добро.

127
00:07:02,680 --> 00:07:08,060
Друга ствар коју смо могли засновати своје одлуке дизајна он су трошак.

128
00:07:08,060 --> 00:07:13,130
Ако смо посао, желите да изгради нешто што не узима пуно трошкова за производњу

129
00:07:13,130 --> 00:07:17,720
али могу продавати у посебно високој цени, или да нам донесем профит.

130
00:07:17,720 --> 00:07:21,540
>> То су све различите врсте дизајна, али када градимо нешто на Интернету

131
00:07:21,540 --> 00:07:25,120
или када градимо нешто што вероватно не кошта толико да се изгради сада,

132
00:07:25,120 --> 00:07:28,630
као интернет апликација - не морате да баци много капитал у њу

133
00:07:28,630 --> 00:07:30,900
како да направимо нешто што заправо ради -

134
00:07:30,900 --> 00:07:33,490
што смо више забринути је корисничко искуство.

135
00:07:33,490 --> 00:07:36,390
Ми то зовемо корисника центрирано дизајн.

136
00:07:36,390 --> 00:07:41,550
У суштини оно што корисник центриран дизајн подразумева се стављање себе у ципеле ваших корисника.

137
00:07:41,550 --> 00:07:44,870
Ако неко пријави за шта градим,

138
00:07:44,870 --> 00:07:48,250
очигледно сам дошао у моју одређену апликацију са циљем на уму,

139
00:07:48,250 --> 00:07:50,280
са задатком желе да се заврши.

140
00:07:50,280 --> 00:07:53,650
А твој посао није само да им помогне да заврши тај задатак

141
00:07:53,650 --> 00:07:57,930
већ да им помогне да заврше тај посао на начин који је ефикасан, интуитиван,

142
00:07:57,930 --> 00:08:01,900
и, као што нека особа каже тамо доступни.

143
00:08:01,900 --> 00:08:03,750
Шта ефикасност значи?

144
00:08:03,750 --> 00:08:08,050
Ефикасност значи колико брзо се моје упутство заврши задатак дати мој интерфејс.

145
00:08:08,050 --> 00:08:11,650
Да ли је потребно много кликова за њих да се са једног места на друго?

146
00:08:11,650 --> 00:08:14,630
Да ли је досадан? Да ли они морају да обављају много задатке који се понављају?

147
00:08:14,630 --> 00:08:17,140
Желимо да тај процес што ефикасније

148
00:08:17,140 --> 00:08:20,070
тако да они не морају да раде такве ствари.

149
00:08:20,070 --> 00:08:24,230
Што се тиче интуитивност, то је, на пример, ако корисник гледа моју интерфејс,

150
00:08:24,230 --> 00:08:27,240
је лако за њих да добијете од места до места?

151
00:08:27,240 --> 00:08:30,390
Да ли је лако за њих да схвате шта они имају да кликнете на мом интерфејсу

152
00:08:30,390 --> 00:08:33,770
како за њих да се постигне циљ или задатак који желе да постигну?

153
00:08:33,770 --> 00:08:37,520
>> И на крају, како је један човек рекао тамо, приступачност је веома важно.

154
00:08:37,520 --> 00:08:39,640
[Мушки говорник] То питању приступачности за ствари као што су визије,

155
00:08:39,640 --> 00:08:42,740
свиђа како сам заправо пројектовати нешто за некога ко је слеп?

156
00:08:42,740 --> 00:08:46,460
О. За људе који не могу да виде на све, ми имамо нешто што се зове екран читаоци.

157
00:08:46,460 --> 00:08:49,070
Оно што треба да урадите је да треба да се изгради свој сајт на начин

158
00:08:49,070 --> 00:08:52,020
да, на пример, поједини технологије оно што ми називамо -

159
00:08:52,020 --> 00:08:53,590
Постоји много ствари које сада.

160
00:08:53,590 --> 00:08:55,660
Мислим да постоје читачи екрана ЈАВС зову.

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
Може ли ми неко рећи о својим искуствима са Цраигслист

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
Колико људи заправо користи Цраигслист? Тона вас.

185
00:10:24,130 --> 00:10:30,960
Постоји прилично лоши начини да се осврнемо на ово, али хајде да погледамо ово.

186
00:10:35,130 --> 00:10:38,970
Која је разлика између имг и ПИЦ? Може ли ми неко рећи?

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
некако Гоогле стилу, где су га одмах ураде.

196
00:11:17,060 --> 00:11:20,440
[Малан] Али не чини као што смо видели до сада их треба физички доставља

197
00:11:20,440 --> 00:11:23,170
притиском Унесите најмање или кликом на дугме?

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
оно што ми зовемо АЈАКС захтев и добити податке назад и филтрирајте резултате моментално.

202
00:11:38,840 --> 00:11:41,340
Постоји тона ствари које су у реду са овим интерфејсом.

203
00:11:41,340 --> 00:11:43,530
[Малан] Да ли тражите Кембриџу?

204
00:11:43,530 --> 00:11:47,030
Има нешто мало аномалију овде где вам је стало Кембриџу

205
00:11:47,030 --> 00:11:54,790
а ти си све Вестфорд, Спринг Хилл, Вест Њутн и слично.

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
[Ученик] На пример, ствар по први пут корисницима који не знају ни шта је Цраигслист

211
00:12:14,630 --> 00:12:17,320
или не знате шта треба да урадите.

212
00:12:17,320 --> 00:12:20,150
Тачно. Дакле, објашњавајући шта је Мооре је на овој страници је важно.

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

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
>> Ово су све врсте заиста ниске виси воће да неко ко спроводи Цраигслист

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
Имамо Мило овамо, који је наш пас маскота са том ЦС50 Бандана.

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
а ви видите њихове вести резултати ничу у вашем вести феед

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-их година - >> [Малан] сам тамо био. >> Био је тамо. [Смех]

280
00:16:25,030 --> 00:16:29,210
Можда се сећате светлећу ГИФ позадине, светлуцаве ствари,

281
00:16:29,210 --> 00:16:31,570
ГеоЦитиес стил врста ствари.

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
Јејл уметност сајт користи имати анимиране ГИФ као своју позадину

285
00:16:39,590 --> 00:16:41,800
и да не можеш прочитати ништа на страници,

286
00:16:41,800 --> 00:16:44,870
али претпостављам да је неко стварно разговарао са њима, а сада је то мало другачије.

287
00:16:44,870 --> 00:16:48,940
[Малан] То је много боље. >> То је много боље, као што можете видети. >> [Малан] О, да.

288
00:16:48,940 --> 00:16:56,020
Баш супер, само - Да. Ок.

289
00:16:56,020 --> 00:17:00,560
>> Део тога је и чинећи вашу страницу вероватно врло минималистички и веома разумљива

290
00:17:00,560 --> 00:17:05,690
тако ствари на страни тока на начин који је веома логично и не сметају једни на друге.

291
00:17:05,690 --> 00:17:11,849
Које друге ствари су добре или лоше о Фацебоок о Фацебоок?

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
Оох, Тимелине.

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
[Малан] Као што сам сада.

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

308
00:18:11,380 --> 00:18:14,560
Дакле, сада зна да сваки пут када сам га ћаскају Знам да ме игнорише.

309
00:18:14,560 --> 00:18:16,880
[Малан] незгодан део сам заправо да га игнорише,

310
00:18:16,880 --> 00:18:21,040
и нисам знао да сам знао да га игноришу. [Смех]

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

312
00:18:24,030 --> 00:18:28,670
Може ли ико овде ми рећи шта би било лоше у томе Фацебоок приватности

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
[Онг] не можете искључите, а то је огромна грешка употребљивости од стране Фацебоока.

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
[Малан] Али понекад те одлуке нису очигледни

338
00:20:00,400 --> 00:20:03,890
јер ви сте нам дали доста корисних повратних информација о различитим апликацијама ЦС50

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
Ох, Боже, поп-уп. Лоше искуство корисника.

420
00:25:14,020 --> 00:25:17,230
Шта се дешава када померите овај клизач?

421
00:25:17,230 --> 00:25:21,010
[Студент] Аутоматске исправке. >> [Онг] Аутоматско ажурирање.

422
00:25:21,010 --> 00:25:23,440
То је нешто што је веома важно.

423
00:25:23,440 --> 00:25:25,380
Пре тога, кад год сте желели да погледате горе лет,

424
00:25:25,380 --> 00:25:28,410
морали сте да ставите у свој унос локације, ваша излазна локацију, притисните Сеарцх,

425
00:25:28,410 --> 00:25:31,190
то би обрадили то и показати своје резултате.

426
00:25:31,190 --> 00:25:34,120
Ако сте желели да промените свој упит, морали бисте да притиснете два пута,

427
00:25:34,120 --> 00:25:39,770
ући у новом упиту од нуле, а онда то урадите изнова и изнова.

428
00:25:39,770 --> 00:25:43,910
Лепа ствар о нечему као што је ово што користи врло [неразумљиво] ствар у средини.

429
00:25:43,910 --> 00:25:46,230
Кад год нешто овако, она пуца искључен захтев

430
00:25:46,230 --> 00:25:48,420
и он вам даје све резултате одмах.

431
00:25:48,420 --> 00:25:51,680
Ова врста непосредне повратне информације је нешто што је невероватно популаран КАЈАК

432
00:25:51,680 --> 00:25:55,910
јер то је заиста лако за мене само да променим свој упит

433
00:25:55,910 --> 00:25:58,890
и да схватим ствари које су око одређеног опсега

434
00:25:58,890 --> 00:26:01,950
без потребе да се иде напред и назад, назад и напред, назад и напред.

435
00:26:01,950 --> 00:26:05,200
Дакле, то су све врсте ствари које желите да мислите о томе када сте дизајнирање веб сајт.

436
00:26:05,200 --> 00:26:08,930
Како могу направити врло ефикасан за моји корисници да иде кроз све они раде на

437
00:26:08,930 --> 00:26:13,010
и доћи до њиховог коначног циља што је брже могуће?

438
00:26:13,010 --> 00:26:16,430
[Малан] А да Јосифовом тачке раније о корисницима не нужно знају шта желе,

439
00:26:16,430 --> 00:26:18,640
на основу онога што ви сада знате о ХТМЛ

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
Ако само знате количину ХТМЛ који је предавао пре

444
00:26:34,100 --> 00:26:39,070
и знате су инпути радио дугмад, поља за потврду, дроп-падови и улаз кутија,

445
00:26:39,070 --> 00:26:43,320
шта би ваш природан избор су за брање датуме?

446
00:26:43,320 --> 00:26:48,670
[Ученик] улаз. >> Улаз. Или можда чак и падајући са свим датумима, зар не?

447
00:26:48,670 --> 00:26:53,170
Тако је и са сложенијим УИ механизама као што је овај на левој страни да бисте могли да имплементирају,

448
00:26:53,170 --> 00:26:55,500
можете направити овај процес много више интуитивно са клизачем

449
00:26:55,500 --> 00:27:01,020
јер време је непрекидан, а људи обично не размишљају о томе у смислу дискретних комаде.

450
00:27:01,020 --> 00:27:04,950
У реду. Посљедња ствар.

451
00:27:04,950 --> 00:27:07,370
Десет употребљивости хеуристике.

452
00:27:07,370 --> 00:27:10,820
Све ствари које смо причали вероватно пасти под једну од ових категорија.

453
00:27:10,820 --> 00:27:14,420
Ако одете на овај линк, који ће бити сајтова на мрежи објављена,

454
00:27:14,420 --> 00:27:18,900
ћете заиста моћи да, како да дизајнирате свој сајт, имајте на уму ове хеуристике

455
00:27:18,900 --> 00:27:21,330
и ова правила палца.

456
00:27:21,330 --> 00:27:26,610
За ваше пројекте, шта ја предлажем да урадите у циљу осмишљавања ваша апликација боље

457
00:27:26,610 --> 00:27:28,850
је да се прво уради прототипова папира.

458
00:27:28,850 --> 00:27:32,150
Када размишљате о својој апликацији, врло брзо скицирати шта желите да изгледа

459
00:27:32,150 --> 00:27:36,230
и уверите се да су све кутије су распоређени на начин који је веома интуитиван за корисника да користе

460
00:27:36,230 --> 00:27:39,820
па чак и покажем ове прототипове папирним вашим пријатељима и почети фокус групе.

461
00:27:39,820 --> 00:27:44,230
Само се 2 или 3 особе заједно и замолите их да само тапните на овим папира прототипова,

462
00:27:44,230 --> 00:27:47,650
и показати им нове екране да види да ли они заиста разумеју шта се дешава.

463
00:27:47,650 --> 00:27:50,680
>> Шта желите да урадите је да им је задатак, мотивисати тај задатак,

464
00:27:50,680 --> 00:27:53,270
и само им дати апликацију и нека га користи.

465
00:27:53,270 --> 00:27:56,530
Не дајте им упутства изван тога.

466
00:27:56,530 --> 00:28:00,920
Хоћеш да се заиста нека интеракцију са апликацијом на начин који вам омогућава да видите

467
00:28:00,920 --> 00:28:03,870
како би га користити ако нисте стајали поред њих.

468
00:28:03,870 --> 00:28:05,250
И то је веома важно.

469
00:28:05,250 --> 00:28:08,780
То ће вам дати много увида да су људи добијају око одређених ствари

470
00:28:08,780 --> 00:28:10,560
на начин на који их нисам намеравају да?

471
00:28:10,560 --> 00:28:14,680
Да ли они користе посебне механизме УИ на екрану

472
00:28:14,680 --> 00:28:17,490
на начин да је некако Хацки?

473
00:28:17,490 --> 00:28:22,020
Нисам имао намеру да они то раде на тај начин.

474
00:28:22,020 --> 00:28:23,940
А када завршите са тим, шта желиш да радиш?

475
00:28:23,940 --> 00:28:26,010
Ваши дизајн стене, зар не?

476
00:28:26,010 --> 00:28:29,600
Шта желите да урадите је да желите да се развију и онда тај процес изнова.

477
00:28:29,600 --> 00:28:32,110
Дакле, показују га са пријатељима када сте га развили, тестирали,

478
00:28:32,110 --> 00:28:36,630
развијају, тестирају, развијају, тестирају, прелазили на даље и напред.

479
00:28:36,630 --> 00:28:39,720
Дизајн је веома итеративан процес у том смислу.

480
00:28:39,720 --> 00:28:43,280
Ви заиста треба да се изгради нешто и онда схвате ствари о томе

481
00:28:43,280 --> 00:28:46,520
да нисте схватити пре и врати и побољша од тога.

482
00:28:46,520 --> 00:28:50,890
Сада, као и за развој делу, то је оно што Томи ће вам показати после паузе

483
00:28:50,890 --> 00:28:53,220
и како би могли да спроведу несто довршавање

484
00:28:53,220 --> 00:28:56,610
на начин који је прилично једноставан.

485
00:28:57,440 --> 00:28:59,550
[Малан] Као Томи поставља овде, онда питање.

486
00:28:59,550 --> 00:29:03,780
Много од најранијих сајтовима - и када Џозеф рекао 1990-их стил сајт,

487
00:29:03,780 --> 00:29:07,640
то је имплементација где ако сте желели да изаберете време почетка и краја времена,

488
00:29:07,640 --> 00:29:10,380
искрено, назад у дан, па чак и на неким сајтовима данас,

489
00:29:10,380 --> 00:29:13,220
начин урадите је да изаберете један сат из падајућег,

490
00:29:13,220 --> 00:29:15,910
изаберете минута од падајућег, можда ПМ изаберете, АМ,

491
00:29:15,910 --> 00:29:17,440
и онда ти да још 3 пута.

492
00:29:17,440 --> 00:29:19,920
И тако са 6 кликова и можда неки скроловања

493
00:29:19,920 --> 00:29:24,000
Ваш корисник може заиста пружити неку врсту датума и / или времена опсег у овом смислу.

494
00:29:24,000 --> 00:29:27,920
>> Дакле, дефинитивно субоптимална а опет тако далеко смо видели никакве изражајне могућности

495
00:29:27,920 --> 00:29:30,330
ни у једном од језика које смо гледали да уради нешто више секси

496
00:29:30,330 --> 00:29:32,620
овако клизачу за време почетка и краја времена.

497
00:29:32,620 --> 00:29:36,290
Али ако помислим на недељу 0, када смо разговарали о Огреби,

498
00:29:36,290 --> 00:29:39,080
тамо није било додаци који само радили одређене ствари.

499
00:29:39,080 --> 00:29:42,700
Управо си стварно имао ове претпоставке, као што су петље и условима и слично.

500
00:29:42,700 --> 00:29:46,910
Тако некако размишљам само веома апстрактно сада, независно од појединостима ХТМЛ,

501
00:29:46,910 --> 00:29:51,260
Шта се стварно дешава са нечим као што је овај старт време и крајње време слајдер?

502
00:29:51,260 --> 00:29:54,960
Када сам померим миша и кликните на тој малој шаргарепе симбола на левој

503
00:29:54,960 --> 00:29:59,220
и почети драггинг, програмски, шта је то што желите да будете у стању да имплементира

504
00:29:59,220 --> 00:30:01,000
да би се то десило?

505
00:30:01,000 --> 00:30:04,920
Која питања, шта Булове изразе желиш да буде у стању да питам?

506
00:30:04,920 --> 00:30:06,930
Шта се заправо дешава? Самми?

507
00:30:06,930 --> 00:30:10,080
[Ученик] Где је положај курсора? >> Добро. Где је положај курсора?

508
00:30:10,080 --> 00:30:11,970
То је нешто што нам је било потребно да изразимо поново у Огреби,

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
у свету Веб, па има ствари попут онцлицк и онкеипресс

512
00:30:22,370 --> 00:30:25,960
и онкеиуп и онмоусеовер и онмоусеоут.

513
00:30:25,960 --> 00:30:29,130
Тако схватају да чак и ове ствари које смо узимали здраво за готово, на Вебу

514
00:30:29,130 --> 00:30:32,190
са сајтовима као што су Фацебоок и Гмаил, чак и ако немају појма

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
са ХТТП и параметрима и ГЕТ и ПОСТ,

518
00:30:41,090 --> 00:30:44,010
са основним ХТМЛ инпута који смо тестирали до сада

519
00:30:44,010 --> 00:30:47,690
и у једном тренутку са програмским механизмима који Томми о томе да уведе

520
00:30:47,690 --> 00:30:51,300
можете почети да се изрази као што сте урадили у недељи 0

521
00:30:51,300 --> 00:30:53,800
је веома интуитивно превлачењем и отпуштањем.

522
00:30:53,800 --> 00:30:58,950
>> Дакле, са тим рекао, Томми МацВиллиам и неке нове делове слагалице за нас Веб.

523
00:30:58,950 --> 00:31:03,450
У реду. Моје име је Томи и ја ћу да причамо о ЈаваСцрипт.

524
00:31:03,450 --> 00:31:07,150
Само дисцлаимер: ја сам мишљења да је ЈаваСцрипт најбољи програмски језик

525
00:31:07,150 --> 00:31:09,010
у целом свету целом.

526
00:31:09,010 --> 00:31:11,940
Постоји много људи који се не слажу са мном, али то је само невероватно.

527
00:31:11,940 --> 00:31:16,330
Када се вратимо на Ц, ако морате да пишете Ц за другу класу или неким другим језицима,

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
само да се вратимо, напишите ЈаваСцрипт. То је нирвана.

531
00:31:25,130 --> 00:31:27,980
Ви ћете се осећати много боље о свом лошем дану.

532
00:31:27,980 --> 00:31:31,900
Много магије ЈаваСцрипт долази из његове способности да манипулише ствари

533
00:31:31,900 --> 00:31:33,730
који су већ на страници.

534
00:31:33,730 --> 00:31:38,520
Када смо писали наше ПХП скрипте, они су погубљени на серверу,

535
00:31:38,520 --> 00:31:42,270
и на крају да ПХП скрипт вероватно резултовати неке ХТМЛ.

536
00:31:42,270 --> 00:31:45,860
То је ХТМЛ шаље клијенту, а онда то је то.

537
00:31:45,860 --> 00:31:50,180
Ако ПХП хтео да додате дугме на страници, на пример, не могу да урадим то.

538
00:31:50,180 --> 00:31:54,350
То би требало да донесе потпуно нови ХТМЛ фајл и посаљите то бровсер.

539
00:31:54,350 --> 00:31:57,840
Са ЈаваСцрипт знамо да можемо ажурирати ствари док су они већ сте на страни,

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
Само брза рекапитулација ЈаваСцрипт селектора.

543
00:32:09,330 --> 00:32:11,590
Ми знамо да када смо преузели ХТМЛ страницу,

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
Када смо радили са базама података у псет 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
Разлика између личне и класе овде је генерално ИД треба да буде јединствена

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
Негде у мојој ХТМЛ тагу имам атрибут зове врста,

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
хајде да причамо мало о АЈАКС.

595
00:35:06,780 --> 00:35:12,270
Ајак је и даље веома тренди акроним који се залаже за асинхрони ЈаваСцрипт и КСМЛ.

596
00:35:12,270 --> 00:35:15,640
Тако се дешава да само КСМЛ је само неки начин представљају податке.

597
00:35:15,640 --> 00:35:20,920
>> Та врста изгубљене популарности недавно, тако да Кс у АЈАКС се не користи све време.

598
00:35:20,920 --> 00:35:26,220
У суштини, оно што АЈАКС нам омогућава да урадите је да ХТТП захтева

599
00:35:26,220 --> 00:35:28,620
из контекста ЈаваСцрипт.

600
00:35:28,620 --> 00:35:32,310
Када смо у нашем веб бровсер и ми навигацију кроз странице и кликнемо на линк,

601
00:35:32,310 --> 00:35:37,790
шта је наш претраживач ће да урадите је да ХТТП захтев год линк да кликнете.

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
да би се нешто деси то ће укључити ХТТП захтев.

605
00:35:50,380 --> 00:35:54,160
Тако је и са АЈАКС можемо направити ове захтеве у име ЈаваСцрипт.

606
00:35:54,160 --> 00:35:57,020
То значи да кад год корисник интерагује са стране или било шта догоди,

607
00:35:57,020 --> 00:36:01,780
ми заправо можемо направити програмску захтев некој другој датотеци ПХП на нашем сајту

608
00:36:01,780 --> 00:36:06,280
или било шта друго и преузимати податке које тај фајл избацује.

609
00:36:06,280 --> 00:36:09,860
Хајде да погледамо пример АЈАКС.

610
00:36:09,860 --> 00:36:16,140
Ово је наш ЦС50 финансија страна са које, надамо се неки од нас су упознати.

611
00:36:16,140 --> 00:36:21,790
Ако гледамо на ХТМЛ стране, ми смо овде да сам додао пар ствари,

612
00:36:21,790 --> 00:36:23,820
од којих сам дао ову форму легитимацију.

613
00:36:23,820 --> 00:36:26,480
Ја сам рекао ид = "форма-цитат".

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
Оно што желим да урадим овде јесте да желим да поправим неки проблем са ЦС50 финансија.

617
00:36:38,960 --> 00:36:41,550
Дакле, ако одемо у финанце.цс50.нет,

618
00:36:41,550 --> 00:36:45,700
сваки пут кад желим да добијем понуду, морам да кликнете на овај Гет дугме цитат,

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
Дакле, оно што ми желимо да урадимо са Ајаксом је уклонити ту корак иде на посебној страници

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
Дакле, нема потребе за мене да одем још целу ХТМЛ страницу,

629
00:37:17,400 --> 00:37:20,670
преузети потпуно нову групу ХТМЛ, можда преузети још неке слике,

630
00:37:20,670 --> 00:37:24,410
неки други ЦСС датотеке само за мене да одговорим на то питање врло једноставно

631
00:37:24,410 --> 00:37:27,810
колико кошта ова акција кошта.

632
00:37:27,810 --> 00:37:31,000
Са АЈАКС можемо направити ово много лакше.

633
00:37:31,000 --> 00:37:36,400
Видимо овде да сам повезивање у ЈаваСцрипт датотеку под називом куоте.јс.

634
00:37:36,400 --> 00:37:40,140
Хајде да стварно отворим тај фајл. Није тамо.

635
00:37:42,610 --> 00:37:45,860
Сви моји ЈаваСцрипт датотека ће се налазити у ХТМЛ

636
00:37:45,860 --> 00:37:47,630
тако да бровсер може да приступи.

637
00:37:47,630 --> 00:37:50,330
Онда имамо посебан директоријум овде за ЈаваСцрипт,

638
00:37:50,330 --> 00:37:54,340
и сада је овде куоте.јс.

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
Ако је ово ЈаваСцрипт је икада изведен пре овај елемент убачен на страници,

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
Овај знак за долар овде значи ја користим библиотеку под називом јКуери.

649
00:38:34,310 --> 00:38:38,570
Овај јКуери библиотека нам дозвољава да користите ове селекторе који смо управо гледали.

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
Дакле, када корисник кликне да дугме Пошаљи или притисне Ентер,

658
00:39:08,890 --> 00:39:11,730
овај догађај ће отпустити.

659
00:39:11,730 --> 00:39:16,390
До скопчавање у ово, ја сада могу надјачати подразумевано понашање обрасца.

660
00:39:16,390 --> 00:39:19,770
Без овог ЈаваСцрипт, форма ће доставити год ПХП фајл

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
Желим да се то деси пре него што одете и покушати да поднесу неку ПХП фајл.

664
00:39:31,140 --> 00:39:32,870
Сада шта желим да урадим?

665
00:39:32,870 --> 00:39:39,270
У овом тренутку желим да користите АЈАКС некако да се учита у ком цена акција јесте.

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
Ако се осврнемо на нашу ХТМЛ, видели смо да смо имали улаз [име = симбол].

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
ћемо звати другачију функцију која је пружена нам је јКуери.

684
00:40:48,910 --> 00:40:54,810
Ова функција је АЈАКС шта је заправо дешава да овај ХТТП захтев.

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
Негде у мом пројекту имам тај фајл унутар ХТМЛ директоријум зове куоте.пхп.

688
00:41:08,910 --> 00:41:15,150
Ја могу да приступе овом датотеку, видели смо, само овако, ако одем у лоцалхост / куоте.пхп.

689
00:41:15,150 --> 00:41:20,450
>> Желим да мој ЈаваСкрипт да поднесу захтев на ту страну.

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
тако да неће ставити ништа у УРЛ-у, него ГЕТ захтев,

694
00:41:32,630 --> 00:41:36,860
што би само бити отпуштен ако само приступити страници са Веб бровсер, на пример.

695
00:41:36,860 --> 00:41:41,260
Сада смо рекли желим да ХТТП ПОСТ захтев

696
00:41:41,260 --> 00:41:44,840
на страници се налази на куоте.пхп.

697
00:41:44,840 --> 00:41:51,490
Када смо достави образац, сећате да смо могли да приступите елементе улазне унутар тог облика

698
00:41:51,490 --> 00:41:54,430
са тим $ _ПОСТ променљиве.

699
00:41:54,430 --> 00:41:58,710
До сада у причи нисмо заправо шаље заједно икаквих података још.

700
00:41:58,710 --> 00:42:00,640
Управо смо рекли да смо прављење АЈАКС захтев

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
то значи да је мој ПХП страница може приступити ове податке са _ПОСТ [$ симбол]

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
Сада смо направили овај ХТТП захтев, наша ПХП датотека је погубљен,

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
и ово је један од заиста кул ствари које можете да урадите са ЈаваСцрипт.

723
00:43:26,910 --> 00:43:31,720
Не само да можете да имате Интс или низове као вредности унутар једног асоцијативног низа,

724
00:43:31,720 --> 00:43:34,170
можемо имати функцију.

725
00:43:34,170 --> 00:43:36,380
Дакле, рекавши успех, ово је мој кључ.

726
00:43:36,380 --> 00:43:38,830
Дебело каже ево вредност,

727
00:43:38,830 --> 00:43:41,810
и сада је вредност то је заправо функција.

728
00:43:41,810 --> 00:43:44,460
Дакле, ми не треба да дају ове функције име по себи.

729
00:43:44,460 --> 00:43:48,820
Ми само можемо рећи да ће то бити нека функција. То ће узети 1 аргумент.

730
00:43:48,820 --> 00:43:51,190
Аргумент за ову функцију ће бити

731
00:43:51,190 --> 00:43:54,460
год сервер нас је послао назад од захтева.

732
00:43:54,460 --> 00:43:57,750
Баш као када је наш претраживач подноси захтев, сервер шаље нешто заузврат

733
00:43:57,750 --> 00:43:59,060
и прегледач приказује,

734
00:43:59,060 --> 00:44:03,030
у контексту АЈАКС смо управо направио захтев, сервер шаље нешто назад,

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
Желим да изаберете елемент са ИД цени.

739
00:44:17,570 --> 00:44:20,710
Ово је само празна див који сам направио на страници,

740
00:44:20,710 --> 00:44:26,640
и желим да поставите садржај тог див буде шта год сервер нас је послао назад.

741
00:44:26,640 --> 00:44:30,280
Заправо сам пут куоте.пхп мало.

742
00:44:30,280 --> 00:44:33,460
>> Уместо позивања рендер и пружање неку страницу,

743
00:44:33,460 --> 00:44:38,100
куоте.пхп сада једноставно иде да одштампате вредност акција као ниске.

744
00:44:38,100 --> 00:44:41,880
Дакле, ако сте били да се заиста посети страницу, можете само да видите ту малу жицу

745
00:44:41,880 --> 00:44:45,030
било какве цена акција јесте.

746
00:44:45,030 --> 00:44:50,170
И последња ствар коју морамо да урадимо је само да ли ова функција враћа фалсе.

747
00:44:50,170 --> 00:44:53,560
Шта ово каже је да ако сам унутра сам неког догађаја руковалац

748
00:44:53,560 --> 00:44:57,300
и тај догађај руковалац враћа лажно уместо враћања истина,

749
00:44:57,300 --> 00:45:01,510
то значи да не желим оригинални догађај да пуца.

750
00:45:01,510 --> 00:45:05,270
У том случају, ако нисмо имали и ЈаваСцрипт смо поднели образац,

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
Зато смо користите АЈАКС сада, нема потребе да се пошаље корисника на другу страну.

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
Запамтите, ако смо отворили картицу Нетворк, ово је место где можемо да видимо све ХТТП захтева

762
00:45:44,590 --> 00:45:47,570
који се дешава на страници.

763
00:45:47,570 --> 00:45:52,890
>> За симбол дозволите ми да откуцате ААПЛ и кликните Гет Цитат.

764
00:45:52,890 --> 00:45:56,720
Сада смо видели да удео Аппле кошта нешто више од долара

765
00:45:56,720 --> 00:46:00,410
Управо се појавио на страници, али УРЛ адреса није променио уопште.

766
00:46:00,410 --> 00:46:04,570
У ствари, овде је ХТТП захтев који смо управо направили.

767
00:46:04,570 --> 00:46:09,980
Ми смо направили ПОСТ захтев куоте.пхп. То има смисла.

768
00:46:09,980 --> 00:46:12,800
То је оно што нас је послао сервер назад.

769
00:46:12,800 --> 00:46:16,320
То више није тај гигантски ХТМЛ документ са сликама и слично,

770
00:46:16,320 --> 00:46:20,920
то је само линија текста, и онда ми само приказује линију текста.

771
00:46:20,920 --> 00:46:26,290
Ако се вратимо на заглавља и видети шта смо заправо послали унутар овог ХТТП захтева,

772
00:46:26,290 --> 00:46:33,950
можемо видети овде који смо послали дуж кључу симбола и вредности ААПЛ,

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
Гоогле схватио ово мало пре када они спроводе Гоогле Инстант.

778
00:46:49,910 --> 00:46:53,590
Шта Гоогле инстант ради је као куцате само почиње приказивање резултата за вас

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
Након што Гоогле Инстант изашао, људи су били у фазону, "Вау, ово је супер невероватна."

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
направио овај сајт под називом ИоуТубе инстант.

785
00:47:09,000 --> 00:47:13,170
Све ИоуТубе Инстант нема ефикасно претраживати ИоуТубе одмах.

786
00:47:13,170 --> 00:47:17,020
Дакле, уместо да иду на ИоуТубе.цом и ударио Сеарцх,

787
00:47:17,020 --> 00:47:21,650
када почнете да куцате у ИоуТубе Инстант нешто попут ЦС50,

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
Да би то урадили ми заправо можемо направити врло једноставно модификацију нашој датотеци куоте.јс.

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
Да би то урадили прво да промените овај догађај из достави кеиуп.

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
Он нема више смисла да приложите овај догађај кеиуп целој форми.

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
Ако се спасе и поново учитате страницу, сада када почнем да куцате ААПЛ

810
00:48:44,800 --> 00:48:50,160
видећете да је цена акција на дну овде се аутоматски завршетка.

811
00:48:50,160 --> 00:48:53,150
Дакле, овде је ЦС50 финансија инстант.

812
00:48:53,150 --> 00:48:55,860
Заправо забавно прича о ИоуТубе Инстант

813
00:48:55,860 --> 00:48:59,420
је да студент некако је написао као 1-ноћ пројекта,

814
00:48:59,420 --> 00:49:03,800
а сутрадан му је понуђен посао у ИоуТубе ЦЕО.

815
00:49:03,800 --> 00:49:10,610
Дакле, једноставно као да сте ЦС50 студенти, ваши коначни пројекти можете добити посао на ИоуТубе.

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
и одједном тражи нешто на ИоуТубе Инстант можда много лакше

820
00:49:24,340 --> 00:49:27,290
него потрази за њом на редовној ИоуТубе.

821
00:49:27,290 --> 00:49:30,790
Дакле, то је АЈАКС укратко.

822
00:49:30,790 --> 00:49:34,860
>> У примерима који показују Јосиф, видели смо доста аутоцомплетес,

823
00:49:34,860 --> 00:49:39,250
и те аутоцомплетес су заиста, заиста згодна јер не морате да памтите -

824
00:49:39,250 --> 00:49:41,770
На пример, ако се не сећате цену залиха за Аппле

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
унутар ЦС50 финансија.

830
00:50:01,380 --> 00:50:09,390
Ако сте дошли овде да ЈаваСцрипт ознаке и дођите до Типеахеад,

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
Хајде прескочи овде да куоте3.јс.

837
00:50:34,890 --> 00:50:37,380
Мој фајл изгледа мало другачије.

838
00:50:37,380 --> 00:50:39,700
Овде доле све моје ствари АЈАКС је исти.

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
Хоћу да кажем: "Ево улаз који желим да довршавање даље"

843
00:50:54,350 --> 00:50:56,640
и ја ћу да позовем ову функцију зове типеахеад,

844
00:50:56,640 --> 00:50:59,730
и да ће да обради све Типеахеад ствари за нас.

845
00:50:59,730 --> 00:51:02,090
То ће иницијализовати листу, он ће учинити све наше филтрирања.

846
00:51:02,090 --> 00:51:06,680
Једина ствар коју треба да знате је шта подаци смо аутоцомплетинг даље.

847
00:51:06,680 --> 00:51:10,480
Тако сам сазнао на овај тастер само читајући документацију и гледа на примерима.

848
00:51:10,480 --> 00:51:14,150
Ако сам му дати кључ извора, вредност овог кључа

849
00:51:14,150 --> 00:51:17,770
само су неки низ ствари које желим да довршавање даље.

850
00:51:17,770 --> 00:51:20,180
Ова променљива је из ове друге датотеке.

851
00:51:20,180 --> 00:51:23,400
Ја отворим симболс.јс.

852
00:51:23,400 --> 00:51:27,980
>> Ово је само симболс.јс ово стварно, стварно велики низ садрже низове

853
00:51:27,980 --> 00:51:32,080
свих ових акција симбола из НАСДАК.

854
00:51:32,080 --> 00:51:42,190
Ако желим да се вратим скочи на ХТМЛ, тако јхарвард, вхостс, глобалхост, ХТМЛ, предлошци

855
00:51:42,190 --> 00:51:45,820
куоте_форм.

856
00:51:45,820 --> 00:51:50,910
Будући да се сада зове куоте3.јс, дозволите ми да промените ЈаваСцрипт фајл сам овде, укључујући.

857
00:51:50,910 --> 00:51:55,110
Сада имам куоте3.јс, па ћу да се учита у том посебном ЈаваСцрипт фајл,

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 линију кода који само рекао: "Овде су ствари које желим да довршавање даље"

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
Може ли ико мисли о било недостатака једноставно аутоцомплетинг на овом великом списку симбола?

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
Да. Сада смо преузимањем овог огромну ЈаваСцрипт фајл и има доста симбола.

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
>> Пре него што дођем до Аппле, можда ће бити потребно још неколико знакова да пронађете оно што тражим.

878
00:53:17,130 --> 00:53:20,420
Ово аутоцомплете нема овај осећај важности.

879
00:53:20,420 --> 00:53:24,400
То ће рећи, "Све што се подудара ћу приказати."

880
00:53:24,400 --> 00:53:30,510
Уместо тога, ја бих некако да се интегришу одређену релевантност у мојим претрагама.

881
00:53:30,510 --> 00:53:36,440
Ако ја одем овамо на Иахоо! финансија, финанце.иахоо.цом,

882
00:53:36,440 --> 00:53:42,100
Ако покушам да унесете симбол на страни Иахоо! финансија

883
00:53:42,100 --> 00:53:52,310
и почнем да куцате ГООГ, имам овај леп списак ствари.

884
00:53:52,310 --> 00:53:57,100
Јасно, то изгледа као Иахоо! Финансије ради нешто паметнији овде.

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
тако да вероватно користи АЈАКС некако да се учитава своје податке.

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
Сада, ако укуцамо у гоо, можемо видети да сам добио нови ХТТП захтев.

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
>> Направио сам посебан фајл под називом суггест.пхп који је веома сличан духу на проналажење функцију.

900
00:54:53,400 --> 00:54:57,730
То је у основи ће направити упит УРЛ Иахоо, врати неке податке,

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
а ја не морам да преузмете ту огромну ЈаваСцрипт фајл.

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
Дакле хтмл, јс. Сада смо у куоте4.

908
00:55:17,360 --> 00:55:22,120
Сада смо се више не користе ту велику листу ЈаваСцрипт фајлова.

909
00:55:22,120 --> 00:55:24,430
Али овде је мала врста дизајна проблема.

910
00:55:24,430 --> 00:55:28,200
Рекли смо да у АЈАКС је асинхрони.

911
00:55:28,200 --> 00:55:31,000
Шта то значи да кад сам направити АЈАКС захтев,

912
00:55:31,000 --> 00:55:36,490
па овде на линији 8, ово је место где је мој АЈАКС захтев је заправо пуцао.

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
"Ево списак ствари хоћу да довршавање даље."

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
и они заправо нам дали још један начин да се учита тај Типеахеад плугин.

928
00:56:30,160 --> 00:56:35,630
Пре тога, вредност овог извора имовине била само овај велики спектар ствари које довршавање даље.

929
00:56:35,630 --> 00:56:39,580
>> Сада извор имовина је у ствари функција,

930
00:56:39,580 --> 00:56:44,580
и сврха ове функције је да схватим шта је оно на довршавање о су.

931
00:56:44,580 --> 00:56:48,730
Начин ће се то схвати је да ће то аск финансије Иахоо!

932
00:56:48,730 --> 00:56:51,750
оно најбоље ствари у довршавање су.

933
00:56:51,750 --> 00:56:54,500
Да бисте то урадили да ћу направити врло сличан АЈАКС захтев.

934
00:56:54,500 --> 00:56:59,010
Ја ћу тражити ову страницу на суггест.пхп.

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
Ако ово треба да буде низ и АЈАКС ме шаље назад текст,

941
00:57:20,240 --> 00:57:22,720
како је то могуће?

942
00:57:22,720 --> 00:57:27,910
Ово уводи нови начин размене података зову ЈСОН.

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
неће бити најбољи начин да се ове податке са сервера Иахоо за мене

948
00:57:51,970 --> 00:57:54,540
на начин који лако могу разумети.

949
00:57:54,540 --> 00:58:01,280
ЈСОН је технологија која користи предности како смо креирали асоцијативне низове у ЈаваСцрипт.

950
00:58:01,280 --> 00:58:04,510
Ово изгледа доста налик на ЈаваСцрипт асоцијативне низу,

951
00:58:04,510 --> 00:58:06,600
и, у ствари, то је зато што јесте.

952
00:58:06,600 --> 00:58:09,710
ЈСОН је скраћеница за ЈаваСцрипт Објецт Нотатион.

953
00:58:09,710 --> 00:58:15,020
То је у основи договорен формат за пренос података и назад.

954
00:58:15,020 --> 00:58:18,280
Ево ово ЈСОН објекат или ово ЈСОН асоцијативног низа

955
00:58:18,280 --> 00:58:21,010
је да ми шаље неке податке о курсу.

956
00:58:21,010 --> 00:58:25,110
>> Тастери овог низа су ствари попут Наравно да има вредност цс50,

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
Јер ово је декларисана у овом ЈСОН формату,

961
00:58:38,820 --> 00:58:43,510
ЈаваСцрипт и јКуери већ имају функције за претварање ниску

962
00:58:43,510 --> 00:58:48,140
који изгледа овако ЈСОН у стварном ЈаваСцрипт асоцијативне низу

963
00:58:48,140 --> 00:58:50,440
да можемо да радимо.

964
00:58:50,440 --> 00:58:56,660
Доинг то је једноставно као рекавши да више није овај фајл, суггест.пхп,

965
00:58:56,660 --> 00:58:59,040
слања ме назад једноставно низ текста,

966
00:58:59,040 --> 00:59:01,950
али знам да ће да ме шаље назад ЈСОН.

967
00:59:01,950 --> 00:59:06,760
То значи да је ЈСОН може конвертовати у ЈаваСцрипт асоцијативног низа.

968
00:59:06,760 --> 00:59:10,830
И тако јКуери, ја бих вас да урадите то за мене.

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
Зато смо рекли да је овде у питању јКуери неку ЈСОН,

972
00:59:19,860 --> 00:59:22,950
јКуери ће бити довољно паметан да каже: "Хтео ЈСОН?"

973
00:59:22,950 --> 00:59:26,890
"Идем да конвертује то у асоцијативним низ за тебе."

974
00:59:26,890 --> 00:59:32,100
Хајде да ствари погледамо на мрежу картици када имамо куоте4.јс.

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
Направио сам пар захтева за суггест.пхп, али сада овај одговор,

978
00:59:45,600 --> 00:59:48,670
него само тетиве, то је ЈСОН.

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
долазе сада из Иахоо! финансија, а не из тог гигантског списка.

983
01:00:06,110 --> 01:00:10,630
Тако сам једноставно да попуните овај АутоЦомплете плугин

984
01:00:10,630 --> 01:00:14,280
са неким подацима који се не долазе са локалног фајл који је већ унапред одређен

985
01:00:14,280 --> 01:00:17,490
али од нечега другог.

986
01:00:17,490 --> 01:00:21,160
Испада да смо ми заправо можемо искористити технологију зове ЈСОНП,

987
01:00:21,160 --> 01:00:27,420
или ЈСОН са поставом, која ће елиминисати тај суггест.пхп посредника.

988
01:00:27,420 --> 01:00:34,010
Али уместо да ради, хајде да уместо тога погледамо како могу побољшати ово још више.

989
01:00:34,010 --> 01:00:36,040
Ја стварно волим Типеахеад боотстрап-а. То је заиста лепо.

990
01:00:36,040 --> 01:00:39,570
Али ми смо све добро ЈаваСцрипт и желимо да мало урадили сами,

991
01:00:39,570 --> 01:00:43,870
Можда погледамо шта овај плугин може да ради.

992
01:00:43,870 --> 01:00:46,500
Хајде више не користе ту Типеахеад ствар,

993
01:00:46,500 --> 01:00:50,550
и хајде да покушамо да ову листу предложених акција сами.

994
01:00:50,550 --> 01:00:53,790
Овде у куоте6.пхп ћемо кренути на исти начин.

995
01:00:53,790 --> 01:00:58,050
Сваки пут врсте неко нешто, желимо да направи АЈАКС захтев.

996
01:00:58,050 --> 01:01:01,590
Ово је слично нашем оригиналном ЦС50 финансија Инстант.

997
01:01:01,590 --> 01:01:05,020
Уместо да захтев куоте.пхп,

998
01:01:05,020 --> 01:01:08,530
сада правите захтев да тај исти фајл као и пре, ово суггест.пхп,

999
01:01:08,530 --> 01:01:12,460
који је само ће да повуче податке из Иахоо! финансија.

1000
01:01:12,460 --> 01:01:19,480
>> Опет, ми смо још увек очекујемо ЈСОН, али сада пошто Типеахеад не ради за нас,

1001
01:01:19,480 --> 01:01:24,850
ми такође треба да пошаљете уз вредност која је унутар постојећег оквира за текст.

1002
01:01:24,850 --> 01:01:28,120
Сада знамо шта треба да питате Финанце Иахоо! за,

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
Да бисте то урадили, много волим у ПХП смо спојени ове велике конце ХТМЛ

1007
01:01:44,850 --> 01:01:48,170
онда их штампа, можемо урадити исту ствар тачно у ЈаваСцрипт.

1008
01:01:48,170 --> 01:01:51,850
Прво ћемо почети са ове ниске зове сугестије,

1009
01:01:51,850 --> 01:01:54,590
и ово је само стринг ће да садржи неке ХТМЛ.

1010
01:01:54,590 --> 01:01:58,320
Желимо да то буде списак ствари, па ћемо кренути са ове листе таг,

1011
01:01:58,320 --> 01:02:03,340
и сада ћемо прелазили преко свих симбола који су враћени назад у нас.

1012
01:02:03,340 --> 01:02:06,500
Запамтите, јер смо рекли дататипе: 'ЈСОН', ово није ниска.

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
и сада овде је симбол који смо се вратили из Иахоо! финансија.

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
Дакле, сада сугестије представља ову малу ХТМЛ фрагмент

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
Да бисте то урадили да сам заправо сам створио нови празан див а ја сам јој дао ИД предлоге.

1024
01:02:46,390 --> 01:02:52,520
Слично смо поставили садржај див који би приказали цена на берзи података,

1025
01:02:52,520 --> 01:02:58,600
ми смо тек сада желите да поставите садржај овог дива на било ово стринг

1026
01:02:58,600 --> 01:03:00,290
која садржи ове симболе.

1027
01:03:00,290 --> 01:03:07,650
Користећи овај ХТМЛ метод, ово сугестије променљива, овај стринг је низ ХТМЛ.

1028
01:03:07,650 --> 01:03:13,490
Хоћу да узмеш тај ХТМЛ и ставио га унутар див зове сугестије.

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
Ако се учитати у куоте6 и сада се вратимо,

1033
01:03:29,110 --> 01:03:34,480
сада када почнем да куцате ААПЛ, више не морамо да боотстрап АутоЦомплете,

1034
01:03:34,480 --> 01:03:38,470
али ми сада имамо овај списак који смо сами направили.

1035
01:03:38,470 --> 01:03:43,230
Ово је мало ружније него боотстрап Типеахеад, на пример,

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

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
Дакле, не би било заиста корисно ако уместо рекавши ААПЛ

1043
01:04:05,310 --> 01:04:07,970
ово је нешто као Аппле Инц

1044
01:04:07,970 --> 01:04:12,240
Зато смо ваљани ово себе, можемо врло лако да урадим.

1045
01:04:12,240 --> 01:04:17,630
Хајде да отворимо нашу последњу датотеку куоте овде, тако куоте7.

1046
01:04:17,630 --> 01:04:23,200
>> Иста ствар. Управо сам створио још једну ПХП фајл који ће се вратити са нама више од симбола.

1047
01:04:23,200 --> 01:04:25,550
Такође ће нам вратити имена компаније.

1048
01:04:25,550 --> 01:04:28,150
И тако радимо исту ствар. Ми прављење АЈАКС захтев.

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
Ми не можемо проћи проналажење нешто Мицрософт Цорпоратион.

1056
01:04:54,950 --> 01:04:57,900
Морамо да прође га МСФТ.

1057
01:04:57,900 --> 01:05:01,640
Када пишемо ХТМЛ, имамо пуно лепих уграђених атрибута.

1058
01:05:01,640 --> 01:05:05,440
Можда повезан са њим хреф или класа.

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
Нема уграђене у ХТМЛ атрибута за симбол акције,

1062
01:05:14,240 --> 01:05:21,010
али срећом, ХТМЛ5 омогућава нам да створимо сопствене атрибуте да буде шта год желимо.

1063
01:05:21,010 --> 01:05:24,620
Говорећи података симбол, ја сам представио нови атрибут

1064
01:05:24,620 --> 01:05:29,350
чије име сам измислио, и то је у реду, јер сам га предговор са овим подацима.

1065
01:05:29,350 --> 01:05:34,270
Ми ћемо чувати унутар тамо симбола из лагеру сада.

1066
01:05:34,270 --> 01:05:39,590
Шта то значи да иако смо приказујући вредност назива компаније

1067
01:05:39,590 --> 01:05:43,380
унутар наше аутоцомплете, ми још увек памти симбол

1068
01:05:43,380 --> 01:05:47,110
која је повезана са сваком предузећу.

1069
01:05:47,110 --> 01:05:50,350
Начин радимо да је унутар самог тог елемента.

1070
01:05:50,350 --> 01:05:52,930
Значи морамо да направимо још једну промену.

1071
01:05:52,930 --> 01:05:57,090
Када смо га кликните сада, морамо да заиста искористе симбола атрибута

1072
01:05:57,090 --> 01:06:00,220
него само његова вредност.

1073
01:06:00,220 --> 01:06:05,010
Ако се вратимо, ми приложили хендлер догађаја за предлоге.

1074
01:06:05,010 --> 01:06:09,280
Кад год неко од ових предлога је сада кликне, желим да урадим нешто.

1075
01:06:09,280 --> 01:06:13,160
Оно што желим да урадите је да промените вредност тог поље за унос.

1076
01:06:13,160 --> 01:06:16,100
Сада желим да подесите ову исту функцију Вал.

1077
01:06:16,100 --> 01:06:21,060
>> Дакле, без икаквих аргумената овај вал функција даје вам оно што је већ у текст,

1078
01:06:21,060 --> 01:06:27,070
али ако се дају ниску, то ће узети ту жицу и ставио га у поље.

1079
01:06:27,070 --> 01:06:28,980
Ја сам свој избор оквир за текст на исти начин.

1080
01:06:28,980 --> 01:06:31,230
То име је симбол унутар форме цитат.

1081
01:06:31,230 --> 01:06:37,540
Сада сам га шаље вредност атрибута података симбола.

1082
01:06:37,540 --> 01:06:41,560
Ова ствар је овде ново, ово $ (тхис).

1083
01:06:41,560 --> 01:06:46,850
Шта се ово односи на јесте елемент који је кликнуо.

1084
01:06:46,850 --> 01:06:50,880
Овде можемо видети да нисмо прикључивање клик догађај

1085
01:06:50,880 --> 01:06:54,690
сваком елементу са класе предлог појединачно.

1086
01:06:54,690 --> 01:06:57,140
Уместо тога, ми приближавамо ово мало другачије.

1087
01:06:57,140 --> 01:07:01,700
Уместо што говоримо кад нешто унутар ове предлоге див,

1088
01:07:01,700 --> 01:07:04,080
што запамтите само контејнер за ту листу,

1089
01:07:04,080 --> 01:07:10,150
ако се нешто унутар тог див се кликне и има класу сугестију,

1090
01:07:10,150 --> 01:07:13,000
Желим да овај догађај на ватру.

1091
01:07:13,000 --> 01:07:17,490
У суштини шта то значи да можемо да урадимо је да можемо поново исту руковаоца догађајем

1092
01:07:17,490 --> 01:07:20,000
за све ствари на листи.

1093
01:07:20,000 --> 01:07:22,080
Дакле, ми не треба да имамо један руковалац догађајем за први елемент

1094
01:07:22,080 --> 01:07:24,550
и другачији догађај руковалац за други елемент.

1095
01:07:24,550 --> 01:07:29,880
Ми већ можемо рећи: "Ја желим исто догађај руковалац да се примењују на све на мом списку."

1096
01:07:29,880 --> 01:07:34,420
Али морамо некако да знате који елемент је кликнуло.

1097
01:07:34,420 --> 01:07:38,450
Овај "ово" кључна реч представља управо то.

1098
01:07:38,450 --> 01:07:42,360
То је објекат који је управо кликне корисник.

1099
01:07:42,360 --> 01:07:47,680
Ако сам кликнуо на 3. везу, ово представља елемент тог 3. линка,

1100
01:07:47,680 --> 01:07:51,670
што значи да могу да добијем свој атрибут, података симбол,

1101
01:07:51,670 --> 01:07:57,760
што знамо је да садржи симбол који је повезан са фирмом само сам кликнуо.

1102
01:07:57,760 --> 01:08:04,550
Ако се вратите на нашу страницу финансија,

1103
01:08:04,550 --> 01:08:08,580
видимо сада да сам једном почнете да куцате нешто слично МСФТ,

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
када смо градећи ту ниску ХТМЛ.

1113
01:08:42,649 --> 01:08:47,870
Овде се види да је овај податак-симбол има вредност МСФТ, што је сјајно.

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
Ако сте користили ЦС50 финансије за време и почнете куповине и продаје много акција,

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
са јКуери и ЈаваСцрипт.

1128
01:09:33,859 --> 01:09:39,189
Ово портфолио.пхп фајл садржи ЈаваСцрипт фајл који се зове портфолио.јс.

1129
01:09:39,189 --> 01:09:41,130
Хајде да погледамо то.

1130
01:09:41,130 --> 01:09:44,890
Дакле хтмл, јс, портфолио.

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
па тхис.вал нам даје оно што је унутар поља за претрагу корисник је тренутно куцањем.

1141
01:10:22,810 --> 01:10:27,320
Дакле, сада оно што желите да урадите је да желимо прелазили преко свих редова

1142
01:10:27,320 --> 01:10:29,240
унутар нашег стола.

1143
01:10:29,240 --> 01:10:35,630
Да бисте изабрали све редове у нашој табели, дао сам ту табелу је ИД табеле портфолија,

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
Сада желим да прелазили преко тог низа.

1148
01:10:47,010 --> 01:10:52,390
Могао бих ти за петљу, али јКуери заправо нам даје леп функцију која се зове "свако".

1149
01:10:52,390 --> 01:10:55,220
Оно што свако ради је сваки има један аргумент,

1150
01:10:55,220 --> 01:10:57,090
а тај аргумент је функција.

1151
01:10:57,090 --> 01:11:02,760
Шта ће то урадите је да ће применити ову функцију сваком елементу унутар ове листе.

1152
01:11:02,760 --> 01:11:05,550
Ова функција узима један аргумент који је е,

1153
01:11:05,550 --> 01:11:10,090
и када је ова функција извршава, ова е ће бити замењен са првом реду,

1154
01:11:10,090 --> 01:11:12,070
онда други ред, а затим и трећи ред.

1155
01:11:12,070 --> 01:11:15,150
На овај начин, то је иста ствар као и ради за петљу

1156
01:11:15,150 --> 01:11:21,360
и онда фигуринг тренутни елемент на основу индекса унутрашњости вашег за петљу.

1157
01:11:21,360 --> 01:11:24,750
На сваком итерације, за сваки од ових елемената у табели,

1158
01:11:24,750 --> 01:11:30,560
Желим да проверим да ли текст елемента - текст ћелије унутар реда -

1159
01:11:30,560 --> 01:11:33,130
одговара оно што тражим.

1160
01:11:33,130 --> 01:11:36,390
Овај велики дуг низ команди је како сам могао да урадим.

1161
01:11:36,390 --> 01:11:40,900
Прво, опет, ово сада односи - јер је унутар нову функцију -

1162
01:11:40,900 --> 01:11:45,020
ово је сада тренутни ред у табели.

1163
01:11:45,020 --> 01:11:47,340
Желим да тренутни ред у табели,

1164
01:11:47,340 --> 01:11:49,950
и ја желим да се све њене деце.

1165
01:11:49,950 --> 01:11:51,940
Запамтите, ДОМ је хијерархијски дрво,

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
Тхе индекОф функција у ЈаваСцрипту не само то.

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
ЈКуери има страшан методе за ове анимације и манипулишући ЦСС својства.

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
Тхе ЦС50 Хацк-ог-међувремену, у неколико недеља.

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
до Кендал тргу на коме Мицрософт има лепу објекат пригодно назван "НЕРД" -

1202
01:13:51,540 --> 01:13:53,830
Њу Ингланд Истраживачко развојни центар.

1203
01:13:53,830 --> 01:13:56,380
Ми ћемо тамо око 8 часова ћемо имати неку храну.

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

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

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
Затим је неколико дана касније је ЦС50 сајам,

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
 [Аплауз]