diff options
Diffstat (limited to 'blockly/demos/interpreter/index.html')
| -rw-r--r-- | blockly/demos/interpreter/index.html | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/blockly/demos/interpreter/index.html b/blockly/demos/interpreter/index.html new file mode 100644 index 0000000..86b2dee --- /dev/null +++ b/blockly/demos/interpreter/index.html @@ -0,0 +1,200 @@ +<!DOCTYPE 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 with a sandboxed JavaScript interpreter.</p> + + <p>→ More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/running-javascript#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> + var workspace = Blockly.inject('blocklyDiv', + {media: '../../media/', + toolbox: document.getElementById('toolbox')}); + Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'), + workspace); + + 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) { + workspace.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(workspace); + myInterpreter = new Interpreter(code, initApi); + + alert('Ready to execute this code:\n\n' + code); + document.getElementById('stepButton').disabled = ''; + highlightPause = false; + workspace.traceOn(true); + workspace.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> |