CLI command console

CLI command console

Now we would like to do experiments with the interactive command line. It is not required to have CLI command console, but if you try to shake-up stack a bit, you must to do all Forth interpreter work by hands with direct calls to PUSH() LOOKUP() and COMPILE() later.

<style>
#text { overflow-y:scroll; height:77%; }
#cli  { width:100%; position:absolute; bottom:0;  }
#pad  { width:100%; color:cyan; }
#go   { width:100%; background: darkslategrey; }
</style>

<div id=text>
</div>
<form id=cli>
<textarea id=pad rows=5 autofocus># put commands here</textarea>
<button id=go>go</button>
</form>

This script must be added to your page to automatically align text area (which contains this text maybe) height to form, placed at the page bottom:

<script>
function Layout() {
	text = document.querySelector('#text')
	cli  = document.querySelector('#cli')
	
	text.style.height = (cli.offsetTop * .98 )  + 'px'
}

window.onload   = Layout
window.onresize = Layout
</script>

You should see the command line form right now at the bottom of this page: as you already understand, this tutorial is a self-contained dynamic system runs as a web page in your browser, so you can learn its HTML/JS code and do some experiments while reading.

Why we take so cryptic and low-level language?