如何使用可视化工具

二、如何使用可视化工具

课程教学中，可在三个层面使用可视化编程：第一是算法层面，使用可视化程序代替流程图，直观的介绍常用算法的逻辑，并立刻进行验证，利于从抽象层次理解算法思想；第二是编码层面，结合编程语言的语法规则、控制结构等，将可视化程序转化为相应语言的代码，更利于理解代码；第三是在系统层面，采用自定义积木的方式创建程序模块，理解复杂系统分解与模块化设计。以下分别从这三个方面举例说明。

1.可视化编程在算法设计中的应用

算法是程序的灵魂，也是培养学生计算思维、逻辑思维的根本。美国的学生在中小学阶段就会接触可视化编程，从而培养初步的逻辑思维能力，而中国的学生往往缺乏这种能力的训练。

在课程开始阶段，使用最简单、有趣的工具展开算法设计，容易吸引学生的兴趣，取得良好效果。笔者在实践中使用麻省理工媒体实验室的可视化编程工具Scratch，它既提供基于网页的在线版本，也提供离线安装版本，使用非常方便；该系统面向的目标首先是中小学生，设计的卡通形象和舞台效果很吸引人，对大学新生也有足够的吸引力。

在算法设计中，针对顺序、选择、循环以及混合的处理逻辑，分别选取典型案例，用Scratch积木可视化呈现，能起到良好的演示效果。

在顺序结构部分，选用鸡兔同笼问题，让学生理解从问题到程序的转换过程，“输入—处理—输出”的程序流程，以及变量、表达式等基本概念，如图1所示。在选择结构部分，采用“输入3个数，求其最大值并输出”的示例，说明流程控制的基本方法，并以“if”及“if-else”等基本结构块来实现算法，如图2所示。

在循环结构部分，演示经典的“从1累加到100”的程序，如图3所示。一方面，认识循环控制的逻辑；另一方面，通过加入延时，可以直观的观察循环变量i和累加变量s的变化情况；再如根据公式“”求π值的示例，如图4所示，能使学生深入理解循环迭代的思想，同时，改变迭代次数，可以直观的体会计算量及结果精度的变化。

为帮助学生理解数组这一基本数据结构，设计“输出Fibonacci数列的前20项”的简单示例。可视化程序如图5a所示，在循环结构中，演示了Fibonacci数列的生成过程，同时，舞台上的变量和数列显示如图5b所示，能够直观地看到数组数据的组织及访问方式。

可以看出，采用可视化工具代替流程图来描述算法，不但简单、直观，而且能够立刻执行、验证，利于学生理解算法逻辑和数据组织方式。

2.将可视化程序转化为高级语言代码

从上面的几个示例容易看出，可视化程序的构造块与高级语言的语句块之间有着极大的相似性，只要学习了语法规则和控制结构，就能很容易地将可视化程序转化为高级语言代码。以图2和图4为例，转化为C语言代码分别如下：(https://www.daowen.com)

代码1输入3个数求最大值的代码

代码2根据公式求PI值的代码

在章节教学中可以分两步来实施：首先由教师主导，设计可视化程序，引导学生理解算法逻辑；然后由学生动手，根据语法规则和控制结构，将可视化程序转化为具体语言的代码块，完成算法思想到高级语言程序的转换。

在设计可视化程序的过程中，就可以引入变量及其存储方式、运算符、表达式、流程控制、输入输出等概念，而这些内容在转化程序时又可以方便的映射到高级语言的语法规则中。通过这一分解，将原来复杂的编程转化为2个相对简单的过程，利于学生客服畏难情绪，也利于抓住编程的要点。

3.可视化编程在模块化程序设计中的应用

模块化编程是程序设计课程的核心内容之一，高级语言中一般都通过函数来实现模块化编程。Scratch的功能比较简单，难以模拟函数的功能，所以需要一套功能更加强大的可视化编程工具，笔者推荐使用加州大学伯克利分校出品的Snap软件。

Snap提供基于Web的可视化编程环境，使用方便，可视化程序可以保存在客户端或云端以备下次使用，它支持常用的数据类型，完全支持模块化开发，甚至支持创建新的控制结构，能够完美的用于程序设计课程的教学。

Snap采用自定义积木的方式制作程序模块，例如，为求一组数据中的最大值，设计如图6（a，b）所示的模块：

其中：第一个积木块定义了函数的原型，函数名为getArrMax，需要传递进来一个数组s作为参数，并返回一个数据m作为最大值；中间部分定义了求最大值的算法，首先假定数组第一项为最大值，存入变量m，其后循环遍历所有的数组元素，当发现某项值大于m时，用其替换m值，这样循环结束时，m中存放的就是数组元素的最大值；最后一个积木块向主调程序返回数据，相当于高级语言中的return语句。主调程序如图6b所示，其核心部分（第三个积木块）调用了自定义的函数求数组中的最大值。

为演示函数的嵌套调用，设计求组合数的示例，计算公式为＝

可以将求的算法定义为一个函数，同时，在该函数中反复用到了阶乘运算，于是将求阶乘的运算也定义为函数，这样在主程序中调用组合数函数，在组合数函数中又调用阶乘函数，嵌套的关系非常清楚，可视化代码如图7所示。

通过以上几个示例，可以直观的演示模块化程序设计中的大多数核心概念，与具体编码结合，能够引导学生理解程序思想，并提高编程能力。