[音乐播放] DAVID马兰：这是CS50。 这是9周的开始。 这是什么将有 是布尔先生诞辰200周年。 因此，这是研究员 对他们，我们已经提到 相当长的一段时间关于使用 布尔变量真与假， 1和0这样。 这是谷歌的 今天向他表示敬意。 他会变成200。 所以，如果你想 我们一起CS50午餐 看看链接 在球场上的网站。 而这样的面孔和朋友 这里在剑桥这些等待着你。 像这些面孔等待着你在纽黑文。 而且，事实上，肯在 纽黑文热情地让 什么叫礼的GIF动画 这里在最近lunch--一个GIF尚未 另一图形文件格式， 与你familiar--的 看起来有点像这样。 因此，只要序列of--确定。 这里没有人在剑桥的笑。 但在纽黑文，这 真可笑，对不对？ 好吧。 所以不要我们一起在那里。 在这里，在哈佛， 具体而言，本周三， 如果你是一个大二或大一even-- 甚至junior--制作思路 交换机到计算机 科学，知道有会 被一个CS建议交易会 周三，下课后不久， 在下午4点，在计算机 科学楼马克斯韦尔德沃金。 我们会把这个在球场上的 网站的明天，也是如此。 甜甜圈，我被告知，将送达。 好吧。 太好笑了story--我被戳 围绕在互联网上， 我发现一些旧档案 我以前的网站。 而事实证明out--解决此 时间，似乎很及时 因为据我了解，在UC选举 即将装备起来。 所以，我跑了UC，凄惨地丢失。 也许这是部分原因。 因此，这是我的网站的时候。 出于某种原因，我认为这是 一个好主意，告诉人们面前 什么我的平台是，为什么他们 应该投我一票，他们有 点击进入地发现， 信息，现在回想起来是 那种让人毛骨悚然。 我真的不知道那是什么东西。 但它肯定没有 帮助我的竞选活动。 我还发现，高层 year--我有这个布偶日历。 提线木偶是一种流行当时的情况。 或者，也许他们不是。 我有一个布偶日历当时的情况。 而且我认为这会是很酷的名字 我的电脑哈佛的网络 frogman.student.harvard.edu。 当时，我们都独一无二 识别主机名。 你可以选择一些虚荣 名称，而不是你自己的名字。 而我就跟着蛙人出于某种原因。 然后我started--我花了很多 时间通过点击这些链接 今天早上。 这是我对网页， 现在似乎有种可爱。 但是，这也证明了刚 技术多远已经到来。 我的意思是，早在一天， 486是什么东西。 这些天来，它的超级，超级， 超慢，好少 比你可能在你的 自己的腰包，这些天。 还有更多在那里， 更是尴尬。 所以我会离开它。 但是，这是我的第一次 进军web--哦，不。 这是不是。 我第一次真正涉足网页编程 是这样的网站，我只是忘了。 在某些时候，我学会了如何 做重复的背​​景图像。 所以我发现这个平铺有效， 像冰球运动员，足球和高尔夫球 球，或不管它是什么 为Frosh IM的网站。 这实际上，真正的 第一个基于网络的项目，我花了on-- 我想，也许大二 今年，初中year-- 服用CS50和CS51，一前一后 的共同后续类。 我注意到，在寻找 通过档案 这对我的继任者之一， 样的朋友，李改 版权自言自语。 但是，这确实是东西 我应该对自己的尴尬。 但在当时，这 是第一个网站， 正如我所说的几个星期前， 由新生能 从这里注册校内体育活动。 所以，事实证明， 该背景图片 这样是不是个好主意。 但在网络是新的，并 我们都尝试。 这就是我 显然没有当时。 好吧。 因此，事不宜迟，我们切换 齿轮今天给你的，真的， 你可能会发现的最后一块 对于最终的项目特别有用 而且，将开始到 使整个万维网 感觉有点更容易理解。 事实上，我们将引进 多了一个编程语言 JavaScript调用，它类似于 并以不同的方式不同 从语言，我们已经看到了迄今。 所以C，召回，是这样的编译语言。 你必须通过一个编译器运行它。 你得到的源代码，对象 代码，或零和一。 而这些都是零和一的 你的CPU，中央处理单元， 真正理解。 PHP，相比之下，不 编译型语言。 这是什么？ 这是一种解释型语言。 因此，有一些程序 所谓的解释器， 具有读取它 - 顶到 底部，左到right-- 并找出所有的东西 你的语法确实和手段， 不管它是一个循环或条件 或编程的任何其他数量 结构体。 所以这是一种解释型语言。 然后，我们介绍了HTML。 和HTML甚至不是一个 编程语言。 我们会叫什么？ 一种标记语言，这就是 几分说它奇特的方式 没有像编程构造 我们看到即使回到划痕的一天。 有没有循环。 有没有条件。 这真的是一门语言 有关标记您的数据 和格式化或 构建以某种方式。 的CSS，同时，类似地 不是一种编程语言。 它甚至更美观为主。 它可以让你排序的微调 像字体大小和颜色 和安置了这一切。 然后，我们有 SQL。 因此，SQL确实是一个编程 在一定意义上的语言， 虽然定制 具体到数据库。 但是，即使我们只为您介绍 选择和插入和删除和更新 和其他几个， 原来你其实可以 写函数或者 程序，因为它们是 所谓的，在SQL的外观和行为 很喜欢PHP和C函数。 所以知道这些存在。 但是，我们甚至不与他们不屑 因为我们只是划伤表面在这里。 然后JavaScript中，最后的 我们的语言正式出台。 因此，JavaScript的，也就是 一种解释型语言。 而那些熟悉的，做的 要区分它 一些特征 从C和PHP？ 是什么使得它有什么不同？ 听众：这不是编译。 DAVID马兰：再说一遍吗？ 听众：这不是编译。 DAVID马兰：这不是编译。 因此它也被解释。 所以它不是编译。 但是，这使得它像PHP一点。 但它仍然从不同的 PHP在一些醒目的方式， 至少在方式，我们将使用它。 是吗？ 听众：它运行的客户端。 DAVID马兰：它运行 客户端，通常。 这确实是显着 特点对于我们现在。 C组服务器端的意义 我们所做的一切都是在CS50的IDE。 PHP迄今已 服务器端，只要 因为它也一样，得到interpreted-- 没有编制，但interpreted-- 里面的CS50 IDE，这当然是 在云中仅有一个或多个服务器。 但JavaScript中，甚至 虽然你你会 开始写它，比方说，PSET 八，也许最终projects--你 要纠正它 CS50 IDE和保存 在内部CS50 IDE，IDE CS50文件 和，反过来，云服务器 其所托管的，都不会 解释或执行代码。 相反，它会在要发送 未改变形式向下到浏览器。 而且它然后将是IE浏览器 或者Chrome或Firefox或Safari 或任何实际解释 它，从上到下，从左到右。 因此，关键的区别 特征为今天 是，JavaScript是客户端 和PHP，例如， 已被服务器端。 现在，这种具有有趣的含义 为一样，知识产权 谁又能真正看到你的代码。 事实上，你可以去 在网络上看到最 有人有任何代码 用JavaScript编写的。 有时是可读的， 有时它的模糊处理。 但更多的是对在适当的时候。 所以JavaScript中，很好地不够，是 超级相似，语法，为C. 和很多像PHP， 没有主要功能。 如果你想开始写 JavaScript代码，你会看到今天， 你刚开始写它。 但它，你会看到，特别是 有用在Web浏览器的上下文中。 然而，我的小 disclaimer--通常先前已经 是说，你可以不断 今天使用JavaScript的服务器端 使用名为Node.js的花式框架 的一些CS50自己的应用程序 被写入。 50检查实际使用node.js中 但是，我们要重点关注 JavaScript客户端现在开始。 因此，这里是一组在PHP中的条件。 对不起，in--事实上，这 声明中，也就是正确的。 这里也是一组 条件在JavaScript中。 在语法上，它是 与C和PHP。 布尔先生的表达式， 同样，语法 等同于C和PHP。 我们也有在开关 JavaScript代码看起来完全相同。 我们有一个循环是 结构相同， while循环，做while循环。 这其中有一点不同。 PHP有每个结构 你可能会使用 还是会在PSET七种用途，也许吧。 JavaScript有此特殊版本 对，你从字面上说些什么 像可变密钥中的对象，这 是说一个非常简洁的方式， 如果我有一个object--，我们将 在moment--再谈论这些 我想遍历所有 内的关键值对的， 我没有搞清楚如何 数值索引它们与零个，一个 二三。 我可以从字面上讲。 并在每个迭代中，JavaScript的 我将更新可变密钥 成为第一密钥，那么下一个键， 然后下键，则下一个键， 等等。 我可以通过治疗得到其价值 在JavaScript对象，因为我们将看到， 就好像它是一个 关联数组在PHP。 事实上，如果你终于缠你 介意身边有什么关联数组 在PHP中，你可以把它现在的 相同在JavaScript的对象。 但是，这一点 过于简单化。 阵列看，够漂亮，相同的 到PHP除了一个字符。 有一件事在这里失踪 我们确实看到上周与PHP。 什么是不加吗？ 是吗？ 没有美元符号。 所以，我们又回到了一 比较正常的世界里， 变量没有美元符号。 但是你做前缀他们 使用var，通常。 和VAR是指变量。 而像PHP是松散 typed--其中有型， 有数字和字符串 和花车等forth-- JavaScript的同样有型。 但它弱类型，因为我们的 程序员不必指定它们。 我们只需要知道 不同类型的存在。 变量，meanwhile--这里是如何 我们可能会宣布“你好，世界” 作为字符串。 请注意，这是相同的 PHP，但没有美元符号。 这是值得我们 开始看到更多的今天， 因此，你有一个对象 与键和值。 如果你想尝试 从去年week--推断 语法是有点不同。 不过有点神智check--多少 按键也该对象似乎有？ 所以，我看到四个。 我看到两个。 因此，它实际上是两个。 因此，这是一个集 两个键 - 值对。 最关键的是符号，它的值是FB。 最关键的是价格，其值为101.53。 所以这是两个键 - 值对。 请记住，PHP--而这又是 只是那种语法的差异。 这还不是所有的 智力有趣。 PHP可能已经写了这个相同的 作为follows--报价的事情，等于。 而我，这些改变方括号。 然后，我改变这 带引号的字，“价格”。 然后，我不使用冒号。 我才用什么上周？ 是啊，等号 箭头时髦的符号。 然后，我在这里做同样的事情。 这里同样的事情。 而这一切。 所以这是很好，如果这还没有 真正沉没在内存只 但因为它是真的 智力无趣。 这只是语法上的不同。 但思路是完全一样的。 内该变量的 在JavaScript报价 是键值对的集合， 其中之一是符号，其中一个 是价格。 我可以在这些值获得 以下语法。 就像在PHP中，我可以 做一些like--让 我做这个框大一点。 就像在PHP中，我可以 使this--哦，该死。 加油。 就像在PHP-- OK，我们将 只要使用演示说明。 就像在PHP中，我可以 做$报价$报价[“符号”]， 这将让我 值“的象征。” 在JavaScript中，这将是 相同的，因此我可以做到这一点。 唯一那 缺少的是美元符号。 这么好听够的话，有 没有多少新的语法。 因此，我们关注什么今天，真的， 一些想法和应用。 和第一个这样的 应用程序，你可能 已经看到，如果你潜入的pset 7已经是这样的语法。 因此，在PSET七，如果你 见过或没见过它， 知道，有一个文件就是我们给 你叫config.json--的JavaScript 对象符号。 为什么呢？ 我们希望能够为您提供 一些键值对的模板。 我们希望能够给你一个列表 主机，服务器的名称。 我们想给你一个 占位符，您的用户名 和占位符，您的密码。 如果你没有看到 这还没有，不用担心。 更多关于这方面的pset 7 [？规范。 ？] 接着， 很明显，我们希望你 填写待办事项 因为当你登录 CS50 IDE，你们每个人 有你自己的用户名和密码。 因此，我们可能已经使用了半打 或多个不同的文件格式。 我们可以使用一个.txt文件。 我们可以用一个CSV文件。 我们可以使用过的 INI文件，XML文件， 一大堆更多的缩写词 你可能没有听说过。 这是一种武断 在一天结束。 但超受追捧是一个文本 格式，称为JSON-- JavaScript对象 Notation--，看起来像这样。 这是一个有点神秘， 但要注意的模式。 你开始以开放的花 撑，你最终以相同。 里面的那是后话。 这是一个键值对。 所以这是我的对象 在屏幕上看着这里 具有一个键，它具有一个值。 而就推断基础上， 以前的模式，什么是这里的关键？ 数据库的事 结肠的左侧。 现在，该值正好是 一个多行这个时候。 但值以卷曲 振奋并用大括号结束。 所以，你会提出什么 数据库的值的类型？ 字典或者，只是更多 简洁地说，一个对象。 对？ 这是怎样的一个数据结构的 可以使用其他结构内本身。 因此，如果这件事我们 调用一个object--和对象 只是一堆的键值pairs--的 数据库本身的值是一个目的。 数据库的价值有一大堆 关键值对，其中第一个 为主机，然后将其命名，然后 用户名，然后密码， 其每个的值，同时，它的 只是一个无聊的双引号括起来。 因此，即使这不是 超清晰，只是还没有， 知道，这仅仅是一个 标准，相当无聊的方式 的存储在一个标准的格式的数据。 但常见的错误，你 可能使，即使在PSET七， 是有点愚蠢的事情，就像你 一不小心忽略逗号那里。 这将导致文件 不一定具有可读性。 如果你不小心忽略的东西，如 报价，它不会是可读的。 所以这是一个非常挑剔的文件格式， 但它是一个是超级常见。 而我们碰巧使用它，即使 你不使用任何JavaScript，否则， 在PSET七人。 好吧。 所以请记住这张图片。 我们谈到，在HTML中，这 代码可能会是这样。 这是超文本标记语言 只是[听不清]“你好，世界”。 但是，我们提出了一个 前阵子，如果有帮助， 你可能要开始思考 这个已经是一棵树。 事实上，压痕，我们 使用只是为了提高可读性的缘故 或风格的缘故上 左侧可以种 被翻译成这棵树，在那里你 有一些特殊的根节点，我们将 一般称为文件，低于该 是根HTML元素或标记，HTML， 然后具有两个 儿童，头部和身体。 然后反过来，头部有一个标题。 和标题有一个文本值。 而机身同样具有文本值。 所以，如果你是舒服的说法 这是的，你可以利用这个HTML 并得出类似的图片 此，右手侧 是一个很好的心理模型，因为现在 我们有JavaScript的，编程 语言，浏览器可以 执行和解释给你， 事实证明，什么 我们即将做的代码 在开始操作这个 树结构在存储器中。 我们没有建 树在内存中。 我们没有那种做 PSET十五风格的数据结构 复杂性。 浏览器，很好地不够，在 解释的HTML从上到下， 左或右，是从字面上去 手我们指针的等效 以免费的整个树。 它做了所有的辛勤工作。 这就是Mozilla和苹果 和其他人已经为我们所做的。 使用JavaScript我们要 能够控制和改变，做 有趣的东西 那棵树，否则称为 作为DOM或文档对象模型。 什么样的事情呢？ 嗯，事实证明， 在JavaScript中，有 这个洗衣清单 事件可以发生。 而且，我们还没有真正使用的 一句话，因为周零和PSET 零，当我们谈到划痕。 大多数人可能没有用 事件在划痕的项目。 但是，你可能还记得 简单马可波罗 例如，如果我们有两个 其中一人的精灵，说，马可。 其他的人，然后，在收听 和讯这种情况下，说，马球。 如果没有，请随时 回头看那么远了。 但是，这仅仅是 再说了，你可以种 从这些名称推断 事情，JavaScript的，事实证明， 是想给大家一个办法，听 鼠标下降或鼠标往上走 或键下降或密钥 上升或onsubmit的ONSELECT 或onresizing东西。 换句话说，任何物理动作 一个人可以使用浏览器 你做的每一天，你可以写 该代码侦听这些事件 然后做适当的事情。 举例来说，如果你使用谷歌地图， 如果你点击和移动会发生什么 鼠标，典型地？ 如果您单击并拖动？ 是吗？ 没错。 地图开始移动。 所以，你可以排序看看有什么 在这里，有什么在那里。 以及如何做谷歌实现了吗？ 嗯，据推测，他们是 使用一对夫妇的这些事件 听众，一个 说，监听鼠标 down--因此当用户物理地 推他的触控板或他或她的鼠标 下来。 然后，我们正在寻找 像运动 或一些其它事件 让我们捕捉拖累。 而事实上，是拖拉同样在此 点点可能的选项点名单。 因此，这将是一个强大的 的方式开始响应用户 甚至在他或她实际点击 明确的东西像提交。 但是，我们要引进 一对夫妇主题到那里。 但首先，让我们来过渡 一些实际代码。 所以我要去 进取，不断开拓DOM-0， 这是一个非常简单的例子 在这里，如果我放大只是 有此输入来到我身边。 而且我要继续前进，并输入 “大卫”为我的名，然后点击提交。 排序，然后，虽然便宜，我 有这样的提示弹出，上面写着： “你好，大卫！” 因此，这是一种 像我们的“你好，世界” 我们做了一段时间回来在C和 即使是在PHP，因为我已经动态 输出我的名字。 我可以在这里做别人的名字。 我可以简单地更改为， 像汉娜，点击提交。 事实上，小弹出的变化。 现在，弹出窗口中的一个 网络中最被滥用的特点。 而事实上，早在 当天弹出窗口拦截器 开始流行，因为你 会去一些website-- 也许是有问题的place-- 那会突然 启动胡椒屏幕 有一大堆的弹出窗口。 因此这种能力弹出 在用户的前窗 一直没有特别 广受人类。 所以这就是为什么你看到的 这阻止的事情， 这只是让这件事难看。 因此，我们将需要一个 更好的方式来提示用户。 但现在，似乎工作。 所以只是凭直觉，什么 似乎是发生在这里？ 我继续前进，点击提交， 然后事情发生了，显然。 但是，什么是不能发生的事情是发生过的事 上周任我点击提交？ 什么都没有发生在屏幕上？ 对不起？ 刷新。 该网址没有改变的。 我说，这是DOM-0， 我依然在DOM-0。 通常情况下，我们会得到改变一些其他的 的URL，就像register.php或类似物。 但是，即使当我辞退 这件事情通过单击确定， 注意到网址 保持完全投入。 而且，事实上，如果我有一点 持怀疑态度，让我打开Chrome浏览器。 让我打开网络选项卡。 并且注意到它的空白的时刻。 让我继续前进，重新提交玛丽亚。 有没有网络流量任何责任。 因此，有没有HTTP。 因此，我们确实，如果我看源代码 对于this--让我关闭这个窗口 去查看源代码。 有趣的。 它看起来像有一些 新的标签，其中包括脚本。 因此，让我们在CS50看看 IDE正是我发送给用户。 所以在这里is--我们 只关注HTML。 这里的底部DOM-0.html的一半。 并注意它有一个标题， 头标签，body标签，表单标签。 但是，跳出你的 不同的，特别是如果你从来没有 写任何JavaScript自己。 让我滚动一点 这里的权利。 我有一个输入， 另一个输入提交。 我有一个ID，这是一种新的。 但是，我们也看到这一点CSS。 还有什么是绝对新的？ 是吗？ 美观大方。 好吧。 那么，它说的onsubmit， 注意到有东西似乎遵循。 这是一个属性 在HTML命名。 它的价值就在这里这个带引号的字符串。 这看起来有点 怪异的第一眼。 这不是HTML。 这不是CSS。 这是，您可能已经猜到，JavaScript的。 如此看来，内置于该 网页是一个名为greet函数。 而我推断，只是 因为它是一个词，打招呼。 它有一个开放的括号， 接近括号，分号。 看起来像一个C函数， 看起来像一个PHP函数。 事实上，这将 是一个JavaScript函数。 然后我返回false。 我们会回来 在短短的时刻。 但如果是这个函数定义？ 那么，让我向上滚动 到该文件的顶部。 而且，即使它是一个漫长的线路， 它是相对简单的。 让我缩小这里 围绕这四条线。 因此，在JavaScript中，只 PHP之类的，你只要 比方说，从字面上看，这个词“功能，” 的函数的名称， 然后用任何括号 arguments--没有参数在这种情况下。 而且也没有返回类型 在JavaScript中，就像PHP。 因此，这不是C.宽松一点 打开大括号，靠近大括号。 内置到JavaScript是一种function-- 不推荐function-- 但一个函数调用警报 在生活中，其唯一目的 就是拉了那个漂亮的丑陋 提示我们看到刚才。 现在，这是怎样的一个拗口的。 发生了什么？ 因此，让我们开始 这里强调的一切。 这是同样的理由来提醒。 而这是怎么回事？ 这看起来就像一个字符串。 而事实证明，不象PHP和不同 C，它不会在JavaScript无所谓 如果单引号或双引号。 他们会是相同的。 坦率地说，这只是 受追捧 对于JavaScript程序员总是 使用单引号的某些原因。 这只是我们该做的。 但是，我们可以使用双引号，也是如此。 因此，加上是一个新的角色。 但是，那些你们谁做了 这之前，是什么加什么意思？ 是啊。 串联。 因此，我们在PHP中看到这一点。 这里还有点 运营商在PHP中 将连接两个字符串在一起。 C组在颈部疼痛做到这一点。 从PSET六，这是召回 在颈部一种特殊的疼痛， 你将不得不使用 类似的strcat 分配内存后 在堆栈或堆。 你必须赴汤蹈火 只是连接两个字符串。 在JavaScript中，这是超级简单。 只需使用它们之间的加法运算。 这样复杂的外观的 事情似乎是这样的 因为在结束时 这整个字符串，我只是 串联上一个惊叹号。 因此，如果发生了什么雨后春笋般冒出来了 “你好，戴维。”“你好，汉娜，” “你好，玛丽亚，”等字样，很明显 在这两个之间的中间事 加号必须给我提供什么教育？ 是什么在那里吗？ 是啊。 所以我就假装在这里 回答他们的名字吧？ 因此，他们的名字突然出现在最后 结果。所以，这是什么意思？ 好吧，我在前面的提议 图像的所谓的DOM 有这种特殊的根元素 一路前称为文档。 而现在，事实证明，这是怎么回事 是一个特殊的全局变量 在JavaScript，内置到这是一个 一大堆有用的功能。 其中有用的功能是 能力得到任何后代节点。 这些正方形或长方形或椭圆形 只是在树中的节点，可以这么说。 所以，事实证明，内置 JavaScript的文档对象 是一个功能，或者被称为 方法，这就是所谓的getElementById。 的语法主叫 在JavaScript函数 这是一个对象或一个的内部 变量只是用点符号。 我们看到在C 什么结构的语法。 你看样这PSET七， 排序，当你看到CS50 ::查询。 PHP中的结肠结肠是另一种 调用函数的方式 里面的一些对象。 但现在在JavaScript中， 它只是一个点。 因此该功能， 很好地够种， 说什么does--得到元素通过ID。 一个元素是另一个名字 对于在DOM标签或节点。 因此得到元素通过ID“名” 意味着this--这里是我的HTML。 在此基础上的HTML，什么 节点或者是HTML标记是我 要以编程方式交由 通过调用的document.getElementById？ 是的，没错。 我要获得输入 元有ID为“名”。 那么具体而言，可以 觉得这个功能， 的getElementById，作为给人一种方式 回一个指向特定节点 在树中。 我们还没有绘制这 树，但它是一个办法 对获得访问该 矩形或矩形 经由其ID唯一标识它。 现在，这是为什么有用吗？ 那么，事实证明 一旦你已经得到 该节点，表示从矩形 画面，在它的内部节点， 反过来，有一大堆的 properties--键值对 或数据，其中之一是所谓的值。 因此，从字面上看，它是一种一 满口解释整件事。 但在一天结束时， 这一切确实是给你 用户键入字符串中的 在这种分层方式。 但我不喜欢 这些夫妇的事情。 或者说，有一些好奇依然。 所有这一切似乎工作。 为什么你会认为我回来 呼叫招呼后假的？ 这看起来有点丑，那 我有两个语句有 用分号隔开。 猜一下。 如果我删除返回false，什么 可能发生的事情，只是本能？ 对不起，再说一遍吗？ 打开一堆的Windows。 因此，潜在的或许真的 这样会发生。 还有什么？ 可能提交申请在哪里？ 要在同一个页面。 因此，事实上，就是这样 越接近答案在这里， 即使不像 在过去，我已经不 指定action属性， 通常我们要做的。 原来有一个默认的。 如果没有指定动作， 这就像说报价，引文结束 或文件本身的名称， 在这种情况下将 像DOM-0.html。 那种只是它的推断， 或者说暗示的保证。 所以，如果我不这样做，让我们注意。 让我保存这个。 我已经删除返回FALSE。 让我回到这 例如，迫使其重新装入。 你可能已经看到了我建议 这在CS50讨论一堆倍。 如果有什么是有史以来作用时髦和 浏览器的行为不作为您的​​期望， 通常情况下，你会想举行 按住Shift键，然后单击刷新。 这将迫使所有的文件重新加载 而不是使用浏览器的本地缓存 或副本，现在，让我继续前进， 打开我的督察，网络选项卡。 我要去点击 保留日志，因为我 不希望它删除的行 一旦我撵走其他地方。 让我在这里继续前进， 岸堤类型，点击提交。 好吧。 这似乎符合市场预期。 它说：“你好，安迪。” 让我点击确定。 有趣的。 请注意，页面改变， 虽然原来的页面。 请注意，网址样的改变。 它增加了一个问号， 这通常是一个指标 我们试图向东西。 然后在底部， 更明确地， 这里是实际的HTTP请求， 这得到了200响应该 带我回到这里。 因此，这不是什么 我们想要做的，对不对？ 因为我不希望 重新加载整个页面。 我不是想回去 假以短路 浏览器的默认行为，其中 是，当然，提交该页面。 因此，让我们来看看一个 略好例子。 这是DOM的版本之一。 并注意以下几点。 这是确定的，如果你不神交 所有的代码行。 但是，什么是本质上的区别 这个执行？ 我将规定它的行为 同样的，做同样的事情。 有我明明做了什么不同？ 是吗？ 听众：[听不清]。 DAVID马兰：是的。 因此函数被定义differently-- 换言之，从形式存在， 那里就行7--或 相反，线8-不再 我必须onsubmit属性。 在前面的例子，我有这个。 然后，我简直写到这里我的代码。 然后我说，返回false。 而如果它没有擦 你又走错了路， 它应该开始，只要 因为，就像在HTML中， 当我们开始共同混合它 使用CSS的样式属性， 它刚开始得到一点 凌乱还是觉得有点不对劲。 同样在这里，如果 你开始服用HTML， 然后自动 扑通一些JavaScript代码 在一个带引号的字符串的中间，它的 不会是非常维护。 对？ 它也不是很明显，在第一 地方，JavaScript代码。 因此，这将是非常好的为 更好的设计宗旨， 让我们彻底让我们的HTML 从我们的JavaScript分开。 因此，要做到这一点，我们已经 在这里做的是following-- 我们简单地用HTML只标记。 所以，在这个版本的一台，所有 我是一个唯一的ID的形式。 然后到这里，我趁着 对JavaScript的一个特殊功能 因此我能有什么 所谓的匿名函数。 所以，事实证明，如果我叫 “演示”中的document.getElementById 这等于是给了我一个指针 在我的系统中，这一节点，表单元素， 可以这么说。 现在，我只知道，从 知道一点的HTML 现在我们已经看了一些网上 引用，一个表格单元支持 在一大堆事件listeners--的 换句话说，事件的洗衣清单 听众，我们看到刚才。 我从书上知道文档 即onsubmit的是一个有效的事件 侦听器表单元素。 所以一旦我知道， 它是安全的，我做 该following--得到那个节点 从树中，表单元素， 并访问其所谓的 onsubmit的财产。 所以点只是意味着 这是一个属性， 喜欢它里面的特殊值。 什么类型的数据我是 分配，显然， 到的onSubmit，这是 实际上是一个变量中 树中该节点的？ 这是该结构的内场。 什么是数据类型？ 一个功能，是的。 所以，事实证明，PHP有这一点。 而且即使我们 没有告诉你这件事， C也有函数指针，该 传递和分配功能的能力 作为变量的值本身。 而且我们不打算 倒退回C. 但现在，事实证明， 上的右侧这里， 即使它看起来有点 时髦的，这意味着，哎浏览器， 给我一个功能。 我不会甚至不屑给予 它的名字，因为我从字面上 要指定让我们叫它 此函数的地址 立即onsubmit的。 换句话说，浏览器，你不需要 知道这个函数的调用。 你只需要知道 它是在存储器中。 因此，这足以只是 有一个等号有 并没有打扰这一命名，如 FOO或打招呼，或任何其他文字。 而现在这只是一个风格的东西。 我可以移动这个大括号 到the-- sorry--下一行 像我们平时做CS50。 但在JavaScript中，它的 实际上文体常见 只保留了大括号中， 第一个，在该第一行。 但此后，有 没什么有趣的。 打开大括号只 标定我的函数的开始。 该功能是现在 相同的，只是我已经 包括返回假 这里面的功能。 因为事实证明out-- 你不仅会 从阅读知道这 该documentation-- 如果函数您分配了 到onsubmit处理程序返回false， 浏览器才知道并同意 不要表单提交到服务器。 如果返回true，将提交 它以一台服务器的原因，我们会看到 在短短的时刻非常有用。 再经过分号 大括号那里只是 意味着我做的定义功能。 你知道要尽快叫什么 当你听到提交。 好吧。 这是可以说是一种丑陋的还是。 那么，我们还能做什么？ 嗯，事实证明，然后在 2版，这是last-- 而我们只需看一眼这一点。 在制作的风险 它难看，原来 ，有一个库 世界所谓的jQuery。 和jQuery是一个超级 流行的JavaScript库 这是非常受欢迎，最 任何JavaScript--这不是 不凡的人混淆 jQuery的使用JavaScript。 为什么呢？ JavaScript的本身就具有很 做things--的详细方法 的document.getElementById，dadadadadada。 你最终不得不非常 长行的代码。 因此，一个名叫约翰·渣油老乡， 究竟是谁的作品为一个启动 这几天，走了出来 与此库年 以前，很多人都做出了贡献 名为jQuery的改变 语法以下列方式。 而且只要你已经看到了这个， 因为你总是 看到这，如果做一个 基于网络的最终项目， 这将相当于方式 实现使用同一功能 这个特殊的图书馆。 现在，而不是挑逗 它除了在其全部， 就让我们来看看一些模式。 这个语法似乎有 多少匿名函数 或匿名函数 或者AKA lambda函数？ 二，对不对？ 而你知道，即使 你不是超级舒适这一点， 刚刚通过的事实，它 说函数（）的两倍。 而事实证明， 这段代码是doing-- 我们会参考网上的参考， 最终，一些帮助与此有关。 这也就意味着，当 该文件已经准备好， 继续并注册 下面的函数 作为提交处理程序的HTML 元素，其独特的想法是演示。 然后，当发生这种情况， 调用这两个行代码。 这是可悲的，更 说法返回false冗长的方式。 我们提到这一点，只是因为 你会看到这个代码在线等。 而且它是没什么被吓倒。 反倒是，请记住，什么是 要在JavaScript中很常见 就是这种模式。 所以这就是为什么我们展示它现在。 好吧。 因此，没有居住过 很多在该语法， 是有任何疑问 这些实例或想法迄今为止？ 好吧。 因此，让我们用这个东西是有用的。 制作一个网页，只是说你好， 某某是不是所有的有趣， 不underwhelm。 这一个不会是美丽的， 但它会做一些有用的东西。 让我回到我的目录 在这里，开拓，说，外形0.html。 因此，假设这是新生 校内体育活动注册页面 没有任何的CSS或设计的任何意义。 而且我要继续前进， 这里使用密码注册。 而且我会同意的条款 和条件，然后单击注册。 而现在的网站上说，“你是 注册！ （嗯，不是真的。）“ 这似乎是它的工作，但 让我继续前进，迫使重装。 让我说，不，你不这样做 需要我的实际电子邮件地址。 或者，也许我们只能说，邮件在那里。 密码会一样，12345。 然后，只是因为我 白痴，现在是123456789。 我不是要检查你的盒子。 嗯。 好吧。 因此，有几次机会 为改善这里。 你知道，还是会在PSET看到 七，您可以编写代码 - 你就会有写 在PHP--代码保卫 针对这些种的用户 错误，因为明确的用户 没有合作。 他或她还没有给你一切 重视你想要的，甚至在格式 你希望他们。 所以，你会在PSET 7看出， 我们当然可以有一些 如果说条件 如果电子邮件地址 不是username@something.edu， 我们可以只 说对不起，并表示歉意用户 多，就像你可能在PSET七人。 或者，如果他们没有检查那个盒子， 原来在PHP中，则可以检测到， 太。 当然，如果密码 不匹配在register.php 为PSET七，则可以检测到。 但是，这是在一个痛苦 脖子上，现在他们要求 我们对所有的方式转到服务器。 用户被告知错误。 至少，除非你使用 有些美妙的技术， 现在他们必须单击后退箭头。 那岂不是很好，像 很多网站今天， 如果你有更直接的 反馈意见，瞬间？ 换句话说，让我去版本 一个，这将是不漂亮。 但它确实有这个功能。 马兰，12345，123456789，不 要选中该复选框，注册。 密码不匹配。 因此，即使这个弹出窗口是ugly-- 我们可以最终取代本 喜欢的东西引导， 你会在PSET 7见 是一个非常受欢迎的library--我做 检测到口令不匹配。 好吧。 好吧，让我来解决，作为用户。 让我继续前进，说12345，12345。 仍然没有检查的协议。 您必须同意 条款和条件。 所以为什么？ 如果我们已经假定 还有一种方法， 而我们需要你 PSET七，检测错误 这样的条件 服务器端的，为什么要我 麻烦也这样做在JavaScript？ 是什么在争论 赞成加入什么 你即将看到的some-- 有额外的复杂性。 也许没有上涨空间。 可能是什么？ 听众：[听不清]。 DAVID马兰：呵呵，有意思。 潜在的漏洞。 所以肯定的是，如果你不处理 错误的用户输入，伟大的， 也许是，如果这一切的美好 甚至没有达到您的服务器。 我推回那里， 比方说，你应该 解决这两个的这些问题。 但是，这是公平的。 还有什么？ 听众：[听不清]。 DAVID马兰：是的。 这段代码，正如我们之前所说，是 解释在客户端。 它不打扰服务器， 这意味着它不 影响服务器的负荷或容量。 而现在，对于有点老了我， 这没有任何意义的影响 因为我有一个用户现在。 但是，如果你的任何 体面的大小网站， 尤其是最大的，像Fac​​ebook， 更可以留人关闭 你的服务器的更好 当然，因为一台服务器， 只有拥有的RAM量有限， 有限数目吉赫的， 事物有限数目 它可以每单位做的时间。 因此，如果有更多的人在 世界打你的服务器， 意外记录 如果您错误，一样好 能保持这种负载关闭服务器。 加，尤其是在一个移动 如果你曾经device-- 登录my.harvard或 耶鲁大学的网络标识符号或类似的， 有这有很多的等待时间 网站一样，因此它需要， 就像，一个该死的两秒钟的时候。 然后，我的上帝，如果你输错， 那么你就要打回去重做。 因此，有延迟，特别是 在速度较慢的网络连接。 但JavaScript的，因为 它运行在客户机上 而并不需要来回走 跨越一个潜在的慢速互联网 连接，就可以得到 几乎在瞬间反馈。 所以，让我们来看看这个。 让我打开了形式-0和 看看这里的HTML。 而且，我们只看到发生了什么事情。 这是他们的一种形式 行动register.php。 我只是用得到这么 我能看到的网址。 但是，对于密码，我们就一定要 要改变这种张贴在现实中。 以下是类型的文本输入字段。 这里的另一个输入 字段类型的密码。 在这里，如果你从来没有见过， 型复选框的输入端。 但有没有JavaScript的 在这里任何责任。 这仅仅是HTML的 去register.php。 但是，在一个版本，其中，我 开始让那些弹出窗口， 让我们看看究竟会发生在这里。 在一个版本中，什么 我要see--我 以为我可以拖延足够 有足够的话，但我跑了出去。 在版本埃德蒙顿我们走吧。 在一个版本中，注意到following-- 而不是最好的实施中， 但是这是我的第一次。 请注意，以下 形式，我有一个脚本标记。 而script标签意味着， 哎，浏览器，点击这里 进来一些代码， 通常情况下，JavaScript的。 现在，请注意我在做什么。 在line--我可以勉强 读它 - 第32行，它说， VAR form--所以给我 一个名为表单变量。 然后得到document.getElementId “注册”的 这是什么？ 好了，让我退了这里。 并注意啊，我给表单元素 一个任意的描述性的想法 登记。 因此，这给了我一个变量 让我抢这​​个节点， 在树的矩形称为形式。 form.onsubmit手段，嘿嘿浏览器， 注册事件侦听器 在这种形式。 换言之，当这种形式是 提交后，执行下面的代码。 它并不需要，因为一个名 为什么你需要知道叫什么名字？ 你只需要知道 要执行的，ERGO 它是一个匿名或lambda功能。 并且函数 在这里所有这些行。 而现在，说实话，即使你 也许没有写过的JavaScript 之前，它只是C和PHP逻辑。 因此，如果form.email.value ==“” - 因此，如果电子邮件字段为空， 骂为“你必须将用户 提供您的电子邮件地址。“ 否则，如果form.password.value 是在用户的空白吆喝， “你必须提供您的密码。” 更有趣的是逻辑， 如果form.password.value不 等于form.confirmation.value-- 并确认哪儿来的？ 让我快退。 好吧，我叫这个输入 场在这里密码。 我这里所说的这一个确认。 我可以把它叫做 密码两个或其他任何东西。 我只是逻辑检查 这两个是相同的。 Else--事实证明这是布尔先生 again--一个布尔值，该复选框。 所以，如果我说了，惊呼一声point-- 如果不是form.agreement.checked， 骂的用户也是如此。 所以这个语法，你会看到的是 在JavaScript中很常见， 在这里，你有这样的点号。 开始时你有一个对象在这里。 您下潜较深到到 如密码属性。 然后你在它的实际价值得到。 再次，这里是输入。 这里是名密码。 而它的价值是什么的 人类实际上已经输入的研究。 因此，在所有的这些 的情况下，我返回false。 但如果没有，我返回true。 所以，现在我们看到了 引人注目的使用时， 您将返回false来 停止哪些用户做 并让他或她的选择 一次或再次输入。 否则，我们返回true。 让我介绍一款 这等变异只 其种子有一定的了解。 那么，在这2版本，外形2-- 我会用一挥手做到这一点。 这一点，对于那些好奇， jQuery的版本， 你们谁可能要 涉足该特定库。 但是让我们start--和什么问题吗？ 让我停顿了片刻，因为 这是快了许多。 但这里的好处是，所有的 代码几乎是相同的。 新的东西是DOM是什么？ 什么是这些矩形？ 这些是什么节点？ 什么是匿名函数？ 什么是事件处理程序？ 但值得庆幸的是，大多数这只是 兜了一圈，比如说，从零一周。 好吧。 因此，一些稍微更有趣吗？ 好吧，首先，让我去 进取，不断开拓谷歌地图。 而且你会发现，一 那一刻，在一瞬间， 注意会发生什么时 我点击速度不够快。 而在哈佛这方面是如此 快，你真的不注意到它。 但是，你有什么样的一种见 如果我点击并拖动真快？ 这些你在网上看的， 如果你慢这0.5倍的速度， 你可以看到这更好。 发生了什么事刚 之前，我点击和拖动？ 让我来这里 - 让我做 别的东西，比如90210。 让我们远去。 这是真快，太。 如何迪斯尼世界？ 在那里，我们走了。 好。 你看见什么了一秒钟？ 只是，像，广场，对不对？ 占位符瓷砖？ 那么，这是怎么回事吗？ 谷歌地图是一个很好的例子 这就是所谓AJAX这种技术。 而这正是我们将开始 使用JavaScript的一个特别 诱人的方法。 早在一天，有 这个网站叫MapQuest的。 我应该已经采取了 从20世纪90年代截图此， 在这里，如果你想 看看在这里在地图上， 你会从字面上点击箭头 在顶部的显示你 不同的正方形的地图。 如果你想向左移动，你 点击即表明您一个箭头 不同的正方形的地图。 而一些网站今日仍然这样做。 但即使Mapquest服务已经得到 更好的，如谷歌地图。 相反，有什么更好的这些 天是使用AJAX网站。 AJAX--另外称为 异步JavaScript和XML， 这是说只是一种奇特的方式 一种技术或技术， 允许使用JavaScript的浏览器 作出额外的HTTP请求 后页被加载。 所以，这是什么意思？ 那么，这将是一种 恼人的在Gmail 如果每次你需要时间 检查你的邮件， 你字面上按下Control-R或 命令-R或单击刷新按钮 而整个该死的网页将重新加载。 对？ 它会闪烁白色 可能是第二个。 你会看到愚蠢的进度条。 而只是为了看看是否有新的 邮件，整个网页和网址 你在必须重新加载。 但是，这不是在Gmail中会发生什么。 对？ 当你在一个新的电子邮件 Gmail的，是什么在屏幕上发生什么呢？ 它只是显示了，对不对？ 它只是奇迹般地出现 如在表中一个新行。 这实际上涉及到 体面的复杂性。 其实，如果你仔细想想这棵树， 这虽然是一个简单的在这里， Gmail--我不得不看 在代码是sure-- 可能有一个HTML表格或者 它呈现一个无序列表 您的每一个收件箱中的邮件作为。 所以，如果你想象这有 是当你的内存树 使用Gmail看起来那种类型的 这样，当谷歌意识到，哦， 你有一个新的电子邮件，它不 要重建整个树。 相反，它想找到该节点中 代表您的收件箱中的树 并且只需插入一个新的节点。 所以非常相似PSET五，在那里你 不得不节点插入到一个哈希表， 同样做谷歌，通过 它写的JavaScript代码， 遍历这棵树，找出其中 是窗口的那部分的收件箱， 然后插入新行。 而一个新的行只是表示一个 或多个在一个树的新节点。 所以AJAX是这种技术 ，允许这一点。 一旦你访问过的URL， 然而，疯狂的长是， 而一旦页面 被加载，你仍然可以 抓住从多个数据 internet--无论是 电子邮件或map--的瓦 抓住它幕后 然后将其插入到页 从而使人体并不真正 要等待它。 Facebook的Messenger的工作方式相同。 任何数量的其它websites-- 呵呵，其实，即使是这样。 我的意思是，这是坦率地种， 一个恼人的功能，这些天。 如果我开始寻找这个cats-- 是一种可怕的用户体验。 这只是开始搜索我。 那么它是什么做的？ 该网址还没有真正改变 自从我开始打字。 但是，什么是整个会 wire-- OK，嗯有趣。 什么是整个会 线在这里只是变得怪异。 好。 因此，让我继续前进，并检查 元素，并进入网络选项卡 并努力使这种 技术少约猫。 作为I型，从字面上看，猫 还有 - 发生了什么 per--我不会点击的。 好吧。 所以到这里，发生了什么事每 一次，我输入一个字符，显然？ 像，水平低？ 发生了什么事，每个那些 字符我打字在我的键盘？ 是吗？ 听众：[听不清]。 DAVID马兰：没错。 每个这些字符是 去谷歌，一次一个。 他们正在建立一个字符串 他们的服务器上，表示 一切我已经输入了迄今。 每一次我型 另一种性格，他们 使用一个自己的秘密武器 搜索算法计算出， 他的意思是这种猫页 或者这种猫页面或之类的？ 因此，在某种意义上说，它为我提供了一个 在更好的体验我甚至不 需要完成我的想法。 事实上，这是一个很有用 首先，自动完成一般。 如果他们的算法是不够好 如果我的搜索都是显而易见的， 我不必键入整个单词。 他们会告诉我是什么 在实际上，我寻找。 那么，谷歌称之为即时 搜索只是使用AJAX， 使用代码，允许他们请求 通过网络浏览器的其他内容 背后使用这种场景 新的语言，JavaScript的。 因此，我们必须留下一两分钟。 而让我叫我的好友 科尔顿起来搬上舞台， 因为它似乎 特别有趣的最后一次 引进技术 你们有些人 已表示有兴趣 在最终的项目。 我们认为这会很有趣，使 一个志愿者，不过，今天 向您展示的除了 这可以让你 - 是啊， 只见这手第一次。 上来吧。 做得太好了。 做得好。 我将这个项目上 屏幕上一会儿就好了。 你叫什么名字给大家？ 全民教育：我是全民教育。 DAVID马兰：ETHA？ 全民教育：全民教育。 DAVID马兰：全民教育？ 全民教育：是的。 DAVID马兰：很高兴见到你。 好吧。 让我得到这个准备。 你过来给 中间用科尔顿在这里。 什么科尔顿在他手里 今天是一个遥控器。 因此，而不是只是站在那里一 三维世界中四处寻找 作为科尔顿那样，现在EFA可以 实际上走动通过往上走， 下，左，和右像 任天堂或Xbox控制器。 全民教育：我要掉下舞台。 DAVID马兰：我会的 站在大致在这里。 但是，这是一个危险。 好。 因此，继续前进，把那些。 让我继续前进， 切换到此处的屏幕。 让我把灯光调暗。 而科尔顿，让我 走到你旁边的立场。 难道你想在这里解释一下 与MIC我们在做什么？ 干得好。 COLTON：当然。 所以现在我们 加载了魔环， 我想operating--不工作 系统，但主要程序，其中 您可以访问所有的游戏 该应用程序存储库中。 所以现在，应该说 轻点触控板开始。 触摸板将是对 右侧的耳机。 所以，尽管tap-- 全民教育：哦，伙计。 DAVID马兰：是啊，你去那里。 质量的全民教育是看到 高得多的品质。 这仅仅是在Wi-Fi在这里。 COLTON：你那么什么 要想做的事情 看起来是朝上方 右边的屏幕。 是的，在很右上角的那场比赛。 然后，当你选择 它，再次点击触摸板。 我认为它Dreadhalls。 然后这里A--这里，让 我握住你的眼镜给你。 所以，我只是给了他一个控制器。 所以，现在他能控制比赛。 他可以左右移动之类的东西。 因此，继续前进，仰望上方。 您应该看到新游戏。 所以，尽管你可以做到这一点。 现在，你应该能够控制 自己与控制器， 还有，一旦 游戏加载了这里。 这可能是有点吓人。 全民教育：现在你告诉我。 好。 COLTON：好吧。 所以，请确认您可以走动。 好。 你可以四处走动。 完善。 所以，如果你往下看，你有一张地图。 地图显示您身在何处。 你可以看看周围的房间。 您可以完全转身。 是的，没错。 回转。 所以，看看你的左边。 我觉得有东西，你可以 拿起放在房间桶。 全民教育：我如何获得 映射出的方法是什么？ COLTON：查一查。 只要看看了。 好吧。 你去那里。 现在，继续前进，只是转身。 所以看得更远一些，以你的左边。 继续前进离开。 继续找走了。 继续。 是啊。 全民教育：哦，这样。 COLTON：是的。 走向它与控制器。 你去那里。 现在，应该说把它捡起来。 你去那里。 捡起来。 好吧。 现在，让我们走出这个房间。 继续前进，走到那扇门。 所以，你要hold--它说 按住按钮，迫使它开放。 所以，尽管并按住该按钮。 是的，迫使其打开。 好吧。 做得好。 现在，我们走出了房间。 所以我要离开休息了 给你，看看你了解一下。 全民教育：我不会在黑暗的房间。 等一下。 现在我必须去暗下来的大厅？ 好了，我要回去[听不清]。 COLTON：好吧。 一些更多的项目回暖。 看起来像一些硬币。 这是一个锁定选秀权。 所以，如果你发现一个上锁 门，你可以使用。 你怕了吗？ 全民教育：还没有。 COLTON：OK。 Pretend--呀。 只是假装你 其实站在那里。 如果你把around-- 你得习惯它。 但是，这是有道理的。 DAVID马兰：虽然全民教育继续 玩，因为我们可以做到这一切的一天， 我们都可以踮着脚尖在这里。 但是，我们确实有另外两对， 如果你想拿出和发挥。 否则，我们将看到 你接下来的周三。 感谢您对我们的志愿者今天。 [掌声] [MUSIC - “宋飞正传主题”] 扬声器1：好吧，我 把一个新的PL卡口上。 我只是改变了OLPF-- 扬声器2：那么是什么 到底在做什么？ 扬声器1：好吧，每个人these-- 在这里，我会告诉你这一个在这里。 你可以看到它在这里。 扬声器3：我觉得我好这些。 你要多一些？ 扬声器4：没有，我很好。 [听不清]。 扬声器3：没有，[听不清]。 有一些。 扬声器1：不同的颜色。 扬声器2：确定。 扬声器1：所以最终什么 所做的就是调整颜色of--