< Return to Video

Functions (Video Version)

  • 0:01 - 0:04
    现在我们谈谈你这期间
  • 0:04 - 0:06
    一直在用的 函数
  • 0:06 - 0:09
    当你使用 rect() fill() text() 这些命令时
  • 0:09 - 0:12
    你其实是在调用函数 这些函数就会实现
  • 0:12 - 0:15
    你所叫它们做的事情
  • 0:15 - 0:17
    函数究竟是什么
  • 0:17 - 0:19
    我们把一堆代码凑到一起
  • 0:19 - 0:21
    并给它取个名字 好让我们能
  • 0:21 - 0:23
    多次使用它的功能
  • 0:23 - 0:26
    比如rect() 它是用来干什么的
  • 0:26 - 0:29
    它就是用来画四条线的 是吧
  • 0:29 - 0:31
    而我们也可以只用line()这个函数 是吧
  • 0:31 - 0:34
    这样我们就得到了一个长方形样的东西
  • 0:34 - 0:37
    但当我们想要
  • 0:37 - 0:39
    画很多个长方形的时候
  • 0:39 - 0:41
    那么每次都进行这些计算
  • 0:41 - 0:43
    就相当地烦人了 还要费劲地思考
  • 0:43 - 0:44
    这个角的这条线要怎么画
  • 0:44 - 0:46
    那个角的要怎么画...
  • 0:46 - 0:49
    所以不如用个rect()函数
  • 0:49 - 0:51
    这个函数的效果跟之前
  • 0:51 - 0:55
    那四行代码的效果一样 却又更加简洁
  • 0:55 - 0:58
    这样还挺棒的 rect()这个函数
  • 0:58 - 1:01
    在可汗学院的所有的程序中
  • 1:01 - 1:03
    都是能直接用的
  • 1:03 - 1:05
    当然你也可以自己写个函数
  • 1:05 - 1:08
    然后在自己的程序里调用
  • 1:08 - 1:11
    举个栗子 假设我们要写个程序
  • 1:11 - 1:14
    我们想画很多次的温斯顿(黄脸娃娃)
  • 1:14 - 1:17
    因为我们可能会讲讲温斯顿的人生历程
  • 1:17 - 1:20
    并把每个年龄段的它都展示出来
  • 1:20 - 1:24
    所以我们开始写画出温斯顿的代码了
  • 1:24 - 1:27
    我们这里用 faceX 和 faceY 两个变量
  • 1:27 - 1:29
    来规定脸部的中心位置
  • 1:29 - 1:31
    之后画眼睛和鼻子的时候
  • 1:31 - 1:33
    就能参照这两个变量了
  • 1:33 - 1:35
    现在程序认得这些代码了
  • 1:35 - 1:37
    但它还不是函数 所以程序运行了一下
  • 1:37 - 1:40
    然后也只能就运行一次
  • 1:40 - 1:44
    所以我们就来把它转成函数吧
  • 1:44 - 1:46
    转化的步骤很像
  • 1:46 - 1:48
    声明变量那样 因为实际上
  • 1:48 - 1:50
    就是一样的
  • 1:50 - 1:52
    我们敲上 var drawWinston
  • 1:52 - 1:55
    这个名字不错 生动又形象
  • 1:55 - 1:59
    再敲上 = 号 然后接的就不是数字或字符串了
  • 1:59 - 2:03
    我们要接的是 function 不要拼写错了
  • 2:03 - 2:08
    然后是小括号 () 再后是前大括号 {
  • 2:08 - 2:12
    接着后大括号 } 最后是分号 ;
  • 2:12 - 2:14
    所以我们接下来就是要把所有
  • 2:14 - 2:19
    函数要用的功能都放进大括号里
  • 2:19 - 2:22
    所以我们要把底下的所有代码
  • 2:22 - 2:27
    都放进我们的函数里 缩进下更好看 啦啦
  • 2:27 - 2:29
    所以我们现在就把这些变量
  • 2:29 - 2:32
    整理成函数了 基本上我们是
  • 2:32 - 2:36
    把这块代码贴上了个标签 然后我们就能
  • 2:36 - 2:38
    随时告诉自己的程序：
  • 2:38 - 2:41
    嘿 找出带那标签的那段代码 运行它！
  • 2:41 - 2:44
    我们把这段代码转成可重复使用的了
  • 2:44 - 2:47
    但是别忘了 温斯顿不见了
  • 2:47 - 2:49
    我们弄丢了温斯顿 他人跑去哪儿了呢
  • 2:49 - 2:53
    好吧 其实是我们把代码放进函数里之后
  • 2:53 - 2:56
    相当于是告诉程序 嘿 这里的这些代码
  • 2:56 - 2:58
    是我想稍后还能用的
  • 2:58 - 3:01
    但只有我叫你用时 你才能用
  • 3:01 - 3:04
    所以我们就得叫程序运行这段代码
  • 3:04 - 3:09
    这就要“调用”函数 就跟使用ellipse() rect() line()一样
  • 3:09 - 3:14
    所以我们只要敲上函数名 drawWinston
  • 3:14 - 3:16
    后面接上小括号()
  • 3:16 - 3:19
    还有记得加上分号 啦啦
  • 3:19 - 3:21
    温斯顿出来了
  • 3:21 - 3:24
    好了 我觉得棒极了 但你可能无语了
  • 3:24 - 3:27
    因为我们相当于是把之前程序所做的
  • 3:27 - 3:30
    又做了一遍 有点傻是吧
  • 3:30 - 3:33
    不过函数的关键就是它能重复使用
  • 3:33 - 3:35
    所以我们现在要开工了
  • 3:35 - 3:41
    我们只需不断复制黏贴这个函数就可以了
  • 3:41 - 3:47
    额... 看起来没变嘛 但其实是有的
  • 3:47 - 3:49
    它画了多个温斯顿 可问题在于
  • 3:49 - 3:51
    它们完全重叠在一起了
  • 3:51 - 3:54
    如果有X光的话 我们就可以扫一下那图象
  • 3:54 - 3:58
    然后就能看到三个温斯顿了 但我可没X光眼
  • 3:58 - 4:00
    也许你有吧
  • 4:00 - 4:03
    但我们可以对函数做些小修改
  • 4:03 - 4:05
    然后就能看到了
  • 4:05 - 4:09
    你看 faceX 和 faceY 总是202和208没有
  • 4:09 - 4:12
    我们能用 random() 函数来做点改变
  • 4:12 - 4:15
    比如 random() 范围设成50到350 它就会
  • 4:15 - 4:19
    在范围里随机挑选一个数字 下面也是一样
  • 4:19 - 4:23
    这样每次调用这个函数时 它都会随机生成新数
  • 4:23 - 4:27
    如果我们点下刷新 温斯顿就会随机再现
  • 4:27 - 4:29
    棒呆了 哇
  • 4:29 - 4:32
    好了 我觉得这棒极了 因为本来这是要
  • 4:32 - 4:35
    写很多代码才能实现的 而有函数就省事多了
  • 4:35 - 4:38
    本来是要当前代码量的三倍的
  • 4:38 - 4:41
    不过这还不够实用
  • 4:41 - 4:44
    因为我们也许不想要随机的温斯顿
  • 4:44 - 4:46
    我们可能想要的是固定的温斯顿
  • 4:46 - 4:48
    想让它固定在屏幕的某个特定位置
  • 4:48 - 4:50
    那么敬请期待 因为下次我们就会讲
  • 4:50 - 4:52
    如何给这个函数传递参数 从而得到
  • 4:52 - 4:56
    位置固定的温斯顿
Title:
Functions (Video Version)
Description:
more » « less
Video Language:
Turkish
Duration:
04:56

Chinese, Simplified subtitles

Revisions

Our website uses cookies for analysis purposes.