小学生系列之四——乘法口诀表（标签版）

一、功能描述

显示乘法口诀表，程序的执行结果如图 1所示。

图1 用标签显示乘法口诀表

二、界面设计

如图 2所示，在项目中添加一个标签组件，Screen1的方向为横向，标题为“乘法口诀表——标签版”（后面还会讲到画布版），设标签的宽度为充满。

图2 设计视图中的用户界面

三、认识代码块

1、屏幕初始化

首先，屏幕初始化是一个事件，顾名思义，它发生在应用启动时；其次，当初始化完成时，应用中的全部组件均已创建完成，组件的属性值也全部设置完成，全局变量均已创建完成，并被赋予了初始值；最后，在初始化事件中编写的程序，也将在初始化完成之前被运行。与“创世纪”（上帝用6天时间创造了世界及人类）相比，屏幕初始化更像是“盘古开天地”，上帝依照某种顺序创造世界（第一天创造了光，第六天创造了人），而盘古在开天辟地之后，将自己的身躯化为日月星辰、河流山脉及风雨雷电等等，神化中并没有提示我们后面这些事物形成的顺序。也就是说，屏幕初始化时，组件及全局变量的创建没有先后之分，组件的属性设置与变量赋初始值之间也没有特性的顺序。了解这一点很重要，只是暂时你还无法体会。代码块如图3所示。

图3 屏幕初始化事件块

2、循环语句

话说盘古开天辟地之后，他的双目化作日月，日复一日、年复一年地东升西落，为世间万物提供了时间刻度。这样的重复在计算机的程序中被称作循环。如图4所示，“针对从1到5且增量为1的每个数，执行…”，从字面意思来理解，即：当数=1时，执行…；当数=2时，同样执行…；……；当数=5时，同样执行…。在整个循环执行过程中，数分别等于1、2、3、4、5，对于不同的数，执行代码块内部相同的代码。其中“数”称作循环变量，第一个“1”称作循环变量的起始值，“5”称作循环变量的终止值，第二个“1”称作循环变量的增量。

图4 针对数字的循环语句块

3、局部变量

变量是用来临时存放数据的“盒子”，盒子上贴着标签——变量名，如图5所示，其中“我的变量”是默认的变量名，可以将它们删除，并赋予它们一个有意义的名字，这一点非常重要，就如同一个家庭给新生儿起名字一样重要！当我们提起变量名时，它代表的是变量中存放的数据，就如同课堂上老师点名时，你的名字代表你本人。所谓局部变量的“局部”，指的是变量起作用的范围，只有被局部变量块包围起来的代码块，才能读取或改写该变量的值。

图5 局部变量块

4、拼接字串与换行符

就像数字可以进行加法运算一样，文字或符号也有“加法”运算，那就是字串的拼接。App Inventor中提供了可扩展的拼接字串代码块，如图6所示，图中拼字串块的上面5个部分（拼接成3x5=15）与最后一部分（4x5=20）的效果相同，它们之间的“\n”称作换行符，其作用与回车键相同。

图6 拼字串的代码及测试结果

图中采用了单步调试代码的操作，在“设标签1的显示文本”（绿色）块上点击鼠标右键，选中菜单的最后一项——执行该代码块，可以看到测试的AI伴侣中标签内容发生改变。

四、知识点——程序的三种结构

无论是哪一种编程语言编写的程序，它们都具有最基本的三种程序结构——顺序结构、分支结构及循环结构，三种结构的特点如图7、图8及图9所示，其中循环结构可以看作是顺序结构与分支结构的组合。

图7 顺序结构

图8 分支结构

图9 循环结构

五、编写程序

1、单层循环语句——求100以内自然数之和

如图10所示，这个例子中，利用有返回值的局部变量——和（初始值为零），在1~100且增量为1的循环语句中，进行和的累加，每次循环都将一个增加了1的数添加到“和”中，直到数=100，当“和=和+100”的计算完成后，循环结束，将最终的和返回给调用者——标签1的显示文本属性。

图10 求100以内自然数之和

上图中仍然采用单步执行的方法进行代码测试，在局部变量块上点击右键，并执行该代码块，执行结果以注释的方式显示在代码上方的粉色窗口中，其中显示“Do It Result(执行结果)：5050”。然后再在绿色的代码块上点击右键，单步执行该代码块，则AI伴侣中给出计算结果（用标签显示5050）。

2、双层循环——绘制乘法口诀表

有了前面的基础，双重循环也不难理解，如图11所示。图中外层循环从1到9，对应于9行，内存循环从1到“行”，即，如果行=1，则内层循环只循环1次，如果行=2，则内层循环执行2次，以此类推。内层循环负责书写九九表的每一行。程序的运行结果如图1所示。

图11 完整的代码

六、课后作业：如何确保所有的列对齐？