这节课的主题是 for 循环
使用 for 循环，我们就可以用代码来做许多事情
这幅花朵的原图是457像素宽乘360像素高
将两者相乘，就得到164000像素
这张图挺小的，已经有这么多像素
我们之前写代码的方式是用 pixel.setRed(255) 这个代码行
来将一个像素点改成红色，用这样的方法来改变整张图片
是很不现实的。我的意思是，这么小的一张图就有超过10万个像素
我们需要有一个结构
写几行代码来反映我们要做的改变
然后让计算机自己不断重复地运行这些代码，改变图像的每一个像素点
因此，我们这堂课要讲的 for 循环就是要做到这一点
这样会大大增强我们使用代码的范围
我要先讲一下 for 循环的结构，先来看看这个结构有哪些组成部分
我来举个例子。这个蓝框里有一张 for 循环的图片
我待会会讲一下组成部分
开始 - 我用红笔画出来 - 这里开始 for 循环，所以有 for 这个单词
括号里是 pixel: image，后面是尖括号，开始另一行
这里的意思是这个句法要有括号、尖括号和其他内容
在我的例子和练习里，都是一样的
我们会提供这一行，让你写出下面的代码
这一行的意思是
图像里的每一个像素都要完成下面的代码
下面的代码就是用来规定完成的任务
这些行是 for 循环的主体
这几行就可以完成我们要做的事情
for 循环的运行方式是我们要改变这个花朵图像
这里有三行代码。要取整个图像的第一个像素
左上角的像素，因此它就取出第一个像素
for 循环就运行这三行代码，这里是 pixel.setRed(0)
pixel.setGreen(0)、pixel.setBlue(0)
这些代码都是针对第一个像素执行的
就是要将这个像素变成黑色，对吧？它将红、绿、蓝的值全部改成0
for 循环到这里底部的时候，发生一个有趣的事情，我用黑色的箭头显示出来
代码返回到这三行代码的顶端，取出第二个像素
对第二个像素运行这三行代码
对第二个像素运行完以后，再次返回到顶部
对第三个像素运行这三行代码。我们就是不断重复地运行代码
改变图像里的每一个像素
要注意的一点是代码主体的这三行是缩进的
尽管不是必须的，这是个常见的作法
就是要将主体代码和其他代码区别开来
image = new SimpleImage 这行代码只运行一次，print(image)代码也只运行一次
循环里的代码就有点特别
他们的性质是不断循环的运行。我们来试试看
我们来试这个实例，这里是可运行的代码，这里加载图像
有 for 循环，主体代码开始，这里是三行主体代码
这个括号有点小，不过这里有个右尖括号
和左尖括号对应，结束主体代码
运行来看看结果。你看到的是这个纯黑色的长方形
这不是很有用，但确实显示了 for 循环的功能
其中的原理是这幅花朵的原图
有各种红、绿、黄和其他颜色，代码的作用
是访问图像的每个像素点，执行这三行代码
这个程序就是取像素点，将红、绿和蓝全部设成0
结果就是将像素变成纯黑像素
你可以想象，这个过程就是将图像6的数据删掉
剩下来的就是这个纯黑的长方形
再多试一个例子，将每个像素的红色值和绿色值设为255，将蓝色值设为0
我要想想什么代码可以完成这一点
这里的思维方式是我们用英语说
我要这个效果，将红色值设成255或其他数值
在练习里，你的任务就是要将这句英语翻译成代码
这个例子说明这种模式
代码的主体要将红色值和绿色值改成255，将蓝色值改成0
头两行是 pixel.setRed(255) 和 pixel.setGreen(255)
第三行是 pixel.setBlue(0)。运行一下看看
结果是鲜黄色的长方形，和前面的例子差不多
我们的作法是改变这幅图里每个像素的绿色值和蓝色值
就得到鲜黄色
这两个例子有点不现实，是吧？我们只是删除所有数据
产生这个有色的长方形。我现在来试一个现实一点的例子
我们不删除花朵图像中的全部数据
我们来改变这些数据。这是花朵的原图
你知道，黄色等于红色加绿色
所以这里黄花的红色值和绿色值是很高的
在这个例子里，我要将整个图像的红色值改成0
想想要怎么做。第一个问题是，要用什么样的代码
在这个例子里，你看到的是主体代码只有 pixel.setRed(0) 一行代码
我以前的实例里，主体代码有三行
行数是任意的，可以是三行或六行
这个例子只有一行代码。这行代码用英语来表达
就是这个 for 循环用于图像里的每一个像素点，将其红色值改成0
我们来看看结果。运行一下，你看到的是
花朵变成这种奇怪的、放射的绿色花朵
如果将黄色花朵的组成部分分解来看
就是红色光和绿色光的结合
这行代码做的是将红色光的值调为0
就像我们将灯光调到0一样
所以图像只是有绿光组成
还有一点要注意，看看右下角的绿叶
它们没有什么不一样，所以这里可能大部分是绿光
红光的值大概是8或者10左右
如果将红色值改成0，从视觉上而言没有什么区别
我们再多试一个例子。在这个例子里
我要将花朵图像的绿色值和蓝色值设成0，蓝色值保持不变
代码是什么呢？要写两行主体代码
pixel.setGreen(0) 和 pixel.setBlue(0)，红色保持不变
运行一下，你看到的是红色的花朵
这称作图像的红色通道
这个图像是红光、绿光和蓝光的组合
我们刚才将绿光和蓝光设成0
就是将两个颜色的值调到最低
剩下来的就是一副红色光图
有些地方是鲜红色，有些地方是暗红色
左边这里是暗红色，没有太多红光
这里的绿叶没有很多红色
只是黄色花朵有显著的红色光
这只是看图像的一种方式
这里的蓝色通道和绿色通道其实是类似的
for 循环的功能非常强大
我们可以用它来写几行代码
让计算机运行一些大数据集
在这个例子中我们是处理图像。我要提一下的是
Java Script 语言的 for 循环不是这么简洁的
这在 JavaScript 语言里是没有的，我在这门课里加上，所以可以运行
如果你做其他的 JavaScript 题目时，就不会有这个功能
但大多数语言都有像这样的 for 循环
只是很奇怪 JavaScript 没有。所以这里的模式是我们要写代码
写一点点代码来表达我们想要做的事情
这体现了计算机是很强大的，但也很愚蠢
你写有意思的代码
我要这样那样该绿色
通过使用 for 循环，我们可以和计算机合作
计算机就会做很厉害的事情，运行代码10万次甚至是100万次
计算机这样运行
但其实也只是做非常机械的事情
这体现了计算机原理的总体主题
那就是计算机可以快速地处理机械的部分
人类要用创造性来控制如何让计算机运行
下一节 - 做完这样的练习以后 -
我会加一个功能
我们就可以开始做一些更有趣的事情