├── LICENSE
├── README.md
├── js+help-screenshot.png
├── js+help.html
├── mfibo.html
└── phi.png


/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <https://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### javascript-notebook
 2 | A very simple self-contained javascript notebook
 3 | 
 4 | This is a very simple Javascript notebook in one completely self-contained HTML file. It was inspired by the concept of Jupyter notebooks.
 5 | 
 6 | You can enter Javascript code and execute it in the browser, completely locally and possibly offline. The performance can be pretty good.
 7 | 
 8 | You can put in HTML documentation and also use HTML to provide UI for simple tools.
 9 | 
10 | All you need is the js+help.html file, which contains basic documentation. You can clear out the notebook and save off various javascript experiments in different files. Being able to save code and outputs is a key useful feature.
11 | 
12 | This was developed using the Chrome browser. Limited tests have been done with Firefox, and also on various OSs (Linux/Windows/Mac). The main compatibility issue is the handling of the downloading of files and how that varies in different contexts.
13 | 
14 | It is easy to extract a CSS and a JS file that could be stored separately to make for very small notebook files.
15 | 
16 | ### A basic screen shot
17 | 
18 | ![phi](/phi.png)
19 | 
20 | ### The built-in documentation in js+help.html
21 | 
22 | ![js+help](/js+help-screenshot.png)
23 | 
24 | ### Trying it out
25 | 
26 | Direct link:
27 | 
28 | [js+help.html via github.io](https://timcwinkler.github.io/js+help.html)
29 | 
30 | (You can save locally.)
31 | 
32 | This link will show you the source HTML text:
33 | 
34 | [js+help.html](https://raw.githubusercontent.com/timcwinkler/javascript-notebook/main/js%2Bhelp.html)
35 | 
36 | (You can also use this link to download the file.)
37 | 
38 | The mfibo.html file is an example with a bit more content. Computing Fibo(n) using the familiar closed-form formula, but using modular arithmetic.
39 | 
40 | [mfib.html](https://raw.githubusercontent.com/timcwinkler/javascript-notebook/main/mfibo.html)
41 | 
42 | (Once again, you can use this like to download the file.)
43 | 


--------------------------------------------------------------------------------
/js+help-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timcwinkler/javascript-notebook/d65c94414ca1c175a754b3acb1e89761251ddfa7/js+help-screenshot.png


--------------------------------------------------------------------------------
/js+help.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 |     "http://www.w3.org/TR/html4/strict.dtd">
  3 | <html><head>
  4 | <title>js+help</title>
  5 | <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  6 | <meta name="viewport" content="width=device-width, initial-scale=1">
  7 | <style>
  8 | html {
  9 |   font-family: 'Arial';
 10 | }
 11 | 
 12 | body {
 13 |   color: #333;
 14 |   font-weight: 100;
 15 |   max-width: 95%;
 16 |   margin: 0 1em;
 17 | }
 18 | 
 19 | div:focus {
 20 |   outline: none;
 21 | }
 22 | 
 23 | #heading {
 24 |   font-size: 1.3em;
 25 |   font-weight: bold;
 26 |   padding-top: .5em;
 27 | }
 28 | 
 29 | #content {
 30 |   padding-top: .5em;
 31 |   font-size: 1em;
 32 | }
 33 | 
 34 | .box0 {
 35 |   vertical-align: text-top;
 36 |   cursor: text;
 37 |   display: inline-block;
 38 |   font-size: 1.1em;
 39 |   border: 1px inset #aaa;
 40 |   width: 95%;
 41 |   margin: 1px;
 42 |   padding: 2px;
 43 |   min-height: 1em;
 44 |   white-space: pre-wrap;
 45 |   overflow-wrap: break-word;
 46 |   word-wrap: break-word;
 47 |   resize: none;
 48 | }
 49 | 
 50 | .hidden {
 51 |   display: none;
 52 | }
 53 | 
 54 | .box1 {
 55 |   display:inline-block;
 56 |   width: 90%;
 57 |   vertical-align:top;
 58 | }
 59 | 
 60 | .box2 {
 61 |   cursor: text;
 62 |   display:inline-block;
 63 |   font-size: 1.1em;
 64 |   border: 1px inset #aaa;
 65 |   width: 95%;
 66 |   margin: 1px;
 67 |   padding: 2px;
 68 |   min-height: 1em;
 69 |   white-space: pre-wrap;
 70 |   overflow-wrap: break-word;
 71 |   word-wrap: break-word;
 72 |   resize: none;
 73 | }
 74 | 
 75 | .buttonactive {
 76 |   appearance: push-button !important;
 77 |   background-color: SkyBlue;
 78 | }
 79 | </style>
 80 | <script id="mainscript" language="JavaScript" type="text/javascript"><!--
 81 | var idcntr=0;
 82 | var blkid=null;
 83 | var title;
 84 | var values = [];
 85 | var curout = null;
 86 | var evalfn = eval;
 87 | 
 88 | 
 89 | function pagestartup() {
 90 |   title = decodeURIComponent(document.URL.match(/\/([^\.\/]*)[^\/]*$/)[1]) || 'JS';
 91 |   document.getElementById('heading').innerHTML = title;
 92 |   document.getElementsByTagName("title")[0].innerHTML = title;
 93 | 
 94 |   idcntr = 0;
 95 |   while (true) {
 96 |     b = document.getElementById("b"+idcntr);
 97 |     if (b === null) { break; }
 98 |     blk_resizing(b);
 99 |     idcntr++;
100 |   }
101 |   document.getElementById("downloader").href = "missing";
102 |   document.getElementById("downloader").download = "missing";
103 | }
104 | 
105 | function textarearesize(ta) {
106 |   var h,a,y,ny;
107 |   y = window.pageYOffset;
108 |   ta.style.height = 'auto';
109 |   h = ta.scrollHeight;
110 |   h -= 4; // twice the padding
111 |   ta.style.height = h+'px';
112 |   ny = window.pageYOffset;
113 |   if (ny < y-40 || y+40 < ny) { // no big jumps
114 |     window.scrollTo(window.pageXoffset,y);
115 |     setTimeout(function(){ window.scrollTo(window.pageXoffset,y); },60);
116 |   }
117 | }
118 | 
119 | function blkresize(b) {
120 |   var d,e;
121 |   d = b.childNodes[1];
122 |   if (6<=d.childNodes.length) {
123 |     e = d.childNodes[5];
124 |     if ("TEXTAREA" === e.nodeName) { textarearesize(e); }
125 |     if (1<=d.childNodes[6].childNodes.length) {
126 |       e = d.childNodes[6].childNodes[0];
127 |       if ("TEXTAREA" === e.nodeName) { textarearesize(e); }
128 |     }
129 |   }
130 | }
131 | 
132 | function textarea_resizing(ta) {
133 |   function resize () {
134 |     textarearesize(ta);
135 |   }
136 |   function delayedResize () {
137 |     window.setTimeout(resize, 0);
138 |   }
139 |   ta.addEventListener('change',resize,false);
140 |   ta.addEventListener('cut',delayedResize,false);
141 |   ta.addEventListener('paste',delayedResize,false);
142 |   ta.addEventListener('drop',delayedResize,false);
143 |   ta.addEventListener('keydown',delayedResize,false);
144 |   textarearesize(ta);
145 | }
146 | 
147 | function blk_resizing(b) {
148 |   var d,e;
149 |   d = b.childNodes[1];
150 |   if (6<=d.childNodes.length) {
151 |     e = d.childNodes[5];
152 |     if ("TEXTAREA" === e.nodeName) { textarea_resizing(e); }
153 |     if (1<=d.childNodes[6].childNodes.length) {
154 |       e = d.childNodes[6].childNodes[0];
155 |       if ("TEXTAREA" === e.nodeName) { textarea_resizing(e); }
156 |     }
157 |   }
158 | }
159 | 
160 | function clear_content(ev,th) {
161 |   idcntr = 0;
162 |   blkid = null;
163 |   values = [];
164 |   document.getElementById('content').innerHTML = "";
165 | }
166 | 
167 | function toggle_rw(ev,th) {
168 |   var c;
169 |   c = document.getElementById('content');
170 |   if ("true" === c.contentEditable) {
171 |     c.contentEditable = false;
172 |     document.getElementById('RORW').value = "RO>RW";
173 |   } else {
174 |     c.contentEditable = true;
175 |     document.getElementById('RORW').value = "RW>RO";
176 |   }
177 | }
178 | 
179 | function add_block(ev,th) {
180 |   var txt,d,c,idnum,x;
181 |   c = document.getElementById('content');
182 |   idnum = idcntr;
183 |   idcntr++;
184 | txt = '['+idnum+']:&nbsp;<span class="box1">\
185 | <input type="button" value="go" onclick="button_flash(go_block,event,this);" class="">\
186 | <input type="button" value="txt" onclick="show_block(event,this);">\
187 | <input type="button" value="clr" onclick="clr_block(event,this);">\
188 | <input type="button" value="-" onclick="vis_block(event,this);"><br>\
189 | <textarea id="b'+idnum+'_in" class="box0" rows=1 cols=110></textarea>\
190 | <div></div></span>';
191 |   d = document.createElement("DIV");
192 |   d.id = "b"+idnum;
193 |   d.innerHTML = txt;
194 |   c.appendChild(d);
195 |   x=document.createElement("P");
196 |   x.style = "margin: .75em";
197 |   c.appendChild(x);
198 |   values[idnum] = undefined;
199 |   blk_resizing(d);
200 |   d.childNodes[1].childNodes[5].focus();
201 |   return undefined;
202 | }
203 | 
204 | function deletelast_block(ev,th) {
205 |   var d,gid,aid;
206 |   d = document.getElementById('content');
207 |   if (null === d.lastChild) { return; }
208 |   idcntr--;
209 |   gid = "b"+idcntr;
210 |   while (1) {
211 |     aid = d.lastChild.id;
212 |     d.removeChild(d.lastChild);
213 |     if (gid === aid) { break; }
214 |   }
215 |   values[idcntr] = undefined;
216 | }
217 | 
218 | function put(s) {
219 |   if (null === curout) {
220 |     console.log(s);
221 |   } else {
222 |     curout.value += s;
223 |     textarearesize(curout);
224 |   }
225 |   return s;
226 | }
227 | 
228 | function eval_script(scr) {
229 |   var val,errmsg;
230 |   try {
231 |     val = evalfn(scr);
232 |   } catch (errmsg) {
233 |     val = "Error: " + errmsg;
234 |   }
235 |   return val;
236 | }
237 | 
238 | function eval_block(blk) {
239 |   var scr,val,e,x,b,d;
240 |   scr = blk.childNodes[1].childNodes[5].value;
241 |   blkid = blk.id;
242 |   d = blk.childNodes[1].childNodes[6];
243 |   if (1<=d.childNodes.length && d.childNodes[0].id === undefined) {
244 |     d.innerHTML = "";
245 |   }
246 |   if (d.childNodes.length<1) {
247 |     x = document.createElement("TEXTAREA");
248 |     x.id = blkid + "_val";
249 |     x.className = "box2";
250 |     x.rows = 1;
251 |     x.cols = 110;
252 |     d.appendChild(x);
253 |     textarea_resizing(x);
254 |   } else {
255 |     x = d.childNodes[0];
256 |   }
257 |   x.value = "";
258 |   textarearesize(x)
259 |   curout = x;
260 |   val = eval_script(scr);
261 |   x.value += val;
262 |   textarearesize(x)
263 |   b = +(blkid.replace(/^b/,""));
264 |   values[b] = val;
265 |   return undefined;
266 | }
267 | 
268 | function button_flash(fn,ev,th) {
269 |   th.className = "buttonactive";
270 |   setTimeout(function() { fn(ev,th); }, 20);
271 | }
272 | 
273 | function button_active(th) { th.className = "buttonactive"; }
274 | function button_reset(th) { th.className = ""; }
275 | 
276 | function go_block(ev,th) {
277 |   var blk,txt,d;
278 |   blk = th.parentNode.parentNode;
279 |   eval_block(blk);
280 |   button_reset(th);
281 | }
282 | 
283 | function golast_block(ev,th) {
284 |   var blk,txt,d;
285 |   blk = document.getElementById("b"+(idcntr-1));
286 |   if (null === blk) {
287 |     button_reset(th);
288 |     return;
289 |   }
290 |   eval_block(blk);
291 |   button_reset(th);
292 | }
293 | 
294 | function goadd_block(ev,th) {
295 |   golast_block(ev,th);
296 |   add_block(ev,th);
297 | }
298 | 
299 | function show_block(ev,th) {
300 |   var txt,d;
301 |   txt = th.parentNode.childNodes[5].value;
302 |   d = th.parentNode.childNodes[6];
303 |   d.innerHTML = txt;
304 |   return undefined;
305 | }
306 | 
307 | function clr_block(ev,th) {
308 |   var t,d,x,p;
309 |   d = th.parentNode.childNodes[6];
310 |   if (1<=d.childNodes.length && (d.childNodes[0].id === "" || d.childNodes[0].id === undefined)) {
311 |     d.innerHTML = "";
312 |   }
313 |   if (d.childNodes.length<1) {
314 |     x = document.createElement("TEXTAREA");
315 |     x.id = blkid + "_val";
316 |     x.className = "box2";
317 |     x.rows = 1;
318 |     x.cols = 110;
319 |     d.appendChild(x);
320 |   } else {
321 |     x = d.childNodes[0];
322 |   }
323 |   x.value = "";
324 |   textarearesize(x);
325 |   p = th.parentNode;
326 |   t = p.childNodes[5];
327 |   t.className = "box0";
328 |   p.childNodes[0].className = "";
329 |   p.childNodes[1].className = "";
330 |   p.childNodes[2].className = "";
331 |   p.childNodes[3].value = "-";
332 | }
333 | 
334 | function vis_block(ev,th) {
335 |   var t,p;
336 |   p = th.parentNode;
337 |   t = p.childNodes[5];
338 |   if ("box0" === t.className) {
339 |     t.className = "hidden";
340 |     p.childNodes[0].className = "hidden";
341 |     p.childNodes[1].className = "hidden";
342 |     p.childNodes[2].className = "hidden";
343 |     p.childNodes[3].value = "+";
344 |   } else {
345 |     t.className = "box0";
346 |     p.childNodes[0].className = "";
347 |     p.childNodes[1].className = "";
348 |     p.childNodes[2].className = "";
349 |     p.childNodes[3].value = "-";
350 |   }
351 |   blkresize(p.parentNode);
352 | }
353 | 
354 | function str(n) {
355 |   var e;
356 |   e = document.getElementById("b"+n+"_val");
357 |   if (null === e) {
358 |     e = document.getElementById("b"+n);
359 |     if (null === e) {
360 |       return "";
361 |     } else {
362 |       return e.childNodes[1].childNodes[5].value;
363 |     }
364 |   } else {
365 |     return e.value;
366 |   }
367 | }
368 | 
369 | function res(n) {
370 |   var e,v;
371 |   if (undefined === values[n]) {
372 |     e = document.getElementById("b"+n+"_val");
373 |     if (null === e) {
374 |       return "";
375 |     } else {
376 |       v = e.value;
377 |     }
378 |     if ("" !== v) {
379 |       if (isNaN(+v)) {
380 |         return v;
381 |       }
382 |       else {
383 |         return +v;
384 |       }
385 |     } else {
386 |       return "";
387 |     }
388 |   }
389 |   return values[n];
390 | }
391 | 
392 | function expr(n) {
393 |   var e;
394 |   e = document.getElementById("b"+n);
395 |   if (null === e) {
396 |     return ""
397 |   } else {
398 |     return e.childNodes[1].childNodes[5].value;
399 |   }
400 | }
401 | 
402 | function last() {
403 |   var b;
404 |   if (null === blkid) { return null; }
405 |   b = blkid.replace(/^b/,"");
406 |   return res(b-1);
407 | }
408 | 
409 | function final() {
410 |   return values[idcntr-1];
411 | }
412 | 
413 | function store_content(ev,th) {
414 |   var fn,p,save_link,b;
415 |   update_all();
416 |   save_link = document.getElementById("downloader");
417 |   if ("missing" !== save_link.href) {
418 |     window.URL.revokeObjectURL(save_link.href);
419 |     save_link.href = "missing";
420 |   }
421 |   save_link.download = "missing";
422 |   fn = document.URL.match(/\/([^\/]*)$/)[1];
423 |   b = window.document.documentElement.outerHTML;
424 |   p = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\n    "http://www.w3.org/TR/html4/strict.dtd">\n' + b;
425 |   p = p.replace(/\n\n\n+<\/body><\/html>/,"\n\n</body></html>");
426 |   blob = new Blob([String.fromCharCode(0xFEFF),p],{type: "text/html;charset=" + document.characterSet});
427 |   save_link.href = window.URL.createObjectURL(blob);
428 |   save_link.download = fn;
429 | }
430 | 
431 | function write_doc(txt) {
432 |   var b;
433 |   document.open();
434 |   document.write(txt);
435 |   document.close();
436 |   idcntr = 0;
437 |   while (true) {
438 |     b = document.getElementById("b"+idcntr);
439 |     if (b === null) { break; }
440 |     blk_resizing(b);
441 |     idcntr++;
442 |   }
443 |   blkid = null;
444 |   values = [];
445 | }
446 | 
447 | function restore_content(ev,th) {
448 |   var rdr
449 |   if (undefined === window.blob) return;
450 |   rdr = new FileReader();
451 |   rdr.addEventListener("loadend",function(e) { write_doc(e.srcElement.result) });
452 |   rdr.readAsText(blob);
453 | }
454 | 
455 | function do_all(ev,th) {
456 |   var blk,txt,d,index,v;
457 |   for (index=0; index<idcntr; index++) {
458 |     blk = document.getElementById("b"+index);
459 |     if (null === blk) { continue; }
460 |     d = blk.childNodes[1].childNodes[5];
461 |     txt = d.value;
462 |     v = document.getElementById("b"+index+"_val");
463 |     if (! txt.match(/^</) || (null != v && "TEXTAREA" === v.nodeName)) {
464 |       eval_block(blk);
465 |     } else {
466 |       d.parentNode.childNodes[6].innerHTML = txt;
467 |     }
468 |   }
469 |   button_reset(th);
470 | }
471 | 
472 | function update_all() {
473 |   var blk,d,index,v;
474 |   for (index=0; index<idcntr; index++) {
475 |     blk = document.getElementById("b"+index);
476 |     if (null === blk) { continue; }
477 |     d = blk.childNodes[1].childNodes[5];
478 |     d.textContent = d.value;
479 |     v = document.getElementById("b"+index+"_val");
480 |     if (null != v && "TEXTAREA" === v.nodeName) {
481 |       v.textContent = v.value;
482 |     }
483 |   }
484 | }
485 | --></script>
486 | </head>
487 | <body>
488 | 
489 | <span id="heading" style="display:inline-block;margin-bottom: .5em;">js10gl</span>
490 | 
491 | <span style="display:inline-block;float:right;margin-top: .8em;">
492 | <input id="RORW" type="button" value="RW>RO" onclick="toggle_rw(event,this);">
493 | <input type="button" value="clear" onclick="clear_content(event,this);">
494 | <input type="button" value="store" onclick="store_content(event,this);">
495 | <input type="button" value="restore" onclick="restore_content(event,this);">
496 | <a id="downloader" href="missing" download="missing" target="_blank"><input type="button" value="save" onclick="store_content(event,this);"></a>
497 | </span>
498 | <br>
499 | 
500 | <input type="button" value="add" onclick="add_block(event,this);" style="margin-top: .8em; margin-bottom: .5em;">
501 | 
502 | <div id="content" contenteditable="true"><div id="b0">[0]:&nbsp;<span class="box1"><input type="button" value="go" onclick="button_flash(go_block,event,this);" class="hidden"><input type="button" value="txt" onclick="show_block(event,this);" class="hidden"><input type="button" value="clr" onclick="clr_block(event,this);" class="hidden"><input type="button" value="+" onclick="vis_block(event,this);"><br><textarea id="b0_in" class="hidden" rows="1" cols="110" style="height: auto;">&lt;p&gt;
503 | &lt;b&gt;Documentation for js.html&lt;/b&gt;&lt;br&gt;
504 | &lt;br&gt;
505 | This is a self-contained Javascript Notebook (inspired by Jupyter Notebooks).
506 | &lt;br&gt;
507 | &lt;br&gt;
508 | &lt;b&gt;Appearance of an example notebook ...&lt;/b&gt;
509 | &lt;br&gt;
510 | &lt;hr&gt;
511 | 
512 | &lt;span id="heading" style="font-size: 1.3em; font-weight: bold; padding-top: 0.5em; color: rgb(51, 51, 51); font-family: Arial; display: inline-block; margin-bottom: 0.5em;"&gt;jsX&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; float: right; margin-top: 0.8em;"&gt;&lt;input id="RORW" type="button" value="RW&gt;RO"&gt;&amp;nbsp;&lt;input type="button" value="clear"&gt;&amp;nbsp;&lt;input type="button" value="store"&gt;&amp;nbsp;&lt;input type="button" value="restore"&gt;&amp;nbsp;&lt;a id="downloader" href="file:///media/removable/TCWdrive/stuff/missing" download="missing" target="_blank"&gt;&lt;input type="button" value="save"&gt;&lt;/a&gt;&lt;/span&gt;&lt;br style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&lt;input type="button" value="add" style="margin-top: 0.8em; margin-bottom: 0.5em;"&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&lt;/span&gt;&lt;div id="content" style="padding-top: 0.5em; color: rgb(51, 51, 51); font-family: Arial;"&gt;&lt;div id="b0"&gt;[0]:&amp;nbsp;&lt;span class="box1" style="display: inline-block; width: 693.391px; vertical-align: top;"&gt;&lt;input type="button" value="go" class=""&gt;&lt;input type="button" value="txt"&gt;&lt;input type="button" value="clr"&gt;&lt;input type="button" value="-"&gt;&lt;br&gt;&lt;textarea id="b0_in" class="box0" rows="1" cols="110" style="vertical-align: text-top; font-size: 1.1em; border-style: inset; border-color: rgb(170, 170, 170); width: 658.719px; margin: 1px; min-height: 1em; resize: none; height: 17px;"&gt;(1+Math.sqrt(5))/2&lt;/textarea&gt;&lt;div&gt;&lt;textarea id="b0_val" class="box2" rows="1" cols="110" style="font-size: 1.1em; border-style: inset; border-color: rgb(170, 170, 170); width: 658.719px; margin: 1px; min-height: 1em; resize: none; height: 17px;"&gt;1.618033988749895&lt;/textarea&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;&lt;p style="margin: 0.75em;"&gt;&lt;/p&gt;&lt;/div&gt;&lt;input type="button" value="go last" class=""&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 0.2em;"&gt;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;input type="button" value="add"&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 0.2em;"&gt;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;input type="button" value="go-add" class=""&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 0.2em;"&gt;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;input type="button" value="go all" class=""&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 115.562px;"&gt;&lt;/span&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&amp;nbsp;&lt;/span&gt;&lt;input type="button" value="delete"&gt;&lt;span style="color: rgb(51, 51, 51); font-family: Arial;"&gt;&lt;/span&gt;&lt;div&gt;&lt;br style="color: rgb(0, 0, 0); font-family: Tinos;"&gt;&lt;/div&gt;
513 | 
514 | &lt;br&gt;
515 | &lt;hr&gt;
516 | &lt;br&gt;&lt;br&gt;
517 | &lt;div&gt;
518 | &lt;b&gt;Description of elements&lt;/b&gt;
519 | &lt;/div&gt;
520 | &lt;div&gt;&lt;br&gt;
521 | &lt;b&gt;Top elements&lt;/b&gt;
522 | &lt;/div&gt;
523 | &lt;b&gt;jsX&lt;/b&gt;
524 |  - name of the html file (with ".html" removed)&lt;br&gt;
525 | &lt;div&gt;
526 | buttons:&lt;/div&gt;
527 | &lt;div&gt;
528 | add - add a new interaction unit (these consist of a javascript/html input and possibly a resultant output)&lt;/div&gt;
529 | &lt;div&gt;
530 | RO&amp;gt;RW / RW&amp;gt;RO - make read-write(RW) / read-only(RO), this is a toggle; Helps clicking links in html text&lt;/div&gt;
531 | &lt;div&gt;
532 | clear - clears out all content&lt;/div&gt;
533 | &lt;div&gt;
534 | store - saves copy of content (within the page's data, not in a file)&lt;/div&gt;
535 | &lt;div&gt;
536 | restore - restores saved copy of content&lt;/div&gt;
537 | &lt;div&gt;
538 | save - Save to file (functions like downloading a file);
539 | For Chrome browser, want "Ask where to save each file before downloading" turned on (exact behavior varies with OS and browser)
540 | &lt;/div&gt;
541 | &lt;div&gt;&lt;br&gt;&lt;/div&gt;
542 | &lt;div&gt;
543 | &lt;b&gt;Interaction units&lt;/b&gt;
544 |  - there may be many of these&lt;/div&gt;
545 | &lt;div&gt;
546 | [n] - numbered id of unit&lt;/div&gt;
547 | &lt;div&gt;
548 | input text box - place to enter javascript code or html input; Below this may be an output value in a box or unboxed html rendering;&lt;/div&gt;
549 | &lt;div&gt;
550 | output appears below input and is boxed if it is the result of evaluation; only appears after "go" or "txt" is clicked; html output will be read-only in RO mode&lt;/div&gt;
551 | &lt;div&gt;
552 | &lt;span style="font-size: 1em;"&gt;
553 | buttons:&lt;/span&gt;&lt;br&gt;
554 | &lt;/div&gt;
555 | &lt;div&gt;
556 | go - eval input and put result (string version of) in output box below the input box&lt;/div&gt;
557 | &lt;div&gt;
558 | txt - show input text via html rendering below input box&lt;/div&gt;
559 | &lt;div&gt;
560 | clr - clear the output box (switch to eval output); will create output box if it doesn't exist&lt;/div&gt;
561 | &lt;div&gt;
562 | - / + - toggle visibility of input box and go/txt/clr buttons; with html rendering hides the html markup&lt;/div&gt;
563 | &lt;div&gt;&lt;br&gt;&lt;/div&gt;
564 | &lt;div&gt;
565 | &lt;b&gt;Bottom elements&lt;/b&gt;
566 | &lt;/div&gt;
567 | &lt;div&gt;
568 | buttons:&lt;/div&gt;
569 | &lt;div&gt;
570 | go last - eval last input and show result&lt;/div&gt;
571 | &lt;div&gt;
572 | add - add another interaction unit&lt;/div&gt;
573 | &lt;div&gt;
574 | go-add - Same as "go last" followed by "add"&lt;/div&gt;
575 | &lt;div&gt;
576 | go all - go through all interaction&amp;nbsp;units evaluating and showing the results; if first non-blank character of the input is "&amp;lt;", then input is considered html&lt;/div&gt;
577 | &lt;div&gt;
578 | delete - delete the last interaction unit&lt;/div&gt;
579 | &lt;div&gt;&lt;br&gt;&lt;/div&gt;
580 | &lt;div&gt;
581 | &lt;b&gt;Special functions available in javascript code&lt;/b&gt;
582 | &lt;/div&gt;
583 | &lt;div&gt;
584 | str(n) - nth output as string&lt;/div&gt;
585 | &lt;div&gt;
586 | res(n) - nth output value (not stringified)&lt;/div&gt;
587 | &lt;div&gt;
588 | expr(n) - nth input value as string&lt;/div&gt;
589 | &lt;div&gt;
590 | last() - previous output value or string (not stringified)&lt;/div&gt;
591 | &lt;div&gt;
592 | final() - very last output value (not stringified)&lt;/div&gt;
593 | &lt;div&gt;
594 | put(str) - appends value of str to output area for current executing javascript code; like printing to output box&lt;/div&gt;
595 | &lt;div&gt;&lt;br&gt;
596 | &lt;div&gt;
597 | &lt;div&gt;
598 | A few additional notes:&lt;br&gt;
599 | Outputs are produced by the default rules for converting values to strings ("toString").&lt;br&gt;
600 | Evaluation is done with global context. Function definitions will be global.&lt;br&gt;
601 | Browser save ("Save page as ...") loses changes and functionality. Make sure to use the Save button.&lt;br&gt;
602 | HTML output/rendering only updated when the txt button is clicked.&lt;/div&gt;
603 | When RW, the html outputs can be edited (but the "source" will not be updated). Changes will be preserved by saving.&lt;br&gt;
604 | (The CSS/JS content of this page can be moved to separate files to make very small working pages.)&lt;br&gt;
605 | You can paste text data into an input box and refer to it elsewhere using expr().&lt;br&gt;
606 | &lt;div&gt;&lt;br&gt;
607 | &lt;/div&gt;
608 | &lt;div&gt;&lt;br&gt;&lt;/div&gt;
609 | &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
610 | </textarea><div><p>
611 | <b>Documentation for js.html</b><br>
612 | <br>
613 | This is a self-contained Javascript Notebook (inspired by Jupyter Notebooks).
614 | <br>
615 | <br>
616 | <b>Appearance of an example notebook ...</b>
617 | <br>
618 | </p><hr>
619 | 
620 | <span id="heading" style="font-size: 1.3em; font-weight: bold; padding-top: 0.5em; color: rgb(51, 51, 51); font-family: Arial; display: inline-block; margin-bottom: 0.5em;">jsX</span><span style="color: rgb(51, 51, 51); font-family: Arial;"></span><span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; float: right; margin-top: 0.8em;"><input id="RORW" type="button" value="RW>RO">&nbsp;<input type="button" value="clear">&nbsp;<input type="button" value="store">&nbsp;<input type="button" value="restore">&nbsp;<a id="downloader" href="file:///media/removable/TCWdrive/stuff/missing" download="missing" target="_blank"><input type="button" value="save"></a></span><br style="color: rgb(51, 51, 51); font-family: Arial;"><input type="button" value="add" style="margin-top: 0.8em; margin-bottom: 0.5em;"><span style="color: rgb(51, 51, 51); font-family: Arial;"></span><div id="content" style="padding-top: 0.5em; color: rgb(51, 51, 51); font-family: Arial;"><div id="b0">[0]:&nbsp;<span class="box1" style="display: inline-block; width: 693.391px; vertical-align: top;"><input type="button" value="go" class=""><input type="button" value="txt"><input type="button" value="clr"><input type="button" value="-"><br><textarea id="b0_in" class="box0" rows="1" cols="110" style="vertical-align: text-top; font-size: 1.1em; border-style: inset; border-color: rgb(170, 170, 170); width: 658.719px; margin: 1px; min-height: 1em; resize: none; height: 17px;">(1+Math.sqrt(5))/2</textarea><div><textarea id="b0_val" class="box2" rows="1" cols="110" style="font-size: 1.1em; border-style: inset; border-color: rgb(170, 170, 170); width: 658.719px; margin: 1px; min-height: 1em; resize: none; height: 17px;">1.618033988749895</textarea></div></span></div><p style="margin: 0.75em;"></p></div><input type="button" value="go last" class=""><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 0.2em;"></span><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><input type="button" value="add"><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 0.2em;"></span><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><input type="button" value="go-add" class=""><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 0.2em;"></span><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><input type="button" value="go all" class=""><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><span style="color: rgb(51, 51, 51); font-family: Arial; display: inline-block; width: 115.562px;"></span><span style="color: rgb(51, 51, 51); font-family: Arial;">&nbsp;</span><input type="button" value="delete"><span style="color: rgb(51, 51, 51); font-family: Arial;"></span><div><br style="color: rgb(0, 0, 0); font-family: Tinos;"></div>
621 | 
622 | <br>
623 | <hr>
624 | <br><br>
625 | <div>
626 | <b>Description of elements</b>
627 | </div>
628 | <div><br>
629 | <b>Top elements</b>
630 | </div>
631 | <b>jsX</b>
632 |  - name of the html file (with ".html" removed)<br>
633 | <div>
634 | buttons:</div>
635 | <div>
636 | add - add a new interaction unit (these consist of a javascript/html input and possibly a resultant output)</div>
637 | <div>
638 | RO&gt;RW / RW&gt;RO - make read-write(RW) / read-only(RO), this is a toggle; Helps clicking links in html text</div>
639 | <div>
640 | clear - clears out all content</div>
641 | <div>
642 | store - saves copy of content (within the page's data, not in a file)</div>
643 | <div>
644 | restore - restores saved copy of content</div>
645 | <div>
646 | save - Save to file (functions like downloading a file);
647 | For Chrome browser, want "Ask where to save each file before downloading" turned on (exact behavior varies with OS and browser)
648 | </div>
649 | <div><br></div>
650 | <div>
651 | <b>Interaction units</b>
652 |  - there may be many of these</div>
653 | <div>
654 | [n] - numbered id of unit</div>
655 | <div>
656 | input text box - place to enter javascript code or html input; Below this may be an output value in a box or unboxed html rendering;</div>
657 | <div>
658 | output appears below input and is boxed if it is the result of evaluation; only appears after "go" or "txt" is clicked; html output will be read-only in RO mode</div>
659 | <div>
660 | <span style="font-size: 1em;">
661 | buttons:</span><br>
662 | </div>
663 | <div>
664 | go - eval input and put result (string version of) in output box below the input box</div>
665 | <div>
666 | txt - show input text via html rendering below input box</div>
667 | <div>
668 | clr - clear the output box (switch to eval output); will create output box if it doesn't exist</div>
669 | <div>
670 | - / + - toggle visibility of input box and go/txt/clr buttons; with html rendering hides the html markup</div>
671 | <div><br></div>
672 | <div>
673 | <b>Bottom elements</b>
674 | </div>
675 | <div>
676 | buttons:</div>
677 | <div>
678 | go last - eval last input and show result</div>
679 | <div>
680 | add - add another interaction unit</div>
681 | <div>
682 | go-add - Same as "go last" followed by "add"</div>
683 | <div>
684 | go all - go through all interaction&nbsp;units evaluating and showing the results; if first non-blank character of the input is "&lt;", then input is considered html</div>
685 | <div>
686 | delete - delete the last interaction unit</div>
687 | <div><br></div>
688 | <div>
689 | <b>Special functions available in javascript code</b>
690 | </div>
691 | <div>
692 | str(n) - nth output as string</div>
693 | <div>
694 | res(n) - nth output value (not stringified)</div>
695 | <div>
696 | expr(n) - nth input value as string</div>
697 | <div>
698 | last() - previous output value or string (not stringified)</div>
699 | <div>
700 | final() - very last output value (not stringified)</div>
701 | <div>
702 | put(str) - appends value of str to output area for current executing javascript code; like printing to output box</div>
703 | <div><br>
704 | <div>
705 | <div>
706 | A few additional notes:<br>
707 | Outputs are produced by the default rules for converting values to strings ("toString").<br>
708 | Evaluation is done with global context. Function definitions will be global.<br>
709 | Browser save ("Save page as ...") loses changes and functionality. Make sure to use the Save button.<br>
710 | HTML output/rendering only updated when the txt button is clicked.</div>
711 | When RW, the html outputs can be edited (but the "source" will not be updated). Changes will be preserved by saving.<br>
712 | (The CSS/JS content of this page can be moved to separate files to make very small working pages.)<br>
713 | You can paste text data into an input box and refer to it elsewhere using expr().<br>
714 | <div><br>
715 | </div>
716 | <div><br></div>
717 | </div></div>
718 | </div></span></div><p style="margin: 0.75em;"></p><div id="b1">[1]:&nbsp;<span class="box1"><input type="button" value="go" onclick="button_flash(go_block,event,this);" class="hidden"><input type="button" value="txt" onclick="show_block(event,this);" class="hidden"><input type="button" value="clr" onclick="clr_block(event,this);" class="hidden"><input type="button" value="+" onclick="vis_block(event,this);"><br><textarea id="b1_in" class="hidden" rows="1" cols="110" style="height: auto;">&lt;p&gt;You can use the clear button to eliminate the documentation and create an empty notebook.</textarea><div><p>You can use the clear button to eliminate the documentation and create an empty notebook.</p></div></span></div><p style="margin: 0.75em;"></p></div>
719 | 
720 | <input type="button" value="go last" onclick="button_flash(golast_block,event,this);" class="">
721 | 
722 | <span style="display:inline-block;width:.2em"></span>
723 | <input type="button" value="add" onclick="add_block(event,this);">
724 | 
725 | <span style="display:inline-block;width:.2em"></span>
726 | <input type="button" value="go-add" onclick="button_flash(goadd_block,event,this);" class="">
727 | 
728 | <span style="display:inline-block;width: .2em"></span>
729 | <input type="button" value="go all" onclick="button_flash(do_all,event,this);" class="">
730 | 
731 | <span style="display:inline-block;width:15%;"></span>
732 | <input type="button" value="delete" onclick="deletelast_block(event,this);">
733 | 
734 | <p style="height: 10em"></p>
735 | 
736 | <script language="JavaScript" type="text/javascript">
737 | pagestartup();
738 | --></script>
739 | 
740 | </body></html>
741 | 


--------------------------------------------------------------------------------
/mfibo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 |     "http://www.w3.org/TR/html4/strict.dtd">
  3 | <html><head>
  4 | <title>js+help</title>
  5 | <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  6 | <meta name="viewport" content="width=device-width, initial-scale=1">
  7 | <style>
  8 | html {
  9 |   font-family: 'Arial';
 10 | }
 11 | 
 12 | body {
 13 |   color: #333;
 14 |   font-weight: 100;
 15 |   max-width: 95%;
 16 |   margin: 0 1em;
 17 | }
 18 | 
 19 | div:focus {
 20 |   outline: none;
 21 | }
 22 | 
 23 | #heading {
 24 |   font-size: 1.3em;
 25 |   font-weight: bold;
 26 |   padding-top: .5em;
 27 | }
 28 | 
 29 | #content {
 30 |   padding-top: .5em;
 31 |   font-size: 1em;
 32 | }
 33 | 
 34 | .box0 {
 35 |   vertical-align: text-top;
 36 |   cursor: text;
 37 |   display: inline-block;
 38 |   font-size: 1.1em;
 39 |   border: 1px inset #aaa;
 40 |   width: 95%;
 41 |   margin: 1px;
 42 |   padding: 2px;
 43 |   min-height: 1em;
 44 |   white-space: pre-wrap;
 45 |   overflow-wrap: break-word;
 46 |   word-wrap: break-word;
 47 |   resize: none;
 48 | }
 49 | 
 50 | .hidden {
 51 |   display: none;
 52 | }
 53 | 
 54 | .box1 {
 55 |   display:inline-block;
 56 |   width: 90%;
 57 |   vertical-align:top;
 58 | }
 59 | 
 60 | .box2 {
 61 |   cursor: text;
 62 |   display:inline-block;
 63 |   font-size: 1.1em;
 64 |   border: 1px inset #aaa;
 65 |   width: 95%;
 66 |   margin: 1px;
 67 |   padding: 2px;
 68 |   min-height: 1em;
 69 |   white-space: pre-wrap;
 70 |   overflow-wrap: break-word;
 71 |   word-wrap: break-word;
 72 |   resize: none;
 73 | }
 74 | 
 75 | .buttonactive {
 76 |   appearance: push-button !important;
 77 |   background-color: SkyBlue;
 78 | }
 79 | </style>
 80 | <script id="mainscript" language="JavaScript" type="text/javascript"><!--
 81 | var idcntr=0;
 82 | var blkid=null;
 83 | var title;
 84 | var values = [];
 85 | var curout = null;
 86 | var evalfn = eval;
 87 | 
 88 | 
 89 | function pagestartup() {
 90 |   title = decodeURIComponent(document.URL.match(/\/([^\.\/]*)[^\/]*$/)[1]) || 'JS';
 91 |   document.getElementById('heading').innerHTML = title;
 92 |   document.getElementsByTagName("title")[0].innerHTML = title;
 93 | 
 94 |   idcntr = 0;
 95 |   while (true) {
 96 |     b = document.getElementById("b"+idcntr);
 97 |     if (b === null) { break; }
 98 |     blk_resizing(b);
 99 |     idcntr++;
100 |   }
101 |   document.getElementById("downloader").href = "missing";
102 |   document.getElementById("downloader").download = "missing";
103 | }
104 | 
105 | function textarearesize(ta) {
106 |   var h,a,y,ny;
107 |   y = window.pageYOffset;
108 |   ta.style.height = 'auto';
109 |   h = ta.scrollHeight;
110 |   h -= 4; // twice the padding
111 |   ta.style.height = h+'px';
112 |   ny = window.pageYOffset;
113 |   if (ny < y-40 || y+40 < ny) { // no big jumps
114 |     window.scrollTo(window.pageXoffset,y);
115 |     setTimeout(function(){ window.scrollTo(window.pageXoffset,y); },60);
116 |   }
117 | }
118 | 
119 | function blkresize(b) {
120 |   var d,e;
121 |   d = b.childNodes[1];
122 |   if (6<=d.childNodes.length) {
123 |     e = d.childNodes[5];
124 |     if ("TEXTAREA" === e.nodeName) { textarearesize(e); }
125 |     if (1<=d.childNodes[6].childNodes.length) {
126 |       e = d.childNodes[6].childNodes[0];
127 |       if ("TEXTAREA" === e.nodeName) { textarearesize(e); }
128 |     }
129 |   }
130 | }
131 | 
132 | function textarea_resizing(ta) {
133 |   function resize () {
134 |     textarearesize(ta);
135 |   }
136 |   function delayedResize () {
137 |     window.setTimeout(resize, 0);
138 |   }
139 |   ta.addEventListener('change',resize,false);
140 |   ta.addEventListener('cut',delayedResize,false);
141 |   ta.addEventListener('paste',delayedResize,false);
142 |   ta.addEventListener('drop',delayedResize,false);
143 |   ta.addEventListener('keydown',delayedResize,false);
144 |   textarearesize(ta);
145 | }
146 | 
147 | function blk_resizing(b) {
148 |   var d,e;
149 |   d = b.childNodes[1];
150 |   if (6<=d.childNodes.length) {
151 |     e = d.childNodes[5];
152 |     if ("TEXTAREA" === e.nodeName) { textarea_resizing(e); }
153 |     if (1<=d.childNodes[6].childNodes.length) {
154 |       e = d.childNodes[6].childNodes[0];
155 |       if ("TEXTAREA" === e.nodeName) { textarea_resizing(e); }
156 |     }
157 |   }
158 | }
159 | 
160 | function clear_content(ev,th) {
161 |   idcntr = 0;
162 |   blkid = null;
163 |   values = [];
164 |   document.getElementById('content').innerHTML = "";
165 | }
166 | 
167 | function toggle_rw(ev,th) {
168 |   var c;
169 |   c = document.getElementById('content');
170 |   if ("true" === c.contentEditable) {
171 |     c.contentEditable = false;
172 |     document.getElementById('RORW').value = "RO>RW";
173 |   } else {
174 |     c.contentEditable = true;
175 |     document.getElementById('RORW').value = "RW>RO";
176 |   }
177 | }
178 | 
179 | function add_block(ev,th) {
180 |   var txt,d,c,idnum,x;
181 |   c = document.getElementById('content');
182 |   idnum = idcntr;
183 |   idcntr++;
184 | txt = '['+idnum+']:&nbsp;<span class="box1">\
185 | <input type="button" value="go" onclick="button_flash(go_block,event,this);" class="">\
186 | <input type="button" value="txt" onclick="show_block(event,this);">\
187 | <input type="button" value="clr" onclick="clr_block(event,this);">\
188 | <input type="button" value="-" onclick="vis_block(event,this);"><br>\
189 | <textarea id="b'+idnum+'_in" class="box0" rows=1 cols=110></textarea>\
190 | <div></div></span>';
191 |   d = document.createElement("DIV");
192 |   d.id = "b"+idnum;
193 |   d.innerHTML = txt;
194 |   c.appendChild(d);
195 |   x=document.createElement("P");
196 |   x.style = "margin: .75em";
197 |   c.appendChild(x);
198 |   values[idnum] = undefined;
199 |   blk_resizing(d);
200 |   d.childNodes[1].childNodes[5].focus();
201 |   return undefined;
202 | }
203 | 
204 | function deletelast_block(ev,th) {
205 |   var d,gid,aid;
206 |   d = document.getElementById('content');
207 |   if (null === d.lastChild) { return; }
208 |   idcntr--;
209 |   gid = "b"+idcntr;
210 |   while (1) {
211 |     aid = d.lastChild.id;
212 |     d.removeChild(d.lastChild);
213 |     if (gid === aid) { break; }
214 |   }
215 |   values[idcntr] = undefined;
216 | }
217 | 
218 | function put(s) {
219 |   if (null === curout) {
220 |     console.log(s);
221 |   } else {
222 |     curout.value += s;
223 |     textarearesize(curout);
224 |   }
225 |   return s;
226 | }
227 | 
228 | function eval_script(scr) {
229 |   var val,errmsg;
230 |   try {
231 |     val = evalfn(scr);
232 |   } catch (errmsg) {
233 |     val = "Error: " + errmsg;
234 |   }
235 |   return val;
236 | }
237 | 
238 | function eval_block(blk) {
239 |   var scr,val,e,x,b,d;
240 |   scr = blk.childNodes[1].childNodes[5].value;
241 |   blkid = blk.id;
242 |   d = blk.childNodes[1].childNodes[6];
243 |   if (1<=d.childNodes.length && d.childNodes[0].id === undefined) {
244 |     d.innerHTML = "";
245 |   }
246 |   if (d.childNodes.length<1) {
247 |     x = document.createElement("TEXTAREA");
248 |     x.id = blkid + "_val";
249 |     x.className = "box2";
250 |     x.rows = 1;
251 |     x.cols = 110;
252 |     d.appendChild(x);
253 |     textarea_resizing(x);
254 |   } else {
255 |     x = d.childNodes[0];
256 |   }
257 |   x.value = "";
258 |   textarearesize(x)
259 |   curout = x;
260 |   val = eval_script(scr);
261 |   x.value += val;
262 |   textarearesize(x)
263 |   b = +(blkid.replace(/^b/,""));
264 |   values[b] = val;
265 |   return undefined;
266 | }
267 | 
268 | function button_flash(fn,ev,th) {
269 |   th.className = "buttonactive";
270 |   setTimeout(function() { fn(ev,th); }, 20);
271 | }
272 | 
273 | function button_active(th) { th.className = "buttonactive"; }
274 | function button_reset(th) { th.className = ""; }
275 | 
276 | function go_block(ev,th) {
277 |   var blk,txt,d;
278 |   blk = th.parentNode.parentNode;
279 |   eval_block(blk);
280 |   button_reset(th);
281 | }
282 | 
283 | function golast_block(ev,th) {
284 |   var blk,txt,d;
285 |   blk = document.getElementById("b"+(idcntr-1));
286 |   if (null === blk) {
287 |     button_reset(th);
288 |     return;
289 |   }
290 |   eval_block(blk);
291 |   button_reset(th);
292 | }
293 | 
294 | function goadd_block(ev,th) {
295 |   golast_block(ev,th);
296 |   add_block(ev,th);
297 | }
298 | 
299 | function show_block(ev,th) {
300 |   var txt,d;
301 |   txt = th.parentNode.childNodes[5].value;
302 |   d = th.parentNode.childNodes[6];
303 |   d.innerHTML = txt;
304 |   return undefined;
305 | }
306 | 
307 | function clr_block(ev,th) {
308 |   var t,d,x,p;
309 |   d = th.parentNode.childNodes[6];
310 |   if (1<=d.childNodes.length && (d.childNodes[0].id === "" || d.childNodes[0].id === undefined)) {
311 |     d.innerHTML = "";
312 |   }
313 |   if (d.childNodes.length<1) {
314 |     x = document.createElement("TEXTAREA");
315 |     x.id = blkid + "_val";
316 |     x.className = "box2";
317 |     x.rows = 1;
318 |     x.cols = 110;
319 |     d.appendChild(x);
320 |   } else {
321 |     x = d.childNodes[0];
322 |   }
323 |   x.value = "";
324 |   textarearesize(x);
325 |   p = th.parentNode;
326 |   t = p.childNodes[5];
327 |   t.className = "box0";
328 |   p.childNodes[0].className = "";
329 |   p.childNodes[1].className = "";
330 |   p.childNodes[2].className = "";
331 |   p.childNodes[3].value = "-";
332 | }
333 | 
334 | function vis_block(ev,th) {
335 |   var t,p;
336 |   p = th.parentNode;
337 |   t = p.childNodes[5];
338 |   if ("box0" === t.className) {
339 |     t.className = "hidden";
340 |     p.childNodes[0].className = "hidden";
341 |     p.childNodes[1].className = "hidden";
342 |     p.childNodes[2].className = "hidden";
343 |     p.childNodes[3].value = "+";
344 |   } else {
345 |     t.className = "box0";
346 |     p.childNodes[0].className = "";
347 |     p.childNodes[1].className = "";
348 |     p.childNodes[2].className = "";
349 |     p.childNodes[3].value = "-";
350 |   }
351 |   blkresize(p.parentNode);
352 | }
353 | 
354 | function str(n) {
355 |   var e;
356 |   e = document.getElementById("b"+n+"_val");
357 |   if (null === e) {
358 |     e = document.getElementById("b"+n);
359 |     if (null === e) {
360 |       return "";
361 |     } else {
362 |       return e.childNodes[1].childNodes[5].value;
363 |     }
364 |   } else {
365 |     return e.value;
366 |   }
367 | }
368 | 
369 | function res(n) {
370 |   var e,v;
371 |   if (undefined === values[n]) {
372 |     e = document.getElementById("b"+n+"_val");
373 |     if (null === e) {
374 |       return "";
375 |     } else {
376 |       v = e.value;
377 |     }
378 |     if ("" !== v) {
379 |       if (isNaN(+v)) {
380 |         return v;
381 |       }
382 |       else {
383 |         return +v;
384 |       }
385 |     } else {
386 |       return "";
387 |     }
388 |   }
389 |   return values[n];
390 | }
391 | 
392 | function expr(n) {
393 |   var e;
394 |   e = document.getElementById("b"+n);
395 |   if (null === e) {
396 |     return ""
397 |   } else {
398 |     return e.childNodes[1].childNodes[5].value;
399 |   }
400 | }
401 | 
402 | function last() {
403 |   var b;
404 |   if (null === blkid) { return null; }
405 |   b = blkid.replace(/^b/,"");
406 |   return res(b-1);
407 | }
408 | 
409 | function final() {
410 |   return values[idcntr-1];
411 | }
412 | 
413 | function store_content(ev,th) {
414 |   var fn,p,save_link,b;
415 |   update_all();
416 |   save_link = document.getElementById("downloader");
417 |   if ("missing" !== save_link.href) {
418 |     window.URL.revokeObjectURL(save_link.href);
419 |     save_link.href = "missing";
420 |   }
421 |   save_link.download = "missing";
422 |   fn = document.URL.match(/\/([^\/]*)$/)[1];
423 |   b = window.document.documentElement.outerHTML;
424 |   p = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\n    "http://www.w3.org/TR/html4/strict.dtd">\n' + b;
425 |   p = p.replace(/\n\n\n+<\/body><\/html>/,"\n\n</body></html>");
426 |   blob = new Blob([String.fromCharCode(0xFEFF),p],{type: "text/html;charset=" + document.characterSet});
427 |   save_link.href = window.URL.createObjectURL(blob);
428 |   save_link.download = fn;
429 | }
430 | 
431 | function write_doc(txt) {
432 |   var b;
433 |   document.open();
434 |   document.write(txt);
435 |   document.close();
436 |   idcntr = 0;
437 |   while (true) {
438 |     b = document.getElementById("b"+idcntr);
439 |     if (b === null) { break; }
440 |     blk_resizing(b);
441 |     idcntr++;
442 |   }
443 |   blkid = null;
444 |   values = [];
445 | }
446 | 
447 | function restore_content(ev,th) {
448 |   var rdr
449 |   if (undefined === window.blob) return;
450 |   rdr = new FileReader();
451 |   rdr.addEventListener("loadend",function(e) { write_doc(e.srcElement.result) });
452 |   rdr.readAsText(blob);
453 | }
454 | 
455 | function do_all(ev,th) {
456 |   var blk,txt,d,index,v;
457 |   for (index=0; index<idcntr; index++) {
458 |     blk = document.getElementById("b"+index);
459 |     if (null === blk) { continue; }
460 |     d = blk.childNodes[1].childNodes[5];
461 |     txt = d.value;
462 |     v = document.getElementById("b"+index+"_val");
463 |     if (! txt.match(/^</) || (null != v && "TEXTAREA" === v.nodeName)) {
464 |       eval_block(blk);
465 |     } else {
466 |       d.parentNode.childNodes[6].innerHTML = txt;
467 |     }
468 |   }
469 |   button_reset(th);
470 | }
471 | 
472 | function update_all() {
473 |   var blk,d,index,v;
474 |   for (index=0; index<idcntr; index++) {
475 |     blk = document.getElementById("b"+index);
476 |     if (null === blk) { continue; }
477 |     d = blk.childNodes[1].childNodes[5];
478 |     d.textContent = d.value;
479 |     v = document.getElementById("b"+index+"_val");
480 |     if (null != v && "TEXTAREA" === v.nodeName) {
481 |       v.textContent = v.value;
482 |     }
483 |   }
484 | }
485 | --></script>
486 | </head>
487 | <body>
488 | 
489 | <span id="heading" style="display:inline-block;margin-bottom: .5em;">js+help</span>
490 | 
491 | <span style="display:inline-block;float:right;margin-top: .8em;">
492 | <input id="RORW" type="button" value="RW>RO" onclick="toggle_rw(event,this);">
493 | <input type="button" value="clear" onclick="clear_content(event,this);">
494 | <input type="button" value="store" onclick="store_content(event,this);">
495 | <input type="button" value="restore" onclick="restore_content(event,this);">
496 | <a id="downloader" href="missing" download="missing" target="_blank"><input type="button" value="save" onclick="store_content(event,this);"></a>
497 | </span>
498 | <br>
499 | 
500 | <input type="button" value="add" onclick="add_block(event,this);" style="margin-top: .8em; margin-bottom: .5em;">
501 | 
502 | <div id="content" contenteditable="true"><div id="b0">[0]:&nbsp;<span class="box1"><input type="button" value="go" onclick="button_flash(go_block,event,this);" class="hidden"><input type="button" value="txt" onclick="show_block(event,this);" class="hidden"><input type="button" value="clr" onclick="clr_block(event,this);" class="hidden"><input type="button" value="+" onclick="vis_block(event,this);"><br><textarea id="b0_in" class="hidden" rows="1" cols="110" style="height: auto;">&lt;p&gt;Computing Fibonacci numbers using the familiar closed-form formula, but in modular arithmetic</textarea><div><p>Computing Fibonacci numbers using the closed-form formula, but in modular arithmetic</p></div></span></div><p style="margin: 0.75em;"></p><div id="b1">[1]:&nbsp;<span class="box1"><input type="button" value="go" onclick="button_flash(go_block,event,this);" class=""><input type="button" value="txt" onclick="show_block(event,this);"><input type="button" value="clr" onclick="clr_block(event,this);"><input type="button" value="-" onclick="vis_block(event,this);"><br><textarea id="b1_in" class="box0" rows="1" cols="110" style="height: 221px;">mpow2=function(a,n,m) {
503 |   var r;
504 |   r = 1;
505 |   while (0&lt;n) {
506 |     if (1&amp;n) { r = (r*a)%m; }
507 |     n = (n&gt;&gt;1);
508 |     if (0 === n) { break; }
509 |     a = (a*a)%m;
510 |   }
511 |   return r;
512 | };
513 | 
514 | mfib = (n) =&gt; (198*mpow2(31,n,929) + 731*mpow2(899,n,929))%929;</textarea><div><textarea id="b1_val" class="box2" rows="1" cols="110" style="height: 17px;">(n) =&gt; (198*mpow2(31,n,929) + 731*mpow2(899,n,929))%929</textarea></div></span></div><p style="margin: 0.75em;"></p><div id="b2">[2]:&nbsp;<span class="box1"><input type="button" value="go" onclick="button_flash(go_block,event,this);" class="hidden"><input type="button" value="txt" onclick="show_block(event,this);" class="hidden"><input type="button" value="clr" onclick="clr_block(event,this);" class="hidden"><input type="button" value="+" onclick="vis_block(event,this);"><br><textarea id="b2_in" class="hidden" rows="1" cols="110" style="height: auto;">&lt;p&gt;In the following the Fibonacci numbers are correct up to Fibo(15)</textarea><div><p>In the following the Fibonacci numbers are correct up to Fibo(15)</p></div></span></div><p style="margin: 0.75em;"></p><div id="b3">[3]:&nbsp;<span class="box1"><input type="button" value="go" onclick="button_flash(go_block,event,this);" class=""><input type="button" value="txt" onclick="show_block(event,this);"><input type="button" value="clr" onclick="clr_block(event,this);"><input type="button" value="-" onclick="vis_block(event,this);"><br><textarea id="b3_in" class="box0" rows="1" cols="110" style="height: 68px;">for (i=0; i&lt;20; i++) {
515 |   put(i+" - "+mfib(i)+"\n");
516 | }
517 | "OK"</textarea><div><textarea id="b3_val" class="box2" rows="1" cols="110" style="height: 357px;">0 - 0
518 | 1 - 1
519 | 2 - 1
520 | 3 - 2
521 | 4 - 3
522 | 5 - 5
523 | 6 - 8
524 | 7 - 13
525 | 8 - 21
526 | 9 - 34
527 | 10 - 55
528 | 11 - 89
529 | 12 - 144
530 | 13 - 233
531 | 14 - 377
532 | 15 - 610
533 | 16 - 58
534 | 17 - 668
535 | 18 - 726
536 | 19 - 465
537 | OK</textarea></div></span></div><p style="margin: 0.75em;"></p><div id="b4">[4]:&nbsp;<span class="box1"><input type="button" value="go" onclick="button_flash(go_block,event,this);" class="hidden"><input type="button" value="txt" onclick="show_block(event,this);" class="hidden"><input type="button" value="clr" onclick="clr_block(event,this);" class="hidden"><input type="button" value="+" onclick="vis_block(event,this);"><br><textarea id="b4_in" class="hidden" rows="1" cols="110" style="height: auto;">&lt;p&gt;The trick is that, modulo 929, sqrt(5) exists.</textarea><div><p>The trick is that, modulo 929, sqrt(5) exists.</p></div></span></div><p style="margin: 0.75em;"></p></div>
538 | 
539 | <input type="button" value="go last" onclick="button_flash(golast_block,event,this);" class="">
540 | 
541 | <span style="display:inline-block;width:.2em"></span>
542 | <input type="button" value="add" onclick="add_block(event,this);">
543 | 
544 | <span style="display:inline-block;width:.2em"></span>
545 | <input type="button" value="go-add" onclick="button_flash(goadd_block,event,this);" class="">
546 | 
547 | <span style="display:inline-block;width: .2em"></span>
548 | <input type="button" value="go all" onclick="button_flash(do_all,event,this);" class="">
549 | 
550 | <span style="display:inline-block;width:15%;"></span>
551 | <input type="button" value="delete" onclick="deletelast_block(event,this);">
552 | 
553 | <p style="height: 10em"></p>
554 | 
555 | <script language="JavaScript" type="text/javascript">
556 | pagestartup();
557 | --></script>
558 | 
559 | </body></html>
560 | 


--------------------------------------------------------------------------------
/phi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timcwinkler/javascript-notebook/d65c94414ca1c175a754b3acb1e89761251ddfa7/phi.png


--------------------------------------------------------------------------------