1
00:00:00,000 --> 00:00:03,388
>> [音乐播放]

2
00:00:03,388 --> 00:00:09,196

3
00:00:09,196 --> 00:00:10,180
>> DAVID J.马兰：你好。

4
00:00:10,180 --> 00:00:12,600
让我们通过散步
习题集8混搭，

5
00:00:12,600 --> 00:00:15,880
这是要你来挑战
借鉴了谷歌地图的元素

6
00:00:15,880 --> 00:00:20,905
从谷歌新闻和混搭元素
它们连成一个网络小程序

7
00:00:20,905 --> 00:00:24,150
允许用户搜索
地图的本地新闻

8
00:00:24,150 --> 00:00:26,780
具体的城市，
城市和邮政编码。

9
00:00:26,780 --> 00:00:31,040
要做到这一点，我们要
集成一些HTML，CSS，PHP，SQL，

10
00:00:31,040 --> 00:00:34,390
JavaScript和技术
一般被称为AJAX为了

11
00:00:34,390 --> 00:00:36,850
创造这种身临其境
的用户体验。

12
00:00:36,850 --> 00:00:38,920
>> 让我们先为谷歌地图本身。

13
00:00:38,920 --> 00:00:41,220
当然，这是可能
熟悉的界面。

14
00:00:41,220 --> 00:00:45,070
但事实证明，谷歌地图
还提供了一个API--应用

15
00:00:45,070 --> 00:00:48,360
通过该编程interface--
你可以把谷歌地图的元素

16
00:00:48,360 --> 00:00:50,740
并整合成
你自己的应用程序。

17
00:00:50,740 --> 00:00:52,650
事实上，在本
过程中，你会

18
00:00:52,650 --> 00:00:55,140
找到一对夫妇的URL
特别有帮助的

19
00:00:55,140 --> 00:00:57,820
中提到的
规范习题集8，

20
00:00:57,820 --> 00:01:00,980
特别是本入门指南
引导或开发人员指南

21
00:01:00,980 --> 00:01:07,640
谷歌地图API版本3，以及
作为谷歌地图的JavaScript API

22
00:01:07,640 --> 00:01:10,260
v3的参考，这是一个
多一点神秘阅读

23
00:01:10,260 --> 00:01:14,600
但实际上所有的较低水平
什么函数或方法的细节

24
00:01:14,600 --> 00:01:18,220
和对象和属性，并
事件实际上都与API，

25
00:01:18,220 --> 00:01:20,720
在精神上非常相似
为[听不清]页。

26
00:01:20,720 --> 00:01:23,480
>> 现在，如果我们一起来看看
在谷歌新闻，你会

27
00:01:23,480 --> 00:01:25,370
也许是看到了一个熟悉的界面在这里。

28
00:01:25,370 --> 00:01:29,350
但事实证明，你也可以搜索
谷歌新闻的具体地域

29
00:01:29,350 --> 00:01:32,000
通过所谓地缘的HTTP参数。

30
00:01:32,000 --> 00:01:35,100
事实上，如果我放大
在这里，你会看到，

31
00:01:35,100 --> 00:01:41,672
我在
news.google.com/news/section?geo=02138。

32
00:01:41,672 --> 00:01:43,630
而且，事实上，如果我放大
出来，你会看到我

33
00:01:43,630 --> 00:01:47,090
看一个页面一大堆
意见剑桥，马萨诸塞州。

34
00:01:47,090 --> 00:01:50,620
>> 同时，如果我真的改变
URL不会是这样一个邮政编码，

35
00:01:50,620 --> 00:01:55,580
但东西有点混乱
像剑桥，马萨诸塞州+，

36
00:01:55,580 --> 00:02:00,740
其中，加为你的方式编码
在URL空格字符并按下回车键，

37
00:02:00,740 --> 00:02:02,907
你会看到我居然
看到几乎相同的消息。

38
00:02:02,907 --> 00:02:05,489
也许这是一个有点不同
因为实际上剑桥

39
00:02:05,489 --> 00:02:06,910
有多个邮政编码。

40
00:02:06,910 --> 00:02:09,410
现在我怎么会知道，和，
其实，我怎么会莫名其妙地

41
00:02:09,410 --> 00:02:12,940
配合城镇
在情况下，我邮政编码

42
00:02:12,940 --> 00:02:15,064
希望允许用户
查找要么？

43
00:02:15,064 --> 00:02:17,480
那么，事实证明，有
一个网站在那里被称为

44
00:02:17,480 --> 00:02:20,060
geonames.org这是
倡议有

45
00:02:20,060 --> 00:02:23,760
一个可以自由使用所有的数据库
各种地理信息，

46
00:02:23,760 --> 00:02:27,040
不仅对美国，而且还
对于其他国家也是如此。

47
00:02:27,040 --> 00:02:30,430
事实上，如果我去这个网址在这里，这
在问题设置也提到

48
00:02:30,430 --> 00:02:34,510
规范中，你会看到它3
一大堆的zip文件的清单

49
00:02:34,510 --> 00:02:36,400
其中任何一个都可以被你下载。

50
00:02:36,400 --> 00:02:39,900
事实上，对于这个问题集
你要下载us.zip。

51
00:02:39,900 --> 00:02:43,790
现在这个文件中，是一个整体
一堆文本格式的数据。

52
00:02:43,790 --> 00:02:47,760
这些文件是非常相似的一个
CSV--逗号分隔值file--

53
00:02:47,760 --> 00:02:51,294
但它实际上使用
标签来界定领域。

54
00:02:51,294 --> 00:02:53,710
现在，同时，如果你看
在这里我所强调的，

55
00:02:53,710 --> 00:02:56,459
在这个文件中的字段会
要的东西像国家代码，

56
00:02:56,459 --> 00:02:58,980
邮递区号，地名，
然后，以某种形式

57
00:02:58,980 --> 00:03:04,230
或其他，州，县，
社区，和更多。

58
00:03:04,230 --> 00:03:06,630
事实上，我已经
预先下载该文件。

59
00:03:06,630 --> 00:03:09,750
让我继续前进，这里 - 打开
us.text--，而事实上，你会

60
00:03:09,750 --> 00:03:16,660
看看我向下滚动到行16792
你会看到几条记录剑桥，

61
00:03:16,660 --> 00:03:19,120
马萨诸塞州和它的各种邮政编码。

62
00:03:19,120 --> 00:03:22,150
你也看到了有县，
我真的不一些数字

63
00:03:22,150 --> 00:03:24,500
明白，但也都
右侧的方式，

64
00:03:24,500 --> 00:03:27,170
一些GPS coordinates--
纬度和经度。

65
00:03:27,170 --> 00:03:30,440
这是伟大的，因为一个
谷歌地图API的功能

66
00:03:30,440 --> 00:03:33,670
是能够检测
你在哪里地理

67
00:03:33,670 --> 00:03:36,850
在GPS坐标的条款。

68
00:03:36,850 --> 00:03:40,210
>> 现在，让我们开始弄清楚如何
启动捆绑这些东西放在一起。

69
00:03:40,210 --> 00:03:42,900
我们已经给你一个整体
一堆分布代码，

70
00:03:42,900 --> 00:03:44,970
以及MySQL数据库。

71
00:03:44,970 --> 00:03:49,100
事实上，如果我拉一个phpMyAdmin的有
已经进口的，因为你很快就会，

72
00:03:49,100 --> 00:03:54,800
pset8.SQL，你会看到一个MySQL表
看起来是这样的，一个ID字段，国家

73
00:03:54,800 --> 00:03:57,400
代码，邮政编码，地名等。

74
00:03:57,400 --> 00:04:00,490
所有这些类型
列我只是推导

75
00:04:00,490 --> 00:04:03,870
通过阅读中的readme.txt
在此文件中指定的

76
00:04:03,870 --> 00:04:07,330
一个字段是否是整数，
或varchar等。

77
00:04:07,330 --> 00:04:10,510
>> 因此，我们已经创建了一个表
你给你的SQL命令

78
00:04:10,510 --> 00:04:12,770
执行创建
表中您自己的数据库，

79
00:04:12,770 --> 00:04:15,290
但实际上它暂无数据。

80
00:04:15,290 --> 00:04:19,600
相反，你将不得不
下载us.zip或任何国家的拉链

81
00:04:19,600 --> 00:04:21,500
从URL有文件。

82
00:04:21,500 --> 00:04:24,940
然后你将不得不写
在PHP命令行脚本的

83
00:04:24,940 --> 00:04:28,420
要打开该文本
文件，遍历其行，

84
00:04:28,420 --> 00:04:31,180
然后对每个
这些行执行插入

85
00:04:31,180 --> 00:04:34,940
到那个地方的表
在你的MySQL数据库。

86
00:04:34,940 --> 00:04:37,880
所以在这个过程结束时，你会
已运行该脚本最终

87
00:04:37,880 --> 00:04:39,610
只有一次在理论上。

88
00:04:39,610 --> 00:04:41,780
在现实中，你可能会
运行一堆倍

89
00:04:41,780 --> 00:04:45,460
同时试图修复各种错误。

90
00:04:45,460 --> 00:04:48,440
>> 最终，你将有一个
成千上万的真正的大数据库

91
00:04:48,440 --> 00:04:50,139
和数以千计的地域行。

92
00:04:50,139 --> 00:04:52,930
然后，你要放的进口
脚本放在一边，一旦它的工作

93
00:04:52,930 --> 00:04:55,140
和你的数据库是好的
和正确，然后

94
00:04:55,140 --> 00:04:58,880
你要进入到实际
实现混搭本身。

95
00:04:58,880 --> 00:05:01,670
混搭是要去看看
有点像这样。

96
00:05:01,670 --> 00:05:05,165
在mashup.cs50.net，我们
有一个工作人员的解决方案

97
00:05:05,165 --> 00:05:06,990
这看起来有点像这样。

98
00:05:06,990 --> 00:05:11,070
事实上，如果我点击这个报纸
剑桥，马萨诸塞州图标，

99
00:05:11,070 --> 00:05:13,300
你会看到一个旋转
简要然后图标

100
00:05:13,300 --> 00:05:16,370
有序列表，一个
文章项目符号列表

101
00:05:16,370 --> 00:05:18,280
与剑桥，马萨诸塞州。

102
00:05:18,280 --> 00:05:20,352
如果我点击查尔斯顿，
马萨诸塞州，

103
00:05:20,352 --> 00:05:21,685
我会看到相同的那个小镇。

104
00:05:21,685 --> 00:05:24,174
而且如果我点击
水城，马萨诸塞州，

105
00:05:24,174 --> 00:05:26,090
可能没有任何
从水城的消息，

106
00:05:26,090 --> 00:05:28,630
所以你会看到什么
像慢消息的一天。

107
00:05:28,630 --> 00:05:32,140
>> 现在，同时，在左上角是
一些熟悉的谷歌地图控件

108
00:05:32,140 --> 00:05:34,980
让你缩小，平移
上，下，左，右，

109
00:05:34,980 --> 00:05:37,360
也说明我们把有一个搜索框。

110
00:05:37,360 --> 00:05:40,910
所以，如果我搜索，坦率地说，
唯一的其他邮政编码，我知道，

111
00:05:40,910 --> 00:05:45,020
90210，我们将真正看到
加利福尼亚州贝弗利山庄。

112
00:05:45,020 --> 00:05:48,550
当点击它使我
加利福尼亚州和一大堆

113
00:05:48,550 --> 00:05:50,369
约比佛利山庄的消息。

114
00:05:50,369 --> 00:05:51,910
现在注意，也那里发生了什么。

115
00:05:51,910 --> 00:05:57,040
如果我这个时候搜索02138甚至
剑桥马萨诸塞州逗号或某些

116
00:05:57,040 --> 00:06:00,300
变体，你会得到一个
小自动完成下拉。

117
00:06:00,300 --> 00:06:03,840
现在，这是使用插件
一个名为jQuery库，

118
00:06:03,840 --> 00:06:05,732
而该插件被称为预输入。

119
00:06:05,732 --> 00:06:07,440
我们简单地通读
该文件，

120
00:06:07,440 --> 00:06:13,150
下载的js文件整合
入分配代码，这样你

121
00:06:13,150 --> 00:06:16,900
最终可以编写代码，
填补了下拉菜单，自动

122
00:06:16,900 --> 00:06:19,350
选择或自动建议。

123
00:06:19,350 --> 00:06:23,820
>> 现在分配码，虽然，
您收到没有做几乎一样多。

124
00:06:23,820 --> 00:06:26,860
你得到了谷歌地图嵌入和
你左上角的控制，

125
00:06:26,860 --> 00:06:28,240
你得到的搜索框。

126
00:06:28,240 --> 00:06:32,760
但是，如果我键入类似
02138，没有地方都没有发现。

127
00:06:32,760 --> 00:06:34,730
所以这将是
一个在这里我们的目标。

128
00:06:34,730 --> 00:06:37,430
此外，如果你走一步
回头看看地图本身，

129
00:06:37,430 --> 00:06:38,950
没有任何消息。

130
00:06:38,950 --> 00:06:41,780
即使我点击
拖动，没有标记实际上

131
00:06:41,780 --> 00:06:45,560
出现了因为新闻
挑战是留给你。

132
00:06:45,560 --> 00:06:48,490
>> 让我们一起来看看，然后
在分配代码。

133
00:06:48,490 --> 00:06:51,460
一旦你下载了
pset8.zip并解压缩它

134
00:06:51,460 --> 00:06:54,430
到您的虚拟主机目录
在CS50电器，

135
00:06:54,430 --> 00:06:56,550
你会看到这些
目录里面这里。

136
00:06:56,550 --> 00:07:00,200
Bin--一般代表
二进制可执行programs--

137
00:07:00,200 --> 00:07:04,870
包括，如在pset7，一些PHP
文件，其他文件包括，

138
00:07:04,870 --> 00:07:06,710
那么大众，这是
该所需要的文件

139
00:07:06,710 --> 00:07:09,369
要公开访问
以使用浏览器的用户。

140
00:07:09,369 --> 00:07:11,410
让我们在看看
bin目录，我们将

141
00:07:11,410 --> 00:07:13,890
看到有一个文件
已经有所谓的进口。

142
00:07:13,890 --> 00:07:17,591
如果我们打开这个用gedit，我们拭目以待
，不幸的是，没有太多

143
00:07:17,591 --> 00:07:18,090
那里。

144
00:07:18,090 --> 00:07:20,250
所有这一切是存在的，但是，
是一个家当顶部

145
00:07:20,250 --> 00:07:23,410
指定哪个
interpreter--在这种情况下PHP--

146
00:07:23,410 --> 00:07:25,759
应该用于实际
执行此文件。

147
00:07:25,759 --> 00:07:27,550
但它说：
TODO就是你

148
00:07:27,550 --> 00:07:31,130
将需要编写一些代码
这可能需要配置

149
00:07:31,130 --> 00:07:35,820
文件，该文件中包含的目录
因为我们之前与PHP文件来完成。

150
00:07:35,820 --> 00:07:38,180
然后你要
必须以某种方式打开

151
00:07:38,180 --> 00:07:41,920
us.text你大概
已经拉开。

152
00:07:41,920 --> 00:07:44,690
那么你将不得不
遍历该文件中的行，

153
00:07:44,690 --> 00:07:47,800
也许使用的一些功能
在本说明书中建议的。

154
00:07:47,800 --> 00:07:51,390
然后将每个那些
行到MySQL数据库

155
00:07:51,390 --> 00:07:54,940
通过使用查询功能，其中
我们再假设您with--

156
00:07:54,940 --> 00:07:58,010
或者至少一个变体
其在functions.php中，

157
00:07:58,010 --> 00:07:59,560
我们将在短短的一瞬间看到的。

158
00:07:59,560 --> 00:08:04,430
>> 现在，让我们关闭进口和回
我们的目录，这个时候进入

159
00:08:04,430 --> 00:08:05,300
包括。

160
00:08:05,300 --> 00:08:09,210
如果我做的LS那里，你会看到
三个文件很喜欢习题集7。

161
00:08:09,210 --> 00:08:13,760
让我们快速浏览一下，
例如，在config.php中。

162
00:08:13,760 --> 00:08:16,730
在那里，是较少的线路
比以前，它

163
00:08:16,730 --> 00:08:20,712
看来这个文件包括
constants.php和的functions.php。

164
00:08:20,712 --> 00:08:23,670
我们使用略有不同
技术这阵子实际

165
00:08:23,670 --> 00:08:30,910
指定这些文件是相对的
到当前目录__ DIR__

166
00:08:30,910 --> 00:08:35,280
代表任何目录本
文件的config.php，本身英寸

167
00:08:35,280 --> 00:08:37,600
因此，这是一个比较
规定明确的方式

168
00:08:37,600 --> 00:08:40,100
你想要的其他文件要求。

169
00:08:40,100 --> 00:08:44,020
>> 现在，如果我关闭这个文件，
开拓constants.php相反，

170
00:08:44,020 --> 00:08:47,430
你会看到一个文件，很容易让人想起
以习题集7的为好，尽管

171
00:08:47,430 --> 00:08:50,050
使用不同的数据库名为pset8。

172
00:08:50,050 --> 00:08:54,020
最后，在functions.php中，
我们看到的只是一个功能

173
00:08:54,020 --> 00:08:55,942
这段时间称为查询。

174
00:08:55,942 --> 00:08:59,150
这几乎是相同的，除非我们处理
周围的一点点错误，这个时候

175
00:08:59,150 --> 00:09:02,860
不同的，但它的用法是
同样在问题设置7。

176
00:09:02,860 --> 00:09:08,090
>> 现在，让我们回到我们的pset8
目录下，进入公众，并在那里

177
00:09:08,090 --> 00:09:14,420
如果我做的LS，你会看到this--
articles.php，index.html的，search.php中，

178
00:09:14,420 --> 00:09:16,940
和update.php--所有文件。

179
00:09:16,940 --> 00:09:22,010
然后的CSS字体，IMG和
JS目录很喜欢pset7。

180
00:09:22,010 --> 00:09:24,660
>> 让我们来看看
index.html的，这是

181
00:09:24,660 --> 00:09:27,290
要真正的
入口点smashup。

182
00:09:27,290 --> 00:09:31,820
现在的index.html，你会看到一个整体
一堆头部链接的元素，

183
00:09:31,820 --> 00:09:36,540
具体地说，引导我们自己
CSS后面一大堆剧本

184
00:09:36,540 --> 00:09:41,520
标签之类的地图，API
本身，一个特殊的标志与标签

185
00:09:41,520 --> 00:09:44,950
我们在提到公用事业
规范提供给您，

186
00:09:44,950 --> 00:09:48,420
jQuery的本身，引导
本身，而另一个库

187
00:09:48,420 --> 00:09:50,990
所谓的下划线其中
我们谈论的规范。

188
00:09:50,990 --> 00:09:57,031
喜欢的jquery.js Underscore.js
是一个JavaScript库

189
00:09:57,031 --> 00:10:00,280
有一大堆的功能
有很多人在世界上的心愿

190
00:10:00,280 --> 00:10:02,020
存在于JavaScript的本身。

191
00:10:02,020 --> 00:10:04,560
因此，所有的这些都
其实也挺受欢迎。

192
00:10:04,560 --> 00:10:07,140
我们也提到预输入
这是库

193
00:10:07,140 --> 00:10:11,180
这是否自动完成下拉和
最后一个链接到我们自己的JavaScript。

194
00:10:11,180 --> 00:10:13,880
>> 同时，也许
值得庆幸的是，这种混搭

195
00:10:13,880 --> 00:10:17,550
由相对较少的驱动
HTML这儿底部。

196
00:10:17,550 --> 00:10:22,330
我们已经指定一个div公告
我们的身体类容器的液体。

197
00:10:22,330 --> 00:10:24,610
这一点，每个引导的
文档，只需

198
00:10:24,610 --> 00:10:29,840
意味着该格将要填充
视口或浏览器窗口充分。

199
00:10:29,840 --> 00:10:33,020
>> 与此同时，下面我们有一个div
这是打开和立即关闭

200
00:10:33,020 --> 00:10:34,790
地图画布的唯一ID。

201
00:10:34,790 --> 00:10:37,400
现在，这是谷歌
地图文档

202
00:10:37,400 --> 00:10:42,490
它的API，因此我只需要
有一个空的div到其中注入，

203
00:10:42,490 --> 00:10:44,470
最终，一个实际的谷歌地图。

204
00:10:44,470 --> 00:10:46,310
但更多的是在短短位。

205
00:10:46,310 --> 00:10:48,850
>> 最后，还有一个表
这里里面它

206
00:10:48,850 --> 00:10:52,930
实现文本框起来左上
在我们的界面进行搜索。

207
00:10:52,930 --> 00:10:54,730
请注意，我们使用
有点自举

208
00:10:54,730 --> 00:10:57,670
这里too--之类的东西
表单内联和形式的组。

209
00:10:57,670 --> 00:11:00,080
我们已经给前
形式独特的ID。

210
00:11:00,080 --> 00:11:04,510
然后，最终，我居然有
输入类型，这是非常熟悉的，

211
00:11:04,510 --> 00:11:06,440
其ID为q。

212
00:11:06,440 --> 00:11:07,230
只是一个约定。

213
00:11:07,230 --> 00:11:09,234
Q为query--可以有
被称为什么。

214
00:11:09,234 --> 00:11:11,400
然后占位符，
同时，在城市，州，

215
00:11:11,400 --> 00:11:16,200
和邮政编码，你可能还记得
看到我们的混搭演示更早。

216
00:11:16,200 --> 00:11:17,980
让我们关闭这个文件。

217
00:11:17,980 --> 00:11:24,460
>> 现在就来看看PHP文件
等待，然后JavaScript文件。

218
00:11:24,460 --> 00:11:27,700
在我们的PHP文件，我们已经
已经实施了您，

219
00:11:27,700 --> 00:11:29,960
例如，更新。

220
00:11:29,960 --> 00:11:35,060
Update.php--我们不会花大
时间简而言之上这里 - 量

221
00:11:35,060 --> 00:11:38,400
是文件，我们的
JavaScript代码是要

222
00:11:38,400 --> 00:11:41,610
通过AJAX联系该
异步技术，是

223
00:11:41,610 --> 00:11:45,980
内置的JavaScript，这些天来的
将允许我们问update.php

224
00:11:45,980 --> 00:11:47,410
了解更多信息。

225
00:11:47,410 --> 00:11:50,045
>> 具体来说，随时随地
用户拖动地图

226
00:11:50,045 --> 00:11:53,310
或执行搜索，搜索跳转
用户到另一个位置，

227
00:11:53,310 --> 00:11:55,250
我们的JavaScript代码，
因为我们很快就会看到，是

228
00:11:55,250 --> 00:11:59,610
要调用update.php
并要求10个左右的标记

229
00:11:59,610 --> 00:12:02,630
视基于内
上的全球定位系统坐标

230
00:12:02,630 --> 00:12:06,510
顶部和底部的
该地图的角落。

231
00:12:06,510 --> 00:12:10,520
那么我们就可以重新填充地图现在
在用户已经移动，以便在屏幕

232
00:12:10,520 --> 00:12:14,210
看到大概10新
标记不同的城市。

233
00:12:14,210 --> 00:12:18,340
同时，该文件是最终
要执行一个SQL查询

234
00:12:18,340 --> 00:12:21,680
对我们的数据库
表称为地方，

235
00:12:21,680 --> 00:12:26,380
即将返回的
10个或更少的位置。

236
00:12:26,380 --> 00:12:32,620
>> 同时，在articles.php，是另一种
文件中，我们已经写的全部内容。

237
00:12:32,620 --> 00:12:35,820
它是在精神非常相似
习题集7的查找，

238
00:12:35,820 --> 00:12:39,450
其中接触雅虎财经为您服务。

239
00:12:39,450 --> 00:12:43,710
此文件联系人谷歌新闻
对你来说，最终抓

240
00:12:43,710 --> 00:12:46,050
机器可读
version--的东西

241
00:12:46,050 --> 00:12:49,720
所谓的新闻RSS format--
剑桥或比佛利山庄

242
00:12:49,720 --> 00:12:52,880
或任何城镇您搜索
基于该geoparameter。

243
00:12:52,880 --> 00:12:57,250
我们分析了RSS，这仅仅是一个
的标记语言类型称为XML，

244
00:12:57,250 --> 00:13:00,740
然后我们实际上
它返回到浏览器

245
00:13:00,740 --> 00:13:03,570
和你的JavaScript代码，
具体而言，在一种格式称为

246
00:13:03,570 --> 00:13:06,097
JSON，JavaScript对象符号。

247
00:13:06,097 --> 00:13:08,180
现在你可以在看
specification--我们点你

248
00:13:08,180 --> 00:13:10,720
你怎么能真正看到
一些JSON到来back--的

249
00:13:10,720 --> 00:13:15,210
这个功能最终
让你填充这些弹出式菜单，以便

250
00:13:15,210 --> 00:13:16,960
当你点击
在地图上的标记

251
00:13:16,960 --> 00:13:19,430
你真正看到一大堆
子弹，其每一个

252
00:13:19,430 --> 00:13:21,020
链接的文章。

253
00:13:21,020 --> 00:13:25,000
>> 现在，让我们来看看最后一个
PHP文件，其中，幸运的是，不

254
00:13:25,000 --> 00:13:27,970
有很多事情要做on--
只是一个相当大的TODO。

255
00:13:27,970 --> 00:13:32,170
现在这个文件声明
数组称为地方。

256
00:13:32,170 --> 00:13:35,980
然后最终打印
在JSON format--数组

257
00:13:35,980 --> 00:13:38,720
漂亮的印刷，它只是使
事情更容易调试。

258
00:13:38,720 --> 00:13:41,480
不幸的是，在
中间还有这个TODO，

259
00:13:41,480 --> 00:13:46,890
这就要求你搜索
数据库匹配名额地理HTTP

260
00:13:46,890 --> 00:13:47,490
参数。

261
00:13:47,490 --> 00:13:49,865
>> 而且，事实上，这将
是你challenges--之一

262
00:13:49,865 --> 00:13:54,240
在这里实现这个功能
所以，当你联系这个文件

263
00:13:54,240 --> 00:14:00,610
如搜索的URL。 PHP的？地缘=东西，
你的代码最终会返回一个JSON

264
00:14:00,610 --> 00:14:05,020
在所有的地方阵列您
匹配输入该数据库表。

265
00:14:05,020 --> 00:14:08,960
因此，如果在剑桥的用户类型，
在这里你的文件的search.php

266
00:14:08,960 --> 00:14:12,680
最终应返回一个JSON数组
所有剑桥的比赛，

267
00:14:12,680 --> 00:14:16,990
这可能是在马萨诸塞州
但也可以是甚至其他地方。

268
00:14:16,990 --> 00:14:21,040
>> 最后，让我们来看看两款
这是静态的ultimately--文件

269
00:14:21,040 --> 00:14:23,680
你的CSS文件，你的JavaScript文件。

270
00:14:23,680 --> 00:14:26,779
如果我进入我们的CSS目录，
还有一大堆的文件存在，

271
00:14:26,779 --> 00:14:28,070
但他们大多是图书馆。

272
00:14:28,070 --> 00:14:31,530
我要去看看，
具体地说，在styles.css的，

273
00:14:31,530 --> 00:14:35,440
这是我们自己的全球CSS那
将风格化这整个混搭。

274
00:14:35,440 --> 00:14:38,840
我将它留给你通读
在本文的评论，但是，概括地说，

275
00:14:38,840 --> 00:14:43,490
这是确保的CSS我们
混搭，默认情况下开箱，

276
00:14:43,490 --> 00:14:46,950
看起来正是我们想要它 - 的方式
与地图填充视图端口

277
00:14:46,950 --> 00:14:49,720
和与搜索
框在顶部左边。

278
00:14:49,720 --> 00:14:52,870
我们还采取了自由
风格化的预输入下拉

279
00:14:52,870 --> 00:14:55,170
菜单一点点为好。

280
00:14:55,170 --> 00:14:58,030
>> 最重要的文件
也许是这个问题集

281
00:14:58,030 --> 00:15:01,070
这是最后一个，scripts.js。

282
00:15:01,070 --> 00:15:03,800
在你的JS目录
甚至更多的文件。

283
00:15:03,800 --> 00:15:08,090
所有这些都是库文件
除了这一个，scripts.js。

284
00:15:08,090 --> 00:15:11,460
如果我们打开这个了，让我们把我们的
通过功能决赛之旅，

285
00:15:11,460 --> 00:15:13,820
内置到该文件
为您和您注意

286
00:15:13,820 --> 00:15:16,200
为今后的待办事项。

287
00:15:16,200 --> 00:15:19,110
>> 在该文件的顶部，
三个全局变量。

288
00:15:19,110 --> 00:15:22,910
一个用于在地图中，这是会
做个参考我们的谷歌地图。

289
00:15:22,910 --> 00:15:25,510
你可以把它想象
排序为指针。

290
00:15:25,510 --> 00:15:27,710
同时，我们有
另一个全局变量

291
00:15:27,710 --> 00:15:31,500
叫信息，这似乎是
存储调用的返回值

292
00:15:31,500 --> 00:15:34,170
新google.maps.InfoWindow。

293
00:15:34,170 --> 00:15:37,835
JavaScript的支持对象，其中
在精神上非常类似Struts的。

294
00:15:37,835 --> 00:15:40,250
什么这行
我们的目的是做

295
00:15:40,250 --> 00:15:42,820
创造了一种新的信息
在存储器中，然后窗口

296
00:15:42,820 --> 00:15:46,330
围绕保持一个参考
其在一个叫做信息的变量。

297
00:15:46,330 --> 00:15:48,330
在那些之间，
同时，就是出现

298
00:15:48,330 --> 00:15:51,060
是一个空的JavaScript
阵列称为标记。

299
00:15:51,060 --> 00:15:55,392
所有这些报纸的图标，或者你
完全可以选择其他图标，

300
00:15:55,392 --> 00:15:57,350
将要被存储
最终在这个阵列

301
00:15:57,350 --> 00:16:01,570
这样我们就可以很方便地添加到
地图，从地图中删除。

302
00:16:01,570 --> 00:16:03,990
>> 现在，让我们向下滚动
一点点，高手

303
00:16:03,990 --> 00:16:07,690
通过代码将是
一旦执行，因为DOM或文档

304
00:16:07,690 --> 00:16:10,480
对象模型或
本身页面已准备就绪。

305
00:16:10,480 --> 00:16:12,942
回想一下，这个语法
这里只是简单规定

306
00:16:12,942 --> 00:16:14,900
下面的代码
应该只被执行

307
00:16:14,900 --> 00:16:17,840
当浏览器已完成
加载一切。

308
00:16:17,840 --> 00:16:19,750
>> 我们首先声明
一大堆的风格，

309
00:16:19,750 --> 00:16:22,410
这结束了风格化
地图按规范。

310
00:16:22,410 --> 00:16:24,790
然后，我们声明
一大堆的选项，

311
00:16:24,790 --> 00:16:28,630
这进一步定制谷歌
图，我们即将嵌入。

312
00:16:28,630 --> 00:16:32,090
然后，我们用一点jQuery代码，
这是在一个更详细一点解释

313
00:16:32,090 --> 00:16:35,000
在规范，抢
该元素，地图帆布

314
00:16:35,000 --> 00:16:36,980
我们因此唯一标识。

315
00:16:36,980 --> 00:16:40,640
然后这条线在这里
什么似乎奇迹般地给我们

316
00:16:40,640 --> 00:16:43,560
一个谷歌地图里面
我们自己的应用程序，

317
00:16:43,560 --> 00:16:47,020
存储于其上的参考
在该变量称为地图。

318
00:16:47,020 --> 00:16:50,550
>> 最后，到这里我们注册
什么叫做监听器。

319
00:16:50,550 --> 00:16:54,690
想back--方式，方法
back--零一周CS50

320
00:16:54,690 --> 00:16:57,430
当我们看着划痕和
通过散步支持

321
00:16:57,430 --> 00:16:59,935
通过对东西叫做
事件和广播。

322
00:16:59,935 --> 00:17:01,810
你可能没有使用
它自己，但它的

323
00:17:01,810 --> 00:17:03,900
一种机制，使一个
浏览器在这种情况下

324
00:17:03,900 --> 00:17:07,940
能够吸引我们的注意力时，它的
准备去实际执行一些代码。

325
00:17:07,940 --> 00:17:12,170
在这种情况下，它会听
在地图名为空闲的事件。

326
00:17:12,170 --> 00:17:14,930
这意味着该浏览器具有
装完了谷歌地图。

327
00:17:14,930 --> 00:17:18,380
在这一点上称为函数
配置最终应

328
00:17:18,380 --> 00:17:19,339
被执行。

329
00:17:19,339 --> 00:17:22,510
该功能，配置，
我们会看到，写的是我们。

330
00:17:22,510 --> 00:17:24,550
>> 现在，到这里是一个函数
，不幸的是，

331
00:17:24,550 --> 00:17:25,871
仅仅是一个TODO添加标记。

332
00:17:25,871 --> 00:17:28,620
每规范。你将需要
实际上是写代码

333
00:17:28,620 --> 00:17:32,840
增加了一个marker--是否看起来
像报纸或图钉，

334
00:17:32,840 --> 00:17:35,360
什么else--到谷歌地图。

335
00:17:35,360 --> 00:17:37,720
现在这里是功能
所谓的配置。

336
00:17:37,720 --> 00:17:40,390
我将它留给你阅读
通过对此进行了更详细地说，

337
00:17:40,390 --> 00:17:42,600
但要意识到我们增加
一堆更多的听众

338
00:17:42,600 --> 00:17:46,620
这样我们就可以在执行代码
用户点击和拖动地图。

339
00:17:46,620 --> 00:17:50,730
我们也有代码，在这里
初始化的预输入插件

340
00:17:50,730 --> 00:17:53,120
使下拉
菜单实际工作。

341
00:17:53,120 --> 00:17:55,690
>> 但是，让我们只关注一个
这里几个地方。

342
00:17:55,690 --> 00:17:57,590
具体来说，这在这里做。

343
00:17:57,590 --> 00:18:00,410
我会推迟到网上
文件和本说明书

344
00:18:00,410 --> 00:18:02,530
对于如何填补这个TODO。

345
00:18:02,530 --> 00:18:05,890
但是，简单地说，这个库
预输入允许你传递

346
00:18:05,890 --> 00:18:09,790
在什么通常已知为模板，
其中有一些变量占位符

347
00:18:09,790 --> 00:18:13,690
非常类似于在精神上的printf的％。* S。

348
00:18:13,690 --> 00:18:16,030
但在这种情况下，该
按照规范的模板

349
00:18:16,030 --> 00:18:18,760
允许您指定
你想要什么变数

350
00:18:18,760 --> 00:18:24,880
从该公司的数据来注入
从类似的PHP回

351
00:18:24,880 --> 00:18:29,810
你写的文件
被发射JSON输出。

352
00:18:29,810 --> 00:18:35,170
>> 现在，到这里认识到我们是
监听预输入选择

353
00:18:35,170 --> 00:18:38,050
当用户实际进行
搜索并选择一个值。

354
00:18:38,050 --> 00:18:40,270
这就是我们实际上是
要侦听

355
00:18:40,270 --> 00:18:42,250
并执行一些代码作为一个结果。

356
00:18:42,250 --> 00:18:45,300
然后我们继续配置
混搭只是一点点。

357
00:18:45,300 --> 00:18:48,000
而且，最终，我们称之为
此功能更新。

358
00:18:48,000 --> 00:18:49,640
它更新在屏幕上的标记。

359
00:18:49,640 --> 00:18:51,529
更多关于在短短的时刻。

360
00:18:51,529 --> 00:18:53,570
同时，有几个
小功能在这里。

361
00:18:53,570 --> 00:18:56,820
其中之一是hideInfo其中
简单地关闭信息窗口。

362
00:18:56,820 --> 00:19:00,020
另一项功能在这里，最终
不会太久，删除标记。

363
00:19:00,020 --> 00:19:03,580
这是怎么回事撤消什么
您添加标记功能一样。

364
00:19:03,580 --> 00:19:04,960
再往下这里是搜索。

365
00:19:04,960 --> 00:19:08,610
而这一次很有趣，因为我们
写的JavaScript代码是

366
00:19:08,610 --> 00:19:13,490
要谈的search.php上
服务器，并取回了一些回应。

367
00:19:13,490 --> 00:19:16,110
>> 你，当然，还是会
需要实现s​​earch.php中，

368
00:19:16,110 --> 00:19:18,310
但是，我们已经实现了
JavaScript代码那

369
00:19:18,310 --> 00:19:22,480
将要处理实际执行
搜索从文本框。

370
00:19:22,480 --> 00:19:25,340
具体地，通知
这个函数在这里，

371
00:19:25,340 --> 00:19:29,160
搜索，并调用的search.php
由称为方法

372
00:19:29,160 --> 00:19:31,072
获得JSON，我们在看到讲座。

373
00:19:31,072 --> 00:19:32,780
这里的语法
有一点不同

374
00:19:32,780 --> 00:19:37,110
从讲座中，我们正在使用
jQuery的所谓承诺的接口。

375
00:19:37,110 --> 00:19:38,479
更多关于在规格。

376
00:19:38,479 --> 00:19:40,520
这只是意味着我们的
目的现在有

377
00:19:40,520 --> 00:19:43,870
有两个特殊功能我们
需要用点符号调用

378
00:19:43,870 --> 00:19:46,230
在此之后，立即调用得到JSON。

379
00:19:46,230 --> 00:19:47,510
一个被称为完成。

380
00:19:47,510 --> 00:19:49,870
一个被称为失败。

381
00:19:49,870 --> 00:19:51,790
你可以认为这些
作为成功的处理程序

382
00:19:51,790 --> 00:19:54,960
和故障处理程序只
在出错的时候。

383
00:19:54,960 --> 00:19:57,760
>> 现在，让我们来看看最后的
情侣在此文件中的函数。

384
00:19:57,760 --> 00:20:00,180
到这里是一个函数
所谓showInfo，这

385
00:20:00,180 --> 00:20:03,090
示出了其中的一个信息
小信息窗口的

386
00:20:03,090 --> 00:20:05,380
弹出当用户点击一个标记。

387
00:20:05,380 --> 00:20:08,470
这儿是进一步
该更新功能

388
00:20:08,470 --> 00:20:10,510
我们已经实现了你。

389
00:20:10,510 --> 00:20:15,250
它确定地图的边界。

390
00:20:15,250 --> 00:20:19,360
什么是GPS坐标的
东北和西南地区在这里角落。

391
00:20:19,360 --> 00:20:22,780
我们已经准备了一些HDP参数
这里，然后通过他们的最终

392
00:20:22,780 --> 00:20:26,160
到update.php，我们已经
还实施了你。

393
00:20:26,160 --> 00:20:31,390
最终回来一些JSON
从文件名为update.php

394
00:20:31,390 --> 00:20:34,050
然后删除任何
在屏幕上标记

395
00:20:34,050 --> 00:20:36,650
然后遍历
这是回来的数据

396
00:20:36,650 --> 00:20:40,350
来自update.php，这
又仅仅是一个JSON阵列。

397
00:20:40,350 --> 00:20:45,130
然后将其最终增加了一个标记
每个那些地方，处理故障

398
00:20:45,130 --> 00:20:47,750
或错误，这很可能会发生。

399
00:20:47,750 --> 00:20:51,550
>> 现在只给你如何的味道
可能去调试这个项目，

400
00:20:51,550 --> 00:20:55,420
意识到我已经打开
在此推动这一标签这个URL，

401
00:20:55,420 --> 00:21:01,320
pset8 / articles.php？GEO = 02138。

402
00:21:01,320 --> 00:21:04,050
现在，再次，有关文章
PHP，我们实施了您

403
00:21:04,050 --> 00:21:06,320
所以这是没有这么多
你会用什么

404
00:21:06,320 --> 00:21:08,190
调试，而是技术。

405
00:21:08,190 --> 00:21:10,590
请注意，我搜索了
在这里剑桥的邮政编码，

406
00:21:10,590 --> 00:21:15,260
我已经得到了回来，事实上，一个JSON
这里面的JSON对象数组

407
00:21:15,260 --> 00:21:17,640
两个keys--链接和标题。

408
00:21:17,640 --> 00:21:19,860
>> 所以这个功能
工作已经给你。

409
00:21:19,860 --> 00:21:24,330
但是手动的这种技术会
像这样的东西一个URL像

410
00:21:24,330 --> 00:21:31,710
sea​​rch.php中？地缘=剑桥或02138或
无论用户已键入的应

411
00:21:31,710 --> 00:21:35,770
证明是非常宝贵的，你，你自己，尝试
要弄清楚到底是否为什么

412
00:21:35,770 --> 00:21:38,510
sea​​rch.php中工作正常与否。

413
00:21:38,510 --> 00:21:41,720
>> 最后的话，你有
一些待办事项在你前面。

414
00:21:41,720 --> 00:21:44,250
你会第一工具
即进口脚本

415
00:21:44,250 --> 00:21:46,520
读取us.text到你的数据库。

416
00:21:46,520 --> 00:21:48,760
你那么将需要
实施的search.php

417
00:21:48,760 --> 00:21:51,320
因此，它的行为完全为指定。

418
00:21:51,320 --> 00:21:54,170
你那么会想
把重点放在scripts.js

419
00:21:54,170 --> 00:21:57,520
最终实现
这些夫妇待办事项，

420
00:21:57,520 --> 00:21:59,950
包括配置
而该模板，

421
00:21:59,950 --> 00:22:03,220
添加标记，删除标记，并
那么最后，但并非最不重要的一

422
00:22:03,220 --> 00:22:04,330
个人风格。

423
00:22:04,330 --> 00:22:07,477
>> 一旦你有你的工作混搭
很喜欢我们的目标在眼前

424
00:22:07,477 --> 00:22:09,560
是为你增添个人
触摸到你的混搭，

425
00:22:09,560 --> 00:22:11,290
无论是美学或功能。

426
00:22:11,290 --> 00:22:13,950
采取混搭曾经如此
稍微到一个新的水平。

427
00:22:13,950 --> 00:22:18,330
只要你推超越自己
你熟悉规范本身

428
00:22:18,330 --> 00:22:20,840
拿起一种技术
新的，哪怕它只是

429
00:22:20,840 --> 00:22:25,610
唯美的东西像改变
您正在使用的地图布局，

430
00:22:25,610 --> 00:22:28,070
我们预期范围
将得到满足。

431
00:22:28,070 --> 00:22:30,260
这则是习题集8混搭。

432
00:22:30,260 --> 00:22:33,070
敬请期待更多的
规范和好运

433
00:22:33,070 --> 00:22:36,400
解决这个，你最后的
CS50问题集如初。

434
00:22:36,400 --> 00:22:39,750
>> [音乐播放]

435
00:22:39,750 --> 00:22:43,542