Wikijunior:Programming for Kids/Inputs, Outputs and Processes
In the previous chapter, we initialised our variable with our own value. What if we want the user to input her own value? What if we want to do something with it?
Inputs and outputs
editThere are two ways to receive input. The first is to read the input from an external text file (such as a cookie in JavaScript, a shared object in ActionScript, or just a plain old text file). The second is to prompt the user to input it, then get the value. This can be through the keyboard, the mouse, the microphone or other input devices.
There are numerous ways to receive output. The most common one is displaying it on the screen. Other ways include using the speakers, the printer, etc.
To keep things simple, in this book, we will work with popups in JavaScript and the console in Pascal.
| Code | Diagram |
|---|---|
| Pseudocode | Flowchart |
PROGARM HowOldRU
10 Output 'How old are you?'
20 Input age
30 Output 'You are' + age + 'years old.'
|
|
| Pascal | |
PROGRAM HowOldRU;
USES sysutils;
VAR
age: integer;
BEGIN
writeln('How old are you?');
readln(age);
writeln('You are ' + IntToStr(age)
+ ' years old.');
readln();
END.
|
|
| JavaScript | |
<script>
var age = prompt("How old are you?", 12);
alert("You are " + age + " years old.");
</script>
|
|
In our pseudocode, we simply prompt the user to input the age, get the age and display our message. This is very simple and our input/output method is not stated explicitly.
In our Pascal code, we first declared 'age', an integer. Then we output the text 'How old are you?' onto the console. This is our prompt. Next, we get the user's input with the readln function, and place the value inside our 'age' variable. Finally, we output the result. The IntToStr function simply converts age from an integer into a string.
Our JavaScript code is much easier as the language does more work for us. In our JavaScript code, we first prompt the user with the line 'How old are you' using a popup. On the same popup, the user can input the age. The age, which is weakly typed, is already a string at this stage. Next, we output the age.
(Note: The plus signs on the output does not indicate addition but text concatenation. We will discuss this in our later operators section.)
Assignment
editAn assignment statement helps us assign a value to a certain variable. Let's say we wanted to assign the value 60 to the variable x. In pseudocode, this can be expressed in multiple ways, while there's a fixed way to express this in Pascal and Javascript.
| Pseudocode | Flowchart | Pascal | JavaScript |
|---|---|---|---|
x ← 60
x := 60
x = 60
Put 60 into x
|
x := 60
|
x = 60
|
We can also use assign a variable to another variable. In this example, y will become 60:
| Pseudocode | Flowchart | Pascal | JavaScript |
|---|---|---|---|
x ← 60
y ← x
|
x := 60
y := x
|
x = 60
y = x
|
Sometimes, we don't know the original value of a variable, but need to add a certain number to it. In this case, we can use the following form:
| Pseudocode | Flowchart | Pascal | JavaScript |
|---|---|---|---|
y ← 60
y ← y + 3
|
y := 60
y := y + 3
|
y = 60
y = y + 3
y = 60
y += 3
|
It may be confusing why it works, but this is related to operator precedence, which we'll discuss later.
Remember that the expression on the left is always the variable you want to change, while the expression on the right is always the value to be put into the variable. Assignment statements like 2 ← 3, y + 3 ← y + 4 or myConstant ← y + 3 will result in errors as they don't make any sense! (How can you, for instance, assign 3 to 2?)
Operators
editOperators are symbols or keywords that perform a certain action on its operands (data manipulated). They may either a) return a value based on the operands or b) tell the computer to do something. (Some operators can do both, such as the ++ operator in JavaScript).
An operator can be a unary operator or a binary operator. A unary operator has only one operand. The most common unary operator is the unary minus, which reverses the sign of a number. For example -2 is negative two and -(-2) makes 2.
Binary operators are far more common. Binary operators have operands on both sides. For example, 1 + 1 returns 2. The assignment operator, which we've just met, is also a binary operator.
Arithmetic Operators
editOperators related to arithmetic are arithmetic operators. The most common common binary arithmetic operators are shown below.
| Name | Pseudocode/Flowchart | Pascal | JavaScript |
|---|---|---|---|
| Addition | + | ||
| Subtraction | - | ||
| Multiplication | * | ||
| Division | / | ||
| Exponent | ^ | N/A | |
| Modulo | MOD | % | |
| Divides | DIV | N/A | |
In all likelihood, you have no problems with the four basic operations, but Mod and Div may be a tad problematic. In fact, they're less intimidating than they might sound! In a division operation, Mod returns the remainder, while Div returns the quotient. Our usual division operator returns a fraction when the remainder is 0.
Relational Operators
editRelational operators, also known as comparison operators, compare two variables and return a Boolean variable. For example, 1 < 2 returns TRUE and 1 > 2 returns FALSE. Here are some common relational operators.
| Name | Pseudocode/Flowchart | Pascal | JavaScript |
|---|---|---|---|
| Equal to | = or == | = | == |
| Not equal to | <> | != | |
| Larger than | > | ||
| Smaller than | < | ||
| Larger than or equal to | >= | ||
| Smaller than or equal to | <= | ||
These operators can always be used with numbers. In some languages, you can compare characters, strings, Boolean values and even other types like spaceships and dinosaurs with them. However, a detailed discussion of them is outside the scope of this book, especially those parts requiring object-oriented languages.
Logical Operators
editRelational operators compare two values and turn them into Boolean values, while logical operators manipulated the Boolean values themselves. The most common logical operators are AND, OR and NOT. NOR, XOR and NAND are other logical operators. We will only discuss AND, OR, NOT and XOR in this book.
| Name | Pseudocode/Flowchart | Pascal | JavaScript |
|---|---|---|---|
| Not | NOT | ! | |
| And | AND | && | |
| Or | OR | || | |
| Exclusive or | XOR | N/A | |
- NOT simply flips a Boolean value around. NOT TRUE returns FALSE and NOT FALSE returns TRUE. If a is TRUE, then NOT a is FALSE; if b is FALSE, then NOT b is TRUE.
- AND returns TRUE if both operands are true; otherwise, it returns FALSE. TRUE AND FALSE returns FALSE, while TRUE AND TRUE returns TRUE.
- OR returns FALSE if both operands are false; otherwise, it returns TRUE. TRUE OR FALSE returns TRUE, while FALSE OR FALSE returns FALSE.
- XOR returns TRUE if one and only one of the operands is TRUE. TRUE XOR FALSE returns TRUE, while TRUE XOR TRUE returns FALSE.
All this can be very confusing! A truth table shows all the outcomes of these logical expressions. Let's say we have two Boolean variables, p and q. Here are the truth tables for NOT p, p AND q, and p OR q:
| p | NOT p |
|---|---|
| T | F |
| F | T |
| p | q | p AND q |
|---|---|---|
| T | T | T |
| T | F | F |
| F | T | F |
| F | F | F |
| p | q | p OR q |
|---|---|---|
| T | T | T |
| T | F | T |
| F | T | T |
| F | F | F |
With this in mind, we can easily create more complicated truth tables (the round brackets are called the grouping operator and indicate that the parts inside are to be performed first):
| p | q | p OR q | NOT(p OR q) |
|---|---|---|---|
| T | T | T | F |
| T | F | T | F |
| F | T | T | F |
| F | F | F | T |
Relational operators are often used with comparison operators. For example, NOT((1 = 2) OR (2 < 3)) gives TRUE. We will see how useful they are in the coming chapters.
Other Operators
editThe text concatenation operator combines strings together in a process known as concatenation. For example, when we concatenate the strings 'Wiki' and 'books', the resultant string is 'Wikibooks'. In pseudocode, Pascal and JavaScript, the text concatenation operator is +. In JavaScript, if one or both operands is/are a string, the operator will be the text concatenation operator. ("a" + 2 returns "a2"). If both operands are numbers, the result will be a number. In Pascal, we must make sure that either the operands are of the same data type.
JavaScript also has a number of interesting additional operators, including the increment operators, compound assignment operators (+=, which we've met above, is an example) and bitwise operators. We will cover some of them as we go along, but we won't have a detailed discussion here.
Order of operations
editRemember the order of operations (PEMDAS or BOMDAS/BIMDAS) you learnt in Maths class? ActionScript also applies different operators in a fixed order. In programming, there are two things we need to consider when determining the order of operations: operator precedence and operator associativity.
What is operator precedence?
editWhen one operator is always evaluated before the other, we call it operator precedence. Here's a quick lowdown on operator precedence in JavaScript:
| Pascal | JavaScript |
|---|---|
|
|
If we want a certain operation to have higher precedence, we should use the grouping operator, which is a pair of round brackets: ().
We must be very careful with our operator precedence in programming, or errors will result. When in doubt, it is advisable to use the grouping operator.
What is operator associativity?
editConsider the statement my_number ← 3 * 2 + 5 * 6. 3 * 2 and 5 * 6 have the same precedence, so which one should be performed first? This can be answered with operator associativity. Associativity also varies, but the associativity of the assignment operator is nearly always right to left. For this reason, x ← x + 3 will add 3 to x as the addition operation is performed first.
Calling subprograms
editA subprogram is a smaller program that performs a certain task. To work, the parent program should give, or 'pass', some data to the subprogram. The subprogram has a number of parameters that pass the arguments to the subprogram. Some subprograms have a return value; others don't. In some languages, including Pascal, procedures are subprograms that do not return a value, and functions are subprograms that do return a value. In others, functions and subprograms are the same.
As an example, if you have experience with spreadsheets, you must have used the function SUM(<cell range>). SUM is a subprogram with one parameter. The cell range we pass to the subprogram is an argument. This function returns a value, which is the sum of the cells. (Note: All spreadsheet functions return values.)
To illustrate, we will first make a subprogram without a return value, then a subprogram without.