课程E-循环1-循环和动画

这节课介绍了一个基本的循环和迭代的示例。

  • Computer science
  • looping
Print lesson
  • 年龄 9+
  • 65+ 分钟
  • JavaScript Blocks

介绍

这节课介绍了一个基本的循环和迭代的示例。 它显示了一个for循环。 循环允许重复,但是不同于函数。 循环在一个特定的位置反复运行代码,但是函数通过应用来传播反复运行的代码。

想一想,用现实生活中的例子来说明循环和函数之间的区别,例如:刷牙。 大多数人饭后刷牙,每天大概刷3次左右。 每次饭后我们去刷牙,这将是一个函数。 在每次刷牙的间隔当中,我们会有一些活动。 我们肯能在早上刷牙、骑车、打网球,午餐后刷牙,等等... 函数被展开来了。

刷牙的动作(在我们嘴里来回移动牙刷)可能是一个循环。我们持续这个动作4-8分钟,然后退出循环。

第一节课讲循环是为了让学生们了解循环是如何运动的以及我们如何监控它的动作。此外,我们可能会尝试在循环里放入不同的东西。

我们的micro:bit课程是根据Code.org CS 基础课程知识应用而量身定做的。 在学生们开始这些课程之前,我们鼓励学生们首先完成所有的CS基础知识。 学生们应该熟悉Code.org CS基础中的循环。

背景知识

强烈鼓励学生们优先完成以下操作:

  • 提前体验起点
  • 课程 E. CS 基础这节课简短地回顾了一下之前在课程C和D之中讲授的概念。学生们将会用算法、循环、条件、事件和函数来进行编程练习。

强烈鼓励老师优先完成以下操作:

教学指南

打开

课堂活动

你将需要这些:

  • 1块micro:bit
  • 1根USB线
  • 1个AAA电池组(可选)
  • 2节AAA电池(可选)

编写文本

basic.forever(() => {})

forever

在后台保持运行一部分程序。


for(let i = 0; i < 5; ++i) {
  basic.showNumber(i)
}
            

for

按规定次数运行部分程序。


basic.showLeds(`
    . . . . .
    . . . . .
    . . # . .
    . . . . .
    . . . . .
    `)
            

showLeds

在LED屏幕上显示图片。


basic.showString("Hello!")
            

showString

在LED屏幕上显示字符串。


basic.showNumber(0)
            

showNumber

在LED屏幕上显示数字。


let item = 0
item = 0
            

setItem

用一个等号让一个变量存储你指定的数字或字符串。

3个步骤

指导练习

我们将在网上给出micro:bit的教程或代码。接下来,去到:makecode.microbit.org


let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
PassThroughLoop = 0
Number_of_Times_Through_Loop = 4
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop
<= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
        

这段代码显示了0、1、2、3、4。它循环起来就像forever(永久循环)。

我们已经保存了2个变量或数字。

Number_of_Times_Through_Loop被设置为4. 然而,我们将会有5次循环,因为我们是从0开始的。 这虽然令人困惑,但是程序里面的很多东西都是以0为起点。了解这一点很重要。

我们第二个重要的数字是PassThroughLoopPassThroughLoop会告诉我们当前通过循环的时间。 PassThroughLoop从0开始并且每次都会经过for循环。它用1来增加数值。

点击链接进入到起始代码。底部其他的积木块将帮助你开始。

在此查看起始代码。

注释:代码底部未使用的积木块将会在挑战赛里面用到。

挑战

在此查看起始代码。

挑战1

我们如何能够数到数字7呢?

查看代码

let Number_of_Times_Through_Loop = 0
Number_of_Times_Through_Loop = 7
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
          

在此查看完成后的代码。

挑战2

那么怎样才能数到数字9呢?

查看代码

let Number_of_Times_Through_Loop = 0
Number_of_Times_Through_Loop = 9
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
          

在此查看完成后的代码。

挑战3

你能从0数到3,然后显示一颗心3秒钟吗?为此,你将需要添加你自己的for循环。然后用我们示例代码底部的其中一个代码积木块。

查看代码

let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
Number_of_Times_Through_Loop = 3
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showIcon(IconNames.Heart)
    }
})
          

在此查看完成后的代码。

挑战4

现在,让我们从0数到2,然后显示一颗心4秒钟。但是这一次,这颗心会闪烁,并且最终显示单词“GO”3次。(提示:为了能让它闪烁,你需要清屏。 而且,这次挑战将会用到所有的积木块。)

查看代码

let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
Number_of_Times_Through_Loop = 2
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= 4; PassThroughLoop++) {
        basic.showIcon(IconNames.Heart)
        basic.showLeds(`
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            `)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= 2; PassThroughLoop++) {
        basic.showString("Go")
    }
})
          

在此查看完成后的代码。

独立练习

用至少3个循环创建你自己的动画来显示一些有趣的图案。准备好讲述一个关于这3个图案的故事。

在此查看起始代码。

问答

问题 1

什么是“for循环”?

显示答案

通常,for循环指的是按固定的次数重复运行代码。

问题 2

描述下面代码中的发生了什么。


let index = 0
index = 0
basic.forever(() => {
    for (let index = 0; index <= 4; index++) {
        basic.showNumber(index)
    }
})
        
显示答案

我们创建了一个for循环,其中0为起始值,i是指数变量,4是结束值。 指数变量i从0开始,每次通过循环则增加1。 当i=4时,循环结束。

问题 3

描述下面的代码。


let index = 0
index = 0
basic.forever(() => {
    for (let index = 0; index <= 6; index++) {
        basic.showNumber(index)
    }
})
        
显示答案

我们创建了一个for循环,其中0为起始值,i是指数变量,6是结束值。 指数变量i从0开始,每次通过循环则增加1。 当i=6时,循环结束。

了解更多