# How do i run blocks in javascript?

How do i run blocks in javascript?
example:
sprite.move(10) would move the sprite 10 steps,
sprite.changeX(5) would change the x by 5,
sprite.x would return the x position of the sprite
addVar('var') would add an variable in snap called "var", (i mean you could do like var [var] = [this] but yeah i want to add the variable in the snap)
customBlock.rectangle() would execute the custom pen block "rectangle",
penDown() would set the pen down,
isPenDown would report true if the pen is true,

And so on, How i do that in the run(js function () (code)) ?

I think that if you want to explore the interface between Snap! and JS, you have to read the source code. So for example, I read your question and thought "what's a block that runs some other block a bunch?" and the first one I thought of was FOR EACH. So, read objects.js and search for "for each" and you find this:

        doForEach: {
type: 'command',
category: 'lists',
spec: 'for each %upvar in %l %cla',
defaults: [localize('item')]
},


so now you know that the code that implements the FOR EACH block has the JS name "doForEach" and so you can search all the source files for that name, and you find it in threads.js:

Process.prototype.doForEach = function (upvar, list, script) {
// perform a script for each element of a list, assigning the
// current iteration's element to a variable with the name
// specified in the "upvar" parameter, so it can be referenced
// within the script.
// Distinguish between linked and arrayed lists.

var next;
if (this.context.accumulator === null) {
this.assertType(list, 'list');
this.context.accumulator = {
source : list,
remaining : list.length(),
idx : 0
};
}
if (this.context.accumulator.remaining === 0) {
return;
}
this.context.accumulator.remaining -= 1;
next = this.context.accumulator.source.at(1);
this.context.accumulator.source =
this.context.accumulator.source.cdr();
} else { // arrayed
this.context.accumulator.idx += 1;
next = this.context.accumulator.source.at(this.context.accumulator.idx!
}
this.pushContext('doYield');
this.pushContext();
this.context.outerContext.variables.setVar(upvar, next);
this.evaluate(script, new List(/*[next]*/), true);
};


The narrow answer to your question is the last line of that, where THIS.EVALUATE is called. But that may seem kind of weird, because you'd expect running the block to be inside a JS loop, rather than at the very end of the JS code. But a drawback of running in a browser is that every so often you have to let the browser deal with other windows by yielding, and when you get to run again you can't just continue where you left off; the browser doesn't save any state about your computation. So all that stuff about contexts is where we remember what to do next, after evaluating the block.

Another thing you have to learn is that commands and reporters work very differently. So besides reading FOR EACH, you might also want to read MAP to find out that part.

So how do i execute
[scratchblocks]
ask [Move how many steps?] and wait
[/scratchblocks]
in javascript?

someone must make a converter from scratchblocks to js

What do you mean? Just add the when flag clicked.

Edit: Ah JS.

That isn't the Snap! source code. That's the source code of the Snap! cloud.

If you click the Snap! logo in the editor, one of the options will point you at the source code.

yes, there should be a block that converts [blocks] to snap!'s javascript
like:
[scratchblocks]
js code of ({move (10) steps}:: grey ring) :: reporter operators
[/scratchblocks]

The closest I know of: shift-click settings, JIT compiler support
(It is red and hidden with shift-click; anything red and hidden with shift-click is experimental and could be buggy or unfinished)

and what does it do?

There is a Snap2JS by the author of the NetsBlox

Snap! is not a compiler. There is no JS code corresponding to a Snap! block. There is JS code that implements a block, but it's not a translation of the block. So, for example, if you say MOVE 87 STEPS, there's no piece of JS anywhere that has the number 87 compiled into it. @dardoro suggests Snap2JS, which is a compiler, but that's not how Snap! itself works.

It reports a JS function that would run the input block's implementation.

i wonder why it didnt work

Just do
[scratchblocks]run(JavaScript function $$[]@delInput@addInput$$ \{ [this.forward(10);] }::operators)@addInput::control[/scratchblocks]
("This" is referring to the sprite that runs the function.)

are there more functions?
like:
this.pencolor
this.effect('ghost', 100)
(idk what functions it really is)

yes, but why can't you just use the actual blocks?

what?

why it doesnt work?
code:

function move(n) {
this.forward(n)
}
move(5)


Maybe the object that's referenced is wrong. How's this:

var myself = this;
function move(n) {
myself.forward(n);
}
move(5);