1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] 第9周，续]

2
00:00:02,700 --> 00:00:05,160
[戴维·J·马兰 - 哈佛大学]

3
00:00:05,160 --> 00:00:07,020
[这是CS50。 -  CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> 这是CS50。这是第9周结束。非常感谢。

5
00:00:13,340 --> 00:00:15,310
最后。第9周。我得到了它。

6
00:00:15,310 --> 00:00:18,590
今天，我们继续我们的谈话Web编程

7
00:00:18,590 --> 00:00:21,660
着眼于最终的项目，而不是因为你必须做一些基于网络的

8
00:00:21,660 --> 00:00:25,610
最终的项目，但因为无论是对最终项目或之后CS50

9
00:00:25,610 --> 00:00:29,000
当然，这是现代软件的方向。

10
00:00:29,000 --> 00:00:31,770
然而，它实际上不是一件容易的事情。

11
00:00:31,770 --> 00:00:35,040
事实上，这样做的最难的事情之一是在设计方面。

12
00:00:35,040 --> 00:00:38,600
>> 例如，通过设计，我们的意思是实际上的用户界面

13
00:00:38,600 --> 00:00:40,420
或用户体验。

14
00:00:40,420 --> 00:00:43,200
我敢说 - 我们知道从最近的问题集

15
00:00:43,200 --> 00:00:45,960
当一些你发表你的抱怨一些的软件

16
00:00:45,960 --> 00:00:49,000
或硬件激怒你，无论在校园内或关闭 - 

17
00:00:49,000 --> 00:00:51,930
有一个网站有很多，有很多的硬件摆在那里，

18
00:00:51,930 --> 00:00:53,900
那种很烂。

19
00:00:53,900 --> 00:00:58,730
但现实情况是，使尚未使用，很容易的事情却是强大的

20
00:00:58,730 --> 00:01:00,550
这是一个非常困难的挑战。

21
00:01:00,550 --> 00:01:03,680
所以，今天我问约瑟夫和Tommy和我一起在这里

22
00:01:03,680 --> 00:01:06,680
这样我们就可以有一个谈话，都设计

23
00:01:06,680 --> 00:01:09,090
和什么样的思维过程，通过你的头开始

24
00:01:09,090 --> 00:01:12,040
当你设计你的最后的项目，你的未来努力。

25
00:01:12,040 --> 00:01:15,040
然后用张宇的帮助下，我们来看看一些实施细节。

26
00:01:15,040 --> 00:01:18,440
在纸上或在你的心中，你怎么能有一些视力

27
00:01:18,440 --> 00:01:20,760
，然后你可以通过编程执行

28
00:01:20,760 --> 00:01:24,030
使用的技术和工艺，我们才刚刚开始议论纷纷，

29
00:01:24,030 --> 00:01:29,080
即JavaScript和更新，即AJAX异步JavaScript的东西。

30
00:01:29,080 --> 00:01:32,950
这使您可以创建更动态的用户界面

31
00:01:32,950 --> 00:01:35,780
逐步从服务器获取越来越多的数据。

32
00:01:35,780 --> 00:01:38,560
因此，我们会看到的那些片段，以及一些今天。

33
00:01:38,560 --> 00:01:41,800
顺便说一句，如果你有兴趣集中在计算机科学

34
00:01:41,800 --> 00:01:45,010
或辅修计算机科学，要知道在本星期五中午

35
00:01:45,010 --> 00:01:48,750
，在Maxwell德沃金221会有一个比萨饼事件

36
00:01:48,750 --> 00:01:50,780
在那里你可以学习一些关于计算机科学。

37
00:01:50,780 --> 00:01:54,860
在您的途中出了门，你就可以在哈佛拿起一个非官方指南CS。

38
00:01:54,860 --> 00:01:57,290
在腰部的高度，我们就会把它放在垃圾桶外

39
00:01:57,290 --> 00:01:59,750
所以，如果你想抓住这个学习一些关于CS，

40
00:01:59,750 --> 00:02:02,480
，会在那里等你，因为它是在0周。

41
00:02:02,480 --> 00:02:06,500
此外，如果你想加入我们的的CS50午餐在本星期五下午1:15，

42
00:02:06,500 --> 00:02:09,800
一头到cs50.net/lunch。

43
00:02:09,800 --> 00:02:13,260
事不宜迟，我给你教学研究员王阳乐。

44
00:02:13,260 --> 00:02:19,190
你好。 [掌声]

45
00:02:19,190 --> 00:02:20,770
谢谢。

46
00:02:20,770 --> 00:02:24,780
我第一次了解设计是一类称为CS179。

47
00:02:24,780 --> 00:02:28,040
>> 当时教授告诉我们另一位教授的故事

48
00:02:28,040 --> 00:02:31,640
谁去酒店使用的水龙头。

49
00:02:31,640 --> 00:02:35,630
谁能告诉我什么2旋钮的左边和右边做呢？

50
00:02:35,630 --> 00:02:39,080
[学生]冷热。 >>冷热。好。

51
00:02:39,080 --> 00:02:41,430
你通常期望，对不对？

52
00:02:41,430 --> 00:02:46,960
这位教授使用的水龙头后要洗澡，他继续使用。

53
00:02:46,960 --> 00:02:51,310
他认为，左，右侧是冷时热，对吗？

54
00:02:51,310 --> 00:02:55,470
但是，任何人都可以告诉我，这实际上是怎样做的呢？

55
00:02:55,470 --> 00:02:58,060
有什么手？

56
00:02:58,060 --> 00:03:01,740
[听不见的学生反应] >>建议是什么？

57
00:03:01,740 --> 00:03:05,860
听不见的学生回应] >>温度？

58
00:03:05,860 --> 00:03:10,460
因此，其中一个控制温度和其他控件？ >> [学生]水压力。

59
00:03:10,460 --> 00:03:12,350
水的压力。好。

60
00:03:12,350 --> 00:03:15,100
这教授走进了这一点，并认为他们所控制的冷，热，

61
00:03:15,100 --> 00:03:21,470
原来是正确的，他认为是热的，所有的方式

62
00:03:21,470 --> 00:03:23,560
因为他想要一个温暖的淋浴。

63
00:03:23,560 --> 00:03:28,100
那么，这些不真正匹配，所以他得到了这个非常有趣的体验

64
00:03:28,100 --> 00:03:31,110
洗了个冷水澡，大家都知道那是什么感觉就像。

65
00:03:31,110 --> 00:03:33,620
这是一个设计缺陷的一个例子。

66
00:03:33,620 --> 00:03:37,040
我的意思是，他期望从水龙头

67
00:03:37,040 --> 00:03:39,420
不匹配的淋浴一下就出来了，

68
00:03:39,420 --> 00:03:41,780
这是一种对他的不幸。

69
00:03:41,780 --> 00:03:44,990
因此，这是一个设计缺陷，在现实生活中发生的一个例子。

70
00:03:44,990 --> 00:03:48,020
但我们看到的，以及各种其他的。

71
00:03:48,020 --> 00:03:50,390
我们很可能不是球迷的MBTA系统的。

72
00:03:50,390 --> 00:03:55,560
这是一个实际上是在伦敦的地铁系统，说，“这个按钮，在不使用”。

73
00:03:55,560 --> 00:04:00,220
为什么是在那里？我们为什么还要在意呢？

74
00:04:00,220 --> 00:04:02,810
当我还是一个孩子的时候，是科技知识的一个房子，

75
00:04:02,810 --> 00:04:05,050
时，电脑会崩溃，我妈来我往，

76
00:04:05,050 --> 00:04:07,060
我这个显示屏幕，问我发生了什么事。

77
00:04:07,060 --> 00:04:09,210
>> 连我自己都不知道这意味着什么。

78
00:04:11,890 --> 00:04:14,700
[笑声]是什么？

79
00:04:16,950 --> 00:04:18,019
[笑声]

80
00:04:18,720 --> 00:04:23,050
有时候，我们感觉像软件开发人员只是曳我们。

81
00:04:23,050 --> 00:04:28,460
作为用户，我们会说，“这是怎么回事？有没有人告诉我们。”

82
00:04:28,460 --> 00:04:32,140
这一切都归结到一个问题的设计。

83
00:04:32,140 --> 00:04:34,650
设计，我们可以看到，是不是纯粹的美学，

84
00:04:34,650 --> 00:04:37,230
它不是关于如何看待事物。

85
00:04:37,230 --> 00:04:41,720
我们在这里看到，这个小弹出窗口，这里其实看起来很不错。

86
00:04:41,720 --> 00:04:45,290
它有一个阴影的背景下，它有边界的半径去。

87
00:04:45,290 --> 00:04:47,550
这是一种相当漂亮。

88
00:04:47,550 --> 00:04:51,480
它的设计非常好，因为它不是非常用户友好。

89
00:04:51,480 --> 00:04:54,920
这一点弹出来了，并没有真正给我任何信息

90
00:04:54,920 --> 00:04:58,450
这是怎么回事，它并没有告诉我任何的用户

91
00:04:58,450 --> 00:05:01,400
如何从这个错误中恢复。

92
00:05:01,400 --> 00:05:05,190
我们要思考的东西，设计是不是。

93
00:05:05,190 --> 00:05:06,670
首先，它不是美学。

94
00:05:06,670 --> 00:05:10,800
它也没有填充您的应用程序有大量的不必要的功能。

95
00:05:10,800 --> 00:05:14,890
如果你是一个泰国餐厅，你可能不希望是一个牙医在相同的时间。

96
00:05:14,890 --> 00:05:17,720
与Facebook的问题，而不是很多人用它

97
00:05:17,720 --> 00:05:21,130
它是不是真的在他们建设的核心。

98
00:05:21,130 --> 00:05:24,200
所以这是很好的想法有关的事情没有这么多的数量

99
00:05:24,200 --> 00:05:26,390
你把你的应用程序，但质量

100
00:05:26,390 --> 00:05:28,910
你如何使这一用户体验更好

101
00:05:28,910 --> 00:05:32,540
通过实际改善后，你已经拥有的东西。

102
00:05:32,540 --> 00:05:37,040
>> 简单地说，设计告诉我们，我们应该建立什么。

103
00:05:37,040 --> 00:05:41,950
例如，如果我们正在建设的东西，让我们寻找的东西，

104
00:05:41,950 --> 00:05:45,970
例如，像谷歌，我们应该做的事情的方式

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
我认为有称为JAWS屏幕阅读器。

161
00:08:55,660 --> 00:08:58,410
很多这些东西靠的是什么，我们称之为区域规则

162
00:08:58,410 --> 00:09:02,010
为了读出给用户的什么本页面上。

163
00:09:02,010 --> 00:09:05,480
对于那些谁也看不出，你需要确保这些屏幕阅读器

164
00:09:05,480 --> 00:09:09,130
实际上可以在页面上的内容和可以实际显示您的用户，

165
00:09:09,130 --> 00:09:13,630
如果你不能看到，至少你还是可以理解的内容在页面上。

166
00:09:13,630 --> 00:09:16,190
是啊。好吧。

167
00:09:16,190 --> 00:09:23,410
够谈论良好的设计。让我们来谈论糟糕的设计。

168
00:09:23,410 --> 00:09:25,220
这些事情，你不应该做的。

169
00:09:25,220 --> 00:09:27,890
谁能告诉我关于他们的经验与Craigslist

170
00:09:27,890 --> 00:09:32,190
和他们认为是如此之大，这样的设计呢？

171
00:09:33,690 --> 00:09:36,430
是。 >> [学生]我觉得有太多的话在一个区域。

172
00:09:36,430 --> 00:09:39,350
太多的话，对不对？完全压倒。

173
00:09:39,350 --> 00:09:42,400
你来到这个网页，你看到一大堆的东西在这里

174
00:09:42,400 --> 00:09:43,860
甚至可能没有对你重要。

175
00:09:43,860 --> 00:09:47,010
例如，你生活在一个国家，不与这封信开始。

176
00:09:47,010 --> 00:09:48,690
比方说，你住在得克萨斯州或什么的。

177
00:09:48,690 --> 00:09:53,790
>> 你必须要在页面滚动的方式去你在的位置。

178
00:09:53,790 --> 00:10:00,320
我是从波士顿来，让我看看在美国马萨诸塞州。美国马萨诸塞州在哪里？

179
00:10:00,320 --> 00:10:03,270
哦，这是正确的。哦，这是波士顿。好吧。

180
00:10:03,270 --> 00:10:09,070
让我们来看看在波士顿。 [笑声]

181
00:10:09,070 --> 00:10:12,250
很压倒性的，对不对？

182
00:10:12,250 --> 00:10:16,400
那边尴尬的事情。 [笑声]

183
00:10:17,320 --> 00:10:19,470
比方说，我在找住的地方。

184
00:10:19,470 --> 00:10:24,130
有多少人实际使用Craigslist的？吨的你。

185
00:10:24,130 --> 00:10:30,960
有非常糟糕的方式来看待这一点，但让我们来看看在这。

186
00:10:35,130 --> 00:10:38,970
img和图片之间的区别是什么？谁能告诉我？

187
00:10:41,350 --> 00:10:42,830
其实是没有什么区别。

188
00:10:42,830 --> 00:10:47,710
他们的意思是完全一样的东西，但由于某种原因，他们有不同的标签。

189
00:10:48,980 --> 00:10:53,560
如果我点击有图片，什么也没有发生在页面上。

190
00:10:53,560 --> 00:10:57,490
其实，我不得不再次单击“搜索”的事情发生。

191
00:10:57,490 --> 00:11:02,430
可能是一个更好的设计决策，可以做有什么？

192
00:11:03,820 --> 00:11:08,030
如果我点击该过滤器，我可能要筛选由特定的行动

193
00:11:08,030 --> 00:11:09,970
或该特定类别。

194
00:11:09,970 --> 00:11:14,450
，而不必再次按​​下搜索，我可能只是自动的过滤

195
00:11:14,450 --> 00:11:17,060
谷歌的风格，他们这样做是瞬间的排序。

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
我们所说的AJAX请求，并返回数据并筛选结果瞬间。

202
00:11:38,840 --> 00:11:41,340
这里有很多的东西，这个接口是错误的。

203
00:11:41,340 --> 00:11:43,530
[马兰]你能搜索剑桥？

204
00:11:43,530 --> 00:11:47,030
有一些异常，在这里你所关心的剑桥

205
00:11:47,030 --> 00:11:54,790
但你要韦斯特福德，春山，西牛顿等。

206
00:11:54,790 --> 00:11:57,930
可能不理想。 >>可能不理想。

207
00:11:57,930 --> 00:12:03,900
我怎么可能能够更好地使用户的体验，对这个特定页面的呢？

208
00:12:03,900 --> 00:12:07,340
是。 >> [学生]说明。

209
00:12:07,340 --> 00:12:09,500
好吧。说明在什么样的意义？

210
00:12:09,500 --> 00:12:14,630
[学生]例如，用户第一次的事情谁也不知道Craigslist是

211
00:12:14,630 --> 00:12:17,320
或者你不知道你应该做的事情。

212
00:12:17,320 --> 00:12:20,150
右。因此，解释什么是Craigslist的在这个页面上是很重要的。

213
00:12:20,150 --> 00:12:23,490
事实上，我们可以告诉用户这个页面实际上是为。

214
00:12:23,490 --> 00:12:27,090
如果我只是访问，我看到一大堆的位置。我什至不知道他们的意思。

215
00:12:27,090 --> 00:12:29,730
但更重要的是，在这个界面，

216
00:12:29,730 --> 00:12:35,530
记得我不得不向下滚动一吨重的东西，找到一个特定的社会

217
00:12:35,530 --> 00:12:37,560
，其实我在乎此。

218
00:12:37,560 --> 00:12:39,820
我可以做一个更快的方法是什么？是。

219
00:12:39,820 --> 00:12:43,290
[学生]划分为东，西部地区。 “好了。

220
00:12:43,290 --> 00:12:47,460
我可以将其划分为多个类别，可以帮助我更快地确定

221
00:12:47,460 --> 00:12:49,820
如何获取到特定的位置。

222
00:12:49,820 --> 00:12:54,510
[学生]将一个下拉列表。 “没错。好吧。

223
00:12:54,510 --> 00:12:58,240
我可以用一个下拉菜单，因为我们有固定的一套东西

224
00:12:58,240 --> 00:13:00,100
我们可以向他们展示在一个下拉菜单。

225
00:13:00,100 --> 00:13:02,240
这样，它不会占用这么大的空间在屏幕上。

226
00:13:02,240 --> 00:13:05,630
，但更重要的是，我们能做些什么呢？

227
00:13:05,630 --> 00:13:09,220
是。 >> [听不见的学生回应] >>你能再说一遍吗？ >> [学生]搜索框。

228
00:13:09,220 --> 00:13:11,260
是啊，一个搜索框。这是伟大的。

229
00:13:11,260 --> 00:13:16,430
实际上，我们可以做的是，如果我们回头看的幻灯片，搜索框。

230
00:13:16,430 --> 00:13:21,520
自动完成。非常简单的方法来搜索的结果，你知道在一组。

231
00:13:21,520 --> 00:13:25,980
如果我开始打字BO，你只要给我所有的结果，BO里面的。

232
00:13:25,980 --> 00:13:29,030
这样，我可以很容易地找到我想去

233
00:13:29,030 --> 00:13:32,390
而不是滚动这真是大名单。

234
00:13:32,390 --> 00:13:37,450
>> 这些是真正的低悬的果实的各种人谁是实施Craigslist的

235
00:13:37,450 --> 00:13:42,500
其实可以做好了很多，其特定的用户在网站上的经验。

236
00:13:42,500 --> 00:13:46,370
好吧。够谈论不良网站。

237
00:13:46,370 --> 00:13:49,410
让我们来谈谈关于Facebook。

238
00:13:50,880 --> 00:13:54,390
当Facebook出来了，特别是Facebook的照片，

239
00:13:54,390 --> 00:13:57,870
有很多的时间可以做同样的事情在其他服务。

240
00:13:57,870 --> 00:14:00,740
他们可以组织您的照片到相册中。

241
00:14:00,740 --> 00:14:03,360
你可以做的是你可以将它们组织成组。

242
00:14:03,360 --> 00:14:06,070
你可以组织他们的日期。你可以做所有这些特别的东西。

243
00:14:06,070 --> 00:14:11,710
但没有人知道是什么原因使Facebook的照片爆炸在被释放的时间吗？

244
00:14:11,710 --> 00:14:15,080
是。 >> [学生]标签。 >>标签。没错。

245
00:14:15,080 --> 00:14:21,300
我们有米洛在这里，谁是我们的狗与CS50头巾的吉祥物。

246
00:14:21,300 --> 00:14:24,810
你可以看到，我们有这个标记功能在中间。

247
00:14:24,810 --> 00:14:28,240
是什么原因使Facebook的照片从可用性的角度来看

248
00:14:28,240 --> 00:14:34,130
是，它实际上允许人通过这涉及到他们的朋友，在他们的照片。

249
00:14:34,130 --> 00:14:37,680
对于Facebook来说，由于他们的网站是特别的社会，

250
00:14:37,680 --> 00:14:40,750
建设这样的社会氛围。

251
00:14:40,750 --> 00:14:42,620
的经验，提高了很多照片

252
00:14:42,620 --> 00:14:46,390
因为实际上，他们可能会说，“这是人与人之间的联系，

253
00:14:46,390 --> 00:14:49,220
这些都是你真正关心的人的照片。“

254
00:14:49,220 --> 00:14:52,200
它是也有几分自恋。

255
00:14:52,200 --> 00:14:54,980
人们喜欢被标记在照片之类的东西。

256
00:14:54,980 --> 00:14:58,510
虽然这并不一定是良好的人性特点，

257
00:14:58,510 --> 00:15:01,910
同时，它是基于良好的设计决策

258
00:15:01,910 --> 00:15:04,860
因为人们真正关心的事情是这样的。

259
00:15:04,860 --> 00:15:07,190
所以这是Facebook的照片。

260
00:15:07,190 --> 00:15:09,800
>> 但是，让我们来谈谈Facebook的更普遍。

261
00:15:09,800 --> 00:15:13,400
我敢肯定，很多人在这里有关于Facebook的意见，

262
00:15:13,400 --> 00:15:16,430
良好的设计决策和糟糕的设计决策。

263
00:15:16,430 --> 00:15:20,270
因此，让我们的发泄很高兴。

264
00:15:23,480 --> 00:15:26,450
来吧。我知道你们使用Facebook。

265
00:15:26,450 --> 00:15:30,970
有人有什么不好说或说些什么好东西。是。

266
00:15:30,970 --> 00:15:35,060
[学生]在新闻源有很多的事情我真的不关心。

267
00:15:35,060 --> 00:15:37,740
新闻源展示了很多的东西，你可能并不关心。

268
00:15:37,740 --> 00:15:41,660
你有朋友在Facebook上，你没有遇见过2年或3年

269
00:15:41,660 --> 00:15:43,860
，你看到的新闻结果雨后春笋般冒出来在你的新闻源

270
00:15:43,860 --> 00:15:45,870
和你真的不关心它。

271
00:15:45,870 --> 00:15:48,700
实际上，Facebook已经作出的努力，使这更好​​的，

272
00:15:48,700 --> 00:15:53,150
他们实际上已经试图把相关的结果的顶部为晚的新闻源

273
00:15:53,150 --> 00:15:58,300
所以你看到的东西，这是有关你或你的亲密朋友的朋友。

274
00:15:58,300 --> 00:16:01,110
还有别的吗？是。

275
00:16:01,110 --> 00:16:06,400
[听不见的学生回应] >>你能再说一遍吗？

276
00:16:06,400 --> 00:16:10,140
[学生]广告是比较不显眼。 “在什么意义？

277
00:16:10,140 --> 00:16:16,370
[听不见的学生反应他们没有屏幕上的光，像旗帜一样。

278
00:16:16,370 --> 00:16:17,760
好吧。这是很好的。

279
00:16:17,760 --> 00:16:25,030
如果你还记得20世纪90年代的互联网 -  >> [马兰]我在那里。 >>，他在那里。 [笑声]

280
00:16:25,030 --> 00:16:29,210
你可能还记得闪烁的GIF背景，闪闪发光的东西，

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
耶鲁大学的艺术网站，用于为背景的GIF动画

285
00:16:39,590 --> 00:16:41,800
你可以不阅读任何页面上，

286
00:16:41,800 --> 00:16:44,870
但我想，居然有人已经告诉过他们，现在它是一个有点不同。

287
00:16:44,870 --> 00:16:48,940
[马兰]这是现在好多了。 >>这是现在好多了，你可以看到。 >> [马兰]哦，是的。

288
00:16:48,940 --> 00:16:56,020
好了，只是 - 是的。好吧。

289
00:16:56,020 --> 00:17:00,560
>> 它也使您的网页可能非常简约，非常理解

290
00:17:00,560 --> 00:17:05,690
这样的事情在页面上流动的方式，这是非常合乎逻辑的，并没有得到对方的方式。

291
00:17:05,690 --> 00:17:11,849
什么样其他的事情是对Facebook的好或坏关于Facebook吗？

292
00:17:11,849 --> 00:17:15,730
让我们在这里有一个设计对话。

293
00:17:19,470 --> 00:17:21,339
哦。在哪里？是啊。

294
00:17:21,339 --> 00:17:25,640
[学生]新的时间线系统允许你搜索的人的个人资料，他们的过去。

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
大P-R开头的单词。 >> [学生]隐私。 >>隐私保护，对不对？

304
00:17:56,780 --> 00:17:59,970
隐私权是一个巨大的用户体验问题。

305
00:17:59,970 --> 00:18:07,190
这是我最讨厌的关于Facebook现在的事情之一。 [笑声]

306
00:18:07,190 --> 00:18:09,000
[马兰]我现在做。

307
00:18:09,000 --> 00:18:11,380
大卫并没有意识到这实际上直到昨天才发生的。

308
00:18:11,380 --> 00:18:14,560
所以，现在他知道，每次我聊他，我知道他一直不理我。

309
00:18:14,560 --> 00:18:16,880
[马兰这种尴尬的分手是我居然无视他，

310
00:18:16,880 --> 00:18:21,040
我不知道他知道我不理他。 [笑声]

311
00:18:21,040 --> 00:18:24,030
隐私是一个巨大的问题。

312
00:18:24,030 --> 00:18:28,670
任何人都可以在这里告诉我什么是对Facebook的隐私可能是坏的

313
00:18:28,670 --> 00:18:32,270
除了事实，他们做这样的事情？

314
00:18:32,270 --> 00:18:37,240
这是什么特别难Facebook的隐私吗？

315
00:18:37,240 --> 00:18:40,340
这是一个引导性的问题。

316
00:18:41,680 --> 00:18:43,930
是。 >> [学生]隐藏你的照片从某些人。

317
00:18:43,930 --> 00:18:46,170
右。没错，隐藏你的照片从某些人。

318
00:18:46,170 --> 00:18:51,290
他们有这样的小，小的右上角的按钮，可以让你切换的隐私照片。

319
00:18:51,290 --> 00:18:56,360
他们的隐私选项很丰富，不同种类的菜单。

320
00:18:56,360 --> 00:18:59,510
>> 他们已经变得好了很多关于它最近，但它使用的情况下

321
00:18:59,510 --> 00:19:04,870
只要你想，以防止你的朋友看到​​照片，

322
00:19:04,870 --> 00:19:08,280
你将不得不去的5个步骤，通过一个非常复杂的过程，像，

323
00:19:08,280 --> 00:19:11,150
让我点击这个链接，现在让我点击了，让我点击了，

324
00:19:11,150 --> 00:19:13,420
让我指定的人可以看到我的照片。

325
00:19:13,420 --> 00:19:17,250
这是在Facebook的部分不是特别好

326
00:19:17,250 --> 00:19:20,530
因为有这么多关于用户体验实际上是给他们的自由

327
00:19:20,530 --> 00:19:22,460
控制哪些人可以看到。

328
00:19:22,460 --> 00:19:25,550
我们称这种用户控制和自由。

329
00:19:25,550 --> 00:19:31,090
如果你还没有让您的用户这样做的方式是有效的，直观的，

330
00:19:31,090 --> 00:19:34,570
那么你的用户体验是不是真的那么伟大的。

331
00:19:34,570 --> 00:19:38,200
 你们想对Facebook说什么吗？

332
00:19:38,700 --> 00:19:41,420
我如何关闭这个功能呢？

333
00:19:41,420 --> 00:19:46,290
[王]您不能关闭这个功能，Facebook的一部分，这是一个巨大的可用性缺陷。

334
00:19:46,290 --> 00:19:49,410
这个功能 - 其实我昨天看着它 - 

335
00:19:49,410 --> 00:19:53,940
这是，你不能做到这一点，或者它非常，非常深的地方埋

336
00:19:53,940 --> 00:19:58,050
Facebook的凹槽，因为我无法弄清楚如何禁用此功能在所有。

337
00:19:58,050 --> 00:20:00,400
[马兰]但有时这些决定并不明显

338
00:20:00,400 --> 00:20:03,890
因为你们已经给了我们很多有用的反馈各种CS50应用

339
00:20:03,890 --> 00:20:05,710
在课程中使用的网站。

340
00:20:05,710 --> 00:20:10,260
我们还没有实现所有的这些要求和建议。

341
00:20:10,260 --> 00:20:14,550
>> 部分，也就是获得这么多的请求，它是时间的函数，

342
00:20:14,550 --> 00:20:17,070
但有时我们只是有意识地决定一样，

343
00:20:17,070 --> 00:20:19,830
“谢谢你的建议，但我们不同意。”

344
00:20:19,830 --> 00:20:24,350
那么，你如何决定你应该做的，如果你的用户认为你应该做的事情

345
00:20:24,350 --> 00:20:28,110
即使你不一定吗？

346
00:20:28,110 --> 00:20:32,360
这是一个微妙的平衡之间其实听你的用户说

347
00:20:32,360 --> 00:20:35,840
，实际上有某种行，你说，

348
00:20:35,840 --> 00:20:37,750
“我们不会做这些用户怎么说。”

349
00:20:37,750 --> 00:20:42,520
特别是，我认为这是由亨利·福特的报价，总结得不错。

350
00:20:42,520 --> 00:20:47,130
“如果我问人们他们想要的东西，他们会说，他们希望更快的马。”

351
00:20:47,130 --> 00:20:51,840
任何人都可以进行排序，梳理出报价的真正意义是什么？

352
00:20:51,840 --> 00:20:56,060
这不只是让用户知道他们想要什么，

353
00:20:56,060 --> 00:20:59,180
但更重要的是 - 

354
00:20:59,180 --> 00:21:02,720
[学生]：他们不知道什么是可能的。

355
00:21:02,720 --> 00:21:06,140
在某种程度上，他们不知道什么是可能的。

356
00:21:07,880 --> 00:21:11,440
戏弄，除了多一点点。你指的是什么？

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
作为排序的最后一个例子的产品，让我们来看看在KAYAK。

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
根据你们现在知道HTML

440
00:26:18,640 --> 00:26:22,780
你有复选框，单选按钮，选择菜单，输入字段和等，

441
00:26:22,780 --> 00:26:26,140
你将如何实现一个飞行的开始时间采摘的概念呢？

442
00:26:26,140 --> 00:26:30,030
>> 这些不同的UI机制，你会用吗？

443
00:26:30,030 --> 00:26:34,100
如果你只是知道以前教过的HTML

444
00:26:34,100 --> 00:26:39,070
你知道的输入单选按钮，复选框，下拉框和输入框，

445
00:26:39,070 --> 00:26:43,320
你会怎样自然的选择已经采摘日期？

446
00:26:43,320 --> 00:26:48,670
[学生]输入。 >>输入。或者甚至下降打倒所有的日期，对不对？

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
10个可用性启发式。

452
00:27:07,370 --> 00:27:10,820
我们谈到的所有的事情可能属于其中一类。

453
00:27:10,820 --> 00:27:14,420
如果你去这个链接，该网站将在网上公布，

454
00:27:14,420 --> 00:27:18,900
你实际上是可以的，当你设计你的网站，让这些启发式记

455
00:27:18,900 --> 00:27:21,330
这些经验法则。

456
00:27:21,330 --> 00:27:26,610
为您的项目，我建议你做什么，以更好地设计你的应用程序

457
00:27:26,610 --> 00:27:28,850
是纸上原型第一。

458
00:27:28,850 --> 00:27:32,150
当你思考你的应用程序时，很快就画出你想要什么它看起来像

459
00:27:32,150 --> 00:27:36,230
并确保所有框都非常直观的用户使用的方式，是配置在

460
00:27:36,230 --> 00:27:39,820
这些纸上的原型，甚至给你的朋友，并开始焦点小组。

461
00:27:39,820 --> 00:27:44,230
只要2人或3人，并要求他们只是利用这些纸上的原型，

462
00:27:44,230 --> 00:27:47,650
，并告诉他们新的屏幕，看看他们是否真正了解这是怎么回事。

463
00:27:47,650 --> 00:27:50,680
>> 你想要做的是给他们的任务，激励，任务，

464
00:27:50,680 --> 00:27:53,270
只是给他们的应用程序，并让他们使用它。

465
00:27:53,270 --> 00:27:56,530
不要给他们超出了指示。

466
00:27:56,530 --> 00:28:00,920
你想真正让他们与您的应用程序进行交互的方式可以让你看到

467
00:28:00,920 --> 00:28:03,870
他们将如何使用它，如果你不站在他们旁边。

468
00:28:03,870 --> 00:28:05,250
这是非常重要的。

469
00:28:05,250 --> 00:28:08,780
这会给你的见解是人四处逛逛特别的东西

470
00:28:08,780 --> 00:28:10,560
的方式，我并没有打算在他们呢？

471
00:28:10,560 --> 00:28:14,680
他们在屏幕上使用特定的UI机制

472
00:28:14,680 --> 00:28:17,490
的方式，是一种哈克？

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
很多最早的网站 - 约瑟夫说，20世纪90年代风格的网站，

487
00:29:03,780 --> 00:29:07,640
它实现，如果你想选择的开始时间和结束时间，

488
00:29:07,640 --> 00:29:10,380
坦率地说，早在一天，甚至在一些网站上的今天

489
00:29:10,380 --> 00:29:13,220
你做到这一点的方法是你从下拉菜单中选择一个小时，

490
00:29:13,220 --> 00:29:15,910
你挑分钟从下拉，也许你选择AM，PM，

491
00:29:15,910 --> 00:29:17,440
你这样做3次以上。

492
00:29:17,440 --> 00:29:19,920
因此，有6次点击，也许一些滚动

493
00:29:19,920 --> 00:29:24,000
您的用户实际上可以提供的日期和/或时间范围，在这个意义上的一些种。

494
00:29:24,000 --> 00:29:27,920
>> 所以肯定是不理想的，但迄今为止，我们没有发现表达能力

495
00:29:27,920 --> 00:29:30,330
在任何语言中，我们已经看到在做一些性感的

496
00:29:30,330 --> 00:29:32,620
这样的滑块的开始时间和结束时间。

497
00:29:32,620 --> 00:29:36,290
但是，如果你觉得回到了0周当我们谈到划痕，

498
00:29:36,290 --> 00:29:39,080
也有不小工具，只是做了某些事情。

499
00:29:39,080 --> 00:29:42,700
你真的只循环和条件等，有这些基本一样。

500
00:29:42,700 --> 00:29:46,910
因此，种只是想现在非常抽象的，独立的HTML的详情，

501
00:29:46,910 --> 00:29:51,260
什么是真正的开始时间和结束时间滑块这样的东西吗？

502
00:29:51,260 --> 00:29:54,960
当我将我的鼠标和我点击那个小胡萝卜符号的左边

503
00:29:54,960 --> 00:29:59,220
并开始拖动，编程，什么是你想成为能够实现

504
00:29:59,220 --> 00:30:01,000
要做到这一点呢？

505
00:30:01,000 --> 00:30:04,920
什么样的问题，你想要什么布尔表达式可以要求吗？

506
00:30:04,920 --> 00:30:06,930
到底发生了什么？萨米？

507
00:30:06,930 --> 00:30:10,080
[学生]光标的位置在哪里？ >>好。光标的位置在哪里？

508
00:30:10,080 --> 00:30:11,970
这是我们需要表达在Scratch的东西，

509
00:30:11,970 --> 00:30:14,690
无论是基于位置，甚至色彩等。

510
00:30:14,690 --> 00:30:18,410
您可能还记得曾经周一短暂，所有这些事情称为事件

511
00:30:18,410 --> 00:30:22,370
在世界上的Web等方面存在的东西，如onclick和的OnKeyPress

512
00:30:22,370 --> 00:30:25,960
和onKeyUp和onmouseover和onmouseout。

513
00:30:25,960 --> 00:30:29,130
因此，实现，即使这些事情，我们已经为在Web上授予

514
00:30:29,130 --> 00:30:32,190
即使你不知道的网站，如Facebook和Gmail，

515
00:30:32,190 --> 00:30:34,890
你将如何可能实现，因为没有什么甚至喜欢在课堂上

516
00:30:34,890 --> 00:30:38,570
或习题集，实现这些相同的基础，

517
00:30:38,570 --> 00:30:41,090
HTTP和参数，GET和POST，

518
00:30:41,090 --> 00:30:44,010
我们已经看到在迄今为止的基本HTML输入

519
00:30:44,010 --> 00:30:47,690
在某一时刻的编程机制，汤米的介绍

520
00:30:47,690 --> 00:30:51,300
你可以开始表达自己，就像你在0周

521
00:30:51,300 --> 00:30:53,800
通过非常直观的拖放。

522
00:30:53,800 --> 00:30:58,950
>> 所以说，汤米MacWilliam我们对Web和一些新的拼图。

523
00:30:58,950 --> 00:31:03,450
好的。我的名字是汤米和我将要讨论关于JavaScript的。

524
00:31:03,450 --> 00:31:07,150
只是一个声明：我认为JavaScript是最好的编程语言

525
00:31:07,150 --> 00:31:09,010
整个世界。

526
00:31:09,010 --> 00:31:11,940
有很多人不同意我的，但它是令人惊异的。

527
00:31:11,940 --> 00:31:16,330
一旦你回到C，如果你有另一个类或一些其他语言编写C，

528
00:31:16,330 --> 00:31:19,780
这是在所有的低级别的细节，你真的令人沮丧的陷入英寸

529
00:31:19,780 --> 00:31:23,050
所以，如果你曾经感到伤心，恼人的C是如何写的，

530
00:31:23,050 --> 00:31:25,130
刚回去，编写一些JavaScript。它的必杀技。

531
00:31:25,130 --> 00:31:27,980
您的糟糕的一天，你会感觉好多了。

532
00:31:27,980 --> 00:31:31,900
来自很多神奇的JavaScript来处理事情的能力

533
00:31:31,900 --> 00:31:33,730
已经在页面上。

534
00:31:33,730 --> 00:31:38,520
当我们说我们的PHP脚本，他们在服务器上执行，

535
00:31:38,520 --> 00:31:42,270
PHP脚本，并最终可能一些HTML输出。

536
00:31:42,270 --> 00:31:45,860
这个HTML发送到客户端，然后，就是这样。

537
00:31:45,860 --> 00:31:50,180
如果PHP的页面上添加一个按钮，例如，它不能真正做到这一点。

538
00:31:50,180 --> 00:31:54,350
它必须提供一个全新的HTML文件并将其发送到浏览器。

539
00:31:54,350 --> 00:31:57,840
使用JavaScript，我们知道，我们可以更新的东西，而他们已经在页面上，

540
00:31:57,840 --> 00:32:00,840
正因为如此，我们可以提供更即时的反馈，

541
00:32:00,840 --> 00:32:06,150
这将真正提高我们的网站上的用户体验。

542
00:32:06,150 --> 00:32:09,330
快速回顾一下JavaScript的选择。

543
00:32:09,330 --> 00:32:11,590
我们知道，当我们下载一个HTML页面，

544
00:32:11,590 --> 00:32:13,890
中的DOM表示的。

545
00:32:13,890 --> 00:32:19,340
>> DOM记住的是这棵大树，其中的元素在这个大的层次结构有关。

546
00:32:19,340 --> 00:32:21,810
当我们的工作与资料库在pset中7，

547
00:32:21,810 --> 00:32:26,280
我们需要知道怎么做的第一件事情就是查询数据库。

548
00:32:26,280 --> 00:32:29,060
我们有庞大的用户表，有时我们只想说，

549
00:32:29,060 --> 00:32:33,260
“我只想要一些符合某些条件，这些用户。”

550
00:32:33,260 --> 00:32:36,020
同样，当我们有DOM，我们需要以某种方式查询。

551
00:32:36,020 --> 00:32:39,490
我们需要以某种方式说，“我希望所有的按钮，看起来像这样

552
00:32:39,490 --> 00:32:41,860
“或在页面上的所有图像”。

553
00:32:41,860 --> 00:32:44,330
这些选择使我们能够做到这一点。

554
00:32:44,330 --> 00:32:45,690
因此，只要简单回顾一下。

555
00:32:45,690 --> 00:32:50,770
这第一个，此＃提交，那是要选择吗？有谁还记得吗？

556
00:32:50,770 --> 00:32:54,880
[听不见的学生反应] >>是的，没错。

557
00:32:54,880 --> 00:32:59,510
这是怎么回事，有一个ID的提交页面上选择一个元素。

558
00:32:59,510 --> 00:33:03,470
所以说，这个选择是去工作的ID，散列标签。

559
00:33:03,470 --> 00:33:07,630
的第二个。中心的，究竟会是选择吗？

560
00:33:11,360 --> 00:33:15,180
是啊。 >> [学生]类。 “没错。这是现在要选择的类。

561
00:33:15,180 --> 00:33:18,840
这里的ID和类之间的区别是一般的ID应该是唯一的

562
00:33:18,840 --> 00:33:20,820
内的任何空间，你正在寻找。

563
00:33:20,820 --> 00:33:23,080
所以，如果你正在寻找一个完整的网页，

564
00:33:23,080 --> 00:33:27,740
你真的应该只有1个元素与某些ID，所以在这种情况下，提交。

565
00:33:27,740 --> 00:33:31,330
另一方面，随着类，我们可以在同一页上有超过1元

566
00:33:31,330 --> 00:33:33,130
具有相同的类。

567
00:33:33,130 --> 00:33:36,580
这可能是有用的说，我要选择在页面上居中的一切

568
00:33:36,580 --> 00:33:38,450
，而不是仅仅的事情。

569
00:33:38,450 --> 00:33:40,310
>> 最后，这最后一个在这里是一个更复杂一点，

570
00:33:40,310 --> 00:33:43,890
但是这是什么要选择的DOM呢？

571
00:33:46,650 --> 00:33:48,810
[听不见的学生回应] >>那是什么？

572
00:33:48,810 --> 00:33:53,250
[学生]这是一个标签的东西。 >>在这里，我们有2个部分。

573
00:33:53,250 --> 00:33:58,070
第二部分是说我要选择一个标签，输入标签，

574
00:33:58,070 --> 00:34:00,730
因此，任何元素，这是一个输入标签。

575
00:34:00,730 --> 00:34:03,080
但我不想只选择所有的输入

576
00:34:03,080 --> 00:34:05,170
可能是因为像一个提交按钮输入

577
00:34:05,170 --> 00:34:08,409
像一个文本框，可以输入。

578
00:34:08,409 --> 00:34:11,909
因此，这些方括号我说我只需要选择这些元素

579
00:34:11,909 --> 00:34:14,110
，文本类型。

580
00:34:14,110 --> 00:34:17,400
在我的HTML标记中的某个地方，我有一个属性的类型，

581
00:34:17,400 --> 00:34:19,750
该属性的值是文本。

582
00:34:19,750 --> 00:34:21,340
因此，如何对这里的第一部分？

583
00:34:21,340 --> 00:34:25,489
这个选择的第一个字是形式，那么我有一个空格，然后输入部分。

584
00:34:25,489 --> 00:34:29,620
这是什么做的，把它前面的表格中？

585
00:34:33,409 --> 00:34:35,860
这是从根本上限制了我们的查询。

586
00:34:35,860 --> 00:34:38,510
这可能是，我们有一些在网页上输入的情况下

587
00:34:38,510 --> 00:34:41,080
是不是一种形式的后裔。

588
00:34:41,080 --> 00:34:46,150
这将是本会说我只希望有地方在他们之上的输入标签

589
00:34:46,150 --> 00:34:49,030
一些父元素的一种形式。

590
00:34:49,030 --> 00:34:52,100
因此，在这种方式中，我们可以使这些多层次的查询

591
00:34:52,100 --> 00:34:55,000
所以我们不仅要选择所有匹配给定的选择。

592
00:34:55,000 --> 00:35:00,760
我们种的范围限制在该查询别的东西。

593
00:35:00,760 --> 00:35:04,000
所以，现在我们知道如何选择页面上的元素，

594
00:35:04,000 --> 00:35:06,780
让我们来谈谈一些关于AJAX。

595
00:35:06,780 --> 00:35:12,270
AJAX是一个仍然非常时髦的缩写，异步JavaScript和XML。

596
00:35:12,270 --> 00:35:15,640
碰巧的是，XML仅仅是一些数据的方式来表示。

597
00:35:15,640 --> 00:35:20,920
>> 最近丢失了大众化的那种，所以AJAX中的X是没有用的全部时间。

598
00:35:20,920 --> 00:35:26,220
基本上，AJAX允许我们做的是HTTP请求

599
00:35:26,220 --> 00:35:28,620
从上下文的JavaScript。

600
00:35:28,620 --> 00:35:32,310
当我们在我们的网页浏览器，我们导航页面，我们点击一​​个链接，

601
00:35:32,310 --> 00:35:37,790
我们的浏览器是什么做的是使一个HTTP请求到我们点击任何链接。

602
00:35:37,790 --> 00:35:41,670
但是，这并不总是理想的，因为如果是这样的话，那么像大卫说，

603
00:35:41,670 --> 00:35:45,220
我们总是有让用户单击Submit按钮，或单击一个链接

604
00:35:45,220 --> 00:35:50,380
为了让任何事情发生，会涉及到一个HTTP请求。

605
00:35:50,380 --> 00:35:54,160
因此，AJAX，我们就可以提出这些要求，代表的JavaScript。

606
00:35:54,160 --> 00:35:57,020
这意味着无论何时与用户交互的页面或发生任何事情，

607
00:35:57,020 --> 00:36:01,780
在我们的网站上，我们实际上可以使一个纲领性的其他一些PHP文件的要求

608
00:36:01,780 --> 00:36:06,280
或其他任何东西和检索数据，该文件吐出来。

609
00:36:06,280 --> 00:36:09,860
让我们来看看在AJAX的一个例子。

610
00:36:09,860 --> 00:36:16,140
这是我们的CS50财经页面，希望我们中的一些人熟悉。

611
00:36:16,140 --> 00:36:21,790
如果我们看一下这个页面的HTML中，我们看到这里，我添加了几件事情，

612
00:36:21,790 --> 00:36:23,820
其中一个我已经给这种形式的ID。

613
00:36:23,820 --> 00:36:26,480
我已经说过的id =“形式引号”。

614
00:36:26,480 --> 00:36:31,910
我这样做只是因为它的DOM，这是一个有点更容易选择

615
00:36:31,910 --> 00:36:35,090
因为我可以做一个很简单的查询。

616
00:36:35,090 --> 00:36:38,960
我想在这里做的是与CS50融资，我想解决一些问题。

617
00:36:38,960 --> 00:36:41,550
因此，如果我们去到finance.cs50.net，

618
00:36:41,550 --> 00:36:45,700
每次我想要得到的报价，我点击获取报价“按钮，

619
00:36:45,700 --> 00:36:48,960
获取报价按钮，然后带我到另一个整页。

620
00:36:48,960 --> 00:36:52,400
如果我想其他报价，我需要点击“返回”按钮，然后我输入的，

621
00:36:52,400 --> 00:36:54,480
我得到的报价，和我打“后退”按钮。

622
00:36:54,480 --> 00:36:56,840
这真的是不是最好的用户体验。

623
00:36:56,840 --> 00:37:01,570
谁真正使用的网站，如果它是很慢的股票价格得到吗？

624
00:37:01,570 --> 00:37:05,630
所以我们想要做的与AJAX是，要一步一个单独的页面中移除

625
00:37:05,630 --> 00:37:08,410
以查看结果。

626
00:37:08,410 --> 00:37:11,240
>> 我们真正唯一的要求是非常小的价格，

627
00:37:11,240 --> 00:37:14,240
这只是一个非常小的数据量。

628
00:37:14,240 --> 00:37:17,400
因此，有没有需要我去另一个HTML页面，

629
00:37:17,400 --> 00:37:20,670
下载一个HTML一批新的，也许更多图片下载，

630
00:37:20,670 --> 00:37:24,410
其他一些CSS文件就由我来回答，很简单的问题

631
00:37:24,410 --> 00:37:27,810
此股票成本多少。

632
00:37:27,810 --> 00:37:31,000
随着AJAX，我们可以轻松了许多。

633
00:37:31,000 --> 00:37:36,400
我们看到，在这里，我在一个JavaScript称为quote.js的文件链接。

634
00:37:36,400 --> 00:37:40,140
我们的实际打开该文件。不存在。

635
00:37:42,610 --> 00:37:45,860
我的所有的JavaScript文件都位于HTML

636
00:37:45,860 --> 00:37:47,630
因此，在Web浏览器可以访问它。

637
00:37:47,630 --> 00:37:50,330
然后，我们在这里为JavaScript有一个单独的目录，

638
00:37:50,330 --> 00:37:54,340
现在这里是quote.js。

639
00:37:54,340 --> 00:38:00,930
在该文件的顶部说，在这里，我要等待整个页面被加载

640
00:38:00,930 --> 00:38:04,830
之前，我尝试做任何事情。为什么是必要的？

641
00:38:04,830 --> 00:38:08,650
事实证明，我要在这里做的是接下来的事情开始寻找一个元素

642
00:38:08,650 --> 00:38:10,810
一些选择相匹配的。

643
00:38:10,810 --> 00:38:15,600
如果这个JavaScript执行前加载此元素在页面上，

644
00:38:15,600 --> 00:38:17,820
然后我尝试做的一切是行不通的，

645
00:38:17,820 --> 00:38:20,580
因为我要选择的东西，现在还没有。

646
00:38:20,580 --> 00:38:23,780
因此，这条线往上顶说，我要你等待，直到一切都加载

647
00:38:23,780 --> 00:38:28,030
这样，我们就保证了我在寻找任何元素，实际上是在页面上。

648
00:38:29,730 --> 00:38:34,310
这个美元符号在这里我使用的是称为jQuery的库。

649
00:38:34,310 --> 00:38:38,570
这个jQuery库使我们能够利用这些选择，我们只是看着。

650
00:38:38,570 --> 00:38:44,010
说作为一个参数传递形式引号，

651
00:38:44,010 --> 00:38:47,910
我现在选择的形式，我们只是看了看。

652
00:38:47,910 --> 00:38:52,290
现在我有一个不知何故，在内存中表示。

653
00:38:52,290 --> 00:38:56,760
>> 现在这个对象中，这种表达的形式，

654
00:38:56,760 --> 00:38:58,890
我现在用的是调用的函数。

655
00:38:58,890 --> 00:39:02,710
这个函数的功能是它会附加一个事件处理程序。

656
00:39:02,710 --> 00:39:06,310
本次活动，我们要听的是submit事件。

657
00:39:06,310 --> 00:39:08,890
因此，当用户点击提交按钮或按Enter键，

658
00:39:08,890 --> 00:39:11,730
此事件要解雇。

659
00:39:11,730 --> 00:39:16,390
通过挂接到这个，我现在可以覆盖默认的行为的形式。

660
00:39:16,390 --> 00:39:19,770
如果没有这个JavaScript的形式提交到PHP文件

661
00:39:19,770 --> 00:39:22,110
我们使用的行动属性。

662
00:39:22,110 --> 00:39:25,440
但是，我现在说，等待，等待，等待，我不想让你真正做到这一点。

663
00:39:25,440 --> 00:39:31,140
我希望这种情况发生之前，你去尝试向一些PHP文件。

664
00:39:31,140 --> 00:39:32,870
现在我想要做的是什么呢？

665
00:39:32,870 --> 00:39:39,270
在这一点上，我想以某种方式使用AJAX加载的股票是什么价格。

666
00:39:39,270 --> 00:39:44,170
我需要知道的第一件事情是，用户正在寻找什么样的股票了。

667
00:39:44,170 --> 00:39:46,760
要做到这一点，我要使用另一个选择。

668
00:39:46,760 --> 00:39:49,020
这是第三个选择，我们看着面前。

669
00:39:49,020 --> 00:39:54,460
这是说，我要开始这个表单元素的ID的形式报价。

670
00:39:54,460 --> 00:39:58,440
然后该表格内的某处，必须有一个input元素

671
00:39:58,440 --> 00:40:01,270
具有的符号的名称。

672
00:40:01,270 --> 00:40:05,460
如果我们回头看，我们的HTML中，我们看到，我们有一个输入名称=符号。

673
00:40:05,460 --> 00:40:12,380
这意味着，这是怎么回事，选择该文本框，用户输入。

674
00:40:12,380 --> 00:40:13,870
这是很好的。我们有文本框。

675
00:40:13,870 --> 00:40:17,360
现在，我们只需要知道它里面有什么。

676
00:40:17,360 --> 00:40:20,290
要做到这一点，我们在这里，可以调用此方法。值，

677
00:40:20,290 --> 00:40:23,240
这说，我知道你有什么“文本框中。

678
00:40:23,240 --> 00:40:28,160
我希望你能告诉我什么是用户输入到该文本框中。

679
00:40:28,160 --> 00:40:34,440
现在我们有一个称为符号的字符串，等于不管用户输入的字词。

680
00:40:34,440 --> 00:40:39,820
这是很好的。现在，我们可以使用该字符串，使我们的要求。

681
00:40:39,820 --> 00:40:42,450
这是一个新的功能，这

682
00:40:42,450 --> 00:40:44,900
除了我们不再将要选择的元素，

683
00:40:44,900 --> 00:40:48,910
我们要调用不同的功能，提供给我们的jQuery。

684
00:40:48,910 --> 00:40:54,810
AJAX的功能是什么，使这个HTTP请求。

685
00:40:54,810 --> 00:40:57,000
因此，我们必须告诉它一些东西。

686
00:40:57,000 --> 00:41:01,410
我们要告诉这个函数的第一件事情就是我想要的要求去。

687
00:41:01,410 --> 00:41:08,910
在我的项目中的某个地方，我这里面的HTML目录称为quote.php的文件。

688
00:41:08,910 --> 00:41:15,150
我可以访问这个文件，我们看到了，就这样，如果我去到localhost / quote.php的。

689
00:41:15,150 --> 00:41:20,450
>> 我想我提出请求该页面的JavaScript。

690
00:41:20,450 --> 00:41:22,920
什么类型的请求呢？

691
00:41:22,920 --> 00:41:27,210
在此之前，我们看到的形式，方法=“邮报”属性，

692
00:41:27,210 --> 00:41:29,270
这意味着它将会使一个POST请求，

693
00:41:29,270 --> 00:41:32,630
所以它不会把任何东西，而不是一个GET请求的URL，

694
00:41:32,630 --> 00:41:36,860
只是如果我们只是访问该页面的Web浏览器，例如被解雇。

695
00:41:36,860 --> 00:41:41,260
现在，我们已经说过了，我想使一个HTTP POST请求

696
00:41:41,260 --> 00:41:44,840
的页面位于quote.php。

697
00:41:44,840 --> 00:41:51,490
当我们提交表单时，请记住，我们可以访问该表单的输入元素

698
00:41:51,490 --> 00:41:54,430
与$ _POST可变。

699
00:41:54,430 --> 00:41:58,710
到目前为止，在这个故事中，我们实际上没有任何数据一起发送。

700
00:41:58,710 --> 00:42:00,640
我们只是说，我们正在做一个AJAX请求

701
00:42:00,640 --> 00:42:03,200
这里的请求的类型，我们正在做的。

702
00:42:03,200 --> 00:42:07,090
现在，我们需要发送一些数据的页面。

703
00:42:07,090 --> 00:42:10,930
要做到这一点，我们可以使用这个属性被称为数据。

704
00:42:10,930 --> 00:42:14,950
此属性的值实际上是一个关联数组。

705
00:42:14,950 --> 00:42:19,390
这样做的原因是，它允许我们发送的数据只是1个以上。

706
00:42:19,390 --> 00:42:24,750
这就是为什么我们这些在这里嵌套的花括号内的这些其他的花括号。

707
00:42:24,750 --> 00:42:29,680
这些关联数组中的键都将是同样的事情

708
00:42:29,680 --> 00:42:32,630
这些名称中的属性的表单元素。

709
00:42:32,630 --> 00:42:35,740
这意味着，如果我一起发送一个键，符号，

710
00:42:35,740 --> 00:42:41,870
这意味着我的PHP页面可以访问这些数据与$ _POST [符号]

711
00:42:41,870 --> 00:42:44,640
就像我们以前那样，当我们提交表单。

712
00:42:44,640 --> 00:42:47,090
而现在我们要发送的实际数据

713
00:42:47,090 --> 00:42:50,790
将是此关联数组内的值。

714
00:42:50,790 --> 00:42:54,070
>> 我们存储在变量符号的文本，

715
00:42:54,070 --> 00:42:57,380
所以我们要发送沿着现在是一个关键的符号

716
00:42:57,380 --> 00:43:01,380
和一个值的任何用户输入英寸

717
00:43:01,380 --> 00:43:06,270
现在，我们已经取得了我们的PHP文件执行，这个HTTP请求，

718
00:43:06,270 --> 00:43:11,480
它会发送一些数据，现在只是提出这个要求的客户端。

719
00:43:11,480 --> 00:43:15,220
现在，我们需要作出回应，无论服务器对我们说。

720
00:43:15,220 --> 00:43:20,180
要做到这一点，我们有这样的最后一个属性，这里所说的成功。

721
00:43:20,180 --> 00:43:24,240
成功的关键的价值，这实际上是一个函数，

722
00:43:24,240 --> 00:43:26,910
这是一个非常酷的事情你可以做的JavaScript。

723
00:43:26,910 --> 00:43:31,720
您不仅可以有整数或数组作为一个关联数组里面的值，

724
00:43:31,720 --> 00:43:34,170
我们也可以有一个函数。

725
00:43:34,170 --> 00:43:36,380
所以说成功，这是我的钥匙。

726
00:43:36,380 --> 00:43:38,830
一个冒号说，在这里的价值，

727
00:43:38,830 --> 00:43:41,810
现在的价值，这实际上是一个函数。

728
00:43:41,810 --> 00:43:44,460
所以我们并不需要给这个函数的名称本身。

729
00:43:44,460 --> 00:43:48,820
我们只能说，这将是一些功能。这将需要1个参数。

730
00:43:48,820 --> 00:43:51,190
此函数的参数将是

731
00:43:51,190 --> 00:43:54,460
无论服务器发送我们的要求。

732
00:43:54,460 --> 00:43:57,750
就像当我们的浏览器发出请求，服务器发送回

733
00:43:57,750 --> 00:43:59,060
浏览器显示，

734
00:43:59,060 --> 00:44:03,030
的背景下，AJAX，我们刚刚作出了一个请求，服务器发送的东西回来，

735
00:44:03,030 --> 00:44:07,110
现在我们已经是作为一个字符串表示。

736
00:44:07,110 --> 00:44:11,280
以该字符串，我只是想显示在页面上。

737
00:44:11,280 --> 00:44:14,040
要做到这一点，我有一个最后的选择。

738
00:44:14,040 --> 00:44:17,570
我要选择的元素的ID价。

739
00:44:17,570 --> 00:44:20,710
这仅仅是我在页面上创建一个空白的div，

740
00:44:20,710 --> 00:44:26,640
我想设置该分区的内容是什么服务器发送回。

741
00:44:26,640 --> 00:44:30,280
其实我修改quote.php位。

742
00:44:30,280 --> 00:44:33,460
>> 而不是调用渲染和渲染一些页面，

743
00:44:33,460 --> 00:44:38,100
quote.php现在只是要为一个字符串，打印出的股票价值。

744
00:44:38,100 --> 00:44:41,880
所以，如果你要访问的页面，你会只看到小串

745
00:44:41,880 --> 00:44:45,030
无论股价。

746
00:44:45,030 --> 00:44:50,170
在这里我们需要做的最后一件事是确保这个函数返回false。

747
00:44:50,170 --> 00:44:53,560
这说的是，如果我是里面的一个事件处理程序

748
00:44:53,560 --> 00:44:57,300
该事件处理程序返回false，而不是返回true，

749
00:44:57,300 --> 00:45:01,510
这意味着，我不希望原来的触发事件，。

750
00:45:01,510 --> 00:45:05,270
在这种情况下，如果我们没有任何的JavaScript，我们提交一个表单，

751
00:45:05,270 --> 00:45:08,280
我们的Web浏览器会说，“我将要发送的数据一起，”

752
00:45:08,280 --> 00:45:10,130
他们会送你到另一个页面。

753
00:45:10,130 --> 00:45:14,360
因为我们现在正在使用AJAX，就没有必要向用户发送到另一页。

754
00:45:14,360 --> 00:45:17,920
我们只是同一页面上动态显示的结果。

755
00:45:17,920 --> 00:45:21,460
我们真的不希望他们去任何地方，我想留在同一页上。

756
00:45:21,460 --> 00:45:27,060
因此，通过返回false，我们保证的形式，我们没有做。

757
00:45:27,060 --> 00:45:31,170
让我们来看看这实际上看起来像。

758
00:45:31,170 --> 00:45:34,180
我们的报价看起来是一样的。

759
00:45:34,180 --> 00:45:37,240
让我往上拉的检查员在这里，所以我们可以看到发生了什么事情。

760
00:45:37,240 --> 00:45:40,270
少巨大的。

761
00:45:40,270 --> 00:45:44,590
请记住，如果我们打开“网络”选项卡上，这是我们可以看到所有的HTTP请求

762
00:45:44,590 --> 00:45:47,570
在页面上正在发生的。

763
00:45:47,570 --> 00:45:52,890
>> 对于一个符号，让我的类型AAPL，然后点击获取报价。

764
00:45:52,890 --> 00:45:56,720
现在我们看到，苹果的份额花费一定数量的美元

765
00:45:56,720 --> 00:46:00,410
刚一出现在页面上，但并没有改变在所有的URL。

766
00:46:00,410 --> 00:46:04,570
事实上，这里是我们刚刚作出的HTTP请求。

767
00:46:04,570 --> 00:46:09,980
我们一个POST请求quote.php的。这是有道理的。

768
00:46:09,980 --> 00:46:12,800
这是服务器给我们送来。

769
00:46:12,800 --> 00:46:16,320
它不再是这个巨大的HTML文件，图像和类似的东西，

770
00:46:16,320 --> 00:46:20,920
它只是一个行文字，然后我们只是显示的文本行。

771
00:46:20,920 --> 00:46:26,290
如果我们回去的头，看看我们其实里面的这个HTTP请求发送，

772
00:46:26,290 --> 00:46:33,950
我们可以看到，在这里，我们一起发送符号的键和值AAPL，

773
00:46:33,950 --> 00:46:36,430
这就是用户输入的字词。

774
00:46:36,430 --> 00:46:39,230
这是很好的，但它仍然是有点讨厌。

775
00:46:39,230 --> 00:46:42,490
我还是要单击此按钮可以获取股票报价。

776
00:46:42,490 --> 00:46:45,880
我们是忙碌的人们，我们没有时间去按一下按钮。

777
00:46:45,880 --> 00:46:49,910
谷歌意识到这一点，而当他们实现谷歌即时。

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
本网站YouTube的即时。

785
00:47:09,000 --> 00:47:13,170
所有的YouTube即时并有效地搜索YouTube的瞬间。

786
00:47:13,170 --> 00:47:17,020
因此，而不是去YouTube.com并点击搜索，

787
00:47:17,020 --> 00:47:21,650
当我开始打字到YouTube即时的东西，如CS50，

788
00:47:21,650 --> 00:47:25,320
我们可以在这里看到，它试图在一个缓慢的互联网连接

789
00:47:25,320 --> 00:47:28,500
填充这些结果住。

790
00:47:28,500 --> 00:47:35,590
要做到这一点，我们实际上可以做一个很简单的修改给我们的quote.js的文件。

791
00:47:35,590 --> 00:47:40,900
现在，我们把此事件提交表单时。

792
00:47:40,900 --> 00:47:43,760
我们真的不希望使用户不再提交该表格，

793
00:47:43,760 --> 00:47:48,570
让我们，而不是每次用户按下一个键触发此事件。

794
00:47:48,570 --> 00:47:53,200
要做到这一点，让我们先改变事件提交KEYUP。

795
00:47:53,200 --> 00:47:55,740
这意味着，而不是等待的形式提交，

796
00:47:55,740 --> 00:47:58,490
每次按下该键，事情是会发生什么。

797
00:47:58,490 --> 00:48:02,030
它不再是有道理的附加keyup事件的整个形式。

798
00:48:02,030 --> 00:48:05,080
我们真正关心的只是搜索框的。

799
00:48:05,080 --> 00:48:09,320
>> 要选择，现在，我们可以改变这，而不是形式引号，

800
00:48:09,320 --> 00:48:14,220
形式报价，我们将有一个输入（TYPE = TEXT），或者我们可以说，（=符号命名） - 

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
记住这里的时候，我们说，返回false

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
我们不再需要重载它，所以让我们来破坏这个返回false。

809
00:48:38,660 --> 00:48:44,800
如果我们保存和重新加载页面，现在当我开始打字AAPL

810
00:48:44,800 --> 00:48:50,160
你会看到在这里的底部，股票价格会自动完成。

811
00:48:50,160 --> 00:48:53,150
因此，这里是CS50财经即时。

812
00:48:53,150 --> 00:48:55,860
实际上是一个有趣的故事的YouTube即时

813
00:48:55,860 --> 00:48:59,420
是，学生只是一种写一晚的项目，

814
00:48:59,420 --> 00:49:03,800
第二天YouTube的CEO，他提供了一份工作。

815
00:49:03,800 --> 00:49:10,610
所以，就这么简单，你CS50学生，你最终的项目可以得到你的工作在YouTube上。

816
00:49:10,610 --> 00:49:14,720
类似的东西是项目的最后一个很酷的想法，对吧？

817
00:49:14,720 --> 00:49:18,170
我们有一些现有的功能，我们希望整合。

818
00:49:18,170 --> 00:49:20,330
我们改善用户体验了一点点，

819
00:49:20,330 --> 00:49:24,340
，突然在YouTube即时搜索的东西，可能是一个更容易

820
00:49:24,340 --> 00:49:27,290
寻找它比一般的YouTube。

821
00:49:27,290 --> 00:49:30,790
所以这是AJAX的缩影。

822
00:49:30,790 --> 00:49:34,860
>> 在约瑟夫显示的例子中，我们看到了很多的自动完成，

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
我们只知道这是AA的东西，而不是仅仅对我说，

826
00:49:45,110 --> 00:49:48,740
“A股这件事情花费这么多钱。”

827
00:49:48,740 --> 00:49:52,540
样的，我想知道哪些股票开始使用AA。

828
00:49:52,540 --> 00:49:58,340
我们可以做到这一点真的很好，已经包含引导程序库，

829
00:49:58,340 --> 00:50:01,380
里面的CS50融资。

830
00:50:01,380 --> 00:50:09,390
如果你来这里的JavaScript标记，向下滚动到事先键入的内容，

831
00:50:09,390 --> 00:50:13,730
这是一个不错的插件，已经有人为我们写的，

832
00:50:13,730 --> 00:50:16,980
我们可以很容易地使用这样的功能。

833
00:50:16,980 --> 00:50:21,410
我输入A和这里列出的一些国家开始A.

834
00:50:21,410 --> 00:50:25,360
比方说，我认为这是真的很酷，这是我包括在我的网页上。

835
00:50:25,360 --> 00:50:28,300
事实证明，这是真的，真的很简单。

836
00:50:28,300 --> 00:50:32,810
让我们在这里quote3.js跳。

837
00:50:34,890 --> 00:50:37,380
我的文件看起来有点不同。

838
00:50:37,380 --> 00:50:39,700
在这里，我的所有AJAX的东西是一样的。

839
00:50:39,700 --> 00:50:43,170
我要加载的库存数据，而不必去到另一个页面。

840
00:50:43,170 --> 00:50:46,220
但现在我想使用这个插件。

841
00:50:46,220 --> 00:50:51,020
引导文件究竟如何我能做到这一点的很好的例子。

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
我打开了symbols.js。

852
00:51:23,400 --> 00:51:27,980
>> 这symbols.js这只是非常，非常大的数组，其中包含字符串

853
00:51:27,980 --> 00:51:32,080
所有这些股票从纳斯达克的符号。

854
00:51:32,080 --> 00:51:42,190
如果我想跳回到HTML，所以jharvard，虚拟主机，globalhost，HTML，模板，

855
00:51:42,190 --> 00:51:45,820
quote_form。

856
00:51:45,820 --> 00:51:50,910
从那时起，现在被称为quote3.js，让我改变我的JavaScript文件包括。

857
00:51:50,910 --> 00:51:55,110
现在我有quote3.js的，所以我要加载中，单独的JavaScript文件，

858
00:51:55,110 --> 00:51:57,910
一个具有该引导程序自动完成。

859
00:51:57,910 --> 00:52:04,430
现在，当我跳回到浏览器，重新载入页面，并我开始打字AA，

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
是啊。现在，我们正在下载这个庞大的JavaScript文件，有很多的符号。

871
00:52:50,420 --> 00:52:54,360
所以，如果我们有一吨重的东西，这可能会增加的延迟不仅搜索

872
00:52:54,360 --> 00:52:56,600
而且实际的文件下载。

873
00:52:56,600 --> 00:52:58,670
大。还有别的吗？

874
00:53:01,950 --> 00:53:05,280
现在没有真正意义上的相关性。

875
00:53:05,280 --> 00:53:08,190
如果我键入A，公司在这里显示的

876
00:53:08,190 --> 00:53:11,220
可能不是最热门的公司，开始A.

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
如果我走在这里，雅虎财经，finance.yahoo.com

882
00:53:36,440 --> 00:53:42,100
如果我试图进入雅虎财经的页面上的符号

883
00:53:42,100 --> 00:53:52,310
我开始打字goog，我有这个很好的事情的清单。

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
所以它可能是使用AJAX莫名其妙地装载它的数据。

893
00:54:21,960 --> 00:54:23,920
我们可以找出什么样的数据加载。

894
00:54:23,920 --> 00:54:28,390
如果我点击这个网络“选项卡上，这些都将是所有的请求，开始被解雇。

895
00:54:28,390 --> 00:54:34,020
现在，如果我输入咕，我们可以看到，我刚刚得到一个新的HTTP请求。

896
00:54:34,020 --> 00:54:37,490
这可能是这些数据是来自哪里。

897
00:54:37,490 --> 00:54:41,990
果然，我看这个URL，这是一个有点奇怪的命名，

898
00:54:41,990 --> 00:54:46,930
我们可以看到，这正是雅虎的发送数据。

899
00:54:46,930 --> 00:54:53,400
>> 我已经创建了一个单独的的文件名为suggest.php的精神，以查找功能非常相似。

900
00:54:53,400 --> 00:54:57,730
它基本上是雅虎的URL进行查询，得到一些数据，

901
00:54:57,730 --> 00:54:59,750
并将其发回给我。

902
00:54:59,750 --> 00:55:02,570
现在，而不是使用大，巨大的符号列表，

903
00:55:02,570 --> 00:55:05,280
我可以使用雅虎的很好的相关性的东西，

904
00:55:05,280 --> 00:55:08,150
我没有下载大量的JavaScript文件。

905
00:55:08,150 --> 00:55:12,040
我只是要拉下实际相关的股票符号。

906
00:55:12,040 --> 00:55:13,960
让我们跳进的。

907
00:55:13,960 --> 00:55:17,360
因此，HTML，JS。我们现在在quote4。

908
00:55:17,360 --> 00:55:22,120
现在，我们不再使用该大名单的JavaScript文件。

909
00:55:22,120 --> 00:55:24,430
但这里有一个小的设计问题。

910
00:55:24,430 --> 00:55:28,200
我们曾经说过，A在AJAX是异步的。

911
00:55:28,200 --> 00:55:31,000
这是什么意思的是，当我做一个AJAX请求，

912
00:55:31,000 --> 00:55:36,490
第8行，这是我的AJAX请求实际上是发射。

913
00:55:36,490 --> 00:55:40,370
比方说，现在我这里有一些代码，会做一些东西

914
00:55:40,370 --> 00:55:43,930
我想在页面上提醒用户注意或改变一些东西。

915
00:55:43,930 --> 00:55:49,830
什么是不可能发生的事情是浏览器还没有要等待这个请求继续

916
00:55:49,830 --> 00:55:53,480
之前下来，击中这条线。

917
00:55:53,480 --> 00:55:55,900
这就是异步的一部分。

918
00:55:55,900 --> 00:55:58,400
这将会使这一请求，并说，“当你完成，

919
00:55:58,400 --> 00:56:03,080
“回来，并调用该函数，我告诉你打电话内的成功。”

920
00:56:03,080 --> 00:56:07,300
这意味着我们不能只是预先下载的所有股票。

921
00:56:07,300 --> 00:56:10,300
我们需要，使请求并等待的东西回来。

922
00:56:10,300 --> 00:56:13,330
这意味着，之前，我们可以简单地告诉引导，

923
00:56:13,330 --> 00:56:15,580
“这是我想你自动完成的事情的清单。”

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
要做到这一点，我会做一个非常类似的AJAX请求。

934
00:56:54,500 --> 00:56:59,010
我要请求这个页面suggest.php。

935
00:56:59,010 --> 00:57:01,360
我想还是一起发送的符号。

936
00:57:01,360 --> 00:57:05,570
现在，我的成功，引导文件告诉我，

937
00:57:05,570 --> 00:57:09,130
以填充该列表的东西，

938
00:57:09,130 --> 00:57:14,370
所有我需要做的就是在这个数组传递给回调函数。

939
00:57:14,370 --> 00:57:15,660
但是，且慢。

940
00:57:15,660 --> 00:57:20,240
如果这应该是一个数组，AJAX送我回文本，

941
00:57:20,240 --> 00:57:22,720
这怎么可能呢？

942
00:57:22,720 --> 00:57:27,910
这引入了一种新的方法称为JSON数据交换。

943
00:57:27,910 --> 00:57:33,000
在这种情况下，我们不只是发送一个简单的文本字符串。

944
00:57:33,000 --> 00:57:37,670
现在，我们正在处理这个更复杂​​的股票符号列表。

945
00:57:37,670 --> 00:57:41,730
这些股票符号也包括像公司的名称或目前的价格。

946
00:57:41,730 --> 00:57:47,550
只是用一个很长的字符串，这不是在任何可预见的方式格式化

947
00:57:47,550 --> 00:57:51,970
不会是最好的方式得到这个数据，我从雅虎的服务器

948
00:57:51,970 --> 00:57:54,540
的方式，我可以很容易地理解。

949
00:57:54,540 --> 00:58:01,280
JSON是一种技术，利用我们如何在JavaScript中创建关联数组。

950
00:58:01,280 --> 00:58:04,510
这看起来很像一个JavaScript关联数组，

951
00:58:04,510 --> 00:58:06,600
而事实上，这是因为它是。

952
00:58:06,600 --> 00:58:09,710
JSON代表JavaScript对象表示法。

953
00:58:09,710 --> 00:58:15,020
这基本上是一个商定来回传输数据的格式。

954
00:58:15,020 --> 00:58:18,280
在这里JSON对象或本JSON关联数组

955
00:58:18,280 --> 00:58:21,010
发送一些数据有关课程。

956
00:58:21,010 --> 00:58:25,110
>> 此阵列的键像当然，有一个值，该值的CS50，

957
00:58:25,110 --> 00:58:29,140
在这里我们可以看到，我可以有一个值，它是一个数组。

958
00:58:29,140 --> 00:58:32,730
我没有做的事情，比如解析出字符串，并期待逗号

959
00:58:32,730 --> 00:58:35,330
做疯狂的事情一样。

960
00:58:35,330 --> 00:58:38,820
因为这是声明在此JSON格式，

961
00:58:38,820 --> 00:58:43,510
JavaScript和jQuery已经有函数将字符串转换为

962
00:58:43,510 --> 00:58:48,140
这样的JSON转化为实际的JavaScript关联数组

963
00:58:48,140 --> 00:58:50,440
我们可以一起工作。

964
00:58:50,440 --> 00:58:56,660
这样做是因为简单的说，不再是这个文件，suggest.php，

965
00:58:56,660 --> 00:58:59,040
送我回一个简单的文本字符串，

966
00:58:59,040 --> 00:59:01,950
但我知道这是要送我回JSON。

967
00:59:01,950 --> 00:59:06,760
这意味着，可以转换成JSON的JavaScript关联数组。

968
00:59:06,760 --> 00:59:10,830
因此，jQuery，我想请你为我做的。

969
00:59:10,830 --> 00:59:13,990
这意味着，这里此响应参数，

970
00:59:13,990 --> 00:59:16,070
这已经不再只是一个字符串。

971
00:59:16,070 --> 00:59:19,860
因为我们已经告诉了jQuery的，这里是一些JSON，

972
00:59:19,860 --> 00:59:22,950
jQuery是足够聪明，说，“你想JSON？”

973
00:59:22,950 --> 00:59:26,890
“我要转换到一个关联数组你。”

974
00:59:26,890 --> 00:59:32,100
让我们实际来看看在“网络”选项卡一旦我们有quote4.js的。

975
00:59:32,100 --> 00:59:35,400
我们将改变这一点，并重新加载页面。

976
00:59:37,150 --> 00:59:41,250
现在，我要再次输入的A-A。

977
00:59:41,250 --> 00:59:45,600
我做了一个的夫妇请求suggest.php，但是现在这种反应，

978
00:59:45,600 --> 00:59:48,670
，而不仅仅是字符串，它是JSON。

979
00:59:48,670 --> 00:59:52,580
所以我说，“又来了一个关联数组，有一个开放的大括号”。

980
00:59:52,580 --> 00:59:56,830
>> 这个关联数组的第一个也是唯一的密钥被称为符号，

981
00:59:56,830 --> 01:00:00,240
然后在这里是一个数组的所有相关符号

982
01:00:00,240 --> 01:00:04,820
现在从雅虎财经，而不是从那个巨大的列表。

983
01:00:06,110 --> 01:00:10,630
这就是我如何可以简单地填充这个自动完成插件

984
01:00:10,630 --> 01:00:14,280
一些数据不是来自一个本地文件，该文件已经预定

985
01:00:14,280 --> 01:00:17,490
但其他的东西。

986
01:00:17,490 --> 01:00:21,160
事实证明，我们实际上可以利用的技术，称为JSONP，

987
01:00:21,160 --> 01:00:27,420
或JSON填充，将消除这种suggest.php的中间人。

988
01:00:27,420 --> 01:00:34,010
但不是这样做的，而不是让我们来看看我是如何可以改善这一点更。

989
01:00:34,010 --> 01:00:36,040
我真的很喜欢引导的，事先键入的。这是非常好的。

990
01:00:36,040 --> 01:00:39,570
但我们在JavaScript越来越好，我们要种做自己，

991
01:00:39,570 --> 01:00:43,870
也许看看这是什么插件可以做。

992
01:00:43,870 --> 01:00:46,500
让我们不再使用该预输入的东西，

993
01:00:46,500 --> 01:00:50,550
让我们尝试使这个建议的股票，自己。

994
01:00:50,550 --> 01:00:53,790
在这里，我们要开始以同样的方式quote6.php。

995
01:00:53,790 --> 01:00:58,050
每当有人类型的东西，我们希望做一个AJAX请求。

996
01:00:58,050 --> 01:01:01,590
这是我们原来的CS50财经即时。

997
01:01:01,590 --> 01:01:05,020
不是要求作出quote.php，

998
01:01:05,020 --> 01:01:08,530
现在，我们请求了同一个文件之前，suggest.php，

999
01:01:08,530 --> 01:01:12,460
它只是将数据从雅虎财经。

1000
01:01:12,460 --> 01:01:19,480
>> 同样，我们仍然预期JSON，但因为现在的预输入，这对我们不这样做，

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
要做到这一点，很像我们在PHP的HTML字符串连接起来这些大

1007
01:01:44,850 --> 01:01:48,170
然后我们打印了出来，在JavaScript中，我们可以做同样的事情。

1008
01:01:48,170 --> 01:01:51,850
首先，我们要开始这个字符串建议，

1009
01:01:51,850 --> 01:01:54,590
此字符串只包含了一些HTML。

1010
01:01:54,590 --> 01:01:58,320
我们希望它是一系列的事情，所以我们要开始了与此列表的标签，

1011
01:01:58,320 --> 01:02:03,340
现在我们要遍历所有的符号，返回到我们。

1012
01:02:03,340 --> 01:02:06,500
请记住，因为我们前面提到的数据类型：'json'的，这是不是一个字符串。

1013
01:02:06,500 --> 01:02:09,500
这已经是我们的一个数组。这真的很酷。

1014
01:02:09,500 --> 01:02:13,790
我们可以简单地说，“我希望你能添加一个列表中的元素。”

1015
01:02:13,790 --> 01:02:16,000
我们将将其放在身边的那一个元素，

1016
01:02:16,000 --> 01:02:19,030
我们可以给它一个类的建议，所以我们知道它是什么，

1017
01:02:19,030 --> 01:02:23,880
现在这里是我们回来，从雅虎财经的符号。

1018
01:02:23,880 --> 01:02:27,230
>> 一旦我们创建了一个元素的符号，我们已经得到了，

1019
01:02:27,230 --> 01:02:30,100
我们只是想以关闭列表。

1020
01:02:30,100 --> 01:02:33,040
所以，现在的建议表示这个小HTML片段

1021
01:02:33,040 --> 01:02:37,860
当放在页面上的将是我们正在寻找的东西的列表。

1022
01:02:37,860 --> 01:02:41,070
现在，让我们实际在页面上。

1023
01:02:41,070 --> 01:02:46,390
要做到，我实际上已经创造了另一个空的div，我已经给了它一个ID的建议。

1024
01:02:46,390 --> 01:02:52,520
就像我们设置的div的价格，库存数据将显示的内容，

1025
01:02:52,520 --> 01:02:58,600
现在，我们只是想设置这个div的内容，不管这个字符串是

1026
01:02:58,600 --> 01:03:00,290
包含这些符号。

1027
01:03:00,290 --> 01:03:07,650
通过使用这个HTML的方法，这样的建议变量，这个字符串，是一个字符串的HTML。

1028
01:03:07,650 --> 01:03:13,490
我希望你的HTML，并把它里面的div建议。

1029
01:03:13,490 --> 01:03:15,680
我们刚刚附加的东西，现在的DOM。

1030
01:03:15,680 --> 01:03:20,360
我们增加了一些新的元素的DOM，我们现在可以显示在页面上。

1031
01:03:20,360 --> 01:03:22,540
让我们来看看这是什么看起来像。

1032
01:03:22,540 --> 01:03:29,110
如果我们加载在quote6和现在我们回来，

1033
01:03:29,110 --> 01:03:34,480
现在，当我开始打字AAPL，我们不再有引导程序自动完成，

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
我们看到，当我们自动补齐，自动完成的值是AAPL。

1039
01:03:52,590 --> 01:03:54,820
这也许不是那么有用。

1040
01:03:54,820 --> 01:03:59,100
作为一个用户，我可能不会立即承认所有的股票符号。

1041
01:03:59,100 --> 01:04:02,370
我可能更容易识别，是公司的实际名称。

1042
01:04:02,370 --> 01:04:05,310
因此，它是真正有用的，而不是说AAPL

1043
01:04:05,310 --> 01:04:07,970
如苹果公司说了些什么

1044
01:04:07,970 --> 01:04:12,240
因为我们已经推出了自己，我们可以很容易地做到这一点。

1045
01:04:12,240 --> 01:04:17,630
让我们打开我们最后的报价文件，所以quote7。

1046
01:04:17,630 --> 01:04:23,200
>> 同样的事情。我刚刚创建了一个PHP文件，该文件将返回给我们更多的不仅仅是符号。

1047
01:04:23,200 --> 01:04:25,550
它也会给我们公司的名字。

1048
01:04:25,550 --> 01:04:28,150
因此，我们正在做同样的事情。我们正在做一个AJAX请求。

1049
01:04:28,150 --> 01:04:32,370
一旦请求完成后，我们将在这里执行此功能，

1050
01:04:32,370 --> 01:04:36,520
此功能是要建立一个大的字符串的元素。

1051
01:04:36,520 --> 01:04:39,520
但不同的是，这些列表的值不再仅仅是符号，

1052
01:04:39,520 --> 01:04:45,370
它现在的名字。

1053
01:04:45,370 --> 01:04:47,070
因此，我们有一个小问题。

1054
01:04:47,070 --> 01:04:51,590
当我们用我们的查找，我们需要以某种方式传递给它的符号。

1055
01:04:51,590 --> 01:04:54,950
我们可以通过查找类似微软公司。

1056
01:04:54,950 --> 01:04:57,900
我们需要通过它MSFT。

1057
01:04:57,900 --> 01:05:01,640
当我们编写HTML，我们有很多不错的内置属性。

1058
01:05:01,640 --> 01:05:05,440
一个A可能与它的href或一个类。

1059
01:05:05,440 --> 01:05:08,230
但我们现在真正需要的是什么，每个环节

1060
01:05:08,230 --> 01:05:11,120
有与之相关的股票代码。

1061
01:05:11,120 --> 01:05:14,240
有没有内置HTML属性的股票代码，

1062
01:05:14,240 --> 01:05:21,010
但幸运的是，HTML5可以让我们创建我们自己的属性，是我们想要的。

1063
01:05:21,010 --> 01:05:24,620
说数据符号中，我介绍了一个新的属性

1064
01:05:24,620 --> 01:05:29,350
他的名字我只是做了起来，这是好的，因为我前面的这个数据。

1065
01:05:29,350 --> 01:05:34,270
我们要到店里面有符号的股票。

1066
01:05:34,270 --> 01:05:39,590
这也就意味着，即使我们显示的价值，公司的名称

1067
01:05:39,590 --> 01:05:43,380
我们的自动完成内，我们仍然在记忆的象征

1068
01:05:43,380 --> 01:05:47,110
是与每个公司相关联。

1069
01:05:47,110 --> 01:05:50,350
我们这样做的方式是该元素本身的内部。

1070
01:05:50,350 --> 01:05:52,930
因此，这意味着我们需要作出更多的变化。

1071
01:05:52,930 --> 01:05:57,090
当我们点击它，现在，我们需要利用的符号属性

1072
01:05:57,090 --> 01:06:00,220
而不仅仅是它的价值。

1073
01:06:00,220 --> 01:06:05,010
如果我们备份，我们建议附加一个事件处理程序。

1074
01:06:05,010 --> 01:06:09,280
每当一个点击这些建议，我现在想要做的事情。

1075
01:06:09,280 --> 01:06:13,160
我想要做的是改变该输入框的值。

1076
01:06:13,160 --> 01:06:16,100
现在，我想设置这个相同的val函数。

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
我们可以看到，在这里，我们不会附加的click事件

1085
01:06:50,880 --> 01:06:54,690
每个元素单独一类的建议。

1086
01:06:54,690 --> 01:06:57,140
相反，我们正在接近这一点是不同的。

1087
01:06:57,140 --> 01:07:01,700
相反，我们说的这个建议DIV里面的东西，

1088
01:07:01,700 --> 01:07:04,080
记住的是该列表的容器，

1089
01:07:04,080 --> 01:07:10,150
如果这个div里面的东西被点击，它有一个类的建议，

1090
01:07:10,150 --> 01:07:13,000
我想触发该事件。

1091
01:07:13,000 --> 01:07:17,490
基本上，这意味着什么，我们可以做的是，我们可以重复使用相同的事件处理程序

1092
01:07:17,490 --> 01:07:20,000
在列表中的所有的东西。

1093
01:07:20,000 --> 01:07:22,080
所以，我们必须有一个事件处理程序的第一个元素

1094
01:07:22,080 --> 01:07:24,550
不同的事件处理程序的第二个元素。

1095
01:07:24,550 --> 01:07:29,880
相反，我们可以说，“我希望同样的事件处理程序适用于一切在我的名单。”

1096
01:07:29,880 --> 01:07:34,420
但是，我们需要以某种方式知道哪个元素被点击。

1097
01:07:34,420 --> 01:07:38,450
这个“本”关键字表示这一点。

1098
01:07:38,450 --> 01:07:42,360
这是一个对象，该对象只是由用户点击。

1099
01:07:42,360 --> 01:07:47,680
如果我只是点击第三个链接，这表示，第三环节的元素，

1100
01:07:47,680 --> 01:07:51,670
这意味着我可以得到它的属性，数据符号，

1101
01:07:51,670 --> 01:07:57,760
我们知道必须包含的符号，我只是点击与该公司相关的。

1102
01:07:57,760 --> 01:08:04,550
如果我们跳回到我们的融资页，

1103
01:08:04,550 --> 01:08:08,580
我们现在可以看到，一旦我开始打字像MSFT，

1104
01:08:08,580 --> 01:08:11,220
我们不再只股票符号，

1105
01:08:11,220 --> 01:08:13,720
我们现在得到实际的公司。

1106
01:08:13,720 --> 01:08:20,410
但是，当我点击这些公司，

1107
01:08:20,410 --> 01:08:25,180
我们可以看到，我们实际上是在填充的文本框的公司名称

1108
01:08:25,180 --> 01:08:29,850
但与任何存储这些数据的属性的内部。

1109
01:08:29,850 --> 01:08:32,880
所以，如果我实际检查通过右键单击这些元素之一

1110
01:08:32,880 --> 01:08:36,200
并单击“检查元素”，我们其实可以看到这看起来像。

1111
01:08:36,200 --> 01:08:40,290
>> 记住，这是东西，我们创建for循环内的

1112
01:08:40,290 --> 01:08:42,649
当我们在建立该字符串的HTML。

1113
01:08:42,649 --> 01:08:47,870
在这里我们可以看到，这个数据符号的值MSFT，这是伟大的。

1114
01:08:47,870 --> 01:08:49,189
这是我们期待的。

1115
01:08:49,189 --> 01:08:53,170
这是符号，这就是我们得到的价值，我们需要使用

1116
01:08:53,170 --> 01:08:56,140
里面的这个文本框。

1117
01:08:56,140 --> 01:08:58,850
这就够了，因为这是一种无聊报价表。

1118
01:08:58,850 --> 01:09:02,990
让我们只是做一些快速增强我们的产品组合。

1119
01:09:02,990 --> 01:09:08,109
如果你已经使用了一段时间，你CS50金融开始买入和卖出大量的股票，

1120
01:09:08,109 --> 01:09:11,300
此表最终是会得到相当大的，

1121
01:09:11,300 --> 01:09:13,850
你想要的股票行情自动收录器，当然。

1122
01:09:13,850 --> 01:09:20,350
一旦表是非常，非常大，它可能是有用的用户尝试搜索了它。

1123
01:09:20,350 --> 01:09:23,290
如果我开始在搜索框中输入一些像迪斯尼内部

1124
01:09:23,290 --> 01:09:26,359
和寻找我的米老鼠股票的，我们可以看到，现在过滤表

1125
01:09:26,359 --> 01:09:28,189
根据我刚才输入。

1126
01:09:28,189 --> 01:09:31,640
这个功能看起来超级复杂，但它是真的，真的很容易

1127
01:09:31,640 --> 01:09:33,859
使用jQuery和JavaScript。

1128
01:09:33,859 --> 01:09:39,189
这portfolio.php文件包含一个JavaScript称为portfolio.js的文件的。

1129
01:09:39,189 --> 01:09:41,130
让我们来看看在那。

1130
01:09:41,130 --> 01:09:44,890
因此，HTML，JS，组合。

1131
01:09:44,890 --> 01:09:49,210
这里就是我们正在做的搜索在桌子上。

1132
01:09:49,210 --> 01:09:52,750
我需要做的第一件事情是事件处理程序附加到该文本框

1133
01:09:52,750 --> 01:09:55,760
因为我们知道，我们希望我们的过滤功能，以火

1134
01:09:55,760 --> 01:09:59,800
每次用户按下的东西，因为我们没有时间搜索按钮。

1135
01:09:59,800 --> 01:10:03,000
我们需要做的第一件事情是找出用户搜索什么，

1136
01:10:03,000 --> 01:10:04,780
就像我们以前那样。

1137
01:10:04,780 --> 01:10:11,320
此关键字是指用户交互的当前元素。

1138
01:10:11,320 --> 01:10:14,070
>> 由于用户交互的搜索框，

1139
01:10:14,070 --> 01:10:17,020
$这代表搜索框，

1140
01:10:17,020 --> 01:10:21,820
，所以this.val为我们提供了用户输入的搜索框里面有什么。

1141
01:10:22,810 --> 01:10:27,320
所以，现在我们想要做的是，我们要遍历所有的行

1142
01:10:27,320 --> 01:10:29,240
我们的表内。

1143
01:10:29,240 --> 01:10:35,630
要选择在我们的表中的所有行，我给了该表的表组合的ID，

1144
01:10:35,630 --> 01:10:39,060
和每行代表一个TR元素，

1145
01:10:39,060 --> 01:10:42,080
所以这个选择是要返回给我一个大数组

1146
01:10:42,080 --> 01:10:44,370
我的表中的所有行。

1147
01:10:44,370 --> 01:10:47,010
现在，我想遍历该数组。

1148
01:10:47,010 --> 01:10:52,390
我可以一个for循环，但是jQuery实际上为我们提供了很好的功能称为“每一个”。

1149
01:10:52,390 --> 01:10:55,220
每个做的每一个参数，

1150
01:10:55,220 --> 01:10:57,090
该参数是一个函数。

1151
01:10:57,090 --> 01:11:02,760
它要做的是要申请的功能，这个列表内的每一个元素。

1152
01:11:02,760 --> 01:11:05,550
这个函数接受一个参数的E，

1153
01:11:05,550 --> 01:11:10,090
当此功能被执行时，此e是将被替换的第一行，

1154
01:11:10,090 --> 01:11:12,070
然后是第二行，然后在第三行。

1155
01:11:12,070 --> 01:11:15,150
通过这种方式，这是同样的事情，一个for循环

1156
01:11:15,150 --> 01:11:21,360
然后盘算根据当前元素的索引您的内部循环。

1157
01:11:21,360 --> 01:11:24,750
在每次迭代中，对每个表中的这些元素中，

1158
01:11:24,750 --> 01:11:30,560
我要检查的文本元素 - 该行的单元格内的文本 - 

1159
01:11:30,560 --> 01:11:33,130
符合我在寻找什么。

1160
01:11:33,130 --> 01:11:36,390
大长串的命令是我能做到这一点。

1161
01:11:36,390 --> 01:11:40,900
首先，现在指的是 - 因为它里面有一个新的功能 - 

1162
01:11:40,900 --> 01:11:45,020
这是现在的表中的行。

1163
01:11:45,020 --> 01:11:47,340
我想利用当前的表中的行，

1164
01:11:47,340 --> 01:11:49,950
我想要得到它的所有子。

1165
01:11:49,950 --> 01:11:51,940
请记住，DOM是一个层次结构树，

1166
01:11:51,940 --> 01:11:54,200
这意味着，元素有一个儿童的数目。

1167
01:11:54,200 --> 01:12:00,180
>> 儿童函数将要返回到我回来的所有的元素的数组

1168
01:12:00,180 --> 01:12:03,240
的孩子，在这种情况下，表中的行。

1169
01:12:03,240 --> 01:12:07,150
这仅仅是简单的细胞内的行。

1170
01:12:07,150 --> 01:12:09,230
我只是想在第一个单元格进行搜索。

1171
01:12:09,230 --> 01:12:13,090
这第一个功能，我说给该数组的第一个元素。

1172
01:12:13,090 --> 01:12:17,070
然后在文本的功能说我到底是什么，细胞内的

1173
01:12:17,070 --> 01:12:19,530
因为我想，要搜寻该文本。

1174
01:12:19,530 --> 01:12:21,040
最后，让我们将其转换为小写，

1175
01:12:21,040 --> 01:12:23,940
所以，我们可以做的文本不区分大小写查询。

1176
01:12:23,940 --> 01:12:29,990
最后，我们希望看到表内，如果该字符串包含字符串，我们正在寻找。

1177
01:12:29,990 --> 01:12:32,980
indexOf函数在JavaScript中做到了这一点。

1178
01:12:32,980 --> 01:12:37,060
它告诉我们这个字符串是否包含另一个字符串。

1179
01:12:37,060 --> 01:12:40,150
如果单元格包含的是真的，我在寻找什么，

1180
01:12:40,150 --> 01:12:42,140
然后我想，以确保将其显示出来。

1181
01:12:42,140 --> 01:12:45,330
show方法会说，“显示的元素。”

1182
01:12:45,330 --> 01:12:50,350
如果是这样的话，那么，这意味着什么，我寻找不包含

1183
01:12:50,350 --> 01:12:53,550
该行内的，所以我要隐藏的用户。

1184
01:12:53,550 --> 01:12:59,240
实现这一很好的过滤效果，我们不再看到整个表。

1185
01:12:59,240 --> 01:13:01,480
如果你感兴趣的以及如何使这个股票，

1186
01:13:01,480 --> 01:13:04,180
我们将在网上发布的源。但是，它真的很简单。

1187
01:13:04,180 --> 01:13:09,860
jQuery有可怕的这些动画的和操纵CSS属性的方法。

1188
01:13:09,860 --> 01:13:11,020
所以，这是对我来说。

1189
01:13:11,020 --> 01:13:15,560
>> 那么，摆在我们面前呢？你会看到在几天内，最终的项目建议书，是因为。

1190
01:13:15,560 --> 01:13:17,730
最终的项目建议将问你几个问题，

1191
01:13:17,730 --> 01:13:19,420
但其中将有三个里程碑 - 

1192
01:13:19,420 --> 01:13:22,840
一个一个“好”的里程碑，一个更好的里程碑，一个最好的。

1193
01:13:22,840 --> 01:13:25,870
真正的想法是帮助你们设置您的期望

1194
01:13:25,870 --> 01:13:29,160
所以，最低限度，你会很高兴与您的最终项目的输出

1195
01:13:29,160 --> 01:13:32,060
这将是“好”到目前为止，你所关心的。

1196
01:13:32,060 --> 01:13:34,540
但后来的利益，让你达到只需要一点点的东西更好的

1197
01:13:34,540 --> 01:13:37,680
最好的东西，我们也将推动你走向，以及排序。

1198
01:13:37,680 --> 01:13:40,660
CS50哈克一个马拉松，同时，在几个星期。

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点左右，如果你还醒着，我们将前往IHOP或带你回到校园。

1206
01:14:02,150 --> 01:14:04,380
目标是深入到最后的项目

1207
01:14:04,380 --> 01:14:06,190
旁边的同学和工作人员。

1208
01:14:06,190 --> 01:14:08,280
几天后是的CS50公平，

1209
01:14:08,280 --> 01:14:10,990
这是真正的意思是你们的机会来展示你的工作

1210
01:14:10,990 --> 01:14:12,700
本学期和取得的成就

1211
01:14:12,700 --> 01:14:15,610
而擦肩的相互感，每个人都做了。

1212
01:14:15,610 --> 01:14:17,850
随着中说，非常感谢到汤米和约瑟夫，

1213
01:14:17,850 --> 01:14:19,960
我们星期一见。

1214
01:14:19,960 --> 01:14:24,070
 [掌声]