Are you good with Scratch but want to move up to coding in a modern programming language?
Well, let's learn some JavaScript. Some programmers like to say it's junk, but some people hate pizza too.
It's a powerful modern language that makes it possible to build the world's best websites, web apps, mobile apps, and even control Raspberry Pi and Arduino. You can do a LOT with it.
We're going to use woof.js (http://woofjs.com/create.html) to help you make the leap. It's a very Scratch-like interface that will feel familiar, but let you build cool stuff while learning JavaScript.
Let's go to the website.
In the image above, there are three panels.
On the far left is the "Preview" panel, similar to Scratch's stage, where all the on-screen action happens.
In the middle is the "Documentation" panel which actually contains a whole bunch of blocks to do things like you use in Scratch. Unlike Scratch, instead of dragging a block, it shows you code to make what the block would do. You copy and paste that code into the "Code" panel on the right.
The "Code" panel is a mini IDE (Integrated Development Environment) where you write and edit the code. It tries to catch errors in your code and alert you to them.
As you can see in the image above, you start off with a background set for you on line 1.
What happens if you delete that code?
No background. Try it.
Now, let's pick a background.
Click the "Sprites & Backgrounds" button in the upper right of the middle panel. That will open a panel for that button.
The top button in that panel is "Backgrounds." Click it.
And that takes you to the backgrounds panel. Let's try using that beach background.
Below it is the code you'll need to add to your project.
You can highlight and copy it, or just click the "copy" button in the upper right of the box with the code in it.
Once it's copied, paste it into the code panel.
You changed the background and you have code running.
If you look at the start code, it didn't have that second line with setBackdropStyle()
.
What do you think that does?
Try deleting the word "cover" from between the quotes and you'll get an error alert.
The development environment has caught an error. setBackdropStyle()
needs a value. Thankfully, the error is telling you the kinds of values it understands.
Try some. Type them between the quotes and then wait a second or two for the system to pick them up. If you type really slow, you may get an error message, because the system picked up only what you had typed so far. Don't freak out.
So you've now written (okay, pasted) some code, broke it, and then fixed it.
You will break your code a LOT, even when you're grown up and code professionally. Coders break their code all the time.
That's why a lot of our mentors are able to help you. They know what mistakes you made and how to fix them, because they've made those mistakes themselves... often more than once.
CoderDojo is the best place to make mistakes. No one will make fun of you or be mad at you, because they did the same thing when they were learning. And if you can make a really original mistake, you just might impress them.
Back to the main starter screen. When you start there's a fourth panel that is sort of hidden. On the right side of the "Documentation" panel is a bar with the word "Tutorials" in it. Click that bar.
That will open the tutorials. Try one or 2 per level. Try changing them before you move on to the next level. And if you want to be able to save them so you can work on them at home or at the next meeting, create an account. It's free and all you need is an email address.
Good luck! Pick a Level 1 tutorial that seems interesting and get started. If you run into problems you can't solve, ask a mentor for help.