>> 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。
谢谢。
>> [掌声]