newdavinci-blockly
Version:
New daVinci Fork of Blockly
200 lines (182 loc) • 6.37 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: 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> > JS Interpreter</h1>
<p>This is a simple demo of executing code wth a sandboxed JavaScript interpreter.</p>
<p>→ More info on <a href="https://developers.google.com/blockly/installation/js-interpreter">JS Interpreter</a>...</p>
<p>
<button onclick="parseCode()">Parse JavaScript</button>
<button onclick="stepCode()" id="stepButton" disabled="disabled">Step JavaScript</button>
</p>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></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"></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" 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" inline="true">
<value name="TIMES">
<block type="math_number">
<field name="NUM">4</field>
</block>
</value>
<statement name="DO">
<block type="variables_set" 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>
</block>
</statement>
<next>
<block type="text_print" inline="false">
<value name="TEXT">
<block type="variables_get">
<field name="VAR">n</field>
</block>
</value>
</block>
</next>
</block>
</next>
</block>
</xml>
<script>
Blockly.inject(document.getElementById('blocklyDiv'),
{toolbox: document.getElementById('toolbox')});
Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,
document.getElementById('startBlocks'));
var myInterpreter = null;
function initApi(interpreter, scope) {
// Add an API function for the alert() block.
var wrapper = function(text) {
text = text ? text.toString() : '';
return interpreter.createPrimitive(alert(text));
};
interpreter.setProperty(scope, 'alert',
interpreter.createNativeFunction(wrapper));
// 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;
function highlightBlock(id) {
Blockly.mainWorkspace.highlightBlock(id);
highlightPause = true;
}
function parseCode() {
// Generate JavaScript code and parse it.
Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
Blockly.JavaScript.addReservedWords('highlightBlock');
var code = Blockly.JavaScript.workspaceToCode();
myInterpreter = new Interpreter(code, initApi);
alert('Ready to execute this code:\n\n' + code);
document.getElementById('stepButton').disabled = '';
highlightPause = false;
Blockly.mainWorkspace.traceOn(true);
Blockly.mainWorkspace.highlightBlock(null);
}
function stepCode() {
try {
var ok = myInterpreter.step();
} finally {
if (!ok) {
// Program complete, no more code to execute.
document.getElementById('stepButton').disabled = 'disabled';
return;
}
}
if (highlightPause) {
// A block has been highlighted. Pause execution here.
highlightPause = false;
} else {
// Keep executing until a highlight statement is reached.
stepCode();
}
}
</script>
</body>
</html>