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