ROGER ZURAWICKI：大家好。 我能得到你的注意？ 谢谢，伙计们。 今天，我想谈谈流星。 这是一个JavaScript框架。 我们将经历怎样可以 做出很酷的web应用程序。 在我们进入的JavaScript，我只是 想告诉你们，这将 可以 - 你就会有一个后 拼凑这个学期。 它应该是关于JavaScript。 我认为[听不清]首先要 我们之前覆盖网络的HTML的PHP​​的东西 移动到JavaScript。 而在CS50，JavaScript被认为是 像客户端代码。 所以它只有在被执行 Web浏览器。 但由于最新进展 技术，我们现在已经成功地运行 JavaScript作为服务器。 因此，这已经创造了一个非常酷 框架，因为现在你可以写 合法相同的代码 在客户端和服务器。 而当你在定义函数的 服务器，客户端可以调用这些 相同的功能。 它使人们更方便。 而在此之前，如果你正在使用PHP的 服务器，JavaScript的前面 最后，你必须写一个PHP函数 然后的一个JavaScript版本 同样的功能做 同样的工作。 在我们开始之前，我想 显示您的演示是什么 流星能为你做。 我会告诉你的演示，这是什么 你就可以创建一个由 本次研讨会的结束。 我们只是去这里。 这是一个排行榜的应用程序。 它实际上是基于出来的例子 那流星给你。 流星是非常好的，因为当你 安装它作为一个包，你可以 基本上玩弄 这四个演示。 和排行榜是 首先这些演示的。 研讨会结束后，我鼓励大家 只是探索其他演示 因为我觉得他们真的很酷， 他们告诉你流星的力量。 那么这是什么，这是 托管在排行榜。 这仅仅是坦率名称的列表。 您可以选择的人。 他们变黄。 然后你可以给 他们五点。 而且你会发现，名单是 排序的，因为我给自己更多 多点，我现在是在顶部。 因此，这是我们的起点。 ，你会是怎样能够带走 从本次研讨会是几个比较 我已经添加到功能 该排行榜。 我们将涵盖如何，以及 增加五个点的球员，我们可以 删除播放器，我们就可以添加新的球员， 我们可以选择我们要如何 对它们进行排序。 而这些都是很容易的API调用 该流星为您提供。 你也有此功能 随机化分数。 那么什么是真正酷的这 是你们其实可以 所有去到现场。 我把它放在更大的文字在这里。 一个激进的铅erboard.meteor.com。 而当你们去到现场，你 应该能够编辑站点，并 所有的编辑将是可见的 到其他人。 所以，你可以 - 是你们所有 能够连接到该网站？ 所以，玩它。 去开始删除一些名字。 看看会发生什么。 所以你看，每个人都可以玩。 这只是默认的安全 模式流星。 你看，每个人都可以 改变对方的数据。 不要担心。 流星确实有保障。 这是一个很容易地实现 功能，在这里你可以设置用户 和登录。 但现在，任何人谁访问 网站可以给自己尽可能多的 点，因为他们想要的。 所以我总是这样，因为这 是一个有趣的方式开始。 然后我们就聊 有关详细信息，如何 流星使这成为可能。 所以，我要说的是，什么是流星， 然后我们只需要覆盖 两个先决条件是CS50 还没有足够覆盖。 但到了学期末，你应该 舒适与HTML和 JavaScript才能真正让你的手 肮脏的工作与流星。 我认为这只是一个伟大的方式 更不舒服的学生做 最后的项目，因为他们真的可以 停留在一种语言，并且他们得到 看到改变自己 马上工作。 这张幻灯片只是显示一些 主要技术，流星的JS 给你。 流星是不是一种新技术 自身。 这真是一个聚集 所有这些不同的东西 我们在互联网上。 以及HTML，CSS，JavaScript中，我们 有一些技术，如Node.js的， 这就是允许你运行 JavaScript的后端上你 服务器，以及一些JavaScript 库，如jQuery，下划线。 所有这些都将是熟悉的 您在学期结束。 而且我们还可以得到使用一个名为数据库 MongoDB的，这是一个非常 现在流行的数据库 这些新创公司。 你可以把它看作像MySQL，但是 它工作得很好用JavaScript。 并有一些其他的技术在这里 还有更多我没有列出 所有的界面真的 很好地与流星。 我必须把这个幻灯片，因为 有时我得到混淆这一点。 流星是唯一的JavaScript。 这不是PHP的。 这不是Ruby on Rails的。 所以，如果你写的代码，如果你想 写一个流星的项目，你真的 不能使用Ruby代码。 你真的不使用PHP。 虽然我们会看到，在不同 代码和语法可能不那么 不同，我想强调你， 流星，一切你的代码是 只有在JavaScript中。 而且你展示的一切 用户将HTML的CSS。 但你实际上没有使用任何 其它语言的其他 研讨会可能涵盖。 什么流星也就是一个Web服务器。 所以，即使你没有任何 JavaScript的，只是想和你服务 CSS和HTML文件，流星 能为你做的。 而这里的再次向链路 我得到了你们的演示 开始播放。 但是，让我们继续为HTML。 有多少人在这里有 不知道HTML是什么？ 好伟大。 那是完全没问题。 你真的不需要很了解 这是因为我们将在本 用法很简单。 这就是简单 HTML页面的样子。 这可以是像你问好，世界 HTML，而我们开始用C与 你好，世界。 我不希望你要强调的 HTML是什么，有什么头部的细节，什么 身体，什么标题做什么。 我只是想强调的结构， 你怎么有吊牌。 这就是尖括号。 而这也正是你必须 您的描述符。 所以你可能有HTML文档。 然后你就会关闭该HTML文件 用反斜杠同样的事情。 和你有不同的标签。 并注意他们都匹配。 你必须像一个body标签 再按一次关闭body标签。 和body标签里面，那将是 您的网页的内容。 所以这个网页只会显示 在一个白色背景和黑色文字 你好，世界。 这是否有道理？ 确定。 现在，我要赶紧 涵盖的JavaScript。 在先前的TF的话， “JavaScript是最好的编程 目前语言存在。 其他人会尝试 告诉你，否则。 他们错了。“JavaScript是相当 好的，我会告诉你为什么。 因此，这是一个经典的例子，我们开始 在C.我们有你好，世界。 而且你注意到即使你缩 它，你必须有至少两个 行代码在这里。 我有几行代码。 这可以非常简单地完成。 一号线在JavaScript中使用console.log的， 然后你的字符串， 你好，世界。 现在，即使我们移动到一个新的 语言JavaScript的，几乎所有的 你已经通过编码学到的技能 在C是直接移植。 这样的字符串，字符串的想法 双引号，这是一样的。 分号，这是一样的。 一个整洁的功能有关JavaScript 其实就是你 不需要分号。 它可以猜测，你应该 加上分号。 话虽如此，你应该总是尝试 把你的分号那里。 它被认为好作风。 而且，也没有主函数。 你刚开始在该文件的顶部 并通过线读的东西线。 那么这是如何才能使 那你好，世界程序。 然后请注意，你必须 使招呼，然后运行打招呼。 与JavaScript中，它被认为 一种解释型语言。 你需要知道的是， 没有制定。 有没有编译。 你只需运行节点。 并记住节点是程序 将控制台上运行的JavaScript， 在黑色的盒子，而不是网站。 所以，你只要给它的文件，它的 要打印你好，世界。 我实际上做的一个小演示 对于你们就在这里。 因此，让我们去给我 Node.js的终端。 确定。 让我们继续在这里。 所以我要开始的节点。 我会在给你展示的家伙 几秒钟之内如何获取 安装后，如果你不这样做。 让我做一个大一点。 确定。 我希望你们能看到。 这样我就可以写代码像我一样 之前的console.log。 嗨，罗杰。 并注意我没有做 分号，但后来我得到这个奇怪的 不确定的事情。 好吧，事实上，从来不介意 未定义的事情。 事情我希望你能注意到的是你 这里不需要的主要功能 开始运行的代码。 而且也没有反斜杠结束。 这里也有一些小的功能， JavaScript可以为你做什么。 观众：[听不清]。 ROGER ZURAWICKI：哦，是的。 我很抱歉这一点。 那箭只是意味着节点 准备好另一个命令。 所以，你可以把它做简单的 数学，就像1加1。 就如同在C中，这些数学 符号是一样的。 我可以做一个数字的console.log。 然后将其打印两。 JavaScript是不错在这个意义上，因为 即使两个是int， 就像C一样，如果你没有使用printf的 二，你会得到一个错误。 但JavaScript知道，哦，你是 打印的东西。 我将需要一个字符串。 因此，让我转换了两个 成一个字符串为您服务。 你也可以做一些怪异的东西 似喜，然后加上两个。 这仅仅是另一个例子如何将两个 可也被转换在那里。 所以，按照这种方式，让我们 刚好盖住多一点的JavaScript。 因此，在C中，我们有类型。 每当我们创建了一个新的变量，我们 不得不说这是它的字符*或 串的情况下CS50。 或者，如果我们有一个十进制数， 我们不得不说浮动。 如果我们需要一个布尔值， 我们不得不说湾 然后一旦我们拥有的东西， 被B，它不得不留一个bool。 我们不能神奇地将其更改为 一个int，除非我们在写 括号，B的诠释。 在JavaScript中，没有类型的。 你只是把它看作变种。 和VAR是你如何创建一个新的类型。 所以它可以有变种s是一个字符串， 变种n是一个浮点数， 和变种b之真。 还有一件事，你不能用C做的是 我现在可以说，这条线，B后 等于一个整数。 并且工作得很好。 而在C中，它会说喜欢 您的整数是不是一个bool。 我不能为你做的。 或[听不清]将抛出一个错误。 我可以很快返回到节点， 显示一些该功能。 这样我就可以有一个变种一个。 把它叫做“苹果”。所以，现在当我打印， 我得到我的字符串，“苹果”。可是，我做不到 现在也说等于3。 并注意有没有错误。 和现在等于3。 有任何疑问，这么远吗？ 是。 观众：请等待，所以CONSOLE.LOG 基本上是printf的，对不对？ ROGER ZURAWICKI：CONSOLE.LOG 是你的printf。 观众：对。 那么怎么来的，如果你只需要输入8 或[听不清]，这是什么 [听不清]？ ROGER ZURAWICKI：对。 因此它是 - 在绿色的东西打印出来 在控制台上。 而我们将看到下一个是 当我们移动到Web 页，我们不会做 - JavaScript的将有一个HTML 模板，我将在 研讨会的流星的一部分。 而这也正是你可以说，给我 a的值，它会放一个在 您的网站。 因为每一个Web浏览器实际 有一个小控制台。 如果你看的很仔细，你 会得到一些信息，如您的 printf的与那里出现 每个网页加载。 观众：你是怎么得到 到shell屏幕？ ROGER ZURAWICKI：所以这是一个命令 所谓的节点，它带有流星。 所以我就辞职离开那里。 节点是程序 运行的JavaScript。 如果你去meteor.com，你 可以安装流星，和 流星自带的节点。 因为流星只是一个集合 所有这些软件包。 当我们到达我们的例子中，我会 通过安装每个人走路 流星，然后你可以玩 与节点自己。 好，太好了。 关于工作，所以另一大特点 用JavaScript的循环是一样的。 几乎完全一样的。 for循环，while循环，做 while循环，如果其他人。 这一切都同用大括号。 这是同样的语法。 在fo​​r循环中，小的情况下， 细节，你一定要注意 而不是int来是i等于0， 我们不得不说变种i等于0。 但是，这是因为变量 类型，我们之前谈过。 请注意，printf的变 日志，一个console.log的。 而我们并不需要做的百分比 p反斜杠n和再通的我。 你可以说我。 它会打印出数字 从零到4。 如果你们想试试这个，因为 你提出了一个很好的点。 如果你想在运行此代码你 自己的浏览器，我会建议 大家打开谷歌浏览器。 谷歌Chrome或任何Web浏览器真的， 但我喜欢谷歌Chrome浏览器 因为它很规范。 你可以去，我相信，如果你的权利 点击任何一个网站，只是在 白色的空间，你会看到一个选项 所谓的检查元素。 它通常是最后一个。 而当你点击它，你应该得到 事情到底出现在这里。 让我放大这里。 我们有几个选项卡在这里。 您所关心的一个是控制台。 这是一个JavaScript控制台 您现在可以一起工作。 大。 因此，我可以键入同样的东西 我之前键入节点。 一加一等于二。 风险价值等于“苹果”。 然后我会打印一个， 还有一个就是“苹果”。 因此，在任何Web浏览器，火狐，Chrome， Safari浏览器，你用什么，如 只要你有机会到一个JavaScript 控制台中，相同种 我是在节点上运行你的代码 可以在自己的主机上运行。 观众：[听不清]？ ROGER ZURAWICKI：如何 进入控制台？ 你必须用鼠标右键单击空白处 在页面上，然后你去 检查元素。 所以实际上，我想你们 只是确保你能 在Chrome检查元素。 看看当你在某些类型的 码到控制台 它运行正常。 随意问任何问题，如果 一些目前尚不清楚在这里。 观众：[听不清]。 ROGER ZURAWICKI：任何类型的，对吧。 这里只有一种类型的所有 变量在JavaScript中。 而当你要申报 一个变量，你说的变种。 观众：[听不清]。 ROGER ZURAWICKI：是啊。 确实如此，但在JavaScript中，这是非常 聪明的分配内存。 没有任何的malloc。 天下没有免费的。 所以，你不必担心。 这是另一个不错的功能， JavaScript提供了你。 所以我想继续前进。 这样做可以吗？ 确定。 大。 观众：我只是遇到了麻烦 找到[？检查元素。 ？] ROGER ZURAWICKI：那么Safari浏览器的外观 有点不同，但你 有浏览器或Firefox？ 这些都是容易 那些一起工作。 并为您的项目，我建议 用一个浏览器，因为坚持 你会得到一个很大的错误，几乎 因为每一个浏览器治疗 JavaScript的HTML有所不同。 所以我觉得你的生活将有很多 更容易，如果你坚持，因为Chrome浏览器 它适用于所有的机器。 这是一个非常流行的浏览器。 好不好？ 所以接下来的话题，我们应该 覆盖在JavaScript - 我很抱歉的格式在这里。 我有伸展的幻灯片，以配合 宽屏投影机。 但我现在想谈谈 你是怎么做到的功能。 在C语言中，我们要声明 每一个功能。 如int补充，它需要一个int成 X，和一个int y，然后我们将它们添加 并返回它。 在JavaScript中，函数实际上是 另一个变量的类型。 所以我们只说无功添加和 它等于一个函数。 一个函数，它接受一个X和一个Y。 而这是什么功能呢？ 它返回x加y在完全相同的 语法在C，并且注意到，在 JavaScript中，你将不会被告知什么 函数返回，因为自 变量没有类型，无论如何，它 它不是真正的生产力，我猜， 要指定所有的 类型在你的函数。 然后当你调用一个函数，它的 完全相同的语法C.你 只是通过你的两个参数。 我想试试这在我的节点。 我可以改变幻灯片？ 观众：[听不清]。 我们将得到的幻灯片的副本？ ROGER ZURAWICKI：是的。 因此，让我们回去节点。 确定。 所以我会说无功等于附加功能。 以一个x，采取年。 然后它知道该语句的 未完成。 所以在节点或在您的控制台， 你会发现点点点。 所以，你可以继续键入您的代码。 现在我会说回报X加Y。 然后关闭括号。 而此刻我关闭括号，它 看到该语句执行完毕。 现在我可以说增加一个和两个。 我会得到三个了。 需要注意的是，如果我只是没有添加，它 告诉我，这是一个函数。 还有一件事只是要注意 是，如果你给它的错号 参数，它将使。 它会运行，但你可能会得到 一些非常奇怪的结果。 有点像一个垃圾值， 你可以把它想象。 所以，请尽管试试 这在您的浏览器。 好了，在时间的关系，我会 现在就移动到下一个特征在 JavaScript的。 因此，我们已经谈过的功能。 我们已经谈到循环， if语句了。 语法是相同的 C和变量。 现在我想谈谈阵列。 对不起，该幻灯片 有一点切断。 但实际上，在第一部分中， 你需要的一切将正常工作。 因此，我们有另一种类型的 变量称为数组。 我们用方括号 来表示它们。 因此，在第一个例子中， 无功编曲，空数组。 这是一个空列表，所以一个数组 不含元素。 你也可以有一个数组 用三根弦。 在C语言中，在你的数组的每一个元素 必须是相同的类型。 但是因为在JavaScript中只存在 一种类型，数组实际上可以 有不同类型的值。 喜欢这里，我们有一个数组 一个float，一个bool，和一个int。 你会得到一个数组的长度的方式， 你实际上并不需要使用的大小 或任何东西。 你刚才说的阵列和 然后点长度。 而这点长度，你能想到的 一种是喜欢一个结构，每一个如何 阵列有一个字段，一个额外的可变 它里面所谓的长度，这 保持跟踪你的数组有多长。 所以我只是很快要进入 节点和展示你们同样的事情。 这样我就可以有一个数组。 它可以是空列表。 它会打印我 回一个空的列表。 大。 我现在可以说，该阵列 有1个和2.3，和真实的。 因此所有不同的类型。 而且你注意到它工作得很好。 我回来支持数组 所有我给它的值。 如果我想获得的第一个元素 数组的语法实际上是 中的相同C.你 可以说数组为零。 你会得到的。 我可以为数组说的一样 二，我也得到真实的。 如果我做的事情阵列之外， JavaScript是一种安全的语言 因为我不会得到一个段错误。 我得到了一个未定义。 而这种不确定的，可以种 的去想它为空。 但它可以当你是真的很烦人 代码，因为你必须检查 几乎所有你做的，你 同是不确定的工作。 我们会看到一些例子 这个时候，我们在流星工作。 虽然阵四是不确定的， 我可以给它分配一个值。 所以我就直说了等于一。 然后如果我去阵，我 有额外的价值在那里。 并注意数组三种，其中还 是不确定的，保持不确定。 所以，我现在有一个数组 一个孔在中间。 但是，如果我打印数组4， 我会得到一个。 如果我做了数组3，我得到了一个未定义。 因此，不错的功能，JavaScript的 允许你做的是列出了可能 改变大小。 数组，数组作为列表， 他们改变大小。 并且可以指定任何位置 在他们里面的。 和所有的差距将被填充 这些未定义的值。 因此，我们已经谈过阵列。 现在，我想弥补过去的事情 JavaScript中，这是非常重要的 要理解代码 我要告诉你， 将是对象。 和对象是一个术语 - 基本上，他们是存在于 许多编程语言。 并且每种编程语言喜欢 认为他们有点不同。 但我想对于流星，好 比喻是C结构。 在C语言中，如果我们想找到的结构 学生，我们就必须指定所有 它里面的东西。 因此，它必须有一个名称。 它必须有一年的时间。 它必须有一个性别。 但是，我们也必须给它的 类型的所有这些事情。 而现在，我们有这个模具的 结构称为学生，我们可以有一个 新的结构，然后我们可以手动 说什么每个字段都是。 而这也正是我们使用点名称， 点一年，点性别。 然后，我们只是在最后一行 这里的代码，我只是打印出 该结构学生姓名。 在JavaScript的世界里， 没有这样的东西的struct的学生。 你不产生预设结构。 实际上，你只是在这些括号， 你说的一切是什么。 而它的这种怪异的符号与 冒号加逗号，但你 要去适应它很快就好了。 它实际上是一个非常简单的， 只是灵活的方式 操纵对象。 您会注意到，如果我想现在得到 从名字，我只是做s.name。 有没有关于这方面的问题吗？ 这通常是一个非常混乱 主题当我们向人们介绍 JavaScript的。 我会做在节点的一些这方面的例子。 是吗？ 观众：[听不清]。 ROGER ZURAWICKI：那你 有一个例子，多个 该类型的变量。 观众：[听不清]。 观众：[听不清]。 ROGER ZURAWICKI：确定。 所以我猜你会去的方式是 你会把对象的数组， 现在你将有一个 数组对象。 这是否回答你的问题？ 观众：[听不清]。 ROGER ZURAWICKI：是的。 S是一个对象。 因此，我们可以进入节点和公正 玩一点点。 观众：[听不清]？ ROGER ZURAWICKI：哦，好吧。 所以，如果你问什么类， 类都处理得非常不同， 他们有一个非常奇怪的方案 所谓的原型，你不 需要了解。 没有固定的方法来做到这一点。 所以，如果你想生成多个，你 那种只会有一个函数 什么的。 你生成你自己的功能。 而且你会返回一个对象。 这将是最简单的 办法做到这一点。 这是否有道理？ 确定。 大。 所以一旦我们有一个了解 JavaScript对象，它们是 - 哦，是的。 观众：[听不清] 例如，什么是之间的区别 “罗杰”用双引号与 [听不清]用单引号。 ROGER ZURAWICKI：确定。 因此，这是在C中，我们有一个 引号表示字符，双 引号表示字符串。 JavaScript实际上抛出这个了 因为你可以有字符串 单引号或双引号，并有 没有这样的东西作为一个单一的字符。 但如果你只是复制相同 C代码，将JavaScript的 对待它就好了。 这就是为什么我把它作为 - 这就是为什么我可以从字面上端口 在这个意义上的代码。 我想告诉你一个例​​子 一个更复杂的对象。 所以，你可以注意到一个对象 可以有一个字符串作为值。 它可以有值的另一个列表。 它可以有一个列表 对象作为值。 真的没有限制的。 所以在这里，它只是一个很好的示范 你如何能得到很多 不同类型回事 都在同一个对象。 这是否有道理？ 现在，你也可以拥有 对象数组。 这里是一种类似于您 问：如果你可以有对象 相同的类型。 但问题是，没有固定的 格式为JavaScript对象。 所以，你必须自己指定。 你必须确保 他们是一致的。 所以在这里，当我创建一个对象，我有 确保每个人都有一个 命名，并且每一个都有一所房子。 然后，我有其中的一个数组， 并且，可以是我的山寨。 然后在这里你可以种 看看for循环怎么回事。 for循环仅仅是一个非常常见的 的方法来遍历一个数组 在JavaScript中。 请注意，此模式是非常相似的 到C等价，在那里你 有INT I等于零。我 小于长度。 然后我加再加。 这几乎相同的代码， 除了一些细节。 因此，没有大家理解 对象是什么？ 试想一下一个C结构。 而且你访问的字段的方式 只是用点。 只要你还记得如何 使用点，你会没事的。 好了，现在每个人都可以 阅读链接？ 这是链接到项目中。 有困难的人 看到链接？ 好吧，让我们来改变它呢。 这不是 - 是啊，这可能是 最容易做到这一点的方式。 大。 所以，如果你去这个网站，应该有 有一些指示，我将 去了我们如何可以安装流星 并得到我们的示例项目的运行。 我希望确保每个人都有 之前，我谨动议链接断开。 我可以继续前进？ 好，太好了。 所以在这里，我在网站上。 你会注意到在自述文件， 我们有关于如何一些指令 得到日成立。 你需要无论是在CS50 设备或只是在Mac上。 Windows将无法正常工作。 但基本上任何不是 窗户应与这些 说明就好了。 但我可以使它有点 较大的为好。 所以，你会遇到第一 对命令。 这些家伙只会安装流星。 我可以进入我的终端。 如果我现在运行同样的事情， 我已经安装了它。 所以这是一个有点短。 这可能需要多一点的时间 为你们。 但我想首先要确保 我们有流星的运行。 流星已经安装完毕后，你应该 能够得到节点在控制台中。 观众：他们问 输入密码。 ROGER ZURAWICKI：这将是你的 用户密码，如果你是一个Mac上。 它只是需要权限 修改一些系统文件。 所以现在的问题是，如果它要求你 密码，它只是要求你 为您的用户名密码时 您登录到您的Mac。 这就是让你可以 改变系统文件。 当你准备好了，你可以继续前进 到下一步骤，这将复制 示例代码中，我已经从网站上。 你会得到一个新的目录在你的 主目录中名为排行榜，并 我们可以从那里开始工作。 所以我只是复制和粘贴这些 命令到我的终端。 对我来说，我已经克隆了。 所以，我可以现在移动 进入排行榜。 我应该有几个 在那里的文件。 有问题吗？ 观众：[听不清]不工作。 ROGER ZURAWICKI：哦，你可能 需要git的安装也是如此。 观众：[听不清]。 ROGER ZURAWICKI：对不起？ 观众：[听不清]。 ROGER ZURAWICKI：哦，好吧。 确定。 这是因为您可能需要将 登录到GitHub上得到这个链接。 如果你们可以看到，最简单的 办法做到这一点我会那么说的是 下载zip。 而这也只是下载 所有的文件。 然后，一旦你把它放在你的 下载或你的home目录 - 我建议把它在你的 主目录，以便大家都可以 运行相同的指令。 只要我们有文件，我们会 能够开始与他们合作。 让我知道如果人们有 无法下载文件。 观众：通过主目录， 你的意思是 - ROGER ZURAWICKI：所以主目录会 是约翰·哈佛，如果你是在 在CS50设备。 去你的主目录， 只需键入C。 观众：[听不清] CS50家电[听不清]。 ROGER ZURAWICKI：是的。 你要运行的命令 在你的终端。 观众：[听不清]。 我得到了一个错误，说没有 这样的文件或目录。 ROGER ZURAWICKI：我们可以采取快速 打破，只是确保 每个人都有安装了流星，我会 只是去尽力帮助人们摆脱。 请尽量互相帮助，如果 你遇到了问题。 对不起，是的。 您无论是在家电？ 观众：是啊。 我有RISA ROGER ZURAWICKI：确定。 如果你回去的网站， 去向上滚动到顶部。 这里面的这个HTTPS。 观众：复制此？ ROGER ZURAWICKI：是啊。 然后你要 键入git clone命令。 所以，如果你按下Control A - 观众：在这里？ 并做[听不清]？ ROGER ZURAWICKI：G-I-T。 观众：[听不清]。 ROGER ZURAWICKI：Git和再克隆。 所以这是非常相似的命令，你 有以上，但是URL改变。 所以之前，它是这样，现在是这样。 让我更新 - 是的。 观众：[听不清]。 ROGER ZURAWICKI：这是网上下载。 观众：[听不清]。 ROGER ZURAWICKI：哦，原来如此 没有正确复制。 我会解决这个问题。 有与尝试错误 下载的文件。 让我更新命令你们 这样我就可以确保它会奏效。 我很抱歉这一点。 它应该是相同的 Mac或CS50设备。 观众：[听不清]。 ROGER ZURAWICKI：我已经更新了 命令第二，如果 你刷新页面。 而与此，网址，你应该 能下载的文件。 观众：所以，如果我们仍 下载[听不清]。 ROGER ZURAWICKI：如果你是 还是下载流星？ 观众：[听不清]。 ROGER ZURAWICKI：是的，如果你想 制定你的Mac上。 但你需要的Xcode开发 安装工具。 我对CS50测试这些命令 家电，所以我可以保证 它会工作。 是。让我去帮助你。 观众：[听不清]。 我给我的密码。 这是苹果。 然后我做的[听不清]。 ROGER ZURAWICKI：确定。 我会尝试运行的所有命令 仅在CS50家电终端。 观众：[听不清]。 ROGER ZURAWICKI：我会得到它的工作 首先在终端上，在 CS50器具，然后 在Mac终端。 观众：所以，如果你这样做的CS50 家电那样，[听不清]。 ROGER ZURAWICKI：我想移动 上，但如果人们仍然有 麻烦设立流星，凯文更 乐意帮助你们出来， 凯文在灰色的衬衫。 我们应该拥有的是我们​​要 执行最后一个命令，排名第三，在 我们的终端。 当我们这样做，我们将运行流星。 你应该 - 哦，我已经有流星的运行。 所以它不会让 - 让我 只要闭上我的其他流星。 当我运行流星，你 现在应该看到 - 你应该看到当前目录 ，它的服务。 而现在它会说服务器 在http://localhost的运行。 这就是你想放的网址 在您的Web浏览器。 并在该网址，你应该能够 访问一个可爱的小排行榜。 所以请注意，这是在本地主机上， 这意味着，如果你做任何 变化，你不会 看到对方的变化。 而在网站上我向您展示 在开始的时候，我们可以得到 每个人的变化，因为每个人都 被访问相同的网站。 所以让我去[？字？] 3000元。 所以，你应该能够公正确认 该功能的工作原理。 您可以选择不同的人，和 你可以给他们的不同点。 所以我给别人点。 您还可以看到， 他们上升的排名。 现在，在时间的关系，有 有三个特点，我已经 实施。 而我们要实现删除 用户作为我们的第一个特征。 但在我们继续之前，有 有什么问题吗？ 你有你的手。 是吗？ 观众：[听不清]。 ROGER ZURAWICKI：您可以检查 该流星安装？ 观众：[听不清]。 ROGER ZURAWICKI：本地主机3,000？ 和你在CS50家电？ 我可以做的 - 你不必成为一个Mac上。 这将工作中的应用。 观众：[听不清]。 罗杰ZURAWICKI：在正常 网页浏览器，是啊。 观众：[听不清]。 ROGER ZURAWICKI：是流星的运行？ 这样就OK了，这里有一个区别。 如果你运行它在 家电，你必须做的 在设备中本地主机。 如果你运行它在你的Mac上， 像我的话，我可以做 我的Mac谷歌Chrome浏览器。 但是，如果你使用的是CS50家电， 你所要做的一切 在家电。 所以，你必须使用谷歌 镀铬的设备。 观众：[听不清]。 ROGER ZURAWICKI：这是 仍然没有工作？ 观众：[听不清]。 ROGER ZURAWICKI：所以只是重复， 你怎么现在访问该网站。 你有一个网址就在这里 本地主机3000元。 如果你在CS50家电， 你必须打开CS50 设备的谷歌浏览器。 而在内部，谷歌Chrome浏览器 家电，您可以输入该网址， 你应该看到一个排行榜。 所以我打算干脆把它关闭 这里边一点点。 现在我要打开我的 文本编辑器在这里。 因此，让我只需要确保 该代码是为了。 确定。 大。 喜欢我到现在走过 代码中的位。 且第一个文件，我想开始 与IS leaderboard.html。 你就可以得到这个代码后， 研讨会上，所以我只是想展示 你在我的电脑上发生了什么事情。 所以，我希望大家能看到这一点。 因此，在该文件的最开始，我们 有我们的头和称号，这 类似于我们所看到的 在每一个HTML文档。 然后我们将有 body标签在这里。 我所选择的是主 体，基本上什么 会得到显示。 但也有一些新的非HTML 的东西，那就是在 双尖括号。 而这些模板标签。 所以，你会在这里看到这个支架 支架新排行榜。 这是一种 - 想起来了 作为调用函数的HTML。 这是HTML的一个特殊版本。 它是流星使用的版本，这 就是为什么你可以显示不同的 的东西，比如排行榜 名称和按钮。 但排行榜告诉你去 模板名称为排行榜。 这样的模板就不会被显示 本身，但它是一个函数，所以它 将被调用。 ，你会替换在所有这一切 在这里进入排行榜的代码。 排行榜的有趣的部分 这里只是这个表。 如果你只是阅读，阅读代码 出声来，它应该是直观 因为领先，我们都 这里是一个表。 这个ID类的东西，你不 需要担心。 只知道有一个表头。 这就是这个THEAD。 并找到一个名字和一个分数。 所有这些标签，像thtable，THEAD， 你只是学习，因为你走。 你记住它并不重要 这些，因为你可以访问任何 在线参考。 或在学期结束时，这些 只是很熟悉你。 表的标头，之后 我想提请你的一部分 要注意的是这个H标记。 因为它是在双括号， 这是一个模板。 因此，这意味着对于每个运动员， 无论是球员，我们必须 显示。 我们去的播放器模板。 如果我们向下滚动多一点 - 我希望每个人都可以看得出来。 我们有球员的模板。 而这个模板基本上定义了一个 表格单元格，在那里你把名称 这里的分数。 现在缩小，我们可以看到 这个代码块 - ，这是我们的球员那里 - 定义了这些小区中的一个。 我点击每个东西 变成黄色。 一个简单的方法，我可以现在改变它。 确保流星仍在运行。 流星应该是一个服务器进程， 所以你只要把它 当你开发的运行。 比方说，我想改变 所有的名字或得分。 我会说我要去 在这里补充点。 所以，我在这里做的改变是， 而不仅仅是得分，我 添加比分空间中的点。 我要缩小，而我 要拯救我的文件。 之后我救我的文件，我需要 确保流星正在运行。 我们对此深感抱歉。 我想告诉你的编辑 实时做了。 所以我就改变一些文字。 点击一个玩家。 我把它全部大写。 它应该是，如果这是工作 正常，当我保存它，它 将更新。 呵呵，我觉得现在的问题是， 我不是在正确的目录中。 确定。 我很抱歉这一点。 所以在这里，你注意到什么 我的变化经历。 现在说我想恢复的变化。 我想回去我了。 我只是要它正常输入。 点击一个玩家。 那一刻我保存它时， 网站刷新我。 我看到我的变化 现场瞬间。 这是一个非常有用的功能 在调试，因为现在 余不必 - 当我们写C代码，我们不仅 要保存文件，但我们不得不 做它，然后再次运行它。 流星是非常好的，因为不像C， 此刻您保存HTML或 JavaScript文件，更改 马上显示出来。 一个问题是，在这些模板，如何 我得到这样的球员的价值 或选择一个名称？ 如果我放大到这里我的代码， 我认为这对每个球员。 所以模板都知道， 我有球员莫名其妙。 而且它知道有 选定的名字。 这哪里来的呢？ 这来自于JavaScript的。 如果你去leaderboard.js，这 文件，现在当我走在这里，我们有一个 几个命令定义。 这是特殊的流星语法。 请注意，您不需要 瓦尔或任何东西。 但这些都只是结构在结构 在结构或这些对象。 和所有我定义是模板 所谓的排行榜。 排行榜应该得到一个 所谓的球员的事情。 什么是玩家？ 这是什么这个表达式返回。 什么是选择的名字？ 这是一些更多的代码。 在代码中，我们会细节 涵盖了一下后。 但现在我要你明白 在这段代码中，我们正在采取 球员，而且我们给它一个值。 在这种情况下，它是一个函数 那被执行。 所以我们可以得到的价值回 当我们运行的功能。 这是一个记录。 这是否有道理？ 我可以改变它的排序方式。 在这里，有一个排序的对象。 以及这是说我要去排序 按分数降序第一和 然后命名升序。 如果我改变这一个，它是怎么回事 排序得分上升。 所以，零应放在最上面。 当我放大到我的网站，我们 现在看到的网站更新。 场上比分攀登。 下一个函数我只是想 覆盖是点击增量。 在对时间的关系，我不会 能够覆盖更多的流星 码，但也有很多的资源 可，我必 这里的研讨会后。 但我只是想掩盖 排行榜的事件。 这个语法你会学到 位在后面的讲座。 这是JavaScript。 我们只是说，当我们得到一个点击， 而且它的增量，这 散列只是意味着标识。 在增量ID标签，那么我们希望 更新 - 关键词我要你 看是更新和 选择和播放器。 所以无论玩家选择的， 我们更新它。 而我们做的是我们增加 其得分由五个。 并且将描述的功能 我们这里有。 本次研讨会结束后，我们将 能够看到一些更多的代码。 但要回到我的目标，我想 更改网站，我想在这里 添加一个删除按钮， 我可以删除播放器。 因此，要做到这一点，我需要 做两件事情。 我需要更新HTML，更新 看来，什么被显示给用户，并 然后有一些JavaScript代码，当 按钮被按下时，流星是怎么回事 做一些事情。 这将删除该玩家。 因此，有大量的代码块的 有基本上已经 已经为我做的。 如果我看这里，我已经有办法 为获得选中的球员。 这就是这个东西，如果你可以看到它。 所以，如果我只是 - 我将有另一个事件。 所以，我要复制我有什么。 因为这是一个列表， 我只是需要一个逗号。 所以，现在我要请单击删除。 而不是球员更新，然后， 我要做的玩家删除。 和所有玩家需要删除 是一个选择的球员。 所以这个功能是我们所需要的。 我需要添加一些 HTML这里虽然。 所以，如果我在这里向下滚动， 这是HTML视图。 我们这里有一个东西， 这是一个标签。 你不必担心。 有什么事情给你的是 这个ID增量。 这就是让我们说，当 我们点击增量，我们必须 给五分。 你会看到，这是一个按钮。 这是什么意思BTN。 并在按钮上的文字 是给五点。 所以，我什么都做的是我 要复制这条线。 我要去更改ID删除。 我要去改变 文字在这里删除。 所以一定要确保一切都得救了。 我要回到我的JavaScript 以确保我有 删除这里一字排开。 好。 所以，我要救这两个文件。 保存这两个文件后，我们 可以回到底部。 现在我们看到我们有 一个删除按钮。 和一个步骤。 你发现你可能会得到一个 错误，因为当我点击 删除，什么也没有发生。 一种方法来调试这个是去 回检查元素。 我故意这样做，这样你就可以 看你如何调试的东西。 在检查元素，我们有 我们所有的文本到这里。 我想回去到控制台。 当我去这里会发生什么 是我得到了某种错误。 它说，有没有方法删除。 所以，当我去了这个说的是 回到代码，我叫球员 删除这里。 删除其实不是 正确的命令。 所以要找出正确的命令 是，有流星的API。 我要指出你的文档 家伙只是在meteor.com。 所以我把它在这里。 这只是让你们知道 在哪里可以了解更多。 有一个链接到文档。 基本上，我可以只 你找到删除。 而你所看到的，删除 实际上删除。 这是命令，该命令 我需要调用。 所以，现在我们知道的是，我要去 要改变这种delete删除。 所以现在，当我回到我的排行榜 现场，我要去一下 删除了，现在我走了。 有没有更多的罗杰。 我可以继续下去，每删除 单名，直到我什么都没有留下。 所以这是一个小的预览 如何使用流星。 你会学到很多东西更多的JavaScript 和HTML必要使 它看起来更漂亮，而我们将在 本周的[？片？]对HTML设置 和JavaScript在未来 [？一块？]设置。 所以不要担心，如果不是全部 这玩意儿来容易给你。 这将是由时间 最终的项目。 感谢您的显示出来。 不久后我会更新的链接 研讨会上，您可以看到一些更 那我就已经实现的例子如何 以获得更先进的排行榜 我有在这个网站在这里 一个激进leaderboard.meteor。 谢谢。 [掌声]