Empowering Today’s Learners to Become Tomorrow’s Leaders
Introduction to Blockly
Blockly is library that adds a visual code editor to web and Android apps. The Blockly editor uses interlocking, graphical blocks to represent code concepts like variables, logical expressions, loops, and more. It allows users to apply programming principles without having to worry about syntax or the intimidation of a blinking cursor on the command line.
Blockly is a client-side JavaScript library for creating visual block programming editors. It is a project of Google and is open-source under the Apache 2.0 License. It runs in a web browser. Blockly uses blocks that link together to make writing code easier, and can generate JavaScript, Python, PHP or Dart code. It can also be customized to generate code in any computer language.
The user interface of a Blockly program consists of a toolbox, which holds all the available blocks and a workspace, where you place the blocks. There is a trashcan on the workspace which deletes any blocks dragged onto it.
Blockly Learning Targets:
Student will be able to create simple directional commands,
Student will be able to create simple loops,
Student will be able to create while loops,
Student will be able to create and if-then-else statements.
Student will be able to understand fundamentals of programming such as variables, conditional and iterative execution, methods, etc.
Student will be able to understand fundamentals of object-oriented programming in Java, including defining classes, invoking methods, using class libraries, etc.
Make a screen shot of your part with the Snipping Tool 🔗↗️(follow the link for more information.) and save that image to your Computer Tech > Programming folder as well. Upload that image to your project page of your portfolio website.
Click on Text in the bar at the left and then on the Print block – it’ll appear on-screen. Click again on Text and this time click on the “ ” block at the top.
Drag the “ ” block to the right of the ‘Print’ block and they’ll join together. Now click in the area between the quotation marks on the “ ” block and type ‘Hello World!’ (without the single quotes). You’ve created your first program.
Click on the white triangle on a red background icon at the top of the screen. Your program will announce ‘Hello World!”. It’s a start but we can do better so click on the bin icon at the top to start again from scratch.
Create something like the first program but with the ‘Item’ block (under Variables) instead of the “ ” block. Run the program. It will say “undefined” because Item is a variable (an area of memory) but we haven’t yet defined it.
To define it we use the ‘Set Item To’ block (under variables) and drag a “ ” block into the hole in that block. Type ‘Hello World!’ between the quotation marks and you’ll now find that the program works the same as our first program.
That might seem pointlessly complicated but try changing it as shown in the screen shot and run it. The variable ‘Item’ ends up as a greeting to you by name. Note that we can have lots of variables each with different names by changing the word Item.
Now let’s try some arithmetic. You’ll find the relevant blocks under Math. Create the program shown and you’ll find that it calculates the correct answer. Try modifying it to do more complicated calculations. We’ll now move on to generate several results from the one program.
Generate the program shown here which contains a common programming concept called a loop. Everything inside the loop is carried out for all value of the variable i from 1 to 10. Run it to print out the five times table.
You can even have loops inside other loops. Modify the program as shown, which now uses two variables, i and j. You’ll find that it now print out the values of all multiplications from 1 x 1 to 10 x 10.
Another common feature of programming is deciding which instructions to execute depending on the outcome of a comparison. Create the program and try it out supplying positive and negative numbers and zero when prompted. You’ll have to click on the ‘*’ to add the Else if and Else parts.
We’ve now seen some very simple examples of Blockly programs but if you want to see what you’d have to have typed to do the same sort of thing with a conventional programming language, click on the tabs at the top (JavaScript etc).
Make a screen shot of your part with the Snipping Tool 🔗↗️(follow the link for more information.) and save that image to your Computer Tech > Programming folder as well. Upload that image to your project page of your portfolio website.