music
OSdata.com: programming text book 

OSdata.com

raw stack

summary

OSdata RSS
News Feed


OSdata blog RSS.

OSdata blog RSS - add to Bloglines
OSdata blog RSS - add to Google Reader.
OSdata blog RSS - add to My AOL
OSdata blog RSS - add to Newsgator.

    This section describes building the raw mechanics of a stack in JavaScript.

    This is part of an instructional series on the building of a Forth programming environment in any standard browser using JavaScript.

    Threaded Interpreted Languages (TILs), including Forth, are designed for customization.

    In addition to writing your own Forth programs, please modify the underlying engine to meet your specific needs.

    Please have fun with this project. Make it your own.

    The most recent version is at stable release version or http://www.twiddledom.com/coder/js78.html

    Free Open Souce: Licensed under MIT license. License printed in full below.

previous page   next page
previous page
script basics
  next page
stack check
Google

raw stack

summary

    This section describes building the raw mechanics of a stack in JavaScript.

    Now that we have the naked structure for JavaScript, I will build the raw mechnaics for a stack.

important difference with real Forth

    Please note that this does’nt work exactly the same way that Forth does. In a real Forth stack, the basic data item is a word. Word size is defined by processor. At the time of the introduction of Forth, this was typically two bytes (16 bits) or four bytes (32 bits). 12-bit words and 36-bit words were also in use. By the time of microprocessors, it was common for Forth to use 16-bit (two byte) words, with special additional instructions for processing single bytes.

    This implementation simply uses JavaScript scalars, composite data types, and objects. Anything that can be assigned to a JavaScript array can be put on this stack as a single item. This offers more flexibility in a modern computing world. Later, we will add instructions that can tear data apart by the byte.

text links

    I created text links for the basic push and pop operations. These links don’t work in the http://www.twiddledom.com/coder/js3.html file, but will work by the http://www.twiddledom.com/coder/js8.html file at the end of this web page.

    The onclick attribute for the a tag provides the JavaScript function call.

<p align="center"><a href="javascript:void(0);" onclick="push();">push</a> <a href="javascript:void(0);" onclick="pop();">pop</a></p>

    http://www.twiddledom.com/coder/js3.html demonstrates this step.

response div

    Next I create an empty div with the id of response. This is where the results of stack operations will be displayed.

<div id="response"></div>

    http://www.twiddledom.com/coder/js4.html demonstrates this step.

stub functions

    In the next step I create stub functions. These are the push and pop functions called in the text links. These simply update the response div to display what action was chosen.

function push() {

document.getElementById("response").innerHTML = "<p align=\"center\">push</p>";

return 0;

} /* END FUNCTION push */

function pop() {

document.getElementById("response").innerHTML = "<p align=\"center\">pop</p>";

return 0;

} /* END FUNCTION pop */

    http://www.twiddledom.com/coder/js5.html demonstrates this step.

input text box

    And add a text box for inputting the values to place on the stack (highlighted in bold).

<p align="center"><input type="text" name="number"><br><p align="center"><a href="javascript:void(0);" onclick="push();">push</a> <a href="javascript:void(0);" onclick="pop();">pop</a></p>

    http://www.twiddledom.com/coder/js6.html demonstrates this step.

read push text

    The next step is actually reading the value from the text box on a push. I will also report the result in the response div so that we can see that it works correctly.

function push() {

var inputnumber;

inputnumber = document.getElementById("inputvalue").value;

document.getElementById("response").innerHTML = "<p align=\"center\">push " + inputnumber + "</p>";

return 0;

} /* END FUNCTION push */

    http://www.twiddledom.com/coder/js7.html demonstrates this step.

working stack

    I create a stack by using a JavaScript array. JavaScript arrays will allow different types for each array element, but require numeric indices (indexes).

    We start with the global variables for the stack and a pointer to the top of the stack. The zeroth cell is filled in just to keep JavaScript happy. Often I use that location as the stack pointer variable, but I separate these out to make it easier for beginners to keep track of what is going on. This also makes the array counting one based, rather than zero based, which also makes things easier for beginners.

/* data stack implemented as a JavaScript array */
/* data stack holds any JavaScript data type, not just Forth data types */
var datastack = [0];
/* this is the data stack pointer -- used an index into data stack array */
var topofstack = 0;

    We modify the push funciton to actually push a value to the stack and increment the stack pointer. Notice that there is a whole bunch of extra debugging information reported while building the first few constructs.

function push() {

var inputnumber;

inputnumber = document.getElementById("inputvalue").value;

topofstack = ++topofstack;
datastack[topofstack] = inputnumber;

// old deleted code
//document.getElementById("response").innerHTML = "<p align=\"center\">push " + inputnumber + "</p>";

// new code
document.getElementById("response").innerHTML = "<p align=\"center\">push " + inputnumber + " and topofstack is " + topofstack + " and current stack item is " + datastack[topofstack] + " </p>";

return 0;

} /* END FUNCTION push */

    And a working version of the pop function, also with a bunch of debugging information.

function pop() {

var outputvalue;

outputvalue = datastack[topofstack];
topofstack = --topofstack;

// old debug deleted code
//document.getElementById("response").innerHTML = "<p align=\"center\">pop</p>";

//new code
document.getElementById("response").innerHTML = "<p align=\"center\">pop " + outputvalue + " and topofstack is " + topofstack + " and current stack item is " + datastack[topofstack] + " </p>";

return 0;

} /* END FUNCTION pop */

    And a new function to show the stack contents.

function showstack() {

var outputstring;
var loopindex;

outputstring = "show stack (size of " + datastack.length + ")";
for (loopindex = 1; loopindex < datastack.length; loopindex++) {
  outputstring += " " + datastack[loopindex];
}
outputstring += " and topofstack is " + topofstack + " and current stack item is " + datastack[topofstack];

document.getElementById("response").innerHTML = "<p align=\"center\">" + outputstring + "</p>";

return 0;

} /* END FUNCTION showstack */

    And a new text link to run the ShowStack function (last link on the line).

<p align="center"><input type="text" name="number"><br><p align="center"><a href="javascript:void(0);" onclick="push();">push</a> <a href="javascript:void(0);" onclick="pop();">pop</a></p> <a href="javascript:void(0);" onclick="showstack();">.S</a>

    A slightly improved version that uses the pop method, which keeps JavaScript’s accounting of the size of the array in line with our counting. The first version is more efficient for execution speed, while the second version is more efficient for storage space.

function pop() {

var outputvalue;

outputvalue = datastack.pop();
topofstack = --topofstack;

document.getElementById("response").innerHTML = "<p align=\"center\">pop " + outputvalue + " and topofstack is " + topofstack + " and current stack item is " + datastack[topofstack] + " </p>";

return 0;

} /* END FUNCTION pop */

    http://www.twiddledom.com/coder/js8.html demonstrates these steps.

    A working stack!

return to Forth in JavaScript
return to Outrageous Coder

previous page   next page
previous page
script basics
  next page
stack check

contact
comments, suggestions, corrections, criticisms

because of ridiculous spam attacks,
contact through Twitter (@OutrageousCoder) will be more reliable than the contact form

please contact us

your name:
email address:
phone number:
message:

return to table of contents
free downloadable college text book

license

    This is example code from OSdata, This Side of Sanity, and Twiddledom, released under the MIT License.

    Copyright © 2014, 2015 Milo

    Licensed under the MIT License. You may obtain a copy of the License at

        http://opensource.org/licenses/MIT

    The MIT License (MIT)

    Copyright © 2014, 2015 Milo

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

previous page   next page
previous page
script basics
  next page
stack check

Google


Made with Macintosh

    This web site handcrafted on Macintosh computers using Tom Bender’s Tex-Edit Plus and served using FreeBSD .

Viewable With Any Browser


    †UNIX used as a generic term unless specifically used as a trademark (such as in the phrase “UNIX certified”). UNIX is a registered trademark in the United States and other countries, licensed exclusively through X/Open Company Ltd.

    Names and logos of various OSs are trademarks of their respective owners.

    Copyright © 2014 Milo

    Created: October 11, 2014

    Last Updated: October 31, 2014


return to table of contents
free downloadable college text book

previous page   next page
previous page
script basics
  next page
stack check