Tip:
Highlight text to annotate it
X
>> 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循环,如果其他人。
这一切都同用大括号。
这是同样的语法。
在for循环中,小的情况下, 细节,你一定要注意
而不是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。
谢谢。
>> [掌声]