Coding in JavaScript

The ability to easily toggle between the blocks view and the JavaScript view in MakeCode really helps make this a “low floor, high ceiling” learning environment. Those with more experience coding can flip the JavaScript toggle button at the top-center of the screen, and the blocks are transformed into the version of JavaScript that they represent. Students who finish a task early can be given the challenge of analyzing and recreating their code in JavaScript. They will find several useful learning features: the blocks in the Toolbox drawers are now blocks of JavaScript code snippets, bubbles appear with additional clarification when the mouse hovers over lines of JavaScript information, autofill suggestions appear in a menu when beginning to type a line of code, and the toggle button works in reverse - from JavaScript back to blocks. These advanced learners might even make a new program exclusively in JavaScript, and they can do a presentation or other reflection on what they have learned.

Here is code related to the Calculator Garage project.

Blocks in the editor for the Calculator Garage project

This same code shifts from blocks to reveal the underlying version of JavaScript at the flip of the toggle button at the top-middle of the screen.

Code in the JavaScript editor for the Calculator Garage project

The Toolbox drawers now contain lines of JavaScript.

Toolbox drawer with JavaScript code instead of blocks

When the mouse hovers over text in the JavaScript view, an information bubble appears to help clarify.

Tooltips for functions on mouse hover

When you begin typing in the JavaScript view, a menu of autofill options appears.

Autocomplete for typed code