New JS Export in Music Blocks!

Music Blocks is a tool for education. It is meant to get people (mainly kids) started with coding concepts in a fun way, and then move them to other tools for their future growth. This is why we frequently say that Music Blocks is “a waypoint, not a destination”.

So, if Music Blocks is a waypoint, what would be the next point on a learner’s journey? One feature that Music Blocks already has in a fairly mature state is “Lilypond Export”. This allows learners to explore a text-based interpreted language for creating sheet music. Lilypond is an awesome tool, but it is not really a “programming language” (meaning that you cannot create unique programs with Lilypond, just sheet music). We wanted Music Blocks learners to have a path to learning how to create with a standard text-based programming language. This is why we created a JS editor, and why we will have JS export functionality as well.

What is JS?

JavaScript, or “JS” for short, is a programming language. Generally, JS is used to run programs–large or small-in your browser. Your browser downloads all the code from the webpage, usually consisting of HTML, CSS, and JS. HTML and CSS is not dynamic code, meaning that it does not run as a program. Your browser interprets HTML and CSS, which specifies how text, images, and visuals are to be displayed and displays them accordingly. Your browser also interprets JavaScript, but unlike HTML and CSS, JS may have variables that change depending on certain specifications such as some event (e.g. click). Because the output–or result–can be different each time, we call it “dynamic”.

JavaScript is a high-level programming language. It was originally designed as a scripting language for websites but became widely adopted as a general-purpose programming language, and is currently the most popular programming language in use[1].

Wikipedia | https://simple.wikipedia.org/wiki/JavaScript

What does JS look like?

Below is an example of a math equation. First we define two variables, x and y, as 5 and 6, respectively. “Var” indicates that we have a variable (i.e. a “box” in Music Blocks). On the third row, we define “z” as the sum of both x and y. Can you guess what the result of z will be?

var x = 5;
var y = 6;
var z = x + y;

The following file can be downloaded and opened in a browser. It runs a slightly more embellished version of the above snippet. Feel free to change the numbers and see the results for yourself.

JS Export and Console in Music Blocks

Music Blocks now has a way to export and edit JS directly within the program. Just click on the “hamburger” menu at the upper-right (three straight horizontal lines), and it will open a submenu. Then click on the two angle brackets <> icon.

Once you have clicked on the <> icon, then the export will open. You will see something like the following. It will take your Music Blocks code (pictured on the right) and generate the corresponding JS code (pictured on the left).

Great! But is this Real JS?

I often have students ask me if what they are learning is the “real thing”. Yes, it is. In fact, let’s take the example from before (i.e. z = x + y) and insert it into the JS editor. As you can see, it prints “11” at the top of the screen. It works!

Final Thoughts

One thing you should know is that Music Blocks itself is written in JavaScript. Also, as written about in an earlier post, Music Blocks is licensed as free software. What does this mean for you? This means that students and teachers may make their own changes to the software and learn JS, not just within Music Blocks, but by working on Music Blocks code directly. Music Blocks is published on GitHub, and can be downloaded from there for your use as a robust learning tool. As of this writing, we have had over 110 contributors, and growing. Enjoy!

Special thanks to Google Summer of Code student Anindya for his efforts in leading the development of this feature.