Hi Everyone!
Today I wanted to show you how to get your students making a simple Javascript Mod.
As always, when using a new language or application it is good to start with the Hello, World! program (where you make the computer print/say “Hello, World!”).
To start, have your students click on Mod at the top of the homepage and create a new mod called “Simple_Javascript_Mod” choosing as the language:
The tile for this mod will appear, your students should click it to open the mod:
Then click on the </> Code button:
Now they should see a blank Javascript file:
But what to write? I like to tell my students to look at mods that they have already written in Blockly and use those as a starting place.
In a separate tab, your students should go to the LearnToMod badges (under the Learn tab) and choose the Saying Hello badge under Learning To Program->Functions:
If they haven’t already, have them complete the code:
Then, they should click on the button at the bottom-middle part of their screen:
They should see the Javascript for this blockly code:
From here, it is fairly obvious which block is associated with which line of code.
One suggested unplugged activity is to print out blocks and Javascript codes and have the students match them up!
Tell your students you want them to write the following code in Javascript:
The solution is this:
Common Mistakes to Watch out For
When you move your students to writing textual-based code (vs. block-based) there are a number of things that can go wrong. Here are a few to watch out for:
- Spelling – Students have to spell everything exactly right to get it to work. ‘Hello, World!’ can be misspelled, but if anything else is misspelled then the code will not work.
- Curly Braces – Functions (like main) need to have curly braces {} around the code that is meant to be inside the function. In Blockly the block wraps around everything, in Javascript the curly braces wrap around everything.
- Spacing– In Javascript, the spacing is very important. Notice that there are no spaces between “me” and the “.” (above), and there are no spaces between the word sendMessage.
- Semi-Colon – In Javascript, any line of code that isn’t a curly brace or a function must end in a semi-colon. This tells the computer that you are done with that line and are moving on to the next (like a period in sentences).
Do you have ideas for integrating Javascript into your LearnToMod classroom? Tweet at us about it @LearnToMod with the hashtag #teachcs.
Happy Modding!
Dr. Guthals