1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J.马兰：好吧， 所以这是这里的缪手臂 3 00:00:41,880 --> 00:00:44,450 带内，一对夫妇，其中我们 有CS50最终项目。 4 00:00:44,450 --> 00:00:47,533 而这是一个演示中，我们排队 您事先根本所在 5 00:00:47,533 --> 00:00:51,120 这个相当紧臂带在这里 听你的肌肉运动 6 00:00:51,120 --> 00:00:54,280 这将被映射软件 以科尔顿的笔记本电脑在这里它 7 00:00:54,280 --> 00:00:57,230 有iTunes和那 歌已经排队。 8 00:00:57,230 --> 00:01:00,270 而不是我演示该这样， 科尔顿一直在实验室 9 00:01:00,270 --> 00:01:04,129 显然整个星期得到一个示范 准备好一个勇敢的志愿者。 10 00:01:04,129 --> 00:01:07,430 如果有人想进来 在up--第一次看到你的手。 11 00:01:07,430 --> 00:01:09,540 上来吧。 12 00:01:09,540 --> 00:01:12,530 >> 行。 13 00:01:12,530 --> 00:01:13,886 而你叫什么名字？ 14 00:01:13,886 --> 00:01:14,800 >> 听众：呃，玛丽亚。 15 00:01:14,800 --> 00:01:16,550 >> DAVID J.马兰：玛丽亚，很高兴见到你。 16 00:01:16,550 --> 00:01:17,310 快点看过来。 17 00:01:17,310 --> 00:01:19,550 让我来给你介绍科尔顿。 18 00:01:19,550 --> 00:01:21,290 科尔顿，这是玛丽亚。 19 00:01:21,290 --> 00:01:23,050 >> COLTON：你好，很高兴见到你。 20 00:01:23,050 --> 00:01:24,330 >> DAVID J.马兰：全部 对，所以第一步，我们 21 00:01:24,330 --> 00:01:26,204 要你放 这对你的前臂 22 00:01:26,204 --> 00:01:29,280 因此，它是相当 紧了靠近你的肘部。 23 00:01:29,280 --> 00:01:31,940 而与此同时，让我们 把我们的谷歌玻璃 24 00:01:31,940 --> 00:01:33,720 而我们今天将混合技术。 25 00:01:33,720 --> 00:01:36,340 >> COLTON：首先我们得 钩到东西了。 26 00:01:36,340 --> 00:01:37,170 >> DAVID J.马兰：OK。 27 00:01:37,170 --> 00:01:39,795 其实，让我们把你的手臂 接近该电缆尽可能 28 00:01:39,795 --> 00:01:41,160 这样我们就可以先同步起来。 29 00:01:41,160 --> 00:01:42,740 >> COLTON：让我们做到这一点。 30 00:01:42,740 --> 00:01:46,500 >> DAVID J.马兰：而与此同时，这样 每个人都可以得到一个更接近一目了然， 31 00:01:46,500 --> 00:01:50,290 我们折腾安德鲁的摄像头 在屏幕上出现。 32 00:01:50,290 --> 00:01:54,460 因此，我们有一个USB电缆的 被插入到玛丽亚的袖标。 33 00:01:54,460 --> 00:02:00,230 让我折腾科尔顿的屏幕 旁边的投影机。 34 00:02:00,230 --> 00:02:06,000 >> 因此，科尔顿被注册设备 现在的缪连接到该电缆。 35 00:02:06,000 --> 00:02:08,060 现在什么超群 要做到瞬间 36 00:02:08,060 --> 00:02:10,120 实际上是通过走 校准步骤 37 00:02:10,120 --> 00:02:12,830 并教软件 怎么她的肌肉反应 38 00:02:12,830 --> 00:02:16,070 当她做出一定的预先定义的 手势软件的理解。 39 00:02:16,070 --> 00:02:17,910 如果你想进去 前面的屏幕。 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK，继续努力。 42 00:02:30,090 --> 00:02:31,860 >> COLTON：进入这个样子。 43 00:02:31,860 --> 00:02:32,970 和这样的。 44 00:02:32,970 --> 00:02:34,563 和一路的权利。 45 00:02:34,563 --> 00:02:35,922 回去。 46 00:02:35,922 --> 00:02:37,740 >> DAVID J.马兰：OK。 47 00:02:37,740 --> 00:02:38,960 不同的观点。 48 00:02:38,960 --> 00:02:39,620 这不是你的。 49 00:02:39,620 --> 00:02:40,350 这是我们的。 50 00:02:40,350 --> 00:02:41,749 >> 玛丽亚：OK。 51 00:02:41,749 --> 00:02:42,540 DAVID J.马兰：没有。 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 让我们将它更高的，所以这是 接近你的胳膊肘，甚至更紧。 54 00:02:51,540 --> 00:02:52,680 行。 55 00:02:52,680 --> 00:02:53,270 >> 开始了。 56 00:02:53,270 --> 00:02:56,780 这将是一个很好的时间CS52X。 57 00:02:56,780 --> 00:02:57,670 在那里，我们走了。 58 00:02:57,670 --> 00:02:58,760 >> 很不错。 59 00:02:58,760 --> 00:03:01,170 行。 60 00:03:01,170 --> 00:03:02,790 拇指到小指。 61 00:03:02,790 --> 00:03:03,380 >> 很不错。 62 00:03:03,380 --> 00:03:05,140 传播你的手指。 63 00:03:05,140 --> 00:03:06,240 不错。 64 00:03:06,240 --> 00:03:06,910 波权利。 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 它好奇地显示 你与左hand-- 67 00:03:17,010 --> 00:03:19,665 >> COLTON：是啊，这是奇怪的。 68 00:03:19,665 --> 00:03:21,790 DAVID J.马兰：波 右，向前迈进。 69 00:03:21,790 --> 00:03:22,998 快进跳过或者明年。 70 00:03:22,998 --> 00:03:25,020 这是确定的波权利。 71 00:03:25,020 --> 00:03:26,650 >> 玛丽亚：我don't--等待。 72 00:03:26,650 --> 00:03:28,430 >> DAVID J.马兰：需要帮忙吗？ 73 00:03:28,430 --> 00:03:30,027 >> COLTON：所以你会喜欢这个。 74 00:03:30,027 --> 00:03:31,860 玛丽亚：它的转动 其他的事情，虽然。 75 00:03:31,860 --> 00:03:32,390 COLTON：是的。 76 00:03:32,390 --> 00:03:34,250 DAVID J.马兰：是的，我不知道 为什么它向你展示一个leftie。 77 00:03:34,250 --> 00:03:36,458 COLTON：你为什么不try-- 只是尝试去这样。 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J.马兰：没有？ 80 00:03:40,090 --> 00:03:42,580 也许到达你的手臂 出一点直 81 00:03:42,580 --> 00:03:46,070 并使其更突然这样。 82 00:03:46,070 --> 00:03:48,176 是啊，好，来吧。 83 00:03:48,176 --> 00:03:49,670 >> 玛丽亚：对不起。 84 00:03:49,670 --> 00:03:51,170 DAVID J.马兰：这不是你的错。 85 00:03:51,170 --> 00:03:53,018 COLTON：它的罚款。 86 00:03:53,018 --> 00:03:55,430 DAVID J.马兰：好的。 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> 玛丽亚：我们应该跳过这个，然后呢？ 89 00:03:57,620 --> 00:03:59,620 DAVID J.马兰：是的，让我们 让你摆脱困境。 90 00:03:59,620 --> 00:04:03,130 因此，如果有人想办一个 使用这种尖端最终项目 91 00:04:03,130 --> 00:04:07,707 硬件，实现它可能只是 需要一点时间来适应。 92 00:04:07,707 --> 00:04:10,290 和this--现实就是如此 其实是很前沿的。 93 00:04:10,290 --> 00:04:12,040 >> 这就是被称为 该开发工具包，其中 94 00:04:12,040 --> 00:04:14,956 意指基本上预发布 使人们可以做完全 95 00:04:14,956 --> 00:04:18,690 this--与它对抗，图 如何人的身体工作 96 00:04:18,690 --> 00:04:19,980 随着技术的发展。 97 00:04:19,980 --> 00:04:21,750 所以，如果你想 事后，演讲结束后， 98 00:04:21,750 --> 00:04:23,750 我们可以让你来 采取另一种刺吧。 99 00:04:23,750 --> 00:04:26,970 但除此之外，掌声雷动，如果 我们可以，玛丽亚·达来临。 100 00:04:26,970 --> 00:04:28,770 >> 玛丽亚：谢谢你。 101 00:04:28,770 --> 00:04:30,390 >> DAVID J.马兰：谢谢。 102 00:04:30,390 --> 00:04:34,945 我们会挂到这一点，但我们会给 你 - 怎么样一个压力球吗？ 103 00:04:34,945 --> 00:04:38,620 哦，还有 - if--是的，谢谢。 104 00:04:38,620 --> 00:04:39,715 行。 105 00:04:39,715 --> 00:04:45,750 所以对于好奇的，如果你是 熟悉的声音的选择 106 00:04:45,750 --> 00:04:47,670 我们有做 早些时候，一个惊人的电视 107 00:04:47,670 --> 00:04:50,210 说明你绝对应该 是狂欢，观看Netflix上 108 00:04:50,210 --> 00:04:51,110 这是一个在这里。 109 00:04:51,110 --> 00:04:54,472 >> 扬声器1：女士们，先生们， 一个名为乔希魔术师。 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J.马兰：而且很显然，这是 事到如今讲课时给我发短信。 112 00:05:08,050 --> 00:05:11,190 我被告知，玛丽亚 过了一个生日昨天。 113 00:05:11,190 --> 00:05:14,095 从这么生日快乐 CS50玛丽亚为好。 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> 所以，你可能已经读过，最近一个月 这个绅士在这里，史蒂夫 116 00:05:22,090 --> 00:05:25,260 鲍尔默，谁是真正 在大专班1977年， 117 00:05:25,260 --> 00:05:27,170 刚刚退休的微软。 118 00:05:27,170 --> 00:05:29,620 他是一个本科生在这里， 那么几年后 119 00:05:29,620 --> 00:05:31,910 发现自己 斯坦福大学商学院 120 00:05:31,910 --> 00:05:34,160 当他接到一个电话 从他谁的朋友打电话 121 00:05:34,160 --> 00:05:36,516 一直住在大厅 从他在哈佛。 122 00:05:36,516 --> 00:05:38,640 那朋友的名字是比尔 门，在当时， 123 00:05:38,640 --> 00:05:42,700 他试图招募史蒂夫是 第一笔生意的人，真的， 124 00:05:42,700 --> 00:05:45,720 在一家小公司微软的名字。 125 00:05:45,720 --> 00:05:48,960 >> 长话短说，史蒂夫 最终被征服了， 126 00:05:48,960 --> 00:05:52,130 加盟微软时，他们 刚刚30名员工。 127 00:05:52,130 --> 00:05:54,300 和的时候，他 退休最近， 128 00:05:54,300 --> 00:05:58,100 该公司拥有100,000名员工 在过去的几年里。 129 00:05:58,100 --> 00:06:01,171 所以一个网站称为边缘 编制本致敬视频 130 00:06:01,171 --> 00:06:02,920 我们认为我们会 共享，让你 131 00:06:02,920 --> 00:06:08,380 到底有多少能量史蒂夫感 带来任何表示，他带来的。 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [视频回放] 134 00:06:12,550 --> 00:06:16,220 - 微软就像一个第四个孩子。 135 00:06:16,220 --> 00:06:18,260 孩子做离开家。 136 00:06:18,260 --> 00:06:21,875 在这种情况下，我猜 我离开了家。 137 00:06:21,875 --> 00:06:23,270 嘿，比尔，whazzap？ 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap？ 139 00:06:24,200 --> 00:06:25,320 >> - 嘿，wazzap？ 140 00:06:25,320 --> 00:06:28,590 我们已经给出了 巨大的机会。 141 00:06:28,590 --> 00:06:30,210 和比尔给了我们这样的机会。 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 我要感谢比尔为。 144 00:06:36,770 --> 00:06:39,630 我要你了。 145 00:06:39,630 --> 00:06:42,500 创新的步伐 不会放缓。 146 00:06:42,500 --> 00:06:45,140 >> 它会变得越来越快。 147 00:06:45,140 --> 00:06:50,165 可能有几个竞争者 那些不幸被淘汰！ 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> 我喜欢这家公司。 150 00:06:59,564 --> 00:07:00,064 是的！ 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 我是一台PC，我喜欢这家公司！ 153 00:07:08,250 --> 00:07:13,090 >> 开发者，开发者，开发者， 开发者，开发者，开发者， 154 00:07:13,090 --> 00:07:14,560 开发者，开发者。 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 是的！ 157 00:07:18,970 --> 00:07:19,950 Web开发人员！ 158 00:07:19,950 --> 00:07:21,420 >> Web开发人员！ 159 00:07:21,420 --> 00:07:22,890 Web开发人员！ 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 听什么你 得到不收取额外费用！ 162 00:07:28,770 --> 00:07:31,960 >> 在MS-DOS执行，预约 压延机，卡堆，一个记事本， 163 00:07:31,960 --> 00:07:33,750 一个时钟，一个控制面板。 164 00:07:33,750 --> 00:07:35,461 而且，你能相信吗？ 165 00:07:35,461 --> 00:07:35,960 Reversie！ 166 00:07:35,960 --> 00:07:37,270 >> 它们刻录到CD！ 167 00:07:37,270 --> 00:07:38,660 它们发布到MSN！ 168 00:07:38,660 --> 00:07:40,422 你邮寄给朋友！ 169 00:07:40,422 --> 00:07:41,790 >> 所有与点击！ 170 00:07:41,790 --> 00:07:48,670 一个微软，一种策略，一是team-- 专注，纪律，专业， 171 00:07:48,670 --> 00:07:50,610 和专家在所有我们做的。 172 00:07:50,610 --> 00:07:52,670 让我用一条线从一部老电影。 173 00:07:52,670 --> 00:07:54,810 >> 关系就像鲨鱼。 174 00:07:54,810 --> 00:07:57,480 他们前进或者死亡。 175 00:07:57,480 --> 00:08:01,470 其实，我觉得高科技 公司是相同的。 176 00:08:01,470 --> 00:08:04,801 >> [完视频回放] 177 00:08:04,801 --> 00:08:08,050 DAVID J.马兰：所以我们是如此高兴 宣布，史蒂夫将加入我们 178 00:08:08,050 --> 00:08:13,320 在这里CS50下周三 平时的地点和时间在这里。 179 00:08:13,320 --> 00:08:14,750 空间可能是有限的。 180 00:08:14,750 --> 00:08:19,650 所以我们一起的人，请 今天头或此后不久， 181 00:08:19,650 --> 00:08:22,600 到cs50.harvard.edu/register。 182 00:08:22,600 --> 00:08:25,780 >> 我们将跟进 周二确认点。 183 00:08:25,780 --> 00:08:29,900 期待，明年 讲座在CS50在周三。 184 00:08:29,900 --> 00:08:33,706 现在，在等消息，我偶然 遇到这样的绛只是 185 00:08:33,706 --> 00:08:34,289 有一天。 186 00:08:34,289 --> 00:08:37,370 >> 事实证明，CS50的工作人员之一 和CS50的学生至少有一个 187 00:08:37,370 --> 00:08:40,299 目前正在运行UC 总统和副总统， 188 00:08:40,299 --> 00:08:42,950 这把我带回 我自己回天 189 00:08:42,950 --> 00:08:45,920 当我失去了悲惨的UC选举。 190 00:08:45,920 --> 00:08:48,210 但一线希望 在这是我一直 191 00:08:48,210 --> 00:08:50,604 讲故事是， 对我的一个肯定 192 00:08:50,604 --> 00:08:52,770 很多原因，我失去了 选举是完全缺乏 193 00:08:52,770 --> 00:08:54,103 对人才的公开演讲。 194 00:08:54,103 --> 00:08:56,950 因此坦白地说，这 开车送我，那段经历 195 00:08:56,950 --> 00:09:02,235 我觉得我大三，实际签约 弥补哈佛大学计算机协会， 196 00:09:02,235 --> 00:09:04,610 是该集团在校园的 拥有各种技术讲座 197 00:09:04,610 --> 00:09:05,318 和其他的东西。 198 00:09:05,318 --> 00:09:08,117 我接手他们的教学 研讨会因此 199 00:09:08,117 --> 00:09:09,950 有一个机会，一个 难得的机会， 200 00:09:09,950 --> 00:09:12,620 开始工作的正是这一点。 201 00:09:12,620 --> 00:09:15,000 但同时，我有机会 在这方面的经验 202 00:09:15,000 --> 00:09:16,930 教自己更加HTML。 203 00:09:16,930 --> 00:09:21,080 所以，我昨天晚上被一拖再拖 翻翻基于HTML的网站 204 00:09:21,080 --> 00:09:28,066 我做了像1997年，1998，我的 活动看起来像这样在这里。 205 00:09:28,066 --> 00:09:29,920 我知道。 206 00:09:29,920 --> 00:09:33,340 >> 因为 - 当然，预告 在1998年这个惊人的设计决策 207 00:09:33,340 --> 00:09:33,850 或诸如此类的东西。 208 00:09:33,850 --> 00:09:36,475 你想的第一件事用户 做在访问您的网站 209 00:09:36,475 --> 00:09:39,860 是必须点击另一个链接只是 在这里输入你的网站与和尚 210 00:09:39,860 --> 00:09:43,940 后面像笼罩在哪里帷幕 显然我的竞选纲领是。 211 00:09:43,940 --> 00:09:46,330 而这一切，你会得到 今天只是一个截图。 212 00:09:46,330 --> 00:09:49,500 但我读通过一样， 我的竞选昨晚海报 213 00:09:49,500 --> 00:09:50,490 我的平台。 214 00:09:50,490 --> 00:09:52,960 >> 我很生气的时候。 215 00:09:52,960 --> 00:09:55,380 我的平台was--很有意思。 216 00:09:55,380 --> 00:09:57,730 所以我从那以后平静下来。 217 00:09:57,730 --> 00:10:03,550 但总有一天，我会再次运行， 希望最好这个时候。 218 00:10:03,550 --> 00:10:07,265 >> 所以HTML，我在其中所做的语言 这in--你很快就会太大的缓慢 - 219 00:10:07,265 --> 00:10:09,140 是我们一直 谈到后期 220 00:10:09,140 --> 00:10:12,460 并在很大程度上服用理所当然现在 我们已经转移到其他语言。 221 00:10:12,460 --> 00:10:15,650 但是，让我们停下来就一下 把其中的一些东西融会贯通。 222 00:10:15,650 --> 00:10:18,040 所以，在一个句子里，HTML是什么？ 223 00:10:18,040 --> 00:10:19,370 >> 或者说，是用来做什么的呢？ 224 00:10:19,370 --> 00:10:20,208 任何人吗？ 225 00:10:20,208 --> 00:10:20,708 是。 226 00:10:20,708 --> 00:10:22,002 >> 听众：标记的网站。 227 00:10:22,002 --> 00:10:23,460 DAVID J.马兰：标记的网站。 228 00:10:23,460 --> 00:10:27,100 因此，它是一种标记语言， 可以让你构建一个网页。 229 00:10:27,100 --> 00:10:30,040 头去在这里，标题 放在这里，身体放在这里。 230 00:10:30,040 --> 00:10:33,280 这是黑体字，这是 italics--之类的细节。 231 00:10:33,280 --> 00:10:33,830 >> OK，好。 232 00:10:33,830 --> 00:10:37,620 所以，CSS可以让你 - 和我 采取了一些有自由 233 00:10:37,620 --> 00:10:40,990 与大胆的面向和斜体，因为 这是更好地与这个实现的。 234 00:10:40,990 --> 00:10:42,096 CSS is--什么？ 235 00:10:42,096 --> 00:10:42,845 说，在一个句子里。 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 任何人都没有。 238 00:10:46,720 --> 00:10:46,870 是啊。 239 00:10:46,870 --> 00:10:49,286 >> 听众：装饰和 的东西，想怎么设计它。 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J.马兰：好，好。 242 00:10:52,810 --> 00:10:55,420 装饰，让您 设计它，或者它风格化 243 00:10:55,420 --> 00:10:59,540 与诸如黑体和 斜体和颜色也更精细 244 00:10:59,540 --> 00:11:01,330 元素的细粒度定位。 245 00:11:01,330 --> 00:11:04,520 排序它可以让你把东西 最后一英里，这样，如果，例如 246 00:11:04,520 --> 00:11:08,130 在Pset7，你可能已经注意到你的 投资组合页面，如果你在这一点上 247 00:11:08,130 --> 00:11:12,270 已经是默认的表，你 使显示给用户的持股 248 00:11:12,270 --> 00:11:15,740 和现金可能看起来很丑陋 默认情况下，没有空格。 249 00:11:15,740 --> 00:11:18,420 一切的那种临时抱佛脚 一起以行和列。 250 00:11:18,420 --> 00:11:20,662 >> 好了，有一点点 CSS，你可以实现， 251 00:11:20,662 --> 00:11:23,870 你其实可以调整的，并使其 一些更熟悉的多 252 00:11:23,870 --> 00:11:24,870 漂亮看看。 253 00:11:24,870 --> 00:11:27,730 所以CSS是关于 风格化的网站。 254 00:11:27,730 --> 00:11:31,970 但是，我们引入了另一个 语言，PHP，这让我们怎么办？ 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> 我们只是做了什么？ 257 00:11:37,590 --> 00:11:38,177 任何人。 258 00:11:38,177 --> 00:11:40,010 有冒险超越 前几行。 259 00:11:40,010 --> 00:11:40,260 是啊。 260 00:11:40,260 --> 00:11:41,719 >> 听众：生成动态内容。 261 00:11:41,719 --> 00:11:42,718 DAVID J.马兰：完美。 262 00:11:42,718 --> 00:11:43,850 生成动态内容。 263 00:11:43,850 --> 00:11:45,808 你可以这样做 任何数目的语言。 264 00:11:45,808 --> 00:11:50,120 我们碰巧使用PHP，因为它是 在栏目等类似C的语法。 265 00:11:50,120 --> 00:11:52,000 >> 但是PHP正是这么做的。 266 00:11:52,000 --> 00:11:54,620 它可以让你动态生成的输出。 267 00:11:54,620 --> 00:11:57,890 有的认为产出可能 HTML，因为我们通常在做。 268 00:11:57,890 --> 00:12:00,160 而且，这也是因为它的 一种编程语言，是 269 00:12:00,160 --> 00:12:03,240 通过该机制 我们可以跟数据库。 270 00:12:03,240 --> 00:12:05,730 >> 我们可以查询到 其他服务器，如雅虎 271 00:12:05,730 --> 00:12:08,660 并以编程方式做任何事情 真的，你可能会以其他方式 272 00:12:08,660 --> 00:12:10,400 要强迫电脑做。 273 00:12:10,400 --> 00:12:13,580 所以，PHP让我们开始 动态输出内容。 274 00:12:13,580 --> 00:12:16,900 因此，通过这样的逻辑，我没有 一个动态的网站早在1998年。 275 00:12:16,900 --> 00:12:18,460 >> 这只是一个静态的网页。 276 00:12:18,460 --> 00:12:22,250 我的内容必须由改变 用gedit或者一些等价手动。 277 00:12:22,250 --> 00:12:25,290 但是PHP也就是我们使用或 也可以使用，而是 278 00:12:25,290 --> 00:12:27,260 这样的事情了 即时的新生网站， 279 00:12:27,260 --> 00:12:31,160 应该采取登记和 管理users--的事情的列表 280 00:12:31,160 --> 00:12:33,550 实际上切换 时间，尽管我们碰巧 281 00:12:33,550 --> 00:12:35,990 使用Perl，不同的 在当时的语言。 282 00:12:35,990 --> 00:12:40,350 >> 然后最后，我们介绍 SQL--结构化查询语言。 283 00:12:40,350 --> 00:12:43,845 因此，另一种语言 这是用来做什么的？ 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 用于什么？ 286 00:12:47,639 --> 00:12:49,430 我们可以大胆slight-- OK，我们不会 287 00:12:49,430 --> 00:12:51,263 获得更远 比这里的乐团。 288 00:12:51,263 --> 00:12:53,432 听众：这是一个协议 用于跟数据库。 289 00:12:53,432 --> 00:12:55,640 DAVID J.马兰：协议 用于跟数据库。 290 00:12:55,640 --> 00:12:56,181 让我调整。 291 00:12:56,181 --> 00:12:59,280 它使用的自然语言 谈谈databases--选择 292 00:12:59,280 --> 00:13:01,280 并插入和删除 更新和实际 293 00:13:01,280 --> 00:13:03,840 甚至更多的功能是 我们甚至还没有跌 294 00:13:03,840 --> 00:13:07,920 成，但您可能希望explore--有 探索，比方说，一个最终的项目。 295 00:13:07,920 --> 00:13:09,560 因此，有这些不同的部分。 296 00:13:09,560 --> 00:13:13,100 >> 并希望Pset7，即使 其规格是相当长的， 297 00:13:13,100 --> 00:13:15,990 这是故意长走你 通过这些事情怎么能都 298 00:13:15,990 --> 00:13:17,210 键入在一起。 299 00:13:17,210 --> 00:13:20,300 现在，在星期一，我们 介绍了我们最后的语言 300 00:13:20,300 --> 00:13:23,430 我们将正式引入 该course--就是JavaScript的。 301 00:13:23,430 --> 00:13:25,720 这，像PHP，是一个 解释语言。 302 00:13:25,720 --> 00:13:28,110 >> 但一个关键的区别 我建议在周一 303 00:13:28,110 --> 00:13:32,730 是，而PHP是执行或 被解释的服务器，在其上 304 00:13:32,730 --> 00:13:35,990 在这种情况下是CS50器具， 或可能是一些商业网站 305 00:13:35,990 --> 00:13:39,370 服务器在互联网上， 一般的JavaScript 306 00:13:39,370 --> 00:13:43,650 是运行客户端的语言 没有服务器side--那么在浏览器中。 307 00:13:43,650 --> 00:13:46,970 这是说，就像当我打开 了Facebook的源代码，发现所有 308 00:13:46,970 --> 00:13:51,510 这些的.js文件中，隐含着 当您访问Facebook或最 309 00:13:51,510 --> 00:13:54,810 网站的这些日子里，你会得到 不仅是HTML，不仅CSS， 310 00:13:54,810 --> 00:13:59,370 但一大堆的JavaScript 常在的.js文件的形式编码。 311 00:13:59,370 --> 00:14:03,970 然后它的browser--自己 苹果或PC--一个执行该代码。 312 00:14:03,970 --> 00:14:05,990 >> 但是，您的浏览器执行。 313 00:14:05,990 --> 00:14:08,070 你能想到的那种沙箱中。 314 00:14:08,070 --> 00:14:12,420 使JavaScript代码不应该是 能够删除计算机上的文件。 315 00:14:12,420 --> 00:14:14,730 它不应该能够 以您的名义发送电子邮件。 316 00:14:14,730 --> 00:14:17,760 您的浏览器种类的限制 你可以用它做什么。 317 00:14:17,760 --> 00:14:20,630 >> 因此，在这个意义上说，这是一个有点 那么强大，或许比C. 318 00:14:20,630 --> 00:14:24,030 但JavaScript可以作为 一边，在服务器上使用， 319 00:14:24,030 --> 00:14:27,740 虽然我们倾向于不说话 它在这方面。 320 00:14:27,740 --> 00:14:29,740 所以，现在让我们一起把这些。 321 00:14:29,740 --> 00:14:34,000 一个星期加前，我们提出了一些HTML 在lef​​t--超级无聊的网页。 322 00:14:34,000 --> 00:14:35,000 >> 只是打招呼的世界。 323 00:14:35,000 --> 00:14:38,110 然后我提出的 右侧我们可以种偷的想法 324 00:14:38,110 --> 00:14:41,470 从我们的讨论 数据结构，C语言 325 00:14:41,470 --> 00:14:45,270 并思考如何分级 在左边的标记语言 326 00:14:45,270 --> 00:14:49,720 可以得出，或在存储器中实现 作为一个实际的树结构的节点 327 00:14:49,720 --> 00:14:51,400 和指针和这些类型的细节。 328 00:14:51,400 --> 00:14:53,820 在右边，我们称之为 一个DOM--文档 329 00:14:53,820 --> 00:14:56,800 反对型号 - 这仅仅是 说法一树奇特的方式。 330 00:14:56,800 --> 00:14:59,520 >> 现在，这是为什么有用 认为它以这种方式？ 331 00:14:59,520 --> 00:15:01,680 因为现在有 JavaScript的，因为我们有 332 00:15:01,680 --> 00:15:05,810 那在得到这个打码 环境，实际的HTML那 333 00:15:05,810 --> 00:15:08,360 被发送给浏览器 已经具有已 334 00:15:08,360 --> 00:15:12,690 被加载到存储器的 浏览到您的计算机中的一棵树 335 00:15:12,690 --> 00:15:18,270 这样的内存，我们可以使用JavaScript 实际遍历或步行或搜索 336 00:15:18,270 --> 00:15:21,800 或更改DOM树然而，我们想要的。 337 00:15:21,800 --> 00:15:24,040 所以，事实上，如果你认为 关于facebook.com， 338 00:15:24,040 --> 00:15:27,660 如果您使用聊天功能，如果你 使用Gmail和谷歌聊天软件的功能， 339 00:15:27,660 --> 00:15:30,540 什么，你必须 消息来连连 340 00:15:30,540 --> 00:15:35,880 又一次，这些消息可能是， 像李标签，列表项的标签，也许。 341 00:15:35,880 --> 00:15:37,940 >> 或者，也许他们只是 那不断出现的div 342 00:15:37,940 --> 00:15:39,770 每次你得到一个即时消息。 343 00:15:39,770 --> 00:15:42,960 因此，仅仅意味着什么 Facebook或谷歌正在做 344 00:15:42,960 --> 00:15:45,200 在任何时候你得到一个 来自服务器的消息， 345 00:15:45,200 --> 00:15:48,740 他们可能使用JavaScript 只需添加另一个节点 346 00:15:48,740 --> 00:15:52,700 这tree--另一个节点这一 树则在视觉上看起来只是 347 00:15:52,700 --> 00:15:54,570 喜欢的文字在屏幕上一个新行。 348 00:15:54,570 --> 00:15:57,100 但他们插入 这个数据结构。 349 00:15:57,100 --> 00:15:59,742 >> 因此，在这样的类 CS124和其他人，你会 350 00:15:59,742 --> 00:16:02,200 其实对写更多的代码 数据结构是这样的。 351 00:16:02,200 --> 00:16:04,310 但是现在在JavaScript中， 我们姑且 352 00:16:04,310 --> 00:16:07,920 我们得到了所有这些功能 免费从语言本身。 353 00:16:07,920 --> 00:16:09,210 因此，让我们来看一个例子。 354 00:16:09,210 --> 00:16:13,120 >> 让我打开一个名为form.html文件。 355 00:16:13,120 --> 00:16:14,601 这是超级简单。 356 00:16:14,601 --> 00:16:15,600 它只是看起来像这样。 357 00:16:15,600 --> 00:16:17,860 >> 没有CSS，没有想到美学。 358 00:16:17,860 --> 00:16:19,810 这是纯粹的功能 显然我 359 00:16:19,810 --> 00:16:24,000 请求的电子邮件，密码 再次输入密码，然后检查 360 00:16:24,000 --> 00:16:26,150 同意某些条款和条件。 361 00:16:26,150 --> 00:16:28,740 什么此源代码 看起来可能是什么 362 00:16:28,740 --> 00:16:31,030 你可能有一个猜测 现在花点心思位。 363 00:16:31,030 --> 00:16:32,840 我有一个表单标签在这里。 364 00:16:32,840 --> 00:16:36,190 >> 动作显然是要 去一个名为register.php文件。 365 00:16:36,190 --> 00:16:37,870 我将使用的方法是搞定了。 366 00:16:37,870 --> 00:16:40,880 然后我有一个文本 现场，其名称是电子邮件。 367 00:16:40,880 --> 00:16:43,340 >> 我有一个密码字段 他的名字是密码。 368 00:16:43,340 --> 00:16:45,420 我有另一个 密码字段的名字 369 00:16:45,420 --> 00:16:47,342 是有点任意的确认。 370 00:16:47,342 --> 00:16:49,690 这只是一个HTTP参数。 371 00:16:49,690 --> 00:16:54,430 >> 然后我们我们不只是用这些 由于即时消息的新生演示中class-- 372 00:16:54,430 --> 00:16:56,692 复选框是 只需键入等于检查。 373 00:16:56,692 --> 00:16:57,900 我会打电话给该协议。 374 00:16:57,900 --> 00:17:00,700 所以我有种随意，但 方便的命名这些字段。 375 00:17:00,700 --> 00:17:03,450 所以现在，当这种形式得到 提交后，让我们看看会发生什么。 376 00:17:03,450 --> 00:17:07,290 如果我做malan@harvard.edu， 我会做绯红的密码。 377 00:17:07,290 --> 00:17:09,530 我会做的任何密码。 378 00:17:09,530 --> 00:17:10,910 让我们不要合作。 379 00:17:10,910 --> 00:17:12,280 >> 我不会选择该复选框。 380 00:17:12,280 --> 00:17:13,940 让我点击注册。 381 00:17:13,940 --> 00:17:15,420 它说，嗯，你注册。 382 00:17:15,420 --> 00:17:16,069 并不是的。 383 00:17:16,069 --> 00:17:17,450 >> 但是URL改变。 384 00:17:17,450 --> 00:17:22,280 因此，这种形式显然是允许 提交register.php。 385 00:17:22,280 --> 00:17:25,160 但据推测，应该是我 捕捉一些错误。 386 00:17:25,160 --> 00:17:27,569 现在，在Pset7和一些 我们讲的例子， 387 00:17:27,569 --> 00:17:30,130 我们通常会打印出 大红色的错误信息在这里 388 00:17:30,130 --> 00:17:33,760 他说，失踪的名字， 或丢失密码。 389 00:17:33,760 --> 00:17:37,680 我们已经做到这一点之前，我们已经 做完服务器端错误检测。 390 00:17:37,680 --> 00:17:41,580 >> 但是很多网站这几天 做客户端的错误检测 391 00:17:41,580 --> 00:17:42,810 其中的URL不改变。 392 00:17:42,810 --> 00:17:44,101 整个页面不会刷新。 393 00:17:44,101 --> 00:17:46,940 你得到即时的反馈 从浏览器。 394 00:17:46,940 --> 00:17:48,070 也许出了红色。 395 00:17:48,070 --> 00:17:49,190 >> 也许你会得到一个弹出。 396 00:17:49,190 --> 00:17:53,240 但是，你不要浪费时间发送到 服务器数据是不完整的。 397 00:17:53,240 --> 00:17:56,050 因此，让我们看看如何可能 实现这一功能也是如此。 398 00:17:56,050 --> 00:17:59,660 >> 让我去form1.html， 这看起来是相同的。 399 00:17:59,660 --> 00:18:03,530 但是，如果这次我做的 malan@harvard.edu和I型深红色 400 00:18:03,530 --> 00:18:07,350 我不进一步合作 但点击注册，现在发现。 401 00:18:07,350 --> 00:18:08,940 这不是最性感的解决方案。 402 00:18:08,940 --> 00:18:10,900 我至少抓住了这个错误。 403 00:18:10,900 --> 00:18:12,900 而且我用警报 在JavaScript--功能 404 00:18:12,900 --> 00:18:14,090 而我们只用在课堂上。 405 00:18:14,090 --> 00:18:16,430 一般情况下，你不应该使用这个 因为它可以非常迅速地得到了 406 00:18:16,430 --> 00:18:17,160 的控制权。 407 00:18:17,160 --> 00:18:19,180 但密码不匹配的错误。 408 00:18:19,180 --> 00:18:21,120 >> 让我继续前进，然后单击确定。 409 00:18:21,120 --> 00:18:25,040 但这里的关键外卖 是该URL不改变。 410 00:18:25,040 --> 00:18:27,960 所以，我不打扰浪费 服务器的时间要求它 411 00:18:27,960 --> 00:18:30,750 一个问题，我可以有 想出答案来喽。 412 00:18:30,750 --> 00:18:33,210 >> 和用户，即使 在谈论这个 413 00:18:33,210 --> 00:18:35,264 不是用户的长 要想一想， 414 00:18:35,264 --> 00:18:36,680 都将有即时的反馈。 415 00:18:36,680 --> 00:18:39,044 有没有潜伏期 网络连通性。 416 00:18:39,044 --> 00:18:40,460 因此，让我们看一下这个源代码。 417 00:18:40,460 --> 00:18:45,600 >> Form1.html外观 结构相似的在这里。 418 00:18:45,600 --> 00:18:46,810 的形式实际上是相同的。 419 00:18:46,810 --> 00:18:48,330 但是，让我们看看我在这里做下去。 420 00:18:48,330 --> 00:18:49,913 并有不同的方法来做到这一点。 421 00:18:49,913 --> 00:18:53,690 我已经做了最直接 跟随器，但不是最优雅的方式呢。 422 00:18:53,690 --> 00:18:54,869 我有一个脚本标签。 423 00:18:54,869 --> 00:18:57,035 然后我打电话 的document.getElementById（'登记'）。 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 我保存的值 在形式上，一个变量。 426 00:19:04,420 --> 00:19:05,520 >> 所以我做了什么？ 427 00:19:05,520 --> 00:19:08,960 你能想到的 的document.getElementById作为是 428 00:19:08,960 --> 00:19:11,200 一个特殊函数 JavaScript的给你 429 00:19:11,200 --> 00:19:14,400 从字面上给你一只 指针指向的节点之一 430 00:19:14,400 --> 00:19:16,520 或矩形此树。 431 00:19:16,520 --> 00:19:21,470 所以，现在这就是我们的表单变量 在JavaScript中实际上是指向。 432 00:19:21,470 --> 00:19:25,120 >> 所以，现在的语法不同 C.但我们正在做的一些事情在这里。 433 00:19:25,120 --> 00:19:30,360 一，这个人是有点怪 看，肯定与C. 434 00:19:30,360 --> 00:19:32,180 但看35行。 435 00:19:32,180 --> 00:19:35,130 因此，在左边form.onsubmit。 436 00:19:35,130 --> 00:19:38,060 回想一下，是的onsubmit 就像在一个结构中的字段。 437 00:19:38,060 --> 00:19:41,480 如果你觉得表单变量 只是作为一个C结构， 438 00:19:41,480 --> 00:19:42,600 它可能具有某些字段。 439 00:19:42,600 --> 00:19:46,410 >> 早在一天，我们有学生姓名， 身份证，房屋，这些类型的字段。 440 00:19:46,410 --> 00:19:48,520 试想想的onsubmit作为另一个领域。 441 00:19:48,520 --> 00:19:53,380 但它是一个特殊的领域，因为 浏览器预编程期待 442 00:19:53,380 --> 00:19:57,530 .onsubmit到不是一个值 象的数字或字符串 443 00:19:57,530 --> 00:20:01,180 但实际上是一个函数 或一个函数的地址 444 00:20:01,180 --> 00:20:02,570 在计算机的存储器中。 445 00:20:02,570 --> 00:20:04,740 >> 事实上，这就是 这个关键字在这里呢。 446 00:20:04,740 --> 00:20:06,710 这是说，给我一个新的功能。 447 00:20:06,710 --> 00:20:09,390 但是，什么是它的名字 将是显然？ 448 00:20:09,390 --> 00:20:10,800 >> 遥想到星期一。 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 什么是这个名字 在此基础上的语法功能？ 451 00:20:17,170 --> 00:20:19,784 不，我的意思是，有明确 没有名字肯定associated-- 452 00:20:19,784 --> 00:20:21,200 不是我在这里强调。 453 00:20:21,200 --> 00:20:22,560 >> 但是，这实际上确定。 454 00:20:22,560 --> 00:20:25,840 这是一个匿名函数，或一个 lambda函数的一些可能会调用它。 455 00:20:25,840 --> 00:20:27,589 而这仅仅意味着 它仍然是一个函数。 456 00:20:27,589 --> 00:20:29,400 这只是，你可以叫不上名字称呼它。 457 00:20:29,400 --> 00:20:30,057 不过没关系。 458 00:20:30,057 --> 00:20:33,140 因为再次，浏览器已 像谷歌公司的预编程 459 00:20:33,140 --> 00:20:38,540 或Microsoft或Mozilla或他人 只知道，如果.onsubmit场 460 00:20:38,540 --> 00:20:43,400 里面的表单元素有 值，把它当作一个function-- 461 00:20:43,400 --> 00:20:44,750 一个函数指针，如果你愿意。 462 00:20:44,750 --> 00:20:46,910 并调用它时，表单被提交。 463 00:20:46,910 --> 00:20:50,350 >> 那么，什么代码应该被执行 当表单被提交？ 464 00:20:50,350 --> 00:20:52,526 显然，一切都 里面的花括号中。 465 00:20:52,526 --> 00:20:53,650 而这仅仅是风格。 466 00:20:53,650 --> 00:20:55,626 >> 你可以这样做喜欢 我们倾向于做CS50。 467 00:20:55,626 --> 00:20:58,250 但在JavaScript中，大多数人 倾向于保持它在同一行上 468 00:20:58,250 --> 00:21:01,960 只是因为它更清楚的 与该关键字相关联的功能。 469 00:21:01,960 --> 00:21:03,240 所以，现在我在做什么？ 470 00:21:03,240 --> 00:21:08,616 >> 如果form.email.value等于等号 空字符串或没有，这里的 471 00:21:08,616 --> 00:21:11,490 警报在哪里，我会说， 你必须提供你的电子邮件地址， 472 00:21:11,490 --> 00:21:12,690 然后返回false。 473 00:21:12,690 --> 00:21:15,720 和它的回报是假 防止被提交的形式。 474 00:21:15,720 --> 00:21:19,480 同时，如果密码值是 空白，我要骂的用户 475 00:21:19,480 --> 00:21:21,150 并说，你必须提供一个密码。 476 00:21:21,150 --> 00:21:23,700 >> 与此同时事情越来越 一个小票友在这里。 477 00:21:23,700 --> 00:21:29,160 如果form.password.value不 平等form.confirmation.value， 478 00:21:29,160 --> 00:21:31,680 其他领域，大声喝斥 用户的密码 479 00:21:31,680 --> 00:21:33,860 不匹配，因为它们 刚才没有。 480 00:21:33,860 --> 00:21:35,780 然后这一个是一个 小性感，因为我 481 00:21:35,780 --> 00:21:40,470 知道我知道的概念 选中一个复选框的名字。 482 00:21:40,470 --> 00:21:45,680 >> 所以，我可以只使用一个感叹号 点说，如果检查不 483 00:21:45,680 --> 00:21:48,040 checked--它是布尔 值，真或false-- 484 00:21:48,040 --> 00:21:49,700 我会骂这个原因给用户。 485 00:21:49,700 --> 00:21:52,300 否则，如果我们打通 所有这些条件， 486 00:21:52,300 --> 00:21:53,270 让我们只返回true。 487 00:21:53,270 --> 00:21:54,700 让表单提交。 488 00:21:54,700 --> 00:21:56,560 这就会发生。 489 00:21:56,560 --> 00:21:57,740 >> 让我们输入深红色。 490 00:21:57,740 --> 00:22:00,230 让我们选中该复选框，单击注册。 491 00:22:00,230 --> 00:22:01,979 现在，我经历到目的地。 492 00:22:01,979 --> 00:22:03,270 现在，有有没有数据库。 493 00:22:03,270 --> 00:22:05,370 没有什么有趣 在register.php。 494 00:22:05,370 --> 00:22:07,980 我需要的东西 实际谈谈。 495 00:22:07,980 --> 00:22:09,140 因此，让我停下来，在这里。 496 00:22:09,140 --> 00:22:16,270 在我们刚刚完成的任何问题 或者是一些新的语法是？ 497 00:22:16,270 --> 00:22:17,640 好了，是吗？ 498 00:22:17,640 --> 00:22:20,025 >> 听众：因此，任何复选框 自动布尔。 499 00:22:20,025 --> 00:22:21,650 你不必声明它这样。 500 00:22:21,650 --> 00:22:22,649 >> DAVID J.马兰：正确。 501 00:22:22,649 --> 00:22:29,340 这是从发送给您的任何复选框 一个HTML表单的JavaScript代码 502 00:22:29,340 --> 00:22:31,760 将处理过的，是的，作为一个 布尔value--真或假。 503 00:22:31,760 --> 00:22:32,635 这是一个很好的问题。 504 00:22:32,635 --> 00:22:36,080 而其他的值，对 当然，一直文本，AKA字符串。 505 00:22:36,080 --> 00:22:38,500 >> 好吧，让我 进一步后退了一下。 506 00:22:38,500 --> 00:22:39,900 什么是这整点？ 507 00:22:39,900 --> 00:22:41,400 只是要清楚。 508 00:22:41,400 --> 00:22:44,940 如同我们已经知道了，甚至从Pset7 甚至从上周的演讲 509 00:22:44,940 --> 00:22:51,120 例子中，我们可以明显地查询 $ _GET $ _ POST看看用户给我们 510 00:22:51,120 --> 00:22:52,200 一个空值。 511 00:22:52,200 --> 00:22:54,400 还记得在PHP中的空函数。 512 00:22:54,400 --> 00:22:58,040 >> 所以才要清楚，什么是 一个原因我们还可以 513 00:22:58,040 --> 00:23:00,535 要做到这一点的错误检查 内部的浏览器？ 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 什么是这里的动机是什么？ 516 00:23:06,080 --> 00:23:06,580 是啊。 517 00:23:06,580 --> 00:23:09,735 >> 听众：更快，而你不知道 发送无用的数据发送到服务器。 518 00:23:09,735 --> 00:23:10,610 DAVID J.马兰：好。 519 00:23:10,610 --> 00:23:11,170 它的速度更快。 520 00:23:11,170 --> 00:23:12,920 你不发无用 数据发送到服务器。 521 00:23:12,920 --> 00:23:14,670 >> 所以，你得到一个更 即时响应。 522 00:23:14,670 --> 00:23:16,560 和整体，用户 体验更好。 523 00:23:16,560 --> 00:23:17,900 想想办法。 524 00:23:17,900 --> 00:23:21,160 >> 如果Gmail--，是 很多年前的情况。 525 00:23:21,160 --> 00:23:24,160 假设你有一个新的电子邮件的Gmail 帐，但通过的唯一方式 526 00:23:24,160 --> 00:23:26,510 一看就知道是一样， 重新加载整个页面。 527 00:23:26,510 --> 00:23:29,030 或者，假设你点击 一个链接来阅读电子邮件。 528 00:23:29,030 --> 00:23:31,600 >> 一切都那么重装 你可以看到邮件。 529 00:23:31,600 --> 00:23:33,380 还是Facebook--你得到一个聊天信息。 530 00:23:33,380 --> 00:23:36,000 你看不到它，直到你重新加载 页面或点击一些链接。 531 00:23:36,000 --> 00:23:38,380 >> 像，这将是一个非常 烦人的用户体验。 532 00:23:38,380 --> 00:23:41,300 这是什么样子， 显然，回来的时候我跑了UC 533 00:23:41,300 --> 00:23:44,760 和纸幅却小得多动态 和JavaScript是不是推广 534 00:23:44,760 --> 00:23:45,601 因为它是现在。 535 00:23:45,601 --> 00:23:47,850 而事情越来越多 更具活力和更 536 00:23:47,850 --> 00:23:49,900 客户端在这个意义上。 537 00:23:49,900 --> 00:23:54,370 >> 但有一个陷阱在这里， 这是一种恼人的疑难杂症的。 538 00:23:54,370 --> 00:23:58,720 仅仅因为你添加客户端 检测喜欢这并不意味着 539 00:23:58,720 --> 00:24:01,430 你可以或应该放弃 服务器端检测。 540 00:24:01,430 --> 00:24:04,080 基本上你想要把你的 错误检查这两个地方。 541 00:24:04,080 --> 00:24:05,830 因为什么1 学到的教训 542 00:24:05,830 --> 00:24:10,270 从文章中，我读了一些摘录 从这个愚蠢的CMS系统 - 543 00:24:10,270 --> 00:24:14,410 内容管理系统 - 这是 实施它的认证系统中， 544 00:24:14,410 --> 00:24:16,790 通过什么样的机制其登录？ 545 00:24:16,790 --> 00:24:19,515 546 00:24:19,515 --> 00:24:20,469 JavaScript的。 547 00:24:20,469 --> 00:24:21,499 >> 听众：JavaScript的。 548 00:24:21,499 --> 00:24:23,290 DAVID J.马兰： JavaScript的，就是这样，对吗？ 549 00:24:23,290 --> 00:24:24,610 它是使用JavaScript。 550 00:24:24,610 --> 00:24:27,120 和字面上看，你们有 打了一点点可能 551 00:24:27,120 --> 00:24:28,700 与Chrome的督察。 552 00:24:28,700 --> 00:24:30,890 如果我能找到它，检查的元素。 553 00:24:30,890 --> 00:24:33,670 >> 让我过去做的 所有Chrome的选项。 554 00:24:33,670 --> 00:24:37,080 这是它是多么容易 在浏览器中禁用JavaScript的。 555 00:24:37,080 --> 00:24:38,950 检查，没有更多的JavaScript。 556 00:24:38,950 --> 00:24:41,070 >> 因此，在公平，很多 网络的这些日子 557 00:24:41,070 --> 00:24:43,430 只是要打破，因为 Gmail和其他sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook--假设 启用JavaScript。 559 00:24:46,140 --> 00:24:50,180 但是，如果你正在做一些愚蠢的事 像只验证用户输入 560 00:24:50,180 --> 00:24:52,520 并检查它 在客户端上的错误， 561 00:24:52,520 --> 00:24:54,940 对手可以很容易地做到这一点。 562 00:24:54,940 --> 00:24:57,180 然后更聪明 对手像你这样的家伙 563 00:24:57,180 --> 00:25:01,120 现在可以使用Telnet或卷曲 或者只是命令行命令 564 00:25:01,120 --> 00:25:05,300 居然将消息发送到服务器 这同样是没有错误检查。 565 00:25:05,300 --> 00:25:08,380 >> 因此，这更多的是一种 用户界面的决定 566 00:25:08,380 --> 00:25:13,060 比它是一个实际的技术 improvement--实施 567 00:25:13,060 --> 00:25:14,410 一些客户端这样的。 568 00:25:14,410 --> 00:25:16,800 所以，现在看一眼，但随后 我会推迟到网上走 569 00:25:16,800 --> 00:25:17,674 通过这一个。 570 00:25:17,674 --> 00:25:21,480 在表格2中，我们通过实际去 和清理代码一点点。 571 00:25:21,480 --> 00:25:23,650 不过，让我推迟一个 的影片，我们很可能会 572 00:25:23,650 --> 00:25:27,970 嵌入在Pset8，仅仅显示了一个 使用一种名为库类似的语法 573 00:25:27,970 --> 00:25:32,320 jQuery的，这是一个超级，超级 通俗图书馆在JavaScript中 574 00:25:32,320 --> 00:25:34,510 坦白说大多数人 只是使用这些日子 575 00:25:34,510 --> 00:25:37,070 甚至混淆为 幸福的JavaScript本身。 576 00:25:37,070 --> 00:25:38,950 >> 它往往涉及 一些美元符号 577 00:25:38,950 --> 00:25:41,350 而像文档的关键字 在括号这里。 578 00:25:41,350 --> 00:25:44,480 但同样，让我推迟到 慢一些在线教程 579 00:25:44,480 --> 00:25:46,750 而在短短的语法获得并列起来。 580 00:25:46,750 --> 00:25:48,630 让我们继续来 东西有点凉 581 00:25:48,630 --> 00:25:50,520 在此应用的术语。 582 00:25:50,520 --> 00:25:57,730 >> 因此，在特定的，让我去 前进，这种开放在这里。 583 00:25:57,730 --> 00:25:58,340 来吧。 584 00:25:58,340 --> 00:25:59,380 在那里，我们走了。 585 00:25:59,380 --> 00:26:01,500 >> 让我在这里开了这幅画。 586 00:26:01,500 --> 00:26:03,450 不必要地复杂化 看，但它 587 00:26:03,450 --> 00:26:07,880 介绍了一种叫做AJAX-- 异步JavaScript和XML，其中 588 00:26:07,880 --> 00:26:10,530 在X的XML实际上是 不再真正使用。 589 00:26:10,530 --> 00:26:13,430 它往往会使用的东西 其他所谓的JSON。 590 00:26:13,430 --> 00:26:16,560 >> 但这里的东西怎么样 谷歌地图或谷歌地球的工作。 591 00:26:16,560 --> 00:26:18,060 让我们来试试这个上飞，其实。 592 00:26:18,060 --> 00:26:21,590 让我继续前进，打开 Chrome浏览器在我的浏览器。 593 00:26:21,590 --> 00:26:26,236 >> 让我去成， 说，maps.google.com。 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 而实际上，如果你是老 够记住什么， 596 00:26:31,930 --> 00:26:35,600 像，MapQuest的样子回到了一天， 也许他们仍然像这样工作。 597 00:26:35,600 --> 00:26:38,870 当你使用搜索something-- 33牛津街，马萨诸塞州剑桥市， 598 00:26:38,870 --> 00:26:40,650 让我们做this--你 将实际上，如果 599 00:26:40,650 --> 00:26:43,000 要向上平移和 下，左，右， 600 00:26:43,000 --> 00:26:44,920 你会看起来像一个 在上面的大箭头，它 601 00:26:44,920 --> 00:26:46,921 会告诉你另外一个 在地图上的向上此处帧。 602 00:26:46,921 --> 00:26:49,753 或者您可以点击离开你 会去到这里，或再次点击 603 00:26:49,753 --> 00:26:51,000 你会去在这里。 604 00:26:51,000 --> 00:26:53,000 而是这些 天，我们当然只 605 00:26:53,000 --> 00:26:55,970 想当然地认为我们可以去 剑桥周围很快 606 00:26:55,970 --> 00:26:57,550 只需点击和拖动。 607 00:26:57,550 --> 00:26:59,130 但是请注意，有一些小问题。 608 00:26:59,130 --> 00:27:02,160 >> 如果我这样做不够快， 什么似乎是发生 609 00:27:02,160 --> 00:27:05,960 我拖有点太快了 为计算机跟上？ 610 00:27:05,960 --> 00:27:07,160 你看到了什么？ 611 00:27:07,160 --> 00:27:07,660 是啊。 612 00:27:07,660 --> 00:27:09,232 >> 听众：像素不刷新。 613 00:27:09,232 --> 00:27:10,940 DAVID J.马兰：本 像素不刷新。 614 00:27:10,940 --> 00:27:12,870 有actually--你 可以看到这一点，实际上， 615 00:27:12,870 --> 00:27:15,360 如果你看网上和暂停 这或实际会减慢速度 616 00:27:15,360 --> 00:27:18,600 为once--你会看到有 瓷砖，正方形，或矩形那 617 00:27:18,600 --> 00:27:22,040 从地图上失踪，直到 一秒钟后，更多的数据， 618 00:27:22,040 --> 00:27:24,390 更多图片实际 出现在屏幕上。 619 00:27:24,390 --> 00:27:29,810 而事实上，如果我们做到这一点看 达Chrome's--让我们说，Chrome-- 620 00:27:29,810 --> 00:27:30,310 让我们来看看。 621 00:27:30,310 --> 00:27:31,090 我们不能这样做。 622 00:27:31,090 --> 00:27:31,860 >> 哦，哎呦。 623 00:27:31,860 --> 00:27:34,761 让我们打开maps.google.com。 624 00:27:34,761 --> 00:27:36,660 请允许我向窗口更大了。 625 00:27:36,660 --> 00:27:38,836 >> 回到33牛津街。 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 什么是网站，我是在最近？ 628 00:27:43,760 --> 00:27:46,440 我有这个一样，私人咆哮到 我自己，我会再即时消息 629 00:27:46,440 --> 00:27:48,470 任何朋友，谁是在线 谁想要听到它。 630 00:27:48,470 --> 00:27:49,345 有一些网站。 631 00:27:49,345 --> 00:27:52,680 我认为这是Comcast--这样 一个非常大的美国ISP。 632 00:27:52,680 --> 00:27:56,355 你可以注册新的电缆时， 调制解调器服务或有线电视服务， 633 00:27:56,355 --> 00:27:59,230 他们有一个形式非常合理 他们问你为你的地址在哪里。 634 00:27:59,230 --> 00:28:01,450 而有此惊人 功能叫做自动完成， 635 00:28:01,450 --> 00:28:04,600 像谷歌，启动填补 在回答你的问题。 636 00:28:04,600 --> 00:28:08,090 >> 问题在于，他们做的自动完成 在您键入的第一件事情。 637 00:28:08,090 --> 00:28:12,890 所以如果你开始输入33，它 从字面上会告诉你每个房子 638 00:28:12,890 --> 00:28:15,790 在美国启动 用数字33 639 00:28:15,790 --> 00:28:17,920 继续前 希望你能输入更多。 640 00:28:17,920 --> 00:28:20,660 如果键入33牛津因此， 那么就说明你的每一条街道 641 00:28:20,660 --> 00:28:24,726 在美国，有33牛津 它的名字，无论镇 642 00:28:24,726 --> 00:28:25,350 你就能加入。 643 00:28:25,350 --> 00:28:26,320 >> 然后你继续输入。 644 00:28:26,320 --> 00:28:28,930 最后，它意识到，他们不 提供服务到您家在剑桥 645 00:28:28,930 --> 00:28:29,920 或者类似的东西。 646 00:28:29,920 --> 00:28:33,410 但问题是，这是最 愚蠢实现自动的 647 00:28:33,410 --> 00:28:34,140 完成过。 648 00:28:34,140 --> 00:28:36,400 >> 而我只是关闭 这个切了。 649 00:28:36,400 --> 00:28:39,040 但也有好方法 使用JavaScript和坏的方面。 650 00:28:39,040 --> 00:28:40,750 而这并不一定是最好的之一。 651 00:28:40,750 --> 00:28:46,360 >> 但这里的问题，在此之前 长篇大论，就是在这里开设了下来工具 652 00:28:46,360 --> 00:28:49,480 开放的开发工具， 正如我们之前的鼓励， 653 00:28:49,480 --> 00:28:52,840 和观看网络 选项​​卡，单击我的真快。 654 00:28:52,840 --> 00:28:55,400 并注意一大堆 弄的请求发生。 655 00:28:55,400 --> 00:28:57,310 所有这一切都发生了，因为我拖。 656 00:28:57,310 --> 00:29:00,170 >> 而最有可能的，确实 很多这些行 657 00:29:00,170 --> 00:29:04,060 现在图像斜线JPEG MIME类型或内容类型。 658 00:29:04,060 --> 00:29:07,750 这是因为铬是什么做 我每次单击并拖动，单击 659 00:29:07,750 --> 00:29:11,650 和阻力，是它的实现，哦，我 需要去问问谷歌的瓷砖 660 00:29:11,650 --> 00:29:15,080 在地图这是在这里， 快速通过HTTP下载， 661 00:29:15,080 --> 00:29:19,550 然后将其添加到所谓的DOM 在存储器树的网络浏览器 662 00:29:19,550 --> 00:29:24,430 表示，使得用户 我看到了更新的瓷砖。 663 00:29:24,430 --> 00:29:26,795 这是因为 一个名为AJAX的技术。 664 00:29:26,795 --> 00:29:28,920 早在一天，它真的 是的情况下，如果 665 00:29:28,920 --> 00:29:33,050 想改变什么在屏幕上， 你必须点击上，下，左， 666 00:29:33,050 --> 00:29:33,550 对。 667 00:29:33,550 --> 00:29:34,740 然后一个新的页面将打开。 668 00:29:34,740 --> 00:29:36,531 但这些天，一切都 更加动感。 669 00:29:36,531 --> 00:29:40,490 它发生的方式，我们人类会 希望它居然会以交互方式。 670 00:29:40,490 --> 00:29:43,210 它通过实现这 一种叫做方式 671 00:29:43,210 --> 00:29:46,170 AJAX，这也许是最好的 通过一个例子进行说明。 672 00:29:46,170 --> 00:29:49,730 首先，让我继续前进 并打开一个文件 673 00:29:49,730 --> 00:29:53,540 在名为quote.php 今天的分销代码。 674 00:29:53,540 --> 00:29:56,200 >> 然后让我做symbol--哎呦。 675 00:29:56,200 --> 00:30:02,399 让我做符号= GOOG 对于只是一些股票。 676 00:30:02,399 --> 00:30:04,440 或者其实，让我们做的 一个来自处理器集免费的。 677 00:30:04,440 --> 00:30:05,270 输入。 678 00:30:05,270 --> 00:30:06,580 >> 现在看到我回来。 679 00:30:06,580 --> 00:30:09,210 所以这是一个真正的 总之PHP文件，我 680 00:30:09,210 --> 00:30:13,210 写了简单的借用代码 从Pset7的查找功能 681 00:30:13,210 --> 00:30:17,830 并吐出使用该花括号和 报价和冒号表示法，显然， 682 00:30:17,830 --> 00:30:22,747 当前股票的价格 你通过GET传递公司。 683 00:30:22,747 --> 00:30:24,580 因此，这是不同的 大多数的我们已经 684 00:30:24,580 --> 00:30:26,496 在该通知，我做了 从字面上吐出 685 00:30:26,496 --> 00:30:27,870 什么样子的JavaScript代码。 686 00:30:27,870 --> 00:30:30,020 >> 其实，这是一个JavaScript对象。 687 00:30:30,020 --> 00:30:34,130 其实，只是为了更清晰， Notation-- JSON-- JavaScript对象 688 00:30:34,130 --> 00:30:38,330 是说，你只是一个花哨的方式 可以表示在JavaScript中的数据太多 689 00:30:38,330 --> 00:30:41,660 就像你可以在PHP 使用键值对。 690 00:30:41,660 --> 00:30:44,270 所以，如果我想声明 在JavaScript中的变量 691 00:30:44,270 --> 00:30:47,872 以代表Zamyla，为 instance--一个结构的Zamyla-- 692 00:30:47,872 --> 00:30:49,580 我们将调用它 学生，这个变量。 693 00:30:49,580 --> 00:30:53,060 她的ID是1，房子是 温斯罗普，并将其命名为Zamyla。 694 00:30:53,060 --> 00:30:55,490 >> 但是，我也可以有对象的数组。 695 00:30:55,490 --> 00:30:58,710 所以，如果我真的想有 在JavaScript中包含数组 696 00:30:58,710 --> 00:31:01,740 多个这样的目的，本 时间占工作人员， 697 00:31:01,740 --> 00:31:04,910 我可能有这三个 代码块回 698 00:31:04,910 --> 00:31:08,560 以背对背这些 三名前职员。 699 00:31:08,560 --> 00:31:12,201 所以，语法，漂亮 类似both--到PHP。 700 00:31:12,201 --> 00:31:13,700 但是，这是特别的JavaScript。 701 00:31:13,700 --> 00:31:15,940 它的对象符号。 702 00:31:15,940 --> 00:31:17,240 那么，这是什么用呢？ 703 00:31:17,240 --> 00:31:21,580 >> 如果我写的代码，吐出JSON-- Notation--东西JavaScript对象的 704 00:31:21,580 --> 00:31:24,670 看起来是这样或东西， 貌似Zamyla的结构， 705 00:31:24,670 --> 00:31:27,730 其实我可以用这个 在我的程序写的。 706 00:31:27,730 --> 00:31:30,660 让我去ajax0.html。 707 00:31:30,660 --> 00:31:33,310 这too--不多 的思想，赋予美感。 708 00:31:33,310 --> 00:31:34,660 不过，看会发生什么。 709 00:31:34,660 --> 00:31:37,050 >> 让我继续前进，在此处键入免费。 710 00:31:37,050 --> 00:31:38,490 点击获得报价。 711 00:31:38,490 --> 00:31:41,060 和通知的URL并没有改变。 712 00:31:41,060 --> 00:31:47,250 但我没有得到一个弹出了明显 今天的仙股的价格0.15美元。 713 00:31:47,250 --> 00:31:49,062 所以不是所有的坏。 714 00:31:49,062 --> 00:31:52,020 但不同的是，不知怎的， 这个数据回来我直接。 715 00:31:52,020 --> 00:31:54,250 但是，让我们迈出了一步 东西比较熟悉。 716 00:31:54,250 --> 00:31:58,900 在一个版本中的这一点，让我 免费再次键入，点击获取报价， 717 00:31:58,900 --> 00:32:01,146 和now--哦，这是 实际上jQuery的版本。 718 00:32:01,146 --> 00:32:03,270 因此，让我 - 我没有 快进很远不够。 719 00:32:03,270 --> 00:32:05,830 让我去两个版本， 这是我想要的。 720 00:32:05,830 --> 00:32:07,260 请注意，我在这里所做的。 721 00:32:07,260 --> 00:32:10,370 我有一个Web page--超 任何简单的网页版 722 00:32:10,370 --> 00:32:14,260 你今天可能会使用与文本字段 这里免费再显然是刚刚 723 00:32:14,260 --> 00:32:14,880 文本。 724 00:32:14,880 --> 00:32:16,860 >> 这是不是在这里的一种形式，显然。 725 00:32:16,860 --> 00:32:19,360 但是，如果我点击获得 报价，请注意我的网页 726 00:32:19,360 --> 00:32:22,760 即将改变，因为虽然我 刚刚得到一个新的即时消息 727 00:32:22,760 --> 00:32:25,360 或者，就像我刚才提出的 映射，需要获得更多的数据 728 00:32:25,360 --> 00:32:29,220 动态添加到网页 没有URL变化和用户 729 00:32:29,220 --> 00:32:30,980 经验越来越中断。 730 00:32:30,980 --> 00:32:35,750 事实上，我仍然在 完全相同的place-- ajax2.html。 731 00:32:35,750 --> 00:32:39,080 >> 因此，让我们只能看一下这个例子 看看这是如何发生的。 732 00:32:39,080 --> 00:32:42,490 让我进入ajax2.html。 733 00:32:42,490 --> 00:32:44,770 并首先注意到的形式。 734 00:32:44,770 --> 00:32:47,092 >> 到这里，我翻 关闭自动完成。 735 00:32:47,092 --> 00:32:48,800 有时它得到 恼人的，如果浏览器 736 00:32:48,800 --> 00:32:50,508 试图告诉你 你的整个历史。 737 00:32:50,508 --> 00:32:53,450 所以，你可以做到这一点在HTML 只是说自动完成了。 738 00:32:53,450 --> 00:32:57,290 >> 我给这个文本字段 symbol--符号相反，一个ID。 739 00:32:57,290 --> 00:32:58,977 而现在，这是一个有趣的功能。 740 00:32:58,977 --> 00:33:01,310 我们还没有谈到跨度， 但你可以考虑一下 741 00:33:01,310 --> 00:33:03,177 就像一个段落标记或div标签。 742 00:33:03,177 --> 00:33:05,010 这是什么所谓的 在线元件，其 743 00:33:05,010 --> 00:33:07,415 意味着你不会得到一个段落 打破它上面和下面。 744 00:33:07,415 --> 00:33:11,530 它只是要继续在网上无 按下回车键的等价物。 745 00:33:11,530 --> 00:33:17,980 所以我给这个区块的HTML 要确定一个唯一的标识符 746 00:33:17,980 --> 00:33:20,130 我随意叫价。 747 00:33:20,130 --> 00:33:21,560 我有一个提交按钮。 748 00:33:21,560 --> 00:33:25,420 >> 因为现在起来这里 - 这是 其实超级惊人的多么少的代码 749 00:33:25,420 --> 00:33:27,660 你可以写做 比较整齐things-- 750 00:33:27,660 --> 00:33:31,800 发现我做了什么在这里，如果我 向上滚动到该页面的头部。 751 00:33:31,800 --> 00:33:34,970 我已经包括在第 我的头一个脚本标签 752 00:33:34,970 --> 00:33:37,410 实际上引用 其他地方的JavaScript文件。 753 00:33:37,410 --> 00:33:39,702 这是从组织 写入jQuery的， 754 00:33:39,702 --> 00:33:42,660 而这仅仅是给你最新的 版本的jQuery库。 755 00:33:42,660 --> 00:33:46,305 >> 因此，这是一种像锋利 包括在C或需要在PHP。 756 00:33:46,305 --> 00:33:48,900 您可以使用脚本标记 与源属性。 757 00:33:48,900 --> 00:33:52,030 但是现在我自己的代码是 将是合适的在这里。 758 00:33:52,030 --> 00:33:54,170 >> 请注意，我有一个功能叫做行情。 759 00:33:54,170 --> 00:33:56,180 它看起来有点 神秘的第一眼。 760 00:33:56,180 --> 00:33:57,305 但是，让我们取笑这个分开。 761 00:33:57,305 --> 00:33:59,090 给我一个变量调用URL。 762 00:33:59,090 --> 00:34:01,390 从字面上给它分配此字符串。 763 00:34:01,390 --> 00:34:04,530 因此，单引号，双引号 JavaScript的只是给了我一个字符串。 764 00:34:04,530 --> 00:34:06,900 什么是加呢？ 765 00:34:06,900 --> 00:34:08,199 串联。 766 00:34:08,199 --> 00:34:12,610 >> 所以这个现在是jQuery的语法 这需要一点时间来适应。 767 00:34:12,610 --> 00:34:18,310 但是，这只是意味着去把我的DOM 节点的唯一标识符是符号。 768 00:34:18,310 --> 00:34:21,929 包括hashtag有指 唯一标识符号。 769 00:34:21,929 --> 00:34:24,929 >> 在美元符号 圆括号只是意味着，这个包裹 770 00:34:24,929 --> 00:34:28,510 在jQuery的一种秘密武器，使 你会得到额外的功能。 771 00:34:28,510 --> 00:34:31,880 然后.VAL明显 一个函数，或者像我们现在说的， 772 00:34:31,880 --> 00:34:35,219 该节点的内部的方法 这只是给你的价值。 773 00:34:35,219 --> 00:34:38,896 因此，在短期，丑陋和混乱 因为这第一眼看上去， 774 00:34:38,896 --> 00:34:42,020 这也就意味着与用户输入获得 中，把它在字符串的结尾 775 00:34:42,020 --> 00:34:42,880 通过连接它。 776 00:34:42,880 --> 00:34:43,739 就这样。 777 00:34:43,739 --> 00:34:46,070 >> 所以，现在，最后三行。 778 00:34:46,070 --> 00:34:48,690 你可以挤了很多 功能出了三条线。 779 00:34:48,690 --> 00:34:52,199 这个美元符号，作为一个 抛开，仅仅是一个绰号 780 00:34:52,199 --> 00:34:55,800 对于一个特殊的全局变量 所谓的字面上的jQuery。 781 00:34:55,800 --> 00:34:57,060 >> 美元符号只是看起来很酷。 782 00:34:57,060 --> 00:35:00,080 所以，jQuery社区正中下怀 使用它作为自己的特殊符号。 783 00:35:00,080 --> 00:35:02,470 这并不意味着这是什么意思在PHP。 784 00:35:02,470 --> 00:35:06,356 在JavaScript中，美元符号 就像一个字母 785 00:35:06,356 --> 00:35:07,480 或一个数字的变量。 786 00:35:07,480 --> 00:35:09,000 >> 你可以把它作为名称。 787 00:35:09,000 --> 00:35:09,770 只是看起来很酷。 788 00:35:09,770 --> 00:35:11,890 因此社会 采用它作为一个昵称 789 00:35:11,890 --> 00:35:13,390 对于自己的图书馆被称为jQuery的。 790 00:35:13,390 --> 00:35:15,060 >> 和它的超人气。 791 00:35:15,060 --> 00:35:17,620 因此，获得JSON正是如此。 792 00:35:17,620 --> 00:35:19,920 这是一个功能，该 在乡亲们写的jQuery 793 00:35:19,920 --> 00:35:23,340 ，获取JSON从server-- JavaScript对象表示法。 794 00:35:23,340 --> 00:35:25,680 从哪个网址是去 得到这些信息？ 795 00:35:25,680 --> 00:35:27,790 显然，从这个网址在这里。 796 00:35:27,790 --> 00:35:31,180 >> 又该浏览器做的 只要它回来这种反应？ 797 00:35:31,180 --> 00:35:36,500 这是AJAX的魔力，所以 speak--异步JavaScript的XML。 798 00:35:36,500 --> 00:35:41,320 很难看到这样的 因为我们不得不在这里简单的例子。 799 00:35:41,320 --> 00:35:44,730 >> 但是，这是异步的 这个意义上，我的代码时， 800 00:35:44,730 --> 00:35:48,530 执行发送一个消息到 服务器去给我拿一些JSON。 801 00:35:48,530 --> 00:35:51,340 和它发生了超快速 我得到了响应。 802 00:35:51,340 --> 00:35:55,130 但有趣的是，这 代码行没挂我的电脑。 803 00:35:55,130 --> 00:35:56,550 >> 我没有看到一个旋转图标。 804 00:35:56,550 --> 00:35:59,200 我没输 能否将我的鼠标。 805 00:35:59,200 --> 00:36:01,340 我的浏览器实际上是完全正常的。 806 00:36:01,340 --> 00:36:06,290 >> 因为JavaScript的方式处理 来自服务器的响应如下。 807 00:36:06,290 --> 00:36:09,740 你注册你叫什么 一个回调函数，这 808 00:36:09,740 --> 00:36:12,830 只是意味着，哎，JavaScript的。 809 00:36:12,830 --> 00:36:16,100 只要服务器 回应JSON， 810 00:36:16,100 --> 00:36:18,750 请拨打这个匿名函数。 811 00:36:18,750 --> 00:36:23,910 >> 并请传递给这个函数 任何字符串服务器吐出 812 00:36:23,910 --> 00:36:26,080 作为参数调用数据。 813 00:36:26,080 --> 00:36:28,360 因此在另一方面，换句话说，如果 我动态组装 814 00:36:28,360 --> 00:36:33,370 网址quote.php通过本 如免费或歌或诸如此类的东西的象征， 815 00:36:33,370 --> 00:36:36,830 我再告诉 JavaScript的去把那个URL。 816 00:36:36,830 --> 00:36:39,080 请记住，浏览器 将要返回的东西 817 00:36:39,080 --> 00:36:42,680 看起来像我们先前已经看到了这一点。 818 00:36:42,680 --> 00:36:45,940 >> 什么第二个参数 这里获取JSON是说 819 00:36:45,940 --> 00:36:48,450 在调用这个函数 当服务器回来 820 00:36:48,450 --> 00:36:52,440 无论是10毫秒 从现在开始，或从现在开始10秒。 821 00:36:52,440 --> 00:36:55,840 而且只要你做， 价格添加到页面中。 822 00:36:55,840 --> 00:36:58,030 这种语法在这里只是 手段去得到的节点 823 00:36:58,030 --> 00:37:01,940 从它的唯一的标识符的树 是price--我们前面看到的跨度。 824 00:37:01,940 --> 00:37:04,320 >> 这种方法称为HTML 只是说，去取代 825 00:37:04,320 --> 00:37:08,770 在HTML中的存在与data.price。 826 00:37:08,770 --> 00:37:10,200 什么是data.price？ 827 00:37:10,200 --> 00:37:12,850 好了，浏览器，还记得， 我看了这回来了。 828 00:37:12,850 --> 00:37:14,540 因此，这是数据。 829 00:37:14,540 --> 00:37:18,100 >> 所以这是一个有点神秘 看到这里的逗号。 830 00:37:18,100 --> 00:37:19,350 但事实上，让我做到这一点。 831 00:37:19,350 --> 00:37:22,890 我只是复制粘贴此 真正的快速进入gedit中 832 00:37:22,890 --> 00:37:27,240 并出示此类似，我们发现 Zamyla的结构更早。 833 00:37:27,240 --> 00:37:31,610 >> 什么是服务器发送回一个 小物体，看起来像这样。 834 00:37:31,610 --> 00:37:37,140 所以data.price是 只是给我0.1515。 835 00:37:37,140 --> 00:37:39,310 所以很多移动 这里的部分​​全部一次。 836 00:37:39,310 --> 00:37:41,860 >> 但关键是外卖 我们有这个能力 837 00:37:41,860 --> 00:37:44,600 作出额外的HTTP 使用JavaScript请求 838 00:37:44,600 --> 00:37:46,090 而无需重新加载页面。 839 00:37:46,090 --> 00:37:49,580 然后我们就可以真正 在运行中改变网页。 840 00:37:49,580 --> 00:37:51,850 而事实证明， JavaScript和其他语言 841 00:37:51,850 --> 00:37:54,510 现在可以使用不仅 变异的网页， 842 00:37:54,510 --> 00:37:57,960 但实际编写软件 在实际的计算机， 843 00:37:57,960 --> 00:38:00,240 不只是局限在Chrome浏览器等。 844 00:38:00,240 --> 00:38:03,530 >> 事实上，if--科尔顿，你会 想加入我们回到了这里 845 00:38:03,530 --> 00:38:06,100 与您的实验室代码，畅呢？ 846 00:38:06,100 --> 00:38:09,140 让我们继续前进，已经谈了 匿名函数和回调 847 00:38:09,140 --> 00:38:13,090 而真的在这里铤而走险 有现场演示出血 848 00:38:13,090 --> 00:38:16,480 尖端技术，其中一个 这些精英运动设备。 849 00:38:16,480 --> 00:38:18,940 现在，这个设备，召回， 是一个小的USB设备 850 00:38:18,940 --> 00:38:25,620 还有that--这是beautiful-- ，可插入到您的USB端口。 851 00:38:25,620 --> 00:38:29,120 >> 然后它提供了输入 在人体手势的形式 852 00:38:29,120 --> 00:38:32,560 通过使用红外光束探测， 实际上，从你的手臂动作。 853 00:38:32,560 --> 00:38:35,150 因此而有什么玛丽亚尝试 之前是肌肉， 854 00:38:35,150 --> 00:38:39,000 实际上感觉什么变化 你的手臂，这是基于红外的。 855 00:38:39,000 --> 00:38:44,390 因此，在寻找中移动 一英尺左右的球的种类 856 00:38:44,390 --> 00:38:46,190 装置自身的。 857 00:38:46,190 --> 00:38:48,950 >> 那么，为什么不让我走 刺在这首？ 858 00:38:48,950 --> 00:38:53,100 让我们继续前进，扔 您在这里的开销。 859 00:38:53,100 --> 00:38:56,250 所以，让我们把科尔顿的笔记本电脑在这里。 860 00:38:56,250 --> 00:38:58,360 我们已经得到了安德鲁在电视上。 861 00:38:58,360 --> 00:39:00,160 那你想我首先做什么？ 862 00:39:00,160 --> 00:39:02,409 >> COLTON：来吧，只是 把你的手过这个家伙 863 00:39:02,409 --> 00:39:04,430 你会看到一些神话般的闪闪发光。 864 00:39:04,430 --> 00:39:07,230 >> DAVID J.马兰：很不错的。 865 00:39:07,230 --> 00:39:11,110 这一切都发生在实时。 866 00:39:11,110 --> 00:39:11,889 行。 867 00:39:11,889 --> 00:39:12,680 没事了，是的。 868 00:39:12,680 --> 00:39:14,119 这么好看。 869 00:39:14,119 --> 00:39:15,410 好吧，我们还能做什么？ 870 00:39:15,410 --> 00:39:17,900 >> COLTON：转到下一屏幕看。 871 00:39:17,900 --> 00:39:19,136 >> DAVID J.马兰：好吧。 872 00:39:19,136 --> 00:39:21,780 >> COLTON：一个有趣的小游戏 你在哪里得到，使机器人。 873 00:39:21,780 --> 00:39:24,738 >> DAVID J.马兰：好吧，所以这 是假的手带我该怎么做。 874 00:39:24,738 --> 00:39:27,920 COLTON：是的，所以还是提前 并抓住其中一个块 875 00:39:27,920 --> 00:39:30,637 并把它放在了机器人的身体之上。 876 00:39:30,637 --> 00:39:32,137 DAVID J.马兰：哦，还有我的手。 877 00:39:32,137 --> 00:39:34,000 呵呵。 878 00:39:34,000 --> 00:39:34,780 OK，可爱。 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 等待一分钟，OK。 881 00:39:38,650 --> 00:39:41,320 在那里，我们走了。 882 00:39:41,320 --> 00:39:43,590 >> COLTON：我做了一个事故。 883 00:39:43,590 --> 00:39:45,423 >> DAVID J.马兰：好的，我会得到这个家伙。 884 00:39:45,423 --> 00:39:45,923 该死的！ 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 当我们练习这最后 晚上，你知道这是什么演化成？ 887 00:39:51,550 --> 00:39:54,285 >> 像这样。 888 00:39:54,285 --> 00:39:55,490 行。 889 00:39:55,490 --> 00:39:55,990 下一个？ 890 00:39:55,990 --> 00:39:56,860 >> COLTON：当然。 891 00:39:56,860 --> 00:39:58,818 >> DAVID J.马兰：好吧， 并有三分之一。 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 行。 894 00:40:01,674 --> 00:40:03,215 COLTON：而在这其中，你会得到to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J.马兰：哦， 这个美丽的。 896 00:40:04,923 --> 00:40:06,650 COLTON：--yeah，挑除这种花。 897 00:40:06,650 --> 00:40:07,441 DAVID J.马兰：OK。 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 不是吗？ 900 00:40:11,670 --> 00:40:14,515 错过了。 901 00:40:14,515 --> 00:40:15,570 >> COLTON：哦，你去那里。 902 00:40:15,570 --> 00:40:18,680 >> DAVID J.马兰：啊，你看那个。 903 00:40:18,680 --> 00:40:19,830 很不错。 904 00:40:19,830 --> 00:40:22,470 那么，为什么不'，我们取 在这里一位志愿者 905 00:40:22,470 --> 00:40:24,180 谁愿意高达来吧。 906 00:40:24,180 --> 00:40:27,500 如何正确的有 在绿色，是吗？ 907 00:40:27,500 --> 00:40:30,540 >> 好吧，让我们have-- 而不是这样做，你们中的一些 908 00:40:30,540 --> 00:40:34,590 可能知道这​​场比赛这里 - 切断绳子，也许？ 909 00:40:34,590 --> 00:40:35,100 让我们来看看。 910 00:40:35,100 --> 00:40:37,320 我们有我们的眼镜在这里？ 911 00:40:37,320 --> 00:40:38,625 >> 行。 912 00:40:38,625 --> 00:40:39,270 谢谢。 913 00:40:39,270 --> 00:40:39,380 你叫什么名字？ 914 00:40:39,380 --> 00:40:40,350 >> 听众：劳拉。 915 00:40:40,350 --> 00:40:41,266 >> DAVID J.马兰：劳拉？ 916 00:40:41,266 --> 00:40:42,120 很高兴见到。 917 00:40:42,120 --> 00:40:45,600 如果你不介意把 谷歌玻璃上你的眼镜。 918 00:40:45,600 --> 00:40:46,970 这是科尔顿。 919 00:40:46,970 --> 00:40:47,650 >> COLTON：你好。 920 00:40:47,650 --> 00:40:48,140 很高兴认识你。 921 00:40:48,140 --> 00:40:49,600 >> DAVID J.马兰：OK，来吧左右。 922 00:40:49,600 --> 00:40:52,516 好吧，那么你要什么 在这里做的，之前已经玩过这个， 923 00:40:52,516 --> 00:40:55,650 是将手放在 大跃进运动在这里。 924 00:40:55,650 --> 00:40:57,210 现在你应该箭头移动。 925 00:40:57,210 --> 00:40:57,710 呵呵，没了。 926 00:40:57,710 --> 00:40:58,066 >> 听众：没有。 927 00:40:58,066 --> 00:40:58,780 >> DAVID J.马兰：我们 不想放弃呢。 928 00:40:58,780 --> 00:40:59,280 OK，等待。 929 00:40:59,280 --> 00:41:01,200 在这里。 930 00:41:01,200 --> 00:41:03,530 所以，看到你抱着你 手指上的东西， 931 00:41:03,530 --> 00:41:06,750 鼠标开始走向绿色， 这是怎么点击。 932 00:41:06,750 --> 00:41:08,980 >> 因此，将鼠标悬停在玩。 933 00:41:08,980 --> 00:41:10,970 而就在一个手指的罚款。 934 00:41:10,970 --> 00:41:13,869 现在点击小 绿色的家伙在左侧。 935 00:41:13,869 --> 00:41:15,410 现在持有，直到它填补了绿色。 936 00:41:15,410 --> 00:41:15,640 不错。 937 00:41:15,640 --> 00:41:16,990 现在一样，一个级别之上。 938 00:41:16,990 --> 00:41:20,190 >> 听众：是的，我们想要一个级别，在这里。 939 00:41:20,190 --> 00:41:21,660 >> DAVID J.马兰：好。 940 00:41:21,660 --> 00:41:25,500 好了，你有 做的是割绳子。 941 00:41:25,500 --> 00:41:28,240 光标是白茫茫的一片出现了下滑。 942 00:41:28,240 --> 00:41:28,880 >> 很不错。 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 好吧，这是即将会更加困难。 945 00:41:32,790 --> 00:41:34,800 所以，把你的手指在接下来的现在。 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 不错。 948 00:41:39,030 --> 00:41:39,999 这其中的辛苦。 949 00:41:39,999 --> 00:41:40,966 >> 听众：哦，废话。 950 00:41:40,966 --> 00:41:41,466 行。 951 00:41:41,466 --> 00:41:42,466 它希望走那条路。 952 00:41:42,466 --> 00:41:44,890 呵呵废话，that-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J.马兰：是啊。 954 00:41:47,120 --> 00:41:50,700 第二个目标是让所有的星星。 955 00:41:50,700 --> 00:41:53,920 好吧，接下来。 956 00:41:53,920 --> 00:41:57,504 >> 让我们来看看，如果你能得到这个第三个。 957 00:41:57,504 --> 00:41:58,004 不错。 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 好了，到那边去。 960 00:42:06,840 --> 00:42:08,850 >> 当然可以。 961 00:42:08,850 --> 00:42:11,230 呵呵，很不错。 962 00:42:11,230 --> 00:42:11,930 行。 963 00:42:11,930 --> 00:42:13,534 >> 那么，我们为什么不今天休会？ 964 00:42:13,534 --> 00:42:15,200 让任何人上来吧谁愿意玩。 965 00:42:15,200 --> 00:42:16,880 非常感谢劳拉我们的志愿者。 966 00:42:16,880 --> 00:42:18,730 我们会看到你在星期一。 967 00:42:18,730 --> 00:42:21,190 >> 听众：你可能想这些了。 968 00:42:21,190 --> 00:42:23,640 >> 扬声器2：在接下来的CS50-- 969 00:42:23,640 --> 00:42:35,222