The app.html demo file shows how to do this. Everything necessary to write your own application is contained in a 3k part of this file. Only app.html and the newlisp-js-lib.js library are required to run this newLISP application client-side in a web browser.
The editor control with syntax highlighting and themes is from the CodeMirror project at: codemirror.net/.
An alternative simple editor without synytax highlighting, but with parenthesis matching, has no external dependencies.
Download and unzip the newlisp-js-10.7.3.zip package in the document directory of a web server or do a serverless installation on an individual computer and load the index.html file directly into your web browser. This file contains the editor.
When running on a webserver, the newlisp-js-lib.js library can be compressed to a .gz file for faster delivery. Compress using the Unix gzip or other zip compression utilities. Full HTTP 1.1 webserver installations can serve these files and they are automatically decompressed by most web browsers. The compressed newlisp-js-lib.js.gz is only about 200K in size. When using a compressed library, the library name in index.html and app.html has to be changed to reflect the name change of newlisp-js-lib.js. There is only one place at the end of the file where .gz has to be appended to the library name.
The CodeMirror editor library codemirror/lib/codemirror.js can also be compressed and is only referenced at the beginning of index.html.
Wait for "Downloading ..." to finish. newLISP expressions can now be entered in the editor input window and be evaluated pushing the red eval button. Output is shown in the log window.
The eval button will show all top-level return values in the log window. The silent button only shows text output by print or println or other functions writing to standard out.
Different themes set by the theme button also change the way matching parentheses are shown.
The input box to the right of the doc button can be either filled manually using the keyboard or a text selection can be made anywhere in the editor or log box. On computer devicers with a mouse, the text gets put into the search box on mouse-up. On mobile touch devices the selecton must be copy/pasted manually.
The save button saves the current edit content to the local storage system of the browser. On startup this content will be restored automatically. This storage is owned by the inidividual browser (IE, Firefox, Chrome, Safari, Opera). There are no browser cookies set and no internet connection is necessary for this private storage. For saving files to the local file system copy and paste must be used to transfer files out of the browser.
The save button also saves the layout and color theme.
The open file button is disabled on mobile devices.
Note, that all browser local storage is tied to the domain from which the editor is loaded. Allthough storage is local to your device, the same content can only be accessed using the editor from the same internet domain location. If using Firefox, distinction is also made for different places on the local disk. Safari and Chrome don't forget local storage even if the browser gets shut down and the editor was loaded from a remote site. Firefox behavior is different in this respect depending on the platform it is running on.
Red buttons delete or replace existing content. Blue buttons act on content in the edit box. x-edit, x-log and open can be undone using Ctrl-Z or Command-Z on Mac OS X. ↻ cannot be undone.
In the editor Alt-up/down or Option-up/down moves the current line or all lines in a selection. Select with a mouse or Shift-right/down.
Fontsize can be adjusted on Mac OS X using the command+ and command- keys. On Windows and Unix systems use Ctrl+ and Ctrl-.
Changes of the editor content can be undone using Command-Z on Mac OS X or using Ctrl-Z on Windows and Linux.
On Mac OS X the Ctrl-B,F,P,N,H,D keys can be used for cursor movement in all for directions and deletion of characters before and after the caret.
The following functions are not available in newlisp-js-lib.js:
debug, trace, trace-highlight
semaphore, share, signal, timer
abort, exec, fork, process, receive, send, spawn, sync
net-packet, net-ping, net-service
get-url, put-url, post-url, delete-url
net-accept, net-close, net-connect, net-error, net-eval
net-interface, net-ipv, net-listen, net-local, net-lookup
net-packet, net-peek, net-peer, net-ping, net-receive
net-receive-from, net-receive-udp, net-select, net-send
net-send-to, net-send-udp, net-sessions
The following functions are available but will have limited functonality. file:// and http:// URLs cannot be used, as is possible on native compiled newLISP with the last line of functions below. All functions work on a session filesystem. All contents of this filesystem is forgotten when closing or reloading the browser page. Still, for learning purpose or testing code, it can be useful.
directory, make-dir, change-dir, remove-dir
open, close, read, write
read-char, write-char, read-line, write-line, read-utf8
read-file, write-file, append-file, delete-file, rename-file
(add (int (read-line)) (int (read-line)))
To write to stdout open the device dev/stdout:
(set 'out (open "dev/stdout" "w")) (write out "hello\n") (close out)
This would add the two numbers entered in dialog windows and show the result in the log window.
(constant 'get-url (lambda (url) (eval-string-js (string "GetUrl('" url "')")) ) )
Another new builtin function is display-html. The function can be used to replace the current page containing the editor with a new webpage. When evaluating the following snippet in the editor box, the new content will apear:
(display-html "<html>Hello World</html>")
To get back to the newLISP environment, hit the back-key in the browser.
(display-html "<html>Hello World</html>" true)
The true parameter causes a new tab to be opened. This is the same function as used by the html button.
See also the app.html page.