index.html

<!DOCTYPE html>
<title>Applesoft BASIC in JavaScript</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Suppress browser compat button -->

<link rel="shortcut icon" href="favicon.ico">
<link rel="alternate" type="application/atom+xml" href="https://github.com/inexorabletash/jsbasic/commits/master.atom">

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="display.css">

<script src="https://cdn.rawgit.com/inexorabletash/polyfill/v0.1.29/polyfill.min.js"></script>
<script src="https://cdn.rawgit.com/inexorabletash/polyfill/v0.1.29/keyboard.js"></script>

<!-- CodeMirror syntax highlighting - this is optional -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.css">
<script src="cm/basic.js"></script>
<link rel="stylesheet" href="cm/basic.css">
<style>
.CodeMirror { border: solid 1px black; width: 598px; height: 384px; background-color: white; }
.CodeMirror-scroll { height: 100%; }
</style>

<h1>Applesoft BASIC in Javascript</h1>
<p>
By <a target=_blank href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
| <a target="_blank" href="https://github.com/inexorabletash/jsbasic/">Source</a>
| <a target="_blank" href="https://github.com/inexorabletash/jsbasic/blob/master/README.md">README</a>
&mdash; <a target="_blank" href="reference.html">Applesoft BASIC Quick Reference</a>

<p>Related projects:
   <a href="https://inexorabletash.github.io/jslogo/">Logo in Javascript</a>
 | <a href="https://a2stuff.github.io/vnIIc">Streaming video to an Apple II - vnIIc</a>
</p>

<br style="clear: both;">

<!-- Screen -->
<div id="frame" class="jsb-frame" style="float: left; margin: 5px;" tabIndex="0">
  <div id="screen-wrapper" class="jsb-wrapper">
    <div id="lores" class="jsb-lores"></div>
    <canvas id="hires" width="560" height="384" class="jsb-hires"></canvas>
    <canvas id="hires2" width="560" height="384" class="jsb-hires"></canvas>
    <div id="screen" class="jsb-tty"></div>
  </div>
</div>

<!-- Source -->
<div style="float: left; margin: 5px;">
  Enter code:  &nbsp;&nbsp;
  <button id="btn_run">&#x25B6; Run</button>
  <button id="btn_stop" disabled>&#x25FC; Stop</button>

  <select id="lb_files">
    <option disabled selected="selected">Select a sample...</option>
  </select>
  <script>
    fetch('samples/index.txt')
      .then(response => {
        if (!response.ok)
          throw new Error(response.statusText);
        return response.text();
      })
      .then(text => {
        const select = document.querySelector('#lb_files');
        let group;
        text.split(/\r?\n/g).forEach(line => {
          line = line.replace(/^\s+|\s+$/, '');
          if (!line.length) return;
          if (line.startsWith('#')) {
            line = line.replace(/^#\s+/, '');
            if (line.startsWith('___')) {
              select.appendChild(document.createElement('hr'));
            } else {
              group = Object.assign(document.createElement('optgroup'),
                                    {label: line});
              select.appendChild(group);
            }
          } else {
            const match = line.match(/^(\S+)\s+(.*)$/);
            group.appendChild(Object.assign(
              document.createElement('option'),
              {value: match[1], innerText: match[2]}));
          }
        });
      });
  </script>


  <!-- Source code editor inserted here -->
  <div id="editorframe"></div>

  <form id="submission" method="post" enctype="text/plain" action="mailto:inexorabletash@gmail.com?subject=Applesoft%20Sample%20Submission" target=_blank>
  <textarea name="source" id="source" style="display: none;">
  </textarea>

  <button id="btn_save" title="Save as a file">&#x1F4BE; Save</button>
  <button id="btn_load" title="Load a file">&#x1F4C2; Load</button>
  <button id="btn_share" title="Share by email">&#x1F4E9; Share</button>

  <button id="show_paper" title="Echo all output to a &quot;print-out&quot;, so you can copy/paste">&#x1F4C3; Show output</button>
  <button id="hide_paper" title="Hide the &quot;print-out&quot;">&#x1F6AB; Hide output</button>
  </form>

</div>

<br style="clear: both;">

<h3 id="links">Links</h3>
<ul>
  <li>
    Real emulators in JavaScript:
    <a target="_blank" href="http://www.scullinsteel.com/apple2/">Apple IIjs</a>,
    <a target="_blank" href="http://www.scullinsteel.com/apple//e">Apple //jse</a>,
    <a target="_blank" href="http://www.megidish.net/apple2js/index.html">Apple2JS</a>,
    and
    <a target="_blank" href="https://github.com/nicholasbs/appletoo">many</a>
    <a target="_blank" href="http://porkrind.org/a2/">more</a>


  <li><a target="_blank" href="http://www.6502asm.com/">6502asm.com</a> - a 6502 assembler/emulator in JavaScript
  <li><a target="_blank" href="http://www.quitebasic.com/">Quite BASIC</a> - a similar project aimed at teaching programming
</ul>

<div id="paper-spacer"></div>
<div id="paper"></div>


<script src="basic.js?2012-02-08"></script>
<script src="bell.js"></script>
<script src="tty.js"></script>
<script src="lores.js"></script>
<script src="hires.js"></script>
<script src="dos.js"></script>
<script src="printer.js"></script>
<script src="index.js"></script>