Micro:bit Basics for Teachers Part 2: Javascript Blocks

Intro

In this project we’re going to focus on the code.

In part one of this series, we focused on the hardware.

If you don’t have a tech background, you might feel a bit nervous about teaching coding to students. But we want to show you that code is nothing more than commands to make your micro:bit do what YOU want it to do.

You can watch the video of this project here:

Let's code

If you open your browser and go to Microbit.org, you’ll see a big button at the top inviting you to code. Let’s code! Microbit lets you code in two separate languages, Javascript, which we’ll go over today, and Python, which we’ll get into in the next project.

You can also control your micro:bit wirelessly from your phone, using the Android and IoS apps.

About Javascript blocks

Javascript is a popular language most commonly used for web development. The Javascript editor for micro:bit includes ‘blocks.’

We’ll be focusing on using these in today’s tutorial. If you’ve used MIT’s scratch or ardublock in the past, these will look familiar.

The reference guide

Micro:bit provides a handy reference for what code does what. Right click the “Reference” button, under the header “Javascript blocks editor” to open it in a new tab.

It's helpful to keep that open in a different tab while you’re coding so you can go back and look at it if needed.

The blocks editor

Let’s start coding in JavaScript. Click the orange “Let’s code” button. This will open the javascript coding window where you’ll see some pieces that look a bit like puzzle pieces.

These are micro:bit blocks. Blocks are a visual programming language, or VPL. These drag and drop pieces make it easy for students to quickly get started controlling their micro:bit. If you click on the Javascript tab at the top of the window you’ll see the actual code behind your blocks.

This makes it easy for students to transition to coding in Javascript later on. We’ll be focusing on just the blocks in today’s lesson.

The Getting Started tutorial

If you click ‘Getting Started,’ there’s a quick and easy tutorial that interactively shows you how to use the blocks. I recommend going through it before continuing with this lesson.

In the tutorial, you'll walk through making a ‘die’ that selects a random number when you shake the micro:bit, and programming the micro:bit to show a smiley face when button B is pressed.

In this project, we'll walk you through a cute project that uses the onboard temperature sensor to make a "thermometer."

Create a new project

Let’s create a new project by clicking ‘Projects’ and 'New Project.' We'll name it ‘thermometer,’ since we’ll be getting a temperature reading.

Click the word ‘untitled’ and rename your project ‘thermometer.’

Event handlers

By default, the ‘on start’ and ‘forever blocks’ are our starting point.

These two blocks are called event handlers. They respond to an event. For instance, the ‘on start’ event handler responds once when the code is fired up on the micro:bit. It will look for and read through any blocks within the ‘on start’ event handler as soon as the program is started.

The 'forever' event handler behaves similarly, but instead of reading through any blocks once, it will read them over and over and over again until a new program is uploaded or the micro:bit is unplugged.

Help

If you have questions about what a block does, you can hover your mouse over it to get more info. You can also right click and select ‘help’ to be taken to the reference page. Hide the reference by clicking the arrow tab. You can always get back to the reference page by clicking the reference tab on the side of the page.

Make a variable

We want to read the temperature using the micro:bit’s onboard temperature sensor and show the number on our LED screen.

The first thing we have to do is make a variable for the temperature value. A variable is basically a container that holds information. You can see the options for different kinds of blocks in the side panel:

Click on ‘variable’ and choose ‘make a variable’ It’s best to label the variable with short but descriptive names. We’ll call our variable ‘temp’, short for temperature. Click “OK.” Now if we go back to our variable menu, our variable will show up there.

It’s best to label them with short but descriptive names. We’ll call our variable 'temp,' short for temperature. The temp variable will constantly update with data from our temperature sensor.

To make it do this:

• Select the ‘set variable to’ block from variables.

• Select the ‘temp’ variable from the variable dropdown to set ‘temp’ to the temperature.

• Go to the input blocks and select the temperature input.

• Replace the zero in the ‘set variable to’ block with the temperature input.

Inputs and outputs

Inputs and outputs are what make the micro:bit fun, since they allow you to interact with the world around you. The micro:bit can read data from the physical world using its onboard light sensor, accelerometer, compass, buttons and of course, temperature sensor. These are all inputs. LEDs, Radio, Music, and all of the basic blocks are outputs.

• Now we want to add an output. We’ll start by going to “basic blocks” and grabbing the ‘show number’ output. Place it on on your editor.

• We want to show the number that’s being saved in your ‘temp’ variable.

• Select your temp variable from the variables blocks.

• Drag and drop ‘temp’ to replace the ‘0’ in the ‘show number’ block with our temperature.

• Drag and drop this to your “on start” event handler.

• We want to show the number that’s being saved in your temp variable, so add your variable as the number to show.

Download your code

• Press the download button to download your code as a .hex file.

When you download the code, it gets compiled from javascript into ones and zeros that the micro:bit can store and execute.

You can also share your code by clicking “share”. This creates a link to a page where your code exists online. You can share this link with others if you’d like to share your code.

Program your device

Before uploading your code to your micro:bit, make sure you have plugged your micro:bit into your computer. Find the micro:bit on your computer. You can find it in the “devices panel” of your computer.

• Find the code in the download folder of your computer.

• Drag the downloaded code over to our micro:bit, just like dragging and dropping a file to an external drive or USB stick.

• You should see a yellow LED flashing next to your USB. This means the code is being transferred.

• As soon as the code uploads, you should see the temperature (in Celcius) scrolling across the LEDs continuously.

NOTE:

You might experience problems when using an old .hex file on new hardware. The remedy is to open the old .hex file in MakeCode and re-save the .hex file, then that file will work on both old and new hardware.

Using Logic Blocks

What if we wanted to sound an alarm if the temperature gets too hot? We would use the logic blocks for that.

• Select the ‘If then’ logic block.

Disabled blocks

When you first drag it to the canvas, you’ll notice that these blocks are greyish hued. If you remove your temperature code from the ‘on start’ event handler, it also turns greyish. That means that they’ll be excluded from the final code, since they must be within an event handler to run. It’s fine if you leave them here when you download your code. The program will just ignore them when it compiles.

Code needs to be placed within an event handler so that it will run.

You can also delete code if you want to declutter your workspace. If you want to get rid of a block you can simply select it and click “delete.”

If Then statements

"If then" statements are a common type of logic used in code. For instance, If the temperature is greater than 30 degrees Celcius, Then alert us.

• Place your temperature variable setter within the forever event handler, so that it will read the temperature continuously. The blocks should show their true colors, meaning that this code will work if we upload it to our board.

• Place your ‘if then’ block within the ‘forever’ event handler as well.

• Open the logic blocks.

We’ll use another block from the logic blocks - The comparator block. This block can be confusing, since it looks very similar to the operator block from the math blocks. The difference is that the math block performs operations, like addition and multiplication, while the comparator block compares values. You’ll also notice the math block is purple and the comparator block is green.

• Choose the comparator block from the logic blocks.

• Drag the comparator block to replace the "true" in the 'if'>'then' statement.

• Drag your temp variable into the first space, replacing your zero.

• Change the equals sign to a ‘greater than sign’ from the dropdown.

• Change the zero to a 30.

Show an alert

Let’s show an alert on the LED grid on the front of the micro:bit if it gets too hot.

You can have the micro:bit show a number, letters, or even an image. I’m going to show you how to use an image to show us when the temperature changes.

• Select ‘show icon’ from the basic blocks.

• Drag the show icon block to 'then' part of the 'if then' statement

• You can choose a pre-defined icon from the list.

• I’ll use a scrunched up face since it looks like it’s too hot. Place it within the then block. Now download your code and run it.

If Then Else

What if we want to sound an alarm if our temperature is too cold as well?

• Click on the settings button on the ‘if then’ statement.

• Arrange the ‘if’, and ‘else if’ blocks on the white canvas and make sure they snap together.

• Place any extra blocks in the grey area.

Now do the same thing as before, but change the comparator to ‘less than.’ Keep the number as zero. Select ‘basic blocks’ and choose an icon. I added a surprised face as the alert if it’s too cold.

Comments

It’s good practice to add comments to your code so you remember what it’s doing.

• Right click the icon that appears before the words on a block. A menu will pop up. Select ‘Add Comment.’

• This will cause a question mark icon to appear to the left of the previous icon.

• Click on the question mark and a small yellow box will appear into which you can write your comment.

• Make it informative. “If the temperature is too cold or too hot, show an led alert”

If then else if else

If you’d like to show an alert if the temperature isn’t too hot or just cold, you can add another “else” to our “if then” statement.

We use an else here, rather than an ‘else if’, to instruct our micro:bit what to do if the temperature conditions don’t fall within either of the previously defined ranges, greater than 30, or less than 0.

Do the same thing as before. You can copy and paste blocks using the ctrl-c and ctrl-v shortcuts.

If the temperature is just right, we’ll show a smiley face. Select a smiley face icon from the icons list.

Algorithms

One of the most important things about teaching students to code is teaching them to think logically.

You’ve probably heard of algorithms. Algorithms are basically sets of instructions, or code, that takes some input, performs a series of actions, and spits out an output.

What you just created is an algorithm. Yup, you can go tell your friends that you wrote an algorithm today!

Testing your code

You can test your code by changing the variables slightly. Change the high temperature to be one degree higher than the current temperature, and the low temperature to be one degree lower than the current temperature. You can only use whole numbers, or integers, as values.

You can use ice or a heater to test your code easily.

Code in the classroom

As you can see, this project could be useful not only for teaching computer science but also for teaching classes like chemisty, or measuring soil temperature in biology, or even creating an interactive art project.

Hopefully you feel more confident about teaching your students to code using the micro:bit. Micro:bit provides several lesson plans for teaching

Resources and going further

If you want more project ideas, you can click the “projects” tab at the top of your coding window. Instead of clicking “new” click “projects”. This has all of the code for makecode projects. Click on one and it will create the code for you in your window or walk you through a tutorial.

• For more resources, go back to microbit.org/code. You’ll see that micro:bit provides several lesson plans for teaching under ‘Lessons.’

• If you’re looking to deepen your knowledge, the CS intro course is a great place to start.Additional piece about algorithms - use if possible, but cut if too long.

• And of course, if you’re just looking for some inspiration, Hackster has a page full of cool micro:bit projects with complete instructions at hackster.io/microbit.