带你读《Blockly创意趣味编程》之二:Blockly编程基础与顺序结构

简介: Google Blockly作为一种可视化编程语言,通过类似拼图的方式构建出一个程序。本书配有丰富的案例、图片,对Blockly的基础知识、程序结构以及高级使用进行了详细的介绍。在每一章结束后都搭配一个游戏,帮助巩固本章知识,反思学习效果,更快速地上手Blockly编程。此外,每一章的课外拓展资料可以帮助了解计算机的发展。

点击查看第一章
点击查看第三章

02

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

image.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所示。

image.png

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

image.png

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

image.png

2.1.4 数据的使用

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

image.png

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

image.png

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

image.png
image.png

2.2 变量

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

2.2.1 变量的创建

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

image.png

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

image.png

2.2.2 变量的初始化

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

2.3 运算符及其优先级

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

2.4 顺序结构

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

image.png

2.4.1 赋值

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

image.png

2.4.2 输入与输出

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

2.4.3 顺序结构程序设计举例

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

image.png

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

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

image.png

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

image.png

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

2.5 小试牛刀—游戏:电影

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

image.png

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

image.png

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

image.png

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


image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.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)用二进制表示数据具有可靠性高、抗干扰能力强的优点。

相关文章
|
8月前
|
Java C++ Python
编程的奇妙世界:膛目结舌的代码技巧探秘
编程的奇妙世界:膛目结舌的代码技巧探秘
|
存储 C++
魔幻而精妙:探秘杨辉三角的奥秘
在这篇文章中,我们将深入研究题目 杨辉三角的内涵与解决方法。杨辉三角是数学领域的一颗璀璨明珠,通过对该问题的解析,笔者将揭示它独特的规律与生成方式。
130 0
|
8月前
|
C语言
【C语言】“分⽀与循环第一章:开启创新之门,探索无尽可能性的第一篇章“2
【C语言】“分⽀与循环第一章:开启创新之门,探索无尽可能性的第一篇章“2
|
8月前
|
C语言
【C语言】“分⽀与循环第一章:开启创新之门,探索无尽可能性的第一篇章“1
【C语言】“分⽀与循环第一章:开启创新之门,探索无尽可能性的第一篇章“
|
8月前
|
数据采集 算法 Java
业余爱好者想入门编程,一定远离那些只会说No的家伙,尤其程序员
业余爱好者想入门编程,一定远离那些只会说No的家伙,尤其程序员
73 2
|
8月前
|
前端开发 算法 JavaScript
快来get策略模式,告别编程困惑,轻松变身编程高手✨
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
存储 编译器 程序员
<<c和指针>>温故及问题研讨(第三章)
这篇文章向大家分享<<C和指针>>第三章的内容–数据,这篇文章在专栏:书籍分享中,有兴趣阅读更多关于<<C和指针>>的朋友可以来浏览一下.和之前一样,我分享的内容是我认为容易被忽略的点,和C语言中更接近于底层的一些逻辑.有些内容我在C语言的学习中已经分享过了的,我会给出之前的博客链接并且跳过这一段.
|
JavaScript 前端开发 Java
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
2753 0
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
|
存储 人工智能 算法
练了那么多,为啥还不会编程
Python 技术已经一岁多了,持续不断地推出新知识、新技术、新技巧,不过很多童鞋存在一个疑问:学这么多编程知识、技术、技巧到底有什么用?对呀,技术日新月异,层出不穷,解决方案如雨后春笋,对于我们普通人来说,编程到底有什么用,今天我来谈谈这个问题,期望对你有所启发。
178 0
练了那么多,为啥还不会编程