7 Principles of programming - 1

Principle 1

Variables.. I explain them like this:
A variable is like a little flat box. It has a label, that has the name of the variable.
You can put things in there.
You can make a box with "var";
You can put three kinds of things in there: numbers, characterstrings (not the same as words, because it can contain spaces and numbers and even linebreaks! Think of it as TEXT, if you will but call it a string) and objects.

The box can only contain one thing at a time.
If I put "hello world" in and then 1.547 the box will ONLY contain 1.547. "hello world" pops out and is lost in nothingness.

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

If you click the link, you will be redirected to a place on the web called jsFiddle.
Here you can play around with short bits of code to test a principle.

It is ideal for getting to understand a piece of code, because you can change it and hit run. You will see the result immeadeatly.
JSFiddle is NOT good for debugging. You need different tools for that.

I explain how a computer deals with numbers and character strings by showing the results of
var a=1+1;

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

and
var a=1-1;

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

Then I show the result of
var a="hello "+"world"

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

and of
var a="hello "-"world".

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

After that I ask what the difference is between var a="1"+"1" and var a=1+1.
Can you answer that? Why is the result of the last jsfiddle: NaN (meaning Not A Number)

Then I do this:
var b=1;
var a=2;
var c=a+b;

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

and I ask what C is. Most people get that. It's a good point to check if you are still with me.

Then we will start having some fun.
var a=5;
a=a+1;

If you are one of the rare people who find this exciting, we'd move on to things like.
a=a*a/2;
or even
a=a%4;
which will give you a little kick then. But most people don't like to go that far.
I think I've spent about a week in this stadium, imagining how I could get the computer to do ALL my homework. (I was 9 at the time)

Somewhere inbetween I will start putting comments in. They are color coded, which means people ignore them anyway.. But it's a nice moment to explain comments. It's not really a principle of

You will notice that I haven't touched objects yet, I just mention them. If you want to know why, read the red part. Else you can skip it for now.
In order to show the result in HTML I put it in a div, to create the div on JSFIDDLE
HTML: <div id="result"></div>

So I need to do this in Javascript:
  var result_box=document.getElementById("result");
and I use 
result_box.innerHTML=....
to show them the result when the page is loaded.

If anyone asks if document.getElementById("result") is a string or a number, I need a good answer.
The answer is that document.getElementById produces an object. And I leave a little mystery hanging there.
(Strictly speaking numbers and strings are a kind of built in object-instance, but hey.. We're just starting. That would only confuse you. I might mention it's a bit of a simplification, but it's not wrong! And it certainly helps you understand the concept of a variable, which was the idea.)