4.1 Expressions and Math

So far, everything in our programs have been very much static. Not only is there no interactive pieces to it, but there is also a large amount of just placing numbers into the blocks and hoping it works. While this is fine for small programs (and picking up a new technology), it will quickly get old as your programs grow larger and larger. Even in the previous chapters, there were times when letting Blockly perform our computations would have saved ourselves some headaches. Today, We will learn what types of computation Blockly can perform.

Hint: It's basically anything we would want to do mathematically!

4.2 - Operators and Operands

The word Operator sounds intimidating, and might be unfamiliar to many of your in the class. However, I promise you have worked with them in the past. An operator is just a symbol used in mathematics to represent some form of computation. For example, + is an operator, as is - and ÷. These stand for addition, subtraction, and division respectively. The only symbol which may look different from what you are used to is *, which stands for multiplication.

Each one of these operators is used to operate on two values which we call Operands. Again, this is just the formal term for the numbers which surround the operator. Consider the example \(1 + 2\). Here, both 1 and 2 are operands for the + operator. The good news is that the computation works exactly as you would expect.

4.3 - Blocks for Computation

The block for performing arithmetic computation is found under the Math section of our toolbox, and looks like . This block contains all of the options for doing addition, multiplication, subtraction, and division. It also includes the ^ operator, for computing exponents, but we probably won't make extensive use of that until much later.

Looking at the block, we see two openings in the middle, surrounding the operator dropdown selector. In these openings, we can not only add a number block (), but also can put one of our variable blocks we learned about in chapter 3 ().

The other important defining feature of this new block is the adapter on the far left. This adapter can be used to connect to a block for setting the value of a variable! So we can store our newly computed values in a variable for use later in the program!

4.4 - Debugging

Occasionally, we will run into trouble where we perform some calculation in our programs, but the program doesn't run correctly. Sometimes the program won't run at all, and other times the program will run but it won't do what we were expecting. These errors are referred to as bugs, and eliminating bugs from our program will make sure our programs work flawlessly all the time.

There are a lot of ways to go about debugging. We will see later how we can find most of your bugs by hand. For the time being, most of your errors are going to be such that just seeing their values will help tremendously. Luckily, there is a block that can be used for printing values within your programs ().

The print block will interrupt the execution of the program, and will display an alert window within your browser with the value you requested to be printed. If there are multiple print blocks in your program, they will be processed in order just like all of the other blocks. This means a program with 3 print blocks will create 3 alert windows before the final result appears in your program.

4.5 - Order of Operations

The last detail we are going to cover with the arithmetic block deals, again, with the adapter on the left side of the block. That adapter is the same shape as the number and variable blocks. This means that our computations can bet fairly complex, by placing another arithmetic block into one of the openings on another arithmetic block.

Most modern programming languages follow the standard mathematical order of operations (PEMDAS). Javascript, the language running behind the scenes here, is one of those languages. However, the way the arithmetic blocks nest means that our order of operations is less dictated by our order of operations, and more dictated by how deeply they are nested into the blocks. You can consider each arithmetic block to be surrounded by its own set of parenthesis. Consider the following expressions:

The simplest way to determine what the order of operations is within blockly is to perform the computations by hand, starting at the block that is nested the deepest. From there, you simply work your way up until you have finished the computation for both operands of the top most arithmetic block. For the time being, you probably won't be using too many levels of nesting in your blocks. However, it is a good thing to keep in mind going forward.

Execises

For the following Blockly programs, determine what the value that appears in the alert dialog will be. You can check your answer with the environment below.