Sidenote - a simple Javascript console

For our project My Journey to Postscript I needed a simple way to display and execute Javascript code. The wiki function javascript displays an editor and executes it.

Javascript Editor

The function has two parameters. The first are the options which can be

-sandbox: show the editor
-code: show the code but hide the run button
-console: show the console output
-wait: do not immediately run the code

Without any option, the code is just executed, but not visible. If you want to make it visible, use -code, if you want to make it interactive, use -sandbox.

The second is the code itself.

The wiki function creates Javascript code to handle the editor. Each editor gets a unique ID so you can have multiple editors on a page. The console.log(), window.error() and console.error() functions are redirected to the console of the editor. To run the code, the script creates a new script node with the content of the editor and appends it to the body.
That’s it. Global variables of the editors share the same space, so one editor can use the functions defined by another one. Global space also comes with limits: you will get errors if you run constants and standard function definitions multiple times. So on the global level, we will always define functions as variables and do not use constants

Example of communication

Javascript Editor

Opening the page, result is 2. If you run first and third again, result will be 1.

We can build our own Postscript editor with Javascript. For our development of PostScript interpreter, it would be more convenient to write the program directly than to insert it into Javascript code. The following functions redirectConsole and postScriptEditor add an editor that understands PostScript directly.

We write first a dummy function as interpreter.

The function redirectConsole(id) redirects the console message to HTML node with an id "console"+id. This allows us also to report errors directly on the HTML page and not hidden in the inspector panel of the browser.
The function postScriptEditor(code) provides an interface for a code editor. When you push the button, the edited code will be sent as arguments to rpn and the result will be shown in the console.
First I wrote the interface in HTML, but that needed much escaping of tags in wikitext. Using the DOM-model, it is cleaner. The script part uses the backtick-quote that allows multiline strings, and then replaces id, fn and code in the string. That makes the code more readable.
Finally, the line postScriptEditor("3 4 add"); creates the editor window below.

Javascript

redirectConsole = function(id) {
    const current = document.getElementById("console"+id);
    if (! current) return;
    console.log = function(s) { 
        if (s) {
            current.innerHTML += s + "<br/>";
        }
    }
    console.error = function(message,url,line) { 
 const node = document.createElement("SPAN"); 
        node.className = "error";
        node.innerHTML = message ?? "unknown error"; 
        current.innerHTML += node.outerHTML + "<br/>";
 };
    window.onerror = function(message,url,line) {
        const node = document.createElement("SPAN"); 
        node.className = "error";
        node.innerHTML = message ?? "unknown error"; 
        current.innerHTML += node.outerHTML+ "<br/>";
 };
    document.getElementById("console"+id).innerHTML = "";
}

postScriptEditor = function(code) {
    const id = Math.floor(Math.random() * 1000);  // create unique id for console.log
    const node = document.createElement("DIV");   // build the HTML nodes
    node.id = "id" & id;
    node.className = "psmain";
    const node2 = document.createElement("DIV");
    node2.className = "editzone";
    node.appendChild(node2);
    const node3 = document.createElement("DIV");
    node3.className = "editheader";
    node3.innerHTML = "PostScript";
    node2.appendChild(node3);
    const node4 = document.createElement("FORM");
    node2.appendChild(node4);
    const node5 = document.createElement("BUTTON");
    node5.type = "button";
    node5.id = "button" + id;
    node5.innerHTML = "Run";
    node4.appendChild(node5);
    const node6 = document.createElement("TEXTAREA"); 
    node6.id = "editor" + id; 
    node6.className = "pseditor"; 
    node6.innerHTML = code
    node4.appendChild(node6);
    const node7 = document.createElement("DIV");
    node7.id = "console" + id;
    node7.className = "jsconsole";
    node.appendChild(node7);
    console.log(node.outerHTML);  // add the node to the parent element

const script = `redirectConsole($id);
        run$id = function() {
        redirectConsole($id);
        const code = document.getElementById("editor$id").value;
        const context = rpn(code);
        console.log(JSON.stringify(context, null, 4));
    };
    document.getElementById("button$id").onclick = run$id;`.replaceAll("$id", id).replaceAll("$code",code);
    const scriptnode = document.createElement("SCRIPT");
    scriptnode.innerHTML = script;
    document.body.appendChild(scriptnode);  // run the script
};

Now we use it. Click run.

Javascript Editor

The current code is now 158 lines ps20240625.js

If you want to try it for you locally, this minimal HTML page uses the postScriptEditor function to build 2 editors.
https://belle-nuit.com/site/files/minimal.html
The script ps20240625.js is expected to be in the same folder. Download both files to the same folder and run then the HTML in your browser.

My Journey to PostScript