-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (101 loc) · 8.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A programming environment and guide for beginners where you can learn as you go.">
<meta name="copyright" content="© Andrew Towers 2023. MIT License.">
<meta name="repository" content="https://github.com/raffecat/johnny-basic">
<title>Johnny BASIC</title>
<style>
html,body{margin:0;padding:0;background:#fdfaf9;color:#303335;font-family:Georgia,'Times New Roman',Times,serif;font-size:10px}
body{padding:1em}#thm{position:absolute;right:12px;top:10px;;display:none}.ic{fill:#303335;stroke:#303335}.hid{display:none}
.co{max-width:86em;margin:5em 1em;margin-left:auto;margin-right:auto}
.hd{display:flex}.jc{margin-left:20px}.hl{text-align:right;font-size:11px;padding-right:21px;}
.ico{display:inline-block;width:18px;height:18px;position:relative}
.sec{margin:3em 0;font-size:18px}
p{margin:1em 0;line-height:1.5}p.near{margin:0.4em 0}
.tip{margin:1.3em 0;border-left:5px solid rgb(91, 89, 225);padding-left:1em;font-size:0.96em;line-height:1.4}
.warn{margin:5em 0;border-left:5px solid #f44}
.btn{margin-top:0.8em;display:inline-block;border:1px solid #727272;padding:0.3em 0.8em;border-radius:3px;background:#eee;color:#222;font:14px Arial;text-decoration:none}button:active{background:#ddd}
.sbox{margin:1.6em 0;border:1px solid #727272;height:100px}
.tut{display:inline-block;margin-left:2px;padding:0 4px 0 6px;background:#fdb852;color:#352d2d;line-height:26px;height:26px;text-decoration:none;position:relative}
.tut:after{display:block;content:'';position:absolute;top:0;right:-26px;width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:13px solid #fdb852;border-right:13px solid transparent}
.tut.dim{background:#bfea76}.tut.dim:after{border-left-color:#bfea76}
h3{margin:4em 0 1em;font:16pt 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif}
td{font:18px Georgia,'Times New Roman',Times,serif}
code{font:bold 18px 'Courier New',Courier,monospace;color:coral}i{font-size:0.94em;font-weight:300;color:gold}
@media(prefers-color-scheme:dark){html,body{background:#303335;color:#fff}.ic{fill:#fff;stroke:#fff}kbd{background:#4a4a4a}}
.light{background:#fdfaf9;color:#303335}.light .ic{fill:#303335;stroke:#303335}.light kbd{background:#dfdfdf}
.dark{background:#303335;color:#fff}.dark .ic{fill:#fff;stroke:#fff}.dark kbd{background:#4a4a4a}
</style>
<script src="johnny.js" defer onerror="JB_fix()"></script>
<script>function JB_fix(){setTimeout(function(s,p,d){(d=document).getElementById('JBerr').style.display='block';s=d.getElementsByTagName('script')[1];p=s.parentElement;p.removeChild(s);s=d.createElement('script');s.onerror=JB_fix;s.src='johnny.js';p.appendChild(s)},2000)}</script>
</head>
<body>
<!-- theme -->
<div id="thm"><a href="#" role="button" title="Toggle Dark Theme"><svg xmlns="http://www.w3.org/2000/svg" viewBox="20 0 32 32" class="ico"><g class="ic" stroke-width="2"><path style="stroke:none" d="M28.8 16.27C28.8 12.16 32.1 8.826 36.2 8.77L36.2 23.77C32.1 23.72 28.8 20.38 28.8 16.27Z"/><ellipse style="fill:none" cx="36" cy="16.25" rx="7.5" ry="7.5"/><path style="fill:none" d="M36 1v4M36 28v4M48 16h4M20 16h4M28 9l-3.5-3.5M44 9l3.5-3.5M28 24l-3.5 3.5M44 24l3.5 3.5"/></g></svg></a></div>
<script>
(function(D,W){var e,d,m,mm=W.matchMedia||W.webkitMatchMedia||W.msMatchMedia||W.oMatchMedia
d=W.localStorage?W.localStorage.getItem('dark'):null;d=d!=null?d=='true':(m=mm.call(W,'(prefers-color-scheme:dark)'),d=m?m.matches:0)
D.body.className=d?'dark':'light';(e=D.getElementById('thm')).style.display='block'
e.onclick=function(){var s=(d=!d)?'dark':'light';D.body.className=s;D.getElementsByTagName('html')[0].className=s;W.localStorage&&W.localStorage.setItem('dark',''+d);return false}
})(document,window)
</script>
<div class="co">
<!-- header -->
<div class="hd">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Mascot" role="img" class="lo" width="100" height="120"><rect width="100" height="120" style="stroke:#f00;stroke-width:1;stroke-linejoin:bevel;fill:none"></svg>
<div class="jc">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Johnny BASIC Logo" role="img" alt="Johnny BASIC" viewBox="0 0 335 50" width="600">
<g class="ic"><path style="fill:none" d="M10 35v5h20v-30m-5 0h10m11 0h10l5 10v10l-5 10h-10l-5-10v-10zm24 0v30m0-15h20m0-15v30m10 0v-30l20 30v-30m10 30v-30l20 30v-30m7.5 0l10 15l10-15m-10 15v15m30-30h15l5 5v5l-5 5l5 5v5l-5 5h-15zm5 5h7.5l2.5 2.5l-5 5h-5zm0 12.5h5l5 5l-2.5 2.5h-7.5zm25 12.5v-25l5-5h10l5 5v25h-5v-10h-10v10zm5-15v-7.5l2.5-2.5h5l2.5 2.5v7.5zm25 5v5l5 5h10l5-5v-5l-15-12.5l2.5-2.5h5l2.5 2.5v2.5h5v-5l-5-5h-10l-5 5v5l15 12.5l-2.5 2.5h-5l-2.5-2.5v-2.5zm30 10v-30h5v30zm15-5l5 5h10l5-5v-5h-5v2.5l-2.5 2.5h-5l-2.5-2.5v-15l2.5-2.5h5l2.5 2.5v2.5h5v-5l-5-5h-10l-5 5z" stroke-width="2" stroke-linejoin="bevel"/></g>
</svg>
<div class="hl">Version 0.01. Created by Andrew Towers of the Dandenong Ranges, Australia</div>
</div>
</div>
<!-- content -->
<div class="sec">
<noscript><div class="tip warn">Johnny BASIC needs Javascript (ironically)<br>Please allow Javascript in your Browser settings, then re-load the page.<br><a href="/" class="btn">Reload</a></div></noscript>
<div id="JBerr" class="tip warn hid">Johnny BASIC is having trouble loading.<br>We'll keep trying, but you might need to re-load the page.<br><a href="/" class="btn">Reload</a></div>
<p class="near" style="margin-left:18.8em">What is this? <a href="/about" class="tut dim">About Johnny BASIC</a></p>
<p class="near">New to BASIC? Or new to programming? Check out our <a href="/guide" class="tut">Interactive Guide to BASIC</a></p>
</div>
<div class="sec">
<p class="tip">This project is still in its early stages. The BASIC development environment is not yet complete,
and the Interactive Guide is also still being written. Please check back often!</p>
</div>
<div class="sec">
<p>The following is a <em>scratchpad</em> that allows BASIC commands to be executed directly.<br>
Click or tap on the box below to enter BASIC commands:</p>
<div class="sbox"></div>
</div>
<div class="sec">
<h3>BASIC Quick Reference</h3>
<table class="ref">
<tr><td><code>rem</code> <i>this can be anything…</i></td><td> </td><td>the whole line is a comment (i.e. ignored)</td></tr>
<tr><td><code>let</code> <i>name</i> <code>=</code> <i>value</i> </td><td> </td><td>assign a new value to the named variable</td></tr>
<tr><td><code>let</code> <i>name</i> <b>(</b> <i>dim1</i>, <i>dim2</i>, <i>…</i> <b>)</b> <b>=</b> <i>value</i></td><td> </td><td>assign a new value to an array variable</td></tr>
<tr><td><code>dim</code> <i>name</i> <b>(</b> <i>dim1</i>, <i>dim2</i>, <i>…</i> <b>)</b></td><td> </td><td>allocate a (multi)-dimensional array of variables</td></tr>
<tr><td><code>if</code> <i>condition</i> <code>then</code> <i>statements</i> [ <code>else</code> <i>statements</i> ]</td><td> </td><td>conditionally execute one or the other</td></tr>
<tr><td><code>for</code> <i>name</i> <b>=</b> <i>first</i> <code>to</code> <i>last</i> [ <code>step</code> <i>step</i> ]</td><td> </td><td>do the following statements multiple times</td></tr>
<tr><td><code>next</code></td><td> </td><td>end of FOR loop (next iteration)</td></tr>
<tr><td><code>print</code> <i>value</i>, <i>value</i>, <i>…</i></td><td> </td><td>print out (display) one or more values</td></tr>
<tr><td><code>input</code> <i>name</i>, <i>…</i></td><td> </td><td>ask for one or more values to be entered</td></tr>
<tr><td><code>cls</code></td><td> </td><td>clear the screen (clear previous output)</td></tr>
<tr><td><code>proc</code> <i>name</i> <b>(</b> <i>value</i>, <i>…</i> <b>)</b></td><td> </td><td>invoke a named procedure (with arguments)</td></tr>
<tr><td><code>def proc</code> <i>name</i> <b>(</b> <i>name</i>, <i>…</i> <b>)</b></td><td> </td><td>define a named procedure (with arguments)</td></tr>
<tr><td><code>end proc</code></td><td> </td><td>end procedure definition</td></tr>
<tr><td><code>local</code> <i>name</i>, <i>name</i>, <i>…</i></td><td> </td><td>create local variables inside a PROC</td></tr>
<tr><td><code>data</code> <i>value</i>, <i>value</i>, <i>…</i></td><td> </td><td>declare literal data for READ</td></tr>
<tr><td><code>read</code> <i>name</i>, <i>name</i>, <i>…</i></td><td> </td><td>read one or more data values into variables</td></tr>
<tr><td><code>restore</code> <i>line</i></td><td> </td><td>set the next DATA statement to READ</td></tr>
<tr><td><code>goto</code> <i>line</i></td><td> </td><td>jump to a line number (not recommended!)</td></tr>
<tr><td><code>gosub</code> <i>line</i></td><td> </td><td>jump to a subroutine (not recommended!)</td></tr>
<tr><td><code>return</code></td><td> </td><td>return from a GOSUB back to the caller</td></tr>
</table>
<p>Use a <kdb>:</kdb> to join multiple statements on a single line.<br>
You can omit the word LET and write bare assignments like <kbd>A=2</kbd>.</p>
</div>
</div>
</body>
</html>