7 Principles of Programming - 2

Principle 2

After seeing principle 1, most people are astounded how easy programming has become.
It has allready exceeded their expecations of what they are capable of. That is a nice moment to go on to something slightly more complex.

Conditions and expressions.
var b=1;
var a=2;
if(b>0) a=a+1;

• See it in action: https://jsfiddle.net/wtgszrj4/6/

This needs a line by line explanation. b=1, a=2, we know those.
the if statement is new. It means: if b is bigger than 0 do whatever comes next.

b>0 (b is bigger than 0)
b>=0 (b is bigger than or equal to zero)
b<0 (b is smaller than 0)
b<=0 (b is smaller than or equal to zero)
b==0 (b is exactly zero)

Stick to integer math and you'll be fine.

The next thing you might want to know is the else statement.
var b=1;
var a=2;
if(b<0) a=a+1;
else a=a-1;

• See it in action: https://jsfiddle.net/wtgszrj4/7/

This means, if the statement or 'expression' in between the ( ) is true, do the first thing after if. If it is NOT true, do the first thing after else.


This is very handy. In a flow chart it is presented as such:

If you are not familiar with flow-charts, never mind. If you are, this might help you 'translate'
It is good to consider how a program reads a program at this point.
It always moves from the top, to the left. When it reaches the end of the line, it will go to the next line.
But...
If it encounters certain statements, like if this behaviour briefly changes. It can jump and the jump back.
In the case we presented only for one instruction.
So what if you want to have a couple of things happen if the statement is true?
You make a block with { and  }
Everything inside the block is considered the 'thing' after if and will be executed as a whole before moving on.
var b=1;
var a=2;
if(b>0)
{
a=a+1;
        a=a*a+1;
}
else a=a-1;

• See it in action: https://jsfiddle.net/wtgszrj4/8/

So because B>0 the block is executed, a becomes 3 and then it becomes 3*3+1=10.


Here we see indenting for the first time. There are several schools of thought on this. This is mine.
The idea is, that you find the { on the same indent-height as it's } counterpart. Not everybody agrees this is the 'right' way to do it.
You will also see this:

var b=1;
var a=2;
if(b>0){
a=a+1;
        a=a*a+1;
}else a=a-1;

It means exactly the same thing.

Ok, in the same way we might make a block for anything after else.
This is your work. Test it, change it, hit run, see what happens.
Get into the habit of forming a hypothesis and testing every bit of it.
For instance try to predict what:
var b=1;
var a=2;
if(b>0)
a=a+1;
a=a*a+1;

would do and test it.

HOW TO TEST YOURSELF AND YOUR PROGRAM!

Form a idea of what will happen. Make sure you can see it happening by some output or feedback.
Always test your hypothesis by changing something from a working example (which you have tested yourself!) and then testing the change.
If it still works, that tells you something, if it doesn't that tells you something too.
Try to think of what both cases will tell you, before you test it.
Don't change a whole bunch of things before testing.
If you find it doesn't work at that point, it will be hard trying to find the problem.
If you change one thing, test and it doesn't work, the problem is ALWAYS with the last thing you changed.
Don't disregard unexpected results. They are a learning oportunity.
If you do this always, you will NEVER be unable to solve a bug, unless it is in some part of the program, that you don't have access to. (In this case, either Javascript or JSFiddle, both are quite stable)

Ok, so we learned about:
-expressions
-conditions
-branching (doing a bit of code in a differnt place before continuing with the flow of the program)
-code blocks
-testing.

This is a lot to take in. If you feel you need a break, take 10 minutes before coming back.