Blockly

In Blockly, you drag and drop puzzle pieces that snap together to make a program.

In the screenshot below, you can see a program that draws random Etch-A-Sketch patterns. In this version of Blockly (it can be customized into an arbitrarily large number of variants), we have a drawing surface in the upper left corner, a workspace for building programs in the upper right corner, and a little window in the lower left corner that displays the Javascript code that is actually running under the covers to do the work. Most Blockly variants omit this last little window, but in this book, we want to highlight the Javascript code, since that is what we want to teach.

When we begin a Blockly program, we are presented with a nearly blank slate:

There is one block in the workspace, the "move forward" block. If we click on the Commands link in the workspace, it opens up to show us more commands.

You can drag any of these commands to the right, and drop them into the workspace. By aligning the notches in the puzzle pieces, you can snap the parts together to make a program.

Here is a program that draws a square:

You can play with Blockly yourself here.

Now let's look at the Javascript window:

Draw.penDown();
for( let count2 = 0; count2 < 4; count2++ )
{
  for( let count = 0; count < 5; count++ )
  {
    Draw.moveForward();
  }
  Draw.turnRight();
}
Draw.penUp();
Draw.turnLeft();
Draw.moveForward();

Javascript is what we call an object-oriented language. We create and use objects, which are containers for code and data.

In the code shown in the Javascript window, we can see an object called Draw. This object has some methods, which are collections of commands that tell the computer what to do. Some of the methods in the Draw object are penDown(), moveForward(), turnRight(), turnLeft(), and penUp().

We can also see another statement in the Javascript language, the for statement. It is used twice in our program to draw a square. It has three parts. The first part declares a variable (count or count2), and sets its initial value, in this case zero. The second part says to execute the body of the for loop a certain number of times. In the first case, the code will be executed as long as count2 is less than 4. The third part of the for statement is the re-initialize part. It changes the value of the loop variable. In this case, it increments it (adds one to the value) using the operator ++.

The body of the loop is the statement that follows the last parenthesis in the for statement. It can be a single statement, or it can be a group of statements enclosed in curly brackets, as we see in this program.

The first for statement controls how many times the second one is run. In this case, four times, once for each side of the square. Both the inner for statement and the Draw.turnRight() statement are run four times.

The inner for statement controls how long the line is, and thus how big our square will be. It says to move forward 5 times.

At the end of our program, we lift the pen, turn left, and move forward a step. This is simply to move the little man out of the way so that we can see the square.