编程镓教・入门篇｜ 002 从画一个点开始

Paste_Image.png

学习目标

• 掌握环境、代码、注释和运行程序的概念
• 会通过注释和可回滚的修改来探索并理解代码的作用
• 会使用代码在指定的位置用指定的颜色画出一个点

学习用时：60分钟

上一节课是纯理论课，于是有的同学就开始着急了：

我们什么时候开始动手编程写代码，做课程介绍里说的那个小游戏啊？

Paste_Image.png

不要着急，在今天这节课里，我会带你在编程之路上迈出的第一步。

解决问题的思路

Paste_Image.png

怎样才能做出这个小游戏来呢？编程零基础的同学们肯定会觉得无从下手。不过大家要知道，在解决陌生领域里的问题时，完全没有头绪是再正常不过的事情了。接下来，我就要给你们传授一个在编程实践中最为重要的思路：

拆分：将一件复杂的任务拆分成许多简单的任务，然后分别完成。

事实上，这个思路可以用来解决任何领域问题。无论怎样庞大艰巨的工程和项目，我们总是可以通过各种维度进行不断地拆分，最后落实到非常轻松就能完成的具体工作。

这个小游戏的本质是动画和控制。图案可以使画面更吸引人和有趣，音乐可以使我们产生浸入感，但图案和音乐本身却并不是必须的。画面简陋一点，音乐和音效简单一点甚至没有，游戏还能玩；虽然体验差了一点，但它仍然是不折不扣的游戏。

所以，我们可以先做一个没有图案和声音的简陋版游戏，最后再把图案和音乐加进去：

Paste_Image.png

我们还可以继续拆分，把游戏的控制交互的功能去掉，把它变成一部不能控制的动画片。而动画是由连续播放的一张张图像构成的，那么我们就得先想办法画出一张图像来：

Paste_Image.png

这张图上有一个红色方块，一个黄色方块，还有一条黑色的线。同学们可以思考一下，如果我们想要在屏幕上画出这些东西，首先应该干什么？

• 如果我们想看完一本书，那么我们首先要翻开第一页；
• 如果我们想登上一座山，那么我们首先要迈出第一步；
• 如果我们想写一篇文章，那么我们首先要写下第一个字；
• ……

如果我们想在屏幕上画出一幅图案，那么我们首先要画出一个点。

一个点能干什么？

Paste_Image.png

学到这里，大家可能有点失望了：

这也太简单幼稚了吧，能不能从有点技术含量的东西开始学呢？

要知道“千里之行，始于足下”，如果我们连一步都不肯迈出，是不可能抵达终点的。更何况，这看起来很简单的一个点事实上并没有你想象得那么简单。

我们每个人都有手机，每天大家都会在手机上刷朋友圈，也可能会拿手机打打游戏，看个电影什么的。可是你有没有想过，为什么手机屏幕既能显示图片，也能播放电影，还能显示游戏动画呢？

随便找一张图片，放大放大再放大，我们总会看到下面的情景：

Paste_Image.png

有点像马塞克是吗？事实上，你所看到的所有图片和视频，都是由这样一个又一个的点组成的。这样的点我们称之为像素（Pixel），每个像素显示一种颜色，很多像素拼在一起，就能构成各种各样的图像。照片也好，电影也罢，都不过是记录了一大堆像素的颜色信息，然后按照顺序在屏幕上显示出来而已。

Paste_Image.png

如果我们拿着放大镜去看手机或者电脑的显示器，就会发现每个像素都是用红、绿、蓝这三种原色拼合显示出来的。如果三种原色的亮度都调到最暗，那么我们看到的就是一个黑点；如果都调到最高，那么我们看到的就是一个白点。

只要我们可以画出一个像素，我们就可以通过画更多的像素来展现出自己想要的任何图像，从火柴人到超级玛丽，再到你所崇拜偶像的高清无码大图……我们还可以通过不断地用新的像素覆盖旧的像素，来制作动画效果、播放电影……只要我们掌握了最基本的工作技能，并能以合理的方式组合，就能做出非常可观的成果。

正是因为像素足够的简单，它才能够做到如此复杂的事情。 我们所熟知的乐高和我的世界，也正是因为它们使用的元素都足够的简单，所以才能组合成千变万化的事物，怎么也玩不腻。

Paste_Image.png

接下来，就让我们从画一个像素点开始，走上我们的编程之路吧。

环境准备

Paste_Image.png

在开始编程之前，我们先要准备好环境。正如准备开始炒菜之前，需要先准备好灶台、案板、锅碗瓢盆等烹饪用具一样。

环境（Environment）：执行程序所必备的外部条件

如果你有完成上节课布置的作业，那么你应该已经准备好了一台安装了谷歌Chrome浏览器的电脑（最完美的情况下，你应该还配置好了科学上网）。如果没有，那请先准备好再开始下面的学习。

我们将在一个在线开发调试环境中进行接下来的操作。请在谷歌 Chrome浏览器中打开下面这个地址（由于是国外网站，如果配置科学上网的话使用会更流畅）：

http://codepen.io/zhangshenjia/pen/pRYXxz

在网页加载完之后，你应该会看到这样的界面：

Paste_Image.png

接下来，请点击屏幕上面的 Change View 按钮，然后在弹出菜单最下方的三个布局中选择最左边的布局：

Paste_Image.png

左边的区域有点太窄了是不是？每个模块都可以通过用鼠标拖动边线，来调整在屏幕上的大小，你可以试试看，把左边的区域拉大一点。最终你所看到的布局应该就和下面这张图差不多：

Paste_Image.png

好，这样我们就可以进行下一步的学习了。

程序由什么组成？

Paste_Image.png

这个界面上有很多模块，所有的按钮都是英文的，乍一看是不是有点晕？没关系，我们今天只会用到很少一部分，接下来我会为你一一介绍。

Paste_Image.png

位于屏幕左侧HTML、CSS、JS这三个区域是我们编辑调试程序的地方，这里躺着一堆由花花绿绿的字母和数字构成的诡异文字，这些文字叫做代码。

代码（Code）：由编程语言编写，人类可阅读、计算机可执行的一系列指令。

我们在炒菜时使用的菜谱就是一个程序，而打鸡蛋、放油……这些具体操作步骤就是代码。程序就是由代码组成的，所以编程又叫写代码。而虽然这些像天书一样的代码现在你还看不懂也写不出，不过你完全不必担心，接着往下学就好。

我们在上节课学过，程序是由语言写成的。HTML、CSS、JS就是三种不同的编程语言，我们每天访问的网页就是由这三种语言写成的。至于这三种语言分别是怎么回事，可以自行搜索相关的资料，我会在课后介绍如何用搜索引擎来查找资料，这里就不再多说了。

Paste_Image.png

我们可以看到，在每个代码区里都有一些灰色的文字，它们叫做注释。

注释（Comment）：为了让别人更好地理解代码的意图，在代码中添加的文字说明，不会被执行。

菜谱中的“用料酒腌制以入味”里的“入味”就是注释，它虽然不是可以进行的实际操作，但可以帮助你理解为什么要这么做。为了方便大家理解，在我们接下来的课程中出现的所有示例代码，都将配有注释。然而，真正优秀的代码将通过合理的命名和组织结构来说明其意图，是不需要注释的。关于写注释的原则，我们以后的课程会讲到。

可能有同学注意到，在HTML、CSS、JS三个代码区里的灰色文字在格式上是有所不同的。有的在最左侧添加了//，而有的在左侧和右侧都加上了奇怪的符号。这是因为在不同的语言里，注释的语法是不同的。

Paste_Image.png

由于在本系列课程中，我们只会修改JS代码，所以你可以通过双击JS字样把HTML和CSS两个代码区折叠起来，让JS代码区最大化。

Paste_Image.png

位于屏幕右侧的白色的 运行结果区是显示程序运行结果的地方，在这里我们能看到一个灰色的大方块，方块的左上角还有一个大大的红点……没错，我已经帮你画好了一个点。当我们运行代码之后，输出的结果将会显示在这里。

运行（Run）：计算机按照顺序读取代码，并执行代码所描述的操作

照着菜谱开始炒菜就是在运行程序。运行代码时总是按照从上向下的顺序进行的。在页面加载时，我们的代码会自动运行一次，所以你才能在运行结果区看到灰色的方块和红色的点。每当我们修改了代码，程序都会自动重新运行一次，可以马上看到结果。不过如果你没有配置科学上网的话，可能反应会比较慢，也许需要等几秒种甚至更长时间。

接下来，我们先要把眼前这几句代码的作用搞清楚，然后就可以照猫画虎，画出属于自己的点来。

这段代码起什么作用？

Paste_Image.png

面对一堆不知道什么作用的代码，想弄明白它们作用的最简单方法，就是把代码一段段地删掉，看看会发生什么。假如删掉一段代码后某个功能就不好使了，把代码复原之后功能又恢复正常了，那么我们就能断定这个功能是依赖这段代码的。

但是，如果我们在删掉之后没有及时还原，被删掉的内容就有可能永远消失了。所以我要告诉大家一个更好的方法，那就是把代码注释掉。

等等，我们之前学习的注释是个名词啊，怎么还能当动词用呢？当我们说把“代码注释掉”时，表示的意思其实是把一段代码变成注释。由于注释是不会被执行的，所以把代码变成注释之后，从机器的角度来看，就等同于把代码删掉了。但是我们还可以看到注释里的代码，也可以随时把它还原，这就比直接删除要靠谱多了。

需要注意的是，一段代码的作用可能是不可见的（比如在硬盘上写了一个文件），也可能是很难测试到的（比如一个只有在特殊情况下才会用到的逻辑），或者是很难注意到的（比如对某个本来就不起眼的东西进行微调）。你看不出任何变化，但这并不能证明这段代码是没有用的。

我们发现每行注释前面都有//，那么就可以有样学样，在第一行彩色代码前面加上//，这样它就变成灰色的注释了：

Paste_Image.png

哎呀，右边的那个点怎么消失了？别着急，靠近屏幕仔细看，它还在那里，只是变小了而已。事实上一个像素在屏幕上就是这么小，几乎看不见。为了让大家能更容易地看到代码运行的结果，所以我们需要把画布放大一些，这样像素就会比较醒目了。再看看这行代码上面的那句注释，我们就会明白这句代码的作用是将画布放大10倍。

现在请把刚才添加的//删掉，让它再变回原来的样子。我们再来研究下第二行代码，还是先把它注释掉：

Paste_Image.png

恩？我们发现那个点变成黑色了。再配合上面的注释理解，原来这条语句的作用是更改要画出的颜色。如果我们不设置颜色，那画出的点就是黑色。

让我们在恢复代码之后，来看看最后一行代码。老规矩，先把它注释掉：

Paste_Image.png

这下我们的点彻底消失了，怎么放大屏幕也找不到它。配合上面的注释理解，我们知道这行代码就是用来画出一个点的。

到现在为止，我们已经初步搞明白了这三句代码的用途。接下来我们要更进一步，通过一点点地修改来把代码中每个部分的作用彻底搞明白。

在开始修改之前

Paste_Image.png

在开始修改代码之前，一定要先明白如何复原到之前的状态，只有这样我们才能放心大胆地进行修改。正如我们拿着铅笔画画时下笔会很随意，而拿钢笔时就会比较拘谨一样。因为铅笔画错了可以用橡皮修正，而钢笔一旦画错就麻烦了。

刚才我们通过添加//来把代码变成注释之后，是通过手动删除//来把它恢复原样的。这是因为我们做的修改很简单也很直观，可以凭记忆来复原。但是如果我们的修改比较复杂，比如这里加一句那里删一段的话，我们是不可能把变化都记住的。这时候该怎么办呢？

别怕，下面我就会为你介绍两种比记忆更靠谱的方法：

1、撤销：通过按下Ctrl + Z快捷键（如果你使用Mac电脑，按下Command + Z），可以复原之前进行过的一次修改操作。不过在进行撤销之前，需要先确保你的光标在你的编辑区里。

撤销的原理是这样的：电脑把你所做的每一步修改的回滚操作都记录下来，当你下达撤销命令时，就依次执行记录好的回滚操作。比如你在某个位置输入了一个字符，那么记录的回滚操作就是在这个位置删掉一个字符；如果在某个位置删除了一些内容，那么记录的回滚操作就是在这个位置输入这些内容。

2、刷新：通过按下F5键（如果你使用Mac电脑，按下Command + R）或点击浏览器上的刷新按钮，你可以把代码复原到最初的状态，不管你把代码搞成了什么样，哪怕全删掉都可以复原。为了防止丢失你输入的内容，浏览器很可能会弹出确认框让你进行确认操作。

为什么刷新就能恢复呢？因为这个程序的作者是我，你们并没有修改并保存的权限。所以每次重新打开程序，都会复原到我的原始版本。

你可以先在代码区随便输入一些内容，比如“123123”，然后分别尝试一下这两种方法。当你知道了怎么在修改之后把代码恢复原样时，就可以放心地对代码为所欲为了。

改改改！

Paste_Image.png

有的同学注意到了，这三行代码都有一个共同的开头：

document.getElementById('box').getContext('2d’)

这一部分的作用是获取一个画布的操作句柄，让我们可以对画布进行操作。我们不需要进一步明白句柄、document、getElementById和getContext分别是什么意思，实在感兴趣的同学可以在课后自行搜索了解。

先看看第一行代码，尾部是scale(10, 10)。scale是缩放的意思，那么后面括号里的两个数字是干什么的呢？我们可以分别改改看。先把第一个10改成20，看看会发生什么？我们的点被横向拉长了。然后我们再把第二个10也改成20，我们的点就比之前大多了。

Paste_Image.png

你可以在试着把这两个数字改小，比如说改成5看看。就能明白这两个数字分别控制的是水平和垂直方向上的缩放比例。如果都改成1，那么这行代码就和注释掉之后的效果一样，因为默认的缩放比例就是1。搞明白之后，请把第一行代码恢复成原样，然后再继续下一步。

再看看第二行代码，尾部是fillStyle = “red”。fill是填充的意思，style是样式的意思。而后面引号里的red就是红色的意思，这是一种标准的颜色名。你可以试试把red换成yellow，点就变成了黄色；再换成blue，点就变成了蓝色……

如果你想要知道还有哪些颜色名可用，可以看看这个文档：http://www.w3school.com.cn/html/html_colornames.asp

Paste_Image.png

等等，关于颜色我会用的单词就这么几个，但是我们都知道颜色有成千上万种，叫不出名字的话又该怎么表示呢？这时就需要用到颜色编码了，这是一个由字符#开头的六位16进制数字（16进制是什么？感兴趣的话可以课后搜索一下）。比如说，你可以把引号里的内容换成#44b549，就能画出微信的绿色：

Paste_Image.png

如果你想要知道更多关于颜色编码的知识，可以看看这个文档：http://www.w3school.com.cn/html/html_colors.asp

我们把第二行代码恢复成原样，再来看看最后一行代码，尾部是fillRect(0, 0, 1, 1)。fill是填充，而rect是rectangle长方形的简写，也就是说我们可以用它来画长方形。后面的括号里有4个数字，我们可以分别改改看是什么作用。

Paste_Image.png

先把第一个0改成10，我们会发现点向右移动了；再把第二个0改成10，点又向下移动了。原来这两个数字确定的是画点的坐标位置。

如果我们写上一个很大的数字（比如100），或者一个负数（比如-10），你就会发现点不见了，因为它画到画布外面去了。我们可以通过测试发现画布边缘的尺寸是和前面的缩放比例相关联的，如果缩放比例是10，那么我们最多可以画到39，如果缩放比例是20，那么就只能画到19。

Paste_Image.png

我们再改改后面的两个数字看看。把第一个1改成10，点就变成了一条线；再把第二个1改成5，线就变成了一个长方形。原来这两个数字确定的是长方形的宽和高。当我们把这两个数字设置成1的时候，它就变成了一个点。

虽然我们可以通过修改这两个数字来画出线和长方形，但是为了让大家更好地理解后面要学到的编程概念，我强烈建议大家在本节课的作业以及今后的学习里都** 不要修改后两个数字**，一行代码只画一个点。

除了scale、fillStyle和fillRect之外，我们还能干点什么呢？感兴趣的同学可以去看看html canvas的文档：http://www.w3school.com.cn/tags/html_ref_canvas.asp

画一个属于自己的点

Paste_Image.png

终于，我们要写下自己的第一行代码，来画出一个点了。是不是有点小激动呢？请平复一下情绪，先刷新一下页面，把代码恢复成原样。

由于我们没有学过JS的语法，自己写代码很容易写错，所以推荐大家在复制示例代码的基础上来进行修改。首先，我们要用鼠标选中最后一行代码，使其高亮：

Paste_Image.png

然后，我们按下Ctrl + C快捷键（如果你使用Mac电脑， 按下Command + C），这样就把这段代码复制到剪切板里了。不习惯使用快捷键的同学也可以在选中的代码上按下鼠标右键，在菜单里选择“复制”。

Paste_Image.png

接下来，我们要把光标定位到最后一行的末尾，按下回车键（Enter）换行。随后按下Ctrl + V快捷键（如果你使用Mac电脑， 按下Command + V），就把刚才复制的代码粘贴出来了。不习惯使用快捷键的同学也可以按下鼠标右键，在菜单里选择“粘贴”。

Paste_Image.png

但是现在屏幕上还是只有一个点，因为我们两行代码所画的点都在同一个位置上。现在修改一下我们新复制出来的那行代码，把前面的两个数字改成你喜欢的任何数字（注意要在0～39之间噢）。

Paste_Image.png

我们好不容易画出了一个属于自己的点了，但是这个颜色我不喜欢，那怎么办呢？我们已经知道第二行代码的作用就是指定颜色，于是我们就改它吧，比如换成紫色（purple）：

Paste_Image.png

我们发现除了我们刚画的点，连原本那个点的颜色也一起变了。这样的话，虽然我们可以改变颜色，但是屏幕上的所有点都是同样的颜色，这可不是我们想要的结果呢。所以还是先把代码改回来吧。

那么想要拥有两种以上的颜色怎么办呢？很简单，设置两次颜色就好了嘛！我们把第二行设置颜色的代码复制一下，插到刚才我们最后一行代码前面，再把它改成紫色（Purple）：

Paste_Image.png

耶！这下我们终于可以在指定位置，用自己指定的颜色画出一个点了。

• 我们想画一个新的点，就复制出一行画点的代码，然后调整坐标数字即可；
• 如果想使用不同的颜色，就复制设置颜色的代码，然后更改颜色代号或者颜色编码即可；
• 如果想把画的某个点擦掉，把对应的代码删掉即可；
• ……

但是现在，我们又面临一个新的问题：只要一刷新，这个代码就复原了。怎么把自己的劳动成果保存下来呢？

保存劳动成果

Paste_Image.png

点击Fork按钮，就可以把当前的代码复制一份。复制出来的代码是真正属于你的，你可以随意改动，也可以保存和分享给别人。

第一次克隆时，你会看到这样的提示，让你注册一个用户：

Paste_Image.png

推荐各位同学都注册一个属于自己的用户，这样可以把自己每一期的作业都收集起来。但比较坑的是，在注册的页面有个验证码，必须通过科学上网才能看到，否则在验证邮箱那一步会显示404错误……没办法，这年头真正的好东西都在墙外，没有梯子是不行的。

Paste_Image.png

如果你没有条件科学上网，或者只想临时做下作业，不想那么麻烦，那也可以点击Save as Anonymous来跳过注册流程。不过这样克隆出来的代码是匿名的，你换台电脑就不能再编辑了。

Paste_Image.png

克隆完成之后，我们可以看到浏览器的地址栏发生了变化，导航条上也出现了Save按钮。我们的工作成果终于可以保存下来了！复制地址栏的链接（红框处），就可以分享发给自己的朋友了。交作业的时候，就是提交这个链接噢！

默认设置下，代码会每30秒自动保存一次。由于大家都是初学者，很容易把代码改得无法运行，要是这样的状态被自动保存下来，我们就不知道怎么恢复了，这种情况下我们的刷新大法也会失败。所以推荐大家在设置中把自动保存功能关掉，只在确认当前代码工作正常的情况下再手动进行保存。

Paste_Image.png

先点击导航栏的Settings按钮，在弹出的窗口中点击Behavior，取消选择 AUTOSAVE，然后点击Save & Close按钮。

不管是在游戏中还是在工作中，随时存盘是个好习惯！不过光靠说你是不会懂的，除非你经历过让你刻骨铭心的痛，比如干了好几个小时忘了存盘，结果不小心全弄没了……

好了，接下来就是你的show time了，你想用像素来画些什么呢？

Paste_Image.png

内容回顾

Paste_Image.png

解决问题的万金油思路：

拆分：将一件复杂的任务拆分成许多简单的任务，然后分别完成。

本节课所学的概念：

环境（Environment）：执行程序所必备的外部条件
代码（Code）：由编程语言编写，人类可阅读、计算机可执行的一系列指令
注释（Comment）：为了让别人更好地理解代码的意图，在代码中添加的文字说明，不会被执行
运行（Run）：按照顺序读取程序中的代码，并执行代码所描述的操作

本节课所学的原则：

操作可回滚：在开始修改代码之前，一定要先明白如何复原到之前的状态，只有这样我们才能放心大胆地进行修改。

随时存盘：要时刻保存自己的工作成果，避免丢失。

课后作业

Paste_Image.png

打开示例代码http://codepen.io/zhangshenjia/pen/pRYXxz，点击fork按钮复制一份之后，用代码画出自己喜欢的任何图案。

再次强调，** 不要修改画点语句的后两个数字**，一行代码只画一个点！

画完之后记得保存，然后复制页面链接提交作业，并简要说明一下自己画的是什么。

不知道怎么提交作业？回复000看看课程说明吧！

Q & A

Paste_Image.png

如何通过搜索引擎查找技术资料？

下面给大家介绍一下如何利用搜索引擎来查找相关的资料。首先，你需要选择一个搜索引擎：

• 谷歌：google.com
• 百度：baidu.com
• 搜狗：sogou.com
• 360：so.com
• ……

如果你配置了科学上网，强烈推荐只使用Google。如果没有条件，那你可以在国内搜索引擎中任选一款，区别并不大（都一样的烂）。

接下来，你需要掌握一个强大的搜索语法：site:。在你想要搜索的东西后面加一个空格，再加上site:和一个网站地址，就可以限制只在这个网站进行搜索内容。比如你想在w3school.com.cn这个网站里搜索颜色相关的资料，那就可以这样搜索：

颜色 site:w3school.com.cn

本课程中用到的HTML、CSS和JS相关的知识，大多数都可以在w3schools网站上找到。你可以需要根据自己的英语水平，来选择原版（http://www.w3schools.com）或是翻译版（http://www.w3school.com.cn）。由于翻译版更新总是比原版慢，而且翻译质量往往得不到保证（事实上在技术领域任何知识或咨讯都是这样的），所以推荐大家尽可能地使用原版。