Video Introduction
(00 minutes) <<--- Watch this video first, then
English IDE <<--- Click this link and write your calculator program here. [Q]
When your calculator runs, click the yellow Done button in the IDE to continue.
If you are like me and prefer to read at your own pace
instead of whatever pace set in some video, You can read
the transcript (and probably come out ahead of the non-readers).
Today
we begin a serious program -- not a graphical toy like PBJ, but a real
program like people get paid for. YOU will write a 4-function calculator
something like this one.
First let's think about exactly what a calculator does. Obviously it calculates, but that's not good enough for the stupid computer, which must be told every tiny little step. When I did this stuff (and got paid for it!) I had to write code for every operation -- even long multiplication and division. Do they teach that stuff in school any more? They did when I went to school, but you-all just buy a $2 calculator at the Dollar store. Which is OK, both Java and the English computer know how to multiply and divide. The computer hardware knows how to multiply and divide (I was on the committee that set the standard).
But we still need to tell it what steps to do in what order, broken down into the Six Concepts you already know about -- and nothing else. So here they are, to remind us this is what we are aiming for:
Six Concepts
Sequence -- Steps, one by one, in order
Iteration -- A sequence that is repeated more than once
Conditional -- A sequence that is skipped, depending on some test
Variables -- Named values stored in memory, with commands to change the values
Input/Output -- Bringing values in from outside the computer, or sending them out
Subroutines -- A named sequence called up from somewhere else by a single command
Before we can do that, we must understand (in our own heads) exactly
what a calculator does when we push the buttons. It turns out to be exactly
what we do when we do the same calculation in our heads (or on paper: I
do a lot on paper). If you do not want to know how things work, you cannot
tell the computer how things work. You cannot tell the computer what is
not in your head. Not even the AI people do that.
OK, here's the schoolkid version
2 + 3 = ?Those four buttons are the buttons you press on the 4-function you get from the Dollar store, and (before Siri) those are the same virtual buttons you touch on the calculator in your iPhone. Then you look at the answer (that's the question mark in the line above, looking at the answer). But that's what you as a user do. What does the computer inside the calculator or smart phone do? That's the part we need to program.
When you press a button, the computer sees it as Input, one of our Six Concepts. Four buttons, four inputs, simple as that.
When you (the user) look at the display, you are looking at Output, ditto.
Done. That's the whole line.
Well, not quite. The computer must decide what to put on the display. Usually the calculator must put something on the display every step of the way, not just the answer. But how do we get there? That's what Top-Down Design (TDD) is all about. We start with the title, what does this program DO? That's the title:
Calculator
Now we want two or three lines describing in general terms how that
happens. What's the first thing that happens? We had four of them, remember?
That's next. We could start typing it into the program panel of the IDE:
"Calculator"
Four inputs
Add the numbers
Display the result
The four inputs we can spell out more particularly. I could make
a subroutine here, but as you can see, each of those four inputs is already
computer code, so I will just convert the one line into a comment (that
means the computer ignores it, it's just there to remind us humans what
is happening) by surrounding it with curly braces:
"Calculator"
{Four inputs}
Input first
Input plus
Input second
Input equal
Add the numbers
Display the result
Maybe you didn't notice, but those words that follow the "Input"
word on each of those four lines? They are variables. That's another
of our Six Concepts. If you were to Run this program -- just as
it is -- in the IDE, it would stop and wait for you to "Type your input,
then Enter" (for the first number), and then again (for the plus),
and again two more times (for the second and the equal).
Then it doesn't know what to do, maybe it will assume something, or maybe
realize it doesn't know and stop, whatever.
OK, let's work on the next line. It isn't actual code yet (as you can see in the Quick Reference at the bottom of the IDE page) so let's make it a comment while we figure out what to do with it.
"Calculator"
{Four inputs}
Input first
Input plus
Input second
Input equal
{Add the numbers}
Display the result
What happens when you add the numbers? Where does the result go?
Do you remember the discussion on variables?
Does this look like something you saw there? Let's name our variable "result"
and you fill in the rest:
"Calculator"
{Four inputs}
Input first
Input plus
Input second
Input equal
{Add the numbers}
Let result = ____
Display the result
Now let's see what the English computer will do with this. Normally
you would just be typing this into the program panel all along, so there's
nothing left to do but click Run. Well, you still get to type it
in. Do you think you can fill out the last line? Then click the blue Step
button and see if you understand each line, what it does. Notice that the
comments, it doesn't do anything there.
Did you leave the last line unchanged? What happened? What did it do?
Even if you understand what is going on, your user (when you show it off to family and friends) will have no idea what to type when it stops for input. Whenever you write a program for Real People to use, you must be careful to tell them what is going on, especially when you want them to do something, like type some input, like this:
"Calculator"
{Four inputs}
Print "Input your first number:"
Input first
Print "What do you want to do (* - * /)?"
Input plus
Print "Input your the number to do it with:"
Input second
Print "Input ="
Input equal
...
Display "The result is " the result
We are not done yet, this calculator only adds. If the user types
in a star, it should multiply. Maybe we should change the name of that
variable to "operator" to better reflect what the user will be
typing there.
If you look at the specification for the Input command (see the link in the Quick Reference at the bottom of the IDE) you can see that there's an optional number following the variable name, which if you specify "1" it accepts a single character and no Enter key is needed, like this:
"Calculator"
{Four inputs}
Input first
Input operator,1
...
Now let's see what we need to change so we can use that input character
to decide what operation to do. For that we need a conditional, one of
the Six Concepts:
If operator = "+" then
Let result = first+second
What if the user typed in a minus? Or star? You fill in the other
three operators (as separate lines).
One more improvement, we have a fourth input line, but the value being input there is not used. Why make the user type in something that isn't going to be used? Later, when we redo this calculator on the Game Engine with real buttons, we will see why all the calculators have an Equal button, but we don't need it today, the Enter at the end of the second number serves that purpose. Take that line out and see if it's better or worse.
Are we finished? Click the yellow Done button in the IDE to tell
the rest of us that you are happy with your calculator program.
1 + 2 + 3 + 4 = ?
If you, a person, were trying to do it in your head, you would break
it down into bite-sized steps:
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
Did you see what we did there? We know how to add two numbers, we
already told the computer how to do that. So we add the first two numbers,
then plug the result of that sum into the first input part of the second
addition. Only we don't want to make the user retype that intermediate
result, the computer already knows it.
Let's go back to our TDD and add a layer on top:
"Calculator"
First calculation
Three inputs
Do the operation
If + then Add
...
Display the result
Additional calculations
What's inside the "Additional calculations" section? It's kind of
like the "First calculation" except the first variable value comes from
the previous result instead of from an input. So let's reshuffle our design
a little to reflect this new insight:
"Any Calculation"
{Two inputs}
Input operator
Input second
{Do the operation}
{If + then Add}
...
Display the result"Calculator"
{First calculation}
Input first
Do Any Calculation
{Additional calculations}
Let first = result
Do Any Calculation
I colored in green the parts
you need to fill in from your previous version. Fix your calculator program
to be like this design, then run it and give it this problem:
1 + 2 + 3 + 4 = ?
Did it work? Why not?
What we really need here is an iteration (another of the Six Concepts) to repeat (added code in blue) the "Additional calculations" part of the program:
Repeat
{Additional calculations}
Let first = result
Do Any Calculation
Next
However this will repeat forever unless we tell it when to stop.
A program that gets stuck in an iteration like this is said to "hang" in
"an infinite loop." It's very bad form (unless you are writing a control
application that needs to run forever), so let's think about when we want
the program to end. The user should always be in control, so we can let
the user enter a special operator like "Q" for "Quit". This should always
be after the user has finished the previous operation, that is, we did
the calculation and showed the result, and preferably it should not require
any extra attention from the user when they still have more calculation
to do.
Use the blue Step button in the IDE to step through your program while doing the following calculation, and see if you can figure out where to put the test for Quit:
2 + 3 = ?
Hint: you will use an existing input. Here is the line that you
can put there, after you decide where to put it:
If operator = "Q" then Stop
The interesting thing about this program is
that you have a subroutine that is called from two different parts of the
program, using different values for the first variable. In the
English computer all variables are visible everywhere in the program --
which is fine for beginning and small programs like this, but disaster
for large programs -- so most languages encourage you to define your variables
local
to the subroutines, and when they need different values when called from
different places (like first in the "Any Calculation" subroutine
here) they are set in a special type of local variable called a parameter.
You will see how that works when you rewrite this program in Java. Also,
one of the callers of this subroutine is using a result variable
calculated inside the subroutine; this is again done with a special form
of subroutine called a function. We will learn more about functions
when you need them in Java.
Do you understand every line in your program? If you don't know what every line does and why, try using the Step button to step through this summation, watching what happens to the variables as you go:
1 + 2 + 3 + 4 = ?
If you are still confused, click the Ask button in Zoom, or the
Mentor Alert button here (or in the IDE). It is important for you to understand
every part of each program you work on. Otherwise you cannot write your
own programs from scratch.
Congratulations! Your program ran correctly. Click this
link to advance to the next program: Guessing Game
[2021 December 11]