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
>> 你，當然，還是會
需要實現search.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