设为首页收藏官网网盘国家资源立人课堂 今天是: 2024-04-23    "世界读书日"  推动更多的人去阅读和写作投稿

立人创客乐享社区

 找回密码
 立即注册
成都市金牛实验中学校

立人小喇叭+ 发布

信息中心 立人创客游戏化学习三乐法新课程开始啦!欢迎交流分享
04-04 10:04
立人创客社: 祝愿世界太平!地球早日康复!
01-07 11:43
jnschool 请同学们严格遵守国家网络安全规定,文明上网!
01-07 11:41
查看: 4500|回复: 0

通过blockly深层次解析学习编程原理

[复制链接] TA的其它主题
<

338

主题

1107

好友

1万

积分

社区管理员

创客导师

Rank: 9Rank: 9Rank: 9

积分
18055
威望
2974
立人币
8163
贡献
1229
大金牛币
444
乐创奖
39
乐享奖
12
乐课奖
6
立人证书
6

突出创客优秀版主荣誉管理创客元老

QQ
发表于 2020-6-7 12:29:40 | 显示全部楼层 |阅读模式 |
<

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x

Blockly概述
● 学习目标
理解Blockly的概念、编程方式。
掌握在线版和离线版Blockly的使用。
掌握Blockly各个模块的功能。
● 知识图谱

c421d2f426164c70ab5a83cc6da1ba6f.png

在本章中,我们将学习什么是Blockly及其编程方式、在线版与离线版的Blockly的使用方式以及各个模块的功能。学习完本章的内容后,我们将对Blockly有一个整体的了解。

1.1 什么是Blockly

Blockly是一种可视化编程工具,也是众多可视化编辑工具的鼻祖。2012年6月,Google发布了完全可视化的编程语言Google Blockly。Blockly代码块由类似于积木的图形对象构成。使用者通过拖动鼠标,就可以将这些“?代码积木?”拼接起来,创造出简单的功能,然后将一个个简单功能组合起来,最终构建出一个程序。相较于传统字符型的编程语言,Blockly语言无须大家考虑命令行模式下复杂的语法规则,学习成本更低,趣味性更强。
1.一种基于网页的可视化程序
Google Blockly是基于网页的可视化编程工具库,用户可以以离线或者在线的方式,在Windows、Linux和Android等平台上使用Blockly进行编程操作。
2.多种开发语言环境库
Blockly基于图形化编程设计,可以导出JavaScript、Python、PHP、Lua、Dart等多种语言。在Blockly中有一个类似语言转换器的工具箱,可以将图形化编程语言转换成多种编程语言代码,有助于用户通过图形化编程方式理解多种程序语言。
3.开源的自定义编程环境
Blockly是开源的编程工具,用户可以根据自己的需求对Blockly工具箱进行自定义设计。同时,Blockly开发工具能将用户自定义的块添加至工具箱,并在工作区工厂完成对代码的封装,如图1-1所示。

78540264fa804da98132b85e6da63db6.png

1.2 Blockly编程环境

Blockly有在线版和离线版两个版本,在浏览器的地址栏输入https://developers.google.cn/blockly/ ,访问Blockly官网,即可体验Blockly在线编程,如图1-2所示。

d7e4c533504044f49fa9ba7e58192fdb.png

离线版的Blockly无须安装,只需要在解压文件后,进入Demos并打开index.html文件,选择相应的选项即可体验。在Linux系统中,可下载TAR Ball,在终端解压文件即可;在Windows系统中,则下载ZIP File并解压即可。下载地址如下:
Github Blockly地址:https://github.com/google/blockly
TAR Ball地址:https://github.com/google/blockly/tarball/master
ZIP File地址:https://github.com/google/blockly/zipball/master
如图1-3所示即为Blockly离线版Demos。

88f47a72ea514820a0a5837e28bf994f.png

1.3 Blockly模块功能

Blockly总共分为8个模块,学习了新的函数或者命令后,就可以使用这些模块进行练习。所有的Blockly模块都存放在在线编程界面左侧的列表中,如图1-4所示。

bf5bd6a99f5045398b8be0e2338ed96f.png

使用时遵循正确的语法并进行适当的缺口对接就能实现预定功能。因此,通过对模块进行适当的组织就能轻松地实现新的想法和创意,如表1-1所示。

7bb2eaa38be247d3acb5aba2138df1ef.png
f5598998e368455aba34fc31d3f79eef.png
37ca4705ef774e82a98666a6c1ef5e3b.png

1.4 小试牛刀—游戏:拼图

学习完上述内容,相信大家对Blockly已经有了初步的认识。接下来我们通过一个游戏来进一步掌握这种类似积木拼接的编程模式,游戏地址如下:http://cooc-china.github.io/pages/blockly-games/zh-hans/puzzle.html?lang=zh-hans
游戏规则:
① 每种动物都有自己的特征。拖动模块将动物与其特征进行匹配,并为每一种动物选择合适的腿数,如图1-5所示。
② 单击“检查答案”按钮检查是否正确完成拼图,匹配正确后,游戏结束,顺利通关,如图1-6所示。

e1009dc9b79a4ae894da9afc675698c0.png


8454b2d7c705471bb5fc682cbe006eed.png

1.5 本章练习

1.进入Blockly官网,熟悉Blockly,并使用在线版Blockly输入“HelloBlockly”。
2.在本地配置离线版Blockly,并完成Plane游戏的练习。

1.6 课外拓展

计算机语言
计算机语言是指人与计算机之间“交流沟通”的语言,它是人与计算机之间通信的媒介。目前计算机语言的种类非常多,根据其功能和特性可大致分为机器语言、汇编语言、高级语言三大类。众所周知,二进制是计算机语言的基础,而这种计算机能够识别的二进制语言就称为机器语言。如果要和计算机之间进行信息传递,就需要写一长串由0和1组成的指令序列,告诉计算机下一步该做什么、怎么做,由此可见使用机器语言是十分不便的。为了减轻这种使用上的不便,汇编语言诞生了。汇编语言是用自然语言中的一些简单的单词或符号来替代一些操作的二进制指令序列,如SUB代表减法,ADD代表加法。由于计算机不能识别这些符号,所以在执行汇编语言之前需要先将其编译成计算机能够识别的机器语言。虽然汇编语言在机器语言的基础上做了一些人性化的改进,但是它的每一条指令只能完成一个非常简单的操作,这就导致汇编程序依然非常复杂,不利于学习和开发。于是,在汇编语言的基础上,又诞生了高级语言,也就是我们现在常用的开发语言,如C、C++、Python、Java等,与机器语言、汇编语言相比,高级语言更接近于自然语言,大大简化了底层的操作指令,降低了编程者的入门门槛。
TIOBE是开发语言排行榜,它会根据当前业内程序开发语言的流行程度每月更新一次(如图1-7所示)。通过这些指数,不仅可以帮助开发者根据趋势制定合理的学习路线,而且可以帮助企业及时进行招聘、开发等方面战略部署与调整。此外,通过长期的数据对比,该指数还对世界范围内开发语言的走势具有重要参考意义。

93cf12c879fc4f7ab7879cef9643b329.png


Blockly编程基础与顺序结构
● 学习目标
了解数据的含义、表示形式。
了解Blockly中的数据类型。
了解变量的定义,掌握变量的创建和初始化。
理解运算符及其优先级。
掌握顺序结构。
● 知识图谱

8ebc8172323b4e638eb7288b4b003cb3.png

在本章中,我们将学习Blockly编程的基础知识,包括数据的类型、变量的创建以及常用的运算符,如算术运算符、关系运算符、逻辑运算符和赋值运算符。此外,我们还将了解什么是顺序结构,并学习几种顺序执行的语句,如赋值语句、输入与输出语句。顺序结构是最常用的程序结构,对我们今后学习其他编程语言至关重要。

2.1 数据类型2.1.1 数据的含义

在计算机的世界里,程序的基本任务就是处理数据,无论是数值、文字、图像,还是声音、视频等,都必须转换成数字信息才能在计算机中处理,因为计算机中只能存储数字,甚至连计算机程序都是由数字组成的。如果要处理图像信息,可以把一幅图像看作由m行n列的点组成的,每一个点具有一种颜色,每一种颜色可以使用3个数据(R、G、B)来表示:R表示红色的比例、G表示绿色的比例、B表示蓝色的比例,这样就可以用m×n×3个数据表示一幅图像了。如果需要处理文字信息,例如英文,那么需要用数字来表示英文中出现的每个字母或标点符号,正如在ASCII(美国标准信息交换代码)编码标准中,用65表示字母A,用66表示字母B等,只要把用到的每个符号都进行编码(数字化),就可以在计算机中处理文字信息了。那么在Blockly中可以使用哪些种类的数据?每种类型的数据的表示形式是怎样的?下面将详细讨论这些问题。

2.1.2 数据的表示形式

在计算机系统中,常见的数据表示形式有二进制、八进制、十进制和十六进制。进制也就是进位计数制,是人为定义的一种计数方法,对于进制,要明确两个基本概念:基数和运算规则。基数也称为底数,表示组成一种进制的基本数字的个数,例如二进制的基数为2,采用0和1这2个数字,八进制的基数为8,采用0~7这8个数字;运算规则规定了如何进位,例如二进制的运算规则为“逢二进一,借一当二”,十进制的运算规则为“逢十进一,借一当十”。
1.二进制
众所周知,计算机中采用二进制代码表示字母、数字字符以及各种各样的符号、汉字等。在处理信息的过程中,可将若干位的二进制代码组合起来表示各种信息。但由于二进制数不直观,人们在计算机上实际操作时,输入、输出数值时多采用十进制,而具体转换成二进制编码的工作则由计算机软件系统自动完成。字母和各种字符在计算机中的传输普遍采用ASCII码,它用7位二进制数来表示字母和各种常用字符。对于汉字信息的表示则比较复杂,汉字有几万个,常用的汉字也有7000多个,为了统一,我国制定了汉字编码标准,规定了一、二级汉字共6763个,用两个字节来表示一个汉字。
2.十进制
十进制是我们最熟悉的数值表示形式,其书写规则是由正号或负号开头,后接一个自然数,如果是正数,那么正号可以省略。例如,-213、0、415、76、+83都是合法的十进制表示。在Blockly中,如不特殊定义,一般默认数字采用十进制表示。
3.八进制
一些编程语言中,常常以数字0作为开头来表明该数字采用八进制表示。用八进制表示整数的书写规则是:以数字0开头,后接一个八进制形式的数,如果是负数,则以负号开头。例如,0123、-087、00、+0327等都是合法的八进制形式。
4.十六进制
十六进制的书写规则是以0x开头,后接一个十六进制数,例如,0xFF03、0x123、0xAC7等都是合法的十六进制形式,而x37、287都是非法的十六进制形式。

2.1.3 Blockly中的数据类型

程序中所有数据都有特定类型,数据的表示方式、取值范围以及对数据可以使用的操作都由数据所属的类型决定。类型可以帮助编译程序生成高效的目标代码,编译程序在生成目标代码时,可按需分配存储空间并明确如何引用这个数据。确定一个数据属于某个特定的类型后,可对该数据进行哪些运算也就确定了。例如,对整数可以做四则运算;对字符串则可以进行比较、连接、判断子串等操作,但不能做四则运算。下面一起来了解一下Blockly中的数据类型。
1.数字
Blockly提供了数字输入模块?,它可以存储一定长度的数字,默认值为0。在一些计算公式中也提供了的数字输入模块,如图2-1所示。

c5cfda7182c54778bf8dbf48175aa49a.png

各数据输入模块只区分数字、字符类型,也就是说在允许输入数字的模块中,可以输入任何数字,但不允许输入字符。在程序执行过程中,程序会对输入数字类型的合法性进行检查,如图2-2和图2-3所示。

f5c2d18a8f4a43478aa4c72da029ce89.png

2.字符
Blockly中的字符输入模块为,其中输入的应是字符的ASCII编码值。由于字符数据存储的就是一个字符的编码数值,所以也可将字符数据当作一个整数。在Blockly中的基本表示形式是用双引号(“”)引用,比如“A”“Q”“a”“b”“#”“-”
“。”等。当双引号中是一个数字时,依然表示该数字,例如“65”和65的意义相同,但是同一个字母的大写和小写对应的ASCII码不同,因此为不同的字符,例如“A”“a”为不同字母。
在Blockly的字符输入模块中,允许输入任何形式的字符和数字,只要不超出特定的长度,那么都是合法的,只有在程序执行时才会检查输入是否正确。
3.字符串
在Blockly中字符串的表示和单个字符的表示形式是一样的,输入模块也是?。如图2-4所示即为Blockly提供的字符串输入模块。

4db7f8a1e3444e5999f4895a265dc14a.png

2.1.4 数据的使用

前面讲过,在Blockly的数据和字符定义过程中,程序获得了一定的存储空间,Blockly不计较输入数据或字符的类型和长度,程序员不需要考虑非法输入带来的麻烦,这给程序员带来了极大的便利。例如,程序员可以输入不同类型的数据,如图2-5~图2-7所示。

f9c732d7af1542d3bb8e125885698268.png

但是,在程序运行过程中,如果数据的长度超过程序可表示的范围或数据输入错误,那么运算结果将会出现差错。
图2-8中展示了一次乘法运算,输入数据为1111111111111111200和2,正确的输出结果应为2222222222222222400,但实际的输出结果为2222222222222222300。这是由于输入数据过长,16位后的数据将不再进行计算,并且输入数据超过16位后,运算结果将出现差错。

230a4341549b4b7795a01557929a0868.png

图2-9中使用了循环语句,在该循环语句的重复次数输入模块中,默认输入的数据为正整数;如果输入负数,那么程序默认为0;如果输入小数,则默认在其整数部分加1,如图2-10和图2-11所示。

f6e5489c04df4d9ca0fc24c44200a018.png
8b31c68a265a4b3a93f5c6f079d2f7ab.png

2.2 变量

2.1节中介绍了数字和字符,当给定一个值后,这个值在程序中将是确定的、不能改变的量,我们称之为常量,而与之对应的就是变量。顾名思义,变量就是在程序中可以根据需要改变的量。

2.2.1 变量的创建

初次打开Blockly,可以在“变量”模块中创建变量,如图2-12所示。

73e79d436329400ebe9ce2b3265c6e50.png

单击“创建变量”按钮后,会弹出定义变量名称的对话框,如图2-13所示,变量的命名方式不受限于数字或字符,但是为了使用方便,应尽量选用简单明了的字符,避免与程序中的其他名称重复,并且Blockly提供的变量定义不区分类型,只是在内存中分配一定的存储空间。

0d842050d05d47dd8ef93eeb947ed17e.png

2.2.2 变量的初始化

初始化在计算机编程中是指第一次为新创建的变量赋值,如何初始化则取决于所用的编程语言以及所要初始化的对象的存储类型等。在汇编语言中,变量的初值即初始化后的变量的值,会占用一定空间,因此不必要的初始化会造成磁盘空间的浪费,但初始化变量在一定程度上可以降低出现漏洞的可能性。因此,是否对变量进行初始化操作需要依情况而定。Blockly提供的变量初始化模块为 7d3c6dd006724864ac3f6ada5a9c363a.png ,可以在规定的长度内输入任意数字、汉字、字母或符号。

2.3 运算符及其优先级

运算符是指用来表示在数据上执行某些特定操作的符号,而参与运算的数据称为操作数。根据参与运算的操作数的个数是一个、两个或三个,运算符分为一元运算符、二元运算符和三元运算符。使用运算符把常量、变量和函数等运算成分连接起来,组合成的有意义的式子称作表达式。单个常量、变量和函数也都可以看作一个表达式。表达式经过计算后会得到一个确定的值,这个值就是表达式的值。每个表达式都具有唯一确定的值和唯一确定的类型。
Blockly中涵盖了日常使用的所有运算符,此处主要介绍常用的几类运算符:算术运算符、关系运算符、逻辑运算符和赋值运算符。
1.算术运算符
算术运算有6种运算符,如表2-1所示。

8f8186f7535f4287bf5de555b1e98f3c.png

算术运算表达式的值为其运算结果。如3+2、5-6、4*8,值分别为5、-1、32。算术运算符的表达式格式为“<操作数>运算符<操作数>”。Blockly中给出的算术运算符模块如图2-14所示。

59180b19949f4f1c9ef866fb9b8295f2.png

2.关系运算符
关系运算是逻辑运算中比较简单的一种,实际上就是比较运算,将两个值进行比较,从而判断比较的结果是否符合给出的条件,比如关系表达式a>5,如果a为6,那么表达式成立,结果为真,如果a为-1,那么表达式不成立,结果为假。关系运算符共有6种,如表2-2所示。

236be405cfb64ca6b5c1acd16d7301e8.png

在这6种关系运算符中,>、<、≥、≤的优先级相同,=、≠的优先级相同,且>、<、≥、≤的优先级顺序高于=、≠的优先级。
关系运算表达式的值只有两个:1和0,分别表示真和假。例如,4<2、2>1、1=2,其值分别为0、1、0。关系运算符的表达式格式为“<操作数>运算符<操作数>”。Blockly中给出的模块如图2-15所示。

ecaff55213c944ce832012157b1c8c7e.png

3.逻辑运算符
逻辑运算符有3种,如表2-3所示。

ef2d22f9f6f348beaae90dc9a47249c3.png

3种运算符在Blockly中分别表示为与、或、非,其中,“!”的优先级最高,“&&”和“||”优先级相等,且低于非逻辑。
逻辑运算表达式的值只有两个:1和0(真或假)。例如(5<10)||(5>20)、!(3>2),其值分别为1、0。逻辑运算符的表达式格式为“<操作数>运算符<操作数>”和“运算符<操作数>”两种形式。Blockly中给出的模块如图2-16所示。

9c79405e4c3f4e74a67287767ddf4d09.png

小提示
如果学完了上文中关于逻辑运算符的介绍,但还是不理解其中的含义,没关系,可以对照表2-4来理解Blockly中的逻辑运算符。

87ffff775d0d4bdf9377c394c00b7b1e.png

4.赋值运算符
赋值运算的值即为所赋的值。例如a=3、b=6,表示a和b值分别为3、6。Blockly中赋值运算与变量初始化的表达式相同。创建变量后使用变量赋值模块可以对变量进行赋值。例如创建了变量k,使用图2-17所示的变量赋值模块把10赋给k。

84bfa44d09384a929a9e0beec3fb08e4.png

小提示
如果你以前接触过编程,看到这里你也许会疑惑,为什么判断两个操作数是否相等的表达式与赋值运算的表达式一样?计算机又是如何区分两者的呢?
细心的同学可能已经发现了,Blockly可以把我们搭建好的模块转换成代码,而在代码当中,判断两个操作数是否相等与赋值是有区别的。“=”表示赋值语句,比如a = 5,是把5赋值给变量a;而“==”是逻辑判断,比如a == 5,是表示变量a的值是否和5相等,如果相等就返回真,否则返回假。Blockly中把逻辑判断“==”写成了“=”,是为了方便大家去理解,但实际上我们需要知道“=”和“==”是不一样的。
Blockly与其他编程语言不同,不需要过多考虑运算符的优先级问题,因为Blockly将不同的运算符集成在不同的模块中,在使用时以模块嵌套的形式出现,因此其运算顺序只能是由内到外。

2.4 顺序结构

顺序结构是最简单的程序结构,也是最常用的程序结构,只要按照解决问题的顺序写出相应的语句即可,它的执行顺序是自上而下依次执行的,流程图如图2-18所示。本章将学习几种顺序执行的语句,在这些语句的执行过程中不会发生流程控制的转移,比如赋值语句、输入输出语句。

868880b6e325456cbd74b94680ab0f0a.png

2.4.1 赋值

在Blockly中,赋值语句由语句块 3492692af6064ca3b7c062d88973c42f.png 构成,其中i指一个变量,也可以用其他字母代替,该语句块后面接的是要赋给i的值。同样地,这个赋值表达式也可以包括在其他表达式中,例如,“如果”后面接的是一个条件,其作用是当i大于0时,将一个值赋给i,如图2-19所示。

cbe05863ae3f4e6babcd52a2ddea5a9c.png

2.4.2 输入与输出

当计算机用于与外界交互时才是最有趣的,所谓的输入与输出是以计算机主机为主体而言的。输入就是将数据从输入设备(如键盘、磁盘、光盘、扫描仪等)传入计算机;输出就是将数据从计算机发送到外部输出设备(如显示屏、打印机、磁盘等),输入与输出有时并称为I/O。目前I/O的种类有很多,包括人机界面、网络接口、存储设备接口和自动机器接口。那么在Blockly中如何进行输入与输出呢?
1.Blockly的输出模块
Blockly中的输出模块为 ea346cbf41c74bf89698e71aaf57f550.png 。输出模块后面可以接各种类型的模块从而输出不同的数据。
如果输出模块后接运算表达式,例如1+1,那么运行后输出的答案就为1+1的结果2,如图2-20所示。
如果输出模块后接字符串,例如“Hello World!”,那么最终将会在屏幕上输出这一段文本,如图2-21所示。

06428c89c082454b996ec4b7d57c9967.png

输出模块后也可拼接多个模块的组合,之前我们输出了一段文本,在这一段文本的前面加上另一个模块将会得到另外一种效果,如图2-22所示,输出模块后还接了计算字符串长度的模块,最终输出的结果为这段文本的长度。

128d137ca809410390d05b3632e12976.png

小提示
使用不同的浏览器打开离线版的Blockly,部分模块的表述可能会有不同,例如使用360浏览器和火狐浏览器打开Blockly的离线版,输出模块显示为之前介绍的效果,而使用IE浏览器打开,则为 181f3f8b339b45d8a514c65d9e41aa3d.png 效果。
2.Blockly的输入模块
在Blockly中,输入模块如图2-23所示,在输入模块中既可以输入文本,也可以输入数字,通过模块后面的下拉按钮可以进行选择。

daac6e838e22492b99d0d78524ad2342.png

当运行这个模块时,会弹出一个对话框,如图2-24所示,在其中输入需要的数据,单击“确定”按钮后,输入的数据将会进入已设置的变量中,图2-24所示为用于输入数据的界面。

e2a5241d0f7b4cac883a1c7e9c378a62.png

通过上面简单的介绍,大家对输入的理解可能还不够深刻,下面我们举一个具体的例子。
首先,设置一个变量a,然后将上面的输入语句块连接在设置变量语句块的后面并运行,在出现的对话框中输入所需数据,单击“确定”按钮,数据就会被赋值给a了,如果想确认a的值是否为我们所输入的数据,可以在这段搭建好的模块下面加上输出数据块,将a的数据输出到屏幕上,这样就能确认a的值了,如图2-25所示。

2e48255226c94893a039e8063ada85f9.png

2.4.3 顺序结构程序设计举例

现在,我们对顺序结构、赋值语句以及输入输出已经有了初步了解,接下来就让我们一起来学习两个顺序结构的例子来巩固一下学到的基础知识吧。
【例2-1】 从键盘输入一个大写字母,要求将这个大写字母改用小写字母输出。
【解答】 看到这个题目,首先想到的是什么呢?我们用哪个模块来实现这一功能?在第1章介绍的文本模块中就有一个语句块是用来转换大小写的: e515e73269214b1d8ded001aeda5a596.png
这个语句块使用起来相当简单,只需要将要转换的文本连接在此语句块的后面即可,此语句块同样能根据需求的不同产生3种不同的效果,可以根据需要选择。
既然已经找到了解决这个问题所需要的核心语句块,那么后面的问题就简单了,不难看出这个题目同时用到了输入和输出,所以只需要设置一个变量用来存放所输入的数据,然后将输入的数据转化成小写并输出即可。所组成的模块及运行结果如图2-26所示。

ddf4e9ef91a245d6b3f9c024682f07d0.png

练一练
从键盘输入一个小写字母,要求改用大写字母输出。

【例2-2】 输入一个两位数,如果这两位上的数相乘大于二者相加,则输出“大”。
【解答】 第一次见到这个题目时,你可能会感到有点手足无措,但逐步分析一下就会发现这个题目并不难。在解决此问题前,首先要明确如何得到这个两位数的个位数和十位数。如果大家曾经接触过其他编程语言,就会知道两位数除以10得到的商就是十位上的数字,而得到的余数就是个位上的数字,弄清楚这个问题后,这个题目是不是就简单了许多呢?具体数据块如图2-27所示。

0558b1f740554e0b8bd5a2b7ddc49512.png

在这个拼接好的模块里,首先将输入的两位数存储到ab这个变量中,然后将计算得出的个位数和十位数分别赋值给b和a,再利用前面提到的逻辑模块中的if语句块判断大小,最后输出。运行过程与结果如图2-28所示。
练一练
输入一个三位数,如果这个三位数百位上的数与十位上的数相加大于十位上的数与个位上的数相加,那么输出“大”,如果小于则输出“小”,如果相等则输出“等于”。

76dd520cacf144b78462a443e3e92d7e.png

通过本节的讲解,相信大家对Blockly语言的顺序结构程序设计有了大概的了解,也对输入输出有了清晰的认识,语言的顺序结构在大家今后的语言学习中起着相当重要的作用,希望能引起重视。

2.5 小试牛刀—游戏:电影

下面通过一个游戏来巩固大家对本章知识的掌握。游戏地址如下:http://cooc-china.github.io/pages/blockly-games/zh-hans/movie.html?lang=zh-hans
游戏规则:
① 游戏开始前,需要观看示例。游戏任务是编写代码,实现与示例相同的视觉效果。
② 单击按钮后,执行玩家搭建好的代码块,当达到与示例相同的视觉效果后,游戏结束,顺利通关。
通关详解:
第1关:调节参数,画出与示例形状、大小相同的图形,如图2-29所示。

ca029ab41de647e894738170729df1c8.png

第2关:绘制半径为10的圆,圆心的初始位置在x=0,y=50处,如图2-30所示,使其移动到x=100,y=50的位置。

5b58cae29c184d4693d77df1203539e0.png

第3关:尝试与第2关相反的移动路径,使圆心从x=100,y=50的位置移动至x=0,y=50处,如图2-31所示。

956585f736e9421fa8cd2fc40d0a6e0b.png

第4关:按照示例在如图2-32所示位置画出4个圆,分别按照各自箭头所指的方向移动,最终位置为对面圆的起始位置,例如,右边圆的起始位置是左边圆的最终位置。


13254ca01dbb4547915691096076be03.png

第5关:按照示例用3个圆拼出米老鼠的头部形状,按照箭头所指方向向上移动,如图2-33所示。

0cff1f04aca64c38a2dee9aecf0e9bfc.png

第6关:在起始时刻一条线与x轴重叠,另一条线在界面的对称轴上,仔细观察两条线的运动轨迹,拼接代码块,达到与示例相同的效果,如图2-34所示。

34d1a1a0e1924b0eb0f26b025cb0ad22.png

第7关:观看示例,使圆按照示例中的抛物线轨迹移动,如图2-35所示。可以先计算出抛物线方程,这样更容易拼接代码块。

74e3da3a0a63480fac4f6b50f7ecec01.png

第8关:使右上角蓝色的圆(初始时界面中显示为扇形)和左下角红色的圆(初始时界面中显示为扇形)按照箭头所指方向移动,完全重合后变成绿色的圆,如图2-36所示。

d33f394522004d5a9ddc1f0378cf1f98.png

第9关:观看示例,使圆按照图中给出的轨迹移动,如图2-37所示。

d9f4b66ce04b429e8d809e647d55dfd3.png

第10关:自由发挥,利用模块画出你想要的图形,如图2-38所示。

d5d2d7e7a06b4af582ea7e01a7d6d6de.png

2.6本章练习

1.对于计算机而言,无论是数字、字母、符号,在计算机中都是以0、1的形式存储和计算,但是它们在Blockly中有不同的运算规则,为什么?

2.分别求出a=3、b=a+3、b>a这3个表达式的值和变量a或b的值,认真思考表达式的值和变量的值有什么区别?

3.对两个整数变量的值进行互换。

4.如果是做单项选择题,请根据给定的选项,输出对应的结果。例如总共有4个字符A、B、C、D。如果给出字符A,则输出“你选择了A”;如果给出字符B,则输出“你选择了B”;依次类推。

5.根据输入的值,判断是星期几。例如,输入1,则输出“星期一”。

2.7课外拓展

二进制的由来与应用
二进制的提出者是戈特弗里德·威廉·莱布尼茨(Gottfried Wilhelm Leibniz,1646—1716),他的手迹“1与0,一切数字的神奇渊源”现在保存在德国著名的郭塔王宫图书馆。
莱布尼茨被誉为17世纪的亚里士多德,是历史上少见的通才,在数学史和哲学史上都占有重要地位。在数学上,他不仅独立发现了微积分,而且他所发明的符号更被大众所接受和使用;在哲学上,莱布尼茨的乐观主义广为流传,他被认为是17世纪三位最伟大的理性主义哲学家之一。除此之外,莱布尼茨在历史学、语言学、神学、政治学、哲学、政治学诸多方向都留下了著作。
1679年,莱布尼茨发明了一种计算法,用两位数(即1和0)代替原来的十位数。法国汉学大师若阿基姆·布韦(Joachim Bouvet,汉名白晋,1662—1732)曾经向莱布尼茨介绍了《周易》和八卦,八卦是表示事物自身变化的阴阳系统,用“—”代表阳,用“- -”代表阴,用这两种符号,按照大自然的阴阳变化平行组合,组成8种不同形式。有人说莱布尼茨发现二进制是受到了中国文化的影响,也有学者认为莱布尼茨先发现了二进制,后来才看到传教士带回的八卦系统,并发现八卦可以用他的二进制来解释,认为“阴”与“阳”基本上就是他的二进制的中国版。
现在,我们使用的计算机都是采用二进制代码来表示数字、图片、文本、视频等数据,但为什么一定要使用二进制代码来表示数据呢?原因很简单:
1)计算机是由逻辑电路组成,逻辑电路通常只有接通与断开两种状态,这两种状态正好可以用1和0表示;逻辑代数是逻辑运算的理论依据,二进制只有两个数码,正好与逻辑代数中的“真”和“假”相吻合。
2)二进制运算规则简单,有利于简化计算机内部结构,提高运算速度,而且二进制与十进制等其他进制数之间易于互相转换。
3)用二进制表示数据具有可靠性高、抗干扰能力强的优点。

Blockly选择结构
● 学习目标
理解选择结构的概念。
理解、运用单分支选择结构。
理解、运用双分支选择结构。
理解、运用多分支选择结构。
理解选择结构的嵌套。
● 知识图谱

acf67262676e49caba97f4dae0f4f481.png

在前面的学习中,我们熟悉了Blockly中各种基本模块的功能,并尝试了在顺序结构中进行设计。顺序结构在程序流程图中的体现就是用流程线将程序框自上而下地连接起来,按顺序执行算法步骤。但是,我们会发现当遇到判断变量是否满足某一条件才可以执行下面的步骤时,很难只用顺序结构表达出来,这时就需要运用选择结构来对选择条件进行判断。本章首先带领大家认识选择结构,然后根据选择结构的构成分别介绍单分支选择结构、双分支选择结构以及多分支选择结构,最后介绍选择结构的嵌套。在学习完本章内容后,通过Blocky Game中的Bird游戏对选择结构的使用进行练习。

3.1 基本概念

例如,我们要判断一个数是否为正数,并输出文字结果。流程图如图3-1所示,通过判断输入的数值是否大于0,输出结果。当x>0时,输出“正数”;否则输出结果为“非正数”。这种通过判断是否满足选择条件来决定下一个步骤的过程就是选择结构。在Blockly中运用if和else语句完成选择条件,表达if语句的模块如图3-2所示。如果满足条件,则执行某一步骤。在if的左侧有一个设置按钮,单击后可以添加else if和else语句到右侧,从而进行多重判断。

54ffe0e96661465bafb95d200891158b.png

选择结构用于判断给定的条件,根据判断的结果判断某些条件,根据对条件的判断结果控制程序的流程。

3.2 单分支选择结构

单分支选择结构是最简单的选择结构,用if语句表示。若满足条件则执行某一步骤,其流程图如图3-3所示。在Blockly中则使用图3-4所示的模块来执行。在“如果”后面输入判断语句,当逻辑判断结果为真时,则执行放在“执行”部分的语句块。

7e55057f665649e5b493cfaba18454d5.png

【例3-1】 运用Blockly判断加法运算结果是否正确,若正确则提示“正确”,不正确则无反馈。
【解答】 这一过程只需要运用单分支选择结构就可以完成,即只需要运用if语句,在Blockly中,运用“如果—执行”模块即可。假设要判断1+1的运算结果,当在“=”后输入的是2时,可以弹出显示“正确”的提示框;当把“=”后的值改为0后,运行程序则无反应,如图3-5所示。

601e0dcf56de4f03b745f1e4a855a369.png

3.3 双分支选择结构

双分支结构一般用if else语句表示,当满足某一条件时,执行A步骤;否则执行B步骤。其流程图如图3-6所示。在Blockly中需要在“如果—执行”模块的基础上添加“否则”部分,最终显示如图3-7所示。和单分支选择结构一样,在“如果”后面输入判断语句,当逻辑判断结果为真时,执行放在“执行”部分后面的语句块;当逻辑判断结果为假时,执行放在“否则”部分后面的语句块。

3acbc1ce1028403282855bde2042ee5a.png

【例3-2】 运用Blockly判断加法运算结果是否正确,若正确则提示“正确”,不正确则提示“错误”,使用双分支选择结构。
【解答】 我们只需要在单分支选择结构示例的基础上,为逻辑判断错误的情况添加“否则”模块,后面加上输出“错误”即可。同样以判断1+1的运算结果为例,当我们输入的是2时,可以弹出显示“正确”的提示框;当把“=”后的值改为0后,则弹出显示“错误”的提示框,如图3-8所示。

5ca18caee8f14cbf944ff303f7b9d52d.png

练一练
输入一个变量,判断该变量是否可以被3整除,并输出结果“可被3整除”或“不可被3整除”。

3.4 多分支选择结构

多分支选择结构由if和else if语句构成,其中可以有多个else if结构,其流程图如图3-9所示。在Blockly中使用多分支选择结构时,需要在单分支选择结构中添加“?否则如果?”模块,该模块可以不限数量。在“?否则如果?”模块后面可以添加“?否则?”模块,也可以不添加,最终形式如图3-10所示,这些都是多分支选择结构。

8b3357f5cc2a4049a869514a44c37bbe.png

小提示
多分支选择结构中可以有多个选择判断部分,但是除第一个选择判断部分外,其他部分都是在上一个判断的False分支上。
【例3-3】 班里面需要做一个成绩统计,成绩在90分以上输出A,在80~90分之间输出B,80分以下输出C。
【解答】 这里需要将分数做3个分段,一个分段是大于90分的,输出A;剩余的分数中,大于80分的输出B;否则输出C。根据判断条件,最终在Blockly中制作出语句模块,如图3-11所示。

02299eacfaee4ff28653dc2312596e28.png

练一练
统计班级的分数段,一共有“90~100”“80~90”“70~80”“60~70”和“60以下”5个分数段。要求输入成绩,显示出属于哪个分数段。

3.5 选择结构的嵌套

选择结构的嵌套实际上就是在选择结构中再放置一个或多个选择结构,实现选择结构的嵌套。在Blockly中实现选择结构的嵌套,需要将多个“如果—执行”模块套用。可以将嵌套的“如果—执行”模块放置在“执行”模块的后面,如图3-12a所示;也可以放置在“否则”模块的后面,如图3-12b所示。但是将一个新的“如果—执行”模块放置在“否则”模块后面时,这种形式等同于在“如果—执行”模块的基础上添加“否则如果”部分。比如图3-12b中搭建的模块的意义与图3-12c中的模块相同,也就是当选择结构嵌套部分放在“否则”模块中时,可以简化为多分支结构。

6f578253257f431b8dc415ecc89fc53a.png

小提示
选择结构的嵌套没有固定的模式,也没有规定嵌套部分需要放置在哪一部分,只要选择结构内有一个或多个选择结构,就是实现了选择结构的嵌套。
【例3-4】 我们知道在平年中2月有28天,闰年中2月有29天,那么怎样利用Blockly编写一个判断年份是否为闰年的程序呢?
【解答】 要判断某个年份是否为闰年,首先需要判断该年份是否可以被4整除,如果不可以被4整除,那么这个年份肯定不是闰年。在可以被4整除后,还需要进一步判断这个年份的后两位是否为0,即是否可以被100整除。如果不可以被100整除,则这个年份一定为闰年;如果可以被100整除,还需要判断这一年份是否可以被400整除。如果可以被400整除,那么这个年份是闰年;如果不可以被400整除,则是平年。整个判断过程如图3-13所示,在Blockly中实现这一判断过程,需要将3个选择结构进行嵌套来完成。最终选择结构的嵌套部分在Blockly中的实现形式如图3-14所示。

62c04bb7dd2a4df5bfc7ce5ae2c03271.png


0cd97fa879ce41a19ba4a9913ce37906.png

练一练
创建3个变量,在Blockly中使用选择结构的嵌套形式,比较3个变量的大小,并将这3个数由大到小排列。

3.6 小试牛刀—游戏:鸟

学习完如何在Blockly中使用选择结构后,我们通过一个游戏来熟练掌握这种程序结构,游戏的地址如下:http://cooc-china.github.io/pages/blockly-games/zh-hans/bird.html?lang=zh-hans
游戏规则:
① 我们需要通过控制代码来让鸟捉完虫子后回到鸟巢,并保证不会撞到墙。
② 代码主要由选择结构和逻辑判断组成。
③ 单击“运行程序”按钮后程序就会执行右侧的代码。回到鸟巢后,游戏结束,顺利通关。
通关详解:
第1关:让鸟沿着45°方向向前飞行,捉完虫子后回到鸟巢,如图3-15所示。

c45670d2cdfe48bc922b215a934dc89f.png

第2关:让鸟在捉到虫子前沿0°向前飞行,捉到虫子后沿90°飞行,回到鸟巢,如图3-16所示。
第3关:让鸟在捉到虫子之前沿右下方飞行,捉到虫子之后再沿右上方飞行,如图3-17所示。


9684ed6128b7488fb26f9ace6748bcbb.png


99e4dfb883f94946904e7c2296c58f01.png

第4关:让鸟在飞行横坐标小于80时,向右飞行;横坐标不小于80时,向下飞行到达鸟巢,如图3-18所示。
第5关:让鸟在飞行纵坐标大20时,向下飞行;纵坐标不大于20时,向左飞行到达鸟巢,如图3-19所示。
第6关:当鸟捉到虫子前沿右斜下方飞行,捉到虫子后判断鸟所处位置的纵坐标是否小于80,当小于80时,向上方飞行;当不小于80时,向左方飞行,如图3-20所示。


0fec2ef59b98421793ee8a4d06229631.png


98abf7c4381844b6a8802c86382192b0.png

第7关:先让鸟沿左下方飞行,越过下面的阻拦物至纵坐标40处,然后令其在横坐标不超过80时,沿右斜下方飞行,捉到虫子;随后在纵坐标不超过20时,沿左方飞行回到鸟巢,如图3-21所示。


c9762cdd438f477791b6b1718b8049b5.png


214c42c0454a4b2f8030c94376ab6f78.png

第8关:当同时满足鸟没有捉到虫子和飞行横坐标小于50时,沿右上方飞行;然后设定没有捉到虫子和飞行横坐标大于49时,沿右下方飞行,令鸟捉到虫子。捉到虫子后判断鸟所处位置的纵坐标是否小于50,当小于50时,令鸟沿着左上方飞行至界面中点;随后改为沿右上方飞行,回到鸟巢,如图3-22所示。


5754adc511fb4045a4e600d2bc66240e.png

第9关:当同时满足鸟没有捉到虫子和飞行横坐标大于50时,沿正左方飞行;然后设定没有捉到虫子和飞行纵坐标大于20时,沿正下方飞行,令鸟捉到虫子。捉到虫子后判断鸟的横坐标是否大于40,当小于40时,令鸟沿着右斜上方飞行,随后改为沿右斜下方飞行,回到鸟巢,如图3-23所示。

595d7436aac54d9798396f54a6b56924.png

第10关:当没有捉到虫子时,若鸟的飞行横坐标小于40,则沿右斜上方飞行;若大于40,沿右斜下方飞行。捉到虫子后,当鸟的横坐标大于40时,沿左斜上方飞行,小于40时,沿左斜下方飞行,回到鸟巢,如图3-24所示。

5468da49ca584a32b333f0a99968f416.png

3.7 本章练习

1.给出一个不多于5位的正整数,请在Blocky中实现以下要求:
1)求出它是几位数;
2)分别打印出每一位数字;
3)按照逆序打印出各位数字,例如原数为321,应输出123。

2.函数y=f(x)表示如下,编程实现输入一个x值,输出y值。请在Blockly中实现这一函数。

2e3c0c01f3d142669c18bace50379ee4.png

3.自己上网查资料,搜集有关气象风级表的信息,比如0级表示无风,12级表示飓风等,试在Blockly中编写程序,输入一个风级,输出相应的概况,如名称、速度等。

3.8 课外拓展

开源软件的由来
开源软件,全称为开放源码软件(Open Source Software),顾名思义,它是指源码可以被公众使用的软件,而且开源软件的修改和使用一般不会受到许可证的限制。关于开源软件的起源,可以追溯到20世纪60年代的UNIX的诞生。
1969年,贝尔实验室的工程师开始开发UNIX。在此后的10年里,UNIX在学术及商业机构中得到了广泛的应用。许多机构在使用UNIX的过程中,对其功能进行了扩展和改进,并衍生出许多新的产品,如BSD(Berkeley Software Distribution)、Linux等。但是好景不长,贝尔实验室逐渐意识到了UNIX的商业价值,于是不再将UNIX的源代码免费授权给学术和商业机构了,甚至开始对之前UNIX的衍生版本声明版权权利,也因为这一举动,引发了许多版权纠纷。从某种程度上看,UNIX在开源方面起了很小的作用。
1984年,理查德·斯托曼发起了GNU项目,与此同时,自由软件的概念也已诞生,GNU项目的贡献者旨在开发一个让每个人可以自由、免费使用的软件。后面为了协助GNU计划的开展,理查德·斯托曼推动并建立了自由软件基金会。1991年,Linux内核诞生,并且伴随着Linux热度逐步升高,它也成了GNU计划的最终产物。也正是基于这些原因,时至今日,只要一提到开源,大家首先想到的就是Linux。
其实开源软件不仅有Linux,还有很多比较知名的,比如集成开发环境Eclipse、Linux下的文本编辑器VIM、Android操作系统、Python编程语言,Apache网页服务器,Arduino单片机等。其实还有一个在开源发展历史中具有里程碑意义的软件—Github,由于它所提供的软件源代码托管服务,使得更多的开发者参与到开源项目中来,任何人都可以将自己的项目托管到Github上,他人能非常方便地查找到感兴趣的项目及源代码,而且可以与项目所有者以协作的方式开发。
“开源软件”既代表一种哲学思想,也代表一种软件发展模式。在像Linux这样的开源项目中,软件是免费共享的,其“源代码”(经验丰富的程序员能够阅读并理解的编码指令)是公开发布的,以便其他程序员学习、分享和修改,众人拾柴火焰高,开源会越来越流行,越来越强大。



楼主热帖
立人创客、创客立人
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

展开
Loading...
快速回复 返回顶部 返回列表