第2章
JavaScript Blocks
图形编程
本章我们将介绍 microt:bit专用开发工具——MakeCode图形化编程工具（如图
2.1所示），它使用的是一种叫做 JavaScript Blocks的图形编程语言。我们将对编程工具的界面进行讲解，同时希望大家能够明白什么是编程语言，以及学习它们的重要性。
图 2.1.MakeCode图形化编程的入口页
2.1.初始 MakeCode和图形化编程语言
2.1.1.编程语言
编程语言（Programming Language）是用来编写计算机程序的形式语言。编程语言定义了一套标准化的交流技巧，用于向计算机发出指令。熟练掌握编程语言的软件开发工程师，可以通过编程语言对计算机进行操控，精确定义在不同情况下所应采取的行动。简单来说，编程语言是人类与机器交流的工具。JavaScript Blocks就是上百种编程语言中的一种，它是专门用来操控 microt:bit的语言。比如，我们想让 microt:bit显示屏显示一组单词：Hello World!，不论你说中文还是英文，microt:bit都不会有任何反应，但是如果你使用 JavaScript Blocks编程语言正确书写指令，你会发现与 micro: bit的交流其实很简单！
2.1.2.JavaScript Blocks图形化编程语言
JavaScript Blocks编程语言又称做图形化编程语言，是专门针对 6~12岁的儿童而设计的编程语言。在这里没有复杂冗长的代码，取而代之的是形状各异的积木
块，编写程序就像是堆叠积木一样简单。从本书第 3章开始，我们将切身体会到使用JavaScript Blocks为 microt:bit编写程序的乐趣。如图 2.2所示为一组非常简单的代码，你能猜出这组代码块录入 microt:bit后会有哪些效果吗？
知识点
JavaScript Blocks，即 JavaScript积木块，是一款转为 micro:bit设计的图形化编程语言。熟练掌握 JavaScript Blocks编程的软件工程师，能够轻松使用 microt:bit硬件上的丰富组件，进而完成各种项目的开发（例如计时器秒表、花草的自动灌溉等）。
图 2.2.JavaScript Blocks编写的简单程序
要进行 JavaScript Blocks编程，请确认你的计算机已经连入了互联网。打开浏览器，输入网址 https://makecode.microbit.org/，会看到类似于图 2.3所示的页面（图2.3为英文版入口页面）。单击带有加号图案的新建项目按钮，在其中我们可以书写JavaScript Blocks编程语言（图2.4），这个页面也是我们通常所说的 MakeCode编程界面。从今天起，你将学习通过 MakeCode编程界面来编写 JavaScript Blocks代码，对 microt:bit进行操控，从而开发出诸如闪烁爱心动画、投票器、土壤水分分析器、自动浇水器、电子吉他、剪刀石头布游戏机和情绪电台等功能强大的装置，而且在整个开发过程中将会乐趣横生，多姿多彩！
图 2.3.英文版的 MakeCode入口页面
图 2.4.MakeCode编程界面
2.2.浏览 MakeCode编程界面
在开始编写代码之前，请先跟随我的引导，从左上角开始熟悉一下 MakeCode编辑器的主界面。首先映入眼帘的是一个长条形状的功能区，它的最大特点是拥有蓝色背景（底纹），这让它与其他构件区分开。如图 2.5所示，从左到右分别是：
●microt:bit Logo：带有 microt:bit字样的编辑器 Logo，单击它可以回到入口页。
●回到入口页按钮：带有主页和房子图标模样的按钮，单击它你可以回到入口页（功能同单击microt:bit Logo）。
●分享按钮：单击该按钮，将允许你与他人分享自己的编码成果（程序）。
●编辑器切换按钮：切换按钮有两个选项，即 Blocks和 JavaScript。没错，它们其实是两种编程语言，这两种语言都可以用来控制 microt:bit。但是本书大部分章节中都会使用 Block选项，即 JavaScript Blocks语言编写我们的代码。
●帮助按钮：图标形状是一个问号，单击它，可以查看入门教程和示例程序。
●设置按钮：一个齿轮状的按钮，包括语言在内的项目的各种设置都可以在这里更改。注意，为了体验原汁原味的编程，强烈建议使用英文作为编辑器的语言。
●Microsoft Logo: 最后一个带有 Microsoft字样的 Logo, 会带你进入一个新的网页，其中展示了所有由 Microsoft MakeCode项目组开发的软件，第一个便是microt:bit。
图 2.5.MakeCode的功能区
接下来要介绍的是编程区，如图 2.6所示，这个区域会非常频繁地被使用，请务必牢记。
●模拟器：在 microt:bit Logo下方的是模拟器，与实物不同，它不能检测重力、加速度和亮度，但是可以模拟 LED屏幕的显示效果、按钮按下的效果，以及引脚的部分效果。
●指令工具栏：位于模拟器右边的是指令工具栏，工具栏中包含了所有可以使用的代码块，每个代码块都根据功能被分类到了一个模块组中。例如，基本模块组包含了较为常用的代码块，并统一以天蓝色底色作为标记。本书将用大量的篇幅带你掌握如何正确地组合代码块，让 microt:bit听从你的指令而运行。
●工作区：编程区中最大的一片区域就是工作区，我们将在这里编写可以被microt:bit识别的编程语言。我们所使用的语言叫做 JavaScript Blocks, 编写它其实也很容易，只需要将指令工具栏中的指令块合理地拼接在一起就可以了，就像拼图一样。拼接代码块的过程也被称做编码coding。
图 2.6.MakeCode编程区—中文版界面
注 意
细心的你可能会发现，还有一小部分图标我们没有进行讲解。不要着急，在用到它们的时候我会再次进行详解。
2.3.小结
通过本章的学习，我们认识了 MakeCode图形编辑器。其中，模拟器、指令工具栏和工作区是经常使用的部分。除此以外，我们知道了 MakeCode编辑器可以辅助编写基于 JavaScript Blocks图形化编程语言的代码，来操控microt:bit。
2.4.练习题
1．想要进入 MakeCode编程界面，你需要使用浏览器，在地址栏输入 。
2．本章着重介绍了MakeCode编程界面的三个区域： ， 和 ， 这 3个区域所占面积最大，也是在编写代码的过程中会反复使用的区域。
3．学会并掌握JavaScript Blocks语言，我们就可以*操控microt:bit。这个说法正确吗？
4．JavaScript Blocks和 JavaScript是一种语言，它们的写法没有任何区别。这个说法正确吗？
5．老师使用的是英文版的 MakeCode界面（如图 2.7所示），为了方便教学，建议大家也使用对应的英文设置。仔细阅读本章第一节，并将你的 MakeCode编译器设置成英文界面。
图 2.7.MakeCode编程区—英文版界面