JavaScript / Scratch flashcards

ChocolatePi

I'm currently working on a series of flashcards to help the conversion to Scratch to JavaScript go smoothly for other Scratchers.
Here's a sample card:

I'm gonna be working on stuff like control structures, variables, lists, etc, but not stuff that includes media such as sounds, looks, or pen. Right now I only have the “if” one done but if anyone wants more I'd be more motivated to make these.

Some blocks I'd want to add:

Repeat
Repeat until
Forever
Wait
Wait until
Variable blocks
List blocks
Operators blocks

CatsUnited

I'm mainly focusing on learning Java but I need to know more JS.

ChocolatePi

CatsUnited wrote:
I'm mainly focusing on learning Java but I need to know more JS.

Most basic control structure syntax is the same in curly-brace languages.

NickyNouse

That is super gorgeous (I'm always amazed by how great blocks look on different backgrounds lol) and I bet it'd be really handy too!

One thing to note: In JS, any structure that works like “forever” is probably a really bad idea. Something like while (true) {…} will just freeze up your code or crash the tab. The closest you can get away with is setInterval, but I'd strongly recommend something event-based instead.

ChocolatePi

NickyNouse wrote:
That is super gorgeous (I'm always amazed by how great blocks look on different backgrounds lol) and I bet it'd be really handy too!

One thing to note: In JS, any structure that works like “forever” is probably a really bad idea. Something like while (true) {…} will just freeze up your code or crash the tab. The closest you can get away with is setInterval, but I'd strongly recommend something event-based instead.

lol you're right! i hadn't thought about that. maybe in the “forever” card i'll just put something about trying to work around it.

djdolphin

NickyNouse wrote:
The closest you can get away with is setInterval, but I'd strongly recommend something event-based instead.

And if you're using a canvas, you should do something like

function step() {
  // leedle
  requestAnimationFrame(step);
}
step();

Last edited by djdolphin (May 3, 2015 00:46:38)

DigiTechs

is more like this in JS:

function code(){
   -- body
   setTimeout(code, 10);
}
code();

EDIT: Whoops. I forgot that [code js] exists.

Last edited by DigiTechs (May 3, 2015 11:40:45)

MegaApuTurkUltra

I guess forever is a problem. My original post stated that it should just be a while(true) but I guess I see how that wouldn't really work.

I support djdolphins requestAnimationFrame idea, that can be used for any DOM-manipulation or canvas related loops, the only problem is that defocusing the browser tab can cause the frames to stack up and crash once you switch back, so you have to be careful.

Maybe to keep it easy and simple, you should use setInterval instead. Make sure people know about clearInterval though

Last edited by MegaApuTurkUltra (May 3, 2015 15:39:18)

jayhss

DigiTechs wrote:
is more like this in JS:
function code(){
   -- body
   setTimeout(code, 10);
}
code();
EDIT: Whoops. I forgot that [code js] exists.

Forever block would be like var draw = function() { };

iamunknown2

DigiTechs wrote:
is more like this in JS:
function code(){
   -- body
   setTimeout(code, 10);
}
code();
EDIT: Whoops. I forgot that [code js] exists.

Nope. It's more like

while(true) {
    // Your code here!
};

Last edited by iamunknown2 (June 25, 2015 05:24:26)

iamunknown2

Then the smaller Scratchers will demand how to move sprites and make costumes etc…

ChocolatePi

iamunknown2 wrote:
Then the smaller Scratchers will demand how to move sprites and make costumes etc…

Why would smaller Scratchers even use these anyway?

iamunknown2 wrote:
DigiTechs wrote:
is more like this in JS:
function code(){
   -- body
   setTimeout(code, 10);
}
code();
EDIT: Whoops. I forgot that [code js] exists.
Nope. It's more like
while(true) {
    // Your code here!
};

Read the posts above. If I ever finish these, the forever block won't be in the cards.

iamunknown2

ChocolatePi wrote:
iamunknown2 wrote:
Then the smaller Scratchers will demand how to move sprites and make costumes etc…
Why would smaller Scratchers even use these anyway?

Their starter projects probably feature a moving Scratch Cat.

Last edited by iamunknown2 (June 27, 2015 04:11:03)

djdolphin

iamunknown2 wrote:
ChocolatePi wrote:
iamunknown2 wrote:
Then the smaller Scratchers will demand how to move sprites and make costumes etc…
Why would smaller Scratchers even use these anyway?
Their starter projects probably feature a moving Scratch Cat.

ChocolatePi wrote:
Why would smaller Scratchers even use these [JavaScript/Scratch flashcards] anyway?

Last edited by djdolphin (June 27, 2015 13:57:32)

NickyNouse

iamunknown2 wrote:
ChocolatePi wrote:
iamunknown2 wrote:
Then the smaller Scratchers will demand how to move sprites and make costumes etc…
Why would smaller Scratchers even use these anyway?
Their starter projects probably feature a moving Scratch Cat.

uhm JS isn't usually used for the same things Scratch is. Personally, I use JS more for processing data and displaying it than for moving elements around the page. If I wanted to make a visual game, I'd probs use canvas, which is a whole 'nother ballpark, rather than move elements around.

chuckdaboss

cool, but what about function not in scratch, like rect(13,37,13,37); ?

ev3coolexit987654

This is awesome!

could be

window.setTimeout(, 1*1000);

The reason there's a comma is because setTimeout takes 2 arguments

iamunknown2

NickyNouse wrote:
uhm JS isn't usually used for the same things Scratch is. Personally, I use JS more for processing data and displaying it than for moving elements around the page. If I wanted to make a visual game, I'd probs use canvas, which is a whole 'nother ballpark, rather than move elements around.

But New Scratchers won't understand. Plus, they would say:

BUT EVERYBODY'S MAKING COOL GAMES IN HTML5! I DON'T WANT TO MAKE AN ADVENTURE GAME! I DON'T WANT TO MAKE WEBSITES! I WANT TO LEARN HOW TO MAKE A SCRATCH CAT MOVE NOWWWWWWW!!!!!!!!!!!!!! I WANT TO LEARN HOW TO MAKE MINECRAFT MODS IN JAVASCRIPT!!! I WANT TO KNOW HOW TO MAKE 3D MARIO IN JAVASCRIPT!!!

So…

Last edited by iamunknown2 (June 27, 2015 23:57:08)

Firedrake969

NickyNouse wrote:
iamunknown2 wrote:
ChocolatePi wrote:
iamunknown2 wrote:
Then the smaller Scratchers will demand how to move sprites and make costumes etc…
Why would smaller Scratchers even use these anyway?
Their starter projects probably feature a moving Scratch Cat.
uhm JS isn't usually used for the same things Scratch is. Personally, I use JS more for processing data and displaying it than for moving elements around the page. If I wanted to make a visual game, I'd probs use canvas, which is a whole 'nother ballpark, rather than move elements around.

Better than using Flash xD

If you want to do serious data processing, something FO is best like Haskell/F# or even Python w/Numpy (and Django if you want it to be a webapp).

Rumanti

@iamunknown2, I believe @ChocolatePi does not intend these for “just anyone”, but more for peoples moving on who knows what they are doing..

Discuss Scratch