forked from karlvr/learn-to-code-basic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprint.html
64 lines (53 loc) · 3.29 KB
/
print.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link href="lesson.css" rel="stylesheet">
</head>
<body>
<section class="side-by-side">
<canvas class="game right" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<div>
<article>
<h1>Welcome</h1>
<p>On the righthand side of the screen is your computer. You can only interact with this computer by typing as it doesn’t use a mouse.</p>
<p>On this page we’re going to learn how to enter programs into this computer.</p>
<h2>Need Input</h2>
<p>We’re going to type in your first program! Type in the following lines, including the line numbers, pressing [return] after typing each line:</p>
<pre>
10 PRINT "What is your name
20 INPUT a$
30 PRINT "Nice to meet you " a$</pre>
<aside>
<p>If the computer says <em>Syntax error</em> or anything strange happens, check that you’ve typed exactly what appears above including the line numbers.</p>
</aside>
<p>Each line starts with its line number. If you make a mistake on a line you can edit it using its line number. Type <code class="command">EDIT 10</code> to edit line 10, then press [return] to finish editing.</p>
<p>When you’ve finished typing your program type <code class="command">LIST</code> to show your program. If you’ve made any mistakes, edit the line that contains the mistake. If you’ve added extra lines you can remove them using the line number, for example <code class="command">DELETE 10</code>.</p>
<p>Run your program by typing <code class="command">RUN</code>.
<h2>Print</h2>
<p>The <code>PRINT</code> command prints whatever comes after it. On line 10 we gave <code>PRINT</code> a <em>string literal</em>, that is a <em>string</em> of text surrounded by <code>""</code>s.
You could type whatever you like inside those quotes. Type <code class="command">EDIT 10</code> now to change the message that gets printed out. Type <code class="command">RUN</code> to run your new program.</p>
<p>If you type a line that doesn’t start with a line number, the computer runs that command immediately rather than adding it to your program to run later. Let’s try printing a few different things to see how versatile the <code>PRINT</code> command is.</p>
<pre>
PRINT 42
PRINT "Basic"
PRINT 3.14
PRINT 8*7</pre>
<p>The last line above multiplies two numbers. Try printing a few more equations. You can use <code>*</code> for multiply, <code>+</code> and <code>-</code> as usual, and <code>/</code> for divide. You can also use <code>()</code> for more complex equations.</p>
<h2>Uppercase lowercase</h2>
<p>This programming language is called BASIC. It doesn’t matter whether you use uppercase letters or lowercase letters to type its commands, like <code>PRINT</code>, or variables, like <code>a$</code>; BASIC treats uppercase, lowercase or mixed-case as the same. Where it <em>does</em> matter is in strings.</p>
<pre>
print "It matters in strings
input A$
print "But not in variables
print a$
</article>
</div>
</section>
<script src="js/cpc.js"></script>
<script async type="text/javascript" src="https://floooh.github.io/tiny8bit/cpc.js"></script>
</body>
</html>