DAVID J.马兰：好吧， 所以这是这里的缪手臂 带内，一对夫妇，其中我们 有CS50最终项目。 而这是一个演示中，我们排队 您事先根本所在 这个相当紧臂带在这里 听你的肌肉运动 这将被映射软件 以科尔顿的笔记本电脑在这里它 有iTunes和那 歌已经排队。 而不是我演示该这样， 科尔顿一直在实验室 显然整个星期得到一个示范 准备好一个勇敢的志愿者。 如果有人想进来 在up--第一次看到你的手。 上来吧。 [00:01:09] 行。 而你叫什么名字？ [00:01:13] 听众：呃，玛丽亚。 [00:01:14] DAVID J.马兰：玛丽亚，很高兴见到你。 快点看过来。 让我来给你介绍科尔顿。 科尔顿，这是玛丽亚。 [00:01:21] COLTON：你好，很高兴见到你。 [00:01:23] DAVID J.马兰：全部 对，所以第一步，我们 要你放 这对你的前臂 因此，它是相当 紧了靠近你的肘部。 而与此同时，让我们 把我们的谷歌玻璃 而我们今天将混合技术。 [00:01:33] COLTON：首先我们得 钩到东西了。 [00:01:36] DAVID J.马兰：OK。 其实，让我们把你的手臂 接近该电缆尽可能 这样我们就可以先同步起来。 [00:01:41] COLTON：让我们做到这一点。 [00:01:42] DAVID J.马兰：而与此同时，这样 每个人都可以得到一个更接近一目了然， 我们折腾安德鲁的摄像头 在屏幕上出现。 因此，我们有一个USB电缆的 被插入到玛丽亚的袖标。 让我折腾科尔顿的屏幕 旁边的投影机。 [00:02:00] 因此，科尔顿被注册设备 现在的缪连接到该电缆。 现在什么超群 要做到瞬间 实际上是通过走 校准步骤 并教软件 怎么她的肌肉反应 当她做出一定的预先定义的 手势软件的理解。 如果你想进去 前面的屏幕。 OK，继续努力。 [00:02:30] COLTON：进入这个样子。 和这样的。 和一路的权利。 回去。 [00:02:35] DAVID J.马兰：OK。 不同的观点。 这不是你的。 这是我们的。 [00:02:40] 玛丽亚：OK。 DAVID J.马兰：没有。 让我们将它更高的，所以这是 接近你的胳膊肘，甚至更紧。 行。 [00:02:52] 开始了。 这将是一个很好的时间CS52X。 在那里，我们走了。 [00:02:57] 很不错。 行。 拇指到小指。 [00:03:02] 很不错。 传播你的手指。 不错。 波权利。 它好奇地显示 你与左hand-- [00:03:17] COLTON：是啊，这是奇怪的。 DAVID J.马兰：波 右，向前迈进。 快进跳过或者明年。 这是确定的波权利。 [00:03:25] 玛丽亚：我don't--等待。 [00:03:26] DAVID J.马兰：需要帮忙吗？ [00:03:28] COLTON：所以你会喜欢这个。 玛丽亚：它的转动 其他的事情，虽然。 COLTON：是的。 DAVID J.马兰：是的，我不知道 为什么它向你展示一个leftie。 COLTON：你为什么不try-- 只是尝试去这样。 [00:03:38] DAVID J.马兰：没有？ 也许到达你的手臂 出一点直 并使其更突然这样。 是啊，好，来吧。 [00:03:48] 玛丽亚：对不起。 DAVID J.马兰：这不是你的错。 COLTON：它的罚款。 DAVID J.马兰：好的。 Well-- [00:03:56] 玛丽亚：我们应该跳过这个，然后呢？ DAVID J.马兰：是的，让我们 让你摆脱困境。 因此，如果有人想办一个 使用这种尖端最终项目 硬件，实现它可能只是 需要一点时间来适应。 和this--现实就是如此 其实是很前沿的。 [00:04:10] 这就是被称为 该开发工具包，其中 意指基本上预发布 使人们可以做完全 this--与它对抗，图 如何人的身体工作 随着技术的发展。 所以，如果你想 事后，演讲结束后， 我们可以让你来 采取另一种刺吧。 但除此之外，掌声雷动，如果 我们可以，玛丽亚·达来临。 [00:04:26] 玛丽亚：谢谢你。 [00:04:28] DAVID J.马兰：谢谢。 我们会挂到这一点，但我们会给 你 - 怎么样一个压力球吗？ 哦，还有 - if--是的，谢谢。 行。 所以对于好奇的，如果你是 熟悉的声音的选择 我们有做 早些时候，一个惊人的电视 说明你绝对应该 是狂欢，观看Netflix上 这是一个在这里。 [00:04:51] 扬声器1：女士们，先生们， 一个名为乔希魔术师。 [00:05:04] DAVID J.马兰：而且很显然，这是 事到如今讲课时给我发短信。 我被告知，玛丽亚 过了一个生日昨天。 从这么生日快乐 CS50玛丽亚为好。 [00:05:18] 所以，你可能已经读过，最近一个月 这个绅士在这里，史蒂夫 鲍尔默，谁是真正 在大专班1977年， 刚刚退休的微软。 他是一个本科生在这里， 那么几年后 发现自己 斯坦福大学商学院 当他接到一个电话 从他谁的朋友打电话 一直住在大厅 从他在哈佛。 那朋友的名字是比尔 门，在当时， 他试图招募史蒂夫是 第一笔生意的人，真的， 在一家小公司微软的名字。 [00:05:45] 长话短说，史蒂夫 最终被征服了， 加盟微软时，他们 刚刚30名员工。 和的时候，他 退休最近， 该公司拥有100,000名员工 在过去的几年里。 所以一个网站称为边缘 编制本致敬视频 我们认为我们会 共享，让你 到底有多少能量史蒂夫感 带来任何表示，他带来的。 [视频回放] - 微软就像一个第四个孩子。 孩子做离开家。 在这种情况下，我猜 我离开了家。 嘿，比尔，whazzap？ [00:06:23] -Wazzap？ [00:06:24] - 嘿，wazzap？ 我们已经给出了 巨大的机会。 和比尔给了我们这样的机会。 我要感谢比尔为。 我要你了。 创新的步伐 不会放缓。 [00:06:42] 它会变得越来越快。 可能有几个竞争者 那些不幸被淘汰！ [00:06:54] 我喜欢这家公司。 是的！ 我是一台PC，我喜欢这家公司！ [00:07:08] 开发者，开发者，开发者， 开发者，开发者，开发者， 开发者，开发者。 是的！ Web开发人员！ [00:07:19] Web开发人员！ Web开发人员！ 听什么你 得到不收取额外费用！ [00:07:28] 在MS-DOS执行，预约 压延机，卡堆，一个记事本， 一个时钟，一个控制面板。 而且，你能相信吗？ Reversie！ [00:07:35] 它们刻录到CD！ 它们发布到MSN！ 你邮寄给朋友！ [00:07:40] 所有与点击！ 一个微软，一种策略，一是team-- 专注，纪律，专业， 和专家在所有我们做的。 让我用一条线从一部老电影。 [00:07:52] 关系就像鲨鱼。 他们前进或者死亡。 其实，我觉得高科技 公司是相同的。 [00:08:01] [完视频回放] DAVID J.马兰：所以我们是如此高兴 宣布，史蒂夫将加入我们 在这里CS50下周三 平时的地点和时间在这里。 空间可能是有限的。 所以我们一起的人，请 今天头或此后不久， 到cs50.harvard.edu/register。 [00:08:22] 我们将跟进 周二确认点。 期待，明年 讲座在CS50在周三。 现在，在等消息，我偶然 遇到这样的绛只是 有一天。 [00:08:34] 事实证明，CS50的工作人员之一 和CS50的学生至少有一个 目前正在运行UC 总统和副总统， 这把我带回 我自己回天 当我失去了悲惨的UC选举。 但一线希望 在这是我一直 讲故事是， 对我的一个肯定 很多原因，我失去了 选举是完全缺乏 对人才的公开演讲。 因此坦白地说，这 开车送我，那段经历 我觉得我大三，实际签约 弥补哈佛大学计算机协会， 是该集团在校园的 拥有各种技术讲座 和其他的东西。 我接手他们的教学 研讨会因此 有一个机会，一个 难得的机会， 开始工作的正是这一点。 但同时，我有机会 在这方面的经验 教自己更加HTML。 所以，我昨天晚上被一拖再拖 翻翻基于HTML的网站 我做了像1997年，1998，我的 活动看起来像这样在这里。 我知道。 [00:09:29] 因为 - 当然，预告 在1998年这个惊人的设计决策 或诸如此类的东西。 你想的第一件事用户 做在访问您的网站 是必须点击另一个链接只是 在这里输入你的网站与和尚 后面像笼罩在哪里帷幕 显然我的竞选纲领是。 而这一切，你会得到 今天只是一个截图。 但我读通过一样， 我的竞选昨晚海报 我的平台。 [00:09:50] 我很生气的时候。 我的平台was--很有意思。 所以我从那以后平静下来。 但总有一天，我会再次运行， 希望最好这个时候。 [00:10:03] 所以HTML，我在其中所做的语言 这in--你很快就会太大的缓慢 - 是我们一直 谈到后期 并在很大程度上服用理所当然现在 我们已经转移到其他语言。 但是，让我们停下来就一下 把其中的一些东西融会贯通。 所以，在一个句子里，HTML是什么？ [00:10:18] 或者说，是用来做什么的呢？ 任何人吗？ 是。 [00:10:20] 听众：标记的网站。 DAVID J.马兰：标记的网站。 因此，它是一种标记语言， 可以让你构建一个网页。 头去在这里，标题 放在这里，身体放在这里。 这是黑体字，这是 italics--之类的细节。 [00:10:33] OK，好。 所以，CSS可以让你 - 和我 采取了一些有自由 与大胆的面向和斜体，因为 这是更好地与这个实现的。 CSS is--什么？ 说，在一个句子里。 任何人都没有。 是啊。 [00:10:46] 听众：装饰和 的东西，想怎么设计它。 DAVID J.马兰：好，好。 装饰，让您 设计它，或者它风格化 与诸如黑体和 斜体和颜色也更精细 元素的细粒度定位。 排序它可以让你把东西 最后一英里，这样，如果，例如 在Pset7，你可能已经注意到你的 投资组合页面，如果你在这一点上 已经是默认的表，你 使显示给用户的持股 和现金可能看起来很丑陋 默认情况下，没有空格。 一切的那种临时抱佛脚 一起以行和列。 [00:11:18] 好了，有一点点 CSS，你可以实现， 你其实可以调整的，并使其 一些更熟悉的多 漂亮看看。 所以CSS是关于 风格化的网站。 但是，我们引入了另一个 语言，PHP，这让我们怎么办？ [00:11:36] 我们只是做了什么？ 任何人。 有冒险超越 前几行。 是啊。 [00:11:40] 听众：生成动态内容。 DAVID J.马兰：完美。 生成动态内容。 你可以这样做 任何数目的语言。 我们碰巧使用PHP，因为它是 在栏目等类似C的语法。 [00:11:50] 但是PHP正是这么做的。 它可以让你动态生成的输出。 有的认为产出可能 HTML，因为我们通常在做。 而且，这也是因为它的 一种编程语言，是 通过该机制 我们可以跟数据库。 [00:12:03] 我们可以查询到 其他服务器，如雅虎 并以编程方式做任何事情 真的，你可能会以其他方式 要强迫电脑做。 所以，PHP让我们开始 动态输出内容。 因此，通过这样的逻辑，我没有 一个动态的网站早在1998年。 [00:12:16] 这只是一个静态的网页。 我的内容必须由改变 用gedit或者一些等价手动。 但是PHP也就是我们使用或 也可以使用，而是 这样的事情了 即时的新生网站， 应该采取登记和 管理users--的事情的列表 实际上切换 时间，尽管我们碰巧 使用Perl，不同的 在当时的语言。 [00:12:35] 然后最后，我们介绍 SQL--结构化查询语言。 因此，另一种语言 这是用来做什么的？ 用于什么？ 我们可以大胆slight-- OK，我们不会 获得更远 比这里的乐团。 听众：这是一个协议 用于跟数据库。 DAVID J.马兰：协议 用于跟数据库。 让我调整。 它使用的自然语言 谈谈databases--选择 并插入和删除 更新和实际 甚至更多的功能是 我们甚至还没有跌 成，但您可能希望explore--有 探索，比方说，一个最终的项目。 因此，有这些不同的部分。 [00:13:09] 并希望Pset7，即使 其规格是相当长的， 这是故意长走你 通过这些事情怎么能都 键入在一起。 现在，在星期一，我们 介绍了我们最后的语言 我们将正式引入 该course--就是JavaScript的。 这，像PHP，是一个 解释语言。 [00:13:25] 但一个关键的区别 我建议在周一 是，而PHP是执行或 被解释的服务器，在其上 在这种情况下是CS50器具， 或可能是一些商业网站 服务器在互联网上， 一般的JavaScript 是运行客户端的语言 没有服务器side--那么在浏览器中。 这是说，就像当我打开 了Facebook的源代码，发现所有 这些的.js文件中，隐含着 当您访问Facebook或最 网站的这些日子里，你会得到 不仅是HTML，不仅CSS， 但一大堆的JavaScript 常在的.js文件的形式编码。 然后它的browser--自己 苹果或PC--一个执行该代码。 [00:14:03] 但是，您的浏览器执行。 你能想到的那种沙箱中。 使JavaScript代码不应该是 能够删除计算机上的文件。 它不应该能够 以您的名义发送电子邮件。 您的浏览器种类的限制 你可以用它做什么。 [00:14:17] 因此，在这个意义上说，这是一个有点 那么强大，或许比C. 但JavaScript可以作为 一边，在服务器上使用， 虽然我们倾向于不说话 它在这方面。 所以，现在让我们一起把这些。 一个星期加前，我们提出了一些HTML 在lef​​t--超级无聊的网页。 [00:14:34] 只是打招呼的世界。 然后我提出的 右侧我们可以种偷的想法 从我们的讨论 数据结构，C语言 并思考如何分级 在左边的标记语言 可以得出，或在存储器中实现 作为一个实际的树结构的节点 和指针和这些类型的细节。 在右边，我们称之为 一个DOM--文档 反对型号 - 这仅仅是 说法一树奇特的方式。 [00:14:56] 现在，这是为什么有用 认为它以这种方式？ 因为现在有 JavaScript的，因为我们有 那在得到这个打码 环境，实际的HTML那 被发送给浏览器 已经具有已 被加载到存储器的 浏览到您的计算机中的一棵树 这样的内存，我们可以使用JavaScript 实际遍历或步行或搜索 或更改DOM树然而，我们想要的。 所以，事实上，如果你认为 关于facebook.com， 如果您使用聊天功能，如果你 使用Gmail和谷歌聊天软件的功能， 什么，你必须 消息来连连 又一次，这些消息可能是， 像李标签，列表项的标签，也许。 [00:15:35] 或者，也许他们只是 那不断出现的div 每次你得到一个即时消息。 因此，仅仅意味着什么 Facebook或谷歌正在做 在任何时候你得到一个 来自服务器的消息， 他们可能使用JavaScript 只需添加另一个节点 这tree--另一个节点这一 树则在视觉上看起来只是 喜欢的文字在屏幕上一个新行。 但他们插入 这个数据结构。 [00:15:57] 因此，在这样的类 CS124和其他人，你会 其实对写更多的代码 数据结构是这样的。 但是现在在JavaScript中， 我们姑且 我们得到了所有这些功能 免费从语言本身。 因此，让我们来看一个例子。 [00:16:09] 让我打开一个名为form.html文件。 这是超级简单。 它只是看起来像这样。 [00:16:15] 没有CSS，没有想到美学。 这是纯粹的功能 显然我 请求的电子邮件，密码 再次输入密码，然后检查 同意某些条款和条件。 什么此源代码 看起来可能是什么 你可能有一个猜测 现在花点心思位。 我有一个表单标签在这里。 [00:16:32] 动作显然是要 去一个名为register.php文件。 我将使用的方法是搞定了。 然后我有一个文本 现场，其名称是电子邮件。 [00:16:40] 我有一个密码字段 他的名字是密码。 我有另一个 密码字段的名字 是有点任意的确认。 这只是一个HTTP参数。 [00:16:49] 然后我们我们不只是用这些 由于即时消息的新生演示中class-- 复选框是 只需键入等于检查。 我会打电话给该协议。 所以我有种随意，但 方便的命名这些字段。 所以现在，当这种形式得到 提交后，让我们看看会发生什么。 如果我做malan@harvard.edu， 我会做绯红的密码。 我会做的任何密码。 让我们不要合作。 [00:17:10] 我不会选择该复选框。 让我点击注册。 它说，嗯，你注册。 并不是的。 [00:17:16] 但是URL改变。 因此，这种形式显然是允许 提交register.php。 但据推测，应该是我 捕捉一些错误。 现在，在Pset7和一些 我们讲的例子， 我们通常会打印出 大红色的错误信息在这里 他说，失踪的名字， 或丢失密码。 我们已经做到这一点之前，我们已经 做完服务器端错误检测。 [00:17:37] 但是很多网站这几天 做客户端的错误检测 其中的URL不改变。 整个页面不会刷新。 你得到即时的反馈 从浏览器。 也许出了红色。 [00:17:48] 也许你会得到一个弹出。 但是，你不要浪费时间发送到 服务器数据是不完整的。 因此，让我们看看如何可能 实现这一功能也是如此。 [00:17:56] 让我去form1.html， 这看起来是相同的。 但是，如果这次我做的 malan@harvard.edu和I型深红色 我不进一步合作 但点击注册，现在发现。 这不是最性感的解决方案。 我至少抓住了这个错误。 而且我用警报 在JavaScript--功能 而我们只用在课堂上。 一般情况下，你不应该使用这个 因为它可以非常迅速地得到了 的控制权。 但密码不匹配的错误。 [00:18:19] 让我继续前进，然后单击确定。 但这里的关键外卖 是该URL不改变。 所以，我不打扰浪费 服务器的时间要求它 一个问题，我可以有 想出答案来喽。 [00:18:30] 和用户，即使 在谈论这个 不是用户的长 要想一想， 都将有即时的反馈。 有没有潜伏期 网络连通性。 因此，让我们看一下这个源代码。 [00:18:40] Form1.html外观 结构相似的在这里。 的形式实际上是相同的。 但是，让我们看看我在这里做下去。 并有不同的方法来做到这一点。 我已经做了最直接 跟随器，但不是最优雅的方式呢。 我有一个脚本标签。 然后我打电话 的document.getElementById（'登记'）。 我保存的值 在形式上，一个变量。 [00:19:04] 所以我做了什么？ 你能想到的 的document.getElementById作为是 一个特殊函数 JavaScript的给你 从字面上给你一只 指针指向的节点之一 或矩形此树。 所以，现在这就是我们的表单变量 在JavaScript中实际上是指向。 [00:19:21] 所以，现在的语法不同 C.但我们正在做的一些事情在这里。 一，这个人是有点怪 看，肯定与C. 但看35行。 因此，在左边form.onsubmit。 回想一下，是的onsubmit 就像在一个结构中的字段。 如果你觉得表单变量 只是作为一个C结构， 它可能具有某些字段。 [00:19:42] 早在一天，我们有学生姓名， 身份证，房屋，这些类型的字段。 试想想的onsubmit作为另一个领域。 但它是一个特殊的领域，因为 浏览器预编程期待 .onsubmit到不是一个值 象的数字或字符串 但实际上是一个函数 或一个函数的地址 在计算机的存储器中。 [00:20:02] 事实上，这就是 这个关键字在这里呢。 这是说，给我一个新的功能。 但是，什么是它的名字 将是显然？ [00:20:09] 遥想到星期一。 什么是这个名字 在此基础上的语法功能？ 不，我的意思是，有明确 没有名字肯定associated-- 不是我在这里强调。 [00:20:21] 但是，这实际上确定。 这是一个匿名函数，或一个 lambda函数的一些可能会调用它。 而这仅仅意味着 它仍然是一个函数。 这只是，你可以叫不上名字称呼它。 不过没关系。 因为再次，浏览器已 像谷歌公司的预编程 或Microsoft或Mozilla或他人 只知道，如果.onsubmit场 里面的表单元素有 值，把它当作一个function-- 一个函数指针，如果你愿意。 并调用它时，表单被提交。 [00:20:46] 那么，什么代码应该被执行 当表单被提交？ 显然，一切都 里面的花括号中。 而这仅仅是风格。 [00:20:53] 你可以这样做喜欢 我们倾向于做CS50。 但在JavaScript中，大多数人 倾向于保持它在同一行上 只是因为它更清楚的 与该关键字相关联的功能。 所以，现在我在做什么？ [00:21:03] 如果form.email.value等于等号 空字符串或没有，这里的 警报在哪里，我会说， 你必须提供你的电子邮件地址， 然后返回false。 和它的回报是假 防止被提交的形式。 同时，如果密码值是 空白，我要骂的用户 并说，你必须提供一个密码。 [00:21:21] 与此同时事情越来越 一个小票友在这里。 如果form.password.value不 平等form.confirmation.value， 其他领域，大声喝斥 用户的密码 不匹配，因为它们 刚才没有。 然后这一个是一个 小性感，因为我 知道我知道的概念 选中一个复选框的名字。 [00:21:40] 所以，我可以只使用一个感叹号 点说，如果检查不 checked--它是布尔 值，真或false-- 我会骂这个原因给用户。 否则，如果我们打通 所有这些条件， 让我们只返回true。 让表单提交。 这就会发生。 [00:21:56] 让我们输入深红色。 让我们选中该复选框，单击注册。 现在，我经历到目的地。 现在，有有没有数据库。 没有什么有趣 在register.php。 我需要的东西 实际谈谈。 因此，让我停下来，在这里。 在我们刚刚完成的任何问题 或者是一些新的语法是？ 好了，是吗？ [00:22:17] 听众：因此，任何复选框 自动布尔。 你不必声明它这样。 [00:22:21] DAVID J.马兰：正确。 这是从发送给您的任何复选框 一个HTML表单的JavaScript代码 将处理过的，是的，作为一个 布尔value--真或假。 这是一个很好的问题。 而其他的值，对 当然，一直文本，AKA字符串。 [00:22:36] 好吧，让我 进一步后退了一下。 什么是这整点？ 只是要清楚。 如同我们已经知道了，甚至从Pset7 甚至从上周的演讲 例子中，我们可以明显地查询 $ _GET $ _ POST看看用户给我们 一个空值。 还记得在PHP中的空函数。 [00:22:54] 所以才要清楚，什么是 一个原因我们还可以 要做到这一点的错误检查 内部的浏览器？ 什么是这里的动机是什么？ 是啊。 [00:23:06] 听众：更快，而你不知道 发送无用的数据发送到服务器。 DAVID J.马兰：好。 它的速度更快。 你不发无用 数据发送到服务器。 [00:23:12] 所以，你得到一个更 即时响应。 和整体，用户 体验更好。 想想办法。 [00:23:17] 如果Gmail--，是 很多年前的情况。 假设你有一个新的电子邮件的Gmail 帐，但通过的唯一方式 一看就知道是一样， 重新加载整个页面。 或者，假设你点击 一个链接来阅读电子邮件。 [00:23:29] 一切都那么重装 你可以看到邮件。 还是Facebook--你得到一个聊天信息。 你看不到它，直到你重新加载 页面或点击一些链接。 [00:23:36] 像，这将是一个非常 烦人的用户体验。 这是什么样子， 显然，回来的时候我跑了UC 和纸幅却小得多动态 和JavaScript是不是推广 因为它是现在。 而事情越来越多 更具活力和更 客户端在这个意义上。 [00:23:49] 但有一个陷阱在这里， 这是一种恼人的疑难杂症的。 仅仅因为你添加客户端 检测喜欢这并不意味着 你可以或应该放弃 服务器端检测。 基本上你想要把你的 错误检查这两个地方。 因为什么1 学到的教训 从文章中，我读了一些摘录 从这个愚蠢的CMS系统 - 内容管理系统 - 这是 实施它的认证系统中， 通过什么样的机制其登录？ JavaScript的。 [00:24:20] 听众：JavaScript的。 DAVID J.马兰： JavaScript的，就是这样，对吗？ 它是使用JavaScript。 和字面上看，你们有 打了一点点可能 与Chrome的督察。 如果我能找到它，检查的元素。 [00:24:30] 让我过去做的 所有Chrome的选项。 这是它是多么容易 在浏览器中禁用JavaScript的。 检查，没有更多的JavaScript。 [00:24:38] 因此，在公平，很多 网络的这些日子 只是要打破，因为 Gmail和其他sites-- Facebook--假设 启用JavaScript。 但是，如果你正在做一些愚蠢的事 像只验证用户输入 并检查它 在客户端上的错误， 对手可以很容易地做到这一点。 然后更聪明 对手像你这样的家伙 现在可以使用Telnet或卷曲 或者只是命令行命令 居然将消息发送到服务器 这同样是没有错误检查。 [00:25:05] 因此，这更多的是一种 用户界面的决定 比它是一个实际的技术 improvement--实施 一些客户端这样的。 所以，现在看一眼，但随后 我会推迟到网上走 通过这一个。 在表格2中，我们通过实际去 和清理代码一点点。 不过，让我推迟一个 的影片，我们很可能会 嵌入在Pset8，仅仅显示了一个 使用一种名为库类似的语法 jQuery的，这是一个超级，超级 通俗图书馆在JavaScript中 坦白说大多数人 只是使用这些日子 甚至混淆为 幸福的JavaScript本身。 [00:25:37] 它往往涉及 一些美元符号 而像文档的关键字 在括号这里。 但同样，让我推迟到 慢一些在线教程 而在短短的语法获得并列起来。 让我们继续来 东西有点凉 在此应用的术语。 [00:25:50] 因此，在特定的，让我去 前进，这种开放在这里。 来吧。 在那里，我们走了。 [00:25:59] 让我在这里开了这幅画。 不必要地复杂化 看，但它 介绍了一种叫做AJAX-- 异步JavaScript和XML，其中 在X的XML实际上是 不再真正使用。 它往往会使用的东西 其他所谓的JSON。 [00:26:13] 但这里的东西怎么样 谷歌地图或谷歌地球的工作。 让我们来试试这个上飞，其实。 让我继续前进，打开 Chrome浏览器在我的浏览器。 [00:26:21] 让我去成， 说，maps.google.com。 而实际上，如果你是老 够记住什么， 像，MapQuest的样子回到了一天， 也许他们仍然像这样工作。 当你使用搜索something-- 33牛津街，马萨诸塞州剑桥市， 让我们做this--你 将实际上，如果 要向上平移和 下，左，右， 你会看起来像一个 在上面的大箭头，它 会告诉你另外一个 在地图上的向上此处帧。 或者您可以点击离开你 会去到这里，或再次点击 你会去在这里。 而是这些 天，我们当然只 想当然地认为我们可以去 剑桥周围很快 只需点击和拖动。 但是请注意，有一些小问题。 [00:26:59] 如果我这样做不够快， 什么似乎是发生 我拖有点太快了 为计算机跟上？ 你看到了什么？ 是啊。 [00:27:07] 听众：像素不刷新。 DAVID J.马兰：本 像素不刷新。 有actually--你 可以看到这一点，实际上， 如果你看网上和暂停 这或实际会减慢速度 为once--你会看到有 瓷砖，正方形，或矩形那 从地图上失踪，直到 一秒钟后，更多的数据， 更多图片实际 出现在屏幕上。 而事实上，如果我们做到这一点看 达Chrome's--让我们说，Chrome-- 让我们来看看。 我们不能这样做。 [00:27:31] 哦，哎呦。 让我们打开maps.google.com。 请允许我向窗口更大了。 [00:27:36] 回到33牛津街。 什么是网站，我是在最近？ 我有这个一样，私人咆哮到 我自己，我会再即时消息 任何朋友，谁是在线 谁想要听到它。 有一些网站。 我认为这是Comcast--这样 一个非常大的美国ISP。 你可以注册新的电缆时， 调制解调器服务或有线电视服务， 他们有一个形式非常合理 他们问你为你的地址在哪里。 而有此惊人 功能叫做自动完成， 像谷歌，启动填补 在回答你的问题。 [00:28:04] 问题在于，他们做的自动完成 在您键入的第一件事情。 所以如果你开始输入33，它 从字面上会告诉你每个房子 在美国启动 用数字33 继续前 希望你能输入更多。 如果键入33牛津因此， 那么就说明你的每一条街道 在美国，有33牛津 它的名字，无论镇 你就能加入。 [00:28:25] 然后你继续输入。 最后，它意识到，他们不 提供服务到您家在剑桥 或者类似的东西。 但问题是，这是最 愚蠢实现自动的 完成过。 [00:28:34] 而我只是关闭 这个切了。 但也有好方法 使用JavaScript和坏的方面。 而这并不一定是最好的之一。 [00:28:40] 但这里的问题，在此之前 长篇大论，就是在这里开设了下来工具 开放的开发工具， 正如我们之前的鼓励， 和观看网络 选项​​卡，单击我的真快。 并注意一大堆 弄的请求发生。 所有这一切都发生了，因为我拖。 [00:28:57] 而最有可能的，确实 很多这些行 现在图像斜线JPEG MIME类型或内容类型。 这是因为铬是什么做 我每次单击并拖动，单击 和阻力，是它的实现，哦，我 需要去问问谷歌的瓷砖 在地图这是在这里， 快速通过HTTP下载， 然后将其添加到所谓的DOM 在存储器树的网络浏览器 表示，使得用户 我看到了更新的瓷砖。 这是因为 一个名为AJAX的技术。 早在一天，它真的 是的情况下，如果 想改变什么在屏幕上， 你必须点击上，下，左， 对。 然后一个新的页面将打开。 但这些天，一切都 更加动感。 它发生的方式，我们人类会 希望它居然会以交互方式。 它通过实现这 一种叫做方式 AJAX，这也许是最好的 通过一个例子进行说明。 首先，让我继续前进 并打开一个文件 在名为quote.php 今天的分销代码。 [00:29:53] 然后让我做symbol--哎呦。 让我做符号= GOOG 对于只是一些股票。 或者其实，让我们做的 一个来自处理器集免费的。 输入。 [00:30:05] 现在看到我回来。 所以这是一个真正的 总之PHP文件，我 写了简单的借用代码 从Pset7的查找功能 并吐出使用该花括号和 报价和冒号表示法，显然， 当前股票的价格 你通过GET传递公司。 因此，这是不同的 大多数的我们已经 在该通知，我做了 从字面上吐出 什么样子的JavaScript代码。 [00:30:27] 其实，这是一个JavaScript对象。 其实，只是为了更清晰， Notation-- JSON-- JavaScript对象 是说，你只是一个花哨的方式 可以表示在JavaScript中的数据太多 就像你可以在PHP 使用键值对。 所以，如果我想声明 在JavaScript中的变量 以代表Zamyla，为 instance--一个结构的Zamyla-- 我们将调用它 学生，这个变量。 她的ID是1，房子是 温斯罗普，并将其命名为Zamyla。 [00:30:53] 但是，我也可以有对象的数组。 所以，如果我真的想有 在JavaScript中包含数组 多个这样的目的，本 时间占工作人员， 我可能有这三个 代码块回 以背对背这些 三名前职员。 所以，语法，漂亮 类似both--到PHP。 但是，这是特别的JavaScript。 它的对象符号。 那么，这是什么用呢？ [00:31:17] 如果我写的代码，吐出JSON-- Notation--东西JavaScript对象的 看起来是这样或东西， 貌似Zamyla的结构， 其实我可以用这个 在我的程序写的。 让我去ajax0.html。 这too--不多 的思想，赋予美感。 不过，看会发生什么。 [00:31:34] 让我继续前进，在此处键入免费。 点击获得报价。 和通知的URL并没有改变。 但我没有得到一个弹出了明显 今天的仙股的价格0.15美元。 所以不是所有的坏。 但不同的是，不知怎的， 这个数据回来我直接。 但是，让我们迈出了一步 东西比较熟悉。 在一个版本中的这一点，让我 免费再次键入，点击获取报价， 和now--哦，这是 实际上jQuery的版本。 因此，让我 - 我没有 快进很远不够。 让我去两个版本， 这是我想要的。 请注意，我在这里所做的。 我有一个Web page--超 任何简单的网页版 你今天可能会使用与文本字段 这里免费再显然是刚刚 文本。 [00:32:14] 这是不是在这里的一种形式，显然。 但是，如果我点击获得 报价，请注意我的网页 即将改变，因为虽然我 刚刚得到一个新的即时消息 或者，就像我刚才提出的 映射，需要获得更多的数据 动态添加到网页 没有URL变化和用户 经验越来越中断。 事实上，我仍然在 完全相同的place-- ajax2.html。 [00:32:35] 因此，让我们只能看一下这个例子 看看这是如何发生的。 让我进入ajax2.html。 并首先注意到的形式。 [00:32:44] 到这里，我翻 关闭自动完成。 有时它得到 恼人的，如果浏览器 试图告诉你 你的整个历史。 所以，你可以做到这一点在HTML 只是说自动完成了。 [00:32:53] 我给这个文本字段 symbol--符号相反，一个ID。 而现在，这是一个有趣的功能。 我们还没有谈到跨度， 但你可以考虑一下 就像一个段落标记或div标签。 这是什么所谓的 在线元件，其 意味着你不会得到一个段落 打破它上面和下面。 它只是要继续在网上无 按下回车键的等价物。 所以我给这个区块的HTML 要确定一个唯一的标识符 我随意叫价。 我有一个提交按钮。 [00:33:21] 因为现在起来这里 - 这是 其实超级惊人的多么少的代码 你可以写做 比较整齐things-- 发现我做了什么在这里，如果我 向上滚动到该页面的头部。 我已经包括在第 我的头一个脚本标签 实际上引用 其他地方的JavaScript文件。 这是从组织 写入jQuery的， 而这仅仅是给你最新的 版本的jQuery库。 [00:33:42] 因此，这是一种像锋利 包括在C或需要在PHP。 您可以使用脚本标记 与源属性。 但是现在我自己的代码是 将是合适的在这里。 [00:33:52] 请注意，我有一个功能叫做行情。 它看起来有点 神秘的第一眼。 但是，让我们取笑这个分开。 给我一个变量调用URL。 从字面上给它分配此字符串。 因此，单引号，双引号 JavaScript的只是给了我一个字符串。 什么是加呢？ 串联。 [00:34:08] 所以这个现在是jQuery的语法 这需要一点时间来适应。 但是，这只是意味着去把我的DOM 节点的唯一标识符是符号。 包括hashtag有指 唯一标识符号。 [00:34:21] 在美元符号 圆括号只是意味着，这个包裹 在jQuery的一种秘密武器，使 你会得到额外的功能。 然后.VAL明显 一个函数，或者像我们现在说的， 该节点的内部的方法 这只是给你的价值。 因此，在短期，丑陋和混乱 因为这第一眼看上去， 这也就意味着与用户输入获得 中，把它在字符串的结尾 通过连接它。 就这样。 [00:34:43] 所以，现在，最后三行。 你可以挤了很多 功能出了三条线。 这个美元符号，作为一个 抛开，仅仅是一个绰号 对于一个特殊的全局变量 所谓的字面上的jQuery。 [00:34:55] 美元符号只是看起来很酷。 所以，jQuery社区正中下怀 使用它作为自己的特殊符号。 这并不意味着这是什么意思在PHP。 在JavaScript中，美元符号 就像一个字母 或一个数字的变量。 [00:35:07] 你可以把它作为名称。 只是看起来很酷。 因此社会 采用它作为一个昵称 对于自己的图书馆被称为jQuery的。 [00:35:13] 和它的超人气。 因此，获得JSON正是如此。 这是一个功能，该 在乡亲们写的jQuery ，获取JSON从server-- JavaScript对象表示法。 从哪个网址是去 得到这些信息？ 显然，从这个网址在这里。 [00:35:27] 又该浏览器做的 只要它回来这种反应？ 这是AJAX的魔力，所以 speak--异步JavaScript的XML。 很难看到这样的 因为我们不得不在这里简单的例子。 [00:35:41] 但是，这是异步的 这个意义上，我的代码时， 执行发送一个消息到 服务器去给我拿一些JSON。 和它发生了超快速 我得到了响应。 但有趣的是，这 代码行没挂我的电脑。 [00:35:55] 我没有看到一个旋转图标。 我没输 能否将我的鼠标。 我的浏览器实际上是完全正常的。 [00:36:01] 因为JavaScript的方式处理 来自服务器的响应如下。 你注册你叫什么 一个回调函数，这 只是意味着，哎，JavaScript的。 只要服务器 回应JSON， 请拨打这个匿名函数。 [00:36:18] 并请传递给这个函数 任何字符串服务器吐出 作为参数调用数据。 因此在另一方面，换句话说，如果 我动态组装 网址quote.php通过本 如免费或歌或诸如此类的东西的象征， 我再告诉 JavaScript的去把那个URL。 请记住，浏览器 将要返回的东西 看起来像我们先前已经看到了这一点。 [00:36:42] 什么第二个参数 这里获取JSON是说 在调用这个函数 当服务器回来 无论是10毫秒 从现在开始，或从现在开始10秒。 而且只要你做， 价格添加到页面中。 这种语法在这里只是 手段去得到的节点 从它的唯一的标识符的树 是price--我们前面看到的跨度。 [00:37:01] 这种方法称为HTML 只是说，去取代 在HTML中的存在与data.price。 什么是data.price？ 好了，浏览器，还记得， 我看了这回来了。 因此，这是数据。 [00:37:14] 所以这是一个有点神秘 看到这里的逗号。 但事实上，让我做到这一点。 我只是复制粘贴此 真正的快速进入gedit中 并出示此类似，我们发现 Zamyla的结构更早。 [00:37:27] 什么是服务器发送回一个 小物体，看起来像这样。 所以data.price是 只是给我0.1515。 所以很多移动 这里的部分​​全部一次。 [00:37:39] 但关键是外卖 我们有这个能力 作出额外的HTTP 使用JavaScript请求 而无需重新加载页面。 然后我们就可以真正 在运行中改变网页。 而事实证明， JavaScript和其他语言 现在可以使用不仅 变异的网页， 但实际编写软件 在实际的计算机， 不只是局限在Chrome浏览器等。 [00:38:00] 事实上，if--科尔顿，你会 想加入我们回到了这里 与您的实验室代码，畅呢？ 让我们继续前进，已经谈了 匿名函数和回调 而真的在这里铤而走险 有现场演示出血 尖端技术，其中一个 这些精英运动设备。 现在，这个设备，召回， 是一个小的USB设备 还有that--这是beautiful-- ，可插入到您的USB端口。 [00:38:25] 然后它提供了输入 在人体手势的形式 通过使用红外光束探测， 实际上，从你的手臂动作。 因此而有什么玛丽亚尝试 之前是肌肉， 实际上感觉什么变化 你的手臂，这是基于红外的。 因此，在寻找中移动 一英尺左右的球的种类 装置自身的。 [00:38:46] 那么，为什么不让我走 刺在这首？ 让我们继续前进，扔 您在这里的开销。 所以，让我们把科尔顿的笔记本电脑在这里。 我们已经得到了安德鲁在电视上。 那你想我首先做什么？ [00:39:00] COLTON：来吧，只是 把你的手过这个家伙 你会看到一些神话般的闪闪发光。 [00:39:04] DAVID J.马兰：很不错的。 这一切都发生在实时。 行。 没事了，是的。 这么好看。 好吧，我们还能做什么？ [00:39:15] COLTON：转到下一屏幕看。 [00:39:17] DAVID J.马兰：好吧。 [00:39:19] COLTON：一个有趣的小游戏 你在哪里得到，使机器人。 [00:39:21] DAVID J.马兰：好吧，所以这 是假的手带我该怎么做。 COLTON：是的，所以还是提前 并抓住其中一个块 并把它放在了机器人的身体之上。 DAVID J.马兰：哦，还有我的手。 呵呵。 OK，可爱。 等待一分钟，OK。 在那里，我们走了。 [00:39:41] COLTON：我做了一个事故。 [00:39:43] DAVID J.马兰：好的，我会得到这个家伙。 该死的！ 当我们练习这最后 晚上，你知道这是什么演化成？ [00:39:51] 像这样。 行。 下一个？ [00:39:55] COLTON：当然。 [00:39:56] DAVID J.马兰：好吧， 并有三分之一。 行。 COLTON：而在这其中，你会得到to-- DAVID J.马兰：哦， 这个美丽的。 COLTON：--yeah，挑除这种花。 DAVID J.马兰：OK。 不是吗？ 错过了。 [00:40:14] COLTON：哦，你去那里。 [00:40:15] DAVID J.马兰：啊，你看那个。 很不错。 那么，为什么不'，我们取 在这里一位志愿者 谁愿意高达来吧。 如何正确的有 在绿色，是吗？ [00:40:27] 好吧，让我们have-- 而不是这样做，你们中的一些 可能知道这​​场比赛这里 - 切断绳子，也许？ 让我们来看看。 我们有我们的眼镜在这里？ [00:40:37] 行。 谢谢。 你叫什么名字？ [00:40:39] 听众：劳拉。 [00:40:40] DAVID J.马兰：劳拉？ 很高兴见到。 如果你不介意把 谷歌玻璃上你的眼镜。 这是科尔顿。 [00:40:46] COLTON：你好。 很高兴认识你。 [00:40:48] DAVID J.马兰：OK，来吧左右。 好吧，那么你要什么 在这里做的，之前已经玩过这个， 是将手放在 大跃进运动在这里。 现在你应该箭头移动。 呵呵，没了。 [00:40:57] 听众：没有。 [00:40:58] DAVID J.马兰：我们 不想放弃呢。 OK，等待。 在这里。 所以，看到你抱着你 手指上的东西， 鼠标开始走向绿色， 这是怎么点击。 [00:41:06] 因此，将鼠标悬停在玩。 而就在一个手指的罚款。 现在点击小 绿色的家伙在左侧。 现在持有，直到它填补了绿色。 不错。 现在一样，一个级别之上。 [00:41:16] 听众：是的，我们想要一个级别，在这里。 [00:41:20] DAVID J.马兰：好。 好了，你有 做的是割绳子。 光标是白茫茫的一片出现了下滑。 [00:41:28] 很不错。 好吧，这是即将会更加困难。 所以，把你的手指在接下来的现在。 不错。 这其中的辛苦。 [00:41:39] 听众：哦，废话。 行。 它希望走那条路。 呵呵废话，that-- [00:41:44] DAVID J.马兰：是啊。 第二个目标是让所有的星星。 好吧，接下来。 [00:41:53] 让我们来看看，如果你能得到这个第三个。 不错。 好了，到那边去。 [00:42:06] 当然可以。 呵呵，很不错。 行。 [00:42:11] 那么，我们为什么不今天休会？ 让任何人上来吧谁愿意玩。 非常感谢劳拉我们的志愿者。 我们会看到你在星期一。 [00:42:18] 听众：你可能想这些了。 [00:42:21] 扬声器2：在接下来的CS50--