mirror of
https://github.com/google/blockly.git
synced 2026-01-14 12:27:10 +01:00
5c541c6f99
Using 123 as a better indicator to the user this block can represent any number, and the user should replace this value with their own desired number.
253 lines
8.5 KiB
HTML
253 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Blockly Demo: Step Execution with JS Interpreter</title>
|
|
<script src="acorn_interpreter.js"></script>
|
|
<script src="../../blockly_compressed.js"></script>
|
|
<script src="../../blocks_compressed.js"></script>
|
|
<script src="../../javascript_compressed.js"></script>
|
|
<script src="../../msg/js/en.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><a href="https://developers.google.com/blockly/">Blockly</a> >
|
|
<a href="../index.html">Demos</a> > Step Execution with JS Interpreter</h1>
|
|
|
|
<p>This is a demo of executing code step-by-step with a sandboxed JavaScript interpreter.</p>
|
|
|
|
<p>The generator's <code>Blockly.JavaScript.STATEMENT_PREFIX</code> is assigned <code>'highlightBlock(%1);\n'</code>,
|
|
where <code>%1</code> is the block id. The call to <code>highlightBlock()</code> will highlight the identified block
|
|
and set the variable <code>highlightPause</code> to <code>true</code>.</p>
|
|
|
|
<p>"Parse JavaScript" will generate the code and load it into the interpreter. Then, each press of the
|
|
"Step JavaScript" button will run the interpreter one step until the <code>highlightPause</code> is true.
|
|
That is, until <code>highlightBlock()</code> has highlighted the block that will be executed on the next step.</p>
|
|
|
|
<p>→ <a href="https://developers.google.com/blockly/guides/configure-blockly/web/running-javascript#js_interpreter">More info on running code with JS Interpreter</a></p>
|
|
|
|
<p>
|
|
<button onclick="stepCode()" id="stepButton">Step JavaScript</button>
|
|
</p>
|
|
|
|
<div style="width: 100%">
|
|
<div id="blocklyDiv"
|
|
style="display: inline-block; height: 480px; width: 58%"></div>
|
|
<textarea id="output" disabled="disabled"
|
|
style="display: inline-block; height: 480px; width: 38%;">
|
|
</textarea>
|
|
</div>
|
|
|
|
<xml id="toolbox" style="display: none">
|
|
<category name="Logic">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
</category>
|
|
<category name="Loops">
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<block type="math_number">
|
|
<field name="NUM">10</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="controls_whileUntil"></block>
|
|
</category>
|
|
<category name="Math">
|
|
<block type="math_number">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic"></block>
|
|
<block type="math_single"></block>
|
|
</category>
|
|
<category name="Text">
|
|
<block type="text"></block>
|
|
<block type="text_length"></block>
|
|
<block type="text_print"></block>
|
|
<block type="text_prompt_ext">
|
|
<value name="TEXT">
|
|
<block type="text"></block>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Variables" custom="VARIABLE"></category>
|
|
<category name="Functions" custom="PROCEDURE"></category>
|
|
</xml>
|
|
|
|
<xml id="startBlocks" style="display: none">
|
|
<block type="variables_set" id="set_n_initial" inline="true" x="20" y="20">
|
|
<field name="VAR">n</field>
|
|
<value name="VALUE">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
<next>
|
|
<block type="controls_repeat_ext" id="repeat" inline="true">
|
|
<value name="TIMES">
|
|
<block type="math_number">
|
|
<field name="NUM">4</field>
|
|
</block>
|
|
</value>
|
|
<statement name="DO">
|
|
<block type="variables_set" id="set_n_update" inline="true">
|
|
<field name="VAR">n</field>
|
|
<value name="VALUE">
|
|
<block type="math_arithmetic" inline="true">
|
|
<field name="OP">MULTIPLY</field>
|
|
<value name="A">
|
|
<block type="variables_get">
|
|
<field name="VAR">n</field>
|
|
</block>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">2</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</value>
|
|
<next>
|
|
<block type="text_print" id="print">
|
|
<value name="TEXT">
|
|
<block type="variables_get">
|
|
<field name="VAR">n</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</next>
|
|
</block>
|
|
</statement>
|
|
</block>
|
|
</next>
|
|
</block>
|
|
</xml>
|
|
|
|
<script>
|
|
var demoWorkspace = Blockly.inject('blocklyDiv',
|
|
{media: '../../media/',
|
|
toolbox: document.getElementById('toolbox')});
|
|
Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),
|
|
demoWorkspace);
|
|
|
|
var outputArea = document.getElementById('output');
|
|
var stepButton = document.getElementById('stepButton');
|
|
var myInterpreter = null;
|
|
|
|
function initApi(interpreter, scope) {
|
|
// Add an API function for the alert() block, generated for "text_print" blocks.
|
|
interpreter.setProperty(scope, 'alert',
|
|
interpreter.createNativeFunction(function(text) {
|
|
text = text ? text.toString() : '';
|
|
outputArea.value += '\n' + text;
|
|
}));
|
|
|
|
// Add an API function for the prompt() block.
|
|
var wrapper = function(text) {
|
|
text = text ? text.toString() : '';
|
|
return interpreter.createPrimitive(prompt(text));
|
|
};
|
|
interpreter.setProperty(scope, 'prompt',
|
|
interpreter.createNativeFunction(wrapper));
|
|
|
|
// Add an API function for highlighting blocks.
|
|
var wrapper = function(id) {
|
|
id = id ? id.toString() : '';
|
|
return interpreter.createPrimitive(highlightBlock(id));
|
|
};
|
|
interpreter.setProperty(scope, 'highlightBlock',
|
|
interpreter.createNativeFunction(wrapper));
|
|
}
|
|
|
|
var highlightPause = false;
|
|
var latestCode = '';
|
|
|
|
function highlightBlock(id) {
|
|
demoWorkspace.highlightBlock(id);
|
|
highlightPause = true;
|
|
}
|
|
|
|
function resetStepUi(clearOutput) {
|
|
demoWorkspace.highlightBlock(null);
|
|
highlightPause = false;
|
|
|
|
if (clearOutput) {
|
|
outputArea.value = 'Program output:\n=================';
|
|
}
|
|
}
|
|
|
|
function generateCodeAndLoadIntoInterpreter() {
|
|
// Generate JavaScript code and parse it.
|
|
Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
|
|
Blockly.JavaScript.addReservedWords('highlightBlock');
|
|
latestCode = Blockly.JavaScript.workspaceToCode(demoWorkspace);
|
|
resetStepUi(true);
|
|
}
|
|
|
|
function stepCode() {
|
|
if (!myInterpreter) {
|
|
// First statement of this code.
|
|
// Clear the program output.
|
|
resetStepUi(true);
|
|
myInterpreter = new Interpreter(latestCode, initApi);
|
|
|
|
// And then show generated code in an alert.
|
|
// In a timeout to allow the outputArea.value to reset first.
|
|
setTimeout(function() {
|
|
alert('Ready to execute the following code\n' +
|
|
'===================================\n' + latestCode);
|
|
highlightPause = true;
|
|
stepCode();
|
|
}, 1);
|
|
return;
|
|
}
|
|
highlightPause = false;
|
|
do {
|
|
try {
|
|
var hasMoreCode = myInterpreter.step();
|
|
} finally {
|
|
if (!hasMoreCode) {
|
|
// Program complete, no more code to execute.
|
|
outputArea.value += '\n\n<< Program complete >>';
|
|
|
|
myInterpreter = null;
|
|
resetStepUi(false);
|
|
|
|
// Cool down, to discourage accidentally restarting the program.
|
|
stepButton.disabled = 'disabled';
|
|
setTimeout(function() {
|
|
stepButton.disabled = '';
|
|
}, 2000);
|
|
|
|
return;
|
|
}
|
|
}
|
|
// Keep executing until a highlight statement is reached,
|
|
// or the code completes or errors.
|
|
} while (hasMoreCode && !highlightPause);
|
|
}
|
|
|
|
// Load the interpreter now, and upon future changes.
|
|
generateCodeAndLoadIntoInterpreter();
|
|
demoWorkspace.addChangeListener(function(event) {
|
|
if (!(event instanceof Blockly.Events.Ui)) {
|
|
// Something changed. Parser needs to be reloaded.
|
|
generateCodeAndLoadIntoInterpreter();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|