mirror of
https://github.com/google/blockly.git
synced 2026-01-18 06:17:12 +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.
148 lines
4.4 KiB
HTML
148 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Blockly Demo: Generating JavaScript</title>
|
|
<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> > Generating JavaScript</h1>
|
|
|
|
<p>This is a simple demo of generating code from blocks.</p>
|
|
|
|
<p>→ More info on <a href="https://developers.google.com/blockly/guides/configure/web/code-generators">Code Generators</a>…</p>
|
|
|
|
<p>
|
|
<button onclick="showCode()">Show JavaScript</button>
|
|
<button onclick="runCode()">Run 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">
|
|
<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>
|
|
</category>
|
|
</xml>
|
|
|
|
<xml id="startBlocks" style="display: none">
|
|
<block type="controls_if" inline="false" x="20" y="20">
|
|
<mutation else="1"></mutation>
|
|
<value name="IF0">
|
|
<block type="logic_compare" inline="true">
|
|
<field name="OP">EQ</field>
|
|
<value name="A">
|
|
<block type="math_arithmetic" inline="true">
|
|
<field name="OP">MULTIPLY</field>
|
|
<value name="A">
|
|
<block type="math_number">
|
|
<field name="NUM">6</field>
|
|
</block>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">7</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">42</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</value>
|
|
<statement name="DO0">
|
|
<block type="text_print" inline="false">
|
|
<value name="TEXT">
|
|
<block type="text">
|
|
<field name="TEXT">Don't panic</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</statement>
|
|
<statement name="ELSE">
|
|
<block type="text_print" inline="false">
|
|
<value name="TEXT">
|
|
<block type="text">
|
|
<field name="TEXT">Panic</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</statement>
|
|
</block>
|
|
</xml>
|
|
|
|
<script>
|
|
var demoWorkspace = Blockly.inject('blocklyDiv',
|
|
{media: '../../media/',
|
|
toolbox: document.getElementById('toolbox')});
|
|
Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),
|
|
demoWorkspace);
|
|
|
|
function showCode() {
|
|
// Generate JavaScript code and display it.
|
|
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
|
|
var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
|
|
alert(code);
|
|
}
|
|
|
|
function runCode() {
|
|
// Generate JavaScript code and run it.
|
|
window.LoopTrap = 1000;
|
|
Blockly.JavaScript.INFINITE_LOOP_TRAP =
|
|
'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
|
|
var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
|
|
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
|
|
try {
|
|
eval(code);
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|