Microbit/Javascript 编程入门之简易计数器

准备工作

初识 BBC 的 Microbit 编程
如果觉得安装 Microbit麻烦的话, 可以在浏览器里直接访问(需要网络): https://makecode.microbit.org
当然, 也可以事先安装Microbit的应用程序 https://microbit.org/code/
当前支持Microbit的系统有 Windows, Android and iOS.

简易介绍Microbit和Javascript

Microbit 是一台微型计算机(大小40mm x 50mm, 比信用卡稍小), 它具有中央处理器(Nordic Semiconductor nRF51822 16MHz CPU和ARM Cortex-M0微控制器), 同时有内存(16KB RAM和256KB闪存).

Microbit支持2.4G蓝牙技术, 因此您可以将其与计算机, ipad或手机配对(按A + B按钮, 然后按并释放按钮进行配对).

Microbit可以通过USB电缆供电. 您也可以通过USB电缆下载程序. 您还可以使用2xAAA电池(1.5V)通过电池连接器为Microbit供电.

Microbit具有5×5(25个点像素)LED屏幕以及两个按钮A和B. 它具有内置的加速度计(Freescale MMA8652)和三轴磁力计(Freescale MAG3110), 同时它也是一个指南针.

Javascript/TypeScript 编程

我们可以通过 Javascript 或者 Python 来为 Microbit 进行编程. 编好的程序可以通过USB或者蓝牙下载到Microbit电脑上. 如果您在浏览器里编程, 您将下载得到一个HEX文件, 然后您只需要把这个HEX文件发送到Microbit上(Microbit 将在电脑呈现成一个USB盘).

官方的语言是Microbit 但是您也可以在浏览器里编写 Python: https://python.microbit.org/v/1.1

Javascript(不要与Java混淆-这是另一种编程语言)是当今流行的编程语言, 尤其是它在Web编程中占据主导地位, 例如 您浏览的网页大多包含Javascript代码. Javascript也可以在后端应用程序中使用, 例如 NodeJS.

Javascript是Typescript的子集, 在Microbit中, 由于您需要声明参数的类型, 因此它是Typescript, 但是在本课程中我们将使用Javascript来使其保持简单.

Microbit 的HEX文件

无论您使用Java脚本还是Python编程, 代码都将被编译为HEX文件, 然后再发送给Microbit.

microbit-hex-file

HEX文件是一个纯文本文件, 但包含对Microbit电脑更友好的HEX值(十六进制数值)

在Microbit中创建一个新项目

点击 “New Project” 按钮来新建一个 Microbit 项目.

Create a New Project in Microbit App

然后, 我们应该看到由三部分组成的界面: 左侧是一个Microbit模拟器, 中间是一个工具栏(各种块), 而右侧是可视化区域. 在可视化区域上, 有两种模式(块和Javascript), 可以通过单击顶部的按钮从一种切换到另一种模式.

我们可以将块从工具栏拖动到可视化区域(块或Javascript)以对Microbit进行编程. 当用户从”块”切换到Javascript时, 相同的逻辑将转换为Javascript代码, 反之亦然. 但是, 当Microbit转换为代码时, 该代码将失去一些良好的编码样式, 比如代码中删除可选的分号. 又或有一些不太干净的代码, 例如将”启动时将计数器设置为1″转换为以下两行代码:

1
2

let counter = 0
counter = 1

let counter = 0
counter = 1

但实际上只需要一行代码就可以了(机器翻译的代码不够干净整洁).

1

let counter = 1;

let counter = 1;

在 Microbit 里, 我们只能强制的使用 let 来定义一个变量. 而在 Javascript 语言里, 我们还可以使用传统的 var 的关键字来定义一个变量(值会变的量, 也就是内存中的一块地方)

我们可以通过 const 关键字来定义一个常量.

1

const aNumber = 123;

const aNumber = 123;

常量就是指值不能修改, 如果你之后的代码尝试修改这个变量, 则microbit会抱怨说这个值不能被修改: Cannot assign to ‘aNumber’ because it is a constant or a read-only property.

Javascript: 逻辑判断 if-else, 还有 for, while循环

我们使用if-then或if-then-else来让 Microbit 根据 条件返回的 真或假(布尔值)做出判断. 例如: 如果今天在下雨, 我待在家里, 否则我将出去玩.

microbit-if-then-else-logics

通过 for 我们可以实现一个循环:

1
2
3

for (初始化; 条件; 每次循环结束的动作) {
   // 循环体
}

for (初始化; 条件; 每次循环结束的动作) {
   // 循环体
}

例如, 下面是一个简单的for循环, microbit将显示从0到10的数字:

1
2
3

for (let index = 0; index <= 10; index++) {
    basic.showNumber(index)
}

for (let index = 0; index <= 10; index++) {
    basic.showNumber(index)
}

切换回可视化区域:

microbit-for-simple-loop

让一个变量值增加一, 我们可以使用以下方法之一.

1
2
3

index ++;
index += 1;
index = index + 1;

index ++;
index += 1;
index = index + 1;

同样的, 我们可以通过以下任意一种方法来使一个变量值减一.

1
2
3

index --;
index -= 1;
index = index - 1;

index --;
index -= 1;
index = index - 1;

while是直观循环的关键字. 当某些事情是真的时, 做点什么. 例如, 以下显示小于10的数字.

1
2
3
4

while (counter < 10) {
    basic.showNumber(counter)
    counter += 1
}

while (counter < 10) {
    basic.showNumber(counter)
    counter += 1
}

它将在Microbit中将显示为:

microbit-while-simple-loop

结合循环语句, 我们可以让计算机(Microbit)执行一些计算, 因为在执行重复性任务方面, 计算机通常比人类快. 以下将计算从1加到100的和, 然后将和显示在 Microbit 上: 5050.

1
2
3
4
5

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

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

最后, 我们制作了一个简单的计数器项目, 当我们按 按钮A, Microbit LED屏幕上显示的计数器增加1, 而当我们按下按钮B时, 数字减小1, 但是, 当计数器降至零以下时, 计数器将更新为5.

javascript代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

input.onButtonPressed(Button.A, function () {
    counter += 1
})
input.onButtonPressed(Button.B, function () {
    counter += -1
    if (counter < 0) {
        counter = 5
    }
})
let counter = 0
counter = 1
basic.forever(function () {
    basic.showNumber(counter)
})

input.onButtonPressed(Button.A, function () {
    counter += 1
})
input.onButtonPressed(Button.B, function () {
    counter += -1
    if (counter < 0) {
        counter = 5
    }
})
let counter = 0
counter = 1
basic.forever(function () {
    basic.showNumber(counter)
})

上面的代码将在可视化区域如下:

microbit-counter-show-with-buttons

希望您喜欢 Microbit, 也喜欢 Javascript 编程, 我们下周见! Microbit 编程: 奔跑的像素点

英文: Introduction to Microbit and Javascript/Typescript Programming