newlisp-js
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
parent directory.. | ||||
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="Lutz Mueller"/> <meta name="keywords" content="newLISP LISP SCHEME programming language manual reference Artificial Intelligence AI NUEVATEC"/> <meta name="description" content="Info newLISP in a web browser"/> <title>Info about newLISP in a web browser</title> <style type="text/css" media="screen"> <!-- .title { font-family:Optima, Georgia, Times New Roman, Times, serif; font-size:300%; font-weight: 500; color: #404040; } .footer { text-align: center; margin: 0 10%; max-width: 752px; font-family: Helvetica, Verdanan, Arial, sans-serif; font-size: 10px; line-height: 12px; } body, h4, p { font-family: Lucida Sans, Helvetica, sans-serif; line-height: 120%; max-width: 752px; } h1, h2, h3 { margin-top: 3%; font-family: Helvetica, Lucida Sans sans-serif; line-height: 120%; color: #404040; } table { margin: 0px; margin-left: 10px; margin-right: 10px; border-style: solid; border-width: 0px; border-color: #888888; padding: 3px; background: #f8ffff; font-size: 95%; } th { border-style: solid; border-width: 1px; border-color: #888888; padding: 3px; background: #eeeeee; font-size: 100%; } td { border-style: solid; border-width: 1px; border-color: #888888; padding: 3px; background: #f8ffff; font-size: 100%; } pre { margin: 0px; margin-left: 10px; margin-right: 10px; border-style: dashed; border-width: 1px; border-color: #888888; padding: 4px; font-family: Andale Mono, Monaco, Courier; font-size: 100%; background: #f8ffff; } tt { font-family: Andale Mono, Monaco, Courier; font-size: 100%; } --> </style> </head> <body style="margin: 0 auto;" text="#000000" bgcolor="#FFFFFF" link="#376590" vlink="#551A8B" alink="#ffAA28"> <h2>What is 'newLISP in a web browser'  <font size=-1>last edited 2019-05-05</font></h2> <p>newLISP can be compiled to JavaScript and then run in a web browser like any other JavaScript program. <tt>newlisp-js-lib.js</tt> is newLISP compiled to a JavaScript library using the Emscripten SDK tool chain:</p> <blockquote> <p><a href="http://kripken.github.io/emscripten-site/">http://kripken.github.io/emscripten-site/</a></p> </blockquote> <p>This application implements an editor and development environment (IDE) for newLISP, HTML and JavaScript code. Any other Application could be built this way. To run newLISP code from JavaSript a <tt>newlispEvalStr(<em>string</em>)</tt> JavaScript function is available after loading the <tt>newlisp-js-lib.js</tt> library and supporting files and using a line of JavaScript to import this function.</p> <p>Likewise newLISP can call back into JavaScript code using the <tt>(eval-string-js <em>string</em>)</tt> function. Both languages can be hosted by an HTML page.</p> <p>The <a href="app.html">app.html</a> demo file shows how to do this. Everything necessary to write your own application is contained in a 3k part of this file. Only <tt>app.html</tt>, <tt>newlisp-js-lib.js</tt> and <tt>newlisp-js-lib.wasm</tt> are required to run this newLISP application client-side in a web browser.</p> <!-- <p>For a tutorial in to the basics of newLISP type <tt>(load "newlisp-js/tutorial.lsp")</tt> in to the editor then click the <tt>eval</tt> button. This tutorial is best used in two-column layout and copies some material from the WikiBooks tutorial: <a href="http://en.wikibooks.org/wiki/Introduction_to_newLISP">Introduction to newLISP</a>.</p> --> <p>The editor control with syntax highlighting and themes is from the CodeMirror project at: <a href="http://codemirror.net/">codemirror.net/</a>.</p> <p>An alternative <a href="simple.html">simple editor</a> without synytax highlighting, but with parenthesis matching, has no external dependencies.</p> <h2>Installation</h2> <p>Download and unzip the <a href="http://www.newlisp.org/newlisp-js/newlisp-js-10.7.5.zip"> newlisp-js-10.7.5.zip</a> package in the document directory of a web server or do a serverless installation on an individual computer and load the <tt>index.html</tt> file directly into your web browser. Not all browsers support a serverless installation of newlisp-js. Firefox allows running newlisp-js by loading <tt>index.html</tt> directly.</p> <h2>How to use 'newLISP in a web browser'</h2> <p>Wait for "Downloading ..." in the top left corner of the browser window to finish. newLISP expressions can now be entered in the editor input window and be evaluated pushing the red <tt>eval</tt> button. Output is shown in the log window.</p> <p>The editor can also be used to edit JavaScript content or HTML content. The red <tt>JS</tt> button will evaluate JavaScript content and the red <tt>HTML</tt> button will open a page in a new browser tab containing the rendered HTML. Code from all three languages can be mixed on the same oage and interact with each other.</p> <h4>Buttons on top and keyboard short-cuts:</h4> <ul> <li><tt>eval</tt> - evaluates newLISP source in edit box (Ctrl-enter)</li> <li><tt>silent</tt> - evaluates newLISP source in edit box silently (Shift-Ctrl-enter)</li> <li><tt>JS</tt> - evaluates JavaScript in edit box</li> <li><tt>htlml</tt> - opens a new tab with HTML from the editor</li> <li><tt>x-edit</tt> - clears the editor box (Ctrl-L)</li> <li><tt>x-log</tt> - clears log box (Shift-Ctrl-L)</li> <li><tt>layout</tt> - switches between three layouts</li> <li><tt>#</tt> - toggle line numbers on / off - (Ctrl-1)</li> <li><tt>theme</tt> - switches between seven color themes</li> <li><tt>info</tt> - shows this page in a new browser tab</li> <li><tt>doc</tt> - shows and searches the reference manual</li> <li><tt><font size="+1">↻</font></tt> - reload newLISP and local browser storage (Ctrl-R)</li> </ul> <p>The <tt>eval</tt> button will show all top-level return values in the log window. The <tt>silent</tt> button only shows text output by <tt>print</tt> or <tt>println</tt> or other functions writing to standard out.</p> <p><tt>htlml</tt> is the preferred button for web development, as HTML, JavaScript and newLISP source can be mixed on the same page (see <a href="app.html">app.html</a> demo as an example.</p> <p>Different themes set by the <tt>theme</tt> button also change the way matching parentheses are shown.</p> <p>The input box to the right of the <tt>doc</tt> 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.</p> <h4>Buttons at the bottom and keyboard short-cuts:</h4> <ul> <li><tt>save</tt> - save edit box content to browser local storage (Ctrl-S)</li> <li><tt>open</tt> - load edit content from a file on the local file system (Ctrl-O)</li> </ul> <p>The <tt>save</tt> 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 <em>copy</em> and <em>paste</em> must be used to transfer files out of the browser.</p> <p>The <tt>save</tt> button also saves the layout and color theme.</p> <p>The <tt>open file</tt> button is disabled on mobile devices.</p> <p>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.</p> <p>Red buttons delete or replace existing content. Blue buttons act on content in the edit box. <tt>x-edit</tt>, <tt>x-log</tt> and <tt>open</tt> can be undone using <tt>Ctrl-Z</tt> or <tt>Command-Z</tt> on Mac OS X. <tt><font size="+1">↻</font></tt> cannot be undone.</p> <h4>Keyboard commands without buttons</h4> <p>In the editor <tt>Alt-up/down</tt> or <tt>Option-up/down</tt> moves the current line or all lines in a selection. Select with a mouse or <tt>Shift-right/down</tt>. </p> <p>Fontsize can be adjusted on Mac OS X using the <tt>command+</tt> and <tt>command-</tt> keys. On Windows and Unix systems use <tt>Ctrl+</tt> and <tt>Ctrl-</tt>.</p> <p>Changes of the editor content can be undone using <tt>Command-Z</tt> on Mac OS X or using <tt>Ctrl-Z</tt> on Windows and Linux.</p> <p>On Mac OS X the <tt>Ctrl-B,F,P,N,H,D</tt> keys can be used for cursor movement in all for directions and deletion of characters before and after the caret.</p> <h2>Performance considerations</h2> <p>In this sandboxed JavaScript environment, most File and network I/O functions will not work or work in different ways. Memory is also constrained for applications in a web browser. Bigger newLISP applications for the web should run server-side in native compiled newLISP to use all of its File, network and distributed and parallel processing functions.</p> <p>The following functions are not available in newlisp-js-lib.js:</p> <blockquote> <tt>debug, trace, trace-highlight<br/> semaphore, share, signal, timer<br/> abort, exec, fork, process, receive, send, spawn, sync<br/> net-packet, net-ping, net-service<br/> get-url, put-url, post-url, delete-url<br/> net-accept, net-close, net-connect, net-error, net-eval<br/> net-interface, net-ipv, net-listen, net-local, net-lookup<br/> net-packet, net-peek, net-peer, net-ping, net-receive<br/> net-receive-from, net-receive-udp, net-select, net-send<br/> net-send-to, net-send-udp, net-sessions</tt> </blockquote> <p>The following functions are available but will have limited functonality. <tt>file://</tt> and <tt>http://</tt> URLs cannot be used, as is possible on native compiled newLISP with the last line of functions below. All functions work on a <em>session filesystem</em>. 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.</p> <blockquote> <tt>load, save</tt><br/> <tt>directory, make-dir, change-dir, remove-dir</tt><br/> <tt>open, close, read, write</tt><br/> <tt>read-char, write-char, read-line, write-line, read-utf8</tt><br/> <tt>read-file, write-file, append-file, delete-file, rename-file</tt> </blockquote> <p>Some functions can work on <tt>stdin</tt>. E.g.: <tt>(read-line)</tt> will pop up two JavaScript <tt>window.prompt()</tt> dialogs one after the other to enter a string:</p> <pre> (add (int (read-line)) (int (read-line))) </pre> <p>To write to <tt>stdout</tt> open the device <tt>dev/stdout</tt>:</p> <pre> (set 'out (open "dev/stdout" "w")) (write out "hello\n") (close out) </pre> <p>This would add the two numbers entered in dialog windows and show the result in the log window.</p> <h2>Re-defining existing built-in functions using JavaScript</h2> <p>The browser version of newLISP adds a function <tt>eval-string-js</tt> to call JavaScript int the host browser. This way libraries like jQuery or Bootstrap can be used to replace some of the web and network functions:</p> <pre> (constant 'get-url (lambda (url) (eval-string-js (string "GetUrl('" url "')")) ) ) </pre> <p><tt>GetUrl()</tt> would be a JavaScript function implementing the functionality of newLISP's <tt>get-url</tt>. The <tt>constant</tt> function allows to redefine protected symbols from built-in functions. Primitives redefined this way will still be <tt>protected?</tt> and <tt>global?</tt>.</p> <h2>Replacing the editor page with a new page</h2> <p>Another new builtin function is <tt>display-html</tt>. 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:</p> <pre> (display-html "<html>Hello World</html>") </pre> <p>To get back to the newLISP environment, hit the back-key in the browser.</p> <h2>Displaying an HTML page in a new browser tab</h2> <pre> (display-html "<html>Hello World</html>" true) </pre> <p>The <tt>true</tt> parameter causes a new tab to be opened. This is the same function as used by the <tt>html</tt> button.</p> <h2>Developing HTML in the browser</h2> <p>Without using <tt>display-html</tt>, HTML can be written in the editor box, intermixed with JavaScript, if required. The <tt>html</tt> button will then open a page in a new tab of the web browser with HTML content of the editor box:</p> <pre> <html>Hello World</html> </pre> <p>See also the <a href="app.html">app.html</a> page.</p> <h2>License</h2> <p>All files in the in the top level of the <tt>newlisp-js</tt> directory are licensed under GNU General Public License Version 3, June 2007.</p> <br/> <div class="footer" align="center"> Copyright © 2014,2019, Lutz Mueller <a href="http://www.newlisp.org">newlisp.org</a>. All rights reserved. </div> <br/><center>§</center><br/> </body> </html>