[Powered by Google Translate] 第9周，续] [戴维·J·马兰 - 哈佛大学] [这是CS50。 - CS50.TV] 这是CS50。这是第9周结束。非常感谢。最后。第9周。我得到了它。今天，我们继续我们的谈话Web编程着眼于最终的项目，而不是因为你必须做一些基于网络的最终的项目，但因为无论是对最终项目或之后CS50 当然，这是现代软件的方向。然而，它实际上不是一件容易的事情。事实上，这样做的最难的事情之一是在设计方面。例如，通过设计，我们的意思是实际上的用户界面或用户体验。我敢说 - 我们知道从最近的问题集当一些你发表你的抱怨一些的软件或硬件激怒你，无论在校园内或关闭 - 有一个网站有很多，有很多的硬件摆在那里，那种很烂。但现实情况是，使尚未使用，很容易的事情却是强大的这是一个非常困难的挑战。所以，今天我问约瑟夫和Tommy和我一起在这里这样我们就可以有一个谈话，都设计和什么样的思维过程，通过你的头开始当你设计你的最后的项目，你的未来努力。然后用张宇的帮助下，我们来看看一些实施细节。在纸上或在你的心中，你怎么能有一些视力，然后你可以通过编程执行使用的技术和工艺，我们才刚刚开始议论纷纷，即JavaScript和更新，即AJAX异步JavaScript的东西。这使您可以创建更动态的用户界面逐步从服务器获取越来越多的数据。因此，我们会看到的那些片段，以及一些今天。顺便说一句，如果你有兴趣集中在计算机科学或辅修计算机科学，要知道在本星期五中午，在Maxwell德沃金221会有一个比萨饼事件在那里你可以学习一些关于计算机科学。在您的途中出了门，你就可以在哈佛拿起一个非官方指南CS。在腰部的高度，我们就会把它放在垃圾桶外所以，如果你想抓住这个学习一些关于CS，，会在那里等你，因为它是在0周。此外，如果你想加入我们的的CS50午餐在本星期五下午1:15，一头到cs50.net/lunch。事不宜迟，我给你教学研究员王阳乐。你好。 [掌声] 谢谢。我第一次了解设计是一类称为CS179。当时教授告诉我们另一位教授的故事谁去酒店使用的水龙头。谁能告诉我什么2旋钮的左边和右边做呢？ [学生]冷热。 >>冷热。好。你通常期望，对不对？这位教授使用的水龙头后要洗澡，他继续使用。他认为，左，右侧是冷时热，对吗？但是，任何人都可以告诉我，这实际上是怎样做的呢？有什么手？ [听不见的学生反应] >>建议是什么？听不见的学生回应] >>温度？因此，其中一个控制温度和其他控件？ >> [学生]水压力。水的压力。好。这教授走进了这一点，并认为他们所控制的冷，热，原来是正确的，他认为是热的，所有的方式因为他想要一个温暖的淋浴。那么，这些不真正匹配，所以他得到了这个非常有趣的体验洗了个冷水澡，大家都知道那是什么感觉就像。这是一个设计缺陷的一个例子。我的意思是，他期望从水龙头不匹配的淋浴一下就出来了，这是一种对他的不幸。因此，这是一个设计缺陷，在现实生活中发生的一个例子。但我们看到的，以及各种其他的。我们很可能不是球迷的MBTA系统的。这是一个实际上是在伦敦的地铁系统，说，“这个按钮，在不使用”。为什么是在那里？我们为什么还要在意呢？当我还是一个孩子的时候，是科技知识的一个房子，时，电脑会崩溃，我妈来我往，我这个显示屏幕，问我发生了什么事。连我自己都不知道这意味着什么。 [笑声]是什么？ [笑声] 有时候，我们感觉像软件开发人员只是曳我们。作为用户，我们会说，“这是怎么回事？有没有人告诉我们。” 这一切都归结到一个问题的设计。设计，我们可以看到，是不是纯粹的美学，它不是关于如何看待事物。我们在这里看到，这个小弹出窗口，这里其实看起来很不错。它有一个阴影的背景下，它有边界的半径去。这是一种相当漂亮。它的设计非常好，因为它不是非常用户友好。这一点弹出来了，并没有真正给我任何信息这是怎么回事，它并没有告诉我任何的用户如何从这个错误中恢复。我们要思考的东西，设计是不是。首先，它不是美学。它也没有填充您的应用程序有大量的不必要的功能。如果你是一个泰国餐厅，你可能不希望是一个牙医在相同的时间。与Facebook的问题，而不是很多人用它它是不是真的在他们建设的核心。所以这是很好的想法有关的事情没有这么多的数量你把你的应用程序，但质量你如何使这一用户体验更好通过实际改善后，你已经拥有的东西。简单地说，设计告诉我们，我们应该建立什么。例如，如果我们正在建设的东西，让我们寻找的东西，例如，像谷歌，我们应该做的事情的方式要求用户采取大量的点击，得到他们想要的东西，我们还是应该做到这一点的方式，例如，与谷歌即时或自动完成让我们更快地获得我们的研究结果？工程涉及，像汤米会告诉你，其实建设。有很多类型的设计。例如，如果您正在构建的东西部署在第三世界国家，那里没有多少电，或者很多技术，你要设计你什么在容易访问那里的人。但是什么样的其他的设计决策可能有或可能参与这样的事情？是啊。我看到了手。听不见的学生回应] >>权。没错。无障碍环境是一件事。很多人不认为，“我的用户？” 任一频谱类似的极端。我的用户可能有残疾，我没有想过我只是想为广大用户设计。互联网是时下所有人都能访问的，我应该为这些人设计。什么样的其他的设计决策，你可能会做什么呢？是。 >> [学生]成本。成本。非常好。另一件事，我们可能我们的设计决策的基础是成本。如果我们是一个企业，你想建立的东西，并不需要太多的生产成本但可以卖特别高的成本，我们可以得到一些利润。这些都是不同类型的设计，但是当我们在互联网上的东西当我们的东西，可能不会花费那么多，现在建立，类似的互联网应用 - 你不必把它扔多少资金为了使实际工作的东西 - 我们更担心的是用户体验。我们称这种以用户为中心的设计。以用户为中心的设计本质上涉及的是把自己的鞋你的用户。如果有人为我什么，显然，他们已经与心中的目标，我的具体应用他们要完成的任务。你的任务就是不仅要帮助他们完成这一任务但是，以帮助他们完成任务的方式是有效的，直观的，，一些人在那里说，出入方便。效率的含义是什么？效率意味着我的用户如何快速完成的任务，因为我的接口。是否需要大量的点击，他们从一个地方到另一个？它是乏味？他们必须执行大量重复性的任务吗？我们希望使这一过程尽可能高效所以他们没有做的那些各种各样的东西。至于直观性，即，例如，如果一个用户查找我的接口，他们从一个地方到另一个地方是很容易吗？他们是很容易弄清楚他们有什么在我的界面点击他们为了达到他们想要达到的目标或任务？最后，一个人在那里说，无障碍环境是非常重要的。 [男性扬声器]来获得的东西如视觉，我想我怎么设计的东西的人是盲目的吗？哦。对于不能看到所有的人，我们有一些所谓的屏幕阅读器。你应该做的是你应该建立自己的网站的方式，例如，特定的技术，也就是我们所说的 - 有很多事情现在。我认为有称为JAWS屏幕阅读器。很多这些东西靠的是什么，我们称之为区域规则为了读出给用户的什么本页面上。对于那些谁也看不出，你需要确保这些屏幕阅读器实际上可以在页面上的内容和可以实际显示您的用户，如果你不能看到，至少你还是可以理解的内容在页面上。是啊。好吧。够谈论良好的设计。让我们来谈论糟糕的设计。这些事情，你不应该做的。谁能告诉我关于他们的经验与Craigslist 和他们认为是如此之大，这样的设计呢？是。 >> [学生]我觉得有太多的话在一个区域。太多的话，对不对？完全压倒。你来到这个网页，你看到一大堆的东西在这里甚至可能没有对你重要。例如，你生活在一个国家，不与这封信开始。比方说，你住在得克萨斯州或什么的。你必须要在页面滚动的方式去你在的位置。我是从波士顿来，让我看看在美国马萨诸塞州。美国马萨诸塞州在哪里？哦，这是正确的。哦，这是波士顿。好吧。让我们来看看在波士顿。 [笑声] 很压倒性的，对不对？那边尴尬的事情。 [笑声] 比方说，我在找住的地方。有多少人实际使用Craigslist的？吨的你。有非常糟糕的方式来看待这一点，但让我们来看看在这。 img和图片之间的区别是什么？谁能告诉我？其实是没有什么区别。他们的意思是完全一样的东西，但由于某种原因，他们有不同的标签。如果我点击有图片，什么也没有发生在页面上。其实，我不得不再次单击“搜索”的事情发生。可能是一个更好的设计决策，可以做有什么？如果我点击该过滤器，我可能要筛选由特定的行动或该特定类别。，而不必再次按下搜索，我可能只是自动的过滤谷歌的风格，他们这样做是瞬间的排序。 [马兰]，但不构成我们已经看到了他们迄今为止在物理上提交击中至少输入或点击一个按钮？正如你已经看到了他们到目前为止，你必须单击“提交”做这些事情。但是，托米会告诉你在第二，其实有方法，供您例如，当你点击那个东西，它可以自动发送我们所说的AJAX请求，并返回数据并筛选结果瞬间。这里有很多的东西，这个接口是错误的。 [马兰]你能搜索剑桥？有一些异常，在这里你所关心的剑桥但你要韦斯特福德，春山，西牛顿等。可能不理想。 >>可能不理想。我怎么可能能够更好地使用户的体验，对这个特定页面的呢？是。 >> [学生]说明。好吧。说明在什么样的意义？ [学生]例如，用户第一次的事情谁也不知道Craigslist是或者你不知道你应该做的事情。右。因此，解释什么是Craigslist的在这个页面上是很重要的。事实上，我们可以告诉用户这个页面实际上是为。如果我只是访问，我看到一大堆的位置。我什至不知道他们的意思。但更重要的是，在这个界面，记得我不得不向下滚动一吨重的东西，找到一个特定的社会，其实我在乎此。我可以做一个更快的方法是什么？是。 [学生]划分为东，西部地区。 “好了。我可以将其划分为多个类别，可以帮助我更快地确定如何获取到特定的位置。 [学生]将一个下拉列表。 “没错。好吧。我可以用一个下拉菜单，因为我们有固定的一套东西我们可以向他们展示在一个下拉菜单。这样，它不会占用这么大的空间在屏幕上。，但更重要的是，我们能做些什么呢？是。 >> [听不见的学生回应] >>你能再说一遍吗？ >> [学生]搜索框。是啊，一个搜索框。这是伟大的。实际上，我们可以做的是，如果我们回头看的幻灯片，搜索框。自动完成。非常简单的方法来搜索的结果，你知道在一组。如果我开始打字BO，你只要给我所有的结果，BO里面的。这样，我可以很容易地找到我想去而不是滚动这真是大名单。这些是真正的低悬的果实的各种人谁是实施Craigslist的其实可以做好了很多，其特定的用户在网站上的经验。好吧。够谈论不良网站。让我们来谈谈关于Facebook。当Facebook出来了，特别是Facebook的照片，有很多的时间可以做同样的事情在其他服务。他们可以组织您的照片到相册中。你可以做的是你可以将它们组织成组。你可以组织他们的日期。你可以做所有这些特别的东西。但没有人知道是什么原因使Facebook的照片爆炸在被释放的时间吗？是。 >> [学生]标签。 >>标签。没错。我们有米洛在这里，谁是我们的狗与CS50头巾的吉祥物。你可以看到，我们有这个标记功能在中间。是什么原因使Facebook的照片从可用性的角度来看是，它实际上允许人通过这涉及到他们的朋友，在他们的照片。对于Facebook来说，由于他们的网站是特别的社会，建设这样的社会氛围。的经验，提高了很多照片因为实际上，他们可能会说，“这是人与人之间的联系，这些都是你真正关心的人的照片。“ 它是也有几分自恋。人们喜欢被标记在照片之类的东西。虽然这并不一定是良好的人性特点，同时，它是基于良好的设计决策因为人们真正关心的事情是这样的。所以这是Facebook的照片。但是，让我们来谈谈Facebook的更普遍。我敢肯定，很多人在这里有关于Facebook的意见，良好的设计决策和糟糕的设计决策。因此，让我们的发泄很高兴。来吧。我知道你们使用Facebook。有人有什么不好说或说些什么好东西。是。 [学生]在新闻源有很多的事情我真的不关心。新闻源展示了很多的东西，你可能并不关心。你有朋友在Facebook上，你没有遇见过2年或3年，你看到的新闻结果雨后春笋般冒出来在你的新闻源和你真的不关心它。实际上，Facebook已经作出的努力，使这更好的，他们实际上已经试图把相关的结果的顶部为晚的新闻源所以你看到的东西，这是有关你或你的亲密朋友的朋友。还有别的吗？是。 [听不见的学生回应] >>你能再说一遍吗？ [学生]广告是比较不显眼。 “在什么意义？ [听不见的学生反应他们没有屏幕上的光，像旗帜一样。好吧。这是很好的。如果你还记得20世纪90年代的互联网 - >> [马兰]我在那里。 >>，他在那里。 [笑声] 你可能还记得闪烁的GIF背景，闪闪发光的东西，地球村的风格诸如此类的东西。这真的不是一个例子，一个好的设计因为它是真正从内容分心。耶鲁大学的艺术网站，用于为背景的GIF动画你可以不阅读任何页面上，但我想，居然有人已经告诉过他们，现在它是一个有点不同。 [马兰]这是现在好多了。 >>这是现在好多了，你可以看到。 >> [马兰]哦，是的。好了，只是 - 是的。好吧。它也使您的网页可能非常简约，非常理解这样的事情在页面上流动的方式，这是非常合乎逻辑的，并没有得到对方的方式。什么样其他的事情是对Facebook的好或坏关于Facebook吗？让我们在这里有一个设计对话。哦。在哪里？是啊。 [学生]新的时间线系统允许你搜索的人的个人资料，他们的过去。哦，时间线。时间轴是一个伟大的事情，因为它可以让你秸秆你的朋友他们在高中的时候。时间轴是好事，因为它可以让你过滤内容的速度快了很多，它可以让你找到的东西，否则将有很长一段时间找到只是滚动了下来，起来，起来，起来，起来，起来，像时光倒流。但也有排序的缺点，在用户体验方面。什么会是什么呢？大P-R开头的单词。 >> [学生]隐私。 >>隐私保护，对不对？隐私权是一个巨大的用户体验问题。这是我最讨厌的关于Facebook现在的事情之一。 [笑声] [马兰]我现在做。大卫并没有意识到这实际上直到昨天才发生的。所以，现在他知道，每次我聊他，我知道他一直不理我。 [马兰这种尴尬的分手是我居然无视他，我不知道他知道我不理他。 [笑声] 隐私是一个巨大的问题。任何人都可以在这里告诉我什么是对Facebook的隐私可能是坏的除了事实，他们做这样的事情？这是什么特别难Facebook的隐私吗？这是一个引导性的问题。是。 >> [学生]隐藏你的照片从某些人。右。没错，隐藏你的照片从某些人。他们有这样的小，小的右上角的按钮，可以让你切换的隐私照片。他们的隐私选项很丰富，不同种类的菜单。他们已经变得好了很多关于它最近，但它使用的情况下只要你想，以防止你的朋友看到照片，你将不得不去的5个步骤，通过一个非常复杂的过程，像，让我点击这个链接，现在让我点击了，让我点击了，让我指定的人可以看到我的照片。这是在Facebook的部分不是特别好因为有这么多关于用户体验实际上是给他们的自由控制哪些人可以看到。我们称这种用户控制和自由。如果你还没有让您的用户这样做的方式是有效的，直观的，那么你的用户体验是不是真的那么伟大的。你们想对Facebook说什么吗？我如何关闭这个功能呢？ [王]您不能关闭这个功能，Facebook的一部分，这是一个巨大的可用性缺陷。这个功能 - 其实我昨天看着它 - 这是，你不能做到这一点，或者它非常，非常深的地方埋 Facebook的凹槽，因为我无法弄清楚如何禁用此功能在所有。 [马兰]但有时这些决定并不明显因为你们已经给了我们很多有用的反馈各种CS50应用在课程中使用的网站。我们还没有实现所有的这些要求和建议。部分，也就是获得这么多的请求，它是时间的函数，但有时我们只是有意识地决定一样， “谢谢你的建议，但我们不同意。” 那么，你如何决定你应该做的，如果你的用户认为你应该做的事情即使你不一定吗？这是一个微妙的平衡之间其实听你的用户说，实际上有某种行，你说， “我们不会做这些用户怎么说。” 特别是，我认为这是由亨利·福特的报价，总结得不错。 “如果我问人们他们想要的东西，他们会说，他们希望更快的马。” 任何人都可以进行排序，梳理出报价的真正意义是什么？这不只是让用户知道他们想要什么，但更重要的是 - [学生]：他们不知道什么是可能的。在某种程度上，他们不知道什么是可能的。戏弄，除了多一点点。你指的是什么？ [听不见的学生反应] 这是很好的。我认为，我们在这里想说的是，人们知道他们想要什么。他们希望更快的马。他们真正想要的是快速移动的能力，但他们真的不知道介质实现。当你来到你的用户，你的用户告诉你一件事他们告诉你，“我们希望这些功能，而这些功能，而这些功能。” 你一定不想去想，“让我继续前进 “和实现他们明确地说，” 但你要考虑的是，“我可以得到什么样的想法，从这个吗？” 他们真正想要什么？从那里，你可以做什么是设计满足这些要求的东西，但不一定的方式，用户的期望得到满足。因此，最后的项目一样，在很实质的东西，什么是一个非常有用的启发，当它涉及到更好的东西，尤其是当设计师对他的这种傲慢进行排序，让你知道什么是最好的，你可能需要从用户的输入，但你如何真正得到的反馈信息？在最终的项目中，很具体，产生最佳的效果呢？产生最佳的结果 - 我会在第二 - 是的开发和测试，然后重复这个过程。我的意思是测试通常是当你设计的东西你认为这是相当不错的，像“我就是这样一个伟大的设计师，每个人都非常喜欢这个。” 然后你把它放在那里，人们真的不喜欢它的一些原因。你需要做的是你要的东西，人们不喜欢的部分和改造，人们不喜欢的东西。这听起来像一个非常明显的过程，但这个过程中，不断迭代你已经建立的顶部是一个过程，可以帮助您不仅完善自己的设计能力，而且还可以帮助您完善设计所以，人们实际上非常感谢您的产品，甚至超过他们之前。我就去了更具体的例子，实际上，你可能做的事情。作为排序的最后一个例子的产品，让我们来看看在KAYAK。满意的，当它来到的时候是非常，非常受欢迎。任何人都可以猜到是为什么呢？各种你喜欢的东西，如果你用它是什么什么是各种各样的事情，你不喜欢吗？是。 >> [听不见的学生反应] >>好。这是它的一部分，让用户有更广阔的查询是比非常严格的，如，“你必须选择你的开始日期 “，你必须选择结束日期。” 事实上，它可以让你灵活的，它可以让你在这个范围内的所有的航班。还有别的吗？ [学生]，包括价格的费用。他们这样做的费用包括在价格中。税和活动其实，价格在左上角直接进入这样你就不会误以为你实际支付的240美元飞行当它真的330美元。还有别的吗？是。 [听不见的学生反应] 我不知道如果他们真的让你这样做。我可能是错误的。这可能是一件有趣的事情，如果你想要把更多的重量，特殊的过滤器使得它们推顶端到该过滤器有关的结果。但是，任何人都可以告诉我这左边有什么特别之处呢？你是如何传统的看互联网上的服务，在此之前的飞行吗？是。 >> [听不见的学生回应] >>你说 - [学生]：每家航空公司。 >>呀。每家航空公司都有自己的网站。这巩固事情。还有呢？ [学生]你知道你究竟什么时候离开。你知道你究竟什么时候离开，但在特定的过滤器。让我拉满意的。哦，上帝，弹出式窗口。糟糕的用户体验。当我提出这个滑块，会发生什么情况？ [学生]自动更新。 >> [王]自动更新。这件事情是非常重要的。在此之前，每当你想看看一个航班，你不得不把在输入的位置，你的输出位置，然后按搜索，它会处理并显示结果。如果你想改变你的查询，你就必须按两次，从头开始进入一个新的查询，然后再去做一遍又一遍。这样的事情是很好的事情，在中间使用了一个非常难以理解的事物。每当你做这样的事情，它拍摄了一个请求，它返回的结果。这种即时的反馈是满意的广受欢迎的东西，因为它是很容易的，我只是改变我的查询并找出的东西，都是围绕一个特定的范围内不回去，反反复复，来来回回。因此，这些都是各种各样的事情，你要想想，当你设计你的网站。我怎样才能让我的用户，这是非常有效的去任何他们正在努力他们的最终目标，并得到尽可能快？ [马兰]约瑟夫点之前用户不一定知道他们想要什么，根据你们现在知道HTML 你有复选框，单选按钮，选择菜单，输入字段和等，你将如何实现一个飞行的开始时间采摘的概念呢？这些不同的UI机制，你会用吗？如果你只是知道以前教过的HTML 你知道的输入单选按钮，复选框，下拉框和输入框，你会怎样自然的选择已经采摘日期？ [学生]输入。 >>输入。或者甚至下降打倒所有的日期，对不对？因此，更复杂的用户界面的左侧，你可以实现这样的机制，你可以使这个过程更直观，采用了滑盖因为时间是连续的，和人们通常不认为它的离散块。好的。最后一件事。 10个可用性启发式。我们谈到的所有的事情可能属于其中一类。如果你去这个链接，该网站将在网上公布，你实际上是可以的，当你设计你的网站，让这些启发式记这些经验法则。为您的项目，我建议你做什么，以更好地设计你的应用程序是纸上原型第一。当你思考你的应用程序时，很快就画出你想要什么它看起来像并确保所有框都非常直观的用户使用的方式，是配置在这些纸上的原型，甚至给你的朋友，并开始焦点小组。只要2人或3人，并要求他们只是利用这些纸上的原型，，并告诉他们新的屏幕，看看他们是否真正了解这是怎么回事。你想要做的是给他们的任务，激励，任务，只是给他们的应用程序，并让他们使用它。不要给他们超出了指示。你想真正让他们与您的应用程序进行交互的方式可以让你看到他们将如何使用它，如果你不站在他们旁边。这是非常重要的。这会给你的见解是人四处逛逛特别的东西的方式，我并没有打算在他们呢？他们在屏幕上使用特定的UI机制的方式，是一种哈克？我并没有打算让他们这样做的。一旦你完成了这个，你要怎么办？你的设计岩石，对不对？你想要做的是，你想这个过程中开发和做一遍。所以给朋友，一旦你已经开发了它，测试它，开发，测试，开发，测试，迭代，并和弘扬。设计是一个迭代的过程在这个意义上。实际上，你必须建立一些关于它的事情，然后实现，你不知道前，，从该回去和改善。现在，作为发展的一部分，这就是汤米是要告诉你，休息后和你可能会对如何能够实现类似自动完成的方式，是相当简单的。 [马兰]托米在这里，然后一个问题。很多最早的网站 - 约瑟夫说，20世纪90年代风格的网站，它实现，如果你想选择的开始时间和结束时间，坦率地说，早在一天，甚至在一些网站上的今天你做到这一点的方法是你从下拉菜单中选择一个小时，你挑分钟从下拉，也许你选择AM，PM，你这样做3次以上。因此，有6次点击，也许一些滚动您的用户实际上可以提供的日期和/或时间范围，在这个意义上的一些种。所以肯定是不理想的，但迄今为止，我们没有发现表达能力在任何语言中，我们已经看到在做一些性感的这样的滑块的开始时间和结束时间。但是，如果你觉得回到了0周当我们谈到划痕，也有不小工具，只是做了某些事情。你真的只循环和条件等，有这些基本一样。因此，种只是想现在非常抽象的，独立的HTML的详情，什么是真正的开始时间和结束时间滑块这样的东西吗？当我将我的鼠标和我点击那个小胡萝卜符号的左边并开始拖动，编程，什么是你想成为能够实现要做到这一点呢？什么样的问题，你想要什么布尔表达式可以要求吗？到底发生了什么？萨米？ [学生]光标的位置在哪里？ >>好。光标的位置在哪里？这是我们需要表达在Scratch的东西，无论是基于位置，甚至色彩等。您可能还记得曾经周一短暂，所有这些事情称为事件在世界上的Web等方面存在的东西，如onclick和的OnKeyPress 和onKeyUp和onmouseover和onmouseout。因此，实现，即使这些事情，我们已经为在Web上授予即使你不知道的网站，如Facebook和Gmail，你将如何可能实现，因为没有什么甚至喜欢在课堂上或习题集，实现这些相同的基础， HTTP和参数，GET和POST，我们已经看到在迄今为止的基本HTML输入在某一时刻的编程机制，汤米的介绍你可以开始表达自己，就像你在0周通过非常直观的拖放。所以说，汤米MacWilliam我们对Web和一些新的拼图。好的。我的名字是汤米和我将要讨论关于JavaScript的。只是一个声明：我认为JavaScript是最好的编程语言整个世界。有很多人不同意我的，但它是令人惊异的。一旦你回到C，如果你有另一个类或一些其他语言编写C，这是在所有的低级别的细节，你真的令人沮丧的陷入英寸所以，如果你曾经感到伤心，恼人的C是如何写的，刚回去，编写一些JavaScript。它的必杀技。您的糟糕的一天，你会感觉好多了。来自很多神奇的JavaScript来处理事情的能力已经在页面上。当我们说我们的PHP脚本，他们在服务器上执行， PHP脚本，并最终可能一些HTML输出。这个HTML发送到客户端，然后，就是这样。如果PHP的页面上添加一个按钮，例如，它不能真正做到这一点。它必须提供一个全新的HTML文件并将其发送到浏览器。使用JavaScript，我们知道，我们可以更新的东西，而他们已经在页面上，正因为如此，我们可以提供更即时的反馈，这将真正提高我们的网站上的用户体验。快速回顾一下JavaScript的选择。我们知道，当我们下载一个HTML页面，中的DOM表示的。 DOM记住的是这棵大树，其中的元素在这个大的层次结构有关。当我们的工作与资料库在pset中7，我们需要知道怎么做的第一件事情就是查询数据库。我们有庞大的用户表，有时我们只想说， “我只想要一些符合某些条件，这些用户。” 同样，当我们有DOM，我们需要以某种方式查询。我们需要以某种方式说，“我希望所有的按钮，看起来像这样 “或在页面上的所有图像”。这些选择使我们能够做到这一点。因此，只要简单回顾一下。这第一个，此＃提交，那是要选择吗？有谁还记得吗？ [听不见的学生反应] >>是的，没错。这是怎么回事，有一个ID的提交页面上选择一个元素。所以说，这个选择是去工作的ID，散列标签。的第二个。中心的，究竟会是选择吗？是啊。 >> [学生]类。 “没错。这是现在要选择的类。这里的ID和类之间的区别是一般的ID应该是唯一的内的任何空间，你正在寻找。所以，如果你正在寻找一个完整的网页，你真的应该只有1个元素与某些ID，所以在这种情况下，提交。另一方面，随着类，我们可以在同一页上有超过1元具有相同的类。这可能是有用的说，我要选择在页面上居中的一切，而不是仅仅的事情。最后，这最后一个在这里是一个更复杂一点，但是这是什么要选择的DOM呢？ [听不见的学生回应] >>那是什么？ [学生]这是一个标签的东西。 >>在这里，我们有2个部分。第二部分是说我要选择一个标签，输入标签，因此，任何元素，这是一个输入标签。但我不想只选择所有的输入可能是因为像一个提交按钮输入像一个文本框，可以输入。因此，这些方括号我说我只需要选择这些元素，文本类型。在我的HTML标记中的某个地方，我有一个属性的类型，该属性的值是文本。因此，如何对这里的第一部分？这个选择的第一个字是形式，那么我有一个空格，然后输入部分。这是什么做的，把它前面的表格中？这是从根本上限制了我们的查询。这可能是，我们有一些在网页上输入的情况下是不是一种形式的后裔。这将是本会说我只希望有地方在他们之上的输入标签一些父元素的一种形式。因此，在这种方式中，我们可以使这些多层次的查询所以我们不仅要选择所有匹配给定的选择。我们种的范围限制在该查询别的东西。所以，现在我们知道如何选择页面上的元素，让我们来谈谈一些关于AJAX。 AJAX是一个仍然非常时髦的缩写，异步JavaScript和XML。碰巧的是，XML仅仅是一些数据的方式来表示。最近丢失了大众化的那种，所以AJAX中的X是没有用的全部时间。基本上，AJAX允许我们做的是HTTP请求从上下文的JavaScript。当我们在我们的网页浏览器，我们导航页面，我们点击一个链接，我们的浏览器是什么做的是使一个HTTP请求到我们点击任何链接。但是，这并不总是理想的，因为如果是这样的话，那么像大卫说，我们总是有让用户单击Submit按钮，或单击一个链接为了让任何事情发生，会涉及到一个HTTP请求。因此，AJAX，我们就可以提出这些要求，代表的JavaScript。这意味着无论何时与用户交互的页面或发生任何事情，在我们的网站上，我们实际上可以使一个纲领性的其他一些PHP文件的要求或其他任何东西和检索数据，该文件吐出来。让我们来看看在AJAX的一个例子。这是我们的CS50财经页面，希望我们中的一些人熟悉。如果我们看一下这个页面的HTML中，我们看到这里，我添加了几件事情，其中一个我已经给这种形式的ID。我已经说过的id =“形式引号”。我这样做只是因为它的DOM，这是一个有点更容易选择因为我可以做一个很简单的查询。我想在这里做的是与CS50融资，我想解决一些问题。因此，如果我们去到finance.cs50.net，每次我想要得到的报价，我点击获取报价“按钮，获取报价按钮，然后带我到另一个整页。如果我想其他报价，我需要点击“返回”按钮，然后我输入的，我得到的报价，和我打“后退”按钮。这真的是不是最好的用户体验。谁真正使用的网站，如果它是很慢的股票价格得到吗？所以我们想要做的与AJAX是，要一步一个单独的页面中移除以查看结果。我们真正唯一的要求是非常小的价格，这只是一个非常小的数据量。因此，有没有需要我去另一个HTML页面，下载一个HTML一批新的，也许更多图片下载，其他一些CSS文件就由我来回答，很简单的问题此股票成本多少。随着AJAX，我们可以轻松了许多。我们看到，在这里，我在一个JavaScript称为quote.js的文件链接。我们的实际打开该文件。不存在。我的所有的JavaScript文件都位于HTML 因此，在Web浏览器可以访问它。然后，我们在这里为JavaScript有一个单独的目录，现在这里是quote.js。在该文件的顶部说，在这里，我要等待整个页面被加载之前，我尝试做任何事情。为什么是必要的？事实证明，我要在这里做的是接下来的事情开始寻找一个元素一些选择相匹配的。如果这个JavaScript执行前加载此元素在页面上，然后我尝试做的一切是行不通的，因为我要选择的东西，现在还没有。因此，这条线往上顶说，我要你等待，直到一切都加载这样，我们就保证了我在寻找任何元素，实际上是在页面上。这个美元符号在这里我使用的是称为jQuery的库。这个jQuery库使我们能够利用这些选择，我们只是看着。说作为一个参数传递形式引号，我现在选择的形式，我们只是看了看。现在我有一个不知何故，在内存中表示。现在这个对象中，这种表达的形式，我现在用的是调用的函数。这个函数的功能是它会附加一个事件处理程序。本次活动，我们要听的是submit事件。因此，当用户点击提交按钮或按Enter键，此事件要解雇。通过挂接到这个，我现在可以覆盖默认的行为的形式。如果没有这个JavaScript的形式提交到PHP文件我们使用的行动属性。但是，我现在说，等待，等待，等待，我不想让你真正做到这一点。我希望这种情况发生之前，你去尝试向一些PHP文件。现在我想要做的是什么呢？在这一点上，我想以某种方式使用AJAX加载的股票是什么价格。我需要知道的第一件事情是，用户正在寻找什么样的股票了。要做到这一点，我要使用另一个选择。这是第三个选择，我们看着面前。这是说，我要开始这个表单元素的ID的形式报价。然后该表格内的某处，必须有一个input元素具有的符号的名称。如果我们回头看，我们的HTML中，我们看到，我们有一个输入名称=符号。这意味着，这是怎么回事，选择该文本框，用户输入。这是很好的。我们有文本框。现在，我们只需要知道它里面有什么。要做到这一点，我们在这里，可以调用此方法。值，这说，我知道你有什么“文本框中。我希望你能告诉我什么是用户输入到该文本框中。现在我们有一个称为符号的字符串，等于不管用户输入的字词。这是很好的。现在，我们可以使用该字符串，使我们的要求。这是一个新的功能，这除了我们不再将要选择的元素，我们要调用不同的功能，提供给我们的jQuery。 AJAX的功能是什么，使这个HTTP请求。因此，我们必须告诉它一些东西。我们要告诉这个函数的第一件事情就是我想要的要求去。在我的项目中的某个地方，我这里面的HTML目录称为quote.php的文件。我可以访问这个文件，我们看到了，就这样，如果我去到localhost / quote.php的。我想我提出请求该页面的JavaScript。什么类型的请求呢？在此之前，我们看到的形式，方法=“邮报”属性，这意味着它将会使一个POST请求，所以它不会把任何东西，而不是一个GET请求的URL，只是如果我们只是访问该页面的Web浏览器，例如被解雇。现在，我们已经说过了，我想使一个HTTP POST请求的页面位于quote.php。当我们提交表单时，请记住，我们可以访问该表单的输入元素与$ _POST可变。到目前为止，在这个故事中，我们实际上没有任何数据一起发送。我们只是说，我们正在做一个AJAX请求这里的请求的类型，我们正在做的。现在，我们需要发送一些数据的页面。要做到这一点，我们可以使用这个属性被称为数据。此属性的值实际上是一个关联数组。这样做的原因是，它允许我们发送的数据只是1个以上。这就是为什么我们这些在这里嵌套的花括号内的这些其他的花括号。这些关联数组中的键都将是同样的事情这些名称中的属性的表单元素。这意味着，如果我一起发送一个键，符号，这意味着我的PHP页面可以访问这些数据与$ _POST [符号] 就像我们以前那样，当我们提交表单。而现在我们要发送的实际数据将是此关联数组内的值。我们存储在变量符号的文本，所以我们要发送沿着现在是一个关键的符号和一个值的任何用户输入英寸现在，我们已经取得了我们的PHP文件执行，这个HTTP请求，它会发送一些数据，现在只是提出这个要求的客户端。现在，我们需要作出回应，无论服务器对我们说。要做到这一点，我们有这样的最后一个属性，这里所说的成功。成功的关键的价值，这实际上是一个函数，这是一个非常酷的事情你可以做的JavaScript。您不仅可以有整数或数组作为一个关联数组里面的值，我们也可以有一个函数。所以说成功，这是我的钥匙。一个冒号说，在这里的价值，现在的价值，这实际上是一个函数。所以我们并不需要给这个函数的名称本身。我们只能说，这将是一些功能。这将需要1个参数。此函数的参数将是无论服务器发送我们的要求。就像当我们的浏览器发出请求，服务器发送回浏览器显示，的背景下，AJAX，我们刚刚作出了一个请求，服务器发送的东西回来，现在我们已经是作为一个字符串表示。以该字符串，我只是想显示在页面上。要做到这一点，我有一个最后的选择。我要选择的元素的ID价。这仅仅是我在页面上创建一个空白的div，我想设置该分区的内容是什么服务器发送回。其实我修改quote.php位。而不是调用渲染和渲染一些页面， quote.php现在只是要为一个字符串，打印出的股票价值。所以，如果你要访问的页面，你会只看到小串无论股价。在这里我们需要做的最后一件事是确保这个函数返回false。这说的是，如果我是里面的一个事件处理程序该事件处理程序返回false，而不是返回true，这意味着，我不希望原来的触发事件，。在这种情况下，如果我们没有任何的JavaScript，我们提交一个表单，我们的Web浏览器会说，“我将要发送的数据一起，” 他们会送你到另一个页面。因为我们现在正在使用AJAX，就没有必要向用户发送到另一页。我们只是同一页面上动态显示的结果。我们真的不希望他们去任何地方，我想留在同一页上。因此，通过返回false，我们保证的形式，我们没有做。让我们来看看这实际上看起来像。我们的报价看起来是一样的。让我往上拉的检查员在这里，所以我们可以看到发生了什么事情。少巨大的。请记住，如果我们打开“网络”选项卡上，这是我们可以看到所有的HTTP请求在页面上正在发生的。对于一个符号，让我的类型AAPL，然后点击获取报价。现在我们看到，苹果的份额花费一定数量的美元刚一出现在页面上，但并没有改变在所有的URL。事实上，这里是我们刚刚作出的HTTP请求。我们一个POST请求quote.php的。这是有道理的。这是服务器给我们送来。它不再是这个巨大的HTML文件，图像和类似的东西，它只是一个行文字，然后我们只是显示的文本行。如果我们回去的头，看看我们其实里面的这个HTTP请求发送，我们可以看到，在这里，我们一起发送符号的键和值AAPL，这就是用户输入的字词。这是很好的，但它仍然是有点讨厌。我还是要单击此按钮可以获取股票报价。我们是忙碌的人们，我们没有时间去按一下按钮。谷歌意识到这一点，而当他们实现谷歌即时。谷歌即时是在您输入时，它只是开始为你显示结果所以你不必担心即使点击搜索。其实，一个有趣的故事了这一点。一旦谷歌即时出来了，人都一样，“哇，这是超级惊人的。” “这太酷了。” 和在斯坦福大学的学生，19岁的时候本网站YouTube的即时。所有的YouTube即时并有效地搜索YouTube的瞬间。因此，而不是去YouTube.com并点击搜索，当我开始打字到YouTube即时的东西，如CS50，我们可以在这里看到，它试图在一个缓慢的互联网连接填充这些结果住。要做到这一点，我们实际上可以做一个很简单的修改给我们的quote.js的文件。现在，我们把此事件提交表单时。我们真的不希望使用户不再提交该表格，让我们，而不是每次用户按下一个键触发此事件。要做到这一点，让我们先改变事件提交KEYUP。这意味着，而不是等待的形式提交，每次按下该键，事情是会发生什么。它不再是有道理的附加keyup事件的整个形式。我们真正关心的只是搜索框的。要选择，现在，我们可以改变这，而不是形式引号，形式报价，我们将有一个输入（TYPE = TEXT），或者我们可以说，（=符号命名） - 任何我们想要的。现在我们要做的最后一件事。记住这里的时候，我们说，返回false 我们说，我们不希望，默认情况下触发事件，。但是，碰巧的是，如果我们禁用，现在，无论我们输入是不会显示在浏览器中了因为那将是输入到一个文本框中的默认行为。我们不再需要重载它，所以让我们来破坏这个返回false。如果我们保存和重新加载页面，现在当我开始打字AAPL 你会看到在这里的底部，股票价格会自动完成。因此，这里是CS50财经即时。实际上是一个有趣的故事的YouTube即时是，学生只是一种写一晚的项目，第二天YouTube的CEO，他提供了一份工作。所以，就这么简单，你CS50学生，你最终的项目可以得到你的工作在YouTube上。类似的东西是项目的最后一个很酷的想法，对吧？我们有一些现有的功能，我们希望整合。我们改善用户体验了一点点，，突然在YouTube即时搜索的东西，可能是一个更容易寻找它比一般的YouTube。所以这是AJAX的缩影。在约瑟夫显示的例子中，我们看到了很多的自动完成，和那些自动完成的，真的，真的很方便，因为我们并不一定要记住 - 例如，如果你不记得苹果的股票价格我们只知道这是AA的东西，而不是仅仅对我说， “A股这件事情花费这么多钱。” 样的，我想知道哪些股票开始使用AA。我们可以做到这一点真的很好，已经包含引导程序库，里面的CS50融资。如果你来这里的JavaScript标记，向下滚动到事先键入的内容，这是一个不错的插件，已经有人为我们写的，我们可以很容易地使用这样的功能。我输入A和这里列出的一些国家开始A. 比方说，我认为这是真的很酷，这是我包括在我的网页上。事实证明，这是真的，真的很简单。让我们在这里quote3.js跳。我的文件看起来有点不同。在这里，我的所有AJAX的东西是一样的。我要加载的库存数据，而不必去到另一个页面。但现在我想使用这个插件。引导文件究竟如何我能做到这一点的很好的例子。我想说的是，“在这里，我想自动完成输入，” 我要调用这个函数，称为预输入，这就是要为我们处理所有的预输入的东西。初始化列表，它会做所有我们的过滤。唯一需要知道的是什么样的数据，我们自动完成。所以我只是发现了这个关键，通过阅读文档和看的例子。如果我给它一个重要的来源，这个键的值仅仅是一些阵列的事情，我想自动完成。这个变量来自这个其他文件。我打开了symbols.js。这symbols.js这只是非常，非常大的数组，其中包含字符串所有这些股票从纳斯达克的符号。如果我想跳回到HTML，所以jharvard，虚拟主机，globalhost，HTML，模板， quote_form。从那时起，现在被称为quote3.js，让我改变我的JavaScript文件包括。现在我有quote3.js的，所以我要加载中，单独的JavaScript文件，一个具有该引导程序自动完成。现在，当我跳回到浏览器，重新载入页面，并我开始打字AA，有我的自动完成。这是真的就这么简单。我有1行代码，只是说：“这是自动完成的事情，我想上。” 突然间，我有这真的，真的很不错的功能不是很多的努力。当你正在开发的网站，尤其是前端方面的东西，你会发现是这样的话有很多。有很多，很多，很多非常酷的免费图书馆有使超级容易做这样的事情。谁能想到在这个大的符号列表简单地自动完成的任何缺点吗？这是不是最好的，这种方法可能是一些什么？是啊。 >> [学生]的时间，如果你有很多的[听不清] 是啊。现在，我们正在下载这个庞大的JavaScript文件，有很多的符号。所以，如果我们有一吨重的东西，这可能会增加的延迟不仅搜索而且实际的文件下载。大。还有别的吗？现在没有真正意义上的相关性。如果我键入A，公司在这里显示的可能不是最热门的公司，开始A. 我到苹果之前，它可能需要一些更多的字符来寻找我在寻找什么。这种自动完成没有这个意义上的相关性。这只是说，“我要显示任何匹配。” 相反的是，我想为我的搜索以某种方式结合一定的相关性。如果我走在这里，雅虎财经，finance.yahoo.com 如果我试图进入雅虎财经的页面上的符号我开始打字goog，我有这个很好的事情的清单。显然，它看起来像雅虎财经是做一些更聪明在这里。他们有一定的关联，他们也有更多的信息喜欢这个名字的股票。这件事情，我真的不能与我的股票符号列表。我想这一点，所以我打算把它。要做到这一点，让我们的做一些事情，。让我们先打开此页面上督察因为我们看到这个页面是不重装，所以它可能是使用AJAX莫名其妙地装载它的数据。我们可以找出什么样的数据加载。如果我点击这个网络“选项卡上，这些都将是所有的请求，开始被解雇。现在，如果我输入咕，我们可以看到，我刚刚得到一个新的HTTP请求。这可能是这些数据是来自哪里。果然，我看这个URL，这是一个有点奇怪的命名，我们可以看到，这正是雅虎的发送数据。我已经创建了一个单独的的文件名为suggest.php的精神，以查找功能非常相似。它基本上是雅虎的URL进行查询，得到一些数据，并将其发回给我。现在，而不是使用大，巨大的符号列表，我可以使用雅虎的很好的相关性的东西，我没有下载大量的JavaScript文件。我只是要拉下实际相关的股票符号。让我们跳进的。因此，HTML，JS。我们现在在quote4。现在，我们不再使用该大名单的JavaScript文件。但这里有一个小的设计问题。我们曾经说过，A在AJAX是异步的。这是什么意思的是，当我做一个AJAX请求，第8行，这是我的AJAX请求实际上是发射。比方说，现在我这里有一些代码，会做一些东西我想在页面上提醒用户注意或改变一些东西。什么是不可能发生的事情是浏览器还没有要等待这个请求继续之前下来，击中这条线。这就是异步的一部分。这将会使这一请求，并说，“当你完成， “回来，并调用该函数，我告诉你打电话内的成功。” 这意味着我们不能只是预先下载的所有股票。我们需要，使请求并等待的东西回来。这意味着，之前，我们可以简单地告诉引导， “这是我想你自动完成的事情的清单。” 我们不能再这样做了，因为我们不知道我们想要的东西实际上是自动完成的。幸运的是，自举想到了这一点，因为这些都是聪明的家伙在那里，他们实际上给了我们另一种方式来加载这个预输入的插件。在此之前，源属性的值，这是自动完成的事情这大阵。现在的源属性实际上是一个函数，此功能的目的是要弄清楚的事情是自动完成的。要明白这一点，就是它的是它会要求雅虎财经什么是自动完成的最好的东西。要做到这一点，我会做一个非常类似的AJAX请求。我要请求这个页面suggest.php。我想还是一起发送的符号。现在，我的成功，引导文件告诉我，以填充该列表的东西，所有我需要做的就是在这个数组传递给回调函数。但是，且慢。如果这应该是一个数组，AJAX送我回文本，这怎么可能呢？这引入了一种新的方法称为JSON数据交换。在这种情况下，我们不只是发送一个简单的文本字符串。现在，我们正在处理这个更复杂的股票符号列表。这些股票符号也包括像公司的名称或目前的价格。只是用一个很长的字符串，这不是在任何可预见的方式格式化不会是最好的方式得到这个数据，我从雅虎的服务器的方式，我可以很容易地理解。 JSON是一种技术，利用我们如何在JavaScript中创建关联数组。这看起来很像一个JavaScript关联数组，而事实上，这是因为它是。 JSON代表JavaScript对象表示法。这基本上是一个商定来回传输数据的格式。在这里JSON对象或本JSON关联数组发送一些数据有关课程。此阵列的键像当然，有一个值，该值的CS50，在这里我们可以看到，我可以有一个值，它是一个数组。我没有做的事情，比如解析出字符串，并期待逗号做疯狂的事情一样。因为这是声明在此JSON格式， JavaScript和jQuery已经有函数将字符串转换为这样的JSON转化为实际的JavaScript关联数组我们可以一起工作。这样做是因为简单的说，不再是这个文件，suggest.php，送我回一个简单的文本字符串，但我知道这是要送我回JSON。这意味着，可以转换成JSON的JavaScript关联数组。因此，jQuery，我想请你为我做的。这意味着，这里此响应参数，这已经不再只是一个字符串。因为我们已经告诉了jQuery的，这里是一些JSON， jQuery是足够聪明，说，“你想JSON？” “我要转换到一个关联数组你。” 让我们实际来看看在“网络”选项卡一旦我们有quote4.js的。我们将改变这一点，并重新加载页面。现在，我要再次输入的A-A。我做了一个的夫妇请求suggest.php，但是现在这种反应，，而不仅仅是字符串，它是JSON。所以我说，“又来了一个关联数组，有一个开放的大括号”。这个关联数组的第一个也是唯一的密钥被称为符号，然后在这里是一个数组的所有相关符号现在从雅虎财经，而不是从那个巨大的列表。这就是我如何可以简单地填充这个自动完成插件一些数据不是来自一个本地文件，该文件已经预定但其他的东西。事实证明，我们实际上可以利用的技术，称为JSONP，或JSON填充，将消除这种suggest.php的中间人。但不是这样做的，而不是让我们来看看我是如何可以改善这一点更。我真的很喜欢引导的，事先键入的。这是非常好的。但我们在JavaScript越来越好，我们要种做自己，也许看看这是什么插件可以做。让我们不再使用该预输入的东西，让我们尝试使这个建议的股票，自己。在这里，我们要开始以同样的方式quote6.php。每当有人类型的东西，我们希望做一个AJAX请求。这是我们原来的CS50财经即时。不是要求作出quote.php，现在，我们请求了同一个文件之前，suggest.php，它只是将数据从雅虎财经。同样，我们仍然预期JSON，但因为现在的预输入，这对我们不这样做，我们还需要发送沿内的当前文本框的值是。现在我们知道要问什么，雅虎财经，所以现在在这里，我们要执行一次请求完成的功能。我们没有插件，使我们的列表，所以在这里我们要建立一个列表的建议。要做到这一点，很像我们在PHP的HTML字符串连接起来这些大然后我们打印了出来，在JavaScript中，我们可以做同样的事情。首先，我们要开始这个字符串建议，此字符串只包含了一些HTML。我们希望它是一系列的事情，所以我们要开始了与此列表的标签，现在我们要遍历所有的符号，返回到我们。请记住，因为我们前面提到的数据类型：'json'的，这是不是一个字符串。这已经是我们的一个数组。这真的很酷。我们可以简单地说，“我希望你能添加一个列表中的元素。” 我们将将其放在身边的那一个元素，我们可以给它一个类的建议，所以我们知道它是什么，现在这里是我们回来，从雅虎财经的符号。一旦我们创建了一个元素的符号，我们已经得到了，我们只是想以关闭列表。所以，现在的建议表示这个小HTML片段当放在页面上的将是我们正在寻找的东西的列表。现在，让我们实际在页面上。要做到，我实际上已经创造了另一个空的div，我已经给了它一个ID的建议。就像我们设置的div的价格，库存数据将显示的内容，现在，我们只是想设置这个div的内容，不管这个字符串是包含这些符号。通过使用这个HTML的方法，这样的建议变量，这个字符串，是一个字符串的HTML。我希望你的HTML，并把它里面的div建议。我们刚刚附加的东西，现在的DOM。我们增加了一些新的元素的DOM，我们现在可以显示在页面上。让我们来看看这是什么看起来像。如果我们加载在quote6和现在我们回来，现在，当我开始打字AAPL，我们不再有引导程序自动完成，但我们现在有这个名单，我们自己。这是一个有点丑陋，比引导的预输入，例如，但它允许我们做的另一件事情。当我们正在寻找在这个引导程序插件，我们看到，当我们自动补齐，自动完成的值是AAPL。这也许不是那么有用。作为一个用户，我可能不会立即承认所有的股票符号。我可能更容易识别，是公司的实际名称。因此，它是真正有用的，而不是说AAPL 如苹果公司说了些什么因为我们已经推出了自己，我们可以很容易地做到这一点。让我们打开我们最后的报价文件，所以quote7。同样的事情。我刚刚创建了一个PHP文件，该文件将返回给我们更多的不仅仅是符号。它也会给我们公司的名字。因此，我们正在做同样的事情。我们正在做一个AJAX请求。一旦请求完成后，我们将在这里执行此功能，此功能是要建立一个大的字符串的元素。但不同的是，这些列表的值不再仅仅是符号，它现在的名字。因此，我们有一个小问题。当我们用我们的查找，我们需要以某种方式传递给它的符号。我们可以通过查找类似微软公司。我们需要通过它MSFT。当我们编写HTML，我们有很多不错的内置属性。一个A可能与它的href或一个类。但我们现在真正需要的是什么，每个环节有与之相关的股票代码。有没有内置HTML属性的股票代码，但幸运的是，HTML5可以让我们创建我们自己的属性，是我们想要的。说数据符号中，我介绍了一个新的属性他的名字我只是做了起来，这是好的，因为我前面的这个数据。我们要到店里面有符号的股票。这也就意味着，即使我们显示的价值，公司的名称我们的自动完成内，我们仍然在记忆的象征是与每个公司相关联。我们这样做的方式是该元素本身的内部。因此，这意味着我们需要作出更多的变化。当我们点击它，现在，我们需要利用的符号属性而不仅仅是它的价值。如果我们备份，我们建议附加一个事件处理程序。每当一个点击这些建议，我现在想要做的事情。我想要做的是改变该输入框的值。现在，我想设置这个相同的val函数。因此，不带任何参数的值函数返回到你已经在文本框中，但如果你给它一个字符串，该字符串，并把它在文本框中。以同样的方式，我选择它的文本框中。它的名字是符号的形式引号内。现在，我要送它的值的属性数据符号。这东西是新的，这$（本）。这指的是被点击的元素。我们可以看到，在这里，我们不会附加的click事件每个元素单独一类的建议。相反，我们正在接近这一点是不同的。相反，我们说的这个建议DIV里面的东西，记住的是该列表的容器，如果这个div里面的东西被点击，它有一个类的建议，我想触发该事件。基本上，这意味着什么，我们可以做的是，我们可以重复使用相同的事件处理程序在列表中的所有的东西。所以，我们必须有一个事件处理程序的第一个元素不同的事件处理程序的第二个元素。相反，我们可以说，“我希望同样的事件处理程序适用于一切在我的名单。” 但是，我们需要以某种方式知道哪个元素被点击。这个“本”关键字表示这一点。这是一个对象，该对象只是由用户点击。如果我只是点击第三个链接，这表示，第三环节的元素，这意味着我可以得到它的属性，数据符号，我们知道必须包含的符号，我只是点击与该公司相关的。如果我们跳回到我们的融资页，我们现在可以看到，一旦我开始打字像MSFT，我们不再只股票符号，我们现在得到实际的公司。但是，当我点击这些公司，我们可以看到，我们实际上是在填充的文本框的公司名称但与任何存储这些数据的属性的内部。所以，如果我实际检查通过右键单击这些元素之一并单击“检查元素”，我们其实可以看到这看起来像。记住，这是东西，我们创建for循环内的当我们在建立该字符串的HTML。在这里我们可以看到，这个数据符号的值MSFT，这是伟大的。这是我们期待的。这是符号，这就是我们得到的价值，我们需要使用里面的这个文本框。这就够了，因为这是一种无聊报价表。让我们只是做一些快速增强我们的产品组合。如果你已经使用了一段时间，你CS50金融开始买入和卖出大量的股票，此表最终是会得到相当大的，你想要的股票行情自动收录器，当然。一旦表是非常，非常大，它可能是有用的用户尝试搜索了它。如果我开始在搜索框中输入一些像迪斯尼内部和寻找我的米老鼠股票的，我们可以看到，现在过滤表根据我刚才输入。这个功能看起来超级复杂，但它是真的，真的很容易使用jQuery和JavaScript。这portfolio.php文件包含一个JavaScript称为portfolio.js的文件的。让我们来看看在那。因此，HTML，JS，组合。这里就是我们正在做的搜索在桌子上。我需要做的第一件事情是事件处理程序附加到该文本框因为我们知道，我们希望我们的过滤功能，以火每次用户按下的东西，因为我们没有时间搜索按钮。我们需要做的第一件事情是找出用户搜索什么，就像我们以前那样。此关键字是指用户交互的当前元素。由于用户交互的搜索框， $这代表搜索框，，所以this.val为我们提供了用户输入的搜索框里面有什么。所以，现在我们想要做的是，我们要遍历所有的行我们的表内。要选择在我们的表中的所有行，我给了该表的表组合的ID，和每行代表一个TR元素，所以这个选择是要返回给我一个大数组我的表中的所有行。现在，我想遍历该数组。我可以一个for循环，但是jQuery实际上为我们提供了很好的功能称为“每一个”。每个做的每一个参数，该参数是一个函数。它要做的是要申请的功能，这个列表内的每一个元素。这个函数接受一个参数的E，当此功能被执行时，此e是将被替换的第一行，然后是第二行，然后在第三行。通过这种方式，这是同样的事情，一个for循环然后盘算根据当前元素的索引您的内部循环。在每次迭代中，对每个表中的这些元素中，我要检查的文本元素 - 该行的单元格内的文本 - 符合我在寻找什么。大长串的命令是我能做到这一点。首先，现在指的是 - 因为它里面有一个新的功能 - 这是现在的表中的行。我想利用当前的表中的行，我想要得到它的所有子。请记住，DOM是一个层次结构树，这意味着，元素有一个儿童的数目。儿童函数将要返回到我回来的所有的元素的数组的孩子，在这种情况下，表中的行。这仅仅是简单的细胞内的行。我只是想在第一个单元格进行搜索。这第一个功能，我说给该数组的第一个元素。然后在文本的功能说我到底是什么，细胞内的因为我想，要搜寻该文本。最后，让我们将其转换为小写，所以，我们可以做的文本不区分大小写查询。最后，我们希望看到表内，如果该字符串包含字符串，我们正在寻找。 indexOf函数在JavaScript中做到了这一点。它告诉我们这个字符串是否包含另一个字符串。如果单元格包含的是真的，我在寻找什么，然后我想，以确保将其显示出来。 show方法会说，“显示的元素。” 如果是这样的话，那么，这意味着什么，我寻找不包含该行内的，所以我要隐藏的用户。实现这一很好的过滤效果，我们不再看到整个表。如果你感兴趣的以及如何使这个股票，我们将在网上发布的源。但是，它真的很简单。 jQuery有可怕的这些动画的和操纵CSS属性的方法。所以，这是对我来说。那么，摆在我们面前呢？你会看到在几天内，最终的项目建议书，是因为。最终的项目建议将问你几个问题，但其中将有三个里程碑 - 一个一个“好”的里程碑，一个更好的里程碑，一个最好的。真正的想法是帮助你们设置您的期望所以，最低限度，你会很高兴与您的最终项目的输出这将是“好”到目前为止，你所关心的。但后来的利益，让你达到只需要一点点的东西更好的最好的东西，我们也将推动你走向，以及排序。 CS50哈克一个马拉松，同时，在几个星期。通常情况下，我们这样做彩票基础的基础，因为兴趣，但我们会采取几百我们从哈佛广场的穿梭巴士肯德尔广场，微软有一个美丽的设施，形象地称为“书呆子” - 新英格兰研究和发展中心。晚上8点左右，我们将在那里我们将有一些食物。凌晨1点左右，我们将有更多的食物。早上5点左右，如果你还醒着，我们将前往IHOP或带你回到校园。目标是深入到最后的项目旁边的同学和工作人员。几天后是的CS50公平，这是真正的意思是你们的机会来展示你的工作本学期和取得的成就而擦肩的相互感，每个人都做了。随着中说，非常感谢到汤米和约瑟夫，我们星期一见。 [掌声]