diff options
-rw-r--r-- | lib/doml.js | 33 | ||||
-rw-r--r-- | lib/style.css | 68 | ||||
-rw-r--r-- | prog/euclideanAlgorithmInput.html | 69 | ||||
-rw-r--r-- | prog/function.doml | 19 | ||||
-rw-r--r-- | prog/function.html | 13 | ||||
-rw-r--r-- | prog/input.html | 28 |
6 files changed, 218 insertions, 12 deletions
diff --git a/lib/doml.js b/lib/doml.js index c813db9..181f574 100644 --- a/lib/doml.js +++ b/lib/doml.js @@ -151,6 +151,23 @@ 'call': function(dataset, children, context) { return context[dataset.name](children); + }, + + 'repeat': function(dataset, children, context) { + var times = me.evaluate(children[0], context); + for (var n = 0; n < times; n++) { + if (dataset.iteration) { + context[dataset.iteration] = n; + } + me.evaluate(children[1], context); + } + }, + + 'input': function(dataset, children, context) { + var msg = dataset.prompt || dataset.name; + var rawInput = prompt(dataset.prompt); + context[dataset.name] = me.Types[dataset.type](rawInput); + return context[dataset.name]; } }; @@ -176,6 +193,22 @@ 'bin-op': function(e) { return [ e.dataset.op ]; + }, + + 'input': function(e) { + return [ e.dataset.name ]; + }, + + 'call': function(e) { + return [ e.dataset.name ]; + }, + + 'function': function(e) { + return [ e.dataset.args ]; + }, + + 'repeat': function(e) { + return [ e.dataset.iteration ]; } }; diff --git a/lib/style.css b/lib/style.css index 6b7d25f..3f7ec40 100644 --- a/lib/style.css +++ b/lib/style.css @@ -1,3 +1,8 @@ +* { + margin: 0; + padding: 0; +} + body { font-family: monospace; } @@ -15,8 +20,7 @@ var { } .statement-sequence { - display: block; - border: 2px solid #666; + flex-direction: column; } .statement-sequence > span { @@ -32,7 +36,7 @@ var { .assign::before { content: 'Variable Assignment'; - color: darkmagenta; + color: blueviolet; order: 1; } @@ -68,7 +72,7 @@ var { .while::before { content: 'While'; - color: darkmagenta; + color: blueviolet; } .return > span { @@ -77,13 +81,13 @@ var { .return::after { content: 'Return'; - color: darkmagenta; + color: blueviolet; order: 1; } .compare::before { content: 'Comparison'; - color: darkmagenta; + color: blueviolet; order: 1; } @@ -105,7 +109,7 @@ var { .branch::before { content: 'Logical Branch'; - color: darkmagenta; + color: blueviolet; } .branch > span { @@ -123,3 +127,53 @@ var { .bin-op > var { order: 2; } + +.input { + color: blue; +} + +.input::before { + content: 'Input'; + color: blueviolet; +} + +.call::before { + content: 'Function Call'; + color: blueviolet; +} + +.call > var { + font-weight: bold; + color: darkorange; + order: 1; +} + +.call > span { + order: 2; +} + +.function { + border: 4px solid darkorange; + margin: 3px; + flex-direction: column-reverse; + padding-left: 0; + padding-right: 0; + background-color: white; +} + +.function > var { + background-color: darkorange; +} + +.print { + background-color: greenyellow; +} + +.repeat { + flex-direction: column; +} + +.repeat::before { + content: 'Repeat'; + color: blueviolet; +} diff --git a/prog/euclideanAlgorithmInput.html b/prog/euclideanAlgorithmInput.html new file mode 100644 index 0000000..dfba476 --- /dev/null +++ b/prog/euclideanAlgorithmInput.html @@ -0,0 +1,69 @@ +<!doctype html> +<html> + <head> + <script type="text/javascript" src="../lib/doml.js"></script> + <script> + Doml.runOnLoad(); + </script> + <link rel="stylesheet" href="../lib/style.css"> + </head> + <body> + <span class="statement-sequence"> + <span class="assign" data-name="EuclideanAlgorithm"> + <span class="function" data-args="a,b"> + <span class="statement-sequence"> + <span class="while"> + <span class="compare" data-op="!="> + <span class="variable" data-name="b"></span> + <span class="constant" data-val="0" data-type="number"></span> + </span> + + <span class="branch"> + <span class="compare" data-op=">"> + <span class="variable" data-name="a"></span> + <span class="variable" data-name="b"></span> + </span> + + <span class="assign" data-name="a"> + <span class="bin-op" data-op="-"> + <span class="variable" data-name="a"></span> + <span class="variable" data-name="b"></span> + </span> + </span> + + <span class="assign" data-name="b"> + <span class="bin-op" data-op="-"> + <span class="variable" data-name="b"></span> + <span class="variable" data-name="a"></span> + </span> + </span> + </span> + </span> + + <span class="branch"> + <span class="compare" data-op="=="> + <span class="variable" data-name="a"></span> + <span class="constant" data-val="1" data-type="number"></span> + </span> + <span class="print"> + <span class="constant" data-val="Relatively prime" data-type="string"></span> + </span> + <span class="print"> + <span class="constant" data-val="Found GCD" data-type="string"></span> + <span class="variable" data-name="a"></span> + </span> + </span> + </span> + </span> + </span> + + <span class="input" data-prompt="Enter the first value" data-name="val1" data-type="number"></span> + <span class="input" data-prompt="Enter the second value" data-name="val2" data-type="number"></span> + + <span class="call" data-name="EuclideanAlgorithm"> + <span class="variable" data-name="val1"></span> + <span class="variable" data-name="val2"></span> + </span> + </span> + </body> +</html> diff --git a/prog/function.doml b/prog/function.doml new file mode 100644 index 0000000..841cb0b --- /dev/null +++ b/prog/function.doml @@ -0,0 +1,19 @@ +statement-sequence { + assign(name=myFunc) { + function(args=stringToPrint,val1,val2) { + print { + variable(name=stringToPrint) + bin-op(op=+) { + variable(name=val1) + variable(name=val2) + } + } + } + } + + call(name=myFunc) { + constant(val="hello, world!" type="string") + constant(val="3.5" type="number") + constant(val="7" type="number") + } +} diff --git a/prog/function.html b/prog/function.html index 2fe8d40..f0bf334 100644 --- a/prog/function.html +++ b/prog/function.html @@ -5,7 +5,7 @@ <script> Doml.runOnLoad(); </script> - <link type="stylesheet" href="../lib/style.css"> + <link rel="stylesheet" href="../lib/style.css"> </head> <body> <span class="statement-sequence"> @@ -21,10 +21,13 @@ </span> </span> - <span class="call" data-name="myFunc"> - <span class="constant" data-val="hello, world!" data-type="string"></span> - <span class="constant" data-val="3.5" data-type="number"></span> - <span class="constant" data-val="7" data-type="number"></span> + <span class="repeat" data-iteration="loopTime"> + <span class="constant" data-val="5" data-type="number"></span> + <span class="call" data-name="myFunc"> + <span class="constant" data-val="hello, world!" data-type="string"></span> + <span class="constant" data-val="3.5" data-type="number"></span> + <span class="variable" data-name="loopTime"></span> + </span> </span> </span> </body> diff --git a/prog/input.html b/prog/input.html new file mode 100644 index 0000000..07ca54a --- /dev/null +++ b/prog/input.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> + <head> + <script src="../lib/doml.js"></script> + <script> + Doml.runOnLoad(); + </script> + <link rel="stylesheet" href="../lib/style.css"> + </head> + <body> + <span class="statement-sequence"> + <span class="assign" data-name="greet"> + <span class="function" data-args="name"> + <span class="print"> + <span class="constant" data-val="Hello," data-type="string"></span> + <span class="variable" data-name="name"></span> + </span> + </span> + </span> + + <span class="input" data-prompt="What is your name?" data-name="personToGreet" data-type="string"></span> + + <span class="call" data-name="greet"> + <span class="variable" data-name="personToGreet"></span> + </span> + </span> + </body> +</html> |