1 00:00:00,000 --> 00:00:09,870 2 00:00:09,870 --> 00:00:13,360 >> ZAMYLA陳:好了,我們在這裡, 最後對設置在CS50。 3 00:00:13,360 --> 00:00:17,040 從有你們表示祝賀 走了這麼遠,因為你的第一個Hello 4 00:00:17,040 --> 00:00:20,090 世界和印刷上 金字塔的馬里奧。 5 00:00:20,090 --> 00:00:21,930 你做了一個網站的最後一周。 6 00:00:21,930 --> 00:00:25,110 而我們將要製作一個又一個 這個星期,一個可以讓你 7 00:00:25,110 --> 00:00:28,570 帶動周邊​​的哈佛校園裡,採摘 高達CS50工作人員和 8 00:00:28,570 --> 00:00:31,910 把他們回到自己的 民居。 9 00:00:31,910 --> 00:00:35,400 >> 現在,上週我們曾在PHP中, 服務器端語言。 10 00:00:35,400 --> 00:00:38,250 對於這對集,我們就要介紹 到JavaScript中,這是一個 11 00:00:38,250 --> 00:00:40,610 客戶端語言。 12 00:00:40,610 --> 00:00:44,020 因此,讓我們來看看一些 公司所提供的分銷代碼 13 00:00:44,020 --> 00:00:46,210 你為這個對集。 14 00:00:46,210 --> 00:00:49,700 在JavaScript文件夾中,將有 是一堆JavaScript文件。 15 00:00:49,700 --> 00:00:53,600 >> 有buildings.js,它包含一個 哈佛周圍建築物的數組 16 00:00:53,600 --> 00:00:57,340 校園裡有他們的信息 和位置。 17 00:00:57,340 --> 00:01:01,630 Houses.js是哈佛的數組 住宅房屋與他們的 18 00:01:01,630 --> 00:01:04,030 經度和緯度。 19 00:01:04,030 --> 00:01:08,600 Passengers.js包含的陣列 乘客中,CS50工作人員 20 00:01:08,600 --> 00:01:11,640 你會被帶回至 他們居住的房子。 21 00:01:11,640 --> 00:01:16,450 >> Math3D.js,它包含了很多 功能做的運動。 22 00:01:16,450 --> 00:01:19,500 如果你是數學頭腦,然後 歡迎您來我看看。 23 00:01:19,500 --> 00:01:23,530 但你並不需要了解 一切都在那裡。 24 00:01:23,530 --> 00:01:26,710 Shuttle.js,與交易 航天飛機的運動。 25 00:01:26,710 --> 00:01:31,450 和index.html的是主頁, 一切都發生了,真的,那裡的 26 00:01:31,450 --> 00:01:33,610 用戶互動的網站。 27 00:01:33,610 --> 00:01:39,110 >> Service.css是CSS樣式表, 其中除了Twitter的 28 00:01:39,110 --> 00:01:43,960 引導圖書館,控制 如何index.html的樣子。 29 00:01:43,960 --> 00:01:48,190 然後我們也有service.js,這 包含服務功能 30 00:01:48,190 --> 00:01:49,010 航天飛機。 31 00:01:49,010 --> 00:01:53,010 下面是你要去的地方是 填寫一些待辦事項的的。 32 00:01:53,010 --> 00:01:56,600 >> 現在讓我們來看看對象和 關聯數組在JavaScript中, 33 00:01:56,600 --> 00:01:59,360 其中,對於所有意圖和目的, 是可以互換的。 34 00:01:59,360 --> 00:02:03,030 如果我想使一個對象的變量 所謂的魔杖,我會 35 00:02:03,030 --> 00:02:04,290 聲明它。 36 00:02:04,290 --> 00:02:09,350 和那些大括號內,我會 指定,其核心是獨角獸,木 37 00:02:09,350 --> 00:02:12,710 是櫻桃,並且長度為13。 38 00:02:12,710 --> 00:02:16,370 >> 現在,我也可以訪問值 使用對象 39 00:02:16,370 --> 00:02:18,270 關聯數組表示法。 40 00:02:18,270 --> 00:02:22,610 所以魔杖指數的核心,我可以設置 這等於麒麟,或 41 00:02:22,610 --> 00:02:24,710 檢查如果我需要。 42 00:02:24,710 --> 00:02:28,890 或者,我可以使用點運算符 wand.wood等於櫻桃,和 43 00:02:28,890 --> 00:02:30,280 依此類推等等。 44 00:02:30,280 --> 00:02:33,930 所以你看到,關聯數組和 在JavaScript對象都將是 45 00:02:33,930 --> 00:02:37,710 互換和意志 進來很方便。 46 00:02:37,710 --> 00:02:41,570 >> 然後,我們看到建築的數組 在buildings.js, 47 00:02:41,570 --> 00:02:43,870 再次,對象的數組。 48 00:02:43,870 --> 00:02:48,500 如果我想做出最好的一個數組 在哈佛校園的建築物,然後 49 00:02:48,500 --> 00:02:49,710 我想使它成為如下。 50 00:02:49,710 --> 00:02:55,250 使用此對象表示法,其中 我存儲的根,名稱,地址, 51 00:02:55,250 --> 00:03:00,260 緯度,經度和每 單體建築對象。 52 00:03:00,260 --> 00:03:02,930 >> 讓我們快速談談變量 在JavaScript中。 53 00:03:02,930 --> 00:03:07,760 像PHP,JavaScript變量 是弱或鬆散類型。 54 00:03:07,760 --> 00:03:14,120 要創建一個局部變量,你前綴 變量名與V-A-R,變種。 55 00:03:14,120 --> 00:03:17,010 現在,在JavaScript中,函數會 限制變量的範圍。 56 00:03:17,010 --> 00:03:20,600 因此,如果你在有一個局部變量 一個函數,那麼其他功能 57 00:03:20,600 --> 00:03:22,060 不能訪問它。 58 00:03:22,060 --> 00:03:26,090 >> 但是,與C,循環和條件不 限制變量的範圍。 59 00:03:26,090 --> 00:03:30,600 所以,即使你的內聲明它 條件,整個功能將 60 00:03:30,600 --> 00:03:32,810 可以訪問它。 61 00:03:32,810 --> 00:03:35,820 現在,沒有變種,變 將是全球性的。 62 00:03:35,820 --> 00:03:39,170 所以,如果你只需要聲明的名稱和 指定一個值,則該變量 63 00:03:39,170 --> 00:03:41,900 將是一個全局變量 在JavaScript中。 64 00:03:41,900 --> 00:03:48,480 >> 現在,房子,我們有一個關聯 主機類型對象的數組,其中 65 00:03:48,480 --> 00:03:52,100 每一個房子只是一個緯度 和經度。 66 00:03:52,100 --> 00:03:55,140 那麼我們有乘客 陣列,它是一個數組 67 00:03:55,140 --> 00:03:57,370 的對象類型的乘客。 68 00:03:57,370 --> 00:04:01,620 所以,每一位乘客都有一個用戶 姓名,名稱,和房子。 69 00:04:01,620 --> 00:04:04,840 >> 請注意,我說的類型 乘客,這真的只是意味著 70 00:04:04,840 --> 00:04:08,150 每個對象都有 同樣的鍵值對。 71 00:04:08,150 --> 00:04:12,830 所以型乘用車的每一個對象都有 一個用戶名,一個名稱和一個房子。 72 00:04:12,830 --> 00:04:14,850 那麼,我們需要 做的對集? 73 00:04:14,850 --> 00:04:20,779 好了,我們需要允許用戶選擇 了工作人員,以顯示所有的 74 00:04:20,779 --> 00:04:25,080 工作人員目前正在 我們的班車,並把它們關閉。 75 00:04:25,080 --> 00:04:29,395 然後,我們也將討論額外的 給可實現的功能 76 00:04:29,395 --> 00:04:30,980 航天飛機對集。 77 00:04:30,980 --> 00:04:33,610 >> 但是,讓我們來談談皮卡第一。 78 00:04:33,610 --> 00:04:37,480 CS50工作人員的面孔已經 種滿校園,其中每個 79 00:04:37,480 --> 00:04:41,750 臉是作為一個地方標誌 上的三維地球,並作為一個 80 00:04:41,750 --> 00:04:44,020 標記的2D地圖上。 81 00:04:44,020 --> 00:04:47,880 因此,當用戶點擊皮卡 按鈕,我們希望附近的加 82 00:04:47,880 --> 00:04:49,590 乘客穿梭。 83 00:04:49,590 --> 00:04:53,650 我們也想刪除自己的位置 從世界和標記刪除其 84 00:04:53,650 --> 00:04:58,060 標記從地圖上看,這表明 他們在我們的班車了。 85 00:04:58,060 --> 00:05:02,520 >> 那麼,我們如何檢測,如果乘客 都在我們的航天飛機範圍是多少? 86 00:05:02,520 --> 00:05:06,670 好了,作用距離,所以 shuttle.distance,傳遞 87 00:05:06,670 --> 00:05:10,630 經緯度,將計算 從當前位置的距離 88 00:05:10,630 --> 00:05:14,220 穿梭於該點的 你與給定的指定 89 00:05:14,220 --> 00:05:15,860 緯度和經度。 90 00:05:15,860 --> 00:05:19,180 所以,你可以用它來計算 距離從航天飛機到 91 00:05:19,180 --> 00:05:20,310 乘客。 92 00:05:20,310 --> 00:05:24,040 >> 但你怎麼知道在哪裡 乘客是? 93 00:05:24,040 --> 00:05:27,510 嗯,這就是我們必須 編輯填充功能。 94 00:05:27,510 --> 00:05:32,500 填充所有地方的工作人員 在乘客進入世界 95 00:05:32,500 --> 00:05:36,300 並進入地圖,但不 存儲他們的位置。 96 00:05:36,300 --> 00:05:39,850 因此,也許你可以存儲自己的 放置標記和標記 97 00:05:39,850 --> 00:05:41,570 在一些全局數組。 98 00:05:41,570 --> 00:05:45,780 >> 現在,已經是一個全局數組 乘客存儲信息。 99 00:05:45,780 --> 00:05:49,960 每個乘客陣列存儲 乘客的姓名和他們的房子。 100 00:05:49,960 --> 00:05:54,985 所以也許你可以添加一些參數 有給乘客的對象。 101 00:05:54,985 --> 00:05:58,150 >> 為了幫助我們檢測到所有的乘客 在我們的範圍內 102 00:05:58,150 --> 00:06:02,485 穿梭,讓我們通過所有的迴路 乘客乘客陣列。 103 00:06:02,485 --> 00:06:07,790 for循環在JavaScript看起來 這樣的事情,非常相似, 104 00:06:07,790 --> 00:06:13,200 對於那些在C循環或者,我們可以使用一個 替代for循環結構, 105 00:06:13,200 --> 00:06:18,680 在陣列變種I,其中I仍然會 該指數,但你並不需要 106 00:06:18,680 --> 00:06:23,310 指定array.length 條件,我+ +。 107 00:06:23,310 --> 00:06:26,130 >> 每一個乘客的位置是 通過他們的地方得分。 108 00:06:26,130 --> 00:06:29,800 但這個地方標誌是不 緯度和經度。 109 00:06:29,800 --> 00:06:34,170 我們必須通過訪問這些參數 獲得的幾何形狀,使用get 110 00:06:34,170 --> 00:06:38,180 幾何上的位置標記,然後 一旦我們有幾何,越來越 111 00:06:38,180 --> 00:06:42,580 無論是緯度或經度 使用這些功能。 112 00:06:42,580 --> 00:06:45,680 >> 所以,現在我們知道如何檢測是否 乘客都在 113 00:06:45,680 --> 00:06:47,920 我們的範圍內穿梭。 114 00:06:47,920 --> 00:06:52,050 一旦我們有了這些乘客,我們將 要補充的是,任何乘客 115 00:06:52,050 --> 00:06:53,140 內的範圍。 116 00:06:53,140 --> 00:06:57,580 我們希望,讓他們跳,並採取 只有一個座位上我們的班車,但 117 00:06:57,580 --> 00:06:59,630 如果我們有足夠的空間給他們。 118 00:06:59,630 --> 00:07:04,120 >> 該shuttle.seats陣列將顯示 座位是否是空的,或 119 00:07:04,120 --> 00:07:05,890 誰在那個位子。 120 00:07:05,890 --> 00:07:11,160 所以,如果一個座位是空的,那麼 那個座位將為null。 121 00:07:11,160 --> 00:07:15,930 所以遍歷數組席位, 檢查空座位,存儲 122 00:07:15,930 --> 00:07:20,020 乘客進入這些席位,直到你 沒有任何更多的空座位。 123 00:07:20,020 --> 00:07:23,330 不幸的是,其他乘客 將必須等待 124 00:07:23,330 --> 00:07:26,000 下一次航天飛機下來。 125 00:07:26,000 --> 00:07:30,280 >> 一旦他們穿梭取得聯繫,我們會想 刪除自己的位置標記,它 126 00:07:30,280 --> 00:07:32,580 是他們的照片在3D世界中。 127 00:07:32,580 --> 00:07:38,030 如果我想刪除一個地方標記P, 然後我會得到所有的功能 128 00:07:38,030 --> 00:07:42,820 從我的地球,從谷歌地球, 然後刪除特定的地方 129 00:07:42,820 --> 00:07:45,910 標記使用removeChild功能。 130 00:07:45,910 --> 00:07:51,360 那麼最後,讓我們刪除標記, 在2D地圖上的圖標,對於任何 131 00:07:51,360 --> 00:07:53,650 乘客,我們正在加快。 132 00:07:53,650 --> 00:07:59,790 >> 要刪除標記M,然後我會 只是執行m.setMap空。 133 00:07:59,790 --> 00:08:03,670 這樣做有效範圍內的任何乘客, 你已經完成了皮卡。 134 00:08:03,670 --> 00:08:07,890 圖表功能,應顯示所有 這是在乘客的 135 00:08:07,890 --> 00:08:11,000 航天飛機,空座位,如果空。 136 00:08:11,000 --> 00:08:14,420 所以,圖表應該遍歷 shuttle.seats,顯示 137 00:08:14,420 --> 00:08:21,350 乘客信息的各項指標, 和空座位,如果該索引是空。 138 00:08:21,350 --> 00:08:26,160 >> 現在,如果HTML文本放置的內 JavaScript變量,然後通過使用 139 00:08:26,160 --> 00:08:31,950 的document.getElementById,圖可以 編輯的內部HTML定 140 00:08:31,950 --> 00:08:36,140 通過指定元素 HTML文本的 141 00:08:36,140 --> 00:08:40,840 的document.getElementById內部HTML變量。 142 00:08:40,840 --> 00:08:46,180 當用戶單擊Drop Off按鈕 在index.html的,它會​​調用 143 00:08:46,180 --> 00:08:47,160 空投功能。 144 00:08:47,160 --> 00:08:49,510 它是我們的工作來實現這一點。 145 00:08:49,510 --> 00:08:54,150 >> 在空投中,我們將要移除任何 來往穿梭的乘客只有 146 00:08:54,150 --> 00:08:58,740 我們在他們的目的地的範圍, 他們居住的房子。 147 00:08:58,740 --> 00:09:03,300 所以空投則要檢查是否 穿梭是在任何的範圍 148 00:09:03,300 --> 00:09:08,200 房子,並移除任何需要 乘客來往穿梭。 149 00:09:08,200 --> 00:09:11,020 那麼我們該如何檢查,如果我們 在任何房子的範圍是多少? 150 00:09:11,020 --> 00:09:16,630 好了,再一次,我們將做的使用 shuttle.distance函數,傳入 151 00:09:16,630 --> 00:09:20,990 的點的緯度和經度 我們正在核對。 152 00:09:20,990 --> 00:09:22,730 >> 但什麼是那些要點? 153 00:09:22,730 --> 00:09:27,210 好了,房子的數組,如果你還記得 在houses.js,存儲 154 00:09:27,210 --> 00:09:32,790 北緯每個房子和經度 一個關聯數組,其中每 155 00:09:32,790 --> 00:09:35,980 索引是房子的名字。 156 00:09:35,980 --> 00:09:37,590 然後去掉乘客 - 157 00:09:37,590 --> 00:09:41,820 好了,只有我們是在自己的範圍內 他們想要去的房子。 158 00:09:41,820 --> 00:09:46,380 所以,再一次,請記住,乘客 存儲的房子,每一個乘客 159 00:09:46,380 --> 00:09:48,850 想去。 160 00:09:48,850 --> 00:09:51,670 如果他們是在為自己的範圍內 房子,然後我們會刪除 161 00:09:51,670 --> 00:09:57,200 從shuttle.seats和集客 其在數組中的位置為空。 162 00:09:57,200 --> 00:10:00,220 >> 現在讓我們來談談一些額外的功能 可以在實施 163 00:10:00,220 --> 00:10:02,690 在CS50班車P-集合。 164 00:10:02,690 --> 00:10:05,850 有一個點制度, 你跟踪有多少 165 00:10:05,850 --> 00:10:07,520 指向一個用戶。 166 00:10:07,520 --> 00:10:11,120 對於落乘客 成功,他們能獲得積分。 167 00:10:11,120 --> 00:10:15,100 但對於試圖落客 那裡沒有任何房子附近, 168 00:10:15,100 --> 00:10:16,980 好了,他們可以得到懲罰了點。 169 00:10:16,980 --> 00:10:21,790 因此,也許你想跟踪的 點在全局變量。 170 00:10:21,790 --> 00:10:25,970 >> 您可以或許實現一個計時器,其中 用戶具有一定量的 171 00:10:25,970 --> 00:10:29,800 時間拿起落一 一定數量的乘客。 172 00:10:29,800 --> 00:10:33,280 甚至這種整合 用點系統。 173 00:10:33,280 --> 00:10:39,970 或者您也可以編輯圖表,使得 乘客通過內部排序。 174 00:10:39,970 --> 00:10:45,250 所以這可能是一個排序 函數來shuttle.seats。 175 00:10:45,250 --> 00:10:49,240 >> 你可以實現一個飛行的功能, 其中,如果用戶輸入了小浪 176 00:10:49,240 --> 00:10:53,460 碼,然後穿梭升空 地面和航天飛機能飛。 177 00:10:53,460 --> 00:10:58,890 但是,對於一個安全落,最好使 航天飛機降落輪子上的 178 00:10:58,890 --> 00:11:00,700 第一個理由。 179 00:11:00,700 --> 00:11:05,910 您也可以實現隱形傳態, 在那裡你犯了一個下拉列表 180 00:11:05,910 --> 00:11:08,380 建築物的index.html。 181 00:11:08,380 --> 00:11:12,270 並選擇其中的一個時, 用戶將被運送到 182 00:11:12,270 --> 00:11:14,220 在校園內的建築物。 183 00:11:14,220 --> 00:11:16,760 好吧,雖然,通過旅行 一些牆壁 184 00:11:16,760 --> 00:11:19,290 在那裡你的方式建築。 185 00:11:19,290 --> 00:11:22,960 >> 您還可以更改的速度 梭,允許用戶增加 186 00:11:22,960 --> 00:11:25,490 或減小的速度。 187 00:11:25,490 --> 00:11:28,840 也許你想要一個全局變量 跟踪燃料多少的 188 00:11:28,840 --> 00:11:31,520 有梭,減少 它作為你走。 189 00:11:31,520 --> 00:11:35,860 一旦你打到零,不過,穿梭 不能,除非你已經移動 190 00:11:35,860 --> 00:11:40,610 加油,可能使用一個按鈕,或 甚至讓自己的加油站。 191 00:11:40,610 --> 00:11:43,240 >> 但是,這肯定是不 一個詳盡的清單。 192 00:11:43,240 --> 00:11:46,340 退房的規格為全 列出,或者建議 193 00:11:46,340 --> 00:11:47,840 你自己到TF。 194 00:11:47,840 --> 00:11:48,950 天空是極限。 195 00:11:48,950 --> 00:11:53,110 這是你最後CS50對集, 所以有它的樂趣。 196 00:11:53,110 --> 00:11:56,360 這是CS50班車。 197 00:11:56,360 --> 00:11:59,230 >> 我不得不說,這是一個很高興 以使這些為你 198 00:11:59,230 --> 00:12:00,400 生產隊。 199 00:12:00,400 --> 00:12:04,330 我希望你已經 享受其中,也是如此。 200 00:12:04,330 --> 00:12:06,040 我的名字是Zamyla。 201 00:12:06,040 --> 00:12:08,310 這是CS50。 202 00:12:08,310 --> 00:12:16,363